phantomknight287/saturn

public

The operating system for your freelance business.

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