113 lines
4.4 KiB
JavaScript
113 lines
4.4 KiB
JavaScript
import Image from 'next/image';
|
|
import styles from './StorySection.module.css';
|
|
|
|
export default function StorySection() {
|
|
return (
|
|
<section id="about" className={styles.section}>
|
|
<div className={styles.container}>
|
|
<div className={styles.grid}>
|
|
{/* Left - Images */}
|
|
<div className={styles.collageWrap}>
|
|
<div className={styles.collageBg}>
|
|
{/* Photo 1 - Top left, tilted left */}
|
|
<div className={`${styles.polaroid} ${styles.polaroid1}`}>
|
|
<div className={styles.polaroidInner}>
|
|
<Image
|
|
src="/images/hero-dosa.png"
|
|
alt="Golden crispy dosa"
|
|
width={280}
|
|
height={220}
|
|
className={styles.polaroidImg}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Photo 2 - Top center, slight right tilt */}
|
|
<div className={`${styles.polaroid} ${styles.polaroid2}`}>
|
|
<div className={styles.polaroidInner}>
|
|
<Image
|
|
src="/images/story-heritage.png"
|
|
alt="Chef preparing dosa"
|
|
width={260}
|
|
height={200}
|
|
className={styles.polaroidImg}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Photo 3 - Bottom right */}
|
|
<div className={`${styles.polaroid} ${styles.polaroid3}`}>
|
|
<div className={styles.polaroidInner}>
|
|
<Image
|
|
src="/images/sambar.png"
|
|
alt="Authentic sambar"
|
|
width={240}
|
|
height={190}
|
|
className={styles.polaroidImg}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Photo 4 - Bottom center, wide */}
|
|
<div className={`${styles.polaroid} ${styles.polaroid4}`}>
|
|
<div className={styles.polaroidInner}>
|
|
<Image
|
|
src="/images/crispy-masala.png"
|
|
alt="Crispy masala dosa"
|
|
width={300}
|
|
height={200}
|
|
className={styles.polaroidImg}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Heritage badge */}
|
|
<div className={styles.badge}>
|
|
<span className={styles.badgeNumber}>100%</span>
|
|
<span className={styles.badgeText}>Authentic South Indian<br/>Pure Vegetarian</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right - Content */}
|
|
<div className={styles.content}>
|
|
<p className={styles.sectionTag}>— A Taste of Home</p>
|
|
<h2 className={styles.title}>Welcome to My Dosa Place</h2>
|
|
<p className={styles.description}>
|
|
For those missing the vibrant, comforting kitchens of Tamil Nadu and Karnataka,
|
|
My Dosa Place brings the warmth and nostalgia of back home right to Waterloo.
|
|
We are a pure vegetarian haven dedicated to uncompromised, traditional South Indian flavors.
|
|
</p>
|
|
<p className={styles.description}>
|
|
Every dosa is crafted with love using timeless recipes passed down through generations.
|
|
We stone-grind our batter fresh every day—allowing it to ferment naturally—to ensure
|
|
you get that perfect, healthy, golden-crisp crepe every single time.
|
|
</p>
|
|
|
|
<div className={styles.stats}>
|
|
<div className={styles.statItem}>
|
|
<span className={styles.statNumber}>Authentic</span>
|
|
<span className={styles.statLabel}>Recipes</span>
|
|
</div>
|
|
<div className={styles.statDivider}></div>
|
|
<div className={styles.statItem}>
|
|
<span className={styles.statNumber}>15K+</span>
|
|
<span className={styles.statLabel}>Happy Customers</span>
|
|
</div>
|
|
<div className={styles.statDivider}></div>
|
|
<div className={styles.statItem}>
|
|
<span className={styles.statNumber}>4.9</span>
|
|
<span className={styles.statLabel}>Google Rating</span>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="#menu" className={styles.btnExplore}>
|
|
Explore Our Heritage →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|