Zed Landing

Image Placeholder Rule

• Wherever the design calls for an image, logo, screenshot, illustration, thumbnail, avatar, chart preview, or product mockup, render an empty div with a neutral gray background instead.
• Keep the placeholder empty and match the intended size, aspect ratio, border radius, and spacing, but do not build dashboard shells, browser chrome, fake charts, or other coded internals to simulate the visual.

Design Language

• Tone: premium developer tooling, precise, minimal, fast.
• Look: white-first canvas with soft gray alternation and restrained accents.
• Typography: elegant display serif for headings + crisp sans body.
• Visual rhythm: large headline moments, then dense utility sections.
• Motion: subtle, functional only (hover/focus/tab transitions).
• UI density: medium density in product previews, low density in narrative sections.

Design Tokens (Required)

:root {
  --zed-bg: #ffffff;
  --zed-surface: #f4f5f7;
  --zed-surface-elevated: #ffffff;
  --zed-code-bg: #1a1b26;

  --zed-text-primary: #111827;
  --zed-text-secondary: #6b7280;
  --zed-text-muted: #9ca3af;

  --zed-primary: #0c53cf;
  --zed-primary-foreground: #ffffff;

  --zed-border: #e5e7eb;
  --zed-border-soft: #f0f1f3;

  --zed-radius-sm: 8px;
  --zed-radius-md: 12px;
  --zed-radius-lg: 16px;

  --zed-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --zed-shadow-md: 0 12px 24px rgba(0, 0, 0, 0.08);

  --zed-font-body: "Inter", system-ui, sans-serif;
  --zed-font-display: "Lora", Georgia, serif;
  --zed-font-mono: "SFMono-Regular", "SF Mono", Menlo, monospace;
}

Type System

• Hero heading: 48-64px, display font, weight 400-500, tight tracking.
• Section heading: 32-44px, display font.
• Paragraph: 16-18px, line-height: 1.6-1.75.
• Card title: 18-20px.
• UI labels/meta: 12-14px.

Component Build Order (Section by Section)

Create these components in src/components/ and mount in App.tsx in this exact order:

1. Navbar
2. Hero
3. TabbedPreview
4. SocialProof
5. FeatureGrid
6. OpenSource
7. AIFeatures
8. Extensions
9. BuiltWithCare
10. TeamMessage
11. BlogSection
12. FinalCTA
13. Footer

Section Specs

1. Navbar: sticky, white + blur, compact links, right-side CTA pair, mobile drawer.
2. Hero: centered display headline, concise subtext, dual CTA, trust/proof microline.
3. TabbedPreview: 3 interactive tabs, dark editor-style panel, content switches per tab.
4. SocialProof: grayscale logo row + testimonial card grid.
5. FeatureGrid: section title + link + 6-9 feature cards with icons.
6. OpenSource: large stats row + contributor avatar matrix.
7. AIFeatures: dark preview panel with AI assistant behavior + bullet callouts.
8. Extensions: extension gallery cards in responsive multi-column grid.
9. BuiltWithCare: categorized capability checklist grid.
10. TeamMessage: founder/team narrative block with optional portrait.
11. BlogSection: 3 post cards with thumbnail placeholders and metadata.
12. FinalCTA: mirrored dual-CTA section with strong heading and short support line.
13. Footer: blue background, 5 columns, utility/legal links, social links.

App Assembly

<Navbar />
<Hero />
<TabbedPreview />
<SocialProof />
<FeatureGrid />
<OpenSource />
<AIFeatures />
<Extensions />
<BuiltWithCare />
<TeamMessage />
<BlogSection />
<FinalCTA />
<Footer />

Reusable Code Example: Section Wrapper

type SectionProps = {
  id: string
  className?: string
  children: React.ReactNode
}

export function Section({ id, className = "", children }: SectionProps) {
  return (
    <section id={id} className={`border-t border-[var(--zed-border-soft)] ${className}`}>
      <div className="mx-auto w-full max-w-7xl px-6 py-24 md:py-32">{children}</div>
    </section>
  )
}

Reusable Code Example: Dark Editor Mock

export function EditorMock() {
  return (
    <div className="overflow-hidden rounded-xl border border-[#2a2c3a] bg-[var(--zed-code-bg)] shadow-[var(--zed-shadow-md)]">
      <div className="flex items-center gap-2 border-b border-[#2f3242] px-4 py-3">
        <span className="size-2 rounded-full bg-[#ff5f56]" />
        <span className="size-2 rounded-full bg-[#ffbd2e]" />
        <span className="size-2 rounded-full bg-[#27c93f]" />
      </div>
      <div className="grid gap-2 p-4 font-mono text-sm text-[#d1d5db]">
        <div className="h-4 w-2/3 rounded bg-[#25293a]" />
        <div className="h-4 w-1/2 rounded bg-[#25293a]" />
        <div className="h-4 w-3/4 rounded bg-[#25293a]" />
        <div className="h-4 w-2/5 rounded bg-[#25293a]" />
      </div>
    </div>
  )
}

Content Rules

• Do not use lorem ipsum.
• Generate all section copy from Step 0 answers.
• Keep headlines concise and developer-oriented.
• Keep testimonials realistic and role-specific.
• Use local placeholders for thumbnails/avatars when assets are missing.
• Keep section order and relative vertical spacing consistent with the reference captures.

Responsiveness Rules

• Mobile-first layout.
• Stack all multi-column grids at sm/md breakpoints.
• Prevent overflow in code preview sections.
• Keep button rows wrapping cleanly on small screens.