add fonts and some basic routes

apps/web/CLAUDE.md

@@ -0,0 +1,5 @@
+# ZENDEGI WEB APP
+
+Zendegi is a web app for creating and exploring timelines. They could be personal or professional.
+
+The timelines are shown horizontally and are interactive.

apps/web/package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.0.0",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource/instrument-serif": "^5.2.8",
     "@tailwindcss/vite": "^4.1.8",
     "@tanstack/react-form": "^1.23.5",
     "@tanstack/react-query": "^5.80.6",

apps/web/src/components/header.tsx

@@ -6,6 +6,7 @@ export default function Header() {
   const links = [
     { to: "/", label: "Home" },
     { to: "/dashboard", label: "Dashboard" },
+    { to: "/timelines", label: "Timelines" },
   ] as const;
 
   return (

apps/web/src/index.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
+@import "@fontsource-variable/inter";
+@import "@fontsource/instrument-serif";
+
 @custom-variant dark (&:is(.dark *));
 
 :root {
@@ -74,6 +77,7 @@
 
 @theme inline {
   --font-sans: "Inter Variable", sans-serif;
+  --font-mono: "Instrument Serif", monospace;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);

apps/web/src/routeTree.gen.ts

@@ -9,12 +9,25 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as TimelinesRouteImport } from './routes/timelines'
+import { Route as TimelineRouteImport } from './routes/timeline'
 import { Route as LoginRouteImport } from './routes/login'
 import { Route as DemoRouteImport } from './routes/demo'
 import { Route as DashboardRouteImport } from './routes/dashboard'
 import { Route as IndexRouteImport } from './routes/index'
+import { Route as TimelineTimelineIdRouteImport } from './routes/timeline.$timelineId'
 import { Route as ApiAuthSplatRouteImport } from './routes/api/auth/$'
 
+const TimelinesRoute = TimelinesRouteImport.update({
+  id: '/timelines',
+  path: '/timelines',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const TimelineRoute = TimelineRouteImport.update({
+  id: '/timeline',
+  path: '/timeline',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LoginRoute = LoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -35,6 +48,11 @@ const IndexRoute = IndexRouteImport.update({
   path: '/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const TimelineTimelineIdRoute = TimelineTimelineIdRouteImport.update({
+  id: '/$timelineId',
+  path: '/$timelineId',
+  getParentRoute: () => TimelineRoute,
+} as any)
 const ApiAuthSplatRoute = ApiAuthSplatRouteImport.update({
   id: '/api/auth/$',
   path: '/api/auth/$',
@@ -46,6 +64,9 @@ export interface FileRoutesByFullPath {
   '/dashboard': typeof DashboardRoute
   '/demo': typeof DemoRoute
   '/login': typeof LoginRoute
+  '/timeline': typeof TimelineRouteWithChildren
+  '/timelines': typeof TimelinesRoute
+  '/timeline/$timelineId': typeof TimelineTimelineIdRoute
   '/api/auth/$': typeof ApiAuthSplatRoute
 }
 export interface FileRoutesByTo {
@@ -53,6 +74,9 @@ export interface FileRoutesByTo {
   '/dashboard': typeof DashboardRoute
   '/demo': typeof DemoRoute
   '/login': typeof LoginRoute
+  '/timeline': typeof TimelineRouteWithChildren
+  '/timelines': typeof TimelinesRoute
+  '/timeline/$timelineId': typeof TimelineTimelineIdRoute
   '/api/auth/$': typeof ApiAuthSplatRoute
 }
 export interface FileRoutesById {
@@ -61,14 +85,42 @@ export interface FileRoutesById {
   '/dashboard': typeof DashboardRoute
   '/demo': typeof DemoRoute
   '/login': typeof LoginRoute
+  '/timeline': typeof TimelineRouteWithChildren
+  '/timelines': typeof TimelinesRoute
+  '/timeline/$timelineId': typeof TimelineTimelineIdRoute
   '/api/auth/$': typeof ApiAuthSplatRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/dashboard' | '/demo' | '/login' | '/api/auth/$'
+  fullPaths:
+    | '/'
+    | '/dashboard'
+    | '/demo'
+    | '/login'
+    | '/timeline'
+    | '/timelines'
+    | '/timeline/$timelineId'
+    | '/api/auth/$'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/dashboard' | '/demo' | '/login' | '/api/auth/$'
-  id: '__root__' | '/' | '/dashboard' | '/demo' | '/login' | '/api/auth/$'
+  to:
+    | '/'
+    | '/dashboard'
+    | '/demo'
+    | '/login'
+    | '/timeline'
+    | '/timelines'
+    | '/timeline/$timelineId'
+    | '/api/auth/$'
+  id:
+    | '__root__'
+    | '/'
+    | '/dashboard'
+    | '/demo'
+    | '/login'
+    | '/timeline'
+    | '/timelines'
+    | '/timeline/$timelineId'
+    | '/api/auth/$'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -76,11 +128,27 @@ export interface RootRouteChildren {
   DashboardRoute: typeof DashboardRoute
   DemoRoute: typeof DemoRoute
   LoginRoute: typeof LoginRoute
+  TimelineRoute: typeof TimelineRouteWithChildren
+  TimelinesRoute: typeof TimelinesRoute
   ApiAuthSplatRoute: typeof ApiAuthSplatRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/timelines': {
+      id: '/timelines'
+      path: '/timelines'
+      fullPath: '/timelines'
+      preLoaderRoute: typeof TimelinesRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/timeline': {
+      id: '/timeline'
+      path: '/timeline'
+      fullPath: '/timeline'
+      preLoaderRoute: typeof TimelineRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/login': {
       id: '/login'
       path: '/login'
@@ -109,6 +177,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/timeline/$timelineId': {
+      id: '/timeline/$timelineId'
+      path: '/$timelineId'
+      fullPath: '/timeline/$timelineId'
+      preLoaderRoute: typeof TimelineTimelineIdRouteImport
+      parentRoute: typeof TimelineRoute
+    }
     '/api/auth/$': {
       id: '/api/auth/$'
       path: '/api/auth/$'
@@ -119,11 +194,25 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface TimelineRouteChildren {
+  TimelineTimelineIdRoute: typeof TimelineTimelineIdRoute
+}
+
+const TimelineRouteChildren: TimelineRouteChildren = {
+  TimelineTimelineIdRoute: TimelineTimelineIdRoute,
+}
+
+const TimelineRouteWithChildren = TimelineRoute._addFileChildren(
+  TimelineRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   DashboardRoute: DashboardRoute,
   DemoRoute: DemoRoute,
   LoginRoute: LoginRoute,
+  TimelineRoute: TimelineRouteWithChildren,
+  TimelinesRoute: TimelinesRoute,
   ApiAuthSplatRoute: ApiAuthSplatRoute,
 }
 export const routeTree = rootRouteImport

apps/web/src/routes/index.tsx

@@ -4,31 +4,24 @@ export const Route = createFileRoute("/")({
   component: HomeComponent,
 });
 
-const TITLE_TEXT = `
- ██████╗ ███████╗████████╗████████╗███████╗██████╗
- ██╔══██╗██╔════╝╚══██╔══╝╚══██╔══╝██╔════╝██╔══██╗
- ██████╔╝█████╗     ██║      ██║   █████╗  ██████╔╝
- ██╔══██╗██╔══╝     ██║      ██║   ██╔══╝  ██╔══██╗
- ██████╔╝███████╗   ██║      ██║   ███████╗██║  ██║
- ╚═════╝ ╚══════╝   ╚═╝      ╚═╝   ╚══════╝╚═╝  ╚═╝
-
- ████████╗    ███████╗████████╗ █████╗  ██████╗██╗  ██╗
- ╚══██╔══╝    ██╔════╝╚══██╔══╝██╔══██╗██╔════╝██║ ██╔╝
-    ██║       ███████╗   ██║   ███████║██║     █████╔╝
-    ██║       ╚════██║   ██║   ██╔══██║██║     ██╔═██╗
-    ██║       ███████║   ██║   ██║  ██║╚██████╗██║  ██╗
-    ╚═╝       ╚══════╝   ╚═╝   ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝
- `;
-
 function HomeComponent() {
   return (
-    <div className="container mx-auto max-w-3xl px-4 py-2">
-      <pre className="overflow-x-auto font-mono text-sm">{TITLE_TEXT}</pre>
-      <div className="grid gap-6">
-        <section className="rounded-lg border p-4">
-          <h2 className="mb-2 font-medium">API Status</h2>
-        </section>
+    <section className="container mx-auto max-w-3xl px-4 py-2">
+      <div className="space-y-7">
+        <div className="w-80">
+          <img alt="Zendegi" src="public/logo.png" />
+        </div>
+        <div className="space-y-3">
+          <h1 className="text-4xl sm:text-7xl font-serif font-bold">
+            Everything you need to visualize your story
+          </h1>
+          <p>
+            With our web app, bring to life stunning timelines of your
+            milestones, stories, and plans. Unleash creativity, boost
+            productivity, and transform how you experience your world.
+          </p>
+        </div>
       </div>
-    </div>
+    </section>
   );
 }

apps/web/src/routes/timeline.$timelineId.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/timeline/$timelineId")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>Timeline detail</div>;
+}

apps/web/src/routes/timeline.tsx

@@ -0,0 +1,14 @@
+import { Outlet, createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/timeline")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return (
+    <div>
+      Shell of timeline
+      <Outlet />
+    </div>
+  );
+}

apps/web/src/routes/timelines.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/timelines")({
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  return <div>List of timelines</div>;
+}