43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import ScrollReveal from '@/components/ui/ScrollReveal'
|
|
|
|
const lines = [
|
|
{ text: 'NoFi was the diagnosis.', accent: false },
|
|
{ text: 'FlowFi is the prognosis.', accent: true },
|
|
{ text: 'Not no flows — better flows.', accent: false },
|
|
{ text: 'Not no finance — living finance.', accent: false },
|
|
{ text: 'Finance as metabolism, not mechanism.', accent: true },
|
|
]
|
|
|
|
export default function TransitionSection() {
|
|
return (
|
|
<section className="min-h-screen flex flex-col items-center justify-center relative px-4 py-24">
|
|
<div className="absolute inset-0 bg-deep" />
|
|
|
|
{/* Flowing light streak */}
|
|
<div
|
|
className="absolute top-0 left-0 w-full h-px"
|
|
style={{ background: 'linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.2), transparent)' }}
|
|
/>
|
|
|
|
<div className="relative z-10 max-w-3xl w-full space-y-14 text-center">
|
|
{lines.map((line, i) => (
|
|
<ScrollReveal key={i} delay={i * 0.12}>
|
|
<p className={`font-caveat text-2xl md:text-4xl leading-relaxed transition-colors duration-700 ${
|
|
line.accent ? 'text-flow/60' : 'text-foam/50'
|
|
}`}>
|
|
{line.text}
|
|
</p>
|
|
</ScrollReveal>
|
|
))}
|
|
</div>
|
|
|
|
<div
|
|
className="absolute bottom-0 left-0 w-full h-px"
|
|
style={{ background: 'linear-gradient(90deg, transparent, rgba(45, 212, 191, 0.2), transparent)' }}
|
|
/>
|
|
</section>
|
|
)
|
|
}
|