# Zync.is Public Marketing & Auth Site (`zync-www`) **Spec:** 34 **Date:** 2026-05-31 **Status:** Draft **Depends on:** `foundation-auth-rbac`, `foundation-design-system`, `foundation-monorepo`, `zync-subscription`, `system-i18n` **Referenced by:** `foundation-auth-rbac` (signup redirect), `2026-05-31-onboarding` (post-signup entry point) --- ## Overview `zync-www` is the public-facing Astro site at `zync.is`. It covers marketing (landing, pricing), authentication (login, signup, password reset), and invitation acceptance. It is entirely separate from `app.zync.is` (`apps/zync-app`), which is the authenticated React SPA. All pages are rendered statically (Astro `output: 'static'`) with React islands for interactive form components. This maximises SEO crawlability — no server-rendered auth gates, no JS-blocked content for bots. The site is Hebrew-first. `` on every page. All layout uses logical CSS properties (`margin-inline-start`, `padding-inline-end`, Tailwind `ms-*`/`me-*`/`ps-*`/`pe-*`). --- ## Project Scaffold Location: `apps/zync-www/` ### Core Dependencies ```jsonc // apps/zync-www/package.json (key deps) { "dependencies": { "astro": "^4.x", "@astrojs/react": "^3.x", "react": "^18.x", "react-dom": "^18.x", "react-hook-form": "^7.x", "zod": "^3.x", "@hookform/resolvers": "^3.x" }, "devDependencies": { "@zync/config": "workspace:*", "@zync/ui": "workspace:*", "tailwindcss": "^3.x", "typescript": "^5.x" } } ``` ### Astro Config ```ts // apps/zync-www/astro.config.ts import { defineConfig } from 'astro/config' import react from '@astrojs/react' export default defineConfig({ output: 'static', integrations: [react()], i18n: { defaultLocale: 'he', locales: ['he'], routing: { prefixDefaultLocale: false }, }, vite: { css: { // tokens from @zync/ui }, }, }) ``` ### Tailwind Config Inherits `packages/config/tailwind.preset.ts` so OKLCH tokens and the 8px spacing grid are enforced identically to `apps/zync-app`. No additional color definitions in `zync-www`. ```ts // apps/zync-www/tailwind.config.ts import preset from '@zync/config/tailwind.preset' import type { Config } from 'tailwindcss' export default { presets: [preset], content: ['./src/**/*.{astro,ts,tsx}'], } satisfies Config ``` --- ## Route List | Route | Page | Rendering | Purpose | |---|---|---|---| | `/` | Landing | Static | Marketing homepage — hero, features, pricing preview, CTA | | `/pricing` | Pricing | Static | Full tier comparison table, monthly/annual toggle, FAQ | | `/login` | Login | Static + React island | Email + password login → redirect to app | | `/signup` | Signup | Static + React island | New tenant registration → creates tenant → onboarding | | `/reset-password` | Reset Request | Static + React island | Enter email to receive reset link | | `/reset-password/confirm` | Reset Confirm | Static + React island | Consume `?token=` param, set new password | | `/invite/accept` | Invite Accept | Static + React island | Consume `?token=` param, accept team invite | | `404` | Not Found | Static | Global 404 page | --- ## Environment Variables No new secrets. Authentication is handled entirely by `apps/zync-api`. | Variable | Description | |---|---| | `PUBLIC_API_BASE_URL` | e.g. `https://api.zync.is` — base URL for all `POST /api/auth/*` calls | | `PUBLIC_APP_URL` | e.g. `https://app.zync.is` — redirect target after successful auth | Both are `PUBLIC_` (inlined at build time by Astro, safe to expose). --- ## Design Token Reference All values from `packages/ui/src/tokens/index.css`. No hardcoded hex/rgb/hsl anywhere in `zync-www`. | Token | Value | Usage | |---|---|---| | `--bg` | `oklch(100% 0 0)` | Page background | | `--surface` | `oklch(95% 0.016 195)` | Card, form background | | `--ink` | `oklch(12% 0.04 240)` | Body text | | `--ink-soft` | `oklch(22% 0.045 240)` | Secondary text, labels | | `--accent` | `oklch(44% 0.12 195)` | Primary CTA, links | | `--danger` | `oklch(44% 0.19 25)` | Error states | | `--radius` | `4px` | All rounded corners | Spacing: 8px grid. Allowed values: 8, 16, 24, 32, 48, 64, 96px only. --- ## Page 1: Landing Page (`/`) ### Purpose Introduce the product to prospective customers. Drive signups. No logo strip. No bento grid. No centered hero. No gradient backgrounds. ### Rendering Static. Zero client-side JavaScript outside of React islands. Astro components for all layout. ### Layout Structure 12-column grid. All sections on a `--bg` background. #### Sections (in order) 1. `