Spaces:

sujalrajpoot
/

truesyncai

Sleeping

App Files Files Community

sujalrajpoot commited on 23 days ago

Commit

c05c06d

verified ·

1 Parent(s): 4c1a66a

Upload 4 files

Browse files

Files changed (4) hide show

templates/TrueSyncAI.jpg +3 -0
templates/index.html +187 -0
templates/script.js +369 -0
templates/styles.css +800 -0

templates/TrueSyncAI.jpg ADDED Viewed

Git LFS Details

SHA256: dd9da65e11c0bdbbe6f6c65ca50d1215fa9acfd86dac9c055dcd5d064840b306
Pointer size: 131 Bytes
Size of remote file: 238 kB

templates/index.html ADDED Viewed

	@@ -0,0 +1,187 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TrueSyncAI | Intelligent Synchronization</title>
+    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Outfit:wght@400;600;800&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="loading-screen">
+        <div class="loader">
+            <div class="circle"></div>
+            <div class="circle"></div>
+            <div class="circle"></div>
+        </div>
+        <div class="loading-text">TrueSyncAI</div>
+    </div>
+    <header>
+        <nav>
+            <div class="logo">
+                <img src="./TrueSyncAI.jpg" alt="TrueSyncAI Logo">
+                <span>TrueSyncAI</span>
+            </div>
+            <div class="menu-toggle">
+                <i class="fas fa-bars"></i>
+            </div>
+            <ul class="nav-links">
+                <li><a href="#" class="active">Home</a></li>
+                <li><a href="#">Features</a></li>
+                <li><a href="#">Solutions</a></li>
+                <li><a href="#">About</a></li>
+                <li><a href="#" class="btn-primary">Get Started</a></li>
+            </ul>
+        </nav>
+    </header>
+    <section class="hero">
+        <div class="hero-content">
+            <h1>Synchronize Your World With <span class="gradient-text">TrueSyncAI</span></h1>
+            <p>Revolutionizing connections with intelligent AI synchronization technology</p>
+            <div class="hero-buttons">
+                <button class="btn-primary">Try It Now</button>
+                <button class="btn-secondary"><i class="fas fa-play-circle"></i> Watch Demo</button>
+            </div>
+            <div class="hero-stats">
+                <div class="stat">
+                    <span class="stat-number" data-target="98">0</span>%
+                    <span class="stat-label">Accuracy</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-number" data-target="5000">0</span>+
+                    <span class="stat-label">Users</span>
+                </div>
+                <div class="stat">
+                    <span class="stat-number" data-target="24">0</span>/7
+                    <span class="stat-label">Support</span>
+                </div>
+            </div>
+        </div>
+        <div class="hero-image">
+            <div class="shape"></div>
+            <img src="./TrueSyncAI.jpg" alt="TrueSyncAI Logo">
+            <div class="floating-elements">
+                <div class="floating-element"><i class="fas fa-brain"></i></div>
+                <div class="floating-element"><i class="fas fa-sync"></i></div>
+                <div class="floating-element"><i class="fas fa-robot"></i></div>
+                <div class="floating-element"><i class="fas fa-cog"></i></div>
+            </div>
+        </div>
+    </section>
+    <section class="features">
+        <h2>Key <span class="gradient-text">Features</span></h2>
+        <div class="features-grid">
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-brain"></i>
+                </div>
+                <h3>Advanced AI</h3>
+                <p>State-of-the-art artificial intelligence that adapts to your needs</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-sync"></i>
+                </div>
+                <h3>Real-time Sync</h3>
+                <p>Seamless synchronization across all your devices in real-time</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-shield-alt"></i>
+                </div>
+                <h3>Secure</h3>
+                <p>Enterprise-grade security for your sensitive data</p>
+            </div>
+            <div class="feature-card">
+                <div class="feature-icon">
+                    <i class="fas fa-tachometer-alt"></i>
+                </div>
+                <h3>Fast</h3>
+                <p>Lightning-fast performance to keep up with your demands</p>
+            </div>
+        </div>
+    </section>
+    <section class="cta">
+        <div class="cta-content">
+            <h2>Ready to <span class="gradient-text">Transform</span> Your Experience?</h2>
+            <p>Join thousands of satisfied users who have already made the switch to TrueSyncAI</p>
+            <button class="btn-primary">Get Started Now</button>
+        </div>
+        <div class="cta-shapes">
+            <div class="shape shape-1"></div>
+            <div class="shape shape-2"></div>
+            <div class="shape shape-3"></div>
+        </div>
+    </section>
+    <footer>
+        <div class="footer-content">
+            <div class="footer-logo">
+                <img src="./TrueSyncAI.jpg" alt="TrueSyncAI Logo">
+                <span>TrueSyncAI</span>
+            </div>
+            <div class="footer-links">
+                <div class="footer-links-column">
+                    <h4>Product</h4>
+                    <ul>
+                        <li><a href="#">Features</a></li>
+                        <li><a href="#">Pricing</a></li>
+                        <li><a href="#">Integrations</a></li>
+                        <li><a href="#">Documentation</a></li>
+                    </ul>
+                </div>
+                <div class="footer-links-column">
+                    <h4>Company</h4>
+                    <ul>
+                        <li><a href="#">About Us</a></li>
+                        <li><a href="#">Careers</a></li>
+                        <li><a href="#">Blog</a></li>
+                        <li><a href="#">Contact</a></li>
+                    </ul>
+                </div>
+                <div class="footer-links-column">
+                    <h4>Resources</h4>
+                    <ul>
+                        <li><a href="#">Community</a></li>
+                        <li><a href="#">Help Center</a></li>
+                        <li><a href="#">Partners</a></li>
+                        <li><a href="#">Events</a></li>
+                    </ul>
+                </div>
+            </div>
+            <div class="footer-social">
+                <h4>Connect With Us</h4>
+                <div class="social-icons">
+                    <a href="#"><i class="fab fa-twitter"></i></a>
+                    <a href="#"><i class="fab fa-linkedin"></i></a>
+                    <a href="#"><i class="fab fa-facebook"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                </div>
+                <div class="newsletter">
+                    <input type="email" placeholder="Enter your email">
+                    <button class="btn-primary">Subscribe</button>
+                </div>
+            </div>
+        </div>
+        <div class="footer-bottom">
+            <p>&copy; 2025 TrueSyncAI. All rights reserved.</p>
+            <div class="footer-bottom-links">
+                <a href="#">Privacy Policy</a>
+                <a href="#">Terms of Service</a>
+                <a href="#">Cookies Policy</a>
+            </div>
+        </div>
+    </footer>
+    <script src="./script.js"></script>
+</body>
+</html>
+so this is a rest api website which provides llms at very cheap price now write the documentation.html page when user clicks on Get Started or Try it now button it will redirect the user to documentation.html page to use this api with curl, python (requests), java, javascript and other languages

templates/script.js ADDED Viewed

	@@ -0,0 +1,369 @@

+// Wait for DOM content to load
+document.addEventListener('DOMContentLoaded', function() {
+    // Loading screen functionality
+    const loadingScreen = document.querySelector('.loading-screen');
+    // Hide loading screen after 2 seconds
+    setTimeout(() => {
+        loadingScreen.classList.add('hidden');
+    }, 2000);
+    // Mobile menu toggle
+    const menuToggle = document.querySelector('.menu-toggle');
+    const navLinks = document.querySelector('.nav-links');
+    menuToggle.addEventListener('click', function() {
+        navLinks.classList.toggle('active');
+    });
+    // Close mobile menu when clicking outside
+    document.addEventListener('click', function(event) {
+        const isClickInsideNav = navLinks.contains(event.target);
+        const isClickOnToggle = menuToggle.contains(event.target);
+        if (!isClickInsideNav && !isClickOnToggle && navLinks.classList.contains('active')) {
+            navLinks.classList.remove('active');
+        }
+    });
+    // Header scroll effect
+    const header = document.querySelector('header');
+    window.addEventListener('scroll', function() {
+        if (window.scrollY > 50) {
+            header.classList.add('scrolled');
+        } else {
+            header.classList.remove('scrolled');
+        }
+    });
+    // Animate stats counter
+    const stats = document.querySelectorAll('.stat-number');
+    const animateStats = () => {
+        stats.forEach(stat => {
+            const target = parseInt(stat.getAttribute('data-target'));
+            const count = +stat.innerText;
+            const increment = target / 100;
+            if (count < target) {
+                stat.innerText = Math.ceil(count + increment);
+                setTimeout(animateStats, 30);
+            } else {
+                stat.innerText = target;
+            }
+        });
+    };
+    // Intersection Observer for animations
+    const observerOptions = {
+        threshold: 0.1
+    };
+    const observer = new IntersectionObserver(function(entries, observer) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                if (entry.target.classList.contains('hero-stats')) {
+                    stats.forEach(stat => {
+                        stat.innerText = '0';
+                    });
+                    animateStats();
+                }
+                entry.target.classList.add('animate');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    // Observe elements for animation
+    observer.observe(document.querySelector('.hero-stats'));
+    // Feature cards hover effect
+    const featureCards = document.querySelectorAll('.feature-card');
+    featureCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            featureCards.forEach(c => c.classList.remove('active'));
+            this.classList.add('active');
+        });
+    });
+    // Smooth scrolling for navigation links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            const targetId = this.getAttribute('href');
+            if (targetId === '#') return;
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+                targetElement.scrollIntoView({
+                    behavior: 'smooth'
+                });
+                // Close mobile menu if open
+                if (navLinks.classList.contains('active')) {
+                    navLinks.classList.remove('active');
+                }
+                // Update active navigation link
+                document.querySelectorAll('.nav-links a').forEach(link => {
+                    link.classList.remove('active');
+                });
+                this.classList.add('active');
+            }
+        });
+    });
+    // Add active class to navigation based on scroll position
+    const sections = document.querySelectorAll('section');
+    window.addEventListener('scroll', function() {
+        let current = '';
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop;
+            const sectionHeight = section.clientHeight;
+            if (window.scrollY >= (sectionTop - 200)) {
+                current = section.getAttribute('id');
+            }
+        });
+        document.querySelectorAll('.nav-links a').forEach(link => {
+            link.classList.remove('active');
+            const href = link.getAttribute('href');
+            if (href === `#${current}`) {
+                link.classList.add('active');
+            }
+        });
+    });
+    // Modal for demo video
+    const demoButton = document.querySelector('.btn-secondary');
+    if (demoButton) {
+        demoButton.addEventListener('click', function() {
+            // Create modal elements
+            const modal = document.createElement('div');
+            modal.className = 'modal';
+            const modalContent = document.createElement('div');
+            modalContent.className = 'modal-content';
+            const closeButton = document.createElement('span');
+            closeButton.className = 'modal-close';
+            closeButton.innerHTML = '&times;';
+            const videoContainer = document.createElement('div');
+            videoContainer.className = 'video-container';
+            videoContainer.innerHTML = '<div class="video-placeholder"><i class="fas fa-play"></i><p>Demo Video</p></div>';
+            // Append elements
+            modalContent.appendChild(closeButton);
+            modalContent.appendChild(videoContainer);
+            modal.appendChild(modalContent);
+            document.body.appendChild(modal);
+            // Add styles
+            modal.style.display = 'flex';
+            modal.style.position = 'fixed';
+            modal.style.top = '0';
+            modal.style.left = '0';
+            modal.style.width = '100%';
+            modal.style.height = '100%';
+            modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+            modal.style.zIndex = '1000';
+            modal.style.justifyContent = 'center';
+            modal.style.alignItems = 'center';
+            modalContent.style.backgroundColor = 'white';
+            modalContent.style.borderRadius = '8px';
+            modalContent.style.width = '80%';
+            modalContent.style.maxWidth = '800px';
+            modalContent.style.position = 'relative';
+            modalContent.style.padding = '20px';
+            closeButton.style.position = 'absolute';
+            closeButton.style.top = '10px';
+            closeButton.style.right = '15px';
+            closeButton.style.fontSize = '28px';
+            closeButton.style.fontWeight = 'bold';
+            closeButton.style.cursor = 'pointer';
+            videoContainer.style.width = '100%';
+            videoContainer.style.padding = '56.25% 0 0 0';
+            videoContainer.style.position = 'relative';
+            const videoPlaceholder = videoContainer.querySelector('.video-placeholder');
+            videoPlaceholder.style.position = 'absolute';
+            videoPlaceholder.style.top = '0';
+            videoPlaceholder.style.left = '0';
+            videoPlaceholder.style.width = '100%';
+            videoPlaceholder.style.height = '100%';
+            videoPlaceholder.style.backgroundColor = '#f3f4f6';
+            videoPlaceholder.style.display = 'flex';
+            videoPlaceholder.style.flexDirection = 'column';
+            videoPlaceholder.style.justifyContent = 'center';
+            videoPlaceholder.style.alignItems = 'center';
+            videoPlaceholder.style.color = '#4f46e5';
+            const playIcon = videoPlaceholder.querySelector('i');
+            playIcon.style.fontSize = '48px';
+            playIcon.style.marginBottom = '10px';
+            // Close modal functionality
+            closeButton.addEventListener('click', function() {
+                document.body.removeChild(modal);
+            });
+            // Close when clicking outside modal content
+            modal.addEventListener('click', function(event) {
+                if (event.target === modal) {
+                    document.body.removeChild(modal);
+                }
+            });
+        });
+    }
+    // Form submission for newsletter
+    const newsletterForm = document.querySelector('.newsletter');
+    if (newsletterForm) {
+        newsletterForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const emailInput = this.querySelector('input[type="email"]');
+            const email = emailInput.value.trim();
+            if (email && isValidEmail(email)) {
+                // Create toast notification
+                const toast = document.createElement('div');
+                toast.className = 'toast';
+                toast.innerHTML = '<i class="fas fa-check-circle"></i> Thank you for subscribing!';
+                // Add styles to toast
+                toast.style.position = 'fixed';
+                toast.style.bottom = '20px';
+                toast.style.right = '20px';
+                toast.style.backgroundColor = '#10b981';
+                toast.style.color = 'white';
+                toast.style.padding = '12px 20px';
+                toast.style.borderRadius = '4px';
+                toast.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
+                toast.style.display = 'flex';
+                toast.style.alignItems = 'center';
+                toast.style.gap = '8px';
+                toast.style.zIndex = '1000';
+                toast.style.opacity = '0';
+                toast.style.transform = 'translateY(20px)';
+                toast.style.transition = 'opacity 0.3s, transform 0.3s';
+                document.body.appendChild(toast);
+                // Show toast
+                setTimeout(() => {
+                    toast.style.opacity = '1';
+                    toast.style.transform = 'translateY(0)';
+                }, 10);
+                // Hide toast after 3 seconds
+                setTimeout(() => {
+                    toast.style.opacity = '0';
+                    toast.style.transform = 'translateY(20px)';
+                    // Remove toast from DOM after animation
+                    setTimeout(() => {
+                        document.body.removeChild(toast);
+                    }, 300);
+                }, 3000);
+                // Reset form
+                emailInput.value = '';
+            } else {
+                // Invalid email handling
+                emailInput.style.borderColor = '#ef4444';
+                emailInput.style.boxShadow = '0 0 0 2px rgba(239, 68, 68, 0.2)';
+                // Reset styles after 2 seconds
+                setTimeout(() => {
+                    emailInput.style.borderColor = '';
+                    emailInput.style.boxShadow = '';
+                }, 2000);
+            }
+        });
+    }
+    // Email validation function
+    function isValidEmail(email) {
+        const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return regex.test(email);
+    }
+    // Add button ripple effect
+    const buttons = document.querySelectorAll('button');
+    buttons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            const x = e.clientX - e.target.getBoundingClientRect().left;
+            const y = e.clientY - e.target.getBoundingClientRect().top;
+            const ripple = document.createElement('span');
+            ripple.className = 'ripple';
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+            this.appendChild(ripple);
+            setTimeout(() => {
+                ripple.remove();
+            }, 600);
+        });
+    });
+});
+// Add CSS for ripple effect
+(function() {
+    const style = document.createElement('style');
+    style.textContent = `
+        button {
+            position: relative;
+            overflow: hidden;
+        }
+        .ripple {
+            position: absolute;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.7);
+            transform: scale(0);
+            animation: ripple 0.6s linear;
+            pointer-events: none;
+        }
+        @keyframes ripple {
+            to {
+                transform: scale(4);
+                opacity: 0;
+            }
+        }
+        .modal {
+            animation: fadeIn 0.3s ease;
+        }
+        .modal-content {
+            animation: scaleIn 0.3s ease;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @keyframes scaleIn {
+            from { transform: scale(0.9); opacity: 0; }
+            to { transform: scale(1); opacity: 1; }
+        }
+    `;
+    document.head.appendChild(style);
+})();

templates/styles.css ADDED Viewed

	@@ -0,0 +1,800 @@

+/* Base styles */
+:root {
+    --primary-color: #4f46e5;
+    --primary-dark: #3730a3;
+    --primary-light: #c7d2fe;
+    --secondary-color: #10b981;
+    --accent-color: #f472b6;
+    --dark-bg: #111827;
+    --gray-dark: #1f2937;
+    --gray-medium: #374151;
+    --gray-light: #6b7280;
+    --gray-lightest: #f3f4f6;
+    --text-dark: #111827;
+    --text-light: #f9fafb;
+    --text-muted: #9ca3af;
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    --transition: all 0.3s ease;
+    --border-radius: 8px;
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Poppins', sans-serif;
+    color: var(--text-dark);
+    background-color: #fff;
+    overflow-x: hidden;
+    line-height: 1.6;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'Outfit', sans-serif;
+    font-weight: 700;
+    line-height: 1.2;
+}
+a {
+    text-decoration: none;
+    color: inherit;
+    transition: var(--transition);
+}
+ul {
+    list-style: none;
+}
+img {
+    max-width: 100%;
+    height: auto;
+}
+button, .btn-primary, .btn-secondary {
+    cursor: pointer;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 500;
+    border: none;
+    border-radius: var(--border-radius);
+    transition: var(--transition);
+}
+.btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 12px 24px;
+    box-shadow: var(--shadow-md);
+    font-size: 16px;
+}
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+}
+.btn-secondary {
+    background-color: transparent;
+    color: var(--primary-color);
+    border: 2px solid var(--primary-color);
+    padding: 10px 22px;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.btn-secondary:hover {
+    background-color: var(--primary-light);
+    color: var(--primary-dark);
+    transform: translateY(-2px);
+}
+.gradient-text {
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    display: inline-block;
+}
+/* Loading screen */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--primary-color);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    transition: opacity 0.5s ease, visibility 0.5s;
+}
+.loader {
+    display: flex;
+    gap: 12px;
+}
+.circle {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background-color: white;
+    animation: bounce 0.8s infinite alternate;
+}
+.circle:nth-child(2) {
+    animation-delay: 0.2s;
+}
+.circle:nth-child(3) {
+    animation-delay: 0.4s;
+}
+@keyframes bounce {
+    0% {
+        transform: translateY(0);
+        opacity: 0.5;
+    }
+    100% {
+        transform: translateY(-20px);
+        opacity: 1;
+    }
+}
+.loading-text {
+    font-family: 'Outfit', sans-serif;
+    font-size: 24px;
+    font-weight: 700;
+    color: white;
+    margin-top: 24px;
+    letter-spacing: 2px;
+}
+.hidden {
+    opacity: 0;
+    visibility: hidden;
+}
+/* Header & Navigation */
+header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    box-shadow: var(--shadow-sm);
+    z-index: 100;
+    padding: 15px 0;
+    transition: var(--transition);
+}
+header.scrolled {
+    padding: 10px 0;
+    background-color: rgba(255, 255, 255, 0.95);
+    box-shadow: var(--shadow-md);
+}
+nav {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+}
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+.logo img {
+    height: 40px;
+    width: auto;
+    border-radius: 8px;
+}
+.logo span {
+    font-family: 'Outfit', sans-serif;
+    font-weight: 700;
+    font-size: 24px;
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+.nav-links {
+    display: flex;
+    align-items: center;
+    gap: 32px;
+}
+.nav-links li a {
+    font-weight: 500;
+    color: var(--gray-medium);
+    position: relative;
+}
+.nav-links li a:not(.btn-primary):after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: -4px;
+    left: 0;
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    transition: var(--transition);
+}
+.nav-links li a:not(.btn-primary):hover:after,
+.nav-links li a.active:after {
+    width: 100%;
+}
+.nav-links li a:not(.btn-primary):hover {
+    color: var(--primary-color);
+}
+.nav-links li a.active {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+.menu-toggle {
+    display: none;
+    cursor: pointer;
+    font-size: 24px;
+    color: var(--gray-dark);
+}
+/* Hero Section */
+.hero {
+    padding: 160px 20px 100px;
+    display: flex;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+}
+.hero-content {
+    flex: 1;
+    max-width: 600px;
+}
+.hero-content h1 {
+    font-size: 48px;
+    margin-bottom: 20px;
+    line-height: 1.2;
+}
+.hero-content p {
+    font-size: 18px;
+    color: var(--gray-light);
+    margin-bottom: 32px;
+}
+.hero-buttons {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 40px;
+}
+.hero-stats {
+    display: flex;
+    gap: 40px;
+}
+.stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.stat-number {
+    font-family: 'Outfit', sans-serif;
+    font-size: 36px;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+.stat-label {
+    font-size: 14px;
+    color: var(--gray-light);
+}
+.hero-image {
+    flex: 1;
+    position: relative;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.shape {
+    position: absolute;
+    width: 300px;
+    height: 300px;
+    background: linear-gradient(135deg, var(--primary-light), var(--primary-color));
+    border-radius: 50%;
+    filter: blur(60px);
+    opacity: 0.2;
+    animation: pulse 6s infinite alternate;
+}
+@keyframes pulse {
+    0% {
+        transform: scale(1);
+        opacity: 0.2;
+    }
+    100% {
+        transform: scale(1.2);
+        opacity: 0.3;
+    }
+}
+.hero-image img {
+    position: relative;
+    z-index: 1;
+    width: 250px;
+    height: auto;
+    border-radius: 20px;
+    box-shadow: var(--shadow-lg);
+    transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
+    transition: var(--transition);
+}
+.hero-image img:hover {
+    transform: perspective(1000px) rotateY(0) rotateX(0);
+}
+.floating-elements {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+}
+.floating-element {
+    position: absolute;
+    background-color: white;
+    box-shadow: var(--shadow-md);
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+    color: var(--primary-color);
+    animation: float 3s infinite alternate ease-in-out;
+}
+.floating-element:nth-child(1) {
+    top: 20%;
+    left: 20%;
+    width: 50px;
+    height: 50px;
+    animation-delay: 0s;
+}
+.floating-element:nth-child(2) {
+    top: 70%;
+    left: 15%;
+    width: 40px;
+    height: 40px;
+    animation-delay: 0.5s;
+}
+.floating-element:nth-child(3) {
+    top: 30%;
+    right: 10%;
+    width: 45px;
+    height: 45px;
+    animation-delay: 1s;
+}
+.floating-element:nth-child(4) {
+    top: 60%;
+    right: 20%;
+    width: 35px;
+    height: 35px;
+    animation-delay: 1.5s;
+}
+@keyframes float {
+    0% {
+        transform: translateY(0) rotate(0deg);
+    }
+    100% {
+        transform: translateY(-15px) rotate(10deg);
+    }
+}
+/* Features Section */
+.features {
+    padding: 100px 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+}
+.features h2 {
+    font-size: 36px;
+    margin-bottom: 60px;
+}
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 30px;
+}
+.feature-card {
+    background-color: white;
+    border-radius: var(--border-radius);
+    padding: 30px;
+    box-shadow: var(--shadow-md);
+    transition: var(--transition);
+    text-align: center;
+}
+.feature-card:hover {
+    transform: translateY(-10px);
+    box-shadow: var(--shadow-lg);
+}
+.feature-icon {
+    margin-bottom: 20px;
+    font-size: 32px;
+    color: var(--primary-color);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 80px;
+    height: 80px;
+    background-color: var(--primary-light);
+    border-radius: 50%;
+    transition: var(--transition);
+}
+.feature-card:hover .feature-icon {
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
+    color: white;
+    transform: scale(1.1);
+}
+.feature-card h3 {
+    font-size: 22px;
+    margin-bottom: 15px;
+}
+.feature-card p {
+    color: var(--gray-light);
+    font-size: 16px;
+}
+/* CTA Section */
+.cta {
+    background-color: var(--gray-lightest);
+    padding: 100px 20px;
+    position: relative;
+    overflow: hidden;
+}
+.cta-content {
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
+    position: relative;
+    z-index: 2;
+}
+.cta-content h2 {
+    font-size: 36px;
+    margin-bottom: 20px;
+}
+.cta-content p {
+    font-size: 18px;
+    color: var(--gray-light);
+    margin-bottom: 32px;
+    max-width: 600px;
+    margin-left: auto;
+    margin-right: auto;
+}
+.cta-shapes .shape {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(40px);
+}
+.cta-shapes .shape-1 {
+    width: 200px;
+    height: 200px;
+    background-color: rgba(79, 70, 229, 0.1);
+    top: -50px;
+    left: 10%;
+    animation: moveShape 10s infinite alternate;
+}
+.cta-shapes .shape-2 {
+    width: 250px;
+    height: 250px;
+    background-color: rgba(244, 114, 182, 0.1);
+    bottom: -100px;
+    right: 10%;
+    animation: moveShape 12s infinite alternate;
+}
+.cta-shapes .shape-3 {
+    width: 150px;
+    height: 150px;
+    background-color: rgba(16, 185, 129, 0.1);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: moveShape 8s infinite alternate;
+}
+@keyframes moveShape {
+    0% {
+        transform: translate(0, 0);
+    }
+    100% {
+        transform: translate(30px, 20px);
+    }
+}
+/* Footer */
+footer {
+    background-color: var(--dark-bg);
+    color: var(--text-light);
+    padding: 60px 20px 30px;
+}
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1.5fr 3fr 2fr;
+    gap: 40px;
+    padding-bottom: 40px;
+    border-bottom: 1px solid var(--gray-medium);
+}
+.footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+.footer-logo img {
+    height: 40px;
+    width: auto;
+    border-radius: 8px;
+}
+.footer-logo span {
+    font-family: 'Outfit', sans-serif;
+    font-weight: 700;
+    font-size: 20px;
+    color: white;
+}
+.footer-links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+.footer-links-column h4 {
+    font-size: 18px;
+    margin-bottom: 20px;
+    color: white;
+}
+.footer-links-column ul li {
+    margin-bottom: 12px;
+}
+.footer-links-column ul li a {
+    color: var(--text-muted);
+    font-size: 14px;
+}
+.footer-links-column ul li a:hover {
+    color: white;
+}
+.footer-social h4 {
+    font-size: 18px;
+    margin-bottom: 20px;
+    color: white;
+}
+.social-icons {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+.social-icons a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: var(--gray-medium);
+    border-radius: 50%;
+    color: white;
+    transition: var(--transition);
+}
+.social-icons a:hover {
+    background-color: var(--primary-color);
+    transform: translateY(-5px);
+}
+.newsletter {
+    display: flex;
+    max-width: 100%;
+}
+.newsletter input {
+    flex: 1;
+    border: none;
+    background-color: var(--gray-medium);
+    color: white;
+    padding: 12px 16px;
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+    outline: none;
+    font-family: 'Poppins', sans-serif;
+}
+.newsletter input::placeholder {
+    color: var(--text-muted);
+}
+.newsletter button {
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+    padding: 12px 16px;
+    white-space: nowrap;
+}
+.footer-bottom {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-top: 30px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    color: var(--text-muted);
+}
+.footer-bottom-links {
+    display: flex;
+    gap: 24px;
+}
+.footer-bottom-links a:hover {
+    color: white;
+}
+/* Responsive */
+@media (max-width: 1024px) {
+    .hero {
+        flex-direction: column;
+        gap: 60px;
+        text-align: center;
+    }
+    .hero-content {
+        max-width: 100%;
+    }
+    .hero-buttons {
+        justify-content: center;
+    }
+    .hero-stats {
+        justify-content: center;
+    }
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: 40px;
+    }
+    .footer-links {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+@media (max-width: 768px) {
+    .menu-toggle {
+        display: block;
+    }
+    .nav-links {
+        position: fixed;
+        top: 70px;
+        left: 0;
+        right: 0;
+        background-color: white;
+        flex-direction: column;
+        padding: 20px;
+        gap: 20px;
+        box-shadow: var(--shadow-md);
+        transform: translateY(-150%);
+        transition: var(--transition);
+        z-index: 99;
+    }
+    .nav-links.active {
+        transform: translateY(0);
+    }
+    .hero-content h1 {
+        font-size: 36px;
+    }
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    .footer-links {
+        grid-template-columns: 1fr;
+    }
+    .footer-bottom {
+        flex-direction: column;
+        gap: 20px;
+        text-align: center;
+    }
+}
+@media (max-width: 480px) {
+    .hero-buttons {
+        flex-direction: column;
+        width: 100%;
+    }
+    .hero-stats {
+        flex-direction: column;
+        gap: 20px;
+    }
+    .hero-content h1 {
+        font-size: 30px;
+    }
+    .cta-content h2 {
+        font-size: 28px;
+    }
+    .footer-bottom-links {
+        flex-direction: column;
+        gap: 10px;
+    }
+}