Category slider responsive.

New Typography based on:

https://www.wix.com/studio/blog/font-size

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

@@ -12,10 +12,10 @@ export default function AboutUsPage() {
     <div className='overflow-x-hidden bg-white pt-28'>
       <section className='flex flex-col items-center'>
         {/* Left Column - Text with Header */}
-        <div className='w-full text-8xl font-normal text-center font-montera'>
+        <div className='w-full text-s-headline font-normal text-center font-montera'>
           Welcome to the World of Mozimo Magic
         </div>
-        <div className='w-full text-xl text-justify p-12'>
+        <div className='w-full text-s-normal text-justify p-12'>
           Indulge in the Luxurious. Immerse in the Captivating. Savor the Fresh.
           At Mozimo, we curate a chocolate experience that transports you to a
           world of opulence, captivates your senses with mesmerizing aromas and
@@ -48,13 +48,10 @@ export default function AboutUsPage() {
         {/* Right Column - Text with Header */}
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <p className='text-6xl font-normal text-justify font-montera'>
-              Our Founders
+            <p className='text-s-title font-normal text-justify font-montera'>
+              Our Founders Priyanka and Amritanshu
             </p>
-            <p className='text-5xl font-normal text-justify font-montera'>
-              Priyanka and Amritanshu,
-            </p>
-            <p className='text-xl text-justify'>
+            <p className='text-s-normal text-justify'>
               are the proud founders of Mozimo, a bean-to-bar chocolate shop
               that celebrates the rich and distinctive flavors of single origin
               cocoa beans. Their journey with Mozimo has been a passionate
@@ -68,13 +65,13 @@ export default function AboutUsPage() {
       <section className='flex flex-col md:flex-row items-center'>
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <h2 className='text-6xl font-normal text-justify font-montera'>
+            <h2 className='text-s-title font-normal text-justify font-montera'>
               Capturing the essence of
             </h2>
-            <h3 className='text-8xl font-normal text-justify font-samantha'>
+            <h3 className='text-s-headline font-normal text-justify font-samantha'>
               Italian Chocolate
             </h3>
-            <p className='text-xl text-justify'>
+            <p className='text-s-normal text-justify'>
               With over 15 years of hospitality experience, these avid travelers
               scoured the globe for the finest cocoa beans and techniques. Deep
               in remote cocoa farms, they cultivated relationships with farmers
@@ -115,7 +112,7 @@ export default function AboutUsPage() {
         </div>
       </section>
       <section className='flex flex-col md:flex-col items-center'>
-        <div className='flex w-full text-xl text-justify p-12'>
+        <div className='flex w-full text-s-normal text-justify p-12'>
           Under the mentorship of the master chocolatier Gabriele Rinaudo,
           Priyanka and Amritanshu dedicated themselves to mastering the
           intricate art of chocolate making. With unwavering determination and a
@@ -124,7 +121,7 @@ export default function AboutUsPage() {
           the delicate techniques that transform raw beans into exquisite
           chocolate creations.
         </div>
-        <div className='flex w-full text-xl text-justify p-12'>
+        <div className='flex w-full text-s-normal text-justify p-12'>
           In addition to their training under Gabriele Rinaudo, they embarked on
           a transformative journey to Italy to further enrich their
           understanding of the art of chocolate making. This immersive
@@ -141,7 +138,7 @@ export default function AboutUsPage() {
             sizes='100vw'
           />
         </div>
-        <div className='flex w-full text-xl text-justify p-12'>
+        <div className='flex w-full text-s-normal text-justify p-12'>
           Passionate about chocolate as a medium for creativity and exploration,
           they view it not just as a confection but as a canvas for artistic
           expression. Constantly seeking inspiration, they push the boundaries

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

@@ -21,12 +21,12 @@ export default function AboutUsPage() {
           />
         </div>
         <AnimatedText finishClass='delay-300'>
-          <h2 className='text-8xl font-normal text-justify font-samantha p-12'>
+          <h2 className='text-s-headline 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'>
+          <div className='w-full text-s-normal 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
@@ -51,7 +51,7 @@ export default function AboutUsPage() {
               startClass='translate-y-8'
               finishClass='translate-y-0'
             >
-              <p className='text-xl text-justify'>
+              <p className='text-s-normal 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
@@ -65,7 +65,7 @@ export default function AboutUsPage() {
               startClass='translate-y-8'
               finishClass='translate-y-0'
             >
-              <p className='text-xl text-justify'>
+              <p className='text-s-normal 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
@@ -76,11 +76,11 @@ export default function AboutUsPage() {
           </div>
         </div>
       </section>
-      <section className='flex flex-col md:flex-row items-center'>
+      <section className='flex flex-col-reverse 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'>
+              <p className='text-s-normal font-justify uppercase'>
                 Aritsan Craftmanship
               </p>
             </AnimatedText>
@@ -88,7 +88,7 @@ export default function AboutUsPage() {
               startClass='translate-y-8'
               finishClass='translate-y-0'
             >
-              <p className='text-xl text-justify pb-12'>
+              <p className='text-s-normal 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 &
@@ -96,7 +96,7 @@ export default function AboutUsPage() {
               </p>
             </AnimatedText>
             <AnimatedText finishClass='delay-300'>
-              <p className='text-xl font-justify uppercase'>
+              <p className='text-s-normal font-justify uppercase'>
                 Ethics and Sustainability
               </p>
             </AnimatedText>
@@ -104,7 +104,7 @@ export default function AboutUsPage() {
               startClass='translate-y-8'
               finishClass='translate-y-0'
             >
-              <p className='text-xl text-justify pb-12'>
+              <p className='text-s-normal 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
@@ -112,7 +112,7 @@ export default function AboutUsPage() {
               </p>
             </AnimatedText>
             <AnimatedText finishClass='delay-300'>
-              <p className='text-xl font-justify uppercase'>
+              <p className='text-s-normal font-justify uppercase'>
                 Commitment to Excellence
               </p>
             </AnimatedText>
@@ -120,7 +120,7 @@ export default function AboutUsPage() {
               startClass='translate-y-8'
               finishClass='translate-y-0'
             >
-              <p className='text-xl text-justify'>
+              <p className='text-s-normal 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
@@ -142,14 +142,14 @@ export default function AboutUsPage() {
       <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'>
+            <span className='text-s-headline font-montera'>Specimens of</span>{' '}
+            <span className='text-s-headline font-samantha'>
               Exquisite Craftsmanship
             </span>
           </div>
         </AnimatedText>
         <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
-          <div className='text-xl text-justify pb-12'>
+          <div className='text-s-normal 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>
@@ -176,16 +176,16 @@ export default function AboutUsPage() {
       <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'>
+            <span className='text-s-headline font-montera'>
               Immerse yourself in the
             </span>{' '}
-            <span className='text-8xl font-samantha'>
+            <span className='text-s-headline 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'>
+          <p className='text-s-normal text-center pb-12'>
             Indulge in the authentic artistry of the Cioccolaterias of Italy
             with handcrafted artisanal chocolates by Mozimo.
           </p>
@@ -196,12 +196,12 @@ export default function AboutUsPage() {
           className='w-full h-auto'
         />
         <AnimatedText finishClass='delay-300'>
-          <p className='text-6xl text-center font-montera p-12'>
+          <p className='text-s-headline 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'>
+          <p className='text-s-normal 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,
@@ -209,7 +209,7 @@ export default function AboutUsPage() {
           </p>
         </AnimatedText>
         <AnimatedText startClass='translate-y-8' finishClass='translate-y-0'>
-          <p className='text-xl text-center pb-12'>
+          <p className='text-s-normal 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

src/app/(static)/page.tsx

@@ -18,7 +18,7 @@ export default function HomePage() {
         <div className='w-full md:w-1/2 h-[90vh] md:h-auto'>
           <div className='m-8 space-y-10'>
             <AnimatedText finishClass='delay-300'>
-              <h2 className='text-6xl font-normal text-justify font-montera'>
+              <h2 className='text-s-title font-normal text-justify font-montera'>
                 Brand Story
               </h2>
             </AnimatedText>
@@ -26,16 +26,16 @@ export default function HomePage() {
               startClass='translate-y-8'
               finishClass='translate-y-0'
             >
-              <p className='text-xl text-justify'>
+              <p className='text-s-normal text-justify'>
                 Mozimo&apos;s journey is a passionate pursuit of crafting
                 exceptional chocolate that celebrates the origin of each cocoa
                 bean.
               </p>
-              <p className='text-xl text-justify'>
+              <p className='text-s-normal text-justify'>
                 We meticulously roast, crack, winnow, and refine beans in-house,
                 using modern techniques to highlight their natural flavors.
               </p>
-              <p className='text-xl text-justify'>
+              <p className='text-s-normal text-justify'>
                 Each chocolate is a masterpiece, capturing the essence of cocoa
                 in its purest form.
               </p>
@@ -67,10 +67,10 @@ export default function HomePage() {
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
             <AnimatedText finishClass='delay-300'>
-              <h2 className='text-6xl font-normal text-justify font-montera'>
+              <h2 className='text-s-title font-normal text-justify font-montera'>
                 Discover the delicate art of our
               </h2>
-              <h3 className='text-8xl font-normal text-justify font-samantha'>
+              <h3 className='text-s-title font-normal text-justify font-samantha'>
                 Chocolate Tempering
               </h3>
             </AnimatedText>
@@ -78,7 +78,7 @@ export default function HomePage() {
               startClass='translate-y-8'
               finishClass='translate-y-0'
             >
-              <p className='text-xl text-justify'>
+              <p className='text-s-normal text-justify'>
                 Crafted to perfection Mozimo delivers a sublime sensory
                 experience with every bite. Experience the epitome of indulgence
                 with our perfectly tempered chocolate: velvety smooth,
@@ -91,7 +91,7 @@ export default function HomePage() {
       </section>
       {/* Fourth Three-Column Layout (Collections) */}
       <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
-        <div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
+        <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
           Our Collections
         </div>
         <Collections />
@@ -100,13 +100,13 @@ export default function HomePage() {
       <ChocolateCategories />
       {/* Sixth Layout (Instagram) */}
       <section className='flex flex-col items-center py-12 px-4 sm:px-6 lg:px-8'>
-        <div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
+        <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
           Follow us on Instagram
         </div>
         <InstagramFeed />
       </section>
       <section className='flex flex-col items-center bg-white py-12 px-4 sm:px-6 lg:px-8'>
-        <div className='w-full text-6xl font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
+        <div className='w-full text-s-headline font-normal font-montera text-center py-12 px-4 sm:px-6 lg:px-8'>
           In the Spotlight
         </div>
         <Spotlight />

src/app/(storefront)/products/[handle]/ProductDetails.tsx

@@ -48,7 +48,7 @@ const ProductDetails: FC<ProductDetailsProps> = ({ handle }) => {
   }
 
   return (
-    <div className='container mx-auto p-4'>
+    <div className='container mx-auto pt-28'>
       <h1 className='text-4xl font-bold'>{product.title}</h1>
       <div className='flex flex-col md:flex-row gap-6 mt-4'>
         {/* Product Images */}

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

@@ -13,7 +13,7 @@ export default function ProductsPage() {
   if (error) return <p>Error: {error.message}</p>;
 
   return (
-    <div className='container mx-auto py-12'>
+    <div className='container mx-auto py-12 pt-28'>
       <h1 className='text-3xl font-bold mb-8'>Handbags Collection</h1>
       <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8'>
         {products?.map((product) => (

src/app/globals.css

@@ -5,6 +5,10 @@
 :root {
   --background: #f8f6f5;
   --foreground: #703133;
+  --normal-font: 2rem;
+  --title-font: 5rem;
+  --headline-font: 8rem;
+  --items-font: 10rem;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -14,6 +18,10 @@
   }
 }
 
+html {
+  font-size: 62.5%;
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -21,6 +29,19 @@ body {
   background-color: var(--background);
   font-family: Renner, sans-serif;
   font-weight: 300;
+  font-size: var(--normal-font);
+}
+
+.text-s-normal {
+  font-size: var(--normal-font);
+}
+
+.text-s-title {
+  font-size: var(--title-font);
+}
+
+.text-s-headline {
+  font-size: var(--headline-font);
 }
 
 @layer utilities {

src/components/category-slider.module.css

@@ -0,0 +1,15 @@
+  .productImage {
+    width: 8rem; /* Set the width of the image */
+    aspect-ratio: 1;
+    border-radius: 50%; /* Make the image circular */
+    object-fit: cover; /* Ensure the image covers the container */
+    margin-right: 1.5rem; /* Space between image and product name */
+    display: inline-block;
+    box-shadow: .5rem .5rem 1rem rgba(0,0,0,.1);
+  }
+
+  @media screen and (width >= 768px) {
+    .productImage {
+      display: none;
+    }
+  }

src/components/category-slider.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { useState } from 'react';
 import Image from 'next/image';
+import styles from './category-slider.module.css';
 
 const categories = [
   { name: 'Bars', image: '/images/categories/bars.jpg' },
@@ -16,22 +17,25 @@ export function ChocolateCategories() {
 
   return (
     <section className='flex flex-col md:flex-row bg-white py-12 px-4 sm:px-6 lg:px-8'>
-      <div className='w-full md:w-1/2 bg-white h-auto'>
-        <ul className='m-8 space-y-10 text-[#5a352a] font-serif text-5xl justify-center text-left'>
-          {categories.map((category) => (
-            <li
-              key={category.name}
-              onMouseEnter={() => setCurrentImage(category.image)}
-              className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-9xl'
-            >
-              {category.name}
-            </li>
-          ))}
-        </ul>
-      </div>
+      <ul className='w-full md:w-1/2 bg-white h-auto m-8 space-y-10 text-[#5a352a] text-left'>
+        {categories.map((category) => (
+          <li
+            key={category.name}
+            onMouseEnter={() => setCurrentImage(category.image)}
+            className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-s-headline'
+          >
+            <img
+              className={styles.productImage}
+              alt={category.name}
+              src={category.image}
+            />
+            <span>{category.name}</span>
+          </li>
+        ))}
+      </ul>
 
       {/* Right Side: Image */}
-      <div className='w-full md:w-1/2 h-full'>
+      <div className={`w-full md:w-1/2 h-full hidden md:flex`}>
         <Image
           src={currentImage}
           alt='Chocolate Category'

src/components/footer.tsx

@@ -13,13 +13,13 @@ export function Footer() {
   return (
     <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'>
+      <div className='space-y-4 flex flex-col basis-1/4 flex-shrink'>
         <Image
           src={logoPic}
           alt='Mozimo Logo'
           width={100}
           height={100}
-          className='w-full h-auto'
+          className='h-full logo'
         />
         <p className='text-sm'>
           India&apos;s Premier European style bean-to-bar chocolate experience.

src/components/navbar.module.css

@@ -11,6 +11,8 @@
     z-index: 1000;
     background: hsl(0 0% 100% / .2);
     backdrop-filter: blur(1rem);
+    font-size: 2rem;
+    line-height: 2.8rem;
   }
 
 
@@ -21,14 +23,14 @@
       bottom: 0;
       transform: translateX(-100%);
       transition: transform 350ms ease-out;
-      padding: min(30vh, 10rem) 2em;
+      padding: min(30vh, 16rem) 2em;
     }
     .mobileNavToggle {
       position: absolute;
       display: block;
-      width: 2rem;
-      top: 2rem;
-      left: 2rem;
+      width: 3.2rem;
+      top: 3.2rem;
+      left: 3.2rem;
       aspect-ratio: 1;
       z-index: 9999;
       background-image: url('/icons/menu.svg');
@@ -48,14 +50,14 @@
     .navBar {
       right: 0;
       flex-direction: row;
-      height: 5rem;
-      border-radius:0 0 0.5rem 0.5rem;
+      height: 8rem;
+      border-radius:0 0 0.8rem 0.8rem;
       }
   }
   .navBar > div {
     display: flex;
     align-items: center;
-    gap: var(--gap, 2rem);
+    gap: var(--gap, 3.2rem);
   }
   
   /* .navBarInitial {

src/components/navbar.tsx

@@ -13,6 +13,7 @@ export function Navbar() {
   const prevScrollY = useRef(0);
   const [navBarStyle, setNavBarStyle] = useState('initial');
   const [isVisible, setIsVisible] = useState('false');
+  const [isExpanded, setIsExpanded] = useState<boolean>(false);
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollY = window.scrollY;
@@ -48,28 +49,27 @@ export function Navbar() {
   function toggleMenu() {
     if (isVisible === 'true') {
       setIsVisible('false');
+      setIsExpanded(false);
     } else {
       setIsVisible('true');
+      setIsExpanded(true);
     }
   }
 
   return (
-    <div className=''>
+    <div>
       <button
         className={styles.mobileNavToggle}
         aria-controls='primary-navigation'
-        aria-expanded={isVisible}
+        aria-expanded={isExpanded}
         onClick={toggleMenu}
       >
         <span className='sr-only'>Menu</span>
       </button>
       <nav data-visible={isVisible} className={navClasses}>
         {/* Left side */}
-        <div className=''>
-          <Link
-            href='/about-us'
-            className='text-sm font-medium hover:underline'
-          >
+        <div>
+          <Link href='/about-us' className='font-medium hover:underline'>
             About Us
           </Link>
         </div>

src/components/our-collection.tsx

@@ -31,9 +31,7 @@ export function Collections() {
             className='w-full h-auto object-cover'
           />
           <div className='p-4'>
-            <h3 className='text-center text-base font-light'>
-              {collection.title}
-            </h3>
+            <h3 className='text-center font-light'>{collection.title}</h3>
           </div>
         </div>
       ))}