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

Dub Landing

Style direction: Reference landing study

$ npx cactus add dub
Copied!
Aa
ManropeDisplay
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, card fills
Preview Gradient Start#F0F4F1ProductScreenshot section gradient top
Preview Gradient End#E4EBE5ProductScreenshot section gradient bottom
Text Primary#0a0a0aHeadlines, primary text
Text Secondary#6b7280Body copy, descriptions
Text Muted#9ca3afCaptions, meta text
Border#e5e7ebCard borders, dividers
Border Soft#f3f4f6Subtle section dividers
Accent#0a0a0aPrimary CTA background (black)
Accent Foreground#ffffffPrimary CTA text
Accent Softrgba(0,0,0,0.06)Hover states, subtle highlights

Fonts

UsageFont FamilyFallback
BodyIntersystem-ui, sans-serif
HeadingIntersystem-ui, sans-serif
HeroManropesystem-ui, sans-serif
MonospaceJetBrains MonoSF Mono, monospace

Component Structure

Use a consistent outline icon set everywhere — no emojis (except as optional inline accents in section headings).

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.tsxSticky white header with wordmark, nav links with dropdowns, CTAs
2AnnouncementBanner.tsxDismissible pill-shaped banner below navbar
3Hero.tsxManrope headline, subtitle, two CTAs, 96px grid background overlay
4ProductScreenshot.tsxGradient section with bezier-curved white column + empty preview shell
5LogoBar.tsxTwo-row company logo grid with optional case study labels
6MissionStatement.tsxLarge statement text with floating UI element decorations
7LinkSection.tsxProduct feature section — link management with UI mockup + testimonial
8AnalyticsSection.tsxProduct feature section — analytics/measurement with funnel visual
9IntegrationsSection.tsxProduct feature section — tool integrations grid
10PartnershipsSection.tsxProduct feature section — affiliate/partner program with dashboard
11ScaleMetrics.tsxLarge metric numbers showing scale/reliability
12EnterpriseSection.tsxEnterprise infrastructure highlight with 3D visual + trust logos
13TestimonialWall.tsxCustomer testimonial grid with quotes, avatars, and company logos
14ShipFast.tsxChangelog/shipping velocity section showing recent updates
15FinalCTA.tsxClosing CTA reinforcing value prop
16Footer.tsxMulti-column link footer with social icons

App.tsx assembly order:

<Navbar />
<AnnouncementBanner />
<Hero />
<ProductScreenshot />
<LogoBar />
<MissionStatement />
<LinkSection />
<AnalyticsSection />
<IntegrationsSection />
<PartnershipsSection />
<ScaleMetrics />
<EnterpriseSection />
<TestimonialWall />
<ShipFast />
<FinalCTA />
<Footer />

Visual Design Reference

Light mode only — clean, minimal, SaaS product page with generous whitespace. No dark/light toggle.

Overall Aesthetic

  • White background with very subtle gray (#f9fafb) alternating sections
  • Tight, confident typography — Inter font throughout
  • Minimal decoration — no gradients, no heavy shadows
  • Product screenshots and UI mockups as the primary visual content
  • Soft rounded cards with thin borders
  • Company logos for social proof
  • Large section headings with optional emoji/icon accents inline
  • Black primary CTAs for strong contrast

Component #1: Navbar

  • Full-width sticky header, white background, z-50, backdrop-blur, thin border-b border-gray-200/60
  • Height: ~56px
  • Left: site wordmark in bold lowercase (font-bold text-lg)
  • Center: 6 nav links — some with dropdown chevron icons, text-sm text-gray-600 hover:text-gray-900
  • Dropdowns for product, solutions, resources categories
  • Right: “Log in” text link + primary signup button (bg-black text-white rounded-lg px-4 py-2)
  • Mobile: hamburger toggle

Component #2: AnnouncementBanner

  • Centered inline banner, positioned between navbar and hero
  • Pill-shaped: rounded-full border border-gray-200 bg-gray-50 px-4 py-1.5
  • Short announcement text + “Read more →” link in primary color
  • Dismissible with × button (hides on click)
  • text-sm

Component #3: Hero

  • section with relative positioning (no overflow-hidden — grid must bleed into ProductScreenshot)
  • Centered text block with generous top padding (pt-24 pb-12 md:pt-32 md:pb-16)
  • max-w-4xl mx-auto px-6 relative z-10

Grid background effect — a 96px CSS grid overlay that extends 200% of the hero height so it flows continuously into the ProductScreenshot section below:

<div
  className="pointer-events-none absolute inset-x-0 top-0"
  style={{
    height: '200%',
    backgroundImage: `
      linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px)
    `,
    backgroundSize: '96px 96px',
    maskImage: 'radial-gradient(ellipse 50% 40% at 50% 25%, black 30%, transparent 70%)',
    WebkitMaskImage: 'radial-gradient(ellipse 50% 40% at 50% 25%, black 30%, transparent 70%)',
  }}
/>
  • Headline: Manrope font (fontFamily: "'Manrope', sans-serif"), text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-gray-900, 1-2 lines max
  • Subtitle: 1-2 sentences, text-lg text-gray-500, max-w-2xl mx-auto
  • Two CTA buttons side by side (compact):
    • Primary: bg-black text-white rounded-lg px-4 py-2 font-medium text-sm
    • Secondary: bg-white text-gray-700 border border-gray-300 rounded-lg px-4 py-2 text-sm
  • No tabbed switcher in Hero — the product tabs live in the ProductScreenshot’s white column instead

Component #4: ProductScreenshot

The entire section uses a continuous linear gradient background. The top edge has a three-column background split where the center column is white (with bezier curve transitions into the gradient), containing three product tab buttons. Below that is the full gradient area with the preview shell.

Section wrapper:

<section
  className="mb-20 md:mb-28"
  style={{ background: 'linear-gradient(to bottom, #F0F4F1, #E4EBE5)' }}
>

Top strip — three-column background with bezier curves:

The center ~60% of the top strip is white (continuous with the page background above), and the left/right sides show the gradient. The white area transitions into the gradient using SVG bezier curves:

<div className="relative">
  <div className="flex justify-center">
    <div className="relative w-[60%]">
      {/* White center with product tab buttons */}
      <div className="bg-white h-16 md:h-20 flex items-center justify-center gap-3 px-4">
        {/* 3 compact tab buttons, each with a small colored icon square + label */}
        {/* Icon boxes: w-5 h-5 rounded, colorful dark backgrounds (e.g. bg-indigo-700, bg-emerald-700, bg-amber-700) */}
        {/* Icons: w-3 h-3 text-white stroke icons */}
        {/* Button: rounded-lg border border-gray-200 bg-white px-2 py-1 text-xs font-medium text-gray-700 */}
      </div>

      {/* Left bezier curve — positioned flush left, translated off-edge */}
      <svg
        className="absolute left-0 top-0 h-full text-white -translate-x-full"
        viewBox="0 0 85 64"
        preserveAspectRatio="none"
        fill="none"
        width="85"
      >
        <path
          d="M50 45C57.3095 56.6952 71.2084 63.9997 85 64V0H0C13.7915 0 26.6905 7.30481 34 19L50 45Z"
          fill="currentColor"
        />
      </svg>

      {/* Right bezier curve — mirrored */}
      <svg
        className="absolute right-0 top-0 h-full text-white"
        viewBox="0 0 85 64"
        preserveAspectRatio="none"
        fill="none"
        width="85"
        style={{ transform: 'translateX(100%) scaleX(-1)' }}
      >
        <path
          d="M50 45C57.3095 56.6952 71.2084 63.9997 85 64V0H0C13.7915 0 26.6905 7.30481 34 19L50 45Z"
          fill="currentColor"
        />
      </svg>
    </div>
  </div>
</div>

Content area below:

  • Padding: px-6 pt-4 pb-16
  • Preview shell: max-w-5xl mx-auto, rounded-xl border border-gray-200 shadow-xl overflow-hidden bg-white/60 min-h-[600px] — empty placeholder area
  • Floating annotation bar: centered below the shell with mt-6, pill-shaped rounded-full border border-gray-200 bg-white shadow-lg px-5 py-2.5 containing a short description + “Learn more →” link

Component #5: LogoBar

  • Full-width section with subtle border-t border-b border-gray-100
  • Padding: py-12 md:py-16
  • Two rows of company logos in grayscale
    • 6-8 logos per row, evenly spaced, centered
    • opacity-50 hover:opacity-100 transition
    • Some logos have a small “CASE STUDY” label beneath them (text-[10px] uppercase tracking-widest text-gray-400)
  • max-w-6xl mx-auto

Component #6: MissionStatement

  • Large centered section with generous padding (py-28 md:py-36)
  • max-w-3xl mx-auto for the text block
  • Statement: large text (text-2xl md:text-3xl lg:text-4xl leading-relaxed), font-semibold
    • First part bold/dark, transitions to lighter opacity for the closing lines
    • Mix of text-gray-900 and text-gray-400 for emphasis contrast
  • Floating decorations: small product UI element cards (link previews, analytics snippets, emoji badges) positioned absolutely around the text
    • rounded-lg border border-gray-200 bg-white shadow-sm p-3 — small scale, rotated slightly
    • 3-4 decoration elements scattered at the edges of the section
  • White background, standard section padding
  • Heading: text-2xl md:text-3xl font-bold with small icon prefix
  • Subheading: 1-2 lines, text-gray-500
  • Product mockup: large UI screenshot showing link management table/list interface
    • rounded-xl border border-gray-200 shadow-lg bg-white overflow-hidden
  • Testimonial below mockup:
    • Italic quote text, text-lg text-gray-600
    • Author: avatar + name + company, text-sm text-gray-500

Component #8: AnalyticsSection

  • Light gray background (bg-[#f9fafb])
  • Heading with chart/analytics icon prefix
  • Subheading about measurement and attribution
  • Visual: analytics dashboard mockup or colorful conversion funnel graphic
    • Funnel uses gradient colors (green → blue → purple → orange) for each stage
    • rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden
  • Testimonial: quote + author with avatar and company logo

Component #9: IntegrationsSection

  • White background
  • Heading with plug/link icon prefix
  • Subheading about connecting with existing tools
  • Integration grid: logos of popular tools arranged in a connected graph or simple grid
    • grid-cols-3 md:grid-cols-4 lg:grid-cols-6, gap-4
    • Each: rounded-lg border border-gray-200 bg-white p-4 flex items-center justify-center
    • Placeholder squares with tool category labels

Component #10: PartnershipsSection

  • Light gray background
  • Heading about partner/affiliate program growth
  • Product mockup: partner dashboard UI showing payouts, referrals, program settings
    • rounded-xl border border-gray-200 bg-white shadow-lg overflow-hidden
  • Testimonial: partner quote + attribution

Component #11: ScaleMetrics

  • White background, centered
  • Metrics grid: 3-4 large numbers in a row
    • grid-cols-2 md:grid-cols-4, gap-8
    • Each metric: large bold number (text-4xl md:text-5xl font-bold text-gray-900) + animated count-up effect
    • Small label below (text-sm text-gray-500)
    • Numbers formatted with commas/abbreviations (e.g. “1.2B”, “850K”)
  • Brief copy below about reliability and scale

Component #12: EnterpriseSection

  • Light gray background
  • Heading about enterprise-grade infrastructure
  • Visual accent: large metallic/3D sphere or abstract graphic, centered
    • CSS gradient sphere: rounded-full w-32 h-32 with radial gradient (silver to dark gray)
    • Or use a decorative SVG
  • Trust logos: row of enterprise company logos below (opacity-60)
  • Brief copy about uptime, reliability, request handling capacity
  • Testimonial from enterprise customer

Component #13: TestimonialWall

  • White background, generous padding
  • Heading about trusted customers
  • Testimonial grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3, gap-6
  • 6-9 testimonial cards, each:
    • rounded-xl border border-gray-200 bg-white p-6
    • Quote text (text-sm text-gray-600)
    • Author row: avatar image (circular, 40px) + name (font-medium text-gray-900) + role/company (text-sm text-gray-500)
    • Optional company logo in top-right
    • Optional star rating row (text-yellow-400)
  • Cards have subtle hover:shadow-md transition

Component #14: ShipFast

  • Light gray background
  • Heading about shipping velocity / recent updates
  • Update timeline or card grid: grid-cols-1 md:grid-cols-2 lg:grid-cols-3, gap-4
  • 6-9 update cards, each:
    • rounded-lg border border-gray-200 bg-white p-4
    • Date badge (text-xs text-gray-400)
    • Title (text-sm font-medium text-gray-900)
    • Optional thumbnail or icon
    • Optional category tag (rounded-full bg-gray-100 text-gray-600 text-xs px-2 py-0.5)
  • “View changelog →” link at bottom

Component #15: FinalCTA

  • White background, centered, generous padding (py-24 md:py-32)
  • Heading: text-3xl md:text-4xl font-bold text-gray-900
  • Subtitle: one line, text-gray-500
  • Same two-button pair as hero (black primary + outline secondary)
  • White or very light background, border-t border-gray-200
  • max-w-7xl mx-auto, padding py-16
  • Multi-column layout: grid-cols-2 md:grid-cols-4 lg:grid-cols-6, gap-8
  • Column 1 (brand): site wordmark (bold), brief tagline, social icons row
  • Remaining columns: Product, Resources, Company, Legal, etc.
    • Each: heading (text-sm font-semibold text-gray-900 uppercase tracking-wide) + link list
    • Links: text-sm text-gray-500 hover:text-gray-900
  • Bottom row: copyright, legal links

Interaction & Animation Patterns

  • Smooth hover transitions on all buttons and links (transition-colors)
  • Tab switching in hero product switcher with content crossfade
  • Logo bar: opacity-50 hover:opacity-100
  • Cards: hover:shadow-md subtle lift effect
  • Metric numbers: count-up animation on scroll into view
  • AnnouncementBanner: smooth dismiss with height collapse
  • Respect prefers-reduced-motion

Spacing & Layout Rules

  • All sections: max-w-7xl mx-auto px-6 for content
  • Text-heavy sections: max-w-4xl mx-auto or max-w-3xl mx-auto
  • Section padding: py-20 md:py-28
  • Section dividers: subtle border-t border-gray-100
  • Card styling: rounded-xl border border-gray-200 bg-white shadow-sm
  • Typography: hero 48-60px / section headings 28-36px / body 16-18px
  • Border-radius: rounded-xl on cards and mockups, rounded-full on pills and badges
  • Card gap: gap-4 to gap-8 depending on card size