feat: initialize warpbox.dev project structure and backend

Initialize the repository with the core Go backend architecture and a frontend mockup for warpbox.dev, a self-hosted file-sharing application.

- Set up Go backend modules for configuration, HTTP server, middleware, handlers, and templates.
- Add local development scripts, environment templates, and basic project configuration.
- Include a React-based frontend mockup under the docs directory.

docs/Mock-Up/Mockup Magic/src/components/layout/PublicHeader.tsx

@@ -0,0 +1,41 @@
+import { Link } from "@tanstack/react-router";
+import { Box } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { MockupNav } from "./MockupNav";
+
+export function PublicHeader() {
+  return (
+    <header className="border-b bg-background">
+      <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4">
+        <Link to="/" className="flex items-center gap-2 font-semibold">
+          <Box className="h-5 w-5 text-primary" />
+          warpbox.dev
+        </Link>
+        <nav className="ml-6 hidden gap-1 md:flex">
+          <Button asChild variant="ghost" size="sm"><Link to="/about">About</Link></Button>
+          <Button asChild variant="ghost" size="sm"><Link to="/docs">Docs</Link></Button>
+        </nav>
+        <div className="ml-auto flex items-center gap-2">
+          <MockupNav />
+          <Button asChild variant="ghost" size="sm"><Link to="/login">Login</Link></Button>
+          <Button asChild size="sm"><Link to="/register">Register</Link></Button>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export function Footer() {
+  return (
+    <footer className="border-t bg-background">
+      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-4 py-4 text-xs text-muted-foreground sm:flex-row">
+        <div>warpbox.dev · v0.4.2 · self-hosted</div>
+        <div className="flex gap-4">
+          <a href="#" className="hover:text-foreground">Terms</a>
+          <a href="#" className="hover:text-foreground">Privacy</a>
+          <a href="#" className="hover:text-foreground">Contact</a>
+        </div>
+      </div>
+    </footer>
+  );
+}