index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>American Civics Institute - Master Your U.S. Citizenship Test</title>
    <link href="index.css" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="nav-container">
            <a href="index.html" class="logo">
                <div class="logo-icon"></div>
                <div class="logo-text">
                    <span class="logo-main">American Civics Institute</span>
                    <span class="logo-sub">Citizenship Education Center</span>
                </div>
            </a>
            <nav class="nav-links">
                <a href="about.html">About</a>
                <a href="course-page.php">Study Materials</a>
                <a href="questions.html">Civics Test</a>
                <a href="contact.html">Contact</a>
            </nav>
            <a href="login.php" class="cta-button">Login</a>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-container">
            <h1>Master Your Path to U.S. Citizenship</h1>
            <p>Join thousands of successful citizenship candidates who passed their naturalization test with confidence using our comprehensive study platform.</p>
            <div class="hero-buttons">
                <a href="course-page.php" class="btn-primary">Start Learning Now</a>
                <a href="questions.html" class="btn-secondary">Take Practice Test</a>
            </div>
        </div>
    </section>

    <!-- Main Story Section with Alternating Content -->
    <section class="story-section">
        <div class="container">
            <!-- Block 1: Text Left, Image Right -->
            <div class="content-block">
                <div class="text-content">
                    <h2>Your Journey to American Citizenship Starts Here</h2>
                    <p>Becoming a U.S. citizen is one of life's most meaningful achievements—a journey that connects you to the rich tapestry of American democracy, history, and values. Our comprehensive citizenship learning platform transforms this important milestone from a challenge into an inspiring educational experience.</p>
                    <p>Through carefully crafted study materials, interactive practice tests, and expert guidance, we've helped thousands of aspiring citizens master the knowledge needed to pass their naturalization test with confidence.</p>
                    <a href="course-page.php" class="content-link">Explore Study Materials →</a>
                </div>
                <div class="image-content">
                    <img src="https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=600&h=400&fit=crop&crop=faces" alt="Diverse group of students studying together in classroom" />
                </div>
            </div>

            <!-- Block 2: Image Left, Text Right -->
            <div class="content-block">
                <div class="image-content">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop&crop=faces" alt="Happy woman holding American flag with pride" />
                </div>
                <div class="text-content">
                    <h2>Beyond Memorization: True Understanding</h2>
                    <p>Our approach goes beyond simple memorization—we help you truly understand the principles that make America unique. From the founding documents that shaped our nation to the diverse stories of people who built this country together, each lesson connects historical knowledge with practical application.</p>
                    <p>You'll not just be prepared for the test, but genuinely understand what it means to be an American citizen.</p>
                    <a href="questions.html" class="content-link">Try Practice Test →</a>
                </div>
            </div>

            <!-- Block 3: Text Left, Image Right -->
            <div class="content-block">
                <div class="text-content">
                    <h2>Interactive Learning That Works</h2>
                    <p>Whether you're just beginning your citizenship journey or preparing for your final interview, our platform provides the tools, support, and encouragement you need to succeed. Join a community of learners who share your dreams and determination.</p>
                    <p>Our interactive learning environment features progress tracking, personalized study plans, and comprehensive practice tests that mirror the actual naturalization exam.</p>
                    <a href="registration.php" class="content-link">Join Our Community →</a>
                </div>
                <div class="image-content">
                    <img src="https://thumbs.dreamstime.com/z/international-group-happy-smiling-people-diversity-immigration-friendship-concept-men-women-over-american-flag-89094988.jpg?ct=jpeg" alt="Multi-ethnic group of people smiling together" />
                </div>
            </div>

            <!-- Block 4: Image Left, Text Right -->
            <div class="content-block">
                <div class="image-content">
                    <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=600&h=400&fit=crop&crop=faces" alt="Students taking notes and learning together" />
                </div>
                <div class="text-content">
                    <h2>Expert Content, Modern Tools</h2>
                    <p>With expert-created content and a user-friendly interface, you'll build confidence as you master each topic—from American history and government to geography and civic responsibilities. Our comprehensive approach ensures you're ready for every aspect of the citizenship test.</p>
                    <p>Track your progress, identify areas for improvement, and celebrate your achievements as you move closer to your goal.</p>
                    <a href="course-page.php" class="content-link">Access All Materials →</a>
                </div>
            </div>

            <!-- Final Feature Image -->
            <div class="feature-image">
                <img src="https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?w=900&h=500&fit=crop&crop=faces" alt="New citizens celebrating with American flags at naturalization ceremony" />
                <div class="feature-overlay">
                    <h3>Your Success Story Awaits</h3>
                    <p>Join thousands who've achieved their American dream</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Grid -->
    <section class="features-section">
        <div class="container">
            <div class="section-header">
                <h2>Everything You Need to Succeed</h2>
                <p>Comprehensive resources designed to help you pass your citizenship test with confidence</p>
            </div>
            
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">📚</div>
                    <h3>100+ Practice Questions</h3>
                    <p>Official civics questions covering all test topics with detailed explanations</p>
                    <a href="questions.html" class="feature-link">Start Practicing</a>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">📖</div>
                    <h3>Study Guides & Materials</h3>
                    <p>Comprehensive guides, flashcards, and study materials for every topic</p>
                    <a href="course-page.php" class="feature-link">Download Materials</a>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🎯</div>
                    <h3>Progress Tracking</h3>
                    <p>Monitor your learning with detailed analytics and performance insights</p>
                    <a href="registration.php" class="feature-link">Create Account</a>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🎥</div>
                    <h3>Video Examples</h3>
                    <p>Watch real naturalization interview examples and expert guidance</p>
                    <a href="videos.html" class="feature-link">Watch Videos</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="cta-section">
        <div class="container">
            <div class="cta-content">
                <h2>Ready to Begin Your Citizenship Journey?</h2>
                <p>Access all study materials and practice tests immediately. No payment required.</p>
                <div class="cta-buttons">
                    <a href="course-page.php" class="btn-primary large">Access Study Materials</a>
                    <a href="questions.html" class="btn-secondary large">Take Practice Test</a>
                </div>
                <p class="cta-note">Create an account to track your progress and save your results</p>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer" id="about">
        <div class="footer-content">
            <div class="footer-main">
                <div class="footer-brand">
                    <h3>American Civics Institute</h3>
                    <p>Empowering your journey to U.S. citizenship through comprehensive education and expert guidance. Our mission is to help aspiring Americans master the knowledge and skills needed for successful naturalization.</p>
                </div>
                
                <div class="footer-links-section">
                    <div class="footer-column">
                        <h4>Learning Resources</h4>
                        <a href="course-page.php">Study Materials</a>
                        <a href="questions.html">Practice Tests</a>
                        <a href="videos.html">Video Guides</a>
                    </div>
                    
                    <div class="footer-column">
                        <h4>Account</h4>
                        <a href="registration.php">Create Account</a>
                        <a href="login.php">Login</a>
                        <a href="contact.html">Support</a>
                    </div>
                    
                    <div class="footer-column">
                        <h4>About</h4>
                        <a href="about.html">Our Mission</a>
                        <a href="contact.html">Contact Us</a>
                        <a href="privacy-policy.html">Privacy Policy</a>
                    </div>
                </div>
            </div>
            
            <div class="footer-bottom">
                <p>&copy; 2025 American Civics Institute. All rights reserved.</p>
            </div>
        </div>
    </footer>
</body>
</html>