Spaces:

IamVicky111
/

anycoder-a25bb4af

Sleeping

App Files Files Community

IamVicky111 commited on Jan 18

Commit

def9a9b

verified ·

1 Parent(s): 3b96f9a

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +601 -0

index.html ADDED Viewed

	@@ -0,0 +1,601 @@

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reachy Mini - Compact Robotic Arm</title>
+    <meta name="description" content="Reachy Mini - A compact, affordable robotic arm for education and research">
+    <!-- Tailwind CSS (via CDN for standalone usage) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Lucide Icons -->
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <!-- Tailwind Configuration -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        accent: {
+                            500: '#22c55e',
+                            600: '#16a34a',
+                        }
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0px)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        }
+                    }
+                },
+            },
+        }
+    </script>
+    <!-- Custom CSS Styles -->
+    <style>
+        @layer base {
+            body {
+                @apply bg-gray-900 text-white antialiased;
+            }
+        }
+        @layer utilities {
+            .text-gradient {
+                @apply bg-gradient-to-r from-primary-400 to-accent-500 bg-clip-text text-transparent;
+            }
+        }
+    </style>
+</head>
+<body class="relative">
+    <!-- HEADER -->
+    <header class="fixed top-0 left-0 right-0 z-50 bg-gray-900/80 backdrop-blur-lg border-b border-gray-800">
+        <nav class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+            <div class="flex items-center justify-between h-16">
+                <!-- Logo -->
+                <a href="#" class="flex items-center space-x-2">
+                    <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
+                        <span class="text-white font-bold text-xl">R</span>
+                    </div>
+                    <span class="text-xl font-bold">Reachy Mini</span>
+                </a>
+                <!-- Desktop Navigation -->
+                <div class="hidden md:flex items-center space-x-8">
+                    <a href="#features" class="text-gray-300 hover:text-white transition-colors duration-200">Features</a>
+                    <a href="#specs" class="text-gray-300 hover:text-white transition-colors duration-200">Specifications</a>
+                    <a href="#applications" class="text-gray-300 hover:text-white transition-colors duration-200">Applications</a>
+                    <a href="#docs" class="text-gray-300 hover:text-white transition-colors duration-200">Documentation</a>
+                    <a
+                        href="https://huggingface.co/spaces/akhaliq/anycoder"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        class="text-sm text-primary-400 hover:text-primary-300 transition-colors"
+                    >
+                        Built with anycoder
+                    </a>
+                </div>
+                <!-- Mobile menu button -->
+                <button
+                    id="mobile-menu-btn"
+                    class="md:hidden p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800"
+                    aria-label="Toggle menu"
+                >
+                    <i data-lucide="menu" class="w-6 h-6"></i>
+                </button>
+            </div>
+            <!-- Mobile Navigation (Hidden by default) -->
+            <div id="mobile-menu" class="hidden md:hidden py-4 border-t border-gray-800">
+                <a href="#features" class="block py-2 text-gray-300 hover:text-white transition-colors">Features</a>
+                <a href="#specs" class="block py-2 text-gray-300 hover:text-white transition-colors">Specifications</a>
+                <a href="#applications" class="block py-2 text-gray-300 hover:text-white transition-colors">Applications</a>
+                <a href="#docs" class="block py-2 text-gray-300 hover:text-white transition-colors">Documentation</a>
+                <a
+                    href="https://huggingface.co/spaces/akhaliq/anycoder"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="block py-2 text-primary-400 hover:text-primary-300 transition-colors"
+                >
+                    Built with anycoder
+                </a>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <!-- HERO SECTION -->
+        <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-16">
+            <!-- Background gradient -->
+            <div class="absolute inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900" />
+            <div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary-900/20 via-transparent to-transparent" />
+            <!-- Animated circles -->
+            <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary-500/10 rounded-full blur-3xl animate-pulse-slow" />
+            <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-accent-500/10 rounded-full blur-3xl animate-pulse-slow" />
+            <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
+                <div class="grid lg:grid-cols-2 gap-12 items-center">
+                    <!-- Left content -->
+                    <div class="space-y-8">
+                        <div class="inline-flex items-center space-x-2 bg-gray-800/50 border border-gray-700 rounded-full px-4 py-2">
+                            <i data-lucide="sparkles" class="w-4 h-4 text-accent-500"></i>
+                            <span class="text-sm text-gray-300">Next-Gen Robotics</span>
+                        </div>
+                        <h1 class="text-5xl sm:text-6xl lg:text-7xl font-bold leading-tight">
+                            <span class="text-gradient">Reachy Mini</span>
+                            <br />
+                            <span class="text-white">Robotic Arm</span>
+                        </h1>
+                        <p class="text-xl text-gray-400 max-w-lg">
+                            A compact, affordable, and open-source robotic arm designed for education, research, and prototyping. Build the future with Reachy Mini.
+                        </p>
+                        <div class="flex flex-col sm:flex-row gap-4">
+                            <button class="group bg-gradient-to-r from-primary-500 to-accent-500 text-white px-8 py-4 rounded-xl font-semibold hover:shadow-lg hover:shadow-primary-500/25 transition-all duration-300 flex items-center justify-center space-x-2">
+                                <span>Get Started</span>
+                                <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
+                            </button>
+                            <button class="bg-gray-800 border border-gray-700 text-white px-8 py-4 rounded-xl font-semibold hover:bg-gray-700 transition-all duration-300 flex items-center justify-center space-x-2">
+                                <i data-lucide="play" class="w-5 h-5"></i>
+                                <span>Watch Demo</span>
+                            </button>
+                        </div>
+                        <!-- Stats -->
+                        <div class="grid grid-cols-3 gap-8 pt-8 border-t border-gray-800">
+                            <div>
+                                <div class="text-3xl font-bold text-gradient">6</div>
+                                <div class="text-gray-400 text-sm">Degrees of Freedom</div>
+                            </div>
+                            <div>
+                                <div class="text-3xl font-bold text-gradient">50cm</div>
+                                <div class="text-gray-400 text-sm">Reach</div>
+                            </div>
+                            <div>
+                                <div class="text-3xl font-bold text-gradient">&lt;1kg</div>
+                                <div class="text-gray-400 text-sm">Payload</div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Right content - Robot illustration -->
+                    <div class="relative flex items-center justify-center">
+                        <div class="relative animate-float">
+                            <!-- Robot arm representation -->
+                            <div class="w-80 h-80 relative">
+                                <!-- Base -->
+                                <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-32 h-8 bg-gradient-to-t from-gray-700 to-gray-600 rounded-lg" />
+                                <!-- Arm segments -->
+                                <div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-16 h-48 bg-gradient-to-r from-gray-600 to-gray-500 rounded-full transform -rotate-12 origin-bottom" />
+                                <div class="absolute bottom-40 left-1/2 -translate-x-8 w-16 h-40 bg-gradient-to-r from-gray-500 to-gray-400 rounded-full transform rotate-30 origin-bottom" />
+                                <!-- Joints -->
+                                <div class="absolute bottom-8 left-1/2 -translate-x-1/2 w-20 h-20 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full border-4 border-gray-700 shadow-lg shadow-primary-500/50" />
+                                <div class="absolute bottom-40 left-1/2 -translate-x-8 w-16 h-16 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full border-4 border-gray-700 shadow-lg shadow-primary-500/50" />
+                                <!-- Gripper -->
+                                <div class="absolute bottom-72 left-1/2 -translate-x-1/2 w-12 h-12 bg-gradient-to-br from-accent-500 to-accent-600 rounded-lg border-2 border-gray-700" />
+                            </div>
+                            <!-- Decorative elements -->
+                            <div class="absolute -top-4 -right-4 w-24 h-24 bg-primary-500/20 rounded-full blur-xl" />
+                            <div class="absolute -bottom-4 -left-4 w-32 h-32 bg-accent-500/20 rounded-full blur-xl" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- FEATURES SECTION -->
+        <section id="features" class="py-24 bg-gray-800/50">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-16">
+                    <h2 class="text-4xl font-bold mb-4">
+                        <span class="text-gradient">Powerful Features</span>
+                    </h2>
+                    <p class="text-gray-400 text-lg max-w-2xl mx-auto">
+                        Everything you need to bring your robotics projects to life
+                    </p>
+                </div>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- Feature 1 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10">
+                        <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                            <i data-lucide="cpu" class="w-7 h-7 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-3 text-white">High Performance</h3>
+                        <p class="text-gray-400">Powered by advanced actuators providing precise control and smooth movements for complex tasks.</p>
+                    </div>
+                    <!-- Feature 2 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10">
+                        <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                            <i data-lucide="zap" class="w-7 h-7 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-3 text-white">Easy Setup</h3>
+                        <p class="text-gray-400">Get started in minutes with our intuitive setup process and comprehensive documentation.</p>
+                    </div>
+                    <!-- Feature 3 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10">
+                        <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                            <i data-lucide="wifi" class="w-7 h-7 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-3 text-white">Cloud Connected</h3>
+                        <p class="text-gray-400">Seamlessly integrate with cloud services and control your robot from anywhere in the world.</p>
+                    </div>
+                    <!-- Feature 4 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10">
+                        <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                            <i data-lucide="code" class="w-7 h-7 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-3 text-white">Open Source</h3>
+                        <p class="text-gray-400">Fully open-source hardware and software. Customize and extend to fit your specific needs.</p>
+                    </div>
+                    <!-- Feature 5 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10">
+                        <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                            <i data-lucide="shield" class="w-7 h-7 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-3 text-white">Safe & Reliable</h3>
+                        <p class="text-gray-400">Built with safety in mind. Includes collision detection and emergency stop functionality.</p>
+                    </div>
+                    <!-- Feature 6 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl p-8 hover:border-primary-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-primary-500/10">
+                        <div class="w-14 h-14 bg-gradient-to-br from-primary-500 to-accent-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                            <i data-lucide="users" class="w-7 h-7 text-white"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-3 text-white">Community Driven</h3>
+                        <p class="text-gray-400">Join a vibrant community of developers, researchers, and robotics enthusiasts.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- SPECIFICATIONS SECTION -->
+        <section id="specs" class="py-24">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-16">
+                    <h2 class="text-4xl font-bold mb-4">
+                        <span class="text-gradient">Technical Specifications</span>
+                    </h2>
+                    <p class="text-gray-400 text-lg max-w-2xl mx-auto">
+                        Detailed specifications to help you integrate Reachy Mini into your projects
+                    </p>
+                </div>
+                <div class="grid lg:grid-cols-3 gap-8 mb-16">
+                    <!-- Mechanical Specs -->
+                    <div class="bg-gray-800/50 border border-gray-700 rounded-2xl p-8">
+                        <h3 class="text-xl font-semibold mb-6 text-primary-400">Mechanical</h3>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Degrees of Freedom</span>
+                                <span class="text-white font-medium text-right">6 DOF</span>
+                            </div>
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Reach</span>
+                                <span class="text-white font-medium text-right">50 cm</span>
+                            </div>
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Payload</span>
+                                <span class="text-white font-medium text-right">Up to 1 kg</span>
+                            </div>
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Repeatability</span>
+                                <span class="text-white font-medium text-right">±0.5 mm</span>
+                            </div>
+                            <div class="flex justify-between items-start pb-3">
+                                <span class="text-gray-400">Weight</span>
+                                <span class="text-white font-medium text-right">3.5 kg</span>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Electrical Specs -->
+                    <div class="bg-gray-800/50 border border-gray-700 rounded-2xl p-8">
+                        <h3 class="text-xl font-semibold mb-6 text-primary-400">Electrical</h3>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Voltage</span>
+                                <span class="text-white font-medium text-right">12V DC</span>
+                            </div>
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Power Consumption</span>
+                                <span class="text-white font-medium text-right">Max 50W</span>
+                            </div>
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Communication</span>
+                                <span class="text-white font-medium text-right">USB-C, WiFi, Bluetooth</span>
+                            </div>
+                            <div class="flex justify-between items-start pb-3">
+                                <span class="text-gray-400">Sensors</span>
+                                <span class="text-white font-medium text-right">Position, Temp, Current</span>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Software Specs -->
+                    <div class="bg-gray-800/50 border border-gray-700 rounded-2xl p-8">
+                        <h3 class="text-xl font-semibold mb-6 text-primary-400">Software</h3>
+                        <div class="space-y-4">
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Programming</span>
+                                <span class="text-white font-medium text-right">Python, ROS, C++</span>
+                            </div>
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">Control</span>
+                                <span class="text-white font-medium text-right">Inverse Kinematics</span>
+                            </div>
+                            <div class="flex justify-between items-start border-b border-gray-700 pb-3">
+                                <span class="text-gray-400">API</span>
+                                <span class="text-white font-medium text-right">REST, WebSocket</span>
+                            </div>
+                            <div class="flex justify-between items-start pb-3">
+                                <span class="text-gray-400">Compatibility</span>
+                                <span class="text-white font-medium text-right">Linux, macOS, Windows</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- What's included -->
+                <div class="bg-gradient-to-r from-primary-900/20 to-accent-900/20 border border-gray-700 rounded-2xl p-8 lg:p-12">
+                    <h3 class="text-2xl font-semibold mb-8 text-center">What's in the Box</h3>
+                    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                        <div class="flex items-center space-x-3">
+                            <div class="w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center flex-shrink-0">
+                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
+                            </div>
+                            <span class="text-gray-300">Reachy Mini Robotic Arm</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center flex-shrink-0">
+                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
+                            </div>
+                            <span class="text-gray-300">Power Supply (12V, 5A)</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center flex-shrink-0">
+                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
+                            </div>
+                            <span class="text-gray-300">USB-C Cable</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center flex-shrink-0">
+                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
+                            </div>
+                            <span class="text-gray-300">Quick Start Guide</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center flex-shrink-0">
+                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
+                            </div>
+                            <span class="text-gray-300">Access to Online Documentation</span>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <div class="w-6 h-6 bg-accent-500 rounded-full flex items-center justify-center flex-shrink-0">
+                                <i data-lucide="check" class="w-4 h-4 text-white"></i>
+                            </div>
+                            <span class="text-gray-300">Community Support Access</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- APPLICATIONS SECTION -->
+        <section id="applications" class="py-24 bg-gray-800/50">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="text-center mb-16">
+                    <h2 class="text-4xl font-bold mb-4">
+                        <span class="text-gradient">Applications</span>
+                    </h2>
+                    <p class="text-gray-400 text-lg max-w-2xl mx-auto">
+                        Discover how Reachy Mini can transform your projects and workflows
+                    </p>
+                </div>
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <!-- App 1 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl overflow-hidden hover:border-gray-600 transition-all duration-300">
+                        <div class="h-2 bg-gradient-to-r from-blue-500 to-cyan-500" />
+                        <div class="p-8">
+                            <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                                <i data-lucide="graduation-cap" class="w-7 h-7 text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3 text-white">Education</h3>
+                            <p class="text-gray-400">Teach robotics, programming, and STEM concepts with hands-on learning experiences.</p>
+                        </div>
+                    </div>
+                    <!-- App 2 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl overflow-hidden hover:border-gray-600 transition-all duration-300">
+                        <div class="h-2 bg-gradient-to-r from-orange-500 to-red-500" />
+                        <div class="p-8">
+                            <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                                <i data-lucide="factory" class="w-7 h-7 text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3 text-white">Industrial Prototyping</h3>
+                            <p class="text-gray-400">Test and validate automation concepts before scaling to industrial solutions.</p>
+                        </div>
+                    </div>
+                    <!-- App 3 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl overflow-hidden hover:border-gray-600 transition-all duration-300">
+                        <div class="h-2 bg-gradient-to-r from-purple-500 to-pink-500" />
+                        <div class="p-8">
+                            <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                                <i data-lucide="microscope" class="w-7 h-7 text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3 text-white">Research</h3>
+                            <p class="text-gray-400">Conduct experiments in robotics, AI, and human-robot interaction studies.</p>
+                        </div>
+                    </div>
+                    <!-- App 4 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl overflow-hidden hover:border-gray-600 transition-all duration-300">
+                        <div class="h-2 bg-gradient-to-r from-green-500 to-emerald-500" />
+                        <div class="p-8">
+                            <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                                <i data-lucide="palette" class="w-7 h-7 text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3 text-white">Creative Projects</h3>
+                            <p class="text-gray-400">Bring artistic visions to life with precise robotic movements and control.</p>
+                        </div>
+                    </div>
+                    <!-- App 5 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl overflow-hidden hover:border-gray-600 transition-all duration-300">
+                        <div class="h-2 bg-gradient-to-r from-yellow-500 to-orange-500" />
+                        <div class="p-8">
+                            <div class="w-14 h-14 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                                <i data-lucide="gamepad-2" class="w-7 h-7 text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3 text-white">Gaming & Entertainment</h3>
+                            <p class="text-gray-400">Create interactive experiences and gaming applications with robotic feedback.</p>
+                        </div>
+                    </div>
+                    <!-- App 6 -->
+                    <div class="group bg-gray-900 border border-gray-700 rounded-2xl overflow-hidden hover:border-gray-600 transition-all duration-300">
+                        <div class="h-2 bg-gradient-to-r from-indigo-500 to-purple-500" />
+                        <div class="p-8">
+                            <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
+                                <i data-lucide="shopping-bag" class="w-7 h-7 text-white"></i>
+                            </div>
+                            <h3 class="text-xl font-semibold mb-3 text-white">Small Business</h3>
+                            <p class="text-gray-400">Automate small-scale tasks and improve efficiency in local businesses.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- CTA SECTION -->
+        <section class="py-24">
+            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="bg-gradient-to-r from-primary-600 to-accent-600 rounded-3xl p-12 text-center relative overflow-hidden">
+                    <!-- Background decoration -->
+                    <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl" />
+                    <div class="absolute bottom-0 left-0 w-48 h-48 bg-white/10 rounded-full blur-3xl" />
+                    <div class="relative z-10">
+                        <h2 class="text-4xl font-bold mb-4 text-white">
+                            Ready to Build the Future?
+                        </h2>
+                        <p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+                            Join thousands of developers, researchers, and innovators using Reachy Mini to bring their ideas to life.
+                        </p>
+                        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
+                            <button class="bg-white text-gray-900 px-8 py-4 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-300 flex items-center justify-center space-x-2">
+                                <span>Get Started Now</span>
+                                <i data-lucide="arrow-right" class="w-5 h-5"></i>
+                            </button>
+                            <button class="bg-white/20 backdrop-blur text-white px-8 py-4 rounded-xl font-semibold hover:bg-white/30 transition-all duration-300 flex items-center justify-center space-x-2 border border-white/30">
+                                <i data-lucide="github" class="w-5 h-5"></i>
+                                <span>View on GitHub</span>
+                            </button>
+                        </div>
+                        <div class="flex justify-center items-center space-x-8">
+                            <a href="#" class="text-white/80 hover:text-white transition-colors flex items-center space-x-2">
+                                <i data-lucide="twitter" class="w-5 h-5"></i>
+                                <span>Follow Updates</span>
+                            </a>
+                            <a href="#" class="text-white/80 hover:text-white transition-colors">
+                                Join Discord
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+    <!-- FOOTER -->
+    <footer class="bg-gray-900 border-t border-gray-800 py-16">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="grid md:grid-cols-2 lg:grid-cols-6 gap-12 mb-12">
+                <!-- Brand -->
+                <div class="lg:col-span-2">
+                    <div class="flex items-center space-x-2 mb-4">
+                        <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center">
+                            <span class="text-white font-bold text-xl">R</span>
+                        </div>
+                        <span class="text-xl font-bold">Reachy Mini</span>
+                    </div>
+                    <p class="text-gray-400 mb-6 max-w-sm">
+                        Empowering the next generation of roboticists with accessible, open-source robotics solutions.
+                    </p>
+                    <div class="flex space-x-4">
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700 transition-colors">
+                            <i data-lucide="github" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700 transition-colors">
+                            <i data-lucide="twitter" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700 transition-colors">
+                            <i data-lucide="linkedin" class="w-5 h-5"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center text-gray-400 hover:text-white hover:bg-gray-700 transition-colors">
+                            <i data-lucide="mail" class="w-5 h-5"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Links -->
+                <div>
+                    <h4 class="text-white font-semibold mb-4 capitalize">Product</h4>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Features</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Specifications</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Applications</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Pricing</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-white font-semibold mb-4 capitalize">Resources</h4>
+                    <ul class="space-y-3">
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">API Reference</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Tutorials</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-white