so much stuff???

apps/web/src/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { POST, GET } = toNextJsHandler(auth);

apps/web/src/app/editor/page.tsx

@@ -1,36 +1,80 @@
+"use client";
+
+import { useEffect } from "react";
 import {
   ResizablePanelGroup,
   ResizablePanel,
   ResizableHandle,
 } from "../../components/ui/resizable";
-import { MediaPanel } from "../../components/media-panel";
-import { PropertiesPanel } from "../../components/properties-panel";
-import { Timeline } from "../../components/timeline";
-import { PreviewPanel } from "../../components/preview-panel";
+import { MediaPanel } from "../../components/editor/media-panel";
+import { PropertiesPanel } from "../../components/editor/properties-panel";
+import { Timeline } from "../../components/editor/timeline";
+import { PreviewPanel } from "../../components/editor/preview-panel";
+import { EditorHeader } from "@/components/editor-header";
+import { usePanelStore } from "@/stores/panel-store";
+import { useProjectStore } from "@/stores/project-store";
 
 export default function Editor() {
+  const {
+    toolsPanel,
+    previewPanel,
+    propertiesPanel,
+    mainContent,
+    timeline,
+    setToolsPanel,
+    setPreviewPanel,
+    setPropertiesPanel,
+    setMainContent,
+    setTimeline,
+  } = usePanelStore();
+
+  const { activeProject, createNewProject } = useProjectStore();
+
+  // Initialize a new project if none exists
+  useEffect(() => {
+    if (!activeProject) {
+      createNewProject("Untitled Project");
+    }
+  }, [activeProject, createNewProject]);
+
   return (
     <div className="h-screen w-screen flex flex-col bg-background">
+      <EditorHeader />
       <ResizablePanelGroup direction="vertical">
-        <ResizablePanel defaultSize={50} minSize={30}>
+        <ResizablePanel
+          defaultSize={mainContent}
+          minSize={30}
+          onResize={setMainContent}
+        >
           {/* Main content area */}
           <ResizablePanelGroup direction="horizontal">
             {/* Tools Panel */}
-            <ResizablePanel defaultSize={20} minSize={15}>
+            <ResizablePanel
+              defaultSize={toolsPanel}
+              minSize={15}
+              onResize={setToolsPanel}
+            >
               <MediaPanel />
             </ResizablePanel>
 
             <ResizableHandle withHandle />
 
             {/* Preview Area */}
-            <ResizablePanel defaultSize={60}>
+            <ResizablePanel
+              defaultSize={previewPanel}
+              onResize={setPreviewPanel}
+            >
               <PreviewPanel />
             </ResizablePanel>
 
             <ResizableHandle withHandle />
 
             {/* Properties Panel */}
-            <ResizablePanel defaultSize={20} minSize={15}>
+            <ResizablePanel
+              defaultSize={propertiesPanel}
+              minSize={15}
+              onResize={setPropertiesPanel}
+            >
               <PropertiesPanel />
             </ResizablePanel>
           </ResizablePanelGroup>
@@ -39,7 +83,11 @@ export default function Editor() {
         <ResizableHandle withHandle />
 
         {/* Timeline */}
-        <ResizablePanel defaultSize={50} minSize={15}>
+        <ResizablePanel
+          defaultSize={timeline}
+          minSize={15}
+          onResize={setTimeline}
+        >
           <Timeline />
         </ResizablePanel>
       </ResizablePanelGroup>

apps/web/src/app/globals.css

@@ -2,10 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -32,7 +28,7 @@ body {
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.6rem;
+    --radius: 1rem;
     --sidebar-background: 0 0% 100%;
     --sidebar-foreground: 0 0% 3.9%;
     --sidebar-primary: 0 0% 9%;

apps/web/src/app/layout.tsx

@@ -1,20 +1,15 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { Inter } from "next/font/google";
 import { ThemeProvider } from "next-themes";
 import { Analytics } from "@vercel/analytics/react";
 import "./globals.css";
 import { Toaster } from "../components/ui/sonner";
 import { TooltipProvider } from "../components/ui/tooltip";
+import { AppProvider } from "@/components/app-provider";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-});
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
 });
 
 export const metadata: Metadata = {
@@ -29,15 +24,15 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${inter.variable} font-sans antialiased`}>
         <ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
-          <TooltipProvider>
-            {children}
-            <Analytics />
-            <Toaster />
-          </TooltipProvider>
+          <AppProvider>
+            <TooltipProvider>
+              {children}
+              <Analytics />
+              <Toaster />
+            </TooltipProvider>
+          </AppProvider>
         </ThemeProvider>
       </body>
     </html>

apps/web/src/app/page.tsx

@@ -1,3 +1,11 @@
+import { Hero } from "@/components/landing/hero";
+import { Header } from "@/components/header";
+
 export default function Home() {
-  return <div>Hello World</div>;
-}
+  return (
+    <div>
+      <Header />
+      <Hero />
+    </div>
+  );
+}