Reachy-Mini-DRAFT / index.html
Anne-Charlotte's picture
Update index.html
86c8e8c verified
raw
history blame
24.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reachy Mini Kickstart - Open-Source Companion Robot</title>
<meta name="description" content="Reachy Mini is an expressive, open-source robot designed for human-robot interaction, creative coding, and AI experimentation.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Hero Section -->
<header class="hero">
<video class="hero-video" autoplay muted loop playsinline>
<source src="/Reachy-mini-wake-up-companion.mp4" type="video/mp4">
</video>
<div class="hero-overlay"></div>
<div class="hero-content">
<h1>Reachy Mini</h1>
<p class="hero-subtitle">The open-source companion robot for everyone.</p>
<p class="hero-description">
Reachy Mini is an expressive, open-source robot designed for human-robot interaction,
creative coding, and AI experimentation.
</p>
<div class="hero-buttons">
<a href="#kickstart" class="btn btn-primary">Kickstart your robot</a>
<a href="#buy" class="btn btn-outline">Buy Reachy Mini</a>
</div>
</div>
</header>
<!-- Kickstart Section -->
<section id="kickstart" class="section">
<div class="container">
<h2 class="section-title">Kickstart your Reachy Mini</h2>
<p class="section-description">
Follow these steps to assemble your robot, start it with the dashboard, explore
community Spaces, and build your own experiences.
</p>
<!-- 1. BUILD Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="Build.png" alt="Build your Reachy Mini" class="section-image">
</div>
<div class="grid-2 build-grid">
<!-- Beta Version -->
<div class="card">
<div class="badge badge-muted">Beta</div>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
target="_blank"
class="btn btn-outline btn-full mb-4">
Open assembly guide
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
<p class="card-text-small">
After you build your Reachy Mini, you can download the dashboard to control your Reachy Mini here:
</p>
<a href="https://pollen-robotics.github.io/reachy-mini-desktop-app/latest.json"
target="_blank"
class="btn btn-outline btn-full">
Download dashboard
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Lite Version -->
<div class="card">
<div class="badge badge-primary">Lite</div>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen>
</iframe>
</div>
<a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide"
target="_blank"
class="btn btn-outline btn-full mb-4">
Open assembly guide
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
<p class="card-text-small">
After you build your Reachy Mini, you can download the dashboard to control your Reachy Mini here:
</p>
<a href="https://pollen-robotics.github.io/reachy-mini-desktop-app/latest.json"
target="_blank"
class="btn btn-outline btn-full">
Download dashboard
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
<p class="beta-link-text">
If you own a beta, your assembly guide is <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_BETA_Assembly_Guide" target="_blank">here</a>
</p>
</div>
<!-- 2. PLAY Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="Play.png" alt="Play" class="section-image section-image-lg">
</div>
<div class="grid-2">
<!-- No Code -->
<div class="card">
<h4 class="card-title">2.1. No Code</h4>
<div class="gif-wrapper">
<img src="reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
</div>
<p class="card-text">
Start playing with Reachy Mini using our visual dashboard - no coding required.
</p>
<a href="#" target="_blank" class="btn btn-outline btn-full">
Download dashboard
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Code Your Own -->
<div class="card">
<h4 class="card-title">2.2. Code Your Own Applications</h4>
<div class="placeholder">
Documentation GIF preview<br>(coming soon)
</div>
<p class="card-text">
Explore the documentation and build custom applications for your Reachy Mini.
</p>
<a href="https://github.com/pollen-robotics/reachy_mini"
target="_blank"
class="btn btn-outline btn-full">
View documentation
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- 3. CREATE Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="Create.png" alt="Create" class="section-image section-image-lg">
</div>
<div class="grid-3">
<!-- No Code -->
<div class="card">
<h4 class="card-title">No Code</h4>
<div class="dashboard-image-wrapper">
<img src="dashboard-discover-apps.png" alt="Reachy Mini Dashboard">
</div>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<!-- SDK -->
<div class="card">
<h4 class="card-title">SDK</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<!-- Web API -->
<div class="card">
<h4 class="card-title">Web API</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<!-- 4. SHARE Section -->
<div class="subsection">
<div class="image-title-wrapper">
<img src="Share.png" alt="Share" class="section-image section-image-lg">
</div>
<div class="grid-2">
<!-- Browse Spaces -->
<div class="card card-flex">
<h4 class="card-title">4.1. Browse Existing Spaces</h4>
<div class="gif-wrapper">
<img src="reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
</div>
<p class="card-text">
Discover all Spaces already developed for Reachy Mini. You can also duplicate them to customize depending on your needs.
</p>
<a href="https://huggingface.co/spaces?q=reachy+mini"
target="_blank"
class="btn btn-outline btn-full mt-auto">
Browse Spaces
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Create Spaces -->
<div class="card card-flex">
<h4 class="card-title">4.2. Build Your Own Spaces</h4>
<p class="card-text">
Build, customize existing apps, or create your own from scratch using our template.
</p>
<a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_app_example"
target="_blank"
class="btn btn-outline btn-full mt-auto">
Duplicate template
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Discord CTA -->
<div class="discord-cta">
<h3>Join the Community</h3>
<p>
Connect with other Reachy Mini owners, share your projects, get help, and stay updated on the latest developments.
</p>
<a href="https://discord.gg/2bAhWfXme9"
target="_blank"
class="btn btn-primary">
Join Pollen Discord
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</section>
<!-- Buy Section -->
<section id="buy" class="section section-muted">
<div class="container">
<h2 class="section-title">Buy Reachy Mini</h2>
<p class="section-description">
Choose the version that best fits your needs. Both versions are fully compatible
with our open-source tooling and Hugging Face Spaces.
</p>
<div class="grid-2 pricing-grid">
<!-- Lite Version -->
<div class="card pricing-card">
<div class="pricing-header">
<div class="badge badge-primary">Lite</div>
<h3 class="pricing-title">Reachy Mini Lite</h3>
<p class="pricing-price">$299</p>
</div>
<ul class="feature-list">
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
External compute (Mac & Linux, Windows soon)
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
No Wi-Fi (wired power only)
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
4 microphones & 5W speaker
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Wide angle camera
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
No accelerometer
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
6 degrees of freedom head movement
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Full body rotation
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
2 animated antennas
</li>
</ul>
<a href="https://buy.stripe.com/6oUfZj78P1a5e6b0FS73G02"
target="_blank"
class="btn btn-primary btn-full">
Buy Lite version
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
<!-- Wireless Version -->
<div class="card pricing-card">
<div class="pricing-header">
<div class="badge badge-success">Wireless</div>
<h3 class="pricing-title">Reachy Mini Wireless</h3>
<p class="pricing-price">$449</p>
</div>
<ul class="feature-list">
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
On-board compute (Raspberry Pi 4)
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Works both wired and wireless, for power and communication
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Wi-Fi enabled, or Ethernet via a USB-C adapter (not included)
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
4 microphones & 5W speaker
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Wide angle camera
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Integrated accelerometer
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
6 degrees of freedom head movement
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
Full body rotation
</li>
<li>
<svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
2 animated antennas
</li>
</ul>
<a href="https://buy.stripe.com/9B65kFfFlaKFbY34W873G03"
target="_blank"
class="btn btn-primary btn-full">
Buy Wireless version
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>&copy;Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co/" target="_blank">Hugging Face</a></p>
</div>
</footer>
<!-- Documentation Button -->
<a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" class="doc-button" id="docButton">
<svg class="doc-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
<span class="doc-text">Documentation</span>
</a>
<script src="script.js"></script>
</body>
</html>