Startup landing page

import MinimalNavbar from '@/components/blocks/navigation/minimal'
import StartupHeader from '@/components/blocks/headers/startup'
import BentoFeatures from '@/components/blocks/sections/features/bento'
import ChecklistSplitFeatures from '@/components/blocks/sections/features/checklist-split'
import InlineProofStats from '@/components/blocks/sections/stats/inline-proof'
import SideBySideComparison from '@/components/blocks/sections/comparison/side-by-side'
import RatedTestimonials from '@/components/blocks/sections/testimonials/with-rating'
import SinglePlanPricing from '@/components/blocks/sections/pricing/single-plan'
import FAQWithSupportCTA from '@/components/blocks/sections/faq/with-support-cta'
import StartupFooter from '@/components/blocks/footers/startup'

/**
 * Startup landing page
 *
 * Short, direct, and honest about scope. The included-and-excluded checklist
 * appears early because an early-stage product's biggest risk is attracting
 * customers who wanted something else.
 */
export default function StartupLandingPattern() {
  return (
    <>
      <MinimalNavbar />
      <main>
        <StartupHeader />
        <InlineProofStats />
        <BentoFeatures />
        <ChecklistSplitFeatures />
        <SideBySideComparison />
        <RatedTestimonials />
        <SinglePlanPricing />
        <FAQWithSupportCTA />
      </main>
      <StartupFooter />
    </>
  )
}

import { ArrowRight } from 'lucide-react'
import { ButtonLink } from '@/components/ui/button'
import { Container } from '@/components/ui/layout'
import { Avatar, AvatarGroup } from '@/components/ui/avatar'
import { team } from '@/content/demo'

/**
 * Startup header
 *
 * Short, direct, and human: an oversized claim, one action, and social proof
 * built from faces rather than logos. Early-stage companies rarely have a
 * logo wall worth showing, so the proof here is who is already using it.
 */
export default function StartupHeader() {
  const names = team.slice(0, 5).map((member) => member.name)

  return (
    <header className="border-b border-line bg-canvas py-section">
      <Container size="narrow" className="text-center">
        <h1 className="display-type text-4xl leading-[1.08] font-semibold text-ink-strong sm:text-5xl">
          Stop rebuilding the same twenty components.
        </h1>
        <p className="mx-auto mt-5 max-w-lg text-md text-ink-muted sm:text-lg">
          Foundry gives a small team the component set a large one would take a year to write.
        </p>

        <div className="mt-8">
          <ButtonLink
            href="/starters/startup/preview"
            size="lg"
            trailingIcon={<ArrowRight className="size-4" />}
          >
            See the startup starter
          </ButtonLink>
        </div>

        <div className="mt-10 flex flex-col items-center gap-3">
          <AvatarGroup names={names} size="sm" label="Teams already building with Foundry" />
          <p className="text-sm text-ink-muted">
            Used by <span className="font-medium text-ink">240+ teams</span> in the demo universe
          </p>
        </div>

        <figure className="mx-auto mt-10 max-w-xl border-t border-line pt-8">
          <blockquote className="text-md text-ink italic">
            “Our first landing page took an afternoon. The second took forty minutes, because by
            then we were composing rather than building.”
          </blockquote>
          <figcaption className="mt-4 flex items-center justify-center gap-2.5 text-sm">
            <Avatar name="Jun Watanabe" size="sm" decorative />
            <span className="font-medium text-ink-strong">Jun Watanabe</span>
            <span className="text-ink-subtle">Product Lead, Kestrel</span>
          </figcaption>
        </figure>
      </Container>
    </header>
  )
}

import { Check, X } from 'lucide-react'
import { Container } from '@/components/ui/layout'

/**
 * Checklist split
 *
 * What the product does and does not do, side by side. Stating the limits
 * explicitly is more persuasive than a longer feature list, and it filters out
 * the people who would have churned.
 */
const included = [
  'Every component, section and starter as source',
  'Light and dark, authored separately',
  'Five palettes and three densities',
  'Keyboard and screen-reader contracts',
  'Server components with small client islands',
  'Documentation generated from the real files',
]

const excluded = [
  'A published npm package to install',
  'A backend, database or CMS',
  'Authentication or payment providers',
  'Charting or animation libraries',
  'A Figma library (the tokens map to variables)',
]

export default function ChecklistSplitFeatures() {
  return (
    <section className="border-b border-line bg-canvas py-section">
      <Container>
        <div className="max-w-2xl">
          <h2 className="display-type text-2xl font-semibold text-ink-strong sm:text-3xl">
            What is in the box — and what is not.
          </h2>
          <p className="mt-3 text-md text-ink-muted">
            Foundry is a template demonstration. Being explicit about the edges is part of the
            product.
          </p>
        </div>

        <div className="mt-10 grid gap-4 lg:grid-cols-2">
          <div className="rounded-xl border border-success-line bg-success-soft p-6">
            <h3 className="label-caps text-success">Included</h3>
            <ul className="mt-4 flex flex-col gap-3">
              {included.map((item) => (
                <li key={item} className="flex items-start gap-2.5 text-sm text-ink">
                  <Check className="mt-0.5 size-4 shrink-0 text-success" aria-hidden="true" />
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div className="rounded-xl border border-line bg-surface-sunken p-6">
            <h3 className="label-caps text-ink-muted">Not included</h3>
            <ul className="mt-4 flex flex-col gap-3">
              {excluded.map((item) => (
                <li key={item} className="flex items-start gap-2.5 text-sm text-ink-muted">
                  <X className="mt-0.5 size-4 shrink-0 text-ink-subtle" aria-hidden="true" />
                  {item}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </Container>
    </section>
  )
}