landing

2024-04-11 05:14:10 -04:00 · 2024-04-11 05:14:10 -04:00 · 3090176a88
commit 3090176a88
parent b49f49ca19
10 changed files with 105 additions and 22 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,14 +1,13 @@
 import type { Metadata } from "next"
-import { Inter } from "next/font/google"
+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"

-const inter = Inter({ subsets: ["latin"] })
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Sandbox",
+  description: "A collaborative, AI-powered, auto-scaling code sandbox",
 }

 export default function RootLayout({
@ -18,8 +17,8 @@ export default function RootLayout({
 }>) {
  return (
    <ClerkProvider>
-      <html lang="en">
-        <body className={inter.className}>
+      <html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
+        <body>
          <ThemeProvider
            attribute="class"
            defaultTheme="dark"
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,5 +1,54 @@
+import Image from "next/image"
+import Logo from "@/assets/logo.svg"
+import XLogo from "@/assets/x.svg"
+import { Button } from "@/components/ui/button"
+import { ChevronRight } from "lucide-react"
+import Link from "next/link"
+
 export default function Home() {
  return (
-    <div className="w-screen flex flex-col h-screen bg-background">test</div>
+    <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={20} height={20} />
+            </a>
+          </div>
+        </div> */}
+        <h1 className="text-2xl font-medium text-center mt-32">
+          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>
  )
 }
--- a/assets/x.svg
+++ b/assets/x.svg
@ -0,0 +1,3 @@
+<svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
+</svg>
--- a/components/editor/sidebar/index.tsx
+++ b/components/editor/sidebar/index.tsx
@ -64,7 +64,7 @@ const data: (TFile | TFolder)[] = [

 export default function Sidebar() {
  return (
-    <div className="h-full w-56 flex flex-col text-sm items-start p-2">
+    <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
      <div className="flex w-full items-center justify-between h-8 mb-1 ">
        <div className="text-muted-foreground">EXPLORER</div>
        <div className="flex space-x-1">
--- a/components/navbar/index.tsx
+++ b/components/navbar/index.tsx
@ -1,16 +1,20 @@
 import Image from "next/image"
 import Logo from "@/assets/logo.svg"
-import { Input } from "../ui/input"
 import { Pencil } from "lucide-react"
 import { UserButton } from "@clerk/nextjs"
+import Link from "next/link"
+import { dark } from "@clerk/themes"

 export default function Navbar() {
  return (
    <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
      <div className="flex items-center space-x-4">
-        <button className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm">
+        <Link
+          href="/"
+          className="ring-offset-2 ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none rounded-sm"
+        >
          <Image src={Logo} alt="Logo" width={36} height={36} />
-        </button>
+        </Link>
        <div className="text-sm font-medium flex items-center">
          My React Project{" "}
          <div className="h-7 w-7 ml-2 flex items-center justify-center transition-colors bg-transparent hover:bg-muted-foreground/25 cursor-pointer rounded-md">
@ -18,7 +22,12 @@ export default function Navbar() {
          </div>
        </div>
      </div>
-      <UserButton />
+      <UserButton
+        appearance={{
+          baseTheme: dark,
+        }}
+        afterSignOutUrl="/"
+      />
    </div>
  )
 }
--- a/middleware.ts
+++ b/middleware.ts
@ -1,7 +1,8 @@
 import { authMiddleware } from "@clerk/nextjs"

 export default authMiddleware({
-  // publicRoutes: (req) => !req.url.includes("/code"),
+  publicRoutes: (req) =>
+    !req.url.includes("/dashboard") && !req.url.includes("/code"),
 })

 export const config = {
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,4 +1,12 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        hostname: "cdn.simpleicons.org",
+      },
+    ],
+  },
+}

-export default nextConfig;
+export default nextConfig
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "@radix-ui/react-slot": "^1.0.2",
        "class-variance-authority": "^0.7.0",
        "clsx": "^2.1.0",
+        "geist": "^1.3.0",
        "lucide-react": "^0.365.0",
        "monaco-themes": "^0.4.4",
        "next": "14.1.3",
@ -1263,6 +1264,14 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/geist": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/geist/-/geist-1.3.0.tgz",
+      "integrity": "sha512-IoGBfcqVEYB4bEwsfHd35jF4+X9LHRPYZymHL4YOltHSs9LJa24DYs1Z7rEMQ/lsEvaAIc61Y9aUxgcJaQ8lrg==",
+      "peerDependencies": {
+        "next": ">=13.2.0 <15.0.0-0"
+      }
+    },
    "node_modules/glob": {
      "version": "10.3.10",
      "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
    "@radix-ui/react-slot": "^1.0.2",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.0",
+    "geist": "^1.3.0",
    "lucide-react": "^0.365.0",
    "monaco-themes": "^0.4.4",
    "next": "14.1.3",
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -3,11 +3,11 @@ import type { Config } from "tailwindcss"
 const config = {
  darkMode: ["class"],
  content: [
-    './pages/**/*.{ts,tsx}',
-    './components/**/*.{ts,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
-	],
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
  prefix: "",
  theme: {
    container: {
@ -18,6 +18,10 @@ const config = {
      },
    },
    extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)"],
+        mono: ["var(--font-geist-mono)"],
+      },
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",