Bulk of MVP1 (#374)

* Studio routing * Add bento box and cards * New landing page
kscalelabs · Sep 11, 2024 · e6b2716 · e6b2716
1 parent f886b9f
commit e6b2716
Show file tree

Hide file tree

Showing 74 changed files with 1,169 additions and 506 deletions.
diff --git a/frontend/components.json b/frontend/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/App.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
diff --git a/frontend/index.html b/frontend/index.html
@@ -15,6 +15,8 @@
   <!-- Third-party stylesheets -->
   <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap" rel="stylesheet">
 
   <!-- Manifest -->
   <link rel="icon" href="assets/favicon.ico" type="image/x-icon" />

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -25,13 +25,15 @@
   "dependencies": {
     "@formspree/react": "^2.5.1",
     "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@react-oauth/google": "^0.12.1",
     "@react-three/drei": "^9.109.2",
     "@react-three/fiber": "^8.16.8",
     "@types/three": "^0.168.0",
     "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "eventsource": "^2.0.2",
     "hamburger-react": "^2.5.1",
@@ -54,7 +56,8 @@
     "react-router-dom": "6.25.1",
     "react-use-websocket": "^4.8.1",
     "remark-gfm": "^4.0.0",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
     "three": "^0.167.1",
     "urdf-loader": "^0.12.2",
     "zod": "^3.23.8",
@@ -64,7 +67,7 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.8.0",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/node": "^22.1.0",
+    "@types/node": "^22.5.4",
     "@types/pako": "^2.0.3",
     "@types/react": "^18.2.38",
     "@types/react-dom": "^18.2.15",

diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -29,8 +29,7 @@ body.dark-mode a.link {
 html,
 body {
   word-wrap: break-word;
-  font-family: "Roboto", "Franklin Gothic Medium", "Arial Narrow", Arial,
-    sans-serif;
+  font-family: "Manrope", sans-serif;
 }
 
 form {
@@ -102,3 +101,68 @@ body.dark-mode .btn-danger:hover {
   background-color: #f0cbce;
   color: #201a42;
 }
+
+@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%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --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%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -6,30 +6,31 @@ import {
   useLocation,
 } from "react-router-dom";
 
-import "App.css";
+import "@/App.css";
 
-import { AlertQueue, AlertQueueProvider } from "hooks/useAlertQueue";
-import { AuthenticationProvider } from "hooks/useAuth";
-import { DarkModeProvider } from "hooks/useDarkMode";
-
-import Container from "components/Container";
-import NotFoundRedirect from "components/NotFoundRedirect";
-import Footer from "components/footer/Footer";
-import Navbar from "components/nav/Navbar";
-import APIKeys from "components/pages/APIKeys";
-import About from "components/pages/About";
-import Browse from "components/pages/Browse";
-import BuyStompy from "components/pages/BuyStompy";
-import Create from "components/pages/Create";
-import EmailSignup from "components/pages/EmailSignup";
-import FileBrowser from "components/pages/FileBrowser";
-import Home from "components/pages/Home";
-import ListingDetails from "components/pages/ListingDetails";
-import Login from "components/pages/Login";
-import Logout from "components/pages/Logout";
-import NotFound from "components/pages/NotFound";
-import Profile from "components/pages/Profile";
-import Signup from "components/pages/Signup";
+import Container from "@/components/Container";
+import NotFoundRedirect from "@/components/NotFoundRedirect";
+import Footer from "@/components/footer/Footer";
+import LandingPage from "@/components/landing/LandingPage";
+import Navbar from "@/components/nav/Navbar";
+import APIKeys from "@/components/pages/APIKeys";
+import About from "@/components/pages/About";
+import Browse from "@/components/pages/Browse";
+import BuyPage from "@/components/pages/BuyPage";
+import Create from "@/components/pages/Create";
+import EmailSignup from "@/components/pages/EmailSignup";
+import FileBrowser from "@/components/pages/FileBrowser";
+import Home from "@/components/pages/Home";
+import ListingDetails from "@/components/pages/ListingDetails";
+import Login from "@/components/pages/Login";
+import Logout from "@/components/pages/Logout";
+import NotFound from "@/components/pages/NotFound";
+import Profile from "@/components/pages/Profile";
+import Signup from "@/components/pages/Signup";
+import Studio from "@/components/pages/Studio";
+import { AlertQueue, AlertQueueProvider } from "@/hooks/useAlertQueue";
+import { AuthenticationProvider } from "@/hooks/useAuth";
+import { DarkModeProvider } from "@/hooks/useDarkMode";
 
 const PendoInitializer = () => {
   const location = useLocation(); // Hook to get current route
@@ -69,23 +70,31 @@ const App = () => {
                   <Container>
                     <Routes>
                       <Route path="/" element={<Home />} />
+
                       <Route path="/about" element={<About />} />
-                      <Route path="/buy-stompy" element={<BuyStompy />} />
-                      <Route path="/keys" element={<APIKeys />} />
-                      <Route path="/profile/:id?" element={<Profile />} />
+                      <Route path="/buy-stompy" element={<BuyPage />} />
+
+                      <Route path="/studio" element={<Studio />} />
+                      <Route path="/browse/:page?" element={<Browse />} />
+                      <Route
+                        path="/file/:artifactId"
+                        element={<FileBrowser />}
+                      />
+
                       <Route path="/login" element={<Login />} />
                       <Route path="/logout" element={<Logout />} />
                       <Route path="/signup/" element={<Signup />} />
                       <Route path="/signup/:id" element={<EmailSignup />} />
+
                       <Route path="/create" element={<Create />} />
-                      <Route path="/browse/:page?" element={<Browse />} />
                       <Route path="/item/:id" element={<ListingDetails />} />
+                      <Route path="/keys" element={<APIKeys />} />
+
+                      <Route path="/profile/:id?" element={<Profile />} />
                       <Route path="/404" element={<NotFound />} />
                       <Route path="*" element={<NotFoundRedirect />} />
-                      <Route
-                        path="/file/:artifactId"
-                        element={<FileBrowser />}
-                      />
+
+                      <Route path="/landing" element={<LandingPage />} />
                     </Routes>
                   </Container>
                 </div>

diff --git a/frontend/src/components/NotFoundRedirect.tsx b/frontend/src/components/NotFoundRedirect.tsx
@@ -1,4 +1,4 @@
-import NotFound from "components/pages/NotFound";
+import NotFound from "@/components/pages/NotFound";
 
 const NotFoundRedirect = () => {
   return <NotFound />;

diff --git a/frontend/src/components/auth/AuthBlock.tsx b/frontend/src/components/auth/AuthBlock.tsx
@@ -1,15 +1,19 @@
 import { useEffect, useState } from "react";
 
-import { useAlertQueue } from "hooks/useAlertQueue";
-import { useAuthentication } from "hooks/useAuth";
-
-import AuthProvider from "components/auth/AuthProvider";
-import LoginForm from "components/auth/LoginForm";
-import SignupWithEmail from "components/auth/SignupWithEmail";
-import BackButton from "components/ui/Button/BackButton";
-import { Card, CardContent, CardFooter, CardHeader } from "components/ui/Card";
-import Header from "components/ui/Header";
-import Spinner from "components/ui/Spinner";
+import AuthProvider from "@/components/auth/AuthProvider";
+import LoginForm from "@/components/auth/LoginForm";
+import SignupWithEmail from "@/components/auth/SignupWithEmail";
+import BackButton from "@/components/ui/Buttons/BackButton";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/Card";
+import Header from "@/components/ui/Header";
+import Spinner from "@/components/ui/Spinner";
+import { useAlertQueue } from "@/hooks/useAlertQueue";
+import { useAuthentication } from "@/hooks/useAuth";
 
 interface AuthBlockProps {
   title?: string;

diff --git a/frontend/src/components/auth/AuthProvider.tsx b/frontend/src/components/auth/AuthProvider.tsx
@@ -2,12 +2,11 @@ import { useEffect, useState } from "react";
 import { FaGithub } from "react-icons/fa";
 import { FcGoogle } from "react-icons/fc";
 
+import { Button } from "@/components/ui/Buttons/Button";
+import Spinner from "@/components/ui/Spinner";
+import { useAlertQueue } from "@/hooks/useAlertQueue";
+import { useAuthentication } from "@/hooks/useAuth";
 import { GoogleOAuthProvider, useGoogleLogin } from "@react-oauth/google";
-import { useAlertQueue } from "hooks/useAlertQueue";
-import { useAuthentication } from "hooks/useAuth";
-
-import { Button } from "components/ui/Button/Button";
-import Spinner from "components/ui/Spinner";
 
 const GITHUB_OAUTH_URL_BASE =
   "https://github.com/login/oauth/authorize?scope=user:email&client_id=";

diff --git a/frontend/src/components/auth/LoginForm.tsx b/frontend/src/components/auth/LoginForm.tsx
@@ -1,14 +1,13 @@
 import { SubmitHandler, useForm } from "react-hook-form";
 
+import { Button } from "@/components/ui/Buttons/Button";
+import ErrorMessage from "@/components/ui/ErrorMessage";
+import { Input } from "@/components/ui/Input/Input";
+import PasswordInput from "@/components/ui/Input/PasswordInput";
+import { useAlertQueue } from "@/hooks/useAlertQueue";
+import { useAuthentication } from "@/hooks/useAuth";
+import { LoginSchema, LoginType } from "@/types";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useAlertQueue } from "hooks/useAlertQueue";
-import { useAuthentication } from "hooks/useAuth";
-import { LoginSchema, LoginType } from "types";
-
-import { Button } from "components/ui/Button/Button";
-import ErrorMessage from "components/ui/ErrorMessage";
-import { Input } from "components/ui/Input/Input";
-import PasswordInput from "components/ui/Input/PasswordInput";
 
 const LoginForm = () => {
   const {

diff --git a/frontend/src/components/auth/RequireAuthentication.tsx b/frontend/src/components/auth/RequireAuthentication.tsx
@@ -1,9 +1,8 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
 
-import { useAuthentication } from "hooks/useAuth";
-
-import AuthBlock from "components/auth/AuthBlock";
+import AuthBlock from "@/components/auth/AuthBlock";
+import { useAuthentication } from "@/hooks/useAuth";
 
 interface Props {
   children: React.ReactNode;

diff --git a/frontend/src/components/auth/SignupForm.tsx b/frontend/src/components/auth/SignupForm.tsx
@@ -1,17 +1,16 @@
 import { SubmitHandler, useForm } from "react-hook-form";
 import { Link, useNavigate } from "react-router-dom";
 
+import { Button } from "@/components/ui/Buttons/Button";
+import ErrorMessage from "@/components/ui/ErrorMessage";
+import { Input } from "@/components/ui/Input/Input";
+import PasswordInput from "@/components/ui/Input/PasswordInput";
+import { useAlertQueue } from "@/hooks/useAlertQueue";
+import { useAuthentication } from "@/hooks/useAuth";
+import { SignUpSchema, SignupType } from "@/types";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useAlertQueue } from "hooks/useAlertQueue";
-import { useAuthentication } from "hooks/useAuth";
-import { SignUpSchema, SignupType } from "types";
 import zxcvbn from "zxcvbn";
 
-import { Button } from "components/ui/Button/Button";
-import ErrorMessage from "components/ui/ErrorMessage";
-import { Input } from "components/ui/Input/Input";
-import PasswordInput from "components/ui/Input/PasswordInput";
-
 interface SignupFormProps {
   signupTokenId: string;
 }

diff --git a/frontend/src/components/auth/SignupWithEmail.tsx b/frontend/src/components/auth/SignupWithEmail.tsx
@@ -1,13 +1,12 @@
 import { useForm } from "react-hook-form";
 
+import { Button } from "@/components/ui/Buttons/Button";
+import ErrorMessage from "@/components/ui/ErrorMessage";
+import { Input } from "@/components/ui/Input/Input";
+import { useAlertQueue } from "@/hooks/useAlertQueue";
+import { useAuthentication } from "@/hooks/useAuth";
+import { EmailSignupSchema, EmailSignupType } from "@/types";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useAlertQueue } from "hooks/useAlertQueue";
-import { useAuthentication } from "hooks/useAuth";
-import { EmailSignupSchema, EmailSignupType } from "types";
-
-import { Button } from "components/ui/Button/Button";
-import ErrorMessage from "components/ui/ErrorMessage";
-import { Input } from "components/ui/Input/Input";
 
 interface EmailSignUpResponse {
   message: string;

diff --git a/frontend/src/components/footer/Footer.tsx b/frontend/src/components/footer/Footer.tsx
@@ -1,14 +1,13 @@
 import { FaDiscord, FaGithub, FaLinkedinIn } from "react-icons/fa";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
-import smallLogo from "assets/small-logo.png";
+import smallLogo from "@/assets/small-logo.png";
+import SocialLink from "@/components/footer/SocialLink";
 import {
   DiscordPrimaryColor,
   GithubPrimaryColor,
   LinkedinPrimaryColor,
-} from "types/colors";
-
-import SocialLink from "components/footer/SocialLink";
+} from "@/types/colors";
 
 const Footer = () => {
   const navigate = useNavigate();
@@ -29,7 +28,7 @@ const Footer = () => {
   }
 
   return (
-    <footer className="bg-gray-50 dark:bg-[#191919] text-sm py-20">
+    <footer className="bg-gray-50 dark:bg-[#111111] text-sm py-20">
       <div className="flex flex-col gap-4 mx-12 sm:mx-36">
         {/* Logo and Social Links */}
         <div className="flex flex-row justify-between items-center mb-8">