diff --git a/README.md b/README.md index c52499d..93cd76d 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ A fully local, open-source multi-board emulator. Write Arduino C++ or Python, compile it, and simulate it with real CPU emulation and 48+ interactive electronic components — all running in your browser. +**19 boards · 5 CPU architectures**: AVR8 (ATmega / ATtiny), ARM Cortex-M0+ (RP2040), RISC-V RV32IMC/EC (ESP32-C3 / CH32V003), Xtensa LX6/LX7 (ESP32 / ESP32-S3 via QEMU), and ARM Cortex-A53 (Raspberry Pi 3 Linux via QEMU). + [![Live Demo](https://img.shields.io/badge/Live%20Demo-velxio.dev-007acc?style=for-the-badge)](https://velxio.dev) [![Docker Image](https://img.shields.io/badge/Docker-ghcr.io%2Fdavidmonterocrespo24%2Fvelxio-2496ED?style=for-the-badge&logo=docker&logoColor=white)](https://github.com/davidmonterocrespo24/velxio/pkgs/container/velxio) [![GitHub stars](https://img.shields.io/github/stars/davidmonterocrespo24/velxio?style=for-the-badge)](https://github.com/davidmonterocrespo24/velxio/stargazers) @@ -83,26 +85,31 @@ Component Picker showing 48 available components with visual previews, search, a Seeed XIAO ESP32-S3
Seeed XIAO ESP32-S3 Arduino Nano ESP32
Arduino Nano ESP32 Raspberry Pi 3B
Raspberry Pi 3B - Arduino Uno / Nano / Mega
(ATmega328p / 2560) + Arduino Uno · Nano · Mega 2560
ATtiny85 · Leonardo · Pro Mini
(AVR8 / ATmega) | Board | CPU | Engine | Language | | ----- | --- | ------ | -------- | -| Arduino Uno | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) | -| Arduino Nano | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) | -| Arduino Mega | ATmega2560 @ 16 MHz | avr8js (browser) | C++ (Arduino) | -| Raspberry Pi Pico | RP2040 @ 125 MHz | rp2040js (browser) | C++ (Arduino) | -| Raspberry Pi Pico W | RP2040 @ 125 MHz | rp2040js (browser) | C++ (Arduino) | -| ESP32 DevKit C | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | -| ESP32-S3 | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | -| ESP32-CAM | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | -| ESP32-C3 | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | -| Seeed XIAO ESP32-C3 | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | -| ESP32-C3 SuperMini | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | -| Seeed XIAO ESP32-S3 | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | -| Arduino Nano ESP32 | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | -| Raspberry Pi 3B | ARM Cortex-A53 @ 1.2 GHz | QEMU raspi3b (backend) | Python | +| **Arduino Uno** | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) | +| **Arduino Nano** | ATmega328p @ 16 MHz | avr8js (browser) | C++ (Arduino) | +| **Arduino Mega 2560** | ATmega2560 @ 16 MHz | avr8js (browser) | C++ (Arduino) | +| **ATtiny85** | ATtiny85 @ 8 MHz (int) / 16 MHz (ext) | avr8js (browser) | C++ (Arduino) | +| **Arduino Leonardo** | ATmega32u4 @ 16 MHz | avr8js (browser) | C++ (Arduino) | +| **Arduino Pro Mini** | ATmega328p @ 8/16 MHz | avr8js (browser) | C++ (Arduino) | +| **Raspberry Pi Pico** | RP2040 @ 133 MHz | rp2040js (browser) | C++ (Arduino) | +| **Raspberry Pi Pico W** | RP2040 @ 133 MHz | rp2040js (browser) | C++ (Arduino) | +| **ESP32 DevKit V1** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | +| **ESP32 DevKit C V4** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | +| **ESP32-S3** | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | +| **ESP32-CAM** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | +| **Seeed XIAO ESP32-S3** | Xtensa LX7 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | +| **Arduino Nano ESP32** | Xtensa LX6 @ 240 MHz | QEMU lcgamboa (backend) | C++ (Arduino) | +| **ESP32-C3 DevKit** | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | +| **Seeed XIAO ESP32-C3** | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | +| **ESP32-C3 SuperMini** | RISC-V RV32IMC @ 160 MHz | RiscVCore.ts (browser) | C++ (Arduino) | +| **CH32V003** | RISC-V RV32EC @ 48 MHz | RiscVCore.ts (browser) | C++ (Arduino) | +| **Raspberry Pi 3B** | ARM Cortex-A53 @ 1.2 GHz | QEMU raspi3b (backend) | Python | --- @@ -118,20 +125,21 @@ Component Picker showing 48 available components with visual previews, search, a ### Multi-Board Simulation -#### AVR8 (Arduino Uno / Nano / Mega) +#### AVR8 (Arduino Uno / Nano / Mega / ATtiny85 / Leonardo / Pro Mini) -- **Real ATmega328p / ATmega2560 emulation** at 16 MHz via avr8js -- **Full GPIO** — PORTB (pins 8–13), PORTC (A0–A5), PORTD (pins 0–7) +- **Real ATmega328p / ATmega2560 / ATmega32u4 / ATtiny85 emulation** at native clock speed via avr8js +- **Full GPIO** — PORTB, PORTC, PORTD (Uno/Nano/Mega); all ATtiny85 ports (PB0–PB5) - **Timer0/Timer1/Timer2** — `millis()`, `delay()`, PWM via `analogWrite()` - **USART** — full transmit and receive, auto baud-rate detection -- **ADC** — `analogRead()` on A0–A5, voltage injection from potentiometers on canvas +- **ADC** — `analogRead()`, voltage injection from potentiometers on canvas - **SPI** — hardware SPI peripheral (ILI9341, SD card, etc.) - **I2C (TWI)** — hardware I2C with virtual device bus +- **ATtiny85** — all 6 I/O pins, USI (Wire), Timer0/Timer1, 10-bit ADC; uses `AttinyCore` - ~60 FPS simulation loop via `requestAnimationFrame` #### RP2040 (Raspberry Pi Pico / Pico W) -- **Real RP2040 emulation** at 125 MHz via rp2040js — ARM Cortex-M0+ +- **Real RP2040 emulation** at 133 MHz via rp2040js — ARM Cortex-M0+ - **All 30 GPIO pins** — input/output, event listeners, pin state injection - **UART0 + UART1** — serial output in Serial Monitor; Serial input from UI - **ADC** — 12-bit on GPIO 26–29 (A0–A3) + internal temperature sensor (ch4) @@ -159,11 +167,12 @@ See [docs/RP2040_EMULATION.md](docs/RP2040_EMULATION.md) for full technical deta See [docs/ESP32_EMULATION.md](docs/ESP32_EMULATION.md) for setup and full technical details. -#### ESP32-C3 / XIAO-C3 (RISC-V, in-browser) +#### ESP32-C3 / XIAO-C3 / SuperMini / CH32V003 (RISC-V, in-browser) - **RV32IMC emulation** in TypeScript — no backend, no QEMU, no WebSocket -- **GPIO 0–21** via W1TS/W1TC MMIO registers +- **GPIO 0–21** via W1TS/W1TC MMIO registers (ESP32-C3); PB0–PB5 (CH32V003) - **UART0** serial output in Serial Monitor +- **CH32V003** — RV32EC core at 48 MHz, 16 KB flash, DIP-8 / SOP package — ultra-compact - **Instant startup** — zero latency, works offline - **CI-testable** — same TypeScript runs in Vitest diff --git a/frontend/index.html b/frontend/index.html index 0cf8512..780f896 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -8,9 +8,9 @@ PRIMARY SEO Replace https://velxio.dev with your real domain ═══════════════════════════════════════════════ --> - Velxio — Free Local Arduino Emulator | AVR8 · RP2040 · 48+ Components - - + Velxio — Free Multi-Board Emulator | Arduino · ESP32 · RP2040 · RISC-V · Raspberry Pi + + @@ -36,8 +36,8 @@ ═══════════════════════════════════════════════ --> - - + + @@ -52,8 +52,8 @@ - - + + @@ -119,8 +119,8 @@ "@type": "SoftwareApplication", "@id": "https://velxio.dev/#app", "name": "Velxio", - "alternateName": ["Velxio Arduino Emulator", "Velxio AVR Simulator"], - "description": "Free, open-source Arduino emulator running entirely in the browser. Features real ATmega328p (AVR8) emulation at 16 MHz, RP2040 emulation, 48+ interactive electronic components, Monaco Editor, Serial Monitor with baud-rate detection, arduino-cli compilation backend, and Library Manager.", + "alternateName": ["Velxio Arduino Emulator", "Velxio AVR Simulator", "Velxio ESP32 Emulator", "Velxio Multi-Board Simulator"], + "description": "Free, open-source multi-board emulator running entirely in the browser. 19 boards across 5 CPU architectures: ATmega328p/2560/ATtiny85 (AVR8 via avr8js), RP2040 ARM Cortex-M0+ (rp2040js), ESP32-C3/CH32V003 RISC-V RV32IMC (browser), ESP32/ESP32-S3 Xtensa LX6/LX7 (QEMU), and Raspberry Pi 3B ARM Cortex-A53 (QEMU Linux). Features 48+ interactive electronic components, Monaco Editor, Serial Monitor, arduino-cli compilation, and Library Manager.", "url": "https://velxio.dev/", "applicationCategory": "DeveloperApplication", "applicationSubCategory": "Electronics Simulator", @@ -135,17 +135,21 @@ "availability": "https://schema.org/InStock" }, "featureList": [ - "Real ATmega328p AVR8 emulation at 16 MHz", - "RP2040 (Raspberry Pi Pico) emulation", - "48+ electronic web components", - "Monaco Code Editor with C++ syntax highlighting", - "arduino-cli compilation backend", - "Serial Monitor with auto baud-rate detection", - "Library Manager for Arduino libraries", - "Multi-file workspace", - "Wire system with orthogonal routing", + "Real AVR8 emulation: Arduino Uno (ATmega328p), Nano, Mega 2560 (ATmega2560), ATtiny85, Leonardo (ATmega32u4), Pro Mini at 16 MHz", + "RP2040 emulation: Raspberry Pi Pico and Pico W (ARM Cortex-M0+ at 133 MHz via rp2040js)", + "RISC-V emulation: ESP32-C3 DevKit, XIAO ESP32-C3, ESP32-C3 SuperMini, CH32V003 (RV32IMC/RV32EC browser-native)", + "ESP32 / ESP32-S3 / ESP32-CAM / Nano ESP32 emulation (Xtensa LX6/LX7 via QEMU)", + "Raspberry Pi 3B emulation: full ARM Cortex-A53 Linux (Raspberry Pi OS via QEMU raspi3b)", + "48+ electronic web components: LEDs, resistors, servos, sensors, TFT displays, NeoPixel, LCD", + "Monaco Code Editor with C++ / Python syntax highlighting and autocomplete", + "arduino-cli compilation backend — produces real .hex / .bin / .uf2 files", + "Serial Monitor with auto baud-rate detection and send", + "Library Manager for the full Arduino library index", + "Multi-file workspace (.ino, .h, .cpp, .py)", + "Wire system with orthogonal routing and 8 signal-type colors", "ILI9341 TFT display simulation", - "I2C, SPI, USART, ADC, PWM support" + "I2C, SPI, USART, ADC, PWM support across all emulated boards", + "Multi-board canvas: mix Arduino + ESP32 + Raspberry Pi on the same simulation" ], "screenshot": "https://velxio.dev/og-image.png", "downloadUrl": "https://hub.docker.com/r/davidmonterocrespo24/velxio", @@ -163,7 +167,7 @@ "name": "David Montero Crespo", "url": "https://github.com/davidmonterocrespo24" }, - "keywords": "arduino emulator, avr8 simulator, rp2040 emulator, arduino online ide, electronics simulator, wokwi alternative", + "keywords": "arduino emulator, arduino simulator, avr8 simulator, atmega328p emulator, atmega2560, attiny85, esp32 emulator, esp32 simulator, esp32-c3 simulator, esp32-s3 emulator, rp2040 emulator, raspberry pi pico emulator, raspberry pi 3 emulator, risc-v simulator, wokwi alternative", "inLanguage": "en-US" }, { @@ -188,7 +192,7 @@ "name": "Is Velxio free?", "acceptedAnswer": { "@type": "Answer", - "text": "Yes, Velxio is completely free and open source under the MIT License." + "text": "Yes. Velxio is completely free and open-source under the GNU AGPLv3 license. No account required, no cloud subscription. Run it at velxio.dev or self-host with one Docker command." } }, { @@ -204,7 +208,7 @@ "name": "What boards does Velxio support?", "acceptedAnswer": { "@type": "Answer", - "text": "Velxio supports Arduino Uno (ATmega328p) with full AVR8 emulation and Raspberry Pi Pico (RP2040) emulation. More boards are planned." + "text": "Velxio supports 19 boards across 5 CPU architectures: (1) AVR8 — Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560 (ATmega2560), ATtiny85, Arduino Leonardo (ATmega32u4), Arduino Pro Mini; (2) RP2040 — Raspberry Pi Pico and Raspberry Pi Pico W; (3) RISC-V — ESP32-C3 DevKit, Seeed XIAO ESP32-C3, ESP32-C3 SuperMini, CH32V003 (RV32EC); (4) Xtensa (QEMU) — ESP32 DevKit V1/C V4, ESP32-S3, ESP32-CAM, Seeed XIAO ESP32-S3, Arduino Nano ESP32; (5) ARM Cortex-A53 (QEMU Linux) — Raspberry Pi 3B running Raspberry Pi OS." } }, { @@ -235,25 +239,41 @@ diff --git a/frontend/public/sitemap.xml b/frontend/public/sitemap.xml index d49985f..e899f2b 100644 --- a/frontend/public/sitemap.xml +++ b/frontend/public/sitemap.xml @@ -95,11 +95,40 @@ https://velxio.dev/examples - 2026-03-15 + 2026-03-23 monthly 0.8 + + + https://velxio.dev/arduino-simulator + 2026-03-23 + monthly + 0.9 + + + + https://velxio.dev/arduino-emulator + 2026-03-23 + monthly + 0.9 + + + + https://velxio.dev/atmega328p-simulator + 2026-03-23 + monthly + 0.85 + + + + https://velxio.dev/arduino-mega-simulator + 2026-03-23 + monthly + 0.85 + + https://velxio.dev/login 2026-03-06 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index c5d65aa..b6b7248 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -10,6 +10,10 @@ import { UserProfilePage } from './pages/UserProfilePage'; import { ProjectPage } from './pages/ProjectPage'; import { ProjectByIdPage } from './pages/ProjectByIdPage'; import { AdminPage } from './pages/AdminPage'; +import { ArduinoSimulatorPage } from './pages/ArduinoSimulatorPage'; +import { ArduinoEmulatorPage } from './pages/ArduinoEmulatorPage'; +import { AtmegaSimulatorPage } from './pages/AtmegaSimulatorPage'; +import { ArduinoMegaSimulatorPage } from './pages/ArduinoMegaSimulatorPage'; import { useAuthStore } from './store/useAuthStore'; import './App.css'; @@ -31,6 +35,11 @@ function App() { } /> } /> } /> + {/* SEO landing pages — keyword-targeted */} + } /> + } /> + } /> + } /> {/* Canonical project URL by ID */} } /> {/* Legacy slug route — redirects to /project/:id */} diff --git a/frontend/src/pages/ArduinoEmulatorPage.tsx b/frontend/src/pages/ArduinoEmulatorPage.tsx new file mode 100644 index 0000000..39f891c --- /dev/null +++ b/frontend/src/pages/ArduinoEmulatorPage.tsx @@ -0,0 +1,189 @@ +/** + * /arduino-emulator — SEO landing page + * Target keywords: "arduino emulator" + */ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import { AppHeader } from '../components/layout/AppHeader'; +import { useSEO } from '../utils/useSEO'; +import './SEOPage.css'; + +const FAQ_ITEMS = [ + { + q: 'What is an Arduino emulator?', + a: 'An Arduino emulator reproduces the behavior of a physical Arduino microcontroller in software — CPU instruction execution, peripheral registers (GPIO, USART, ADC, timers, PWM), and interrupts — with no hardware required.', + }, + { + q: 'How accurate is Velxio\'s Arduino emulation?', + a: 'Velxio uses avr8js, which provides cycle-accurate AVR8 instruction emulation. Every AVR opcode is faithfully emulated at 16 MHz, making it reliable for developing and debugging real firmware before flashing to hardware.', + }, + { + q: 'Which Arduino boards can Velxio emulate?', + a: 'Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560 (ATmega2560), ATtiny85 (AVR8), Arduino Leonardo (ATmega32u4), Arduino Pro Mini, Raspberry Pi Pico and Pico W (RP2040), and multiple ESP32/RISC-V boards. 19 boards across 5 CPU architectures.', + }, + { + q: 'What peripherals are emulated?', + a: 'GPIO ports (PORTB, PORTC, PORTD), hardware timers (Timer0, Timer1, Timer2), 8/16-bit PWM, USART serial, 10-bit ADC (analog inputs), SPI, and I2C. All standard Arduino library functions work correctly.', + }, + { + q: 'How is Velxio different from Wokwi?', + a: 'Velxio is fully self-hosted and open-source under GNU AGPLv3. It uses the same avr8js emulation library as Wokwi but runs entirely on your own machine — no cloud dependency, no registration, no subscription.', + }, +]; + +const JSON_LD: object[] = [ + { + '@context': 'https://schema.org', + '@type': 'SoftwareApplication', + name: 'Velxio Arduino Emulator', + applicationCategory: 'DeveloperApplication', + operatingSystem: 'Any (browser-based)', + description: + 'Free, open-source Arduino emulator with cycle-accurate AVR8 emulation at 16 MHz. Emulate Arduino Uno, Nano, Mega and Raspberry Pi Pico in your browser — no cloud, no install.', + url: 'https://velxio.dev/arduino-emulator', + 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': 'FAQPage', + mainEntity: FAQ_ITEMS.map(({ q, a }) => ({ + '@type': 'Question', + name: q, + acceptedAnswer: { '@type': 'Answer', text: a }, + })), + }, + { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' }, + { '@type': 'ListItem', position: 2, name: 'Arduino Emulator', item: 'https://velxio.dev/arduino-emulator' }, + ], + }, +]; + +export const ArduinoEmulatorPage: React.FC = () => { + useSEO({ + title: 'Arduino Emulator — Real AVR8 & RP2040 Emulation, Free | Velxio', + description: + 'Free, open-source Arduino emulator with cycle-accurate AVR8 emulation at 16 MHz. Emulate Arduino Uno, Nano, Mega and Raspberry Pi Pico in your browser — no cloud, no install.', + url: 'https://velxio.dev/arduino-emulator', + jsonLd: JSON_LD, + }); + + return ( +
+ +
+ {/* Hero */} +
+

+ Arduino Emulator
+ Real AVR8 & RP2040 Emulation, Free +

+

+ Velxio is a cycle-accurate Arduino emulator running entirely in your browser. Every AVR opcode is faithfully + executed at 16 MHz — the same silicon behavior as real hardware, without buying hardware. +

+
+ Open Emulator → + Emulation Details +
+

Free & open-source · Built on avr8js & rp2040js · No signup required

+
+ + {/* Emulation accuracy */} +
+

Emulation accuracy

+

+ Velxio uses avr8js for AVR8 and rp2040js for RP2040 — open-source libraries developed by the Wokwi team that provide genuine hardware fidelity. +

+
+
+

AVR8 Instruction Set

+

All 135 AVR instructions emulated including MUL, MULSU, FMUL, LPM, SPM, and all branch/skip instructions. 16 MHz clock.

+
+
+

Hardware Timers

+

Timer0, Timer1, Timer2 with prescaler support, overflow interrupts, and Output Compare — enabling delay(), millis(), and PWM.

+
+
+

USART Serial

+

Full USART emulation with configurable baud rate and TX/RX interrupts. Serial.print() works exactly as on real Arduino hardware.

+
+
+

10-bit ADC

+

Analog-to-digital converter emulation with analog reference support. analogRead() returns accurate values from simulated sensors.

+
+
+

RP2040 Dual-Core ARM

+

Cortex-M0+ emulation via rp2040js. Runs Arduino-pico and PlatformIO sketches for Raspberry Pi Pico and Pico W.

+
+
+

RISC-V (ESP32-C3)

+

Browser-native RV32IMC emulation for ESP32-C3 — no backend server required, compiled to WebAssembly, runs at 160 MHz.

+
+
+
+ + {/* Supported boards */} +
+

Supported boards

+

19 boards across 5 CPU architectures — AVR8, ARM Cortex-M0+, RISC-V, Xtensa LX6/LX7, and ARM Cortex-A53.

+
+
+

AVR8 — avr8js

+

Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560 (ATmega2560), ATtiny85, Arduino Leonardo (ATmega32u4), Arduino Pro Mini.

+
+
+

RP2040 — rp2040js

+

Raspberry Pi Pico, Raspberry Pi Pico W — dual ARM Cortex-M0+ at 133 MHz.

+
+
+

RISC-V — Browser

+

ESP32-C3 DevKit, XIAO ESP32-C3, ESP32-C3 SuperMini, CH32V003 — RV32IMC at 160 MHz.

+
+
+

Xtensa — QEMU

+

ESP32 DevKit V1/C V4, ESP32-S3, ESP32-CAM, Seeed XIAO ESP32-S3, Arduino Nano ESP32 — Xtensa LX6/LX7 at 240 MHz.

+
+
+

ARM Cortex-A53 — QEMU

+

Raspberry Pi 3B — quad-core 1.2 GHz, full Linux, Python 3. Run real OS-level programs in the browser.

+
+
+
+ + {/* FAQ */} +
+

Frequently Asked Questions

+
+ {FAQ_ITEMS.map(({ q, a }) => ( + +
{q}
+
{a}
+ + ))} +
+
+ + {/* Bottom CTA */} +
+

Start emulating Arduino today

+

Open the editor and execute your firmware against a real emulated CPU — no hardware purchase, no cloud, no limits.

+ Launch Emulator → +
+ Arduino Simulator + ATmega328P Simulator + Mega 2560 Simulator + Emulator Architecture + Example Projects +
+
+
+
+ ); +}; diff --git a/frontend/src/pages/ArduinoMegaSimulatorPage.tsx b/frontend/src/pages/ArduinoMegaSimulatorPage.tsx new file mode 100644 index 0000000..34e373b --- /dev/null +++ b/frontend/src/pages/ArduinoMegaSimulatorPage.tsx @@ -0,0 +1,186 @@ +/** + * /arduino-mega-simulator — SEO landing page + * Target keywords: "arduino mega", "mega 2560", "arduino mega 2560" + */ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import { AppHeader } from '../components/layout/AppHeader'; +import { useSEO } from '../utils/useSEO'; +import './SEOPage.css'; + +const FAQ_ITEMS = [ + { + q: 'What is the Arduino Mega 2560?', + a: 'The Arduino Mega 2560 is a microcontroller board based on the ATmega2560. It offers 256 KB flash memory, 8 KB SRAM, 54 digital I/O pins (15 PWM), 16 analog inputs, and 4 hardware USART channels — making it the go-to board for large, complex Arduino projects.', + }, + { + q: 'Can I simulate Arduino Mega 2560 code in my browser?', + a: 'Yes. Velxio provides full ATmega2560 AVR8 emulation. Select "Arduino Mega 2560" in the board picker, write your sketch, compile, and simulate — with all 54 digital pins and 16 analog inputs available.', + }, + { + q: 'Is the Arduino Mega 2560 emulation accurate?', + a: 'Velxio uses avr8js for cycle-accurate AVR8 instruction emulation. The ATmega2560 shares the same AVR8 core as the ATmega328P but with extended memory, more ports (PORTA–PORTL), and additional timers (Timer3, Timer4, Timer5) — all emulated.', + }, + { + q: 'What additional features does the Mega have over Arduino Uno?', + a: 'Arduino Mega 2560 adds: 8× more flash (256 KB vs 32 KB), 4× more SRAM (8 KB vs 2 KB), 40 extra digital pins, 10 extra analog inputs, 3 extra hardware serial ports (Serial1, Serial2, Serial3), and 3 extra 16-bit timers (Timer3, Timer4, Timer5).', + }, + { + q: 'Does the Mega simulator support multiple Serial ports?', + a: 'Yes. Serial (USART0), Serial1 (USART1), Serial2 (USART2), and Serial3 (USART3) are all emulated. Each appears in the Serial Monitor tab so you can monitor multi-serial communication projects.', + }, +]; + +const JSON_LD: object[] = [ + { + '@context': 'https://schema.org', + '@type': 'SoftwareApplication', + name: 'Arduino Mega 2560 Simulator — Velxio', + applicationCategory: 'DeveloperApplication', + operatingSystem: 'Any (browser-based)', + description: + 'Free online Arduino Mega 2560 simulator. Emulate ATmega2560 with 256 KB flash, 54 digital pins, 16 analog inputs, and 4 serial ports — full AVR8 emulation in your browser.', + url: 'https://velxio.dev/arduino-mega-simulator', + 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': 'FAQPage', + mainEntity: FAQ_ITEMS.map(({ q, a }) => ({ + '@type': 'Question', + name: q, + acceptedAnswer: { '@type': 'Answer', text: a }, + })), + }, + { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' }, + { '@type': 'ListItem', position: 2, name: 'Arduino Mega 2560 Simulator', item: 'https://velxio.dev/arduino-mega-simulator' }, + ], + }, +]; + +export const ArduinoMegaSimulatorPage: React.FC = () => { + useSEO({ + title: 'Arduino Mega 2560 Simulator — Free Online AVR8 Emulator | Velxio', + description: + 'Simulate Arduino Mega 2560 (ATmega2560) code for free in your browser. 256 KB flash, 54 digital pins, 16 analog inputs, 4 serial ports — full AVR8 emulation with 48+ components.', + url: 'https://velxio.dev/arduino-mega-simulator', + jsonLd: JSON_LD, + }); + + return ( +
+ +
+ {/* Hero */} +
+

+ Arduino Mega 2560 Simulator
+ Free Online AVR8 Emulation +

+

+ Simulate Arduino Mega 2560 sketches in your browser with full ATmega2560 emulation — 256 KB flash, 54 digital + pins, 16 analog inputs, 4 serial ports, and 6 timers. Free and open-source. +

+
+ Open Mega 2560 Simulator → + Browse Examples +
+

Free & open-source · No signup required · Full ATmega2560 emulation

+
+ + {/* ATmega2560 specs */} +
+

Arduino Mega 2560 — full spec emulation

+

+ The ATmega2560 is the most capable AVR8 microcontroller in the Arduino lineup. Velxio emulates its complete + peripheral set so every Mega-specific feature works in the simulator. +

+
+
+

256 KB Flash

+

8× more program storage than Arduino Uno. Run large sketches, complex state machines, and data-heavy applications without storage constraints.

+
+
+

54 Digital Pins

+

Full PORTA through PORTL emulation. 40 extra I/O pins compared to the Uno — ideal for multiplexed displays, large button matrices, and multi-module projects.

+
+
+

16 Analog Inputs

+

10-bit ADC with 16 channels (A0–A15). Connect multiple sensors, potentiometers, and analog components simultaneously in the simulation.

+
+
+

4 Hardware Serial

+

Serial (USART0–3) all emulated. Serial1, Serial2, Serial3 appear in the Serial Monitor — test multi-device serial communication projects.

+
+
+

6 Hardware Timers

+

Timer0/1/2/3/4/5. Three extra 16-bit timers (Timer3, Timer4, Timer5) compared to Uno — more PWM outputs and precise timing channels.

+
+
+

15 PWM Outputs

+

15 pins with hardware PWM support via analogWrite(). Ideal for motor control, servo arrays, LED dimming, and audio output projects.

+
+
+
+ + {/* Use cases */} +
+

What the Mega 2560 is used for

+

The Arduino Mega 2560 is the preferred board for complex makers projects. Simulate them all without hardware.

+
+
+

3D Printer Firmware

+

Marlin and RAMPS 1.4 shields run on ATmega2560. Prototype and debug printer control logic in the simulator.

+
+
+

CNC & Robotics

+

GRBL CNC controller and multi-servo robot arms benefit from the Mega's extra I/O pins and timers.

+
+
+

Large LED Matrices

+

Driving 8×8 or 16×16 LED matrices requires many pins. The Mega's 54 digital outputs make it ideal.

+
+
+

Multi-Sensor Systems

+

16 analog inputs allow simultaneous reading from temperature, pressure, humidity, and light sensors without multiplexing.

+
+
+
+ + {/* FAQ */} +
+

Frequently Asked Questions

+
+ {FAQ_ITEMS.map(({ q, a }) => ( + +
{q}
+
{a}
+ + ))} +
+
+ + {/* Bottom CTA */} +
+

Simulate your Arduino Mega project

+

Select the Mega 2560 board in the editor and start simulating — full ATmega2560 emulation, no hardware purchase needed.

+ Launch Mega 2560 Simulator → +
+ Arduino Simulator + Arduino Emulator + ATmega328P (Uno/Nano) + Example Projects + Documentation +
+
+
+
+ ); +}; diff --git a/frontend/src/pages/ArduinoSimulatorPage.tsx b/frontend/src/pages/ArduinoSimulatorPage.tsx new file mode 100644 index 0000000..7d5330a --- /dev/null +++ b/frontend/src/pages/ArduinoSimulatorPage.tsx @@ -0,0 +1,185 @@ +/** + * /arduino-simulator — SEO landing page + * Target keywords: "arduino simulator", "arduino simulator free" + */ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import { AppHeader } from '../components/layout/AppHeader'; +import { useSEO } from '../utils/useSEO'; +import './SEOPage.css'; + +const FAQ_ITEMS = [ + { + q: 'Is this Arduino simulator free?', + a: 'Yes. Velxio is completely free and open-source (GNU AGPLv3). No account, no payment, no cloud subscription — run it in your browser or self-host it with one Docker command.', + }, + { + q: 'Does the Arduino simulator work without installing anything?', + a: 'The simulation engine runs entirely in your browser. Compiling code requires the arduino-cli backend, which you can run locally or via Docker. No IDE installation is needed.', + }, + { + q: 'What Arduino boards can I simulate?', + a: 'Velxio supports 19 boards: Arduino Uno (ATmega328P), Arduino Nano, Arduino Mega 2560, ATtiny85, Arduino Leonardo, Arduino Pro Mini (AVR8) — plus Raspberry Pi Pico (RP2040), ESP32-C3 / XIAO ESP32-C3 / CH32V003 (RISC-V), ESP32 / ESP32-S3 / ESP32-CAM (Xtensa via QEMU), and Raspberry Pi 3B (Linux via QEMU).', + }, + { + q: 'Can I simulate LEDs, sensors, and displays?', + a: 'Yes. Velxio includes 48+ interactive wokwi-elements: LEDs, resistors, buttons, servo motors, ultrasonic sensors, ILI9341 TFT displays, LCD, NeoPixel strips, buzzers, DHT22, and more.', + }, + { + q: 'Is Velxio a Wokwi alternative?', + a: 'Yes. Velxio is a free, self-hosted alternative to Wokwi. It uses the same avr8js emulation library and wokwi-elements visual components, but runs entirely on your own machine with no cloud dependency.', + }, +]; + +const JSON_LD: object[] = [ + { + '@context': 'https://schema.org', + '@type': 'SoftwareApplication', + name: 'Velxio — Free Online Arduino Simulator', + applicationCategory: 'DeveloperApplication', + operatingSystem: 'Any (browser-based)', + description: + 'Free online Arduino simulator with real AVR8 emulation at 16 MHz. Simulate Arduino code with 48+ interactive electronic components directly in your browser — no install, no account.', + url: 'https://velxio.dev/arduino-simulator', + 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': 'FAQPage', + mainEntity: FAQ_ITEMS.map(({ q, a }) => ({ + '@type': 'Question', + name: q, + acceptedAnswer: { '@type': 'Answer', text: a }, + })), + }, + { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' }, + { '@type': 'ListItem', position: 2, name: 'Arduino Simulator', item: 'https://velxio.dev/arduino-simulator' }, + ], + }, +]; + +export const ArduinoSimulatorPage: React.FC = () => { + useSEO({ + title: 'Free Online Arduino Simulator — Run Sketches in Your Browser | Velxio', + description: + 'A free online Arduino simulator with real AVR8 emulation. Write and simulate Arduino code with LEDs, sensors, and 48+ components — no install, no account, instant results.', + url: 'https://velxio.dev/arduino-simulator', + jsonLd: JSON_LD, + }); + + return ( +
+ +
+ {/* Hero */} +
+

+ Free Online Arduino Simulator
+ Run Sketches in Your Browser +

+

+ Write Arduino code and simulate it instantly — real AVR8 emulation at 16 MHz with 48+ interactive + electronic components. No install, no cloud, no account required. +

+
+ Open Arduino Simulator → + Browse Examples +
+

Free & open-source · No signup required · Runs 100% in your browser

+
+ + {/* What you can simulate */} +
+

What can you simulate?

+

+ Velxio simulates Arduino programs with full AVR8 CPU accuracy — including GPIO ports, hardware timers, + USART, ADC, PWM, SPI, and I2C. No approximations, no shortcuts. +

+
+
+

Arduino Uno & Nano

+

Full ATmega328P simulation at 16 MHz. PORTB, PORTC, PORTD register emulation. All 14 digital and 6 analog pins.

+
+
+

Arduino Mega 2560

+

ATmega2560 with 256 KB flash, 54 digital pins, 16 analog inputs, and 4 hardware USART channels.

+
+
+

48+ Electronic Components

+

LEDs, resistors, buttons, buzzer, servo, ultrasonic sensor, ILI9341 TFT, 16×2 LCD, NeoPixel, DHT22, and more.

+
+
+

Serial Monitor

+

Real-time TX/RX with auto baud-rate detection. Send commands and view Serial.print() output live.

+
+
+

Multi-file Sketches

+

Write .ino, .h, and .cpp files in a VS Code-style Monaco editor — full multi-file Arduino project support.

+
+
+

Library Manager

+

Search and install any library from the full Arduino library index directly inside the simulator.

+
+
+
+ + {/* How it works */} +
+

How the simulator works

+

+ Velxio uses avr8js — the battle-tested open-source AVR8 emulation + library — to execute your compiled firmware byte-for-byte, exactly as it would run on physical hardware. +

+
+
+

1. Write

+

Write your Arduino sketch in the Monaco editor with C++ syntax highlighting and autocomplete.

+
+
+

2. Compile

+

Click Compile. arduino-cli produces a real .hex file — the same output as the Arduino IDE.

+
+
+

3. Simulate

+

The .hex is loaded into the AVR8 emulator. Your program executes at 16 MHz and drives the visual components.

+
+
+
+ + {/* FAQ */} +
+

Frequently Asked Questions

+
+ {FAQ_ITEMS.map(({ q, a }) => ( + +
{q}
+
{a}
+ + ))} +
+
+ + {/* Bottom CTA */} +
+

Ready to simulate your Arduino?

+

Open the editor and start coding in seconds — no setup, no install, no account needed.

+ Launch Arduino Simulator → +
+ Example Projects + Documentation + Arduino Emulator + ATmega328P Simulator + Mega 2560 Simulator +
+
+
+
+ ); +}; diff --git a/frontend/src/pages/AtmegaSimulatorPage.tsx b/frontend/src/pages/AtmegaSimulatorPage.tsx new file mode 100644 index 0000000..306f665 --- /dev/null +++ b/frontend/src/pages/AtmegaSimulatorPage.tsx @@ -0,0 +1,190 @@ +/** + * /atmega328p-simulator — SEO landing page + * Target keywords: "atmega328p", "atmega", "atmega 328p", "atmega328p arduino" + */ + +import React from 'react'; +import { Link } from 'react-router-dom'; +import { AppHeader } from '../components/layout/AppHeader'; +import { useSEO } from '../utils/useSEO'; +import './SEOPage.css'; + +const FAQ_ITEMS = [ + { + q: 'What is the ATmega328P?', + a: 'The ATmega328P is an 8-bit AVR microcontroller by Microchip (formerly Atmel). It is the heart of the Arduino Uno and Arduino Nano, running at 16 MHz with 32 KB flash, 2 KB SRAM, and 1 KB EEPROM.', + }, + { + q: 'Can I simulate ATmega328P register-level code?', + a: 'Yes. Velxio\'s AVR8 emulation faithfully executes all ATmega328P registers: DDRB/C/D, PORTB/C/D, PINB/C/D, TCCR0/1/2, OCR0/1/2, UBRR, UDR, ADCL/ADCH, and all interrupt vectors — including direct register manipulation without the Arduino abstraction layer.', + }, + { + q: 'Does it emulate ATmega328P timers correctly?', + a: 'Timer0 (8-bit), Timer1 (16-bit), and Timer2 (8-bit) are all emulated with full prescaler support, PWM modes, overflow interrupts, and Output Compare Match interrupts. millis(), delay(), analogWrite(), and tone() all work correctly.', + }, + { + q: 'Can I use analogRead() and analogWrite() in the simulator?', + a: 'Yes. The 10-bit ADC (analogRead) and PWM output (analogWrite on pins 3, 5, 6, 9, 10, 11) are fully emulated. You can connect simulated sensors, potentiometers, and any wokwi-elements analog component.', + }, + { + q: 'Can I simulate USART / Serial on ATmega328P?', + a: 'Yes. USART0 is fully emulated. Serial.begin(), Serial.print(), Serial.println(), and Serial.read() all work. The built-in Serial Monitor shows TX output and lets you send RX data to the running program.', + }, +]; + +const JSON_LD: object[] = [ + { + '@context': 'https://schema.org', + '@type': 'SoftwareApplication', + name: 'ATmega328P Simulator — Velxio', + applicationCategory: 'DeveloperApplication', + operatingSystem: 'Any (browser-based)', + description: + 'Free browser-based ATmega328P simulator. Full AVR8 emulation at 16 MHz — PORTB, PORTC, PORTD, Timer0/1/2, ADC, USART, PWM — with 48+ interactive components. No install required.', + url: 'https://velxio.dev/atmega328p-simulator', + 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': 'FAQPage', + mainEntity: FAQ_ITEMS.map(({ q, a }) => ({ + '@type': 'Question', + name: q, + acceptedAnswer: { '@type': 'Answer', text: a }, + })), + }, + { + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { '@type': 'ListItem', position: 1, name: 'Velxio', item: 'https://velxio.dev/' }, + { '@type': 'ListItem', position: 2, name: 'ATmega328P Simulator', item: 'https://velxio.dev/atmega328p-simulator' }, + ], + }, +]; + +export const AtmegaSimulatorPage: React.FC = () => { + useSEO({ + title: 'ATmega328P Simulator — Free Browser-Based AVR8 Emulation | Velxio', + description: + 'Simulate ATmega328P code in your browser. Full AVR8 emulation at 16 MHz — PORTB, PORTC, PORTD, Timer0/1/2, ADC, USART — with 48+ interactive components. Free & open-source.', + url: 'https://velxio.dev/atmega328p-simulator', + jsonLd: JSON_LD, + }); + + return ( +
+ +
+ {/* Hero */} +
+

+ ATmega328P Simulator
+ Free AVR8 Emulation in Your Browser +

+

+ Simulate ATmega328P firmware exactly as it runs on Arduino Uno and Nano — real AVR8 instruction execution at + 16 MHz with full GPIO, timer, ADC, and USART emulation. No hardware, no install. +

+
+ Open ATmega328P Simulator → + Technical Details +
+

Free & open-source · Genuine AVR8 emulation · Runs 100% in your browser

+
+ + {/* ATmega328P specs */} +
+

ATmega328P specification — fully emulated

+

+ Everything about the ATmega328P is emulated: registers, peripherals, interrupts, and timing. Write bare-metal + firmware or use the Arduino core library — both work identically in the simulator. +

+
+
+

CPU Core

+

AVR8 (8-bit RISC), 16 MHz, 135 instructions, 32 general-purpose registers, 2-stage pipeline.

+
+
+

Flash Memory

+

32 KB program flash. Upload any sketch compiled by arduino-cli. Supports self-programming via SPM instruction.

+
+
+

GPIO Ports

+

PORTB (pins 8–13), PORTC (A0–A5), PORTD (0–7). DDR, PORT, PIN registers all emulated. Interrupt-on-change via PCINT.

+
+
+

Timers 0 / 1 / 2

+

8-bit Timer0 & Timer2, 16-bit Timer1. All PWM modes. Prescaler 1–1024. CTC, Fast PWM, Phase-correct PWM.

+
+
+

10-bit ADC

+

6 analog input channels (A0–A5). Single conversion and free-running modes. Analog voltage from simulated components.

+
+
+

USART0

+

Full duplex serial with configurable baud rate. TX, RX, and UDRE interrupts. Works with the built-in Serial Monitor.

+
+
+
+ + {/* Compatible boards */} +
+

ATmega328P boards in Velxio

+

The ATmega328P powers several popular Arduino boards — all selectable in Velxio. The broader AVR8 family also includes ATmega2560 (Mega) and ATtiny85.

+
+
+

Arduino Uno R3

+

The classic board. 14 digital I/O pins (6 PWM), 6 analog inputs, 32 KB flash. The most widely used ATmega328P board.

+
+
+

Arduino Nano

+

Same ATmega328P in a compact 45×18mm form factor with mini-USB. Same pin count as Uno.

+
+
+

Arduino Pro Mini

+

Bare-bones ATmega328P without USB chip. Available at 3.3 V/8 MHz and 5 V/16 MHz variants.

+
+
+

ATtiny85

+

Ultra-compact 8-pin AVR. 8 KB flash, 6 I/O pins (PB0–PB5), USI (Wire), Timer0/1, 10-bit ADC. Ideal for embedded minimal projects.

+
+
+

Arduino Mega 2560

+

ATmega2560 with 256 KB flash, 54 digital pins, 16 analog inputs, and 4 hardware USART channels.

+
+
+
+ + {/* FAQ */} +
+

Frequently Asked Questions

+
+ {FAQ_ITEMS.map(({ q, a }) => ( + +
{q}
+
{a}
+ + ))} +
+
+ + {/* Bottom CTA */} +
+

Simulate your ATmega328P code now

+

Open the editor, paste your sketch, and click Simulate — no setup, no hardware purchase required.

+ Launch ATmega328P Simulator → +
+ Arduino Simulator + Arduino Emulator + Arduino Mega 2560 + Example Sketches + Emulator Architecture +
+
+
+
+ ); +}; diff --git a/frontend/src/pages/EditorPage.tsx b/frontend/src/pages/EditorPage.tsx index eb0e71d..f8614a4 100644 --- a/frontend/src/pages/EditorPage.tsx +++ b/frontend/src/pages/EditorPage.tsx @@ -3,6 +3,7 @@ */ import React, { useRef, useState, useCallback, useEffect, lazy, Suspense } from 'react'; +import { useSEO } from '../utils/useSEO'; import { CodeEditor } from '../components/editor/CodeEditor'; import { EditorToolbar } from '../components/editor/EditorToolbar'; import { FileTabs } from '../components/editor/FileTabs'; @@ -45,6 +46,13 @@ const resizeHandleStyle: React.CSSProperties = { }; export const EditorPage: React.FC = () => { + useSEO({ + title: 'Multi-Board Simulator Editor — Arduino, ESP32, RP2040, RISC-V | Velxio', + description: + 'Write, compile and simulate Arduino, ESP32, Raspberry Pi Pico, ESP32-C3, and Raspberry Pi 3 code in your browser. 19 boards, 5 CPU architectures, 48+ components. Free and open-source.', + url: 'https://velxio.dev/editor', + }); + const [editorWidthPct, setEditorWidthPct] = useState(45); const containerRef = useRef(null); const resizingRef = useRef(false); diff --git a/frontend/src/pages/ExamplesPage.tsx b/frontend/src/pages/ExamplesPage.tsx index 4301aec..474aaf1 100644 --- a/frontend/src/pages/ExamplesPage.tsx +++ b/frontend/src/pages/ExamplesPage.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { useNavigate } from 'react-router-dom'; import { ExamplesGallery } from '../components/examples/ExamplesGallery'; import { AppHeader } from '../components/layout/AppHeader'; +import { useSEO } from '../utils/useSEO'; import { useEditorStore } from '../store/useEditorStore'; import { useSimulatorStore } from '../store/useSimulatorStore'; import { useVfsStore } from '../store/useVfsStore'; @@ -16,6 +17,13 @@ import type { ExampleProject } from '../data/examples'; import type { BoardKind } from '../types/board'; export const ExamplesPage: React.FC = () => { + useSEO({ + title: 'Arduino Simulator Examples — Run 18+ Sketches Instantly | Velxio', + description: + 'Explore 18+ interactive Arduino examples with LEDs, sensors, displays, and games. Runs entirely in your browser — free, no install, no account required.', + url: 'https://velxio.dev/examples', + }); + const navigate = useNavigate(); const { setCode } = useEditorStore(); const { setComponents, setWires, setBoardType, activeBoardId, boards, addBoard, removeBoard, setActiveBoardId } = useSimulatorStore(); diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css index 48bd0df..c602fb0 100644 --- a/frontend/src/pages/LandingPage.css +++ b/frontend/src/pages/LandingPage.css @@ -351,6 +351,15 @@ transform: scale(1.02); } +/* Trust line under CTA buttons */ +.hero-trust-line { + margin: 6px 0 0; + font-size: 11.5px; + font-weight: 400; + color: #48484a; + letter-spacing: 0.02em; +} + /* Specs strip */ .hero-specs { margin: 0; diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index 622cbc2..fd4ae17 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react'; import { Link, useNavigate } from 'react-router-dom'; import { useAuthStore } from '../store/useAuthStore'; import { AppHeader } from '../components/layout/AppHeader'; +import { useSEO } from '../utils/useSEO'; import raspberryPi3Svg from '../assets/Raspberry_Pi_3_illustration.svg'; import './LandingPage.css'; @@ -434,6 +435,13 @@ const UserMenu: React.FC = () => { /* ── Component ────────────────────────────────────────── */ export const LandingPage: React.FC = () => { + useSEO({ + title: 'Velxio — Free Multi-Board Emulator | Arduino · ESP32 · RP2040 · RISC-V · Raspberry Pi', + description: + 'Velxio is a free, open-source multi-board emulator. 19 boards across 5 CPU architectures: Arduino Uno/Mega/ATtiny (AVR8), ESP32/ESP32-S3 (Xtensa QEMU), ESP32-C3/CH32V003 (RISC-V), Raspberry Pi Pico (RP2040), Raspberry Pi 3 (Linux). 48+ components, no cloud.', + url: 'https://velxio.dev/', + }); + return (
@@ -451,13 +459,14 @@ export const LandingPage: React.FC = () => {
- Launch Editor + Try Simulator Free → View on GitHub
+

No signup required · Runs 100% in your browser · Free & open-source

diff --git a/frontend/src/pages/SEOPage.css b/frontend/src/pages/SEOPage.css new file mode 100644 index 0000000..3be2088 --- /dev/null +++ b/frontend/src/pages/SEOPage.css @@ -0,0 +1,231 @@ +/* ── SEOPage.css — Shared layout for keyword-targeted landing pages ── */ + +.seo-page { + min-height: 100vh; + background: #0d0d0f; + color: #e6edf3; + font-family: 'Inter', system-ui, -apple-system, sans-serif; + -webkit-font-smoothing: antialiased; +} + +/* ── Hero ─────────────────────────────────────────────── */ +.seo-hero { + max-width: 820px; + margin: 0 auto; + padding: 72px 2rem 56px; + text-align: center; +} + +.seo-hero h1 { + font-size: clamp(1.75rem, 4.5vw, 2.75rem); + font-weight: 700; + line-height: 1.15; + color: #ffffff; + margin: 0 0 1rem; + letter-spacing: -0.5px; +} + +.seo-hero h1 .accent { + color: #007acc; +} + +.seo-hero .subtitle { + font-size: 1.1rem; + color: #8b949e; + max-width: 600px; + margin: 0 auto 2rem; + line-height: 1.65; +} + +.seo-cta-group { + display: flex; + gap: 12px; + justify-content: center; + flex-wrap: wrap; +} + +/* Reuse brand CTA style consistent with LandingPage */ +.seo-btn-primary { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 12px 26px; + background: #007acc; + color: #fff; + text-decoration: none; + font-size: 15px; + font-weight: 500; + border-radius: 9999px; + transition: filter 0.2s, transform 0.2s; + border: none; + cursor: pointer; + letter-spacing: -0.1px; +} + +.seo-btn-primary:hover { + filter: brightness(1.14); + transform: scale(1.02); +} + +.seo-btn-secondary { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 12px 26px; + background: #2c2c2e; + color: #e6edf3; + text-decoration: none; + font-size: 15px; + font-weight: 500; + border-radius: 9999px; + transition: background 0.2s, transform 0.2s; + border: none; + cursor: pointer; +} + +.seo-btn-secondary:hover { + background: #3a3a3c; + transform: scale(1.02); +} + +.seo-trust { + font-size: 0.78rem; + color: #484848; + margin-top: 1rem; + letter-spacing: 0.02em; +} + +/* ── Section wrapper ──────────────────────────────────── */ +.seo-section { + max-width: 820px; + margin: 0 auto; + padding: 48px 2rem; + border-top: 1px solid #1c1c1e; +} + +.seo-section h2 { + font-size: 1.4rem; + font-weight: 700; + color: #fff; + margin: 0 0 0.5rem; + letter-spacing: -0.3px; +} + +.seo-section .lead { + color: #8b949e; + font-size: 0.95rem; + margin: 0 0 1.75rem; + line-height: 1.6; +} + +/* ── Feature grid ─────────────────────────────────────── */ +.seo-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); + gap: 12px; +} + +.seo-card { + background: #121214; + border: 1px solid #1c1c1e; + border-radius: 10px; + padding: 1.2rem 1.25rem; +} + +.seo-card h3 { + font-size: 0.88rem; + font-weight: 600; + color: #007acc; + margin: 0 0 0.35rem; + letter-spacing: -0.1px; +} + +.seo-card p { + font-size: 0.83rem; + color: #8b949e; + margin: 0; + line-height: 1.55; +} + +/* ── FAQ ──────────────────────────────────────────────── */ +.seo-faq { + display: flex; + flex-direction: column; + gap: 0; +} + +.seo-faq dt { + font-weight: 600; + color: #e6edf3; + font-size: 0.9rem; + margin: 1.2rem 0 0.25rem; +} + +.seo-faq dd { + margin: 0; + color: #8b949e; + font-size: 0.875rem; + line-height: 1.6; + padding-left: 1rem; + border-left: 2px solid #1c1c1e; +} + +/* ── Bottom CTA ───────────────────────────────────────── */ +.seo-bottom { + text-align: center; + padding: 64px 2rem 72px; + border-top: 1px solid #1c1c1e; + max-width: 600px; + margin: 0 auto; +} + +.seo-bottom h2 { + font-size: 1.55rem; + font-weight: 700; + color: #fff; + margin: 0 0 0.75rem; + letter-spacing: -0.3px; +} + +.seo-bottom p { + color: #8b949e; + font-size: 0.95rem; + margin: 0 0 2rem; + line-height: 1.6; +} + +/* ── Internal links ───────────────────────────────────── */ +.seo-internal-links { + display: flex; + gap: 1.25rem; + justify-content: center; + flex-wrap: wrap; + margin-top: 2rem; + font-size: 0.82rem; +} + +.seo-internal-links a { + color: #007acc; + text-decoration: none; + transition: color 0.15s; +} + +.seo-internal-links a:hover { + color: #3b9ae8; + text-decoration: underline; +} + +/* ── Responsive ───────────────────────────────────────── */ +@media (max-width: 600px) { + .seo-hero { + padding: 48px 1.25rem 40px; + } + + .seo-section { + padding: 36px 1.25rem; + } + + .seo-grid { + grid-template-columns: 1fr; + } +} diff --git a/frontend/src/utils/useSEO.ts b/frontend/src/utils/useSEO.ts new file mode 100644 index 0000000..8492e2f --- /dev/null +++ b/frontend/src/utils/useSEO.ts @@ -0,0 +1,88 @@ +import { useEffect, useRef } from 'react'; + +export interface SEOMeta { + title: string; + description: string; + url: string; + ogImage?: string; + /** Module-level constant: injected once on mount, removed on unmount. */ + jsonLd?: object | object[]; +} + +function qs(selector: string): HTMLMetaElement | null { + return document.querySelector(selector) as HTMLMetaElement | null; +} + +/** + * Updates document.title, meta description, OG/Twitter tags, and canonical + * to reflect the current page. Restores originals on unmount. + * + * jsonLd (if provided) is injected as a