| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>DocVortex - Arduino Documentation</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> |
| |
| |
| <doc-navbar></doc-navbar> |
| |
| |
| <section class="relative min-h-screen flex items-center justify-center overflow-hidden"> |
| |
| <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> |
| |
| |
| <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"> |
| Arduino DocVortex |
| </h1> |
| <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-3xl mx-auto leading-relaxed"> |
| Complete Arduino documentation with interactive examples, |
| code snippets, and beginner-friendly tutorials. |
| </p> |
| <div class="flex flex-wrap gap-4 justify-center mb-12"> |
| <a href="code.html" 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">Browse Code</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> |
| </a> |
| <a href="#tutorials" 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">Tutorials</span> |
| </a> |
| </div> |
| |
| |
| <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="25">0</div> |
| <div class="text-gray-400">Arduino Boards</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="200">0</div> |
| <div class="text-gray-400">Code 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="150">0</div> |
| <div class="text-gray-400">Sensors & Modules</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="50">0</div> |
| <div class="text-gray-400">Tutorials</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <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> |
| |
| |
| <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 Makers Love Arduino DocVortex |
| </h2> |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <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="cpu" class="w-8 h-8 text-white"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-4 text-white">Arduino Compatible</h3> |
| <p class="text-gray-400 leading-relaxed">Complete documentation for all Arduino boards, shields, and compatible microcontrollers.</p> |
| </div> |
| </div> |
| |
| <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">Copy-paste code examples, wiring diagrams, and step-by-step tutorials that actually work.</p> |
| </div> |
| </div> |
| |
| <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="book-open" class="w-8 h-8 text-white"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-4 text-white">Beginner Friendly</h3> |
| <p class="text-gray-400 leading-relaxed">Start from zero with clear explanations, wiring diagrams, and progressive tutorials.</p> |
| </div> |
| </div> |
| |
| <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="tool" class="w-8 h-8 text-white"></i> |
| </div> |
| <h3 class="text-2xl font-bold mb-4 text-white">Wiring Made Easy</h3> |
| <p class="text-gray-400 leading-relaxed">Clear diagrams and Fritzing layouts for every project. Never guess your connections again.</p> |
| </div> |
| </div> |
| |
| <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">Quick Reference</h3> |
| <p class="text-gray-400 leading-relaxed">Pinouts, libraries, and commonly used functions at your fingertips. Fast lookup for busy makers.</p> |
| </div> |
| </div> |
| |
| <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 Projects</h3> |
| <p class="text-gray-400 leading-relaxed">Real projects from the Arduino community. Contribute and learn from makers worldwide.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </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 Build? |
| </h2> |
| <p class="text-xl text-gray-300 mb-8"> |
| Start your Arduino journey today. From blinking an LED to building robots. |
| </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> |
| |
| |
| <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> |
