FINAL RESULT

A complete product landing page

The example uses an original product called Relay. Replace its content and tokens with your own identity while preserving the section responsibilities, semantic structure, and responsive contract.

Relay.Start a project

PRODUCT DELIVERY, MADE CLEAR

Turn a useful idea into a product people trust.

One connected workflow for requirements, design, development, and release.

Build your first project

12k+projects shipped

38%less rework

2.4×faster handoff

PAGE ARCHITECTURE

Ten sections, one intentional journey

A landing page should answer questions in the order a visitor experiences them: what is this, why trust it, how does it work, what does it cost, and what should I do next?

Header

Orientation and navigation

Hero

Promise and primary action

Proof

Credibility through metrics

Features

Three differentiated benefits

Workflow

How the product creates value

Testimonial

Human evidence

Pricing

A clear commitment choice

FAQ

Resolve final objections

CTA

One focused conversion

Footer

Closure and attribution

PROJECT FOUNDATION

Create and connect the project

Start with React + Vite, then add the Coordiation compiler, Vite adapter, and icon registry from the current release-candidate channel.

Terminal

npm create vite@latest useful-launch -- --template react
cd useful-launch
npm install
npm install -D @coordiation/css@next @coordiation/vite@next
npm install @coordiation/icons@next

vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import coordiation from "@coordiation/vite";

export default defineConfig({
  plugins: [
    react(),
    coordiation({
      content: ["src"],
      cssFile: "src/coordiation.css",
      sourceMap: true,
      toolchain: { minify: process.env.NODE_ENV === "production" },
    }),
  ],
});

src/main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "virtual:coordiation.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode><App /></StrictMode>
);

Keep every directory containing JSX inside content. The scanner can only generate utilities it can see as complete literal class names.

DESIGN TOKENS

Define the theme before composing sections

The theme establishes a small brand scale while preflight and all used utilities remain generated by Coordiation.

src/coordiation.css

@import "@coordiation/icons/style.css";
@coordiation;

@co-theme {
  --co-color-brand-50: #eef7ff;
  --co-color-brand-100: #d9edff;
  --co-color-brand-500: #1677ff;
  --co-color-brand-600: #0f62d8;
  --co-color-brand-700: #0d4fa9;
}

html { scroll-behavior: smooth; }
body { background: #fff; color: #101114; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

Use semantic brand steps instead of repeating arbitrary colors.
Keep authored global CSS limited to project-wide behavior.
Respect reduced-motion preferences from the first commit.

TREE-SHAKEABLE ICONS

Create one safe icon boundary

Every icon is imported from an exact Coordiation path. The helper renders trusted package-owned SVG strings and gives meaningful icons an accessible label.

src/Icon.jsx

import { renderIcon } from "@coordiation/icons";
import { ArrowRightLinearIcon } from "@coordiation/icons/linear/arrow-right";
import { BoltLinearIcon } from "@coordiation/icons/linear/bolt";
import { CheckCircleLinearIcon } from "@coordiation/icons/linear/check-circle";
import { LetterLinearIcon } from "@coordiation/icons/linear/letter";
import { ShieldCheckLinearIcon } from "@coordiation/icons/linear/shield-check";
import { StarLinearIcon } from "@coordiation/icons/linear/star";

export const icons = {
  arrow: ArrowRightLinearIcon,
  bolt: BoltLinearIcon,
  check: CheckCircleLinearIcon,
  letter: LetterLinearIcon,
  shield: ShieldCheckLinearIcon,
  star: StarLinearIcon,
};

export function Icon({ source, label, size = 20 }) {
  return (
    <span
      className="co-inline-flex co-items-center co-justify-center"
      dangerouslySetInnerHTML={{
        __html: renderIcon(source, { size, label }),
      }}
    />
  );
}

Never construct an icon import dynamically. Literal paths keep bundles tree-shakeable and let AI agents verify names against the registry.

SECTION RECIPE

Header and responsive navigation

Help visitors understand where they are and reach the next important section without searching.

Live previewheader.section

Relay.Start a project

Features Workflow Pricing

Design contract

Sticky, semantic header
Desktop navigation above lg
Native details menu on compact screens
One primary action

src/sections/Header.jsx

import { Icon, icons } from "./Icon";

export function Header() {
  return (
    <header className="co-sticky co-top-0 co-z-50 co-border-b co-border-neutral-200 co-bg-white">
      <div className="co-mx-auto co-flex co-max-w-7xl co-items-center co-justify-between co-px-5 co-py-4 lg:co-px-8">
        <a className="co-text-xl co-font-bold co-tracking-tight" href="#top">
          Relay<span className="co-text-brand-600">.</span>
        </a>

        <nav className="co-hidden co-items-center co-gap-8 lg:co-flex" aria-label="Primary navigation">
          <a className="co-text-sm co-text-neutral-600 hover:co-text-black" href="#features">Features</a>
          <a className="co-text-sm co-text-neutral-600 hover:co-text-black" href="#workflow">Workflow</a>
          <a className="co-text-sm co-text-neutral-600 hover:co-text-black" href="#pricing">Pricing</a>
          <a className="co-text-sm co-text-neutral-600 hover:co-text-black" href="#faq">FAQ</a>
        </nav>

        <a className="co-hidden co-items-center co-gap-2 co-rounded-full co-bg-black co-px-5 co-py-3 co-text-sm co-font-semibold co-text-white lg:co-inline-flex" href="#start">
          Start a project <Icon source={icons.arrow} size={17} />
        </a>

        <details className="co-relative lg:co-hidden">
          <summary className="co-cursor-pointer co-list-none co-rounded-full co-border co-border-neutral-300 co-px-4 co-py-2 co-text-sm co-font-semibold">Menu</summary>
          <nav className="co-absolute co-right-0 co-top-12 co-grid co-min-w-56 co-gap-1 co-rounded-2xl co-border co-border-neutral-200 co-bg-white co-p-3 co-shadow-xl" aria-label="Mobile navigation">
            {[["Features", "#features"], ["Workflow", "#workflow"], ["Pricing", "#pricing"], ["FAQ", "#faq"], ["Start a project", "#start"]].map(([label, href]) => (
              <a className="co-rounded-xl co-px-4 co-py-3 co-text-sm hover:co-bg-neutral-100" href={href} key={href}>{label}</a>
            ))}
          </nav>
        </details>
      </div>
    </header>
  );
}

SECTION RECIPE

Hero with one useful promise

Explain the outcome, identify the audience, and expose one primary and one secondary path.

Live previewhero.section

PRODUCT DELIVERY, MADE CLEAR

Turn a useful idea into a product people trust.

Connect requirements, design, development, and release in one visible workflow.

Build your project See how it works

Design contract

Mobile-first one-column base
Two-column layout at lg
Outcome-led headline
Product preview with meaningful status

src/sections/Hero.jsx

import { Icon, icons } from "./Icon";

export function Hero() {
  return (
    <section className="co-overflow-hidden co-border-b co-border-neutral-200" id="top">
      <div className="co-mx-auto co-grid co-max-w-7xl co-items-center co-gap-14 co-px-5 co-py-20 md:co-py-28 lg:co-grid-cols-2 lg:co-px-8 lg:co-py-32">
        <div>
          <p className="co-inline-flex co-items-center co-gap-2 co-rounded-full co-bg-brand-50 co-px-4 co-py-2 co-text-sm co-font-semibold co-text-brand-700">
            <Icon source={icons.bolt} size={17} /> Product delivery, made clear
          </p>
          <h1 className="co-mt-7 co-max-w-3xl co-text-5xl co-font-bold co-leading-none co-tracking-tight md:co-text-7xl">
            Turn a useful idea into a product people trust.
          </h1>
          <p className="co-mt-7 co-max-w-2xl co-text-lg co-leading-8 co-text-neutral-600">
            Relay connects requirements, design, development, and release in one visible workflow—so teams move faster without losing the decisions that matter.
          </p>
          <div className="co-mt-9 co-flex co-flex-col co-gap-3 sm:co-flex-row">
            <a className="co-inline-flex co-items-center co-justify-center co-gap-2 co-rounded-full co-bg-black co-px-6 co-py-4 co-font-semibold co-text-white" href="#start">
              Build your first project <Icon source={icons.arrow} size={18} />
            </a>
            <a className="co-inline-flex co-items-center co-justify-center co-rounded-full co-border co-border-neutral-300 co-px-6 co-py-4 co-font-semibold" href="#workflow">
              See how it works
            </a>
          </div>
          <p className="co-mt-5 co-text-sm co-text-neutral-500">No credit card · Setup in under five minutes</p>
        </div>

        <div className="co-relative co-rounded-3xl co-bg-neutral-950 co-p-4 co-shadow-2xl md:co-p-7" aria-label="Relay project dashboard preview">
          <div className="co-rounded-2xl co-bg-white co-p-5 md:co-p-7">
            <div className="co-flex co-items-center co-justify-between co-border-b co-border-neutral-200 co-pb-5">
              <div><p className="co-text-xs co-uppercase co-tracking-widest co-text-neutral-500">Current project</p><h2 className="co-mt-2 co-text-xl co-font-bold">Customer workspace</h2></div>
              <span className="co-rounded-full co-bg-brand-100 co-px-3 co-py-1 co-text-xs co-font-semibold co-text-brand-700">On track</span>
            </div>
            <ol className="co-mt-6 co-grid co-gap-3">
              {["Requirements approved", "Prototype verified", "Development in progress", "QA ready next"].map((item, index) => (
                <li className="co-flex co-items-center co-gap-3 co-rounded-xl co-bg-neutral-100 co-p-4" key={item}>
                  <span className="co-grid co-size-8 co-place-items-center co-rounded-full co-bg-black co-text-xs co-font-bold co-text-white">{index + 1}</span>
                  <span className="co-text-sm co-font-semibold">{item}</span>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </div>
    </section>
  );
}

SECTION RECIPE

Proof and measurable outcomes

Replace vague trust language with compact, scannable evidence.

Live previewproof.section

projects shipped: 12k+
less rework: 38%
faster handoff: 2.4×
traceable decisions: 99.9%

Design contract

Use a description list for metrics
Two columns on mobile
Four columns on wide screens
Keep labels specific

src/sections/Proof.jsx

export function Proof() {
  const metrics = [["12k+", "projects shipped"], ["38%", "less rework"], ["2.4×", "faster handoff"], ["99.9%", "traceable decisions"]];
  return (
    <section className="co-border-b co-border-neutral-200" aria-labelledby="proof-title">
      <div className="co-mx-auto co-max-w-7xl co-px-5 co-py-16 lg:co-px-8">
        <p className="co-text-center co-text-sm co-font-semibold co-uppercase co-tracking-widest co-text-neutral-500" id="proof-title">Useful work, measured</p>
        <dl className="co-mt-9 co-grid co-grid-cols-2 co-border co-border-neutral-200 lg:co-grid-cols-4">
          {metrics.map(([value, label]) => <div className="co-border-b co-border-neutral-200 co-p-6 even:co-border-l lg:co-border-b-0 lg:co-border-l" key={label}><dt className="co-text-sm co-text-neutral-500">{label}</dt><dd className="co-mt-3 co-text-4xl co-font-bold co-tracking-tight">{value}</dd></div>)}
        </dl>
      </div>
    </section>
  );
}

SECTION RECIPE

Feature cards that explain value

Connect each capability to a practical reason a customer should care.

Live previewfeatures.section

Move with context

Decisions stay attached to the work they change.

Release confidently

Evidence is visible before production.

Keep contracts clear

Requirements remain testable through QA.

Design contract

Three cards, one job each
Coordiation icons use literal imports
Consistent title and copy rhythm
No decorative feature overload

src/sections/Features.jsx

import { Icon, icons } from "./Icon";

const features = [
  [icons.bolt, "Move with context", "Every decision stays attached to the work it changes."],
  [icons.shield, "Release with confidence", "Evidence and approvals are visible before production."],
  [icons.check, "Keep the contract clear", "Requirements remain testable from discovery through QA."],
];

export function Features() {
  return (
    <section className="co-bg-neutral-50" id="features">
      <div className="co-mx-auto co-max-w-7xl co-px-5 co-py-20 md:co-py-28 lg:co-px-8">
        <p className="co-text-sm co-font-semibold co-uppercase co-tracking-widest co-text-brand-700">Why Relay</p>
        <h2 className="co-mt-5 co-max-w-3xl co-text-4xl co-font-bold co-tracking-tight md:co-text-6xl">Clarity at every handoff.</h2>
        <div className="co-mt-12 co-grid co-gap-5 md:co-grid-cols-3">
          {features.map(([icon, title, copy], index) => (
            <article className="co-rounded-3xl co-border co-border-neutral-200 co-bg-white co-p-7" key={title}>
              <span className="co-grid co-size-12 co-place-items-center co-rounded-2xl co-bg-black co-text-white"><Icon source={icon} size={23} /></span>
              <p className="co-mt-9 co-text-xs co-font-bold co-text-neutral-400">0{index + 1}</p>
              <h3 className="co-mt-3 co-text-2xl co-font-bold">{title}</h3>
              <p className="co-mt-4 co-leading-7 co-text-neutral-600">{copy}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

SECTION RECIPE

A visible four-step workflow

Show what happens after someone starts, reducing uncertainty about the product experience.

Live previewworkflow.section

ONE CONNECTED WORKFLOW

From idea to production, without guessing.

01Describe
Clarify the outcome.
02Shape
Design every state.
03Build
Link work to evidence.
04Release
Ship and learn safely.

Design contract

Ordered list for sequence
High-contrast section break
One sentence per step
Responsive table-like rows

src/sections/Workflow.jsx

export function Workflow() {
  const steps = [
    ["01", "Describe the outcome", "Turn the initial idea into answerable requirements."],
    ["02", "Shape the experience", "Connect flows, states, content, and accessible behavior."],
    ["03", "Build from evidence", "Keep implementation linked to approved acceptance criteria."],
    ["04", "Release and learn", "Ship with health checks, rollback readiness, and feedback."],
  ];
  return (
    <section className="co-bg-black co-text-white" id="workflow">
      <div className="co-mx-auto co-max-w-7xl co-px-5 co-py-20 md:co-py-28 lg:co-px-8">
        <div className="co-grid co-gap-8 lg:co-grid-cols-2">
          <div><p className="co-text-sm co-font-semibold co-uppercase co-tracking-widest co-text-brand-100">One connected workflow</p><h2 className="co-mt-5 co-text-4xl co-font-bold co-tracking-tight md:co-text-6xl">From idea to production, without the guessing.</h2></div>
          <p className="co-max-w-xl co-self-end co-text-lg co-leading-8 co-text-neutral-400">Each stage inherits the decisions before it. When a requirement changes, the affected work becomes visible instead of silently drifting.</p>
        </div>
        <ol className="co-mt-14 co-grid co-border-t co-border-neutral-700">
          {steps.map(([number, title, copy]) => <li className="co-grid co-gap-4 co-border-b co-border-neutral-700 co-py-7 md:co-grid-cols-[5rem_1fr_1fr] md:co-items-center" key={number}><span className="co-text-sm co-text-brand-100">{number}</span><h3 className="co-text-2xl co-font-bold">{title}</h3><p className="co-leading-7 co-text-neutral-400">{copy}</p></li>)}
        </ol>
      </div>
    </section>
  );
}

SECTION RECIPE

Testimonial with accountable attribution

Add human proof after the product model is understood.

Live previewtestimonial.section

“Our teams agreed on what done means before the work became expensive.”

Alya Pradana · VP Product, Nusa Health

Design contract

One strong quote
Named role and company
Accessible star label
No anonymous praise

src/sections/Testimonial.jsx

import { Icon, icons } from "./Icon";

export function Testimonial() {
  return (
    <section className="co-bg-brand-50">
      <div className="co-mx-auto co-grid co-max-w-7xl co-gap-12 co-px-5 co-py-20 md:co-py-28 lg:co-grid-cols-[.7fr_1.3fr] lg:co-px-8">
        <div><p className="co-text-sm co-font-semibold co-uppercase co-tracking-widest co-text-brand-700">Customer story</p><p className="co-mt-5 co-text-neutral-600">Nusa Health · Product operations</p></div>
        <figure>
          <div className="co-flex co-gap-1 co-text-brand-600" aria-label="Five out of five stars">{Array.from({ length: 5 }).map((_, index) => <Icon source={icons.star} size={19} key={index} />)}</div>
          <blockquote className="co-mt-7 co-text-3xl co-font-semibold co-leading-tight co-tracking-tight md:co-text-5xl">“Relay helped our product and engineering teams agree on what done means before the work became expensive.”</blockquote>
          <figcaption className="co-mt-8 co-text-sm co-text-neutral-600"><strong className="co-text-black">Alya Pradana</strong> · VP Product</figcaption>
        </figure>
      </div>
    </section>
  );
}

SECTION RECIPE

Pricing with a recommended path

Make the next commitment understandable without hiding important differences.

Live previewpricing.section

Starter$0

One useful experiment

Clear workflow
Traceable evidence

Choose Starter

Team$29

Ship together every week

Clear workflow
Traceable evidence

Choose Team

ScaleCustom

Govern a product portfolio

Clear workflow
Traceable evidence

Choose Scale

Design contract

Three choices maximum
Team plan visually prioritized
Benefits use list semantics
Every card has an action

src/sections/Pricing.jsx

import { Icon, icons } from "./Icon";

const plans = [
  { name: "Starter", price: "$0", copy: "For one useful experiment.", items: ["1 active project", "Core lifecycle", "Community support"] },
  { name: "Team", price: "$29", copy: "For teams shipping every week.", items: ["Unlimited projects", "Approvals and evidence", "Priority support"], featured: true },
  { name: "Scale", price: "Custom", copy: "For governed product portfolios.", items: ["Organization controls", "Custom adapters", "Release support"] },
];

export function Pricing() {
  return (
    <section id="pricing">
      <div className="co-mx-auto co-max-w-7xl co-px-5 co-py-20 md:co-py-28 lg:co-px-8">
        <div className="co-text-center"><p className="co-text-sm co-font-semibold co-uppercase co-tracking-widest co-text-brand-700">Simple pricing</p><h2 className="co-mt-5 co-text-4xl co-font-bold co-tracking-tight md:co-text-6xl">Start useful. Scale when ready.</h2></div>
        <div className="co-mt-12 co-grid co-gap-5 lg:co-grid-cols-3">
          {plans.map((plan) => <article className={plan.featured ? "co-rounded-3xl co-bg-black co-p-8 co-text-white" : "co-rounded-3xl co-border co-border-neutral-200 co-p-8"} key={plan.name}><p className="co-text-sm co-font-semibold">{plan.name}</p><p className="co-mt-6 co-text-5xl co-font-bold co-tracking-tight">{plan.price}</p><p className={plan.featured ? "co-mt-4 co-text-neutral-400" : "co-mt-4 co-text-neutral-600"}>{plan.copy}</p><ul className="co-mt-8 co-grid co-gap-4">{plan.items.map(item => <li className="co-flex co-items-center co-gap-3 co-text-sm" key={item}><Icon source={icons.check} size={18} />{item}</li>)}</ul><a className={plan.featured ? "co-mt-9 co-block co-rounded-full co-bg-white co-px-5 co-py-3 co-text-center co-font-semibold co-text-black" : "co-mt-9 co-block co-rounded-full co-bg-black co-px-5 co-py-3 co-text-center co-font-semibold co-text-white"} href="#start">Choose {plan.name}</a></article>)}
        </div>
      </div>
    </section>
  );
}

SECTION RECIPE

FAQ using native disclosure controls

Answer the final questions without introducing a JavaScript accordion dependency.

Live previewfaq.section

Can we start with one feature?

Yes. Begin with one measurable capability and expand after its contract is clear.

Does it replace our tools?

No. Coordiation connects decisions and evidence while your current tools remain in place.

What if requirements change?

Affected work becomes visible and stale evidence cannot approve the new revision.

Design contract

Native details and summary
Keyboard accessible by default
Questions reflect real objections
Answers remain concise

src/sections/Faq.jsx

export function Faq() {
  const questions = [
    ["Can we start with one feature?", "Yes. Start with one measurable capability, then expand only after its contract and evidence are clear."],
    ["Does Relay replace our existing tools?", "No. It connects decisions and evidence while adapters keep your project, design, QA, and deployment tools in place."],
    ["What happens when requirements change?", "The affected artifacts are revised, old evidence becomes stale, and downstream work is made visible for review."],
  ];
  return (
    <section className="co-bg-neutral-50" id="faq">
      <div className="co-mx-auto co-grid co-max-w-7xl co-gap-12 co-px-5 co-py-20 md:co-py-28 lg:co-grid-cols-[.75fr_1.25fr] lg:co-px-8">
        <div><p className="co-text-sm co-font-semibold co-uppercase co-tracking-widest co-text-brand-700">FAQ</p><h2 className="co-mt-5 co-text-4xl co-font-bold co-tracking-tight md:co-text-6xl">Questions before you begin.</h2></div>
        <div className="co-border-t co-border-neutral-300">{questions.map(([question, answer]) => <details className="co-border-b co-border-neutral-300 co-py-6" key={question}><summary className="co-cursor-pointer co-text-lg co-font-semibold">{question}</summary><p className="co-mt-4 co-max-w-2xl co-leading-7 co-text-neutral-600">{answer}</p></details>)}</div>
      </div>
    </section>
  );
}

SECTION RECIPE

Final call to action

Close the page with one clear invitation and no competing navigation.

Live previewcta.section

Build something useful together.

Tell us the outcome. We will turn it into a clear first project.

Start the conversation

Design contract

Contrasting brand surface
Repeat the primary outcome
Use a real mail or signup destination
Icon reinforces the action

src/sections/FinalCta.jsx

import { Icon, icons } from "./Icon";

export function FinalCta() {
  return (
    <section className="co-bg-brand-600 co-text-white" id="start">
      <div className="co-mx-auto co-max-w-5xl co-px-5 co-py-20 co-text-center md:co-py-28">
        <span className="co-mx-auto co-grid co-size-14 co-place-items-center co-rounded-2xl co-bg-white co-text-brand-700"><Icon source={icons.letter} size={26} /></span>
        <h2 className="co-mt-7 co-text-4xl co-font-bold co-tracking-tight md:co-text-6xl">Build something useful together.</h2>
        <p className="co-mx-auto co-mt-6 co-max-w-2xl co-text-lg co-leading-8 co-text-brand-100">Tell us the outcome you need. We will turn it into a clear first project and show you the next best step.</p>
        <a className="co-mt-9 co-inline-flex co-items-center co-gap-2 co-rounded-full co-bg-white co-px-7 co-py-4 co-font-semibold co-text-brand-700" href="mailto:hello@example.com">Start the conversation <Icon source={icons.arrow} size={18} /></a>
      </div>
    </section>
  );
}

SECTION RECIPE

Footer, ownership, and icon attribution

End with identity, essential links, contact, copyright, and required Solar icon credit.

Live previewfooter.section

Design contract

Coordiation copyright retained
Visible Solar attribution
Small navigation set
Mobile stack becomes three columns

src/sections/Footer.jsx

export function Footer() {
  return (
    <footer className="co-bg-black co-text-white">
      <div className="co-mx-auto co-grid co-max-w-7xl co-gap-10 co-px-5 co-py-14 md:co-grid-cols-3 lg:co-px-8">
        <div><a className="co-text-xl co-font-bold" href="#top">Relay.</a><p className="co-mt-4 co-max-w-xs co-text-sm co-leading-6 co-text-neutral-400">A clearer path from product idea to production evidence.</p></div>
        <nav className="co-grid co-gap-3 co-text-sm" aria-label="Footer navigation"><a href="#features">Features</a><a href="#workflow">Workflow</a><a href="#pricing">Pricing</a></nav>
        <div className="md:co-text-right"><a className="co-text-sm" href="mailto:hello@example.com">hello@example.com</a><p className="co-mt-5 co-text-xs co-text-neutral-500">© 2026 Coordiation. All rights reserved.</p><p className="co-mt-2 co-text-xs co-text-neutral-500">Icons: Solar Icons by 480 Design, CC BY 4.0.</p></div>
      </div>
    </footer>
  );
}

FINAL ASSEMBLY

Compose the page without hiding its structure

The final file reads like the page outline. Each section remains independently editable, testable, and understandable to a human or AI agent.

src/App.jsx

import { Header } from "./sections/Header";
import { Hero } from "./sections/Hero";
import { Proof } from "./sections/Proof";
import { Features } from "./sections/Features";
import { Workflow } from "./sections/Workflow";
import { Testimonial } from "./sections/Testimonial";
import { Pricing } from "./sections/Pricing";
import { Faq } from "./sections/Faq";
import { FinalCta } from "./sections/FinalCta";
import { Footer } from "./sections/Footer";

export default function App() {
  return (
    <>
      <a className="co-sr-only focus:co-not-sr-only focus:co-fixed focus:co-left-4 focus:co-top-4 focus:co-z-50 focus:co-bg-white focus:co-p-3" href="#content">Skip to content</a>
      <Header />
      <main id="content">
        <Hero />
        <Proof />
        <Features />
        <Workflow />
        <Testimonial />
        <Pricing />
        <Faq />
        <FinalCta />
      </main>
      <Footer />
    </>
  );
}

The skip link is visually hidden until keyboard focus reaches it. Keep main, section IDs, headings, navigation labels, lists, and disclosure elements semantic.

PRODUCTION CHECK

Verify behavior, not only appearance

320px

No horizontal page overflow, reachable mobile navigation, full-width actions, and readable code/content.

768px

Grid enhancements must preserve reading order and touch targets.

1280px

Content remains constrained; lines do not stretch across the entire viewport.

Keyboard

Skip link, navigation, pricing links, FAQ disclosures, CTA, and footer links are reachable.

Motion

All nonessential transitions stop when reduced motion is requested.

Content

Every headline states an outcome and every action names what happens next.

Terminal

npm run dev

# Verify the production output before deployment
npm run build

# Optional: inspect what the installed compiler supports
npx @coordiation/cli@next compatibility

AI GENERATION CONTRACT

Keep generated pages predictable

Give an agent these constraints before asking it to change or extend the recipe.

Use only complete literal co-* candidates.
Use Coordiation icons from exact registry imports.
Preserve section responsibility and semantic reading order.
Start mobile-first, then enhance at named breakpoints.
Never hide an essential action behind hover alone.
Keep Coordiation copyright and required icon attribution.
Run the production build after any content or class change.

Recipe complete

You now have a production-shaped page, not a disconnected collection of sections.

Deepen responsive design Browse Coordiation components Back to top

Build one page.Understand every section.

A complete product landing page

Turn a useful idea into a product people trust.

Ten sections, one intentional journey

Header

Hero

Proof

Features

Workflow

Testimonial

Pricing

FAQ

CTA

Footer

Create and connect the project

Define the theme before composing sections

Create one safe icon boundary

Header and responsive navigation

Hero with one useful promise

Turn a useful idea into a product people trust.

Proof and measurable outcomes

Feature cards that explain value

Move with context

Release confidently

Keep contracts clear

A visible four-step workflow

Testimonial with accountable attribution

Pricing with a recommended path

FAQ using native disclosure controls

Final call to action

Build something useful together.

Footer, ownership, and icon attribution

Compose the page without hiding its structure

Verify behavior, not only appearance

Keep generated pages predictable

You now have a production-shaped page, not a disconnected collection of sections.

Build one page.
Understand every section.