@extends('frontend.layouts.app')

@section('title', 'Home Page')
@section('content')
     <main class="container">
        <h2 class="section-title">Shop Our Collection</h2>
        <div class="shop-container">
            <aside class="sidebar">
                <h4>Categories</h4>
                <ul>
                    <li><a href="#">Men's Clothing</a></li>
                    <li><a href="#">Women's Clothing</a></li>
                    <li><a href="#">Electronics</a></li>
                    <li><a href="#">Home & Decor</a></li>
                    <li><a href="#">Books</a></li>
                </ul>
                <br>
                <h4>Price Range</h4>
                <ul>
                    <li><a href="#">Under ₹1,000</a></li>
                    <li><a href="#">₹1,000 - ₹5,000</a></li>
                    <li><a href="#">₹5,000 - ₹10,000</a></li>
                    <li><a href="#">₹10,000+</a></li>
                </ul>
            </aside>
            <div class="main-content">
                <div class="product-grid">
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/2c3e50/fff?text=Product+1" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 1</h3>
                            <p>Product description.</p>
                            <div class="price">₹1,999</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/34495e/fff?text=Product+2" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 2</h3>
                            <p>Product description.</p>
                            <div class="price">₹2,499</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/e74c3c/fff?text=Product+3" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 3</h3>
                            <p>Product description.</p>
                            <div class="price">₹3,999</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/95a5a6/fff?text=Product+4" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 4</h3>
                            <p>Product description.</p>
                            <div class="price">₹1,450</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/2c3e50/fff?text=Product+5" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 5</h3>
                            <p>Product description.</p>
                            <div class="price">₹4,500</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/34495e/fff?text=Product+6" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 6</h3>
                            <p>Product description.</p>
                            <div class="price">₹5,200</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/e74c3c/fff?text=Product+7" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 7</h3>
                            <p>Product description.</p>
                            <div class="price">₹999</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                    <div class="product-card">
                        <img src="https://via.placeholder.com/600x400/95a5a6/fff?text=Product+8" alt="Product Name">
                        <div class="product-info">
                            <h3>Product 8</h3>
                            <p>Product description.</p>
                            <div class="price">₹2,100</div>
                            <a href="#" class="btn">Add to Cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
  @endsection