vynte-infra/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
+231 -229
View File
@@ -47,260 +47,262 @@ export default function Navbar() {
const [featuresOpen, setFeaturesOpen] = useState(false);
return (
<nav className={'relative top-0 z-40 mx-auto max-w-7xl px-8 xl:px-0'}>
<div className={'z-40 py-6'}>
<div className="flex items-center justify-between">
<div className="flex items-center gap-12">
<div className="flex flex-shrink-0 items-center">
<Link href={'/'} className={'flex items-center gap-x-3'}>
<div className={'relative h-8 w-8'}>
<Image src={logo} alt={'Plunk logo'} fill className={'object-contain'} />
<header className={'sticky top-0 z-40 w-full border-b border-neutral-100 bg-white/95 backdrop-blur-sm'}>
<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 gap-12">
<div className="flex flex-shrink-0 items-center">
<Link href={'/'} className={'flex items-center gap-x-3'}>
<div className={'relative h-8 w-8'}>
<Image src={logo} alt={'Plunk logo'} fill className={'object-contain'} />
</div>
<span className={'sr-only'}>Plunk</span>
</Link>
</div>
<div className="hidden items-center gap-8 md:flex">
<div className={'relative'}>
<button
onMouseEnter={() => setFeaturesOpen(true)}
onMouseLeave={() => setFeaturesOpen(false)}
className={
'flex items-center gap-1.5 text-sm font-medium text-neutral-600 transition hover:text-neutral-900'
}
>
Features
<ChevronDown className={`h-4 w-4 transition-transform ${featuresOpen ? 'rotate-180' : ''}`} />
</button>
<AnimatePresence>
{featuresOpen && (
<motion.div
initial={{opacity: 0, y: -10}}
animate={{opacity: 1, y: 0}}
exit={{opacity: 0, y: -10}}
transition={{duration: 0.2, ease: [0.22, 1, 0.36, 1]}}
onMouseEnter={() => setFeaturesOpen(true)}
onMouseLeave={() => setFeaturesOpen(false)}
className={
'absolute left-0 top-full z-50 mt-2 w-80 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg'
}
>
{featuresMenu.map(feature => (
<Link
key={feature.href}
href={feature.href}
className={'flex items-start gap-3 rounded-lg p-3 transition hover:bg-neutral-50'}
>
<div
className={
'mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-900 text-white'
}
>
{feature.icon}
</div>
<div className={'flex-1'}>
<div className={'text-sm font-semibold text-neutral-900'}>{feature.title}</div>
<div className={'mt-0.5 text-xs text-neutral-600'}>{feature.description}</div>
</div>
</Link>
))}
</motion.div>
)}
</AnimatePresence>
</div>
<span className={'sr-only'}>Plunk</span>
</Link>
</div>
<div className="hidden items-center gap-8 md:flex">
<div className={'relative'}>
<button
onMouseEnter={() => setFeaturesOpen(true)}
onMouseLeave={() => setFeaturesOpen(false)}
<Link
href={'/made-by-humans'}
className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
>
By humans
</Link>
<Link
href={'/pricing'}
className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
>
Pricing
</Link>
<Link
href={'/guides'}
className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
>
Guides
</Link>
<Link
href={WIKI_URI}
target={'_blank'}
rel={'noreferrer'}
className={
'flex items-center gap-1.5 text-sm font-medium text-neutral-600 transition hover:text-neutral-900'
'flex items-center gap-x-1.5 text-sm font-medium text-neutral-600 transition hover:text-neutral-900'
}
>
Features
<ChevronDown className={`h-4 w-4 transition-transform ${featuresOpen ? 'rotate-180' : ''}`} />
</button>
<AnimatePresence>
{featuresOpen && (
<motion.div
initial={{opacity: 0, y: -10}}
animate={{opacity: 1, y: 0}}
exit={{opacity: 0, y: -10}}
transition={{duration: 0.2, ease: [0.22, 1, 0.36, 1]}}
onMouseEnter={() => setFeaturesOpen(true)}
onMouseLeave={() => setFeaturesOpen(false)}
className={
'absolute left-0 top-full z-50 mt-2 w-80 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg'
}
>
{featuresMenu.map(feature => (
<Link
key={feature.href}
href={feature.href}
className={'flex items-start gap-3 rounded-lg p-3 transition hover:bg-neutral-50'}
>
<div
className={
'mt-0.5 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-900 text-white'
}
>
{feature.icon}
</div>
<div className={'flex-1'}>
<div className={'text-sm font-semibold text-neutral-900'}>{feature.title}</div>
<div className={'mt-0.5 text-xs text-neutral-600'}>{feature.description}</div>
</div>
</Link>
))}
</motion.div>
)}
</AnimatePresence>
Docs
<svg className={'h-3.5 w-3.5'} fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V14.75"
/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.25 9.25V4.75H14.75" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 5L11.75 12.25" />
</svg>
</Link>
</div>
</div>
<Link
href={'/made-by-humans'}
<div className="hidden items-center gap-6 md:flex">
<a
href={`${DASHBOARD_URI}/auth/login`}
className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
>
By humans
</Link>
<Link
href={'/pricing'}
className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
>
Pricing
</Link>
<Link
href={'/guides'}
className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
>
Guides
</Link>
<Link
href={WIKI_URI}
target={'_blank'}
rel={'noreferrer'}
Sign in
</a>
<motion.a
whileHover={{scale: 1.02}}
whileTap={{scale: 0.98}}
href={`${DASHBOARD_URI}/auth/signup`}
className={
'flex items-center gap-x-1.5 text-sm font-medium text-neutral-600 transition hover:text-neutral-900'
'rounded-lg bg-neutral-900 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-neutral-800'
}
>
Docs
<svg className={'h-3.5 w-3.5'} fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M9.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V17.25C4.75 18.3546 5.64543 19.25 6.75 19.25H17.25C18.3546 19.25 19.25 18.3546 19.25 17.25V14.75"
/>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19.25 9.25V4.75H14.75" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 5L11.75 12.25" />
Get started
</motion.a>
</div>
<div className="-mr-2 flex items-center md:hidden">
<button
onClick={() => setMobileOpen(!mobileOpen)}
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"
aria-controls="mobile-menu"
aria-expanded={mobileOpen}
>
<span className="sr-only">Open main menu</span>
<svg
className={`${mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</Link>
<svg
className={`${!mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div className="hidden items-center gap-6 md:flex">
<a
href={`${DASHBOARD_URI}/auth/login`}
className={'text-sm font-medium text-neutral-600 transition hover:text-neutral-900'}
>
Sign in
</a>
<motion.a
whileHover={{scale: 1.02}}
whileTap={{scale: 0.98}}
href={`${DASHBOARD_URI}/auth/signup`}
className={
'rounded-lg bg-neutral-900 px-6 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-neutral-800'
}
>
Get started
</motion.a>
</div>
<div className="-mr-2 flex items-center md:hidden">
<button
onClick={() => setMobileOpen(!mobileOpen)}
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"
aria-controls="mobile-menu"
aria-expanded="false"
>
<span className="sr-only">Open main menu</span>
<svg
className={`${mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg
className={`${!mobileOpen ? 'hidden' : 'block'} h-6 w-6`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
aria-hidden="true"
>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<AnimatePresence>
{mobileOpen && (
<motion.div
initial={{height: 0, opacity: 0}}
animate={{height: 'auto', opacity: 1}}
exit={{height: 0, opacity: 0}}
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"
>
<AnimatePresence>
{mobileOpen && (
<motion.div
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
initial={{height: 0, opacity: 0}}
animate={{height: 'auto', opacity: 1}}
exit={{height: 0, opacity: 0}}
transition={{duration: 0.2}}
className="space-y-1 p-4"
className="absolute left-0 top-full z-50 w-full overflow-hidden border-t border-neutral-100 bg-white shadow-lg md:hidden"
>
<div className="mb-2">
<div className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-neutral-500">
Features
</div>
{featuresMenu.map(feature => (
<Link
key={feature.href}
href={feature.href}
onClick={() => setMobileOpen(false)}
className="flex items-start gap-3 rounded-lg px-4 py-3 transition hover:bg-neutral-100"
>
<div
className={
'mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-900 text-white'
}
<motion.div
initial={{opacity: 0}}
animate={{opacity: 1}}
exit={{opacity: 0}}
transition={{duration: 0.2}}
className="space-y-1 p-4"
>
<div className="mb-2">
<div className="px-4 py-2 text-xs font-semibold uppercase tracking-wider text-neutral-500">
Features
</div>
{featuresMenu.map(feature => (
<Link
key={feature.href}
href={feature.href}
onClick={() => setMobileOpen(false)}
className="flex items-start gap-3 rounded-lg px-4 py-3 transition hover:bg-neutral-100"
>
{feature.icon}
</div>
<div className={'flex-1'}>
<div className={'text-sm font-semibold text-neutral-900'}>{feature.title}</div>
<div className={'mt-0.5 text-xs text-neutral-600'}>{feature.description}</div>
</div>
</Link>
))}
</div>
<div
className={
'mt-0.5 flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg bg-neutral-900 text-white'
}
>
{feature.icon}
</div>
<div className={'flex-1'}>
<div className={'text-sm font-semibold text-neutral-900'}>{feature.title}</div>
<div className={'mt-0.5 text-xs text-neutral-600'}>{feature.description}</div>
</div>
</Link>
))}
</div>
<Link
href={'/made-by-humans'}
onClick={() => setMobileOpen(false)}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
By humans
</Link>
<Link
href={'/pricing'}
onClick={() => setMobileOpen(false)}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Pricing
</Link>
<Link
href={'/guides'}
onClick={() => setMobileOpen(false)}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Guides
</Link>
<a
href={WIKI_URI}
target={'_blank'}
rel={'noreferrer'}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Docs
</a>
<div className="border-t border-neutral-200 pt-4">
<a
href={`${DASHBOARD_URI}/auth/login`}
<Link
href={'/made-by-humans'}
onClick={() => setMobileOpen(false)}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Sign in
</a>
<a
href={`${DASHBOARD_URI}/auth/signup`}
className="mt-2 block rounded-lg bg-neutral-900 px-4 py-3 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
By humans
</Link>
<Link
href={'/pricing'}
onClick={() => setMobileOpen(false)}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Get started
Pricing
</Link>
<Link
href={'/guides'}
onClick={() => setMobileOpen(false)}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Guides
</Link>
<a
href={WIKI_URI}
target={'_blank'}
rel={'noreferrer'}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Docs
</a>
</div>
<div className="border-t border-neutral-200 pt-4">
<a
href={`${DASHBOARD_URI}/auth/login`}
className="block rounded-lg px-4 py-3 text-sm font-medium text-neutral-600 transition hover:bg-neutral-100 hover:text-neutral-900"
>
Sign in
</a>
<a
href={`${DASHBOARD_URI}/auth/signup`}
className="mt-2 block rounded-lg bg-neutral-900 px-4 py-3 text-center text-sm font-semibold text-white transition hover:bg-neutral-800"
>
Get started
</a>
</div>
</motion.div>
</motion.div>
</motion.div>
)}
</AnimatePresence>
</nav>
)}
</AnimatePresence>
</div>
</header>
);
}
apps/landing/src/pages/features/email-editor.tsx
+35 -38
View File
@@ -112,10 +112,10 @@ export default function EmailEditorFeature() {
<span className={'font-medium text-neutral-600'}>Email Editor & Templates</span>
</div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
The Email Editor That
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
The Email Editor
<br />
Speaks Both Languages
That Speaks Both Languages
</h1>
<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
@@ -158,7 +158,7 @@ export default function EmailEditorFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Two editors, one experience
</h2>
<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]}}
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
</h2>
<p className={'mt-6 text-lg text-neutral-600'}>Create, preview, and deploy templates in minutes</p>
</motion.div>
<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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
1
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Create your template</h3>
<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.
</p>
</motion.div>
@@ -230,17 +228,14 @@ export default function EmailEditorFeature() {
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
2
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Preview with real data</h3>
<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
surprises.
</p>
@@ -251,17 +246,14 @@ export default function EmailEditorFeature() {
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
3
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Use everywhere</h3>
<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.
</p>
</motion.div>
@@ -278,7 +270,7 @@ export default function EmailEditorFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>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>
</motion.div>
@@ -314,7 +306,12 @@ export default function EmailEditorFeature() {
</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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -322,11 +319,11 @@ export default function EmailEditorFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
Ready to create better emails?
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Build your first template today
</h2>
<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>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a
apps/landing/src/pages/features/inbound-email.tsx
+84 -97
View File
@@ -106,7 +106,7 @@ export default function InboundEmailFeature() {
<span className={'font-medium text-neutral-600'}>Inbound Email</span>
</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
<br />
into Actions
@@ -152,7 +152,7 @@ export default function InboundEmailFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Complete inbound email solution
</h2>
<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]}}
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>
</motion.div>
<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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
1
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Verify your domain</h3>
<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.
</p>
</motion.div>
@@ -224,17 +225,18 @@ export default function InboundEmailFeature() {
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
2
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Add MX record</h3>
<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.
</p>
</motion.div>
@@ -244,17 +246,18 @@ export default function InboundEmailFeature() {
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
3
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Start receiving</h3>
<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
webhooks.
</p>
@@ -272,7 +275,7 @@ export default function InboundEmailFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>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'}>
From support to sales, inbound email unlocks new automation possibilities
</p>
@@ -326,77 +329,60 @@ export default function InboundEmailFeature() {
className={'mx-auto max-w-4xl'}
>
<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?
</h2>
<div className={'mt-8 space-y-4'}>
<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'
}
>
1
<div className={'mt-10'}>
{[
{
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
className={
'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'
}
>
{i + 1}
</div>
</div>
<div className={i < arr.length - 1 ? 'pb-8' : ''}>
<p className={'font-semibold text-neutral-900'}>{step.title}</p>
<p className={'mt-1 text-sm text-neutral-600'}>{step.description}</p>
</div>
</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 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'
}
>
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>
</motion.div>
</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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -404,11 +390,12 @@ export default function InboundEmailFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
Ready to receive emails?
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Your domain can receive emails too
</h2>
<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>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<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>
</div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
Target the Right
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Target the Right Audience,
<br />
Audience Every Time
Every Time
</h1>
<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
@@ -169,10 +169,10 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
Powerful segmentation tools
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
The right message to the right person
</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>
<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]}}
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
</h2>
<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]}}
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>
</motion.div>
@@ -331,7 +331,7 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Use segments everywhere
</h2>
<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>
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -374,11 +379,11 @@ export default function SegmentsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
Start segmenting your audience
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Stop sending the same email to everyone
</h2>
<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>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<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>
</div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
Send via SMTP
<br />
or API
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Send Emails via SMTP or API
</h1>
<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
legacy systems. Both options deliver the same great results.
Use our HTTP API for modern apps or drop in SMTP credentials for any legacy system. Same deliverability, same pricing, zero lock-in.
</p>
<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]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>Enterprise-ready SMTP</h2>
<p className={'mt-4 text-lg text-neutral-600'}>All the features you expect from a modern email platform</p>
<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'}>Full authentication, tracking, and deliverability out of the box</p>
</motion.div>
<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>
</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 */}
<section className={'py-20'}>
<motion.div
@@ -256,7 +198,7 @@ export default function SMTPFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -305,7 +247,7 @@ export default function SMTPFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>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>
</motion.div>
@@ -342,7 +284,12 @@ export default function SMTPFeature() {
</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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -350,7 +297,7 @@ export default function SMTPFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>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'}>
Get your SMTP credentials and start sending emails from any client or application. No credit card
required.
apps/landing/src/pages/features/workflows.tsx
+36 -37
View File
@@ -105,8 +105,10 @@ export default function WorkflowsFeature() {
<span className={'font-medium text-neutral-600'}>Workflow Automation</span>
</div>
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
Automate Your Email Marketing
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl text-balance'}>
Email Automation
<br />
That Actually Works
</h1>
<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
@@ -149,7 +151,7 @@ export default function WorkflowsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Everything you need for email automation
</h2>
<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]}}
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
</h2>
<p className={'mt-6 text-lg text-neutral-600'}>
@@ -197,23 +199,21 @@ export default function WorkflowsFeature() {
</motion.div>
<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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
1
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Choose a trigger</h3>
<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.
</p>
</motion.div>
@@ -223,17 +223,14 @@ export default function WorkflowsFeature() {
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
2
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Build your flow</h3>
<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.
</p>
</motion.div>
@@ -243,17 +240,14 @@ export default function WorkflowsFeature() {
whileInView={{opacity: 1, y: 0}}
viewport={{once: true}}
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'
}
>
3
<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
</div>
</div>
<h3 className={'mt-4 text-lg font-semibold text-neutral-900'}>Activate and monitor</h3>
<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
visibility.
</p>
@@ -271,7 +265,7 @@ export default function WorkflowsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mb-16 text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Built for every use case
</h2>
<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>
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -317,11 +316,11 @@ export default function WorkflowsFeature() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl'}>
Ready to automate your emails?
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900 sm:text-5xl text-balance'}>
Set up your first workflow in minutes
</h2>
<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>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a
apps/landing/src/pages/guides/index.tsx
+6 -1
View File
@@ -224,7 +224,12 @@ export default function GuidesIndex() {
</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
initial={{opacity: 0, y: 20}}
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]}}
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
<br />
Email Platform
</h1>
<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
vendor lock-in.
Transactional emails, marketing campaigns, and workflow automation in one platform. Open-source,
self-hostable, $0.001 per email, no contact limits.
</p>
<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]}}
className={'mx-auto max-w-5xl text-center'}
>
<h2 className={'text-4xl font-bold tracking-tight text-neutral-900'}>
Replace Resend, SendGrid, Mailchimp, and More
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Replace your email stack
</h2>
<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>
<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'}>
<div className={'flex flex-col items-center gap-4'}>
<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]}}
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
</h2>
</motion.div>
@@ -358,7 +376,7 @@ export default function Index() {
</div>
<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'}>
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>
</motion.div>
@@ -378,7 +396,7 @@ export default function Index() {
</div>
<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'}>
Growth penalties. Success shouldn't cost more.
Other platforms charge more as your list grows. Plunk stores unlimited contacts for free.
</p>
</motion.div>
@@ -397,7 +415,9 @@ export default function Index() {
<Lock className="h-5 w-5" />
</div>
<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>
</div>
</section>
@@ -411,7 +431,7 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -448,11 +468,11 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
One contact, unified across everything
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
One contact, complete history
</h2>
<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>
</motion.div>
@@ -608,31 +628,31 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-4xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
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>
<div className={'mt-16 grid gap-px bg-neutral-200 sm:grid-cols-3'}>
<div className={'bg-white p-12'}>
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}>
<PackageOpen className={'h-7 w-7 text-neutral-900'} />
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
<PackageOpen className={'h-7 w-7'} />
</div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Open Source</h3>
<p className={'mt-2 text-sm text-neutral-600'}>AGPL-3.0 licensed</p>
<p className={'mt-4 text-xs text-neutral-500'}>4K+ stars on GitHub</p>
</div>
<div className={'bg-white p-12'}>
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}>
<Shield className={'h-7 w-7 text-neutral-900'} />
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
<Shield className={'h-7 w-7'} />
</div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Privacy First</h3>
<p className={'mt-2 text-sm text-neutral-600'}>EU hosted</p>
<p className={'mt-4 text-xs text-neutral-500'}>GDPR compliant</p>
</div>
<div className={'bg-white p-12'}>
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100'}>
<Globe className={'h-7 w-7 text-neutral-900'} />
<div className={'mx-auto flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
<Globe className={'h-7 w-7'} />
</div>
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>Self-Hostable</h3>
<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]}}
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'}>
Pay for what you use, nothing more. No surprises at scale.
</p>
@@ -743,7 +763,7 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
>
<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 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]}}
className={'flex flex-col bg-white p-10'}
>
<p className={'min-h-[3.5rem] text-sm leading-relaxed text-neutral-600'}>
&ldquo;{t.testimonial}&rdquo;
</p>
<div className={'mb-2 font-serif text-5xl leading-none text-neutral-200'}>&ldquo;</div>
<p className={'text-sm leading-relaxed text-neutral-700'}>{t.testimonial}</p>
<div className={'mt-auto flex items-center gap-4 pt-6'}>
<div className={'relative h-12 w-12 overflow-hidden rounded-full'}>
<Image src={t.image} alt={t.author} placeholder="blur" className={'object-cover'} />
@@ -775,7 +794,12 @@ export default function Index() {
</section>
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -783,9 +807,9 @@ export default function Index() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
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>
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
<motion.a
apps/landing/src/pages/pricing.tsx
+5 -5
View File
@@ -36,10 +36,10 @@ export default function Index() {
<main>
<section className={'py-32'}>
<div className={'mx-auto max-w-4xl text-center'}>
<h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl">
<h1 className="text-5xl font-bold tracking-tight text-neutral-900 sm:text-6xl lg:text-7xl text-balance">
Simple, transparent pricing
</h1>
<p className="mx-auto mt-6 max-w-2xl text-xl text-neutral-600">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>
{/* Pricing Tiers */}
@@ -207,7 +207,7 @@ export default function Index() {
clipRule="evenodd"
/>
</svg>
<span>Billing limits</span>
<span>Monthly spend cap</span>
</li>
<li className="flex items-start gap-3 text-neutral-600">
<svg
@@ -238,7 +238,7 @@ export default function Index() {
{/* Features Grid */}
<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="bg-white p-8">
<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">
<h2 className={'text-2xl font-bold text-neutral-900'}>Self-host</h2>
<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>
</div>
<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>
</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
<br />
email developers
@@ -114,7 +114,7 @@ export default function ToolsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -168,7 +168,7 @@ export default function ToolsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -235,7 +235,7 @@ export default function ToolsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
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.
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>
</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
<br />
HTML Converter
@@ -134,7 +134,7 @@ export default function MarkdownToEmail() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
This tool is great for creating email HTML, but Plunk handles everything: templates, sending, tracking,
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>
</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
<br />
Tool
@@ -159,7 +159,7 @@ export default function VerifyEmailPage() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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'}>
Email verification helps improve deliverability and protect your sender reputation.
</p>
@@ -201,7 +201,7 @@ export default function VerifyEmailPage() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Ready for production-grade email verification?
</h2>
<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?',
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?',
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?",
@@ -40,7 +40,7 @@ const faqs: FAQ[] = [
{
question: 'Is migration from ActiveCampaign to Plunk difficult?',
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?',
@@ -94,7 +94,7 @@ export default function ActiveCampaignComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs ActiveCampaign</span>
</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
<br />
for ActiveCampaign
@@ -141,7 +141,7 @@ export default function ActiveCampaignComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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
</h2>
<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]}}
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>
<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]}}
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>
<ComparisonTable competitorName="ActiveCampaign" rows={comparisonData} />
@@ -384,7 +384,12 @@ export default function ActiveCampaignComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-activecampaign" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -392,7 +397,7 @@ export default function ActiveCampaignComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Get email automation without the bloat
</h2>
<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?',
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?',
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?',
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?',
@@ -94,7 +94,7 @@ export default function BentoComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Bento</span>
</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
<br />
for Bento
@@ -141,7 +141,7 @@ export default function BentoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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
</h2>
<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]}}
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>
<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]}}
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>
<ComparisonTable competitorName="Bento" rows={comparisonData} />
@@ -384,7 +384,12 @@ export default function BentoComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-bento" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -392,7 +397,7 @@ export default function BentoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
Join developers choosing focused email solutions over all-in-one complexity. Start free, no credit card
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>
</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
<br />
for Brevo
@@ -140,7 +140,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -230,7 +230,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -372,7 +372,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -383,7 +383,12 @@ export default function BrevoComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-brevo" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -391,7 +396,7 @@ export default function BrevoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
Join developers choosing focused tools over bloated marketing suites. Start free, no credit card required.
</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?',
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?',
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?',
@@ -57,7 +57,7 @@ export default function ConvertkitComparison() {
<>
<NextSeo
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"
openGraph={{
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>
</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
<br />
for ConvertKit
@@ -141,7 +141,7 @@ export default function ConvertkitComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -231,7 +231,7 @@ export default function ConvertkitComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
<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]}}
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>
<ComparisonTable competitorName="ConvertKit" rows={comparisonData} />
@@ -382,7 +382,12 @@ export default function ConvertkitComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-convertkit" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -390,7 +395,7 @@ export default function ConvertkitComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Ready for a developer-first email platform?
</h2>
<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>
</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
<br />
for Customer.io
</h1>
<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
enterprise overhead.
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.
</p>
<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]}}
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>
</motion.div>
@@ -226,7 +225,7 @@ export default function CustomerioComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
<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]}}
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>
</motion.div>
@@ -378,7 +377,12 @@ export default function CustomerioComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-customerio" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -386,7 +390,7 @@ export default function CustomerioComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
1,000 emails/month free. No credit card required. Developer-friendly from day one.
</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>
</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
<br />
competition
</h1>
<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
transactional emails plus marketing features.
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.
</p>
<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]}}
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
</h2>
<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]}}
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>
</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'
}
>
<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>
<p className={'mt-4 leading-relaxed text-neutral-600'}>
Send transactional emails with the same reliability as dedicated providers, plus marketing campaigns,
automation, and segmentation—all in one platform.
Send transactional emails with the same reliability as dedicated providers, plus marketing campaigns, automation, and segmentation. All in one platform.
</p>
</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'
}
>
<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>
<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
@@ -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'
}
>
<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>
<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
@@ -282,7 +280,12 @@ export default function CompetitorsIndex() {
</section>
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -290,7 +293,7 @@ export default function CompetitorsIndex() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
Join thousands of developers using Plunk for reliable email delivery. Start free, scale as you grow.
</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?',
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?',
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?',
@@ -94,15 +94,14 @@ export default function KlaviyoComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Klaviyo</span>
</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
<br />
for Klaviyo
</h1>
<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
case—including e-commerce—at a fraction of the cost. No hidden fees, no contact-based pricing.
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.
</p>
<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]}}
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
</h2>
<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]}}
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
</h2>
</motion.div>
@@ -376,7 +375,7 @@ export default function KlaviyoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
<ComparisonTable competitorName="Klaviyo" rows={comparisonData} />
@@ -386,7 +385,12 @@ export default function KlaviyoComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-klaviyo" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -394,7 +398,7 @@ export default function KlaviyoComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
E-commerce email at a fraction of the cost
</h2>
<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?',
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?',
@@ -93,7 +93,7 @@ export default function LoopsComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs Loops</span>
</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
<br />
for Loops
@@ -140,7 +140,7 @@ export default function LoopsComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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
</h2>
<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]}}
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>
</motion.div>
@@ -358,8 +358,7 @@ export default function LoopsComparison() {
</div>
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>All Features Included</h3>
<p className={'mt-3 leading-relaxed text-neutral-600'}>
Transactional emails, campaigns, workflows, segmentation—all included. No artificial feature gating
based on your plan.
Transactional emails, campaigns, workflows, segmentation. All included. No artificial feature gating based on your plan.
</p>
</motion.div>
</div>
@@ -374,7 +373,7 @@ export default function LoopsComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -385,7 +384,12 @@ export default function LoopsComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-loops" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -393,7 +397,7 @@ export default function LoopsComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
Join developers choosing transparency and control over proprietary platforms. Start free, no credit card
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>
</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
<br />
for Mailchimp
@@ -141,7 +141,7 @@ export default function MailchimpComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -231,7 +231,7 @@ export default function MailchimpComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
<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]}}
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>
<ComparisonTable competitorName="Mailchimp" rows={comparisonData} />
@@ -377,7 +377,12 @@ export default function MailchimpComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-mailchimp" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -385,7 +390,7 @@ export default function MailchimpComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Ready for a better developer experience?
</h2>
<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?',
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?',
@@ -94,7 +94,7 @@ export default function MailerliteComparison() {
<span className={'text-sm font-semibold text-neutral-900'}>Plunk vs MailerLite</span>
</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
<br />
for MailerLite
@@ -141,7 +141,7 @@ export default function MailerliteComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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
</h2>
<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]}}
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
</h2>
</motion.div>
@@ -376,7 +376,7 @@ export default function MailerliteComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
<ComparisonTable competitorName="MailerLite" rows={comparisonData} />
@@ -386,7 +386,12 @@ export default function MailerliteComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-mailerlite" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -394,7 +399,7 @@ export default function MailerliteComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>
Experience true developer-first email
</h2>
<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>
</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
<br />
for Mailgun
</h1>
<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
open-source.
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.
</p>
<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]}}
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>
</motion.div>
@@ -226,7 +225,7 @@ export default function MailgunComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
<ComparisonTable competitorName="Mailgun" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function MailgunComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -376,7 +375,12 @@ export default function MailgunComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-mailgun" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -384,7 +388,7 @@ export default function MailgunComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
1,000 emails/month free. No credit card required. Add marketing and automation when you need it.
</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>
</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
<br />
for Postmark
@@ -137,7 +137,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -227,7 +227,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -270,7 +270,7 @@ export default function PostmarkComparison() {
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Workflow Automation</h3>
<p className={'mt-3 leading-relaxed text-neutral-600'}>
Build automated email sequences with triggers, delays, and conditions. Onboard users, nurture leads,
re-engage customers—all automated.
re-engage customers. All automated.
</p>
</motion.div>
@@ -369,7 +369,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -380,7 +380,12 @@ export default function PostmarkComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-postmark" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -388,7 +393,7 @@ export default function PostmarkComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
Stop juggling multiple tools. Get transactional reliability plus marketing power in one platform. Start
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>
</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
<br />
for Resend
</h1>
<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
open-source. Choose based on what you need.
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.
</p>
<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]}}
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>
</motion.div>
@@ -226,7 +225,7 @@ export default function ResendComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
<ComparisonTable competitorName="Resend" rows={comparisonData} />
@@ -241,7 +240,7 @@ export default function ResendComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -376,7 +375,12 @@ export default function ResendComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-resend" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -384,7 +388,7 @@ export default function ResendComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
1,000 emails/month free. No credit card required. Add marketing and automation when you need it.
</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>
</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
<br />
for SendGrid
@@ -140,7 +140,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -230,7 +230,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -372,7 +372,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
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>
</motion.div>
@@ -383,7 +383,12 @@ export default function SendGridComparison() {
<FAQSection faqs={faqs} schemaId="faq-schema-sendgrid" />
{/* 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
initial={{opacity: 0, y: 20}}
whileInView={{opacity: 1, y: 0}}
@@ -391,7 +396,7 @@ export default function SendGridComparison() {
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
className={'mx-auto max-w-3xl text-center'}
>
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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'}>
Join hundreds of developers who've ditched SendGrid's complexity for Plunk's simplicity.
</p>