A44Z marketing site

The A44Z company site lives in apps/marketing. Its visual authority is design/a44z.pen and design/DESIGN.md; the implementation contract is apps/marketing/DESIGN.md. The authenticated product in apps/saas retains its own design system.

Pages and navigation

The site includes Home, six product pages under /products, Pricing, Roadmap, About, Contact, and Waitlist. The original blog, tag filters, articles, legal pages, and changelog remain available. English, German, Spanish, and French use the existing next-intl routing and packages/i18n/translations catalogs.

The masthead follows Pen: Home, Products, Roadmap, Pricing, Contact, and the Join Waitlist action. Blog and About are in the footer. Set NEXT_PUBLIC_DOCS_URL to expose the documentation footer link and NEXT_PUBLIC_SAAS_URL for the application sign-in link.

Marketing uses the approved light/dark chapter sequence rather than a global theme switch. enableCookieConsent in apps/marketing/config.ts defaults to false while the selected custom analytics provider is a no-op. Enable and configure the consent feature when adding a tracking integration.

Existing theme system

Marketing retains the starter's next-themes provider and shared ColorModeToggle; theme switching is inactive for the current design, not removed. SaaS continues to use that infrastructure.

apps/marketing/config.ts enables only light mode, and apps/marketing/app/[locale]/layout.tsx currently forces it. To restore visitor selection, reuse that provider and @repo/ui/components/color-mode-toggle, enable light/dark in the config, remove forcedTheme, and supply a marketing dark palette. System detection and preference persistence are already provided by next-themes.

The Theme switching section of apps/marketing/DESIGN.md lists the exact files, existing translation keys, working component example, and restoration steps. Start there rather than introducing another theming implementation.

Contact and waitlist delivery

Both forms submit to the marketing-owned POST /api/marketing endpoint. Configure these server-only variables in .env.local or your deployment:

MARKETING_WAITLIST_WEBHOOK_URL="https://your-service.example/waitlist"
MARKETING_CONTACT_WEBHOOK_URL="https://your-service.example/contact"
MARKETING_WEBHOOK_SECRET="your-server-to-server-secret"

The optional secret is sent as a Bearer authorization header, never exposed to the browser. The receiver must durably accept the submission before returning a successful 2xx response. Requests have a ten-second timeout and do not follow redirects. There are no automatic retries, so the receiver should deduplicate waitlist entries by email.

Waitlist payloads contain kind: "waitlist", trimmed email, locale, submittedAt (ISO timestamp), and consent: "a44z-launch-updates-v1". The consent text authorizes launch-related emails with unsubscribe at any time. The receiving system owns subscriber storage, unsubscribe handling, confirmation delivery, deduplication, and production abuse controls.

Contact payloads contain kind: "contact", email, name, optional company, topic (product, partnership, or general), message, locale, and submittedAt. Keep the endpoint same-origin through your reverse proxy.

The route checks origin, content type, payload size, the honeypot, and Zod validation before delivery. Missing endpoints return 503, provider failures return 502, and the UI retains entered details. Confirmation is displayed only after a successful server response. No external delivery endpoint or account is provided by the design, and an unconfigured installation does not collect leads.

Artwork and responsive behavior

OpticalArtwork.tsx uses the original shaders copied to public/a44z/, with static Pen exports underneath. It pauses offscreen and when the browser tab is hidden; reduced motion uses a still. Unsupported WebGL and constrained devices retain the static export. Previews illustrate planned products, not live app features. Keep their disclosures visible. Artwork has no added playback buttons. Preserve each preview's Pen-specific fills, shader tint, and composition; in particular, Assets has different desktop, tablet, and mobile mosaic arrangements, and the Roadmap badges retain their citron, lilac, and white workstream colors.

Layouts reflow from 24px mobile gutters to 40px tablet and 64px desktop gutters. Full navigation appears at 75rem. The calendar becomes an agenda, workspace sidebars become compact selectors, and mobile forms precede secondary content.

Local verification

pnpm --filter marketing dev
pnpm --filter marketing test
pnpm --filter marketing e2e:ci
pnpm format
pnpm lint
pnpm type-check

For an isolated worktree, use a separate port. The browser tests accept PLAYWRIGHT_BASE_URL; their production server uses the matching port:

PLAYWRIGHT_BASE_URL=http://localhost:3101 pnpm --filter marketing e2e:ci

The tests cover the public route inventory at desktop, tablet, and mobile sizes, product navigation, menu focus, blog filtering, and waitlist success/failure. Server tests exercise validation, origin checks, and the delivery contract with a controlled receiver rather than sending real contact requests.