Landing page and feature page redesign#410
Landing page and feature page redesign#410mahikachadha5 wants to merge 82 commits intodatabuddy-analytics:stagingfrom
Conversation
|
@mahikachadha5 is attempting to deploy a commit to the Databuddy OSS Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: ASSERTIVE Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Greptile SummaryThis PR redesigns the marketing site with four new/refactored feature pages (Errors, Web Vitals, Uptime, Feature Flags), a new reusable
Confidence Score: 4/5Safe to merge after fixing the wrong Error Tracking href, invalid font-regular class, and mismatched FAQ content in the uptime page. Three P1 findings: a wrong route on a navigation link, a no-op CSS class that silently drops font styling, and FAQ answers that don't match their questions. All are quick fixes but directly affect user-facing correctness. apps/docs/components/bento.tsx (wrong href + invalid class) and apps/docs/app/(home)/uptime/page.tsx (mismatched FAQ entries) Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
LandingPage["Landing Page\n/page.tsx"] -->|Bento card ✅| WebVitals["/web-vitals"]
LandingPage -->|Bento card ❌ href='/web-vitals'| ErrorTracking["/errors"]
LandingPage -->|Bento card ✅| FeatureFlags["/feature-flags"]
Navbar["Navbar"] --> FeaturesMenu["NavbarFeaturesMenu"]
FeaturesMenu -->|href ✅ '/errors'| ErrorTracking
FeaturesMenu -->|href ✅ '/web-vitals'| WebVitals
FeaturesMenu -->|href ✅ '/uptime'| Uptime["/uptime"]
FeaturesMenu -->|href ✅ '/feature-flags'| FeatureFlags
ErrorTracking --> ClosingCTA["ClosingCtaSection"]
WebVitals --> ClosingCTA
Uptime --> ClosingCTA
FeatureFlags --> ClosingCTA
ClosingCTA -->|primaryCta| AppLogin["app.databuddy.cc/login"]
ClosingCTA -->|secondaryCta| Docs["/docs/*"]
Reviews (1): Last reviewed commit: "increase row height of alert stacks and ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
izadoesdev
left a comment
izadoesdev
left a comment
There was a problem hiding this comment.
Hey @mahikachadha5 — welcome to Databuddy! 🎉 Thanks for this contribution, it's a substantial redesign and the new feature pages look well-structured. Here's a first-pass review:
Summary
This PR redesigns the marketing site's landing page and all four feature pages (Error Tracking, Feature Flags, Uptime Monitoring, Web Vitals). It replaces the old SciFi-themed components with a cleaner grid-based layout, adds new demo/visual components for each feature, updates the navbar and footer, and adds routing links from the bento grid to individual feature pages. All changes are frontend-only under apps/docs/ — no backend, database, or pipeline code is touched.
Issues
🔴 Critical
Wrong link on Error Tracking bento card — The Error Tracking card in bento.tsx links to /web-vitals instead of /errors. See inline comment.
🟡 Warning
- FAQ answer mismatch on uptime page — Two FAQ items have questions that were updated but answers that still belong to the old questions. See inline comment on
uptime/page.tsx. - Full D3 library imported (~490KB) —
uptime-landing-visuals.tsxdoesimport * as d3 from "d3"but only usesd3-geo. See inline comment. - External CDN fetch with no fallback — The world map component fetches topology JSON from jsDelivr at runtime with no error UI. See inline comment.
- Removed redirects will break inbound links —
next.config.tsremoves the redirects for/error-trackingand/web-vitals→ existing bookmarks and search engine links will 404. Consider adding 301 permanent redirects to the new paths (/errorsand/web-vitals) instead of just removing them.
🔵 Suggestion
font-basetypo inweb-vitals-alert-cycle-demo.tsx— not a valid Tailwind class, likely meantfont-normal. Silent no-op.right-200inhero.tsx— Tailwind's default scale goes to 96. This likely does nothing unless there's a custom config entry. Considerright-[200px]or a standard value.- Use
<Link>instead ofrouter.pushfor the Changelog entry innavbar-features-menu.tsx— gives better prefetching and right-click behavior. - Secondary button variant change in
button.tsxis global — everyvariant="secondary"button across the docs site will change appearance. Worth confirming no unintended regressions. - Unused
starsprop inhero.tsx— the prop is accepted and immediately discarded (stars: _stars). Clean up the interface to avoid confusion.
Overall Assessment: Needs changes
The wrong Error Tracking link and FAQ mismatches are quick fixes. The D3 bundle import is worth addressing before merge since it adds significant weight to a marketing page. Everything else is solid work. 👏
| <BentoCard | ||
| className="h-full md:col-span-4 md:row-span-1" | ||
| contentClassName="pb-0" | ||
| description="Catch and fix bugs fast" |
There was a problem hiding this comment.
Bug: This links the Error Tracking card to /web-vitals instead of /errors. Should be href="/errors" to match the new errors page you've added.
| }, | ||
| { | ||
| question: "What kind of services can I monitor?", | ||
| question: "Can I create a public status page?", | ||
| answer: | ||
| "Any public website, API, or web service. You can also parse JSON health endpoints to monitor specific fields — useful for services that report their own status.", | ||
| }, | ||
| { |
There was a problem hiding this comment.
These last two FAQ items have mismatched questions and answers — it looks like the questions were updated but the answers still belong to the old questions.
- "Can I create a public status page?" → answer talks about "Any public website, API, or web service" (this was the old "What kind of services can I monitor?" answer)
- "Will it integrate with my existing alerts?" → answer talks about plan pricing (this was the old "Is uptime monitoring included in all plans?" answer)
The answers need to be rewritten to match the new questions.
| @@ -0,0 +1,588 @@ | |||
| "use client"; | |||
|
|
|||
| import * as d3 from "d3"; | |||
There was a problem hiding this comment.
Importing all of D3 (import * as d3) pulls in ~490KB minified. Only geoNaturalEarth1, geoPath, and the GeoPermissibleObjects type are used here. Swap to:
import { geoNaturalEarth1, geoPath, type GeoPermissibleObjects } from "d3-geo";This should reduce the bundle impact significantly for a marketing page.
| "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json" | ||
| ); | ||
| _topoCache = await res.json(); | ||
| return _topoCache; |
There was a problem hiding this comment.
This fetches a ~100KB JSON file from jsDelivr at runtime on every first mount with no timeout, no retry, and the catch just silently returns — leaving users with a blank canvas and no feedback. Consider either bundling a simplified topology as a static import, or at minimum showing a fallback/skeleton state when the fetch fails.
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
…ch with worldTopo json
2 participants
Description
Please include a summary of the change and which issue is fixed. Also include relevant motivation and context.
Checklist
These changes are all frontend changes involving the marketing site. Summary of changes at a high-level is as follows:
Each feature page includes demos or abstract visuals for the capabilities of the feature.