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

Mintlify Landing

Style direction: Reference landing study

$ npx cactus add mintlify
Copied!
Aa
InterHeading
Aa
InterBody

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#ffffffPage background
Surface#F9FAFBAlternating section backgrounds
Text Primary#111827Headlines, primary text
Text Secondary#6B7280Body copy, descriptions
Text Muted#9CA3AFCaptions, meta text
Primary#0D9373Buttons, links, accents
Primary Foreground#ffffffText on primary-colored backgrounds
Dark Section BG#0C2018Enterprise section background
Dark Section Text#ffffffText on dark section
Card BG#ffffffCards on gray section backgrounds
Border#E5E7EBCard borders, dividers
Border Soft#F0F1F3Subtle section dividers
Footer BG#111111Footer background

Fonts

UsageFont FamilyFallback
BodyIntersystem-ui, sans-serif
HeadingInter (weight 600-700)system-ui, sans-serif
MonospaceSFMono-RegularSF Mono, Menlo, monospace

Hero Background Treatment

Use a soft atmospheric gradient wash behind the hero instead of a sourced illustration. It should span full width as an absolute-positioned div behind the hero text and the main placeholder panel, with a fade-out at the bottom using maskImage: linear-gradient(to bottom, #000 60%, transparent 100%).

Component Structure

Use a consistent outline icon set everywhere — no emojis.

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

#Component FileDescription
1Navbar.tsxFixed transparent header with backdrop-blur, white text, white “Start for free” button
2Hero.tsxSoft background wash, white heading, subtitle, glass email input with white “Start now” button inside, large gray placeholder panel
3LogoCloud.tsxTwo rows of neutral gray logo placeholders
4IntelligenceAge.tsx”Built for the intelligence age” — 3 cards (2 top + 1 full-width bottom)
5AIAssistant.tsx”Intelligent assistance” — heading + large gray placeholder panel
6Enterprise.tsxDark green section — enterprise features + CTA
7CaseStudy.tsxFeatured case study card + stats + logo bar
8IndustryShowcase.tsx”Unlock knowledge for any industry” — 3-card carousel
9BottomCTA.tsxFinal CTA section with two buttons + two info columns
10Footer.tsxDark footer with link columns, social icons, status

App.tsx assembly order:

<Navbar />
<Hero />
<LogoCloud />
<IntelligenceAge />
<AIAssistant />
<Enterprise />
<CaseStudy />
<IndustryShowcase />
<BottomCTA />
<Footer />

Visual Design Reference

Light mode only — clean, white-background, documentation-focused design.

Overall Aesthetic

  • White background with subtle gray (#F9FAFB) alternating sections for rhythm
  • Clean sans-serif throughout (Inter) — headings are bold weight, not serif
  • A soft atmospheric background wash creates a warm, premium feel
  • Generous whitespace between sections
  • Green accent color (#0D9373) for CTAs, links, and interactive elements
  • Subtle borders and shadows on cards — no heavy decoration
  • Dark green (#0C2018) section for enterprise emphasis

Component #1: Navbar

  • Fixed position (fixed top-0 left-0 right-0), transparent background with backdrop-blur-md, z-50
  • No solid background color — the hero background wash shows through behind it
  • The navbar sits ON TOP of the hero; the hero starts from the very top of the page (no offset for the header)
  • Height: ~56px (h-14)
  • Left: simple leaf icon + site wordmark in white bold text
  • Center: Resources, Documentation, Customers, Blog, Pricing, Contact sales — all white text: text-sm text-white/80 hover:text-white
  • Right: “Start for free” pill button — white background with dark text: bg-white text-text-primary rounded-full px-5 py-2 text-sm font-medium hover:bg-white/90
  • Mobile: hamburger toggle (white icon), slide-down menu with bg-black/30 backdrop-blur-md background, white links
<header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md">
  ...
  {/* CTA — white bg, dark text */}
  <a className="hidden rounded-full bg-white px-5 py-2 text-sm font-medium text-text-primary transition-colors hover:bg-white/90 md:inline-flex">
    Start for free
  </a>

Component #2: Hero

The hero is a single component containing the heading, subtitle, email input, and a large gray placeholder panel for the product visual area.

Background: A soft gradient wash is rendered as an absolute-positioned div that fades out at the bottom using a CSS mask. This creates a smooth transition into the white page below.

{/* Background wash with fade-out at bottom */}
<div
  className="absolute inset-0"
  style={{
    background: "linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0) 100%)",
    maskImage: "linear-gradient(to bottom, #000 60%, transparent 100%)",
    WebkitMaskImage: "linear-gradient(to bottom, #000 60%, transparent 100%)",
  }}
/>

Text content (inside a relative z-10 wrapper):

  • Center-aligned, padding pt-32 pb-8 md:pt-44 md:pb-12 (extra top padding because the fixed navbar overlaps)
  • max-w-4xl mx-auto for the text content
  • Heading: text-4xl md:text-6xl font-semibold tracking-tight text-white (weight 600, not bold) — all hero text is white to contrast against the sky background
  • Subtitle: text-lg text-white/80, max-width constrained

Email input — uses a glass/frosted effect with the “Start now” button inside the input field, aligned to the right end:

<div className="mx-auto mt-10 max-w-md">
  <div className="flex h-12 items-center rounded-full border border-white/15 bg-white/10 backdrop-blur-md pl-5 pr-1.5">
    <input
      type="email"
      placeholder="you@company.com"
      className="flex-1 bg-transparent text-sm text-white placeholder:text-white/50 outline-none"
    />
    <button className="flex h-9 items-center gap-2 rounded-full bg-white px-5 text-sm font-medium text-text-primary transition-colors hover:bg-white/90">
      Start now
      <ArrowRight className="h-4 w-4" />
    </button>
  </div>
</div>

Hero Visual Placeholder (inside the same Hero component, below the input row):

  • Render a large rounded gray placeholder div instead of a sourced illustration.
  • The placeholder fades out at the bottom using a CSS mask:
<div className="mx-auto max-w-5xl px-6 mt-4 mb-16 md:mb-24">
  <div
    className="w-full rounded-3xl bg-gray-200/80"
    style={{
      maskImage: "linear-gradient(to bottom, #000 50%, transparent 100%)",
      WebkitMaskImage: "linear-gradient(to bottom, #000 50%, transparent 100%)",
      minHeight: "480px",
    }}
  />
</div>

Component #3: LogoCloud

  • White background section, centered
  • Use neutral gray placeholder bars instead of real logo artwork.
  • Each placeholder is a simple rounded bar:
<img
  src={logo.src}
  alt={logo.name}
  className="h-8 w-auto opacity-50 grayscale transition hover:opacity-80 hover:grayscale-0"
/>
  • Evenly spaced: flex flex-wrap justify-center items-center gap-x-14 gap-y-8

Component #4: IntelligenceAge

  • White background section, outer container: max-w-6xl mx-auto px-6
  • Section label: small uppercase text-xs font-semibold tracking-widest text-text-muted (e.g. “BUILT FOR AI & HUMANS”)
  • Heading: text-3xl md:text-4xl font-bold text-text-primary — “Built for the intelligence age”
  • Subtitle: text-lg text-text-secondary text-balance — apply text-balance for even line wrapping
  • Three cards in a md:grid-cols-2 gap-8 grid — 2 on the top row, 1 spanning full width on the bottom:
    • Card 1: “Built for both people and AI” — lucide icons (Users + Bot), description about product docs optimized for AI workflows and human readers alike. Mini illustration bar.
    • Card 2: “Self-updating knowledge management” — lucide icons (RefreshCw + CheckCircle), description about drafting and managing content with a context-aware agent. Colored checkmark circles.
    • Card 3 (md:col-span-2): “Intelligent assistance for your users” — lucide icon (MessageSquareText), description about turning docs into guided conversations, reducing support tickets. Spans full width on the bottom row.
  • All cards: rounded-xl border border-gray-200 bg-white p-8 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md
  • Each card has a mini illustration bar: colored rounded bars in a bg-surface p-4 rounded-lg container

Component #5: AIAssistant

  • Light gray background (bg-[#F9FAFB]) section
  • Heading: “Intelligent assistance for your users”
  • Description: about turning every documentation visit into a guided conversation — AI assistant understands context and delivers exactly what users need
  • Chat UI mockup: rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden max-w-4xl mx-auto
    • Show a documentation page with an embedded chat panel on the right side
    • Chat has a few message bubbles (user question + AI response)
    • Clean, minimal design with subtle borders

Component #6: Enterprise

  • Dark green background (bg-[#0C2018]) full-width section
  • Top row: large heading “Bring intelligence to enterprise knowledge” on left (text-white text-3xl md:text-4xl font-bold), “Explore for enterprise” button on right (border border-white/30 text-white rounded-full px-6 py-3 hover:bg-white/10)
  • Subtitle below heading: text-white/70
  • Two feature columns below (md:grid-cols-2 gap-12):
    • “Built with partnership”: description about white-glove access, dedicated support, custom guidance, extended SLAs. text-white/80
    • “Compliance and access control”: description about SOC 2, ISO27001, GDPR compliance, SAML-based SSO. text-white/80
  • Each column has a bold white title + body text

Component #7: CaseStudy

  • White background section
  • Section label: small uppercase text
  • Featured card: large rounded card with decorative background image/gradient, containing:
    • “See how a high-growth team scales knowledge operations”
    • “Read more →” link in primary green
  • Stats row below: flex gap-12
    • “2M+” large bold number + “Monthly active developers” label
    • “3+” large bold number + “Products across Docs, Chat, and AI” label
  • Logo bar: row of neutral gray placeholder chips, opacity-60

Component #8: IndustryShowcase

  • Light gray background section
  • Section label: small uppercase text
  • Heading: “Unlock knowledge for any industry”
  • Subtitle: about companies across industries scaling with the platform
  • Three case study cards in a row (md:grid-cols-3 gap-6):
    • Card 1: Research team story — dark background, description, “Read story →”
    • Card 2: Media team story — dark background, description, “Read story →”
    • Card 3: Marketplace team story — colorful background, description, “Read story →”
  • Each card: rounded-xl overflow-hidden, top half is branded visual, bottom half is white with text
  • Carousel dots below (flex gap-2 justify-center mt-6): two dots, one active (filled), one inactive (outline)

Component #9: BottomCTA

  • White background, center-aligned, generous padding (py-24 md:py-32)
  • Heading: text-3xl md:text-5xl font-bold text-gray-900 — “Make documentation your winning advantage”
  • Subtitle: text-gray-500 — “Join the leaders of tomorrow to future-proof your documentation today.”
  • Two buttons side by side:
    • Primary: “Get started for free” (bg-primary text-white rounded-full px-6 py-3)
    • Secondary: “Get a demo” (border border-gray-300 text-gray-700 rounded-full px-6 py-3)
  • Two info columns below (md:grid-cols-2 gap-12 mt-12 text-center):
    • “Pricing on your terms” — short description + “Pricing details →” link
    • “Start building” — short description + “Quickstart →” link
  • Dark background (bg-[#111111] text-white) full-width footer
  • max-w-7xl mx-auto container, py-16 px-6
  • Top row: simple brand mark and wordmark in white
  • 5-column link grid (sm:grid-cols-2 lg:grid-cols-5 gap-8):
    • Explore: Features, Customers, Resources, Changelog, OSS Program
    • Resources: Getting Started, Blog, Pricing, Status, Marketplace
    • Documentation: API Reference, Components, Changelog
    • Company: Careers, Code of Conduct
    • Legal: Privacy Policy, Responsible Disclosure, Terms of Service, Security, DMCA/Copyright
  • Column headings: text-sm font-semibold text-white/80 uppercase tracking-wide mb-4
  • Links: text-sm text-white/50 hover:text-white transition-colors
  • Social icons row: generic social icons — text-white/50 hover:text-white
  • Bottom bar: “All systems normal” status dot (green) + neutral copyright text
  • border-t border-white/10 above bottom bar

Interaction & Animation Patterns

  • hover:bg-gray-300 on placeholder logo bars
  • Hover lift on cards: hover:shadow-md hover:-translate-y-0.5 transition
  • Smooth transition-colors on all interactive elements
  • Carousel dots: clickable, active dot fills with primary color
  • underline-offset-2 on footer links
  • Respect prefers-reduced-motion for all animations

Spacing & Layout Rules

  • All sections: max-w-7xl mx-auto px-6 for content
  • Text-heavy sections: max-w-4xl mx-auto
  • Section padding: py-24 md:py-32
  • Section dividers: border-t border-gray-100 (subtle) — or alternate gray/white backgrounds
  • Card gap: gap-6 to gap-8 depending on card size
  • Typography: hero 48-60px / section headings 30-40px / card titles 18-20px / body 14-16px
  • Border-radius: rounded-lg (0.5rem) on cards, rounded-xl (0.75rem) on mockups and large cards