About us

src/app/about-us/page.tsx

@@ -1,11 +1,154 @@
+import Image from 'next/image';
+import pralinePic from '/public/images/about-us/01-praline.jpg';
+import prAmPic from '/public/images/about-us/02-priyanka-amritanshu.jpg';
+import dryingPic from '/public/images/about-us/03-drying.jpg';
+import chefPic from '/public/images/about-us/04-chef.jpg';
+import barkPic from '/public/images/about-us/05-bark.jpg';
+import italyPic from '/public/images/about-us/06-italy.jpg';
+
 export default function AboutUsPage() {
   return (
-    <div className='p-8'>
+    <div className='overflow-x-hidden bg-white'>
-      <h1 className='text-4xl font-bold'>About Us</h1>
+      <section className='flex flex-col items-center pt-20'>
-      <p className='mt-4 text-lg'>
+        {/* Left Column - Text with Header */}
-        Kakawa is a fictional company that delivers high-quality content through
+        <div className='w-full text-8xl font-normal text-center font-montera'>
-        modern web technologies.
+          Welcome to the World of Mozimo Magic
+        </div>
+        <div className='w-full text-xl 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
+          visuals, and delights your taste buds with the vibrant flavors of
+          freshly crafted chocolates. Join us on a journey of pure luxury,
+          captivating moments, and a fresh perspective on the art of
+          chocolate-making.
+        </div>
+        <div className='w-full'>
+          <Image
+            src={pralinePic}
+            alt='Praline'
+            layout='responsive'
+            className='w-full h-auto'
+          />
+        </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={prAmPic}
+            alt='Left Side Image'
+            layout='responsive'
+            className='w-full h-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-6xl font-normal text-justify font-montera'>
+              Our Founders
             </p>
+            <p className='text-5xl font-normal text-justify font-montera'>
+              Priyanka and Amritanshu,
+            </p>
+            <p className='text-xl 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
+              pursuit of creating exceptional chocolate that tantalizes the
+              taste buds and tells the unique story of each cocoa bean&apos;s
+              origin.
+            </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-10'>
+            <h2 className='text-6xl font-normal text-justify font-montera'>
+              Capturing the essence of
+            </h2>
+            <h3 className='text-8xl font-normal text-justify font-samantha'>
+              Italian Chocolate
+            </h3>
+            <p className='text-xl 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
+              committed to sustainability. Carefully selecting beans, they honor
+              each harvest&apos;s stories. In their cozy workshop, they roast,
+              crack, and refine beans with modern techniques, capturing their
+              essence in every Mozimo chocolate bar.
+            </p>
+          </div>
+        </div>
+        <div className='w-full md:w-1/2'>
+          <Image
+            src={dryingPic}
+            alt='Beans Drying'
+            layout='responsive'
+            className='w-full h-auto'
+          />
+        </div>
+      </section>
+      {/* Fourth Three-Column Layout (Collections) */}
+      <section className='flex flex-col md:flex-row items-center'>
+        <div className='w-full md:w-1/2'>
+          <Image
+            src={chefPic}
+            alt='Beans Drying'
+            layout='responsive'
+            className='w-full h-auto'
+          />
+        </div>
+        <div className='w-full md:w-1/2'>
+          <Image
+            src={barkPic}
+            alt='Beans Drying'
+            layout='responsive'
+            className='w-full h-auto'
+          />
+        </div>
+      </section>
+      <section className='flex flex-col md:flex-col items-center'>
+        <div className='flex w-full text-xl 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
+          thirst for knowledge, they immersed themselves in the world of cocoa,
+          learning the nuances of sourcing the finest ingredients and perfecting
+          the delicate techniques that transform raw beans into exquisite
+          chocolate creations.
+        </div>
+        <div className='flex w-full text-xl 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
+          experience in Italy not only broadened their knowledge but also
+          deepened their appreciation for the timeless artistry and dedication
+          that define the world of chocolate making.
+        </div>
+        <div className='flex w-full'>
+          <Image
+            src={italyPic}
+            alt='Training'
+            layout='responsive'
+            className='w-full h-auto'
+          />
+        </div>
+        <div className='flex w-full text-xl 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
+          of chocolate-making, committed to crafting sensory experiences that
+          delight the taste buds, eyes, and soul. Proud to be part of the global
+          craft chocolate revolution, they aim to inspire others while
+          championing cocoa diversity and sustainability. Back in the workshop,
+          cacao beans are roasted, cracked, and refined with modern techniques,
+          crafting each bar of Mozimo chocolate into a masterpiece, capturing
+          the essence of its origins.
+        </div>
+      </section>
     </div>
   );
 }

src/app/globalicons.css

@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

src/app/page.tsx

@@ -60,7 +60,6 @@ export default function HomePage() {
               Discover the delicate art of our
             </h2>
             <h3 className='text-8xl font-normal text-justify font-samantha'>
-              {' '}
               Chocolate Tempering
             </h3>
             <p className='text-xl text-justify'>
@@ -68,7 +67,7 @@ export default function HomePage() {
               with every bite. Experience the epitome of indulgence with our
               perfectly tempered chocolate: velvety smooth, exquisitely rich,
               and artfully balanced. Each bite offers a symphony of nuanced
-              cocoa flavors, melting luxuriously!{' '}
+              cocoa flavors, melting luxuriously!
             </p>
           </div>
         </div>

src/app/privacy-policy/page.tsx

@@ -149,8 +149,8 @@ export default function TermsPage() {
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Email Opt-Out:</span>
+        <span className='font-bold'>Email Opt-Out:</span>&nbsp; You can opt out
-        You can opt out of receiving our marketing emails by emailing{' '}
+        of receiving our marketing emails by emailing{' '}
         <a href='info@mozimo.in' />. Please allow up to ten days for processing.
         Even if you opt out of marketing emails, we will continue to send
         transactional messages related to your purchases.
@@ -164,28 +164,29 @@ export default function TermsPage() {
       <p className='mt-4 text-base'>
         <span className='font-bold'>Grievance Officer</span> In accordance with
         the Information Technology Act 2000 and associated rules, the Grievance
-        Officer&apos;s contact details are as follows: [Your Address Here]
+        Officer&apos;s contact details are as follows: Chaman Lal +91 70874
+        99904
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Email: info@mozimo.in</span>
+        <span className='font-bold'>Email: info@mozimo.in</span>&nbsp; For
-        For questions about this Policy or other privacy concerns, you can also
+        questions about this Policy or other privacy concerns, you can also
         email us at info@mozimo.in.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Updates to This Policy</span>
+        <span className='font-bold'>Updates to This Policy</span>&nbsp; This
-        This Privacy Policy was last updated on 05.09.24. We may change our
+        Privacy Policy was last updated on 05.09.24. We may change our privacy
-        privacy practices from time to time and will notify you of any material
+        practices from time to time and will notify you of any material changes
-        changes as required by law. Updated policies will be posted on our
+        as required by law. Updated policies will be posted on our website.
-        website. Please check our site periodically for updates.
+        Please check our site periodically for updates.
       </p>
 
       <p className='mt-4 text-base'>
-        <span className='font-bold'>Jurisdiction</span>
+        <span className='font-bold'>Jurisdiction</span>&nbsp; By visiting our
-        By visiting our website, any disputes over privacy are subject to this
+        website, any disputes over privacy are subject to this Policy and the
-        Policy and the website&apos;s terms of use. Disputes arising under this
+        website&apos;s terms of use. Disputes arising under this Policy shall be
-        Policy shall be governed by the laws of India.
+        governed by the laws of India.
       </p>
     </div>
   );

src/components/footer.tsx

@@ -10,11 +10,9 @@ import Image from 'next/image';
 
 export function Footer() {
   return (
-    <footer className='bg-[#f8f6f5] py-12 border-t-2 border-black'>
+    <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'>
-      <div className='max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-4'>
       {/* First Column: Logo and Description */}
-        <div className='space-y-4'>
+      <div className='space-y-4 flex flex-col basis-1/4'>
-          <div className='flex items-center'>
         <Image
           src='/images/logo.png' // Update with your logo path
           alt='Mozimo Logo'
@@ -22,15 +20,13 @@ export function Footer() {
           width={100}
           height={100}
         />
-          </div>
         <p className='text-sm'>
-            India&apos;s Premier European style bean-to-bar chocolate
+          India&apos;s Premier European style bean-to-bar chocolate experience.
-            experience.
         </p>
       </div>
 
       {/* Second Column: Contact Information */}
-        <div className='space-y-4'>
+      <div className='space-y-4 flex flex-col basis-1/4'>
         <h3 className='font-semibold'>Get in touch</h3>
         <p className='text-sm flex items-center'>
           <FaPhoneAlt />
@@ -43,7 +39,7 @@ export function Footer() {
       </div>
 
       {/* Third Column: Links */}
-        <div className='space-y-4'>
+      <div className='space-y-4 flex flex-col basis-1/4'>
         <h3 className='font-semibold'>Know more</h3>
         <ul className='space-y-2'>
           <li>
@@ -63,10 +59,7 @@ export function Footer() {
             </a>
           </li>
           <li>
-              <a
+            <a href='/terms' className='text-sm text-brown-600 hover:underline'>
-                href='/terms'
-                className='text-sm text-brown-600 hover:underline'
-              >
               Terms & Conditions
             </a>
           </li>
@@ -82,7 +75,7 @@ export function Footer() {
       </div>
 
       {/* Additional Links */}
-        <div className='space-y-4'>
+      <div className='space-y-4 flex flex-col basis-1/4'>
         <ul className='space-y-2'>
           <li>
             <a href='/faq' className='text-sm text-brown-600 hover:underline'>
@@ -131,7 +124,6 @@ export function Footer() {
           </a>
         </div>
       </div>
-      </div>
     </footer>
   );
 }

src/components/header.tsx

@@ -1,11 +0,0 @@
-// components/Header.js
-export function Header() {
-  return (
-    <header className='bg-white shadow'>
-      <div className='container mx-auto px-4 py-6'>
-        <h1 className='text-2xl font-bold'>Kakawa Chocolate Shop</h1>
-        {/* Navigation links */}
-      </div>
-    </header>
-  );
-}

src/components/layout.tsx

@@ -1,5 +1,4 @@
 // components/Layout.js
-import { Header } from './header';
 import { Footer } from './footer';
 import { ReactNode } from 'react'; // Import ReactNode
 
@@ -9,7 +8,6 @@ interface LayoutProps {
 export function Layout({ children }: LayoutProps) {
   return (
     <>
-      <Header />
       <main>{children}</main>
       <Footer />
     </>

src/components/navbar.module.css

@@ -20,3 +20,7 @@
   .navBarScrolledUp {
     backdrop-filter: blur(10px); /* Adds a blur effect */
   }
+
+  .cls-1, .cls-2 {
+    fill: #ffffff;
+  }

src/components/navbar.tsx

@@ -5,6 +5,7 @@ import { FiSearch, FiUser } from 'react-icons/fi';
 import { HiShoppingBag } from 'react-icons/hi2';
 import styles from './navbar.module.css';
 import Image from 'next/image';
+import logoPic from '/public/images/logo.svg';
 
 // components/Navbar.tsx
 export function Navbar() {
@@ -40,7 +41,7 @@ export function Navbar() {
     <nav className={navClasses}>
       {/* Left side */}
       <div className='flex items-center'>
-        <Link href='/about' className='text-sm font-medium hover:underline'>
+        <Link href='/about-us' className='text-sm font-medium hover:underline'>
           About Us
         </Link>
       </div>
@@ -48,9 +49,9 @@ export function Navbar() {
       <div className='flex-shrink-0'>
         <Link href='/' className='text-lg font-bold'>
           <Image
-            src='/images/logo.png'
+            src={logoPic}
             alt='Logo'
-            className='logo'
+            className='logo text-white'
             width={100}
             height={100}
           />