124 lines
4.9 KiB
TypeScript
124 lines
4.9 KiB
TypeScript
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';
|
|
import { AnimatedText } from '@/components/animated-text';
|
|
import { AnimatedImage } from '@/components/animated-image';
|
|
|
|
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'>
|
|
<AnimatedText finishClass='delay-300'>
|
|
<h2 className='text-6xl font-normal text-justify font-montera'>
|
|
Brand Story
|
|
</h2>
|
|
</AnimatedText>
|
|
<AnimatedText
|
|
startClass='translate-y-8'
|
|
finishClass='translate-y-0'
|
|
>
|
|
<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>
|
|
</AnimatedText>
|
|
</div>
|
|
</div>
|
|
{/* Right Column - Image */}
|
|
<div className='w-full md:w-1/2'>
|
|
<AnimatedImage
|
|
// ref={brandStoryPicRef}
|
|
src={brandStoryPic}
|
|
alt='Right Side Image'
|
|
className='w-full h-auto'
|
|
// {`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`}
|
|
// sizes='100vw'
|
|
// style={{
|
|
// width: '100%',
|
|
// height: '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'>
|
|
<AnimatedText finishClass='delay-300'>
|
|
<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>
|
|
</AnimatedText>
|
|
<AnimatedText
|
|
startClass='translate-y-8'
|
|
finishClass='translate-y-0'
|
|
>
|
|
<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>
|
|
</AnimatedText>
|
|
</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 />
|
|
{/* <a href='#' className='pill-button'>
|
|
Button Text
|
|
</a> */}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|