infrastructure/plunk
2
0
Fork 0
Code Pull Requests Activity

seo: Enhance copy of landing page

Browse Source
This commit is contained in:
Dries Augustyns
2026-05-07 09:21:30 +02:00
parent 2529c9b428
commit 15bdcf6e49
1 changed files with 73 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/landing/src/pages/index.tsx
+69 -69
View File
@@ -468,7 +468,7 @@ export default function Index() {
<Link <Link
href={`/vs/${c.slug}`} href={`/vs/${c.slug}`}
className={ className={
'group flex items-center justify-between gap-6 py-6 transition-colors hover:bg-neutral-50 sm:py-8' 'group flex items-center justify-between gap-6 py-5 transition-colors hover:bg-neutral-50 sm:py-7'
} }
> >
<div className={'flex items-center gap-6 sm:gap-10'}> <div className={'flex items-center gap-6 sm:gap-10'}>
@@ -481,28 +481,25 @@ export default function Index() {
<span <span
style={{fontFamily: 'var(--font-display)'}} style={{fontFamily: 'var(--font-display)'}}
className={ className={
'text-4xl font-bold tracking-[-0.03em] text-neutral-900 transition-transform duration-300 group-hover:-translate-x-1 sm:text-6xl lg:text-7xl' 'text-3xl font-semibold tracking-[-0.025em] text-neutral-900 transition-transform duration-300 group-hover:-translate-x-1 sm:text-4xl lg:text-5xl'
} }
> >
{c.name} {c.name}
</span> </span>
</div> </div>
<div className={'flex items-center gap-4'}> <div className={'flex items-center gap-5'}>
<span <span
style={{fontFamily: 'var(--font-mono)'}} style={{fontFamily: 'var(--font-mono)'}}
className={ className={
'hidden text-xs uppercase tracking-[0.18em] text-neutral-500 transition group-hover:text-neutral-900 sm:inline' 'hidden text-[11px] uppercase tracking-[0.18em] text-neutral-400 transition group-hover:text-neutral-900 sm:inline'
} }
> >
vs Plunk vs Plunk
</span> </span>
<span <ArrowUpRight
className={ className={'h-5 w-5 text-neutral-400 transition group-hover:translate-x-0.5 group-hover:-translate-y-0.5 group-hover:text-neutral-900 sm:h-6 sm:w-6'}
'flex h-11 w-11 items-center justify-center rounded-full border border-neutral-300 text-neutral-900 transition group-hover:border-neutral-900 group-hover:bg-neutral-900 group-hover:text-white sm:h-14 sm:w-14' strokeWidth={1.75}
} />
>
<ArrowUpRight className={'h-5 w-5'} strokeWidth={2} />
</span>
</div> </div>
</Link> </Link>
</motion.li> </motion.li>
@@ -516,8 +513,8 @@ export default function Index() {
<SectionHeader <SectionHeader
number={'03'} number={'03'}
label={'The Problem'} label={'The Problem'}
title={"Most email tools weren't built to scale."} title={'Simple to start. Serious at scale.'}
subtitle={'Three things Plunk gets right, out of the box.'} subtitle={'Easy enough for a side project. Ready for the business it becomes.'}
/> />
<div className={'mt-20 grid gap-10 sm:grid-cols-3 sm:gap-20 lg:gap-28'}> <div className={'mt-20 grid gap-10 sm:grid-cols-3 sm:gap-20 lg:gap-28'}>
@@ -580,7 +577,7 @@ export default function Index() {
subtitle={'Every Plunk install ships with the full platform — no upsell pages, no locked modules.'} subtitle={'Every Plunk install ships with the full platform — no upsell pages, no locked modules.'}
/> />
<div className={'mt-16 grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'mt-16 grid gap-5 sm:grid-cols-2 lg:auto-rows-[17rem] lg:grid-cols-3'}>
{features.map((feature, index) => { {features.map((feature, index) => {
const highlighted = feature.feature; const highlighted = feature.feature;
return ( return (
@@ -592,12 +589,14 @@ export default function Index() {
transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: index * 0.06, ease: [0.22, 1, 0.36, 1]}}
className={ className={
highlighted highlighted
? 'flex min-h-72 flex-col justify-between overflow-hidden rounded-[28px] border border-neutral-900 bg-neutral-900 p-8 text-white' ? 'flex min-h-80 flex-col justify-between overflow-hidden rounded-[28px] border border-neutral-900 bg-neutral-900 p-10 text-white sm:col-span-2 lg:row-span-2 lg:p-12'
: 'flex min-h-72 flex-col justify-between overflow-hidden rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900' : 'flex min-h-72 flex-col justify-between overflow-hidden rounded-[28px] border border-neutral-200 bg-white p-8 transition hover:border-neutral-900'
} }
> >
<div className={'flex items-start justify-between'}> <div className={'flex items-start justify-between'}>
<div className={highlighted ? 'text-white' : 'text-neutral-900'}>{feature.icon}</div> <div className={highlighted ? 'text-white' : 'text-neutral-900'}>
{highlighted ? <Workflow className="h-10 w-10" strokeWidth={1.25} /> : feature.icon}
</div>
<span <span
style={{fontFamily: 'var(--font-mono)'}} style={{fontFamily: 'var(--font-mono)'}}
className={`text-[11px] uppercase tracking-[0.18em] ${ className={`text-[11px] uppercase tracking-[0.18em] ${
@@ -610,16 +609,20 @@ export default function Index() {
<div> <div>
<h3 <h3
style={{fontFamily: 'var(--font-display)'}} style={{fontFamily: 'var(--font-display)'}}
className={`mt-10 text-2xl font-bold tracking-[-0.025em] ${ className={
highlighted ? 'text-white' : 'text-neutral-900' highlighted
}`} ? 'text-4xl font-extrabold leading-[0.95] tracking-[-0.035em] text-white sm:text-5xl lg:text-6xl'
: 'mt-10 text-2xl font-bold tracking-[-0.025em] text-neutral-900'
}
> >
{feature.title} {feature.title}
</h3> </h3>
<p <p
className={`mt-3 text-sm leading-relaxed ${ className={
highlighted ? 'text-neutral-300' : 'text-neutral-600' highlighted
}`} ? 'mt-5 max-w-md text-base leading-relaxed text-neutral-300 sm:text-lg'
: 'mt-3 text-sm leading-relaxed text-neutral-600'
}
> >
{feature.description} {feature.description}
</p> </p>
@@ -637,60 +640,73 @@ export default function Index() {
number={'05'} number={'05'}
label={'Data Model'} label={'Data Model'}
title={'One contact,'} title={'One contact,'}
titleAccent={'complete history.'} titleAccent={'complete history.'}
subtitle={ subtitle={
'Every interaction flows into a single contact record. Transactional, campaign and workflow events — one source of truth.' 'Every interaction flows into a single contact record. Transactional, campaign and workflow events — one source of truth.'
} }
/> />
<div className={'mx-auto mt-20 max-w-5xl'}> <div className={'mx-auto mt-20 max-w-3xl'}>
<div className={'grid gap-6 lg:grid-cols-3'}> <div className={'grid gap-4 sm:grid-cols-2'}>
{[ {[
{ {
icon: <Send className="h-7 w-7" strokeWidth={1.5} />, icon: <Send className="h-5 w-5" strokeWidth={1.5} />,
title: 'Transactional', title: 'Transactional',
sub: 'Receipts, resets', sub: 'Receipts, resets',
}, },
{ {
icon: <Megaphone className="h-7 w-7" strokeWidth={1.5} />, icon: <Megaphone className="h-5 w-5" strokeWidth={1.5} />,
title: 'Campaigns', title: 'Campaigns',
sub: 'Newsletters, launches', sub: 'Newsletters, launches',
}, },
{ {
icon: <Workflow className="h-7 w-7" strokeWidth={1.5} />, icon: <Workflow className="h-5 w-5" strokeWidth={1.5} />,
title: 'Workflows', title: 'Workflows',
sub: 'Onboarding, drip sequences', sub: 'Onboarding, drip sequences',
}, },
{
icon: <Inbox className="h-5 w-5" strokeWidth={1.5} />,
title: 'Inbound',
sub: 'Replies, support',
},
].map((item, i) => ( ].map((item, i) => (
<motion.div <motion.div
key={item.title} key={item.title}
initial={{opacity: 0, y: 16}} initial={{opacity: 0, y: 16}}
whileInView={{opacity: 1, y: 0}} whileInView={{opacity: 1, y: 0}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 0.5, delay: 0.1 + i * 0.1, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: 0.1 + i * 0.08, ease: [0.22, 1, 0.36, 1]}}
className={'rounded-[24px] border border-neutral-200 bg-white p-8 text-left'} className={'flex items-center gap-4 rounded-2xl border border-neutral-200 bg-white p-5'}
> >
<div className={'text-neutral-900'}>{item.icon}</div> <div
className={
'flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl bg-neutral-100 text-neutral-900'
}
>
{item.icon}
</div>
<div className={'min-w-0'}>
<h3 <h3
style={{fontFamily: 'var(--font-display)'}} style={{fontFamily: 'var(--font-display)'}}
className={'mt-10 text-2xl font-bold tracking-[-0.02em] text-neutral-900'} className={'text-base font-semibold tracking-[-0.01em] text-neutral-900'}
> >
{item.title} {item.title}
</h3> </h3>
<p className={'mt-2 text-sm text-neutral-600'}>{item.sub}</p> <p className={'mt-0.5 text-xs text-neutral-600'}>{item.sub}</p>
</div>
</motion.div> </motion.div>
))} ))}
</div> </div>
<div className={'relative my-12 hidden lg:block'}> <div className={'relative my-10 hidden justify-center sm:flex'}>
<svg className={'mx-auto h-28 w-full'} viewBox="0 0 600 120" preserveAspectRatio="none"> <svg width="40" height="80" viewBox="0 0 40 80" aria-hidden>
<defs> <defs>
<marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto"> <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
<polygon points="0 0, 10 3, 0 6" fill="#a3a3a3" /> <polygon points="0 0, 10 3, 0 6" fill="#a3a3a3" />
</marker> </marker>
</defs> </defs>
<motion.path <motion.path
d="M 100 0 Q 150 60, 250 110" d="M 20 0 L 20 70"
stroke="#d4d4d4" stroke="#d4d4d4"
strokeWidth="1.5" strokeWidth="1.5"
fill="none" fill="none"
@@ -698,29 +714,7 @@ export default function Index() {
initial={{pathLength: 0}} initial={{pathLength: 0}}
whileInView={{pathLength: 1}} whileInView={{pathLength: 1}}
viewport={{once: true}} viewport={{once: true}}
transition={{duration: 1.2, delay: 0.4, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.9, delay: 0.3, ease: [0.22, 1, 0.36, 1]}}
/>
<motion.path
d="M 300 0 L 300 110"
stroke="#d4d4d4"
strokeWidth="1.5"
fill="none"
markerEnd="url(#arrowhead)"
initial={{pathLength: 0}}
whileInView={{pathLength: 1}}
viewport={{once: true}}
transition={{duration: 1.2, delay: 0.5, ease: [0.22, 1, 0.36, 1]}}
/>
<motion.path
d="M 500 0 Q 450 60, 350 110"
stroke="#d4d4d4"
strokeWidth="1.5"
fill="none"
markerEnd="url(#arrowhead)"
initial={{pathLength: 0}}
whileInView={{pathLength: 1}}
viewport={{once: true}}
transition={{duration: 1.2, delay: 0.6, ease: [0.22, 1, 0.36, 1]}}
/> />
</svg> </svg>
</div> </div>
@@ -845,7 +839,7 @@ export default function Index() {
))} ))}
</div> </div>
<div className={'mt-12 flex justify-center'}> <div className={'mt-10 flex justify-center'}>
<motion.a <motion.a
whileHover={{scale: 1.02}} whileHover={{scale: 1.02}}
whileTap={{scale: 0.98}} whileTap={{scale: 0.98}}
@@ -962,7 +956,7 @@ export default function Index() {
subtitle={'No hyperbole. Just the people building products on Plunk.'} subtitle={'No hyperbole. Just the people building products on Plunk.'}
/> />
<div className={'mt-16 grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}> <div className={'mt-16 grid gap-5 sm:grid-cols-2 lg:auto-rows-[17rem] lg:grid-cols-3'}>
{testimonials.map((t, i) => { {testimonials.map((t, i) => {
const highlighted = t.featured; const highlighted = t.featured;
return ( return (
@@ -974,7 +968,7 @@ export default function Index() {
transition={{duration: 0.5, delay: i * 0.06, ease: [0.22, 1, 0.36, 1]}} transition={{duration: 0.5, delay: i * 0.06, ease: [0.22, 1, 0.36, 1]}}
className={ className={
highlighted highlighted
? 'flex min-h-72 flex-col justify-between rounded-[28px] border border-neutral-900 bg-neutral-900 p-8 text-white' ? 'flex min-h-80 flex-col justify-between rounded-[28px] border border-neutral-900 bg-neutral-900 p-10 text-white sm:col-span-2 lg:row-span-2 lg:p-12'
: 'flex min-h-72 flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8' : 'flex min-h-72 flex-col justify-between rounded-[28px] border border-neutral-200 bg-white p-8'
} }
> >
@@ -982,28 +976,34 @@ export default function Index() {
style={highlighted ? {fontFamily: 'var(--font-display)'} : undefined} style={highlighted ? {fontFamily: 'var(--font-display)'} : undefined}
className={ className={
highlighted highlighted
? 'text-xl font-medium leading-[1.2] tracking-[-0.015em] text-white sm:text-2xl' ? 'text-3xl font-medium leading-[1.1] tracking-[-0.02em] text-white sm:text-4xl lg:text-5xl'
: 'text-sm leading-relaxed text-neutral-700' : 'text-sm leading-relaxed text-neutral-700'
} }
> >
&ldquo;{t.testimonial}&rdquo; &ldquo;{t.testimonial}&rdquo;
</blockquote> </blockquote>
<figcaption className={'mt-6 flex items-center gap-3'}> <figcaption className={`mt-6 flex items-center ${highlighted ? 'gap-4' : 'gap-3'}`}>
<div <div
className={`relative h-10 w-10 overflow-hidden rounded-full ${ className={`relative overflow-hidden rounded-full ${
highlighted ? 'border border-neutral-700' : '' highlighted ? 'h-12 w-12 border border-neutral-700' : 'h-10 w-10'
}`} }`}
> >
<Image src={t.image} alt={t.author} placeholder="blur" className={'object-cover'} /> <Image src={t.image} alt={t.author} placeholder="blur" className={'object-cover'} />
</div> </div>
<div> <div>
<div className={`text-xs font-semibold ${highlighted ? 'text-white' : 'text-neutral-900'}`}> <div
className={
highlighted
? 'text-sm font-semibold text-white'
: 'text-xs font-semibold text-neutral-900'
}
>
{t.author} {t.author}
</div> </div>
<div <div
style={{fontFamily: 'var(--font-mono)'}} style={{fontFamily: 'var(--font-mono)'}}
className={`mt-0.5 text-[10px] uppercase tracking-[0.18em] ${ className={`mt-0.5 uppercase tracking-[0.18em] ${
highlighted ? 'text-neutral-400' : 'text-neutral-500' highlighted ? 'text-[11px] text-neutral-400' : 'text-[10px] text-neutral-500'
}`} }`}
> >
{t.role} {t.role}