From c14bceec092a22ee6f112ff21ee633c82455f2fa Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Thu, 17 Oct 2024 11:00:15 +0530
Subject: [PATCH] Fix mobile, the image was getting cut due to h-vw90 spotlight
 image made a bit smaller Category slider images were HUGE

---
 src/app/(static)/page.tsx                 | 4 ++--
 src/components/category-slider.module.css | 3 +--
 src/components/spotlight.tsx              | 8 +++++++-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/app/(static)/page.tsx b/src/app/(static)/page.tsx
index 7f1a2e4..6107414 100644
--- a/src/app/(static)/page.tsx
+++ b/src/app/(static)/page.tsx
@@ -14,9 +14,9 @@ export default function HomePage() {
     <div className='overflow-x-hidden'>
       <HeroSwiper />
       {/* First Two-Column Layout */}
-      <section className='flex flex-col md:flex-row items-center bg-white h-[90vh] overflow-clip'>
+      <section className='flex flex-col md:flex-row items-center bg-white md:h-[90vh] overflow-clip'>
         {/* Left Column - Text with Header */}
-        <div className='w-full md:w-1/2 md:h-auto'>
+        <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
             <AnimatedText finishClass='delay-300'>
               <h2 className='text-s-title font-normal text-justify font-montera'>Brand Story</h2>
diff --git a/src/components/category-slider.module.css b/src/components/category-slider.module.css
index cc6b7e1..4f8ff39 100644
--- a/src/components/category-slider.module.css
+++ b/src/components/category-slider.module.css
@@ -1,6 +1,5 @@
 .productImage {
-  width: 100%; /* Set the width of the image */
-  height: auto;
+  width: 100px; /* Set the width of the image */
   aspect-ratio: 1;
   border-radius: 50%; /* Make the image circular */
   object-fit: cover; /* Ensure the image covers the container */
diff --git a/src/components/spotlight.tsx b/src/components/spotlight.tsx
index 913e78c..6cec073 100644
--- a/src/components/spotlight.tsx
+++ b/src/components/spotlight.tsx
@@ -13,7 +13,13 @@ export function Spotlight() {
       {logos.map((logo, index) => (
         <div key={index} className='flex flex-col items-center'>
           <div className='w-32 h-32 bg-white rounded-full shadow-lg flex items-center justify-center'>
-            <Image src={logo.src} alt={logo.alt} width={80} height={80} className='w-full h-auto object-contain' />
+            <Image
+              src={logo.src}
+              alt={logo.alt}
+              width={80}
+              height={80}
+              className='w-20 h-auto object-contain object-center'
+            />
           </div>
         </div>
       ))}