Add new landing

template/apps/web/components.json

@@ -9,12 +9,15 @@
     "baseColor": "slate",
     "cssVariables": true
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
-  "iconLibrary": "lucide"
+  "registries": {
+    "@tailark": "https://tailark.com/r/{name}.json"
+  }
 }

template/apps/web/package.json

@@ -25,14 +25,14 @@
     "@radix-ui/react-label": "2.1.8",
     "@radix-ui/react-popover": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.2.4",
     "@svgr/webpack": "8.1.0",
     "@tabler/icons-react": "3.10.0",
     "@tailwindcss/typography": "0.5.19",
     "@tanstack/react-query": "5.74.4",
     "@tanstack/react-table": "8.19.2",
     "axios": "1.12.2",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
     "dayjs": "1.11.10",
@@ -52,6 +52,7 @@
     "react-dom": "catalog:",
     "react-dropzone": "15.0.0",
     "react-hook-form": "7.57.0",
+    "react-icons": "5.6.0",
     "shared": "workspace:*",
     "socket.io-client": "4.7.5",
     "sonner": "^1.7.4",

template/apps/web/src/components/PublicHeader/index.tsx

@@ -22,63 +22,51 @@ const PublicHeader: FC = () => {
   const { theme, setTheme } = useTheme();
 
   return (
-    <header className="sticky top-0 z-50 w-full border-b-4 border-foreground bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-      <div className="container mx-auto flex h-20 max-w-7xl items-center justify-between px-6">
-        <div className="flex items-center gap-12">
-          <Link href="/" className="flex items-center gap-2 transition-transform hover:scale-105">
-            <LogoImage className="h-8" />
+    <header className="sticky top-0 z-50 border-b bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/70">
+      <div className="mx-auto flex h-16 w-full max-w-5xl items-center justify-between px-6">
+        <div className="flex items-center gap-8">
+          <Link href="/" className="flex items-center gap-2">
+            <LogoImage className="h-6" />
           </Link>
 
-          <nav className="hidden items-center gap-8 lg:flex">
+          <nav className="hidden items-center gap-6 md:flex">
             {navLinks.map((link) => (
               <Link
                 key={link.label}
                 href={link.href}
-                className="font-mono text-xs font-black uppercase tracking-widest text-muted-foreground transition-all hover:text-foreground hover:tracking-[0.2em]"
+                className="text-muted-foreground hover:text-foreground text-sm transition-colors"
               >
                 {link.label}
               </Link>
             ))}
           </nav>
         </div>
 
-        <div className="flex items-center gap-6">
+        <div className="flex items-center gap-2">
           <Button
             variant="ghost"
             size="icon"
             onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-            className="font-mono hover:bg-muted"
+            aria-label="Toggle theme"
           >
-            <Sun className="size-5 hidden dark:block" />
-            <Moon className="size-5 block dark:hidden" />
+            <Sun className="size-4 hidden dark:block" />
+            <Moon className="size-4 block dark:hidden" />
           </Button>
 
-          <div className="flex items-center gap-4">
-            {account ? (
-              <Button
-                className="border-2 border-foreground bg-foreground font-mono text-xs font-black uppercase tracking-widest text-background shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none"
-                asChild
-              >
-                <Link href="/app">Go to app</Link>
+          {account ? (
+            <Button asChild>
+              <Link href="/app">Go to app</Link>
+            </Button>
+          ) : (
+            <>
+              <Button variant="ghost" asChild className="hidden sm:inline-flex">
+                <Link href="/sign-in">Sign In</Link>
+              </Button>
+              <Button asChild>
+                <Link href="/sign-up">Get Started</Link>
               </Button>
-            ) : (
-              <>
-                <Button
-                  variant="ghost"
-                  asChild
-                  className="font-mono text-xs font-black uppercase tracking-widest hover:bg-muted"
-                >
-                  <Link href="/sign-in">Sign In</Link>
-                </Button>
-                <Button
-                  className="border-2 border-foreground bg-foreground font-mono text-xs font-black uppercase tracking-widest text-background shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none"
-                  asChild
-                >
-                  <Link href="/sign-up">Ship Now</Link>
-                </Button>
-              </>
-            )}
-          </div>
+            </>
+          )}
         </div>
       </div>
     </header>