49 lines
2.6 KiB
TypeScript
49 lines
2.6 KiB
TypeScript
import { ArrowRight, ShieldCheck, Sparkles } from "lucide-react";
|
|
import { AreaChart } from "@/components/charts/AreaChart";
|
|
import { ButtonLink } from "@/components/ui/Button";
|
|
import { Card, StatCard } from "@/components/ui/Card";
|
|
import { Chip } from "@/components/ui/Chip";
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="grain">
|
|
<div className="mx-auto grid min-h-[calc(100vh-73px)] max-w-7xl items-center gap-10 px-5 py-14 lg:grid-cols-[1fr_.9fr]">
|
|
<div>
|
|
<Chip>Subscription-only · zero ads · zero referral bias</Chip>
|
|
<h1 className="mt-6 max-w-3xl font-display text-6xl leading-[0.95] text-ink dark:text-paper md:text-7xl">
|
|
Your money app should help you move, not just watch.
|
|
</h1>
|
|
<p className="mt-6 max-w-2xl text-lg leading-8 text-ink/68 dark:text-paper/68">
|
|
Aartha unifies budgets, cash flow, credit, rewards, goals, and AI coaching into one calm finance cockpit built around the user's wellbeing.
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<ButtonLink href="/dashboard">View dashboard <ArrowRight size={17} /></ButtonLink>
|
|
<ButtonLink href="/mobile" variant="secondary">Mobile screens</ButtonLink>
|
|
</div>
|
|
<div className="mt-8 flex flex-wrap gap-5 text-sm font-semibold text-ink/60 dark:text-paper/60">
|
|
<span className="inline-flex items-center gap-2"><ShieldCheck size={16} /> Bank-grade posture</span>
|
|
<span className="inline-flex items-center gap-2"><Sparkles size={16} /> Ask Aartha AI coach</span>
|
|
</div>
|
|
</div>
|
|
<Card className="p-5">
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
<StatCard label="Net worth" value="$184k" detail="+8.2% YTD" />
|
|
<StatCard label="Flex left" value="$93" detail="Safe to spend today" tone="saffron" />
|
|
<StatCard label="FICO 8" value="742" detail="+21 since April" tone="indigo" />
|
|
</div>
|
|
<div className="mt-5 rounded-lg bg-white/70 p-5 dark:bg-white/[0.05]">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-bold uppercase tracking-wide text-ink/45 dark:text-paper/45">Cash-flow forecast</p>
|
|
<p className="font-display text-4xl text-forest dark:text-mint">$7,420</p>
|
|
</div>
|
|
<Chip tone="saffron">Next 30 days</Chip>
|
|
</div>
|
|
<AreaChart values={[8, 12, 11, 19, 18, 24, 31, 28, 36]} />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|