36874-vm/index.php

<?php include 'header.php'; ?>

    <!-- Hero Section -->
    <header class="hero">
        <div class="container">
            <h1 class="display-3">Your Neighborhood Rental Marketplace</h1>
            <p class="lead">Rent anything, from anyone, right around the corner.</p>
            <form class="search-bar" id="locationSearchForm">
                <div class="input-group">
                    <input type="text" class="form-control form-control-lg search-input" id="locationInput" placeholder="Enter your city, neighborhood, or address..." required>
                    <button class="btn btn-light btn-lg search-button" type="submit">
                        <i data-feather="search"></i> Search
                    </button>
                </div>
            </form>
        </div>
    </header>

    <!-- How It Works Section -->
    <section class="section">
        <div class="container">
            <h2 class="section-title">How It Works</h2>
            <div class="row text-center">
                <div class="col-md-4">
                    <div class="p-4">
                        <i data-feather="map-pin" class="how-it-works-icon mb-3"></i>
                        <h3>1. Find Nearby</h3>
                        <p class="text-muted">Enter your location to discover thousands of items available for rent in your area.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-4">
                        <i data-feather="calendar" class="how-it-works-icon mb-3"></i>
                        <h3>2. Book & Rent</h3>
                        <p class="text-muted">Select your item, choose your dates, and book instantly with secure payments.</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="p-4">
                        <i data-feather="smile" class="how-it-works-icon mb-3"></i>
                        <h3>3. Enjoy & Return</h3>
                        <p class="text-muted">Use your rental for as long as you need. Returning it is just as easy.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Items Section -->
    <section class="section bg-light">
        <div class="container">
            <h2 class="section-title">Featured Items</h2>
            <div class="row">
                <!-- Placeholder Item 1 -->
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="card h-100">
                        <img src="https://images.pexels.com/photos/276583/pexels-photo-276583.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="Modern Chair" style="height: 200px; object-fit: cover;">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">Modern Chair</h5>
                            <p class="card-text text-muted">Furniture</p>
                            <div class="mt-auto d-flex justify-content-between align-items-center">
                                <strong>$10 / day</strong>
                                <a href="#" class="btn btn-primary btn-sm">Rent</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Placeholder Item 2 -->
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="card h-100">
                        <img src="https://images.pexels.com/photos/356056/pexels-photo-356056.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="Laptop" style="height: 200px; object-fit: cover;">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">MacBook Pro</h5>
                            <p class="card-text text-muted">Electronics</p>
                            <div class="mt-auto d-flex justify-content-between align-items-center">
                                <strong>$25 / day</strong>
                                <a href="#" class="btn btn-primary btn-sm">Rent</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Placeholder Item 3 -->
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="card h-100">
                        <img src="https://images.pexels.com/photos/3932930/pexels-photo-3932930.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="Camping Tent" style="height: 200px; object-fit: cover;">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">Camping Tent</h5>
                            <p class="card-text text-muted">Outdoors</p>
                            <div class="mt-auto d-flex justify-content-between align-items-center">
                                <strong>$15 / day</strong>
                                <a href="#" class="btn btn-primary btn-sm">Rent</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Placeholder Item 4 -->
                <div class="col-md-6 col-lg-3 mb-4">
                    <div class="card h-100">
                        <img src="https://images.pexels.com/photos/164595/pexels-photo-164595.jpeg?auto=compress&cs=tinysrgb&w=600" class="card-img-top" alt="King Size Bed" style="height: 200px; object-fit: cover;">
                        <div class="card-body d-flex flex-column">
                            <h5 class="card-title">King Size Bed</h5>
                            <p class="card-text text-muted">Furniture</p>
                            <div class="mt-auto d-flex justify-content-between align-items-center">
                                <strong>$30 / day</strong>
                                <a href="#" class="btn btn-primary btn-sm">Rent</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<?php include 'footer.php'; ?>