# Cameleer marketing website — Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Build a static marketing site at `www.cameleer.io` — 4 pages, Astro 5, Tailwind with Mission Control tokens, Cloudflare-fronted Hetzner Webhosting L static host, Logto redirect for auth, zero backend code on the marketing host.

**Architecture:** Astro 5 with `output: 'static'`, Tailwind CSS, self-hosted WOFF2 fonts via `@fontsource`, a tiny Astro middleware that emits strict security headers, vitest for the two pure-function modules (auth URL config, security headers), `html-validate` + `linkinator` + Lighthouse CI for quality gates, Gitea Actions for CI/CD, `rsync` over SSH to Hetzner.

**Tech Stack:** Astro 5, Tailwind CSS, TypeScript, `@astrojs/tailwind`, `@fontsource/dm-sans`, `@fontsource/jetbrains-mono`, vitest, `html-validate`, `linkinator`, `@lhci/cli`, Gitea Actions, Node 20 LTS.

---

## File Structure

Files created (exhaustive — every file this plan produces):

```
cameleer-website/
├── .env.example                                  Task 1
├── .gitea/workflows/deploy.yml                   Task 20
├── astro.config.mjs                              Task 1
├── tailwind.config.mjs                           Task 2
├── tsconfig.json                                 Task 1
├── package.json                                  Task 1
├── vitest.config.ts                              Task 3
├── lighthouserc.cjs                              Task 19
├── README.md                                     Task 21
├── OPERATOR-CHECKLIST.md                         Task 21
├── public/
│   ├── .htaccess                                 Task 17
│   ├── favicon.svg                               Task 5
│   ├── robots.txt                                Task 5
│   └── og-image.svg                              Task 5
├── src/
│   ├── config/
│   │   ├── auth.ts                               Task 3
│   │   └── auth.test.ts                          Task 3
│   ├── middleware.ts                             Task 4
│   ├── middleware.test.ts                        Task 4
│   ├── layouts/
│   │   └── BaseLayout.astro                      Task 5
│   ├── styles/
│   │   └── global.css                            Task 2
│   ├── components/
│   │   ├── SiteHeader.astro                      Task 6
│   │   ├── SiteFooter.astro                      Task 6
│   │   ├── CTAButtons.astro                      Task 6
│   │   ├── TopographicBg.astro                   Task 6
│   │   ├── RouteDiagram.astro                    Task 7
│   │   └── sections/
│   │       ├── Hero.astro                        Task 8
│   │       ├── DualValueProps.astro              Task 9
│   │       ├── HowItWorks.astro                  Task 10
│   │       ├── WhyUs.astro                       Task 11
│   │       ├── PricingTeaser.astro               Task 12
│   │       └── FinalCTA.astro                    Task 13
│   ├── content/
│   │   ├── config.ts                             Task 1
│   │   └── en/.gitkeep                           Task 1
│   └── pages/
│       ├── index.astro                           Task 13
│       ├── pricing.astro                         Task 14
│       ├── imprint.astro                         Task 15
│       └── privacy.astro                         Task 16
```

Testing strategy by file type:
- **Pure TS modules** (`auth.ts`, `middleware.ts`): vitest unit tests — these have logic worth asserting.
- **Astro components**: the build itself is the contract (Astro's compiler catches syntax and prop-type errors). Content presence is guarded by `linkinator` (link integrity) and `html-validate` (semantic correctness).
- **CI pipeline**: `html-validate` + `linkinator` + `@lhci/cli` run on the built `dist/`. A post-deploy smoke check (Task 20) validates headers against the live URL.
- **Manual acceptance**: copy for each homepage section reviewed with you (Hendrik) during the task that introduces it.

---

## Task 1: Initialize Astro project

**Files:**
- Create: `package.json`
- Create: `astro.config.mjs`
- Create: `tsconfig.json`
- Create: `.env.example`
- Create: `src/content/config.ts`
- Create: `src/content/en/.gitkeep`

- [ ] **Step 1: Write `package.json`**

```json
{
  "name": "cameleer-website",
  "version": "0.0.1",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro",
    "test": "vitest run",
    "test:watch": "vitest",
    "lint:html": "html-validate 'dist/**/*.html'",
    "lint:links": "linkinator dist --recurse --silent",
    "lh": "lhci autorun"
  },
  "dependencies": {
    "@astrojs/tailwind": "^5.1.0",
    "@fontsource/dm-sans": "^5.0.21",
    "@fontsource/jetbrains-mono": "^5.0.21",
    "astro": "^5.0.0",
    "tailwindcss": "^3.4.0"
  },
  "devDependencies": {
    "@lhci/cli": "^0.14.0",
    "@types/node": "^20.11.0",
    "html-validate": "^8.18.0",
    "linkinator": "^6.1.0",
    "typescript": "^5.4.0",
    "vitest": "^1.6.0"
  }
}
```

- [ ] **Step 2: Write `astro.config.mjs`**

```js
import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  site: 'https://www.cameleer.io',
  output: 'static',
  trailingSlash: 'never',
  build: {
    format: 'file',
    assets: 'assets',
    inlineStylesheets: 'auto',
  },
  compressHTML: true,
  integrations: [
    tailwind({ applyBaseStyles: false }),
  ],
  vite: {
    build: {
      cssMinify: 'lightningcss',
    },
  },
});
```

- [ ] **Step 3: Write `tsconfig.json`**

```json
{
  "extends": "astro/tsconfigs/strict",
  "include": ["src/**/*", "astro.config.mjs", "tailwind.config.mjs"],
  "exclude": ["dist", "node_modules"]
}
```

- [ ] **Step 4: Write `.env.example`**

```
# Logto auth endpoints — the marketing site only performs <a href> navigations to these.
# No tokens, no cookies, no XHR — these are plain hyperlinks.
PUBLIC_AUTH_SIGNIN_URL=https://auth.cameleer.io/sign-in
PUBLIC_AUTH_SIGNUP_URL=https://auth.cameleer.io/sign-in?first_screen=register
PUBLIC_SALES_EMAIL=sales@cameleer.io
```

- [ ] **Step 5: Write `src/content/config.ts` (scaffolds future blog/docs)**

```ts
import { defineCollection, z } from 'astro:content';

// Scaffold only — no entries yet. Added now so future blog/docs work is pure content, not refactor.
const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    publishedAt: z.date(),
    draft: z.boolean().default(true),
  }),
});

const docs = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    order: z.number().default(99),
  }),
});

export const collections = { blog, docs };
```

- [ ] **Step 6: Create i18n-ready content directory**

```bash
mkdir -p src/content/en
touch src/content/en/.gitkeep
```

- [ ] **Step 7: Install dependencies**

```bash
npm install
```

Expected: no errors, `node_modules/` populated, `package-lock.json` created.

- [ ] **Step 8: Verify Astro recognizes the config**

```bash
npx astro check --help
```

Expected: CLI help text prints (confirms `astro` binary resolves).

- [ ] **Step 9: Commit**

```bash
git add package.json package-lock.json astro.config.mjs tsconfig.json .env.example src/content/
git commit -m "Scaffold Astro 5 project with static output and i18n-ready content collections"
```

---

## Task 2: Tailwind configuration with Mission Control tokens

**Files:**
- Create: `tailwind.config.mjs`
- Create: `src/styles/global.css`

- [ ] **Step 1: Write `tailwind.config.mjs` with Mission Control tokens**

```js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        bg: {
          DEFAULT: '#060a13',
          elevated: '#0c111a',
        },
        border: {
          DEFAULT: '#1e2535',
          strong: '#2a3242',
        },
        accent: {
          DEFAULT: '#f0b429',
          muted: '#c89321',
        },
        cyan: {
          DEFAULT: '#5cc8ff',
          muted: '#3a9dd1',
        },
        rose: '#f43f5e',
        green: '#10b981',
        text: {
          DEFAULT: '#e8eaed',
          muted: '#9aa3b2',
          faint: '#6b7280',
        },
      },
      fontFamily: {
        sans: ['"DM Sans"', 'system-ui', 'sans-serif'],
        mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'monospace'],
      },
      fontSize: {
        'display': ['clamp(2.5rem, 5vw, 4.5rem)', { lineHeight: '1.05', letterSpacing: '-0.02em' }],
        'hero': ['clamp(1.75rem, 3vw, 2.75rem)', { lineHeight: '1.15', letterSpacing: '-0.015em' }],
      },
      maxWidth: {
        content: '72rem',
        prose: '42rem',
      },
    },
  },
  plugins: [],
};
```

- [ ] **Step 2: Write `src/styles/global.css`**

```css
@import '@fontsource/dm-sans/400.css';
@import '@fontsource/dm-sans/500.css';
@import '@fontsource/dm-sans/700.css';
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/700.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    color-scheme: dark;
  }
  html {
    @apply bg-bg text-text font-sans;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  body {
    @apply min-h-screen;
  }
  code, kbd, samp, pre {
    @apply font-mono;
  }
  ::selection {
    @apply bg-accent text-bg;
  }
  :focus-visible {
    @apply outline-2 outline-offset-2 outline-accent;
  }
}
```

- [ ] **Step 3: Smoke test — create a throwaway index to prove the build wires up**

Create `src/pages/index.astro` (will be overwritten in Task 13):

```astro
---
import '../styles/global.css';
---
<html lang="en">
  <head><meta charset="utf-8" /><title>scaffold</title></head>
  <body class="bg-bg text-text"><p class="text-accent font-mono">scaffold ok</p></body>
</html>
```

- [ ] **Step 4: Run build to verify Tailwind + fonts wire up**

```bash
npm run build
```

Expected: build succeeds, `dist/index.html` exists. Inspect `dist/_astro/*.css` — should contain Tailwind output with Mission Control colors.

- [ ] **Step 5: Commit**

```bash
git add tailwind.config.mjs src/styles/global.css src/pages/index.astro
git commit -m "Add Tailwind config with Mission Control tokens and global styles"
```

---

## Task 3: Auth URL config module (TDD)

**Files:**
- Create: `vitest.config.ts`
- Create: `src/config/auth.ts`
- Create: `src/config/auth.test.ts`

**Why this is a real module:** the two auth URLs are read from env vars at build time. We validate they're present and well-formed so a misconfigured deploy fails loudly in CI instead of silently producing buttons that point nowhere.

- [ ] **Step 1: Write `vitest.config.ts`**

```ts
import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    environment: 'node',
    include: ['src/**/*.test.ts'],
  },
});
```

- [ ] **Step 2: Write the failing test `src/config/auth.test.ts`**

```ts
import { describe, it, expect, beforeEach } from 'vitest';
import { resolveAuthConfig } from './auth';

describe('resolveAuthConfig', () => {
  it('returns both URLs and sales email from env', () => {
    const cfg = resolveAuthConfig({
      PUBLIC_AUTH_SIGNIN_URL: 'https://auth.cameleer.io/sign-in',
      PUBLIC_AUTH_SIGNUP_URL: 'https://auth.cameleer.io/sign-in?first_screen=register',
      PUBLIC_SALES_EMAIL: 'sales@cameleer.io',
    });
    expect(cfg.signInUrl).toBe('https://auth.cameleer.io/sign-in');
    expect(cfg.signUpUrl).toBe('https://auth.cameleer.io/sign-in?first_screen=register');
    expect(cfg.salesEmail).toBe('sales@cameleer.io');
  });

  it('throws if PUBLIC_AUTH_SIGNIN_URL is missing', () => {
    expect(() => resolveAuthConfig({
      PUBLIC_AUTH_SIGNUP_URL: 'https://auth.cameleer.io/sign-in?first_screen=register',
      PUBLIC_SALES_EMAIL: 'sales@cameleer.io',
    })).toThrow(/PUBLIC_AUTH_SIGNIN_URL/);
  });

  it('throws if a URL is not https', () => {
    expect(() => resolveAuthConfig({
      PUBLIC_AUTH_SIGNIN_URL: 'http://auth.cameleer.io/sign-in',
      PUBLIC_AUTH_SIGNUP_URL: 'https://auth.cameleer.io/sign-in?first_screen=register',
      PUBLIC_SALES_EMAIL: 'sales@cameleer.io',
    })).toThrow(/must be https/);
  });

  it('throws if sales email is not a valid mailto target', () => {
    expect(() => resolveAuthConfig({
      PUBLIC_AUTH_SIGNIN_URL: 'https://auth.cameleer.io/sign-in',
      PUBLIC_AUTH_SIGNUP_URL: 'https://auth.cameleer.io/sign-in?first_screen=register',
      PUBLIC_SALES_EMAIL: 'not-an-email',
    })).toThrow(/PUBLIC_SALES_EMAIL/);
  });

  it('exposes signUpUrl distinct from signInUrl', () => {
    const cfg = resolveAuthConfig({
      PUBLIC_AUTH_SIGNIN_URL: 'https://auth.cameleer.io/sign-in',
      PUBLIC_AUTH_SIGNUP_URL: 'https://auth.cameleer.io/sign-in?first_screen=register',
      PUBLIC_SALES_EMAIL: 'sales@cameleer.io',
    });
    expect(cfg.signUpUrl).not.toBe(cfg.signInUrl);
  });
});
```

- [ ] **Step 3: Run test to verify it fails**

```bash
npm test
```

Expected: FAIL — "Cannot find module './auth'" (or similar).

- [ ] **Step 4: Write `src/config/auth.ts`**

```ts
export interface AuthConfig {
  signInUrl: string;
  signUpUrl: string;
  salesEmail: string;
  salesMailto: string;
}

interface EnvLike {
  PUBLIC_AUTH_SIGNIN_URL?: string;
  PUBLIC_AUTH_SIGNUP_URL?: string;
  PUBLIC_SALES_EMAIL?: string;
}

function requireHttps(name: string, value: string | undefined): string {
  if (!value) {
    throw new Error(`${name} is required`);
  }
  if (!value.startsWith('https://')) {
    throw new Error(`${name} must be https (got: ${value})`);
  }
  return value;
}

function requireEmail(name: string, value: string | undefined): string {
  if (!value) {
    throw new Error(`${name} is required`);
  }
  // RFC-5322-ish minimal check — we just want to catch typos, not validate against RFC.
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    throw new Error(`${name} must look like an email (got: ${value})`);
  }
  return value;
}

export function resolveAuthConfig(env: EnvLike): AuthConfig {
  const signInUrl = requireHttps('PUBLIC_AUTH_SIGNIN_URL', env.PUBLIC_AUTH_SIGNIN_URL);
  const signUpUrl = requireHttps('PUBLIC_AUTH_SIGNUP_URL', env.PUBLIC_AUTH_SIGNUP_URL);
  const salesEmail = requireEmail('PUBLIC_SALES_EMAIL', env.PUBLIC_SALES_EMAIL);
  return {
    signInUrl,
    signUpUrl,
    salesEmail,
    salesMailto: `mailto:${salesEmail}`,
  };
}

// Lazy accessor for Astro usage. Not evaluated at module load (so vitest can
// import this file without the PUBLIC_* env vars being set). Each call after
// the first returns the cached config.
let _cached: AuthConfig | null = null;
export function getAuthConfig(): AuthConfig {
  if (_cached === null) {
    _cached = resolveAuthConfig(import.meta.env as unknown as EnvLike);
  }
  return _cached;
}
```

- [ ] **Step 5: Run tests to verify they pass**

```bash
npm test
```

Expected: all 5 tests PASS.

- [ ] **Step 6: Commit**

```bash
git add vitest.config.ts src/config/auth.ts src/config/auth.test.ts
git commit -m "Add auth URL config module with validation (TDD)"
```

---

## Task 4: Security-headers middleware (TDD)

**Files:**
- Create: `src/middleware.ts`
- Create: `src/middleware.test.ts`

**Why a middleware and headers at the edge?** Defense in depth — Cloudflare Transform Rules will also emit these headers at the edge, but emitting them from the origin means (a) they're visible in local `preview` and (b) the site stays hardened even if the CF config drifts.

- [ ] **Step 1: Write the failing test `src/middleware.test.ts`**

```ts
import { describe, it, expect } from 'vitest';
import { buildSecurityHeaders } from './middleware';

describe('buildSecurityHeaders', () => {
  const headers = buildSecurityHeaders();

  it('sets a strict Content-Security-Policy', () => {
    const csp = headers['Content-Security-Policy'];
    expect(csp).toContain("default-src 'self'");
    expect(csp).toContain("script-src 'self'");
    expect(csp).toContain("frame-ancestors 'none'");
    expect(csp).toContain("form-action 'none'");
    expect(csp).toContain("base-uri 'self'");
    expect(csp).toContain("object-src 'none'");
  });

  it('denies framing', () => {
    expect(headers['X-Frame-Options']).toBe('DENY');
  });

  it('disables MIME sniffing', () => {
    expect(headers['X-Content-Type-Options']).toBe('nosniff');
  });

  it('sets a strict referrer policy', () => {
    expect(headers['Referrer-Policy']).toBe('strict-origin-when-cross-origin');
  });

  it('disables sensitive browser features', () => {
    const pp = headers['Permissions-Policy'];
    expect(pp).toContain('geolocation=()');
    expect(pp).toContain('microphone=()');
    expect(pp).toContain('camera=()');
    expect(pp).toContain('payment=()');
  });

  it('sets HSTS with long max-age, subdomains, and preload', () => {
    const hsts = headers['Strict-Transport-Security'];
    expect(hsts).toContain('max-age=31536000');
    expect(hsts).toContain('includeSubDomains');
    expect(hsts).toContain('preload');
  });

  it('does not allow inline scripts', () => {
    expect(headers['Content-Security-Policy']).not.toContain("'unsafe-inline' 'nonce-");
    // Script directive must not include 'unsafe-inline'
    const scriptDirective = headers['Content-Security-Policy']
      .split(';')
      .map(s => s.trim())
      .find(s => s.startsWith('script-src')) ?? '';
    expect(scriptDirective).not.toContain("'unsafe-inline'");
  });
});
```

- [ ] **Step 2: Run test to verify it fails**

```bash
npm test
```

Expected: FAIL — cannot resolve `./middleware`.

- [ ] **Step 3: Write `src/middleware.ts`**

```ts
import { defineMiddleware } from 'astro:middleware';

/**
 * Emits the site-wide security header set. Astro does not attach these to
 * statically-built responses at runtime on a shared host — but `preview` uses
 * them locally, and when Cloudflare Transform Rules are configured (per
 * docs/superpowers/specs/2026-04-24-cameleer-website-design.md §5.3) the
 * edge re-emits the same set for the prod origin. Having both is defense
 * in depth.
 */
export function buildSecurityHeaders(): Record<string, string> {
  const csp = [
    "default-src 'self'",
    "img-src 'self' data:",
    "style-src 'self' 'unsafe-inline'",
    "font-src 'self'",
    "script-src 'self'",
    "connect-src 'self'",
    "frame-ancestors 'none'",
    "base-uri 'self'",
    "form-action 'none'",
    "object-src 'none'",
  ].join('; ');

  const permissionsPolicy = [
    'geolocation=()',
    'microphone=()',
    'camera=()',
    'payment=()',
    'usb=()',
    'fullscreen=(self)',
  ].join(', ');

  return {
    'Content-Security-Policy': csp,
    'X-Frame-Options': 'DENY',
    'X-Content-Type-Options': 'nosniff',
    'Referrer-Policy': 'strict-origin-when-cross-origin',
    'Permissions-Policy': permissionsPolicy,
    'Strict-Transport-Security': 'max-age=31536000; includeSubDomains; preload',
  };
}

export const onRequest = defineMiddleware(async (_context, next) => {
  const response = await next();
  const headers = buildSecurityHeaders();
  for (const [name, value] of Object.entries(headers)) {
    response.headers.set(name, value);
  }
  return response;
});
```

- [ ] **Step 4: Run tests to verify they pass**

```bash
npm test
```

Expected: all 7 tests PASS.

- [ ] **Step 5: Smoke test against `astro preview`**

```bash
npm run build
npm run preview &
sleep 2
curl -sI http://localhost:4321/ | grep -iE '^(content-security-policy|x-frame-options|strict-transport-security|referrer-policy|permissions-policy|x-content-type-options)'
kill %1
```

Expected: all six headers printed. If any are missing, the middleware is not wired — check `astro.config.mjs` doesn't disable middleware.

- [ ] **Step 6: Commit**

```bash
git add src/middleware.ts src/middleware.test.ts
git commit -m "Add security-headers middleware with strict CSP (TDD)"
```

---

## Task 5: BaseLayout + favicon + robots.txt + OG image

**Files:**
- Create: `src/layouts/BaseLayout.astro`
- Create: `public/favicon.svg`
- Create: `public/robots.txt`
- Create: `public/og-image.svg`

- [ ] **Step 1: Write `public/favicon.svg`** (amber topographic glyph)

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="6" fill="#060a13"/>
  <g fill="none" stroke="#f0b429" stroke-width="1.4" stroke-linecap="round">
    <path d="M4 10 Q10 6 16 12 T28 10"/>
    <path d="M4 16 Q10 12 16 18 T28 16"/>
    <path d="M4 22 Q10 18 16 24 T28 22"/>
  </g>
</svg>
```

- [ ] **Step 2: Write `public/robots.txt`**

```
User-agent: *
Allow: /

Sitemap: https://www.cameleer.io/sitemap-index.xml
```

(No `Disallow` for anything — the whole marketing site is public. Sitemap path will 404 until we add `@astrojs/sitemap` in a later phase; that's fine and intentional.)

- [ ] **Step 3: Write `public/og-image.svg`** (social-sharing card, 1200×630)

```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <rect width="1200" height="630" fill="#060a13"/>
  <g fill="none" stroke="#f0b429" stroke-width="1" opacity="0.2">
    <path d="M0,120 Q300,60 600,150 T1200,120"/>
    <path d="M0,240 Q300,180 600,270 T1200,240"/>
    <path d="M0,360 Q300,300 600,390 T1200,360"/>
    <path d="M0,480 Q300,420 600,510 T1200,480"/>
  </g>
  <text x="80" y="260" fill="#f0b429" font-family="'DM Sans', sans-serif" font-size="22" letter-spacing="6">OBSERVABILITY · APACHE CAMEL</text>
  <text x="80" y="360" fill="#e8eaed" font-family="'DM Sans', sans-serif" font-size="72" font-weight="700">See every route.</text>
  <text x="80" y="440" fill="#e8eaed" font-family="'DM Sans', sans-serif" font-size="72" font-weight="700">Reach into every flow.</text>
  <text x="80" y="540" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="26">cameleer.io</text>
</svg>
```

- [ ] **Step 4: Write `src/layouts/BaseLayout.astro`**

```astro
---
import '../styles/global.css';

interface Props {
  title: string;
  description: string;
  canonicalPath?: string;
  ogImage?: string;
}

const {
  title,
  description,
  canonicalPath = Astro.url.pathname,
  ogImage = '/og-image.svg',
} = Astro.props;

const canonical = new URL(canonicalPath, Astro.site ?? 'https://www.cameleer.io').toString();
const ogUrl = new URL(ogImage, Astro.site ?? 'https://www.cameleer.io').toString();
---
<!doctype html>
<html lang="en" class="bg-bg">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="color-scheme" content="dark" />
    <meta name="theme-color" content="#060a13" />
    <meta name="generator" content={Astro.generator} />

    <title>{title}</title>
    <meta name="description" content={description} />
    <link rel="canonical" href={canonical} />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Cameleer" />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:url" content={canonical} />
    <meta property="og:image" content={ogUrl} />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={title} />
    <meta name="twitter:description" content={description} />
    <meta name="twitter:image" content={ogUrl} />

    <meta name="robots" content="index,follow" />
  </head>
  <body class="min-h-screen bg-bg text-text font-sans antialiased">
    <slot />
  </body>
</html>
```

- [ ] **Step 5: Update the placeholder `src/pages/index.astro` to use BaseLayout (smoke)**

```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Cameleer — scaffolding" description="Scaffolding placeholder.">
  <main class="max-w-content mx-auto px-6 py-24">
    <p class="text-accent font-mono">BaseLayout ok</p>
  </main>
</BaseLayout>
```

- [ ] **Step 6: Build and inspect meta tags**

```bash
npm run build
grep -E '(<title>|og:title|og:image|canonical)' dist/index.html
```

Expected: all four tags present and point to `https://www.cameleer.io/...`.

- [ ] **Step 7: Commit**

```bash
git add src/layouts/BaseLayout.astro src/pages/index.astro public/favicon.svg public/robots.txt public/og-image.svg
git commit -m "Add BaseLayout with meta tags, favicon, robots.txt, and OG card"
```

---

## Task 6: Shared building blocks — header, footer, CTAs, topographic background

**Files:**
- Create: `src/components/SiteHeader.astro`
- Create: `src/components/SiteFooter.astro`
- Create: `src/components/CTAButtons.astro`
- Create: `src/components/TopographicBg.astro`

- [ ] **Step 1: Write `src/components/CTAButtons.astro`**

```astro
---
import { getAuthConfig } from '../config/auth';

interface Props {
  variant?: 'primary' | 'inverted';
  size?: 'md' | 'lg';
  showSecondary?: boolean;
  primaryLabel?: string;
  secondaryLabel?: string;
  secondaryHref?: string;
}

const auth = getAuthConfig();

const {
  variant = 'primary',
  size = 'md',
  showSecondary = true,
  primaryLabel = 'Start free trial',
  secondaryLabel = 'Sign in',
  secondaryHref = auth.signInUrl,
} = Astro.props;

const padY = size === 'lg' ? 'py-3' : 'py-2';
const padX = size === 'lg' ? 'px-6' : 'px-5';
const fontSize = size === 'lg' ? 'text-base' : 'text-sm';
---
<div class="flex flex-wrap items-center gap-3">
  <a
    href={auth.signUpUrl}
    class={`inline-flex items-center justify-center rounded ${padX} ${padY} ${fontSize} font-semibold transition-colors
      ${variant === 'primary'
        ? 'bg-accent text-bg hover:bg-accent-muted focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg'
        : 'bg-bg text-accent border border-accent hover:bg-accent hover:text-bg'
      }`}
  >
    {primaryLabel}
  </a>
  {showSecondary && (
    <a
      href={secondaryHref}
      class={`inline-flex items-center justify-center rounded ${padX} ${padY} ${fontSize} font-medium text-text border border-border-strong hover:border-accent hover:text-accent transition-colors`}
    >
      {secondaryLabel}
    </a>
  )}
</div>
```

- [ ] **Step 2: Write `src/components/SiteHeader.astro`**

```astro
---
import CTAButtons from './CTAButtons.astro';
---
<header class="sticky top-0 z-40 backdrop-blur-md bg-bg/80 border-b border-border">
  <div class="max-w-content mx-auto px-6 h-16 flex items-center justify-between gap-6">
    <a href="/" class="flex items-center gap-2 group" aria-label="Cameleer home">
      <svg width="28" height="28" viewBox="0 0 32 32" aria-hidden="true">
        <rect width="32" height="32" rx="6" fill="#0c111a"/>
        <g fill="none" stroke="#f0b429" stroke-width="1.6" stroke-linecap="round">
          <path d="M4 10 Q10 6 16 12 T28 10"/>
          <path d="M4 16 Q10 12 16 18 T28 16"/>
          <path d="M4 22 Q10 18 16 24 T28 22"/>
        </g>
      </svg>
      <span class="font-sans font-bold text-lg tracking-tight text-text group-hover:text-accent transition-colors">Cameleer</span>
    </a>
    <nav class="flex items-center gap-8 text-sm">
      <a href="/pricing" class="text-text-muted hover:text-text transition-colors">Pricing</a>
    </nav>
    <CTAButtons size="md" />
  </div>
</header>
```

- [ ] **Step 3: Write `src/components/SiteFooter.astro`**

```astro
---
const year = new Date().getFullYear();
---
<footer class="border-t border-border mt-24">
  <div class="max-w-content mx-auto px-6 py-12 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
    <div class="flex items-center gap-3">
      <svg width="24" height="24" viewBox="0 0 32 32" aria-hidden="true">
        <rect width="32" height="32" rx="6" fill="#0c111a"/>
        <g fill="none" stroke="#f0b429" stroke-width="1.6" stroke-linecap="round">
          <path d="M4 10 Q10 6 16 12 T28 10"/>
          <path d="M4 16 Q10 12 16 18 T28 16"/>
          <path d="M4 22 Q10 18 16 24 T28 22"/>
        </g>
      </svg>
      <span class="text-text-muted text-sm">© {year} Cameleer</span>
    </div>
    <nav class="flex items-center gap-8 text-sm text-text-muted">
      <a href="/pricing" class="hover:text-text transition-colors">Pricing</a>
      <a href="/imprint" class="hover:text-text transition-colors">Imprint</a>
      <a href="/privacy" class="hover:text-text transition-colors">Privacy</a>
    </nav>
  </div>
</footer>
```

- [ ] **Step 4: Write `src/components/TopographicBg.astro`**

```astro
---
interface Props {
  opacity?: number;
  lines?: number;
}
const { opacity = 0.12, lines = 8 } = Astro.props;

const paths: string[] = [];
const stepY = 100 / (lines + 1);
for (let i = 1; i <= lines; i++) {
  const y = i * stepY;
  const amp = 4 + (i % 3) * 2;
  paths.push(`M0,${y} Q25,${y - amp} 50,${y + amp * 0.6} T100,${y}`);
}
---
<svg
  class="absolute inset-0 w-full h-full pointer-events-none"
  viewBox="0 0 100 100"
  preserveAspectRatio="none"
  aria-hidden="true"
  style={`opacity:${opacity}`}
>
  <g fill="none" stroke="#f0b429" stroke-width="0.15" vector-effect="non-scaling-stroke">
    {paths.map((d) => <path d={d} />)}
  </g>
</svg>
```

- [ ] **Step 5: Build to verify no syntax errors**

```bash
npm run build
```

Expected: build succeeds. No component is wired into a page yet — this task only adds building blocks.

- [ ] **Step 6: Commit**

```bash
git add src/components/SiteHeader.astro src/components/SiteFooter.astro src/components/CTAButtons.astro src/components/TopographicBg.astro
git commit -m "Add shared building-block components: header, footer, CTAs, topographic background"
```

---

## Task 7: RouteDiagram SVG (the hero artifact)

**Files:**
- Create: `src/components/RouteDiagram.astro`

This is the single highest-impact visual in the site. It is Cameleer's unique artifact rendered as inline SVG — no screenshots, no raster assets.

- [ ] **Step 1: Write `src/components/RouteDiagram.astro`**

```astro
---
// A stylized Camel route topology. Two linked routes with a cross-route
// (cyan, dashed) reference — the signature Cameleer diagnostic that a
// generic APM cannot produce.
---
<div class="relative w-full aspect-[16/10] max-w-3xl mx-auto">
  <svg viewBox="0 0 800 500" class="w-full h-full" role="img" aria-label="Camel route topology with cross-route reference">
    <defs>
      <marker id="arrow-amber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M0,0 L10,5 L0,10 z" fill="#f0b429"/>
      </marker>
      <marker id="arrow-cyan" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M0,0 L10,5 L0,10 z" fill="#5cc8ff"/>
      </marker>
      <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="4" result="b"/>
        <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>

    {/* Route labels */}
    <text x="40" y="80" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="13" letter-spacing="1">▸ order-ingest</text>
    <text x="40" y="340" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="13" letter-spacing="1">▸ pricing-enrich</text>

    {/* Route 1 edges */}
    <line x1="100" y1="130" x2="230" y2="130" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="280" y1="130" x2="380" y2="90" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="280" y1="130" x2="380" y2="170" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="430" y1="90" x2="560" y2="90" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="430" y1="170" x2="560" y2="170" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="610" y1="130" x2="720" y2="130" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>

    {/* Route 1 nodes */}
    <g>
      <circle cx="90" cy="130" r="18" fill="#060a13" stroke="#f0b429" stroke-width="2" filter="url(#glow)"/>
      <text x="90" y="110" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">kafka</text>
      <text x="90" y="160" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">from</text>

      <rect x="240" y="115" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="265" y="134" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">choice</text>

      <rect x="380" y="75" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="405" y="94" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">bean</text>
      <text x="405" y="65" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="9" text-anchor="middle">premium</text>

      <rect x="380" y="155" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="405" y="174" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">bean</text>
      <text x="405" y="206" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="9" text-anchor="middle">standard</text>

      <rect x="560" y="75" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="585" y="94" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">log</text>

      <rect x="560" y="155" width="50" height="30" rx="4" fill="#060a13" stroke="#5cc8ff" stroke-width="1.8"/>
      <text x="585" y="174" fill="#5cc8ff" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">http</text>

      <circle cx="735" cy="130" r="14" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="735" y="160" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">to</text>
    </g>

    {/* Cross-route dashed cyan link */}
    <path
      d="M 585 185 C 585 290, 300 250, 230 340"
      stroke="#5cc8ff"
      stroke-width="2"
      stroke-dasharray="6 4"
      fill="none"
      marker-end="url(#arrow-cyan)"
      opacity="0.9"
    />
    <text x="430" y="255" fill="#5cc8ff" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">cross-route correlation</text>

    {/* Route 2 edges */}
    <line x1="100" y1="390" x2="230" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="280" y1="390" x2="380" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="430" y1="390" x2="560" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="610" y1="390" x2="720" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>

    {/* Route 2 nodes */}
    <g>
      <circle cx="230" cy="390" r="14" fill="#060a13" stroke="#5cc8ff" stroke-width="1.8"/>
      <text x="230" y="418" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">rest</text>
      <text x="230" y="370" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">from</text>

      <rect x="330" y="375" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="355" y="394" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">enrich</text>

      <rect x="480" y="375" width="80" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="520" y="394" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">transform</text>

      <circle cx="735" cy="390" r="14" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="735" y="418" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">to</text>
      <text x="735" y="370" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">kafka</text>
    </g>
  </svg>
</div>
```

- [ ] **Step 2: Build**

```bash
npm run build
```

Expected: build succeeds, no errors.

- [ ] **Step 3: Commit**

```bash
git add src/components/RouteDiagram.astro
git commit -m "Add RouteDiagram hero SVG: 2 Camel routes with cross-route correlation"
```

---

## Task 8: Homepage section — Hero

**Files:**
- Create: `src/components/sections/Hero.astro`

**Audience lean:** both. Outcome in the headline, capability in the subhead.

- [ ] **Step 1: Write `src/components/sections/Hero.astro`**

```astro
---
import CTAButtons from '../CTAButtons.astro';
import RouteDiagram from '../RouteDiagram.astro';
import TopographicBg from '../TopographicBg.astro';
---
<section class="relative overflow-hidden border-b border-border">
  <TopographicBg opacity={0.14} lines={10} />
  <div class="relative max-w-content mx-auto px-6 pt-20 pb-24 md:pt-28 md:pb-32">
    <div class="max-w-3xl">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-6">
        Observability · Apache Camel
      </p>
      <h1 class="font-display font-bold text-text mb-6">
        See every route.<br />
        Reach into every flow.
      </h1>
      <p class="text-lg md:text-xl text-text-muted max-w-prose leading-relaxed mb-10">
        Zero-code tracing, processor-level detail, and live control for Apache Camel —
        from a single <code class="font-mono text-accent bg-bg-elevated border border-border rounded px-1.5 py-0.5 text-base">-javaagent</code> flag.
      </p>
      <CTAButtons size="lg" />
    </div>
    <div class="mt-16 md:mt-20">
      <RouteDiagram />
    </div>
  </div>
</section>
```

- [ ] **Step 2: Build and visually check**

```bash
npm run build && npm run preview &
sleep 2
```

Open http://localhost:4321/ — this still shows the scaffold page until Task 13 assembles the homepage. Stop preview: `kill %1`.

- [ ] **Step 3: Commit**

```bash
git add src/components/sections/Hero.astro
git commit -m "Add homepage Hero section — headline, subhead, CTAs, diagram"
```

---

## Task 9: Homepage section — DualValueProps

**Files:**
- Create: `src/components/sections/DualValueProps.astro`

**Audience lean:** both. Each tile pairs an outcome (manager) with a capability (engineer). Copy is drafted from `STRATEGY.md` and the product memory context.

- [ ] **Step 1: Write `src/components/sections/DualValueProps.astro`**

```astro
---
interface Tile {
  outcome: string;
  capability: string;
}

const tiles: Tile[] = [
  {
    outcome: 'Cut debugging time in half.',
    capability:
      'Every processor on every route, timed to the nanosecond. Choice branches, splits, multicasts, and error handlers preserved as a proper execution tree — not a pile of log lines.',
  },
  {
    outcome: 'Ship integrations with confidence.',
    capability:
      'Capture real payloads and replay them on demand. Deep-trace a specific correlation ID across services. Push trace settings to a running agent without a redeploy.',
  },
  {
    outcome: 'Keep what you have built.',
    capability:
      'One `-javaagent` flag. No code changes, no SDK, no framework lock-in. Native understanding of 45+ EIP node types across Apache Camel 4.x.',
  },
];
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="grid md:grid-cols-3 gap-6 md:gap-8">
      {tiles.map((tile) => (
        <div class="rounded-lg border border-border bg-bg-elevated p-7 md:p-8 hover:border-border-strong transition-colors">
          <h2 class="text-xl md:text-2xl font-bold text-text mb-3 leading-snug">
            {tile.outcome}
          </h2>
          <p class="text-text-muted leading-relaxed" set:html={tile.capability.replace(/`([^`]+)`/g, '<code class="font-mono text-accent bg-bg border border-border rounded px-1 py-0.5 text-sm">$1</code>')}></p>
        </div>
      ))}
    </div>
  </div>
</section>
```

- [ ] **Step 2: Build**

```bash
npm run build
```

- [ ] **Step 3: Commit**

```bash
git add src/components/sections/DualValueProps.astro
git commit -m "Add DualValueProps section — 3 tiles pairing outcomes with capabilities"
```

---

## Task 10: Homepage section — HowItWorks

**Files:**
- Create: `src/components/sections/HowItWorks.astro`

**Audience lean:** engineer. Three numbered steps.

- [ ] **Step 1: Write `src/components/sections/HowItWorks.astro`**

```astro
---
interface Step {
  n: string;
  title: string;
  body: string;
  code?: string;
}

const steps: Step[] = [
  {
    n: '01',
    title: 'Add the agent',
    body: 'Drop the Cameleer agent JAR alongside your Camel app and start it with a single flag. That is the entire installation.',
    code: 'java \\\n  -javaagent:cameleer-agent.jar \\\n  -jar your-camel-app.jar',
  },
  {
    n: '02',
    title: 'Launch your app',
    body: 'Every route, processor, exchange, and route graph is discovered and reported automatically. Configurable redaction keeps sensitive fields out of the trace.',
  },
  {
    n: '03',
    title: 'See it in Mission Control',
    body: 'Browse executions, tap live traffic, replay failed exchanges, and follow flows across services. Nothing to instrument, nothing to maintain.',
  },
];
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-16">
      <p class="text-cyan font-mono text-xs tracking-[0.25em] uppercase mb-4">For engineers</p>
      <h2 class="font-hero font-bold text-text mb-4">How it works</h2>
      <p class="text-text-muted text-lg">Three steps. No code changes. Works across Camel 4.x.</p>
    </div>
    <ol class="grid md:grid-cols-3 gap-6 md:gap-8">
      {steps.map((step) => (
        <li class="relative rounded-lg border border-border bg-bg-elevated p-7">
          <div class="font-mono text-accent text-sm tracking-wider mb-3">{step.n}</div>
          <h3 class="text-lg font-bold text-text mb-3">{step.title}</h3>
          <p class="text-text-muted leading-relaxed mb-4">{step.body}</p>
          {step.code && (
            <pre class="font-mono text-xs md:text-sm bg-bg border border-border rounded px-4 py-3 text-text-muted overflow-x-auto leading-relaxed"><code>{step.code}</code></pre>
          )}
        </li>
      ))}
    </ol>
  </div>
</section>
```

- [ ] **Step 2: Build**

```bash
npm run build
```

- [ ] **Step 3: Commit**

```bash
git add src/components/sections/HowItWorks.astro
git commit -m "Add HowItWorks section — 3-step engineer-facing walkthrough"
```

---

## Task 11: Homepage section — WhyUs (moat + nJAMS pedigree)

**Files:**
- Create: `src/components/sections/WhyUs.astro`

**Audience lean:** manager. Two halves: the moat, the team.

- [ ] **Step 1: Write `src/components/sections/WhyUs.astro`**

```astro
---
// Final nJAMS-legacy wording is subject to Hendrik's trademark review before go-live
// (see docs/superpowers/specs/2026-04-24-cameleer-website-design.md §10).
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-16">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Why Cameleer</p>
      <h2 class="font-hero font-bold text-text mb-4">
        A purpose-built tool, from the team that has built integration observability before.
      </h2>
    </div>
    <div class="grid md:grid-cols-2 gap-8 md:gap-12">
      <div class="rounded-lg border border-border bg-bg-elevated p-8">
        <h3 class="text-xl font-bold text-text mb-4">Generic APMs do not understand Camel. Cameleer does.</h3>
        <p class="text-text-muted leading-relaxed mb-4">
          Our Java agent speaks 45+ Apache Camel EIP node types natively — choices, splits, multicasts, doTry, error handlers, dynamic endpoints, thread boundaries in async routes. It extracts your route topology as a first-class graph, not a pile of metrics.
        </p>
        <p class="text-text-muted leading-relaxed">
          A bidirectional protocol lets the server push deep-trace requests, per-route recording toggles, and signed config changes back to running agents — turning passive observability into active control. Not something you build in a weekend.
        </p>
      </div>
      <div class="rounded-lg border border-border bg-bg-elevated p-8">
        <h3 class="text-xl font-bold text-text mb-4">Built by people who have shipped this class of product before.</h3>
        <p class="text-text-muted leading-relaxed mb-4">
          The Cameleer team spent years building and supporting integration monitoring for banks, insurers, and logistics operators. We know what integration teams actually need at 3 AM — and what they never use.
        </p>
        <p class="text-text-muted leading-relaxed">
          Cameleer is what we would build today, purpose-built for Apache Camel — no legacy, no retrofit, no assumptions about a generic middleware platform.
        </p>
      </div>
    </div>
  </div>
</section>
```

- [ ] **Step 2: Build**

```bash
npm run build
```

- [ ] **Step 3: Commit**

```bash
git add src/components/sections/WhyUs.astro
git commit -m "Add WhyUs section — moat (zero-code, bidirectional) + team pedigree"
```

---

## Task 12: Homepage section — PricingTeaser

**Files:**
- Create: `src/components/sections/PricingTeaser.astro`

**Audience lean:** manager. 4 tier mini-cards linking to `/pricing`.

- [ ] **Step 1: Write `src/components/sections/PricingTeaser.astro`**

```astro
---
import { getAuthConfig } from '../../config/auth';

interface Tier {
  name: string;
  price: string;
  sub: string;
  href: string;
  cta: string;
  highlight?: boolean;
}

const auth = getAuthConfig();

const tiers: Tier[] = [
  {
    name: 'Trial',
    price: 'Free',
    sub: '14 days · 1 environment · 2 apps',
    href: auth.signUpUrl,
    cta: 'Start free trial',
  },
  {
    name: 'MID',
    price: '20 € /mo',
    sub: '2 environments · 10 apps · 7-day retention',
    href: auth.signUpUrl,
    cta: 'Start on MID',
    highlight: true,
  },
  {
    name: 'HIGH',
    price: 'Contact',
    sub: 'Unlimited envs · 50 apps · 90-day retention · Debugger, Replay',
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
  {
    name: 'BUSINESS',
    price: 'Contact',
    sub: 'Unlimited everything · 365-day retention · all features',
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
];
---
<section class="border-b border-border">
  <div class="max-w-content mx-auto px-6 py-20 md:py-24">
    <div class="max-w-2xl mb-12">
      <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Pricing</p>
      <h2 class="font-hero font-bold text-text mb-4">Start free. Grow when you need to.</h2>
      <p class="text-text-muted text-lg">
        No credit card for the trial.
        <a href="/pricing" class="text-accent hover:underline">See full comparison →</a>
      </p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-5">
      {tiers.map((tier) => (
        <div class={`rounded-lg border bg-bg-elevated p-6 flex flex-col ${tier.highlight ? 'border-accent' : 'border-border'}`}>
          <div class="mb-4">
            <div class="font-mono text-xs tracking-wider text-text-muted mb-2">{tier.name.toUpperCase()}</div>
            <div class="text-2xl font-bold text-text">{tier.price}</div>
          </div>
          <p class="text-text-muted text-sm leading-relaxed flex-grow mb-5">{tier.sub}</p>
          <a
            href={tier.href}
            class={`inline-flex items-center justify-center rounded px-4 py-2 text-sm font-semibold transition-colors
              ${tier.highlight
                ? 'bg-accent text-bg hover:bg-accent-muted'
                : 'border border-border-strong text-text hover:border-accent hover:text-accent'}`}
          >
            {tier.cta}
          </a>
        </div>
      ))}
    </div>
  </div>
</section>
```

- [ ] **Step 2: Build**

```bash
npm run build
```

- [ ] **Step 3: Commit**

```bash
git add src/components/sections/PricingTeaser.astro
git commit -m "Add PricingTeaser section — 4 tier mini-cards linking to /pricing"
```

---

## Task 13: Homepage section — FinalCTA + assembled `index.astro`

**Files:**
- Create: `src/components/sections/FinalCTA.astro`
- Modify: `src/pages/index.astro`

- [ ] **Step 1: Write `src/components/sections/FinalCTA.astro`**

```astro
---
import CTAButtons from '../CTAButtons.astro';
import TopographicBg from '../TopographicBg.astro';
---
<section class="relative overflow-hidden">
  <TopographicBg opacity={0.18} lines={6} />
  <div class="relative max-w-content mx-auto px-6 py-24 md:py-32 text-center">
    <h2 class="font-display font-bold text-text mb-6">
      Start seeing your routes.
    </h2>
    <p class="text-lg md:text-xl text-text-muted max-w-prose mx-auto mb-10">
      14-day free trial. Your first app, instrumented and live in under 10 minutes.
    </p>
    <div class="flex justify-center">
      <CTAButtons size="lg" />
    </div>
  </div>
</section>
```

- [ ] **Step 2: Overwrite `src/pages/index.astro` with the assembled homepage**

```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro';
import Hero from '../components/sections/Hero.astro';
import DualValueProps from '../components/sections/DualValueProps.astro';
import HowItWorks from '../components/sections/HowItWorks.astro';
import WhyUs from '../components/sections/WhyUs.astro';
import PricingTeaser from '../components/sections/PricingTeaser.astro';
import FinalCTA from '../components/sections/FinalCTA.astro';
---
<BaseLayout
  title="Cameleer — Zero-code observability for Apache Camel"
  description="See every route. Reach into every flow. Zero-code tracing, processor-level detail, and live control for Apache Camel — from a single -javaagent flag."
>
  <SiteHeader />
  <main>
    <Hero />
    <DualValueProps />
    <HowItWorks />
    <WhyUs />
    <PricingTeaser />
    <FinalCTA />
  </main>
  <SiteFooter />
</BaseLayout>
```

- [ ] **Step 3: Build and preview**

```bash
npm run build && npm run preview &
sleep 2
curl -sI http://localhost:4321/ | head -15
curl -s http://localhost:4321/ | grep -E '(See every route|Cut debugging|How it works|Why Cameleer|Start free|cameleer\.io)'
kill %1
```

Expected: all section headlines present in the rendered HTML.

- [ ] **Step 4: Commit**

```bash
git add src/components/sections/FinalCTA.astro src/pages/index.astro
git commit -m "Assemble homepage — Hero, DualValueProps, HowItWorks, WhyUs, PricingTeaser, FinalCTA"
```

---

## Task 14: Pricing page

**Files:**
- Create: `src/pages/pricing.astro`

- [ ] **Step 1: Write `src/pages/pricing.astro`**

```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro';
import TopographicBg from '../components/TopographicBg.astro';
import { getAuthConfig } from '../config/auth';

interface FullTier {
  name: string;
  price: string;
  priceNote: string;
  envs: string;
  apps: string;
  retention: string;
  features: string[];
  href: string;
  cta: string;
  highlight?: boolean;
}

const auth = getAuthConfig();

const tiers: FullTier[] = [
  {
    name: 'Trial',
    price: 'Free',
    priceNote: '14 days',
    envs: '1 environment',
    apps: '2 apps',
    retention: '1-day retention',
    features: ['Route topology', 'Processor-level tracing', 'Payload capture with redaction'],
    href: auth.signUpUrl,
    cta: 'Start free trial',
  },
  {
    name: 'MID',
    price: '20 €',
    priceNote: 'per month',
    envs: '2 environments',
    apps: '10 apps',
    retention: '7-day retention',
    features: ['Everything in Trial', 'Data flow lineage', 'Cross-service correlation'],
    href: auth.signUpUrl,
    cta: 'Start on MID',
    highlight: true,
  },
  {
    name: 'HIGH',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: '50 apps',
    retention: '90-day retention',
    features: ['Everything in MID', 'Live debugger', 'Exchange replay', 'Live tap'],
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
  {
    name: 'BUSINESS',
    price: 'Contact',
    priceNote: 'sales',
    envs: 'Unlimited environments',
    apps: 'Unlimited apps',
    retention: '365-day retention',
    features: ['Everything in HIGH', 'Priority support', 'SLA', 'Dedicated success contact'],
    href: auth.salesMailto,
    cta: 'Talk to sales',
  },
];
---
<BaseLayout
  title="Pricing — Cameleer"
  description="Simple pricing for Apache Camel observability. Free 14-day trial, then 20 €/month or enterprise plans."
>
  <SiteHeader />
  <main>
    <section class="relative overflow-hidden border-b border-border">
      <TopographicBg opacity={0.12} lines={8} />
      <div class="relative max-w-content mx-auto px-6 pt-20 pb-12">
        <p class="text-accent font-mono text-xs tracking-[0.25em] uppercase mb-4">Pricing</p>
        <h1 class="font-display font-bold text-text mb-6">Priced so engineers can say yes.</h1>
        <p class="text-lg text-text-muted max-w-prose">
          Start free for 14 days. No credit card required. Move up when you need more apps, longer retention, or enterprise features.
        </p>
      </div>
    </section>

    <section>
      <div class="max-w-content mx-auto px-6 py-16">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {tiers.map((tier) => (
            <div class={`rounded-lg border bg-bg-elevated p-7 flex flex-col ${tier.highlight ? 'border-accent' : 'border-border'}`}>
              <div class="mb-6">
                <div class="font-mono text-xs tracking-wider text-text-muted mb-3">{tier.name.toUpperCase()}</div>
                <div class="flex items-baseline gap-2">
                  <span class="text-3xl font-bold text-text">{tier.price}</span>
                  <span class="text-sm text-text-muted">{tier.priceNote}</span>
                </div>
              </div>
              <ul class="text-sm space-y-2 mb-6 text-text-muted flex-grow">
                <li><span class="text-text">{tier.envs}</span></li>
                <li><span class="text-text">{tier.apps}</span></li>
                <li><span class="text-text">{tier.retention}</span></li>
                <li class="pt-3 border-t border-border mt-3"></li>
                {tier.features.map((f) => <li>• {f}</li>)}
              </ul>
              <a
                href={tier.href}
                class={`inline-flex items-center justify-center rounded px-4 py-2.5 text-sm font-semibold transition-colors
                  ${tier.highlight
                    ? 'bg-accent text-bg hover:bg-accent-muted'
                    : 'border border-border-strong text-text hover:border-accent hover:text-accent'}`}
              >
                {tier.cta}
              </a>
            </div>
          ))}
        </div>
        <p class="text-center text-text-faint text-sm mt-10">
          Prices in EUR, excluding VAT. Billed monthly. Annual billing available for HIGH and BUSINESS — <a href={auth.salesMailto} class="text-accent hover:underline">talk to sales</a>.
        </p>
      </div>
    </section>
  </main>
  <SiteFooter />
</BaseLayout>
```

- [ ] **Step 2: Build and verify**

```bash
npm run build
test -f dist/pricing.html && echo "pricing.html built" || echo "MISSING"
```

Expected: "pricing.html built".

- [ ] **Step 3: Commit**

```bash
git add src/pages/pricing.astro
git commit -m "Add pricing page with 4-tier comparison cards"
```

---

## Task 15: Imprint page

**Files:**
- Create: `src/pages/imprint.astro`

This page is TMG §5 compliant. Legal fields (name, address, VAT ID, contact) are placeholders to be filled in with Hendrik's real details **before public go-live** — not in this automated task. Placeholders are explicit and obvious so they cannot accidentally ship.

- [ ] **Step 1: Write `src/pages/imprint.astro`**

```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro';

// Imprint (Impressum) per TMG §5 / DDG §5.
// Values prefixed "<TBD:" MUST be replaced with real operator data before go-live.
// See docs/superpowers/specs/2026-04-24-cameleer-website-design.md §6.4.
const operator = {
  legalName: '<TBD: legal name of operating entity>',
  streetAddress: '<TBD: street and number>',
  postalCity: '<TBD: postal code and city>',
  country: 'Germany',
  email: '<TBD: contact email>',
  phone: '<TBD: phone (optional but recommended)>',
  vatId: '<TBD: VAT ID per §27a UStG, or "not applicable">',
  registerEntry: '<TBD: commercial register + court, or "not applicable">',
  responsibleForContent: '<TBD: responsible party per §18 Abs. 2 MStV>',
};
---
<BaseLayout
  title="Imprint — Cameleer"
  description="Legal imprint (Impressum) for Cameleer per German TMG §5 / DDG §5."
>
  <SiteHeader />
  <main class="max-w-prose mx-auto px-6 py-16 md:py-24">
    <h1 class="font-hero font-bold text-text mb-8">Imprint</h1>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">Information pursuant to § 5 TMG / § 5 DDG</h2>
      <address class="not-italic text-text-muted leading-relaxed">
        {operator.legalName}<br />
        {operator.streetAddress}<br />
        {operator.postalCity}<br />
        {operator.country}
      </address>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">Contact</h2>
      <ul class="text-text-muted space-y-1">
        <li>Email: <span class="font-mono text-accent">{operator.email}</span></li>
        <li>Phone: {operator.phone}</li>
      </ul>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">VAT ID</h2>
      <p class="text-text-muted">
        VAT identification number pursuant to § 27 a UStG: <span class="font-mono">{operator.vatId}</span>
      </p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">Commercial register</h2>
      <p class="text-text-muted">{operator.registerEntry}</p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">Responsible for content per § 18 Abs. 2 MStV</h2>
      <p class="text-text-muted">{operator.responsibleForContent}</p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">EU dispute resolution</h2>
      <p class="text-text-muted">
        The European Commission provides a platform for online dispute resolution (ODR) at
        <a href="https://ec.europa.eu/consumers/odr/" class="text-accent hover:underline">https://ec.europa.eu/consumers/odr/</a>.
        We are not obligated and do not participate in dispute resolution proceedings before a consumer arbitration board.
      </p>
    </section>

    <section>
      <h2 class="text-lg font-bold text-text mb-3">Liability for content and links</h2>
      <p class="text-text-muted leading-relaxed mb-4">
        As a service provider, we are responsible for our own content on these pages in accordance with § 7 para. 1 TMG and general laws. According to §§ 8 to 10 TMG, however, we are not obligated to monitor transmitted or stored third-party information or to investigate circumstances that indicate unlawful activity.
      </p>
      <p class="text-text-muted leading-relaxed">
        Our website contains links to external websites of third parties, on whose contents we have no influence. Therefore, we cannot assume any liability for these external contents. The respective provider or operator of the pages is always responsible for the content of linked pages.
      </p>
    </section>
  </main>
  <SiteFooter />
</BaseLayout>
```

- [ ] **Step 2: Build and verify**

```bash
npm run build
test -f dist/imprint.html && echo "imprint.html built" || echo "MISSING"
grep -c '<TBD:' dist/imprint.html
```

Expected: "imprint.html built", and the count of `<TBD:` markers is >= 6 — proving placeholders are visible and cannot slip through to production unchanged.

- [ ] **Step 3: Commit**

```bash
git add src/pages/imprint.astro
git commit -m "Add imprint page (TMG §5 / DDG §5 structure, operator fields marked <TBD>)"
```

---

## Task 16: Privacy Policy page

**Files:**
- Create: `src/pages/privacy.astro`

- [ ] **Step 1: Write `src/pages/privacy.astro`**

```astro
---
import BaseLayout from '../layouts/BaseLayout.astro';
import SiteHeader from '../components/SiteHeader.astro';
import SiteFooter from '../components/SiteFooter.astro';

const operatorContact = '<TBD: controller contact email (same as imprint)>';
const lastUpdated = '2026-04-24';
---
<BaseLayout
  title="Privacy Policy — Cameleer"
  description="Privacy policy for www.cameleer.io — what personal data we process (and don't), legal basis, and your rights under GDPR."
>
  <SiteHeader />
  <main class="max-w-prose mx-auto px-6 py-16 md:py-24">
    <h1 class="font-hero font-bold text-text mb-2">Privacy Policy</h1>
    <p class="text-text-faint text-sm mb-10">Last updated: {lastUpdated}</p>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">1. Overview</h2>
      <p class="text-text-muted leading-relaxed">
        This policy describes what personal data is processed when you visit <span class="font-mono text-accent">www.cameleer.io</span>. Our goal is to collect as little data as technically possible.
        <strong class="text-text">We do not set cookies. We do not run analytics scripts. We have no forms on this site.</strong>
        If and when that changes, this policy will be updated and the change noted in the "Last updated" date above.
      </p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">2. Controller</h2>
      <p class="text-text-muted leading-relaxed">
        The data controller responsible for processing on this site is the operator listed in our
        <a href="/imprint" class="text-accent hover:underline">imprint</a>.
        Contact for privacy matters: <span class="font-mono text-accent">{operatorContact}</span>.
      </p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">3. Server access logs</h2>
      <p class="text-text-muted leading-relaxed mb-3">
        When you access this site, our hosting provider (Hetzner Online GmbH, Germany) automatically records standard access log data in order to operate and secure the service:
      </p>
      <ul class="list-disc list-inside text-text-muted space-y-1 ml-2">
        <li>IP address</li>
        <li>Date and time of the request</li>
        <li>HTTP method, requested path, and response status</li>
        <li>User-agent string and referrer</li>
      </ul>
      <p class="text-text-muted leading-relaxed mt-3">
        Legal basis: Art. 6(1)(f) GDPR (legitimate interest in operating and securing the service). Logs are retained for the duration applied by our hosting provider and are not combined with other data sources.
      </p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">4. Content delivery via Cloudflare</h2>
      <p class="text-text-muted leading-relaxed">
        This site is delivered through Cloudflare, Inc. (101 Townsend St, San Francisco, CA 94107, USA). Cloudflare inspects incoming traffic for security and performance purposes (DDoS protection, WAF, caching). Processing is governed by a Data Processing Agreement and the EU Standard Contractual Clauses.
        Legal basis: Art. 6(1)(f) GDPR (legitimate interest in availability and security).
      </p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">5. Cookies</h2>
      <p class="text-text-muted leading-relaxed">
        This site sets no cookies and uses no browser storage of any kind. No consent banner is required because no consent-requiring technology is in use.
      </p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">6. External links</h2>
      <p class="text-text-muted leading-relaxed">
        Sign-in and sign-up links on this site navigate you to <span class="font-mono text-accent">auth.cameleer.io</span> (Logto identity service) and subsequently <span class="font-mono text-accent">platform.cameleer.io</span>. Those services have their own privacy policies, which apply from the moment you arrive there.
      </p>
    </section>

    <section class="mb-10">
      <h2 class="text-lg font-bold text-text mb-3">7. Your rights</h2>
      <p class="text-text-muted leading-relaxed mb-3">
        Under the GDPR, you have the right to:
      </p>
      <ul class="list-disc list-inside text-text-muted space-y-1 ml-2">
        <li>request access to personal data we process about you (Art. 15)</li>
        <li>request rectification of inaccurate data (Art. 16)</li>
        <li>request erasure of your data (Art. 17)</li>
        <li>request restriction of processing (Art. 18)</li>
        <li>object to processing based on legitimate interest (Art. 21)</li>
        <li>lodge a complaint with a supervisory authority (Art. 77)</li>
      </ul>
      <p class="text-text-muted leading-relaxed mt-3">
        Contact us at <span class="font-mono text-accent">{operatorContact}</span> to exercise any of these rights.
      </p>
    </section>

    <section>
      <h2 class="text-lg font-bold text-text mb-3">8. Changes to this policy</h2>
      <p class="text-text-muted leading-relaxed">
        We may update this policy as our data processing changes (for example, if we later add analytics). The "Last updated" date at the top of this page reflects the most recent revision.
      </p>
    </section>
  </main>
  <SiteFooter />
</BaseLayout>
```

- [ ] **Step 2: Build and verify**

```bash
npm run build
test -f dist/privacy.html && echo "privacy.html built" || echo "MISSING"
```

- [ ] **Step 3: Commit**

```bash
git add src/pages/privacy.astro
git commit -m "Add privacy policy page (GDPR-aligned, no-cookies posture documented)"
```

---

## Task 17: Apache `.htaccess` for the origin

**Files:**
- Create: `public/.htaccess`

- [ ] **Step 1: Write `public/.htaccess`**

```apache
# ---------------------------------------------------------------
# www.cameleer.io — Apache config at the Hetzner origin.
# Defense in depth: Cloudflare handles most of this at the edge;
# these rules make sure the origin is hardened even without the CDN.
# ---------------------------------------------------------------

# Enable rewriting
RewriteEngine On

# Force HTTPS — redundant with Cloudflare but belts-and-braces.
RewriteCond %{HTTPS} !=on
RewriteCond %{HTTP:X-Forwarded-Proto} !=https
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Redirect apex -> www.
RewriteCond %{HTTP_HOST} ^cameleer\.io$ [NC]
RewriteRule ^(.*)$ https://www.cameleer.io/$1 [L,R=301]

# Disable directory listings.
Options -Indexes

# Block access to dotfiles and sensitive extensions that should never be here.
<FilesMatch "^\.|\.(env|ini|log|sh|bak|sql|git)$">
    Require all denied
</FilesMatch>

# Prevent MIME sniffing, clickjacking, etc. (primary copy also comes from Astro middleware
# and Cloudflare Transform Rules — these apply if either layer is bypassed).
<IfModule mod_headers.c>
    Header always set X-Content-Type-Options "nosniff"
    Header always set X-Frame-Options "DENY"
    Header always set Referrer-Policy "strict-origin-when-cross-origin"
    Header always set Permissions-Policy "geolocation=(), microphone=(), camera=(), payment=(), usb=()"
    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"

    # Cache hashed build assets aggressively; HTML must be revalidated.
    <FilesMatch "\.(css|js|woff2|svg|png|jpg|jpeg|webp|ico)$">
        Header set Cache-Control "public, max-age=31536000, immutable"
    </FilesMatch>
    <FilesMatch "\.html$">
        Header set Cache-Control "public, max-age=3600, must-revalidate"
    </FilesMatch>

    # Remove Server header leak where possible.
    Header unset X-Powered-By
</IfModule>

# Compression (Hetzner supports mod_deflate).
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml text/plain
</IfModule>

# Custom error pages (optional — fall back to default if not present).
ErrorDocument 404 /404.html
ErrorDocument 403 /404.html
```

- [ ] **Step 2: Verify it ends up in `dist/`**

```bash
npm run build
test -f dist/.htaccess && echo "OK" || echo "MISSING — check Astro's public/ passthrough"
```

Expected: "OK". Astro copies `public/` verbatim into `dist/`.

- [ ] **Step 3: Commit**

```bash
git add public/.htaccess
git commit -m "Add .htaccess for origin hardening, HTTPS redirect, and cache headers"
```

---

## Task 18: CI quality gates — HTML validate + link check

**Files:**
- Create: `.htmlvalidate.json`
- Create: `linkinator.config.json`

- [ ] **Step 1: Write `.htmlvalidate.json`**

```json
{
  "extends": ["html-validate:recommended"],
  "rules": {
    "require-sri": "off",
    "no-inline-style": "off",
    "void-style": "off"
  }
}
```

- [ ] **Step 2: Write `linkinator.config.json`**

```json
{
  "recurse": true,
  "silent": true,
  "skip": [
    "^https://auth\\.cameleer\\.io",
    "^https://platform\\.cameleer\\.io",
    "^mailto:",
    "^https://ec\\.europa\\.eu"
  ],
  "retry": true,
  "concurrency": 10
}
```

We skip the external auth/platform URLs because they may not be live while we're building the marketing site; we still check internal link integrity exhaustively.

- [ ] **Step 3: Run locally to establish baseline**

```bash
npm run build
npm run lint:html
npm run lint:links
```

Expected: both exit 0. If `lint:html` fails, inspect the first few errors — they're usually missing `alt` attributes or unclosed tags, both worth fixing.

- [ ] **Step 4: Commit**

```bash
git add .htmlvalidate.json linkinator.config.json
git commit -m "Add HTML validation and link-checker configuration for CI quality gates"
```

---

## Task 19: Lighthouse CI configuration

**Files:**
- Create: `lighthouserc.cjs`

- [ ] **Step 1: Write `lighthouserc.cjs`**

```js
module.exports = {
  ci: {
    collect: {
      staticDistDir: './dist',
      url: [
        'http://localhost/index.html',
        'http://localhost/pricing.html',
        'http://localhost/imprint.html',
        'http://localhost/privacy.html',
      ],
      numberOfRuns: 1,
      settings: {
        preset: 'desktop',
      },
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.95 }],
        'categories:accessibility': ['error', { minScore: 0.95 }],
        'categories:best-practices': ['error', { minScore: 0.95 }],
        'categories:seo': ['error', { minScore: 0.95 }],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};
```

- [ ] **Step 2: Run locally**

```bash
npm run build
npx lhci autorun
```

Expected: 4 scores for each of 4 pages, all ≥ 0.95. If any page misses, inspect the Lighthouse report link that `autorun` prints — most failures are easy (image `alt`, heading order, color contrast).

If any page fails the threshold, fix the underlying issue before committing this task. Do not lower the thresholds — the whole point is to enforce the bar.

- [ ] **Step 3: Commit**

```bash
git add lighthouserc.cjs
git commit -m "Add Lighthouse CI config with ≥95 thresholds across 4 categories"
```

---

## Task 20: Gitea Actions deploy workflow

**Files:**
- Create: `.gitea/workflows/deploy.yml`

- [ ] **Step 1: Write `.gitea/workflows/deploy.yml`**

```yaml
name: build-test-deploy

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-22.04
    env:
      PUBLIC_AUTH_SIGNIN_URL: ${{ vars.PUBLIC_AUTH_SIGNIN_URL }}
      PUBLIC_AUTH_SIGNUP_URL: ${{ vars.PUBLIC_AUTH_SIGNUP_URL }}
      PUBLIC_SALES_EMAIL: ${{ vars.PUBLIC_SALES_EMAIL }}

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Run unit tests
        run: npm test

      - name: Build site
        run: npm run build

      - name: Validate HTML
        run: npm run lint:html

      - name: Check internal links
        run: npm run lint:links

      - name: Lighthouse CI
        run: npx lhci autorun

      - name: Upload dist artifact
        if: github.ref == 'refs/heads/main'
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/
          retention-days: 7

  deploy:
    if: github.ref == 'refs/heads/main'
    needs: build
    runs-on: ubuntu-22.04
    concurrency:
      group: deploy-production
      cancel-in-progress: false

    steps:
      - name: Download dist artifact
        uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist/

      - name: Configure SSH
        env:
          SFTP_KEY: ${{ secrets.SFTP_KEY }}
          SFTP_KNOWN_HOSTS: ${{ secrets.SFTP_KNOWN_HOSTS }}
        run: |
          mkdir -p ~/.ssh
          echo "$SFTP_KEY" > ~/.ssh/id_ed25519
          chmod 600 ~/.ssh/id_ed25519
          echo "$SFTP_KNOWN_HOSTS" > ~/.ssh/known_hosts
          chmod 644 ~/.ssh/known_hosts

      - name: Deploy via rsync
        env:
          SFTP_USER: ${{ secrets.SFTP_USER }}
          SFTP_HOST: ${{ secrets.SFTP_HOST }}
          SFTP_PATH: ${{ secrets.SFTP_PATH }}
        run: |
          rsync -avz --delete \
            -e "ssh -i ~/.ssh/id_ed25519 -o StrictHostKeyChecking=yes -o UserKnownHostsFile=~/.ssh/known_hosts" \
            dist/ "$SFTP_USER@$SFTP_HOST:$SFTP_PATH/"

      - name: Post-deploy smoke test
        run: |
          set -e
          echo "Checking HSTS header on www.cameleer.io..."
          HEADERS=$(curl -sI https://www.cameleer.io/ || echo "")
          echo "$HEADERS" | grep -i '^strict-transport-security:' || { echo "HSTS missing"; exit 1; }
          echo "$HEADERS" | grep -i '^content-security-policy:' || { echo "CSP missing"; exit 1; }
          echo "$HEADERS" | grep -i '^x-frame-options:' || { echo "XFO missing"; exit 1; }
          echo "All required headers present on the live origin."
```

- [ ] **Step 2: Verify syntax**

```bash
# Gitea Actions uses Actions-compatible YAML. We validate with yq just to catch typos.
npx --yes js-yaml .gitea/workflows/deploy.yml > /dev/null && echo "YAML ok"
```

Expected: "YAML ok".

- [ ] **Step 3: Commit**

```bash
git add .gitea/workflows/deploy.yml
git commit -m "Add Gitea Actions workflow: build, test, lint, Lighthouse, rsync deploy with HSTS smoke test"
```

---

## Task 21: README and operator checklist

**Files:**
- Create: `README.md`
- Create: `OPERATOR-CHECKLIST.md`

- [ ] **Step 1: Write `README.md`**

```markdown
# cameleer-website

Marketing site for [cameleer.io](https://www.cameleer.io) — zero-code observability for Apache Camel.

This is a **static** Astro 5 site. Hosted on Hetzner Webhosting L, fronted by Cloudflare, deployed via Gitea Actions.

## Development

```bash
npm ci
npm run dev       # http://localhost:4321
npm run test      # vitest — auth config + middleware header tests
npm run build     # produces dist/
npm run preview   # serves dist/
```

## Quality gates (run in CI)

```bash
npm run lint:html     # html-validate on dist/
npm run lint:links    # linkinator on dist/
npm run lh            # Lighthouse CI (≥0.95 on all 4 categories)
```

## Environment variables

See `.env.example`. All are `PUBLIC_*` (build-time, embedded in HTML).

| Var | Purpose |
|-----|---------|
| `PUBLIC_AUTH_SIGNIN_URL` | Logto sign-in URL (redirected to by "Sign in" buttons) |
| `PUBLIC_AUTH_SIGNUP_URL` | Logto sign-up URL (redirected to by "Start free trial") |
| `PUBLIC_SALES_EMAIL` | Sales email (`mailto:` target for "Talk to sales") |

## Deployment

Push to `main` → Gitea Actions runs tests, builds, lints, then `rsync`s `dist/` to Hetzner over SSH (ed25519 key, host-key-pinned). Rollback is `git revert && git push`.

See [`OPERATOR-CHECKLIST.md`](./OPERATOR-CHECKLIST.md) for the one-time Hetzner + Cloudflare setup.

## Design & plan

- `docs/superpowers/specs/2026-04-24-cameleer-website-design.md` — the approved spec.
- `docs/superpowers/plans/2026-04-24-cameleer-website.md` — the implementation plan that built this repo.
```

- [ ] **Step 2: Write `OPERATOR-CHECKLIST.md`**

```markdown
# Operator Checklist — `cameleer-website`

One-time setup that lives outside code. Do these before the first `main` merge that ships live.

## 1. Hetzner Webhosting L

- [ ] Provision Webhosting L plan. Note the SSH hostname and SFTP path.
- [ ] In the Hetzner control panel, **enable SSH access** for the main user.
- [ ] Generate an ed25519 SSH key pair locally (once):
      ```bash
      ssh-keygen -t ed25519 -f ~/.ssh/cameleer-website-deploy -C "cameleer-website CI"
      ```
- [ ] Add the **public** key to `~/.ssh/authorized_keys` on the Hetzner account.
- [ ] Test SSH: `ssh -i ~/.ssh/cameleer-website-deploy user@hetzner-host "ls -la"`.
- [ ] Create a subdirectory for the site (typical path: `public_html/www.cameleer.io/`).
- [ ] Grab the SSH host key for pinning:
      ```bash
      ssh-keyscan -t ed25519 hetzner-host > hetzner-known-hosts.txt
      ```
- [ ] Install Let's Encrypt (or use Hetzner's built-in) for the origin hostname. Cloudflare Full (strict) requires a valid origin cert.

## 2. Cloudflare (zone: cameleer.io)

### DNS
- [ ] `A` record `www.cameleer.io` → Hetzner IP. **Proxied (orange).**
- [ ] `A` record `@` (apex) → Hetzner IP. **Proxied (orange).**
- [ ] `A`/`CNAME` for `auth.cameleer.io` → SaaS ingress. **Proxied.**
- [ ] `A`/`CNAME` for `platform.cameleer.io` → SaaS ingress. **Proxied.**
- [ ] NO bare MX. If email is needed at `@cameleer.io`, use **Cloudflare Email Routing** or a distinct hostname on a different provider.

### SSL/TLS
- [ ] Mode: **Full (strict)**.
- [ ] Minimum TLS: **1.2**.
- [ ] TLS 1.3: **on**.
- [ ] Always Use HTTPS: **on**.
- [ ] Automatic HTTPS Rewrites: **on**.
- [ ] HSTS: `max-age=31536000; includeSubDomains; preload`. (Add the domain to `https://hstspreload.org/` only after the site is stable and serving HSTS cleanly for a couple of weeks.)

### Security
- [ ] WAF → **Cloudflare Managed Ruleset**: enabled (Free plan includes this since 2024).
- [ ] Bot Fight Mode: **on**.
- [ ] Browser Integrity Check: **on**.
- [ ] Security Level: **medium**.
- [ ] Email Obfuscation: **on**.
- [ ] Rate Limiting rule: 20 req/min per IP on `/*` (marketing pages).

### Transform Rules (edge-level security headers)

Create a Transform Rule — "Modify Response Header" — matching `http.host eq "www.cameleer.io"`:

| Operation | Header | Value |
|-----------|--------|-------|
| Set | `Content-Security-Policy` | `default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; font-src 'self'; script-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'; object-src 'none'` |
| Set | `X-Content-Type-Options` | `nosniff` |
| Set | `X-Frame-Options` | `DENY` |
| Set | `Referrer-Policy` | `strict-origin-when-cross-origin` |
| Set | `Permissions-Policy` | `geolocation=(), microphone=(), camera=(), payment=(), usb=()` |

### Page Rules / Redirect
- [ ] `cameleer.io/*` → `https://www.cameleer.io/$1` (301 permanent).

## 3. Gitea Actions secrets (in the repo settings)

Add these under Repository settings → Actions → Secrets (or variables):

| Name | Type | Value |
|------|------|-------|
| `SFTP_HOST` | secret | Hetzner SSH hostname |
| `SFTP_USER` | secret | Hetzner SSH user |
| `SFTP_PATH` | secret | Absolute path to document root (e.g., `/usr/home/cameleer/public_html/www.cameleer.io`) |
| `SFTP_KEY` | secret | Contents of `~/.ssh/cameleer-website-deploy` (private key, PEM) |
| `SFTP_KNOWN_HOSTS` | secret | Contents of `hetzner-known-hosts.txt` (captured via `ssh-keyscan`) |
| `PUBLIC_AUTH_SIGNIN_URL` | variable | `https://auth.cameleer.io/sign-in` |
| `PUBLIC_AUTH_SIGNUP_URL` | variable | `https://auth.cameleer.io/sign-in?first_screen=register` |
| `PUBLIC_SALES_EMAIL` | variable | `sales@cameleer.io` (or whatever sales alias you set up) |

## 4. Content TBD — before go-live

- [ ] Fill in `src/pages/imprint.astro` `operator` object with real legal details.
- [ ] Fill in `operatorContact` in `src/pages/privacy.astro`.
- [ ] Review the "Why us" / nJAMS wording in `src/components/sections/WhyUs.astro` for trademark safety.
- [ ] Confirm MID-tier retention: spec says **7 days**; `cameleer-saas/HOWTO.md` says **30 days**. Reconcile one side or the other.

## 5. First deploy

1. Merge a PR to `main`.
2. Watch the Gitea Actions run: `build`, then `deploy`.
3. The workflow includes a post-deploy smoke check — if HSTS / CSP / XFO are missing from the live response, the deploy fails and must be debugged at the Cloudflare Transform Rule layer.
4. Manually verify:
   - `curl -sI https://www.cameleer.io/` returns all six security headers.
   - `https://cameleer.io/` → `https://www.cameleer.io/` 301 redirect.
   - Open the site in an incognito window on desktop + mobile.
```

- [ ] **Step 3: Commit**

```bash
git add README.md OPERATOR-CHECKLIST.md
git commit -m "Add README and operator checklist for Hetzner + Cloudflare + Gitea setup"
```

---

## Self-review checklist (run after all tasks)

Run these from the repo root after the last task commits:

- [ ] `npm ci && npm test && npm run build && npm run lint:html && npm run lint:links && npx lhci autorun`
- [ ] `grep -r '<TBD:' src/` — should print only the imprint / privacy placeholders — not hidden in section copy.
- [ ] `curl -sI $(npm run preview -- --silent &) | grep -iE 'strict-transport|content-security|x-frame'` — after a local `preview` start, all three must appear.
- [ ] `git log --oneline` — should show ~22 commits (spec commit + 21 task commits), each with a descriptive message.

---

## Spec → task coverage

| Spec section | Task(s) |
|---|---|
| §5.1 Stack (Astro, Tailwind, fonts, tokens) | 1, 2 |
| §5.2 Deployment (Hetzner, `.htaccess`) | 17, 20 |
| §5.3 Security headers / CSP / HSTS | 4, 17, 20, 21 (CF) |
| §5.4 Auth flow (redirect to Logto) | 3, 6, 8, 12, 14 |
| §6.1 Four pages | 13, 14, 15, 16 |
| §6.2 Homepage 6-section weave | 8, 9, 10, 11, 12, 13 |
| §6.3 Pricing tier values | 12, 14 |
| §6.4 Imprint (TMG §5) | 15 |
| §6.5 Privacy (no cookies, GDPR) | 16 |
| §7 Visual tokens + topo pattern | 2, 6, 7 |
| §8 Build & CI/CD | 18, 19, 20 |
| §9 Operational prerequisites | 21 |
| §10 Cross-repo alignment items | 11 (comment), 21 (checklist) |
| §11 Testing (build, HTML, links, Lighthouse, headers) | 4 (headers), 18, 19, 20 |
| §12 Future-but-scaffolded (content collections, i18n) | 1 |
| §13 Decisions | recorded in spec; implementation follows |
| §14 Risks (origin IP, CSP, pricing drift, Logto URL contract) | 20 (host-key pin), 4 (strict CSP), 11 (comment), 3 (env-driven URLs) |