Marketingpagina's

Walkthrough voor beginners

Vereisten: Lees de twee onderstaande beginnershandleidingen, voltooi de lokale webconfiguratie en open deze monorepo in de root van uw editor. Webinstellingen horen thuis in apps/web/.env.local; Next.js leest de root .env niet. /dashboard in de standaard nepmodus is een demo zonder database; /auth heeft een gemigreerde database nodig.

Korte termen: een werkruimte bestaat uit de afzonderlijke gebruikers, gegevens en instellingen van één team. De server is de vertrouwde backend; houd providersleutels uit de browser- en telefooncode. Een migratie is een versiebeheer van de database, waarbij tabellen worden gemaakt of bijgewerkt. Een AI-model is de motor die antwoord geeft; de modelcatalogus is de serverlijst met beschikbare model-ID's en prijzen. Een provider is een externe service, zoals een AI-, e-mail- of factureringsservice. Een recht is een subsidie ​​waarmee een werkruimte een functie kan gebruiken. Een webhook is een bericht dat de ene service naar de URL van een andere service verzendt.

1. Open apps/web/src/marketing/site-config.ts en wijzig de productnaam, slogan, navigatielabels/URL's en ondersteuningsadres in waarden die u bezit.

2. Vervang apps/web/public/og.png en update de alternatieve tekst en afmetingen in apps/web/src/marketing/seo.tsx als één wijziging.

3. Vernieuw de startpagina, FAQ, voettekst en sociale preview. Als er oude tekst overblijft, zoek dan in deze repository naar de oude naam voordat u deze publiceert.

Voor aangepaste code begint u met de meegeleverde prompts/README.md en kopieert u de dichtstbijzijnde prompt: prompts/new-app-screen.md voor een app-scherm of prompts/new-landing-page.md voor een openbare pagina. Voor server-, database- of providerwerk geeft u uw codeeragent de taak van deze handleiding en vraagt ​​u hem om AGENTS.md, .ai/PROJECT_CONTEXT.md en overeenkomende .ai/-mirrors te lezen; inspecteer de exacte bronbestanden die hier worden genoemd; maak een lijst van bestanden en controleer deze voordat u deze bewerkt; behoud van het eigendom van de werkruimte en geheimen voor de server; en laat je het verschil zien. Vertel het gewenste gedrag, invoer- en uitvoervelden, toegestane rollen, verwacht succes en fouten, en het testaccount, de provider of het apparaat. Gebruik voorbeeldwaarden; plak nooit een echt geheim.

• Voordat u begint
• Basisbeginselen van de terminal
• Lokale webinstellingen
• Agentprompts en projectgeheugen

Update de siteconfiguratie

apps/web/src/marketing/site-config.ts is eigenaar van merkkopieën, navigatie-/voettekstlinks, FAQ en optionele repository-/documentbestemmingen. Werk dit bij voordat u productnamen over componenten verspreidt. Het eigen chroom van de kit gebruikt deze configuratie; de kopieerbare chromen blokken accepteren productrekwisieten.

Vervang samen de activafamilie

Het gedeelde merkteken met vier tegels heeft witte tegels linksboven/rechtsonder en grijze tegels rechtsboven/linksonder met dunne contouren. Houd kopmarkeringen transparant; app-pictogrammen/favicon gebruiken de afgeronde zwarte achterkant. Afgeleide producten kunnen het merk en de bijbehorende app-/desktopmiddelen samen vervangen.

De gedeelde openbare sociale kaart is /og.png; update de descriptor in marketing/seo.tsx met de afmetingen en alternatieve tekst. Blogartikelkaarten gebruiken hun afzonderlijke Next image-route.

Controleer elk openbaar oppervlak

Controleer kop-/voettekst, contact, FAQ, juridische pagina's, gelokaliseerde thuiskopie, titels en sociale kaarten. Kies de marketingthemamodus van uw product en verzend alleen ondersteunings-/contactlinks die werken.

• Productstijlen
• Juridische paginasteiger
• Metadata en sociale kaarten

Setup en configuratie

Het marketingoppervlak is aan getypeerde data gekoppeld in plaats van hardcoded JSX — hero, featuresecties, pricing, FAQ, changelog, showcase, contact en juridische pagina's lezen copy en structuur uit de siteconfiguratie en contentfiles.

MARKETING_THEME_MODE (src/theme/marketing-theme.ts) beslist of marketing op het vergrendelde donkere merk van de kit blijft, het themapakket van de bezoeker erft, of een specifiek pakket vastpint. Afgeleide producten kiezen hun eigen modus.

src/marketing/         branded chrome and sections
src/kit/blocks/        copyable token-only section patterns
  marketing/           hero, features, product grid, pricing, FAQ, CTA
  app/                 stat grid, data table, empty state, choice pills
  chrome/              site header, footer, prose page

MARKETING_THEME_MODE = "locked" | "inherit" | "<pack-id>"

Implementatieworkflow

Stel pagina's eerst samen uit de blockbibliotheek; schrijf een nieuw block in dezelfde token-only stijl als een patroon ontbreekt en registreer het in src/kit/blocks.ts. Houd marketingcomponenten buiten productoppervlakken — de twee chrome-systemen blijven gescheiden.

Gelokaliseerde copy stroomt via het dictionary en de site-content-overlays; voeg daar keys toe in plaats van componenten per taal te forken.

Verificatie en probleemoplossing

Controleer een marketingpagina op 320px en desktop, met zichtbare toetsenbordfocus, onder minstens één licht en één donker pakket, en met reduced motion. Als een marketingclaim naar een capability verwijst, controleer dan dat de gelinkte doc-pagina bestaat.