59 lines
2.8 KiB
JavaScript
59 lines
2.8 KiB
JavaScript
import Image from 'next/image';
|
|
import styles from './MenuSection.module.css';
|
|
|
|
const menuItems = [
|
|
{ name: 'Classic Plain Dosa', desc: 'A naturally fermented, savory crepe made from stone-ground rice and lentils. Perfectly thin, healthy, and crispy.', price: '$8.99', image: '/images/plain-dosa.png' },
|
|
{ name: 'South Indian Thali', desc: 'A nostalgic feast of authentic vegetable curries, dal, rice, and traditional desserts. The ultimate comfort meal.', price: '$24.99', image: '/images/south-indian-thali.jpeg' },
|
|
{ name: 'Authentic Sambar', desc: 'A hearty, tangy lentil and vegetable stew brewed with a special blend of roasted spices and tamarind.', price: '$8.99', image: '/images/sambar.png' },
|
|
{ name: 'Crispy Masala Dosa', desc: 'Our signature savory crepe, folded over a comforting, spiced potato and onion curry.', price: '$12.99', image: '/images/crispy-masala.png' },
|
|
{ name: 'Medu Vada', desc: 'Savory, deep-fried lentil donuts with a crispy exterior and fluffy center, infused with cumin and curry leaves.', price: '$9.99', image: '/images/medu-vada.png' },
|
|
{ name: 'Mysore Masala Dosa', desc: 'A crispy crepe lined with a fiery, traditional red garlic-chili chutney, stuffed with a hearty potato filling.', price: '$13.99', image: '/images/mysore-masala.png' },
|
|
];
|
|
|
|
export default function MenuSection() {
|
|
return (
|
|
<section id="menu" className={styles.section}>
|
|
<div className={styles.container}>
|
|
{/* <p className={styles.sectionTag}>🍽️ Our Menu</p> */}
|
|
<span className={styles.eyebrow}>
|
|
<span className={styles.eyebrowIcon}>✨</span> Explore Our Menu
|
|
</span>
|
|
<h2 className={styles.sectionTitle}>
|
|
A Taste of <em>South India</em>
|
|
</h2>
|
|
|
|
{/* Menu Grid */}
|
|
<div className={styles.menuGrid}>
|
|
{menuItems.map((item, i) => (
|
|
<div key={i} className={styles.menuItem}>
|
|
<div className={styles.menuItemImageWrap}>
|
|
<Image
|
|
src={item.image}
|
|
alt={item.name}
|
|
width={80}
|
|
height={80}
|
|
className={styles.menuItemImage}
|
|
/>
|
|
</div>
|
|
<div className={styles.menuItemContent}>
|
|
<div className={styles.menuItemTop}>
|
|
<h3 className={styles.itemName}>{item.name}</h3>
|
|
{/* <span className={styles.dots}></span> */}
|
|
{/* <span className={styles.itemPrice}>{item.price}</span> */}
|
|
</div>
|
|
<p className={styles.itemDesc}>{item.desc}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className={styles.center}>
|
|
<a href="/menu" className={styles.btnViewFull}>
|
|
Explore Full Menu
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|