From 7a4c92526e35a197ff98bd846f30c6693059a501 Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Thu, 26 Mar 2026 16:50:31 +0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20add=20"add=20to=20list"?=
 =?UTF-8?q?=20button=20to=20banner=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/sections/Hero/components/Swiper.tsx    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/features/home/sections/Hero/components/Swiper.tsx b/features/home/sections/Hero/components/Swiper.tsx
index 09c1362..2b78bdd 100644
--- a/features/home/sections/Hero/components/Swiper.tsx
+++ b/features/home/sections/Hero/components/Swiper.tsx
@@ -6,6 +6,7 @@ import { Autoplay, Navigation, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { Icon } from "@iconify/react";
 import Link from "next/link";
+import { useAuth } from "@/shared/contexts/AuthContext";
 
 export interface HeroSwiperProps {
   data: {
@@ -22,6 +23,7 @@ export interface HeroSwiperProps {
 }
 
 const HeroSwiper = (props: HeroSwiperProps) => {
+  const { session } = useAuth();
   return (
     <div className="h-full rounded-lg overflow-hidden">
       <Swiper
@@ -62,14 +64,14 @@ const HeroSwiper = (props: HeroSwiperProps) => {
               <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
                 {slide.synopsis}
               </p>
-              <div className="flex mt-6">
+              <div className="flex gap-2 mt-6 h-12">
                 <Link
                   href={`/media/${slide.slug}`}
-                  className="w-fit h-fit rounded-xl overflow-hidden"
+                  className="w-fit h-full rounded-xl overflow-hidden"
                 >
                   <Button
                     size="lg"
-                    className=" h-12 flex gap-2 px-4 hover:bg-neutral-950 group"
+                    className="h-full flex gap-2 px-4 hover:bg-neutral-950 group"
                   >
                     <div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
                       <Icon
@@ -82,6 +84,15 @@ const HeroSwiper = (props: HeroSwiperProps) => {
                     </span>
                   </Button>
                 </Link>
+                {session?.user && (
+                  <Button
+                    variant="secondary"
+                    className="h-full flex gap-2 px-4 rounded-xl border border-neutral-400/10 bg-neutral-950/20 hover:bg-neutral-950/40 backdrop-blur-lg text-neutral-200"
+                  >
+                    <Icon icon="boxicons:bookmark" className="size-6" />
+                    <span>Add to List</span>
+                  </Button>
+                )}
               </div>
             </div>
           </SwiperSlide>