| 1 | 'use client' |
| 2 | import { |
| 3 | ArrowRight, |
| 4 | Check, |
| 5 | Code, |
| 6 | Eye, |
| 7 | Lock, |
| 8 | MessageSquare, |
| 9 | Palette, |
| 10 | Pen, |
| 11 | PenTool, |
| 12 | Send, |
| 13 | Users, |
| 14 | Video, |
| 15 | } from 'lucide-react' |
| 16 | import Link from 'next/link |
| 17 | |
| 18 | import { SaturnLogo } |
| 19 | import { buttonVariants } |
| 20 | import { |
| 21 | capabilities, |
| 22 | clientFeatures, |
| 23 | freelancerTypes, |
| 24 | freePlanFeatures, |
| 25 | proPlanFeatures, |
| 26 | roles, |
| 27 | workflowSteps, |
| 28 | } from './_landing/data' |
| 29 | import { DotPattern } |
| 30 | import { LandingNav } |
| 31 | import { MockAppUI } |
| 32 | import { MockInvoiceUI } |
| 33 | import { MockRequirementUI } |
| 34 | import { MockTimesheetUI } |
| 35 | |
| 36 | const freelancerIcons = { |
| 37 | const clientIcons = { |
| 38 | |
| 39 | export default function LandingPageClient |
| 40 | return ( |
| 41 | <div className='min-h-svh w-full bg-background text-foreground |
| 42 | <LandingNav /> |
| 43 | |
| 44 | <section className='relative overflow-hidden |
| 45 | <DotPattern className=' |
| 46 | <div className='relative mx-auto grid max-w-7xl gap-16 px-6 pt-20 pb-20 lg:grid-cols-2 lg:gap-12 lg:pt-28 |
| 47 | <div className='flex flex-col justify-center |
| 48 | <h1 className='text-center font-bold text-4xl tracking-tight md:text-left lg:text-5xl |
| 49 | The operating system for your freelance business |
| 50 | </h1> |
| 51 | <p className='mt-5 max-w-lg text-center text-lg text-muted-foreground leading-relaxed md:text-left |
| 52 | Saturn brings projects, timesheets, invoices, and client |
| 53 | management into one place. No more spreadsheets. No more chasing |
| 54 | emails. Just open Saturn and get to work. |
| 55 | </p> |
| 56 | <div className='mt-8 flex items-center justify-center gap-3 md:justify-start |
| 57 | <Link |
| 58 | className={buttonVariants({ |
| 59 | href='/auth/sign-up' |
| 60 | > |
| 61 | Start for free |
| 62 | <ArrowRight className=' |
| 63 | </Link> |
| 64 | <Link |
| 65 | className={buttonVariants({ |
| 66 | href='#how-it-works' |
| 67 | > |
| 68 | See how it works |
| 69 | </Link> |
| 70 | </div> |
| 71 | </div> |
| 72 | <div className='relative lg:pt-4 |
| 73 | <MockAppUI /> |
| 74 | </div> |
| 75 | </div> |
| 76 | </section> |
| 77 | |
| 78 | <section className='border-border border-y bg-secondary/40 |
| 79 | <div className='mx-auto max-w-7xl px-6 py-24 |
| 80 | <div className='mb-14 |
| 81 | <h2 className='font-bold text-3xl tracking-tight |
| 82 | What you can do with Saturn |
| 83 | </h2> |
| 84 | <p className='mt-2 max-w-lg text-muted-foreground |
| 85 | Six modules that cover the full lifecycle of a freelance project. |
| 86 | </p> |
| 87 | </div> |
| 88 | <div className='grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-3 |
| 89 | {capabilities.map(( |
| 90 | <div className='bg-card p-6 |
| 91 | <cap.icon className=' |
| 92 | <h3 className='mb-1.5 font-semibold |
| 93 | <p className='text-muted-foreground text-sm leading-relaxed |
| 94 | {cap.desc} |
| 95 | </p> |
| 96 | </div> |
| 97 | ))} |
| 98 | </div> |
| 99 | </div> |
| 100 | </section> |
| 101 | |
| 102 | <section className='relative |
| 103 | <DotPattern className=' |
| 104 | <div className='relative mx-auto max-w-7xl px-6 py-24 |
| 105 | <div className='mb-14 |
| 106 | <h2 className='font-bold text-3xl tracking-tight |
| 107 | From tracked hours to paid invoices |
| 108 | </h2> |
| 109 | <p className='mt-2 max-w-lg text-muted-foreground |
| 110 | Log time against requirements. Generate invoices from that data. |
| 111 | Send them to clients. Done. |
| 112 | </p> |
| 113 | </div> |
| 114 | <div className='grid gap-10 lg:grid-cols-2 lg:gap-16 |
| 115 | <MockTimesheetUI /> |
| 116 | <MockInvoiceUI /> |
| 117 | </div> |
| 118 | <div className='mt-12 grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-3 |
| 119 | {workflowSteps.map(( |
| 120 | <div className='bg-card p-6 |
| 121 | <span className='mb-3 inline-block font-mono text-primary text-xs |
| 122 | {s.step} |
| 123 | </span> |
| 124 | <h3 className='mb-1.5 font-semibold |
| 125 | <p className='text-muted-foreground text-sm leading-relaxed |
| 126 | {s.desc} |
| 127 | </p> |
| 128 | </div> |
| 129 | ))} |
| 130 | </div> |
| 131 | </div> |
| 132 | </section> |
| 133 | |
| 134 | <section className='border-border border-y bg-secondary/40 |
| 135 | <div className='mx-auto max-w-7xl px-6 py-24 |
| 136 | <div className='grid gap-16 lg:grid-cols-2 |
| 137 | <div> |
| 138 | <h2 className='font-bold text-3xl tracking-tight |
| 139 | Write requirements. Get them signed. |
| 140 | </h2> |
| 141 | <p className='mt-3 max-w-md text-muted-foreground |
| 142 | Saturn has a full rich-text editor for writing project |
| 143 | requirements. When they're ready, send them to your client |
| 144 | for review. Clients can request changes, leave threaded |
| 145 | comments, or sign off with a digital signature — all without |
| 146 | leaving Saturn. |
| 147 | </p> |
| 148 | <div className='mt-8 space-y-4 |
| 149 | {[ |
| 150 | { |
| 151 | icon: Pen, |
| 152 | text: 'Write requirements with a rich-text editor — images, code blocks, and all', |
| 153 | }, |
| 154 | { |
| 155 | icon: Send, |
| 156 | text: "Send to clients for review when you're ready", |
| 157 | }, |
| 158 | { |
| 159 | icon: MessageSquare, |
| 160 | text: 'Clients leave threaded comments or request changes inline', |
| 161 | }, |
| 162 | { |
| 163 | icon: PenTool, |
| 164 | text: 'Collect digital signatures once requirements are approved', |
| 165 | }, |
| 166 | ].map((item |
| 167 | <div className='flex gap-3 |
| 168 | <item.icon className=' |
| 169 | <span className='text-muted-foreground text-sm |
| 170 | {item.text} |
| 171 | </span> |
| 172 | </div> |
| 173 | ))} |
| 174 | </div> |
| 175 | </div> |
| 176 | <MockRequirementUI /> |
| 177 | </div> |
| 178 | </div> |
| 179 | </section> |
| 180 | |
| 181 | <section> |
| 182 | <div className='mx-auto max-w-7xl px-6 py-24 |
| 183 | <h2 className='font-bold text-3xl tracking-tight |
| 184 | Roles that match how teams actually work |
| 185 | </h2> |
| 186 | <p className='mt-3 max-w-lg text-muted-foreground |
| 187 | Four roles with fine-grained permissions. Your team sees exactly |
| 188 | what they need — nothing more. Clients register on the same platform |
| 189 | with scoped access to their assigned projects. |
| 190 | </p> |
| 191 | <div className='mt-12 grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-4 |
| 192 | {roles.map(( |
| 193 | <div className='bg-card p-6 |
| 194 | <div className='mb-1 font-semibold |
| 195 | <p className='text-muted-foreground text-sm |
| 196 | <div className='mt-4 space-y-1.5 |
| 197 | {r.permissions.map |
| 198 | <div |
| 199 | className='flex items-center gap-2 text-muted-foreground text-xs' |
| 200 | key={p} |
| 201 | > |
| 202 | <Check className=' |
| 203 | {p} |
| 204 | </div> |
| 205 | ))} |
| 206 | </div> |
| 207 | </div> |
| 208 | ))} |
| 209 | </div> |
| 210 | </div> |
| 211 | </section> |
| 212 | |
| 213 | <section className='relative border-border border-y bg-secondary/40 |
| 214 | <DotPattern className=' |
| 215 | <div className='relative mx-auto max-w-7xl px-6 py-24 |
| 216 | <h2 className='font-bold text-3xl tracking-tight |
| 217 | Built for every kind of freelancer |
| 218 | </h2> |
| 219 | <p className='mt-3 max-w-lg text-muted-foreground |
| 220 | Whether you're a solo developer or a design agency with 20 |
| 221 | people, Saturn adapts to how you work. |
| 222 | </p> |
| 223 | <div className='mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4 |
| 224 | {freelancerTypes.map(( |
| 225 | const Icon = |
| 226 | return ( |
| 227 | <div |
| 228 | className='rounded-xl border border-border bg-card p-5' |
| 229 | key={cat.title |
| 230 | > |
| 231 | <Icon className=' |
| 232 | <h3 className='mb-3 font-semibold |
| 233 | <ul className='space-y-2 |
| 234 | {cat.points.map |
| 235 | <li |
| 236 | className='flex gap-2 text-muted-foreground text-sm' |
| 237 | key={point} |
| 238 | > |
| 239 | <span className='mt-1.5 size-1 shrink-0 rounded-full bg-primary |
| 240 | {point} |
| 241 | </li> |
| 242 | ))} |
| 243 | </ul> |
| 244 | </div> |
| 245 | ) |
| 246 | })} |
| 247 | </div> |
| 248 | </div> |
| 249 | </section> |
| 250 | |
| 251 | <section> |
| 252 | <div className='mx-auto max-w-7xl px-6 py-24 |
| 253 | <h2 className='font-bold text-3xl tracking-tight |
| 254 | Your clients use the same platform |
| 255 | </h2> |
| 256 | <p className='mt-3 max-w-lg text-muted-foreground |
| 257 | No separate portal. Clients register on Saturn and get invited to |
| 258 | your projects. Their role scopes what they can see — milestone |
| 259 | progress, requirements to sign, invoices to review — while your |
| 260 | internal timesheets and team rates stay private. |
| 261 | </p> |
| 262 | <div className='mt-12 grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-4 |
| 263 | {clientFeatures.map(( |
| 264 | const Icon = |
| 265 | return ( |
| 266 | <div className='bg-card p-5 |
| 267 | <Icon className=' |
| 268 | <div className='mb-1 font-semibold text-sm |
| 269 | <p className='text-muted-foreground text-xs leading-relaxed |
| 270 | {item.desc} |
| 271 | </p> |
| 272 | </div> |
| 273 | ) |
| 274 | })} |
| 275 | </div> |
| 276 | </div> |
| 277 | </section> |
| 278 | |
| 279 | <section |
| 280 | className='relative border-border border-y bg-secondary/40' |
| 281 | id='pricing' |
| 282 | > |
| 283 | <DotPattern className=' |
| 284 | <div className='relative mx-auto max-w-4xl px-6 py-24 |
| 285 | <div className='mb-14 text-center |
| 286 | <h2 className='font-bold text-3xl tracking-tight |
| 287 | Simple pricing. No per-seat nonsense. |
| 288 | </h2> |
| 289 | <p className='mt-3 text-muted-foreground |
| 290 | Every feature works on Free. Pro removes limits and adds API |
| 291 | access for teams that want to automate. |
| 292 | </p> |
| 293 | </div> |
| 294 | <div className='grid gap-px overflow-hidden rounded-xl border border-border bg-border sm:grid-cols-2 |
| 295 | <div className='flex flex-col bg-card p-8 |
| 296 | <div className='mb-1 font-semibold text-lg |
| 297 | <div className='mb-4 flex items-baseline gap-1 |
| 298 | <span className='font-bold text-3xl tracking-tight |
| 299 | <span className='text-muted-foreground text-sm |
| 300 | </div> |
| 301 | <p className='mb-6 text-muted-foreground text-sm |
| 302 | Everything you need to manage a small freelance practice. |
| 303 | </p> |
| 304 | <div className='mb-8 space-y-3 |
| 305 | {freePlanFeatures.map(( |
| 306 | <div className='flex items-center gap-2.5 text-sm |
| 307 | <Check className=' |
| 308 | {f} |
| 309 | </div> |
| 310 | ))} |
| 311 | </div> |
| 312 | <div className='mt-auto |
| 313 | <Link |
| 314 | className={buttonVariants({ |
| 315 | variant: 'outline', |
| 316 | size: 'lg', |
| 317 | className: 'w-full', |
| 318 | })} |
| 319 | href='/auth/sign-up' |
| 320 | > |
| 321 | Get started |
| 322 | </Link> |
| 323 | </div> |
| 324 | </div> |
| 325 | <div className='flex flex-col bg-card p-8 |
| 326 | <div className='mb-1 flex items-center gap-2 |
| 327 | <span className='font-semibold text-lg |
| 328 | <span className='rounded-md bg-primary/10 px-2 py-0.5 font-medium text-primary text-xs |
| 329 | Recommended |
| 330 | </span> |
| 331 | </div> |
| 332 | <div className='mb-4 flex items-baseline gap-1 |
| 333 | <span className='font-bold text-3xl tracking-tight |
| 334 | <span className='text-muted-foreground text-sm |
| 335 | </div> |
| 336 | <p className='mb-6 text-muted-foreground text-sm |
| 337 | For freelancers and agencies that need room to grow. |
| 338 | </p> |
| 339 | <div className='mb-8 space-y-3 |
| 340 | {proPlanFeatures.map(( |
| 341 | <div className='flex items-center gap-2.5 text-sm |
| 342 | <Check className=' |
| 343 | {f} |
| 344 | </div> |
| 345 | ))} |
| 346 | </div> |
| 347 | <div className='mt-auto |
| 348 | <Link |
| 349 | className={buttonVariants({ |
| 350 | size: 'lg', |
| 351 | className: 'w-full', |
| 352 | })} |
| 353 | href='/auth/sign-up' |
| 354 | > |
| 355 | Start with Pro |
| 356 | </Link> |
| 357 | </div> |
| 358 | </div> |
| 359 | </div> |
| 360 | <p className='mt-6 text-center text-muted-foreground text-sm |
| 361 | No credit card required. No feature gates on core functionality. |
| 362 | </p> |
| 363 | </div> |
| 364 | </section> |
| 365 | |
| 366 | <section className='mx-auto max-w-2xl px-6 py-24 text-center |
| 367 | <h2 className='font-bold text-3xl tracking-tight |
| 368 | Stop juggling tools. |
| 369 | <br /> |
| 370 | Start running your business. |
| 371 | </h2> |
| 372 | <p className='mt-4 text-lg text-muted-foreground |
| 373 | Saturn is free to get started. Set up your first project in under two |
| 374 | minutes. |
| 375 | </p> |
| 376 | <div className='mt-8 |
| 377 | <Link className={ |
| 378 | Get started for free |
| 379 | <ArrowRight className=' |
| 380 | </Link> |
| 381 | </div> |
| 382 | </section> |
| 383 | |
| 384 | <footer className='border-border border-t bg-secondary/40 |
| 385 | <div className='mx-auto flex max-w-7xl items-center justify-between px-6 py-6 |
| 386 | <div className='flex items-center gap-2 |
| 387 | <SaturnLogo className=' |
| 388 | <span className='text-muted-foreground text-sm |
| 389 | </div> |
| 390 | <p className='text-muted-foreground text-xs |
| 391 | © {new |
| 392 | </p> |
| 393 | </div> |
| 394 | </footer> |
| 395 | </div> |
| 396 | ) |
| 397 | } |