Improve landing page copy and design for better conversion#112
Draft
waldekmastykarz wants to merge 12 commits into
Draft
Improve landing page copy and design for better conversion#112waldekmastykarz wants to merge 12 commits into
waldekmastykarz wants to merge 12 commits into
Conversation
- Rewrite hero subhead to lead with outcome, not product description - Make primary CTA specific: 'Simulate your first API error' vs generic 'Get Started' - Strengthen problem statement with visceral consequences (paged at 2AM, retry spirals) - Rewrite all 6 use case headlines to sell benefits/outcomes, not features - Remove repetitive uppercase tracked eyebrow labels from every section - Improve 'Works with everything' to emphasize the differentiator (test your real app) - Add trust signal: 'runs entirely on your machine, no telemetry required' - Rewrite quick-start card titles as user-intent phrases - Replace gradient text with solid purple-400 for hero and final CTA - Reorder quick-start cards to lead with most compelling use case (error testing) - Make final CTA match hero CTA for consistent conversion path Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Typography: - Add Sora as heading font for distinctive, confident voice - Apply font-heading class to all h1-h3 headings Page structure (reordered for conversion): - Hero → Problem → Quick Starts → Primary use case → Secondary use cases → Differentiator → Compact capabilities → Video → VS Code → Trust → CTA - Move quick-start cards directly after problem statement (path to value) - Promote resilience testing to full-width primary use case (h2) - Consolidate rate-limiting, CI/CD, MCP into compact 3-column grid - Reduce from 6 identical alternating sections to varied layouts Visual hierarchy: - Primary use case gets full-width h2 treatment (biggest impact) - Secondary use cases (mocking, AI) get medium h3 with code demos - Tertiary capabilities get text-only compact cards (no code blocks) - Differentiator section gets ambient glow + positioning copy Motion: - Sections render visible by default (accessible baseline) - JS adds .will-reveal class only when motion is allowed - Proper prefers-reduced-motion: all animations disabled - Easing changed to cubic-bezier(0.16, 1, 0.3, 1) (expo-out) - Removed hero tagline animation step (tighter sequence) Copy additions: - Differentiator section: 'Not mocks. Not stubs. Not a test harness.' - Quick-starts subhead: 'Pick a scenario. You'll be running in minutes.' Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
'Your app works fine. Until the API doesn't.' — names the tension immediately, triggers loss aversion, and creates an open loop that pulls the reader into the subhead. Also rework the problem statement section into a problem→solution bridge: 'You test the happy path. Dev Proxy tests everything else.' This avoids repeating the same emotional beat twice and moves the narrative forward. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Load Sora via Google Fonts <link> for reliable weight delivery (self-hosted woff2 wasn't rendering bold weights) - Use font-extrabold (800) + fluid clamp sizing for commanding presence - Cap heading at 5.5rem to prevent awkward line wrapping - Trim subhead to one focused sentence (less competition with headline) - Remove broken self-hosted @font-face declaration Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The headline has emotional contrast (calm setup → sharp twist),
so the typography should perform that rhythm:
- Setup line ('Your app works fine.'): medium weight, smaller size,
muted color — understated, confident, calm
- Punchline ('Until the API doesn't.'): extrabold, 2x size, purple —
the twist hits hard
Each line has its own size constraint so neither wraps awkwardly.
Wider max-w-5xl container gives breathing room.
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The typographic weight contrast made the setup line look like a caption. The original worked because both lines were equally commanding — differentiated only by color. Apply the same principle: both extrabold, same responsive scale (stepped down one size to accommodate longer text without wrapping). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Replace with periods or restructured sentences. Em-dashes read as LLM-generated text. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Left side: headline + subhead + CTAs, left-aligned (no more wrapping) - Right side: terminal demo, large and prominent with subtle shadow - Terminal now shows 3 requests (200, 429, 504) for richer demonstration - Grid layout at lg breakpoint, stacked on mobile - Left-aligned text eliminates centering-related orphan/wrapping issues - Terminal has more generous padding and spacing for readability - Ambient glow repositioned to right side behind terminal - max-w-7xl for wider composition that uses the viewport The product is the hero. Show the terminal, not the brochure. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Split layout now activates at md (768px) instead of lg (1024px) - Full-height hero only applied at lg+ (no dead space on tablets) - Natural padding (py-16) on smaller viewports keeps content tight - Remove unnecessary top padding from text column Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Center text + CTAs below md, left-align when split is active - Bigger heading on mobile (text-5xl/text-6xl vs previous text-4xl) - Subhead max-w-lg centered on mobile, left-aligned on desktop - Terminal constrained to max-w-xl and centered when stacked - No viewport requires special treatment to look correct Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
md:grid-cols-[1fr,1.2fr] is invalid Tailwind syntax — arbitrary values use underscores for spaces. Fixed to md:grid-cols-[1fr_1.2fr]. This was preventing the two-column layout from ever activating. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
The split layout was a failed experiment — it broke at common viewport widths and added complexity without visual improvement. Back to centered: headline, subhead, CTAs, terminal demo. Same composition as the original that worked, with the improved copy and a wider terminal showing 3 request types (200, 429, 504). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rewrites the landing page copy and structure to sell the problem Dev Proxy solves rather than listing features. Adds a heading font (Sora) and restructures the page flow for better conversion.
Key changes
Copy
Structure
Design
Files changed
src/pages/index.astrosrc/styles/global.css--font-headingvariablesrc/layouts/Layout.astroPRODUCT.mdScreenshot
TODO: Add screenshot of the landing page at desktop and mobile widths