About us

2024-09-24 16:19:41 +05:30 · 2024-09-24 16:19:41 +05:30 · e4925eeb16
commit e4925eeb16
parent 42c4a08615
16 changed files with 329 additions and 151 deletions
--- a/public/images/about-us/01-praline.jpg
+++ b/public/images/about-us/01-praline.jpg
--- a/public/images/about-us/02-priyanka-amritanshu.jpg
+++ b/public/images/about-us/02-priyanka-amritanshu.jpg
--- a/public/images/about-us/03-drying.jpg
+++ b/public/images/about-us/03-drying.jpg
--- a/public/images/about-us/04-chef.jpg
+++ b/public/images/about-us/04-chef.jpg
--- a/public/images/about-us/05-bark.jpg
+++ b/public/images/about-us/05-bark.jpg
--- a/public/images/about-us/06-italy.jpg
+++ b/public/images/about-us/06-italy.jpg
--- a/public/images/logo.svg
+++ b/public/images/logo.svg
--- a/src/app/about-us/page.tsx
+++ b/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'>
-      <h1 className='text-4xl font-bold'>About Us</h1>
-      <p className='mt-4 text-lg'>
-        Kakawa is a fictional company that delivers high-quality content through
-        modern web technologies.
-      </p>
+    <div className='overflow-x-hidden bg-white'>
+      <section className='flex flex-col items-center pt-20'>
+        {/* Left Column - Text with Header */}
+        <div className='w-full text-8xl font-normal text-center font-montera'>
+          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>
  );
 }
--- a/src/app/globalicons.css
+++ b/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');
--- a/src/app/page.tsx
+++ b/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>
--- a/src/app/privacy-policy/page.tsx
+++ b/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>
-        You can opt out of receiving our marketing emails by emailing{' '}
+        <span className='font-bold'>Email Opt-Out:</span>&nbsp; You can opt out
+        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>
-        For questions about this Policy or other privacy concerns, you can also
+        <span className='font-bold'>Email: info@mozimo.in</span>&nbsp; For
+        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>
-        This Privacy Policy was last updated on 05.09.24. We may change our
-        privacy practices from time to time and will notify you of any material
-        changes as required by law. Updated policies will be posted on our
-        website. Please check our site periodically for updates.
+        <span className='font-bold'>Updates to This Policy</span>&nbsp; This
+        Privacy Policy was last updated on 05.09.24. We may change our privacy
+        practices from time to time and will notify you of any material changes
+        as required by law. Updated policies will be posted on our website.
+        Please check our site periodically for updates.
      </p>

      <p className='mt-4 text-base'>
-        <span className='font-bold'>Jurisdiction</span>
-        By visiting our website, any disputes over privacy are subject to this
-        Policy and the website&apos;s terms of use. Disputes arising under this
-        Policy shall be governed by the laws of India.
+        <span className='font-bold'>Jurisdiction</span>&nbsp; By visiting our
+        website, any disputes over privacy are subject to this Policy and the
+        website&apos;s terms of use. Disputes arising under this Policy shall be
+        governed by the laws of India.
      </p>
    </div>
  );
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@ -10,126 +10,118 @@ import Image from 'next/image';

 export function Footer() {
  return (
-    <footer className='bg-[#f8f6f5] py-12 border-t-2 border-black'>
-      <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='flex items-center'>
-            <Image
-              src='/images/logo.png' // Update with your logo path
-              alt='Mozimo Logo'
-              className='h-10'
-              width={100}
-              height={100}
-            />
-          </div>
-          <p className='text-sm'>
-            India&apos;s Premier European style bean-to-bar chocolate
-            experience.
-          </p>
-        </div>
+    <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='/images/logo.png' // Update with your logo path
+          alt='Mozimo Logo'
+          className='h-10'
+          width={100}
+          height={100}
+        />
+        <p className='text-sm'>
+          India&apos;s Premier European style bean-to-bar chocolate experience.
+        </p>
+      </div>

-        {/* Second Column: Contact Information */}
-        <div className='space-y-4'>
-          <h3 className='font-semibold'>Get in touch</h3>
-          <p className='text-sm flex items-center'>
-            <FaPhoneAlt />
-            &nbsp; 0172-4045414
-          </p>
-          <p className='text-sm flex items-center'>
-            <FaMapLocationDot />
-            &nbsp; SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
-          </p>
-        </div>
+      {/* Second Column: Contact Information */}
+      <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 />
+          &nbsp; 0172-4045414
+        </p>
+        <p className='text-sm flex items-center'>
+          <FaMapLocationDot />
+          &nbsp; SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
+        </p>
+      </div>

-        {/* Third Column: Links */}
-        <div className='space-y-4'>
-          <h3 className='font-semibold'>Know more</h3>
-          <ul className='space-y-2'>
-            <li>
-              <a
-                href='/privacy-policy'
-                className='text-sm text-brown-600 hover:underline'
-              >
-                Privacy Policy
-              </a>
-            </li>
-            <li>
-              <a
-                href='/refund-policy'
-                className='text-sm text-brown-600 hover:underline'
-              >
-                Refund & Return Policy
-              </a>
-            </li>
-            <li>
-              <a
-                href='/terms'
-                className='text-sm text-brown-600 hover:underline'
-              >
-                Terms & Conditions
-              </a>
-            </li>
-            <li>
-              <a
-                href='/shipping'
-                className='text-sm text-brown-600 hover:underline'
-              >
-                Shipping Policy
-              </a>
-            </li>
-          </ul>
-        </div>
+      {/* Third Column: Links */}
+      <div className='space-y-4 flex flex-col basis-1/4'>
+        <h3 className='font-semibold'>Know more</h3>
+        <ul className='space-y-2'>
+          <li>
+            <a
+              href='/privacy-policy'
+              className='text-sm text-brown-600 hover:underline'
+            >
+              Privacy Policy
+            </a>
+          </li>
+          <li>
+            <a
+              href='/refund-policy'
+              className='text-sm text-brown-600 hover:underline'
+            >
+              Refund & Return Policy
+            </a>
+          </li>
+          <li>
+            <a href='/terms' className='text-sm text-brown-600 hover:underline'>
+              Terms & Conditions
+            </a>
+          </li>
+          <li>
+            <a
+              href='/shipping'
+              className='text-sm text-brown-600 hover:underline'
+            >
+              Shipping Policy
+            </a>
+          </li>
+        </ul>
+      </div>

-        {/* Additional Links */}
-        <div className='space-y-4'>
-          <ul className='space-y-2'>
-            <li>
-              <a href='/faq' className='text-sm text-brown-600 hover:underline'>
-                FAQ
-              </a>
-            </li>
-            <li>
-              <a
-                href='/locate'
-                className='text-sm text-brown-600 hover:underline'
-              >
-                Locate our Store
-              </a>
-            </li>
-            <li>
-              <a
-                href='/bulk-ordering'
-                className='text-sm text-brown-600 hover:underline'
-              >
-                Bulk Ordering
-              </a>
-            </li>
-          </ul>
-          <h3 className='font-semibold'>Find Us On</h3>
-          <div className='flex space-x-4'>
+      {/* Additional Links */}
+      <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'>
+              FAQ
+            </a>
+          </li>
+          <li>
            <a
-              href='https://facebook.com'
-              className='text-brown-600 hover:text-brown-800'
+              href='/locate'
+              className='text-sm text-brown-600 hover:underline'
            >
-              <FaFacebook />
+              Locate our Store
            </a>
+          </li>
+          <li>
            <a
-              href='https://instagram.com'
-              className='text-brown-600 hover:text-brown-800'
+              href='/bulk-ordering'
+              className='text-sm text-brown-600 hover:underline'
            >
-              <FaInstagram />
+              Bulk Ordering
            </a>
-            <a
-              href='https://youtube.com'
-              className='text-brown-600 hover:text-brown-800'
-            >
-              <FaYoutube />
-            </a>
-            <a href='https://linkedin.com' className=''>
-              <FaLinkedin />
-            </a>
-          </div>
+          </li>
+        </ul>
+        <h3 className='font-semibold'>Find Us On</h3>
+        <div className='flex space-x-4'>
+          <a
+            href='https://facebook.com'
+            className='text-brown-600 hover:text-brown-800'
+          >
+            <FaFacebook />
+          </a>
+          <a
+            href='https://instagram.com'
+            className='text-brown-600 hover:text-brown-800'
+          >
+            <FaInstagram />
+          </a>
+          <a
+            href='https://youtube.com'
+            className='text-brown-600 hover:text-brown-800'
+          >
+            <FaYoutube />
+          </a>
+          <a href='https://linkedin.com' className=''>
+            <FaLinkedin />
+          </a>
        </div>
      </div>
    </footer>
--- a/src/components/header.tsx
+++ b/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>
-  );
-}
--- a/src/components/layout.tsx
+++ b/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 />
    </>
--- a/src/components/navbar.module.css
+++ b/src/components/navbar.module.css
@ -19,4 +19,8 @@
  /* Custom style */
  .navBarScrolledUp {
    backdrop-filter: blur(10px); /* Adds a blur effect */
-  }
+  }
+
+  .cls-1, .cls-2 {
+    fill: #ffffff;
+  }
--- a/src/components/navbar.tsx
+++ b/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}
          />
				`@ -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');`