79 lines
3.7 KiB
TypeScript
79 lines
3.7 KiB
TypeScript
import { personas, prices } from "@/lib/data";
|
|
import { Card } from "@/components/ui/Card";
|
|
import { Chip } from "@/components/ui/Chip";
|
|
import { SectionHeading } from "@/components/ui/SectionHeading";
|
|
import { ButtonLink } from "@/components/ui/Button";
|
|
|
|
const features = [
|
|
["Flex budgeting", "Speedometer-style daily allowance after fixed expenses and goals."],
|
|
["Credit clarity", "Real FICO 8 factors translated into actions users can actually take."],
|
|
["Rewards intelligence", "Recommend the best card for each purchase based on live transactions."],
|
|
["Shared finances", "Partner and roommate views with privacy-aware collaboration."]
|
|
];
|
|
|
|
export function FeatureGrid() {
|
|
return (
|
|
<section id="features" className="mx-auto max-w-7xl px-5 py-24">
|
|
<SectionHeading eyebrow="Product system" title="A PFM that feels active, honest, and useful." body="The MVP and differentiators are designed as reusable product modules, not one-off pages." />
|
|
<div className="mt-12 grid gap-4 md:grid-cols-4">
|
|
{features.map(([title, body]) => (
|
|
<Card key={title}>
|
|
<h3 className="text-lg font-bold text-ink dark:text-paper">{title}</h3>
|
|
<p className="mt-3 text-sm leading-6 text-ink/62 dark:text-paper/62">{body}</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function PersonaGrid() {
|
|
return (
|
|
<section className="bg-paper/70 py-24 dark:bg-white/[0.03]">
|
|
<div className="mx-auto max-w-7xl px-5">
|
|
<SectionHeading eyebrow="Audience" title="Built for the five PRD personas." body="Each persona maps to a feature surface and a distinct product promise." />
|
|
<div className="mt-12 grid gap-4 md:grid-cols-5">
|
|
{personas.map(([name, body], index) => (
|
|
<Card key={name} className="p-4">
|
|
<Chip tone={index % 2 ? "indigo" : "mint"}>{String(index + 1).padStart(2, "0")}</Chip>
|
|
<h3 className="mt-4 font-bold text-ink dark:text-paper">{name}</h3>
|
|
<p className="mt-3 text-sm leading-6 text-ink/62 dark:text-paper/62">{body}</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function Pricing() {
|
|
return (
|
|
<section id="pricing" className="mx-auto max-w-7xl px-5 py-24">
|
|
<SectionHeading eyebrow="Pricing" title="Clear subscription tiers. No hidden incentives." body="Pricing follows the PRD and reinforces Aartha's zero-conflict positioning." />
|
|
<div className="mt-12 grid gap-4 md:grid-cols-4">
|
|
{prices.map(([name, price, body]) => (
|
|
<Card key={name} className={name === "Plus" ? "ring-2 ring-mint" : ""}>
|
|
{name === "Plus" ? <Chip tone="saffron">Most popular</Chip> : null}
|
|
<h3 className="mt-4 text-xl font-bold text-ink dark:text-paper">{name}</h3>
|
|
<p className="mt-2 font-display text-4xl text-forest dark:text-mint">{price}</p>
|
|
<p className="mt-3 min-h-12 text-sm leading-6 text-ink/62 dark:text-paper/62">{body}</p>
|
|
<ButtonLink href="/dashboard" variant={name === "Plus" ? "primary" : "secondary"} className="mt-6 w-full">Preview tier</ButtonLink>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export function CTA() {
|
|
return (
|
|
<section className="px-5 pb-24">
|
|
<div className="mx-auto max-w-7xl rounded-lg bg-forest p-10 text-paper dark:bg-mint dark:text-ink md:p-14">
|
|
<h2 className="font-display text-5xl">Ready for a component-based handoff.</h2>
|
|
<p className="mt-4 max-w-2xl text-paper/75 dark:text-ink/70">This prototype is structured for product review today and engineering continuation tomorrow.</p>
|
|
<ButtonLink href="/dashboard" variant="secondary" className="mt-8">Explore app prototype</ButtonLink>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|