admin/38703-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-23 11:06:46 +00:00
parent a53d29cad2
commit 4f8d01cddc
5 changed files with 424 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
MONOGRAPH.md Normal file
View File

@ -0,0 +1,132 @@
# Comprehensive Project Monograph: Advanced Vehicle Marketplace System
## 1. Introduction
This document serves as a complete technical monograph for the Vehicle Marketplace System, a full-stack web application designed for the educational sector and general vehicle trading. This system provides a robust platform for users to list vehicles, manage sales, and for buyers to submit purchase requests through a secure, modern interface.
## 2. System Architecture
The application follows a modular LAMP (Linux, Apache, MySQL/MariaDB, PHP) architecture. It is designed to be scalable, secure, and user-centric.
### 2.1 Backend Layer
- **Language:** PHP 8.x (Vanilla PHP for maximum performance and compatibility).
- **Database Interaction:** PDO (PHP Data Objects) with prepared statements to prevent SQL injection.
- **Session Management:** Secure PHP sessions for user authentication and role-based access control.
### 2.2 Frontend Layer
- **HTML5 & CSS3:** Modern semantic markup and advanced styling.
- **Design Paradigm:** Sophisticated Dark Theme with Glassmorphism effects.
- **Typography:** Inter font family for high legibility and professional aesthetics.
- **Responsive Design:** Mobile-first approach using CSS Grid and Flexbox.
### 2.3 Database Layer
- **Engine:** MariaDB/MySQL.
- **Schema Design:** Normalized relational structure with foreign key constraints.
## 3. Technology Stack Detail
### 3.1 PHP (Hypertext Preprocessor)
Used for all server-side logic, including:
- User registration and authentication.
- CRUD operations for vehicle listings.
- Purchase request processing.
- Admin panel logic.
- Email notifications via `MailService.php`.
### 3.2 MariaDB
The database stores all critical information:
- **users table:** Stores user credentials, contact info (phone, address), and roles.
- **cars table:** Stores vehicle details (brand, model, price, description, status).
- **car_images table:** Manages multiple images per vehicle with a primary image flag.
- **purchases table:** Tracks buying requests, bank transaction IDs, and status (pending/approved/rejected).
- **messages table:** Stores contact form submissions.
### 3.3 CSS (Cascading Style Sheets)
The styling is centralized in `assets/css/style.css`, featuring:
- **Custom Variables:** `--primary-color` (Gold), `--bg-color` (Deep Slate), etc.
- **Glassmorphism:** Using `backdrop-filter: blur()` and semi-transparent backgrounds for a premium feel.
- **Animations:** Smooth transitions (`cubic-bezier`) for interactive elements.
## 4. Database Schema Specification
### 4.1 Table: users
| Column | Type | Description |
|---|---|---|
| id | INT | Primary Key, Auto-increment |
| username | VARCHAR(50) | Unique username |
| password | VARCHAR(255) | Hashed password |
| email | VARCHAR(100) | Unique email |
| phone | VARCHAR(20) | User contact number |
| address | TEXT | User physical address |
| role | ENUM | 'user' or 'admin' |
| created_at | TIMESTAMP | Account creation date |
### 4.2 Table: cars
| Column | Type | Description |
|---|---|---|
| id | INT | Primary Key |
| user_id | INT | Foreign Key to users |
| brand | VARCHAR(50) | Vehicle brand |
| model | VARCHAR(50) | Vehicle model |
| year | INT | Manufacturing year |
| price | DECIMAL | Listing price |
| city | VARCHAR(50) | Location |
| description | TEXT | Detailed info |
| status | ENUM | 'pending', 'approved', 'rejected', 'sold' |
### 4.3 Table: purchases
| Column | Type | Description |
|---|---|---|
| id | INT | Primary Key |
| car_id | INT | Foreign Key to cars |
| user_id | INT | Foreign Key to users |
| bank_id | VARCHAR(100) | Transaction reference |
| personal_info| TEXT | Buyer's additional info |
| status | ENUM | 'pending', 'approved', 'rejected' |
## 5. Functional Walkthrough
### 5.1 User Experience (UX)
The user journey starts at the landing page (`index.php`), featuring a high-impact hero section. Users can browse vehicles in `cars.php` with advanced filtering.
### 5.2 Seller Workflow
1. **Login/Register:** Secure entry point.
2. **Dashboard:** Overview of listings.
3. **Add Car:** Upload vehicle details and images.
4. **Management:** Edit or mark listings as sold.
### 5.3 Buyer Workflow
1. **Discovery:** Find a vehicle.
2. **Purchase Request:** Submit a formal request with payment reference (Bank ID).
3. **Tracking:** View request status in the dashboard.
4. **Receipt:** Generate a digital receipt upon approval.
### 5.4 Admin Capabilities
- **Dashboard:** High-level stats (Total sales, users, cars).
- **Approval System:** Approve or reject car listings and purchase requests.
- **User Management:** Oversee the community.
- **Communications:** Manage messages from the contact form.
## 6. UI/UX Design Principles
### 6.1 Sophisticated Dark Theme
The "Darker and User-Friendly" theme uses a color palette that reduces eye strain and emphasizes high-value content.
- **Background:** `#0f172a` (Deep Space)
- **Accents:** `#d4af37` (Luxury Gold)
- **Contrast:** High legibility white and slate-gray text.
### 6.2 Modern Components
- **Cards:** Elevated cards with hover scaling.
- **Glassmorphism:** Professional blur effects for navigation and overlays.
- **Buttons:** Large, accessible touch targets with subtle shadows.
## 7. Security and Integrity
- **Password Hashing:** `password_hash()` and `password_verify()` for industry-standard security.
- **SQL Protection:** 100% usage of PDO prepared statements.
- **Input Sanitization:** `htmlspecialchars()` for XSS prevention.
- **State Management:** Secure session handling and CSRF awareness.
## 8. Conclusion
This system represents a state-of-the-art vehicle marketplace, combining technical excellence with a premium user experience. It is designed to be both a functional tool and a beautiful interface, adhering to the highest standards of modern web development.
---
*Monograph created on February 23, 2026.*
*Version 1.0.0*

460
assets/css/style.css
View File

@ -1,17 +1,18 @@
:root {
--primary-color: #d4af37; /* Gold */
--secondary-color: #1a1a1a; /* Dark Gray */
--bg-color: #0b0b0b;
--card-bg: rgba(255, 255, 255, 0.05);
--secondary-color: #1e293b; /* Dark Slate Blue */
--bg-color: #0f172a; /* Deep Background */
--card-bg: #1e293b;
--glass-border: rgba(255, 255, 255, 0.1);
--text-primary: #ffffff;
--text-secondary: #a0a0a0;
--text-primary: #f8fafc;
--text-secondary: #94a3b8;
--transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
--sidebar-width: 260px;
--danger: #ff4757;
--success: #2ed573;
--warning: #ffa502;
--info: #1e90ff;
--glass-bg: rgba(30, 41, 59, 0.7);
}
* {
@ -30,18 +31,19 @@ body {
/* Glassmorphism utility */
.glass {
background: rgba(255, 255, 255, 0.03);
background: var(--glass-bg);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid var(--glass-border);
border-radius: 20px;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
transition: var(--transition);
}
.glass:hover {
border-color: rgba(212, 175, 55, 0.3);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(212, 175, 55, 0.5);
background: rgba(30, 41, 59, 0.9);
box-shadow: 0 15px 45px -10px rgba(0, 0, 0, 0.4);
}
/* Navbar */
@ -53,7 +55,7 @@ nav {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(11, 11, 11, 0.8);
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--glass-border);
}
@ -84,7 +86,7 @@ nav {
transition: var(--transition);
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.7;
opacity: 0.8;
}
.nav-links a:hover {
@ -92,6 +94,15 @@ nav {
opacity: 1;
}
/* Container */
.container {
padding: 0 6%;
}
.container-fluid {
padding: 0 4%;
}
/* Hero Section */
.hero {
height: 85vh;
@ -100,358 +111,269 @@ nav {
justify-content: center;
align-items: center;
text-align: center;
padding: 0 10%;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../images/hero-bg.jpg') center/cover no-repeat fixed;
border-bottom: 1px solid var(--glass-border);
background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.15), transparent),
radial-gradient(circle at bottom left, rgba(30, 41, 59, 0.5), transparent);
}
.hero h1 {
font-size: 5.5rem;
margin-bottom: 1.5rem;
font-size: 5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 2rem;
letter-spacing: -2px;
line-height: 1;
color: #ffffff;
}
.hero p {
font-size: 1.2rem;
font-size: 1.4rem;
color: var(--text-secondary);
max-width: 600px;
margin-bottom: 3.5rem;
margin-bottom: 3rem;
}
/* Form Styles */
.form-group {
margin-bottom: 1.5rem;
}
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--text-primary);
font-size: 0.9rem;
}
.form-control {
width: 100%;
padding: 1rem 1.2rem;
border-radius: 12px;
background: var(--card-bg);
border: 1px solid var(--glass-border);
color: var(--text-primary);
font-family: inherit;
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}
/* Buttons */
.btn {
padding: 0.9rem 2.2rem;
padding: 1rem 2rem;
border-radius: 12px;
text-decoration: none;
font-weight: 700;
transition: var(--transition);
cursor: pointer;
border: 1px solid transparent;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
gap: 0.8rem;
transition: var(--transition);
border: none;
font-size: 0.95rem;
}
.btn-primary {
background: var(--primary-color);
color: #000;
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
box-shadow: 0 10px 20px -5px rgba(212, 175, 55, 0.4);
}
.btn-primary:hover {
transform: translateY(-4px);
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.4);
background: #e5be48;
transform: translateY(-3px);
box-shadow: 0 15px 30px -5px rgba(212, 175, 55, 0.6);
background: #e5be47;
}
.btn-outline {
background: transparent;
border: 1px solid var(--glass-border);
border: 2px solid var(--glass-border);
color: var(--text-primary);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--primary-color);
color: var(--primary-color);
border-color: var(--text-primary);
}
.btn-sm {
padding: 0.6rem 1.2rem;
font-size: 0.85rem;
}
.btn-auth {
padding: 0.6rem 1.4rem;
border-radius: 10px;
padding: 0.8rem 1.5rem;
border-radius: 12px;
border: 2px solid var(--glass-border);
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
transition: var(--transition);
border: 1px solid var(--glass-border);
background: rgba(255, 255, 255, 0.05);
color: var(--text-primary);
font-weight: 700;
font-size: 0.9rem;
transition: var(--transition);
}
.btn-auth:hover {
background: var(--primary-color);
color: #000;
border-color: var(--primary-color);
color: var(--primary-color);
}
/* Grid & Layout */
.container {
padding: 5rem 6%;
max-width: 1400px;
margin: 0 auto;
}
.section-title {
font-size: 2.8rem;
margin-bottom: 4rem;
text-align: center;
font-weight: 900;
letter-spacing: -1px;
}
/* Grid Layouts */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 3rem;
gap: 2.5rem;
}
/* Admin Dashboard Layout */
.dashboard-container {
display: flex;
min-height: 100vh;
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
/* Card Styling */
.card {
background: var(--card-bg);
border-radius: 24px;
overflow: hidden;
border: 1px solid var(--glass-border);
transition: var(--transition);
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
border-color: rgba(212, 175, 55, 0.3);
}
.card-img {
width: 100%;
height: 250px;
object-fit: cover;
}
.card-content {
padding: 2rem;
}
/* Table styling */
table thead tr {
background: rgba(255, 255, 255, 0.05) !important;
}
table tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
table td {
padding: 1.2rem;
color: var(--text-secondary);
}
table th {
padding: 1.2rem;
text-align: left;
color: var(--text-primary);
font-weight: 700;
}
/* Sidebar (Admin) */
.sidebar {
width: var(--sidebar-width);
background: rgba(15, 15, 15, 0.9);
border-right: 1px solid var(--glass-border);
padding: 2rem 1.5rem;
display: flex;
flex-direction: column;
position: fixed;
height: 100vh;
z-index: 100;
background: var(--bg-color);
border-right: 1px solid var(--glass-border);
position: fixed;
padding: 3rem 2rem;
}
.main-content {
flex: 1;
margin-left: var(--sidebar-width);
padding: 2.5rem;
}
.sidebar-brand {
font-size: 1.4rem;
font-weight: 900;
color: var(--primary-color);
margin-bottom: 3rem;
padding-left: 1rem;
text-decoration: none;
}
.sidebar-menu {
list-style: none;
flex: 1;
}
.sidebar-menu li {
margin-bottom: 0.8rem;
}
.sidebar-menu a {
.sidebar-link {
display: flex;
align-items: center;
padding: 0.8rem 1.2rem;
gap: 1rem;
padding: 1.2rem;
color: var(--text-secondary);
text-decoration: none;
border-radius: 12px;
transition: var(--transition);
font-weight: 600;
border-radius: 12px;
margin-bottom: 0.5rem;
transition: var(--transition);
}
.sidebar-menu a:hover, .sidebar-menu a.active {
.sidebar-link:hover, .sidebar-link.active {
background: rgba(212, 175, 55, 0.1);
color: var(--primary-color);
}
.sidebar-footer {
padding-top: 2rem;
border-top: 1px solid var(--glass-border);
}
/* Dashboard Stats Card */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.stat-card {
padding: 2rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.stat-value {
font-size: 2.2rem;
font-weight: 900;
color: var(--text-primary);
}
.stat-label {
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Tables */
.table-container {
overflow-x: auto;
margin-top: 2rem;
}
table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
th {
padding: 1.2rem;
border-bottom: 1px solid var(--glass-border);
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
}
td {
padding: 1.2rem;
border-bottom: 1px solid rgba(255,255,255,0.03);
font-size: 0.95rem;
}
tr:hover td {
background: rgba(255,255,255,0.02);
}
.badge {
padding: 0.4rem 0.8rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
}
.badge-success { background: rgba(46, 213, 115, 0.1); color: var(--success); }
.badge-warning { background: rgba(255, 165, 2, 0.1); color: var(--warning); }
.badge-danger { background: rgba(255, 71, 87, 0.1); color: var(--danger); }
/* Alerts */
.alert {
padding: 1rem 1.5rem;
border-radius: 12px;
margin-bottom: 2rem;
margin-bottom: 1rem;
font-weight: 600;
}
.alert-error {
background: rgba(255, 71, 87, 0.15);
color: #ff6b81;
border: 1px solid rgba(255, 71, 87, 0.3);
}
.alert-success {
background: rgba(46, 213, 115, 0.1);
color: var(--success);
border: 1px solid rgba(46, 213, 115, 0.2);
background: rgba(46, 213, 115, 0.15);
color: #7bed9f;
border: 1px solid rgba(46, 213, 115, 0.3);
}
/* Car Card Enhancement */
.car-card {
overflow: hidden;
background: rgba(255, 255, 255, 0.02);
}
.car-info {
padding: 1.8rem;
}
.car-price {
color: var(--primary-color);
font-size: 1.6rem;
font-weight: 900;
}
/* Forms */
.form-group {
margin-bottom: 1.5rem;
}
.form-control {
width: 100%;
padding: 0.9rem 1.2rem;
background: rgba(255,255,255,0.03);
border: 1px solid var(--glass-border);
border-radius: 12px;
color: #fff;
font-size: 0.95rem;
transition: var(--transition);
}
.form-control:focus {
border-color: var(--primary-color);
background: rgba(255,255,255,0.06);
outline: none;
box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}
/* Specialized Box Component */
/* Box component */
.box {
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--glass-border);
background: var(--card-bg);
border-radius: 24px;
padding: 2.5rem;
transition: var(--transition);
position: relative;
overflow: hidden;
border: 1px solid var(--glass-border);
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 175, 55, 0.05), transparent);
pointer-events: none;
/* Stats Card */
.stats-card {
padding: 2rem;
border-radius: 20px;
background: var(--card-bg);
border: 1px solid var(--glass-border);
}
.box:hover {
transform: translateY(-5px);
border-color: rgba(212, 175, 55, 0.2);
background: rgba(255, 255, 255, 0.04);
.stats-card h3 {
font-size: 0.9rem;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
@media (max-width: 992px) {
.sidebar { width: 80px; padding: 2rem 0.5rem; }
.sidebar-brand, .sidebar-menu span { display: none; }
.main-content { margin-left: 80px; }
}
@media (max-width: 768px) {
.hero h1 { font-size: 3.5rem; }
.nav-links { display: none; }
.stats-card .value {
font-size: 2.5rem;
font-weight: 900;
color: var(--primary-color);
}
/* Footer Styles */
footer {
background: rgba(11, 11, 11, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: var(--bg-color);
border-top: 1px solid var(--glass-border);
padding: 6rem 6% 3rem;
margin-top: 5rem;
color: var(--text-primary);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 4rem;
max-width: 1400px;
margin: 0 auto;
margin-bottom: 4rem;
}
.footer-col h4 {
color: var(--primary-color);
font-size: 1.1rem;
font-weight: 800;
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 1px;
}
.footer-col ul {
@ -459,7 +381,7 @@ footer {
}
.footer-col ul li {
margin-bottom: 1rem;
margin-bottom: 1.2rem;
}
.footer-col ul li a {
@ -471,30 +393,24 @@ footer {
.footer-col ul li a:hover {
color: var(--primary-color);
padding-left: 5px;
padding-left: 0.5rem;
}
.footer-bottom {
margin-top: 6rem;
padding-top: 3rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-top: 1px solid var(--glass-border);
text-align: center;
}
.footer-bottom p {
color: var(--text-secondary);
font-size: 0.9rem;
}
@media (max-width: 1200px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 1024px) {
.grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
@media (max-width: 768px) {
.grid-4, .grid-3 { grid-template-columns: 1fr; }
.hero h1 { font-size: 3rem; }
.footer-grid { grid-template-columns: 1fr; }
}

22
cars.php
View File

@ -37,7 +37,7 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<div class="container" style="padding: 2rem 0;">
<div style="margin-bottom: 4rem;">
<h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem;">Premium Inventory</h1>
<h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem; color: #fff;">Premium Inventory</h1>
<p style="color: var(--text-secondary); font-size: 1.2rem;">Find the perfect vehicle for your lifestyle in our verified marketplace.</p>
</div>
@ -45,11 +45,11 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<div class="glass" style="padding: 2rem; margin-bottom: 4rem;">
<form method="GET" style="display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 1.5rem; align-items: end;">
<div class="form-group" style="margin-bottom: 0;">
<label>Search</label>
<label style="color: var(--text-secondary);">Search</label>
<input type="text" name="search" class="form-control" placeholder="Search brand or model..." value="<?= htmlspecialchars($search) ?>">
</div>
<div class="form-group" style="margin-bottom: 0;">
<label>City</label>
<label style="color: var(--text-secondary);">City</label>
<select name="city" class="form-control">
<option value="">All Cities</option>
<?php foreach ($cities as $c): ?>
@ -58,7 +58,7 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
</select>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label>Brand</label>
<label style="color: var(--text-secondary);">Brand</label>
<select name="brand" class="form-control">
<option value="">All Brands</option>
<?php foreach ($brands as $b): ?>
@ -66,7 +66,7 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<?php endforeach; ?>
</select>
</div>
<button type="submit" class="btn btn-primary" style="height: 50px;">Apply Filters</button>
<button type="submit" class="btn btn-primary" style="height: 50px; color: #000;">Apply Filters</button>
</form>
</div>
@ -76,21 +76,21 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<div class="glass car-card" style="padding: 0; overflow: hidden; position: relative;">
<div style="height: 220px; background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center; position: relative;">
<?php if ($car['status'] === 'sold'): ?>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; z-index: 2;">
<div style="border: 4px solid #fff; color: #fff; padding: 10px 25px; font-weight: 900; font-size: 2rem; transform: rotate(-15deg); letter-spacing: 4px;">SOLD</div>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 2;">
<div style="border: 4px solid var(--primary-color); color: var(--primary-color); padding: 10px 25px; font-weight: 900; font-size: 2rem; transform: rotate(-15deg); letter-spacing: 4px; text-shadow: 0 5px 15px rgba(0,0,0,0.5);">SOLD</div>
</div>
<?php elseif ($car['is_hot_deal']): ?>
<span style="position: absolute; top: 1.5rem; left: 1.5rem; background: var(--danger); color: white; padding: 0.5rem 1rem; border-radius: 30px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; z-index: 1;">Hot Deal</span>
<?php endif; ?>
</div>
<div style="padding: 2rem;">
<h3 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<h3 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 0.5rem; color: #fff;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem;">
<span>📍</span> <?= htmlspecialchars($car['city']) ?> • <?= $car['year'] ?>
</p>
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1.5rem;">
<span style="font-size: 1.5rem; font-weight: 900; color: var(--primary-color);">$<?= number_format($car['price']) ?></span>
<a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-primary btn-sm" style="<?= $car['status'] === 'sold' ? 'background: #555; pointer-events: none;' : '' ?>">View Details</a>
<a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-primary btn-sm" style="<?= $car['status'] === 'sold' ? 'background: #334155; pointer-events: none; color: #94a3b8;' : 'color: #000;' ?>">View Details</a>
</div>
</div>
</div>
@ -100,10 +100,10 @@ $brands = $pdo->query("SELECT DISTINCT brand FROM cars WHERE status = 'approved'
<?php if (empty($cars)): ?>
<div style="text-align: center; padding: 10rem 0;">
<div style="font-size: 4rem; margin-bottom: 2rem;">🔍</div>
<h2 style="font-weight: 800; margin-bottom: 1rem;">No vehicles found</h2>
<h2 style="font-weight: 800; margin-bottom: 1rem; color: #fff;">No vehicles found</h2>
<p style="color: var(--text-secondary);">Try adjusting your filters or search terms.</p>
</div>
<?php endif; ?>
</div>
<?php require_once __DIR__ . '/includes/footer.php'; ?>
<?php require_once __DIR__ . '/includes/footer.php'; ?>

90
dashboard.php
View File

@ -33,51 +33,53 @@ $stmt->execute([$user_id]);
$my_purchases = $stmt->fetchAll();
?>
<div class="container" style="padding: 2rem 0;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem;">
<div class="container" style="padding: 4rem 0;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 4rem;">
<div>
<h1 style="font-size: 2.5rem; font-weight: 900; margin-bottom: 0.5rem;">User Dashboard</h1>
<p style="color: var(--text-secondary);">Manage your vehicle listings and track your purchase requests.</p>
<h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 0.5rem; color: #fff;">User Dashboard</h1>
<p style="color: var(--text-secondary); font-size: 1.1rem;">Manage your vehicle listings and track your purchase requests.</p>
</div>
<a href="add_car.php" class="btn btn-primary">List New Vehicle</a>
</div>
<div style="display: grid; grid-template-columns: 1fr; gap: 4rem;">
<div style="display: grid; grid-template-columns: 1fr; gap: 5rem;">
<!-- My Listings Section -->
<section>
<h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem;">
<span style="background: var(--primary-color); color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.2rem;">🚗</span>
<h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; color: #fff;">
<span style="background: var(--primary-color); color: #000; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.3rem;">🚗</span>
My Vehicle Listings
</h2>
<?php if (empty($my_listings)): ?>
<div class="glass" style="padding: 4rem; text-align: center;">
<p style="color: var(--text-secondary); margin-bottom: 2rem;">You haven't listed any vehicles yet.</p>
<div class="box" style="padding: 5rem; text-align: center;">
<p style="color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.2rem;">You haven't listed any vehicles yet.</p>
<a href="add_car.php" class="btn btn-outline">Start Selling Today</a>
</div>
<?php else: ?>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem;">
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 2.5rem;">
<?php foreach ($my_listings as $car): ?>
<div class="glass" style="padding: 0; overflow: hidden; position: relative;">
<div style="height: 180px; background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center;">
<div class="card" style="position: relative;">
<div style="height: 200px; background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center;">
<?php if ($car['status'] === 'sold'): ?>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 180px; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 2rem; letter-spacing: 5px;">SOLD</div>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-weight: 900; font-size: 2.5rem; letter-spacing: 5px; text-shadow: 0 5px 15px rgba(0,0,0,0.5);">SOLD</div>
<?php endif; ?>
</div>
<div style="padding: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem;">
<div class="card-content">
<div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem;">
<div>
<h3 style="font-size: 1.2rem; font-weight: 700; margin-bottom: 0.2rem;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<p style="color: var(--text-secondary); font-size: 0.85rem;"><?= $car['year'] ?> - <?= htmlspecialchars($car['city']) ?></p>
<h3 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 0.3rem; color: #fff;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<p style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;"><?= $car['year'] ?> • <?= htmlspecialchars($car['city']) ?></p>
</div>
<span class="badge" style="background: <?= $car['status'] === 'approved' ? 'var(--success)' : ($car['status'] === 'sold' ? '#000' : ($car['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)')) ?>; color: white; padding: 0.3rem 0.6rem; border-radius: 8px; font-size: 0.7rem; text-transform: uppercase; font-weight: 700;">
<span style="background: <?= $car['status'] === 'approved' ? 'var(--success)' : ($car['status'] === 'sold' ? 'rgba(255,255,255,0.1)' : ($car['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)')) ?>; color: <?= $car['status'] === 'approved' || $car['status'] === 'rejected' || $car['status'] === 'sold' ? '#fff' : '#000' ?>; padding: 0.4rem 0.8rem; border-radius: 8px; font-size: 0.75rem; text-transform: uppercase; font-weight: 800; letter-spacing: 0.5px;">
<?= $car['status'] ?>
</span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1rem; margin-top: 1rem;">
<span style="font-weight: 800; color: var(--primary-color);">$<?= number_format($car['price']) ?></span>
<a href="edit_car.php?id=<?= $car['id'] ?>" style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;">Edit Details</a>
<div style="display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1.5rem;">
<span style="font-weight: 900; color: var(--primary-color); font-size: 1.25rem;">$<?= number_format($car['price']) ?></span>
<a href="edit_car.php?id=<?= $car['id'] ?>" style="color: var(--text-primary); font-size: 0.95rem; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 0.5rem;">
Edit Details <span style="color: var(--primary-color);">→</span>
</a>
</div>
</div>
</div>
@ -88,52 +90,52 @@ $my_purchases = $stmt->fetchAll();
<!-- My Purchase Requests Section -->
<section>
<h2 style="font-size: 1.8rem; font-weight: 800; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem;">
<span style="background: var(--primary-color); color: white; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.2rem;">💰</span>
<h2 style="font-size: 2rem; font-weight: 800; margin-bottom: 2.5rem; display: flex; align-items: center; gap: 1rem; color: #fff;">
<span style="background: var(--primary-color); color: #000; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.3rem;">💰</span>
My Purchase Requests
</h2>
<?php if (empty($my_purchases)): ?>
<div class="glass" style="padding: 4rem; text-align: center;">
<p style="color: var(--text-secondary); margin-bottom: 2rem;">You haven't made any purchase requests yet.</p>
<div class="box" style="padding: 5rem; text-align: center;">
<p style="color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.2rem;">You haven't made any purchase requests yet.</p>
<a href="cars.php" class="btn btn-outline">Browse Marketplace</a>
</div>
<?php else: ?>
<div class="glass" style="padding: 0; overflow: hidden;">
<div class="box" style="overflow: hidden; padding: 0;">
<table style="width: 100%; border-collapse: collapse; text-align: left;">
<thead>
<tr style="background: rgba(0,0,0,0.03);">
<th style="padding: 1.5rem;">Vehicle</th>
<th style="padding: 1.5rem;">Price</th>
<th style="padding: 1.5rem;">Bank ID</th>
<th style="padding: 1.5rem;">Status</th>
<th style="padding: 1.5rem;">Action</th>
<tr style="background: rgba(255,255,255,0.02);">
<th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Vehicle</th>
<th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Price</th>
<th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Bank ID</th>
<th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Status</th>
<th style="padding: 1.5rem; font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--text-secondary);">Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($my_purchases as $p): ?>
<tr style="border-bottom: 1px solid var(--glass-border);">
<td style="padding: 1.2rem 1.5rem;">
<div style="display: flex; align-items: center; gap: 1rem;">
<img src="<?= htmlspecialchars($p['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>" style="width: 60px; height: 40px; object-fit: cover; border-radius: 4px;">
<td style="padding: 1.5rem;">
<div style="display: flex; align-items: center; gap: 1.2rem;">
<img src="<?= htmlspecialchars($p['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>" style="width: 80px; height: 50px; object-fit: cover; border-radius: 8px;">
<div>
<div style="font-weight: 700; font-size: 0.95rem;"><?= htmlspecialchars($p['brand'] . ' ' . $p['model']) ?></div>
<div style="font-size: 0.75rem; color: var(--text-secondary);"><?= $p['year'] ?></div>
<div style="font-weight: 800; font-size: 1.1rem; color: #fff;"><?= htmlspecialchars($p['brand'] . ' ' . $p['model']) ?></div>
<div style="font-size: 0.85rem; color: var(--text-secondary); font-weight: 600;"><?= $p['year'] ?> Model</div>
</div>
</div>
</td>
<td style="padding: 1.2rem 1.5rem; font-weight: 700;">$<?= number_format($p['price']) ?></td>
<td style="padding: 1.2rem 1.5rem;"><code style="font-size: 0.8rem;"><?= htmlspecialchars($p['bank_id']) ?></code></td>
<td style="padding: 1.2rem 1.5rem;">
<span style="color: <?= $p['status'] === 'approved' ? 'var(--success)' : ($p['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)') ?>; font-weight: 700; font-size: 0.85rem; text-transform: uppercase;">
<td style="padding: 1.5rem; font-weight: 900; color: var(--primary-color); font-size: 1.1rem;">$<?= number_format($p['price']) ?></td>
<td style="padding: 1.5rem;"><code style="font-size: 0.9rem; background: rgba(255,255,255,0.05); padding: 0.4rem 0.8rem; border-radius: 6px; font-weight: 700; color: var(--primary-color);"><?= htmlspecialchars($p['bank_id']) ?></code></td>
<td style="padding: 1.5rem;">
<span style="color: <?= $p['status'] === 'approved' ? 'var(--success)' : ($p['status'] === 'rejected' ? 'var(--danger)' : 'var(--primary-color)') ?>; font-weight: 800; font-size: 0.9rem; text-transform: uppercase;">
<?= $p['status'] ?>
</span>
</td>
<td style="padding: 1.2rem 1.5rem;">
<td style="padding: 1.5rem;">
<?php if ($p['status'] === 'approved'): ?>
<a href="receipt.php?id=<?= $p['id'] ?>" class="btn btn-primary" style="padding: 0.4rem 0.8rem; font-size: 0.8rem;">View Receipt</a>
<a href="receipt.php?id=<?= $p['id'] ?>" class="btn btn-primary btn-sm">View Receipt</a>
<?php else: ?>
<span style="color: var(--text-secondary); font-size: 0.8rem;">Waiting for review</span>
<span style="color: var(--text-secondary); font-size: 0.9rem; font-weight: 600;">Under Review</span>
<?php endif; ?>
</td>
</tr>

92
index.php
View File

@ -27,10 +27,10 @@ $testimonials = [
];
?>
<section class="hero" style="background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('assets/images/hero-home.jpg') center/cover no-repeat fixed;">
<section class="hero" style="background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('assets/images/hero-home.jpg') center/cover no-repeat fixed;">
<div style="z-index: 2; position: relative;">
<h1>Find Your Premium Ride</h1>
<p>Exclusive luxury vehicles and reliable everyday cars in Afghanistan's most trusted marketplace.</p>
<h1 style="color: #ffffff; font-size: 5rem; font-weight: 900; letter-spacing: -2px;">Find Your Premium Ride</h1>
<p style="color: var(--text-secondary); font-size: 1.4rem; max-width: 700px; margin: 0 auto 3rem;">Exclusive luxury vehicles and reliable everyday cars in Afghanistan's most trusted marketplace.</p>
<div style="display: flex; gap: 1.5rem; justify-content: center;">
<a href="cars.php" class="btn btn-primary">View Marketplace</a>
<?php if (!isset($_SESSION['user_id'])): ?>
@ -42,45 +42,47 @@ $testimonials = [
</div>
</section>
<div class="container">
<h2 class="section-title">Hot Deals</h2>
<div class="grid">
<div class="container" style="margin-top: 5rem; margin-bottom: 5rem;">
<h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 3rem; text-align: center; color: #fff;">Hot Deals</h2>
<div class="grid grid-3">
<?php foreach ($hotDeals as $car): ?>
<div class="car-card glass">
<div class="card">
<div class="car-img-container" style="overflow: hidden; height: 240px; border-bottom: 1px solid var(--glass-border);">
<div class="car-img" style="background-image: url('<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>'); background-size: cover; background-position: center; height: 100%;"></div>
<img src="<?= htmlspecialchars($car['image_path'] ?: 'assets/images/placeholder-car.jpg') ?>" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="car-info">
<div class="car-meta">
<div class="card-content">
<div style="display: flex; gap: 1rem; color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1rem; font-weight: 600;">
<span>📅 <?= htmlspecialchars($car['year']) ?></span>
<span>📍 <?= htmlspecialchars($car['city']) ?></span>
</div>
<h3><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<div class="car-price">$<?= number_format($car['price']) ?></div>
<a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-outline" style="width: 100%; text-align: center;">View Details</a>
<h3 style="margin-bottom: 1.5rem; font-size: 1.5rem; font-weight: 800; color: #fff;"><?= htmlspecialchars($car['brand'] . ' ' . $car['model']) ?></h3>
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="font-size: 1.5rem; font-weight: 900; color: var(--primary-color);">$<?= number_format($car['price']) ?></div>
<a href="car_detail.php?id=<?= $car['id'] ?>" class="btn btn-outline btn-sm">View Details</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<section style="background: rgba(212, 175, 55, 0.03); padding: 8rem 0;">
<section style="background: var(--card-bg); padding: 8rem 0; border-top: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border);">
<div class="container">
<h2 class="section-title">What Our Clients Say</h2>
<div class="grid">
<h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 4rem; text-align: center; color: #fff;">What Our Clients Say</h2>
<div class="grid grid-3">
<?php foreach ($testimonials as $t): ?>
<div class="box">
<div class="review-stars" style="color: var(--primary-color); margin-bottom: 1.5rem;">
<div class="box" style="padding: 3rem; background: var(--bg-color);">
<div class="review-stars" style="color: var(--primary-color); margin-bottom: 1.5rem; font-size: 1.5rem;">
<?php for($i=0; $i<$t['rating']; $i++) echo '★'; ?>
</div>
<p style="font-style: italic; color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem;">"<?= htmlspecialchars($t['text']) ?>"</p>
<p style="font-style: italic; color: var(--text-secondary); line-height: 1.8; margin-bottom: 2rem; font-size: 1.1rem;">"<?= htmlspecialchars($t['text']) ?>"</p>
<div class="review-author" style="display: flex; align-items: center; gap: 1rem;">
<div style="width: 45px; height: 45px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000;">
<div style="width: 50px; height: 50px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000;">
<?= substr($t['name'], 0, 1) ?>
</div>
<div>
<h4 style="margin: 0; font-size: 1rem;"><?= htmlspecialchars($t['name']) ?></h4>
<p style="margin: 0; font-size: 0.8rem; color: var(--text-secondary);"><?= htmlspecialchars($t['city']) ?></p>
<h4 style="margin: 0; font-size: 1.1rem; font-weight: 700; color: #fff;"><?= htmlspecialchars($t['name']) ?></h4>
<p style="margin: 0; font-size: 0.85rem; color: var(--text-secondary);"><?= htmlspecialchars($t['city']) ?></p>
</div>
</div>
</div>
@ -89,35 +91,35 @@ $testimonials = [
</div>
</section>
<div class="container">
<h2 class="section-title">Our Physical Showrooms</h2>
<div class="grid">
<div class="box" style="text-align: center;">
<div style="font-size: 3rem; margin-bottom: 1.5rem;">📍</div>
<h3>Kabul HQ</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">Wazir Akbar Khan, Street 15</p>
<p style="font-weight: 700; color: var(--primary-color); font-size: 1.1rem;">+93 700 123 456</p>
<div class="container" style="padding: 8rem 0;">
<h2 style="font-size: 3rem; font-weight: 900; margin-bottom: 4rem; text-align: center; color: #fff;">Our Physical Showrooms</h2>
<div class="grid grid-3">
<div class="box" style="text-align: center; padding: 4rem 2rem;">
<div style="font-size: 4rem; margin-bottom: 2rem;">📍</div>
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #fff;">Kabul HQ</h3>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Wazir Akbar Khan, Street 15</p>
<p style="font-weight: 800; color: var(--primary-color); font-size: 1.25rem;">+93 700 123 456</p>
</div>
<div class="box" style="text-align: center;">
<div style="font-size: 3rem; margin-bottom: 1.5rem;">📍</div>
<h3>Herat Branch</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">Jada-e-Main, Near Blue Mosque</p>
<p style="font-weight: 700; color: var(--primary-color); font-size: 1.1rem;">+93 700 987 654</p>
<div class="box" style="text-align: center; padding: 4rem 2rem;">
<div style="font-size: 4rem; margin-bottom: 2rem;">📍</div>
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #fff;">Herat Branch</h3>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Jada-e-Main, Near Blue Mosque</p>
<p style="font-weight: 800; color: var(--primary-color); font-size: 1.25rem;">+93 700 987 654</p>
</div>
<div class="box" style="text-align: center;">
<div style="font-size: 3rem; margin-bottom: 1.5rem;">📍</div>
<h3>Mazar-i-Sharif</h3>
<p style="color: var(--text-secondary); margin-bottom: 1rem;">Balkh Gate Road</p>
<p style="font-weight: 700; color: var(--primary-color); font-size: 1.1rem;">+93 700 456 789</p>
<div class="box" style="text-align: center; padding: 4rem 2rem;">
<div style="font-size: 4rem; margin-bottom: 2rem;">📍</div>
<h3 style="font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; color: #fff;">Mazar-i-Sharif</h3>
<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">Balkh Gate Road</p>
<p style="font-weight: 800; color: var(--primary-color); font-size: 1.25rem;">+93 700 456 789</p>
</div>
</div>
</div>
<div class="container" style="text-align: center; margin-bottom: 4rem;">
<div class="box" style="padding: 6rem 3rem; background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), transparent);">
<h2 style="font-size: 3rem; margin-bottom: 1.5rem; font-weight: 900;">Ready to sell your car?</h2>
<p style="color: var(--text-secondary); margin-bottom: 3rem; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.1rem;">Join thousands of Afghans who have successfully sold their vehicles through our platform. No hidden fees, just results.</p>
<a href="register.php" class="btn btn-primary" style="padding: 1.2rem 3rem;">Start Listing Now</a>
<div class="container" style="text-align: center; margin-bottom: 8rem;">
<div class="box" style="padding: 8rem 4rem; background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(30, 41, 59, 0.5));">
<h2 style="font-size: 3.5rem; margin-bottom: 2rem; font-weight: 900; color: #fff;">Ready to sell your car?</h2>
<p style="color: var(--text-secondary); margin-bottom: 4rem; max-width: 700px; margin-left: auto; margin-right: auto; font-size: 1.2rem; line-height: 1.8;">Join thousands of Afghans who have successfully sold their vehicles through our platform. No hidden fees, just results.</p>
<a href="register.php" class="btn btn-primary" style="padding: 1.5rem 4rem; font-size: 1.1rem;">Start Listing Now</a>
</div>
</div>