Images upgraded

src/components/category-slider.tsx

@@ -35,10 +35,14 @@ export function ChocolateCategories() {
         <Image
           src={currentImage}
           alt='Chocolate Category'
-          layout='responsive'
           width={300}
           height={500}
           className='w-full h-auto'
+          sizes='100vw'
+          style={{
+            width: '100%',
+            height: 'auto',
+          }}
         />
       </div>
     </section>

src/components/footer.tsx

@@ -14,7 +14,16 @@ export function Footer() {
     <footer className='bg-[#f8f6f5] flex flex-col md:flex-row py-12 border-t-2 border-black max-w-7xl mx-auto gap-8 px-4'>
       {/* First Column: Logo and Description */}
       <div className='space-y-4 flex flex-col basis-1/4'>
-        <Image src={logoPic} alt='Mozimo Logo' width={100} height={100} />
+        <Image
+          src={logoPic}
+          alt='Mozimo Logo'
+          width={100}
+          height={100}
+          style={{
+            maxWidth: '100%',
+            height: 'auto',
+          }}
+        />
         <p className='text-sm'>
           India&apos;s Premier European style bean-to-bar chocolate experience.
         </p>

src/components/navbar.tsx

@@ -55,6 +55,10 @@ export function Navbar() {
             className='logo text-white'
             width={100}
             height={100}
+            style={{
+              maxWidth: '100%',
+              height: 'auto',
+            }}
           />
         </Link>
       </div>

src/components/our-collection.tsx

@@ -29,6 +29,10 @@ export function Collections() {
             width={500}
             height={300}
             className='w-full object-cover'
+            style={{
+              maxWidth: '100%',
+              height: 'auto',
+            }}
           />
           <div className='p-4'>
             <h3 className='text-center text-base font-light'>

src/components/spotlight.tsx

@@ -24,6 +24,10 @@ export function Spotlight() {
               width={80}
               height={80}
               className='object-contain'
+              style={{
+                maxWidth: '100%',
+                height: 'auto',
+              }}
             />
           </div>
         </div>

src/components/swiper.tsx

@@ -40,6 +40,10 @@ export function HeroSwiper() {
             width={1760}
             height={1000}
             className='w-full'
+            style={{
+              maxWidth: '100%',
+              height: 'auto',
+            }}
           />
         </SwiperSlide>
       ))}