Spaces:
Sleeping
Sleeping
| <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"><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 |