<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FocusSleep - Find Your Quiet Place</title>
    <meta name="description" content="FocusSleep App enhances focus and sleep with adaptive white noise, adjusting to your environment for optimal tranquility">
    <meta name="keywords" content="white noise, sleep app, focus app, adaptive audio, noise pollution, city noise, better sleep, focus improvement, Chircuit, sound masking">
    <meta property="og:title" content="FocusSleep - Find Your Quiet Place">
    <meta property="og:description" content="FocusSleep App enhances focus and sleep with adaptive white noise, adjusting to your environment for optimal tranquility">
    <meta property="og:image" content="https://images.pexels.com/photos/7130473/pexels-photo-7130473.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://images.pexels.com/photos/7130473/pexels-photo-7130473.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
</head>
<body>

    <!-- Night Sky Background -->
    <div class="sky-container">
        <div class="stars"></div>
        <div class="moon"></div>
        <div class="cloud c1"></div>
        <div class="cloud c2"></div>
        <div class="cloud c3"></div>
    </div>

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/pasted-20251004-214547-4180afd7.png" alt="Chircuit Logo">
                FocusSleep
            </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="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
                    <li class="nav-item"><a class="nav-link" href="#testimonials">Testimonials</a></li>
                    <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <header class="hero">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12 text-center">
                    <h1 class="display-4">Find Your Quiet Place</h1>
                    <p class="lead">Adaptive white noise to help you sleep, focus, and relax in a noisy world.</p>
                    <a href="#" class="btn btn-primary btn-lg">Download on the App Store</a>
                    <a href="#" class="btn btn-secondary btn-lg">Get it on Google Play</a>
                </div>
            </div>
        </div>
    </header>

    <!-- About Section -->
    <section id="about" class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>About the App</h2>
                <p>In a world that never sleeps, FocusSleep is your personal oasis of calm. Our app is designed to help you reclaim your peace from the constant barrage of urban noise. Whether it's the traffic outside your window, a noisy neighbor, or the chatter of an open-plan office, FocusSleep creates a protective bubble of sound, allowing you to focus, relax, or get a full night's sleep. Using adaptive technology, it listens to your environment and adjusts the level of white noise in real-time, masking intrusive sounds and creating a consistent, tranquil audio backdrop.</p>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features">
        <div class="container">
            <div class="text-center mb-5">
                <h2>App Features</h2>
                <p class="lead">Everything you need to control your audio environment.</p>
            </div>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card h-100 text-center p-4">
                        <div class="card-body">
                            <h3 class="card-title">Adaptive Noise</h3>
                            <p class="card-text">Automatically adjusts volume based on your surroundings to block out distractions.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 text-center p-4">
                        <div class="card-body">
                            <h3 class="card-title">Sound Profiles</h3>
                            <p class="card-text">Choose from a variety of sounds like white noise, pink noise, and nature sounds.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card h-100 text-center p-4">
                        <div class="card-body">
                            <h3 class="card-title">Smart Scheduling</h3>
                            <p class="card-text">Set timers and schedules for when you need focus or a peaceful night's sleep.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials Section -->
    <section id="testimonials">
        <div class="container">
            <div class="text-center mb-5">
                <h2>What Our Users Say</h2>
            </div>
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="card testimonial-card p-4">
                        <div class="card-body">
                            <p class="card-text">"I can finally sleep through the night! The traffic noise used to wake me up constantly, but now I don't hear a thing."</p>
                            <footer class="blockquote-footer text-light">Sarah J.</footer>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-4">
                    <div class="card testimonial-card p-4">
                        <div class="card-body">
                            <p class="card-text">"A game-changer for my productivity. I can tune out my noisy open-plan office and actually get work done."</p>
                            <footer class="blockquote-footer text-light">Mike R.</footer>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="contact-form">
                        <h2 class="text-center mb-4">Get in Touch</h2>
                        <form id="contactForm" novalidate>
                            <div class="mb-3">
                                <input type="text" class="form-control" id="name" placeholder="Your Name" required>
                                <div class="invalid-feedback">Please enter your name.</div>
                            </div>
                            <div class="mb-3">
                                <input type="email" class="form-control" id="email" placeholder="Your Email" required>
                                <div class="invalid-feedback">Please enter a valid email.</div>
                            </div>
                            <div class="mb-3">
                                <textarea class="form-control" id="message" rows="5" placeholder="Your Message" required></textarea>
                                <div class="invalid-feedback">Please enter a message.</div>
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Send Message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container text-center">
            <p>&copy; 2025 FocusSleep. All Rights Reserved.</p>
            <p><a href="/privacy.php">Privacy Policy</a></p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>
