|
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
|
} |