Announcement badge, headline, two buttons, trust points and a framed mini dashboard built from Stat, Card and Status.
components/blocks/heroes/hero-centered.tsx
New: recurring invoices
Get paid on time, every time.
Ledgerly sends invoices, chases late payments and reconciles your bank feed, so your team can stop living in spreadsheets.
- 14-day trial
- No card required
- Cancel anytime
Outstanding
$15,480
Down 8.2% (positive)vs last monthPaid this month
$42,910
Up 14.6% (positive)vs last monthAvg. days to pay
11.4
Down 2.1 days (positive)Recent invoices
- INV-2041Fernhill StudioPaid$4,800.00
- INV-2042Quillstack LabsDue in 3 days$1,260.00
- INV-2043Harbor & PineSent$9,420.00
import { ArrowRight, CircleCheck, FileText, Play, Send } from "lucide-react";import { Badge } from "@/components/ui/badge";import { Button } from "@/components/ui/button";import { Card } from "@/components/ui/card";import { Status } from "@/components/ui/misc";import { Stat, StatGroup } from "@/components/ui/stat"; const invoices = [ { id: "INV-2041", client: "Fernhill Studio", amount: "$4,800.00", status: { tone: "success", label: "Paid" }, }, { id: "INV-2042", client: "Quillstack Labs", amount: "$1,260.00", status: { tone: "warning", label: "Due in 3 days" }, }, { id: "INV-2043", client: "Harbor & Pine", amount: "$9,420.00", status: { tone: "info", label: "Sent" }, },] as const; /** Centered hero: announcement badge, headline, two calls to action and a small product preview. */export function HeroCentered() { return ( <section className="relative overflow-hidden px-4 pt-14 pb-12 sm:px-8 sm:pt-20"> <div className="mx-auto flex max-w-2xl flex-col items-center text-center"> <Badge tone="accent" size="md" dot> New: recurring invoices </Badge> <h2 className="text-title mt-5 text-balance text-fg sm:text-display">Get paid on time, every time.</h2> <p className="mt-4 max-w-xl text-[17px] leading-7 text-pretty text-muted"> Ledgerly sends invoices, chases late payments and reconciles your bank feed, so your team can stop living in spreadsheets. </p> <div className="mt-8 flex flex-wrap items-center justify-center gap-3"> <Button href="#" variant="primary" size="lg" iconRight={<ArrowRight strokeWidth={1.75} />}> Start free trial </Button> <Button href="#" variant="secondary" size="lg" iconLeft={<Play strokeWidth={1.75} />}> Watch the 2-minute tour </Button> </div> <ul className="mt-6 flex flex-wrap justify-center gap-x-5 gap-y-2 text-[13px] text-muted"> {["14-day trial", "No card required", "Cancel anytime"].map((item) => ( <li key={item} className="flex items-center gap-1.5"> <CircleCheck aria-hidden="true" className="size-4 text-success" strokeWidth={1.75} /> {item} </li> ))} </ul> </div> {/* Product preview built from library components. */} <div className="mx-auto mt-12 max-w-4xl"> <Card variant="raised" as="div" className="overflow-hidden"> <div className="flex items-center gap-1.5 border-b border-line bg-raised/60 px-4 py-2.5" aria-hidden="true"> <span className="size-2.5 rounded-full bg-fg/15" /> <span className="size-2.5 rounded-full bg-fg/15" /> <span className="size-2.5 rounded-full bg-fg/15" /> <span className="ml-3 truncate font-mono text-[11px] text-subtle">app.ledgerly.example/overview</span> </div> <div className="flex flex-col gap-4 p-4 sm:p-5"> <StatGroup columns={3}> <Stat variant="plain" label="Outstanding" value="$15,480" delta={{ value: "8.2%", direction: "down", intent: "good", label: "vs last month", }} /> <Stat variant="plain" label="Paid this month" value="$42,910" delta={{ value: "14.6%", direction: "up", label: "vs last month", }} /> <Stat variant="plain" label="Avg. days to pay" value="11.4" delta={{ value: "2.1 days", direction: "down", intent: "good" }} /> </StatGroup> <Card as="div"> <div className="flex flex-wrap items-center justify-between gap-3 px-5 pt-4 pb-2"> <h3 className="text-heading flex items-center gap-2.5 text-fg"> <FileText aria-hidden="true" className="size-4 text-muted" strokeWidth={1.75} /> Recent invoices </h3> <Button size="sm" variant="ghost" iconLeft={<Send strokeWidth={1.75} />}> Send reminders </Button> </div> <ul className="divide-y divide-line px-5 pb-2"> {invoices.map((inv) => ( <li key={inv.id} className="flex flex-wrap items-center justify-between gap-x-4 gap-y-1 py-3 text-[13px]"> <span className="flex min-w-0 items-center gap-3"> <span className="font-mono text-xs text-subtle">{inv.id}</span> <span className="truncate font-medium text-fg">{inv.client}</span> </span> <span className="flex items-center gap-4"> <Status tone={inv.status.tone}>{inv.status.label}</Status> <span className="font-mono text-[12.5px] text-fg tabular-nums">{inv.amount}</span> </span> </li> ))} </ul> </Card> </div> </Card> </div> </section> );}