From 73ed6ce3b89bcc160b5ec3aaafe4dfa90df4dd74 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Thu, 26 Mar 2026 15:22:01 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20correct=20watch=20button?=
 =?UTF-8?q?=20and=20genre=20on=20swiper?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/sections/Hero/components/Swiper.tsx  | 50 ++++++++++---------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/features/home/sections/Hero/components/Swiper.tsx b/features/home/sections/Hero/components/Swiper.tsx
index f722fbb..09c1362 100644
--- a/features/home/sections/Hero/components/Swiper.tsx
+++ b/features/home/sections/Hero/components/Swiper.tsx
@@ -2,10 +2,10 @@
 import "swiper/css";
 import { Badge } from "@/shared/libs/shadcn/ui/badge";
 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";
+import Link from "next/link";
 
 export interface HeroSwiperProps {
   data: {
@@ -22,7 +22,6 @@ export interface HeroSwiperProps {
 }
 
 const HeroSwiper = (props: HeroSwiperProps) => {
-  const router = useRouter();
   return (
     <div className="h-full rounded-lg overflow-hidden">
       <Swiper
@@ -53,32 +52,37 @@ const HeroSwiper = (props: HeroSwiperProps) => {
               </h1>
               <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>
+                  <Link href={`/genres/${genre.slug}`} key={genre.slug}>
+                    <Badge className="bg-neutral-100/60 backdrop-blur-lg text-neutral-800">
+                      {genre.name}
+                    </Badge>
+                  </Link>
                 ))}
               </div>
               <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
                 {slide.synopsis}
               </p>
-              <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 className="flex mt-6">
+                <Link
+                  href={`/media/${slide.slug}`}
+                  className="w-fit h-fit rounded-xl overflow-hidden"
+                >
+                  <Button
+                    size="lg"
+                    className=" h-12 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>
+                </Link>
+              </div>
             </div>
           </SwiperSlide>
         ))}