chore: Add feature pages
This commit is contained in:
Dries Augustyns
@@ -13,12 +13,12 @@ export default function Footer() {
|
||||
<div className="mx-auto max-w-7xl px-8 py-20 xl:px-0">
|
||||
<div className="grid gap-12 lg:grid-cols-12">
|
||||
{/* Logo and description */}
|
||||
<div className="space-y-6 lg:col-span-4">
|
||||
<div className="space-y-6 lg:col-span-3">
|
||||
<div className={'relative h-8 w-8'}>
|
||||
<Image src={logo} alt={'Plunk logo'} fill className={'object-contain'} />
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-neutral-600">
|
||||
Open-source email automation platform that scales
|
||||
Open-source email platform for transactional, marketing, and automation. EU-hosted, GDPR compliant.
|
||||
</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
@@ -57,7 +57,7 @@ export default function Footer() {
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<div className="grid grid-cols-2 gap-8 lg:col-span-8 lg:grid-cols-3">
|
||||
<div className="grid grid-cols-2 gap-8 lg:col-span-9 lg:grid-cols-5">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-neutral-900">Product</h3>
|
||||
<ul role="list" className="mt-6 space-y-4">
|
||||
@@ -67,20 +67,95 @@ export default function Footer() {
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href={'/made-by-humans'}
|
||||
className="text-sm text-neutral-600 transition hover:text-neutral-900"
|
||||
>
|
||||
Made by humans
|
||||
<Link href={WIKI_URI} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Documentation
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href={WIKI_URI}
|
||||
target={'_blank'}
|
||||
className="text-sm text-neutral-600 transition hover:text-neutral-900"
|
||||
>
|
||||
Documentation
|
||||
<Link href={'/guides'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Guides
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/tools'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Tools
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/made-by-humans'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Made by humans
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-neutral-900">Features</h3>
|
||||
<ul role="list" className="mt-6 space-y-4">
|
||||
<li>
|
||||
<Link href={'/features/email-editor'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Email editor
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/features/workflows'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Workflows
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/features/segments'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Segments
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/features/smtp'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
SMTP
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/features/inbound-email'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Inbound email
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-neutral-900">Compare</h3>
|
||||
<ul role="list" className="mt-6 space-y-4">
|
||||
<li>
|
||||
<Link href={'/vs'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
All comparisons
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/vs/mailchimp'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
vs Mailchimp
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/vs/sendgrid'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
vs SendGrid
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/vs/resend'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
vs Resend
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/vs/brevo'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
vs Brevo
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/vs/mailgun'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
vs Mailgun
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/vs/convertkit'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
vs ConvertKit
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -95,28 +170,18 @@ export default function Footer() {
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href={'https://github.com/useplunk'}
|
||||
target={'_blank'}
|
||||
className="text-sm text-neutral-600 transition hover:text-neutral-900"
|
||||
>
|
||||
<Link href={'https://github.com/useplunk'} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
GitHub
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
href={'https://status.useplunk.com'}
|
||||
target={'_blank'}
|
||||
className="text-sm text-neutral-600 transition hover:text-neutral-900"
|
||||
>
|
||||
<Link href={'https://status.useplunk.com'} target={'_blank'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Status
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-neutral-900">Legal</h3>
|
||||
<h3 className="mt-8 text-sm font-semibold text-neutral-900">Legal</h3>
|
||||
<ul role="list" className="mt-6 space-y-4">
|
||||
<li>
|
||||
<Link href={'/privacy'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
@@ -135,6 +200,47 @@ export default function Footer() {
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-neutral-900">Guides</h3>
|
||||
<ul role="list" className="mt-6 space-y-4">
|
||||
<li>
|
||||
<Link href={'/guides/email-deliverability'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Email deliverability
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/guides/transactional-vs-marketing-email'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Transactional vs marketing
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/guides/what-is-dkim'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
What is DKIM?
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/guides/what-is-spf'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
What is SPF?
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/guides/what-is-dmarc'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
What is DMARC?
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/guides/email-open-rate'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Email open rates
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href={'/guides/email-bounce-rate'} className="text-sm text-neutral-600 transition hover:text-neutral-900">
|
||||
Email bounce rates
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -331,10 +331,13 @@ export default function EmailEditorFeature() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Get started for free
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started for free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={'/pricing'}
|
||||
|
||||
@@ -403,10 +403,13 @@ export default function InboundEmailFeature() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Get started for free
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started for free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={'/pricing'}
|
||||
|
||||
@@ -391,10 +391,13 @@ export default function SegmentsFeature() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Get started for free
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started for free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={'/pricing'}
|
||||
|
||||
@@ -308,10 +308,13 @@ export default function SMTPFeature() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Get started for free
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started for free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={'/pricing'}
|
||||
|
||||
@@ -328,10 +328,13 @@ export default function WorkflowsFeature() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Get started for free
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started for free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={'/pricing'}
|
||||
|
||||
@@ -250,7 +250,7 @@ export default function GuidesIndex() {
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
Get started free
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -229,7 +229,9 @@ export default function Index() {
|
||||
initial={{opacity: 0, y: 10}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.5, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mb-8 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm shadow-sm'}
|
||||
className={
|
||||
'mb-8 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm shadow-sm'
|
||||
}
|
||||
>
|
||||
<svg className="h-4 w-4 text-neutral-700" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
@@ -238,7 +240,7 @@ export default function Index() {
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span className={'font-medium text-neutral-700'}>4,000+ Stars on GitHub</span>
|
||||
<span className={'font-medium text-neutral-700'}>5,000+ Stars on GitHub</span>
|
||||
<span className={'text-neutral-300'}>·</span>
|
||||
<span className={'text-neutral-500'}>AGPL-3.0 Open Source</span>
|
||||
</motion.div>
|
||||
@@ -472,7 +474,8 @@ export default function Index() {
|
||||
One contact, complete history
|
||||
</h2>
|
||||
<p className={'mt-6 text-lg text-neutral-600'}>
|
||||
Every interaction flows into a single contact record. Transactional emails, campaigns, and workflows, all tracked in one place.
|
||||
Every interaction flows into a single contact record. Transactional emails, campaigns, and workflows, all
|
||||
tracked in one place.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -628,22 +631,29 @@ export default function Index() {
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mx-auto max-w-4xl text-center'}
|
||||
>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Open source, privacy first</h2>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
|
||||
Open source, privacy first
|
||||
</h2>
|
||||
<p className={'mt-6 text-lg text-neutral-600'}>
|
||||
AGPL-3.0 licensed, EU-hosted, and GDPR compliant. Inspect the code, self-host on your own infrastructure, or use our cloud.
|
||||
AGPL-3.0 licensed, EU-hosted, and GDPR compliant. Inspect the code, self-host on your own infrastructure,
|
||||
or use our cloud.
|
||||
</p>
|
||||
|
||||
<div className={'mt-16 grid gap-px bg-neutral-200 sm:grid-cols-3'}>
|
||||
<div className={'bg-white p-12'}>
|
||||
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
|
||||
<div
|
||||
className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}
|
||||
>
|
||||
<PackageOpen className={'h-7 w-7'} />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Open Source</h3>
|
||||
<p className={'mt-2 text-sm text-neutral-600'}>AGPL-3.0 licensed</p>
|
||||
<p className={'mt-4 text-xs text-neutral-500'}>4K+ stars on GitHub</p>
|
||||
<p className={'mt-4 text-xs text-neutral-500'}>5K+ stars on GitHub</p>
|
||||
</div>
|
||||
<div className={'bg-white p-12'}>
|
||||
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
|
||||
<div
|
||||
className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}
|
||||
>
|
||||
<Shield className={'h-7 w-7'} />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Privacy First</h3>
|
||||
@@ -651,7 +661,9 @@ export default function Index() {
|
||||
<p className={'mt-4 text-xs text-neutral-500'}>GDPR compliant</p>
|
||||
</div>
|
||||
<div className={'bg-white p-12'}>
|
||||
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
|
||||
<div
|
||||
className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}
|
||||
>
|
||||
<Globe className={'h-7 w-7'} />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Self-Hostable</h3>
|
||||
@@ -686,7 +698,9 @@ export default function Index() {
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mx-auto max-w-4xl text-center'}
|
||||
>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Simple, transparent pricing</h2>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
|
||||
Simple, transparent pricing
|
||||
</h2>
|
||||
<p className={'mt-6 text-lg text-neutral-600'}>
|
||||
Pay for what you use, nothing more. No surprises at scale.
|
||||
</p>
|
||||
@@ -807,7 +821,9 @@ export default function Index() {
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mx-auto max-w-3xl text-center'}
|
||||
>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Start sending in 5 minutes</h2>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
|
||||
Start sending in 5 minutes
|
||||
</h2>
|
||||
<p className={'mt-6 text-lg text-neutral-600'}>
|
||||
1,000 emails free every month. Then $0.001 per email. No contact limits, no surprises.
|
||||
</p>
|
||||
|
||||
+251
-254
@@ -2,14 +2,63 @@ import {NextSeo} from 'next-seo';
|
||||
import React from 'react';
|
||||
import {Footer, Navbar} from '../components';
|
||||
import {motion} from 'framer-motion';
|
||||
|
||||
import {DASHBOARD_URI} from '../lib/constants';
|
||||
import {ArrowRight, BarChart3, Code2, Globe, Mail, PackageOpen, Shield, Users, Zap, X, Check} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import {GithubIcon} from 'lucide-react';
|
||||
|
||||
const includedFeatures = [
|
||||
{
|
||||
icon: <Mail className="h-5 w-5" />,
|
||||
title: 'Transactional emails',
|
||||
description: 'API and SMTP delivery for receipts, password resets, and any event-driven email.',
|
||||
},
|
||||
{
|
||||
icon: <Zap className="h-5 w-5" />,
|
||||
title: 'Workflow automation',
|
||||
description: 'Build event-triggered sequences with delays, conditions, and branching logic.',
|
||||
},
|
||||
{
|
||||
icon: <BarChart3 className="h-5 w-5" />,
|
||||
title: 'Campaign broadcasts',
|
||||
description: 'Send newsletters and announcements to your full list or a targeted segment.',
|
||||
},
|
||||
{
|
||||
icon: <Users className="h-5 w-5" />,
|
||||
title: 'Unlimited contacts',
|
||||
description: 'Store as many contacts as you need. Growing your list never costs more.',
|
||||
},
|
||||
{
|
||||
icon: <Code2 className="h-5 w-5" />,
|
||||
title: 'Full API access',
|
||||
description: 'REST API with SDKs for Node.js, Python, and more. Comprehensive documentation.',
|
||||
},
|
||||
{
|
||||
icon: <Shield className="h-5 w-5" />,
|
||||
title: 'Custom domains',
|
||||
description: 'Send from your own domain with DKIM, SPF, and DMARC set up automatically.',
|
||||
},
|
||||
{
|
||||
icon: <Globe className="h-5 w-5" />,
|
||||
title: 'Audience segmentation',
|
||||
description: 'Dynamic segments built on behavior, attributes, and engagement data.',
|
||||
},
|
||||
{
|
||||
icon: <BarChart3 className="h-5 w-5" />,
|
||||
title: 'Analytics & tracking',
|
||||
description: 'Opens, clicks, bounces, and unsubscribes. Real data, no guessing.',
|
||||
},
|
||||
{
|
||||
icon: <PackageOpen className="h-5 w-5" />,
|
||||
title: 'Open source',
|
||||
description: 'AGPL-3.0 licensed. Inspect the code, self-host it, or contribute to it.',
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export default function Index() {
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<>
|
||||
<NextSeo
|
||||
@@ -32,273 +81,221 @@ export default function Index() {
|
||||
|
||||
<Navbar />
|
||||
|
||||
<div className={'mx-auto max-w-7xl px-8 sm:px-0'}>
|
||||
<main>
|
||||
<section className={'py-32'}>
|
||||
<div className={'mx-auto max-w-4xl text-center'}>
|
||||
<h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl text-balance">
|
||||
Simple, transparent pricing
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">1,000 emails free every month. Then $0.001 per email. Unlimited contacts, no hidden fees.</p>
|
||||
</div>
|
||||
<main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
|
||||
{/* Hero */}
|
||||
<section className={'relative py-20 sm:py-32'}>
|
||||
<div
|
||||
className={
|
||||
'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Pricing Tiers */}
|
||||
<div className="mx-auto mt-20 grid max-w-5xl gap-8 lg:grid-cols-2">
|
||||
{/* Free Tier */}
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{delay: 0.2}}
|
||||
className="relative flex flex-col overflow-hidden rounded-2xl bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-900 p-10 shadow-2xl"
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mx-auto max-w-4xl text-center'}
|
||||
>
|
||||
<h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl text-balance">
|
||||
Simple, transparent pricing
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">
|
||||
1,000 emails free every month. Then $0.001 per email. Unlimited contacts, no hidden fees.
|
||||
</p>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* Pricing tiers */}
|
||||
<section className={'pb-20'}>
|
||||
<div className={'mx-auto grid max-w-4xl gap-px bg-neutral-200 sm:grid-cols-2'}>
|
||||
{/* Free */}
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{delay: 0.1, duration: 0.6, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'flex flex-col bg-white p-10'}
|
||||
>
|
||||
<p className={'text-sm font-semibold uppercase tracking-widest text-neutral-400'}>Free forever</p>
|
||||
<div className={'mt-4 flex items-baseline gap-2'}>
|
||||
<span className={'text-6xl font-bold tracking-tight text-neutral-900'}>1,000</span>
|
||||
<span className={'text-lg text-neutral-500'}>emails / mo</span>
|
||||
</div>
|
||||
<p className={'mt-2 text-sm text-neutral-500'}>No credit card required</p>
|
||||
|
||||
<ul className={'mt-8 flex-1 space-y-3'}>
|
||||
{['Transactional emails', 'Workflow automation', 'Campaign broadcasts', 'Custom domains', 'Click & open tracking', 'Unlimited contacts'].map(item => (
|
||||
<li key={item} className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
||||
<Check className={'h-4 w-4 flex-shrink-0 text-neutral-900'} />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
<li className={'flex items-center gap-3 text-sm text-neutral-400'}>
|
||||
<X className={'h-4 w-4 flex-shrink-0'} />
|
||||
Plunk branding on emails
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<motion.a
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
className={'mt-10 block w-full rounded-lg border border-neutral-300 px-6 py-3 text-center text-sm font-semibold text-neutral-900 transition hover:border-neutral-400'}
|
||||
>
|
||||
<div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
|
||||
<div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-white/5 blur-3xl" />
|
||||
Start for free
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
|
||||
<div className="relative flex flex-1 flex-col">
|
||||
<div className="mb-6 inline-block self-start rounded-full border border-white/20 bg-white/10 px-4 py-1.5 text-sm font-semibold text-white backdrop-blur-sm">
|
||||
Free Forever
|
||||
</div>
|
||||
{/* Pay as you grow */}
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{delay: 0.2, duration: 0.6, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'flex flex-col bg-white p-10'}
|
||||
>
|
||||
<p className={'text-sm font-semibold uppercase tracking-widest text-neutral-400'}>Pay as you grow</p>
|
||||
<div className={'mt-4 flex items-baseline gap-2'}>
|
||||
<span className={'text-6xl font-bold tracking-tight text-neutral-900'}>$0.001</span>
|
||||
<span className={'text-lg text-neutral-500'}>/ email</span>
|
||||
</div>
|
||||
<p className={'mt-2 text-sm'}> </p>
|
||||
|
||||
<div className="mb-2 flex items-baseline gap-2">
|
||||
<span className="text-6xl font-bold tracking-tight text-white">1,000</span>
|
||||
<span className="text-xl font-medium text-white/60">emails</span>
|
||||
</div>
|
||||
<p className="mb-8 text-base text-white/60">per month</p>
|
||||
<ul className={'mt-8 flex-1 space-y-3'}>
|
||||
{['Everything in Free', 'No Plunk branding', 'Monthly spend cap', 'Unlimited emails'].map(item => (
|
||||
<li key={item} className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
||||
<Check className={'h-4 w-4 flex-shrink-0 text-neutral-900'} />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<ul className="flex-1 space-y-3">
|
||||
<li className="flex items-start gap-3 text-white/80">
|
||||
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Transactional emails</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-white/80">
|
||||
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Workflow automation</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-white/80">
|
||||
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Campaign broadcasts</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-white/80">
|
||||
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Custom domains</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-white/80">
|
||||
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Click & open tracking</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-white/80">
|
||||
<svg className="mt-0.5 h-5 w-5 flex-shrink-0 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>No credit card required</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-white/60">
|
||||
<svg className="mt-0.5 h-5 w-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Plunk branding</span>
|
||||
</li>
|
||||
</ul>
|
||||
<motion.a
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
className={'mt-10 block w-full rounded-lg bg-neutral-900 px-6 py-3 text-center text-sm font-semibold text-white transition hover:bg-neutral-800'}
|
||||
>
|
||||
Get started
|
||||
|
||||
<motion.a
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
className="mt-8 block w-full rounded-lg border-2 border-white bg-white px-6 py-3 text-center font-semibold text-neutral-900 transition hover:bg-white/90"
|
||||
>
|
||||
Start for free
|
||||
</motion.a>
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Every feature included */}
|
||||
<section className={'py-20'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mb-16 text-center'}
|
||||
>
|
||||
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
|
||||
Every feature on every plan
|
||||
</h2>
|
||||
<p className={'mt-4 text-lg text-neutral-600'}>No feature tiers, no add-ons, no surprises</p>
|
||||
</motion.div>
|
||||
|
||||
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
|
||||
{includedFeatures.map((feature, index) => (
|
||||
<motion.div
|
||||
key={feature.title}
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.5, delay: index * 0.05, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'group bg-white p-10 transition hover:bg-neutral-50'}
|
||||
>
|
||||
<div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'}>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
|
||||
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pay as you grow */}
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
animate={{opacity: 1, y: 0}}
|
||||
transition={{delay: 0.3}}
|
||||
className="relative flex flex-col overflow-hidden rounded-2xl border-2 border-neutral-200 bg-white p-10 shadow-lg"
|
||||
>
|
||||
<div className="mb-6 inline-block self-start rounded-full bg-neutral-100 px-4 py-1.5 text-sm font-semibold text-neutral-900">
|
||||
Pay as you grow
|
||||
{/* Self-host */}
|
||||
<section className={'py-20'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'overflow-hidden rounded-xl border border-neutral-200 bg-white'}
|
||||
>
|
||||
<div className={'flex flex-col items-center gap-6 p-10 sm:flex-row sm:gap-0'}>
|
||||
<div className={'flex-1 text-center sm:text-left'}>
|
||||
<div className={'mb-3 inline-flex items-center gap-2 rounded-full bg-neutral-100 px-3 py-1 text-sm font-medium text-neutral-700'}>
|
||||
<PackageOpen className={'h-3.5 w-3.5'} />
|
||||
Self-hostable
|
||||
</div>
|
||||
|
||||
<div className="mb-2 flex items-baseline gap-2">
|
||||
<span className="text-6xl font-bold tracking-tight text-neutral-900">$0.001</span>
|
||||
<span className="text-xl font-medium text-neutral-500">per email</span>
|
||||
</div>
|
||||
<p className="mb-8 text-base text-neutral-500">No contact limits, pay only for what you send</p>
|
||||
|
||||
<ul className="flex-1 space-y-3">
|
||||
<li className="flex items-start gap-3 text-neutral-600">
|
||||
<svg
|
||||
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Everything in Free</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-neutral-600">
|
||||
<svg
|
||||
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>No Plunk branding</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-neutral-600">
|
||||
<svg
|
||||
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Monthly spend cap</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3 text-neutral-600">
|
||||
<svg
|
||||
className="mt-0.5 h-5 w-5 flex-shrink-0 text-neutral-900"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span>Unlimited emails</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<motion.a
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
<h2 className={'text-2xl font-bold text-neutral-900'}>Run it on your own infrastructure</h2>
|
||||
<p className={'mt-2 text-neutral-600'}>
|
||||
Full data ownership, no per-email costs, and GDPR compliance by default. Deploy with Docker Compose in minutes.
|
||||
</p>
|
||||
</div>
|
||||
<div className={'sm:ml-auto sm:pl-8'}>
|
||||
<motion.button
|
||||
onClick={() => {
|
||||
window.open('https://github.com/useplunk/plunk', '_blank');
|
||||
}}
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
className="mt-8 block w-full rounded-lg bg-neutral-900 px-6 py-3 text-center font-semibold text-white transition hover:bg-neutral-800"
|
||||
className={'flex w-full items-center justify-center gap-x-3 rounded-lg bg-neutral-900 px-6 py-3 text-base font-semibold text-white transition hover:bg-neutral-800 sm:w-auto'}
|
||||
>
|
||||
Start for free
|
||||
</motion.a>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="mx-auto mt-24 max-w-5xl">
|
||||
<h2 className="mb-12 text-center text-2xl font-bold text-neutral-900">Every feature on every plan</h2>
|
||||
<div className="grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="bg-white p-8">
|
||||
<h3 className="text-lg font-semibold text-neutral-900">Unlimited emails</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">
|
||||
Send unlimited transactional, campaign, and automated emails
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-8">
|
||||
<h3 className="text-lg font-semibold text-neutral-900">Unlimited contacts</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">
|
||||
No limits on your audience size. Grow without restrictions
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-8">
|
||||
<h3 className="text-lg font-semibold text-neutral-900">Custom domains</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">Send from your own domain with full authentication</p>
|
||||
</div>
|
||||
<div className="bg-white p-8">
|
||||
<h3 className="text-lg font-semibold text-neutral-900">Analytics & tracking</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">Detailed metrics on opens, clicks, and conversions</p>
|
||||
</div>
|
||||
<div className="bg-white p-8">
|
||||
<h3 className="text-lg font-semibold text-neutral-900">Workflow automation</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">Build complex email sequences with visual editor</p>
|
||||
</div>
|
||||
<div className="bg-white p-8">
|
||||
<h3 className="text-lg font-semibold text-neutral-900">API access</h3>
|
||||
<p className="mt-2 text-sm text-neutral-600">Full REST API with comprehensive documentation</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 overflow-hidden rounded-lg border border-neutral-200">
|
||||
<div className="flex flex-col items-center space-y-6 p-10 sm:flex-row sm:space-y-0">
|
||||
<div className="flex-1 text-center sm:text-left">
|
||||
<h2 className={'text-2xl font-bold text-neutral-900'}>Self-host</h2>
|
||||
<p className={'mt-2 text-neutral-600'}>
|
||||
Run Plunk on your own infrastructure. Full data ownership, no per-email costs, and GDPR compliance by default.
|
||||
</p>
|
||||
</div>
|
||||
<div className={'sm:ml-auto'}>
|
||||
<motion.button
|
||||
onClick={() => {
|
||||
window.open('https://github.com/useplunk/plunk', '_blank');
|
||||
}}
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
className={
|
||||
'flex w-full items-center justify-center gap-x-3 rounded-lg bg-neutral-900 px-6 py-3 text-base font-semibold text-white transition hover:bg-neutral-800 sm:w-auto'
|
||||
}
|
||||
>
|
||||
<GithubIcon size={20} />
|
||||
View GitHub
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
<GithubIcon size={18} />
|
||||
View on GitHub
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<section className={'relative overflow-hidden border-t border-neutral-200 py-20'}>
|
||||
<div
|
||||
className={
|
||||
'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_100%,#000_70%,transparent_110%)]'
|
||||
}
|
||||
/>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
viewport={{once: true}}
|
||||
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'mx-auto max-w-3xl text-center'}
|
||||
>
|
||||
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
|
||||
Start sending in 5 minutes
|
||||
</h2>
|
||||
<p className={'mt-6 text-lg text-neutral-600'}>
|
||||
1,000 emails free every month. No credit card required.
|
||||
</p>
|
||||
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
|
||||
<motion.a
|
||||
whileHover={{scale: 1.02}}
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'}
|
||||
>
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Create free account
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={'https://github.com/useplunk/plunk'}
|
||||
target={'_blank'}
|
||||
className={'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'}
|
||||
>
|
||||
Self-host for free
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
|
||||
@@ -410,10 +410,13 @@ export default function ActiveCampaignComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -408,10 +408,13 @@ export default function BentoComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -406,10 +406,13 @@ export default function BrevoComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -408,10 +408,13 @@ export default function ConvertkitComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -400,10 +400,13 @@ export default function CustomerioComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={WIKI_URI}
|
||||
|
||||
@@ -303,10 +303,13 @@ export default function CompetitorsIndex() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -411,10 +411,13 @@ export default function KlaviyoComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -408,10 +408,13 @@ export default function LoopsComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -403,10 +403,13 @@ export default function MailchimpComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -412,10 +412,13 @@ export default function MailerliteComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -398,10 +398,13 @@ export default function MailgunComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={WIKI_URI}
|
||||
|
||||
@@ -404,10 +404,13 @@ export default function PostmarkComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
@@ -398,10 +398,13 @@ export default function ResendComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href={WIKI_URI}
|
||||
|
||||
@@ -406,10 +406,13 @@ export default function SendGridComparison() {
|
||||
whileTap={{scale: 0.98}}
|
||||
href={`${DASHBOARD_URI}/auth/signup`}
|
||||
className={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
<span className={'flex items-center gap-2'}>
|
||||
Get started free
|
||||
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
||||
</span>
|
||||
</motion.a>
|
||||
<Link
|
||||
href="/pricing"
|
||||
|
||||
Reference in New Issue
Block a user