about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About - Master Your Path to U.S. Citizenship</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header */
        header {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 2rem 0;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        header h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        header p {
            font-size: 1.2rem;
            opacity: 0.9;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Navigation */
        nav {
            background: #fff;
            padding: 1rem 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        nav ul {
            list-style: none;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

        nav li {
            margin: 0 1.5rem;
        }

        nav a {
            text-decoration: none;
            color: #333;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            transition: all 0.3s ease;
        }

        nav a:hover, nav a.active {
            background: #2a5298;
            color: white;
        }

        /* Main Content */
        main {
            padding: 3rem 0;
        }

        .page-header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .page-header h2 {
            font-size: 2.5rem;
            color: #1e3c72;
            margin-bottom: 1rem;
        }

        .page-header p {
            font-size: 1.2rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        .content-section {
            background: white;
            padding: 3rem;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin-bottom: 3rem;
        }

        .content-section h3 {
            font-size: 1.8rem;
            color: #1e3c72;
            margin-bottom: 1.5rem;
        }

        .content-section p {
            font-size: 1.1rem;
            color: #555;
            margin-bottom: 1.5rem;
        }

        .story-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }

        .story-card {
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 10px;
            border-left: 4px solid #2a5298;
        }

        .story-card h4 {
            color: #1e3c72;
            margin-bottom: 1rem;
            font-size: 1.3rem;
        }

        .story-card p {
            color: #666;
            font-size: 1rem;
        }

        .team-section {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            padding: 3rem;
            border-radius: 10px;
            margin-bottom: 3rem;
        }

        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .team-member {
            background: white;
            padding: 2rem;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .team-member:hover {
            transform: translateY(-5px);
        }

        .team-avatar {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #2a5298, #1e3c72);
            border-radius: 50%;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
            font-weight: bold;
        }

        .team-member h4 {
            color: #1e3c72;
            margin-bottom: 0.5rem;
            font-size: 1.3rem;
        }

        .team-member .role {
            color: #2a5298;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .team-member p {
            color: #666;
            font-size: 0.95rem;
        }

        .stats-section {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            padding: 3rem;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 3rem;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .stat-item {
            padding: 1rem;
        }

        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }

        .stat-label {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        /* Footer */
        footer {
            background: #1e3c72;
            color: white;
            text-align: center;
            padding: 2rem 0;
            margin-top: 3rem;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            header h1 {
                font-size: 2rem;
            }

            .page-header h2 {
                font-size: 2rem;
            }

            .content-section, .team-section, .stats-section {
                padding: 2rem;
            }

            nav ul {
                flex-direction: column;
                align-items: center;
            }

            nav li {
                margin: 0.5rem 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1>About Our Mission</h1>
            <p>Empowering your journey to American citizenship</p>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html" class="active">About</a></li>
                <li><a href="videos.html">Video Lessons</a></li>
                <li><a href="course-page.php">Study Materials</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </nav>

    <main>
        <div class="container">
            <div class="page-header">
                <h2>About Us</h2>
                <p>Dedicated to helping aspiring citizens achieve their American dream through comprehensive education and support.</p>
            </div>

            <section class="content-section">
                <h3>Our Story</h3>
                <p>Founded in 2018, our U.S. Citizenship Course was born from a simple yet powerful vision: to make the path to American citizenship accessible, understandable, and achievable for everyone. We recognized that the naturalization process, while rewarding, can be overwhelming for many aspiring citizens.</p>
                
                <p>Our founders, themselves naturalized U.S. citizens, understood firsthand the challenges faced during the citizenship journey. They experienced the confusion of navigating complex requirements, the anxiety of test preparation, and the joy of finally becoming American citizens.</p>
                
                <div class="story-grid">
                    <div class="story-card">
                        <h4>🎯 Our Vision</h4>
                        <p>To create a world where every qualified individual has the knowledge, confidence, and support needed to successfully complete their journey to U.S. citizenship.</p>
                    </div>
                    
                    <div class="story-card">
                        <h4>💡 Our Approach</h4>
                        <p>We combine traditional study methods with modern technology, creating an engaging and effective learning experience that adapts to different learning styles.</p>
                    </div>
                    
                    <div class="story-card">
                        <h4>🌟 Our Promise</h4>
                        <p>We're committed to providing accurate, up-to-date information based on official USCIS guidelines, ensuring our students are well-prepared for success.</p>
                    </div>
                </div>
            </section>

            <section class="stats-section">
                <h3>Our Impact</h3>
                <p>Since our founding, we've had the privilege of supporting thousands of individuals on their citizenship journey.</p>
                
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number">15,000+</div>
                        <div class="stat-label">Students Served</div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-number">92%</div>
                        <div class="stat-label">Pass Rate</div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-number">50+</div>
                        <div class="stat-label">Countries Represented</div>
                    </div>
                    
                    <div class="stat-item">
                        <div class="stat-number">24/7</div>
                        <div class="stat-label">Support Available</div>
                    </div>
                </div>
            </section>

            <section class="team-section">
                <h3 style="text-align: center; color: #1e3c72; margin-bottom: 1rem;">Meet Our Team</h3>
                <p style="text-align: center; color: #666; margin-bottom: 2rem;">Our dedicated team of educators, immigration experts, and technology professionals work together to create the best citizenship preparation experience.</p>
                
                <div class="team-grid">
                    <div class="team-member">
                        <div class="team-avatar">MR</div>
                        <h4>Maria Rodriguez</h4>
                        <div class="role">Founder & CEO</div>
                        <p>Naturalized citizen from Mexico with 15+ years in education. Maria leads our curriculum development and ensures our content meets the highest standards.</p>
                    </div>
                    
                    <div class="team-member">
                        <div class="team-avatar">DK</div>
                        <h4>David Kim</h4>
                        <div class="role">Immigration Law Expert</div>
                        <p>Former USCIS officer with expertise in naturalization processes. David ensures our materials are always current with the latest regulations.</p>
                    </div>
                    
                    <div class="team-member">
                        <div class="team-avatar">SP</div>
                        <h4>Sarah Patel</h4>
                        <div class="role">Lead Education Specialist</div>
                        <p>M.Ed. in Adult Learning with specialization in ESL education. Sarah designs our interactive learning experiences and assessment tools.</p>
                    </div>
                    
                    <div class="team-member">
                        <div class="team-avatar">JW</div>
                        <h4>James Wilson</h4>
                        <div class="role">Technology Director</div>
                        <p>Ensures our platform provides a seamless, accessible learning experience across all devices and technology levels.</p>
                    </div>
                </div>
            </section>

            <section class="content-section">
                <h3>What Makes Us Different</h3>
                <p>We're not just another test prep service. We're your partners in achieving American citizenship, providing:</p>
                
                <div class="story-grid">
                    <div class="story-card">
                        <h4>📚 Comprehensive Curriculum</h4>
                        <p>Our materials cover every aspect of the naturalization test, from civics and history to English language skills, all aligned with current USCIS requirements.</p>
                    </div>
                    
                    <div class="story-card">
                        <h4>🎥 Engaging Video Content</h4>
                        <p>Learn through professionally produced videos that make complex topics easy to understand and remember.</p>
                    </div>
                    
                    <div class="story-card">
                        <h4>🏆 Personalized Learning</h4>
                        <p>Our adaptive platform adjusts to your learning pace and style, ensuring you master each topic before moving forward.</p>
                    </div>
                    
                    <div class="story-card">
                        <h4>🤝 Community Support</h4>
                        <p>Connect with fellow citizenship candidates and our expert instructors through forums, study groups, and live Q&A sessions.</p>
                    </div>
                </div>
                
                <p>We believe that becoming a U.S. citizen is more than passing a test—it's about understanding and embracing the values, history, and responsibilities that define American democracy. Our course prepares you not just for the naturalization exam, but for a lifetime of engaged citizenship.</p>
            </section>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 U.S. Citizenship Course. Empowering your journey to American citizenship.</p>
            <p>This is an educational resource. Please consult official USCIS materials for the most current information.</p>
        </div>
    </footer>

    <script>
        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    </script>
</body>
</html>