Downloads page and other clean up (#378)

kscalelabs · Sep 11, 2024 · e87ff98 · e87ff98
1 parent 846da57
commit e87ff98
Show file tree

Hide file tree

Showing 19 changed files with 451 additions and 254 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,6 +27,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@react-oauth/google": "^0.12.1",
     "@react-three/drei": "^9.109.2",
     "@react-three/fiber": "^8.16.8",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -10,6 +10,7 @@ import "@/App.css";
 
 import Container from "@/components/Container";
 import NotFoundRedirect from "@/components/NotFoundRedirect";
+import { ScrollToTop } from "@/components/ScrollToTop";
 import Footer from "@/components/footer/Footer";
 import Navbar from "@/components/nav/Navbar";
 import APIKeys from "@/components/pages/APIKeys";
@@ -26,11 +27,12 @@ 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";
 
+import DownloadsPage from "./components/pages/Download";
+
 const PendoInitializer = () => {
   const location = useLocation(); // Hook to get current route
 
@@ -61,42 +63,44 @@ const App = () => {
         <AuthenticationProvider>
           <AlertQueueProvider>
             <AlertQueue>
-              <div className="dark:bg-black dark:text-white min-h-screen flex flex-col">
-                <Navbar />
-                <PendoInitializer />{" "}
-                {/* This component is where Pendo is initialized */}
-                <div className="flex-grow">
-                  <Container>
-                    <Routes>
-                      <Route path="/" element={<Home />} />
+              <ScrollToTop>
+                <div className="dark:bg-black dark:text-white min-h-screen flex flex-col">
+                  <Navbar />
+                  <PendoInitializer />{" "}
+                  {/* This component is where Pendo is initialized */}
+                  <div className="flex-grow">
+                    <Container>
+                      <Routes>
+                        <Route path="/" element={<Home />} />
 
-                      <Route path="/about" element={<About />} />
-                      <Route path="/buy-stompy" element={<BuyPage />} />
+                        <Route path="/about" element={<About />} />
+                        <Route path="/buy" element={<BuyPage />} />
+                        <Route path="/downloads" element={<DownloadsPage />} />
 
-                      <Route path="/studio" element={<Studio />} />
-                      <Route path="/browse/:page?" element={<Browse />} />
-                      <Route
-                        path="/file/:artifactId"
-                        element={<FileBrowser />}
-                      />
+                        <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="/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="/item/:id" element={<ListingDetails />} />
-                      <Route path="/keys" element={<APIKeys />} />
+                        <Route path="/create" element={<Create />} />
+                        <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 />} />
-                    </Routes>
-                  </Container>
+                        <Route path="/profile/:id?" element={<Profile />} />
+                        <Route path="/404" element={<NotFound />} />
+                        <Route path="*" element={<NotFoundRedirect />} />
+                      </Routes>
+                    </Container>
+                  </div>
+                  <Footer />
                 </div>
-                <Footer />
-              </div>
+              </ScrollToTop>
             </AlertQueue>
           </AlertQueueProvider>
         </AuthenticationProvider>

diff --git a/frontend/src/components/Container.tsx b/frontend/src/components/Container.tsx
@@ -11,7 +11,7 @@ const Container = (props: ContainerProps) => {
 
   // Landing page / home path.
   if (pathname === "/") {
-    return <div className="pt-14">{children}</div>;
+    return <div>{children}</div>;
   }
 
   return <div className="container mx-auto pt-24 pb-16 px-8">{children}</div>;

diff --git a/frontend/src/components/ScrollToTop.tsx b/frontend/src/components/ScrollToTop.tsx
@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+
+import { useScrollToTop } from "@/hooks/useScrollToTop";
+
+interface ScrollToTopProps {
+  children: ReactNode;
+}
+
+export function ScrollToTop({ children }: ScrollToTopProps) {
+  useScrollToTop();
+  return <>{children}</>;
+}
diff --git a/frontend/src/components/landing/BuySection.tsx b/frontend/src/components/landing/BuySection.tsx
@@ -1,7 +1,11 @@
+import { useNavigate } from "react-router-dom";
+
 import { Button } from "@/components/ui/Buttons/Button";
 import KScale_Garage from "@/images/KScale_Garage.jpeg";
 
 export default function BuySection() {
+  const navigate = useNavigate();
+
   return (
     <section className="w-full py-12 md:py-24 lg:py-32">
       <div className="container mx-auto px-4 md:px-6">
@@ -56,10 +60,17 @@ export default function BuySection() {
               </li>
             </ul>
             <div className="flex flex-col gap-2 sm:flex-row">
-              <Button className="w-full sm:w-auto inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-8 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300">
+              <Button
+                className="w-full sm:w-auto inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-8 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
+                onClick={() => navigate("/buy")}
+              >
                 Buy Now
               </Button>
-              <Button variant="outline" className="w-full sm:w-auto">
+              <Button
+                variant="outline"
+                className="w-full sm:w-auto"
+                onClick={() => navigate("/buy")}
+              >
                 Learn More
               </Button>
             </div>

diff --git a/frontend/src/components/landing/HeroASCIIArt.tsx b/frontend/src/components/landing/HeroASCIIArt.tsx
@@ -153,7 +153,7 @@ const HeroASCIIArt = () => {
       <Meteors />
       <div
         ref={asciiRef}
-        className="font-mono text-xs whitespace-pre overflow-hidden m-2 my-4 sm:mx-4 md:mx-8 max-w-full max-h-[80vh] rounded-3xl"
+        className="font-mono text-xs whitespace-pre overflow-hidden m-2 my-4 sm:mx-4 md:mx-8 max-w-full max-h-[100vh] rounded-3xl"
       />
     </div>
   );

diff --git a/frontend/src/components/landing/NavSection.tsx b/frontend/src/components/landing/NavSection.tsx
@@ -8,6 +8,7 @@ import {
   CardTitle,
 } from "@/components/ui/Card";
 import {
+  ChevronRightIcon,
   CodeIcon,
   DownloadIcon,
   LayersIcon,
@@ -20,9 +21,15 @@ export default function NavSection() {
   return (
     <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-[#191919]">
       <div className="sm:mx-48 px-4 md:px-6">
-        <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl mb-8">
-          Explore More
-        </h2>
+        <div className="flex flex-col justify-center mb-8">
+          <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl mb-2">
+            The K-Scale Ecosystem
+          </h2>
+          <p className="text-lg text-gray-700 dark:text-gray-300">
+            We&apos;re open source and always iterating. Join us in building the
+            future of robotics.
+          </p>
+        </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
           {[
             {
@@ -33,17 +40,17 @@ export default function NavSection() {
               buttonText: "Explore K-Lang",
             },
             {
-              title: "Kernel Images",
+              title: "Downloads",
               description:
-                "View and download official K-Scale and community uploaded kernel images",
+                "View and download official K-Scale and community uploaded kernel images, URDFs, ML models, and more",
               icon: DownloadIcon,
-              path: "/kernel-images",
-              buttonText: "Browse Images",
+              path: "/downloads",
+              buttonText: "Browse Downloads",
             },
             {
               title: "Browse Builds",
               description:
-                "Browse completed/published robot builds which include CAD files, part lists, and various related downloads",
+                "Browse robot builds with linked CAD files, part lists, and various related downloads",
               icon: MagnifyingGlassIcon,
               path: "/browse",
               buttonText: "View Builds",
@@ -58,7 +65,7 @@ export default function NavSection() {
           ].map((item, index) => (
             <Card
               key={index}
-              className="cursor-pointer flex flex-col h-full"
+              className="cursor-pointer flex flex-col h-full transition-all duration-300 ease-in-out hover:scale-105 hover:shadow-lg bg-gradient-to-br from-white to-gray-100 dark:from-[#222222] dark:to-[#111111]"
               onClick={() => navigate(item.path)}
             >
               <CardHeader>
@@ -69,7 +76,7 @@ export default function NavSection() {
                 <item.icon className="w-12 h-12 mb-4" />
                 <div className="inline-flex items-center text-sm font-medium">
                   {item.buttonText}
-                  <item.icon className="ml-1 h-4 w-4" />
+                  <ChevronRightIcon className="ml-1 h-4 w-4" />
                 </div>
               </CardContent>
             </Card>

diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
@@ -1,25 +1,38 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { isMobile } from "react-device-detect";
-import {
-  FaMoon,
-  FaSignInAlt,
-  FaSun,
-  FaUserCircle,
-  FaUserPlus,
-} from "react-icons/fa";
-import { useNavigate } from "react-router-dom";
+import { FaMoon, FaSun, FaUserCircle } from "react-icons/fa";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import Sidebar from "@/components/nav/Sidebar";
-import { useAuthentication } from "@/hooks/useAuth";
 import { useDarkMode } from "@/hooks/useDarkMode";
 
 const ICON_SIZE = isMobile ? 16 : 20;
 
 const Navbar = () => {
   const [showSidebar, setShowSidebar] = useState<boolean>(false);
+  const [showNavbar, setShowNavbar] = useState<boolean>(true);
   const { darkMode, setDarkMode } = useDarkMode();
-  const { isAuthenticated } = useAuthentication();
   const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (location.pathname === "/") {
+        setShowNavbar(window.scrollY > 100);
+      }
+    };
+
+    if (location.pathname === "/") {
+      setShowNavbar(false);
+      window.addEventListener("scroll", handleScroll);
+    } else {
+      setShowNavbar(true);
+    }
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [location.pathname]);
+
+  if (!showNavbar) return null;
 
   return (
     <>
@@ -41,52 +54,10 @@ const Navbar = () => {
                 <FaSun size={ICON_SIZE} />
               )}
             </button>
-            {isAuthenticated ? (
-              <button onClick={() => setShowSidebar(true)} className="pl-4">
-                <FaUserCircle size={ICON_SIZE} />
-              </button>
-            ) : (
-              <div className="flex items-center gap-2 sm:gap-4">
-                <button
-                  onClick={() => navigate("/signup")}
-                  className="
-                    flex
-                    items-center
-                    gap-2
-                    justify-center
-                    py-1
-                    sm:py-2
-                    px-2
-                    sm:px-4
-                    rounded-full
-                    text-sm
-                    sm:text-base
-                    bg-[#2C514C]/30 hover:bg-[#2C514C]/50 transition-colors tracking-wider
-                  "
-                >
-                  <FaUserPlus size={ICON_SIZE} className="text-[#487a73]" />{" "}
-                  Sign Up
-                </button>
-                <button
-                  onClick={() => navigate("/login")}
-                  className="
-                    flex
-                    items-center
-                    gap-2
-                    justify-center
-                    py-1
-                    sm:py-2
-                    px-2
-                    sm:px-4
-                    text-sm
-                    sm:text-base
-                    rounded-full bg-[#894B6D]/30 hover:bg-[#894B6D]/50 transition-colors tracking-wider"
-                >
-                  <FaSignInAlt size={ICON_SIZE} className="text-[#894B6D]" />{" "}
-                  Sign In
-                </button>
-              </div>
-            )}
+
+            <button onClick={() => setShowSidebar(true)} className="pl-4">
+              <FaUserCircle size={ICON_SIZE} />
+            </button>
           </div>
         </div>
       </nav>

diff --git a/frontend/src/components/pages/BuyPage.tsx b/frontend/src/components/pages/BuyPage.tsx
@@ -3,7 +3,7 @@ const BuyPage = () => {
     <section>
       <div className="py-8 px-4 mx-auto min-h-screen max-w-screen-xl text-center lg:py-16">
         <h1 className="mb-8 text-4xl font-extrabold tracking-tight leading-none md:text-5xl lg:text-6xl">
-          Buy Stompy (In Progress)
+          Buy Stompy Pro (In Progress)
         </h1>
         <p className="mb-4 text-lg font-normal lg:text-xl sm:px-16 lg:px-48">
           This page is currently under construction. Stompy, our robot, is also