38395-vm/index.php

<?php
$page_title = "AFG CARS - Premium Car Marketplace Afghanistan";
include 'includes/header.php';

$pdo = db();
// Get Hot Deals
$stmt = $pdo->query("SELECT * FROM cars WHERE approval_status = 'approved' AND badge = 'Hot Deal' AND status = 'available' LIMIT 3");
$hotDeals = $stmt->fetchAll();

// Get 6 recent approved cars
$stmt = $pdo->query("SELECT * FROM cars WHERE approval_status = 'approved' AND status = 'available' ORDER BY created_at DESC LIMIT 6");
$recentCars = $stmt->fetchAll();
?>

<!-- Hero Section with Background Image -->
<section class="position-relative overflow-hidden pt-5 pb-5 d-flex align-items-center" style="min-height: 80vh; background: url('https://images.pexels.com/photos/120049/pexels-photo-120049.jpeg?auto=compress&cs=tinysrgb&w=1920') no-repeat center center; background-size: cover;">
    <!-- Dark Overlay -->
    <div class="position-absolute top-0 start-0 w-100 h-100" style="background: rgba(0, 0, 0, 0.6); z-index: 1;"></div>
    
    <div class="container pt-lg-5 position-relative" style="z-index: 2;">
        <div class="row align-items-center g-5">
            <div class="col-lg-8 text-white">
                <div class="badge bg-primary px-3 py-2 rounded-pill fw-bold mb-4 shadow-sm">
                    <i class="bi bi-star-fill me-2"></i>ESTABLISHED 2026 | ENTERPRISE EDITION
                </div>
                <h1 class="display-3 fw-bold mb-4 text-white" style="line-height: 1.1; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                    Your Trusted <span class="text-primary">Automotive Partner</span> in Afghanistan.
                </h1>
                <p class="lead mb-5 pe-lg-5 text-white-50">
                    Experience the next generation of car buying. Verified listings, secure digital payments simulation, and national support.
                </p>
                <div class="d-flex flex-wrap gap-3">
                    <a href="cars.php" class="btn btn-primary btn-lg px-5 py-3 rounded-4 shadow-lg border-0">
                        Explore Market <i class="bi bi-arrow-right ms-2"></i>
                    </a>
                    <a href="/user/add-car.php" class="btn btn-outline-light btn-lg px-5 py-3 rounded-4">
                        Sell Your Car
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Search Section -->
<section class="py-5" style="margin-top: -60px;">
    <div class="container">
        <div class="bg-white p-4 rounded-5 shadow-lg border" style="position: relative; z-index: 10;">
            <form action="cars.php" method="GET" class="row g-3 align-items-center">
                <div class="col-md-4">
                    <div class="input-group input-group-lg border-0 bg-light rounded-4">
                        <span class="input-group-text bg-transparent border-0 pe-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" name="q" class="form-control bg-transparent border-0 py-3" placeholder="Search Brand, Model...">
                    </div>
                </div>
                <div class="col-md-3">
                    <select name="location" class="form-select form-select-lg border-0 bg-light rounded-4 py-3 shadow-none">
                        <option selected>All Locations</option>
                        <option>Kabul</option><option>Herat</option><option>Mazar-i-Sharif</option><option>Kandahar</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="max_price" class="form-select form-select-lg border-0 bg-light rounded-4 py-3 shadow-none">
                        <option selected value="">Any Price</option>
                        <option value="10000">Up to $10k</option><option value="25000">Up to $25k</option><option value="50000">Up to $50k</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary btn-lg w-100 py-3 rounded-4 fw-bold shadow-sm">Search</button>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Hot Deals (Horizontal Scroll) -->
<?php if (!empty($hotDeals)): ?>
<section class="py-5">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-4">
            <div>
                <h2 class="fw-bold mb-1">🔥 Hot Deals</h2>
                <p class="text-muted small mb-0">Unbeatable prices on premium vehicles.</p>
            </div>
        </div>
        <div class="row g-4">
            <?php foreach ($hotDeals as $car): ?>
                <div class="col-md-4">
                    <div class="card car-card h-100 bg-white border-primary" style="border: 2px solid #e0e7ff !important;">
                        <div class="position-relative">
                            <img src="<?php echo htmlspecialchars($car['image_url']); ?>" class="card-img-top" alt="...">
                            <div class="badge bg-warning text-dark position-absolute top-0 start-0 m-3 shadow-sm px-3 py-2">HOT DEAL</div>
                        </div>
                        <div class="card-body p-4">
                            <h5 class="fw-bold"><?php echo htmlspecialchars($car['title']); ?></h5>
                            <div class="price-tag mb-3">$<?php echo number_format($car['price']); ?></div>
                            <a href="car-details.php?id=<?php echo $car['id']; ?>" class="btn btn-primary btn-sm w-100 rounded-3">View Deal</a>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<!-- Recent Listings -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end mb-5">
            <div>
                <h2 class="display-6 fw-bold mb-2">Recently Added</h2>
                <p class="text-muted mb-0">Stay updated with the latest arrivals in our market.</p>
            </div>
            <a href="cars.php" class="btn btn-link text-decoration-none fw-bold">View All <i class="bi bi-chevron-right"></i></a>
        </div>

        <div class="row g-4">
            <?php foreach ($recentCars as $car): ?>
            <div class="col-md-6 col-lg-4">
                <div class="car-card bg-white h-100 d-flex flex-column">
                    <div class="position-relative">
                        <img src="<?php echo htmlspecialchars($car['image_url']); ?>" class="card-img-top" alt="...">
                        <div class="position-absolute top-0 end-0 m-3">
                            <span class="badge bg-white text-dark shadow-sm border-0 py-2 px-3"><?php echo $car['year']; ?></span>
                        </div>
                    </div>
                    <div class="card-body p-4 flex-grow-1 d-flex flex-column">
                        <h5 class="fw-bold mb-3"><?php echo htmlspecialchars($car['title']); ?></h5>
                        <div class="d-flex gap-3 text-muted small mb-4">
                            <span><i class="bi bi-geo-alt me-1"></i><?php echo htmlspecialchars($car['location']); ?></span>
                            <span><i class="bi bi-speedometer2 me-1"></i><?php echo number_format($car['mileage']); ?> km</span>
                        </div>
                        <div class="mt-auto d-flex justify-content-between align-items-center">
                            <span class="price-tag">$<?php echo number_format($car['price']); ?></span>
                            <a href="car-details.php?id=<?php echo $car['id']; ?>" class="btn btn-outline-primary btn-sm px-4 rounded-3">Details</a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<!-- Locations Section -->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="text-center mb-5">
            <h2 class="fw-bold">Our Physical Locations</h2>
            <p class="text-muted">Visit our showrooms across Afghanistan for a test drive.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-3">
                <div class="text-center">
                    <h5 class="fw-bold">Kabul Main</h5>
                    <p class="text-muted small">Shar-e-Naw District 4, Kabul</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <h5 class="fw-bold">Herat West</h5>
                    <p class="text-muted small">Blue Mosque Square, Herat</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <h5 class="fw-bold">Mazar North</h5>
                    <p class="text-muted small">University Road, Mazar-i-Sharif</p>
                </div>
            </div>
            <div class="col-md-3">
                <div class="text-center">
                    <h5 class="fw-bold">Kandahar South</h5>
                    <p class="text-muted small">Aino Mina, Kandahar</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="py-5">
    <div class="container">
        <div class="bg-primary text-white p-5 rounded-5 text-center shadow-lg position-relative overflow-hidden">
            <div class="position-absolute top-0 start-0 w-100 h-100 opacity-10" style="background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png');"></div>
            <h2 class="display-5 fw-bold mb-3 position-relative">Ready to Sell Your Vehicle?</h2>
            <p class="lead mb-5 position-relative opacity-75">Join thousands of sellers and get the best value for your car today.</p>
            <a href="/user/add-car.php" class="btn btn-light btn-lg px-5 py-3 rounded-4 fw-bold position-relative">Get Started Now</a>
        </div>
    </div>
</section>

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