Added courses for langing page

Author: tabuna

app/School/Courses.php

@@ -2,16 +2,18 @@
 
 namespace App\School;
 
+use Illuminate\Support\Collection;
+
 class Courses
 {
     /**
-     * Get the courses items.
+     * Get the teachers items.
      *
      * @return array
      */
-    public static function items(): array
+    public static function teachers(): Collection
     {
-        return [
+        return collect([
             Teacher::make('Михаил Протасевич', '/img/community/protasevich.jpg', [
                 new Course(
                     'Laravel Reverb',
@@ -113,6 +115,18 @@ public static function items(): array
                     'https://www.youtube.com/playlist?list=PLoonZ8wII66hKbEvIVAZnp1h4CE-4Mtk4'
                 ),
             ]),
-        ];
+        ]);
+    }
+
+    /**
+     * Get the courses items.
+     *
+     * @return array
+     */
+    public static function items(): Collection
+    {
+        return static::teachers()
+            ->map(fn(Teacher $teacher) => $teacher->courses)
+            ->flatten();
     }
 }

public/build/assets/app-DKT7jrpA.css renamed to public/build/assets/app-BEZ5dSej.css

@@ -12,12 +12,12 @@
     "src": "public/img/ui/warning.svg"
   },
   "resources/css/app.scss": {
-    "file": "assets/app-DKT7jrpA.css",
+    "file": "assets/app-BEZ5dSej.css",
     "src": "resources/css/app.scss",
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-DhmmTq3Y.js",
+    "file": "assets/app-Kqr10Ojd.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,

public/build/assets/app-DhmmTq3Y.js renamed to public/build/assets/app-Kqr10Ojd.js

@@ -107,6 +107,7 @@ $utilities: (
 @import 'marketing';
 @import 'post';
 @import 'gagarin';
+@import "slider";
 
 .avatar {
     border-radius: 10em;

public/build/manifest.json

@@ -0,0 +1,49 @@
+$animationSliderSpeed: 40s;
+
+// Animation
+@keyframes scroll {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(calc(-250px * 7))}
+}
+
+
+// Styling
+.slider {
+    margin: auto;
+    overflow:hidden;
+    position: relative;
+    width: 100%;
+
+    &::before,
+    &::after {
+        background: linear-gradient(to right,  var(--bs-body-bg) 0%,rgba(255,255,255,0) 100%);
+        content: "";
+        height: 100%;
+        position: absolute;
+        width: 200px;
+        z-index: 2;
+        pointer-events: none;
+    }
+
+    &::after {
+        right: 0;
+        top: 0;
+        transform: rotateZ(180deg);
+    }
+
+    &::before {
+        left: 0;
+        top: 0;
+    }
+
+    .slide-track {
+        animation: scroll $animationSliderSpeed linear infinite;
+        display: flex;
+        width: calc(250px * 14);
+    }
+
+    .slide {
+        min-width: 250px;
+        width: 20rem;
+    }
+}

resources/css/app.scss

@@ -339,7 +339,7 @@ class="link-body-emphasis text-decoration-none icon-link icon-link-hover stretch
             </div>
         </div>
 
-        @foreach($teachers as $key => $teacher)
+        @foreach(\App\School\Courses::teachers() as $key => $teacher)
 
             <div class="row g-0 rounded bg-body-tertiary mb-5">
                 <div class="col-lg-4 {{ $key % 2 === 0 ? 'order-lg-last' : '' }}">

resources/css/slider.scss

@@ -384,6 +384,29 @@ class="stretched-link link-light text-decoration-none">Railt</a></h3>
 
     @include('particles.sponsors')
 
+    <x-container class="mt-5 py-5">
+        <div class="slider rounded">
+            <div class="slide-track">
+                @foreach(\App\School\Courses::items()->shuffle() as $key => $course)
+                    <div class="col-12 col-md-6 col-lg-4 col-sm-2 mx-3 slide">
+                        <div
+                            class="d-grid gap-4 d-flex align-items-center position-relative  rounded bg-body-tertiary h-100 p-3">
+                            <img src="{{ $course->image }}" height="80">
+                            <a href="{{ $course->link }}" rel="nofollow"
+                               target="_blank"
+                               class="link-body-emphasis stretched-link text-decoration-none text-balance">
+                                <p class="h6 mb-2">{{ $course->name }}</p>
+                                <p class="opacity-75 line-clamp line-clamp-3 small">
+                                    {{ $course->description }}
+                                </p>
+                            </a>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+        </div>
+    </x-container>
+
     <div class="container mt-5 py-5">
         <div class="row g-4 g-md-5 align-items-center justify-content-between">
             <div class="col-xl-7 col-md-6 order-2 order-md-1">
@@ -529,7 +552,6 @@ class="link-body-emphasis fw-semibold text-decoration-none icon-link icon-link-h
 
 
 
-
     <div class="container mt-5 py-5">
 
         <div class="row g-4 g-md-5 justify-content-center align-items-end mb-5">

resources/views/pages/courses.blade.php

@@ -37,7 +37,7 @@
 Route::view('/donate', 'pages.donate')->name('donate');
 Route::view('/donate/frame', 'pages.donate-frame')->name('donate.frame');
 
-Route::view('/courses', 'pages.courses', ['teachers' => \App\School\Courses::items()])->name('courses');
+Route::view('/courses', 'pages.courses')->name('courses');
 Route::view('/assets', 'pages.assets')->name('assets');
 Route::view('/boilerplate', 'pages.boilerplate')->name('boilerplate');