/home/awneajlw/www/codestechvista.com/about.php
<?php
require_once 'config/database.php';
require_once 'includes/auth.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us - 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 active" href="about.php">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" 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">About Opti-Vision</h1>
                    <p class="lead">Your trusted partner in eye care for over a decade</p>
                </div>
            </div>
        </div>
    </section>

    <!-- About Content -->
    <section class="py-5">
        <div class="container">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <h2 class="display-6 fw-bold mb-4">Our Story</h2>
                    <p class="lead text-muted mb-4">
                        Opti-Vision Eye Clinic has been serving the community with exceptional eye care services since 2010. 
                        We are committed to providing the highest quality of ophthalmological care using state-of-the-art 
                        technology and the expertise of our experienced doctors.
                    </p>
                    <p class="text-muted mb-4">
                        Our mission is to preserve and enhance vision health for all our patients through comprehensive 
                        eye care services, from routine examinations to complex surgical procedures. We believe that 
                        everyone deserves access to quality eye care, and we strive to make our services accessible 
                        and affordable for all.
                    </p>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="fw-bold text-primary">1000+</h3>
                                <p class="text-muted mb-0">Happy Patients</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="text-center">
                                <h3 class="fw-bold text-primary">15+</h3>
                                <p class="text-muted mb-0">Years Experience</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-image">
                        <img src="assets/images/about-clinic.jpg" alt="Opti-Vision Clinic" class="img-fluid rounded-3 shadow">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Mission & Vision -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body p-4 text-center">
                            <div class="service-icon mb-3 mx-auto">
                                <i class="fas fa-bullseye fa-2x text-primary"></i>
                            </div>
                            <h4 class="fw-bold mb-3">Our Mission</h4>
                            <p class="text-muted">
                                To provide exceptional eye care services that improve and preserve vision health 
                                for all our patients, using advanced technology and compassionate care.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card h-100 shadow-sm border-0">
                        <div class="card-body p-4 text-center">
                            <div class="service-icon mb-3 mx-auto">
                                <i class="fas fa-eye fa-2x text-primary"></i>
                            </div>
                            <h4 class="fw-bold mb-3">Our Vision</h4>
                            <p class="text-muted">
                                To be the leading eye care center in the region, known for excellence in 
                                patient care, innovative treatments, and community health education.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Values -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold">Our Values</h2>
                <p class="lead text-muted">The principles that guide everything we do</p>
            </div>
            <div class="row g-4">
                <div class="col-lg-3 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">Compassion</h5>
                        <p class="text-muted">We treat every patient with empathy, understanding, and genuine care.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="service-icon mb-3 mx-auto">
                            <i class="fas fa-star fa-2x text-primary"></i>
                        </div>
                        <h5 class="fw-bold">Excellence</h5>
                        <p class="text-muted">We strive for the highest standards in all our medical services.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="service-icon mb-3 mx-auto">
                            <i class="fas fa-shield-alt fa-2x text-primary"></i>
                        </div>
                        <h5 class="fw-bold">Integrity</h5>
                        <p class="text-muted">We maintain the highest ethical standards in all our practices.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="text-center">
                        <div class="service-icon mb-3 mx-auto">
                            <i class="fas fa-lightbulb fa-2x text-primary"></i>
                        </div>
                        <h5 class="fw-bold">Innovation</h5>
                        <p class="text-muted">We embrace new technologies and techniques to improve patient care.</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 Experience Quality Eye Care?</h2>
                    <p class="lead mb-0">Book your appointment today and let us take care of your vision health.</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>