Landing Pattern 04

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.

Hard Constraints (No Workarounds)

• Build from scratch with React + Tailwind CSS.
• Do not render a screenshot as the page.
• Do not inject downloaded HTML chunks from the reference site.
• Do not hardcode remote proprietary media as mandatory assets.
• Use local placeholder visuals for proprietary screenshots/logos when needed.
• Match structure, spacing, typography, section order, and color balance through iterative parity.

---

Design Tokens

Colors

Token	Value	Usage
Background	#ffffff	Main canvas
Surface	#fafaf9	Card sections
Surface Alt	#f5f5f4	Visual containers
Text Primary	#1c1917	Headlines
Text Secondary	#57534e	Body copy
Border	#e7e5e4	Dividers and card outlines
Accent Orange	#fe551b	Eyebrows, pills, ribbons
CTA Dark	#1c1917	Primary button background
CTA Light	#f1f0ef	Secondary pill button

Type Scale

• Hero title: 60-76px, font-semibold, tight tracking.
• Section title: 48-66px, tight tracking.
• Card title: 34-46px.
• Body copy: 22-35px depending on section prominence.
• Meta/eyebrow: 11-13px, uppercase, letter-spaced.

Fonts

Usage	Font	Fallback
Display	Inter 600/700	system-ui, sans-serif
Body	Inter 400/500	system-ui, sans-serif
UI Mono (optional)	SFMono-Regular	Menlo, monospace

---

Component Structure

Build these files in src/components/ in this order:

#	Component	Purpose
1	Navbar.tsx	Minimal top nav with brand, links, CTAs
2	Hero.tsx	Announcement pill, large headline, dual CTA
3	HeroPreview.tsx	Browser-like hero preview with orange ring motifs
4	ExtensionsSection.tsx	Two feature cards under “Docs that are an extension…“
5	TestimonialBlock.tsx	Reusable avatar + quote row
6	AssistantHighlight.tsx	Split card with assistant visual and CTA
7	QualityToolsSection.tsx	3-card docs tools section
8	ConnectedKnowledge.tsx	Split card, text left visual right
9	EnterpriseIntelligence.tsx	Side features + central security visual
10	CustomerStories.tsx	Logo/story slider-like card row
11	FinalCTA.tsx	Large final call-to-action panel
12	Footer.tsx	Multi-column link footer + trust badges

App.tsx assembly order

<Navbar />
<Hero />
<HeroPreview />
<ExtensionsSection />
<TestimonialBlock variant="gravitee" />
<AssistantHighlight />
<QualityToolsSection />
<TestimonialBlock variant="batch" />
<ConnectedKnowledge />
<EnterpriseIntelligence />
<TestimonialBlock variant="swarmia" />
<CustomerStories />
<FinalCTA />
<Footer />

---

Visual Design Reference

Overall Aesthetic

• Very light grayscale base with orange accents.
• Rounded cards everywhere (rounded-2xl to rounded-[36px]).
• Large, confident typography blocks.
• Section rhythm: narrative headline -> visual proof -> testimonial -> repeat.
• Orange concentric ribbon motifs as repeated visual signature.

Component #1: Navbar

• Sticky top, subtle bottom border.
• Left: siteTitle.
• Center: lightweight nav labels.
• Right: Log in and dark Start for free button.

Component #2: Hero

• Small announcement pill with orange New badge.
• Huge 2-line heading.
• Subtext spans ~2 lines.
• Two CTA pills.

Component #3: HeroPreview

• Rounded shell with light border.
• Orange ring motifs clipped into corners.
• Fake browser top row + centered help center content.
• Grid of 9 small cards.
• Cookie notice chip at bottom-right.
• Small circular controls under preview.

Component #4: ExtensionsSection

• Heading: “Docs that are an extension of your product”.
• 2-column cards:
  • Left: Documentation Assistant
  • Right: AI-readable export + structured integration protocol
• Top half visual, bottom half text + CTA pill.

Component #5: TestimonialBlock

• Left avatar tile with branded lower strip.
• Right large quote text + role line + “Read the story” button.

Component #6: AssistantHighlight

• Split card, visual left and text right.
• Orange eyebrow.
• Dark CTA pill with arrow icon.

Component #7: QualityToolsSection

• Heading + subtitle.
• 3 feature cards: Version Sync, Visual Editor, Documentation Assistant.
• Optional top-right orange badge (Early access).

Component #8: ConnectedKnowledge

• Split layout.
• Left text block.
• Right abstract connected visual with dashed orange borders.

Component #9: EnterpriseIntelligence

• Center headline + subtitle + Learn more.
• Three-column layout:
  • left support cards
  • center large security visual
  • right security/auth cards

Component #10: CustomerStories

• Eyebrow + headline.
• “View all” dark button.
• 4 logo cards with tiny arrow bubble.
• Progress dots + left/right controls under cards.

Component #11: FinalCTA

• Large rounded panel on light surface.
• Faint geometric emblem in background.
• Headline, short body, 2 CTA pills.

Component #12: Footer

• Brand row with social pills.
• Multi-column links.
• Trust badges + legal text centered.

---