1import { createFileRoute } from "@tanstack/react-router";
2
3export const Route = createFileRoute("/")({ component: App });
4
5function App() {
6 return (
7 <main className="page-wrap px-4 pb-8 pt-14">
8 <section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
9 <div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
10 <div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
11 <p className="island-kicker mb-3">TanStack Start Base Template</p>
12 <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
13 Start simple, ship quickly.
14 </h1>
15 <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
16 This base starter intentionally keeps things light: two routes, clean
17 structure, and the essentials you need to build from scratch.
18 </p>
19 <div className="flex flex-wrap gap-3">
20 <a
21 href="/about"
22 className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
23 >
24 About This Starter
25 </a>
26 <a
27 href="https://tanstack.com/router"
28 target="_blank"
29 rel="noopener noreferrer"
30 className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
31 >
32 Router Guide
33 </a>
34 </div>
35 </section>
36
37 <section className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
38 {[
39 [
40 "Type-Safe Routing",
41 "Routes and links stay in sync across every page.",
42 ],
43 [
44 "Server Functions",
45 "Call server code from your UI without creating API boilerplate.",
46 ],
47 [
48 "Streaming by Default",
49 "Ship progressively rendered responses for faster experiences.",
50 ],
51 [
52 "Tailwind Native",
53 "Design quickly with utility-first styling and reusable tokens.",
54 ],
55 ].map(([title, desc], index) => (
56 <article
57 key={title}
58 className="island-shell feature-card rise-in rounded-2xl p-5"
59 style={{ animationDelay: `${index * 90 + 80}ms` }}
60 >
61 <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">
62 {title}
63 </h2>
64 <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
65 </article>
66 ))}
67 </section>
68
69 <section className="island-shell mt-8 rounded-2xl p-6">
70 <p className="island-kicker mb-2">Quick Start</p>
71 <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
72 <li>
73 Edit <code>src/routes/index.tsx</code> to customize the home page.
74 </li>
75 <li>
76 Update <code>src/components/Header.tsx</code> and{" "}
77 <code>src/components/Footer.tsx</code> for brand links.
78 </li>
79 <li>
80 Add routes in <code>src/routes</code> and tweak visual tokens in{" "}
81 <code>src/styles.css</code>.
82 </li>
83 </ul>
84 </section>
85 </main>
86 );
87}