Landing Page Rebuild Spec

Context

TracePlot is a pre-launch EUDR compliance product. The current landing page presents itself as a live product with trial signup CTAs and fabricated customer testimonials. The product does not exist yet. The goal of the site is to validate demand by converting visitors into paid reservations before launch.

This spec covers every change needed to turn the site into an honest, high-converting validation page.

---

Strategic decisions

Conversion model: Stripe-backed reservation

Primary conversion action is a refundable deposit via Stripe Checkout to reserve an onboarding slot for launch.

After Stripe checkout, redirect to a confirmation page that sets expectations: what happens next, when launch is expected, how to reach the team.

Keep an email-only fallback for visitors who want to follow along but are not ready to commit. This is secondary -- a small text link, not a competing CTA.

Content honesty policy

• Remove all fabricated testimonials. The two current testimonials (Antwerp operations manager, Hamburg founder) and the social snippet quote are invented. Delete them.
• Remove fabricated proof metrics. "First DDS submitted in 4 days", "23 suppliers onboarded in one rollout" -- these imply real usage that does not exist. Delete them.
• Remove the logo strip / proof bar labels. "Coffee importer", "Cocoa trader" etc. presented as customer categories is misleading without actual customers.
• Keep all regulatory facts. Deadlines, fine structures, commodity coverage, EUDR article references -- these are public record and verifiable. They are the strongest honest content on the page.
• Keep the problem framing. "No compliance team? No supplier data?" is an honest description of the target audience's situation, not a false claim.
• Keep the workflow description. How the product will work (collect, verify, submit) is a statement of intent, not a false claim, as long as it is framed as "how TracePlot works" rather than "how customers are using TracePlot."

---

Page structure (revised)

Cut from 11 sections to 7. Every section earns its place by moving the visitor closer to a reservation decision.

Section 1: Hero

Purpose: Establish the problem, qualify the visitor, present the reservation offer.

Current state has 9 staggered elements and ~15 distinct text items. Cut to:

[Kicker]    EUDR enforcement begins December 30, 2026

[H1]        Every shipment needs proof.

[Lead]      The EU deforestation regulation requires plot-level
            geolocation, satellite verification, and a submitted
            Due Diligence Statement for every covered shipment.
            Most small importers have none of this in place.

[CTA]       Reserve your onboarding slot -- EUR 49 (fully refundable)

[Microcopy] Refundable deposit. Secures your place in the first
            launch cohort. No product access until launch.

Remove:

• The 3 question pills ("No compliance team?" etc.) -- move to diagnostic section
• The hero highlights list
• The secondary "See pricing" CTA (pricing is further down; one action here)
• The timeToValueStatement line

Keep the ProductMock visual on the right but add a label: "Product preview -- launching [month] 2026"

Section 2: Trust bar

Purpose: Quick scannable facts that establish regulatory grounding.

Keep current items but reframe:

• "TRACES-ready workflow" --> "Designed for TRACES submission"
• "14-day free trial" --> "Launching [month] 2026" (do not promise a trial that does not exist)
• "Covers all 7 EUDR commodities" -- keep as is
• "EU-hosted infrastructure" -- keep as is

Section 3: How it works (StepFlow)

Purpose: Show the visitor what they are reserving access to.

Keep the 3-step flow (Collect, Verify, Submit). This is honest product intent.

Reframe the intro copy:

[Eyebrow]   How it works

[H2]        Three steps from supplier list to submitted DDS.

[Body]      TracePlot replaces the spreadsheet-and-email cycle with one
            workflow. Here is what the process looks like.

Keep the step cards and visuals. The CSS mocks are acceptable here as product previews as long as the page does not claim the product is live.

Add after the step flow:

[CTA]       Reserve your spot -- launching [month] 2026
[Link]      See pricing below

Section 4: The problem (replaces Diagnostic + Audience Statement)

Purpose: Qualify the visitor and create urgency through honest problem framing.

Merge the current diagnostic section and audience statement into one tighter section. This is where the "No compliance team?" content moves.

[Eyebrow]   Is this you?

[H2]        Most small importers are not ready. The deadline does not care.

[Cards - 3 across]
  Card 1: "Do you have plot-level GPS coordinates for every farm
           your suppliers use?"
  Card 2: "Can you prove those plots were not deforested after
           December 31, 2020?"
  Card 3: "Do you know how to prepare and submit a Due Diligence
           Statement?"

[Reassurance] If you said no to any of these, you are in the majority.
              That is exactly what TracePlot is designed to solve.

Remove the decorative checkboxes. Use the cards as plain content, not interactive affordances.

Remove the audienceStatement as a separate section. Fold it into the section body:

Built for small and mid-sized importers of coffee, cocoa, wood,
palm oil, soy, rubber, and cattle products who do not have a
dedicated compliance team.

Section 5: Comparison table

Purpose: Help the visitor evaluate alternatives.

Keep the current table structure (Spreadsheets vs Consultant vs TracePlot). This is honest -- it describes what TracePlot will do vs what the alternatives offer.

One change: in the "Annual cost" row, update the TracePlot column from "From EUR 2,388" to "From EUR 199/mo" to match the pricing section and avoid confusion.

Remove the current intro copy "Manual coordination looks cheaper until..." and replace with:

[Eyebrow]   Comparison

[H2]        Three ways to handle EUDR compliance.

[Body]      Every EU importer of covered commodities needs to solve this.
            Here is how the options compare.

Section 6: Pricing + Reservation

Purpose: Show pricing, convert to reservation.

Keep the monthly plans (Solo EUR 199, Growth EUR 499, Scale EUR 999). Keep the pay-per-check option (EUR 3/check).

Changes:

• All plan CTAs change from "Start 14-day trial" to "Reserve this plan -- EUR 49"
• Scale plan CTA changes from "Talk to us about scale" to "Contact us about Scale" linking to mailto:contact@traceplot.com (or a contact form if one is built)
• Add a note under the pricing grid:

Your EUR 49 deposit is fully refundable. It reserves your spot in the
first launch cohort and locks in these prices. You will not be charged
the plan fee until the product launches and you activate your account.

Remove the valueAnchor (the fine-threat message). The regulatory stakes are already established by this point in the page. Repeating the threat next to the price creates a negative association.

Section 7: FAQ + Final CTA

Purpose: Handle remaining objections, close with one last reservation CTA.

Keep the FAQ accordion. Update/add these items:

Add:

• "Is TracePlot live yet?" Answer: "Not yet. We are launching in [month] 2026. You can reserve your onboarding slot now with a fully refundable EUR 49 deposit."
• "What does the EUR 49 deposit get me?" Answer: "A guaranteed spot in the first onboarding cohort, priority setup support, and locked launch pricing. The deposit is fully refundable any time before launch."

Update:

• "How long does it take to get compliant?" -- remove "Most teams submit their first Due Diligence Statement within two to four weeks" (no teams have done this yet). Replace with: "The workflow is designed so that most import teams can go from first supplier invite to submitted DDS within two to four weeks."

Keep as-is: "Does EUDR apply to me?", "When is the deadline?", "What happens if I do not comply?", "Does my FSC or Rainforest Alliance certification count?", "What if my suppliers do not already have GPS coordinates?", "Can I do this with spreadsheets?"

Final CTA block (replaces current final-cta section):

[Eyebrow]   Reserve your spot

[H2]        Your suppliers will not get faster in November.

[Body]      Onboarding slots for the first cohort are limited.
            Reserve now, start onboarding the week we launch.

[CTA]       Reserve your spot -- EUR 49 (fully refundable)

[Microcopy] No product access until launch. Full refund if you
            change your mind. Questions? contact@traceplot.com

Sections removed

---

New pages and components

Reservation confirmation page (/reserved)

After successful Stripe Checkout, redirect here.

[H1]        You are in.

[Body]      Your onboarding slot is reserved. Here is what happens next:

[Steps]
  1. We will email you when the product is ready for onboarding.
  2. You will set up your importer profile and invite your first suppliers.
  3. Your EUR 49 deposit will be applied to your first invoice.

[Note]      Expected launch: [month] 2026.
            Questions? contact@traceplot.com

[Link]      Read the methodology while you wait --> /methodology

Email fallback

For visitors not ready to pay, add a single text link below the primary reservation CTA (not a competing button):

Not ready to reserve? Leave your email and we will notify you at launch.

This opens an inline email input. Store emails in a simple backend (or use a service like Buttondown, ConvertKit, or even a Stripe customer with no charge).

Do not make this visually compete with the reservation CTA. Small text, no button styling.

---

Component-level changes

Hero (landing-page.tsx)

• Remove heroHighlights array
• Remove the hero__questions list (move content to Section 4)
• Remove hero__answer paragraph
• Remove secondary "See pricing" CTA
• Remove timeToValueStatement from microcopy
• Change primary CTA text to "Reserve your onboarding slot"
• Add "EUR 49, fully refundable" microcopy
• Add "Launching [month] 2026" label near ProductMock

Site content (lib/site-content.ts)

• Delete socialSnippet
• Delete testimonials array
• Delete proofBarLabels array
• Delete proofHighlights (used in landing-page.tsx, not in site-content)
• Update primaryCtaHref to point to Stripe Checkout URL or /reserve handler
• Update trustBarItems to remove "14-day free trial", replace with launch timing
• Add reservationCta object with consistent text
• Update finalCta copy to reservation framing
• Delete valueAnchor
• Update pricingPlans CTA text from trial language to reservation language
• Update FAQ items as specified above

Pricing section (pricing-section.tsx)

• Update CTA text on all plans
• Remove valueAnchor aside
• Add refund/deposit explanation note after pricing grid

FAQ accordion (faq-accordion.tsx)

• Add 2 new FAQ items (product status, deposit details)
• Update ordering to put "Is TracePlot live yet?" first or second
• Update "How long does it take to get compliant?" answer

Landing page (landing-page.tsx)

• Delete the section--snippet section (social proof quote)
• Delete the testimonials section entirely
• Delete the logo-strip component usage
• Delete the features section (primary + secondary features + methodology callout)
• Move methodology callout link to footer
• Delete the standalone section--statement (audience statement)
• Merge audience statement text into diagnostic section

Diagnostic section

• Remove diagnostic-card__check span elements
• Keep cards as plain content

CTA consistency

Establish exactly 2 CTA phrasings used across the entire site:

No other CTA text variations. Every green button says "Reserve your onboarding slot." Every ghost button says "See pricing."

Header (site-header.tsx)

• Change "Start free" button to "Reserve your spot" (shorter for header)
• Keep deadline note as-is

Footer (site-footer.tsx)

• Remove "Start free" from Resources links, replace with "Reserve" linking to Stripe/reserve flow
• Add methodology link to Product column
• Keep all other links

---

CSS changes

Hero questions selector fix

Current CSS targets .hero__questions p but the HTML uses <li> elements. Since we are removing this component, no fix needed. If the diagnostic cards keep similar styling, ensure selectors match the actual markup.

Color contrast audit

Check these combinations against WCAG AA (4.5:1 minimum for normal text):

If any combination fails, darken the text color until it passes. Suggested fix: change --color-text-muted to #3d524b and --color-text-soft to #546960.

Removed component styles

After deleting sections, remove unused CSS for:

• .quote-snippet and children
• .testimonial-grid, .testimonial-card and children
• .logo-strip and children
• .feature-grid, .feature-card, .feature-card--primary
• .feature-grid--secondary
• .methodology-callout
• .hero__questions, .hero__answer, .hero__highlights
• .diagnostic-card__check
• .proof-highlights

New styles needed

• Reservation note block (refund policy text under pricing)
• Email fallback inline form
• Confirmation page (/reserved)
• "Launching [month]" label badge for hero visual

---

Stripe integration

Checkout flow

Use Stripe Checkout in payment mode (one-time charge) for the EUR 49 deposit.

POST /api/reserve --> creates Stripe Checkout Session
  - line_items: [{ price: DEPOSIT_PRICE_ID, quantity: 1 }]
  - mode: "payment"
  - success_url: /reserved?session_id={CHECKOUT_SESSION_ID}
  - cancel_url: /?cancelled=1
  - metadata: { plan: "solo" | "growth" | "scale", source: "landing" }
  - customer_email: (if collected before redirect)

On success, store the reservation in a database or spreadsheet:

• Email
• Selected plan
• Stripe payment intent ID
• Timestamp
• Refund status

Refund handling

Process refunds manually via Stripe Dashboard or build a simple /api/refund endpoint. Given pre-launch volume, manual is fine.

---

Metrics

Track these to evaluate demand:

A target of 2-3% reservation rate from qualified traffic would indicate strong demand. Below 0.5% suggests the messaging or targeting needs work before building the product.

---

What stays unchanged

• /methodology page -- honest regulatory content, keep as-is
• /legal/* pages -- keep as-is
• /docs system -- keep as-is
• Site header structure and responsive behavior
• Site footer structure (with minor link updates)
• StepFlow component and interaction pattern
• PlotCompare component
• ProductMock, SupplierPortalMock, DdsDocumentMock visuals
• CSS design system (colors, typography, spacing, radius, shadows)
• All accessibility infrastructure
• prefers-reduced-motion support
• Mobile responsive breakpoints

---

Implementation order

1. Content surgery -- remove fabricated content (testimonials, proof metrics, logo strip), update CTAs and copy. This is the most urgent change because the current site is actively misleading.
2. Page restructure -- delete removed sections, merge diagnostic + audience, cut features section.
3. Stripe integration -- create /api/reserve endpoint, Stripe Checkout session, /reserved confirmation page.
4. Email fallback -- inline email capture for non-reserving visitors.
5. CSS cleanup -- remove dead styles, add new component styles, run contrast audit.
6. Metrics -- add event tracking for reservation funnel.