Update

resources/views/pages/work.blade.php

@@ -0,0 +1,122 @@
+@extends('layouts.site')
+
+@section('content')
+  <section class="portfolio-area">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-12 text-center">
+          <x-block keycode="WORK-HEADER"></x-block>
+        </div> <!-- end .col-lg-12 -->
+      </div> <!-- end .row -->
+      <div class="row">
+        <div class="col-lg-12">
+          <div class="portfolio-filter">
+            <button class="active" data-filter="all">{{ trans('fp.ALL') }}</button>
+            @foreach($categories as $category)
+              <button data-filter="{{ $category['filter'] }}">{{ $category['title'] }}</button>
+            @endforeach
+          </div>
+          <div class="portfolio-projects">
+            @forelse(collect($artworks)->sortBy('sort_order')->values() as $artwork)
+              @php
+                $subline = $artwork['subline'] ?? null;
+                $subtitle = $artwork['subtitle'] ?? null;
+                $thumbnail = $artwork['thumbnail'] ?? ['type' => 'image', 'url' => $artwork['image'] ?? null];
+              @endphp
+              <div class="project-card {{ implode(' ', $artwork['filters']) }}" data-order="{{ $artwork['sort_order'] ?? 0 }}" style="order: {{ $artwork['sort_order'] ?? 0 }};">
+                <a href="{{ $artwork['url'] }}">
+                <div class="project-img-wrapper">
+                  @if(($thumbnail['type'] ?? 'image') === 'bunny' && !empty($thumbnail['embedUrl']))
+                  <iframe class="project-slot__iframe" 
+                          src="{!! $thumbnail['embedUrl'] !!}" 
+                          frameborder="0" 
+                          style="width: 100%; aspect-ratio: 587/673;pointer-events:none;" 
+                          allow="autoplay; fullscreen; picture-in-picture" 
+                          allowfullscreen="">
+                  </iframe>
+                  @else
+                    <img src="{{ $thumbnail['url'] ?? $artwork['image'] }}" alt="{{ $artwork['title'] }}" loading="lazy">
+                  @endif
+                </div></a>
+                <div class="portfolio-info">
+                  <h4>{{ $artwork['title'] }}</h4>
+                  @if($subline || $subtitle)
+                    <span>{{ $subline ?: $subtitle }}</span>
+                  @endif
+                </div> <!-- end .portfolio-info -->
+              </div> <!-- end .project-card -->
+            @empty
+              <div class="mt-4 text-center">
+              <p class="text-center">{{ trans('fp.NO_PUBLISHED_PROJECTS_YET') }}</p>
+              </div> <!-- end .mt-4 -->
+            @endforelse
+          </div> <!-- end .portfolio-projects -->
+        </div> <!-- end .col-lg-12 -->
+      </div> <!-- end .row -->
+    </div> <!-- end .container -->
+  </section> <!-- end .portfolio-area -->
+@endsection
+
+@push('scripts')
+  <script>
+    gsap.registerPlugin(ScrollTrigger);
+
+    document.fonts.ready.then(() => {
+      gsap.set('.portfolio-filter button', { opacity: 1 });
+
+      gsap.fromTo(
+        '.portfolio-filter button',
+        {
+          y: '-=50',
+          opacity: 0,
+          rotation: 'random(-30,30)'
+        },
+        {
+          y: '0',
+          opacity: 1,
+          rotation: 0,
+          duration: 0.8,
+          ease: 'back.out(1.5)',
+          stagger: 0.15,
+          scrollTrigger: {
+            trigger: '.portfolio-filter',
+            start: 'top 80%',
+            toggleActions: 'play none none none'
+          }
+        }
+      );
+    });
+  </script>
+@endpush
+
+@push('scripts')
+  <script>
+    gsap.registerPlugin(ScrollTrigger);
+
+    document.fonts.ready.then(() => {
+      gsap.set('.portfolio-filter button', { opacity: 1 });
+
+      gsap.fromTo(
+        '.portfolio-filter button',
+        {
+          y: '-=50',
+          opacity: 0,
+          rotation: 'random(-30,30)'
+        },
+        {
+          y: '0',
+          opacity: 1,
+          rotation: 0,
+          duration: 0.8,
+          ease: 'back.out(1.5)',
+          stagger: 0.15,
+          scrollTrigger: {
+            trigger: '.portfolio-filter',
+            start: 'top 80%',
+            toggleActions: 'play none none none'
+          }
+        }
+      );
+    });
+  </script>
+@endpush