/home/awneajlw/public_html/codestechvista.com/services.php
<?php
require_once 'config/database.php';
require_once 'includes/auth.php';

$database = new Database();
$db = $database->getConnection();

// Get all active services
$query = "SELECT * FROM services WHERE status = 'active' ORDER BY title";
$stmt = $db->prepare($query);
$stmt->execute();
$services = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Services - Opti-Vision Eye Clinic</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="index.php">
                <i class="fas fa-eye me-2"></i>Opti-Vision
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about.php">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="services.php">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="doctors.php">Doctors</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contact.php">Contact</a>
                    </li>
                    <?php if (isLoggedIn()): ?>
                        <li class="nav-item">
                            <a class="nav-link" href="user/dashboard.php">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="logout.php">Logout</a>
                        </li>
                    <?php else: ?>
                        <li class="nav-item">
                            <a class="nav-link" href="login.php">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="btn btn-primary ms-2" href="register.php">Register</a>
                        </li>
                    <?php endif; ?>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="py-5 mt-5" style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center text-white">
                    <h1 class="display-5 fw-bold mb-3">Our Services</h1>
                    <p class="lead">Comprehensive eye care solutions for all ages and conditions</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <?php foreach($services as $service): ?>
                <div class="col-lg-4 col-md-6">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body p-4">
                            <div class="service-icon mb-3">
                                <i class="fas fa-eye fa-3x text-primary"></i>
                            </div>
                            <h4 class="card-title fw-bold"><?php echo htmlspecialchars($service['title']); ?></h4>
                            <p class="card-text text-muted mb-4"><?php echo htmlspecialchars($service['description']); ?></p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="price-tag">
                                    <span class="h5 text-primary fw-bold">PKR <?php echo number_format($service['price']); ?></span>
                                </div>
                                <a href="appointment.php" class="btn btn-primary">
                                    <i class="fas fa-calendar-plus me-2"></i>Book Now
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Why Choose Us Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold">Why Choose Opti-Vision?</h2>
                <p class="lead text-muted">We provide exceptional eye care with modern technology</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-4 col-md-6">
                    <div class="text-center">
                        <div class="service-icon mb-3 mx-auto">
                            <i class="fas fa-user-md fa-2x text-primary"></i>
                        </div>
                        <h5 class="fw-bold">Expert Doctors</h5>
                        <p class="text-muted">Our experienced ophthalmologists provide the best care with years of expertise.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="text-center">
                        <div class="service-icon mb-3 mx-auto">
                            <i class="fas fa-microscope fa-2x text-primary"></i>
                        </div>
                        <h5 class="fw-bold">Modern Equipment</h5>
                        <p class="text-muted">State-of-the-art diagnostic and treatment equipment for accurate results.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="text-center">
                        <div class="service-icon mb-3 mx-auto">
                            <i class="fas fa-heart fa-2x text-primary"></i>
                        </div>
                        <h5 class="fw-bold">Patient Care</h5>
                        <p class="text-muted">Compassionate care with personalized treatment plans for each patient.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-5 bg-primary text-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h2 class="display-6 fw-bold mb-3">Ready to Take Care of Your Vision?</h2>
                    <p class="lead mb-0">Book your appointment today and experience professional eye care.</p>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <a href="appointment.php" class="btn btn-light btn-lg">Book Appointment</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white py-5">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-4">
                    <h5 class="fw-bold mb-3">
                        <i class="fas fa-eye me-2"></i>Opti-Vision
                    </h5>
                    <p class="text-muted">Professional eye care services with modern technology and experienced specialists.</p>
                    <div class="social-links">
                        <a href="#" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-white me-3"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-white"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
                <div class="col-lg-2">
                    <h6 class="fw-bold mb-3">Quick Links</h6>
                    <ul class="list-unstyled">
                        <li><a href="about.php" class="text-muted text-decoration-none">About Us</a></li>
                        <li><a href="services.php" class="text-muted text-decoration-none">Services</a></li>
                        <li><a href="doctors.php" class="text-muted text-decoration-none">Doctors</a></li>
                        <li><a href="contact.php" class="text-muted text-decoration-none">Contact</a></li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h6 class="fw-bold mb-3">Services</h6>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-muted text-decoration-none">Eye Examination</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">Cataract Surgery</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">LASIK Surgery</a></li>
                        <li><a href="#" class="text-muted text-decoration-none">Glaucoma Treatment</a></li>
                    </ul>
                </div>
                <div class="col-lg-3">
                    <h6 class="fw-bold mb-3">Contact Info</h6>
                    <ul class="list-unstyled text-muted">
                        <li><i class="fas fa-map-marker-alt me-2"></i>123 Medical Center, Karachi</li>
                        <li><i class="fas fa-phone me-2"></i>+92 300 1234567</li>
                        <li><i class="fas fa-envelope me-2"></i>info@optivision.com</li>
                        <li><i class="fas fa-clock me-2"></i>Mon-Fri: 9AM-6PM</li>
                    </ul>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center text-muted">
                <p>&copy; 2024 Opti-Vision Eye Clinic. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Path: home/awneajlw/public_html/codestechvista.com