diff --git a/apps/landing/src/components/ComparisonTable.tsx b/apps/landing/src/components/ComparisonTable.tsx index 558d935..283950d 100644 --- a/apps/landing/src/components/ComparisonTable.tsx +++ b/apps/landing/src/components/ComparisonTable.tsx @@ -13,26 +13,21 @@ interface ComparisonTableProps { rows: ComparisonRow[]; } -/** - * Reusable comparison table component for competitor pages - */ export function ComparisonTable({competitorName, rows}: ComparisonTableProps) { return ( -
- {/* Header */} +
-
- Feature +
+ Feature
-
- Plunk +
+ Plunk
-
- {competitorName} +
+ {competitorName}
- {/* Rows */}
{rows.map((row, index) => (
@@ -52,10 +47,10 @@ export function ComparisonTable({competitorName, rows}: ComparisonTableProps) { row.plunk ? ( ) : ( - + ) ) : ( - {row.plunk} + {row.plunk} )}
@@ -65,10 +60,10 @@ export function ComparisonTable({competitorName, rows}: ComparisonTableProps) { row.competitor ? ( ) : ( - + ) ) : ( - {row.competitor} + {row.competitor} )}
diff --git a/apps/landing/src/components/FAQSection.tsx b/apps/landing/src/components/FAQSection.tsx index db03212..6c3fe94 100644 --- a/apps/landing/src/components/FAQSection.tsx +++ b/apps/landing/src/components/FAQSection.tsx @@ -12,9 +12,6 @@ interface FAQSectionProps { schemaId?: string; } -/** - * Reusable FAQ section component with structured data support - */ export function FAQSection({faqs, schemaId = 'faq-schema'}: FAQSectionProps) { return ( <> @@ -37,34 +34,44 @@ export function FAQSection({faqs, schemaId = 'faq-schema'}: FAQSectionProps) { }} /> -
- -

- Frequently asked questions -

+
+
+ +

+ Frequently asked questions +

+ -
+
{faqs.map((faq, index) => ( -

{faq.question}

-

{faq.answer}

+

+ {faq.question} +

+

{faq.answer}

 ))}
- +
); diff --git a/apps/landing/src/components/Footer/Footer.tsx b/apps/landing/src/components/Footer/Footer.tsx index 7186c56..306c0b3 100644 --- a/apps/landing/src/components/Footer/Footer.tsx +++ b/apps/landing/src/components/Footer/Footer.tsx @@ -10,7 +10,7 @@ export default function Footer() { return ( <>
-
+
{/* Logo and description */}
@@ -59,7 +59,7 @@ export default function Footer() { {/* Links */}
-

Product

+

Product

  • @@ -90,7 +90,7 @@ export default function Footer() {
-

Features

+

Features

  • @@ -121,7 +121,7 @@ export default function Footer() {
-

Compare

+

Compare

  • @@ -162,7 +162,7 @@ export default function Footer() {
-

Community

+

Community

  • @@ -181,7 +181,7 @@ export default function Footer() {
-

Legal

+

Legal

  • @@ -202,7 +202,7 @@ export default function Footer() {
-

Guides

+

Guides

  • diff --git a/apps/landing/src/components/Navbar/Navbar.tsx b/apps/landing/src/components/Navbar/Navbar.tsx index 88cae3d..0a895cd 100644 --- a/apps/landing/src/components/Navbar/Navbar.tsx +++ b/apps/landing/src/components/Navbar/Navbar.tsx @@ -47,8 +47,8 @@ export default function Navbar() { const [featuresOpen, setFeaturesOpen] = useState(false); return ( -
    -
    +
    +
    @@ -83,14 +83,14 @@ export default function Navbar() { onMouseEnter={() => setFeaturesOpen(true)} onMouseLeave={() => setFeaturesOpen(false)} className={ - 'absolute left-0 top-full z-50 mt-2 w-80 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg' + 'absolute left-0 top-full z-50 mt-2 w-80 rounded-[16px] border border-neutral-200 bg-white p-2 shadow-lg' } > {featuresMenu.map(feature => (
    Get started @@ -226,7 +226,7 @@ export default function Navbar() { className="space-y-1 p-4" >
    -
    +
    Features
    {featuresMenu.map(feature => ( @@ -293,7 +293,7 @@ export default function Navbar() { Get started diff --git a/apps/landing/src/components/SectionHeader.tsx b/apps/landing/src/components/SectionHeader.tsx new file mode 100644 index 0000000..07f8947 --- /dev/null +++ b/apps/landing/src/components/SectionHeader.tsx @@ -0,0 +1,48 @@ +import {motion} from 'framer-motion'; +import React from 'react'; + +export function SectionHeader({ + number, + label, + title, + titleAccent, + subtitle, +}: { + number: string; + label: string; + title: string; + titleAccent?: string; + subtitle?: string; +}) { + return ( + +
    + § {number} + {label} +
    +
    +

    + {title} + {titleAccent && <> {titleAccent}} +

    + {subtitle &&

    {subtitle}

    } +
    +     + ); +} diff --git a/apps/landing/src/components/guides/GuideLayout.tsx b/apps/landing/src/components/guides/GuideLayout.tsx index 189335d..4591466 100644 --- a/apps/landing/src/components/guides/GuideLayout.tsx +++ b/apps/landing/src/components/guides/GuideLayout.tsx @@ -114,7 +114,7 @@ export function GuideLayout({ -
    +
    {/* Main Content */}
    diff --git a/apps/landing/src/components/index.ts b/apps/landing/src/components/index.ts index 82de0e8..0913e3e 100644 --- a/apps/landing/src/components/index.ts +++ b/apps/landing/src/components/index.ts @@ -3,3 +3,4 @@ export * from './Footer'; export * from './ComparisonTable'; export * from './FAQSection'; export * from './CodeBlock'; +export * from './SectionHeader'; diff --git a/apps/landing/src/pages/_app.tsx b/apps/landing/src/pages/_app.tsx index 0632759..86874eb 100644 --- a/apps/landing/src/pages/_app.tsx +++ b/apps/landing/src/pages/_app.tsx @@ -7,6 +7,28 @@ import {SWRConfig} from 'swr'; import {network} from '../lib/network'; import {DefaultSeo} from 'next-seo'; import Script from 'next/script'; +import {Bricolage_Grotesque, Hanken_Grotesk, JetBrains_Mono} from 'next/font/google'; + +const display = Bricolage_Grotesque({ + subsets: ['latin'], + variable: '--font-display', + display: 'swap', + weight: ['400', '500', '600', '700', '800'], +}); + +const body = Hanken_Grotesk({ + subsets: ['latin'], + variable: '--font-body', + display: 'swap', + weight: ['400', '500', '600', '700'], +}); + +const mono = JetBrains_Mono({ + subsets: ['latin'], + variable: '--font-mono', + display: 'swap', + weight: ['400', '500'], +}); /** * Main app component @@ -25,7 +47,7 @@ function App({Component, pageProps}: AppProps) { }, []); return ( - <> +
    Plunk | The Open-Source Email Platform @@ -33,7 +55,7 @@ function App({Component, pageProps}: AppProps) { - +
    ); } diff --git a/apps/landing/src/pages/_document.tsx b/apps/landing/src/pages/_document.tsx index 4df11aa..d58e814 100644 --- a/apps/landing/src/pages/_document.tsx +++ b/apps/landing/src/pages/_document.tsx @@ -6,14 +6,6 @@ export default class MyDocument extends Document { return ( - {/* Start fonts */} - - - - {/* End fonts */} {/* Start favicon */} diff --git a/apps/landing/src/pages/features/email-editor.tsx b/apps/landing/src/pages/features/email-editor.tsx index 0c074e7..3f54312 100644 --- a/apps/landing/src/pages/features/email-editor.tsx +++ b/apps/landing/src/pages/features/email-editor.tsx @@ -8,36 +8,34 @@ import Head from 'next/head'; const features = [ { - icon: , + icon: , title: 'Visual WYSIWYG Editor', description: 'Rich text editing with formatting toolbar. Bold, italic, headings, lists, links, images, and tables. No code required.', + featured: true, }, { - icon: , + icon: , title: 'Full HTML Editor', - description: - 'Syntax highlighting, auto-completion, and bracket matching. Write custom HTML when you need complete control.', + description: 'Syntax highlighting, auto-completion, and bracket matching. Write custom HTML when you need complete control.', }, { - icon: , + icon: , title: 'Smart Mode Switching', - description: - 'Automatically detects complex HTML and switches to code mode. Warns you before changes that would lose custom formatting.', + description: 'Automatically detects complex HTML and switches to code mode. Warns you before changes that would lose custom formatting.', }, { - icon: , + icon: , title: 'Powerful Variables', - description: - 'Autocomplete with {{variable}} syntax. Supports fallbacks, nested properties, and custom contact fields.', + description: 'Autocomplete with {{variable}} syntax. Supports fallbacks, nested properties, and custom contact fields.', }, { - icon: , + icon: , title: 'Live Preview', description: 'Preview with real contact data. Test on desktop, tablet, and mobile views before sending.', }, { - icon: , + icon: , title: 'Email-Safe HTML', description: 'Automatic CSS inlining and email-client-friendly code generation. Yes, even in Outlook.', }, @@ -45,21 +43,21 @@ const features = [ const useCases = [ { - icon: , + icon: , title: 'For Developers', description: 'Full HTML control when you need it. Powerful variable system with autocomplete and fallbacks. Use templates in API calls, workflows, and campaigns.', - example: 'Password resets → API-triggered alerts → Webhook notifications → Those cat meme attachments', + example: 'Password resets → API-triggered alerts → Webhook notifications', }, { - icon: , + icon: , title: 'For Marketers', description: 'Visual editor for quick changes. Live preview with real customer data. Create professional emails without waiting for developers.', example: 'Product announcements → Newsletter campaigns → Promotional emails → Customer onboarding', }, { - icon: , + icon: , title: 'For Teams', description: 'One tool for everyone. Developers can code, marketers can design, everyone can preview. Reusable templates across campaigns and workflows.', @@ -67,9 +65,6 @@ const useCases = [ }, ]; -/** - * - */ export default function EmailEditorFeature() { return ( <> @@ -79,10 +74,7 @@ export default function EmailEditorFeature() { name="description" content="The email editor that speaks both languages. Switch seamlessly between visual and code editing, preview with real data, and create templates that work everywhere." /> - + -
    - {/* Hero Section */} -
    - {/* Subtle background grid */} +
    + + {/* Hero */} +
    - - -
    - - Email Editor & Templates -
    - -

    - The Email Editor -
    - That Speaks Both Languages -

    -

    - Switch seamlessly between visual and code editing. Preview with real customer data. Create templates that - work everywhere. -

    - -
    - + +
    + Email Editor & Templates +
    +

    - - Try the editor free - - - - - View documentation - -

    -     -
    + The editor that +
    + speaks both languages. + +

    + Switch seamlessly between visual and code editing. Preview with real customer data. Create templates that + work everywhere. +

    - {/* Features Grid */} -
    - -

    - Two editors, one experience -

    -

    Visual editing for speed, code editing for control

    -     - -
    - {features.map((feature, index) => ( - -
    + - {feature.icon} -
    -

    {feature.title}

    -

    {feature.description}

    -     - ))} + Try the editor free + + + + View documentation + +
    +
- {/* How It Works */} -
- -

- From first draft to send -

-

Create, preview, and deploy templates in minutes

- - -
-
- - +
+ +

-
-
- 1 -
-
-

Create your template

-

- Use the visual editor for quick formatting or write custom HTML. Add variables with autocomplete. -

- + Two editors, one experience + +

Visual editing for speed, code editing for control

+ - -
-
- 2 -
-
-

Preview with real data

-

- Select any contact and see exactly what they'll receive. Test on desktop, tablet, and mobile. No - surprises. -

- - - -
-
- 3 -
-
-

Use everywhere

-

- Use your template in campaigns, workflows, and API calls. One template, unlimited uses. -

- -
-
-
- - {/* Use Cases */} -
- -

Built for every team

-

Whether you're a developer, marketer, or founder

- - -
- {useCases.map((useCase, index) => ( - -
-
+ {features.map((feature, index) => { + const highlighted = feature.featured; + return ( + - {useCase.icon} -
-
-

{useCase.title}

-

{useCase.description}

-
-

{useCase.example}

+
+
{feature.icon}
+ + {String(index + 1).padStart(2, '0')} +
-
-
- - ))} +
+

+ {feature.title} +

+

+ {feature.description} +

+
+ + ); + })} +
- {/* CTA Section */} -
-
- -

- Build your first template today -

-

- 1,000 emails free every month. Then $0.001 per email. No contact limits, no credit card required. -

-
- +
+ +

- - Get started for free - - - - - View pricing - + From first draft to send +

+

Create, preview, and deploy templates in minutes

+ + +
+
+ {[ + { + step: '01', + title: 'Create your template', + body: 'Use the visual editor for quick formatting or write custom HTML. Add variables with autocomplete.', + }, + { + step: '02', + title: 'Preview with real data', + body: 'Select any contact and see exactly what they\'ll receive. Test on desktop, tablet, and mobile.', + }, + { + step: '03', + title: 'Use everywhere', + body: 'Use your template in campaigns, workflows, and API calls. One template, unlimited uses.', + }, + ].map((item, i) => ( + +
+ Step {item.step} +
+

{item.title}

+

{item.body}

+ + ))} +
- +
+ + {/* Use cases */} +
+
+ +

+ Built for every team +

+

Whether you're a developer, marketer, or founder

+ + +
+ {useCases.map((useCase, index) => ( + +
+
+ {useCase.icon} +
+
+

+ {useCase.title} +

+

{useCase.description}

+
+

+ {useCase.example} +

+
+
+
+ + ))} +
+
+
+ + {/* CTA */} +
+
+
+ + Build your first template today. + + +

+ Free plan available. $0.001 per email on paid. No credit card required. +

+
+ + Get started for free + + + + View pricing + +
+ +
+
+
+
diff --git a/apps/landing/src/pages/features/inbound-email.tsx b/apps/landing/src/pages/features/inbound-email.tsx index 1356db6..1e10abb 100644 --- a/apps/landing/src/pages/features/inbound-email.tsx +++ b/apps/landing/src/pages/features/inbound-email.tsx @@ -8,33 +8,33 @@ import Head from 'next/head'; const features = [ { - icon: , + icon: , title: 'Automatic Contact Capture', description: 'Every sender is automatically added to your contact database with no manual data entry required.', + featured: true, }, { - icon: , + icon: , title: 'Workflow Automation', description: 'Trigger automated workflows when emails are received to create sophisticated two-way communication.', }, { - icon: , + icon: , title: 'Built-in Security', - description: - 'Spam, virus, SPF, DKIM, and DMARC filtering keeps your inbox clean. The spam stays out, the good stuff gets in.', + description: 'Spam, virus, SPF, DKIM, and DMARC filtering keeps your inbox clean. The spam stays out, the good stuff gets in.', }, { - icon: , + icon: , title: 'Webhook Notifications', description: 'Get instant notifications with rich metadata whenever an email arrives at your domain.', }, { - icon: , + icon: , title: 'Simple DNS Setup', description: 'Add one MX record to your domain and start receiving emails immediately. No PhD required.', }, { - icon: , + icon: , title: 'Real-Time Processing', description: 'Emails are processed instantly and can trigger workflows or webhooks in real-time.', }, @@ -42,21 +42,21 @@ const features = [ const useCases = [ { - icon: , + icon: , title: 'Support Ticket Creation', description: 'Automatically create support tickets when customers email support@yourdomain.com. Send auto-replies and route to your help desk system via webhooks. Your support team will thank you.', benefits: ['Instant acknowledgment', 'Automatic ticket creation', 'No emails missed'], }, { - icon: , + icon: , title: 'Lead Capture from Email', description: 'Receive emails at info@yourdomain.com and automatically add senders to your CRM. Trigger nurture workflows based on when they reached out.', benefits: ['Zero-friction lead capture', 'Auto-segmentation', 'Instant follow-up'], }, { - icon: , + icon: , title: 'Two-Way Conversations', description: 'Let customers reply to your campaign emails and automatically trigger engagement workflows. Tag contacts as "engaged" when they respond.', @@ -64,9 +64,6 @@ const useCases = [ }, ]; -/** - * - */ export default function InboundEmailFeature() { return ( <> @@ -85,343 +82,292 @@ export default function InboundEmailFeature() { -
- {/* Hero Section */} -
- {/* Subtle background grid */} +
+ + {/* Hero */} +
- - -
- - Inbound Email -
- -

- Turn Incoming Emails -
- into Actions -

-

- Receive emails at your custom domain and automatically trigger workflows, capture leads, or create support - tickets. Two-way email communication made simple. -

- -
- + +
+ Inbound Email +
+

- - Start receiving emails - - - - - View documentation - -

- -
+ Emails in, +
+ actions out. + +

+ Receive emails at your custom domain and automatically trigger workflows, capture leads, or create support + tickets. Two-way email communication made simple. +

- {/* Features Grid */} -
- -

- Complete inbound email solution -

-

- Everything you need to receive and process incoming emails -

- - -
- {features.map((feature, index) => ( - -
+ - {feature.icon} -
-

{feature.title}

-

{feature.description}

- - ))} + Start receiving emails + + + + View documentation + +
+
- {/* How It Works */} -
- -

Set up in minutes

-

Get started with inbound email in three simple steps

- - -
-
- +
+ +

-
-
+

Everything you need to receive and process incoming emails

+ + +
+ {features.map((feature, index) => { + const highlighted = feature.featured; + return ( + - 1 -
-
-

Verify your domain

-

- Add and verify your custom domain in Plunk by configuring DKIM and SPF records in your DNS settings. -

- - - -
-
- 2 -
-
-

Add MX record

-

- Add one MX record to your DNS to route incoming emails to Plunk. Copy the record from your dashboard. -

- - - -
-
- 3 -
-
-

Start receiving

-

- Emails sent to any address at your domain are automatically received and can trigger workflows or - webhooks. -

- +
+
{feature.icon}
+ + {String(index + 1).padStart(2, '0')} + +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+ + ); + })}

- {/* Use Cases */} -
- -

Powerful use cases

-

- From support to sales, inbound email unlocks new automation possibilities -

- - -
- {useCases.map((useCase, index) => ( - +
+ +

-
-
- {useCase.icon} -
-
-

{useCase.title}

-

{useCase.description}

-
- {useCase.benefits.map(benefit => ( - - {benefit} - - ))} -
-
-
- - ))} -

-
- - {/* Technical Details */} -
- -
-

- What happens when an email arrives? + Set up in minutes

-
+

One MX record is all it takes

+ + +
+
{[ { - title: 'Email arrives at your domain', - description: 'Your MX record routes the email to Plunk for processing', + step: '01', + title: 'Verify your domain', + body: 'Add and verify your custom domain in Plunk by configuring DKIM and SPF records in your DNS settings.', }, { - title: 'Security checks pass', - description: 'Automatic validation of spam, virus, SPF, DKIM, and DMARC', + step: '02', + title: 'Add MX record', + body: 'Add one MX record to your DNS to route incoming emails to Plunk. Copy the record directly from your dashboard.', }, { - title: 'Contact is created or updated', - description: 'The sender is automatically added to your contact database', + step: '03', + title: 'Start receiving', + body: 'Emails sent to any address at your domain are automatically received and can trigger workflows or webhooks.', }, - { - title: 'Workflows trigger automatically', - description: 'Configured workflows start running based on the incoming email', - }, - ].map((step, i, arr) => ( -
- {/* Vertical connector */} - {i < arr.length - 1 && ( -
- )} -
-
- {i + 1} -
+ ].map((item, i) => ( + +
+ Step {item.step}
-
-

{step.title}

-

{step.description}

-
-
+

{item.title}

+

{item.body}

+ ))}
- +
- {/* CTA Section */} -
-
- -

- Your domain can receive emails too -

-

- Set up inbound email on any verified domain in minutes. Replies, support tickets, and webhooks, all from - one platform. -

-
- +
+ +

- - Get started for free - - - - - View pricing - + Powerful use cases +

+

From support to sales, inbound email unlocks new automation possibilities

+ + +
+ {useCases.map((useCase, index) => ( + +
+
+ {useCase.icon} +
+
+

+ {useCase.title} +

+

{useCase.description}

+
+

+ {useCase.benefits.join(' → ')} +

+
+
+
+ + ))}
- +
+ + {/* CTA */} +
+
+
+ + Your domain can receive emails too. + + +

+ Free plan available. $0.001 per email on paid. No credit card required. +

+
+ + Get started for free + + + + View pricing + +
+ +
+
+
+
diff --git a/apps/landing/src/pages/features/segments.tsx b/apps/landing/src/pages/features/segments.tsx index a001a51..293eef5 100644 --- a/apps/landing/src/pages/features/segments.tsx +++ b/apps/landing/src/pages/features/segments.tsx @@ -8,37 +8,35 @@ import Head from 'next/head'; const features = [ { - icon: , + icon: , title: 'Dynamic Filtering', - description: - 'Create segments based on contact data, custom fields, email activity, and events with powerful AND/OR logic.', + description: 'Create segments based on contact data, custom fields, email activity, and events with powerful AND/OR logic.', + featured: true, }, { - icon: , + icon: , title: 'Real-Time Updates', description: 'Dynamic segments automatically update as contact data changes, always keeping your audience current.', }, { - icon: , + icon: , title: 'Workflow Integration', - description: - 'Trigger workflows when contacts enter or exit segments, or use segment conditions in workflow branching.', + description: 'Trigger workflows when contacts enter or exit segments, or use segment conditions in workflow branching.', }, { - icon: , + icon: , title: 'Campaign Targeting', - description: - 'Send targeted campaigns to specific segments instead of your entire contact list. Less noise, more signal.', + description: 'Send targeted campaigns to specific segments instead of your entire contact list. Less noise, more signal.', }, { - icon: , + icon: , title: 'Static Segments', description: 'Manually curate contact lists for special groups like beta testers or VIP customers.', }, { - icon: , + icon: , title: 'Behavior-Based', - description: 'Segment by email engagement - who opened, clicked, bounced, or never received your emails.', + description: 'Segment by email engagement — who opened, clicked, bounced, or never received your emails.', }, ]; @@ -50,7 +48,7 @@ const filterExamples = [ }, { title: 'Re-engagement Needed', - description: 'Find inactive users who need a nudge to come back. Sometimes they just need a reminder.', + description: 'Find inactive users who need a nudge to come back', filters: ['Last activity older than 60 days', 'Email sent but not opened', 'Subscribed equals true'], }, { @@ -62,28 +60,25 @@ const filterExamples = [ const useCases = [ { - icon: , + icon: , title: 'Targeted Campaigns', description: - 'Send newsletters and announcements to specific audience segments instead of blasting everyone. Increase open rates by sending relevant content to the right people. Your unsubscribe rate will thank you.', + 'Send newsletters and announcements to specific audience segments instead of blasting everyone. Increase open rates by sending relevant content to the right people.', }, { - icon: , + icon: , title: 'Behavior-Based Workflows', description: 'Trigger workflows when contacts enter segments like "VIP Customers" or "Churning Users". Create personalized automations based on segment membership.', }, { - icon: , + icon: , title: 'A/B Testing', description: 'Create segments for test groups and control groups. Send different campaigns to each segment and measure results.', }, ]; -/** - * - */ export default function SegmentsFeature() { return ( <> @@ -96,320 +91,349 @@ export default function SegmentsFeature() { -
- {/* Hero Section */} -
- {/* Subtle background grid */} +
+ + {/* Hero */} +
- - -
- - Audience Segmentation -
- -

- Target the Right Audience, -
- Every Time -

-

- Organize contacts into dynamic segments based on behavior, attributes, and engagement. Send targeted - campaigns and trigger personalized workflows. -

- -
- + +
+ Audience Segmentation +
+

- - Start segmenting - - - - - View documentation - -

- -
+ Target the right audience, +
+ every time. + +

+ Organize contacts into dynamic segments based on behavior, attributes, and engagement. Send targeted + campaigns and trigger personalized workflows. +

- {/* Features Grid */} -
- -

- The right message to the right person -

-

Build precise audiences and send campaigns that land

- - -
- {features.map((feature, index) => ( - -
+ - {feature.icon} -
-

{feature.title}

-

{feature.description}

- - ))} + Start segmenting + + + + View documentation + +
+
- {/* Filter Examples */} -
- -

- Flexible filtering options -

-

Build complex segments with nested AND/OR logic

- - -
- {filterExamples.map((example, index) => ( - +
+ +

-
-
-

{example.title}

-

{example.description}

-
-
-
- {example.filters.map((filter, filterIndex) => ( -
- - {filter} -
- ))} -
- - ))} -

-
+ The right message to the right person + +

Build precise audiences and send campaigns that land

+ - {/* Types of Segments */} -
- -

Two types of segments

-

Choose between dynamic filtering or manual curation

- - -
-
- -
- -
-

Dynamic Segments

-

- Automatically update based on filter conditions. As contact data changes, segment membership updates - in real-time. -

-
-
-
- Filter-based membership -
-
-
- Automatic updates -
-
-
- Optional entry/exit tracking -
-
- - - -
- -
-

Static Segments

-

- Manually curate your segment by adding specific contacts. Membership stays fixed until you change it. -

-
-
-
- Manual contact selection -
-
-
- Fixed membership -
-
-
- Perfect for VIP lists -
-
- -
-
-
- - {/* Use Cases */} -
- -

- Use segments everywhere -

-

From targeted campaigns to automated workflows

- - -
- {useCases.map((useCase, index) => ( - -
-
+ {features.map((feature, index) => { + const highlighted = feature.featured; + return ( + - {useCase.icon} -
-
-

{useCase.title}

-

{useCase.description}

-
-
- - ))} +
+
{feature.icon}
+ + {String(index + 1).padStart(2, '0')} + +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+ + ); + })} +
- {/* CTA Section */} -
-
- -

- Stop sending the same email to everyone -

-

- Build precise audience segments and watch your open rates climb. 1,000 emails free, no credit card required. -

-
- +
+ +

- - Get started for free - - - - - View pricing - + Flexible filtering options +

+

Build complex segments with nested AND/OR logic

+ + +
+ {filterExamples.map((example, index) => ( + +

+ {example.title} +

+

{example.description}

+
+ {example.filters.map((filter, filterIndex) => ( +
+ + + {filter} + +
+ ))} +
+ + ))}
- +
+ + {/* Segment types */} +
+
+ +

+ Two types of segments +

+

Choose between dynamic filtering or manual curation

+ + +
+ {[ + { + icon: , + title: 'Dynamic Segments', + description: 'Automatically update based on filter conditions. As contact data changes, segment membership updates in real-time.', + bullets: ['Filter-based membership', 'Automatic updates', 'Optional entry/exit tracking'], + }, + { + icon: , + title: 'Static Segments', + description: 'Manually curate your segment by adding specific contacts. Membership stays fixed until you change it.', + bullets: ['Manual contact selection', 'Fixed membership', 'Perfect for VIP lists'], + }, + ].map((type, i) => ( + +
{type.icon}
+

+ {type.title} +

+

{type.description}

+
    + {type.bullets.map(b => ( +
  • +
    + {b} +
    • + ))} +
+ + ))} +
+
+
+ + {/* Use cases */} +
+
+ +

+ Use segments everywhere +

+

From targeted campaigns to automated workflows

+ + +
+ {useCases.map((useCase, index) => ( + +
+
+ {useCase.icon} +
+
+

+ {useCase.title} +

+

{useCase.description}

+
+
+ + ))} +
+
+
+ + {/* CTA */} +
+
+
+ + Stop sending the same email to everyone. + + +

+ Build precise audience segments and watch your open rates climb. 1,000 emails free, no credit card + required. +

+
+ + Get started for free + + + + View pricing + +
+ +
+
+
+