106 lines
4.5 KiB
TypeScript
106 lines
4.5 KiB
TypeScript
"use client";
|
||
|
||
"use client";
|
||
|
||
import { motion } from "framer-motion";
|
||
|
||
const futureVariants = {
|
||
hidden: { opacity: 1, y: 24 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] as const },
|
||
},
|
||
};
|
||
|
||
export function LandingFuture() {
|
||
return (
|
||
<motion.section
|
||
initial="hidden"
|
||
whileInView="visible"
|
||
viewport={{ once: true, amount: 0.35 }}
|
||
variants={futureVariants}
|
||
className="bg-secondary/15 py-16 lg:py-20"
|
||
>
|
||
<div className="mx-auto max-w-6xl px-6 lg:px-8">
|
||
<div className="mb-8 max-w-3xl space-y-4">
|
||
<h2 className="text-3xl font-semibold tracking-tight text-foreground sm:text-4xl">
|
||
See Your Financial Future
|
||
</h2>
|
||
<p className="text-base text-muted-foreground sm:text-lg">
|
||
LedgerOne maps every recurring bill, subscription, and paycheck onto a single, living
|
||
timeline—so you can see exactly when your balance bends.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="overflow-hidden rounded-3xl border border-border/80 bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 p-5 shadow-[0_30px_120px_rgba(15,23,42,0.9)]">
|
||
<div className="mb-4 flex flex-wrap items-center justify-between gap-3 text-xs text-slate-300">
|
||
<div className="flex items-center gap-2">
|
||
<span className="h-2 w-2 rounded-full bg-emerald-400" />
|
||
<span>Projected balance · next 30 days</span>
|
||
</div>
|
||
<div className="flex items-center gap-3 text-[11px]">
|
||
<div className="flex items-center gap-1">
|
||
<span className="h-1.5 w-4 rounded-full bg-emerald-400" />
|
||
<span>Balance</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<span className="h-1.5 w-4 rounded-full bg-sky-400" />
|
||
<span>Income</span>
|
||
</div>
|
||
<div className="flex items-center gap-1">
|
||
<span className="h-1.5 w-4 rounded-full bg-rose-400" />
|
||
<span>Bills</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative w-full overflow-hidden rounded-2xl bg-slate-900">
|
||
{/* Cinematic future-balance preview (image placeholder for now) */}
|
||
<div className="relative aspect-video w-full">
|
||
<div className="absolute inset-0">
|
||
<img
|
||
src="/images/feature-reports.png"
|
||
alt="Predicted balance over 30 days"
|
||
className="h-full w-full object-cover"
|
||
/>
|
||
</div>
|
||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-slate-950/85 via-slate-950/25 to-transparent" />
|
||
</div>
|
||
|
||
{/* Overlay events + warning label on top of the video */}
|
||
<div className="pointer-events-none absolute inset-4 flex items-end justify-between text-[10px] text-slate-200">
|
||
<div className="flex flex-col items-center gap-1">
|
||
<div className="h-12 w-px bg-rose-400/70" />
|
||
<span className="rounded-full bg-rose-500/20 px-2 py-0.5 text-rose-200">
|
||
Rent · -$2,400
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col items-center gap-1">
|
||
<div className="h-16 w-px bg-emerald-400/80" />
|
||
<span className="rounded-full bg-emerald-500/20 px-2 py-0.5 text-emerald-200">
|
||
Payroll · +$6,800
|
||
</span>
|
||
</div>
|
||
<div className="flex flex-col items-center gap-1">
|
||
<div className="h-10 w-px bg-sky-400/80" />
|
||
<span className="rounded-full bg-sky-500/20 px-2 py-0.5 text-sky-200">
|
||
Subscriptions · -$480
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pointer-events-none absolute bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full bg-amber-500/20 px-3 py-1.5 text-[11px] text-amber-100 ring-1 ring-amber-400/60 shadow-[0_0_40px_rgba(251,191,36,0.55)]">
|
||
<span className="h-1.5 w-1.5 rounded-full bg-amber-300 animate-pulse" />
|
||
<span>
|
||
Your balance drops here ⚠️ — projected to dip below{" "}
|
||
<span className="font-semibold">$1,000</span> on the 24th.
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.section>
|
||
);
|
||
}
|