Spaces:

Gamehak
/

docvortex

Running

App Files Files Community

Gamehak commited on 18 days ago

Commit

df8502b

verified ·

1 Parent(s): 14a31b5

juste c'est une documentation arduino pas documentation personnele pour le code donc refait et une narbard en haux pour aller dans le code

Browse files

Files changed (3) hide show

code.html +283 -0
components/navbar.js +14 -16
index.html +49 -60

code.html ADDED Viewed

	@@ -0,0 +1,283 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Arduino Code Reference - DocVortex</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">
+    <!-- Navigation -->
+    <doc-navbar></doc-navbar>
+    <!-- Code Reference Section -->
+    <section class="pt-24 pb-12 px-4">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center mb-16">
+                <h1 class="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-cyan-400 via-purple-500 to-pink-500 bg-clip-text text-transparent">
+                    Arduino Code Reference
+                </h1>
+                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
+                    Complete reference for Arduino programming language, functions, and libraries.
+                </p>
+            </div>
+            <!-- Search Bar -->
+            <div class="max-w-2xl mx-auto mb-12">
+                <div class="relative">
+                    <input type="text" placeholder="Search functions, libraries, or keywords..."
+                           class="w-full px-6 py-4 bg-gray-800/50 backdrop-blur-sm rounded-full border border-white/20 focus:outline-none focus:border-cyan-500 focus:ring-2 focus:ring-cyan-500/20 text-white placeholder-gray-400">
+                    <button class="absolute right-2 top-2 p-3 bg-gradient-to-r from-cyan-500 to-purple-600 rounded-full">
+                        <i data-feather="search" class="w-5 h-5"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Categories -->
+            <div class="grid md:grid-cols-3 lg:grid-cols-4 gap-6 mb-16">
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-cyan-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="zap" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Digital I/O</h3>
+                    <p class="text-gray-400 text-sm">pinMode(), digitalRead(), digitalWrite()</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-purple-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="trending-up" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Analog I/O</h3>
+                    <p class="text-gray-400 text-sm">analogRead(), analogWrite(), analogReference()</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-green-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-green-500 to-cyan-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="clock" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Time Functions</h3>
+                    <p class="text-gray-400 text-sm">millis(), micros(), delay(), delayMicroseconds()</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-yellow-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-yellow-500 to-orange-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="terminal" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Serial Communication</h3>
+                    <p class="text-gray-400 text-sm">Serial.begin(), Serial.print(), Serial.read()</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-indigo-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="cpu" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Advanced I/O</h3>
+                    <p class="text-gray-400 text-sm">shiftOut(), pulseIn(), tone(), noTone()</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-pink-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-pink-500 to-orange-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="wifi" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">WiFi & IoT</h3>
+                    <p class="text-gray-400 text-sm">WiFi library, ESP8266, ESP32 functions</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-cyan-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-cyan-500 to-teal-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="server" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">I2C & SPI</h3>
+                    <p class="text-gray-400 text-sm">Wire library, SPI communication protocols</p>
+                </div>
+                <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-red-500/50 transition-all duration-300 cursor-pointer">
+                    <div class="w-12 h-12 bg-gradient-to-r from-red-500 to-pink-600 rounded-xl mb-4 flex items-center justify-center">
+                        <i data-feather="file-text" class="w-6 h-6 text-white"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Libraries</h3>
+                    <p class="text-gray-400 text-sm">Built-in and contributed libraries</p>
+                </div>
+            </div>
+            <!-- Most Popular Functions -->
+            <div class="mb-16">
+                <h2 class="text-3xl font-bold mb-8 text-center">Most Popular Functions</h2>
+                <div class="grid gap-6">
+                    <!-- pinMode() -->
+                    <div class="bg-gray-800/30 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-cyan-500/30 transition-all duration-300">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-2xl font-bold text-cyan-400">pinMode()</h3>
+                            <span class="px-3 py-1 bg-cyan-500/20 text-cyan-400 rounded-full text-sm">Digital I/O</span>
+                        </div>
+                        <p class="text-gray-300 mb-6">Configures the specified pin to behave either as an input or an output.</p>
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <h4 class="text-lg font-semibold mb-2 text-white">Syntax</h4>
+                                <div class="bg-gray-900 rounded-lg p-3 mb-4">
+                                    <code class="text-cyan-400">pinMode(pin, mode)</code>
+                                </div>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold mb-2 text-white">Parameters</h4>
+                                <ul class="text-gray-400 space-y-1">
+                                    <li><code class="text-cyan-400">pin</code>: the Arduino pin number</li>
+                                    <li><code class="text-cyan-400">mode</code>: INPUT, OUTPUT, or INPUT_PULLUP</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <h4 class="text-lg font-semibold mb-2 text-white">Example</h4>
+                        <div class="bg-gray-900 rounded-lg p-4">
+                            <pre class="text-gray-300 text-sm"><code>void setup() {
+  pinMode(LED_BUILTIN, OUTPUT);  // sets the digital pin 13 as output
+}
+void loop() {
+  digitalWrite(LED_BUILTIN, HIGH);  // turns the LED on
+  delay(1000);                       // waits for 1 second
+  digitalWrite(LED_BUILTIN, LOW);   // turns the LED off
+  delay(1000);                       // waits for 1 second
+}</code></pre>
+                        </div>
+                        <div class="mt-4 flex gap-2">
+                            <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm transition-colors">
+                                <i data-feather="copy" class="w-4 h-4 inline mr-1"></i> Copy
+                            </button>
+                            <button class="px-4 py-2 bg-cyan-600 hover:bg-cyan-500 rounded-lg text-sm transition-colors">
+                                <i data-feather="play" class="w-4 h-4 inline mr-1"></i> Try it
+                            </button>
+                        </div>
+                    </div>
+                    <!-- digitalWrite() -->
+                    <div class="bg-gray-800/30 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-purple-500/30 transition-all duration-300">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-2xl font-bold text-purple-400">digitalWrite()</h3>
+                            <span class="px-3 py-1 bg-purple-500/20 text-purple-400 rounded-full text-sm">Digital I/O</span>
+                        </div>
+                        <p class="text-gray-300 mb-6">Write a HIGH or LOW value to a digital pin.</p>
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <h4 class="text-lg font-semibold mb-2 text-white">Syntax</h4>
+                                <div class="bg-gray-900 rounded-lg p-3 mb-4">
+                                    <code class="text-purple-400">digitalWrite(pin, value)</code>
+                                </div>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold mb-2 text-white">Parameters</h4>
+                                <ul class="text-gray-400 space-y-1">
+                                    <li><code class="text-purple-400">pin</code>: the Arduino pin number</li>
+                                    <li><code class="text-purple-400">value</code>: HIGH or LOW</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <h4 class="text-lg font-semibold mb-2 text-white">Example</h4>
+                        <div class="bg-gray-900 rounded-lg p-4">
+                            <pre class="text-gray-300 text-sm"><code>int ledPin = 13;    // LED connected to digital pin 13
+void setup() {
+  pinMode(ledPin, OUTPUT);  // sets the digital pin as output
+}
+void loop() {
+  digitalWrite(ledPin, HIGH);  // sets the LED on
+  delay(1000);                 // waits for a second
+  digitalWrite(ledPin, LOW);   // sets the LED off
+  delay(1000);                 // waits for a second
+}</code></pre>
+                        </div>
+                        <div class="mt-4 flex gap-2">
+                            <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm transition-colors">
+                                <i data-feather="copy" class="w-4 h-4 inline mr-1"></i> Copy
+                            </button>
+                            <button class="px-4 py-2 bg-purple-600 hover:bg-purple-500 rounded-lg text-sm transition-colors">
+                                <i data-feather="play" class="w-4 h-4 inline mr-1"></i> Try it
+                            </button>
+                        </div>
+                    </div>
+                    <!-- analogRead() -->
+                    <div class="bg-gray-800/30 backdrop-blur-sm rounded-2xl p-8 border border-white/10 hover:border-green-500/30 transition-all duration-300">
+                        <div class="flex justify-between items-start mb-4">
+                            <h3 class="text-2xl font-bold text-green-400">analogRead()</h3>
+                            <span class="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">Analog I/O</span>
+                        </div>
+                        <p class="text-gray-300 mb-6">Reads the value from the specified analog pin. Arduino boards contain a multichannel, 10-bit analog to digital converter.</p>
+                        <div class="grid md:grid-cols-2 gap-6">
+                            <div>
+                                <h4 class="text-lg font-semibold mb-2 text-white">Syntax</h4>
+                                <div class="bg-gray-900 rounded-lg p-3 mb-4">
+                                    <code class="text-green-400">analogRead(pin)</code>
+                                </div>
+                            </div>
+                            <div>
+                                <h4 class="text-lg font-semibold mb-2 text-white">Parameters</h4>
+                                <ul class="text-gray-400 space-y-1">
+                                    <li><code class="text-green-400">pin</code>: the analog input pin number</li>
+                                </ul>
+                            </div>
+                        </div>
+                        <h4 class="text-lg font-semibold mb-2 text-white">Example</h4>
+                        <div class="bg-gray-900 rounded-lg p-4">
+                            <pre class="text-gray-300 text-sm"><code>int analogPin = A3;  // potentiometer wiper (middle terminal) connected to analog pin 3
+                       // outside leads to ground and +5V
+int val = 0;         // variable to store the value read
+void setup() {
+  Serial.begin(9600);          //  setup serial
+}
+void loop() {
+  val = analogRead(analogPin); // read the input pin
+  Serial.println(val);         // debug value
+}</code></pre>
+                        </div>
+                        <div class="mt-4 flex gap-2">
+                            <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg text-sm transition-colors">
+                                <i data-feather="copy" class="w-4 h-4 inline mr-1"></i> Copy
+                            </button>
+                            <button class="px-4 py-2 bg-green-600 hover:bg-green-500 rounded-lg text-sm transition-colors">
+                                <i data-feather="play" class="w-4 h-4 inline mr-1"></i> Try it
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Back to Home -->
+            <div class="text-center">
+                <a href="/" class="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 transition-colors">
+                    <i data-feather="arrow-left" class="w-5 h-5"></i>
+                    Back to Home
+                </a>
+            </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>

components/navbar.js CHANGED Viewed

@@ -133,31 +133,29 @@ class DocNavbar extends HTMLElement {
             <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

             <nav>
                 <div class="nav-wrapper">
                     <a href="/" class="logo">
+                        <i data-feather="cpu"></i>
+                        Arduino DocVortex
                     </a>
                     <div class="nav-links">
+                        <a href="#boards" class="nav-link">Boards</a>
+                        <a href="code.html" class="nav-link">Code Reference</a>
+                        <a href="#tutorials" class="nav-link">Tutorials</a>
+                        <a href="#libraries" class="nav-link">Libraries</a>
+                        <a href="code.html" class="cta-button">Get Started</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="#boards" class="nav-link">Boards</a>
+                    <a href="code.html" class="nav-link">Code Reference</a>
+                    <a href="#tutorials" class="nav-link">Tutorials</a>
+                    <a href="#libraries" class="nav-link">Libraries</a>
+                    <a href="code.html" class="cta-button">Get Started</a>
                 </div>
+</nav>
         `;
         // Add mobile menu toggle functionality

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <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>
@@ -33,47 +33,42 @@
                     <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 -->
@@ -88,22 +83,20 @@
     <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>
@@ -112,34 +105,31 @@
                             <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>
@@ -147,11 +137,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>
@@ -159,11 +148,11 @@
                         <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>
@@ -172,12 +161,12 @@
         <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>

 <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>
                     <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 -->
     <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>
                             <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="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="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>
         <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>