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

@@ -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>

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 */

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>
       ))}