From 99e35ff29cb7675b01170266b9461a4793237e8c Mon Sep 17 00:00:00 2001
From: Amritanshu <git@tanshu.com>
Date: Thu, 26 Sep 2024 09:56:42 +0530
Subject: [PATCH] Images upgraded

---
 src/app/(static)/about-us/page.tsx     | 36 +++++++++++++++++++++-----
 src/app/(static)/page.tsx              |  6 ++++-
 src/app/(storefront)/products/page.tsx |  4 +++
 src/components/category-slider.tsx     |  6 ++++-
 src/components/footer.tsx              | 11 +++++++-
 src/components/navbar.tsx              |  4 +++
 src/components/our-collection.tsx      |  4 +++
 src/components/spotlight.tsx           |  4 +++
 src/components/swiper.tsx              |  4 +++
 9 files changed, 70 insertions(+), 9 deletions(-)

diff --git a/src/app/(static)/about-us/page.tsx b/src/app/(static)/about-us/page.tsx
index 9c5ea3b..3433425 100644
--- a/src/app/(static)/about-us/page.tsx
+++ b/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'>
diff --git a/src/app/(static)/page.tsx b/src/app/(static)/page.tsx
index 0b8e87f..6d4ce45 100644
--- a/src/app/(static)/page.tsx
+++ b/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>
diff --git a/src/app/(storefront)/products/page.tsx b/src/app/(storefront)/products/page.tsx
index 1b94bbf..9f38bfb 100644
--- a/src/app/(storefront)/products/page.tsx
+++ b/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>
diff --git a/src/components/category-slider.tsx b/src/components/category-slider.tsx
index da70a71..b7e619c 100644
--- a/src/components/category-slider.tsx
+++ b/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>
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index 77eedb5..881bc5d 100644
--- a/src/components/footer.tsx
+++ b/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>
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index b21c727..09d5f9e 100644
--- a/src/components/navbar.tsx
+++ b/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>
diff --git a/src/components/our-collection.tsx b/src/components/our-collection.tsx
index 7a8955b..efc9191 100644
--- a/src/components/our-collection.tsx
+++ b/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'>
diff --git a/src/components/spotlight.tsx b/src/components/spotlight.tsx
index 7d8b403..407274d 100644
--- a/src/components/spotlight.tsx
+++ b/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>
diff --git a/src/components/swiper.tsx b/src/components/swiper.tsx
index 22f97ec..7d901db 100644
--- a/src/components/swiper.tsx
+++ b/src/components/swiper.tsx
@@ -40,6 +40,10 @@ export function HeroSwiper() {
             width={1760}
             height={1000}
             className='w-full'
+            style={{
+              maxWidth: '100%',
+              height: 'auto',
+            }}
           />
         </SwiperSlide>
       ))}