public: feature pages

2026-02-07 16:42:02 +00:00
parent ed8b5c667e
commit 6ce9b5dd1b
127 changed files with 3140 additions and 81 deletions
--- a/.cursor/rules/feature-pages.mdc
+++ b/.cursor/rules/feature-pages.mdc
@@ -0,0 +1,91 @@
+---
+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` ✅