chore: Add guides and comparison pages to landing site
This commit is contained in:
Dries Augustyns
@@ -0,0 +1,428 @@
|
||||
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, BarChart3, DollarSign, Globe, PackageOpen, Users, Zap} from 'lucide-react';
|
||||
import type {ComparisonRow} from '../../components/ComparisonTable';
|
||||
import type {FAQ} from '../../components/FAQSection';
|
||||
|
||||
const comparisonData: ComparisonRow[] = [
|
||||
{feature: 'Pricing Model', plunk: 'Pay-as-you-go', competitor: 'Monthly subscription tiers'},
|
||||
{feature: 'Open Source', plunk: true, competitor: false},
|
||||
{feature: 'Self-Hostable', plunk: true, competitor: false},
|
||||
{feature: 'Contact Limits', plunk: 'Unlimited', competitor: 'Tier-based limits'},
|
||||
{feature: 'Transactional Emails', plunk: true, competitor: true},
|
||||
{feature: 'Marketing Campaigns', plunk: true, competitor: true},
|
||||
{feature: 'Workflow Automation', plunk: true, competitor: true},
|
||||
{feature: 'Dynamic Segmentation', plunk: true, competitor: true},
|
||||
{feature: 'API Access', plunk: true, competitor: true},
|
||||
];
|
||||
|
||||
const faqs: FAQ[] = [
|
||||
{
|
||||
question: 'What is the main difference between Plunk and Loops?',
|
||||
answer:
|
||||
'Plunk is open-source (AGPL-3.0) and self-hostable, while Loops is a proprietary SaaS platform. Plunk uses pay-as-you-go pricing with no contact limits, whereas Loops uses subscription tiers with contact-based limits. Both offer similar features, but Plunk gives you full transparency and control.',
|
||||
},
|
||||
{
|
||||
question: 'Is Plunk cheaper than Loops?',
|
||||
answer:
|
||||
"It depends on your usage. Plunk's pay-as-you-go model ($0.001 per email) means you only pay for what you send. Loops charges monthly subscriptions based on contact count. For businesses with variable email volume or growing contact lists, Plunk is often more cost-effective.",
|
||||
},
|
||||
{
|
||||
question: 'Can I self-host Plunk unlike Loops?',
|
||||
answer:
|
||||
'Yes. Plunk is open-source and can be self-hosted using Docker. This gives you full control over your data, infrastructure, and costs. Loops is cloud-only with no self-hosting option.',
|
||||
},
|
||||
{
|
||||
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.',
|
||||
},
|
||||
{
|
||||
question: 'How easy is it to migrate from Loops to Plunk?',
|
||||
answer:
|
||||
"Migration is straightforward. Export your contacts from Loops, import them to Plunk via CSV, and update your application to use Plunk's API. Most migrations can be completed in a few hours.",
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Plunk vs Loops comparison page
|
||||
*/
|
||||
export default function LoopsComparison() {
|
||||
return (
|
||||
<>
|
||||
<NextSeo
|
||||
title="Loops Alternative: Open Source & Self-Hostable | Plunk"
|
||||
description="Plunk offers an open-source alternative to Loops with pay-as-you-go pricing, self-hosting, and no contact limits. Same modern features, full transparency."
|
||||
canonical="https://www.useplunk.com/vs/loops"
|
||||
openGraph={{
|
||||
title: 'Loops Alternative: Open Source & Self-Hostable | Plunk',
|
||||
description:
|
||||
'Plunk offers an open-source alternative to Loops with pay-as-you-go pricing, self-hosting, and no contact limits.',
|
||||
url: 'https://www.useplunk.com/vs/loops',
|
||||
images: [{url: 'https://www.useplunk.com/assets/card.png', alt: 'Plunk vs Loops'}],
|
||||
}}
|
||||
/>
|
||||
|
||||
<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 Loops</span>
|
||||
</div>
|
||||
|
||||
<h1 className={'text-6xl font-bold tracking-tight text-neutral-900 sm:text-7xl lg:text-8xl'}>
|
||||
Open-source alternative
|
||||
<br />
|
||||
for Loops
|
||||
</h1>
|
||||
|
||||
<p className={'mx-auto mt-8 max-w-2xl text-xl text-neutral-600'}>
|
||||
Same modern features, but open-source and self-hostable. No contact limits, no proprietary lock-in, no
|
||||
hidden costs. Built for transparency.
|
||||
</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'}>
|
||||
Get started 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'}>
|
||||
Transparent Pricing vs Vendor Lock-In
|
||||
</h2>
|
||||
<p className={'mt-4 text-lg text-neutral-600'}>Pay per email, not per contact</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 with unlimited contacts. No monthly commitments or contact-based limits.
|
||||
</p>
|
||||
<div className={'mt-6 text-4xl font-bold text-neutral-900'}>$0.001/email</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>Unlimited contacts at no extra cost</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>All features included on all plans</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>Open-source and self-hostable</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'}>Loops</span>
|
||||
</div>
|
||||
<h3 className={'mt-6 text-2xl font-bold text-neutral-900'}>Subscription tiers by contacts</h3>
|
||||
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
||||
Monthly subscription based on contact count with tier-based limits and feature restrictions.
|
||||
</p>
|
||||
<div className={'mt-6 text-4xl font-bold text-neutral-900'}>Tiered pricing</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>Contact-based pricing limits</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>Feature limits on lower tiers</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>Proprietary, cloud-only platform</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'}>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>
|
||||
|
||||
<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'
|
||||
}
|
||||
>
|
||||
<PackageOpen className="h-5 w-5" />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Open Source & Transparent</h3>
|
||||
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
||||
AGPL-3.0 licensed. Inspect the code, contribute features, understand exactly how your emails are sent.
|
||||
No black boxes.
|
||||
</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'
|
||||
}
|
||||
>
|
||||
<Globe className="h-5 w-5" />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Self-Hostable</h3>
|
||||
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
||||
Run on your infrastructure with Docker. Full data control, compliance-ready, cost-optimized for scale.
|
||||
Loops is cloud-only.
|
||||
</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'
|
||||
}
|
||||
>
|
||||
<Users className="h-5 w-5" />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Unlimited Contacts</h3>
|
||||
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
||||
No contact-based limits. Grow your audience without worrying about tier upgrades or surprise charges.
|
||||
Pay for emails, not contacts.
|
||||
</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'
|
||||
}
|
||||
>
|
||||
<DollarSign className="h-5 w-5" />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Predictable Pricing</h3>
|
||||
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
||||
Pay-as-you-go per email. No surprise costs as you grow. No forced tier upgrades. No sales calls. Just
|
||||
simple, transparent pricing.
|
||||
</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'
|
||||
}
|
||||
>
|
||||
<Zap className="h-5 w-5" />
|
||||
</div>
|
||||
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Full API Access</h3>
|
||||
<p className={'mt-3 leading-relaxed text-neutral-600'}>
|
||||
Complete API access on all plans. No feature restrictions, no "contact sales" for API access. Everything
|
||||
documented and ready to use.
|
||||
</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'
|
||||
}
|
||||
>
|
||||
<BarChart3 className="h-5 w-5" />
|
||||
</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.
|
||||
</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'}>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>
|
||||
|
||||
<ComparisonTable competitorName="Loops" rows={comparisonData} />
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<FAQSection faqs={faqs} schemaId="faq-schema-loops" />
|
||||
|
||||
{/* CTA */}
|
||||
<section className={'border-t border-neutral-200 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={'mx-auto max-w-3xl text-center'}
|
||||
>
|
||||
<h2 className={'text-5xl font-bold tracking-tight text-neutral-900'}>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.
|
||||
</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={
|
||||
'rounded-lg bg-neutral-900 px-8 py-4 text-base font-semibold text-white transition hover:bg-neutral-800'
|
||||
}
|
||||
>
|
||||
Start free trial
|
||||
</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 details
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user