Mikkel Svartveit
431 lines
21 KiB
TypeScript
431 lines
21 KiB
TypeScript
import {ComparisonTable, FAQSection, Footer, Navbar} from '../../components';
|
|
import {motion} from 'framer-motion';
|
|
import {DASHBOARD_URI, WIKI_URI} from '../../lib/constants';
|
|
import React from 'react';
|
|
import Link from 'next/link';
|
|
import {NextSeo} from 'next-seo';
|
|
import {ArrowRight, Code2, DollarSign, Mail, PackageOpen, Zap} from 'lucide-react';
|
|
import type {ComparisonRow} from '../../components/ComparisonTable';
|
|
import type {FAQ} from '../../components/FAQSection';
|
|
|
|
const comparisonData: ComparisonRow[] = [
|
|
{feature: 'Pricing Model', plunk: 'Pay per email', competitor: 'Pay per contact'},
|
|
{feature: 'Target Audience', plunk: 'Developers', competitor: 'Marketers'},
|
|
{feature: 'API Quality', plunk: 'Modern REST', competitor: 'Legacy/complex'},
|
|
{feature: 'Open Source', plunk: true, competitor: false},
|
|
{feature: 'Self-Hostable', plunk: true, competitor: false},
|
|
{feature: 'Transactional Emails', plunk: 'Built-in', competitor: 'Mandrill (separate)'},
|
|
{feature: 'Marketing Campaigns', plunk: true, competitor: true},
|
|
{feature: 'Event-Based Triggers', plunk: true, competitor: 'Limited'},
|
|
{feature: 'Developer Experience', plunk: 'Excellent', competitor: 'Marketing-first'},
|
|
{feature: 'Setup Time', plunk: '5 minutes', competitor: '1-2 hours'},
|
|
];
|
|
|
|
const faqs: FAQ[] = [
|
|
{
|
|
question: 'When should I choose Mailchimp over Plunk?',
|
|
answer:
|
|
"Choose Mailchimp if you're a marketer who needs a drag-and-drop email builder and prefers a marketing-first interface. Mailchimp excels at visual design and non-technical users. Choose Plunk if you're a developer who values API-first design, wants transactional + marketing in one platform, and prefers code over drag-and-drop.",
|
|
},
|
|
{
|
|
question: 'What is the difference between Plunk and Mailchimp pricing?',
|
|
answer:
|
|
'Mailchimp charges per contact stored, regardless of how many emails you send. Plunk uses a pay-as-you-go model where you only pay for emails sent. This means with Mailchimp, your cost increases as your contact list grows, while with Plunk, you only pay when you actually send emails.',
|
|
},
|
|
{
|
|
question: 'Can Plunk handle both transactional and marketing emails?',
|
|
answer:
|
|
"Yes, that's one of Plunk's key advantages. Transactional emails (receipts, password resets) and marketing emails (newsletters, campaigns) are built into one platform. With Mailchimp, you need their separate Mandrill service for transactional emails, which adds complexity.",
|
|
},
|
|
{
|
|
question: "Is Plunk's API easier to use than Mailchimp's?",
|
|
answer:
|
|
'Yes, significantly. Plunk has a modern RESTful API designed for developers. Mailchimp\'s API is complex and marketing-focused, requiring you to understand concepts like "audiences," "campaigns," and "merge fields." Most developers find Plunk\'s API 10x easier to integrate.',
|
|
},
|
|
{
|
|
question: 'Does Plunk have a visual email builder like Mailchimp?',
|
|
answer:
|
|
'Plunk has a minimal email editor, most of our users manage their own templates using their own HTML. This gives developers full control and enables version control, testing, and reusability. If you need a drag-and-drop builder, Mailchimp is better. If you prefer code and want beautiful, responsive emails, Plunk is the better choice.',
|
|
},
|
|
];
|
|
|
|
/**
|
|
* Plunk vs Mailchimp comparison page
|
|
*/
|
|
export default function MailchimpComparison() {
|
|
return (
|
|
<>
|
|
<NextSeo
|
|
title="Mailchimp Alternative for Developers | Plunk"
|
|
description="Plunk is Mailchimp for developers: code-first email platform with modern API. Pay per email, not per contact. Transactional + marketing in one platform."
|
|
canonical="https://www.useplunk.com/vs/mailchimp"
|
|
openGraph={{
|
|
title: 'Mailchimp Alternative for Developers | Plunk',
|
|
description:
|
|
'Plunk is Mailchimp for developers: code-first email platform with modern API. Pay per email, not per contact.',
|
|
url: 'https://www.useplunk.com/vs/mailchimp',
|
|
images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Mailchimp'}],
|
|
}}
|
|
/>
|
|
|
|
<Navbar />
|
|
|
|
<main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
|
|
{/* Hero Section */}
|
|
<section className={'relative py-32 sm:py-48'}>
|
|
<div
|
|
className={
|
|
'absolute inset-0 -z-10 h-full w-full bg-white bg-[linear-gradient(to_right,#e5e7eb_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]'
|
|
}
|
|
/>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
animate={{opacity: 1, y: 0}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'mx-auto max-w-4xl text-center'}
|
|
>
|
|
<div
|
|
className={
|
|
'mb-6 inline-flex items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 py-2'
|
|
}
|
|
>
|
|
<span className={'text-sm text-neutral-600'}>Comparing</span>
|
|
<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 text-balance'}>
|
|
Open-source alternative
|
|
<br />
|
|
for Mailchimp
|
|
</h1>
|
|
|
|
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
|
|
Mailchimp is for marketers. Plunk is for developers who need full control, modern API, and transparent
|
|
pay-as-you-go pricing. Same features, better DX.
|
|
</p>
|
|
|
|
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
|
|
<motion.a
|
|
whileHover={{scale: 1.02}}
|
|
whileTap={{scale: 0.98}}
|
|
href={`${DASHBOARD_URI}/auth/signup`}
|
|
className={
|
|
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white shadow-lg shadow-neutral-900/10 transition hover:bg-neutral-800'
|
|
}
|
|
>
|
|
<span className={'flex items-center gap-2'}>
|
|
Try Plunk free
|
|
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
|
</span>
|
|
</motion.a>
|
|
<Link
|
|
href={WIKI_URI}
|
|
target={'_blank'}
|
|
className={
|
|
'rounded-lg border border-neutral-300 bg-white px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
|
|
}
|
|
>
|
|
View documentation
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* Pricing Model Comparison */}
|
|
<section className={'py-32'}>
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'mb-16 text-center'}
|
|
>
|
|
<h2 className={'text-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>
|
|
|
|
<div className={'grid gap-8 lg:grid-cols-2'}>
|
|
<motion.div
|
|
initial={{opacity: 0, x: -20}}
|
|
whileInView={{opacity: 1, x: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'rounded-2xl border-2 border-neutral-900 bg-white p-10'}
|
|
>
|
|
<div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-900 px-4 py-1.5'}>
|
|
<span className={'text-sm font-semibold text-white'}>Plunk</span>
|
|
</div>
|
|
<h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Pay per email sent</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
Pay-as-you-go pricing. Only pay for emails you actually send, not for contacts stored.
|
|
</p>
|
|
<div className={'mt-6 text-4xl font-bold text-neutral-900'}>Pay-as-you-go</div>
|
|
<div className={'mt-8 space-y-3'}>
|
|
<div className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
|
<div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-white'} />
|
|
</div>
|
|
<span>Only pay for emails you actually send</span>
|
|
</div>
|
|
<div className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
|
<div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-white'} />
|
|
</div>
|
|
<span>Unlimited contacts in your database</span>
|
|
</div>
|
|
<div className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
|
<div className={'h-5 w-5 rounded-full bg-neutral-900 flex items-center justify-center'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-white'} />
|
|
</div>
|
|
<span>No penalties for growing your list</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, x: 20}}
|
|
whileInView={{opacity: 1, x: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'rounded-2xl border border-neutral-200 bg-neutral-50 p-10'}
|
|
>
|
|
<div className={'mb-4 inline-flex items-center gap-2 rounded-full bg-neutral-200 px-4 py-1.5'}>
|
|
<span className={'text-sm font-semibold text-neutral-900'}>Mailchimp</span>
|
|
</div>
|
|
<h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Pay per contact stored</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
Charged for every contact in your list, whether you email them or not.
|
|
</p>
|
|
<div className={'mt-6 text-4xl font-bold text-neutral-900'}>Fixed subscription</div>
|
|
<div className={'mt-8 space-y-3'}>
|
|
<div className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
|
<div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
|
|
</div>
|
|
<span>Pay for contacts even if you don't email them</span>
|
|
</div>
|
|
<div className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
|
<div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
|
|
</div>
|
|
<span>Growing your list = automatic price increase</span>
|
|
</div>
|
|
<div className={'flex items-center gap-3 text-sm text-neutral-600'}>
|
|
<div className={'h-5 w-5 rounded-full bg-neutral-300 flex items-center justify-center'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-600'} />
|
|
</div>
|
|
<span>Duplicate contacts count multiple times</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Key Advantages */}
|
|
<section className={'py-32'}>
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'mb-20 text-center'}
|
|
>
|
|
<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'}>
|
|
<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={'group bg-white p-12 transition hover:bg-neutral-50'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
|
|
}
|
|
>
|
|
<DollarSign className="h-5 w-5" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Pay-as-you-go Pricing</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
Only pay for emails you send, not for contacts you store. No monthly minimums or fixed subscription
|
|
costs.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.2, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'group bg-white p-12 transition hover:bg-neutral-50'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
|
|
}
|
|
>
|
|
<Code2 className="h-5 w-5" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>API-First</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
Modern REST API designed for developers. 10x easier to integrate than Mailchimp's marketing-focused API.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'group bg-white p-12 transition hover:bg-neutral-50'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
|
|
}
|
|
>
|
|
<Zap className="h-5 w-5" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>5-Minute Setup</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
Start sending in minutes. No audiences to configure, no lists to manage. Just send emails.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.4, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'group bg-white p-12 transition hover:bg-neutral-50'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
|
|
}
|
|
>
|
|
<PackageOpen className="h-5 w-5" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Open Source</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
AGPL-3.0 licensed. Inspect the code, self-host, no vendor lock-in. Mailchimp is proprietary.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.5, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'group bg-white p-12 transition hover:bg-neutral-50'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
|
|
}
|
|
>
|
|
<Mail className="h-5 w-5" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>All-in-One</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
Transactional and marketing emails in one platform. No need for separate Mandrill account.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: 0.6, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'group bg-white p-12 transition hover:bg-neutral-50'}
|
|
>
|
|
<div
|
|
className={
|
|
'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white transition group-hover:scale-110'
|
|
}
|
|
>
|
|
<ArrowRight className="h-5 w-5" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Event-Driven</h3>
|
|
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
|
Trigger workflows based on user actions. Advanced automation that Mailchimp can't match.
|
|
</p>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Feature Comparison */}
|
|
<section className={'py-32'}>
|
|
<motion.div
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'mb-16 text-center'}
|
|
>
|
|
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900 text-balance'}>Feature Comparison</h2>
|
|
</motion.div>
|
|
|
|
<ComparisonTable competitorName="Mailchimp" rows={comparisonData} />
|
|
</section>
|
|
|
|
{/* FAQ */}
|
|
<FAQSection faqs={faqs} schemaId="faq-schema-mailchimp" />
|
|
|
|
{/* CTA */}
|
|
<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}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'mx-auto max-w-3xl text-center'}
|
|
>
|
|
<h2 className={'text-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'}>
|
|
Join developers who've switched from Mailchimp to Plunk for better DX and transparent pay-as-you-go
|
|
pricing.
|
|
</p>
|
|
<div className={'mt-12 flex flex-wrap justify-center gap-4'}>
|
|
<motion.a
|
|
whileHover={{scale: 1.02}}
|
|
whileTap={{scale: 0.98}}
|
|
href={`${DASHBOARD_URI}/auth/signup`}
|
|
className={
|
|
'group rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
|
}
|
|
>
|
|
<span className={'flex items-center gap-2'}>
|
|
Get started free
|
|
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
|
|
</span>
|
|
</motion.a>
|
|
<Link
|
|
href="/pricing"
|
|
className={
|
|
'rounded-lg border border-neutral-300 px-8 py-4 text-base font-semibold text-neutral-900 transition hover:border-neutral-400'
|
|
}
|
|
>
|
|
View pricing
|
|
</Link>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
</main>
|
|
|
|
<Footer />
|
|
</>
|
|
);
|
|
}
|