59 lines
2.5 KiB
JavaScript
59 lines
2.5 KiB
JavaScript
import Image from 'next/image';
|
|
import styles from './MenuSection.module.css';
|
|
|
|
const menuItems = [
|
|
{ name: 'Classic Plain Dosa', desc: 'Thin crispy crepe made from fermented rice & lentil batter', price: '$8.99', image: '/images/hero-dosa.png' },
|
|
{ name: 'South Indian Thali', desc: 'A royal feast featuring an array of curries, dal, rice & dessert', price: '$24.99', image: '/images/south-indian-thali.png' },
|
|
{ name: 'Authentic Sambar', desc: 'Flavorful lentil stew with fresh vegetables & tamarind', price: '$8.99', image: '/images/sambar.png' },
|
|
{ name: 'Crispy Masala Dosa', desc: 'Classic dosa filled with spiced potato curry', price: '$12.99', image: '/images/crispy-masala.png' },
|
|
{ name: 'Medu Vada', desc: 'Crispy fried lentil donuts served with coconut chutney', price: '$9.99', image: '/images/new.png' },
|
|
{ name: 'Mysore Masala Dosa', desc: 'Spicy red chutney spread with potato filling inside a crispy dosa', price: '$13.99', image: '/images/hero-dosa.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>
|
|
);
|
|
}
|