New header and backgroud style

2026-05-04 14:33:58 -03:00
parent 38b2294aad
commit 546a020003
17 changed files with 636 additions and 283 deletions
--- a/apps/frontend/index.html
+++ b/apps/frontend/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="iimage/x-icon" href="/src/assets/playzer-favicon-transparent.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PlayZer</title>
  </head>
-  <body>
+  <body lass="bg-background text-foreground antialiased">
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
--- a/apps/frontend/src/App.css
+++ b/apps/frontend/src/App.css
@@ -1,182 +0,0 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
-  text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
-}
-
-#next-steps ul {
-  list-style: none;
-  padding: 0;
-  display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
-}
-
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: "";
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
-}
--- a/apps/frontend/src/assets/playzer-favicon-512-transparent.png
+++ b/apps/frontend/src/assets/playzer-favicon-512-transparent.png
--- a/apps/frontend/src/assets/playzer-favicon-transparent.ico
+++ b/apps/frontend/src/assets/playzer-favicon-transparent.ico
--- a/apps/frontend/src/assets/playzer-favicon.ico
+++ b/apps/frontend/src/assets/playzer-favicon.ico
--- a/apps/frontend/src/assets/playzer-icon-p-transparent.png
+++ b/apps/frontend/src/assets/playzer-icon-p-transparent.png
--- a/apps/frontend/src/assets/playzer-icon-p-transparent.svg
+++ b/apps/frontend/src/assets/playzer-icon-p-transparent.svg
--- a/apps/frontend/src/assets/playzer-icon-p.svg
+++ b/apps/frontend/src/assets/playzer-icon-p.svg
--- a/apps/frontend/src/assets/playzer-logo-transparent.png
+++ b/apps/frontend/src/assets/playzer-logo-transparent.png
--- a/apps/frontend/src/assets/playzer-logo-transparent.svg
+++ b/apps/frontend/src/assets/playzer-logo-transparent.svg
--- a/apps/frontend/src/assets/playzer-logo.svg
+++ b/apps/frontend/src/assets/playzer-logo.svg
--- a/apps/frontend/src/components/header.tsx
+++ b/apps/frontend/src/components/header.tsx
@@ -0,0 +1,243 @@
+import { useState } from "react"
+import { CalendarDays, LogOut, Menu, Settings, User, X } from "lucide-react"
+
+import PlayzerIcon from "@/assets/playzer-favicon-512-transparent.png"
+import { Link, useLocation } from "@tanstack/react-router"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { useAuth } from "@/lib/auth"
+
+interface NavItemProps {
+  to: string
+  label: string
+  isMobile?: boolean
+  onClick?: () => void
+}
+
+function NavItem({ to, label, isMobile, onClick }: NavItemProps) {
+  const location = useLocation()
+  const currentPath = location.pathname
+  const isActive = to === "/" ? currentPath === "/" : currentPath.startsWith(to)
+
+  return (
+    <Link to={to} onClick={onClick}>
+      <Button
+        variant="ghost"
+        size={isMobile ? "default" : "sm"}
+        className={[
+          "rounded-none transition-all duration-200 hover:bg-transparent",
+          "focus-visible:ring-2 focus-visible:ring-primary/50",
+          isMobile && "w-full justify-start rounded-2xl",
+          isActive
+            ? "text-primary relative after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-primary"
+            : "text-muted-foreground hover:text-foreground relative hover:after:absolute hover:after:bottom-0 hover:after:left-0 hover:after:right-0 hover:after:h-0.5 hover:after:bg-primary/50",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+      >
+        {label}
+      </Button>
+    </Link>
+  )
+}
+
+export function Header() {
+  const [open, setOpen] = useState(false)
+  const { user, isAuthenticated, displayName, avatarUrl, signOut } = useAuth();
+  
+  const menuItems = [
+    { label: "Inicio", to: "/" },
+    { label: "Reservas", to: "/booking" },
+    { label: "Canchas", to: "/canchas" },
+    { label: "Dashboard", to: "/dashboard" },
+    { label: "Contacto", to: "/contacto" },
+  ]
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border/60 bg-background/60 dark:border-primary/20 dark:bg-[#030a10]/90 backdrop-blur-xl">
+      <div className="absolute inset-0 -z-10 bg-gradient-to-b from-background/85 to-background/45 dark:from-[#030a10]/95 dark:to-[#030a10]/70" />
+
+      <div className="mx-auto flex h-16 w-full max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">
+        <Link to="/" className="group flex items-center gap-3">
+          <div className="flex size-10 items-center justify-center  shadow-primary/10 ">
+            <img src={PlayzerIcon} alt="Playzer" className="size-7" />
+          </div>
+
+          <span className="bg-gradient-to-r from-primary via-primary to-reserved bg-clip-text text-xl font-bold tracking-tight text-transparent">
+            Playzer
+          </span>
+        </Link>
+
+        <nav className="hidden absolute left-1/2 -translate-x-1/2 items-center gap-1 md:flex">
+          {menuItems.map((item) => (
+            <NavItem key={item.label} to={item.to} label={item.label} />
+          ))}
+        </nav>
+
+        <div className="flex-1" />
+
+        <div className="hidden items-center gap-2 md:flex">
+          <Button className="rounded-2xl px-5 shadow-lg shadow-primary/20">
+            <CalendarDays className="mr-2 size-4" />
+            Reservar ahora
+          </Button>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="hidden size-10 rounded-full ring-2 ring-transparent transition-all duration-200 hover:ring-primary/30 focus:outline-none md:flex">
+              <Avatar className="size-10 border border-border/60 shadow-lg shadow-black/10">
+                <AvatarImage src={avatarUrl!} alt="Usuario" />
+                <AvatarFallback className="bg-primary/15 text-primary">
+                  JD
+                </AvatarFallback>
+              </Avatar>
+            </button>
+          </DropdownMenuTrigger>
+
+          <DropdownMenuContent
+            align="end"
+            className="w-64 rounded-2xl border-border/60 bg-popover/95 p-2 shadow-xl shadow-black/20 backdrop-blur-xl"
+          >
+            <DropdownMenuLabel className="px-2 py-2">
+              <div className="flex items-center gap-3">
+                <Avatar className="size-9">
+                  <AvatarImage src={ avatarUrl ?? "https://github.com/shadcn.png"} alt="Usuario" />
+                  <AvatarFallback className="bg-primary/15 text-primary">
+                    JD
+                  </AvatarFallback>
+                </Avatar>
+
+                <div className="flex min-w-0 flex-col">
+                  <span className="truncate text-sm font-medium">{displayName}</span>
+                  <span className="truncate text-xs text-muted-foreground">
+                    {user?.email}
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuLabel>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem className="cursor-pointer rounded-xl">
+              <User className="mr-2 size-4" />
+              Mi Perfil
+            </DropdownMenuItem>
+
+            <DropdownMenuItem className="cursor-pointer rounded-xl">
+              <Settings className="mr-2 size-4" />
+              Configuración
+            </DropdownMenuItem>
+
+            <DropdownMenuSeparator />
+
+            <DropdownMenuItem className="cursor-pointer rounded-xl text-destructive focus:bg-destructive/10 focus:text-destructive">
+              <LogOut className="mr-2 size-4" />
+              Cerrar sesión
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button variant="outline" size="icon" className="rounded-2xl md:hidden">
+              {open ? <X className="size-5" /> : <Menu className="size-5" />}
+            </Button>
+          </SheetTrigger>
+
+          <SheetContent
+            side="right"
+            className="w-[88vw] border-border/60 bg-background/95 p-5 backdrop-blur-xl sm:max-w-sm"
+          >
+            <div className="mt-6 flex flex-col gap-6">
+              <div className="rounded-3xl border border-border/60 bg-card/70 p-4 shadow-xl shadow-black/10">
+                <div className="flex items-center gap-3">
+                  <Avatar className="size-11">
+                    <AvatarImage src="https://github.com/shadcn.png" alt="Usuario" />
+                    <AvatarFallback className="bg-primary/15 text-primary">
+                      JD
+                    </AvatarFallback>
+                  </Avatar>
+
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium">John Doe</p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      john@example.com
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <nav className="flex flex-col gap-1">
+                {menuItems.map((item) => (
+                  <NavItem
+                    key={item.label}
+                    to={item.to}
+                    label={item.label}
+                    isMobile
+                    onClick={() => setOpen(false)}
+                  />
+                ))}
+              </nav>
+
+              <Button
+                className="rounded-2xl shadow-lg shadow-primary/20"
+                onClick={() => setOpen(false)}
+              >
+                <CalendarDays className="mr-2 size-4" />
+                Reservar ahora
+              </Button>
+
+              <div className="border-t border-border/60 pt-4">
+                <p className="mb-2 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
+                  Cuenta
+                </p>
+
+                <nav className="flex flex-col gap-1">
+                  <Button
+                    variant="ghost"
+                    className="justify-start rounded-2xl"
+                    onClick={() => setOpen(false)}
+                  >
+                    <User className="mr-2 size-4" />
+                    Mi Perfil
+                  </Button>
+
+                  <Button
+                    variant="ghost"
+                    className="justify-start rounded-2xl"
+                    onClick={() => setOpen(false)}
+                  >
+                    <Settings className="mr-2 size-4" />
+                    Configuración
+                  </Button>
+
+                  <Button
+                    variant="ghost"
+                    className="justify-start rounded-2xl text-destructive hover:bg-destructive/10 hover:text-destructive"
+                    onClick={() => setOpen(false)}
+                  >
+                    <LogOut className="mr-2 size-4" />
+                    Cerrar sesión
+                  </Button>
+                </nav>
+              </div>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+
+      <div className="h-px bg-gradient-to-r from-transparent via-primary/40 to-transparent" />
+    </header>
+  )
+}
--- a/apps/frontend/src/components/layout.tsx
+++ b/apps/frontend/src/components/layout.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from "react"
+import { Header } from "./header"
+
+interface LayoutProps {
+  children: ReactNode
+}
+
+export function Layout({ children }: LayoutProps) {
+  return (
+    <div className="relative min-h-dvh overflow-x-hidden bg-background text-foreground">
+      <Background />
+      <Header />
+      <main className="relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+        {children}
+      </main>
+    </div>
+  )
+}
+
+function Background() {
+  return (
+    <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-b from-[#040b11] to-[#09131c]" />
+
+      <div className="absolute left-0 top-0 h-[420px] w-[420px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/20 blur-3xl" />
+      <div className="absolute right-0 top-24 h-[360px] w-[360px] translate-x-1/3 rounded-full bg-reserved/15 blur-3xl" />
+      <div className="absolute bottom-0 left-1/2 h-[300px] w-[300px] -translate-x-1/2 translate-y-1/3 rounded-full bg-accent/10 blur-3xl" />
+
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,oklch(1_0_0/0.055)_1px,transparent_1px),linear-gradient(to_bottom,oklch(1_0_0/0.055)_1px,transparent_1px)] bg-[size:64px_64px]" />
+
+      <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,#09131c_78%)]" />
+    </div>
+  )
+}
--- a/apps/frontend/src/components/ui/dialog.tsx
+++ b/apps/frontend/src/components/ui/dialog.tsx
@@ -90,7 +90,7 @@ function DialogFooter({
    <div
      data-slot="dialog-footer"
      className={cn(
-        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end',
+        '-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-green-50/70 p-4 sm:flex-row sm:justify-end dark:bg-muted/50',
        className
      )}
      {...props}
--- a/apps/frontend/src/components/ui/sheet.tsx
+++ b/apps/frontend/src/components/ui/sheet.tsx
@@ -0,0 +1,145 @@
+import * as React from "react"
+import { Dialog as SheetPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+  showCloseButton?: boolean
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close data-slot="sheet-close" asChild>
+            <Button
+              variant="ghost"
+              className="absolute top-3 right-3"
+              size="icon-sm"
+            >
+              <XIcon
+              />
+              <span className="sr-only">Close</span>
+            </Button>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/apps/frontend/src/index.css
+++ b/apps/frontend/src/index.css
@@ -1,44 +1,80 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
+/* @import "@fontsource-variable/inter"; */

@custom-variant dark (&:is(.dark *));

+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+html,
+body,
+#root {
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
@theme inline {
  --font-heading: var(--font-sans);
-  --font-sans: "Geist Variable", sans-serif;
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
-  --color-card: var(--card);
-  --color-foreground: var(--foreground);
+
  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+
+  --color-reserved: var(--reserved);
+  --color-reserved-foreground: var(--reserved-foreground);
+
+  --color-maintenance: var(--maintenance);
+  --color-maintenance-foreground: var(--maintenance-foreground);
+
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
@@ -46,85 +82,137 @@
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
+
+  --font-sans: "Inter Variable", sans-serif;
 }

 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
+  --background: oklch(0.985 0.004 240);
+  --foreground: oklch(0.18 0.012 245);
+
  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
+  --card-foreground: oklch(0.18 0.012 245);
+
  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --popover-foreground: oklch(0.18 0.012 245);
+
+  --primary: oklch(0.63 0.19 158);
+  --primary-foreground: oklch(0.985 0.004 160);
+
+  --secondary: oklch(0.94 0.01 240);
+  --secondary-foreground: oklch(0.28 0.018 245);
+
+  --muted: oklch(0.95 0.008 240);
+  --muted-foreground: oklch(0.52 0.018 245);
+
+  --accent: oklch(0.93 0.035 158);
+  --accent-foreground: oklch(0.34 0.12 158);
+
+  --destructive: oklch(0.62 0.22 25);
+  --destructive-foreground: oklch(0.98 0.01 25);
+
+  --success: oklch(0.63 0.19 158);
+  --success-foreground: oklch(0.985 0.004 160);
+
+  --reserved: oklch(0.58 0.19 255);
+  --reserved-foreground: oklch(0.985 0.01 255);
+
+  --maintenance: oklch(0.64 0.22 25);
+  --maintenance-foreground: oklch(0.985 0.01 25);
+
+  --warning: oklch(0.78 0.16 75);
+  --warning-foreground: oklch(0.18 0.04 75);
+
+  --border: oklch(0.86 0.01 245 / 65%);
+  --input: oklch(0.86 0.01 245 / 75%);
+  --ring: oklch(0.63 0.19 158);
+
+  --chart-1: oklch(0.63 0.19 158);
+  --chart-2: oklch(0.58 0.19 255);
+  --chart-3: oklch(0.64 0.22 25);
+  --chart-4: oklch(0.78 0.16 75);
+  --chart-5: oklch(0.68 0.16 205);
+
+  --radius: 0.875rem;
+
+  --sidebar: oklch(0.98 0.004 240);
+  --sidebar-foreground: oklch(0.18 0.012 245);
+  --sidebar-primary: oklch(0.63 0.19 158);
+  --sidebar-primary-foreground: oklch(0.985 0.004 160);
+  --sidebar-accent: oklch(0.94 0.01 240);
+  --sidebar-accent-foreground: oklch(0.28 0.018 245);
+  --sidebar-border: oklch(0.86 0.01 245 / 65%);
+  --sidebar-ring: oklch(0.63 0.19 158);
 }

 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.87 0 0);
-  --chart-2: oklch(0.556 0 0);
-  --chart-3: oklch(0.439 0 0);
-  --chart-4: oklch(0.371 0 0);
-  --chart-5: oklch(0.269 0 0);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
+  --background: #081118;
+  --foreground: oklch(0.96 0.006 245);
+
+  --card: oklch(0.19 0.022 240);
+  --card-foreground: oklch(0.96 0.006 245);
+
+  --popover: oklch(0.18 0.022 240);
+  --popover-foreground: oklch(0.96 0.006 245);
+
+  --primary: oklch(0.67 0.21 158);
+  --primary-foreground: oklch(0.12 0.02 158);
+
+  --secondary: oklch(0.235 0.024 240);
+  --secondary-foreground: oklch(0.9 0.008 245);
+
+  --muted: oklch(0.24 0.022 240);
+  --muted-foreground: oklch(0.68 0.018 245);
+
+  --accent: oklch(0.28 0.06 158);
+  --accent-foreground: oklch(0.9 0.04 158);
+
+  --destructive: oklch(0.66 0.23 25);
+  --destructive-foreground: oklch(0.98 0.01 25);
+
+  --success: oklch(0.67 0.21 158);
+  --success-foreground: oklch(0.12 0.02 158);
+
+  --reserved: oklch(0.61 0.2 255);
+  --reserved-foreground: oklch(0.97 0.012 255);
+
+  --maintenance: oklch(0.66 0.23 25);
+  --maintenance-foreground: oklch(0.98 0.01 25);
+
+  --warning: oklch(0.78 0.17 75);
+  --warning-foreground: oklch(0.18 0.04 75);
+
+  --border: oklch(1 0 0 / 11%);
+  --input: oklch(1 0 0 / 14%);
+  --ring: oklch(0.67 0.21 158);
+
+  --chart-1: oklch(0.67 0.21 158);
+  --chart-2: oklch(0.61 0.2 255);
+  --chart-3: oklch(0.66 0.23 25);
+  --chart-4: oklch(0.78 0.17 75);
+  --chart-5: oklch(0.7 0.16 205);
+
+  --sidebar: oklch(0.165 0.02 240);
+  --sidebar-foreground: oklch(0.96 0.006 245);
+  --sidebar-primary: oklch(0.67 0.21 158);
+  --sidebar-primary-foreground: oklch(0.12 0.02 158);
+  --sidebar-accent: oklch(0.235 0.024 240);
+  --sidebar-accent-foreground: oklch(0.9 0.008 245);
+  --sidebar-border: oklch(1 0 0 / 11%);
+  --sidebar-ring: oklch(0.67 0.21 158);
 }

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
+
  body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground antialiased;
  }
-  html {
-    @apply font-sans;
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
  }
-}
+}
--- a/apps/frontend/src/routes/__root.tsx
+++ b/apps/frontend/src/routes/__root.tsx
@@ -1,3 +1,4 @@
+import { Layout } from '@/components/layout';
 import { NotFoundPage } from '@/features/not-found/not-found-page';
 import { ServerErrorPage } from '@/features/server-error/server-error-page';
 import type { ApiClient } from '@/lib/api-client';
@@ -10,7 +11,17 @@ type RouterContext = {
 };

 export const Route = createRootRouteWithContext<RouterContext>()({
-  component: Outlet,
+  component: RootRoute,
  errorComponent: ServerErrorPage,
  notFoundComponent: NotFoundPage,
 });
+
+function RootRoute() {
+  return (
+    <Layout>
+      <div className="flex flex-col p-6">
+        <Outlet />
+      </div>
+    </Layout>
+  )
+}