Category slider responsive.

New Typography based on:

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

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