AuraFit Fitness Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AuraFit - AI-Powered Smart Ring for Personalized Fitness</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
</head>
<body>
    
    <header>
        <nav class="navbar">
            <div class="logo">
                
                <h1>AuraFit</h1>
            </div>
            <div class="nav-links">
                <a href="#features">Features</a>
                <a href="#product">Product</a>
                <a href="#testimonials">Testimonials</a>
                <a href="#pricing">Pricing</a>
                <a href="#" class="cta-button">Pre-order Now</a>
            </div>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </nav>
    </header>

<section class="hero">
        <div class="hero-content">
            <h2>Meet <span>AuraFit</span> - Your AI-Powered Fitness Companion</h2>
            <p>The revolutionary smart ring that tracks your biometrics in real-time, delivers personalized workout plans, and seamlessly integrates with your favorite apps.</p>
            <div class="countdown">
                <div class="countdown-item">
                    <div class="countdown-number" id="days">00</div>
                    <div class="countdown-label">Days</div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-number" id="hours">00</div>
                    <div class="countdown-label">Hours</div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-number" id="minutes">00</div>
                    <div class="countdown-label">Minutes</div>
                </div>
                <div class="countdown-item">
                    <div class="countdown-number" id="seconds">00</div>
                    <div class="countdown-label">Seconds</div>
                </div>
            </div>
            <a href="#pricing" class="cta-button">Pre-order Now</a>
        </div>
        <div class="hero-image">
            <img src="https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="AuraFit Smart Ring">
        </div>
    </section>

<section class="features" id="features">
        <div class="section-title">
            <h2>Revolutionary Features</h2>
            <p>AuraFit combines cutting-edge technology with elegant design to transform your fitness journey</p>
        </div>
        <div class="features-grid">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-heartbeat"></i>
                </div>
                <h3>Real-Time Biometrics</h3>
                <p>Track heart rate, blood oxygen, sleep quality, and stress levels with medical-grade accuracy, 24/7.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-brain"></i>
                </div>
                <h3>AI Workout Plans</h3>
                <p>Our AI analyzes your data to create customized workout plans that adapt as you progress.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h3>Seamless Integration</h3>
                <p>Connect with Apple Health, Google Fit, Strava, and all your favorite fitness apps.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-battery-full"></i>
                </div>
                <h3>7-Day Battery</h3>
                <p>Industry-leading battery life with fast charging - just 30 minutes for a full day's use.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-tint"></i>
                </div>
                <h3>Waterproof</h3>
                <p>Swim, shower, and sweat with confidence - rated waterproof up to 50 meters.</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-sliders-h"></i>
                </div>
                <h3>Customizable</h3>
                <p>Choose from multiple finishes and sizes to match your personal style.</p>
            </div>
        </div>
    </section>

<section class="product-showcase" id="product">
        <div class="showcase-container">
            <div class="showcase-image">
                <img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="AuraFit in Action">
            </div>
            <div class="showcase-content">
                <h2>Designed for Performance</h2>
                <p>The AuraFit smart ring combines aerospace-grade titanium with advanced sensors to deliver unparalleled fitness tracking in a sleek, comfortable design you'll forget you're wearing.</p>
                <div class="specs-list">
                    <div class="spec-item">
                        <div class="spec-icon"><i class="fas fa-microchip"></i></div>
                        <div>Advanced biometric sensors with 99% accuracy</div>
                    </div>
                    <div class="spec-item">
                        <div class="spec-icon"><i class="fas fa-clock"></i></div>
                        <div>24/7 activity and sleep tracking</div>
                    </div>
                    <div class="spec-item">
                        <div class="spec-icon"><i class="fas fa-bell"></i></div>
                        <div>Smart notifications and alerts</div>
                    </div>
                    <div class="spec-item">
                        <div class="spec-icon"><i class="fas fa-cloud"></i></div>
                        <div>Cloud sync with unlimited storage</div>
                    </div>
                </div>
                <a href="#pricing" class="cta-button">Get Yours Today</a>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="section-title">
            <h2>What Early Adopters Say</h2>
            <p>Hear from our beta testers who've been using AuraFit for the past 3 months</p>
        </div>
        <div class="testimonials-grid">
            <div class="testimonial-card">
                <div class="testimonial-text">
                    "AuraFit has completely changed how I approach fitness. The personalized recommendations helped me break through a plateau I'd been stuck in for months."
                </div>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <img src="https://via.placeholder.com/50x50" alt="Sarah J.">
                    </div>
                    <div class="author-info">
                        <h4>Sarah J.</h4>
                        <p>Marathon Runner</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-text">
                    "As someone who hates wearing bulky fitness trackers, AuraFit is a dream come true. I never take it off and the data is incredibly accurate."
                </div>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <img src="https://via.placeholder.com/50x50" alt="Michael T.">
                    </div>
                    <div class="author-info">
                        <h4>Michael T.</h4>
                        <p>Tech Entrepreneur</p>
                    </div>
                </div>
            </div>
            <div class="testimonial-card">
                <div class="testimonial-text">
                    "The sleep tracking alone is worth the price. I've optimized my sleep schedule based on the data and feel more rested than I have in years."
                </div>
                <div class="testimonial-author">
                    <div class="author-avatar">
                        <img src="https://via.placeholder.com/50x50" alt="Priya K.">
                    </div>
                    <div class="author-info">
                        <h4>Priya K.</h4>
                        <p>Yoga Instructor</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="pricing" id="pricing">
        <div class="section-title">
            <h2>Choose Your AuraFit</h2>
            <p>Limited early bird pricing available for a short time only</p>
        </div>
        <div class="pricing-container">
            <div class="pricing-card">
                <h3>Standard</h3>
                <div class="price">$199 <span>/ unit</span></div>
                <ul class="pricing-features">
                    <li><i class="fas fa-check"></i> AuraFit Smart Ring</li>
                    <li><i class="fas fa-check"></i> Basic Fitness Tracking</li>
                    <li><i class="fas fa-check"></i> 1-Year Warranty</li>
                    <li><i class="fas fa-check"></i> Mobile App Access</li>
                    <li><i class="fas fa-times"></i> Premium Workout Plans</li>
                    <li><i class="fas fa-times"></i> Advanced Analytics</li>
                </ul>
                <a href="#" class="cta-button">Pre-order Now</a>
            </div>
            <div class="pricing-card popular">
                <div class="popular-tag">Most Popular</div>
                <h3>Pro</h3>
                <div class="price">$249 <span>/ unit</span></div>
                <ul class="pricing-features">
                    <li><i class="fas fa-check"></i> Everything in Standard</li>
                    <li><i class="fas fa-check"></i> AI-Powered Workout Plans</li>
                    <li><i class="fas fa-check"></i> Advanced Analytics</li>
                    <li><i class="fas fa-check"></i> 2-Year Warranty</li>
                    <li><i class="fas fa-check"></i> Priority Support</li>
                    <li><i class="fas fa-times"></i> VIP Launch Event Access</li>
                </ul>
                <a href="#" class="cta-button">Pre-order Now</a>
            </div>
            <div class="pricing-card">
                <h3>Elite</h3>
                <div class="price">$349 <span>/ unit</span></div>
                <ul class="pricing-features">
                    <li><i class="fas fa-check"></i> Everything in Pro</li>
                    <li><i class="fas fa-check"></i> Limited Edition Finish</li>
                    <li><i class="fas fa-check"></i> VIP Launch Event Access</li>
                    <li><i class="fas fa-check"></i> Lifetime Warranty</li>
                    <li><i class="fas fa-check"></i> 1-on-1 Setup Consultation</li>
                    <li><i class="fas fa-check"></i> Exclusive Content</li>
                </ul>
                <a href="#" class="cta-button">Pre-order Now</a>
            </div>
        </div>
    </section>

<section class="cta-section">
        <div class="cta-container">
            <h2>Ready to Transform Your Fitness?</h2>
            <p>Join thousands of early adopters who are already experiencing the AuraFit difference. Pre-order now to secure your device before the official launch.</p>
            <a href="#" class="cta-button large">Pre-order Now</a>
            <div class="stock-counter">
                <i class="fas fa-bolt"></i> Only 423 units left at early bird pricing
            </div>
        </div>
    </section>

<footer>
        <div class="footer-container">
            <div class="footer-about">
                <div class="footer-logo">
                    <img src="https://via.placeholder.com/30x30" alt="AuraFit Logo">
                    <h2>AuraFit</h2>
                </div>
                <p>Revolutionizing personal fitness through AI-powered wearable technology. Designed for athletes, by athletes.</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-facebook-f"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-instagram"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div class="footer-links">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#product">How It Works</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#pricing">Pricing</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </div>
            <div class="footer-links">
                <h3>Company</h3>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Careers</a></li>
                    <li><a href="#">Press</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
            <div class="footer-newsletter">
                <h3>Stay Updated</h3>
                <p>Subscribe to our newsletter for product updates, fitness tips, and exclusive offers.</p>
                <form class="newsletter-form">
                    <input type="email" placeholder="Your email address">
                    <button type="submit"><i class="fas fa-paper-plane"></i></button>
                </form>
            </div>
        </div>
        <div class="copyright">
            &copy; 2023 AuraFit Technologies. All rights reserved.
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #6C4DF6;
            --secondary: #FF7D59;
            --dark: #1E1E2C;
            --light: #F8F9FA;
            --success: #4CAF50;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--light);
            color: var(--dark);
            overflow-x: hidden;
        }
        
        /* Header Styles */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            z-index: 1000;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 5%;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo img {
            height: 30px;
        }
        
        .logo h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .nav-links {
            display: flex;
            gap: 2rem;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: color 0.3s;
        }
        
        .nav-links a:hover {
            color: var(--primary);
        }
        
        .cta-button {
            background-color: var(--primary);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .cta-button:hover {
            background-color: #5b3de5;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(108, 77, 246, 0.3);
        }
        
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--dark);
            cursor: pointer;
        }
        
        /* Hero Section */
        .hero {
            padding: 8rem 5% 5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1400px;
            margin: 0 auto;
            min-height: 100vh;
        }
        
        .hero-content {
            flex: 1;
            padding-right: 2rem;
        }
        
        .hero h2 {
            font-size: 3.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }
        
        .hero h2 span {
            color: var(--primary);
        }
        
        .hero p {
            font-size: 1.2rem;
            color: #555;
            margin-bottom: 2rem;
            line-height: 1.6;
            max-width: 600px;
        }
        
        .hero-image {
            flex: 1;
            position: relative;
        }
        
        .hero-image img {
            width: 100%;
            max-width: 600px;
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        .countdown {
            display: flex;
            gap: 1rem;
            margin: 2rem 0;
        }
        
        .countdown-item {
            background-color: white;
            padding: 1rem;
            border-radius: 10px;
            text-align: center;
            min-width: 80px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .countdown-number {
            font-size: 2rem;
            font-weight: 700;
            color: var(--primary);
        }
        
        .countdown-label {
            font-size: 0.8rem;
            color: #777;
        }
        
        /* Features Section */
        .features {
            padding: 5rem 5%;
            background-color: white;
        }
        
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .section-title h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
        
        .section-title p {
            color: #777;
            max-width: 700px;
            margin: 0 auto;
            font-size: 1.1rem;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .feature-card {
            background-color: var(--light);
            border-radius: 15px;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .feature-icon {
            font-size: 3rem;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }
        
        .feature-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .feature-card p {
            color: #666;
            line-height: 1.6;
        }
        
        /* Product Showcase */
        .product-showcase {
            padding: 5rem 5%;
            background-color: var(--light);
        }
        
        .showcase-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            gap: 3rem;
        }
        
        .showcase-image {
            flex: 1;
            position: relative;
        }
        
        .showcase-image img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .showcase-content {
            flex: 1;
        }
        
        .showcase-content h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }
        
        .showcase-content p {
            color: #666;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }
        
        .specs-list {
            margin-bottom: 2rem;
        }
        
        .spec-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .spec-icon {
            color: var(--primary);
            margin-right: 1rem;
            font-size: 1.2rem;
        }
        
        /* Testimonials */
        .testimonials {
            padding: 5rem 5%;
            background-color: white;
        }
        
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .testimonial-card {
            background-color: var(--light);
            border-radius: 15px;
            padding: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .testimonial-text {
            font-style: italic;
            color: #555;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ddd;
            margin-right: 1rem;
            overflow: hidden;
        }
        
        .author-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .author-info h4 {
            font-size: 1rem;
            margin-bottom: 0.2rem;
        }
        
        .author-info p {
            color: #777;
            font-size: 0.9rem;
        }
        
        /* Pricing Section */
        .pricing {
            padding: 5rem 5%;
            background-color: var(--light);
        }
        
        .pricing-container {
            display: flex;
            justify-content: center;
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            flex-wrap: wrap;
        }
        
        .pricing-card {
            background-color: white;
            border-radius: 15px;
            padding: 2.5rem;
            width: 350px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            position: relative;
        }
        
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .pricing-card.popular {
            border: 2px solid var(--primary);
        }
        
        .popular-tag {
            position: absolute;
            top: -15px;
            right: 20px;
            background-color: var(--primary);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .pricing-card h3 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .price {
            font-size: 3rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 1.5rem;
        }
        
        .price span {
            font-size: 1rem;
            color: #777;
            font-weight: normal;
        }
        
        .pricing-features {
            margin-bottom: 2rem;
        }
        
        .pricing-features li {
            list-style: none;
            margin-bottom: 0.8rem;
            color: #555;
        }
        
        /* CTA Section */
        .cta-section {
            padding: 5rem 5%;
            background: linear-gradient(135deg, var(--primary), #8C6BFF);
            color: white;
            text-align: center;
        }
        
        .cta-container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .cta-container h2 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
        }
        
        .cta-container p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }
        
        .cta-button.large {
            padding: 1rem 2.5rem;
            font-size: 1.2rem;
            display: inline-block;
            background-color: white;
            color: var(--primary);
        }
        
        .cta-button.large:hover {
            background-color: var(--light);
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        
        .stock-counter {
            margin-top: 2rem;
            font-size: 0.9rem;
            background-color: rgba(255,255,255,0.1);
            padding: 0.8rem;
            border-radius: 50px;
            display: inline-block;
        }
        
        /* Footer */
        footer {
            background-color: var(--dark);
            color: white;
            padding: 3rem 5%;
        }
        
        .footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 1rem;
        }
        
        .footer-logo img {
            height: 30px;
        }
        
        .footer-logo h2 {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
        }
        
        .footer-about p {
            color: #aaa;
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }
        
        .social-links {
            display: flex;
            gap: 1rem;
        }
        
        .social-links a {
            color: white;
            background-color: rgba(255,255,255,0.1);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s;
        }
        
        .social-links a:hover {
            background-color: var(--primary);
        }
        
        .footer-links h3 {
            font-size: 1.2rem;
            margin-bottom: 1.5rem;
        }
        
        .footer-links ul {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 0.8rem;
        }
        
        .footer-links a {
            color: #aaa;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: white;
        }
        
        .footer-newsletter p {
            color: #aaa;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }
        
        .newsletter-form {
            display: flex;
        }
        
        .newsletter-form input {
            flex: 1;
            padding: 0.8rem;
            border: none;
            border-radius: 5px 0 0 5px;
            font-size: 1rem;
        }
        
        .newsletter-form button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0 1.5rem;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .newsletter-form button:hover {
            background-color: #5b3de5;
        }
        
        .copyright {
            text-align: center;
            padding-top: 2rem;
            margin-top: 2rem;
            border-top: 1px solid rgba(255,255,255,0.1);
            color: #aaa;
            font-size: 0.9rem;
        }
        
        /* Responsive Styles */
        @media (max-width: 1024px) {
            .hero {
                flex-direction: column;
                text-align: center;
                padding-top: 10rem;
            }
            
            .hero-content {
                padding-right: 0;
                margin-bottom: 3rem;
            }
            
            .hero p {
                margin: 0 auto 2rem;
            }
            
            .countdown {
                justify-content: center;
            }
            
            .showcase-container {
                flex-direction: column;
            }
            
            .showcase-content {
                text-align: center;
            }
        }
        
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero h2 {
                font-size: 2.5rem;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
            
            .showcase-content h2 {
                font-size: 2rem;
            }
            
            .cta-container h2 {
                font-size: 2rem;
            }
        }
        
        @media (max-width: 480px) {
            .hero h2 {
                font-size: 2rem;
            }
            
            .countdown {
                gap: 0.5rem;
            }
            
            .countdown-item {
                min-width: 60px;
                padding: 0.5rem;
            }
            
            .countdown-number {
                font-size: 1.5rem;
            }
            
            .pricing-card {
                width: 100%;
            }
            
            .newsletter-form {
                flex-direction: column;
            }
            
            .newsletter-form input {
                border-radius: 5px;
                margin-bottom: 0.5rem;
            }
            
            .newsletter-form button {
                border-radius: 5px;
                padding: 0.8rem;
            }
        }

JavaScript

// Countdown Timer
        function updateCountdown() {
            const launchDate = new Date("2023-12-01T00:00:00").getTime();
            const now = new Date().getTime();
            const distance = launchDate - now;
            
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
            
            document.getElementById("days").innerHTML = days.toString().padStart(2, "0");
            document.getElementById("hours").innerHTML = hours.toString().padStart(2, "0");
            document.getElementById("minutes").innerHTML = minutes.toString().padStart(2, "0");
            document.getElementById("seconds").innerHTML = seconds.toString().padStart(2, "0");
            
            if (distance < 0) {
                clearInterval(countdownTimer);
                document.getElementById("countdown").innerHTML = "LAUNCHED!";
            }
        }
        
        const countdownTimer = setInterval(updateCountdown, 1000);
        updateCountdown();
        
        // Stock Counter Animation
        function animateStockCounter() {
            let stock = 423;
            const counter = document.querySelector(".stock-counter");
            
            setInterval(() => {
                if (stock > 0) {
                    stock -= Math.floor(Math.random() * 3) + 1;
                    if (stock < 0) stock = 0;
                    counter.innerHTML = `<i class="fas fa-bolt"></i> Only ${stock} units left at early bird pricing`;
                }
            }, 60000); // Update every minute
        }
        
        animateStockCounter();
        
        // Mobile Menu Toggle
        const mobileMenuBtn = document.querySelector(".mobile-menu-btn");
        const navLinks = document.querySelector(".nav-links");
        
        mobileMenuBtn.addEventListener("click", () => {
            navLinks.style.display = navLinks.style.display === "flex" ? "none" : "flex";
        });
        
        // Smooth Scrolling
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });

AuraFit Fitness Template Preview

Download Options