Own your homepage completely

I want a totally custom homepage, not a template one.

Add your own route group and delete the framework home — a fully bespoke front page that still merges every future upstream release. This is exactly how Utah’s Events did it.

Typical effort: 1 hour

The recipe — paste this to your AI

# Recipe: own your homepage (the on-path way)

**Goal:** make `/` your own custom homepage without editing the framework's marketing page — so
future template upgrades still merge cleanly.

**Why not just edit the framework home?** The framework's `app/(marketing)/page.tsx` is a
`@genesis-managed: FRAMEWORK` file. Editing it in place works once, but it drifts you off the upgrade
path and fights you on every merge. Instead, add your OWN home in a new route group and remove the
framework one, so `/` is defined exactly once and all your work lives in files the template never
touches.

## Steps

1. **Create your home in a new route group** (new files are always on-path — they aren't in the
   hash-lock):
   ```
   app/(home)/layout.tsx     ← your own layout (no framework chrome unless you want it)
   app/(home)/page.tsx       ← your homepage
   ```
   A route group in parentheses does not add a URL segment, so `app/(home)/page.tsx` serves `/`.

2. **Delete the framework homepage so `/` isn't defined twice:**
   ```bash
   git rm "app/(marketing)/page.tsx"
   ```
   This is safe: removing a FRAMEWORK page is not a CORE edit, so `upgrade:check` stays green. (If a
   future template update re-adds a `(marketing)/page.tsx`, you'll get a simple add/delete conflict on
   the next merge — resolve it by keeping your delete.)

3. **Keep it inside the lanes.** Your `(home)` files may import the kit (`components/ui/*`) and your
   own components/content, but do NOT edit CORE files to make the home work. Words belong in
   `lib/content/*`; brand tokens in `app/globals.css`.

4. **Custom styling?** Use a bundled stylesheet, never inline styles — see
   `custom-css-the-csp-safe-way.md`. Inline `<style>` / `style="…"` is silently dropped in production.

## Verify

```bash
npm run upgrade:check     # must still read "0 edited" (you stayed on-path)
pnpm build                # / builds and renders as your new home
```

## Paste-ready prompt

> Replace the homepage with a custom one, staying on the upgrade path: create `app/(home)/layout.tsx`
> and `app/(home)/page.tsx` for my new home, then `git rm "app/(marketing)/page.tsx"` so `/` is only
> defined once. Keep all edits in lanes (no CORE files). Put any custom CSS in a bundled `.css` file
> imported into the component — no inline styles (the CSP drops them). Then run `npm run upgrade:check`
> (must be "0 edited") and `pnpm build`.

Source of truth

This recipe ships inside the template as docs/prompts/own-the-homepage.md — this page renders that exact file. The repository is always the newest version: https://github.com/srisenmay/bringthefront-template. Clone the template and you get every recipe locally, versioned with the release you are on.

Own your homepage completely

I want a totally custom homepage, not a template one.

Add your own route group and delete the framework home — a fully bespoke front page that still merges every future upstream release. This is exactly how Utah’s Events did it.

Typical effort: 1 hour

The recipe — paste this to your AI

# Recipe: own your homepage (the on-path way)

**Goal:** make `/` your own custom homepage without editing the framework's marketing page — so
future template upgrades still merge cleanly.

**Why not just edit the framework home?** The framework's `app/(marketing)/page.tsx` is a
`@genesis-managed: FRAMEWORK` file. Editing it in place works once, but it drifts you off the upgrade
path and fights you on every merge. Instead, add your OWN home in a new route group and remove the
framework one, so `/` is defined exactly once and all your work lives in files the template never
touches.

## Steps

1. **Create your home in a new route group** (new files are always on-path — they aren't in the
   hash-lock):
   ```
   app/(home)/layout.tsx     ← your own layout (no framework chrome unless you want it)
   app/(home)/page.tsx       ← your homepage
   ```
   A route group in parentheses does not add a URL segment, so `app/(home)/page.tsx` serves `/`.

2. **Delete the framework homepage so `/` isn't defined twice:**
   ```bash
   git rm "app/(marketing)/page.tsx"
   ```
   This is safe: removing a FRAMEWORK page is not a CORE edit, so `upgrade:check` stays green. (If a
   future template update re-adds a `(marketing)/page.tsx`, you'll get a simple add/delete conflict on
   the next merge — resolve it by keeping your delete.)

3. **Keep it inside the lanes.** Your `(home)` files may import the kit (`components/ui/*`) and your
   own components/content, but do NOT edit CORE files to make the home work. Words belong in
   `lib/content/*`; brand tokens in `app/globals.css`.

4. **Custom styling?** Use a bundled stylesheet, never inline styles — see
   `custom-css-the-csp-safe-way.md`. Inline `<style>` / `style="…"` is silently dropped in production.

## Verify

```bash
npm run upgrade:check     # must still read "0 edited" (you stayed on-path)
pnpm build                # / builds and renders as your new home
```

## Paste-ready prompt

> Replace the homepage with a custom one, staying on the upgrade path: create `app/(home)/layout.tsx`
> and `app/(home)/page.tsx` for my new home, then `git rm "app/(marketing)/page.tsx"` so `/` is only
> defined once. Keep all edits in lanes (no CORE files). Put any custom CSS in a bundled `.css` file
> imported into the component — no inline styles (the CSP drops them). Then run `npm run upgrade:check`
> (must be "0 edited") and `pnpm build`.