infrastructure/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Add feature pages

Browse Source
This commit is contained in:
Dries Augustyns
2026-03-06 14:53:48 +01:00
parent 5f3daf689b
commit c90f3d0f01
26 changed files with 670 additions and 641 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/components/Navbar/Navbar.tsx
+7 -5
View File
@@ -47,8 +47,9 @@ export default function Navbar() {
const [featuresOpen, setFeaturesOpen] = useState(false); const [featuresOpen, setFeaturesOpen] = useState(false);
return ( return (
<nav className={'relative top-0 z-40 mx-auto max-w-7xl px-8 xl:px-0'}> <header className={'sticky top-0 z-40 w-full border-b border-neutral-100 bg-white/95 backdrop-blur-sm'}>
<div className={'z-40 py-6'}> <div className={'relative mx-auto max-w-7xl px-8 xl:px-0'}>
<div className={'py-5'}>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-12"> <div className="flex items-center gap-12">
<div className="flex flex-shrink-0 items-center"> <div className="flex flex-shrink-0 items-center">
@@ -178,7 +179,7 @@ export default function Navbar() {
type="button" type="button"
className="inline-flex items-center justify-center rounded-lg p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-neutral-900" className="inline-flex items-center justify-center rounded-lg p-2 text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-neutral-900"
aria-controls="mobile-menu" aria-controls="mobile-menu"
aria-expanded="false" aria-expanded={mobileOpen}
> >
<span className="sr-only">Open main menu</span> <span className="sr-only">Open main menu</span>
@@ -215,7 +216,7 @@ export default function Navbar() {
animate={{height: 'auto', opacity: 1}} animate={{height: 'auto', opacity: 1}}
exit={{height: 0, opacity: 0}} exit={{height: 0, opacity: 0}}
transition={{duration: 0.2}} transition={{duration: 0.2}}
className="absolute left-0 top-full z-50 mt-2 w-full rounded-lg border border-neutral-200 bg-white shadow-lg backdrop-blur-sm sm:hidden" className="absolute left-0 top-full z-50 w-full overflow-hidden border-t border-neutral-100 bg-white shadow-lg md:hidden"
> >
<motion.div <motion.div
initial={{opacity: 0}} initial={{opacity: 0}}
@@ -301,6 +302,7 @@ export default function Navbar() {
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>
</nav> </div>
</header>
); );
} }
apps/landing/src/pages/features/email-editor.tsx
+32 -35
View File
@@ -112,10 +112,10 @@ export default function EmailEditorFeature() {
<span className={'font-medium text-neutral-600'}>Email Editor & Templates</span> <span className={'font-medium text-neutral-600'}>Email Editor & Templates</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
The Email Editor That The Email Editor
<br /> <br />
Speaks Both Languages That Speaks Both Languages
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Switch seamlessly between visual and code editing. Preview with real customer data. Create templates that Switch seamlessly between visual and code editing. Preview with real customer data. Create templates that
@@ -158,7 +158,7 @@ export default function EmailEditorFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Two editors, one experience Two editors, one experience
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Visual editing for speed, code editing for control</p> <p className={'mt-4 text-lg text-neutral-600'}>Visual editing for speed, code editing for control</p>
@@ -197,30 +197,28 @@ export default function EmailEditorFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
From first draft to send From first draft to send
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}>Create, preview, and deploy templates in minutes</p> <p className={'mt-6 text-lg text-neutral-600'}>Create, preview, and deploy templates in minutes</p>
</motion.div> </motion.div>
<div className={'mx-auto mt-16 max-w-5xl'}> <div className={'mx-auto mt-16 max-w-5xl'}>
<div className={'grid gap-8 lg:grid-cols-3'}> <div className={'grid gap-12 lg:grid-cols-3'}>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
>
<div
className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900'
}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
1 1
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Create your template</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Create your template</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Use the visual editor for quick formatting or write custom HTML. Add variables with autocomplete. Use the visual editor for quick formatting or write custom HTML. Add variables with autocomplete.
</p> </p>
</motion.div> </motion.div>
@@ -230,17 +228,14 @@ export default function EmailEditorFeature() {
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
>
<div
className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900'
}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
2 2
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Preview with real data</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Preview with real data</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Select any contact and see exactly what they'll receive. Test on desktop, tablet, and mobile. No Select any contact and see exactly what they'll receive. Test on desktop, tablet, and mobile. No
surprises. surprises.
</p> </p>
@@ -251,17 +246,14 @@ export default function EmailEditorFeature() {
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
>
<div
className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900'
}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
3 3
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Use everywhere</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Use everywhere</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Use your template in campaigns, workflows, and API calls. One template, unlimited uses. Use your template in campaigns, workflows, and API calls. One template, unlimited uses.
</p> </p>
</motion.div> </motion.div>
@@ -278,7 +270,7 @@ export default function EmailEditorFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Built for every team</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Built for every team</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Whether you're a developer, marketer, or founder</p> <p className={'mt-4 text-lg text-neutral-600'}>Whether you're a developer, marketer, or founder</p>
</motion.div> </motion.div>
@@ -314,7 +306,12 @@ export default function EmailEditorFeature() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className={'border-t border-neutral-200 py-20'}> <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 <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -322,11 +319,11 @@ export default function EmailEditorFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Ready to create better emails? Build your first template today
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Start building beautiful, personalized emails today. No credit card required. 1,000 emails free every month. Then $0.001 per email. No contact limits, no credit card required.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a <motion.a
apps/landing/src/pages/features/inbound-email.tsx
+62 -75
View File
@@ -106,7 +106,7 @@ export default function InboundEmailFeature() {
<span className={'font-medium text-neutral-600'}>Inbound Email</span> <span className={'font-medium text-neutral-600'}>Inbound Email</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Turn Incoming Emails Turn Incoming Emails
<br /> <br />
into Actions into Actions
@@ -152,7 +152,7 @@ export default function InboundEmailFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Complete inbound email solution Complete inbound email solution
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}> <p className={'mt-4 text-lg text-neutral-600'}>
@@ -193,28 +193,29 @@ export default function InboundEmailFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Set up in minutes</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Set up in minutes</h2>
<p className={'mt-6 text-lg text-neutral-600'}>Get started with inbound email in three simple steps</p> <p className={'mt-6 text-lg text-neutral-600'}>Get started with inbound email in three simple steps</p>
</motion.div> </motion.div>
<div className={'mx-auto mt-16 max-w-5xl'}> <div className={'mx-auto mt-16 max-w-5xl'}>
<div className={'grid gap-8 lg:grid-cols-3'}> <div className={'grid gap-12 lg:grid-cols-3'}>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div <div
className={ className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900' 'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'
} }
> >
1 1
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Verify your domain</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Verify your domain</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Add and verify your custom domain in Plunk by configuring DKIM and SPF records in your DNS settings. Add and verify your custom domain in Plunk by configuring DKIM and SPF records in your DNS settings.
</p> </p>
</motion.div> </motion.div>
@@ -224,17 +225,18 @@ export default function InboundEmailFeature() {
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div <div
className={ className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900' 'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'
} }
> >
2 2
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Add MX record</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Add MX record</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Add one MX record to your DNS to route incoming emails to Plunk. Copy the record from your dashboard. Add one MX record to your DNS to route incoming emails to Plunk. Copy the record from your dashboard.
</p> </p>
</motion.div> </motion.div>
@@ -244,17 +246,18 @@ export default function InboundEmailFeature() {
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div <div
className={ className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900' 'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'
} }
> >
3 3
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Start receiving</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Start receiving</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Emails sent to any address at your domain are automatically received and can trigger workflows or Emails sent to any address at your domain are automatically received and can trigger workflows or
webhooks. webhooks.
</p> </p>
@@ -272,7 +275,7 @@ export default function InboundEmailFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Powerful use cases</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Powerful use cases</h2>
<p className={'mt-4 text-lg text-neutral-600'}> <p className={'mt-4 text-lg text-neutral-600'}>
From support to sales, inbound email unlocks new automation possibilities From support to sales, inbound email unlocks new automation possibilities
</p> </p>
@@ -326,77 +329,60 @@ export default function InboundEmailFeature() {
className={'mx-auto max-w-4xl'} className={'mx-auto max-w-4xl'}
> >
<div className={'rounded-2xl border border-neutral-200 bg-white p-8 sm:p-12'}> <div className={'rounded-2xl border border-neutral-200 bg-white p-8 sm:p-12'}>
<h2 className={'text-3xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-3xl font-bold tracking-tight text-neutral-900 text-balance'}>
What happens when an email arrives? What happens when an email arrives?
</h2> </h2>
<div className={'mt-8 space-y-4'}> <div className={'mt-10'}>
<div className={'flex gap-4'}> {[
{
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) => (
<div key={step.title} className={'relative flex gap-6'}>
{/* Vertical connector */}
{i < arr.length - 1 && (
<div className={'absolute left-[1.125rem] top-10 bottom-0 w-px bg-neutral-200'} />
)}
<div className={'relative flex-shrink-0'}>
<div <div
className={ className={
'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-semibold text-neutral-900' 'flex h-9 w-9 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-sm font-bold text-neutral-900'
} }
> >
1 {i + 1}
</div>
<div>
<p className={'font-medium text-neutral-900'}>Email arrives at your domain</p>
<p className={'mt-1 text-sm text-neutral-600'}>
Your MX record routes the email to Plunk for processing
</p>
</div> </div>
</div> </div>
<div className={'flex gap-4'}> <div className={i < arr.length - 1 ? 'pb-8' : ''}>
<div <p className={'font-semibold text-neutral-900'}>{step.title}</p>
className={ <p className={'mt-1 text-sm text-neutral-600'}>{step.description}</p>
'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-semibold text-neutral-900'
}
>
2
</div>
<div>
<p className={'font-medium text-neutral-900'}>Security checks pass</p>
<p className={'mt-1 text-sm text-neutral-600'}>
Automatic validation of spam, virus, SPF, DKIM, and DMARC
</p>
</div>
</div>
<div className={'flex gap-4'}>
<div
className={
'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-semibold text-neutral-900'
}
>
3
</div>
<div>
<p className={'font-medium text-neutral-900'}>Contact is created or updated</p>
<p className={'mt-1 text-sm text-neutral-600'}>
The sender is automatically added to your contact database
</p>
</div>
</div>
<div className={'flex gap-4'}>
<div
className={
'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-neutral-100 text-sm font-semibold text-neutral-900'
}
>
4
</div>
<div>
<p className={'font-medium text-neutral-900'}>Workflows trigger automatically</p>
<p className={'mt-1 text-sm text-neutral-600'}>
Configured workflows start running based on the incoming email
</p>
</div> </div>
</div> </div>
))}
</div> </div>
</div> </div>
</motion.div> </motion.div>
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className={'border-t border-neutral-200 py-20'}> <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 <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -404,11 +390,12 @@ export default function InboundEmailFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Ready to receive emails? Your domain can receive emails too
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Add inbound email to your verified domain in minutes. No credit card required. Set up inbound email on any verified domain in minutes. Replies, support tickets, and webhooks, all from
one platform.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a <motion.a
apps/landing/src/pages/features/segments.tsx
+18 -13
View File
@@ -123,10 +123,10 @@ export default function SegmentsFeature() {
<span className={'font-medium text-neutral-600'}>Audience Segmentation</span> <span className={'font-medium text-neutral-600'}>Audience Segmentation</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Target the Right Target the Right Audience,
<br /> <br />
Audience Every Time Every Time
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Organize contacts into dynamic segments based on behavior, attributes, and engagement. Send targeted Organize contacts into dynamic segments based on behavior, attributes, and engagement. Send targeted
@@ -169,10 +169,10 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Powerful segmentation tools The right message to the right person
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Everything you need to organize and target your audience</p> <p className={'mt-4 text-lg text-neutral-600'}>Build precise audiences and send campaigns that land</p>
</motion.div> </motion.div>
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -208,7 +208,7 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Flexible filtering options Flexible filtering options
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Build complex segments with nested AND/OR logic</p> <p className={'mt-4 text-lg text-neutral-600'}>Build complex segments with nested AND/OR logic</p>
@@ -252,7 +252,7 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Two types of segments</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Two types of segments</h2>
<p className={'mt-6 text-lg text-neutral-600'}>Choose between dynamic filtering or manual curation</p> <p className={'mt-6 text-lg text-neutral-600'}>Choose between dynamic filtering or manual curation</p>
</motion.div> </motion.div>
@@ -331,7 +331,7 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Use segments everywhere Use segments everywhere
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>From targeted campaigns to automated workflows</p> <p className={'mt-4 text-lg text-neutral-600'}>From targeted campaigns to automated workflows</p>
@@ -366,7 +366,12 @@ export default function SegmentsFeature() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className={'border-t border-neutral-200 py-20'}> <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 <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -374,11 +379,11 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Start segmenting your audience Stop sending the same email to everyone
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Create targeted campaigns and personalized workflows with powerful segmentation. No credit card required. Build precise audience segments and watch your open rates climb. 1,000 emails free, no credit card required.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a <motion.a
apps/landing/src/pages/features/smtp.tsx
+14 -67
View File
@@ -118,14 +118,11 @@ export default function SMTPFeature() {
<span className={'font-medium text-neutral-600'}>SMTP Email Sending</span> <span className={'font-medium text-neutral-600'}>SMTP Email Sending</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Send via SMTP Send Emails via SMTP or API
<br />
or API
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Choose your preferred sending method. Use our HTTP API for modern apps or SMTP for email clients and Use our HTTP API for modern apps or drop in SMTP credentials for any legacy system. Same deliverability, same pricing, zero lock-in.
legacy systems. Both options deliver the same great results.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -164,8 +161,8 @@ export default function SMTPFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Enterprise-ready SMTP</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>SMTP that works with everything</h2>
<p className={'mt-4 text-lg text-neutral-600'}>All the features you expect from a modern email platform</p> <p className={'mt-4 text-lg text-neutral-600'}>Full authentication, tracking, and deliverability out of the box</p>
</motion.div> </motion.div>
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -192,61 +189,6 @@ export default function SMTPFeature() {
</div> </div>
</section> </section>
{/* SMTP Configuration */}
<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={'mx-auto max-w-4xl'}
>
<div className={'mb-12 text-center'}>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
Simple SMTP configuration
</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Everything you need to configure your email client</p>
</div>
<div className={'rounded-2xl border border-neutral-200 bg-white p-8 sm:p-12'}>
<div className={'space-y-6'}>
<div className={'flex items-start justify-between border-b border-neutral-200 pb-6'}>
<div>
<p className={'text-sm font-medium text-neutral-500'}>SMTP Server</p>
<p className={'mt-1 font-mono text-lg text-neutral-900'}>smtp.yourdomain.com</p>
</div>
</div>
<div className={'grid gap-6 border-b border-neutral-200 pb-6 sm:grid-cols-2'}>
<div>
<p className={'text-sm font-medium text-neutral-500'}>Port (STARTTLS)</p>
<p className={'mt-1 font-mono text-lg text-neutral-900'}>587</p>
</div>
<div>
<p className={'text-sm font-medium text-neutral-500'}>Port (TLS/SSL)</p>
<p className={'mt-1 font-mono text-lg text-neutral-900'}>465</p>
</div>
</div>
<div className={'grid gap-6 sm:grid-cols-2'}>
<div>
<p className={'text-sm font-medium text-neutral-500'}>Username</p>
<p className={'mt-1 font-mono text-lg text-neutral-900'}>plunk</p>
</div>
<div>
<p className={'text-sm font-medium text-neutral-500'}>Password</p>
<p className={'mt-1 font-mono text-lg text-neutral-900'}>sk_your_secret_key</p>
</div>
</div>
</div>
<div className={'mt-8 rounded-lg bg-neutral-50 p-4'}>
<p className={'text-sm text-neutral-600'}>
Find your SMTP credentials in your dashboard under Settings → SMTP. Your password is your project
secret key.
</p>
</div>
</div>
</motion.div>
</section>
{/* Comparison Table */} {/* Comparison Table */}
<section className={'py-20'}> <section className={'py-20'}>
<motion.div <motion.div
@@ -256,7 +198,7 @@ export default function SMTPFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-12 text-center'} className={'mb-12 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>SMTP vs API</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>SMTP vs API</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Choose the right option for your use case</p> <p className={'mt-4 text-lg text-neutral-600'}>Choose the right option for your use case</p>
</motion.div> </motion.div>
@@ -305,7 +247,7 @@ export default function SMTPFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>When to use SMTP</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>When to use SMTP</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Perfect for these scenarios</p> <p className={'mt-4 text-lg text-neutral-600'}>Perfect for these scenarios</p>
</motion.div> </motion.div>
@@ -342,7 +284,12 @@ export default function SMTPFeature() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className={'border-t border-neutral-200 py-20'}> <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 <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -350,7 +297,7 @@ export default function SMTPFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Start sending via SMTP</h2> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>Start sending via SMTP</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Get your SMTP credentials and start sending emails from any client or application. No credit card Get your SMTP credentials and start sending emails from any client or application. No credit card
required. required.
apps/landing/src/pages/features/workflows.tsx
+33 -34
View File
@@ -105,8 +105,10 @@ export default function WorkflowsFeature() {
<span className={'font-medium text-neutral-600'}>Workflow Automation</span> <span className={'font-medium text-neutral-600'}>Workflow Automation</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Automate Your Email Marketing Email Automation
<br />
That Actually Works
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Turn events into personalized email journeys. Build sophisticated automation workflows with our visual Turn events into personalized email journeys. Build sophisticated automation workflows with our visual
@@ -149,7 +151,7 @@ export default function WorkflowsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Everything you need for email automation Everything you need for email automation
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Powerful features that make complex automations simple</p> <p className={'mt-4 text-lg text-neutral-600'}>Powerful features that make complex automations simple</p>
@@ -188,7 +190,7 @@ export default function WorkflowsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Visual workflow builder Visual workflow builder
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
@@ -197,23 +199,21 @@ export default function WorkflowsFeature() {
</motion.div> </motion.div>
<div className={'mx-auto mt-16 max-w-5xl'}> <div className={'mx-auto mt-16 max-w-5xl'}>
<div className={'grid gap-8 lg:grid-cols-3'}> <div className={'grid gap-12 lg:grid-cols-3'}>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.1, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
>
<div
className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900'
}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
1 1
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Choose a trigger</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Choose a trigger</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Select an event that starts your workflow, like user signup, purchase, or any custom action you track. Select an event that starts your workflow, like user signup, purchase, or any custom action you track.
</p> </p>
</motion.div> </motion.div>
@@ -223,17 +223,14 @@ export default function WorkflowsFeature() {
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
>
<div
className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900'
}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
2 2
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Build your flow</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Build your flow</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Drag and drop steps to create your workflow. Add emails, delays, conditions, webhooks, and more. Drag and drop steps to create your workflow. Add emails, delays, conditions, webhooks, and more.
</p> </p>
</motion.div> </motion.div>
@@ -243,17 +240,14 @@ export default function WorkflowsFeature() {
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-xl border border-neutral-200 bg-white p-8'}
>
<div
className={
'flex h-12 w-12 items-center justify-center rounded-lg bg-neutral-100 text-xl font-bold text-neutral-900'
}
> >
<div className={'mb-5 flex items-center gap-4'}>
<div className={'flex h-14 w-14 items-center justify-center rounded-full border-2 border-neutral-200 bg-white text-xl font-bold text-neutral-900'}>
3 3
</div> </div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Activate and monitor</h3> </div>
<p className={'mt-2 text-sm text-neutral-600'}> <h3 className={'text-lg font-semibold text-neutral-900'}>Activate and monitor</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Enable your workflow and watch it run automatically. Monitor executions in real-time with full Enable your workflow and watch it run automatically. Monitor executions in real-time with full
visibility. visibility.
</p> </p>
@@ -271,7 +265,7 @@ export default function WorkflowsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Built for every use case Built for every use case
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>From onboarding to re-engagement, workflows handle it all</p> <p className={'mt-4 text-lg text-neutral-600'}>From onboarding to re-engagement, workflows handle it all</p>
@@ -309,7 +303,12 @@ export default function WorkflowsFeature() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className={'border-t border-neutral-200 py-20'}> <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 <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -317,11 +316,11 @@ export default function WorkflowsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}> <h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Ready to automate your emails? Set up your first workflow in minutes
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Start building powerful workflows today. No credit card required. 1,000 emails free every month. Then $0.001 per email. No contact limits, no credit card required.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a <motion.a
apps/landing/src/pages/guides/index.tsx
+6 -1
View File
@@ -224,7 +224,12 @@ export default function GuidesIndex() {
</section> </section>
{/* CTA Section */} {/* CTA Section */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
apps/landing/src/pages/index.tsx
+55 -31
View File
@@ -225,14 +225,32 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h1 className={'text-7xl font-bold tracking-tight text-neutral-900 sm:text-8xl lg:text-9xl'}> <motion.div
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'}
>
<svg className="h-4 w-4 text-neutral-700" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
fillRule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clipRule="evenodd"
/>
</svg>
<span className={'font-medium text-neutral-700'}>4,000+ Stars on GitHub</span>
<span className={'text-neutral-300'}>·</span>
<span className={'text-neutral-500'}>AGPL-3.0 Open Source</span>
</motion.div>
<h1 className={'text-7xl font-bold tracking-tight text-neutral-900 sm:text-8xl lg:text-9xl text-balance'}>
Open-Source Open-Source
<br /> <br />
Email Platform Email Platform
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Open-source email automation. Build workflows, segment audiences, and send emails with a simple API. No Transactional emails, marketing campaigns, and workflow automation in one platform. Open-source,
vendor lock-in. self-hostable, $0.001 per email, no contact limits.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -271,14 +289,14 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-5xl text-center'} className={'mx-auto max-w-5xl text-center'}
> >
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Replace Resend, SendGrid, Mailchimp, and More Replace your email stack
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}> <p className={'mt-4 text-lg text-neutral-600'}>
The open-source alternative to proprietary email platforms The open-source alternative to Resend, SendGrid, Mailchimp, and more
</p> </p>
<div className={'mt-16 grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-5'}> <div className={'mt-16 grid grid-cols-2 gap-px bg-neutral-200 lg:grid-cols-5'}>
<Link href={'/vs/resend'} className={'group bg-white p-10 transition hover:bg-neutral-50'}> <Link href={'/vs/resend'} className={'group bg-white p-10 transition hover:bg-neutral-50'}>
<div className={'flex flex-col items-center gap-4'}> <div className={'flex flex-col items-center gap-4'}>
<div className={'text-2xl font-bold text-neutral-400 transition group-hover:text-neutral-900'}> <div className={'text-2xl font-bold text-neutral-400 transition group-hover:text-neutral-900'}>
@@ -336,7 +354,7 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Most email tools weren't built to scale Most email tools weren't built to scale
</h2> </h2>
</motion.div> </motion.div>
@@ -358,7 +376,7 @@ export default function Index() {
</div> </div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Complex setup</h3> <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Complex setup</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}> <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Hours of configuration needed. Life's too short. Most email platforms take days to configure. Plunk is up and running in under 5 minutes.
</p> </p>
</motion.div> </motion.div>
@@ -378,7 +396,7 @@ export default function Index() {
</div> </div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Contact limits</h3> <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Contact limits</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}> <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Growth penalties. Success shouldn't cost more. Other platforms charge more as your list grows. Plunk stores unlimited contacts for free.
</p> </p>
</motion.div> </motion.div>
@@ -397,7 +415,9 @@ export default function Index() {
<Lock className="h-5 w-5" /> <Lock className="h-5 w-5" />
</div> </div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Vendor lock-in</h3> <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Vendor lock-in</h3>
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>Closed source platforms</p> <p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>
Closed-source platforms own your stack. Plunk is AGPL-3.0 licensed and fully self-hostable.
</p>
</motion.div> </motion.div>
</div> </div>
</section> </section>
@@ -411,7 +431,7 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Built for scale</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Built for scale</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Everything you need to run email at any volume</p> <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to run email at any volume</p>
</motion.div> </motion.div>
@@ -448,11 +468,11 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
One contact, unified across everything One contact, complete history
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Every interaction flows into a single contact record with complete history. No more scattered data. Every interaction flows into a single contact record. Transactional emails, campaigns, and workflows, all tracked in one place.
</p> </p>
</motion.div> </motion.div>
@@ -608,31 +628,31 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}> <p className={'mt-6 text-lg text-neutral-600'}>
Transparent codebase, privacy-focused infrastructure, and the option to self-host AGPL-3.0 licensed, EU-hosted, and GDPR compliant. Inspect the code, self-host on your own infrastructure, or use our cloud.
</p> </p>
<div className={'mt-16 grid gap-px bg-neutral-200 sm:grid-cols-3'}> <div className={'mt-16 grid gap-px bg-neutral-200 sm:grid-cols-3'}>
<div className={'bg-white p-12'}> <div className={'bg-white p-12'}>
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}> <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 text-neutral-900'} /> <PackageOpen className={'h-7 w-7'} />
</div> </div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Open Source</h3> <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-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'}>4K+ stars on GitHub</p>
</div> </div>
<div className={'bg-white p-12'}> <div className={'bg-white p-12'}>
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}> <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 text-neutral-900'} /> <Shield className={'h-7 w-7'} />
</div> </div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Privacy First</h3> <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Privacy First</h3>
<p className={'mt-2 text-sm text-neutral-600'}>EU hosted</p> <p className={'mt-2 text-sm text-neutral-600'}>EU hosted</p>
<p className={'mt-4 text-xs text-neutral-500'}>GDPR compliant</p> <p className={'mt-4 text-xs text-neutral-500'}>GDPR compliant</p>
</div> </div>
<div className={'bg-white p-12'}> <div className={'bg-white p-12'}>
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}> <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 text-neutral-900'} /> <Globe className={'h-7 w-7'} />
</div> </div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Self-Hostable</h3> <h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Self-Hostable</h3>
<p className={'mt-2 text-sm text-neutral-600'}>Deploy anywhere</p> <p className={'mt-2 text-sm text-neutral-600'}>Deploy anywhere</p>
@@ -666,7 +686,7 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'} className={'mx-auto max-w-4xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}> <p className={'mt-6 text-lg text-neutral-600'}>
Pay for what you use, nothing more. No surprises at scale. Pay for what you use, nothing more. No surprises at scale.
</p> </p>
@@ -743,7 +763,7 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
> >
<div className={'mb-20 text-center'}> <div className={'mb-20 text-center'}>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Trusted by the best</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Trusted by the best</h2>
</div> </div>
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -756,9 +776,8 @@ export default function Index() {
transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
className={'flex flex-col bg-white p-10'} className={'flex flex-col bg-white p-10'}
> >
<p className={'min-h-[3.5rem] text-sm leading-relaxed text-neutral-600'}> <div className={'mb-2 font-serif text-5xl leading-none text-neutral-200'}>&ldquo;</div>
&ldquo;{t.testimonial}&rdquo; <p className={'text-sm leading-relaxed text-neutral-700'}>{t.testimonial}</p>
</p>
<div className={'mt-auto flex items-center gap-4 pt-6'}> <div className={'mt-auto flex items-center gap-4 pt-6'}>
<div className={'relative h-12 w-12 overflow-hidden rounded-full'}> <div className={'relative h-12 w-12 overflow-hidden rounded-full'}>
<Image src={t.image} alt={t.author} placeholder="blur" className={'object-cover'} /> <Image src={t.image} alt={t.author} placeholder="blur" className={'object-cover'} />
@@ -775,7 +794,12 @@ export default function Index() {
</section> </section>
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -783,9 +807,9 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Ready to get started?</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'}> <p className={'mt-6 text-lg text-neutral-600'}>
Join thousands of businesses building better email experiences with Plunk 1,000 emails free every month. Then $0.001 per email. No contact limits, no surprises.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a <motion.a
apps/landing/src/pages/pricing.tsx
+5 -5
View File
@@ -36,10 +36,10 @@ export default function Index() {
<main> <main>
<section className={'py-32'}> <section className={'py-32'}>
<div className={'mx-auto max-w-4xl text-center'}> <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"> <h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl text-balance">
Simple, transparent pricing Simple, transparent pricing
</h1> </h1>
<p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">Start free, pay only for what you use</p> <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> </div>
{/* Pricing Tiers */} {/* Pricing Tiers */}
@@ -207,7 +207,7 @@ export default function Index() {
clipRule="evenodd" clipRule="evenodd"
/> />
</svg> </svg>
<span>Billing limits</span> <span>Monthly spend cap</span>
</li> </li>
<li className="flex items-start gap-3 text-neutral-600"> <li className="flex items-start gap-3 text-neutral-600">
<svg <svg
@@ -238,7 +238,7 @@ export default function Index() {
{/* Features Grid */} {/* Features Grid */}
<div className="mx-auto mt-24 max-w-5xl"> <div className="mx-auto mt-24 max-w-5xl">
<h2 className="mb-12 text-center text-2xl font-bold text-neutral-900">Everything included</h2> <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="grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3">
<div className="bg-white p-8"> <div className="bg-white p-8">
<h3 className="text-lg font-semibold text-neutral-900">Unlimited emails</h3> <h3 className="text-lg font-semibold text-neutral-900">Unlimited emails</h3>
@@ -275,7 +275,7 @@ export default function Index() {
<div className="flex-1 text-center sm:text-left"> <div className="flex-1 text-center sm:text-left">
<h2 className={'text-2xl font-bold text-neutral-900'}>Self-host</h2> <h2 className={'text-2xl font-bold text-neutral-900'}>Self-host</h2>
<p className={'mt-2 text-neutral-600'}> <p className={'mt-2 text-neutral-600'}>
Host Plunk on your own infrastructure. The perfect solution for when you require full control. Run Plunk on your own infrastructure. Full data ownership, no per-email costs, and GDPR compliance by default.
</p> </p>
</div> </div>
<div className={'sm:ml-auto'}> <div className={'sm:ml-auto'}>
apps/landing/src/pages/tools/index.tsx
+4 -4
View File
@@ -68,7 +68,7 @@ export default function ToolsIndex() {
<span className={'text-sm text-neutral-600'}>Free Email Tools</span> <span className={'text-sm text-neutral-600'}>Free Email Tools</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Free tools for Free tools for
<br /> <br />
email developers email developers
@@ -114,7 +114,7 @@ export default function ToolsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Available Tools</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Available Tools</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Everything you need to work with emails</p> <p className={'mt-4 text-lg text-neutral-600'}>Everything you need to work with emails</p>
</motion.div> </motion.div>
@@ -168,7 +168,7 @@ export default function ToolsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why use these tools?</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why use these tools?</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Built by email experts for email developers</p> <p className={'mt-4 text-lg text-neutral-600'}>Built by email experts for email developers</p>
</motion.div> </motion.div>
@@ -235,7 +235,7 @@ export default function ToolsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Need production-grade email tools?</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Need production-grade email tools?</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
These free tools are great for development, but Plunk offers so much more: templates, scheduling, These free tools are great for development, but Plunk offers so much more: templates, scheduling,
automation, analytics, and deliverability optimization. Start free, scale as you grow. automation, analytics, and deliverability optimization. Start free, scale as you grow.
apps/landing/src/pages/tools/markdown-to-email.tsx
+2 -2
View File
@@ -64,7 +64,7 @@ export default function MarkdownToEmail() {
<span className={'text-sm text-neutral-600'}>Free Tool</span> <span className={'text-sm text-neutral-600'}>Free Tool</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Markdown to Email Markdown to Email
<br /> <br />
HTML Converter HTML Converter
@@ -134,7 +134,7 @@ export default function MarkdownToEmail() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Ready to send great emails?</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Ready to send great emails?</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
This tool is great for creating email HTML, but Plunk handles everything: templates, sending, tracking, This tool is great for creating email HTML, but Plunk handles everything: templates, sending, tracking,
and deliverability. Start free, no credit card required. and deliverability. Start free, no credit card required.
apps/landing/src/pages/tools/verify-email.tsx
+3 -3
View File
@@ -72,7 +72,7 @@ export default function VerifyEmailPage() {
<span className={'text-sm text-neutral-600'}>Free Tool</span> <span className={'text-sm text-neutral-600'}>Free Tool</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Email Verification Email Verification
<br /> <br />
Tool Tool
@@ -159,7 +159,7 @@ export default function VerifyEmailPage() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why verify email addresses?</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why verify email addresses?</h2>
<p className={'mt-4 text-lg text-neutral-600'}> <p className={'mt-4 text-lg text-neutral-600'}>
Email verification helps improve deliverability and protect your sender reputation. Email verification helps improve deliverability and protect your sender reputation.
</p> </p>
@@ -201,7 +201,7 @@ export default function VerifyEmailPage() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Ready for production-grade email verification? Ready for production-grade email verification?
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
apps/landing/src/pages/vs/activecampaign.tsx
+14 -9
View File
@@ -25,12 +25,12 @@ const faqs: FAQ[] = [
{ {
question: 'When should I choose ActiveCampaign over Plunk?', question: 'When should I choose ActiveCampaign over Plunk?',
answer: answer:
'Choose ActiveCampaign if you need a full CRM with sales automation, lead scoring, and machine learning features. ActiveCampaign is designed for marketing and sales teams that need an all-in-one platform. Choose Plunk if you need powerful email automation without the complexity—perfect for developers who want to integrate email into their product without CRM overhead.', 'Choose ActiveCampaign if you need a full CRM with sales automation, lead scoring, and machine learning features. ActiveCampaign is designed for marketing and sales teams that need an all-in-one platform. Choose Plunk if you need powerful email automation without the complexity. It is built for developers who want to integrate email into their product without CRM overhead.',
}, },
{ {
question: 'What is the price difference between Plunk and ActiveCampaign?', question: 'What is the price difference between Plunk and ActiveCampaign?',
answer: answer:
'ActiveCampaign starts at $29/month for basic features and quickly scales to $149/month or more for automation features. Plunk uses pay-as-you-go pricing—you only pay for emails sent. For email-focused needs, Plunk typically costs 50-80% less than ActiveCampaign while providing the same email automation capabilities.', 'ActiveCampaign starts at $29/month for basic features and quickly scales to $149/month or more for automation features. Plunk uses pay-as-you-go pricing. You only pay for emails sent. For email-focused needs, Plunk typically costs 50-80% less than ActiveCampaign while providing the same email automation capabilities.',
}, },
{ {
question: "Can Plunk match ActiveCampaign's automation capabilities?", question: "Can Plunk match ActiveCampaign's automation capabilities?",
@@ -40,7 +40,7 @@ const faqs: FAQ[] = [
{ {
question: 'Is migration from ActiveCampaign to Plunk difficult?', question: 'Is migration from ActiveCampaign to Plunk difficult?',
answer: answer:
"It depends on your ActiveCampaign usage. If you're primarily using email automation and campaigns, migration is straightforward—export contacts, recreate workflows, and integrate Plunk's API. If you heavily rely on CRM, lead scoring, or sales automation, you'll need separate tools for those features. Most developers migrate in a day or less.", "It depends on your ActiveCampaign usage. If you're primarily using email automation and campaigns, migration is straightforward: export contacts, recreate workflows, and integrate Plunk's API. If you heavily rely on CRM, lead scoring, or sales automation, you'll need separate tools for those features. Most developers migrate in a day or less.",
}, },
{ {
question: 'What ActiveCampaign features does Plunk not have?', question: 'What ActiveCampaign features does Plunk not have?',
@@ -94,7 +94,7 @@ export default function ActiveCampaignComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs ActiveCampaign</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs ActiveCampaign</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for ActiveCampaign for ActiveCampaign
@@ -141,7 +141,7 @@ export default function ActiveCampaignComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Enterprise Features Without Enterprise Prices Enterprise Features Without Enterprise Prices
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Email automation that doesn't break the bank</p> <p className={'mt-4 text-lg text-neutral-600'}>Email automation that doesn't break the bank</p>
@@ -233,7 +233,7 @@ export default function ActiveCampaignComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Automation Without Complexity</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Automation Without Complexity</h2>
</motion.div> </motion.div>
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -374,7 +374,7 @@ export default function ActiveCampaignComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="ActiveCampaign" rows={comparisonData} /> <ComparisonTable competitorName="ActiveCampaign" rows={comparisonData} />
@@ -384,7 +384,12 @@ export default function ActiveCampaignComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-activecampaign" /> <FAQSection faqs={faqs} schemaId="faq-schema-activecampaign" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -392,7 +397,7 @@ export default function ActiveCampaignComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Get email automation without the bloat Get email automation without the bloat
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
apps/landing/src/pages/vs/bento.tsx
+14 -9
View File
@@ -25,17 +25,17 @@ const faqs: FAQ[] = [
{ {
question: 'When should I choose Bento over Plunk?', question: 'When should I choose Bento over Plunk?',
answer: answer:
"Choose Bento if you need an all-in-one platform with CRM, live chat, and customer relationship features alongside email. Bento is designed for small businesses and creators who want everything in one place. Choose Plunk if you're a developer who needs focused email automation without CRM bloat—perfect for integrating email into your product.", "Choose Bento if you need an all-in-one platform with CRM, live chat, and customer relationship features alongside email. Bento is designed for small businesses and creators who want everything in one place. Choose Plunk if you're a developer who needs focused email automation without CRM bloat. It's built specifically for integrating email into your product.",
}, },
{ {
question: 'What is the pricing difference between Plunk and Bento?', question: 'What is the pricing difference between Plunk and Bento?',
answer: answer:
'Bento offers a 30-day unlimited trial, then switches to subscription pricing. Plunk uses pay-as-you-go pricing with no trials needed—you only pay for emails sent. For email-focused needs, Plunk is typically more cost-effective. Bento includes CRM and live chat in the price, so if you need those features, Bento may offer better value.', 'Bento offers a 30-day unlimited trial, then switches to subscription pricing. Plunk uses pay-as-you-go pricing with no trials needed. You only pay for emails sent. For email-focused needs, Plunk is typically more cost-effective. Bento includes CRM and live chat in the price, so if you need those features, Bento may offer better value.',
}, },
{ {
question: 'Can Plunk handle email automation like Bento?', question: 'Can Plunk handle email automation like Bento?',
answer: answer:
'Yes. Plunk supports workflow automation, event-based triggers, transactional emails, and marketing campaigns—all the email features Bento offers. The difference is Plunk focuses purely on email, while Bento includes CRM, live chat, and customer relationship management. If you only need email automation, Plunk is simpler.', 'Yes. Plunk supports workflow automation, event-based triggers, transactional emails, and marketing campaigns. All the email features Bento offers. The difference is Plunk focuses purely on email, while Bento includes CRM, live chat, and customer relationship management. If you only need email automation, Plunk is simpler.',
}, },
{ {
question: 'How does the developer experience compare?', question: 'How does the developer experience compare?',
@@ -94,7 +94,7 @@ export default function BentoComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Bento</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Bento</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Bento for Bento
@@ -141,7 +141,7 @@ export default function BentoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Focused Email vs All-in-One Complexity Focused Email vs All-in-One Complexity
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not what you don't need</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not what you don't need</p>
@@ -233,7 +233,7 @@ export default function BentoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Developer-First Email Platform</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Developer-First Email Platform</h2>
</motion.div> </motion.div>
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -374,7 +374,7 @@ export default function BentoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="Bento" rows={comparisonData} /> <ComparisonTable competitorName="Bento" rows={comparisonData} />
@@ -384,7 +384,12 @@ export default function BentoComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-bento" /> <FAQSection faqs={faqs} schemaId="faq-schema-bento" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -392,7 +397,7 @@ export default function BentoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Get focused email automation</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Get focused email automation</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Join developers choosing focused email solutions over all-in-one complexity. Start free, no credit card Join developers choosing focused email solutions over all-in-one complexity. Start free, no credit card
required. required.
apps/landing/src/pages/vs/brevo.tsx
+11 -6
View File
@@ -93,7 +93,7 @@ export default function BrevoComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Brevo</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Brevo</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Brevo for Brevo
@@ -140,7 +140,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Pricing That Scales With You</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Pricing That Scales With You</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not contacts stored</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not contacts stored</p>
</motion.div> </motion.div>
@@ -230,7 +230,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why Choose Plunk Over Brevo</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over Brevo</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Focus on email, not feature overload</p> <p className={'mt-4 text-lg text-neutral-600'}>Focus on email, not feature overload</p>
</motion.div> </motion.div>
@@ -372,7 +372,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature Comparison</h2>
<p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p> <p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p>
</motion.div> </motion.div>
@@ -383,7 +383,12 @@ export default function BrevoComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-brevo" /> <FAQSection faqs={faqs} schemaId="faq-schema-brevo" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -391,7 +396,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Make the switch to simplicity</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Make the switch to simplicity</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Join developers choosing focused tools over bloated marketing suites. Start free, no credit card required. Join developers choosing focused tools over bloated marketing suites. Start free, no credit card required.
</p> </p>
apps/landing/src/pages/vs/convertkit.tsx
+14 -9
View File
@@ -30,12 +30,12 @@ const faqs: FAQ[] = [
{ {
question: 'What is the pricing difference between Plunk and ConvertKit?', question: 'What is the pricing difference between Plunk and ConvertKit?',
answer: answer:
'ConvertKit charges based on subscriber count—your cost increases as your list grows, regardless of how many emails you send. Plunk uses pay-as-you-go pricing where you only pay for emails actually sent. This means with ConvertKit, a list of 10,000 subscribers costs $119/month even if you rarely email them. With Plunk, you only pay when you send.', 'ConvertKit charges based on subscriber count. Your cost increases as your list grows, regardless of how many emails you send. Plunk uses pay-as-you-go pricing where you only pay for emails actually sent. This means with ConvertKit, a list of 10,000 subscribers costs $119/month even if you rarely email them. With Plunk, you only pay when you send.',
}, },
{ {
question: 'Can Plunk handle creator workflows like ConvertKit?', question: 'Can Plunk handle creator workflows like ConvertKit?',
answer: answer:
"Yes, Plunk supports email automation, workflows, and segmentation similar to ConvertKit. You can create automated sequences, trigger emails based on events, and segment your audience. The main difference is Plunk doesn't include landing page builders or product selling features—it's focused purely on email delivery and automation.", "Yes, Plunk supports email automation, workflows, and segmentation similar to ConvertKit. You can create automated sequences, trigger emails based on events, and segment your audience. The main difference is Plunk doesn't include landing page builders or product selling features. It's focused purely on email delivery and automation.",
}, },
{ {
question: 'Does Plunk have landing pages like ConvertKit?', question: 'Does Plunk have landing pages like ConvertKit?',
@@ -57,7 +57,7 @@ export default function ConvertkitComparison() {
<> <>
<NextSeo <NextSeo
title="ConvertKit Alternative for Developers | Plunk" title="ConvertKit Alternative for Developers | Plunk"
description="Developer-first alternative to ConvertKit. Pay per email instead of per subscriber. Open-source, self-hostable, with powerful automation—no landing page bloat." description="Developer-first alternative to ConvertKit. Pay per email instead of per subscriber. Open-source, self-hostable, with powerful automation. No landing page bloat."
canonical="https://next.useplunk.com/vs/convertkit" canonical="https://next.useplunk.com/vs/convertkit"
openGraph={{ openGraph={{
title: 'ConvertKit Alternative for Developers | Plunk', title: 'ConvertKit Alternative for Developers | Plunk',
@@ -94,7 +94,7 @@ export default function ConvertkitComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs ConvertKit</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs ConvertKit</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for ConvertKit for ConvertKit
@@ -141,7 +141,7 @@ export default function ConvertkitComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Pay for Emails, Not Subscribers</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Pay for Emails, Not Subscribers</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pricing that grows with usage, not list size</p> <p className={'mt-4 text-lg text-neutral-600'}>Pricing that grows with usage, not list size</p>
</motion.div> </motion.div>
@@ -231,7 +231,7 @@ export default function ConvertkitComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Built for Developers, Not Creators</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Built for Developers, Not Creators</h2>
</motion.div> </motion.div>
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -372,7 +372,7 @@ export default function ConvertkitComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="ConvertKit" rows={comparisonData} /> <ComparisonTable competitorName="ConvertKit" rows={comparisonData} />
@@ -382,7 +382,12 @@ export default function ConvertkitComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-convertkit" /> <FAQSection faqs={faqs} schemaId="faq-schema-convertkit" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -390,7 +395,7 @@ export default function ConvertkitComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Ready for a developer-first email platform? Ready for a developer-first email platform?
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
apps/landing/src/pages/vs/customerio.tsx
+12 -8
View File
@@ -89,15 +89,14 @@ export default function CustomerioComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Customer.io</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Customer.io</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Customer.io for Customer.io
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Customer.io is powerful but complex. Plunk gives developers the automation they need without the Customer.io starts at $100/month and takes weeks to set up. Plunk delivers the same event-driven automation in an open-source platform you can be sending from in under 5 minutes.
enterprise overhead.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -136,7 +135,7 @@ export default function CustomerioComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Simple Pricing That Scales</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Simple Pricing That Scales</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Transparent pay-as-you-go vs complex enterprise tiers</p> <p className={'mt-4 text-lg text-neutral-600'}>Transparent pay-as-you-go vs complex enterprise tiers</p>
</motion.div> </motion.div>
@@ -226,7 +225,7 @@ export default function CustomerioComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="Customer.io" rows={comparisonData} /> <ComparisonTable competitorName="Customer.io" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function CustomerioComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Key Advantages</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Key Advantages</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Why developers choose Plunk</p> <p className={'mt-4 text-lg text-neutral-600'}>Why developers choose Plunk</p>
</motion.div> </motion.div>
@@ -378,7 +377,12 @@ export default function CustomerioComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-customerio" /> <FAQSection faqs={faqs} schemaId="faq-schema-customerio" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -386,7 +390,7 @@ export default function CustomerioComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Try Plunk free</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Try Plunk free</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
1,000 emails/month free. No credit card required. Developer-friendly from day one. 1,000 emails/month free. No credit card required. Developer-friendly from day one.
</p> </p>
apps/landing/src/pages/vs/index.tsx
+15 -12
View File
@@ -131,15 +131,14 @@ export default function CompetitorsIndex() {
<span className={'text-sm text-neutral-600'}>Email Platform Comparisons</span> <span className={'text-sm text-neutral-600'}>Email Platform Comparisons</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Plunk vs the Plunk vs the
<br /> <br />
competition competition
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Compare Plunk with leading email platforms. See why developers choose our open-source alternative for Most email platforms charge by the contact, lock you in, and split transactional from marketing. Plunk does all three in one open-source platform at $0.001 per email.
transactional emails plus marketing features.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -178,7 +177,7 @@ export default function CompetitorsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Compare Plunk with Industry Leaders Compare Plunk with Industry Leaders
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>See how Plunk stacks up against popular email platforms</p> <p className={'mt-4 text-lg text-neutral-600'}>See how Plunk stacks up against popular email platforms</p>
@@ -223,7 +222,7 @@ export default function CompetitorsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why Choose Plunk</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk</h2>
<p className={'mt-4 text-lg text-neutral-600'}>One platform for all your email needs</p> <p className={'mt-4 text-lg text-neutral-600'}>One platform for all your email needs</p>
</motion.div> </motion.div>
@@ -237,11 +236,10 @@ export default function CompetitorsIndex() {
'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg' 'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
} }
> >
<Mail className="h-8 w-8 text-blue-500 mb-4" /> <Mail className="h-8 w-8 text-neutral-900 mb-4" />
<h3 className={'text-2xl font-bold text-neutral-900'}>Transactional + Marketing</h3> <h3 className={'text-2xl font-bold text-neutral-900'}>Transactional + Marketing</h3>
<p className={'mt-4 leading-relaxed text-neutral-600'}> <p className={'mt-4 leading-relaxed text-neutral-600'}>
Send transactional emails with the same reliability as dedicated providers, plus marketing campaigns, Send transactional emails with the same reliability as dedicated providers, plus marketing campaigns, automation, and segmentation. All in one platform.
automation, and segmentation—all in one platform.
</p> </p>
</motion.div> </motion.div>
@@ -254,7 +252,7 @@ export default function CompetitorsIndex() {
'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg' 'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
} }
> >
<Code className="h-8 w-8 text-green-500 mb-4" /> <Code className="h-8 w-8 text-neutral-900 mb-4" />
<h3 className={'text-2xl font-bold text-neutral-900'}>Open Source & Self-Hostable</h3> <h3 className={'text-2xl font-bold text-neutral-900'}>Open Source & Self-Hostable</h3>
<p className={'mt-4 leading-relaxed text-neutral-600'}> <p className={'mt-4 leading-relaxed text-neutral-600'}>
AGPL-3.0 licensed code you can inspect, modify, and self-host. Full control over your data and AGPL-3.0 licensed code you can inspect, modify, and self-host. Full control over your data and
@@ -271,7 +269,7 @@ export default function CompetitorsIndex() {
'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg' 'rounded-2xl border border-neutral-200 bg-white p-8 transition hover:border-neutral-300 hover:shadow-lg'
} }
> >
<DollarSign className="h-8 w-8 text-yellow-500 mb-4" /> <DollarSign className="h-8 w-8 text-neutral-900 mb-4" />
<h3 className={'text-2xl font-bold text-neutral-900'}>Simple Pricing</h3> <h3 className={'text-2xl font-bold text-neutral-900'}>Simple Pricing</h3>
<p className={'mt-4 leading-relaxed text-neutral-600'}> <p className={'mt-4 leading-relaxed text-neutral-600'}>
Pay-as-you-go pricing with all features included. No separate charges for transactional vs marketing Pay-as-you-go pricing with all features included. No separate charges for transactional vs marketing
@@ -282,7 +280,12 @@ export default function CompetitorsIndex() {
</section> </section>
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -290,7 +293,7 @@ export default function CompetitorsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Ready to try Plunk?</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Ready to try Plunk?</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Join thousands of developers using Plunk for reliable email delivery. Start free, scale as you grow. Join thousands of developers using Plunk for reliable email delivery. Start free, scale as you grow.
</p> </p>
apps/landing/src/pages/vs/klaviyo.tsx
+14 -10
View File
@@ -25,12 +25,12 @@ const faqs: FAQ[] = [
{ {
question: 'When should I choose Klaviyo over Plunk?', question: 'When should I choose Klaviyo over Plunk?',
answer: answer:
'Choose Klaviyo if you need deep native e-commerce integrations (Shopify, WooCommerce), SMS marketing, and AI-powered predictive analytics. Klaviyo excels for established e-commerce brands with dedicated marketing teams and budget for enterprise features. Choose Plunk if you need powerful email automation for e-commerce (or any use case) without the premium price tag—perfect for developers and growing businesses.', 'Choose Klaviyo if you need deep native e-commerce integrations (Shopify, WooCommerce), SMS marketing, and AI-powered predictive analytics. Klaviyo excels for established e-commerce brands with dedicated marketing teams and budget for enterprise features. Choose Plunk if you need powerful email automation for e-commerce (or any use case) without the premium price tag. It is built for developers and growing businesses who want the capabilities without the cost.',
}, },
{ {
question: 'How much cheaper is Plunk compared to Klaviyo?', question: 'How much cheaper is Plunk compared to Klaviyo?',
answer: answer:
'Klaviyo can be dramatically more expensive. With 10,000 contacts, Klaviyo costs $150-300+/month depending on email volume. Plunk uses pay-as-you-go pricing—you only pay for emails sent, not contacts stored. For most use cases, Plunk costs 60-90% less than Klaviyo while providing the same email automation capabilities. The savings increase as your contact list grows.', 'Klaviyo can be dramatically more expensive. With 10,000 contacts, Klaviyo costs $150-300+/month depending on email volume. Plunk uses pay-as-you-go pricing. You only pay for emails sent, not contacts stored. For most use cases, Plunk costs 60-90% less than Klaviyo while providing the same email automation capabilities. The savings increase as your contact list grows.',
}, },
{ {
question: 'Can Plunk handle e-commerce emails?', question: 'Can Plunk handle e-commerce emails?',
@@ -94,15 +94,14 @@ export default function KlaviyoComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Klaviyo</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Klaviyo</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Klaviyo for Klaviyo
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Klaviyo is powerful for e-commerce but extremely expensive. Plunk delivers email automation for any use Klaviyo is powerful for e-commerce but extremely expensive. Plunk delivers the same email automation, including full e-commerce support, at a fraction of the cost. No hidden fees, no contact-based pricing.
case—including e-commerce—at a fraction of the cost. No hidden fees, no contact-based pricing.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -141,7 +140,7 @@ export default function KlaviyoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
E-commerce Email Without the Premium Price E-commerce Email Without the Premium Price
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not contacts stored</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not contacts stored</p>
@@ -233,7 +232,7 @@ export default function KlaviyoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
E-commerce Email, Developer-Friendly E-commerce Email, Developer-Friendly
</h2> </h2>
</motion.div> </motion.div>
@@ -376,7 +375,7 @@ export default function KlaviyoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="Klaviyo" rows={comparisonData} /> <ComparisonTable competitorName="Klaviyo" rows={comparisonData} />
@@ -386,7 +385,12 @@ export default function KlaviyoComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-klaviyo" /> <FAQSection faqs={faqs} schemaId="faq-schema-klaviyo" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -394,7 +398,7 @@ export default function KlaviyoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
E-commerce email at a fraction of the cost E-commerce email at a fraction of the cost
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
apps/landing/src/pages/vs/loops.tsx
+13 -9
View File
@@ -39,7 +39,7 @@ const faqs: FAQ[] = [
{ {
question: 'Does Plunk have the same modern features as Loops?', question: 'Does Plunk have the same modern features as Loops?',
answer: answer:
'Yes. Plunk offers transactional emails, marketing campaigns, workflow automation, dynamic segmentation, and a modern API—just like Loops. The key difference is Plunk is open-source, self-hostable, and has no contact limits.', 'Yes. Plunk offers transactional emails, marketing campaigns, workflow automation, dynamic segmentation, and a modern API, just like Loops. The key difference is Plunk is open-source, self-hostable, and has no contact limits.',
}, },
{ {
question: 'How easy is it to migrate from Loops to Plunk?', question: 'How easy is it to migrate from Loops to Plunk?',
@@ -93,7 +93,7 @@ export default function LoopsComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Loops</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Loops</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Loops for Loops
@@ -140,7 +140,7 @@ export default function LoopsComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Transparent Pricing vs Vendor Lock-In Transparent Pricing vs Vendor Lock-In
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay per email, not per contact</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay per email, not per contact</p>
@@ -232,7 +232,7 @@ export default function LoopsComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why Choose Plunk Over Loops</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over Loops</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Open-source transparency meets modern SaaS features</p> <p className={'mt-4 text-lg text-neutral-600'}>Open-source transparency meets modern SaaS features</p>
</motion.div> </motion.div>
@@ -358,8 +358,7 @@ export default function LoopsComparison() {
</div> </div>
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>All Features Included</h3> <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>All Features Included</h3>
<p className={'mt-3 leading-relaxed text-neutral-600'}> <p className={'mt-3 leading-relaxed text-neutral-600'}>
Transactional emails, campaigns, workflows, segmentation—all included. No artificial feature gating Transactional emails, campaigns, workflows, segmentation. All included. No artificial feature gating based on your plan.
based on your plan.
</p> </p>
</motion.div> </motion.div>
</div> </div>
@@ -374,7 +373,7 @@ export default function LoopsComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature Comparison</h2>
<p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p> <p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p>
</motion.div> </motion.div>
@@ -385,7 +384,12 @@ export default function LoopsComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-loops" /> <FAQSection faqs={faqs} schemaId="faq-schema-loops" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -393,7 +397,7 @@ export default function LoopsComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Switch to open source</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Switch to open source</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Join developers choosing transparency and control over proprietary platforms. Start free, no credit card Join developers choosing transparency and control over proprietary platforms. Start free, no credit card
required. required.
apps/landing/src/pages/vs/mailchimp.tsx
+11 -6
View File
@@ -94,7 +94,7 @@ export default function MailchimpComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Mailchimp</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Mailchimp</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Mailchimp for Mailchimp
@@ -141,7 +141,7 @@ export default function MailchimpComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>The Pricing Model That Makes Sense</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not for what you store</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not for what you store</p>
</motion.div> </motion.div>
@@ -231,7 +231,7 @@ export default function MailchimpComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why Developers Choose Plunk</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Developers Choose Plunk</h2>
</motion.div> </motion.div>
<div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'grid gap-px bg-neutral-200 sm:grid-cols-2 lg:grid-cols-3'}>
@@ -367,7 +367,7 @@ export default function MailchimpComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="Mailchimp" rows={comparisonData} /> <ComparisonTable competitorName="Mailchimp" rows={comparisonData} />
@@ -377,7 +377,12 @@ export default function MailchimpComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-mailchimp" /> <FAQSection faqs={faqs} schemaId="faq-schema-mailchimp" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -385,7 +390,7 @@ export default function MailchimpComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Ready for a better developer experience? Ready for a better developer experience?
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
apps/landing/src/pages/vs/mailerlite.tsx
+12 -7
View File
@@ -30,7 +30,7 @@ const faqs: FAQ[] = [
{ {
question: 'Is Plunk more expensive than MailerLite?', question: 'Is Plunk more expensive than MailerLite?',
answer: answer:
'It depends on your usage pattern. MailerLite charges based on subscriber count (e.g., $10/month for 1,000 subscribers), while Plunk charges per email sent. If you have a large subscriber list but send infrequently, Plunk is typically cheaper. If you email your entire list frequently, costs are similar. The key difference is predictability—Plunk only charges for actual usage.', 'It depends on your usage pattern. MailerLite charges based on subscriber count (e.g., $10/month for 1,000 subscribers), while Plunk charges per email sent. If you have a large subscriber list but send infrequently, Plunk is typically cheaper. If you email your entire list frequently, costs are similar. The key difference is predictability: Plunk only charges for actual usage.',
}, },
{ {
question: 'Can I self-host Plunk unlike MailerLite?', question: 'Can I self-host Plunk unlike MailerLite?',
@@ -94,7 +94,7 @@ export default function MailerliteComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs MailerLite</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs MailerLite</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for MailerLite for MailerLite
@@ -141,7 +141,7 @@ export default function MailerliteComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Open Source Meets Developer Experience Open Source Meets Developer Experience
</h2> </h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not subscribers stored</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for emails sent, not subscribers stored</p>
@@ -233,7 +233,7 @@ export default function MailerliteComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
The Truly Developer-First Alternative The Truly Developer-First Alternative
</h2> </h2>
</motion.div> </motion.div>
@@ -376,7 +376,7 @@ export default function MailerliteComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="MailerLite" rows={comparisonData} /> <ComparisonTable competitorName="MailerLite" rows={comparisonData} />
@@ -386,7 +386,12 @@ export default function MailerliteComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-mailerlite" /> <FAQSection faqs={faqs} schemaId="faq-schema-mailerlite" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -394,7 +399,7 @@ export default function MailerliteComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Experience true developer-first email Experience true developer-first email
</h2> </h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
apps/landing/src/pages/vs/mailgun.tsx
+12 -8
View File
@@ -89,15 +89,14 @@ export default function MailgunComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Mailgun</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Mailgun</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Mailgun for Mailgun
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Mailgun is excellent for transactional emails. Plunk adds marketing campaigns, workflow automation, and is Mailgun only handles transactional email. Plunk adds marketing campaigns, workflow automation, and segmentation on top, all open-source and self-hostable at $0.001 per email.
open-source.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -136,7 +135,7 @@ export default function MailgunComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>The Pricing Model That Makes Sense</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not fixed subscriptions</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not fixed subscriptions</p>
</motion.div> </motion.div>
@@ -226,7 +225,7 @@ export default function MailgunComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="Mailgun" rows={comparisonData} /> <ComparisonTable competitorName="Mailgun" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function MailgunComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>What Plunk Adds</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>What Plunk Adds</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Beyond transactional emails</p> <p className={'mt-4 text-lg text-neutral-600'}>Beyond transactional emails</p>
</motion.div> </motion.div>
@@ -376,7 +375,12 @@ export default function MailgunComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-mailgun" /> <FAQSection faqs={faqs} schemaId="faq-schema-mailgun" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -384,7 +388,7 @@ export default function MailgunComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Try Plunk free</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Try Plunk free</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
1,000 emails/month free. No credit card required. Add marketing and automation when you need it. 1,000 emails/month free. No credit card required. Add marketing and automation when you need it.
</p> </p>
apps/landing/src/pages/vs/postmark.tsx
+12 -7
View File
@@ -90,7 +90,7 @@ export default function PostmarkComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Postmark</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Postmark</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Postmark for Postmark
@@ -137,7 +137,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>One Platform for All Your Emails</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>One Platform for All Your Emails</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Transactional reliability meets marketing power</p> <p className={'mt-4 text-lg text-neutral-600'}>Transactional reliability meets marketing power</p>
</motion.div> </motion.div>
@@ -227,7 +227,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why Choose Plunk Over Postmark</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over Postmark</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Do more with one platform instead of two</p> <p className={'mt-4 text-lg text-neutral-600'}>Do more with one platform instead of two</p>
</motion.div> </motion.div>
@@ -270,7 +270,7 @@ export default function PostmarkComparison() {
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Workflow Automation</h3> <h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Workflow Automation</h3>
<p className={'mt-3 leading-relaxed text-neutral-600'}> <p className={'mt-3 leading-relaxed text-neutral-600'}>
Build automated email sequences with triggers, delays, and conditions. Onboard users, nurture leads, Build automated email sequences with triggers, delays, and conditions. Onboard users, nurture leads,
re-engage customers—all automated. re-engage customers. All automated.
</p> </p>
</motion.div> </motion.div>
@@ -369,7 +369,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature Comparison</h2>
<p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p> <p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p>
</motion.div> </motion.div>
@@ -380,7 +380,12 @@ export default function PostmarkComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-postmark" /> <FAQSection faqs={faqs} schemaId="faq-schema-postmark" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -388,7 +393,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Get more from your email platform</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Get more from your email platform</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Stop juggling multiple tools. Get transactional reliability plus marketing power in one platform. Start Stop juggling multiple tools. Get transactional reliability plus marketing power in one platform. Start
free. free.
apps/landing/src/pages/vs/resend.tsx
+12 -8
View File
@@ -89,15 +89,14 @@ export default function ResendComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Resend</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Resend</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for Resend for Resend
</h1> </h1>
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}> <p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
Resend is excellent for transactional emails. Plunk adds marketing campaigns, workflow automation, and is Resend is transactional-only. Plunk gives you transactional emails, marketing campaigns, and workflow automation in a single open-source platform. No second tool, no second bill.
open-source. Choose based on what you need.
</p> </p>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}> <div className={'mt-12 flex flex-wrap justify-center gap-4'}>
@@ -136,7 +135,7 @@ export default function ResendComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>The Pricing Model That Makes Sense</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not fixed subscriptions</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not fixed subscriptions</p>
</motion.div> </motion.div>
@@ -226,7 +225,7 @@ export default function ResendComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature</h2>
</motion.div> </motion.div>
<ComparisonTable competitorName="Resend" rows={comparisonData} /> <ComparisonTable competitorName="Resend" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function ResendComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>What Plunk Adds</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>What Plunk Adds</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Beyond transactional emails</p> <p className={'mt-4 text-lg text-neutral-600'}>Beyond transactional emails</p>
</motion.div> </motion.div>
@@ -376,7 +375,12 @@ export default function ResendComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-resend" /> <FAQSection faqs={faqs} schemaId="faq-schema-resend" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -384,7 +388,7 @@ export default function ResendComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Try Plunk free</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Try Plunk free</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
1,000 emails/month free. No credit card required. Add marketing and automation when you need it. 1,000 emails/month free. No credit card required. Add marketing and automation when you need it.
</p> </p>
apps/landing/src/pages/vs/sendgrid.tsx
+11 -6
View File
@@ -93,7 +93,7 @@ export default function SendGridComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs SendGrid</span> <span className={'text-sm font-semibold text-neutral-900'}>Plunk vs SendGrid</span>
</div> </div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}> <h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Open-source alternative Open-source alternative
<br /> <br />
for SendGrid for SendGrid
@@ -140,7 +140,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>The Pricing Model That Makes Sense</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>The Pricing Model That Makes Sense</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not for what you might use</p> <p className={'mt-4 text-lg text-neutral-600'}>Pay for what you use, not for what you might use</p>
</motion.div> </motion.div>
@@ -230,7 +230,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-20 text-center'} className={'mb-20 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Why Choose Plunk Over SendGrid</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Why Choose Plunk Over SendGrid</h2>
<p className={'mt-4 text-lg text-neutral-600'}>Built for modern developers, not enterprise sales teams</p> <p className={'mt-4 text-lg text-neutral-600'}>Built for modern developers, not enterprise sales teams</p>
</motion.div> </motion.div>
@@ -372,7 +372,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'} className={'mb-16 text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Feature-by-Feature Comparison</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature-by-Feature Comparison</h2>
<p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p> <p className={'mt-4 text-lg text-neutral-600'}>See exactly what you get with each platform</p>
</motion.div> </motion.div>
@@ -383,7 +383,12 @@ export default function SendGridComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-sendgrid" /> <FAQSection faqs={faqs} schemaId="faq-schema-sendgrid" />
{/* CTA */} {/* CTA */}
<section className={'border-t border-neutral-200 py-32'}> <section className={'relative overflow-hidden border-t border-neutral-200 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%_100%,#000_70%,transparent_110%)]'
}
/>
<motion.div <motion.div
initial={{opacity: 0, y: 20}} initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
@@ -391,7 +396,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'} className={'mx-auto max-w-3xl text-center'}
> >
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>Make the switch today</h2> <h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Make the switch today</h2>
<p className={'mt-6 text-lg text-neutral-600'}> <p className={'mt-6 text-lg text-neutral-600'}>
Join hundreds of developers who've ditched SendGrid's complexity for Plunk's simplicity. Join hundreds of developers who've ditched SendGrid's complexity for Plunk's simplicity.
</p> </p>