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