frontend changes (#489)

kscalelabs · Oct 17, 2024 · c7084ff · c7084ff
1 parent d1a2cb2
commit c7084ff
Show file tree

Hide file tree

Showing 8 changed files with 311 additions and 105 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -17,8 +17,6 @@ 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 Home from "@/components/pages/Home";
-import KLangPage from "@/components/pages/KLangPage";
 import ListingDetails from "@/components/pages/ListingDetails";
 import Login from "@/components/pages/Login";
 import Logout from "@/components/pages/Logout";
@@ -62,7 +60,6 @@ const App = () => {
                       <Route path="/about" element={<About />} />
                       <Route path="/downloads" element={<DownloadsPage />} />
                       <Route path="/research" element={<ResearchPage />} />
-                      <Route path="/klang" element={<KLangPage />} />
                       <Route path="/browse/:page?" element={<Browse />} />
                       <Route
                         path="/file/:artifactId"

diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
@@ -209,20 +209,16 @@ const Navbar = () => {
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
               >
-                <button
-                  className={`px-2 xl:px-3 py-2 rounded-md text-sm tracking-widest text-gray-1 hover:text-primary-9`}
-                >
+                <button className="px-2 xl:px-3 py-2 rounded-md text-sm tracking-widest text-gray-1 hover:text-primary-9">
                   Developers
                 </button>
                 <div
                   ref={dropdownRef}
-                  className={`absolute right-0 bg-gray-12 shadow-lg rounded-2xl transition-all duration-300 ease-in-out overflow-hidden max-w-[400px] w-max border border-gray-10 ${
+                  className={`absolute right-0 top-full mt-5 bg-gray-12 shadow-lg rounded-2xl transition-all duration-300 ease-in-out overflow-hidden max-w-[400px] w-max border border-gray-10 ${
                     showDevelopersDropdown
-                      ? "opacity-100 max-h-[500px] mt-4"
-                      : "opacity-0 max-h-0 mt-3"
+                      ? "opacity-100 visible"
+                      : "opacity-0 invisible"
                   }`}
-                  onMouseEnter={handleMouseEnter}
-                  onMouseLeave={handleMouseLeave}
                 >
                   <div className="py-4 px-4">
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

diff --git a/frontend/src/components/pages/Home.tsx b/frontend/src/components/pages/Home.tsx
@@ -12,6 +12,7 @@ import {
 import PageHeader from "@/components/ui/PageHeader";
 import KScaleASCII from "@/images/KScaleASCII.png";
 import KScaleASCIIMobile from "@/images/KScaleASCIIMobile.png";
+import stompy from "@/images/stompy.png";
 import {
   ChevronRightIcon,
   CodeIcon,
@@ -139,7 +140,7 @@ const StompyProSection: React.FC = () => {
     >
       <div className="absolute inset-0">
         <img
-          src="https://www.kscalelabs.com/images/hero/heroBG.png"
+          src={stompy}
           alt="Stompy Pro Background"
           className="w-full h-full object-cover"
         />
@@ -168,16 +169,16 @@ const StompyMiniSection: React.FC = () => {
     >
       <div className="absolute inset-0">
         <img
-          src="https://images.squarespace-cdn.com/content/v1/662fdf6ffc8fcf23e5165c23/f2d3c866-922b-4155-b898-77d85b3b06b3/FULL+FIEW2.jpg?format=2500w"
+          src={stompy}
           alt="Stompy Mini Background"
-          className="w-full h-full object-cover"
+          className="w-full h-full object-cover scale-x-[-1]"
         />
       </div>
 
       <div className="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row-reverse items-center justify-between h-full px-4">
         <div className="unit-copy-wrapper text-center md:text-right mb-8 md:mb-0">
           <div className="split-wrapper-top mt-8 md:mt-0">
-            <h2 className="headline text-4xl font-bold mb-2 md:mb-4 text-white">
+            <h2 className="headline text-4xl font-bold mb-2 md:mb-4 text-gray-900">
               Stompy Mini
             </h2>
           </div>

diff --git a/frontend/src/components/pages/KLangPage.tsx b/frontend/src/components/pages/KLangPage.tsx
diff --git a/frontend/src/components/pages/StompyMini.tsx b/frontend/src/components/pages/StompyMini.tsx
@@ -1,26 +1,45 @@
 import React from "react";
 
-import Container from "@/components/Container";
-import CheckoutButton from "@/components/stripe/CheckoutButton";
+import ProductPage from "@/components/products/ProductPage";
+import stompy from "@/images/stompy.png";
 
 const StompyMini: React.FC = () => {
+  const images = [stompy, stompy, stompy, stompy];
+
+  const productInfo = {
+    name: "Stompy Mini",
+    description:
+      "Introducing the Stompy Mini, a compact and customizable 3D-printed robot kit for your desktop or workbench. Perfect for hobbyists, makers, and STEM enthusiasts, this DIY robot brings advanced robotics to your fingertips at an affordable price.",
+    specs: [
+      "Height: 12 inches (30 cm)",
+      "3D-printable parts for easy customization",
+      "Arduino-compatible microcontroller",
+      "Modular design for easy assembly",
+      "Beginner-friendly programming interface",
+    ],
+    features: [
+      "Step-by-step assembly guide",
+      "Basic movement and sensor capabilities",
+      "Expandable with additional modules",
+      "Open-source software and hardware",
+      "Active community for support and ideas",
+      "Regular firmware updates",
+    ],
+    price: 350,
+    productId: "prod_R1IAtdBONHzXCb",
+  };
+
   return (
-    <Container>
-      <div className="flex flex-col items-center justify-center h-full">
-        <h1 className="text-2xl font-bold">Stompy Mini</h1>
-        <p className="text-xl text-gray-11">PAGE IS UNDER CONSTRUCTION</p>
-        {/* Developer Mode Stompy Mini */}
-        {/* <CheckoutButton
-          productId="prod_R1I3mYImsmLKGe"
-          label="Buy Stompy Mini"
-        /> */}
-        {/* Production Stompy Mini */}
-        <CheckoutButton
-          productId="prod_R1IAtdBONHzXCb"
-          label="Buy Stompy Mini"
-        />
-      </div>
-    </Container>
+    <ProductPage
+      images={images}
+      productId={productInfo.productId}
+      checkoutLabel="Buy Stompy Mini"
+      title={productInfo.name}
+      description={productInfo.description}
+      features={productInfo.features}
+      keyFeatures={productInfo.specs}
+      price={productInfo.price.toString()}
+    />
   );
 };
 

diff --git a/frontend/src/components/pages/StompyPro.tsx b/frontend/src/components/pages/StompyPro.tsx
@@ -1,20 +1,45 @@
 import React from "react";
 
-import Container from "@/components/Container";
-import CheckoutButton from "@/components/stripe/CheckoutButton";
+import ProductPage from "@/components/products/ProductPage";
+import stompy from "@/images/stompy.png";
 
 const StompyPro: React.FC = () => {
+  const images = [stompy, stompy, stompy, stompy];
+
+  const productInfo = {
+    name: "Stompy Pro",
+    description:
+      "Introducing the Stompy Pro, a cutting-edge 5-foot tall humanoid robot designed to revolutionize your home or business. With advanced AI capabilities and robust construction, Stompy Pro is the perfect assistant for a wide range of tasks.",
+    specs: [
+      "Height: 5 feet (152 cm)",
+      "Advanced AI-powered decision making",
+      "Durable all-terrain design",
+      "Voice-activated commands",
+      "Customizable appearance",
+    ],
+    features: [
+      "Autonomous navigation",
+      "Object recognition and manipulation",
+      "Natural language processing",
+      "Wireless connectivity",
+      "Expandable functionality through apps",
+      "Regular software updates",
+    ],
+    price: 15000,
+    productId: "prod_R0n3nkCO4aQdlg",
+  };
+
   return (
-    <Container>
-      <div className="flex flex-col items-center justify-center h-full">
-        <h1 className="text-2xl font-bold">Stompy Pro</h1>
-        <p className="text-xl text-gray-11">PAGE IS UNDER CONSTRUCTION</p>
-        {/* Developer Mode Stompy Pro */}
-        {/* <CheckoutButton productId="prod_Qyzd8f0gFMis7c" /> */}
-        {/* Production Stompy Pro */}
-        <CheckoutButton productId="prod_R0n3nkCO4aQdlg" />
-      </div>
-    </Container>
+    <ProductPage
+      images={images}
+      productId={productInfo.productId}
+      checkoutLabel="Buy Stompy Pro"
+      title={productInfo.name}
+      description={productInfo.description}
+      features={productInfo.features}
+      keyFeatures={productInfo.specs}
+      price={productInfo.price.toString()}
+    />
   );
 };