From 022c7290b42b837818c5e5d8742188fb5a6ef733 Mon Sep 17 00:00:00 2001
From: "@jcarymuhammedow" <jcarymuhammedow@gmail.com>
Date: Fri, 6 Feb 2026 18:52:48 +0500
Subject: [PATCH] changed some styles

---
 components/ui/slider.tsx                      |  2 +-
 features/cart/components/CartItemCard.tsx     |  4 +-
 .../category/components/CategoryFilters.tsx   | 99 ++++++++++---------
 .../components/CategoryFiltersSheet.tsx       | 10 +-
 .../components/CollectionFilters.tsx          | 74 ++++++++------
 .../components/CollectionFiltersSheet.tsx     |  4 +-
 features/home/components/Carousel.tsx         | 17 +++-
 features/home/components/CategoryGrid.tsx     | 63 +++++++-----
 features/home/components/ProductCard.tsx      | 51 +++++-----
 features/home/components/ProductGrid.tsx      |  8 +-
 .../components/ProductPageContent.tsx         |  4 +-
 11 files changed, 190 insertions(+), 146 deletions(-)

diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
index 09edafc..c02c190 100644
--- a/components/ui/slider.tsx
+++ b/components/ui/slider.tsx
@@ -45,7 +45,7 @@ function Slider({
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={cn(
-            "bg-[#005bff] absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            "bg-gray-900 absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
           )}
         />
       </SliderPrimitive.Track>
diff --git a/features/cart/components/CartItemCard.tsx b/features/cart/components/CartItemCard.tsx
index f0a2d85..ae31295 100644
--- a/features/cart/components/CartItemCard.tsx
+++ b/features/cart/components/CartItemCard.tsx
@@ -277,11 +277,11 @@ export default function CartItemCard({ item, onUpdate }: CartItemCardProps) {
 
   return (
     <>
-      <Card className="p-6 shadow-sm border border-gray-200 rounded-2xl hover:shadow-md transition-shadow duration-200">
+      <Card className="p-6 shadow-sm border border-gray-200 rounded-lg hover:shadow-md transition-shadow duration-200">
         <div className="flex flex-col sm:flex-row gap-6">
           {/* Product Image & Info */}
           <div className="flex gap-4 flex-1">
-            <div className="relative w-[100px] h-[133px] rounded-xl border border-gray-200 overflow-hidden shrink-0 bg-gray-50">
+            <div className="relative w-[200px] h-[200px] rounded-lg border border-gray-200 overflow-hidden shrink-0 bg-gray-50">
               <Image
                 src={getImageSrc()}
                 alt={item.product.name}
diff --git a/features/category/components/CategoryFilters.tsx b/features/category/components/CategoryFilters.tsx
index 96b01e8..cacdb52 100644
--- a/features/category/components/CategoryFilters.tsx
+++ b/features/category/components/CategoryFilters.tsx
@@ -4,6 +4,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
+import { RotateCcw } from "lucide-react";
 import type { FilterBrand, FilterCategory } from "@/lib/types/api";
 
 interface FiltersData {
@@ -50,7 +51,7 @@ export default function CategoryFilters({
   translations,
 }: CategoryFiltersProps) {
   return (
-    <div className="space-y-6 mb-6">
+    <div className="space-y-8 mb-3">
       {filtersData?.categories && filtersData.categories.length > 0 && (
         <FilterSection title={translations.category}>
           {filtersData.categories.map((category) => (
@@ -77,27 +78,6 @@ export default function CategoryFilters({
         </FilterSection>
       )}
 
-      {/* <FilterSection title={translations.sort}>
-        <RadioItem
-          name="sort"
-          checked={priceSort === "none"}
-          onChange={() => onPriceSortChange("none")}
-          label={translations.default}
-        />
-        <RadioItem
-          name="sort"
-          checked={priceSort === "lowToHigh"}
-          onChange={() => onPriceSortChange("lowToHigh")}
-          label={translations.price_low_to_high}
-        />
-        <RadioItem
-          name="sort"
-          checked={priceSort === "highToLow"}
-          onChange={() => onPriceSortChange("highToLow")}
-          label={translations.price_high_to_low}
-        />
-      </FilterSection> */}
-
       <PriceFilter
         title={translations.price}
         priceRange={priceRange}
@@ -108,7 +88,12 @@ export default function CategoryFilters({
         }}
       />
 
-      <Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}>
+      <Button
+        variant="outline"
+        className="w-full rounded-[10px] cursor-pointer mb-6 h-12 font-semibold border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 gap-2"
+        onClick={onReset}
+      >
+        <RotateCcw className="h-4 w-4" />
         {translations.reset}
       </Button>
     </div>
@@ -123,9 +108,9 @@ function FilterSection({
   children: React.ReactNode;
 }) {
   return (
-    <div>
-      <h3 className="text-lg font-semibold mb-3">{title}</h3>
-      <div className="space-y-2">{children}</div>
+    <div className="pb-6 border-b mb-2 border-gray-100 last:border-0">
+      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
+      <div className="space-y-3">{children}</div>
     </div>
   );
 }
@@ -140,9 +125,15 @@ function CheckboxItem({
   label: string;
 }) {
   return (
-    <label className="flex items-center gap-2 cursor-pointer">
-      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
-      <span className="text-sm">{label}</span>
+    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 mb-1 transition-colors">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        className="border-2 border-gray-300 data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900"
+      />
+      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
     </label>
   );
 }
@@ -159,15 +150,17 @@ function RadioItem({
   label: string;
 }) {
   return (
-    <label className="flex items-center gap-2 cursor-pointer">
+    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors">
       <input
         type="radio"
         name={name}
         checked={checked}
         onChange={onChange}
-        className="w-4 h-4"
+        className="w-4 h-4 accent-gray-900"
       />
-      <span>{label}</span>
+      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
     </label>
   );
 }
@@ -184,12 +177,15 @@ function PriceFilter({
   translations: { from: string; to: string };
 }) {
   return (
-    <div>
-      <h3 className="text-lg font-semibold mb-3">{title}</h3>
-      <div className="space-y-4">
-        <div className="flex gap-2">
+    <div className="pb-6">
+      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
+      <div className="space-y-5">
+        <div className="flex gap-3">
           <div className="flex-1">
-            <Label htmlFor="price-from" className="text-xs mb-1">
+            <Label
+              htmlFor="price-from"
+              className="text-xs font-semibold mb-2 block text-gray-700"
+            >
               {translations.from}
             </Label>
             <Input
@@ -199,11 +195,14 @@ function PriceFilter({
               onChange={(e) =>
                 onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
               }
-              className="rounded-lg"
+              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
             />
           </div>
           <div className="flex-1">
-            <Label htmlFor="price-to" className="text-xs mb-1">
+            <Label
+              htmlFor="price-to"
+              className="text-xs font-semibold mb-2 block text-gray-700"
+            >
               {translations.to}
             </Label>
             <Input
@@ -216,19 +215,21 @@ function PriceFilter({
                   parseInt(e.target.value) || 10000,
                 ])
               }
-              className="rounded-lg"
+              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
             />
           </div>
         </div>
-        <Slider
-          min={0}
-          max={99999}
-          step={100}
-          value={priceRange}
-          onValueChange={onPriceChange}
-          className="mt-2"
-        />
+        <div className="px-1">
+          <Slider
+            min={0}
+            max={99999}
+            step={100}
+            value={priceRange}
+            onValueChange={onPriceChange}
+            className="mt-2"
+          />
+        </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/features/category/components/CategoryFiltersSheet.tsx b/features/category/components/CategoryFiltersSheet.tsx
index cb7ef6c..3357234 100644
--- a/features/category/components/CategoryFiltersSheet.tsx
+++ b/features/category/components/CategoryFiltersSheet.tsx
@@ -28,7 +28,7 @@ export default function CategoryFiltersSheet({
     <Sheet open={isOpen} onOpenChange={onOpenChange}>
       <SheetTrigger asChild>
         <Button
-          className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg"
+          className=" border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 sm:hidden fixed bottom-20 right-4 rounded-[10px] cursor-pointer font-bold gap-2 z-10 shadow-lg"
           size="lg"
         >
           {filterLabel}
@@ -36,13 +36,13 @@ export default function CategoryFiltersSheet({
         </Button>
       </SheetTrigger>
       <SheetContent side="left" className="w-[290px] p-0">
-        <SheetHeader className="p-4 border-b">
-          <SheetTitle>{filterLabel}</SheetTitle>
+        <SheetHeader className="p-4 border-b text-gray-900">
+          <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
           <button
             onClick={() => onOpenChange(false)}
-            className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"
+            className="absolute top-4 right-4 rounded-[10px] cursor-pointer ring-offset-background transition-opacity hover:opacity-100 text-gray-900"
           >
-            <X className="h-4 w-4" />
+            <X className="h-4 w-4 text-gray-900" />
             <span className="sr-only">{closeLabel}</span>
           </button>
         </SheetHeader>
diff --git a/features/collections/components/CollectionFilters.tsx b/features/collections/components/CollectionFilters.tsx
index 41fbbe0..ab38dda 100644
--- a/features/collections/components/CollectionFilters.tsx
+++ b/features/collections/components/CollectionFilters.tsx
@@ -3,6 +3,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
+import { RotateCcw } from "lucide-react";
 import type { FilterBrand, FilterCategory } from "@/lib/types/api";
 
 interface FiltersData {
@@ -49,7 +50,7 @@ export default function CollectionFilters({
   translations,
 }: CollectionFiltersProps) {
   return (
-    <div className="space-y-6 mb-6">
+    <div className="space-y-8 mb-6">
       {filtersData?.categories && filtersData.categories.length > 0 && (
         <FilterSection title={translations.category}>
           {filtersData.categories.map((category) => (
@@ -76,7 +77,7 @@ export default function CollectionFilters({
         </FilterSection>
       )}
 
-      <FilterSection title={translations.sort}>
+      {/* <FilterSection title={translations.sort}>
         <RadioItem
           name="sort"
           checked={priceSort === "none"}
@@ -95,7 +96,7 @@ export default function CollectionFilters({
           onChange={() => onPriceSortChange("highToLow")}
           label={translations.price_high_to_low}
         />
-      </FilterSection>
+      </FilterSection> */}
 
       <PriceFilter
         title={translations.price}
@@ -107,7 +108,12 @@ export default function CollectionFilters({
         }}
       />
 
-      <Button variant="outline" className="w-full rounded-lg cursor-pointer mb-6" onClick={onReset}>
+      <Button 
+        variant="outline" 
+        className="w-full rounded-[10px] cursor-pointer mb-6 h-12 font-semibold border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 gap-2" 
+        onClick={onReset}
+      >
+        <RotateCcw className="h-4 w-4" />
         {translations.reset}
       </Button>
     </div>
@@ -122,9 +128,9 @@ function FilterSection({
   children: React.ReactNode;
 }) {
   return (
-    <div>
-      <h3 className="text-lg font-semibold mb-3">{title}</h3>
-      <div className="space-y-2">{children}</div>
+    <div className="pb-6 border-b border-gray-100 last:border-0">
+      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
+      <div className="space-y-3">{children}</div>
     </div>
   );
 }
@@ -139,9 +145,15 @@ function CheckboxItem({
   label: string;
 }) {
   return (
-    <label className="flex items-center gap-2 cursor-pointer">
-      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
-      <span className="text-sm">{label}</span>
+    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors mb-1">
+      <Checkbox 
+        checked={checked} 
+        onCheckedChange={onCheckedChange}
+        className="border-2 border-gray-300 data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900"
+      />
+      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
     </label>
   );
 }
@@ -158,15 +170,17 @@ function RadioItem({
   label: string;
 }) {
   return (
-    <label className="flex items-center gap-2 cursor-pointer">
+    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors">
       <input
         type="radio"
         name={name}
         checked={checked}
         onChange={onChange}
-        className="w-4 h-4"
+        className="w-4 h-4 accent-gray-900"
       />
-      <span>{label}</span>
+      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
+        {label}
+      </span>
     </label>
   );
 }
@@ -183,12 +197,12 @@ function PriceFilter({
   translations: { from: string; to: string };
 }) {
   return (
-    <div>
-      <h3 className="text-lg font-semibold mb-3">{title}</h3>
-      <div className="space-y-4">
-        <div className="flex gap-2">
+    <div className="pb-6">
+      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
+      <div className="space-y-5">
+        <div className="flex gap-3">
           <div className="flex-1">
-            <Label htmlFor="price-from" className="text-xs mb-1">
+            <Label htmlFor="price-from" className="text-xs font-semibold mb-2 block text-gray-700">
               {translations.from}
             </Label>
             <Input
@@ -198,11 +212,11 @@ function PriceFilter({
               onChange={(e) =>
                 onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
               }
-              className="rounded-lg"
+              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
             />
           </div>
           <div className="flex-1">
-            <Label htmlFor="price-to" className="text-xs mb-1">
+            <Label htmlFor="price-to" className="text-xs font-semibold mb-2 block text-gray-700">
               {translations.to}
             </Label>
             <Input
@@ -215,18 +229,20 @@ function PriceFilter({
                   parseInt(e.target.value) || 10000,
                 ])
               }
-              className="rounded-lg"
+              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
             />
           </div>
         </div>
-        <Slider
-          min={0}
-          max={99999}
-          step={100}
-          value={priceRange}
-          onValueChange={onPriceChange}
-          className="mt-2"
-        />
+        <div className="px-1">
+          <Slider
+            min={0}
+            max={99999}
+            step={100}
+            value={priceRange}
+            onValueChange={onPriceChange}
+            className="mt-2"
+          />
+        </div>
       </div>
     </div>
   );
diff --git a/features/collections/components/CollectionFiltersSheet.tsx b/features/collections/components/CollectionFiltersSheet.tsx
index a25ab29..dfef7d1 100644
--- a/features/collections/components/CollectionFiltersSheet.tsx
+++ b/features/collections/components/CollectionFiltersSheet.tsx
@@ -28,7 +28,7 @@ export default function CollectionFiltersSheet({
     <Sheet open={isOpen} onOpenChange={onOpenChange}>
       <SheetTrigger asChild>
         <Button
-          className="bg-[#005bff] hover:bg-[#0041c4] sm:hidden fixed bottom-20 right-4 rounded-lg cursor-pointer font-bold gap-2 z-10 shadow-lg"
+           className=" border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 sm:hidden fixed bottom-20 right-4 rounded-[10px] cursor-pointer font-bold gap-2 z-10 shadow-lg"
           size="lg"
         >
           {filterLabel}
@@ -37,7 +37,7 @@ export default function CollectionFiltersSheet({
       </SheetTrigger>
       <SheetContent side="left" className="w-[290px] p-0">
         <SheetHeader className="p-4 border-b">
-          <SheetTitle>{filterLabel}</SheetTitle>
+          <SheetTitle className="text-gray-900">{filterLabel}</SheetTitle>
           <button
             onClick={() => onOpenChange(false)}
             className="absolute top-4 right-4 rounded-md cursor-pointer ring-offset-background transition-opacity hover:opacity-100"
diff --git a/features/home/components/Carousel.tsx b/features/home/components/Carousel.tsx
index b154387..6bd2e44 100644
--- a/features/home/components/Carousel.tsx
+++ b/features/home/components/Carousel.tsx
@@ -2,8 +2,11 @@
 import Image, { type StaticImageData } from "next/image";
 import Link from "next/link";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Autoplay } from "swiper/modules";
+import { Autoplay, Navigation, Pagination } from "swiper/modules";
+
 import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
 
 type CarouselItem = {
   title: string;
@@ -13,12 +16,20 @@ type CarouselItem = {
 
 export default function HeroCarousel({ items }: { items: CarouselItem[] }) {
   return (
-    <section className="rounded-2xl overflow-hidden">
+    <section className="rounded-2xl overflow-hidden relative">
       <Swiper
-        modules={[Autoplay]}
+        modules={[Autoplay, Navigation, Pagination]}
         slidesPerView={1}
         loop
+        navigation
         autoplay={{ delay: 3000, disableOnInteraction: false }}
+        pagination={{ clickable: true }}
+        className="
+          [&_.swiper-button-next]:text-white!
+          [&_.swiper-button-prev]:text-white!
+          [&_.swiper-pagination-bullet]:bg-white!
+          [&_.swiper-pagination-bullet-active]:bg-white!
+        "
       >
         {items.map((item, i) => (
           <SwiperSlide key={i}>
diff --git a/features/home/components/CategoryGrid.tsx b/features/home/components/CategoryGrid.tsx
index fc61935..a5beae4 100644
--- a/features/home/components/CategoryGrid.tsx
+++ b/features/home/components/CategoryGrid.tsx
@@ -22,24 +22,42 @@ export default function CategoryGrid({
 }: Props) {
   if (isError) {
     return (
-      <section className="bg-white rounded-2xl shadow-sm p-6">
-        <h2 className="text-xl font-semibold mb-4">{title}</h2>
-        <p className="text-red-600">
-          Failed to load categories. Please try again.
-        </p>
+      <section className="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
+        <h2 className="text-2xl font-bold mb-6 text-gray-900">{title}</h2>
+        <div className="text-center py-8">
+          <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-red-50 mb-4">
+            <svg
+              className="w-6 h-6 text-red-600"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+          </div>
+          <p className="text-gray-900 font-semibold text-lg mb-2">
+            Failed to load categories
+          </p>
+          <p className="text-gray-500">Please refresh the page and try again</p>
+        </div>
       </section>
     );
   }
 
   if (isLoading) {
     return (
-      <section className="bg-white rounded-2xl shadow-sm p-6">
-        <h2 className="text-xl font-semibold mb-4">{title}</h2>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
-          {Array.from({ length: 10 }).map((_, i) => (
-            <div key={i} className="space-y-2">
-              <Skeleton className="w-full h-36 rounded-lg" />
-              <Skeleton className="h-4 w-full" />
+      <section className="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
+        <Skeleton className="h-9 w-56 mb-6 rounded-xl" />
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
+          {Array.from({ length: 12 }).map((_, i) => (
+            <div key={i} className="space-y-3">
+              <Skeleton className="w-full h-36 rounded-2xl" />
+              <Skeleton className="h-4 w-full rounded-lg" />
             </div>
           ))}
         </div>
@@ -48,27 +66,28 @@ export default function CategoryGrid({
   }
 
   return (
-    <section className="bg-white rounded-2xl shadow-sm p-6">
-      <h2 className="text-xl font-semibold mb-4">{title}</h2>
-      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+    <section className="bg-white rounded-lg shadow-sm border border-gray-100 p-2 md:p-6">
+      <h2 className="text-2xl font-bold mb-6 text-gray-900">{title}</h2>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-5">
         {categories?.map((cat) => (
           <Link
             key={cat.id}
             href={`/${locale}/category/${cat.slug}?category_id=${cat.id}`}
+            className="group"
           >
-            <Card className="hover:shadow-md border-none shadow-none p-0 gap-2 transition-all cursor-pointer">
-              <div className="relative w-full h-36 overflow-hidden rounded-lg">
+            <Card className="border p-2 border-gray-100 hover:border-gray-900 hover:shadow-lg transition-all duration-300 cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-gray-50 to-white">
+              <div className="relative w-full h-40 overflow-hidden bg-gradient-to-br from-gray-50 to-gray-100">
                 <Image
                   src={
-                    cat.media[0]?.thumbnail || cat.media?.[0]?.images_400x400
+                    cat.media[0]?.thumbnail || cat.media?.[0]?.images_800x800
                   }
                   alt={cat.name}
                   fill
-                  className="object-contain"
+                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                 />
               </div>
-              <CardContent className="py-2">
-                <p className="text-sm font-medium text-gray-800 truncate text-center">
+              <CardContent className="py-4 px-3">
+                <p className="text-sm font-semibold text-gray-900 truncate text-center group-hover:text-gray-700 transition-colors">
                   {cat.name}
                 </p>
               </CardContent>
@@ -78,4 +97,4 @@ export default function CategoryGrid({
       </div>
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/features/home/components/ProductCard.tsx b/features/home/components/ProductCard.tsx
index 7746582..daea185 100644
--- a/features/home/components/ProductCard.tsx
+++ b/features/home/components/ProductCard.tsx
@@ -61,8 +61,8 @@ export default function ProductCard({
   images,
   labels = [],
   price_color = "#0A0A0A",
-  height = 400,
-  width = 300,
+  // height = 500,
+  // width = 350,
   button = false,
   stock,
 }: ProductCardProps) {
@@ -81,8 +81,8 @@ export default function ProductCard({
   const [isSyncing, setIsSyncing] = useState(false);
   const [showStockModal, setShowStockModal] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
+  const [isInteracting, setIsInteracting] = useState(false);
 
-  const autoplayRef = useRef<NodeJS.Timeout | null>(null);
   const debounceTimerRef = useRef<NodeJS.Timeout | undefined>(undefined);
   const isRequestInFlightRef = useRef<boolean>(false);
   const pendingQuantityRef = useRef<number | null>(null);
@@ -103,18 +103,6 @@ export default function ProductCard({
     };
   }, [api]);
 
-  useEffect(() => {
-    if (!api || !hasMultipleImages) return;
-
-    autoplayRef.current = setInterval(() => {
-      api.canScrollNext() ? api.scrollNext() : api.scrollTo(0);
-    }, 3000);
-
-    return () => {
-      if (autoplayRef.current) clearInterval(autoplayRef.current);
-    };
-  }, [api, hasMultipleImages]);
-
   useEffect(() => {
     setLocalQuantity(cartItem?.product_quantity || 1);
   }, [cartItem]);
@@ -272,24 +260,27 @@ export default function ProductCard({
         className="flex justify-center cursor-pointer group"
       >
         <Card
-          className="relative bg-white border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 p-0 w-full overflow-hidden rounded-lg"
-          style={{ height, maxWidth: width }}
+          className="relative gap-2 bg-white border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 p-0 w-full overflow-hidden rounded-lg"
+          // style={{ height, maxWidth: width }}
         >
           {/* Image Section */}
-          <div className="relative w-full h-[280px] bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden">
+          <div className="relative w-full h-full bg-gradient-to-br from-gray-50 to-gray-100 overflow-hidden">
             <Carousel
-              opts={{ align: "start", loop: true, watchDrag: false }}
+              opts={{ align: "start", loop: true, watchDrag: true }}
               setApi={setApi}
               className="w-full h-full"
+              onPointerDown={() => setIsInteracting(true)}
+              onPointerUp={() => setIsInteracting(false)}
+              onPointerCancel={() => setIsInteracting(false)}
             >
-              <CarouselContent className="h-[280px] ml-0">
+              <CarouselContent className="h-auto ml-0">
                 {images.map((image, idx) => (
-                  <CarouselItem key={idx} className="h-[280px] pl-0">
-                    <div className="h-full flex items-center justify-center p-3">
+                  <CarouselItem key={idx} className="h-auto pl-0">
+                    <div className="h-full flex items-center justify-center  p-2">
                       <img
                         src={image}
                         alt={`${name} - ${idx + 1}`}
-                        className={`max-w-full max-h-full object-contain transition-transform duration-500 ${
+                        className={`max-w-full max-h-full object-cover transition-transform duration-500 ${
                           isHovered ? "scale-105" : "scale-100"
                         }`}
                         draggable="false"
@@ -317,7 +308,11 @@ export default function ProductCard({
 
             {/* Image Dots */}
             {hasMultipleImages && (
-              <div className="absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex gap-1.5">
+              <div
+                className={`absolute bottom-3 left-1/2 -translate-x-1/2 z-10 flex gap-1.5 transition-opacity duration-300 ${
+                  isHovered || isInteracting ? "opacity-100" : "opacity-0"
+                }`}
+              >
                 {images.map((_, idx) => (
                   <button
                     key={idx}
@@ -369,7 +364,7 @@ export default function ProductCard({
           {/* Content Section */}
           <CardContent className="p-3 space-y-3">
             {/* Product Name */}
-            <h3 className="text-gray-900 text-base font-semibold leading-tight line-clamp-2 min-h-[2.5rem]">
+            <h3 className="text-gray-900 text-base font-semibold leading-tight line-clamp-2">
               {name}
             </h3>
 
@@ -403,7 +398,7 @@ export default function ProductCard({
               </Button>
               {/* Action Buttons */}
               {button && !isOutOfStock && (
-                <div className="pt-2 w-full">
+                <div className="w-full">
                   {!isInCart ? (
                     <Button
                       onClick={handleAddToCart}
@@ -418,7 +413,9 @@ export default function ProductCard({
                       ) : (
                         <>
                           <ShoppingCart className="h-5 w-5" />
-                          <span>{t("add_to_cart")}</span>
+                          <span className="hidden md:flex">
+                            {t("add_to_cart")}
+                          </span>
                         </>
                       )}
                     </Button>
diff --git a/features/home/components/ProductGrid.tsx b/features/home/components/ProductGrid.tsx
index 2adc6b8..8092aa0 100644
--- a/features/home/components/ProductGrid.tsx
+++ b/features/home/components/ProductGrid.tsx
@@ -25,7 +25,7 @@ export default function CollectionSection({ collection, locale }: Props) {
 
   if (isLoading) {
     return (
-      <section className="bg-white rounded-2xl shadow-sm p-6">
+      <section className="bg-white rounded-2xl shadow-sm p-2 md:p-6">
         <div className="flex items-center justify-between mb-4">
           <Skeleton className="h-8 w-48" />
           <Skeleton className="h-6 w-6 rounded-full" />
@@ -53,7 +53,7 @@ export default function CollectionSection({ collection, locale }: Props) {
   const displayProducts = productsData?.data.slice(0, 10) || [];
 
   return (
-    <section className="bg-white rounded-2xl shadow-sm p-6">
+    <section className="bg-white rounded-2xl shadow-sm p-2 md:p-6">
       <div
         className="flex items-center justify-between mb-4 cursor-pointer group"
         onClick={handleTitleClick}
@@ -92,8 +92,8 @@ export default function CollectionSection({ collection, locale }: Props) {
               images={allImages}
               labels={[]}
               price_color="#0059ff"
-              height={360}
-              width={250}
+              // height={450}
+              // width={350}
               button={true}
             />
           );
diff --git a/features/products/components/ProductPageContent.tsx b/features/products/components/ProductPageContent.tsx
index e95b61a..ddcc22c 100644
--- a/features/products/components/ProductPageContent.tsx
+++ b/features/products/components/ProductPageContent.tsx
@@ -534,12 +534,12 @@ export default function ProductPageContent({ slug }: ProductDetailProps) {
           />
         </div>
 
-        <ProductReviewsSection
+        {/* <ProductReviewsSection
           reviews={reviews}
           averageRating={averageRating}
           isLoading={false}
           onWriteReview={() => setShowReviewModal(true)}
-        />
+        /> */}
 
         <RelatedProductsSection products={transformedRelatedProducts} />
       </div>