Revamp Clips/Slides landing pages, add pricing page and design crawl - #2818
Revamp Clips/Slides landing pages, add pricing page and design crawl#2818timmilazzo wants to merge 153 commits into
Conversation
![builder-io-integration[bot]](https://avatars.githubusercontent.com/in/353721?s=60&v=4){kind=small}
There was a problem hiding this comment.
Builder reviewed your changes and found 7 potential issues 🔴
Review Details
Incremental Code Review Summary
This update expands the PR substantially by refactoring the shared docs header and template landing components, adding localized template surfaces, and simplifying the Slides and Clips landing implementations. I reviewed the new changes against the previously open findings: the Clips launch-path comment and the obsolete successive-style-guide comment were resolved; the extractor SSRF gap, font bound, color-response cleanup, microphone omission, pricing placeholders, and pricing localization remain open and were not reposted.
New Findings
- 🔴 HIGH —
templates.$slug.tsxno longer typechecks becausetrackEventis still called after its import was removed, whileTemplateDocsLinkis unused. - 🟡 MEDIUM — Existing TemplateCard interaction tests now fail after the accessible control contract was changed.
- 🟡 MEDIUM — The Slides guided builder no longer invokes the newly added design-reference action, leaving the advertised flow unreachable.
- 🟡 MEDIUM — The redesigned header removes docs search and locale/theme controls without replacements.
- 🟡 MEDIUM — The fixed dark header background makes light-theme navigation and branding unreadable.
- 🟡 MEDIUM — Several localized template pages now use a hardcoded English final CTA.
The shared refactor needs a build/test pass before merge, particularly around header affordances and generic template routing.
🧪 Browser testing: Will run after this review (PR touches UI code)
| onClick={(event) => { | ||
| applyFirstTouchAttributionToLink(event.currentTarget); | ||
| trackEvent("try live demo", { |
There was a problem hiding this comment.
🔴 Restore the generic template route imports
The demo click handler still calls trackEvent, but the refactor removed its import; TemplateDocsLink is also left unused. With the docs package's TypeScript settings these produce Cannot find name 'trackEvent' and TS6133, so the package cannot typecheck/build. Restore the tracking import or remove the handler, and remove/use the stale docs-link import.
| <Link | ||
| data-an-prefetch="viewport" | ||
| to={sitePathForLocale(`/apps/${template.slug}`, locale)} | ||
| className="primary-button w-full" | ||
| onClick={() => | ||
| trackEvent("click template", { | ||
| template: template.slug, | ||
| location: "card", | ||
| }) | ||
| } | ||
| > | ||
| Learn more |
There was a problem hiding this comment.
🟡 Preserve or update the TemplateCard interaction contract
The card replaces the existing Try It/Customize It controls with Learn more/Customize it, but PopoverControls.test.tsx still queries the old accessible names and now fails in four cases. Preserve the tested labels/behavior or update the affected tests and consumers to the new contract before merging.
| export function SlidesTryNow() { | ||
| const t = useT(); | ||
| const tn = (key: string) => t(`templateLanding.slides.tryNow.${key}`); | ||
| const editorRef = useRef<HTMLDivElement>(null); |
There was a problem hiding this comment.
🟡 Wire the guided Slides builder to the design-reference action
This component now only exposes an editor ref, a blank contenteditable prompt, and the outbound link; it never calls crawl-design-reference. The new action and its design-reference/style-guide UI copy are therefore unreachable, so the advertised guided deck-builder flow has regressed to a hand-written prompt. Restore the controls/action integration or remove the unused action and associated copy.
| </ContextMenuContent> | ||
| </ContextMenu> | ||
|
|
||
| {/* Desktop nav links */} |
There was a problem hiding this comment.
🟡 Restore an entry point for docs search
The redesign removes SearchTrigger, the Cmd/Ctrl-K listener, and the SearchModal render. SearchModal is not rendered elsewhere, so users can no longer search the documentation. Keep the existing trigger/modal wiring or provide a replacement entry point.
| </a> | ||
| </div> | ||
|
|
||
| {/* Right actions */} |
There was a problem hiding this comment.
🟡 Keep locale and theme controls reachable
The refactor removes DocsLanguagePicker, DocsLanguageSuggestion, and ThemeToggle from both desktop and mobile header markup without adding replacements. Users can no longer discover/switch localized routes or override the browser theme through the UI. Restore these controls or expose equivalent reachable settings.
| className={`sticky top-0 z-50 transition-[background-color,backdrop-filter] duration-300 ${ | ||
| showHeaderBg | ||
| ? "bg-[rgba(10,10,10,0.90)] backdrop-blur-md" |
There was a problem hiding this comment.
🟡 Use theme-aware colors for the scrolled header
The new scrolled/non-home header always applies bg-[rgba(10,10,10,0.90)], while the light-theme navigation and logo remain dark variants. In light mode this produces a near-black header with near-black text/wordmark, making primary navigation effectively unreadable. Use theme variables or matching dark-theme foreground/logo variants.
| <Link | ||
| data-an-prefetch="viewport" | ||
| to={sitePathForLocale("/apps", locale)} | ||
| className="secondary-button" | ||
| > | ||
| View more apps |
There was a problem hiding this comment.
🟡 Localize the final app-catalog CTA
The refactor replaces the existing localized CTA key with the English literal View more apps; the same literal was added to the Analytics, Calendar, Content, Dispatch, Forms, Mail, and Plan template routes. Non-English template pages now render this prominent CTA in English. Restore the existing per-template key or add a shared localized key and use it across the routes.
|
Here's a visual recap of what changed: Open the full interactive recap
|
2 participants
Summary
Reworks the Clips and Slides app landing pages with new hero copy, CTAs, and comparison tables, adds an interactive "Try Now" slide-deck prompt builder backed by a new website design-extraction action, and introduces a new Pricing page linked from the footer.
Problem
The Slides and Clips landing pages had generic, PowerPoint/Loom-alternative messaging and no way for a visitor to quickly generate a tailored starting prompt for the Slides agent. There was also no pricing page explaining the open-source/MIT model versus the optional managed backend.
Solution
crawl-design-referenceaction that safely fetches a public URL via the hostedfreedesign.mdextraction API, normalizes colors/fonts, and returns bounded metadata for use in prompt generation, with SSRF protections and tests.SlidesTryNowcomposer component that lets users pick a deck type/length, optionally pull design signals from a URL, and streams a style-guide summary into an editable prompt before linking out to the Slides app with the prompt pre-filled./pricingroute with hero, free-features list, fine-print, optional Builder backend section, self-host vs. Builder comparison table, FAQ, and an email capture CTA.footer.pricinglink, and reused the new hero copy in the/appstemplate cards.ClipsQuickStartrecording-mode picker component (screen/camera/audio options).Key Changes
packages/docs/actions/crawl-design-reference.ts(+tests) — fetches and normalizes design signals (title, description, colors, fonts) from a public URL viafreedesign.md, with SSRF/DNS safety checks and hex/HSL color name lookup via color.pizza.SlidesTryNow.tsx(+tests) — deck-type/style dropdowns, streaming style-guide injection, contentEditable prompt composer, and "Generate my deck" link that appends only selected dropdown values toinitialPrompt.ClipsQuickStart.tsx— recording mode/surface/audio picker for the Clips landing page.pricing.tsx(+ locale alias route) — full pricing page with free features, fine print, Builder backend section, self-host cost comparison table, FAQ accordion, and email signup form.featuredTemplates, and Clips/Slides cards now source hero copy overrides for/appslisting.footer.pricing,templateLanding.clips.quickStart.*, andtemplateLanding.slides.tryNow.*keys across all supported locales.To clone this PR locally use the Github CLI with command
gh pr checkout 2818You can tag me at @BuilderIO for anything you want me to fix or change