chore: Add feature pages
This commit is contained in:
Dries Augustyns
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user