@extends('layout')
@section('content')


    <section class="section-spacing product">
        <div class="container">
            <h1><span style="font-family:'Alluring Delight Free',cursive"> Iyangars Specials </span> Timeless Recipes,
 Authentic Sweet Flavours</h1>
         <div  style="margin-bottom:50px;"><span>Authentic South Indian sweets, made fresh using traditional recipes and pure ingredients.</span></div>
            
            <nav class="filter-nav">
                <button class="filter-btn active" data-filter="all">ALL ITEMS</button>
                <button class="filter-btn" data-filter="mixtures">MIXTURES</button>
                <button class="filter-btn" data-filter="seval">SEVAL</button>
            </nav>
            <div class="product-grid">
                <div class="product-card" data-category="mixtures">
                    <div class="image-container">
                        <img src="{{ asset('assets/boonthi.png') }}" alt="Boonthi Mixture">
                        <div class="wishlist-icon"><i class="fa-regular fa-heart"></i></div>
                        <div class="discount-badge">50% Off</div>
                    </div>
                    <div class="card-content">
                        <h3>Kaara Boonthi Mixture</h3>
                        <p class="description">Crunchy, spicy, and perfectly seasoned goodness.</p>
                        <div class="price-row">
                            <select class="weight-select">
                                <option>500 Grams</option>
                                <option>1 KG</option>
                            </select>
                            <div>
                                <span class="old-price">₹150</span>
                                <span class="new-price">₹100</span>
                            </div>
                        </div>
                        <button class="buy-btn">Buy Now</button>
                        <button class="cart-btn">Add to cart</button>
                    </div>
                </div>
                <div class="product-card" data-category="seval">
                    <div class="image-container">
                        <img src="{{ asset('assets/boonthi.png') }}" alt="Butter Seval">
                        <div class="wishlist-icon"><i class="fa-regular fa-heart"></i></div>
                    </div>
                    <div class="card-content">
                        <h3>Butter Seval</h3>
                        <p class="description">Traditional butter snack that melts in your mouth.</p>
                        <div class="price-row">
                            <select class="weight-select">
                                <option>500 Grams</option>
                                <option>1 KG</option>
                            </select>
                            <div>
                                <span class="new-price">₹120</span>
                            </div>
                        </div>
                        <button class="buy-btn">Buy Now</button>
                        <button class="cart-btn">Add to cart</button>
                    </div>
                </div>
            </div>
            <button class="explore-btn">Explore More</button>
        </div>
    </section>


@endsection