fait moi le home d'une documentation fait que sa claque beau stylé sa bouge et tout

README.md

@@ -1,10 +1,13 @@
 ---
-title: Docvortex
-emoji: 👀
-colorFrom: green
-colorTo: purple
+title: DocVortex 🌪️📚
+colorFrom: blue
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,281 @@
+class DocFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                footer {
+                    background: linear-gradient(to top, #111827, transparent);
+                    padding: 3rem 2rem 2rem;
+                    margin-top: 5rem;
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                
+                .footer-wrapper {
+                    max-width: 7xl;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(1, 1fr);
+                    gap: 2rem;
+                }
+                
+                @media (min-width: 768px) {
+                    .footer-wrapper {
+                        grid-template-columns: repeat(4, 1fr);
+                    }
+                }
+                
+                .footer-section h3 {
+                    color: white;
+                    font-size: 1.25rem;
+                    font-weight: bold;
+                    margin-bottom: 1rem;
+                }
+                
+                .footer-section a {
+                    display: block;
+                    color: #9ca3af;
+                    text-decoration: none;
+                    margin-bottom: 0.5rem;
+                    transition: all 0.3s ease;
+                }
+                
+                .footer-section a:hover {
+                    color: #06b6d4;
+                    transform: translateX(4px);
+                }
+                
+                .newsletter {
+                    background: rgba(255, 255, 255, 0.05);
+                    backdrop-filter: blur(10px);
+                    -webkit-backdrop-filter: blur(10px);
+                    border: 1px solid rgba(255, 255, 255, 0.1);
+                    border-radius: 1rem;
+                    padding: 2rem;
+                    margin-top: -4rem;
+                    margin-bottom: 2rem;
+                }
+                
+                .newsletter h3 {
+                    color: white;
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    margin-bottom: 0.5rem;
+                }
+                
+                .newsletter p {
+                    color: #9ca3af;
+                    margin-bottom: 1.5rem;
+                }
+                
+                .newsletter-form {
+                    display: flex;
+                    gap: 1rem;
+                }
+                
+                .newsletter-input {
+                    flex: 1;
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    color: white;
+                    padding: 0.75rem 1rem;
+                    border-radius: 0.5rem;
+                    transition: all 0.3s ease;
+                }
+                
+                .newsletter-input:focus {
+                    outline: none;
+                    border-color: #06b6d4;
+                    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
+                }
+                
+                .newsletter-input::placeholder {
+                    color: rgba(255, 255, 255, 0.5);
+                }
+                
+                .newsletter-button {
+                    background: linear-gradient(to right, #06b6d4, #8b5cf6);
+                    color: white;
+                    border: none;
+                    padding: 0.75rem 1.5rem;
+                    border-radius: 0.5rem;
+                    font-weight: 600;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+                
+                .newsletter-button:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 20px rgba(6, 182, 212, 0.3);
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1.5rem;
+                }
+                
+                .social-link {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    width: 3rem;
+                    height: 3rem;
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    border-radius: 0.5rem;
+                    color: #9ca3af;
+                    transition: all 0.3s ease;
+                    text-decoration: none;
+                }
+                
+                .social-link:hover {
+                    background: linear-gradient(to right, #06b6d4, #8b5cf6);
+                    color: white;
+                    transform: translateY(-2px);
+                }
+                
+                .copyright {
+                    text-align: center;
+                    color: #6b7280;
+                    margin-top: 3rem;
+                    padding-top: 2rem;
+                    border-top: 1px solid rgba(255, 255, 255, 0.1);
+                }
+                
+                .copyright a {
+                    color: #9ca3af;
+                    text-decoration: none;
+                    transition: color 0.3s ease;
+                }
+                
+                .copyright a:hover {
+                    color: #06b6d4;
+                }
+                
+                .language-selector {
+                    background: rgba(255, 255, 255, 0.1);
+                    border: 1px solid rgba(255, 255, 255, 0.2);
+                    color: white;
+                    padding: 0.5rem 1rem;
+                    border-radius: 0.5rem;
+                    cursor: pointer;
+                    transition: all 0.3s ease;
+                }
+                
+                .language-selector:hover {
+                    border-color: #06b6d4;
+                }
+                
+                .language-selector option {
+                    background: #111827;
+                }
+            </style>
+            
+            <footer>
+                <div class="footer-wrapper">
+                    <div class="newsletter">
+                        <h3>Stay in the Loop</h3>
+                        <p>Get the latest updates and exclusive content delivered to your inbox.</p>
+                        <form class="newsletter-form">
+                            <input type="email" placeholder="[email protected]" class="newsletter-input" required>
+                            <button type="submit" class="newsletter-button">
+                                <span class="relative z-10">Subscribe</span>
+                            </button>
+                        </form>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Product</h3>
+                        <a href="#features">Features</a>
+                        <a href="#pricing">Pricing</a>
+                        <a href="#examples">Examples</a>
+                        <a href="#templates">Templates</a>
+                        <a href="#roadmap">Roadmap</a>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Resources</h3>
+                        <a href="#documentation">Documentation</a>
+                        <a href="#guides">Guides</a>
+                        <a href="#api">API Reference</a>
+                        <a href="#tutorials">Tutorials</a>
+                        <a href="#community">Community</a>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Support</h3>
+                        <a href="#help">Help Center</a>
+                        <a href="#contact">Contact Us</a>
+                        <a href="#status">Status</a>
+                        <a href="#github">GitHub</a>
+                        <a href="#twitter">Twitter</a>
+                    </div>
+                    
+                    <div class="footer-section">
+                        <h3>Company</h3>
+                        <a href="#about">About</a>
+                        <a href="#blog">Blog</a>
+                        <a href="#careers">Careers</a>
+                        <a href="#press">Press</a>
+                        <a href="#legal">Legal</a>
+                        
+                        <div class="social-links">
+                            <a href="#" class="social-link">
+                                <i data-feather="github"></i>
+                            </a>
+                            <a href="#" class="social-link">
+                                <i data-feather="twitter"></i>
+                            </a>
+                            <a href="#" class="social-link">
+                                <i data-feather="linkedin"></i>
+                            </a>
+                            <a href="#" class="social-link">
+                                <i data-feather="instagram"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="copyright">
+                    <p>&copy; 2024 DocVortex. All rights reserved. | 
+                        <a href="#privacy">Privacy Policy</a> | 
+                        <a href="#terms">Terms of Service</a>
+                    </p>
+                </div>
+            </footer>
+        `;
+        
+        // Add newsletter form functionality
+        setTimeout(() => {
+            const form = this.shadowRoot.querySelector('.newsletter-form');
+            const button = form.querySelector('button');
+            
+            form.addEventListener('submit', (e) => {
+                e.preventDefault();
+                const input = form.querySelector('input[type="email"]');
+                
+                if (input.value) {
+                    button.innerHTML = '<span class="relative z-10">✓ Subscribed!</span>';
+                    button.style.background = 'linear-gradient(to right, #10b981, #059669)';
+                    input.value = '';
+                    
+                    setTimeout(() => {
+                        button.innerHTML = '<span class="relative z-10">Subscribe</span>';
+                        button.style.background = 'linear-gradient(to right, #06b6d4, #8b5cf6)';
+                    }, 3000);
+                }
+            });
+            
+            // Replace feather icons
+            if (typeof feather !== 'undefined') {
+                feather.replace({ 
+                    'stroke-width': 2,
+                    'height': 20,
+                    'width': 20
+                });
+            }
+        }, 100);
+    }
+}
+
+customElements.define('doc-footer', DocFooter);

components/navbar.js

@@ -0,0 +1,198 @@
+class DocNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 1000;
+                }
+                
+                nav {
+                    background: rgba(17, 24, 39, 0.8);
+                    backdrop-filter: blur(10px);
+                    -webkit-backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                    transition: all 0.3s ease;
+                }
+                
+                .nav-wrapper {
+                    max-width: 7xl;
+                    margin: 0 auto;
+                    padding: 1rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    font-size: 1.5rem;
+                    font-weight: bold;
+                    background: linear-gradient(to right, #06b6d4, #8b5cf6);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    text-decoration: none;
+                    transition: all 0.3s ease;
+                }
+                
+                .logo:hover {
+                    transform: scale(1.05);
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                    align-items: center;
+                }
+                
+                .nav-link {
+                    color: #d1d5db;
+                    text-decoration: none;
+                    transition: all 0.3s ease;
+                    position: relative;
+                }
+                
+                .nav-link:hover {
+                    color: #06b6d4;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    bottom: -4px;
+                    left: 0;
+                    width: 0;
+                    height: 2px;
+                    background: linear-gradient(to right, #06b6d4, #8b5cf6);
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                
+                .cta-button {
+                    background: linear-gradient(to right, #06b6d4, #8b5cf6);
+                    color: white;
+                    padding: 0.75rem 1.5rem;
+                    border-radius: 9999px;
+                    text-decoration: none;
+                    font-weight: 600;
+                    transition: all 0.3s ease;
+                }
+                
+                .cta-button:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 20px rgba(6, 182, 212, 0.3);
+                }
+                
+                .mobile-menu-toggle {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: white;
+                    cursor: pointer;
+                    padding: 0.5rem;
+                }
+                
+                .mobile-menu {
+                    display: none;
+                    position: absolute;
+                    top: 100%;
+                    left: 0;
+                    right: 0;
+                    background: rgba(17, 24, 39, 0.95);
+                    backdrop-filter: blur(10px);
+                    -webkit-backdrop-filter: blur(10px);
+                    padding: 2rem;
+                    gap: 1.5rem;
+                    flex-direction: column;
+                }
+                
+                .mobile-menu.active {
+                    display: flex;
+                }
+                
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    
+                    .mobile-menu-toggle {
+                        display: block;
+                    }
+                }
+            </style>
+            
+            <nav>
+                <div class="nav-wrapper">
+                    <a href="/" class="logo">
+                        <i data-feather="book-open"></i>
+                        DocVortex
+                    </a>
+                    
+                    <div class="nav-links">
+                        <a href="#features" class="nav-link">Features</a>
+                        <a href="#components" class="nav-link">Components</a>
+                        <a href="#guides" class="nav-link">Guides</a>
+                        <a href="#api" class="nav-link">API</a>
+                        <a href="#playground" class="cta-button">Playground</a>
+                    </div>
+                    
+                    <button class="mobile-menu-toggle" data-mobile-menu-toggle>
+                        <i data-feather="menu" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <div class="mobile-menu" data-mobile-menu>
+                    <a href="#features" class="nav-link">Features</a>
+                    <a href="#components" class="nav-link">Components</a>
+                    <a href="#guides" class="nav-link">Guides</a>
+                    <a href="#api" class="nav-link">API</a>
+                    <a href="#playground" class="cta-button">Playground</a>
+                </div>
+            </nav>
+        `;
+        
+        // Add mobile menu toggle functionality
+        setTimeout(() => {
+            const toggle = this.shadowRoot.querySelector('[data-mobile-menu-toggle]');
+            const menu = this.shadowRoot.querySelector('[data-mobile-menu]');
+            
+            if (toggle && menu) {
+                toggle.addEventListener('click', () => {
+                    menu.classList.toggle('active');
+                });
+            }
+            
+            // Replace feather icons
+            if (typeof feather !== 'undefined') {
+                feather.replace({ 
+                    'stroke-width': 2,
+                    'height': 24,
+                    'width': 24
+                });
+            }
+        }, 100);
+        
+        // Add scroll effect
+        window.addEventListener('scroll', () => {
+            const nav = this.shadowRoot.querySelector('nav');
+            if (window.scrollY > 50) {
+                nav.style.background = 'rgba(17, 24, 39, 0.95)';
+                nav.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+            } else {
+                nav.style.background = 'rgba(17, 24, 39, 0.8)';
+                nav.style.boxShadow = 'none';
+            }
+        });
+    }
+}
+
+customElements.define('doc-navbar', DocNavbar);

index.html

@@ -1,19 +1,199 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DocVortex - Documentation that Sucks You In</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-white overflow-x-hidden">
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    
+    <!-- Navigation -->
+    <doc-navbar></doc-navbar>
+    
+    <!-- Hero Section -->
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+        <!-- Animated Background -->
+        <div class="absolute inset-0 z-0">
+            <div id="particles-js"></div>
+            <div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 opacity-60"></div>
+        </div>
+        
+        <!-- Hero Content -->
+        <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
+            <div class="mb-8 animate-float">
+                <div class="inline-block relative">
+                    <div class="absolute inset-0 bg-gradient-to-r from-cyan-400 to-purple-600 rounded-full blur-3xl opacity-30 animate-pulse"></div>
+                    <img src="http://static.photos/technology/400x400/42" alt="DocVortex Logo" class="w-32 h-32 rounded-full relative z-10 border-4 border-white/20 shadow-2xl">
+                </div>
+            </div>
+            
+            <h1 class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 bg-clip-text text-transparent animate-text-shine">
+                DocVortex
+            </h1>
+            <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed">
+                Documentation that doesn't suck. A whirlpool of knowledge with interactive examples, 
+                beautiful design, and developer-first experience.
+            </p>
+            
+            <div class="flex flex-wrap gap-4 justify-center mb-12">
+                <button class="group relative overflow-hidden px-8 py-4 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full font-semibold text-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/25">
+                    <span class="relative z-10">Get Started</span>
+                    <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </button>
+                <button class="group relative overflow-hidden px-8 py-4 bg-white/10 backdrop-blur-sm rounded-full font-semibold text-lg border border-white/20 transition-all duration-300 hover:bg-white/20 hover:scale-105">
+                    <span class="relative z-10 flex items-center gap-2">
+                        <i data-feather="github" class="w-5 h-5"></i>
+                        View on GitHub
+                    </span>
+                </button>
+            </div>
+            
+            <!-- Stats -->
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mt-16">
+                <div class="text-center group hover:scale-110 transition-all duration-300">
+                    <div class="text-3xl md:text-4xl font-bold text-cyan-400 mb-2 counter" data-target="500">0</div>
+                    <div class="text-gray-400">Components</div>
+                </div>
+                <div class="text-center group hover:scale-110 transition-all duration-300">
+                    <div class="text-3xl md:text-4xl font-bold text-purple-400 mb-2 counter" data-target="1000">0</div>
+                    <div class="text-gray-400">Examples</div>
+                </div>
+                <div class="text-center group hover:scale-110 transition-all duration-300">
+                    <div class="text-3xl md:text-4xl font-bold text-pink-400 mb-2 counter" data-target="50">0</div>
+                    <div class="text-gray-400">Languages</div>
+                </div>
+                <div class="text-center group hover:scale-110 transition-all duration-300">
+                    <div class="text-3xl md:text-4xl font-bold text-orange-400 mb-2 counter" data-target="99">0</div>
+                    <div class="text-gray-400">% Uptime</div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Scroll Indicator -->
+        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
+            <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center">
+                <div class="w-1 h-3 bg-white/50 rounded-full mt-2 animate-scroll"></div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Features Section -->
+    <section class="py-20 px-4 relative">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">
+                Why Developers Love DocVortex
+            </h2>
+            
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="group relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-white/10 overflow-hidden hover:border-cyan-500/50 transition-all duration-300">
+                    <div class="absolute inset-0 bg-gradient-to-br from-cyan-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                            <i data-feather="zap" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold mb-4 text-white">Lightning Fast</h3>
+                        <p class="text-gray-400 leading-relaxed">Instant search, offline-first architecture, and blazing fast load times. No more waiting for documentation.</p>
+                    </div>
+                </div>
+                
+                <!-- Feature 2 -->
+                <div class="group relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-white/10 overflow-hidden hover:border-purple-500/50 transition-all duration-300">
+                    <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-pink-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 bg-gradient-to-r from-purple-500 to-pink-600 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                            <i data-feather="code" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold mb-4 text-white">Interactive Examples</h3>
+                        <p class="text-gray-400 leading-relaxed">Live code editors, real-time previews, and copy-paste examples that actually work. Learn by doing.</p>
+                    </div>
+                </div>
+                
+                <!-- Feature 3 -->
+                <div class="group relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-white/10 overflow-hidden hover:border-pink-500/50 transition-all duration-300">
+                    <div class="absolute inset-0 bg-gradient-to-br from-pink-500/10 to-orange-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 bg-gradient-to-r from-pink-500 to-orange-600 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                            <i data-feather="smartphone" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold mb-4 text-white">Mobile First</h3>
+                        <p class="text-gray-400 leading-relaxed">Beautiful on every device. Responsive design that adapts perfectly to your screen size.</p>
+                    </div>
+                </div>
+                
+                <!-- Feature 4 -->
+                <div class="group relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-white/10 overflow-hidden hover:border-green-500/50 transition-all duration-300">
+                    <div class="absolute inset-0 bg-gradient-to-br from-green-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 bg-gradient-to-r from-green-500 to-cyan-600 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                            <i data-feather="moon" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold mb-4 text-white">Dark Mode Native</h3>
+                        <p class="text-gray-400 leading-relaxed">Designed from the ground up for dark mode. Easy on the eyes during those late-night coding sessions.</p>
+                    </div>
+                </div>
+                
+                <!-- Feature 5 -->
+                <div class="group relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-white/10 overflow-hidden hover:border-yellow-500/50 transition-all duration-300">
+                    <div class="absolute inset-0 bg-gradient-to-br from-yellow-500/10 to-orange-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                            <i data-feather="search" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold mb-4 text-white">AI-Powered Search</h3>
+                        <p class="text-gray-400 leading-relaxed">Find what you need instantly with semantic search. Ask questions in natural language.</p>
+                    </div>
+                </div>
+                
+                <!-- Feature 6 -->
+                <div class="group relative bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-white/10 overflow-hidden hover:border-indigo-500/50 transition-all duration-300">
+                    <div class="absolute inset-0 bg-gradient-to-br from-indigo-500/10 to-purple-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    <div class="relative z-10">
+                        <div class="w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl mb-6 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                            <i data-feather="users" class="w-8 h-8 text-white"></i>
+                        </div>
+                        <h3 class="text-2xl font-bold mb-4 text-white">Community Driven</h3>
+                        <p class="text-gray-400 leading-relaxed">Contributions from developers worldwide. Constantly updated with the latest best practices.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    
+    <!-- CTA Section -->
+    <section class="py-20 px-4 relative overflow-hidden">
+        <div class="absolute inset-0 bg-gradient-to-r from-purple-900/50 to-blue-900/50"></div>
+        <div class="max-w-4xl mx-auto text-center relative z-10">
+            <h2 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-transparent">
+                Ready to Dive In?
+            </h2>
+            <p class="text-xl text-gray-300 mb-8">
+                Join thousands of developers who are already surfing the DocVortex wave.
+            </p>
+            <div class="flex flex-wrap gap-4 justify-center">
+                <input type="email" placeholder="Enter your email" class="px-6 py-4 bg-white/10 backdrop-blur-sm rounded-full border border-white/20 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 w-full max-w-sm">
+                <button class="group relative overflow-hidden px-8 py-4 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full font-semibold text-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-cyan-500/25">
+                    <span class="relative z-10">Get Early Access</span>
+                    <div class="absolute inset-0 bg-gradient-to-r from-purple-600 to-pink-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                </button>
+            </div>
+        </div>
+    </section>
+    
+    <!-- Footer -->
+    <doc-footer></doc-footer>
+    
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,130 @@
+// Counter animation
+const counters = document.querySelectorAll('.counter');
+const speed = 200;
+
+const animateCounter = (counter) => {
+    const target = +counter.getAttribute('data-target');
+    const count = +counter.innerText;
+    const increment = target / speed;
+    
+    if (count < target) {
+        counter.innerText = Math.ceil(count + increment);
+        setTimeout(() => animateCounter(counter), 1);
+    } else {
+        counter.innerText = target;
+    }
+};
+
+// Intersection Observer for counter animation
+const observerOptions = {
+    threshold: 0.5
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            animateCounter(entry.target);
+            observer.unobserve(entry.target);
+        }
+    });
+}, observerOptions);
+
+counters.forEach(counter => {
+    observer.observe(counter);
+});
+
+// Particles.js configuration
+if (document.getElementById('particles-js')) {
+    particlesJS('particles-js', {
+        particles: {
+            number: { value: 80, density: { enable: true, value_area: 800 } },
+            color: { value: ['#06b6d4', '#8b5cf6', '#ec4899'] },
+            shape: { type: 'circle' },
+            opacity: { value: 0.5, random: true },
+            size: { value: 3, random: true },
+            line_linked: {
+                enable: true,
+                distance: 150,
+                color: '#06b6d4',
+                opacity: 0.2,
+                width: 1
+            },
+            move: {
+                enable: true,
+                speed: 2,
+                direction: 'none',
+                random: true,
+                straight: false,
+                out_mode: 'out',
+                bounce: false
+            }
+        },
+        interactivity: {
+            detect_on: 'canvas',
+            events: {
+                onhover: { enable: true, mode: 'grab' },
+                onclick: { enable: true, mode: 'push' },
+                resize: true
+            },
+            modes: {
+                grab: { distance: 200, line_linked: { opacity: 0.5 } },
+                push: { particles_nb: 4 }
+            }
+        },
+        retina_detect: true
+    });
+}
+
+// Smooth scroll for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+
+// Add hover effect to cards
+document.querySelectorAll('.group').forEach(card => {
+    card.addEventListener('mouseenter', function() {
+        this.style.transform = 'translateY(-5px)';
+    });
+    
+    card.addEventListener('mouseleave', function() {
+        this.style.transform = 'translateY(0)';
+    });
+});
+
+// Form submission handler (placeholder)
+document.querySelector('input[type="email"]')?.closest('div')?.querySelector('button')?.addEventListener('click', function(e) {
+    e.preventDefault();
+    const email = document.querySelector('input[type="email"]').value;
+    if (email) {
+        this.innerHTML = '<span class="relative z-10">✓ Check your email!</span>';
+        this.style.background = 'linear-gradient(to right, #10b981, #059669)';
+    }
+});
+
+// Mobile menu toggle (if needed)
+const mobileMenuToggle = document.querySelector('[data-mobile-menu-toggle]');
+const mobileMenu = document.querySelector('[data-mobile-menu]');
+
+if (mobileMenuToggle && mobileMenu) {
+    mobileMenuToggle.addEventListener('click', () => {
+        mobileMenu.classList.toggle('hidden');
+    });
+}
+
+// Add scroll-based animations
+window.addEventListener('scroll', () => {
+    const scrolled = window.pageYOffset;
+    const parallax = document.querySelector('#particles-js');
+    if (parallax) {
+        parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
+    }
+});

style.css

@@ -1,28 +1,113 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom animations and styles */
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes text-shine {
+    0% { background-position: 0% 50%; }
+    100% { background-position: 100% 50%; }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes scroll {
+    0% { transform: translateY(0); opacity: 1; }
+    100% { transform: translateY(10px); opacity: 0; }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Custom styles */
+.animate-float {
+    animation: float 6s ease-in-out infinite;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.animate-text-shine {
+    background-size: 200% auto;
+    animation: text-shine 3s linear infinite;
 }
+
+.animate-scroll {
+    animation: scroll 2s ease-in-out infinite;
+}
+
+/* Particles canvas styling */
+#particles-js {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: 0;
+}
+
+/* Counter animation */
+.counter {
+    transition: all 0.3s ease-out;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(45deg, #06b6d4, #8b5cf6);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(45deg, #0891b2, #7c3aed);
+}
+
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Focus styles */
+input:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1), 0 0 0 1px rgba(6, 182, 212, 0.5);
+}
+
+/* Glass morphism effect */
+.glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Gradient border */
+.gradient-border {
+    position: relative;
+    background: linear-gradient(90deg, #06b6d4, #8b5cf6, #ec4899);
+    padding: 2px;
+    border-radius: 1rem;
+}
+
+.gradient-border > * {
+    background: #111827;
+    border-radius: calc(1rem - 2px);
+}
+
+/* Hover effects */
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+/* Loading animation */
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+.animate-spin-slow {
+    animation: spin 3s linear infinite;
+}