_             
  ___ __ _  ___| |_ _   _ ___ 
 / __/ _` |/ __| __| | | / __|
| (_| (_| | (__| |_| |_| \__ \
 \___\__,_|\___|\__|\__,_|___/
Submit

Landing Pattern 53

Style direction: Reference landing study

$ npx cactus add accretion
Copied!
Aa
Google SansDisplay
Aa
GeistBody

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 Tokens

Colors

TokenValueUsage
Background#efebe4Page background (warm beige)
Dark Surface#050505Dark sections background, sidebar, header, buttons
Primary#ea580cOrange-600 — brand accent, CTA buttons, highlights
Card#ffffffCard fills on light sections
Text Primary#0a0a0aHeadlines, primary body text on light sections
Text Light#ffffffText on dark sections
Text Soft#a1a1a1Secondary text on dark surfaces
Text Faint#737373Tertiary text, labels
Border Darkrgba(255,255,255,0.08)Borders on dark surfaces
Border Lightrgba(10,10,10,0.12)Borders on light surfaces
Surface Subtlelinear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02))Dark card fills
Secondary#e7e5e4Secondary backgrounds on light sections
Muted Foreground#525252Muted text

Fonts

UsageFont FamilyFallback
DisplayGoogle Sanssans-serif
BodyGeistsystem-ui, sans-serif

Spacing Variables

TokenValueMobile
Section padding84px72px
Section gap56px40px
Block gap48px32px
Subsection gap36px24px
Card gap16px14px
Shell max-width1328px100vw-16px

Component Structure

Build the following components in this exact order. Each is a separate file under src/components/landing/. The page assembles them top-to-bottom in App.tsx.

#Component FileDescription
1Header.tsxFloating dark pill header with logo, nav links, orange CTA
2HeroSection.tsxCentered headline with gradient bg, Kanban board mockup, trusted brands
3ProductivitySection.tsxOrange-to-dark gradient, asymmetric card grid, benefit cards
4WorkflowSection.tsxSplit layout with accordion tabs and placeholder mockups
5AiSection.tsxDecorative gradient circle, gradient text title, 4-column feature cards
6IntegrationsSection.tsx3-column layout with integration category cards and center placeholder
7TestimonialsSection.tsx4-column masonry grid of quote cards, rating card, metric cards
8PricingSection.tsx4 pricing tiers with accent on recommended plan
9FaqSection.tsxSplit layout with collapsible accordion items
10FooterCta.tsxLight beige section with CTA, newsletter, nav columns, large logo

App.tsx assembly order:

<Header />
<main>
  <HeroSection />
  <div className="dark-region">
    <ProductivitySection />
    <WorkflowSection />
    <AiSection />
    <IntegrationsSection />
    <TestimonialsSection />
    <PricingSection />
    <FaqSection />
    <SectionFlare flipped />
  </div>
</main>
<FooterCta />

Shared Primitives

Create a primitives.tsx file with reusable components:

  • SectionIntro — Centered or left-aligned heading (clamp(3rem,5vw,4rem)) + optional body text (clamp(1rem,1.6vw,1.5rem))
  • SectionFlare — Decorative gradient transition element (118px tall, multi-layer radial gradients blending orange to dark)
  • PlaceholderBlock — Generic placeholder div with border border-white/14 bg-transparent and inner shadow
  • AvatarStack — Overlapping circular placeholder avatars with negative margin stacking
  • LogoMark — Custom SVG logo (open circle with diagonal line and arc details)

Visual Design Reference

Dual-tone design — warm beige (#efebe4) for hero and footer, very dark (#050505) for the main content sections. Orange (#ea580c) is the primary accent throughout.

Overall Aesthetic

  • Warm beige page background with dark content sections creating a strong contrast
  • The main content area (productivity through FAQ) sits in a continuous dark #050505 background
  • A decorative gradient flare transitions between the light hero and dark sections (orange radial gradients)
  • Glassmorphic cards on dark sections: semi-transparent white borders (border-white/6), subtle gradient fills
  • Display headings use Google Sans, body text uses Geist — both with tight tracking (-0.06em to -0.07em)
  • Fluid typography using clamp() for all headings
  • Rounded corners throughout: rounded-[22px] for cards, rounded-[14px] for buttons
  • Shell container: min(1328px, calc(100vw - 40px)) centered

Component #1: Header

  • Floating dark pill positioned absolute inset-x-0 top-0 z-20 with pt-2
  • Centered container: max-w-[736px], min-h-[70px], rounded-[22px]
  • Background: bg-[#050505f0] with border border-white/8 and shadow-[0_18px_36px_rgba(0,0,0,0.14)]
  • Left: SVG logo mark + “Platform” text in white, text-base font-semibold
  • Center: nav links (Features, Integrations, Testimonials, Pricing, FAQ) in text-sm text-white/92, hidden on mobile
  • Right: orange CTA button bg-orange-600 rounded-xl min-h-11 px-[22px] text-[13px] font-semibold text-white, hidden on mobile
  • Mobile: hamburger menu icon replaces nav and CTA, header expands to full width

Component #2: HeroSection

  • Background: radial-gradient(125% 96% at 50% 0%, white 0%, white 64%, orange-600 100%) — white fading to orange at bottom
  • Top padding: pt-[142px] to clear the floating header
  • Badge pill: centered, rounded-full border border-neutral-950/15 bg-white/30, inner shadow, contains orange “NEW” badge pill + text
  • Headline: text-[clamp(3.9rem,6vw,5rem)], tracking [-0.07em], leading [0.94], max-width 900px, centered
  • Subtitle: text-[clamp(1.25rem,2vw,1.5rem)] in text-neutral-600, max-width 760px
  • CTA button: dark bg-sidebar rounded-[14px] min-h-14 px-7, white text, font-semibold
  • Hero Board (desktop): dark Kanban board mockup (bg-[#050505] rounded-[28px], min-h-[780px]) with:
    • Left sidebar (208px wide): logo, user profile placeholder, nav items (Home, My Tasks, Inbox, Analytics, Docs, Calendar, Settings), project list with active item indicator (orange left border + bg-white/6)
    • Main area: search bar, avatar stack + invite button, breadcrumbs, page title (text-[32px]), view tabs (Board, Timeline, Calendar, Dashboard, Progress, Forms — first active with bg-white/8)
    • 4 Kanban columns: Backlog, To Do, In Process, Done — each with count badge (bg-[rgba(255,90,4,0.2)] text-[#f4975d])
    • Task cards: rounded-2xl border border-white/4 with gradient fill, date, title, colored tag pills, avatar stack
    • Tag colors: Backlog=orange, Design/Development=pink, Medium=yellow, Low=gray, Complete=green
  • Hero Phone (mobile): phone frame mockup (rounded-[42px] bg-[#080808]) with notch, status bar, and mobile task view
  • Trusted by: “Trusted by teams everywhere” text + 4 brand icons with Lucide icons (Orbit, Sparkles, Waves, LoaderCircle)

Component #3: ProductivitySection

  • Background: radial-gradient(125% 96% at 50% 0%, orange-600 0%, orange-600 64%, sidebar 100%) — orange fading to dark
  • White text throughout
  • SectionIntro: centered, “All the essentials for modern productivity”
  • Asymmetric card grid: grid-cols-[1.4fr_0.7fr_0.7fr]
    • First card (“Work anywhere”) spans 2 rows, min-h-[706px], contains tall mobile mockup placeholder
    • Second card (“Performance”) and third card (“Live collaboration”) are standard height min-h-[370px]
    • Fourth card (“Smart automation”) spans 2 rows with bg-[linear-gradient(180deg,#ff8d14,#ff5a04,#dd4200)] orange gradient
    • All cards: rounded-[24px] border border-sidebar-border with subtle gradient fill, title + description + placeholder
  • Benefit row: 4-column grid below, separated by border-t border-t-white/6
    • Each card: rounded-[22px] with icon in rounded-2xl container using radial-gradient(circle at 30% 30%, rgba(255,126,32,0.2), transparent), title, description
    • Icons: MousePointer2, AppWindow, Link2, Blocks from Lucide
    • Benefits: Custom workflows, Clear insights, Tool integrations, Adaptable & scalable

Component #4: WorkflowSection

  • Dark background, white text
  • Split layout: grid-cols-[minmax(0,440px)_minmax(0,1fr)]
  • Left: SectionIntro + 4 accordion-style items with border-t border-t-white/10
    • Active item: border-t-[rgba(255,136,0,0.75)] text-white with visible description
    • Inactive items: text-[#666] with hidden description
    • Topics: Stay organized, Get more done, Work together, Seamless across devices
  • Right: beige card container (bg-background rounded-[22px] p-[26px]) with inner placeholder, plus floating small card offset below-left

Component #5: AiSection

  • Dark background, centered layout
  • Decorative orb: h-[210px] container with repeating-radial-gradient circles creating a concentric ring pattern
    • Center pill: h-[62px] rounded-full bg-[#121212] with gradient border stroke (orange → purple) using mask-composite technique, Plus icon inside
  • Gradient text title: “Say hello to” in white + “built-in AI” with bg-[linear-gradient(90deg,#fff,#ff7b00,#f6a000,#b23cff)] bg-clip-text text-transparent
  • 4 feature cards: grid-cols-4, each rounded-[22px] with centered content
    • Icon: Check mark in rounded-2xl container with orange radial gradient
    • Features: Generate tasks, Summarize conversations, Autofill details, Smart search

Component #6: IntegrationsSection

  • Dark background, centered title
  • Counter badge: rounded-full bg-white/4 pill showing “17” count badge + “integrations and adding more every month”
  • 3-column layout: grid-cols-[1fr_minmax(280px,360px)_1fr]
    • Left column: Engineering (6 tools) + Customer Experience (3 tools) cards stacked
    • Center: tall placeholder with gray gradient fill (bg-[linear-gradient(180deg,#4d4d4d,#727272)]), min-h-[518px]
    • Right column: Media & Design (5 tools) + Analytics (3 tools) cards stacked
  • Integration cards: title + count badge, description, chip list
    • Chips: rounded-[14px] bg-white/4 min-h-10 with filled circle icon + tool name (GitHub, Figma, Slack, etc.)

Component #7: TestimonialsSection

  • Dark background, centered SectionIntro
  • 4-column masonry grid: each column is a vertical stack of mixed card types
    • Rating card: “4.9/5” with 5 orange stars, avatar stack, “+82” badge, “Leave a review” CTA button
    • Quote cards: quote text in text-[#d4d4d4], author name + company, optional avatar placeholder
    • Metric cards: large stat number (text-[56px]), label, brand name
      • Accent metric: orange gradient background (rgba(255,126,32,0.22) to rgba(255,90,4,0.96))
      • Regular metric: standard dark card
    • Metrics: “29% Faster Project Delivery” (accent), “43% Lower Overhead Costs”
  • All cards: rounded-[22px] border border-sidebar-border with gradient fill

Component #8: PricingSection

  • Dark background, centered SectionIntro
  • 4 pricing cards: grid-cols-4, each min-h-[486px]
    • Starter: Free, 4 features
    • Pro: $14/month with “Billed yearly” toggle, 4 features
    • Premium (accent): $26/month, “Recommended” orange badge, bg-[linear-gradient(180deg,rgba(255,126,32,0.14),rgba(255,255,255,0.02)),#1c140e], orange CTA button
    • Enterprise: Custom, “Everything in Premium, plus:” intro, 4 features
  • Features listed with orange Check icons from Lucide
  • Price: text-[62px] font-medium tracking-[-0.06em]
  • CTA buttons: accent plan gets bg-orange-600, others get bg-white/5 border-white/4

Component #9: FaqSection

  • Dark background
  • Split layout: grid-cols-[0.56fr_1fr]
  • Left: SectionIntro — “Frequently asked questions”
  • Right: 5 collapsible items with rounded-[20px] border border-sidebar-border bg-white/2
    • Each: min-h-[72px] button with question text + Plus icon
    • Open state: max-h-[120px] with animated reveal, answer text in text-[var(--text-soft)]
    • Questions: free version, plan changes, mobile app, yearly discounts, payment methods

Component #10: FooterCta

  • Light beige background (bg-background), dark text
  • CTA block: centered headline clamp(3rem,5vw,4.3rem), subtitle, dark CTA button
  • Divider: h-px bg-border
  • Footer grid: grid-cols-[220px_220px_minmax(320px,1fr)]
    • Navigation links column
    • Social links column (Twitter, LinkedIn, Instagram)
    • Newsletter signup: heading + email input (bg-[rgba(255,255,255,0.55)] rounded-[14px]) + Subscribe button
  • Large branding: oversized logo mark (220px) + “Platform” text at clamp(5.6rem,13vw,14rem), opacity-[0.12] in beige
  • Copyright bar: date + creator credit

Section Flare Transition

  • Decorative gradient element (118px tall, 74px on mobile) placed between hero and dark section, and flipped at bottom
  • Multi-layer CSS gradient: three radial gradients blending warm beige through orange to dark (#050505)

Interaction & Animation Patterns

  • Button hover: hover:-translate-y-px with transition-transform duration-200
  • Nav link hover: opacity-90 → opacity-100
  • FAQ accordion: transition-[max-height] duration-[220ms] ease-[ease]
  • Cards: no hover animation, static presentation

Responsive Breakpoints

  • Desktop: min-[1101px] — full multi-column layouts
  • Tablet: max-[1100px] — single column, hero phone replaces board
  • Mobile: max-[720px] — tighter spacing, smaller type, stacked layouts