<?php
include 'includes/header.php';
$page = 'home';
?>
<main>
    <section class="inner-banner-wrap">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="content">
                        <h2>Shop</h2>
                    </div>
                </div>
                <div class="col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                    <div class="content">
                        <ul>
                            <li>
                                <a href="javascript:;">Home</a>
                            </li>
                            <li>
                                <i class="fa-solid fa-pipe"></i>
                            </li>
                            <li>
                                <a href="javascript:;">Shop</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="products-wrap shopSec-one">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    <div class="products-main">
                        <div class="left-side">
                            <div class="brand-list">
                                <h4>Categories</h4>
                                <ul>
                                    <li>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="category1">
                                            <label class="form-check-label" for="category1">
                                                <a href="javascript:;">Featured Products <span>(35)</span></a>
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="brand-list">
                                <h4>Filter</h4>
                                <div class="rest-btnBOx">
                                    <p>12 products </p>
                                </div>
                            </div>
                            <div class="brand-list">
                                <h4>Filter</h4>
                                <div class="rest-btnBOx">
                                    <p>0 selected </p>
                                    <div class="btn-box">
                                        <button type="button" class="btn btn-rest">Reset</button>
                                    </div>
                                </div>
                                <ul>
                                    <li>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="category2">
                                            <label class="form-check-label" for="category2">
                                                In stock <span>(12)</span>
                                            </label>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="" id="category3">
                                            <label class="form-check-label" for="category3">
                                                Out of stock <span>(1)</span>
                                            </label>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="filter-box">
                                <h4>Price</h4>
                                <div class="rest-btnBOx">
                                    <p>The highest price is $699.00 </p>
                                    <div class="btn-box">
                                        <button type="button" class="btn btn-rest">Reset</button>
                                    </div>
                                </div>
                                <div class="price-range-block">
                                    <div class="result-head">
                                        <input type="number" min=0 max="1050" oninput="validity.valid||(value='0');"
                                            name="min_price" id="min_price" class="price-range-field" />
                                        <input type="number" min=0 max="1050" oninput="validity.valid||(value='1050');"
                                            name="max_price" id="max_price" class="price-range-field" />
                                    </div>
                                    <div id="slider-range" class="price-filter-range" name="rangeInput"></div>
                                    <div id="searchResults" class="search-results-block text-price"></div>
                                    <!-- <div class="btn-box">
                                        <button class="btn btn-primary price-range-search"
                                            id="price-range-submit">Search</button>
                                    </div> -->
                                </div>
                            </div>
                            <div class="discount-product">
                                <a href="javascript:;">
                                    <div class="main-img">
                                        <img src="images/collection-01.webp" alt="img" class="img-fluid">
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="products-list">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="shop-banner">
                                        <h2>Featured Products (12)</h2>
                                        <div class="main-img">
                                            <img src="images/shop-baner.webp" alt="img" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                                    <div class="sorting-box">
                                        <div class="sort-by">
                                            <h4>Sort by:</h4>
                                            <div class="input-main">
                                                <select class="form-select" aria-label="Default select example">
                                                    <option selected>Featured</option>
                                                    <option value="Best selling">Best selling</option>
                                                    <option value="Alphabetically, A-Z">Alphabetically, A-Z</option>
                                                    <option value="Alphabetically, Z-A">Alphabetically, Z-A</option>
                                                    <option value="Price, low to high">Price, low to high</option>
                                                    <option value="Price, high to low">Price, high to low</option>
                                                    <option value="Date, new to old">Date, new to old</option>
                                                    <option value="Date, old to new">Date, old to new</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                    <div class="product-card">
                                        <a href="product-detail.php">
                                            <div class="main-img">
                                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                                <div class="ab-img">
                                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="product-content">
                                            <div class="info">
                                                <h2>
                                                    <a href="product-detail.php">Terra baking powder</a>
                                                </h2>
                                                <ul>
                                                    <li><span class="new-price">$350.00</span></li>
                                                    <li><i class="fa-solid fa-tilde"></i></li>
                                                    <li><span class="old-price">$399.00</span></li>
                                                </ul>
                                            </div>
                                            <div class="product-action">
                                                <div class="btn-box">
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-eye"></i></a>
                                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to
                                                        cart</a>
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-heart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                    <div class="product-card">
                                        <a href="product-detail.php">
                                            <div class="main-img">
                                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                                <div class="ab-img">
                                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="product-content">
                                            <div class="info">
                                                <h2>
                                                    <a href="product-detail.php">Terra baking powder</a>
                                                </h2>
                                                <ul>
                                                    <li><span class="new-price">$350.00</span></li>
                                                    <li><i class="fa-solid fa-tilde"></i></li>
                                                    <li><span class="old-price">$399.00</span></li>
                                                </ul>
                                            </div>
                                            <div class="product-action">
                                                <div class="btn-box">
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-eye"></i></a>
                                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to
                                                        cart</a>
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-heart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                    <div class="product-card">
                                        <a href="product-detail.php">
                                            <div class="main-img">
                                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                                <div class="ab-img">
                                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="product-content">
                                            <div class="info">
                                                <h2>
                                                    <a href="product-detail.php">Terra baking powder</a>
                                                </h2>
                                                <ul>
                                                    <li><span class="new-price">$350.00</span></li>
                                                    <li><i class="fa-solid fa-tilde"></i></li>
                                                    <li><span class="old-price">$399.00</span></li>
                                                </ul>
                                            </div>
                                            <div class="product-action">
                                                <div class="btn-box">
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-eye"></i></a>
                                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to
                                                        cart</a>
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-heart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                    <div class="product-card">
                                        <a href="product-detail.php">
                                            <div class="main-img">
                                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                                <div class="ab-img">
                                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="product-content">
                                            <div class="info">
                                                <h2>
                                                    <a href="product-detail.php">Terra baking powder</a>
                                                </h2>
                                                <ul>
                                                    <li><span class="new-price">$350.00</span></li>
                                                    <li><i class="fa-solid fa-tilde"></i></li>
                                                    <li><span class="old-price">$399.00</span></li>
                                                </ul>
                                            </div>
                                            <div class="product-action">
                                                <div class="btn-box">
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-eye"></i></a>
                                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to
                                                        cart</a>
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-heart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                    <div class="product-card">
                                        <a href="product-detail.php">
                                            <div class="main-img">
                                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                                <div class="ab-img">
                                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="product-content">
                                            <div class="info">
                                                <h2>
                                                    <a href="product-detail.php">Terra baking powder</a>
                                                </h2>
                                                <ul>
                                                    <li><span class="new-price">$350.00</span></li>
                                                    <li><i class="fa-solid fa-tilde"></i></li>
                                                    <li><span class="old-price">$399.00</span></li>
                                                </ul>
                                            </div>
                                            <div class="product-action">
                                                <div class="btn-box">
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-eye"></i></a>
                                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to
                                                        cart</a>
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-heart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 col-xxl-4">
                                    <div class="product-card">
                                        <a href="product-detail.php">
                                            <div class="main-img">
                                                <img src="images/product-1.webp" alt="img" class="img-fluid">
                                                <div class="ab-img">
                                                    <img src="images/product-01.webp" alt="img" class="img-fluid">
                                                </div>
                                            </div>
                                        </a>
                                        <div class="product-content">
                                            <div class="info">
                                                <h2>
                                                    <a href="product-detail.php">Terra baking powder</a>
                                                </h2>
                                                <ul>
                                                    <li><span class="new-price">$350.00</span></li>
                                                    <li><i class="fa-solid fa-tilde"></i></li>
                                                    <li><span class="old-price">$399.00</span></li>
                                                </ul>
                                            </div>
                                            <div class="product-action">
                                                <div class="btn-box">
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-eye"></i></a>
                                                    <a href="javascript:;" class="btn btn-primary btn-wh">Add to
                                                        cart</a>
                                                    <a href="javascript:;" class="btn btn-icon"><i
                                                            class="fa-regular fa-heart"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>
<?php
include 'includes/footer.php';
$page = 'home';
?>