phantomknight287/saturn

public

The operating system for your freelance business.

update landing page236f8a36 months ago497 lines · 17.8 KB

1	/** biome-ignore-all lint/correctness/useUniqueElementIds: anchor ids for in-page nav */
2
3	'use client'
4	import { ArrowDown, ArrowRight
5	import Link from 'next/link
6
7	import { SaturnLogo }
8	import { buttonVariants }
9	import {
10	comparison,
11	faq,
12	freePlanFeatures,
13	howItWorks,
14	modules,
15	proPlanFeatures,
16	} from './_landing/data'
17	import { LandingNav }
18	import { MockAnalytics }
19	import { MockAppUI }
20	import { MockExpenseCard }
21	import { MockInvoiceCard }
22	import { MockProposalCard }
23	import { MockTimer }
24	import { MockTimesheetCard }
25
26	export default function LandingPageClient
27	githubStars,
28	}: {
29	githubStars: number
30	}) {
31	return (
32	<div className='min-h-svh w-full bg-background text-foreground
33	<LandingNav githubStars={
34
35	{/* HERO */}
36	<section className='relative overflow-hidden border-border/60 border-b
37	<div className='relative mx-auto max-w-6xl px-6 pt-24 pb-10 sm:pt-32
38	<div className='max-w-3xl
39	<div className='mb-6 inline-flex items-center gap-2 font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
40	<span className='h-px w-6 bg-muted-foreground/40
41	Saturn — for freelancers & small agencies
42	</div>
43	<h1 className='font-semibold text-5xl text-foreground leading-[0.98] tracking-[-0.04em] sm:text-6xl
44	Run your freelance business
45	<br />
46	<span className='text-muted-foreground/80 italic
47	from one tab.
48	</span>
49	</h1>
50	<p className='mt-8 max-w-xl text-lg text-muted-foreground leading-relaxed
51	Projects, clients, proposals, time tracking, timesheets, expenses,
52	and invoices — one login instead of seven subscriptions.
53	</p>
54	<div className='mt-10 flex items-center gap-3
55	<Link
56	className={buttonVariants({
57	href='/auth/sign-up'
58	>
59	Start for free
60	<ArrowRight className='
61	</Link>
62	<Link
63	className='inline-flex items-center gap-1.5 text-foreground/80 text-sm hover:text-foreground'
64	href='#features'
65	>
66	Features
67	<ArrowDown className='
68	</Link>
69	</div>
70
71	<div className='mt-12 flex flex-wrap items-center gap-x-2 gap-y-2 font-mono text-[11px] text-muted-foreground uppercase tracking-[0.14em]
72	{[
73	'Projects',
74	'Clients',
75	'Team',
76	'Proposals',
77	'Time',
78	'Timesheets',
79	'Expenses',
80	'Invoices',
81	].map((chip
82	<span className='flex items-center gap-2
83	{i > 0
84	<span className='h-1 w-1 rounded-full bg-muted-foreground/40
85	)}
86	{chip}
87	</span>
88	))}
89	</div>
90	</div>
91	</div>
92
93	{/* product shot */}
94	<div className='relative mx-auto max-w-6xl px-6 pb-0
95	<div className='relative
96	<div
97	aria-hidden
98	className='pointer-events-none absolute top-10 left-1/2 -z-10 h-64 w-[90%] -translate-x-1/2 rounded-full bg-primary/20 blur-3xl'
99	/>
100	<MockAppUI />
101	<div
102	aria-hidden
103	className='pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-b from-transparent to-background'
104	/>
105	</div>
106	</div>
107	</section>
108
109	{/* MODULES OVERVIEW */}
110	<section className='border-border/60 border-b
111	<div className='mx-auto max-w-6xl px-6 py-20 sm:py-24
112	<div className='mb-12 max-w-2xl
113	<div className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
114	/ everything inside
115	</div>
116	<h2 className='mt-3 font-semibold text-3xl leading-[1.05] tracking-[-0.03em] sm:text-4xl
117	Eight modules.{' '}
118	<span className='text-muted-foreground/70
119	</h2>
120	</div>
121	<div className='grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2 lg:grid-cols-4
122	{modules.map((
123	<div
124	className='flex flex-col gap-2 border-border/60 border-t pt-5'
125	key={m.name
126	>
127	<m.icon className='
128	<div className='mt-1 font-medium text-foreground text-sm tracking-tight
129	{m.name}
130	</div>
131	<p className='text-muted-foreground text-sm leading-relaxed
132	{m.blurb}
133	</p>
134	</div>
135	))}
136	</div>
137	</div>
138	</section>
139
140	{/* BENTO */}
141	<section
142	className='mx-auto max-w-6xl px-6 pt-24 pb-24 sm:pt-32'
143	id='features'
144	>
145	<div className='mb-14 flex items-end justify-between gap-6
146	<div>
147	<div className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
148	/ a closer look
149	</div>
150	<h2 className='mt-3 max-w-2xl font-semibold text-4xl text-foreground leading-[1.02] tracking-[-0.03em] sm:text-5xl
151	A tab each for the work
152	<br />
153	<span className='text-muted-foreground/70
154	you used to do in seven.
155	</span>
156	</h2>
157	</div>
158	</div>
159
160	<div className='grid grid-cols-1 gap-3 md:grid-cols-6
161	{/* Proposals — large */}
162	<BentoCard
163	className='md:col-span-4 md:row-span-2'
164	description='Draft proposals inside Saturn, send them to clients, and collect signatures without a separate DocuSign tab.'
165	title='Write it. Send it. Get it signed.'
166	>
167	<div className='relative mt-6 h-[250px] overflow-hidden rounded-lg border border-border/60 bg-card/60 p-6
168	<MockProposalCard />
169	</div>
170	</BentoCard>
171
172	{/* Timer */}
173	<BentoCard
174	className='md:col-span-2'
175	description='Time tracked inside the platform, auto-attached to the right project.'
176	title='Press record.'
177	>
178	<MockTimer />
179	</BentoCard>
180
181	{/* Analytics */}
182	<BentoCard
183	className='md:col-span-2'
184	description='Revenue, hours, and overdue invoices the moment you log in.'
185	title='Know the month at a glance.'
186	>
187	<MockAnalytics />
188	</BentoCard>
189
190	{/* Timesheet */}
191	<BentoCard
192	className='md:col-span-2'
193	description='Log weekly or let the timer do it. Export reports when clients ask.'
194	title='Hours that become invoice lines.'
195	>
196	<MockTimesheetCard />
197	</BentoCard>
198
199	{/* Expenses */}
200	<BentoCard
201	className='md:col-span-2'
202	description='Log what you spent, tag it billable, and attach it to the next invoice.'
203	title='Expenses that bill themselves.'
204	>
205	<MockExpenseCard />
206	</BentoCard>
207
208	{/* Invoice */}
209	<BentoCard
210	className='md:col-span-2'
211	description='Lines pull from timesheets and expenses. Export PDF. Track paid status.'
212	title='One click from hours to paid.'
213	>
214	<MockInvoiceCard />
215	</BentoCard>
216	</div>
217	</section>
218
219	{/* HOW IT WORKS */}
220	<section className='border-border/60 border-y bg-secondary/20
221	<div className='mx-auto max-w-6xl px-6 py-24 sm:py-28
222	<div className='mb-14 max-w-2xl
223	<div className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
224	/ how it works
225	</div>
226	<h2 className='mt-3 font-semibold text-4xl leading-[1.02] tracking-[-0.03em] sm:text-5xl
227	Three steps,{' '}
228	<span className='text-muted-foreground/70 italic
229	start to paid.
230	</span>
231	</h2>
232	</div>
233	<div className='grid grid-cols-1 gap-3 md:grid-cols-3
234	{howItWorks.map((
235	<div
236	className='flex flex-col rounded-2xl border border-border/60 bg-card p-7'
237	key={s.step
238	>
239	<div className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
240	{s.step}
241	</div>
242	<h3 className='mt-6 font-medium text-foreground text-xl tracking-[-0.02em]
243	{s.title}
244	</h3>
245	<p className='mt-2 text-muted-foreground text-sm leading-relaxed
246	{s.body}
247	</p>
248	</div>
249	))}
250	</div>
251	</div>
252	</section>
253
254	{/* COMPARISON */}
255	<section className='mx-auto max-w-5xl px-6 py-24 sm:py-28
256	<div className='mb-12 max-w-2xl
257	<div className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
258	/ vs. the stack
259	</div>
260	<h2 className='mt-3 font-semibold text-4xl leading-[1.02] tracking-[-0.03em] sm:text-5xl
261	Seven tools,{' '}
262	<span className='text-muted-foreground/70 italic
263	or just this one.
264	</span>
265	</h2>
266	</div>
267	<div className='overflow-hidden rounded-2xl border border-border/60
268	<div className='grid grid-cols-[1.2fr_1fr_1fr] items-center bg-muted/30 px-5 py-3 font-mono text-[11px] text-muted-foreground uppercase tracking-[0.14em]
269	<span>What you need</span>
270	<span className='flex items-center gap-1.5
271	<Minus className='
272	Stitching it together
273	</span>
274	<span className='flex items-center gap-1.5 text-primary
275	<SaturnLogo className='
276	Saturn
277	</span>
278	</div>
279	{comparison.map((
280	<div
281	className={`grid grid-cols-[1.2fr_1fr_1fr] items-center px-5 py-4 text-sm ${
282	i !== comparison.
283	}`}
284	key={row.need
285	>
286	<span className='font-medium text-foreground
287	<span className='text-muted-foreground
288	<span className='flex items-center gap-1.5 text-foreground
289	<Check className='
290	{row.saturn}
291	</span>
292	</div>
293	))}
294	</div>
295	</section>
296
297	{/* PRICING */}
298	<section
299	className='relative border-border/60 border-y bg-secondary/20'
300	id='pricing'
301	>
302	<div className='mx-auto max-w-5xl px-6 py-24 sm:py-28
303	<div className='mb-14 max-w-xl
304	<div className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
305	/ pricing
306	</div>
307	<h2 className='mt-3 font-semibold text-4xl leading-[1.02] tracking-[-0.03em] sm:text-5xl
308	Three dollars, no seats.
309	</h2>
310	<p className='mt-4 text-lg text-muted-foreground
311	Every feature works on Free. Pro removes the limits.
312	</p>
313	</div>
314	<div className='grid gap-3 sm:grid-cols-2
315	<PricingCard
316	cta='Get started'
317	ctaVariant='outline'
318	description='Enough to run a small practice.'
319	features={freePlanFeatures}
320	name='Free'
321	price='$0'
322	suffix='forever'
323	/>
324	<PricingCard
325	badge='Recommended'
326	cta='Start with Pro'
327	description='For when projects and clients start stacking up.'
328	features={proPlanFeatures}
329	name='Pro'
330	price='$3'
331	suffix='/ month'
332	/>
333	</div>
334	<p className='mt-6 font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
335	No credit card required
336	</p>
337	</div>
338	</section>
339
340	{/* FAQ */}
341	<section className='mx-auto max-w-3xl px-6 py-24 sm:py-28
342	<div className='mb-12
343	<div className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
344	/ faq
345	</div>
346	<h2 className='mt-3 font-semibold text-4xl leading-[1.02] tracking-[-0.03em] sm:text-5xl
347	Questions,{' '}
348	<span className='text-muted-foreground/70 italic
349	</h2>
350	</div>
351	<div className='divide-y divide-border/60 border-border/60 border-y
352	{faq.map((
353	<details className='group py-5
354	<summary className='flex cursor-pointer items-center justify-between gap-6 font-medium text-base text-foreground tracking-tight
355	{item.q}
356	<span className='font-mono text-muted-foreground text-xs transition-transform group-open:rotate-45
357	+
358	</span>
359	</summary>
360	<p className='mt-3 text-muted-foreground text-sm leading-relaxed
361	{item.a}
362	</p>
363	</details>
364	))}
365	</div>
366	</section>
367
368	{/* CTA */}
369	<section className='mx-auto max-w-3xl px-6 py-28 text-center sm:py-36
370	<h2 className='font-semibold text-4xl leading-[1.02] tracking-[-0.04em] sm:text-6xl
371	Two minutes to
372	<br />
373	<span className='text-muted-foreground/80 italic
374	your first project.
375	</span>
376	</h2>
377	<div className='mt-10 flex items-center justify-center gap-3
378	<Link className={
379	Start for free
380	<ArrowRight className='
381	</Link>
382	</div>
383	</section>
384
385	<footer className='border-border/60 border-t
386	<div className='mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-6 py-6
387	<div className='flex items-center gap-2
388	<SaturnLogo className='
389	<span className='text-muted-foreground text-sm
390	</div>
391	<div className='flex items-center gap-5
392	<a
393	className='inline-flex items-center gap-1.5 text-muted-foreground text-sm transition-colors hover:text-foreground'
394	href='https://github.com/phantomknight287/saturn'
395	rel='noreferrer noopener'
396	target='_blank'
397	>
398	<Github className='
399	GitHub
400	</a>
401	<p className='font-mono text-[11px] text-muted-foreground uppercase tracking-[0.18em]
402	© {new
403	</p>
404	</div>
405	</div>
406	</footer>
407	</div>
408	)
409	}
410
411	function BentoCard({
412	className,
413	title,
414	description,
415	children,
416	}: {
417	className?: string
418	title: string
419	description: string
420	children: React
421	}) {
422	return (
423	<div
424	className={`group relative flex flex-col overflow-hidden rounded-2xl border border-border/60 bg-card p-7 transition-colors hover:border-border ${className
425	>
426	<h3 className='font-medium text-foreground text-xl tracking-[-0.02em]
427	{title}
428	</h3>
429	<p className='mt-2 max-w-md text-muted-foreground text-sm leading-relaxed
430	{description}
431	</p>
432	<div className='mt-6 flex-1
433	</div>
434	)
435	}
436
437	function PricingCard({
438	name,
439	price,
440	suffix,
441	description,
442	features,
443	cta,
444	ctaVariant = 'default'
445	badge,
446	}: {
447	name: string
448	price: string
449	suffix: string
450	description: string
451	features: readonly
452	cta: string
453	ctaVariant?: '
454	badge?: string
455	}) {
456	return (
457	<div className='flex flex-col rounded-2xl border border-border/60 bg-card p-7
458	<div className='flex items-center gap-2
459	<span className='font-medium text-base tracking-tight
460	{badge && (
461	<span className='rounded-full bg-primary/10 px-2 py-0.5 font-mono text-[10px] text-primary uppercase tracking-wider
462	{badge}
463	</span>
464	)}
465	</div>
466	<div className='mt-4 flex items-baseline gap-1.5
467	<span className='font-semibold text-5xl tracking-[-0.04em]
468	{price}
469	</span>
470	<span className='text-muted-foreground text-sm
471	</div>
472	<p className='mt-3 text-muted-foreground text-sm
473	<div className='mt-6 space-y-2.5 border-border/60 border-t pt-6
474	{features.map((
475	<div
476	className='flex items-center gap-2.5 text-foreground/80 text-sm'
477	key={f}
478	>
479	<Check className='
480	{f}
481	</div>
482	))}
483	</div>
484	<div className='mt-8
485	<Link
486	className={buttonVariants({
487	variant: ctaVariant,
488	className: 'w-full',
489	})}
490	href='/auth/sign-up'
491	>
492	{cta}
493	</Link>
494	</div>
495	</div>
496	)
497	}