From b7797b1eeadc3330de5a2036495b120debc3f0e2 Mon Sep 17 00:00:00 2001 From: davidmonterocrespo24 Date: Wed, 13 May 2026 20:24:40 +0200 Subject: [PATCH] feat(landing): AI agent + pricing sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two new sections on the landing page, between Features and Support: 1. "Powered by AI agents" — three cards explaining the in-editor agent (place & wire parts, generate code, diagnose circuits). Calls out DeepSeek-V4-Flash + Gemini 2.5 as the LLM backbone so visitors know the simulator does more than draw boxes. 2. "Pricing" — three cards summarising Free / Pro / Pro Max with the actual monthly cost, the daily AI-message quota, and a CTA per tier. Pro is highlighted as Most Popular. Free CTA opens the editor, the two paid CTAs link to /pricing where the PayPal subscription flow lives. The simulator itself stays free — only the AI-agent quota changes per tier — that copy is repeated in the section subtitle so visitors don't worry about the boards/components becoming paywalled. All 9 locales translated. --- frontend/src/i18n/locales/de/common.json | 51 ++++++ frontend/src/i18n/locales/en/common.json | 51 ++++++ frontend/src/i18n/locales/es/common.json | 51 ++++++ frontend/src/i18n/locales/fr/common.json | 51 ++++++ frontend/src/i18n/locales/it/common.json | 51 ++++++ frontend/src/i18n/locales/ja/common.json | 51 ++++++ frontend/src/i18n/locales/pt-br/common.json | 51 ++++++ frontend/src/i18n/locales/ru/common.json | 51 ++++++ frontend/src/i18n/locales/zh-cn/common.json | 51 ++++++ frontend/src/pages/LandingPage.css | 187 ++++++++++++++++++++ frontend/src/pages/LandingPage.tsx | 83 +++++++++ 11 files changed, 729 insertions(+) diff --git a/frontend/src/i18n/locales/de/common.json b/frontend/src/i18n/locales/de/common.json index 96458f67..44440d08 100644 --- a/frontend/src/i18n/locales/de/common.json +++ b/frontend/src/i18n/locales/de/common.json @@ -91,6 +91,57 @@ "desc": "Für Closed-Source-Produkte, proprietäre SaaS oder interne Unternehmensnutzung, bei denen die AGPLv3-Reziprozität mit Ihrem Geschäftsmodell nicht vereinbar ist.", "cta": "Preise anfragen →" } + }, + "ai": { + "label": "KI-Agent", + "title": "Angetrieben von KI-Agenten.", + "subtitle": "Ein Multi-Step-Agent läuft im Editor. Er liest dein Canvas, schreibt Code, platziert Bauteile und verkabelt sie — alles per natürlicher Sprache. DeepSeek-V4-Flash und Gemini 2.5 unter der Haube.", + "cards": { + "wire": { + "title": "Bauteile platzieren & verdrahten", + "desc": "Sag \"füg einen Taster an D2 mit Pull-up zu 5V hinzu\". Der Agent wählt die Teile, setzt sie aufs Canvas, verbindet jeden Pin und benennt die Leitungen." + }, + "code": { + "title": "Lauffähige Sketches", + "desc": "Beschreib was das Board tun soll, der Agent schreibt den Arduino-/MicroPython-Code, kompiliert und lädt ihn — kein Copy-Paste aus dem Chat." + }, + "debug": { + "title": "Live-Schaltungen diagnostizieren", + "desc": "Bei einem Verdrahtungsbug stecken geblieben? Schick einen Canvas-Screenshot, der Agent liest den Schaltplan, simuliert und sagt dir welcher Pin falsch ist." + } + } + }, + "pricing": { + "label": "Preise", + "title": "Schaltungen kostenlos. Du zahlst für die KI.", + "subtitle": "Der Simulator bleibt für immer kostenlos. Abos erhöhen nur das tägliche Nachrichtenkontingent des KI-Agenten.", + "popular": "Am beliebtesten", + "tiers": { + "free": { + "name": "Free", + "tagline": "Der gesamte Simulator, für immer.", + "f1": "20 KI-Nachrichten pro Tag", + "f2": "Alle Boards, alle Komponenten", + "f3": "Projekte speichern und teilen", + "cta": "Editor öffnen" + }, + "pro": { + "name": "Pro", + "tagline": "Für Maker mit echten Projekten.", + "f1": "300 KI-Nachrichten pro Tag", + "f2": "Schnellere Kompilierung + Simulation", + "f3": "Priorisierter E-Mail-Support", + "cta": "Pro abonnieren" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "Für Power-User und kleine Teams.", + "f1": "700 KI-Nachrichten pro Tag", + "f2": "Früher Zugriff auf neue Boards", + "f3": "Direkter Chat mit dem Maintainer", + "cta": "Pro Max wählen" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/en/common.json b/frontend/src/i18n/locales/en/common.json index 1cf16992..4ffba093 100644 --- a/frontend/src/i18n/locales/en/common.json +++ b/frontend/src/i18n/locales/en/common.json @@ -91,6 +91,57 @@ "desc": "For closed-source products, proprietary SaaS, or internal company use where AGPLv3 reciprocity is incompatible with your business model.", "cta": "Contact for pricing →" } + }, + "ai": { + "label": "AI agent", + "title": "Powered by AI agents.", + "subtitle": "A multi-step agent runs inside the editor. It reads your canvas, writes code, places parts and wires them up — all driven by natural language. DeepSeek-V4-Flash and Gemini 2.5 under the hood.", + "cards": { + "wire": { + "title": "Drop & wire components", + "desc": "Ask \"add a button on D2 with a pull-up to 5V\". The agent picks the parts, drops them on the canvas, connects every pin and labels the wires." + }, + "code": { + "title": "Generate working sketches", + "desc": "Describe what you want the board to do and the agent writes the Arduino / MicroPython code, compiles it, and loads the firmware — no copy-paste from the chat." + }, + "debug": { + "title": "Diagnose live circuits", + "desc": "Stuck on a wiring bug? Share the canvas screenshot and the agent reads the schematic, runs a sim, and tells you which pin is wrong." + } + } + }, + "pricing": { + "label": "Pricing", + "title": "Free to run circuits. Pay for the AI.", + "subtitle": "The simulator stays free forever. Subscriptions only raise the AI agent’s daily message quota.", + "popular": "Most popular", + "tiers": { + "free": { + "name": "Free", + "tagline": "Everything in the simulator, forever.", + "f1": "20 AI messages per day", + "f2": "All boards, all components", + "f3": "Save and share projects", + "cta": "Open the editor" + }, + "pro": { + "name": "Pro", + "tagline": "For makers building real projects.", + "f1": "300 AI messages per day", + "f2": "Faster compile + simulation", + "f3": "Priority email support", + "cta": "Subscribe to Pro" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "For power users and small teams.", + "f1": "700 AI messages per day", + "f2": "Early access to new boards", + "f3": "Dedicated chat with the maintainer", + "cta": "Choose Pro Max" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/es/common.json b/frontend/src/i18n/locales/es/common.json index 4464224c..20565dc2 100644 --- a/frontend/src/i18n/locales/es/common.json +++ b/frontend/src/i18n/locales/es/common.json @@ -91,6 +91,57 @@ "desc": "Para productos closed-source, SaaS propietario o uso interno empresarial donde la reciprocidad AGPLv3 no es compatible con tu modelo de negocio.", "cta": "Contactar para precios →" } + }, + "ai": { + "label": "Agente IA", + "title": "Impulsado por agentes de IA.", + "subtitle": "Un agente multi-paso corre dentro del editor. Lee tu canvas, escribe código, coloca componentes y los conecta — todo guiado por lenguaje natural. DeepSeek-V4-Flash y Gemini 2.5 por debajo.", + "cards": { + "wire": { + "title": "Coloca y cablea", + "desc": "Pedile \"agregar un pulsador en D2 con resistencia pull-up a 5V\". El agente elige las piezas, las pone en el canvas, conecta cada pin y etiqueta los cables." + }, + "code": { + "title": "Genera sketches que funcionan", + "desc": "Describí qué tiene que hacer la placa y el agente escribe el código Arduino / MicroPython, lo compila y lo carga — sin copiar-pegar del chat." + }, + "debug": { + "title": "Diagnostica circuitos en vivo", + "desc": "Te trabaste con un cable mal? Mandale un screenshot y el agente lee el esquema, corre la sim, y te dice qué pin está mal." + } + } + }, + "pricing": { + "label": "Precios", + "title": "Gratis para correr circuitos. Pagás la IA.", + "subtitle": "El simulador queda gratis para siempre. Las suscripciones solo aumentan el cupo diario de mensajes al agente.", + "popular": "Más popular", + "tiers": { + "free": { + "name": "Free", + "tagline": "Todo el simulador, para siempre.", + "f1": "20 mensajes IA por día", + "f2": "Todas las placas, todos los componentes", + "f3": "Guardar y compartir proyectos", + "cta": "Abrir el editor" + }, + "pro": { + "name": "Pro", + "tagline": "Para makers haciendo proyectos reales.", + "f1": "300 mensajes IA por día", + "f2": "Compilación + simulación más rápida", + "f3": "Soporte prioritario por email", + "cta": "Suscribirme a Pro" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "Para power users y equipos chicos.", + "f1": "700 mensajes IA por día", + "f2": "Acceso temprano a nuevas placas", + "f3": "Chat directo con el mantenedor", + "cta": "Elegir Pro Max" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/fr/common.json b/frontend/src/i18n/locales/fr/common.json index 560f437e..52d254dc 100644 --- a/frontend/src/i18n/locales/fr/common.json +++ b/frontend/src/i18n/locales/fr/common.json @@ -91,6 +91,57 @@ "desc": "Pour des produits propriétaires, du SaaS commercial, ou un usage interne en entreprise où la réciprocité AGPLv3 ne correspond pas à votre modèle économique.", "cta": "Nous contacter pour les tarifs →" } + }, + "ai": { + "label": "Agent IA", + "title": "Propulsé par des agents IA.", + "subtitle": "Un agent multi-étapes tourne dans l’éditeur. Il lit votre canvas, écrit du code, place des composants et les câble — le tout guidé par langage naturel. DeepSeek-V4-Flash et Gemini 2.5 sous le capot.", + "cards": { + "wire": { + "title": "Déposer et câbler", + "desc": "Demandez \"ajoute un bouton sur D2 avec une résistance pull-up à 5V\". L’agent choisit les pièces, les place, connecte chaque broche et nomme les fils." + }, + "code": { + "title": "Génère du code qui marche", + "desc": "Décrivez ce que la carte doit faire, l’agent écrit le code Arduino / MicroPython, le compile et le charge — pas de copier-coller depuis le chat." + }, + "debug": { + "title": "Diagnostique les circuits en direct", + "desc": "Bloqué sur un câblage ? Envoyez un screenshot du canvas et l’agent lit le schéma, lance la sim et vous dit quel pin est faux." + } + } + }, + "pricing": { + "label": "Tarifs", + "title": "Gratuit pour les circuits. Payez pour l’IA.", + "subtitle": "Le simulateur reste gratuit pour toujours. Les abonnements augmentent uniquement la limite quotidienne de l’agent IA.", + "popular": "Le plus populaire", + "tiers": { + "free": { + "name": "Free", + "tagline": "Tout le simulateur, pour toujours.", + "f1": "20 messages IA par jour", + "f2": "Toutes les cartes, tous les composants", + "f3": "Sauvegarde et partage de projets", + "cta": "Ouvrir l’éditeur" + }, + "pro": { + "name": "Pro", + "tagline": "Pour les makers en projets réels.", + "f1": "300 messages IA par jour", + "f2": "Compilation + simulation plus rapides", + "f3": "Support email prioritaire", + "cta": "S’abonner à Pro" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "Pour power users et petites équipes.", + "f1": "700 messages IA par jour", + "f2": "Accès anticipé aux nouvelles cartes", + "f3": "Chat dédié avec le mainteneur", + "cta": "Choisir Pro Max" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/it/common.json b/frontend/src/i18n/locales/it/common.json index 107179b5..354e1edd 100644 --- a/frontend/src/i18n/locales/it/common.json +++ b/frontend/src/i18n/locales/it/common.json @@ -91,6 +91,57 @@ "desc": "Per prodotti closed-source, SaaS proprietari o uso interno aziendale dove la reciprocità AGPLv3 non è compatibile con il tuo modello di business.", "cta": "Contatta per prezzi →" } + }, + "ai": { + "label": "Agente IA", + "title": "Alimentato da agenti IA.", + "subtitle": "Un agente multi-step gira dentro l’editor. Legge il tuo canvas, scrive codice, posiziona componenti e li collega — tutto guidato dal linguaggio naturale. DeepSeek-V4-Flash e Gemini 2.5 sotto il cofano.", + "cards": { + "wire": { + "title": "Posiziona e collega", + "desc": "Chiedi \"aggiungi un pulsante su D2 con pull-up a 5V\". L’agente sceglie i componenti, li mette sul canvas, collega ogni pin ed etichetta i fili." + }, + "code": { + "title": "Sketch funzionanti", + "desc": "Descrivi cosa deve fare la scheda e l’agente scrive il codice Arduino / MicroPython, lo compila e lo carica — niente copia-incolla dalla chat." + }, + "debug": { + "title": "Diagnostica circuiti dal vivo", + "desc": "Bloccato su un bug di cablaggio? Manda lo screenshot del canvas e l’agente legge lo schema, esegue la sim e ti dice quale pin è sbagliato." + } + } + }, + "pricing": { + "label": "Prezzi", + "title": "Gratis per i circuiti. Paghi per l’IA.", + "subtitle": "Il simulatore resta gratis per sempre. Le sottoscrizioni alzano solo la quota giornaliera dell’agente IA.", + "popular": "Più popolare", + "tiers": { + "free": { + "name": "Free", + "tagline": "Tutto il simulatore, per sempre.", + "f1": "20 messaggi IA al giorno", + "f2": "Tutte le schede, tutti i componenti", + "f3": "Salva e condividi progetti", + "cta": "Apri l’editor" + }, + "pro": { + "name": "Pro", + "tagline": "Per maker che costruiscono progetti reali.", + "f1": "300 messaggi IA al giorno", + "f2": "Compilazione + simulazione più veloci", + "f3": "Supporto email prioritario", + "cta": "Abbonati a Pro" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "Per power user e piccoli team.", + "f1": "700 messaggi IA al giorno", + "f2": "Accesso anticipato alle nuove schede", + "f3": "Chat dedicata con il maintainer", + "cta": "Scegli Pro Max" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/ja/common.json b/frontend/src/i18n/locales/ja/common.json index da5e24ce..cad5a9d3 100644 --- a/frontend/src/i18n/locales/ja/common.json +++ b/frontend/src/i18n/locales/ja/common.json @@ -91,6 +91,57 @@ "desc": "クローズドソース製品、プロプライエタリSaaS、AGPLv3の相互ライセンス条件がビジネスモデルに合わない社内利用向け。", "cta": "価格を問い合わせる →" } + }, + "ai": { + "label": "AIエージェント", + "title": "AIエージェントが動かしています。", + "subtitle": "マルチステップAIエージェントがエディタ内で動作。あなたのキャンバスを読み、コードを書き、部品を配置・配線します。自然言語ですべて完結。DeepSeek-V4-FlashとGemini 2.5を採用。", + "cards": { + "wire": { + "title": "配置と配線", + "desc": "「D2にプルアップ抵抗付きのボタンを追加」と頼むだけ。エージェントが部品を選び、キャンバスに置き、各ピンを接続して配線にラベルを付けます。" + }, + "code": { + "title": "動くスケッチを生成", + "desc": "やりたい動作を伝えると、エージェントがArduino / MicroPythonコードを書き、コンパイル、書き込みまで実行 — チャットからのコピペ不要。" + }, + "debug": { + "title": "ライブ回路を診断", + "desc": "配線のバグで詰まった?キャンバスのスクリーンショットを送れば、エージェントが回路図を読み、シミュレートし、どのピンが間違っているか教えます。" + } + } + }, + "pricing": { + "label": "料金", + "title": "回路は無料。AIだけ有料。", + "subtitle": "シミュレータは永年無料。サブスクはAIエージェントの1日あたりメッセージ上限を増やすだけ。", + "popular": "人気", + "tiers": { + "free": { + "name": "Free", + "tagline": "シミュレータの全機能、永久に無料。", + "f1": "AIメッセージ 1日20回", + "f2": "全ボード・全コンポーネント", + "f3": "プロジェクトの保存・共有", + "cta": "エディタを開く" + }, + "pro": { + "name": "Pro", + "tagline": "本格的なプロジェクトのメーカー向け。", + "f1": "AIメッセージ 1日300回", + "f2": "より高速なコンパイル + シミュレーション", + "f3": "優先メールサポート", + "cta": "Proを契約" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "パワーユーザーと小規模チーム向け。", + "f1": "AIメッセージ 1日700回", + "f2": "新ボードへの早期アクセス", + "f3": "メンテナーとの専用チャット", + "cta": "Pro Maxを選ぶ" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/pt-br/common.json b/frontend/src/i18n/locales/pt-br/common.json index 492983e9..24c23793 100644 --- a/frontend/src/i18n/locales/pt-br/common.json +++ b/frontend/src/i18n/locales/pt-br/common.json @@ -91,6 +91,57 @@ "desc": "Para produtos de código fechado, SaaS proprietário ou uso interno corporativo onde a reciprocidade da AGPLv3 não combina com o modelo de negócio.", "cta": "Contate para preços →" } + }, + "ai": { + "label": "Agente IA", + "title": "Movido por agentes de IA.", + "subtitle": "Um agente multi-etapas roda dentro do editor. Ele lê seu canvas, escreve código, coloca componentes e os conecta — tudo guiado por linguagem natural. DeepSeek-V4-Flash e Gemini 2.5 por baixo.", + "cards": { + "wire": { + "title": "Encaixe e conecte", + "desc": "Peça \"adicione um botão em D2 com pull-up para 5V\". O agente escolhe os componentes, os coloca no canvas, conecta cada pino e rotula os fios." + }, + "code": { + "title": "Sketches que funcionam", + "desc": "Descreva o que a placa deve fazer e o agente escreve o código Arduino / MicroPython, compila e carrega — sem copiar-colar do chat." + }, + "debug": { + "title": "Diagnostica circuitos ao vivo", + "desc": "Travou em um bug de fiação? Envie um screenshot do canvas e o agente lê o esquema, roda a sim, e diz qual pino está errado." + } + } + }, + "pricing": { + "label": "Preços", + "title": "Grátis para rodar circuitos. Pague pela IA.", + "subtitle": "O simulador continua grátis para sempre. Assinaturas apenas aumentam a cota diária do agente de IA.", + "popular": "Mais popular", + "tiers": { + "free": { + "name": "Free", + "tagline": "Tudo no simulador, para sempre.", + "f1": "20 mensagens de IA por dia", + "f2": "Todas as placas, todos os componentes", + "f3": "Salvar e compartilhar projetos", + "cta": "Abrir o editor" + }, + "pro": { + "name": "Pro", + "tagline": "Para makers construindo projetos reais.", + "f1": "300 mensagens de IA por dia", + "f2": "Compilação + simulação mais rápida", + "f3": "Suporte prioritário por email", + "cta": "Assinar Pro" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "Para power users e times pequenos.", + "f1": "700 mensagens de IA por dia", + "f2": "Acesso antecipado a novas placas", + "f3": "Chat dedicado com o mantenedor", + "cta": "Escolher Pro Max" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/ru/common.json b/frontend/src/i18n/locales/ru/common.json index d85ca21c..fe93fa24 100644 --- a/frontend/src/i18n/locales/ru/common.json +++ b/frontend/src/i18n/locales/ru/common.json @@ -91,6 +91,57 @@ "desc": "Для закрытых продуктов, проприетарных SaaS или внутреннего корпоративного использования, когда условия взаимности AGPLv3 несовместимы с вашей бизнес-моделью.", "cta": "Узнать цены →" } + }, + "ai": { + "label": "ИИ-агент", + "title": "Работает на ИИ-агентах.", + "subtitle": "Многошаговый ИИ-агент работает прямо в редакторе. Читает ваш холст, пишет код, размещает компоненты и соединяет их — всё на естественном языке. Под капотом DeepSeek-V4-Flash и Gemini 2.5.", + "cards": { + "wire": { + "title": "Размести и соедини", + "desc": "Скажите \"добавь кнопку на D2 с подтяжкой к 5V\". Агент выберет компоненты, расставит их на холсте, соединит каждый пин и подпишет провода." + }, + "code": { + "title": "Готовые рабочие скетчи", + "desc": "Опишите что должна делать плата, и агент напишет код Arduino / MicroPython, скомпилирует и загрузит прошивку — без копирования из чата." + }, + "debug": { + "title": "Диагностика живых схем", + "desc": "Застряли с ошибкой в разводке? Отправьте скриншот холста и агент прочитает схему, запустит симуляцию и скажет, какой пин неправильный." + } + } + }, + "pricing": { + "label": "Цены", + "title": "Схемы бесплатно. Платите за ИИ.", + "subtitle": "Симулятор остаётся бесплатным навсегда. Подписки повышают только дневной лимит сообщений ИИ-агента.", + "popular": "Самый популярный", + "tiers": { + "free": { + "name": "Free", + "tagline": "Весь симулятор, навсегда.", + "f1": "20 сообщений ИИ в день", + "f2": "Все платы, все компоненты", + "f3": "Сохранение и обмен проектами", + "cta": "Открыть редактор" + }, + "pro": { + "name": "Pro", + "tagline": "Для мейкеров с реальными проектами.", + "f1": "300 сообщений ИИ в день", + "f2": "Более быстрая сборка + симуляция", + "f3": "Приоритетная поддержка по email", + "cta": "Подписаться на Pro" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "Для опытных пользователей и небольших команд.", + "f1": "700 сообщений ИИ в день", + "f2": "Ранний доступ к новым платам", + "f3": "Прямой чат с разработчиком", + "cta": "Выбрать Pro Max" + } + } } }, "profile": { diff --git a/frontend/src/i18n/locales/zh-cn/common.json b/frontend/src/i18n/locales/zh-cn/common.json index 67c25acd..df738473 100644 --- a/frontend/src/i18n/locales/zh-cn/common.json +++ b/frontend/src/i18n/locales/zh-cn/common.json @@ -91,6 +91,57 @@ "desc": "适用于闭源产品、专有 SaaS 或 AGPLv3 协议的互惠条款与您的商业模式不兼容的企业内部使用场景。", "cta": "联系咨询定价 →" } + }, + "ai": { + "label": "AI 智能体", + "title": "由 AI 智能体驱动。", + "subtitle": "多步骤 AI 智能体在编辑器中运行,读取画布、编写代码、放置元件并完成接线 — 全部通过自然语言。底层使用 DeepSeek-V4-Flash 和 Gemini 2.5。", + "cards": { + "wire": { + "title": "放置和接线", + "desc": "只需说\"在 D2 加一个按钮,5V 上拉电阻\"。智能体会选择元件、放到画布上、连接每个引脚并标注导线。" + }, + "code": { + "title": "生成可用代码", + "desc": "描述你希望开发板做什么,智能体会写出 Arduino / MicroPython 代码,编译并加载固件 — 无需从聊天框复制粘贴。" + }, + "debug": { + "title": "实时诊断电路", + "desc": "在布线 bug 上卡住了?发送画布截图,智能体读取原理图、运行仿真、告诉你哪个引脚错了。" + } + } + }, + "pricing": { + "label": "定价", + "title": "电路免费,AI 收费。", + "subtitle": "模拟器永久免费。订阅仅提升 AI 智能体每日消息额度。", + "popular": "最受欢迎", + "tiers": { + "free": { + "name": "Free", + "tagline": "模拟器全部功能,永久免费。", + "f1": "每天 20 条 AI 消息", + "f2": "所有开发板和所有元件", + "f3": "保存和分享项目", + "cta": "打开编辑器" + }, + "pro": { + "name": "Pro", + "tagline": "面向构建实际项目的创客。", + "f1": "每天 300 条 AI 消息", + "f2": "更快的编译 + 仿真", + "f3": "优先邮件支持", + "cta": "订阅 Pro" + }, + "pro_max": { + "name": "Pro Max", + "tagline": "面向高级用户和小型团队。", + "f1": "每天 700 条 AI 消息", + "f2": "抢先体验新开发板", + "f3": "与维护者的专属聊天", + "cta": "选择 Pro Max" + } + } } }, "profile": { diff --git a/frontend/src/pages/LandingPage.css b/frontend/src/pages/LandingPage.css index 6f29f1f3..bc9d39aa 100644 --- a/frontend/src/pages/LandingPage.css +++ b/frontend/src/pages/LandingPage.css @@ -1191,3 +1191,190 @@ padding: 24px 22px; } } + +/* ── AI agent ────────────────────────────────────────── */ +.landing-ai .section-header { margin-bottom: 36px; } + +.ai-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + max-width: 1100px; + margin: 0 auto; + padding: 0 24px; +} + +.ai-card { + background: linear-gradient(180deg, rgba(0, 113, 227, 0.07), rgba(255, 255, 255, 0.03)); + border: 1px solid rgba(0, 113, 227, 0.18); + border-radius: 18px; + padding: 28px 26px; +} + +.ai-card-title { + margin: 0 0 8px; + font-size: 17px; + font-weight: 600; + color: var(--text); +} + +.ai-card-desc { + margin: 0; + font-size: 14px; + line-height: 1.65; + color: var(--text-dim); +} + +@media (max-width: 900px) { + .ai-grid { + grid-template-columns: 1fr; + padding: 0 16px; + } +} + +/* ── Pricing ─────────────────────────────────────────── */ +.landing-pricing .section-header { margin-bottom: 40px; } + +.pricing-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + max-width: 1100px; + margin: 0 auto; + padding: 0 24px; + align-items: stretch; +} + +.pricing-card { + position: relative; + background: rgba(255, 255, 255, 0.04); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 20px; + padding: 32px 28px; + display: flex; + flex-direction: column; + transition: border-color 160ms ease, transform 160ms ease; +} + +.pricing-card:hover { + border-color: rgba(255, 255, 255, 0.16); + transform: translateY(-1px); +} + +.pricing-card-featured { + border-color: rgba(0, 113, 227, 0.55); + background: linear-gradient(180deg, rgba(0, 113, 227, 0.10), rgba(255, 255, 255, 0.04)); +} + +.pricing-card-badge { + position: absolute; + top: -11px; + right: 22px; + background: #0071e3; + color: #ffffff; + font-size: 11px; + font-weight: 600; + letter-spacing: 0.4px; + text-transform: uppercase; + padding: 4px 10px; + border-radius: 999px; +} + +.pricing-card-name { + font-size: 13px; + font-weight: 600; + letter-spacing: 0.4px; + text-transform: uppercase; + color: var(--text-dim); + margin-bottom: 8px; +} + +.pricing-card-price { + display: flex; + align-items: baseline; + gap: 4px; + margin-bottom: 4px; +} + +.pricing-card-amount { + font-size: 36px; + font-weight: 600; + letter-spacing: -1px; + color: var(--text); +} + +.pricing-card-period { + font-size: 14px; + color: var(--text-dim); +} + +.pricing-card-tagline { + margin: 8px 0 18px; + font-size: 13px; + line-height: 1.55; + color: var(--text-dim); +} + +.pricing-card-features { + list-style: none; + padding: 0; + margin: 0 0 22px; + flex: 1; +} + +.pricing-card-features li { + position: relative; + padding: 6px 0 6px 22px; + font-size: 14px; + line-height: 1.5; + color: var(--text); +} + +.pricing-card-features li::before { + content: '✓'; + position: absolute; + left: 0; + color: #0071e3; + font-weight: 600; +} + +.pricing-card-cta { + display: inline-block; + text-align: center; + padding: 11px 18px; + border-radius: 12px; + font-size: 14px; + font-weight: 500; + text-decoration: none; + transition: background 160ms ease, color 160ms ease; +} + +.pricing-card-cta-primary { + background: #0071e3; + color: #ffffff; +} + +.pricing-card-cta-primary:hover { + background: #0066cc; +} + +.pricing-card-cta-secondary { + background: transparent; + color: var(--text); + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.pricing-card-cta-secondary:hover { + border-color: rgba(255, 255, 255, 0.35); +} + +@media (max-width: 900px) { + .pricing-grid { + grid-template-columns: 1fr; + padding: 0 16px; + } + + .pricing-card { + padding: 26px 22px; + } +} diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index 847bcd45..04e777cf 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -1183,6 +1183,89 @@ export const LandingPage: React.FC = () => { + {/* AI agent */} +
+
+ {t('landing.ai.label')} +

{t('landing.ai.title')}

+

{t('landing.ai.subtitle')}

+
+
+
+

{t('landing.ai.cards.wire.title')}

+

{t('landing.ai.cards.wire.desc')}

+
+
+

{t('landing.ai.cards.code.title')}

+

{t('landing.ai.cards.code.desc')}

+
+
+

{t('landing.ai.cards.debug.title')}

+

{t('landing.ai.cards.debug.desc')}

+
+
+
+ + {/* Pricing */} +
+
+ {t('landing.pricing.label')} +

{t('landing.pricing.title')}

+

{t('landing.pricing.subtitle')}

+
+
+
+
{t('landing.pricing.tiers.free.name')}
+
+ $0 + /mo +
+

{t('landing.pricing.tiers.free.tagline')}

+
    +
  • {t('landing.pricing.tiers.free.f1')}
    • +
  • {t('landing.pricing.tiers.free.f2')}
    • +
  • {t('landing.pricing.tiers.free.f3')}
    • +
+ + {t('landing.pricing.tiers.free.cta')} + +
+
+
{t('landing.pricing.popular')}
+
{t('landing.pricing.tiers.pro.name')}
+
+ $15 + /mo +
+

{t('landing.pricing.tiers.pro.tagline')}

+
    +
  • {t('landing.pricing.tiers.pro.f1')}
    • +
  • {t('landing.pricing.tiers.pro.f2')}
    • +
  • {t('landing.pricing.tiers.pro.f3')}
    • +
+ + {t('landing.pricing.tiers.pro.cta')} + +
+
+
{t('landing.pricing.tiers.pro_max.name')}
+
+ $35 + /mo +
+

{t('landing.pricing.tiers.pro_max.tagline')}

+
    +
  • {t('landing.pricing.tiers.pro_max.f1')}
    • +
  • {t('landing.pricing.tiers.pro_max.f2')}
    • +
  • {t('landing.pricing.tiers.pro_max.f3')}
    • +
+ + {t('landing.pricing.tiers.pro_max.cta')} + +
+
+
+ {/* Support */}