diff --git a/apps/landing/public/assets/logo.png b/apps/landing/public/assets/logo.png index 0022f5a..33bfa35 100644 Binary files a/apps/landing/public/assets/logo.png and b/apps/landing/public/assets/logo.png differ diff --git a/apps/landing/public/assets/logo.svg b/apps/landing/public/assets/logo.svg index 252c147..2602117 100644 --- a/apps/landing/public/assets/logo.svg +++ b/apps/landing/public/assets/logo.svg @@ -1,7 +1,3 @@ - - - - + + diff --git a/apps/landing/src/components/ComparisonTable.tsx b/apps/landing/src/components/ComparisonTable.tsx index 558d935..0fad9b5 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) => (
- {row.feature} + {row.feature}
-
+
{typeof row.plunk === 'boolean' ? ( 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..ac4b4e2 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 ( <>
- {/* 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) => ( + + + {String(index + 1).padStart(2, '0')} + +

    + {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..7a21ef3 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,301 @@ 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. -

- -
- + +
+ Features + — + 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) => ( - +
+ +

-
-
+

One MX record is all it takes

+ + +
+
+ {[ + { + 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.', + }, + { + 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.', + }, + { + step: '03', + title: 'Start receiving', + body: 'Emails sent to any address at your domain are automatically received and can trigger workflows or webhooks.', + }, + ].map((item, i) => ( + - {useCase.icon} -
-
-

{useCase.title}

-

{useCase.description}

-
- {useCase.benefits.map(benefit => ( +
+ Step {item.step} +
+

{item.title}

+

{item.body}

+ + ))} +
+
+
+

+ + {/* Use cases */} +
+
+ +

+ Powerful use cases +

+

From support to sales, inbound email unlocks new automation possibilities

+ + +
    + {useCases.map((useCase, index) => ( + + + {String(index + 1).padStart(2, '0')} + +

    + {useCase.title} +

    +
    +

    {useCase.description}

    +
    + {useCase.benefits.map(b => ( - {benefit} + → {b} ))}
    -
- - ))} + + ))} +
- {/* Technical Details */} -
- -
-

- What happens when an email arrives? -

-
- {[ - { - title: 'Email arrives at your domain', - description: 'Your MX record routes the email to Plunk for processing', - }, - { - title: 'Security checks pass', - description: 'Automatic validation of spam, virus, SPF, DKIM, and DMARC', - }, - { - title: 'Contact is created or updated', - description: 'The sender is automatically added to your contact database', - }, - { - 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} -
-
-
-

{step.title}

-

{step.description}

-
-
- ))} -
+ {/* 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 + +
+
- +
- {/* 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 - -
- -
diff --git a/apps/landing/src/pages/features/segments.tsx b/apps/landing/src/pages/features/segments.tsx index a001a51..61ae9f6 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,352 @@ 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. -

- -
- + +
+ Features + — + 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) => ( + + + {String(index + 1).padStart(2, '0')} + +

    + {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 + +
+ +
+
+
+
diff --git a/apps/landing/src/pages/features/smtp.tsx b/apps/landing/src/pages/features/smtp.tsx index 4c4accd..d75f140 100644 --- a/apps/landing/src/pages/features/smtp.tsx +++ b/apps/landing/src/pages/features/smtp.tsx @@ -8,34 +8,33 @@ import Head from 'next/head'; const features = [ { - icon: , + icon: , title: 'Simple Configuration', description: 'Quick setup with your project credentials. Works with any email client or application.', + featured: true, }, { - icon: , + icon: , title: 'Secure Connections', description: 'TLS/SSL encryption on ports 465 and 587. Your emails are always transmitted securely.', }, { - icon: , + icon: , title: 'Universal Compatibility', - description: - 'Works with Outlook, Thunderbird, Apple Mail, or any SMTP-compatible application. Even that ancient email client from 2005.', + description: 'Works with Outlook, Thunderbird, Apple Mail, or any SMTP-compatible application.', }, { - icon: , + icon: , title: 'Domain Validation', description: 'Automatic verification that your sender domain is verified before accepting emails.', }, { - icon: , + icon: , title: 'Full Feature Support', - description: - 'Attachments, custom headers, HTML emails, and multiple recipients. Send those cat memes with confidence.', + description: 'Attachments, custom headers, HTML emails, and multiple recipients.', }, { - icon: , + icon: , title: 'Same Infrastructure', description: 'SMTP emails use the same reliable delivery infrastructure as API emails with full tracking.', }, @@ -54,21 +53,21 @@ const comparisonData = [ const useCases = [ { - icon: , + icon: , title: 'Legacy System Integration', description: - 'Already have applications using SMTP? No need to rewrite code. Just swap your SMTP credentials and keep everything else the same. Your PM will love you.', + 'Already have applications using SMTP? No need to rewrite code. Just swap your SMTP credentials and keep everything else the same.', benefit: 'Zero code changes required', }, { - icon: , + icon: , title: 'Email Client Sending', description: 'Marketing teams can send emails directly from Outlook, Thunderbird, or Apple Mail using familiar tools without learning new APIs.', benefit: 'No technical knowledge needed', }, { - icon: , + icon: , title: 'Framework Compatibility', description: 'Works with any framework or language that supports SMTP. Perfect for older systems or platforms without HTTP API support.', @@ -76,9 +75,6 @@ const useCases = [ }, ]; -/** - * - */ export default function SMTPFeature() { return ( <> @@ -97,236 +93,285 @@ export default function SMTPFeature() { -
- {/* Hero Section */} -
- {/* Subtle background grid */} +
+ + {/* Hero */} +
- - -
- - SMTP Email Sending -
- -

- Send Emails via SMTP or API -

-

- Use our HTTP API for modern apps or drop in SMTP credentials for any legacy system. Same deliverability, same pricing, zero lock-in. -

- -
- + +
+ Features + — + SMTP +
+

- - Get SMTP credentials - - - - - View documentation - -

- -
+ Send via SMTP +
+ or API. Your call. + +

+ Use our HTTP API for modern apps or drop in SMTP credentials for any legacy system. Same deliverability, + same pricing, zero lock-in. +

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

SMTP that works with everything

-

Full authentication, tracking, and deliverability out of the box

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

{feature.title}

-

{feature.description}

- - ))} + Get SMTP credentials + + + + View documentation + +
+
- {/* Comparison Table */} -
- -

SMTP vs API

-

Choose the right option for your use case

- + {/* Features grid */} +
+
+ +

+ SMTP that works with everything +

+

+ Full authentication, tracking, and deliverability out of the box +

+ -
-
+
+ {features.map((feature, index) => { + const highlighted = feature.featured; + return ( + +
+
{feature.icon}
+ + {String(index + 1).padStart(2, '0')} + +
+
+

+ {feature.title} +

+

+ {feature.description} +

+
+ + ); + })} +
+
+
+ + {/* Comparison table */} +
+
+ +

+ SMTP vs API +

+

Choose the right option for your use case

+ + +
- + - - - + + + - + {comparisonData.map((row, index) => ( - - - - + + + + ))}
FeatureTraditional SMTP - Plunk SMTP - Plunk APITraditional SMTPPlunk SMTPPlunk API
{row.feature}{row.traditional} - {row.plunkSMTP} - {row.plunkAPI}{row.feature}{row.traditional}{row.plunkSMTP}{row.plunkAPI}
-
-

- Recommendation: Use API for modern applications with workflow automation. Use SMTP for - email clients and legacy systems. -

-
+

+ Recommendation: Use the API for modern applications with workflow automation. Use SMTP for email clients + and legacy systems. +

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

When to use SMTP

-

Perfect for these scenarios

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

+ When to use SMTP +

+

Perfect for these scenarios

+ -
- {useCases.map((useCase, index) => ( - + {useCases.map((useCase, index) => ( + + + {String(index + 1).padStart(2, '0')} + +

+ {useCase.title} +

+
+

{useCase.description}

+ + → {useCase.benefit} + +
+ + ))} + +
+
+ + {/* CTA */} +
+
+
+ -
-
+ +

+ Get your SMTP credentials and start sending from any client or application. No credit card required. +

+
+ - {useCase.icon} -
-
-

{useCase.title}

-

{useCase.description}

-
-
- {useCase.benefit} -
-
+ Get started for free + + + + View pricing +
- ))} +
- {/* CTA Section */} -
-
- -

Start sending via SMTP

-

- Get your SMTP credentials and start sending emails from any client or application. No credit card - required. -

-
- - - Get started for free - - - - - View pricing - -
- -
- {/* How It Works */} -
- -

- Visual workflow builder -

-

- Create complex email automations without writing a single line of code -

- - -
-
- - +
+ +

-
-
- 1 -
-
-

Choose a trigger

-

- Select an event that starts your workflow, like user signup, purchase, or any custom action you track. -

- + Everything you need for email automation + +

Powerful features that make complex automations simple

+ - -
-
- 2 -
-
-

Build your flow

-

- Drag and drop steps to create your workflow. Add emails, delays, conditions, webhooks, and more. -

- - - -
-
- 3 -
-
-

Activate and monitor

-

- Enable your workflow and watch it run automatically. Monitor executions in real-time with full - visibility. -

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

- Built for every use case -

-

From onboarding to re-engagement, workflows handle it all

- - -
- {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 */} -
-
- -

- Set up your first workflow in minutes -

-

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

-
- +
+ +

- - Get started for free - - - - - View pricing - + Visual workflow builder +

+

+ Create complex email automations without writing a single line of code +

+ + +
+
+ {[ + { + step: '01', + title: 'Choose a trigger', + body: 'Select an event that starts your workflow, like user signup, purchase, or any custom action you track.', + }, + { + step: '02', + title: 'Build your flow', + body: 'Drag and drop steps to create your workflow. Add emails, delays, conditions, webhooks, and more.', + }, + { + step: '03', + title: 'Activate and monitor', + body: 'Enable your workflow and watch it run automatically. Monitor executions in real-time with full visibility.', + }, + ].map((item, i) => ( + +
+ Step {item.step} +
+

{item.title}

+

{item.body}

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

+ Built for every use case +

+

From onboarding to re-engagement, workflows handle it all

+ + +
    + {useCases.map((useCase, index) => ( + + + {String(index + 1).padStart(2, '0')} + +

    + {useCase.title} +

    +
    +

    {useCase.description}

    +

    + {useCase.example} +

    +
    +     + ))} +
+
+
+ + {/* CTA */} +
+
+
+ + Set up your first workflow in minutes. + + +

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

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