c48a11b13c
- Hero auto-rotates story backdrops every 5 seconds with 500ms fade transitions - ProductShowcase cards rotate with mint ring highlight on the active card - Inactive cards fade to 60% opacity on mobile, full opacity on desktop - New components: StoryBackdrop, StoryOnboarding, CountUp, lib/stories - Manual Another-story control still works Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
40 lines
1.7 KiB
TypeScript
40 lines
1.7 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";
|
|
import { StoryOnboarding } from "./StoryOnboarding";
|
|
|
|
export function MobileScreens() {
|
|
return (
|
|
<div className="grid gap-8 lg:grid-cols-3">
|
|
<PhoneFrame title="Onboarding — rotating goal story">
|
|
<StoryOnboarding />
|
|
</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>
|
|
);
|
|
}
|