Skip to content

Staging -> Main: marketing site overhaul, feature pages, realtime dashboard#426

Merged
izadoesdev merged 15 commits intomainfrom
staging
Apr 28, 2026
Merged

Staging -> Main: marketing site overhaul, feature pages, realtime dashboard#426
izadoesdev merged 15 commits intomainfrom
staging

Conversation

@izadoesdev
Copy link
Copy Markdown
Member

Summary

  • Marketing psychology pass on landing page copy (hero CTA, grid cards, testimonials, description, bottom CTA, footer CTA, pricing, FAQs, stats bar)
  • 4 new feature pages (errors, web-vitals, feature-flags, uptime) with interactive demo components cherry-picked from PR Landing page and feature page redesign #410
  • Shared demo primitives (FeatureHero, SectionHeader, TwoColumnGrid, GridCell, CardChrome, BottomFade, etc.) to deduplicate across feature pages
  • Feature pages restructured to match main landing page section pattern (same container, same Section padding)
  • FAQ section restored with gradient left border and SectionBullet styling
  • Newsletter form updated to use DS Button/Input and Nucleo icons
  • DS Button: added cursor-pointer to base styles
  • Hero demo tabs: animated indicator slide + panel slide transitions
  • Em-dash removal across all docs copy
  • Removed destructive lefthook format hook (was overwriting staged files)
  • Dashboard: compact data table rows, realtime query builders, realtime page with globe map
  • Realtime navigation config updates

Test plan

  • Verify landing page renders correctly at all breakpoints
  • Verify all 4 feature pages (/errors, /web-vitals, /feature-flags, /uptime) load and render demos
  • Verify hero demo tab switching animates smoothly
  • Verify FAQ gradient border appears on hover/open
  • Verify newsletter form subscribe button has cursor pointer and loading state
  • Verify realtime dashboard page renders with globe map

- Hero CTA: "Start free" -> "See your analytics in 5 minutes"
- Grid cards: "Set up once, understand everything" -> "One install. Six tools replaced."
- Testimonials: "What developers are saying" -> "Why developers are switching" + real numbers
- Bottom CTA: outcome-driven headline with switching cost reduction subhead
- Footer CTA: loss-aversion angle for late-stage visitors
- Pricing: "One price. Every feature." header
- Description section: added resolution line closing the problem loop
- Added 4 objection-handling FAQs (migration, outgrowing, speed, self-host)
- Added stats bar (500+ websites, 2,000+ developers, 10M+ events/month)
- Rewrote errors, web-vitals, feature-flags, and uptime pages to use
  Section with default padding and max-w-400 container (matching main page)
- Created demo-primitives.tsx with FeatureHero, SectionHeader, TwoColumnGrid,
  GridCell, and shared demo utilities (CardChrome, BottomFade, MaskedTableShell)
- Created demo-constants.ts for server-safe string constants
- Removed ClosingCtaSection, ValueProp, ff-demo-reveal (consolidated)
- Added bento card href links to feature pages
- Fixed navbar /error-tracking -> /errors href
- Removed /error-tracking and /web-vitals redirects (now real pages)
- Added d3-geo, topojson-client, world-atlas dependencies for uptime globe
- Removed useless "Built for production" section from feature-flags page
Mechanical find-and-replace of all em-dash characters in .ts/.tsx files.
The pre-commit format hook with stage_fixed: true was running ultracite
fix on staged files and re-staging them, which overwrites working tree
changes during partial commits. Removed the format command; linting
should be run manually or in CI instead.
- Reduced row height from h-14 to h-9, header from h-10 to h-8
- Removed "unique users" and "total views" sublabels from metric cells
- Tightened padding and icon sizes for denser table layout
…s, feed, velocity

New RealtimeBuilders module with 5 query types for the realtime dashboard.
Adds corresponding parameter types to shared ParameterDataMap.
- New realtime page with live visitor map using cobe globe
- Country codes mapping for flag display
- Added cobe, d3-geo, topojson-client, world-atlas dependencies
- Swapped Phosphor CheckIcon/PaperPlaneTiltIcon to Nucleo CheckIcon/EnvelopeSimpleIcon
- Made subscribe button icon-only (size="icon") with aria-label
- Input height aligned to h-9 (DS default)
- Merged duplicate @databuddy/ui imports
The DS Button was missing cursor-pointer, causing no hand cursor on
hover across every button in the app.
The pre-commit hook had reverted the FAQ section back to the plain
Mahika version. Restores the Swami-style accordion-item CSS class
(yellow->pink->indigo gradient left border on hover/open), SectionBullet
with orange color, and sticky left-side title layout.
- Deleted ff-demo-reveal.ts (consolidated into useRevealOnScroll)
- Replaced local EASE, CardChrome, BottomFade, RightFade, TH/TH_RIGHT
  across 15 demo files with imports from demo-primitives/demo-constants
- Removed dead exports: TABLE_HEADER_ROW, TABLE_BODY, revealStyle, MaskedTableShell
- Tab indicator slides left/right using motion layoutId with spring physics
- Demo iframe panels slide in the direction of navigation with CSS transitions
- Tracks previous tab index to determine slide direction
Panels left of active slide offscreen left, panels right slide offscreen
right. Removed broken direction/prevTabIndex tracking.
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
databuddy-status Ready Ready Preview, Comment Apr 28, 2026 7:54pm
documentation (staging) Building Building Apr 28, 2026 7:54pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
dashboard (staging) Skipped Skipped Apr 28, 2026 7:54pm

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 28, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 44e31677-1d60-4fd6-830a-d44f291090d9

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch staging

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented Apr 28, 2026

Greptile Summary

Large staging-to-main merge covering a marketing site overhaul (landing page copy, 4 new feature pages, shared demo primitives), a realtime dashboard page with a canvas globe map, compact table rows, and miscellaneous DS/config cleanup. Two issues need attention before merge:

  • "dashboard": "^0.0.1" in root package.json resolves to an unknown external npm package, not the local @databuddy/dashboard workspace app — this will pull in a stray registry package.
  • /error-tracking redirect removed with no replacement pointing to the new /errors page, breaking existing bookmarks and SEO links with a 404.

Confidence Score: 3/5

Not safe to merge as-is — the stray dashboard npm package and the broken /error-tracking redirect are real defects that should be fixed first.

Two P1 findings: an external unknown package being pulled into the monorepo root and a redirect removal that will 404 existing SEO/bookmark traffic. The rest of the 90-file change is well-structured and follows existing patterns.

package.json (stray dashboard dependency and duplicate root-level deps) and apps/docs/next.config.ts (missing /error-tracking/errors redirect).

Important Files Changed

Filename Overview
package.json Adds cobe (unused), dashboard (wrong external package — should be @databuddy/dashboard), and duplicates d3/topojson/world-atlas in a new root-level dependencies block that also belongs in the consuming app only.
apps/docs/next.config.ts Removes redirects for /error-tracking and /web-vitals; the /web-vitals removal is correct (new page exists), but /error-tracking now 404s — no redirect to the new /errors page was added.
apps/api/src/query/builders/realtime.ts New realtime query builders (pages, referrers, countries, cities, feed, velocity) following existing patterns; website filtering is handled by the framework layer. realtime_countries meta output_fields are inaccurate (lists fields that the query doesn't produce).
apps/dashboard/app/(main)/websites/[id]/realtime/_components/realtime-map.tsx Canvas-based world map using d3-geo + topojson with Bayer dithering for country fill animation and hit-test hover; heavy sync initialization loop (one offscreen canvas per country) but runs only once on mount and is correctly cleaned up.
apps/dashboard/app/(main)/websites/[id]/realtime/page.tsx New realtime page with 5-second polling for country data, dynamic import of the canvas map, and a live visitor count; straightforward and correct.
apps/docs/components/newsletter-form.tsx Migrated to DS Button/Input and Nucleo icons; subscribe button switched to icon-only, removing the visible text label.
packages/ui/src/components/button.tsx Adds cursor-pointer to base button styles — straightforward and safe.
lefthook.yml Removes the format pre-commit hook that was overwriting staged files with ultracite fix — intentional cleanup per the PR description.

Sequence Diagram

sequenceDiagram
    participant Browser
    participant RealtimePage
    participant useDynamicQuery
    participant API
    participant RealtimeBuilders
    participant RealtimeMap

    Browser->>RealtimePage: Navigate to /realtime
    RealtimePage->>useDynamicQuery: poll realtime_countries (5s interval)
    useDynamicQuery->>API: POST /query {id: realtime-countries}
    API->>RealtimeBuilders: realtime_countries builder
    Note over RealtimeBuilders: WHERE time >= now() - 5 MIN<br/>GROUP BY country<br/>normalizeGeo plugin → country_code/country_name
    RealtimeBuilders-->>API: SQL result
    API-->>useDynamicQuery: [{country_code, country_name, visitors}]
    useDynamicQuery-->>RealtimePage: data.realtime_countries
    RealtimePage->>RealtimeMap: countries prop (lazy-loaded, ssr:false)
    RealtimeMap->>RealtimeMap: canvas init (one offscreen canvas per country)
    RealtimeMap->>RealtimeMap: rAF draw loop (Bayer dither fill + hover hit-test)
Loading

Comments Outside Diff (1)

  1. apps/docs/next.config.ts, line 72-89 (link)

    P1 /error-tracking redirect silently dropped — causes 404s

    The PR removes the redirect "/error-tracking" → "/docs/sdk/tracker" but adds no replacement pointing to the new /errors feature page. Anyone who has /error-tracking bookmarked or indexed by search engines will now receive a 404 instead of landing on relevant content. A redirect from /error-tracking/errors should be added before this merges.

Reviews (1): Last reviewed commit: "fix(docs): correct hero demo panel slide..." | Re-trigger Greptile

Comment thread package.json
"chalk": "^5.6.2",
"cobe": "^2.0.1",
"culori": "^4.0.2",
"dashboard": "^0.0.1",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Unknown external dashboard package added to root

"dashboard": "^0.0.1" resolves to an external npm package, not the local @databuddy/dashboard workspace app. Bun will fetch an unrelated package from the registry. This appears to be an accidental inclusion and should be removed — the local app is already referenced by workspace protocol via @databuddy/dashboard.

Comment thread package.json
"@types/dockerode": "^3.3.47",
"@types/node": "^24.12.2",
"chalk": "^5.6.2",
"cobe": "^2.0.1",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 cobe dependency added but never imported

"cobe": "^2.0.1" is declared in root devDependencies but is not imported anywhere in the codebase. The realtime map uses d3-geo + topojson-client + world-atlas instead. Remove this stale entry to keep the dependency tree clean.

Comment thread package.json
Comment on lines 114 to +119
"tokenlens": "^2.0.0-alpha.3",
"@tokenlens/models": "1.3.0"
}
},
"dependencies": {
"d3-geo": "^3.1.1",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Root-level dependencies duplicates app-level packages

d3-geo, topojson-client, and world-atlas are already declared in apps/docs/package.json. Adding them again to the workspace root's dependencies creates a second resolution target that will be installed for every workspace package. In a Bun monorepo these should live only in the app that consumes them; remove the root-level dependencies block.

Comment on lines +107 to +145
type: "number",
label: "Active Visitors",
description: "Unique visitors from this country",
},
{
name: "latitude",
type: "number",
label: "Latitude",
description: "Country centroid latitude",
},
{
name: "longitude",
type: "number",
label: "Longitude",
description: "Country centroid longitude",
},
],
default_visualization: "table",
supports_granularity: [],
version: "1.0",
},
table: Analytics.events,
fields: [
"country as name",
"uniq(anonymous_id) as visitors",
],
where: [
"event_name = 'screen_view'",
"time >= now() - INTERVAL 5 MINUTE",
"country != ''",
],
groupBy: ["country"],
orderBy: "visitors DESC",
limit: 50,
timeField: "time",
skipDateFilter: true,
customizable: false,
plugins: { normalizeGeo: true, deduplicateGeo: true },
},
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 output_fields meta declares fields that the query never returns

The realtime_countries builder's meta.output_fields lists country, latitude, and longitude, but the actual fields array only selects "country as name" and "uniq(anonymous_id) as visitors". The normalizeGeo plugin will produce country_code/country_name (not country), and there is no latitude/longitude computation anywhere. The meta documentation will be misleading for API consumers and any tooling that generates UIs from it.

Comment on lines 62 to 80
<div className="space-y-2">
<form className="flex gap-2" onSubmit={handleSubmit}>
<Input
className="h-10 w-full min-w-0 sm:w-80"
className="h-9 w-full min-w-0"
disabled={status === "loading"}
placeholder="you@company.com"
ref={inputRef}
required
type="email"
/>
<Button
className="shrink-0"
aria-label="Subscribe to newsletter"
disabled={status === "loading"}
loading={status === "loading"}
size="lg"
size="icon"
type="submit"
>
Subscribe
<PaperPlaneTiltIcon className="size-3.5" weight="fill" />
<EnvelopeSimpleIcon className="size-4" />
</Button>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Icon-only subscribe button hides action label for non-screen-reader users

The visible "Subscribe" text was replaced with a bare EnvelopeSimpleIcon. While aria-label covers screen readers, sighted users have no text affordance on the CTA button — an envelope icon alone doesn't clearly communicate "subscribe". Consider keeping at least a short visible label (e.g. "Subscribe" or "Join") alongside the icon, or use a tooltip.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant