46 lines
2.2 KiB
TypeScript
46 lines
2.2 KiB
TypeScript
import { GaugeChart } from "@/components/charts/GaugeChart";
|
|
import { Card } from "@/components/ui/Card";
|
|
import { Chip } from "@/components/ui/Chip";
|
|
import { ProgressBar } from "@/components/ui/ProgressBar";
|
|
import { PhoneFrame } from "./PhoneFrame";
|
|
|
|
export function MobileScreens() {
|
|
return (
|
|
<div className="grid gap-8 lg:grid-cols-3">
|
|
<PhoneFrame title="Onboarding">
|
|
<div className="flex h-full flex-col justify-between">
|
|
<div>
|
|
<Chip>Zero conflict finance</Chip>
|
|
<h2 className="mt-8 font-display text-5xl leading-none text-ink dark:text-paper">Meet your money clearly.</h2>
|
|
<p className="mt-4 text-sm leading-6 text-ink/65 dark:text-paper/65">Connect accounts, choose goals, and let Aartha build your first flex plan.</p>
|
|
</div>
|
|
<button className="mb-10 rounded-lg bg-forest py-3 font-bold text-white dark:bg-mint dark:text-ink">Get started</button>
|
|
</div>
|
|
</PhoneFrame>
|
|
<PhoneFrame title="Dashboard">
|
|
<div>
|
|
<p className="text-sm text-ink/50 dark:text-paper/50">Good morning</p>
|
|
<h2 className="font-display text-4xl text-forest dark:text-mint">$93</h2>
|
|
<p className="text-sm font-semibold text-ink/60 dark:text-paper/60">safe to spend today</p>
|
|
<Card className="mt-5 p-4"><GaugeChart value={72} label="Flex pace" /></Card>
|
|
<div className="mt-4 space-y-3">
|
|
<ProgressBar label="Groceries" value={84} />
|
|
<ProgressBar label="Dining" value={109} />
|
|
</div>
|
|
</div>
|
|
</PhoneFrame>
|
|
<PhoneFrame title="Credit & AI">
|
|
<div>
|
|
<Chip tone="indigo">FICO 8</Chip>
|
|
<h2 className="mt-4 font-display text-6xl text-forest dark:text-mint">742</h2>
|
|
<p className="text-sm text-ink/60 dark:text-paper/60">+21 since April</p>
|
|
<Card className="mt-6 p-4">
|
|
<h3 className="font-bold text-ink dark:text-paper">Ask Aartha</h3>
|
|
<p className="mt-3 text-sm leading-6 text-ink/65 dark:text-paper/65">Utilization improved. Keep cards below 30% before statement close to protect the gain.</p>
|
|
</Card>
|
|
</div>
|
|
</PhoneFrame>
|
|
</div>
|
|
);
|
|
}
|