---
description: Guide for creating and editing feature landing pages on the public site
globs: apps/public/content/features/**,apps/public/src/app/(content)/features/**,apps/public/src/lib/features.ts
alwaysApply: false
---

# Feature Landing Pages

Feature pages live at `/features/[slug]` and follow the same JSON-driven pattern as the compare pages (`/compare/[slug]`).

## Architecture

- **Content**: JSON files in `apps/public/content/features/[slug].json`
- **Types & loaders**: `apps/public/src/lib/features.ts` (interfaces + `getFeatureData`, `getAllFeatureSlugs`, `loadFeatureSourceSync`)
- **Source export**: `featureSource` in `apps/public/src/lib/source.ts` (sync-loaded at build time)
- **Dynamic route**: `apps/public/src/app/(content)/features/[slug]/page.tsx`
- **Index page**: `apps/public/src/app/(content)/features/page.tsx`
- **Sitemap**: Feature pages are registered in `apps/public/src/app/sitemap.ts`

## Adding a new feature page

1. Create `apps/public/content/features/[slug].json` matching the `FeatureData` interface
2. That's it — the dynamic route, index page, sitemap, and source all pick it up automatically

## JSON schema (FeatureData)

Every JSON file must have these fields:

```
slug              - URL slug (e.g. "event-tracking")
short_name        - Short internal name for nav, footer, links (e.g. "Event tracking", "Funnels")
seo.title         - Page title for SEO
seo.description   - Meta description
seo.keywords      - Optional keyword array
hero.heading      - H1 text
hero.subheading   - Subtitle under H1
hero.badges       - Array of short feature-specific perks (NOT generic OpenPanel perks)
definition.title  - Optional section heading (e.g. "What is event tracking?")
definition.text   - Markdown string explaining the feature in depth (supports bold, lists, code, links)
capabilities_section.title - Section heading for capabilities
capabilities_section.intro - Optional intro text
capabilities      - Array of { title, description, icon? }
screenshots       - Array of { src?, srcDark?, srcLight?, alt, caption? } (up to 3 shown between sections; use `src` for a single image or `srcDark`+`srcLight` for theme variants)
how_it_works      - Optional { title, intro?, steps: [{ title, description }] }
use_cases         - { title, intro?, items: [{ title, description }] }
related_features  - Array of { slug, title, description? } linking to other feature pages
faqs              - { title, intro?, items: [{ question, answer }] }
cta               - { label, href }
```

## Content guidelines

- **short_name**: Use for footer, nav, and any compact link list. Keep it to 1–3 words (e.g. "Event tracking", "Funnels"). The full `hero.heading` stays for the page H1 and SEO.
- **Badges**: Should describe what *this feature* does, not generic OpenPanel selling points
- **Definition**: Rich markdown — use bold, bullet lists, inline code for event names. This is the main SEO content block
- **Related features**: Only link to feature pages that already exist (to avoid 404s)
- **Screenshots**: Feature-specific screenshots go in `/public/features/` (e.g. `feature-events-list.webp`). Generic screenshots are in `/public/screenshots/` with dark/light .webp variants. Use `src` for single images or `srcDark`+`srcLight` for theme pairs

## Section components

Located in `features/[slug]/_components/`:

| Component | Reuses |
|-----------|--------|
| `feature-hero.tsx` | `HeroContainer`, `SectionHeader`, `GetStartedButton`, `Perks` |
| `what-it-is.tsx` | `Section`, `SectionHeader`, `react-markdown` |
| `capabilities.tsx` | `FeatureCard`, `Section`, `SectionHeader` |
| `how-it-works.tsx` | `Section`, `SectionHeader` |
| `feature-use-cases.tsx` | `Section`, `SectionHeader` |
| `related-features.tsx` | `FeatureCardContainer`, `Section`, `SectionHeader` |
| `feature-faq.tsx` | `Faqs`, `FaqItem`, `Section`, `SectionHeader`, JSON-LD schema |

The page also reuses `WindowImage` and `CtaBanner` directly.

## Planned feature slugs

From the roadmap (create JSON files as needed):

- `event-tracking` ✅
- `funnels` ✅
- `session-tracking` ✅
- `retention` ✅
- `identify-users` ✅
- `revenue-tracking` ✅
- `data-visualization` ✅
- `product-analytics`
- `web-analytics` ✅
- `conversion` ✅
- `integrations` ✅
- `notifications` ✅
- `share-and-collaborate` ✅