From 72f13c7c2e02c4e4e86e1e159056c30279597617 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Wed, 25 Mar 2026 19:44:54 +0700
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20restructure=20?=
 =?UTF-8?q?hero=20swiper=20to=20be=20media-specific?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/sections/Hero/components/Swiper.tsx  | 122 +++++++-----------
 1 file changed, 47 insertions(+), 75 deletions(-)

diff --git a/features/home/sections/Hero/components/Swiper.tsx b/features/home/sections/Hero/components/Swiper.tsx
index 82239d8..60f11c2 100644
--- a/features/home/sections/Hero/components/Swiper.tsx
+++ b/features/home/sections/Hero/components/Swiper.tsx
@@ -5,19 +5,19 @@ import { Button } from "@/shared/libs/shadcn/ui/button";
 import { useRouter } from "next/navigation";
 import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
+import { Icon } from "@iconify/react";
 
 export interface HeroSwiperProps {
   data: {
     id: string;
-    isClickable: boolean;
     title: string;
-    tags: string[];
-    description: string;
-    buttonContent: string;
-    buttonLink: string;
+    slug: string;
     imageUrl: string;
-    startDate: string;
-    endDate: string;
+    synopsis: string;
+    genres: {
+      slug: string;
+      name: string;
+    }[];
   }[];
 }
 
@@ -34,82 +34,54 @@ const HeroSwiper = (props: HeroSwiperProps) => {
         autoplay={{ delay: 5000, disableOnInteraction: false }}
         modules={[Autoplay, Pagination, Navigation]}
       >
-        {props.data.map((slide) =>
-          slide.imageUrl ? (
-            // Slide with image background
-            <SwiperSlide key={slide.id} className="relative overflow-hidden">
-              <img
-                src={slide.imageUrl}
-                alt={slide.title}
-                className="absolute top-0 left-0 z-0 object-cover w-full h-full opacity-80"
-              />
-              {slide.title && slide.description && (
-                <div
-                  className="absolute top-0 left-0 z-10 h-full w-full py-16 px-20"
-                  style={{
-                    background:
-                      "linear-gradient(90deg,rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%)",
-                  }}
-                >
-                  <h1 className="text-6xl font-semibold tracking-tight">
-                    {slide.title}
-                  </h1>
-                  <div className="mt-4 flex gap-1.5">
-                    {slide.tags.map((tag) => (
-                      <Badge
-                        className="bg-neutral-200 text-neutral-800"
-                        key={tag}
-                      >
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                  <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
-                    {slide.description}
-                  </p>
-                  {slide.isClickable && (
-                    <Button
-                      size="lg"
-                      onClick={() => router.push(slide.buttonLink)}
-                      className="mt-6"
-                    >
-                      {slide.buttonContent}
-                    </Button>
-                  )}
-                </div>
-              )}
-            </SwiperSlide>
-          ) : (
-            // Fallback for slides without image
-            <SwiperSlide
-              key={slide.id}
-              className="relative overflow-hidden bg-neutral-800 flex flex-col items-center text-center pt-18"
+        {props.data.map((slide) => (
+          <SwiperSlide key={slide.id} className="relative overflow-hidden">
+            <img
+              src={slide.imageUrl}
+              alt={slide.title}
+              className="absolute top-0 left-0 z-0 object-cover w-full h-full opacity-80"
+            />
+            <div
+              className="absolute top-0 left-0 z-10 h-full w-full py-16 px-20"
+              style={{
+                background:
+                  "linear-gradient(90deg,rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%)",
+              }}
             >
               <h1 className="text-6xl font-semibold tracking-tight">
                 {slide.title}
               </h1>
-              <div className="mt-4 flex justify-center gap-1.5">
-                {slide.tags.map((tag) => (
-                  <Badge className="bg-neutral-200 text-neutral-800" key={tag}>
-                    {tag}
+              <div className="mt-4 flex gap-1.5">
+                {slide.genres.map((genre) => (
+                  <Badge
+                    className="bg-neutral-200 text-neutral-800"
+                    key={genre.slug}
+                  >
+                    {genre.name}
                   </Badge>
                 ))}
               </div>
-              <p className="mt-4 font-medium text-base max-w-[40vw] mx-auto">
-                {slide.description}
+              <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
+                {slide.synopsis}
               </p>
-              {slide.isClickable && (
-                <Button
-                  size="lg"
-                  onClick={() => router.push(slide.buttonLink)}
-                  className="mt-6"
-                >
-                  {slide.buttonContent}
-                </Button>
-              )}
-            </SwiperSlide>
-          ),
-        )}
+              <Button
+                size="lg"
+                onClick={() => router.push(`/media/${slide.slug}`)}
+                className="mt-6 h-12 rounded-xl flex gap-2 px-4 hover:bg-neutral-950 group"
+              >
+                <div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
+                  <Icon
+                    icon="solar:play-bold"
+                    className="text-primary group-hover:text-neutral-950"
+                  />
+                </div>
+                <span className="font-semibold text-neutral-950 group-hover:text-primary">
+                  Watch Now
+                </span>
+              </Button>
+            </div>
+          </SwiperSlide>
+        ))}
       </Swiper>
     </div>
   );