1import Link from "next/link"
2import {
3 ArrowRight,
4 FilmStrip,
5 HandPalm,
6 HandPeace,
7 Lock,
8 QrCode,
9 ThumbsUp,
10 Users,
11} from "@phosphor-icons/react/ssr"
12
13import { SiteHeader } from "@/components/site/SiteHeader"
14import { GalleryPicker } from "@/features/gallery/GalleryPicker"
15import { SessionStartPing } from "@/features/metrics/SessionStartPing"
16import { Badge } from "@/components/ui/badge"
17import { Button } from "@/components/ui/button"
18import { cn } from "@/lib/utils"
19
20/* DESIGN-SYSTEM §10.1: Welcome. Komponen server, tanpa kode kamera, gesture,
21 atau kanvas (FR-01). Foto contoh digambar sebagai blok warna berlabel. */
22const CONTOH_TERANG = ["bg-pink", "bg-lime", "bg-tangerine", "bg-paper"]
23const CONTOH_GARIS = ["bg-lime", "bg-violet-soft", "bg-pink", "bg-tangerine"]
24
25const LANGKAH = ["Pilih layout", "Pose di kamera", "Hias strip"]
26
27function FotoContoh({ className }: { className?: string }) {
28 return (
29 <div
30 className={cn(
31 "flex aspect-[44/31] items-center justify-center rounded-sm font-mono text-[10px] font-bold text-ink",
32 className
33 )}
34 >
35 Foto contoh
36 </div>
37 )
38}
39
40export default function Home() {
41 return (
42 <div className="stage-grid flex min-h-dvh flex-1 flex-col">
43 <div className="page-container flex flex-1 flex-col gap-6 py-6">
44 <SessionStartPing />
45 <SiteHeader />
46
47 <main className="flex flex-1 flex-col gap-6">
48 <section className="flex flex-wrap overflow-hidden rounded-panel border-3 border-ink bg-paper shadow-hard-lg">
49 <div className="checker-ribbon w-full" />
50 <div className="flex flex-[1_1_440px] flex-col justify-center gap-5 p-[clamp(24px,4vw,56px)]">
51 <Badge variant="lime" className="self-start">
52 Photobooth di browser
53 </Badge>
54 <h1 className="display-xl">Foto strip tanpa antre.</h1>
55 <p className="max-w-[44ch] text-lg leading-[1.5]">
56 Buka kamera, pose, hias strip, lalu unduh atau cetak. Tanpa
57 akun, dan fotomu tetap di perangkatmu.
58 </p>
59 <div className="flex flex-wrap gap-3.5 pt-1">
60 <Button size="lg" asChild>
61 <Link href="/booth/layout">
62 Mulai Foto
63 <ArrowRight
64 weight="bold"
65 className="size-[22px]"
66 aria-hidden
67 />
68 </Link>
69 </Button>
70 <GalleryPicker />
71 </div>
72 </div>
73
74 <div className="flex flex-[1_1_380px] p-6">
75 <div className="relative flex min-h-[440px] flex-1 items-center justify-center gap-[clamp(12px,3vw,28px)] rounded-stage border-3 border-ink bg-violet-soft px-[clamp(14px,3vw,24px)] py-9">
76 <Badge
77 variant="lime"
78 className="absolute top-[18px] right-[18px] rotate-6"
79 >
80 Tanpa akun
81 </Badge>
82
83 <div className="flex w-full max-w-[148px] flex-[0_1_148px] -rotate-5 flex-col gap-2 rounded-thumb border-3 border-ink bg-ink p-2.5 pb-3 shadow-hard-violet">
84 {CONTOH_TERANG.map((warna) => (
85 <FotoContoh key={warna} className={warna} />
86 ))}
87 <div className="flex items-center justify-between pt-0.5">
88 <span className="font-display text-xs font-black text-paper">
89 snapme
90 </span>
91 <span className="flex size-[26px] items-center justify-center rounded-sm bg-paper text-ink">
92 <QrCode weight="bold" className="size-[18px]" aria-hidden />
93 </span>
94 </div>
95 </div>
96
97 <div className="flex w-full max-w-[148px] flex-[0_1_148px] translate-y-[18px] rotate-4 flex-col gap-2 rounded-thumb border-3 border-ink bg-paper p-2.5 pb-3 shadow-hard-lg">
98 {CONTOH_GARIS.map((warna) => (
99 <FotoContoh
100 key={warna}
101 className={cn("border-2 border-ink", warna)}
102 />
103 ))}
104 <span className="pt-0.5 font-display text-xs font-black text-ink">
105 snapme
106 </span>
107 </div>
108 </div>
109 </div>
110 </section>
111
112 <section className="flex flex-col gap-4 pt-2">
113 <h2 className="heading text-ink">Tiga cara baru buat foto bareng</h2>
114 <div className="flex flex-wrap gap-5">
115 <article className="flex flex-[2_1_460px] flex-wrap items-center gap-7 rounded-panel border-3 border-ink bg-ink p-7 text-paper shadow-hard-violet">
116 <div className="flex flex-[1_1_240px] flex-col gap-3">
117 <Badge variant="lime" className="self-start">
118 Interaktif
119 </Badge>
120 <h3 className="title text-lime">Gesture Snap</h3>
121 <p className="max-w-[40ch] text-base leading-[1.5]">
122 Angkat dua jari dan tahan sebentar. Hitung mundur jalan
123 sendiri, jadi tidak ada yang perlu lari ke tombol.
124 </p>
125 </div>
126 <div className="flex flex-[1_1_220px] flex-col gap-2.5 font-bold">
127 <span className="flex items-center gap-3 rounded-card bg-lime px-3.5 py-2.5 text-ink">
128 <HandPeace weight="bold" className="size-7" aria-hidden />
129 Dua jari: foto
130 </span>
131 <span className="flex items-center gap-3 rounded-card border-2 border-paper px-3.5 py-2.5">
132 <HandPalm weight="bold" className="size-7" aria-hidden />
133 Telapak: ulang
134 </span>
135 <span className="flex items-center gap-3 rounded-card border-2 border-paper px-3.5 py-2.5">
136 <ThumbsUp weight="bold" className="size-7" aria-hidden />
137 Jempol: lanjut
138 </span>
139 </div>
140 </article>
141
142 <article className="flex flex-[1_1_260px] flex-col gap-3 rounded-panel border-3 border-ink bg-violet-soft p-6 shadow-hard-lg">
143 <Users weight="bold" className="size-9 text-ink" aria-hidden />
144 <h3 className="title text-ink">Strip Estafet</h3>
145 <p className="text-base leading-[1.5]">
146 Isi setengah strip, kirim link, lalu temanmu melengkapi dari
147 HP-nya kapan saja dalam 48 jam.
148 </p>
149 <div className="flex gap-1.5 pt-1" aria-hidden>
150 <div className="h-9 flex-1 rounded-sm border-2 border-ink bg-pink" />
151 <div className="h-9 flex-1 rounded-sm border-2 border-ink bg-pink" />
152 <div className="h-9 flex-1 rounded-sm border-2 border-dashed border-ink" />
153 <div className="h-9 flex-1 rounded-sm border-2 border-dashed border-ink" />
154 </div>
155 </article>
156
157 <article className="flex flex-[1_1_260px] flex-col gap-3 rounded-panel border-3 border-ink bg-paper p-6 shadow-hard-lg">
158 <FilmStrip
159 weight="bold"
160 className="size-9 text-ink"
161 aria-hidden
162 />
163 <h3 className="title text-ink">Strip Hidup</h3>
164 <p className="text-base leading-[1.5]">
165 Tiap pose ikut terekam sebentar. Pindai QR di strip cetak
166 untuk melihat versi bergeraknya.
167 </p>
168 </article>
169 </div>
170 </section>
171
172 <section className="flex flex-col gap-4 rounded-panel border-3 border-ink bg-paper p-6">
173 <h2 className="title text-ink">Dari kamera sampai cetak</h2>
174 <div className="flex flex-wrap items-center gap-3">
175 {LANGKAH.map((langkah) => (
176 <span key={langkah} className="flex items-center gap-3">
177 <span className="inline-flex min-h-11 items-center rounded-pill border-2 border-ink bg-cream px-4 font-bold">
178 {langkah}
179 </span>
180 <ArrowRight weight="bold" className="size-5" aria-hidden />
181 </span>
182 ))}
183 <span className="inline-flex min-h-11 items-center rounded-pill border-2 border-ink bg-lime px-4 font-bold">
184 Unduh atau cetak
185 </span>
186 </div>
187 </section>
188 </main>
189
190 <footer className="flex flex-wrap items-center gap-3 px-1 pt-1">
191 <Lock weight="bold" className="size-[22px]" aria-hidden />
192 <p className="flex-[1_1_320px] text-[15px] leading-[1.5]">
193 Foto diproses di perangkatmu. Baru diunggah kalau kamu sendiri
194 membuat link, lalu terhapus otomatis setelah 7 hari.
195 </p>
196 </footer>
197 </div>
198 </div>
199 )
200}
201