Images upgraded

src/app/(static)/about-us/page.tsx

@@ -27,8 +27,12 @@ export default function AboutUsPage() {
           <Image
             src={pralinePic}
             alt='Praline'
-            layout='responsive'
             className='w-full h-auto'
+            sizes='100vw'
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
           />
         </div>
       </section>
@@ -38,8 +42,12 @@ export default function AboutUsPage() {
           <Image
             src={prAmPic}
             alt='Left Side Image'
-            layout='responsive'
             className='w-full h-auto'
+            sizes='100vw'
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
           />
         </div>
         {/* Right Column - Text with Header */}
@@ -86,8 +94,12 @@ export default function AboutUsPage() {
           <Image
             src={dryingPic}
             alt='Beans Drying'
-            layout='responsive'
             className='w-full h-auto'
+            sizes='100vw'
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
           />
         </div>
       </section>
@@ -97,16 +109,24 @@ export default function AboutUsPage() {
           <Image
             src={chefPic}
             alt='Beans Drying'
-            layout='responsive'
             className='w-full h-auto'
+            sizes='100vw'
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
           />
         </div>
         <div className='w-full md:w-1/2'>
           <Image
             src={barkPic}
             alt='Beans Drying'
-            layout='responsive'
             className='w-full h-auto'
+            sizes='100vw'
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
           />
         </div>
       </section>
@@ -132,8 +152,12 @@ export default function AboutUsPage() {
           <Image
             src={italyPic}
             alt='Training'
-            layout='responsive'
             className='w-full h-auto'
+            sizes='100vw'
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
           />
         </div>
         <div className='flex w-full text-xl text-justify p-12'>

src/app/(static)/page.tsx

@@ -39,8 +39,12 @@ export default function HomePage() {
           <Image
             src={brandStoryPic}
             alt='Right Side Image'
-            layout='responsive'
             className='w-full h-auto'
+            sizes='100vw'
+            style={{
+              width: '100%',
+              height: 'auto',
+            }}
           />
         </div>
       </section>

src/app/(storefront)/products/page.tsx

@@ -25,6 +25,10 @@ export default function ProductsPage() {
                 width={300}
                 height={300}
                 className='object-cover rounded-md'
+                style={{
+                  maxWidth: '100%',
+                  height: 'auto',
+                }}
               />
               <h2 className='mt-4 text-lg font-semibold'>{product.title}</h2>
               <p className='mt-2 text-gray-600'>{product.description}</p>

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