Beginning of ecommerce
This commit is contained in:
99
src/app/(static)/page.tsx
Normal file
99
src/app/(static)/page.tsx
Normal file
@ -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'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user