ui: Polish details
This commit is contained in:
Dries Augustyns
@@ -115,9 +115,11 @@ export default function SegmentsFeature() {
|
||||
>
|
||||
<div
|
||||
style={{fontFamily: 'var(--font-mono)'}}
|
||||
className={'mb-6 text-[11px] uppercase tracking-[0.18em] text-neutral-500'}
|
||||
className={'mb-10 border-t border-neutral-900/90 pt-4 text-[11px] uppercase tracking-[0.18em] text-neutral-700'}
|
||||
>
|
||||
Audience Segmentation
|
||||
<span className={'text-neutral-400'}>Features</span>
|
||||
<span className={'mx-3 text-neutral-300'}>—</span>
|
||||
<span className={'font-medium text-neutral-900'}>Audience Segmentation</span>
|
||||
</div>
|
||||
<h1
|
||||
style={{fontFamily: 'var(--font-display)'}}
|
||||
@@ -162,7 +164,7 @@ export default function SegmentsFeature() {
|
||||
|
||||
{/* Features grid */}
|
||||
<section className={'border-t border-neutral-200'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
@@ -179,7 +181,7 @@ export default function SegmentsFeature() {
|
||||
<p className={'mt-4 text-lg text-neutral-600'}>Build precise audiences and send campaigns that land</p>
|
||||
</motion.div>
|
||||
|
||||
<div className={'grid gap-4 sm:grid-cols-2 lg:grid-cols-3'}>
|
||||
<div className={'grid gap-5 sm:grid-cols-2 lg:grid-cols-3'}>
|
||||
{features.map((feature, index) => {
|
||||
const highlighted = feature.featured;
|
||||
return (
|
||||
@@ -224,7 +226,7 @@ export default function SegmentsFeature() {
|
||||
|
||||
{/* Filter examples */}
|
||||
<section className={'border-t border-neutral-200 bg-neutral-50/60'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
@@ -241,7 +243,7 @@ export default function SegmentsFeature() {
|
||||
<p className={'mt-4 text-lg text-neutral-600'}>Build complex segments with nested AND/OR logic</p>
|
||||
</motion.div>
|
||||
|
||||
<div className={'space-y-4'}>
|
||||
<div className={'space-y-5'}>
|
||||
{filterExamples.map((example, index) => (
|
||||
<motion.div
|
||||
key={example.title}
|
||||
@@ -276,7 +278,7 @@ export default function SegmentsFeature() {
|
||||
|
||||
{/* Segment types */}
|
||||
<section className={'border-t border-neutral-200'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
@@ -293,7 +295,7 @@ export default function SegmentsFeature() {
|
||||
<p className={'mt-4 text-lg text-neutral-600'}>Choose between dynamic filtering or manual curation</p>
|
||||
</motion.div>
|
||||
|
||||
<div className={'grid gap-4 sm:grid-cols-2'}>
|
||||
<div className={'grid gap-5 sm:grid-cols-2'}>
|
||||
{[
|
||||
{
|
||||
icon: <TrendingUp className="h-6 w-6" strokeWidth={1.5} />,
|
||||
@@ -340,7 +342,7 @@ export default function SegmentsFeature() {
|
||||
|
||||
{/* Use cases */}
|
||||
<section className={'border-t border-neutral-200 bg-neutral-50/60'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-20 sm:px-10'}>
|
||||
<div className={'mx-auto max-w-[88rem] px-6 py-24 sm:px-10 sm:py-32'}>
|
||||
<motion.div
|
||||
initial={{opacity: 0, y: 20}}
|
||||
whileInView={{opacity: 1, y: 0}}
|
||||
@@ -357,33 +359,34 @@ export default function SegmentsFeature() {
|
||||
<p className={'mt-4 text-lg text-neutral-600'}>From targeted campaigns to automated workflows</p>
|
||||
</motion.div>
|
||||
|
||||
<div className={'space-y-4'}>
|
||||
<ul className={'divide-y divide-neutral-200 border-y border-neutral-200'}>
|
||||
{useCases.map((useCase, index) => (
|
||||
<motion.div
|
||||
<motion.li
|
||||
key={useCase.title}
|
||||
initial={{opacity: 0, y: 20}}
|
||||
initial={{opacity: 0, y: 12}}
|
||||
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-[24px] border border-neutral-200 bg-white p-8'}
|
||||
transition={{duration: 0.5, delay: index * 0.08, ease: [0.22, 1, 0.36, 1]}}
|
||||
className={'grid grid-cols-12 gap-6 py-10 sm:py-12'}
|
||||
>
|
||||
<div className={'flex items-start gap-6'}>
|
||||
<div className={'flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-full border border-neutral-200 text-neutral-900'}>
|
||||
{useCase.icon}
|
||||
</div>
|
||||
<div className={'flex-1'}>
|
||||
<h3
|
||||
style={{fontFamily: 'var(--font-display)'}}
|
||||
className={'text-xl font-bold tracking-[-0.02em] text-neutral-900'}
|
||||
>
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className={'mt-2 text-neutral-600'}>{useCase.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
<span
|
||||
style={{fontFamily: 'var(--font-mono)'}}
|
||||
className={'col-span-12 text-[11px] uppercase tracking-[0.18em] text-neutral-400 sm:col-span-1 sm:pt-1.5'}
|
||||
>
|
||||
{String(index + 1).padStart(2, '0')}
|
||||
</span>
|
||||
<h3
|
||||
style={{fontFamily: 'var(--font-display)'}}
|
||||
className={'col-span-12 text-xl font-bold tracking-[-0.02em] text-neutral-900 sm:col-span-3'}
|
||||
>
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<p className={'col-span-12 leading-relaxed text-neutral-600 sm:col-span-8'}>
|
||||
{useCase.description}
|
||||
</p>
|
||||
</motion.li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user