File size: 13,255 Bytes
14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 df8502b 14a31b5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 |
<!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>
<!-- 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">
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>
<!-- 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="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>
<!-- 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 Makers Love Arduino 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="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>
<!-- 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">Copy-paste code examples, wiring diagrams, and step-by-step tutorials that actually work.</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="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>
<!-- 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="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>
<!-- 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">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>
<!-- 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 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>
<!-- 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 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>
<!-- 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> |