Beginning of ecommerce

2024-09-26 09:50:24 +05:30
parent e4925eeb16
commit a5398565cf
25 changed files with 493 additions and 34 deletions
--- a/src/app/(static)/page.tsx
+++ b/src/app/(static)/page.tsx
@ -0,0 +1,99 @@
+import Image from 'next/image';
+import brandStoryPic from '/public/images/homepage/brand-story.jpg';
+import { HomepageVideo } from '@/components/homepage-video';
+import { HeroSwiper } from '@/components/swiper';
+import { Collections } from '@/components/our-collection';
+import { ChocolateCategories } from '@/components/category-slider';
+import { InstagramFeed } from '@/components/instagram';
+import { Spotlight } from '@/components/spotlight';
+
+export default function HomePage() {
+  return (
+    <div className='overflow-x-hidden'>
+      <HeroSwiper />
+      {/* First Two-Column Layout */}
+      <section className='flex flex-col md:flex-row items-center bg-white'>
+        {/* Left Column - Text with Header */}
+        <div className='w-full md:w-1/2'>
+          <div className='m-8 space-y-10'>
+            <h1 className='text-6xl font-normal text-justify font-montera'>
+              Brand Story
+            </h1>
+            <p className='text-xl 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'>
+              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'>
+              Each chocolate is a masterpiece, capturing the essence of cocoa in
+              its purest form.
+            </p>
+          </div>
+        </div>
+        {/* Right Column - Image */}
+        <div className='w-full md:w-1/2'>
+          <Image
+            src={brandStoryPic}
+            alt='Right Side Image'
+            layout='responsive'
+            className='w-full h-auto'
+          />
+        </div>
+      </section>
+      {/* Second Two-Column Layout (Video and Text) */}
+      <section className='flex flex-col md:flex-row items-center bg-white'>
+        {/* Left Column - Video */}
+        <div className='w-full md:w-1/2'>
+          <div className='aspect-w-16 aspect-h-9'>
+            <HomepageVideo />
+          </div>
+        </div>
+
+        {/* Right Column - Text */}
+        <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'>
+              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'>
+              Crafted to perfection Mozimo delivers a sublime sensory experience
+              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!
+            </p>
+          </div>
+        </div>
+      </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'>
+          Our Collections
+        </div>
+        <Collections />
+      </section>
+      {/* Fifth Layout (Categories) */}
+      <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'>
+          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'>
+          In the Spotlight
+        </div>
+        <Spotlight />
+      </section>
+    </div>
+  );
+}