Almost all content on home page

src/components/category-slider.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { useState } from 'react';
+import Image from 'next/image';
+
+const categories = [
+  { name: 'Bars', image: '/images/categories/bars.jpg' },
+  { name: 'Barks', image: '/images/categories/barks.jpg' },
+  { name: 'Pralines', image: '/images/categories/pralines.jpg' },
+  { name: 'Spreads', image: '/images/categories/spreads.jpg' },
+  { name: 'Dragees', image: '/images/categories/dragees.jpg' },
+  { name: 'Gelatos', image: '/images/categories/gelatos.jpg' },
+];
+
+export function ChocolateCategories() {
+  const [currentImage, setCurrentImage] = useState(categories[0].image);
+
+  return (
+    <section className='flex flex-col md:flex-row items-center "bg-[#f9f6f5] py-12 px-4 sm:px-6 lg:px-8"'>
+      {/* Left Side: Categories */}
+      <ul className='space-y-4 text-[#5a352a] font-serif text-5xl flex flex-col justify-center w-1/2 bg-white text-left pl-10'>
+        {categories.map((category) => (
+          <li
+            key={category.name}
+            onMouseEnter={() => setCurrentImage(category.image)}
+            className='hover:text-[#c19a6b] cursor-pointer'
+          >
+            {category.name}
+          </li>
+        ))}
+      </ul>
+
+      {/* Right Side: Image */}
+      <div className='w-full md:w-1/2'>
+        <Image
+          src={currentImage}
+          alt='Chocolate Category'
+          width={500}
+          height={300}
+        />
+      </div>
+    </section>
+  );
+}

src/components/footer.tsx

@@ -1,54 +1,69 @@
 // components/Footer.js
 export default function Footer() {
-    return (
-      <footer className="bg-white text-brown-800 py-12">
-      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-4">
+  return (
+    <footer className='bg-white text-brown-800 py-12'>
+      <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">
+        <div className='space-y-4'>
+          <div className='flex items-center'>
             <img
-              src="/images/logo.png" // Update with your logo path
-              alt="Mozimo Logo"
-              className="h-10"
+              src='/images/logo.png' // Update with your logo path
+              alt='Mozimo Logo'
+              className='h-10'
             />
           </div>
-          <p className="text-sm">India's Premier European style bean-to-bar chocolate experience.</p>
+          <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">
-          <span className="material-symbols-outlined">call</span>
+        <div className='space-y-4'>
+          <h3 className='font-semibold'>Get in touch</h3>
+          <p className='text-sm flex items-center'>
+            <span className='material-symbols-outlined'>call</span>
             0172-4045414
           </p>
-          <p className="text-sm flex items-center">
-          <span className="material-symbols-outlined">pin_drop</span>
+          <p className='text-sm flex items-center'>
+            <span className='material-symbols-outlined'>pin_drop</span>
             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">
+        <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">
+              <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">
+              <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">
+              <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">
+              <a
+                href='/shipping'
+                className='text-sm text-brown-600 hover:underline'
+              >
                 Shipping Policy
               </a>
             </li>
@@ -56,48 +71,66 @@ export default function Footer() {
         </div>
 
         {/* Additional Links */}
-        <div className="space-y-4">
-        <ul className="space-y-2">
+        <div className='space-y-4'>
+          <ul className='space-y-2'>
             <li>
-              <a href="/faq" className="text-sm text-brown-600 hover:underline">
+              <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">
+              <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">
+              <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">
-            <a href="https://facebook.com" className="text-brown-600 hover:text-brown-800">
-              <img src="/icons/facebook.svg" />
+          <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'
+            >
+              <img src='/icons/facebook.svg' />
             </a>
-            <a href="https://instagram.com" className="text-brown-600 hover:text-brown-800">
-            <img src="/icons/instagram.svg" />
+            <a
+              href='https://instagram.com'
+              className='text-brown-600 hover:text-brown-800'
+            >
+              <img src='/icons/instagram.svg' />
             </a>
-            <a href="https://youtube.com" className="text-brown-600 hover:text-brown-800">
-            <img src="/icons/youtube.svg" />
+            <a
+              href='https://youtube.com'
+              className='text-brown-600 hover:text-brown-800'
+            >
+              <img src='/icons/youtube.svg' />
             </a>
-            <a href="https://linkedin.com" className="text-brown-600 hover:text-brown-800">
-            <img src="/icons/linkedin.svg" />
+            <a
+              href='https://linkedin.com'
+              className='text-brown-600 hover:text-brown-800'
+            >
+              <img src='/icons/linkedin.svg' />
             </a>
           </div>
         </div>
       </div>
     </footer>
   );
-};
+}
 
-      // <footer className="bg-gray-800 text-white">
-      //   <div className="container mx-auto px-4 py-6">
-      //     <p>&copy; {new Date().getFullYear()} Kakawa Chocolate Shop. All rights reserved.</p>
-      //     {/* Social media links */}
-      //   </div>
-      // </footer>
+// <footer className="bg-gray-800 text-white">
+//   <div className="container mx-auto px-4 py-6">
+//     <p>&copy; {new Date().getFullYear()} Kakawa Chocolate Shop. All rights reserved.</p>
+//     {/* Social media links */}
+//   </div>
+// </footer>

src/components/header.tsx

@@ -1,12 +1,11 @@
 // components/Header.js
 export default 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>
-    );
-  }
-  
+  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/homepage-video.tsx

@@ -1,8 +1,16 @@
 export function HomepageVideo() {
-    return (
-      <video width="1080" height="1920" controls preload="auto" loop autoPlay muted >
-        <source src="/videos/homepage-video.mp4" type="video/mp4" />
-        Your browser does not support the video tag.
-      </video>
-    )
-  }
+  return (
+    <video
+      width='1080'
+      height='1920'
+      controls
+      preload='auto'
+      loop
+      autoPlay
+      muted
+    >
+      <source src='/videos/homepage-video.mp4' type='video/mp4' />
+      Your browser does not support the video tag.
+    </video>
+  );
+}

src/components/layout.tsx

@@ -1,8 +1,12 @@
 // components/Layout.js
 import Header from './header';
 import Footer from './footer';
+import { ReactNode } from 'react'; // Import ReactNode
 
-export default function Layout({ children }) {
+interface LayoutProps {
+  children: ReactNode; // Define the type of children prop
+}
+export default function Layout({ children }: LayoutProps) {
   return (
     <>
       <Header />
@@ -10,4 +14,4 @@ export default function Layout({ children }) {
       <Footer />
     </>
   );
-}
+}

src/components/navbar.tsx

@@ -1,21 +1,27 @@
 // components/Navbar.tsx
 export default function Navbar() {
-    return (
-      <nav className="navbar">
-      <div className="left">
-        <a href="#about-us">About Us</a>
-        <a href="#shop">Shop</a>
+  return (
+    <nav className='navbar'>
+      <div className='left'>
+        <a href='#about-us'>About Us</a>
+        <a href='#shop'>Shop</a>
       </div>
-      <div className="center">
-        <a href="/" className="mx-0"><img src="/images/logo.png" alt="Logo" className="logo" /></a>
+      <div className='center'>
+        <a href='/' className='mx-0'>
+          <img src='/images/logo.png' alt='Logo' className='logo' />
+        </a>
       </div>
-      <div className="right">
-        <a href="#search"><span className="material-symbols-outlined">search</span></a>
-        <a href="#shopping"><span className="material-symbols-outlined">shopping_bag</span></a>
-        <a href="#profile"><span className="material-symbols-outlined">person</span></a>
+      <div className='right'>
+        <a href='#search'>
+          <span className='material-symbols-outlined'>search</span>
+        </a>
+        <a href='#shopping'>
+          <span className='material-symbols-outlined'>shopping_bag</span>
+        </a>
+        <a href='#profile'>
+          <span className='material-symbols-outlined'>person</span>
+        </a>
       </div>
     </nav>
-
-    );
-  }
-  
+  );
+}

src/components/our-collection.tsx

@@ -0,0 +1,42 @@
+import Image from 'next/image';
+
+const collections = [
+  {
+    title: 'Bestsellers',
+    image: '/images/collections/bestsellers.jpg', // replace with actual image path
+  },
+  {
+    title: 'New Arrivals',
+    image: '/images/collections/new-arrivals.jpg', // replace with actual image path
+  },
+  {
+    title: 'Gift Collection',
+    image: '/images/collections/gifting.jpg', // replace with actual image path
+  },
+];
+
+export function Collections() {
+  return (
+    <div className='max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
+      {collections.map((collection, index) => (
+        <div
+          key={index}
+          className='block rounded-lg overflow-hidden shadow-lg bg-white transition transform hover:scale-105 duration-300'
+        >
+          <Image
+            src={collection.image}
+            alt={collection.title}
+            width={500}
+            height={300}
+            className='w-full object-cover'
+          />
+          <div className='p-4'>
+            <h3 className='text-center text-base font-light'>
+              {collection.title}
+            </h3>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/swiper.tsx

@@ -0,0 +1,41 @@
+'use client';
+// import Swiper core and required modules
+import { Autoplay, Pagination, Scrollbar } from 'swiper/modules';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
+import 'swiper/css/scrollbar';
+
+export function HeroSwiper() {
+  return (
+    <Swiper
+      // install Swiper modules
+      modules={[Autoplay, Pagination, Scrollbar]}
+      autoplay={{
+        delay: 2500,
+        disableOnInteraction: false,
+      }}
+      pagination={{ clickable: true }}
+      scrollbar={{ draggable: true }}
+      onSwiper={(swiper) => console.log(swiper)}
+      onSlideChange={() => console.log('slide change')}
+    >
+      <SwiperSlide>
+        <img src='/images/slider/slider-01.jpg' className='w-full' />
+      </SwiperSlide>
+      <SwiperSlide>
+        <img src='/images/slider/slider-02.jpg' className='w-full' />
+      </SwiperSlide>
+      <SwiperSlide>
+        <img src='/images/slider/slider-03.jpg' className='w-full' />
+      </SwiperSlide>
+      <SwiperSlide>
+        <img src='/images/slider/slider-04.jpg' className='w-full' />
+      </SwiperSlide>
+    </Swiper>
+  );
+}