416 lines
18 KiB
TypeScript
416 lines
18 KiB
TypeScript
import {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 {ArrowRight, Filter, GitBranch, Mail, Target, TrendingUp, Users} from 'lucide-react';
|
|
import Head from 'next/head';
|
|
|
|
const features = [
|
|
{
|
|
icon: <Filter className="h-5 w-5" />,
|
|
title: 'Dynamic Filtering',
|
|
description:
|
|
'Create segments based on contact data, custom fields, email activity, and events with powerful AND/OR logic.',
|
|
},
|
|
{
|
|
icon: <TrendingUp className="h-5 w-5" />,
|
|
title: 'Real-Time Updates',
|
|
description: 'Dynamic segments automatically update as contact data changes, always keeping your audience current.',
|
|
},
|
|
{
|
|
icon: <GitBranch className="h-5 w-5" />,
|
|
title: 'Workflow Integration',
|
|
description:
|
|
'Trigger workflows when contacts enter or exit segments, or use segment conditions in workflow branching.',
|
|
},
|
|
{
|
|
icon: <Target className="h-5 w-5" />,
|
|
title: 'Campaign Targeting',
|
|
description:
|
|
'Send targeted campaigns to specific segments instead of your entire contact list. Less noise, more signal.',
|
|
},
|
|
{
|
|
icon: <Users className="h-5 w-5" />,
|
|
title: 'Static Segments',
|
|
description: 'Manually curate contact lists for special groups like beta testers or VIP customers.',
|
|
},
|
|
{
|
|
icon: <Mail className="h-5 w-5" />,
|
|
title: 'Behavior-Based',
|
|
description: 'Segment by email engagement - who opened, clicked, bounced, or never received your emails.',
|
|
},
|
|
];
|
|
|
|
const filterExamples = [
|
|
{
|
|
title: 'Active Users',
|
|
description: 'Target users who signed up recently and are actively engaging',
|
|
filters: ['Created within 30 days', 'Opened email within 7 days', 'Custom field: plan equals "pro"'],
|
|
},
|
|
{
|
|
title: 'Re-engagement Needed',
|
|
description: 'Find inactive users who need a nudge to come back. Sometimes they just need a reminder.',
|
|
filters: ['Last activity older than 60 days', 'Email sent but not opened', 'Subscribed equals true'],
|
|
},
|
|
{
|
|
title: 'High-Value Customers',
|
|
description: 'Identify your most valuable customers for special treatment',
|
|
filters: ['Custom field: totalSpent greater than 1000', 'Triggered event: purchase', 'Plan equals "enterprise"'],
|
|
},
|
|
];
|
|
|
|
const useCases = [
|
|
{
|
|
icon: <Mail className="h-6 w-6" />,
|
|
title: 'Targeted Campaigns',
|
|
description:
|
|
'Send newsletters and announcements to specific audience segments instead of blasting everyone. Increase open rates by sending relevant content to the right people. Your unsubscribe rate will thank you.',
|
|
},
|
|
{
|
|
icon: <GitBranch className="h-6 w-6" />,
|
|
title: 'Behavior-Based Workflows',
|
|
description:
|
|
'Trigger workflows when contacts enter segments like "VIP Customers" or "Churning Users". Create personalized automations based on segment membership.',
|
|
},
|
|
{
|
|
icon: <Target className="h-6 w-6" />,
|
|
title: 'A/B Testing',
|
|
description:
|
|
'Create segments for test groups and control groups. Send different campaigns to each segment and measure results.',
|
|
},
|
|
];
|
|
|
|
/**
|
|
*
|
|
*/
|
|
export default function SegmentsFeature() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Audience Segmentation - Target the Right Contacts | Plunk</title>
|
|
<meta
|
|
name="description"
|
|
content="Create dynamic and static segments to organize your contacts. Filter by behavior, attributes, and engagement. Target campaigns and trigger workflows based on segment membership."
|
|
/>
|
|
<meta property="og:title" content="Audience Segmentation - Smart Contact Organization | Plunk" />
|
|
<meta
|
|
property="og:description"
|
|
content="Create dynamic and static segments to organize your contacts. Filter by behavior, attributes, and engagement. Target campaigns and trigger workflows based on segment membership."
|
|
/>
|
|
</Head>
|
|
|
|
<Navbar />
|
|
|
|
<main className={'mx-auto max-w-7xl px-8 sm:px-0'}>
|
|
{/* Hero Section */}
|
|
<section className={'relative py-20 sm:py-32'}>
|
|
{/* Subtle background grid */}
|
|
<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 bg-neutral-100 px-4 py-2 text-sm'}>
|
|
<Users className="h-4 w-4 text-neutral-600" />
|
|
<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 text-balance'}>
|
|
Target the Right Audience,
|
|
<br />
|
|
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
|
|
campaigns and trigger personalized workflows.
|
|
</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'}>
|
|
Start segmenting
|
|
<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>
|
|
|
|
{/* Features Grid */}
|
|
<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={'mb-16 text-center'}
|
|
>
|
|
<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'}>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'}>
|
|
{features.map((feature, index) => (
|
|
<motion.div
|
|
key={feature.title}
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'group bg-white p-10 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'
|
|
}
|
|
>
|
|
{feature.icon}
|
|
</div>
|
|
<h3 className={'mt-6 text-lg font-semibold text-neutral-900'}>{feature.title}</h3>
|
|
<p className={'mt-2 text-sm leading-relaxed text-neutral-600'}>{feature.description}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Filter Examples */}
|
|
<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={'mb-16 text-center'}
|
|
>
|
|
<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>
|
|
</motion.div>
|
|
|
|
<div className={'mx-auto max-w-5xl space-y-6'}>
|
|
{filterExamples.map((example, index) => (
|
|
<motion.div
|
|
key={example.title}
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'rounded-xl border border-neutral-200 bg-white p-8'}
|
|
>
|
|
<div className={'flex items-start justify-between gap-6'}>
|
|
<div className={'flex-1'}>
|
|
<h3 className={'text-xl font-semibold text-neutral-900'}>{example.title}</h3>
|
|
<p className={'mt-2 text-neutral-600'}>{example.description}</p>
|
|
</div>
|
|
</div>
|
|
<div className={'mt-6 space-y-2'}>
|
|
{example.filters.map((filter, filterIndex) => (
|
|
<div key={filterIndex} className={'flex items-center gap-3 rounded-lg bg-neutral-50 px-4 py-3'}>
|
|
<Filter className="h-4 w-4 flex-shrink-0 text-neutral-400" />
|
|
<span className={'font-mono text-sm text-neutral-700'}>{filter}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Types of Segments */}
|
|
<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 text-center'}
|
|
>
|
|
<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>
|
|
|
|
<div className={'mx-auto mt-16 max-w-5xl'}>
|
|
<div className={'grid gap-8 lg:grid-cols-2'}>
|
|
<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-xl bg-neutral-900 text-white'}>
|
|
<TrendingUp className="h-6 w-6" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Dynamic Segments</h3>
|
|
<p className={'mt-2 text-neutral-600'}>
|
|
Automatically update based on filter conditions. As contact data changes, segment membership updates
|
|
in real-time.
|
|
</p>
|
|
<div className={'mt-6 space-y-2'}>
|
|
<div className={'flex items-center gap-2 text-sm text-neutral-600'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-900'} />
|
|
<span>Filter-based membership</span>
|
|
</div>
|
|
<div className={'flex items-center gap-2 text-sm text-neutral-600'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-900'} />
|
|
<span>Automatic updates</span>
|
|
</div>
|
|
<div className={'flex items-center gap-2 text-sm text-neutral-600'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-900'} />
|
|
<span>Optional entry/exit tracking</span>
|
|
</div>
|
|
</div>
|
|
</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={'rounded-xl border border-neutral-200 bg-white p-8'}
|
|
>
|
|
<div className={'flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white'}>
|
|
<Users className="h-6 w-6" />
|
|
</div>
|
|
<h3 className={'mt-6 text-xl font-semibold text-neutral-900'}>Static Segments</h3>
|
|
<p className={'mt-2 text-neutral-600'}>
|
|
Manually curate your segment by adding specific contacts. Membership stays fixed until you change it.
|
|
</p>
|
|
<div className={'mt-6 space-y-2'}>
|
|
<div className={'flex items-center gap-2 text-sm text-neutral-600'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-900'} />
|
|
<span>Manual contact selection</span>
|
|
</div>
|
|
<div className={'flex items-center gap-2 text-sm text-neutral-600'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-900'} />
|
|
<span>Fixed membership</span>
|
|
</div>
|
|
<div className={'flex items-center gap-2 text-sm text-neutral-600'}>
|
|
<div className={'h-1.5 w-1.5 rounded-full bg-neutral-900'} />
|
|
<span>Perfect for VIP lists</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Use Cases */}
|
|
<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={'mb-16 text-center'}
|
|
>
|
|
<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>
|
|
</motion.div>
|
|
|
|
<div className={'mx-auto max-w-5xl space-y-8'}>
|
|
{useCases.map((useCase, index) => (
|
|
<motion.div
|
|
key={useCase.title}
|
|
initial={{opacity: 0, y: 20}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true}}
|
|
transition={{duration: 0.5, delay: index * 0.1, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'rounded-xl border border-neutral-200 bg-white p-8'}
|
|
>
|
|
<div className={'flex items-start gap-6'}>
|
|
<div
|
|
className={
|
|
'flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-900 text-white'
|
|
}
|
|
>
|
|
{useCase.icon}
|
|
</div>
|
|
<div className={'flex-1'}>
|
|
<h3 className={'text-xl font-semibold text-neutral-900'}>{useCase.title}</h3>
|
|
<p className={'mt-2 text-neutral-600'}>{useCase.description}</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<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}}
|
|
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-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'}>
|
|
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
|
|
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'
|
|
}
|
|
>
|
|
Get started for free
|
|
</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 />
|
|
</>
|
|
);
|
|
}
|