refactored some code

features/home/components/Carousel.tsx

@@ -1,38 +1,54 @@
-"use client"
-import Image, { type StaticImageData } from "next/image"
-import { Swiper, SwiperSlide } from "swiper/react"
-import { Autoplay } from "swiper/modules"
-import "swiper/css"
+"use client";
+import Image, { type StaticImageData } from "next/image";
+import Link from "next/link";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Autoplay } from "swiper/modules";
+import "swiper/css";
 
 type CarouselItem = {
-  title: string
-  image: StaticImageData | string
-  url?: string | null
-}
+  title: string;
+  image: StaticImageData | string;
+  url?: string | null;
+};
 
 export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
   return (
     <section className="rounded-2xl overflow-hidden">
-      <Swiper 
-        modules={[Autoplay]} 
-        slidesPerView={1} 
-        loop 
+      <Swiper
+        modules={[Autoplay]}
+        slidesPerView={1}
+        loop
         autoplay={{ delay: 3000, disableOnInteraction: false }}
       >
         {items.map((item, i) => (
           <SwiperSlide key={i}>
-            <div className="relative w-full h-[200px] sm:h-[300px] md:h-[496px]">
-              <Image 
-                src={item.image} 
-                alt={item.title} 
-                fill 
-                className="object-cover"
-                priority={i === 0}
-              />
-            </div>
+            {item.url ? (
+              <Link
+                href={item.url}
+                className="block relative w-full h-[200px] sm:h-[300px] md:h-[496px]"
+              >
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                  priority={i === 0}
+                />
+              </Link>
+            ) : (
+              <div className="relative w-full h-[200px] sm:h-[300px] md:h-[496px]">
+                <Image
+                  src={item.image}
+                  alt={item.title}
+                  fill
+                  className="object-cover"
+                  priority={i === 0}
+                />
+              </div>
+            )}
           </SwiperSlide>
         ))}
       </Swiper>
     </section>
-  )
-}
+  );
+}

features/home/components/ProductCard.tsx

@@ -347,7 +347,7 @@ export default function ProductCard({
             {isOutOfStock && (
               <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
                 <Badge variant="secondary" className="text-sm font-bold">
-                  Out of Stock
+                  {t("outOfStock")}
                 </Badge>
               </div>
             )}