refactor folder

frontend/app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+export default function AuthLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="w-screen flex items-center justify-center h-screen">
+      {children}
+    </div>
+  )
+}

frontend/app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,17 @@
+import { SignIn } from "@clerk/nextjs"
+import { dark } from "@clerk/themes"
+
+export default function Page() {
+  return (
+    <SignIn
+      appearance={{
+        baseTheme: dark,
+        elements: {
+          footerActionLink: {
+            color: "#fff",
+          },
+        },
+      }}
+    />
+  )
+}

frontend/app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,17 @@
+import { SignUp } from "@clerk/nextjs"
+import { dark } from "@clerk/themes"
+
+export default function Page() {
+  return (
+    <SignUp
+      appearance={{
+        baseTheme: dark,
+        elements: {
+          footerActionLink: {
+            color: "#A3A3A3",
+          },
+        },
+      }}
+    />
+  )
+}

frontend/app/code/[id]/page.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import Navbar from "@/components/editor/navbar"
+import { useClerk } from "@clerk/nextjs"
+import dynamic from "next/dynamic"
+
+const CodeEditor = dynamic(() => import("@/components/editor"), {
+  ssr: false,
+})
+
+export default function CodePage() {
+  const clerk = useClerk()
+
+  return (
+    <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
+      <Navbar />
+      <div className="w-screen flex grow">
+        {clerk.loaded ? <CodeEditor /> : null}
+      </div>
+    </div>
+  )
+}

frontend/app/code/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation"
+
+export default function Page() {
+  redirect("/")
+}

frontend/app/dashboard/page.tsx

@@ -0,0 +1,19 @@
+import { UserButton, currentUser } from "@clerk/nextjs"
+import { redirect } from "next/navigation"
+import Dashboard from "@/components/dashboard"
+import Navbar from "@/components/dashboard/navbar"
+
+export default async function DashboardPage() {
+  const user = await currentUser()
+
+  if (!user) {
+    redirect("/")
+  }
+
+  return (
+    <div className="w-screen h-screen flex flex-col overflow-hidden overscroll-none">
+      <Navbar />
+      <Dashboard />
+    </div>
+  )
+}

frontend/app/globals.css

@@ -0,0 +1,100 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+ 
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+ 
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+ 
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+ 
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+ 
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+ 
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.gradient-button-bg {
+  background: radial-gradient(circle at top, #a5b4fc -25%, #3730a3 50%); /* violet 300 -> 800 */
+}
+
+.gradient-button {
+  background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 80%); /* violet 900 -> bg */
+}
+
+.gradient-button-bg > div:hover {
+  background: radial-gradient(circle at bottom, #312e81 0%, hsl(0 0% 3.9%) 130%); /* violet 900 -> bg */
+}
+
+.gradient-project-card-bg {
+  background: radial-gradient(circle at bottom right, #a5b4fc -15%, #3730a3 25%, hsl(0 0% 3.9%) 50%); /* violet 300 -> 800 */
+}
+
+.gradient-project-card {
+  background: radial-gradient(circle at bottom right, #312e81 -50%, hsl(0 0% 3.9%) 50%); /* violet 900 -> bg */
+}
+
+.gradient-project-card-bg > div:hover {
+  background: radial-gradient(circle at bottom right, #312e81 -50%, hsl(0 0% 3.9%) 60%); /* violet 900 -> bg */
+}

frontend/app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next"
+import { GeistSans } from "geist/font/sans"
+import { GeistMono } from "geist/font/mono"
+import "./globals.css"
+import { ThemeProvider } from "@/components/layout/themeProvider"
+import { ClerkProvider } from "@clerk/nextjs"
+
+export const metadata: Metadata = {
+  title: "Sandbox",
+  description: "A collaborative, AI-powered, auto-scaling code sandbox",
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <ClerkProvider>
+      <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
+        <body>
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="dark"
+            forcedTheme="dark"
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </body>
+      </html>
+    </ClerkProvider>
+  )
+}

frontend/app/page.tsx

@@ -0,0 +1,62 @@
+import Image from "next/image"
+import Logo from "@/assets/logo.svg"
+import XLogo from "@/assets/x.svg"
+import Button from "@/components/ui/customButton"
+import { ChevronRight } from "lucide-react"
+import Link from "next/link"
+import { currentUser } from "@clerk/nextjs"
+import { redirect } from "next/navigation"
+
+export default async function Home() {
+  const user = await currentUser()
+
+  if (user) {
+    redirect("/dashboard")
+  }
+
+  return (
+    <div className="w-screen h-screen flex justify-center overflow-hidden overscroll-none">
+      <div className="w-full max-w-screen-md px-8 flex flex-col items-center">
+        <div className="w-full flex items-center justify-between py-8">
+          <div className="flex items-center font-medium">
+            <Image
+              src={Logo}
+              alt="Logo"
+              width={36}
+              height={36}
+              className="mr-2"
+            />
+          </div>
+          <div className="flex items-center space-x-4">
+            <a href="https://www.x.com/ishaandey_" target="_blank">
+              <Image src={XLogo} alt="X Logo" width={18} height={18} />
+            </a>
+          </div>
+        </div>
+        <h1 className="text-2xl font-medium text-center mt-16">
+          A Collaborative, AI-Powered, Auto-Scaling Code Editor
+        </h1>
+        <div className="text-muted-foreground mt-4 text-center ">
+          Sandbox is an open-source cloud-based code editing environment with
+          custom AI code autocompletion and real-time collaboration. The
+          infrastructure runs on Docker and Kubernetes to scale automatically
+          based on resource usage.
+        </div>
+        <div className="mt-8 flex space-x-4">
+          <Link href="/sign-up">
+            <Button>Go To App</Button>
+          </Link>
+          <a
+            href="https://github.com/ishaan1013/sandbox"
+            target="_blank"
+            className="group h-9 px-4 py-2 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+          >
+            GitHub Repository
+            <ChevronRight className="h-4 w-4 ml-1 transition-all group-hover:translate-x-1" />
+          </a>
+        </div>
+        <div className="aspect-video w-full rounded-lg bg-neutral-800 mt-12"></div>
+      </div>
+    </div>
+  )
+}