| 1 | import Link from "next/link"; |
| 2 | import { AppScreenshots } from "@/components/app-screenshots"; |
| 3 | import { StoreBadges } from "@/components/store-badges"; |
| 4 | |
| 5 | const features = [ |
| 6 | { |
| 7 | title: "On-device by default", |
| 8 | body: "Siti runs its models on your Mac or iPhone. Your prompts and conversations don't leave the device unless you decide to send them somewhere.", |
| 9 | }, |
| 10 | { |
| 11 | title: "No account required", |
| 12 | body: "Open the app and start typing. There's no sign-up to get through, and nothing about your questions is stored in the cloud.", |
| 13 | }, |
| 14 | { |
| 15 | title: "Built for macOS and iOS", |
| 16 | body: "It's a native app on both, so it behaves the way the rest of your Apple devices already do.", |
| 17 | }, |
| 18 | ]; |
| 19 | |
| 20 | export default function HomePage() { |
| 21 | return ( |
| 22 | <> |
| 23 | <section className="mx-auto max-w-5xl px-6 py-24 text-center"> |
| 24 | <p className="mb-4 text-xs font-semibold uppercase tracking-[0.15em] text-brand"> |
| 25 | Personal assistant |
| 26 | </p> |
| 27 | <h1 className="mx-auto max-w-3xl text-4xl font-semibold tracking-tight sm:text-6xl"> |
| 28 | An assistant that runs{" "} |
| 29 | <span className="text-brand">entirely on your device.</span> |
| 30 | </h1> |
| 31 | <p className="mx-auto mt-6 max-w-2xl text-lg text-muted"> |
| 32 | Siti runs on your iPhone, iPad, and Mac. Ask it anything, and your |
| 33 | conversations stay with you instead of on someone else's servers. |
| 34 | </p> |
| 35 | <div className="mt-10 flex flex-col items-center justify-center gap-6"> |
| 36 | <StoreBadges /> |
| 37 | <Link |
| 38 | href="/about" |
| 39 | className="rounded-sm border border-border px-6 py-3 text-sm font-medium text-ink transition-colors hover:bg-surface" |
| 40 | > |
| 41 | Learn more |
| 42 | </Link> |
| 43 | </div> |
| 44 | </section> |
| 45 | |
| 46 | <section className="mx-auto max-w-5xl px-6 pb-4"> |
| 47 | <div className="grid gap-6 sm:grid-cols-3"> |
| 48 | {features.map((feature) => ( |
| 49 | <div |
| 50 | key={feature.title} |
| 51 | className="rounded-card border border-border bg-surface p-6" |
| 52 | > |
| 53 | <h2 className="text-lg font-semibold tracking-tight text-ink"> |
| 54 | {feature.title} |
| 55 | </h2> |
| 56 | <p className="mt-2 text-sm leading-relaxed text-muted"> |
| 57 | {feature.body} |
| 58 | </p> |
| 59 | </div> |
| 60 | ))} |
| 61 | </div> |
| 62 | </section> |
| 63 | |
| 64 | <AppScreenshots /> |
| 65 | </> |
| 66 | ); |
| 67 | } |