Diwali renamed to Festival and all the effects.

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

@@ -32,10 +32,6 @@ export default function AboutUsPage() {
             loading='lazy'
             // {`w-full h-auto zoom ${isPralinePic ? 'post' : 'pre'}`}
             // sizes='100vw'
-            // style={{
-            //   width: '100%',
-            //   height: 'auto',
-            // }}
           />
         </div>
       </section>
@@ -47,10 +43,6 @@ export default function AboutUsPage() {
             alt='Left Side Image'
             className='w-full h-auto'
             sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
           />
         </div>
         {/* Right Column - Text with Header */}
@@ -99,10 +91,6 @@ export default function AboutUsPage() {
             alt='Beans Drying'
             className='w-full h-auto'
             sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
           />
         </div>
       </section>
@@ -114,10 +102,6 @@ export default function AboutUsPage() {
             alt='Beans Drying'
             className='w-full h-auto'
             sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
           />
         </div>
         <div className='w-full md:w-1/2'>
@@ -127,10 +111,6 @@ export default function AboutUsPage() {
             className='w-full h-auto'
             loading='lazy'
             sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
           />
         </div>
       </section>
@@ -159,10 +139,6 @@ export default function AboutUsPage() {
             className='w-full h-auto'
             loading='lazy'
             sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
           />
         </div>
         <div className='flex w-full text-xl text-justify p-12'>

src/app/(static)/diwali/page.tsx

@@ -1,185 +0,0 @@
-import Image from 'next/image';
-import bannerPic from '/public/images/diwali/01-banner.jpg';
-import redPralineBoxPic from '/public/images/diwali/02-red-praline-box.jpg';
-import bluePralineBoxOpenPic from '/public/images/diwali/03-blue-praline-box-open.jpg';
-import bluePralineBoxTwoPic from '/public/images/diwali/04-blue-praline-box-two.jpg';
-import goldPralineBoxPic from '/public/images/diwali/05-gold-praline-box.jpg';
-import redBarkBoxPic from '/public/images/diwali/06-red-bark-box.jpg';
-// import blueSpreadPic from '/public/images/diwali/07-blue-spread.jpg';
-
-export default function AboutUsPage() {
-  return (
-    <div className='overflow-x-hidden bg-white'>
-      <section className='flex flex-col items-center'>
-        <div className='w-full'>
-          <Image
-            src={bannerPic}
-            alt='Praline'
-            className='w-full h-auto'
-            sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
-          />
-        </div>
-        <p className='text-8xl font-normal text-justify font-samantha p-12'>
-          Sweet Moments with Mozimo
-        </p>
-        <div className='w-full text-xl text-justify pb-12'>
-          “Transforming cacao beans sourced straight from the pod into rich,
-          velvety smooth chocolate is pure magic. This is why we take great
-          pride in being called the &apos;Alchemists of the Chocolate
-          World&apos;.”
-        </div>
-      </section>
-      <section className='flex flex-col md:flex-row items-center'>
-        {/* Left Column - Image */}
-        <div className='w-full md:w-1/2'>
-          <Image
-            src={redPralineBoxPic}
-            alt='Left Side Image'
-            className='w-full h-auto'
-            sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
-          />
-        </div>
-        {/* Right Column - Text with Header */}
-        <div className='w-full md:w-1/2'>
-          <div className='m-8 space-y-10'>
-            <p className='text-xl text-justify'>
-              Our journey at Mozimo has been a passionate pursuit of creating
-              exceptional chocolate that tantalizes the taste buds and tells the
-              unique story of each cocoa bean&apos;s origin. We traversed the
-              globe to search for the finest beans, equipment, and techniques.
-              We ventured deep into remote cocoa farms to select the best beans
-              as we cherished the stories and traditions behind every harvest.
-            </p>
-            <p className='text-xl text-justify'>
-              Beholding our vision, we started the meticulous process of
-              crafting rich, exquisite, delectable chocolates, ultimately
-              perfecting the art. As we continue our journey at Mozimo, we are
-              proud to be a part of the global craft chocolate revolution
-              celebrating the diversity of cocoa.
-            </p>
-          </div>
-        </div>
-      </section>
-      <section className='flex flex-col md:flex-row items-center'>
-        <div className='w-full md:w-1/2'>
-          <div className='m-8 space-y-5'>
-            <p className='text-xl font-justify uppercase'>
-              Aritsan Craftmanship
-            </p>
-            <p className='text-xl text-justify pb-12'>
-              We are an atelier crafting chocolate from the finest single-source
-              beans. Our commitment to the art of making chocolate ensures that
-              each piece epitomizes supreme taste & quality.
-            </p>
-            <p className='text-xl font-justify uppercase'>
-              Ethics and Sustainability
-            </p>
-            <p className='text-xl text-justify pb-12'>
-              We are committed to sustainability and being ethical in all that
-              we do. From selecting ingredients from remote farmers to our
-              production practices, we prioritize sustainability and ethical
-              practices.
-            </p>
-            <p className='text-xl font-justify uppercase'>
-              Commitment to Excellence
-            </p>
-            <p className='text-xl text-justify'>
-              We are inspired to create the best-quality chocolate in our
-              pursuit of excellence. This involves refining ingredients,
-              updating processes, and continuously striving to become the best
-              in the game.
-            </p>
-          </div>
-        </div>
-        <div className='w-full md:w-1/2'>
-          <Image
-            src={bluePralineBoxOpenPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
-          />
-        </div>
-      </section>
-      {/* Fourth Three-Column Layout (Collections) */}
-      <section className='flex flex-col items-center'>
-        <div className='font-normal text-center p-12'>
-          <span className='text-6xl font-montera'>Specimens of</span>{' '}
-          <span className='text-8xl font-samantha'>
-            Exquisite Craftsmanship
-          </span>
-        </div>
-        <div className='text-xl text-justify pb-12'>
-          Every creation of Mozimo&apos;s chocolate is a specimen of
-          craftsmanship of the highest quality by the finest chocolatiers.
-        </div>
-      </section>
-      <section className='flex flex-col md:flex-row items-center'>
-        <div className='w-full md:w-1/2'>
-          <Image
-            src={bluePralineBoxTwoPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
-          />
-        </div>
-        <div className='w-full md:w-1/2'>
-          <Image
-            src={goldPralineBoxPic}
-            alt='Beans Drying'
-            className='w-full h-auto'
-            sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
-          />
-        </div>
-      </section>
-      <section className='flex flex-col items-center'>
-        <p className='font-normal text-center p-12'>
-          <span className='text-6xl font-montera'>Immerse yourself in the</span>{' '}
-          <span className='text-8xl font-samantha'>
-            Italian Chocolate Experience
-          </span>
-        </p>
-        <p className='text-xl text-center pb-12'>
-          Indulge in the authentic artistry of the Cioccolaterias of Italy with
-          handcrafted artisanal chocolates by Mozimo.
-        </p>
-        <Image src={redBarkBoxPic} alt='Training' className='w-full h-auto' />
-        <p className='text-6xl text-center font-montera p-12'>
-          Experience the art of gifting this Diwali
-        </p>
-        <p className='text-xl text-center pb-12'>
-          It’s time to celebrate the joy of togetherness, love, and the luxury
-          of Mozimo’s chocolates. This Diwali, let’s embrace the sweetness of
-          life with our exquisite single-origin handcrafted chocolates, crafted
-          to elevate your festive moments.
-        </p>
-        <p className='text-xl text-center pb-12'>
-          Let our handcrafted chocolates be a part of your Diwali rituals.
-          Whether you’re enjoying them during family gatherings, using them as a
-          centerpiece for your celebrations, or gifting them to friends or
-          colleagues, they are sure to bring warmth and sweetness to every
-          moment.
-        </p>
-      </section>
-    </div>
-  );
-}

src/app/(static)/festival/page.tsx

@@ -0,0 +1,223 @@
+import bannerPic from '/public/images/diwali/01-banner.jpg';
+import redPralineBoxPic from '/public/images/diwali/02-red-praline-box.jpg';
+import bluePralineBoxOpenPic from '/public/images/diwali/03-blue-praline-box-open.jpg';
+import bluePralineBoxTwoPic from '/public/images/diwali/04-blue-praline-box-two.jpg';
+import goldPralineBoxPic from '/public/images/diwali/05-gold-praline-box.jpg';
+import redBarkBoxPic from '/public/images/diwali/06-red-bark-box.jpg';
+import { AnimatedText } from '@/components/animated-text';
+import { AnimatedImage } from '@/components/animated-image';
+// import blueSpreadPic from '/public/images/diwali/07-blue-spread.jpg';
+
+export default function AboutUsPage() {
+  return (
+    <div className='bg-white'>
+      <section className='flex flex-col items-center'>
+        <div className='w-full'>
+          <AnimatedImage
+            src={bannerPic}
+            alt='Praline'
+            className='w-full h-auto'
+            sizes='100vw'
+          />
+        </div>
+        <AnimatedText finishClass='delay-300'>
+          <h2 className='text-8xl font-normal text-justify font-samantha p-12'>
+            Sweet Moments with Mozimo
+          </h2>
+        </AnimatedText>
+        <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
+          <div className='w-full text-xl text-justify pb-12'>
+            “Transforming cacao beans sourced straight from the pod into rich,
+            velvety smooth chocolate is pure magic. This is why we take great
+            pride in being called the &apos;Alchemists of the Chocolate
+            World&apos;.”
+          </div>
+        </AnimatedText>
+      </section>
+      <section className='flex flex-col md:flex-row items-center'>
+        {/* Left Column - Image */}
+        <div className='w-full md:w-1/2'>
+          <AnimatedImage
+            src={redPralineBoxPic}
+            alt='Left Side Image'
+            className='w-full h-auto'
+            sizes='100vw'
+          />
+        </div>
+        {/* Right Column - Text with Header */}
+        <div className='w-full md:w-1/2'>
+          <div className='m-8 space-y-10'>
+            <AnimatedText
+              startClass='translate-y-8'
+              finishClass='translate-y-0'
+            >
+              <p className='text-xl text-justify'>
+                Our journey at Mozimo has been a passionate pursuit of creating
+                exceptional chocolate that tantalizes the taste buds and tells
+                the unique story of each cocoa bean&apos;s origin. We traversed
+                the globe to search for the finest beans, equipment, and
+                techniques. We ventured deep into remote cocoa farms to select
+                the best beans as we cherished the stories and traditions behind
+                every harvest.
+              </p>
+            </AnimatedText>
+            <AnimatedText
+              startClass='translate-y-8'
+              finishClass='translate-y-0'
+            >
+              <p className='text-xl text-justify'>
+                Beholding our vision, we started the meticulous process of
+                crafting rich, exquisite, delectable chocolates, ultimately
+                perfecting the art. As we continue our journey at Mozimo, we are
+                proud to be a part of the global craft chocolate revolution
+                celebrating the diversity of cocoa.
+              </p>
+            </AnimatedText>
+          </div>
+        </div>
+      </section>
+      <section className='flex flex-col md:flex-row items-center'>
+        <div className='w-full md:w-1/2'>
+          <div className='m-8 space-y-5'>
+            <AnimatedText finishClass='delay-300'>
+              <p className='text-xl font-justify uppercase'>
+                Aritsan Craftmanship
+              </p>
+            </AnimatedText>
+            <AnimatedText
+              startClass='translate-y-8'
+              finishClass='translate-y-0'
+            >
+              <p className='text-xl text-justify pb-12'>
+                We are an atelier crafting chocolate from the finest
+                single-source beans. Our commitment to the art of making
+                chocolate ensures that each piece epitomizes supreme taste &
+                quality.
+              </p>
+            </AnimatedText>
+            <AnimatedText finishClass='delay-300'>
+              <p className='text-xl font-justify uppercase'>
+                Ethics and Sustainability
+              </p>
+            </AnimatedText>
+            <AnimatedText
+              startClass='translate-y-8'
+              finishClass='translate-y-0'
+            >
+              <p className='text-xl text-justify pb-12'>
+                We are committed to sustainability and being ethical in all that
+                we do. From selecting ingredients from remote farmers to our
+                production practices, we prioritize sustainability and ethical
+                practices.
+              </p>
+            </AnimatedText>
+            <AnimatedText finishClass='delay-300'>
+              <p className='text-xl font-justify uppercase'>
+                Commitment to Excellence
+              </p>
+            </AnimatedText>
+            <AnimatedText
+              startClass='translate-y-8'
+              finishClass='translate-y-0'
+            >
+              <p className='text-xl text-justify'>
+                We are inspired to create the best-quality chocolate in our
+                pursuit of excellence. This involves refining ingredients,
+                updating processes, and continuously striving to become the best
+                in the game.
+              </p>
+            </AnimatedText>
+          </div>
+        </div>
+        <div className='w-full md:w-1/2'>
+          <AnimatedImage
+            src={bluePralineBoxOpenPic}
+            alt='Beans Drying'
+            className='w-full h-auto'
+            sizes='100vw'
+          />
+        </div>
+      </section>
+      {/* Fourth Three-Column Layout (Collections) */}
+      <section className='flex flex-col items-center'>
+        <AnimatedText finishClass='delay-300'>
+          <div className='font-normal text-center p-12'>
+            <span className='text-6xl font-montera'>Specimens of</span>{' '}
+            <span className='text-8xl font-samantha'>
+              Exquisite Craftsmanship
+            </span>
+          </div>
+        </AnimatedText>
+        <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
+          <div className='text-xl text-justify pb-12'>
+            Every creation of Mozimo&apos;s chocolate is a specimen of
+            craftsmanship of the highest quality by the finest chocolatiers.
+          </div>
+        </AnimatedText>
+      </section>
+      <section className='flex flex-col md:flex-row items-center'>
+        <div className='w-full md:w-1/2'>
+          <AnimatedImage
+            src={bluePralineBoxTwoPic}
+            alt='Beans Drying'
+            className='w-full h-auto'
+            sizes='100vw'
+          />
+        </div>
+        <div className='w-full md:w-1/2'>
+          <AnimatedImage
+            src={goldPralineBoxPic}
+            alt='Beans Drying'
+            className='w-full h-auto'
+            sizes='100vw'
+          />
+        </div>
+      </section>
+      <section className='flex flex-col items-center'>
+        <AnimatedText finishClass='delay-300'>
+          <p className='font-normal text-center p-12'>
+            <span className='text-6xl font-montera'>
+              Immerse yourself in the
+            </span>{' '}
+            <span className='text-8xl font-samantha'>
+              Italian Chocolate Experience
+            </span>
+          </p>
+        </AnimatedText>
+        <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
+          <p className='text-xl text-center pb-12'>
+            Indulge in the authentic artistry of the Cioccolaterias of Italy
+            with handcrafted artisanal chocolates by Mozimo.
+          </p>
+        </AnimatedText>
+        <AnimatedImage
+          src={redBarkBoxPic}
+          alt='Training'
+          className='w-full h-auto'
+        />
+        <AnimatedText finishClass='delay-300'>
+          <p className='text-6xl text-center font-montera p-12'>
+            Experience the art of gifting this Diwali
+          </p>
+        </AnimatedText>
+        <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
+          <p className='text-xl text-center pb-12'>
+            It’s time to celebrate the joy of togetherness, love, and the luxury
+            of Mozimo’s chocolates. This Diwali, let’s embrace the sweetness of
+            life with our exquisite single-origin handcrafted chocolates,
+            crafted to elevate your festive moments.
+          </p>
+        </AnimatedText>
+        <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
+          <p className='text-xl text-center pb-12'>
+            Let our handcrafted chocolates be a part of your Diwali rituals.
+            Whether you’re enjoying them during family gatherings, using them as
+            a centerpiece for your celebrations, or gifting them to friends or
+            colleagues, they are sure to bring warmth and sweetness to every
+            moment.
+          </p>
+        </AnimatedText>
+      </section>
+    </div>
+  );
+}

src/app/(static)/page.tsx

@@ -51,10 +51,6 @@ export default function HomePage() {
             className='w-full h-auto'
             // {`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`}
             // sizes='100vw'
-            // style={{
-            //   width: '100%',
-            //   height: 'auto',
-            // }}
           />
         </div>
       </section>

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

@@ -24,11 +24,7 @@ export default function ProductsPage() {
                 alt={product.title as string}
                 width={300}
                 height={300}
-                className='object-cover rounded-md'
+                className='w-full h-auto 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

@@ -39,10 +39,6 @@ export function ChocolateCategories() {
           height={500}
           className='w-full h-auto'
           sizes='100vw'
-          style={{
-            width: '100%',
-            height: 'auto',
-          }}
         />
       </div>
     </section>

src/components/footer.tsx

@@ -19,10 +19,7 @@ export function Footer() {
           alt='Mozimo Logo'
           width={100}
           height={100}
-          style={{
+          className='w-full h-auto'
-            maxWidth: '100%',
-            height: 'auto',
-          }}
         />
         <p className='text-sm'>
           India&apos;s Premier European style bean-to-bar chocolate experience.

src/components/navbar.tsx

@@ -52,13 +52,9 @@ export function Navbar() {
           <Image
             src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack}
             alt='Logo'
-            className='logo text-white'
+            className='w-full h-auto logo text-white'
             width={100}
             height={100}
-            style={{
-              maxWidth: '100%',
-              height: 'auto',
-            }}
           />
         </Link>
       </div>

src/components/our-collection.tsx

@@ -28,11 +28,7 @@ export function Collections() {
             alt={collection.title}
             width={500}
             height={300}
-            className='w-full object-cover'
+            className='w-full h-auto object-cover'
-            style={{
-              maxWidth: '100%',
-              height: 'auto',
-            }}
           />
           <div className='p-4'>
             <h3 className='text-center text-base font-light'>

src/components/spotlight.tsx

@@ -23,11 +23,7 @@ export function Spotlight() {
               alt={logo.alt}
               width={80}
               height={80}
-              className='object-contain'
+              className='w-full h-auto object-contain'
-              style={{
-                maxWidth: '100%',
-                height: 'auto',
-              }}
             />
           </div>
         </div>

src/components/swiper.tsx

@@ -37,11 +37,7 @@ export function HeroSwiper() {
             alt={slide.name}
             width={1760}
             height={1000}
-            className='w-full'
+            className='w-full h-auto'
-            style={{
-              maxWidth: '100%',
-              height: 'auto',
-            }}
           />
         </SwiperSlide>
       ))}