SaaS · React
Product analytics
Crisp site for a product analytics tool with a funnel mock, retention features, event pricing and FAQ.
What you get
A product site for an event-based analytics tool: a signup funnel mock, stats, features, a retention split, three setup steps, monthly pricing by tracked events, quotes and an FAQ. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Cohortly", "nav": [ { "label": "Features", "href": "#features" }, { "label": "Retention", "href": "#retention" }, { "label": "Pricing", "href": "#pricing" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Start tracking", "href": "#start" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Product analytics", "title": "See where people drop off, and why the rest stay.", "text": "Track events from your app, build funnels and retention charts in a few clicks, and answer product questions without waiting on a data team.", "primary": { "label": "Start tracking free", "href": "#start" }, "secondary": { "label": "See pricing", "href": "#pricing" }, "visual": { "type": "mock", "title": "Signup funnel · last 30 days", "rows": [ { "label": "Visited pricing page", "value": "18,420", "tone": "#2563eb" }, { "label": "Started signup", "value": "4,312 · 23.4%", "tone": "#2563eb" }, { "label": "Verified email", "value": "3,106 · 72.0%", "tone": "#2563eb" }, { "label": "Created first project", "value": "1,487 · 47.9%", "tone": "#b45309" }, { "label": "Invited a teammate", "value": "602 · 40.5%", "tone": "#b91c1c" } ], "footer": "Biggest drop: verify email → first project (−1,619)" } }, { "kind": "stats", "items": [ { "value": "1M", "label": "Free events each month" }, { "value": "4", "label": "Chart types: trends, funnels, retention, paths" }, { "value": "25", "label": "SDK and source integrations" }, { "value": "~1 s", "label": "Typical query time on 30 days of data" } ] }, { "kind": "features", "id": "features", "eyebrow": "Features", "title": "The questions product teams ask every week", "columns": 2, "items": [ { "title": "Funnels", "text": "Any sequence of events, with time limits, breakdowns by property and the users who dropped at each step.", "icon": "chart" }, { "title": "Retention", "text": "Weekly or monthly cohorts by signup date or first action, compared side by side.", "icon": "users" }, { "title": "Paths", "text": "What people did right before and after an event, so surprises show up fast.", "icon": "arrow" }, { "title": "Saved dashboards", "text": "Share a board with the team and get it by email every Monday morning.", "icon": "mail" } ] }, { "kind": "split", "id": "retention", "eyebrow": "Retention", "title": "Find the habit that keeps users around", "text": "Compare cohorts who did an action in week one with those who didn't. Cohortly highlights the events most correlated with week-eight retention.", "bullets": [ "Correlation, clearly labelled as not causation", "Save any cohort and reuse it across charts", "Export cohorts to your email tool" ], "visual": { "type": "mock", "title": "Week-8 retention by first-week action", "rows": [ { "label": "Invited a teammate", "value": "64%", "tone": "#047857" }, { "label": "Connected an integration", "value": "52%", "tone": "#047857" }, { "label": "Created 3+ projects", "value": "41%", "tone": "#2563eb" }, { "label": "All new signups", "value": "22%", "tone": "#94a3b8" } ] }, "reverse": true }, { "kind": "steps", "eyebrow": "Setup", "title": "First chart the same day", "items": [ { "title": "Add the snippet or SDK", "text": "Web, iOS, Android and server SDKs. Page views and sessions are captured automatically." }, { "title": "Track the events that matter", "text": "cohortly.track('Project Created', { plan }) for the handful of actions you care about." }, { "title": "Build a funnel", "text": "Pick the steps, choose a date range, break it down by any property." } ] }, { "kind": "pricing", "id": "pricing", "eyebrow": "Pricing", "title": "Pay for events, not seats", "text": "Monthly billing. Unlimited users and dashboards on every plan.", "plans": [ { "name": "Free", "price": "$0", "period": "/month", "text": "For early products.", "features": [ "1M events / month", "1-year history", "Core charts" ], "cta": { "label": "Start free", "href": "#start" } }, { "name": "Growth", "price": "$79", "period": "/month", "text": "For teams shipping weekly.", "features": [ "10M events / month", "5-year history", "Correlation insights", "Cohort exports" ], "featured": true, "cta": { "label": "Try Growth for 14 days", "href": "#start" } }, { "name": "Scale", "price": "$249", "period": "/month", "text": "For larger products.", "features": [ "50M events / month", "Data warehouse sync", "SAML single sign-on", "Priority support" ], "cta": { "label": "Choose Scale", "href": "#start" } } ] }, { "kind": "quotes", "eyebrow": "Product teams", "title": "Answers in the meeting, not a week later", "items": [ { "quote": "We found that verifying email was killing activation. Fixed it in a sprint, activation went up by a third.", "name": "Lena H.", "role": "Product manager" }, { "quote": "Designers build their own funnels now. I spend my time on harder questions.", "name": "Ravi P.", "role": "Data analyst" }, { "quote": "The retention view made it obvious which onboarding step to cut.", "name": "Chloé M.", "role": "Founder" } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Before you add the snippet", "items": [ { "q": "Do I need a data engineer?", "a": "No. The SDKs send events directly. A warehouse sync is available on Scale if you want one." }, { "q": "Can I avoid tracking personal data?", "a": "Yes. Track with anonymous IDs, mask properties in the SDK, and delete a user's data via the API." }, { "q": "What counts as an event?", "a": "Any tracked action or page view. Automatically captured sessions do not count toward your quota." } ] }, { "kind": "cta", "id": "start", "title": "Build your first funnel this afternoon", "text": "Free up to 1M events a month. No card to start.", "primary": { "label": "Choose a plan", "href": "#pricing" }, "secondary": { "label": "Read the FAQ", "href": "#faq" } } ], "footer": { "text": "Event-based product analytics: funnels, retention and paths.", "columns": [ { "title": "Product", "links": [ "Funnels", "Retention", "Dashboards" ] }, { "title": "Developers", "links": [ "SDKs", "HTTP API", "Docs" ] } ], "legal": "© Cohortly. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Product analytics's files. The box is already started for you: finish “Start from Product analytics and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Error monitoring
Dark developer-focused site for an error tracking tool with a live issues mock, SDK steps and pricing.
- Featured
SaaS starter
Marketing pages, sign-in and sign-up screens, and an authenticated app area with a mocked session you replace with real auth.
Appointment scheduling
Marketing site for a booking-link tool with a live calendar mock, pricing, setup steps and an FAQ.
Build on Product analytics
Create a free account, start from this template, and ask the AI agent to turn it into your app.