From 61b08e7cf28bfcff7717d793a298fff122fcf42e Mon Sep 17 00:00:00 2001 From: David Montero Crespo Date: Mon, 23 Mar 2026 18:47:12 -0300 Subject: [PATCH] feat: add Velxio 2.0 release landing page with new features, boards showcase, and community CTAs --- frontend/public/sitemap.xml | 8 + frontend/src/App.tsx | 2 + frontend/src/pages/Velxio2Page.css | 267 +++++++++++++++ frontend/src/pages/Velxio2Page.tsx | 512 +++++++++++++++++++++++++++++ 4 files changed, 789 insertions(+) create mode 100644 frontend/src/pages/Velxio2Page.css create mode 100644 frontend/src/pages/Velxio2Page.tsx diff --git a/frontend/public/sitemap.xml b/frontend/public/sitemap.xml index be6f20e..8448192 100644 --- a/frontend/public/sitemap.xml +++ b/frontend/public/sitemap.xml @@ -187,6 +187,14 @@ 0.85 + + + https://velxio.dev/v2 + 2026-03-23 + monthly + 0.9 + + diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 298ff09..a27464f 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -19,6 +19,7 @@ import { Esp32S3SimulatorPage } from './pages/Esp32S3SimulatorPage'; import { Esp32C3SimulatorPage } from './pages/Esp32C3SimulatorPage'; import { RaspberryPiPicoSimulatorPage } from './pages/RaspberryPiPicoSimulatorPage'; import { RaspberryPiSimulatorPage } from './pages/RaspberryPiSimulatorPage'; +import { Velxio2Page } from './pages/Velxio2Page'; import { useAuthStore } from './store/useAuthStore'; import './App.css'; @@ -50,6 +51,7 @@ function App() { } /> } /> } /> + } /> {/* Canonical project URL by ID */} } /> {/* Legacy slug route — redirects to /project/:id */} diff --git a/frontend/src/pages/Velxio2Page.css b/frontend/src/pages/Velxio2Page.css new file mode 100644 index 0000000..fca0133 --- /dev/null +++ b/frontend/src/pages/Velxio2Page.css @@ -0,0 +1,267 @@ +/* ── Velxio2Page.css — Styles for the v2 release page ── */ + +/* ── Hero override ───────────────────────────────────── */ +.v2-hero { + max-width: 820px; + margin: 0 auto; + padding: 72px 2rem 56px; + text-align: center; +} + +.v2-hero h1 { + font-size: clamp(2rem, 5vw, 3rem); + font-weight: 700; + line-height: 1.12; + color: #ffffff; + margin: 0 0 1rem; + letter-spacing: -0.5px; +} + +.v2-hero h1 .accent { + color: #007acc; +} + +.v2-hero .subtitle { + font-size: 1.1rem; + color: #8b949e; + max-width: 640px; + margin: 0 auto 2rem; + line-height: 1.65; +} + +/* ── Version badge ───────────────────────────────────── */ +.v2-version-badge { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(0, 122, 204, 0.12); + color: #3b9ae8; + font-size: 0.82rem; + font-weight: 600; + padding: 6px 16px; + border-radius: 9999px; + border: 1px solid rgba(0, 122, 204, 0.25); + margin-bottom: 1.5rem; + letter-spacing: 0.02em; +} + +.v2-version-badge svg { + width: 16px; + height: 16px; +} + +/* ── Community buttons ───────────────────────────────── */ +.v2-community-row { + display: flex; + gap: 12px; + justify-content: center; + flex-wrap: wrap; + margin-top: 1.5rem; +} + +.v2-community-btn { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 9px 20px; + font-size: 0.85rem; + font-weight: 500; + border-radius: 9999px; + text-decoration: none; + transition: background 0.2s, transform 0.15s, border-color 0.2s; + cursor: pointer; + border: 1px solid transparent; +} + +.v2-star-btn { + background: #1c1c1e; + color: #f0c14b; + border-color: #333; +} + +.v2-star-btn:hover { + background: #2a2a2c; + border-color: #f0c14b; + transform: scale(1.03); +} + +.v2-star-btn svg { + fill: #f0c14b; + stroke: #f0c14b; +} + +.v2-discord-btn { + background: #1c1c1e; + color: #7289da; + border-color: #333; +} + +.v2-discord-btn:hover { + background: #2a2a2c; + border-color: #7289da; + transform: scale(1.03); +} + +.v2-discord-btn svg { + fill: #7289da; +} + +/* ── Architecture groups ─────────────────────────────── */ +.v2-arch-group { + margin-bottom: 2rem; +} + +.v2-arch-label { + display: flex; + align-items: center; + gap: 10px; + font-size: 0.85rem; + font-weight: 600; + color: #e6edf3; + padding-bottom: 8px; + margin-bottom: 12px; + border-bottom: 2px solid; + letter-spacing: -0.1px; +} + +.v2-arch-engine { + display: inline-block; + font-size: 0.7rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.06em; + background: rgba(255, 255, 255, 0.06); + color: #8b949e; + padding: 2px 8px; + border-radius: 4px; +} + +/* ── Board cards ─────────────────────────────────────── */ +.v2-boards-row { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.v2-board-card { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + background: #121214; + border: 1px solid #1c1c1e; + border-radius: 10px; + padding: 16px 20px; + min-width: 110px; + transition: border-color 0.2s, transform 0.15s; +} + +.v2-board-card:hover { + border-color: #333; + transform: translateY(-2px); +} + +.v2-board-card img { + height: 64px; + width: auto; + object-fit: contain; +} + +.v2-board-card span { + font-size: 0.78rem; + font-weight: 500; + color: #8b949e; + text-align: center; + white-space: nowrap; +} + +/* ── Changelog ───────────────────────────────────────── */ +.v2-changelog { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 16px; +} + +.v2-change-block { + background: #121214; + border: 1px solid #1c1c1e; + border-radius: 10px; + padding: 1.25rem 1.35rem; +} + +.v2-change-header { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 0.75rem; +} + +.v2-change-header h3 { + font-size: 0.92rem; + font-weight: 600; + margin: 0; + color: inherit; +} + +.v2-change-header svg { + flex-shrink: 0; +} + +.v2-change-list { + list-style: none; + margin: 0; + padding: 0; +} + +.v2-change-list li { + position: relative; + font-size: 0.82rem; + color: #8b949e; + line-height: 1.6; + padding-left: 14px; + margin-bottom: 4px; +} + +.v2-change-list li::before { + content: ''; + position: absolute; + left: 0; + top: 8px; + width: 4px; + height: 4px; + border-radius: 50%; + background: #484848; +} + +/* ── Bottom community ────────────────────────────────── */ +.v2-bottom-community { + display: flex; + gap: 12px; + justify-content: center; + flex-wrap: wrap; + margin-top: 1.5rem; +} + +/* ── Responsive ──────────────────────────────────────── */ +@media (max-width: 600px) { + .v2-hero { + padding: 48px 1.25rem 40px; + } + + .v2-changelog { + grid-template-columns: 1fr; + } + + .v2-boards-row { + justify-content: center; + } + + .v2-board-card { + min-width: 90px; + padding: 12px 14px; + } + + .v2-board-card img { + height: 48px; + } +} diff --git a/frontend/src/pages/Velxio2Page.tsx b/frontend/src/pages/Velxio2Page.tsx new file mode 100644 index 0000000..24dfb5f --- /dev/null +++ b/frontend/src/pages/Velxio2Page.tsx @@ -0,0 +1,512 @@ +/** + * /v2 — Velxio 2.0 Release Landing Page + * Showcases all new features, supported boards, and community CTAs + */ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import { AppHeader } from '../components/layout/AppHeader'; +import { useSEO } from '../utils/useSEO'; +import raspberryPi3Svg from '../assets/Raspberry_Pi_3_illustration.svg'; +import './SEOPage.css'; +import './Velxio2Page.css'; + +const GITHUB_URL = 'https://github.com/davidmonterocrespo24/velxio'; +const DISCORD_URL = 'https://discord.gg/rCScB9cG'; + +/* ── SVG Icons (no emojis) ─────────────────────────────── */ +const IcoRocket = () => ( + + + + + + +); + +const IcoChip = () => ( + + + + + +); + +const IcoCpu = () => ( + + + + + +); + +const IcoSensor = () => ( + + + + +); + +const IcoTerminal = () => ( + + + + +); + +const IcoTestTube = () => ( + + + + + +); + +const IcoPaintbrush = () => ( + + + + +); + +const IcoBook = () => ( + + + + +); + +const IcoWrench = () => ( + + + +); + +const IcoGitHub = () => ( + + + +); + +const IcoDiscord = () => ( + + + +); + +const IcoStar = () => ( + + + +); + +const IcoRefresh = () => ( + + + + + + +); + +const JSON_LD: object[] = [ + { + '@context': 'https://schema.org', + '@type': 'SoftwareApplication', + name: 'Velxio 2.0 — Multi-Board Embedded Systems Simulator', + applicationCategory: 'DeveloperApplication', + operatingSystem: 'Any (browser-based)', + softwareVersion: '2.0.0', + description: + 'Velxio 2.0 — a free, open-source multi-board embedded systems simulator. 19 boards, 5 CPU architectures, QEMU-based ESP32 emulation, sensor simulation, 68+ examples. Runs in your browser.', + url: 'https://velxio.dev/v2', + offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' }, + author: { '@type': 'Person', name: 'David Montero Crespo' }, + license: 'https://www.gnu.org/licenses/agpl-3.0.html', + }, + { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' }, + { '@type': 'ListItem', position: 2, name: 'Velxio 2.0', item: 'https://velxio.dev/v2' }, + ], + }, +]; + +const CHANGE_SECTIONS = [ + { + icon: , + title: 'Multi-Board Support', + color: '#007acc', + items: [ + 'Raspberry Pi 3B — full Linux (ARM Cortex-A53 via QEMU raspi3b)', + 'ESP32 / ESP32-S3 / ESP32-CAM — Xtensa LX6/LX7 via QEMU', + 'ESP32-C3 / CH32V003 — RISC-V RV32IMC, browser-native', + 'RP2040 — Raspberry Pi Pico / Pico W (ARM Cortex-M0+)', + 'ATtiny85, ATmega2560, Leonardo, Pro Mini — AVR8 via avr8js', + 'Multi-board canvas — mix architectures on the same simulation', + ], + }, + { + icon: , + title: 'Advanced Emulation', + color: '#c8701a', + items: [ + 'ESP32 emulation via QEMU (Xtensa) with GPIO, ADC, timers', + 'SYSTIMER, timer group, and SPI flash/EXTMEM stubs', + 'ROM function emulation for ESP32 boot sequence', + 'Enhanced RP2040 dual-core ARM simulation', + 'Virtual File System for Raspberry Pi 3 (full Linux OS)', + 'Real arduino-cli compilation producing .hex / .bin / .uf2 files', + ], + }, + { + icon: , + title: 'Sensor Simulation', + color: '#4a9e6b', + items: [ + 'DHT22 — accurate timing and synchronous protocol handling', + 'HC-SR04 — ultrasonic distance measurement with trigger/echo', + 'Servo motor — configurable sweep with PWM emulation', + 'Potentiometer and analog sensor improvements', + 'Generic sensor registration system for extensibility', + 'Improved timing accuracy and component interactions', + ], + }, + { + icon: , + title: 'Testing', + color: '#a8304d', + items: [ + 'ESP32 test modules and integration test suites', + 'Multi-board integration tests across architectures', + 'Arduino serial communication integration testing', + ], + }, + { + icon: , + title: 'UI/UX Improvements', + color: '#8957e5', + items: [ + 'Enhanced simulator canvas — wire handling and segment dragging', + 'Improved z-index layering and component rendering', + 'Oscilloscope and multi-board picker enhancements', + 'Sensor Control Panel for interactive sensor adjustment', + 'New visual components for all supported board families', + 'Mobile-first responsive design with code/circuit tab switcher', + ], + }, + { + icon: , + title: 'Documentation', + color: '#1a7f37', + items: [ + 'Full documentation site with 10+ pages', + 'Board gallery with all 19 supported boards', + 'ESP32 emulation guide (Xtensa + RISC-V)', + 'RP2040 and Raspberry Pi 3 documentation', + 'CodeBlock component with syntax highlighting', + ], + }, + { + icon: , + title: 'Refactoring & Cleanup', + color: '#6e7681', + items: [ + 'Codebase refactors for readability and maintainability', + 'Removed deprecated scripts and unused code', + 'Simplified logging and internal data structures', + ], + }, + { + icon: , + title: 'Tooling & Integrations', + color: '#b08800', + items: [ + 'Discord notification workflow for issues', + 'Wokwi elements integrated into Landing Page visuals', + 'Scripts for automated example generation', + 'Docker standalone image published to GHCR + Docker Hub', + ], + }, +]; + +export const Velxio2Page: React.FC = () => { + useSEO({ + title: 'Velxio 2.0 — Multi-Board Embedded Simulator | ESP32, Raspberry Pi, Arduino, RISC-V', + description: + 'Velxio 2.0 is here. 19 boards, 5 CPU architectures, QEMU-based ESP32 emulation, realistic sensor simulation, 68+ examples. A free, open-source multi-platform embedded systems simulator.', + url: 'https://velxio.dev/v2', + jsonLd: JSON_LD, + }); + + return ( +
+ +
+ {/* ── Hero ── */} +
+
+ Version 2.0 +
+

+ Velxio 2.0
+ Multi-Platform Embedded Simulator +

+

+ 19 boards across 5 CPU architectures — AVR8, RP2040, RISC-V, Xtensa, and ARM Linux. + QEMU-based ESP32 emulation, realistic sensor simulation, 68+ ready-to-run examples. + Free, open-source, runs in your browser. +

+
+ + + Try Velxio 2.0 + + + View on GitHub + +
+ + {/* Community CTAs */} + +
+ + {/* ── Boards showcase ── */} +
+

19 boards. 5 architectures. One tool.

+

+ From 8-bit AVR to quad-core ARM Linux — Velxio 2.0 emulates every major embedded platform in a single browser tab. +

+ + {/* AVR8 */} +
+
+ avr8js + AVR8 -- ATmega -- 16 MHz +
+
+
+ Arduino Uno + Arduino Uno +
+
+ Arduino Nano + Arduino Nano +
+
+ Arduino Mega 2560 + Mega 2560 +
+
+
+ + {/* RP2040 */} +
+
+ rp2040js + RP2040 -- ARM Cortex-M0+ -- 133 MHz +
+
+
+ Raspberry Pi Pico + Pi Pico +
+
+ Raspberry Pi Pico W + Pi Pico W +
+
+
+ + {/* RISC-V */} +
+
+ Browser-native + RISC-V -- RV32IMC -- 160 MHz +
+
+
+ ESP32-C3 + ESP32-C3 +
+
+ XIAO ESP32-C3 + XIAO C3 +
+
+ ESP32-C3 SuperMini + C3 SuperMini +
+
+
+ + {/* Xtensa QEMU */} +
+
+ QEMU Xtensa + Xtensa LX6/LX7 -- 240 MHz +
+
+
+ ESP32 DevKit + ESP32 DevKit +
+
+ ESP32-S3 + ESP32-S3 +
+
+ ESP32-CAM + ESP32-CAM +
+
+ XIAO ESP32-S3 + XIAO S3 +
+
+ Nano ESP32 + Nano ESP32 +
+
+
+ + {/* ARM Linux */} +
+
+ QEMU ARM + ARM Cortex-A53 -- Linux -- 1.2 GHz +
+
+
+ Raspberry Pi 3B + Raspberry Pi 3B +
+
+
+
+ + {/* ── Changelog ── */} +
+

What's new in 2.0

+

+ A complete transformation into a multi-platform embedded systems simulator — more boards, more accurate emulation, better developer experience. +

+ +
+ {CHANGE_SECTIONS.map((section) => ( +
+
+ {section.icon} +

{section.title}

+
+
    + {section.items.map((item) => ( +
  • {item}
    • + ))} +
+
+ ))} +
+
+ + {/* ── Examples ── */} +
+

68+ ready-to-run examples

+

+ From basic LED blink to multi-board communication — examples for every platform and skill level. +

+
+
+

Arduino (17 examples)

+

Blink, traffic light, button, fade, RGB LED, Simon Says game, TFT display, LCD, I2C scanner, SPI loopback, and more.

+
+
+

Raspberry Pi Pico (18 examples)

+

Blink, serial, I2C (scanner, RTC, EEPROM), SPI, ADC read, DHT22, HC-SR04, servo, joystick, NTC sensor.

+
+
+

ESP32 (9 examples)

+

Blink, serial echo, 7-segment, DHT22, HC-SR04, MPU6050 IMU, PIR motion, servo, joystick.

+
+
+

ESP32-C3 RISC-V (9 examples)

+

Blink, serial, RGB LED, button + LED, serial echo, DHT22, HC-SR04, PIR, servo.

+
+
+

Arduino Mega (5 examples)

+

Blink, LED chase, serial echo, serial control, 7-segment display.

+
+
+

Arduino Nano (4 examples)

+

Blink, button LED, fade, serial echo. Plus multi-board Pi-to-Arduino control.

+
+
+
+ Browse All Examples +
+
+ + {/* ── Outcome ── */} +
+

The outcome

+

+ Velxio 2.0 transforms the project into a complete, scalable multi-platform embedded systems simulator. +

+
+
+

More realistic emulation

+

QEMU-based Xtensa and ARM emulation. Browser-native RISC-V. Cycle-accurate AVR8 via avr8js. Real firmware execution, not approximations.

+
+
+

Broader hardware support

+

19 boards across 5 CPU architectures. From 8-bit ATtiny85 to quad-core Raspberry Pi 3B running full Linux.

+
+
+

Better developer experience

+

Monaco editor, multi-file workspace, library manager, oscilloscope, sensor control panel, mobile-responsive design.

+
+
+
+ + {/* ── Bottom CTA ── */} +
+

Try Velxio 2.0 now

+

Open the editor and start simulating — 19 boards, 68+ examples, zero setup.

+ Launch Simulator + + + +
+ Home + Examples + Documentation + Arduino Simulator + ESP32 Simulator + RP2040 Simulator + Pi 3 Simulator +
+
+
+
+ ); +};