<!DOCTYPE html>
<html lang="en">

<head>
    <?php $pageTitle = "SmartAdmin - Modern Admin Dashboard"; include('partials/app-meta-title.php'); ?>

    <?php include('partials/app-head-css.php'); ?>
</head>

<body class="app-landing">

    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top w-100 py-3">
        <div class="container">
            <a class="navbar-brand" href="dashboard-control-center.php">
                <img src="/public/img/logo-light.svg" alt="logo">
            </a>

            <div class="ms-auto d-flex gap-2">
                <a href="auth-login.php" class="btn btn-link text-white border-0 text-decoration-none">Login</a>
                <a href="auth-register.php" class="btn btn-link text-white border-0 text-decoration-none">Register</a>
            </div>
        </div>
    </nav>

    <!-- 1. Hero Section -->
    <section class="hero-section position-relative overflow-hidden">
        <div class="container" style="position: relative; z-index: 1;">
            <div class="row align-items-center">
                <div class="col-sm-12 col-md-10 col-lg-8 col-xl-7 col-xxl-6">
                    <h1 class="eye-catcher-text display-2 fw-700 mb-5 text-gradient text-center text-md-start" data-text="SmartAdmin built with AI">
                        SmartAdmin built with AI
                    </h1>
                    <p class="lead fw-bold mb-5 text-center text-md-start">
                        <span id="typewriter-text"></span>
                    </p>
                    <div class="d-flex gap-3 justify-content-center justify-content-md-start">
                        <a href="#features" class="btn btn-primary btn-lg px-4 py-2">Get started</a>
                        <a href="#demo" class="btn btn-outline-light btn-lg px-4 py-2">Learn more</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="net"></div>
    </section>

    <!-- 2. Features Section -->
    <section id="features" class="features-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-6 fw-700 mb-3">Powerful Features</h2>
                <p class="lead text-muted">Everything you need to manage your business efficiently</p>
            </div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-4">
                    <div class="feature-card">
                        <div class="feature-image mb-4">
                            <img src="/public/img/landing/1.png" alt="Dashboard" class="img-fluid rounded-4">
                        </div>
                        <h3 class="h4 fw-700 mb-3">Smart Dashboard</h3>
                        <p class="text-muted">Intuitive interface with real-time analytics and customizable widgets.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="feature-card">
                        <div class="feature-image mb-4">
                            <img src="/public/img/landing/2.png" alt="Analytics" class="img-fluid rounded-4">
                        </div>
                        <h3 class="h4 fw-700 mb-3">Advanced Analytics</h3>
                        <p class="text-muted">Comprehensive reporting tools with AI-powered insights.</p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4">
                    <div class="feature-card">
                        <div class="feature-image mb-4">
                            <img src="/public/img/landing/3.png" alt="Automation" class="img-fluid rounded-4">
                        </div>
                        <h3 class="h4 fw-700 mb-3">Workflow Automation</h3>
                        <p class="text-muted">Streamline processes with intelligent automation tools.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 3. Stats Section -->
    <section id="stats" class="stats-section d-none">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5">
                    <h2 class="display-6 fw-700">Transform Your Workflow</h2>
                    <div class="mt-4">
                        <div class="d-flex align-items-center mb-4">
                            <span class="stat-number" data-count="95">95</span>
                            <p class="ms-3 mb-0">Faster development time</p>
                        </div>
                        <div class="d-flex align-items-center mb-4">
                            <span class="stat-number" data-count="80">80</span>
                            <p class="ms-3 mb-0">Better team collaboration</p>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="stat-number" data-count="90">90</span>
                            <p class="ms-3 mb-0">Increased productivity</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 offset-lg-2">
                    <img src="https://illustrations.popsy.co/gray/app-launch.svg" alt="img" class="img-fluid">

                    <div class="demo-window rounded mb-g shadow-1 d-none">
                        <div class="demo-window-content">
                            <div class="position-relative" style="height:15rem">
                                <div class="bg-primary-50 p-2 position-absolute w-100 pos-top">Real-time Analytics</div>
                                <div class="bg-info-50 p-2 position-absolute w-100 pos-bottom">Performance Metrics</div>
                                <div class="bg-danger-50 p-2 position-absolute h-100 pos-right d-flex align-items-center justify-content-center" style="width:120px;">
                                    <span class="rotate-270 text-nowrap">Smart Insights</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 4. Demo Section -->
    <section id="demo" class="demo-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-6 fw-700 mb-3">See It In Action</h2>
                <p class="lead text-muted">Experience the power of SmartAdmin firsthand</p>
            </div>
            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="demo-window">
                        <div class="demo-window-content">
                            <img src="/public/img/landing/4.png" alt="Dashboard Preview" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. Journey Section -->
    <section class="journey-section">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-6 pt-5">
                    <span class="text-primary small text-uppercase fw-bold mb-2 d-block">Innovation</span>
                    <h2 class="h1 fw-bold mb-3">Our Journey and Future Vision</h2>
                    <p class="text-muted mb-4">Explore the timeline of SmartAdmin WebApp's evolution. Witness our milestones and future aspirations.</p>
                    <div class="d-flex gap-3">
                        <a href="#features" class="btn btn-outline-dark">Learn More</a>
                        <a href="#contact" class="btn btn-link text-dark text-decoration-none">Contact Us <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="timeline">
                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <h3 class="h2 fw-bold">2021</h3>
                                <h4 class="h5 fw-bold">Launch Phase</h4>
                                <p class="text-muted">SmartAdmin WebApp was officially launched. It revolutionized the way users manage their tasks.</p>
                            </div>
                        </div>

                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <h3 class="h2 fw-bold">2022</h3>
                                <h4 class="h5 fw-bold">Feature Expansion</h4>
                                <p class="text-muted">New features were added based on user feedback. Enhanced functionality led to increased user satisfaction.</p>
                            </div>
                        </div>

                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <h3 class="h2 fw-bold">2023</h3>
                                <h4 class="h5 fw-bold">Global Reach</h4>
                                <p class="text-muted">SmartAdmin WebApp expanded its user base globally. We are committed to continuous improvement and innovation.</p>
                            </div>
                        </div>

                        <div class="timeline-item">
                            <div class="timeline-dot"></div>
                            <div class="timeline-content">
                                <h3 class="h2 fw-bold">2024</h3>
                                <h4 class="h5 fw-bold">Future Innovations</h4>
                                <p class="text-muted">We are excited to unveil new features and enhancements. Join us as we shape the future of productivity.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. Testimonial Section -->
    <section class="testimonial-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="d-flex justify-content-center mb-3">
                        <span class="fs-3">⭐⭐⭐⭐⭐</span>
                    </div>
                    <p class="lead mb-4">"SmartAdmin has transformed how we manage our business. The AI-powered insights have been game-changing for our decision-making process."</p>
                    <div class="d-flex justify-content-center align-items-center gap-3">
                        <img src="/public/img/demo/avatars/avatar-a.png" alt="John Smith" class="rounded-circle" width="40">
                        <span>John Smith, CEO at TechCorp</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 7. Newsletter Section -->
    <section class="newsletter-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <h2 class="h1 fw-bold mb-3">Stay Updated with SmartAdmin</h2>
                    <p class="text-muted mb-4">Join our newsletter for exclusive updates, helpful tips, and the latest news from SmartAdmin.</p>
                    <form class="newsletter-form">
                        <div class="d-flex flex-shrink mb-2">
                            <input type="email" class="form-control" placeholder="Your Email Here" required>
                            <button type="submit" class="btn btn-dark flex-shrink-0 px-4">Subscribe Now</button>
                        </div>
                        <small class="text-muted">By clicking Subscribe Now, you agree to our <a href="#" class="text-decoration-none">Terms and Conditions</a>.</small>
                    </form>
                </div>

                <div class="col-lg-4 offset-lg-2">
                    <img src="/public/img/landing/5.png" alt="Newsletter" class="img-fluid rounded-4">
                </div>
            </div>
        </div>
    </section>

    <!-- 8. FAQ Section -->
    <section class="faq-section">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-6 fw-700 mb-3">Frequently Asked Questions</h2>
                <p class="lead text-muted">Find answers to common questions about SmartAdmin</p>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="accordion" id="faqAccordion">
                        <div class="accordion-item border-0 mb-3">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
                                    What is SmartAdmin?
                                </button>
                            </h3>
                            <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body text-muted">
                                    SmartAdmin is a powerful web app designed to simplify your workflow and enhance productivity. It offers a wide range of features to streamline your administrative tasks and improve team collaboration.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 mb-3">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
                                    Is it user friendly?
                                </button>
                            </h3>
                            <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body text-muted">
                                    Yes! SmartAdmin features an intuitive interface that's easy to navigate. We've designed it with user experience in mind, making it accessible for both beginners and advanced users.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 mb-3">
                            <h3 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
                                    Can I customize it?
                                </button>
                            </h3>
                            <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
                                <div class="accordion-body text-muted">
                                    Absolutely! SmartAdmin offers extensive customization options to match your brand and workflow preferences. You can modify layouts, themes, and functionality to suit your needs.
                                </div>
                            </div>
                        </div>

                        <div class="accordion-item border-0 mb-3">
                            <h3 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
                                    Is there a trial?
                                </button>
                            </h3>
                            <div id="faq4" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
                                <div class="accordion-body text-muted">
                                    Yes, we offer a free trial period so you can explore all features before making a commitment. Sign up today to start your trial!
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 9. Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <h2 class="h1 fw-bold mb-3">Ready to Get Started?</h2>
                    <p class="lead text-muted mb-4">Join thousands of businesses already using SmartAdmin to transform their workflow.</p>
                    <div class="d-flex justify-content-center gap-3">
                        <a href="#" class="btn btn-primary btn-lg px-4">Start Free Trial</a>
                        <a href="#" class="btn btn-outline-dark btn-lg px-4">Contact Sales</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 10. Footer -->
    <footer class="footer py-5">
        <div class="container">
            <div class="row mb-5">
                <div class="col-auto">
                    <img src="/public/img/logo.svg" alt="Logo" class="mb-4" style="height: 32px;">
                </div>
            </div>

            <div class="row g-4">
                <div class="col-6 col-md">
                    <h6 class="fw-bold mb-3">Quick Links</h6>
                    <ul class="footer-links">
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Contact Support</a></li>
                        <li><a href="#">FAQs</a></li>
                        <li><a href="#">Blog Posts</a></li>
                        <li><a href="#">User Guides</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h6 class="fw-bold mb-3">Resources</h6>
                    <ul class="footer-links">
                        <li><a href="#">Community Forum</a></li>
                        <li><a href="#">Support Center</a></li>
                        <li><a href="#">System Status</a></li>
                        <li><a href="#">Feedback</a></li>
                        <li><a href="#">Careers</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h6 class="fw-bold mb-3">Stay Connected</h6>
                    <ul class="footer-links">
                        <li><a href="#">Social Media</a></li>
                        <li><a href="#">Newsletter</a></li>
                        <li><a href="#">Events</a></li>
                        <li><a href="#">Webinars</a></li>
                        <li><a href="#">Podcasts</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h6 class="fw-bold mb-3">Legal Info</h6>
                    <ul class="footer-links">
                        <li><a href="#">Privacy Notice</a></li>
                        <li><a href="#">User Agreement</a></li>
                        <li><a href="#">Cookie Policy</a></li>
                        <li><a href="#">Terms &amp; Conditions</a></li>
                        <li><a href="#">Help Center</a></li>
                    </ul>
                </div>
                <div class="col-6 col-md">
                    <h6 class="fw-bold mb-3">Stay Updated</h6>
                    <ul class="footer-links">
                        <li><a href="#">Follow Us Online</a></li>
                        <li><a href="#">Join Our Community</a></li>
                        <li><a href="#">Get Involved</a></li>
                        <li><a href="#">Share Your Thoughts</a></li>
                        <li><a href="#">Explore Our Blog</a></li>
                    </ul>
                </div>
            </div>

            <hr class="my-4">

            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="d-flex align-items-center">
                        <small class="text-muted">© 2024 SmartAdmin. All rights reserved.</small>
                        <div class="ms-4">
                            <a href="#" class="text-muted text-decoration-none small me-3">Privacy Policy</a>
                            <a href="#" class="text-muted text-decoration-none small me-3">Terms of Service</a>
                            <a href="#" class="text-muted text-decoration-none small">Cookie Settings</a>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="d-flex justify-content-md-end align-items-center gap-3">
                        <a href="#" class="text-muted"><i class="fab fa-facebook"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-linkedin"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- Animation Plugin -->
    <script src="/public/plugins/three/three.min.js"></script>
    <script src="/public/plugins/vanta/vanta.halo.min.js"></script>
    <script src="/public/plugins/vanta/vanta.net.min.js"></script>

    <script src="/public/scripts/pages/landing.js"></script>

</body>

</html>