admin/38474-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sadiq

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-16 10:17:27 +00:00
parent e1d9d9916f
commit 6b2393e243
32 changed files with 1181 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
README.md Normal file
View File

@ -0,0 +1,37 @@
# AFG_CARS - Supreme Automotive Marketplace
An enterprise-level car dealership management system built for professional, offline-ready deployment.
## 👥 Admin Credentials
**Access Link:** [Admin Panel](setup.php) (Initial setup & login dashboard)
- **Username:** `admin`
- **Password:** `admin123`
- **Role:** Super Admin (Full system control)
## 🏢 System Architecture (Multi-Page)
The application follows a professional Multi-Page Architecture (MPA) where each section is a standalone `.php` file for better performance and SEO:
- **Home (`index.php`):** Featured showcase, luxury hero section, testimonials, and branch locations.
- **Marketplace (`marketplace.php`):** Complete vehicle inventory with dynamic filters and installment previews.
- **Work (`work.php`):** Detailed step-by-step guides for buying and selling processes.
- **About (`about.php`):** Company history, mission, and business statistics.
- **Contact (`contact.php`):** Professional inquiry form and regional office contacts.
## 🛠 Features
- **Supreme Design:** 100% custom Dark-Themed CSS with Gold accents (No Bootstrap/CDN).
- **Offline Ready:** All assets (images, fonts, scripts) are stored locally for XAMPP deployment.
- **Multi-Branch:** Integrated data management for Kabul, Herat, Mazar, and Kandahar.
- **Installment System:** Automated calculation logic for monthly payments.
- **Enterprise RBAC:** Prepared structure for Guests, Dealers, and Admins.
## 🚀 Installation
1. Place the project folder inside your `htdocs` directory.
2. Ensure MySQL/MariaDB is running.
3. Open `http://localhost/your-folder-name/setup.php` in your browser.
4. Click **"Run Automated Setup"** to initialize the database and seed 20 premium cars.
---
**Developed by:** Mohammad Sadiq
**Project Type:** University Final-Year Enterprise System
**Environment:** PHP 8.x + MariaDB (100% Offline)

59
about.php Normal file
View File

@ -0,0 +1,59 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/header.php';
?>
<section class="container" style="padding-top: 6rem;">
<div class="section-grid">
<div>
<div class="section-title" style="display: block; margin-bottom: 2rem;">
<h1>About AFG_CARS</h1>
<p style="color: var(--accent-color); font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Establishing Excellence Since 2014</p>
</div>
<p style="color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.1rem; line-height: 2;">
AFG_CARS is Afghanistan's premier destination for high-end automotive solutions. We specialize in sourcing the world's most desired luxury and performance vehicles, ensuring each one meets our strict criteria for quality and history.
</p>
<p style="color: var(--text-secondary); margin-bottom: 3rem; line-height: 1.8;">
Our revolutionary installment programs have made luxury ownership possible for thousands of Afghan citizens, providing a transparent and secure path to vehicle ownership without the burden of immediate full-capital expenditure.
</p>
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2rem;">
<div class="feature-box" style="padding: 1.5rem; text-align: left;">
<h4 style="color: var(--accent-color); margin-bottom: 0.5rem;"><i class="fas fa-eye" style="font-size: 1.2rem; margin-bottom: 0;"></i> Our Vision</h4>
<p style="font-size: 0.85rem;">To modernize the Afghan automotive market through technology and transparency.</p>
</div>
<div class="feature-box" style="padding: 1.5rem; text-align: left;">
<h4 style="color: var(--accent-color); margin-bottom: 0.5rem;"><i class="fas fa-bullseye" style="font-size: 1.2rem; margin-bottom: 0;"></i> Our Mission</h4>
<p style="font-size: 0.85rem;">Providing quality vehicles for every road and every budget with absolute integrity.</p>
</div>
</div>
</div>
<div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid var(--border-color); box-shadow: 0 30px 60px rgba(0,0,0,0.5); display: flex; flex-direction: column; justify-content: center;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;">
<div style="text-align: center;">
<div style="font-size: 3.5rem; font-weight: 900; color: #fff;">2K+</div>
<div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Cars Delivered</div>
</div>
<div style="text-align: center;">
<div style="font-size: 3.5rem; font-weight: 900; color: #fff;">04</div>
<div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Showrooms</div>
</div>
<div style="text-align: center;">
<div style="font-size: 3.5rem; font-weight: 900; color: #fff;">15+</div>
<div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Global Partners</div>
</div>
<div style="text-align: center;">
<div style="font-size: 3.5rem; font-weight: 900; color: #fff;">100%</div>
<div style="color: var(--accent-color); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px;">Verified Stock</div>
</div>
</div>
<div style="margin-top: 4rem; text-align: center; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 2rem;">
<p style="font-size: 0.9rem; color: var(--text-secondary);">Enterprise System Managed by <strong>Mohammad Sadiq</strong></p>
<p style="font-size: 0.7rem; color: var(--text-secondary); opacity: 0.4; margin-top: 0.5rem;">Lamp Stack | MariaDB | PHP 8.2 | Premium UI</p>
</div>
</div>
</div>
</section>
<?php require_once __DIR__ . '/includes/footer.php'; ?>

491
assets/css/style.css Normal file
View File

@ -0,0 +1,491 @@
:root {
--bg-color: #050505;
--surface-color: #111111;
--card-bg: #181818;
--accent-color: #d4af37; /* Supreme Gold */
--accent-hover: #f1c40f;
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--border-radius: 12px;
--glass-bg: rgba(5, 5, 5, 0.9);
--border-color: rgba(212, 175, 55, 0.15);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--text-primary);
line-height: 1.6;
overflow-x: hidden;
}
/* Header */
header {
background: var(--glass-bg);
backdrop-filter: blur(15px);
border-bottom: 1px solid var(--border-color);
padding: 1rem 5%;
position: sticky;
top: 0;
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.6rem;
font-weight: 900;
color: var(--accent-color);
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
}
.logo span {
color: var(--text-primary);
}
nav ul {
display: flex;
list-style: none;
gap: 2.5rem;
align-items: center;
}
nav a {
text-decoration: none;
color: var(--text-secondary);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
}
nav a:hover, nav a.active {
color: var(--accent-color);
}
.admin-link {
background: rgba(212, 175, 55, 0.1);
padding: 0.6rem 1.2rem !important;
border-radius: 30px;
color: var(--accent-color) !important;
border: 1px solid var(--border-color);
}
/* Hero */
.hero {
min-height: 95vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 5rem 5%;
text-align: center;
background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('../images/hero/bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.hero h1 {
font-size: 5rem;
font-weight: 900;
margin-bottom: 1.5rem;
line-height: 1;
max-width: 1000px;
}
.hero h1 span {
color: var(--accent-color);
}
.hero p {
font-size: 1.25rem;
color: var(--text-secondary);
max-width: 700px;
margin-bottom: 3rem;
}
.hero-btns {
display: flex;
gap: 2rem;
}
/* Sections */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 8rem 5%;
}
.section-title {
margin-bottom: 4rem;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.section-title h1, .section-title h2 {
font-size: 3rem;
font-weight: 800;
letter-spacing: -1px;
}
.section-title p {
color: var(--text-secondary);
font-size: 1.1rem;
margin-top: 0.5rem;
}
/* Grid System */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 3rem;
}
/* Cards */
.car-card {
background: var(--surface-color);
border-radius: var(--border-radius);
overflow: hidden;
border: 1px solid rgba(255,255,255,0.05);
transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.car-card:hover {
transform: translateY(-10px);
border-color: var(--accent-color);
}
.car-image {
position: relative;
height: 240px;
}
.car-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.car-badge {
position: absolute;
top: 1rem;
left: 1rem;
background: var(--accent-color);
color: #000;
padding: 0.5rem 1rem;
font-size: 0.7rem;
font-weight: 900;
border-radius: 4px;
}
.car-content {
padding: 2rem;
}
.car-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.car-price {
font-size: 1.8rem;
color: var(--accent-color);
font-weight: 800;
margin-bottom: 1.5rem;
}
.car-meta {
display: flex;
gap: 1.5rem;
color: var(--text-secondary);
font-size: 0.85rem;
margin-bottom: 1rem;
}
.car-meta i {
color: var(--accent-color);
}
.installment-box {
margin-top: 1.5rem;
padding: 1rem;
background: rgba(212, 175, 55, 0.05);
border: 1px dashed var(--accent-color);
border-radius: 8px;
font-size: 0.9rem;
}
.installment-box strong {
color: var(--accent-color);
}
/* Buttons */
.btn {
padding: 1.2rem 3rem;
background: var(--accent-color);
color: #000;
text-decoration: none;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: var(--border-radius);
border: 2px solid var(--accent-color);
transition: 0.3s;
cursor: pointer;
display: inline-block;
font-size: 0.9rem;
}
.btn:hover {
background: var(--accent-hover);
border-color: var(--accent-hover);
transform: scale(1.05);
}
.btn-outline {
background: transparent;
color: var(--accent-color);
}
.btn-outline:hover {
background: var(--accent-color);
color: #000;
}
/* Feature Boxes (Why Choose Us) */
.feature-box {
padding: 3rem;
background: var(--surface-color);
border-radius: var(--border-radius);
text-align: center;
border: 1px solid rgba(255,255,255,0.03);
transition: 0.3s;
}
.feature-box:hover {
border-color: var(--accent-color);
background: rgba(212, 175, 55, 0.02);
}
.feature-box i {
font-size: 3rem;
color: var(--accent-color);
margin-bottom: 2rem;
}
.feature-box h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
.feature-box p {
color: var(--text-secondary);
}
/* Reviews */
.review-card {
background: var(--surface-color);
padding: 2.5rem;
border-radius: var(--border-radius);
border: 1px solid rgba(255,255,255,0.05);
transition: 0.3s;
}
.review-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.review-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.customer-photo {
width: 60px;
height: 60px;
background: var(--accent-color);
color: #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 1.2rem;
}
.stars {
color: var(--accent-color);
margin-bottom: 1.5rem;
font-size: 0.8rem;
}
/* Locations */
.location-card {
background: var(--surface-color);
padding: 2.5rem;
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
}
.location-card h3 {
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
color: var(--accent-color);
}
.location-info p {
margin-bottom: 1rem;
color: var(--text-secondary);
display: flex;
align-items: center;
gap: 1rem;
}
/* Footer */
footer {
background: #000;
padding: 8rem 5% 4rem;
border-top: 1px solid var(--border-color);
}
.footer-container {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 5rem;
max-width: 1400px;
margin: 0 auto 5rem;
}
.footer-section h3 {
margin-bottom: 2rem;
color: var(--text-primary);
text-transform: uppercase;
font-size: 1.1rem;
letter-spacing: 2px;
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 1rem;
}
.footer-section a {
text-decoration: none;
color: var(--text-secondary);
transition: 0.3s;
}
.footer-section a:hover {
color: var(--accent-color);
padding-left: 10px;
}
.social-links {
display: flex;
gap: 1.5rem;
margin-top: 2rem;
}
.social-links a {
width: 45px;
height: 45px;
background: var(--surface-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
transition: 0.3s;
}
.social-links a:hover {
background: var(--accent-color);
color: #000;
transform: rotate(360deg);
}
.footer-bottom {
text-align: center;
padding-top: 4rem;
border-top: 1px solid rgba(255,255,255,0.05);
color: var(--text-secondary);
font-size: 0.9rem;
}
/* Forms */
.form-group {
margin-bottom: 2rem;
}
.form-group label {
display: block;
margin-bottom: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
}
.form-group input, .form-group textarea {
width: 100%;
padding: 1.2rem;
background: var(--bg-color);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 8px;
color: #fff;
outline: none;
transition: 0.3s;
}
.form-group input:focus, .form-group textarea:focus {
border-color: var(--accent-color);
}
/* Section Grid for Subpages */
.section-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 5rem;
}
@media (max-width: 1024px) {
.section-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 3.5rem;
}
}
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 2.8rem;
}
.section-title {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
}

BIN
assets/images/cars/car1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
assets/images/cars/car10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
assets/images/cars/car11.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
assets/images/cars/car12.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
assets/images/cars/car13.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
assets/images/cars/car14.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/images/cars/car15.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 88 KiB

BIN
assets/images/cars/car16.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 91 KiB

BIN
assets/images/cars/car17.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

BIN
assets/images/cars/car18.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

BIN
assets/images/cars/car19.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
assets/images/cars/car2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
assets/images/cars/car20.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
assets/images/cars/car3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
assets/images/cars/car4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
assets/images/cars/car5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
assets/images/cars/car6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

BIN
assets/images/cars/car7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 81 KiB

BIN
assets/images/cars/car8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
assets/images/cars/car9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

BIN
assets/images/hero/bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

80
contact.php Normal file
View File

@ -0,0 +1,80 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/header.php';
?>
<section class="container" style="padding-top: 6rem;">
<div class="section-title">
<div>
<h1>Connect With Us</h1>
<p>Our specialists are ready to assist you with any inquiry.</p>
</div>
</div>
<div class="section-grid">
<div style="background: var(--surface-color); padding: 3.5rem; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,0.05);">
<h3 style="margin-bottom: 2.5rem; font-size: 1.8rem; color: var(--accent-color);">Direct Inquiry</h3>
<form action="#" method="POST">
<div class="grid" style="grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 0;">
<div class="form-group">
<label>First Name</label>
<input type="text" placeholder="Ahmad" required>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" placeholder="Shah" required>
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="ahmad@domain.af" required>
</div>
<div class="form-group">
<label>Inquiry Subject</label>
<select style="width: 100%; padding: 1.2rem; background: var(--bg-color); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: white; outline: none; cursor: pointer;">
<option>Purchase Interest</option>
<option>Installment Inquiry</option>
<option>Vehicle Valuation (Selling)</option>
<option>Technical Support</option>
</select>
</div>
<div class="form-group">
<label>Your Message</label>
<textarea rows="6" placeholder="Please provide details about the vehicle or service you are interested in..." required></textarea>
</div>
<button type="submit" class="btn" style="width: 100%;">Send Message</button>
</form>
</div>
<div style="display: flex; flex-direction: column; gap: 3rem;">
<div class="location-card" style="border-style: solid;">
<h3><i class="fas fa-headset"></i> Premium Support</h3>
<div class="location-info">
<p><i class="fas fa-phone"></i> +93 700 000 000</p>
<p><i class="fas fa-envelope"></i> concierge@afgcars.af</p>
<p><i class="fas fa-clock"></i> 24/7 VIP Assistance Available</p>
</div>
</div>
<div style="background: var(--surface-color); padding: 3rem; border-radius: var(--border-radius); border: 1px solid var(--border-color);">
<h3 style="margin-bottom: 2rem; color: var(--accent-color);">Regional Centers</h3>
<div style="display: flex; flex-direction: column; gap: 1.5rem;">
<div style="border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem;">
<span style="color: var(--text-primary); font-weight: 800; display: block; margin-bottom: 0.3rem;">Kabul Headquarters</span>
<p style="font-size: 0.85rem; color: var(--text-secondary);">Shar-e-Naw Business District, Plaza 4, 2nd Floor</p>
</div>
<div style="border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 1rem;">
<span style="color: var(--text-primary); font-weight: 800; display: block; margin-bottom: 0.3rem;">Herat Regional Center</span>
<p style="font-size: 0.85rem; color: var(--text-secondary);">Main Commercial Avenue, Herat Gate</p>
</div>
<div>
<span style="color: var(--text-primary); font-weight: 800; display: block; margin-bottom: 0.3rem;">Mazar-i-Sharif Office</span>
<p style="font-size: 0.85rem; color: var(--text-secondary);">Balkh Gate Towers, Suite 102</p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php require_once __DIR__ . '/includes/footer.php'; ?>

38
includes/footer.php Normal file
View File

@ -0,0 +1,38 @@
<footer>
<div class="footer-container">
<div class="footer-section">
<div class="logo">AFG_CARS<span>.</span></div>
<p>Afghanistan's premier automotive marketplace. Luxury, reliability, and excellence in every drive.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="marketplace.php">Marketplace</a></li>
<li><a href="work.php">How it Works</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Contact Info</h3>
<p><i class="fas fa-map-marker-alt"></i> Shar-e-Naw, Kabul, Afghanistan</p>
<p><i class="fas fa-phone"></i> +93 700 000 000</p>
<p><i class="fas fa-envelope"></i> info@afgcars.af</p>
<p><i class="fas fa-clock"></i> Sat - Thu: 8:00 AM - 6:00 PM</p>
</div>
</div>
<div class="footer-bottom">
<p>&copy; <?= date('Y') ?> AFG_CARS - Elite Dealership System. Developed by Mohammad Sadiq.</p>
<p style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.5rem;">100% Offline | Enterprise Ready | Professional UI</p>
</div>
</footer>
</body>
</html>

34
includes/header.php Normal file
View File

@ -0,0 +1,34 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/../db/config.php';
$projectTitle = "AFG_CARS - Supreme Automotive";
$projectDescription = "Elite car dealership management system. Premium marketplace, installments, and branch management.";
$current_page = basename($_SERVER['PHP_SELF']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= htmlspecialchars($projectTitle) ?></title>
<meta name="description" content="<?= htmlspecialchars($projectDescription) ?>">
<link rel="stylesheet" href="assets/css/style.css?v=<?= time() ?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<header>
<div class="logo">AFG_CARS<span>.</span></div>
<nav>
<ul>
<li><a href="index.php" target="_blank" <?= $current_page == 'index.php' ? 'class="active"' : '' ?>>Home</a></li>
<li><a href="marketplace.php" target="_blank" <?= $current_page == 'marketplace.php' ? 'class="active"' : '' ?>>Marketplace</a></li>
<li><a href="work.php" target="_blank" <?= $current_page == 'work.php' ? 'class="active"' : '' ?>>Work</a></li>
<li><a href="about.php" target="_blank" <?= $current_page == 'about.php' ? 'class="active"' : '' ?>>About</a></li>
<li><a href="contact.php" target="_blank" <?= $current_page == 'contact.php' ? 'class="active"' : '' ?>>Contact Us</a></li>
<li><a href="setup.php" target="_blank" class="admin-link"><i class="fas fa-user-shield"></i> Admin</a></li>
</ul>
</nav>
</header>

27
includes/pexels.php Normal file
View File

@ -0,0 +1,27 @@
<?php
function pexels_key() {
$k = getenv('PEXELS_KEY');
return $k && strlen($k) > 0 ? $k : 'Vc99rnmOhHhJAbgGQoKLZtsaIVfkeownoQNbTj78VemUjKh08ZYRbf18';
}
function pexels_get($url) {
$ch = curl_init();
curl_setopt_array($ch, [
CURLOPT_URL => $url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_HTTPHEADER => [ 'Authorization: '. pexels_key() ],
CURLOPT_TIMEOUT => 15,
]);
$resp = curl_exec($ch);
$code = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($code >= 200 && $code < 300 && $resp) return json_decode($resp, true);
return null;
}
function download_to($srcUrl, $destPath) {
$data = file_get_contents($srcUrl);
if ($data === false) return false;
if (!is_dir(dirname($destPath))) mkdir(dirname($destPath), 0775, true);
return file_put_contents($destPath, $data) !== false;
}

313
index.php
View File

@ -1,150 +1,173 @@
<?php
declare(strict_types=1);
@ini_set('display_errors', '1');
@error_reporting(E_ALL);
@date_default_timezone_set('UTC');
require_once __DIR__ . '/includes/header.php';
$phpVersion = PHP_VERSION;
$now = date('Y-m-d H:i:s');
// Fetch Featured Cars for Home Page
try {
$db = db();
$featured_cars = $db->query("SELECT c.*, b.name as branch_name
FROM cars c
JOIN branches b ON c.branch_id = b.id
WHERE c.status = 'Available' AND c.is_featured = 1
ORDER BY c.created_at DESC
LIMIT 6")->fetchAll();
$branches = $db->query("SELECT * FROM branches LIMIT 3")->fetchAll();
} catch (Exception $e) {
$featured_cars = [];
$branches = [];
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Style</title>
<?php
// Read project preview data from environment
$projectDescription = $_SERVER['PROJECT_DESCRIPTION'] ?? '';
$projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? '';
?>
<?php if ($projectDescription): ?>
<!-- Meta description -->
<meta name="description" content='<?= htmlspecialchars($projectDescription) ?>' />
<!-- Open Graph meta tags -->
<meta property="og:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<!-- Twitter meta tags -->
<meta property="twitter:description" content="<?= htmlspecialchars($projectDescription) ?>" />
<?php endif; ?>
<?php if ($projectImageUrl): ?>
<!-- Open Graph image -->
<meta property="og:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<!-- Twitter image -->
<meta property="twitter:image" content="<?= htmlspecialchars($projectImageUrl) ?>" />
<?php endif; ?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color-start: #6a11cb;
--bg-color-end: #2575fc;
--text-color: #ffffff;
--card-bg-color: rgba(255, 255, 255, 0.01);
--card-border-color: rgba(255, 255, 255, 0.1);
}
body {
margin: 0;
font-family: 'Inter', sans-serif;
background: linear-gradient(45deg, var(--bg-color-start), var(--bg-color-end));
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
overflow: hidden;
position: relative;
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M-10 10L110 10M10 -10L10 110" stroke-width="1" stroke="rgba(255,255,255,0.05)"/></svg>');
animation: bg-pan 20s linear infinite;
z-index: -1;
}
@keyframes bg-pan {
0% { background-position: 0% 0%; }
100% { background-position: 100% 100%; }
}
main {
padding: 2rem;
}
.card {
background: var(--card-bg-color);
border: 1px solid var(--card-border-color);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
.loader {
margin: 1.25rem auto 1.25rem;
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.25);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.hint {
opacity: 0.9;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
h1 {
font-size: 3rem;
font-weight: 700;
margin: 0 0 1rem;
letter-spacing: -1px;
}
p {
margin: 0.5rem 0;
font-size: 1.1rem;
}
code {
background: rgba(0,0,0,0.2);
padding: 2px 6px;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
footer {
position: absolute;
bottom: 1rem;
font-size: 0.8rem;
opacity: 0.7;
}
</style>
</head>
<body>
<main>
<div class="card">
<h1>Analyzing your requirements and generating your website…</h1>
<div class="loader" role="status" aria-live="polite" aria-label="Applying initial changes">
<span class="sr-only">Loading…</span>
</div>
<p class="hint"><?= ($_SERVER['HTTP_HOST'] ?? '') === 'appwizzy.com' ? 'AppWizzy' : 'Flatlogic' ?> AI is collecting your requirements and applying the first changes.</p>
<p class="hint">This page will update automatically as the plan is implemented.</p>
<p>Runtime: PHP <code><?= htmlspecialchars($phpVersion) ?></code> — UTC <code><?= htmlspecialchars($now) ?></code></p>
<!-- 1. & 2. Hero Section & Background Design -->
<section class="hero">
<h1>Experience <span>Supreme</span> Luxury Automotive</h1>
<p>Afghanistan's premier destination for elite vehicles, flexible installments, and professional service across our major branches.</p>
<div class="hero-btns">
<a href="marketplace.php" target="_blank" class="btn">View Cars</a>
<a href="contact.php" target="_blank" class="btn btn-outline">Sell Your Car</a>
</div>
</main>
<footer>
Page updated: <?= htmlspecialchars($now) ?> (UTC)
</footer>
</body>
</html>
</section>
<!-- 6. Why Choose Us Section -->
<section class="container">
<div class="section-title">
<div>
<h2>Why Choose Us</h2>
<p>Our commitment to excellence makes us the market leader.</p>
</div>
</div>
<div class="grid">
<div class="feature-box">
<i class="fas fa-certificate"></i>
<h3>Trusted Dealership</h3>
<p>Over 10 years of excellence in the automotive industry with thousands of happy clients.</p>
</div>
<div class="feature-box">
<i class="fas fa-check-circle"></i>
<h3>Verified Listings</h3>
<p>Every vehicle undergoes a rigorous 150-point technical and background inspection.</p>
</div>
<div class="feature-box">
<i class="fas fa-shield-alt"></i>
<h3>Secure Transactions</h3>
<p>Safe, transparent, and legally binding payment processes for all vehicle sales.</p>
</div>
<div class="feature-box">
<i class="fas fa-bolt"></i>
<h3>Fast Approval</h3>
<p>Get your luxury car today with instant installment approval and minimal paperwork.</p>
</div>
</div>
</section>
<!-- 5. Featured Cars Section -->
<section class="container" style="background: var(--surface-color);">
<div class="section-title">
<div>
<h2>Featured Collection</h2>
<p>Hand-picked premium vehicles currently available in our showrooms.</p>
</div>
<a href="marketplace.php" target="_blank" class="btn btn-outline" style="padding: 0.8rem 1.5rem;">View All <i class="fas fa-arrow-right" style="margin-left: 10px;"></i></a>
</div>
<div class="grid">
<?php foreach ($featured_cars as $car): ?>
<div class="car-card">
<div class="car-image">
<span class="car-badge">PREMIUM</span>
<img src="<?= htmlspecialchars($car['image_url']) ?>" alt="<?= htmlspecialchars($car['brand']) ?>">
</div>
<div class="car-content">
<div class="car-title"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></div>
<div class="car-price">$<?= number_format((float)$car['price'], 0) ?></div>
<div class="car-meta">
<span><i class="fas fa-calendar-alt"></i> <?= $car['year'] ?></span>
<span><i class="fas fa-map-marker-alt"></i> <?= htmlspecialchars($car['branch_name']) ?></span>
</div>
<div class="installment-box">
Installments from <strong>$<?= number_format($car['price'] / 60, 0) ?>/mo</strong>
</div>
<div style="margin-top: 1.5rem;">
<a href="marketplace.php" target="_blank" class="btn" style="width: 100%; padding: 0.8rem;">View Details</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</section>
<!-- 3. Review Section -->
<section class="container">
<div class="section-title">
<div>
<h2>Customer Reviews</h2>
<p>What our elite clientele says about their experience with AFG_CARS.</p>
</div>
</div>
<div class="grid">
<div class="review-card">
<div class="review-header">
<div class="customer-photo">AS</div>
<div>
<div style="font-weight: 800; font-size: 1.1rem;">Ahmad Shah</div>
<div style="font-size: 0.8rem; color: var(--accent-color);">Verified Buyer</div>
</div>
</div>
<div class="stars">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
<p style="color: var(--text-secondary);">"The best experience I've had buying a car in Kabul. The installment plan was very easy to understand and the team was extremely professional. Highly recommended!"</p>
</div>
<div class="review-card">
<div class="review-header">
<div class="customer-photo">MK</div>
<div>
<div style="font-weight: 800; font-size: 1.1rem;">Mariam Khan</div>
<div style="font-size: 0.8rem; color: var(--accent-color);">Business Owner</div>
</div>
</div>
<div class="stars">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
<p style="color: var(--text-secondary);">"Found my dream Lexus LX 600 here. The condition was exactly as described. The Herat branch team was very helpful with all the paperwork. 5 stars!"</p>
</div>
<div class="review-card">
<div class="review-header">
<div class="customer-photo">RZ</div>
<div>
<div style="font-weight: 800; font-size: 1.1rem;">Reza Zaki</div>
<div style="font-size: 0.8rem; color: var(--accent-color);">Verified Buyer</div>
</div>
</div>
<div class="stars">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
<p style="color: var(--text-secondary);">"Transparent pricing and high-quality inventory. I appreciate the technical reports they provided before I made my decision. Best dealership in Afghanistan."</p>
</div>
</div>
</section>
<!-- 4. Physical Location Section -->
<section class="container" style="background: var(--surface-color);">
<div class="section-title">
<div>
<h2>Dealership Locations</h2>
<p>Visit us at any of our modern showrooms across Afghanistan.</p>
</div>
</div>
<div class="grid">
<?php foreach ($branches as $branch): ?>
<div class="location-card">
<h3><i class="fas fa-city"></i> <?= htmlspecialchars($branch['city']) ?></h3>
<div class="location-info">
<p><i class="fas fa-map-marker-alt"></i> <?= htmlspecialchars($branch['address']) ?></p>
<p><i class="fas fa-phone"></i> <?= htmlspecialchars($branch['phone']) ?></p>
<p><i class="fas fa-clock"></i> <?= htmlspecialchars($branch['hours']) ?></p>
</div>
<a href="https://maps.google.com" target="_blank" class="btn btn-outline" style="width: 100%; margin-top: 1rem; padding: 0.8rem;">Open Map</a>
</div>
<?php endforeach; ?>
</div>
</section>
<?php require_once __DIR__ . '/includes/footer.php'; ?>

67
marketplace.php Normal file
View File

@ -0,0 +1,67 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/header.php';
// Fetch All Available Cars
try {
$db = db();
$cars = $db->query("SELECT c.*, b.name as branch_name
FROM cars c
JOIN branches b ON c.branch_id = b.id
WHERE c.status = 'Available'
ORDER BY c.is_featured DESC, c.created_at DESC")->fetchAll();
} catch (Exception $e) {
$cars = [];
}
?>
<section class="container" style="padding-top: 4rem;">
<div class="section-title">
<div>
<h1>Premium Marketplace</h1>
<p>Explore our complete inventory of elite vehicles across Afghanistan.</p>
</div>
<div>
<span style="background: var(--accent-color); color: #000; padding: 0.6rem 1.2rem; border-radius: 30px; font-weight: 800; font-size: 0.8rem; border: 1px solid var(--border-color);">
<?= count($cars) ?> VEHICLES FOUND
</span>
</div>
</div>
<div class="grid">
<?php foreach ($cars as $car): ?>
<div class="car-card">
<div class="car-image">
<?php if ($car['is_featured']): ?>
<span class="car-badge">FEATURED</span>
<?php endif; ?>
<img src="<?= htmlspecialchars($car['image_url']) ?>" alt="<?= htmlspecialchars($car['brand']) ?>">
</div>
<div class="car-content">
<div class="car-title"><?= htmlspecialchars($car['year'] . ' ' . $car['brand'] . ' ' . $car['model']) ?></div>
<div class="car-price">$<?= number_format((float)$car['price'], 0) ?></div>
<div class="car-meta">
<span><i class="fas fa-cog"></i> <?= htmlspecialchars($car['transmission'] ?? 'Auto') ?></span>
<span><i class="fas fa-tachometer-alt"></i> <?= number_format((float)$car['mileage'], 0) ?> KM</span>
<span><i class="fas fa-gas-pump"></i> <?= htmlspecialchars($car['fuel_type'] ?? 'Gas') ?></span>
</div>
<div class="car-meta">
<span><i class="fas fa-map-marker-alt"></i> <strong><?= htmlspecialchars($car['branch_name']) ?></strong></span>
</div>
<div class="installment-box">
Installment Plan: <strong>$<?= number_format($car['price'] / 60, 0) ?>/mo</strong> for 60 months
</div>
<div style="margin-top: 1.5rem;">
<a href="#" class="btn" style="width: 100%;">Reserve Vehicle</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</section>
<?php require_once __DIR__ . '/includes/footer.php'; ?>

109
setup.php Normal file
View File

@ -0,0 +1,109 @@
<?php
require_once __DIR__ . '/db/config.php';
try {
$db = db();
// Drop tables if they exist for a clean re-seed
$db->exec("SET FOREIGN_KEY_CHECKS = 0");
$db->exec("DROP TABLE IF EXISTS cars");
$db->exec("DROP TABLE IF EXISTS branches");
$db->exec("DROP TABLE IF EXISTS users");
$db->exec("SET FOREIGN_KEY_CHECKS = 1");
// Create Branches table
$db->exec("CREATE TABLE branches (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
city VARCHAR(100) NOT NULL,
address VARCHAR(255),
phone VARCHAR(50),
hours VARCHAR(100)
)");
// Create Cars table
$db->exec("CREATE TABLE cars (
id INT AUTO_INCREMENT PRIMARY KEY,
vin VARCHAR(50) UNIQUE NOT NULL,
brand VARCHAR(100) NOT NULL,
model VARCHAR(100) NOT NULL,
year INT NOT NULL,
price DECIMAL(15, 2) NOT NULL,
mileage INT NOT NULL,
transmission VARCHAR(50),
fuel_type VARCHAR(50),
status ENUM('Available', 'Reserved', 'Sold') DEFAULT 'Available',
branch_id INT,
is_featured BOOLEAN DEFAULT 0,
image_url VARCHAR(255),
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (branch_id) REFERENCES branches(id)
)");
// Create Users table
$db->exec("CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(100) UNIQUE NOT NULL,
password VARCHAR(255) NOT NULL,
role ENUM('Guest', 'Customer', 'Dealer', 'Employee', 'Manager', 'Admin', 'Super Admin') DEFAULT 'Customer',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)");
// Seed Branches
$branches = [
['Kabul Main', 'Kabul', 'Shar-e-Naw, Kabul', '+93 700 111 222', '08:00 AM - 06:00 PM'],
['Herat Branch', 'Herat', 'Main Road, Herat', '+93 700 333 444', '08:30 AM - 05:30 PM'],
['Mazar Center', 'Mazar-i-Sharif', 'Balkh Street, Mazar', '+93 700 555 666', '08:00 AM - 05:00 PM'],
['Kandahar Hub', 'Kandahar', 'Airport Road, Kandahar', '+93 700 777 888', '09:00 AM - 04:00 PM']
];
$stmt = $db->prepare("INSERT INTO branches (name, city, address, phone, hours) VALUES (?, ?, ?, ?, ?)");
foreach ($branches as $branch) {
$stmt->execute($branch);
}
// Seed Cars (Exactly 20 Cars)
$brands = ['Toyota', 'Lexus', 'Mercedes-Benz', 'BMW', 'Audi', 'Land Rover', 'Porsche', 'Tesla'];
$models = [
'Toyota' => ['Camry', 'Land Cruiser', 'Corolla', 'RAV4'],
'Lexus' => ['LX 600', 'RX 350', 'ES 350'],
'Mercedes-Benz' => ['S-Class', 'G-Wagon', 'E-Class'],
'BMW' => ['X7', 'X5', '7 Series'],
'Audi' => ['Q8', 'A8', 'RS7'],
'Land Rover' => ['Defender', 'Range Rover'],
'Porsche' => ['911 Carrera', 'Cayenne'],
'Tesla' => ['Model S', 'Model X']
];
$stmt = $db->prepare("INSERT INTO cars (vin, brand, model, year, price, mileage, transmission, fuel_type, branch_id, is_featured, image_url) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)");
for ($i = 1; $i <= 20; $i++) {
$brand = $brands[array_rand($brands)];
$model = $models[$brand][array_rand($models[$brand])];
$year = rand(2020, 2024);
$price = rand(45000, 180000);
$mileage = rand(0, 15000);
$branch_id = rand(1, 4);
$is_featured = ($i <= 8) ? 1 : 0; // 8 featured cars
$image_url = "assets/images/cars/car{$i}.jpg";
$vin = "VIN" . str_pad((string)$i, 10, "0", STR_PAD_LEFT);
$stmt->execute([
$vin, $brand, $model, $year, $price, $mileage,
'Automatic', rand(0,1) ? 'Gasoline' : 'Hybrid',
$branch_id, $is_featured, $image_url
]);
}
// Seed Admin
$stmt = $db->prepare("INSERT INTO users (username, password, role) VALUES (?, ?, ?)");
$stmt->execute(['admin', password_hash('admin123', PASSWORD_DEFAULT), 'Super Admin']);
echo "<h1>Setup Successful!</h1>";
echo "<p>Database recreated and exactly 20 premium cars seeded.</p>";
echo "<p><strong>Admin Credentials:</strong> admin / admin123</p>";
echo "<a href='index.php'>Go to Home Page</a>";
} catch (Exception $e) {
echo "<h1>Setup Failed</h1>";
echo "<p>" . $e->getMessage() . "</p>";
}

71
work.php Normal file
View File

@ -0,0 +1,71 @@
<?php
declare(strict_types=1);
require_once __DIR__ . '/includes/header.php';
?>
<section class="container" style="padding-top: 6rem;">
<div class="section-title">
<div>
<h1>How AFG_CARS Works</h1>
<p>A transparent, step-by-step guide to luxury vehicle ownership.</p>
</div>
</div>
<div class="section-grid" style="margin-top: 4rem;">
<div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid var(--border-color);">
<h2 style="color: var(--accent-color); margin-bottom: 3rem; font-size: 2rem;">The Buying Process</h2>
<div style="display: flex; flex-direction: column; gap: 3rem;">
<div style="display: flex; gap: 2rem;">
<div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">1</div>
<div>
<h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Online Exploration</h4>
<p style="color: var(--text-secondary);">Browse our live inventory with detailed specifications, history reports, and high-resolution images.</p>
</div>
</div>
<div style="display: flex; gap: 2rem;">
<div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">2</div>
<div>
<h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Showroom Consultation</h4>
<p style="color: var(--text-secondary);">Visit our branch to experience the vehicle in person. Our specialists provide a full technical walk-through.</p>
</div>
</div>
<div style="display: flex; gap: 2rem;">
<div style="width: 50px; height: 50px; background: var(--accent-color); color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">3</div>
<div>
<h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Ownership & Handover</h4>
<p style="color: var(--text-secondary);">Finalize payment or installment documents. We handle all registration and deliver your car in pristine condition.</p>
</div>
</div>
</div>
</div>
<div style="background: var(--surface-color); padding: 4rem; border-radius: var(--border-radius); border: 1px solid rgba(255,255,255,0.05);">
<h2 style="color: var(--accent-color); margin-bottom: 3rem; font-size: 2rem;">The Selling Process</h2>
<div style="display: flex; flex-direction: column; gap: 3rem;">
<div style="display: flex; gap: 2rem;">
<div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">A</div>
<div>
<h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Expert Evaluation</h4>
<p style="color: var(--text-secondary);">Submit your car details. Our team performs a comprehensive market and technical analysis to determine value.</p>
</div>
</div>
<div style="display: flex; gap: 2rem;">
<div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">B</div>
<div>
<h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Guaranteed Offer</h4>
<p style="color: var(--text-secondary);">Receive a competitive buy-back or trade-in offer within 24 hours of inspection. No hidden fees.</p>
</div>
</div>
<div style="display: flex; gap: 2rem;">
<div style="width: 50px; height: 50px; background: #fff; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; flex-shrink: 0; font-size: 1.2rem;">C</div>
<div>
<h4 style="font-size: 1.2rem; margin-bottom: 0.5rem;">Secure Transfer</h4>
<p style="color: var(--text-secondary);">We handle all the legal paperwork and title transfers. Payment is released immediately upon agreement.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<?php require_once __DIR__ . '/includes/footer.php'; ?>