Hero Block

Use for: Above-fold hero. Product Hunt badge, headline with primary accent, subtext, email form + CTA, trust badges row, testimonial link card. Uses hero-gradient-morph. Elements: primary button, email input, inline trust badges.

Section Headings

Use for: Customer stories section, any two-part heading. Split-color pattern: primary phrase in text-theme-dark, secondary phrase in text-[#B0B0B6]. Elements: H2 typography.

Meet customers. Building pipeline

Feature Section Block

Use for: Meet Flow AI feature sections. Text left (pill, heading, body, CTA + trust badge), product image right. Grid: md:grid-cols-[2fr_3fr] gap-12 md:gap-20. Elements: pill, primary+arrow button, inline trust badge.

Find leads

Find ideal buyers from 300M+ leads

Easily search and find your ideal buyers using the greatest database on Earth.

Try Flow AI free No Sales Navigator needed

Revised Feature Design

Alternative feature layouts with UI card mockups in Flow AI style. Accent: purple #7B61FF only. Two patterns: task list card (left) and dashboard metrics card (right). One block per homepage feature.

Reference (1:1 from provided designs)

Flow AI features (8)

Video Thumbnail

Use for: Hero video below the fold. Full-width thumbnail with dark overlay and centered play button. Clicking reveals an embedded iframe. Play button: w-28 h-28 md:w-36 md:h-36 white circle with purple play icon. Elements: primary accent icon.

Cards

Three card types. Each has a specific context — don’t mix them. Elements: buttons, dotted-underline tooltips, info tooltips, badges, CRM icons.

Pricing cards — Solo, Team (highlighted), Enterprise

3-column grid: md:grid-cols-3 gap-6 md:gap-8. Each card has: Usage section, CRM icons, Key Features, “See more” expandable. Team card has pricing-team-gradient + cta-magic-wrap.

Solo

For coaches and consultants

Starting at

$79/mo

Try Flow AI free

Usage

• 1 account
• Unlimited leads
• Unlimited Auto-pilot
• Unlimited Co-pilot
• –Expert coaching

CRM

Key Features

• Lead Finder
• Auto-pilot
• Co-pilot
• Schedule messagesNew
• CRM

Team Most popular

For small teams and SDRs

Starting at

$159/mo

✦ ✦ ✦ ✦ ✦ ✦ Try Flow AI free

Usage

• 3 accounts+$79 / user
• Unlimited leads
• Unlimited Auto-pilot
• Unlimited Co-pilot
• Expert coaching

CRM

Key Features

• Lead Finder
• Auto-pilot
• Co-pilot
• Schedule messagesNew
• CRM

Enterprise

Full-scale team takeover

 

Custom

Contact Sales

Usage

• Unlimited accounts
• Unlimited leads
• Unlimited Auto-pilot
• Unlimited Co-pilot
• Expert coaching

CRM

Key Features

• Lead Finder
• Auto-pilot
• Co-pilot
• Schedule messagesNew
• CRM

Feature card grid — Why Flow AI

2×2 grid: left card spans 2 rows (md:row-span-2), full-bleed image with overlay text. Right cards: text left + graphic right. Grid: md:grid-cols-2 md:grid-rows-2 gap-6 md:gap-8.

One system for LinkedIn outreach

Keep your LinkedIn targeting, outreach, and conversations under one roof and run your entire outbound end-to-end

Easy to get started

Connect accounts, add leads, and launch outreach quickly with a simple setup that doesn’t require training or extra licences.

Step 1

Connect accounts

Step 2

Find qualified leads

Step 3

Launch outreach

Built for teams

Manage multiple senders, conversations, and follow-ups with clear visibility and control as your team and pipeline grow.

3 Steps Cards

Use for: How-it-works section. Section heading + 3 numbered step cards with image, number badge, title, description. bg-[#F5F5F2]. Images use <picture> with avif/webp.

1 Find ideal buyers

Search a 300M+ database to build targeted, enriched lead lists—without relying on expensive 3rd-party tools.

2 Reach them at scale

Connect multiple LinkedIn accounts and let Agent Maya warm prospects up on auto-pilot, safely and naturally.

3 Turn replies into calls

Manage conversations in one inbox, follow up at the right time, and convert replies into booked calls.

Scrolling Logos (Trust Marquee)

Use for: “Trusted by GTM teams” section below hero. Company logos scroll horizontally (grayscale, opacity-50). Trust bar badge overlays center. Elements: trust bar overlay.

Trusted by 100s of GTM teams

Scrolling Icons (Integrations Marquee)

Use for: “Connect with your existing tech stack” section. Elements: Gray/Explore button.

Explore all integrations

Customer Story Card

Use for: Customer stories carousel. Avatar image with gradient overlay, company, name, title. “Read story” badge on hover.

CS Partners

Simon Leich

CEO

Read story

Testimonial Blockquote

Use for: Customer story detail view (when card is clicked). Large quote with avatar, name, title below.

“I love how Tom and the Flow team work. My biggest challenge was generating leads and starting new conversations. Since working with Flow, I’ve had over 100 sales calls. Incredible results!”

Simon Leich

CEO at CS Partners

Outreach Playbook Card

Use for: Mega menu promo (Outreach Playbook lead magnet). Horizontal split: text left, image right. bg-[#F8F6F3]. Elements: Gray button.

The Outreach Playbook

The Ultimate Guide to Booking Calls on LinkedIn

Master the exact process GTM experts use to find ideal buyers, start conversations, actually get replies and book meetings—month after month.

Download for free

Dark CTA Section

Use for: Above-footer conversion block. Full-width dark background #2F145D, light text, dual CTAs (Start free + Contact Sales). Elements: primary button, inline trust badge.

FAQ Accordion

Use for: FAQ section before footer. Expandable items, bg-[#F8F6F3]. Items stacked with space-y-2.

Footer CTA Card

Use for: Footer column or sidebar. Maya avatar with magic stars, Try Agent Maya CTA. bg-[#F8F6F3]. Elements: primary button, maya-avatar-wrap.

✦ ✧ ★ ✦ ✧ ★ ✦ ★ ✧

Try Agent Maya

Experience what Maya can do—find leads, scale outreach, and book more meetings.

Show me the magic Learn more

Data Sources Grid

Use for: Showcasing supported integrations or data sources with a centered heading, split-color subtitle, 2-column icon card grid, and a bottom CTA row. Grid: md:grid-cols-2 gap-6 md:gap-8. Cards: rounded-xl border p-4 lg:p-6 with icon, title, and description. Elements: section heading, icon cards, gray CTA button.

Connect your data. Keep it yours.

Seamlessly integrate with the tools you already use.
No migration, no lock-in, just connect and sync.

Google Sheets

Import and sync your spreadsheet data in just a few clicks.

Microsoft Excel

Connect your workbooks for seamless two-way data syncing.

Airtable

A single source of truth for structured, relational data.

BigQuery

Query large datasets from your data warehouse at scale.

Microsoft SQL Server

Connect directly and build on top of enterprise-grade data.

MySQL

Plug into your existing database and build powerful workflows.

PostgreSQL

Build powerful tools on top of your existing database layer.

Google Cloud SQL

Connect managed cloud databases with minimal configuration.

Have a data source you'd love to see?

Request a Data Source

Feature Icon Grid

Use for: Showcasing platform capabilities or feature highlights. Left-aligned heading, then a bordered 3-column grid of icon + title + description cells. Grid: md:grid-cols-3. Container: border border-theme-border rounded-xl overflow-hidden. Icons: 48px, text-theme-primary. Internal dividers via cell borders.

Integration Showcase

Use for: Highlighting key integrations with a centered heading, subtitle, CTA, and a 4-column tile grid. Each tile: brand icon (64px) + label on a light card. Grid: grid-cols-2 md:grid-cols-4 gap-4. Tiles: rounded-xl bg-theme-light hover:bg-theme-border. Elements: gray CTA button.

Connect with the tools you already love

Expand your capabilities with native integrations to the platforms your team already uses every day.

Explore integrations

Google Sheets Excel Airtable Slack HubSpot Zapier Salesforce Asana

Trust Banner

Use for: Security/compliance section. Centered layout with shield icon, compliance badge pills, heading, subtitle, and CTA. Elements: bordered pills, gray CTA button. Shield uses bg-theme-dark with white icon.

Social Proof

Use for: Reviews/testimonials section with award badges. Centered layout with badge row, large pull-quote, rating line with CTA, and a 3-column bordered review grid. Stars use text-theme-primary.

Pain Points

Use for: Highlighting industry pain points or comparisons. Left-aligned heading with a 3-column card grid below. Each card has a light background, an icon, and a description with bold lead-in + muted continuation.

Case Study Block

Use for: Featured customer story. Light-bg container with a 2-column layout (text left, image right). Elements: label, company heading, blockquote, author avatar + name/title. Image is square with aspect-square object-cover rounded-lg.