"docs:_add_version_badge_and_requirements_section"

index.html

@@ -18,6 +18,7 @@
 				<span class="brand-name">Reachy Mini for Home Assistant</span>
 			</div>
 			<div class="pill">Voice · Gestures · Smart Home</div>
+			<div class="version-pill">v0.8.3</div>
 		</div>
 		<div class="hero-grid">
 			<div class="hero-copy">
@@ -104,6 +105,36 @@
 		</div>
 	</section>
 
+	<section id="requirements" class="section">
+		<div class="section-header">
+			<p class="eyebrow">Before You Start</p>
+			<h2>Requirements</h2>
+			<p class="intro">Make sure you have everything ready for a smooth setup.</p>
+		</div>
+		<div class="requirements-grid">
+			<div class="requirement-card">
+				<span class="icon">🤖</span>
+				<h3>Reachy Mini Wi-Fi</h3>
+				<p>This app requires the <strong>Wi-Fi version</strong> of Reachy Mini. USB version is not supported.</p>
+			</div>
+			<div class="requirement-card">
+				<span class="icon">🏠</span>
+				<h3>Home Assistant</h3>
+				<p>A running Home Assistant instance with <strong>ESPHome integration</strong> enabled.</p>
+			</div>
+			<div class="requirement-card">
+				<span class="icon">📶</span>
+				<h3>Same Network</h3>
+				<p>Both Reachy Mini and Home Assistant must be on the <strong>same local network</strong>.</p>
+			</div>
+			<div class="requirement-card">
+				<span class="icon">🎙️</span>
+				<h3>Voice Pipeline</h3>
+				<p>Configure a <strong>Voice Assistant pipeline</strong> in Home Assistant (STT + TTS).</p>
+			</div>
+		</div>
+	</section>
+
 	<section id="install" class="section story">
 		<div class="section-header">
 			<p class="eyebrow">Getting Started</p>

style.css

@@ -88,6 +88,16 @@ a:hover { color: var(--ha-blue-light); }
   color: var(--text-secondary);
 }
 
+.version-pill {
+  background: linear-gradient(135deg, var(--ha-blue), var(--ha-cyan));
+  padding: 6px 16px;
+  border-radius: 100px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: white;
+  box-shadow: 0 2px 10px var(--accent-glow);
+}
+
 .hero-grid {
   display: grid;
   grid-template-columns: 1fr 1.2fr;
@@ -318,6 +328,47 @@ a:hover { color: var(--ha-blue-light); }
   font-size: 0.95rem;
 }
 
+/* Requirements */
+.requirements-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 24px;
+}
+
+.requirement-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--card-radius);
+  padding: 28px;
+  text-align: center;
+  transition: all 0.3s;
+}
+
+.requirement-card:hover {
+  border-color: var(--accent);
+  transform: translateY(-2px);
+}
+
+.requirement-card .icon {
+  font-size: 2.5rem;
+  display: block;
+  margin-bottom: 16px;
+}
+
+.requirement-card h3 {
+  font-size: 1.1rem;
+  margin-bottom: 10px;
+}
+
+.requirement-card p {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+}
+
+.requirement-card strong {
+  color: var(--ha-blue-light);
+}
+
 /* Story / Install */
 .story-grid {
   display: grid;