56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
import Image from 'next/image';
|
|
import styles from './BlogSection.module.css';
|
|
|
|
const posts = [
|
|
{
|
|
title: 'The Secret Behind Our Perfectly Crisp Dosas',
|
|
date: 'March 15, 2026',
|
|
excerpt: 'Discover the traditional fermentation process and the precise rice-to-lentil ratio that makes our dosas perfectly crisp every single time.',
|
|
image: '/images/hero-dosa.png',
|
|
},
|
|
{
|
|
title: '5 Health Benefits of South Indian Cuisine',
|
|
date: 'February 28, 2026',
|
|
excerpt: 'From gut-friendly fermented foods to antioxidant-rich spices, learn why South Indian food is as healthy as it is delicious.',
|
|
image: '/images/south-indian-thali.png',
|
|
},
|
|
{
|
|
title: 'A Guide to South Indian Spices',
|
|
date: 'February 10, 2026',
|
|
excerpt: 'Mustard seeds, curry leaves, and tamarind. We break down the essential flavor profiles that define authentic South Indian cooking.',
|
|
image: '/images/sambar.png',
|
|
}
|
|
];
|
|
|
|
export default function BlogSection() {
|
|
return (
|
|
<section className={styles.section}>
|
|
<div className={styles.container}>
|
|
<p className={styles.sectionTag}>📰 Culinary Journal</p>
|
|
<h2 className={styles.sectionTitle}>Latest from Our Blog</h2>
|
|
|
|
<div className={styles.blogGrid}>
|
|
{posts.map((post, index) => (
|
|
<article key={index} className={styles.blogCard}>
|
|
<div className={styles.imageWrap}>
|
|
<Image
|
|
src={post.image}
|
|
alt={post.title}
|
|
fill
|
|
className={styles.image}
|
|
/>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<span className={styles.date}>{post.date}</span>
|
|
<h3 className={styles.title}>{post.title}</h3>
|
|
<p className={styles.excerpt}>{post.excerpt}</p>
|
|
<a href="#" className={styles.readMore}>Read Article →</a>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|