From b63a068307d81146c1c5ce16feaab41a2f0dc2e6 Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Thu, 12 Mar 2026 02:34:56 -0300
Subject: [PATCH] feat: integrate Wokwi elements for Arduino boards in
 LandingPage

---
 frontend/src/pages/LandingPage.css | 43 ++++++++++++++++++++
 frontend/src/pages/LandingPage.tsx | 63 +++++-------------------------
 2 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css
index 2f616b3..2ef6fc1 100644
--- a/frontend/src/pages/LandingPage.css
+++ b/frontend/src/pages/LandingPage.css
@@ -505,6 +505,49 @@
   filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
 }
 
+/* Wokwi element board wrappers */
+/* Elements have fixed mm dimensions; we scale them to fit the card.
+   At 96dpi: Uno ≈274×202px, Nano ≈170×67px, Mega ≈388×192px.
+   transform: scale() is visual only, so wrapper clips to the scaled size. */
+.board-element-wrap {
+  overflow: hidden;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
+  flex-shrink: 0;
+}
+
+/* Uno: 274×202px → scale 0.73 → 200×147px */
+.board-element-uno {
+  width: 200px;
+  height: 147px;
+}
+.board-element-uno > wokwi-arduino-uno {
+  display: block;
+  transform: scale(0.73);
+  transform-origin: top left;
+}
+
+/* Nano: 170×67px → scale 1.18 → 200×79px */
+.board-element-nano {
+  width: 200px;
+  height: 79px;
+}
+.board-element-nano > wokwi-arduino-nano {
+  display: block;
+  transform: scale(1.18);
+  transform-origin: top left;
+}
+
+/* Mega: 388×192px → scale 0.515 → 200×99px */
+.board-element-mega {
+  width: 200px;
+  height: 99px;
+}
+.board-element-mega > wokwi-arduino-mega {
+  display: block;
+  transform: scale(0.515);
+  transform-origin: top left;
+}
+
 .board-info {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
index 6f1b6b8..afd9ac0 100644
--- a/frontend/src/pages/LandingPage.tsx
+++ b/frontend/src/pages/LandingPage.tsx
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../store/useAuthStore';
+import '@wokwi/elements';
 import './LandingPage.css';
 
 const GITHUB_URL = 'https://github.com/davidmonterocrespo24/velxio';
@@ -244,39 +245,6 @@ const CircuitSchematic = () => (
 );
 
 /* ── Board SVGs ───────────────────────────────────────── */
-const BoardUno = () => (
-  <svg viewBox="0 0 120 80" className="board-svg">
-    <rect x="2" y="2" width="116" height="76" rx="4" fill="#006633" stroke="#004d26" strokeWidth="1.5" />
-    <rect x="42" y="22" width="36" height="36" rx="2" fill="#1a1a1a" stroke="#333" strokeWidth="1" />
-    <rect x="0" y="28" width="14" height="24" rx="2" fill="#555" stroke="#444" strokeWidth="1" />
-    <circle cx="108" cy="20" r="7" fill="#333" stroke="#222" strokeWidth="1" />
-    {[0,1,2,3,4,5,6,7,8,9,11,12,13].map((i) => (
-      <rect key={i} x={20 + i * 6.5} y="4" width="3" height="6" rx="0.5" fill="#d4a017" />
-    ))}
-    {[0,1,2,3,4,5].map((i) => (
-      <rect key={i} x={40 + i * 8} y="70" width="3" height="6" rx="0.5" fill="#d4a017" />
-    ))}
-    <circle cx="90" cy="12" r="2.5" fill="#00ff88" opacity="0.9" />
-    <text x="60" y="77" textAnchor="middle" fill="#00aa55" fontSize="5" fontFamily="monospace">Arduino Uno</text>
-  </svg>
-);
-
-const BoardNano = () => (
-  <svg viewBox="0 0 120 50" className="board-svg">
-    <rect x="2" y="2" width="116" height="46" rx="3" fill="#003399" stroke="#002277" strokeWidth="1.5" />
-    <rect x="44" y="12" width="24" height="24" rx="1.5" fill="#1a1a1a" stroke="#333" strokeWidth="1" />
-    <rect x="50" y="0" width="20" height="8" rx="2" fill="#555" stroke="#444" strokeWidth="1" />
-    {[0,1,2,3,4,5,6,7].map((i) => (
-      <rect key={i} x="4" y={8 + i * 4.5} width="6" height="3" rx="0.5" fill="#d4a017" />
-    ))}
-    {[0,1,2,3,4,5,6,7].map((i) => (
-      <rect key={i} x="110" y={8 + i * 4.5} width="6" height="3" rx="0.5" fill="#d4a017" />
-    ))}
-    <circle cx="28" cy="10" r="2" fill="#00ff88" opacity="0.9" />
-    <text x="60" y="44" textAnchor="middle" fill="#6699ff" fontSize="5" fontFamily="monospace">Arduino Nano</text>
-  </svg>
-);
-
 const BoardPico = () => (
   <svg viewBox="0 0 120 60" className="board-svg">
     <rect x="2" y="2" width="116" height="56" rx="3" fill="#f0f0f0" stroke="#ccc" strokeWidth="1.5" />
@@ -294,23 +262,6 @@ const BoardPico = () => (
   </svg>
 );
 
-const BoardMega = () => (
-  <svg viewBox="0 0 160 80" className="board-svg">
-    <rect x="2" y="2" width="156" height="76" rx="4" fill="#006633" stroke="#004d26" strokeWidth="1.5" />
-    <rect x="55" y="20" width="50" height="40" rx="2" fill="#1a1a1a" stroke="#333" strokeWidth="1" />
-    <rect x="0" y="28" width="14" height="24" rx="2" fill="#555" stroke="#444" strokeWidth="1" />
-    <circle cx="148" cy="20" r="7" fill="#333" stroke="#222" strokeWidth="1" />
-    {Array.from({length: 18}).map((_, i) => (
-      <rect key={i} x={18 + i * 7} y="4" width="3" height="6" rx="0.5" fill="#d4a017" />
-    ))}
-    {Array.from({length: 18}).map((_, i) => (
-      <rect key={i} x={18 + i * 7} y="70" width="3" height="6" rx="0.5" fill="#d4a017" />
-    ))}
-    <circle cx="130" cy="12" r="2.5" fill="#00ff88" opacity="0.9" />
-    <circle cx="138" cy="12" r="2.5" fill="#ff6600" opacity="0.9" />
-    <text x="80" y="77" textAnchor="middle" fill="#00aa55" fontSize="5" fontFamily="monospace">Arduino Mega 2560</text>
-  </svg>
-);
 
 /* ── Features ─────────────────────────────────────────── */
 const features = [
@@ -486,21 +437,27 @@ export const LandingPage: React.FC = () => {
         </div>
         <div className="boards-grid">
           <div className="board-card">
-            <BoardUno />
+            <div className="board-element-wrap board-element-uno">
+              <wokwi-arduino-uno />
+            </div>
             <div className="board-info">
               <span className="board-name">Arduino Uno</span>
               <span className="board-chip">ATmega328p · AVR8 · 16 MHz</span>
             </div>
           </div>
           <div className="board-card">
-            <BoardNano />
+            <div className="board-element-wrap board-element-nano">
+              <wokwi-arduino-nano />
+            </div>
             <div className="board-info">
               <span className="board-name">Arduino Nano</span>
               <span className="board-chip">ATmega328p · AVR8 · 16 MHz</span>
             </div>
           </div>
           <div className="board-card">
-            <BoardMega />
+            <div className="board-element-wrap board-element-mega">
+              <wokwi-arduino-mega />
+            </div>
             <div className="board-info">
               <span className="board-name">Arduino Mega</span>
               <span className="board-chip">ATmega2560 · AVR8 · 16 MHz</span>