HackBeanpot · khushikhan0 · Sep 19, 2025 · Sep 21, 2025 · Oct 3, 2025 · Oct 7, 2025
diff --git a/apps/main/src/app/(landing)/Sections/About.tsx b/apps/main/src/app/(landing)/Sections/About.tsx
@@ -6,8 +6,20 @@ import React from "react";
 
 // import clsx from "clsx";
 // import useDevice from "@repo/util/hooks/useDevice";
+import TestimonialTrain from "../../../../../../packages/ui/src/TestimonialTrain";
 
 export default function About(): React.ReactNode {
   // example for buttons, remove whenever
-  return <></>;
+  return (
+    <div>
+      {/* <Button
+        text="Back to top"
+        color="firecrackerRedLight"
+        textColor="white"
+        // icon={<FaArrowUp />}
+      /> */}
+      {/* <Button text="Submit" color="marigoldYellow" /> */}
+      <TestimonialTrain />
+    </div>
+  );
 }
diff --git a/apps/main/src/app/(landing)/page.tsx b/apps/main/src/app/(landing)/page.tsx
@@ -1,15 +1,15 @@
 import {
-  Stats,
-  Values,
-  FAQSection,
-  Landing,
-  Keynote,
-  Calendar,
-  Testimonials,
-  Apply,
+  // Stats,
+  // Values,
+  // FAQSection,
+  // Landing,
+  // Keynote,
+  // Calendar,
+  // Testimonials,
+  // Apply,
   About,
 } from "./Sections";
-import { Footer, NavBar } from "../lib/Components";
+import { Footer } from "../lib/Components";
 import Head from "next/head";
 import React from "react";
 
@@ -19,16 +19,16 @@ export default function Page(): JSX.Element {
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </Head>
-      <NavBar />
+      {/* <NavBar />
       <Landing />
       <Apply />
-      <Stats />
+      <Stats /> */}
       <About />
-      <Values />
+      {/* <Values />
       <Keynote />
       <Calendar />
       <Testimonials />
-      <FAQSection />
+      <FAQSection /> */}
       <Footer />
     </main>
   );

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -23,7 +23,8 @@
     "./Section": "./src/Section.tsx", 
     "./Placeholder": "./src/Placeholder.tsx", 
     "./Button": "./src/Button.tsx", 
-    "./RibbonTitle": "./src/RibbonTitle.tsx"
+    "./RibbonTitle": "./src/RibbonTitle.tsx",
+    "./Train": "./src/TestimonialTrain.tsx"
   },
   "license": "MIT",
   "scripts": {

diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
@@ -8,6 +8,7 @@ interface ButtonProps {
   color?: string;
   textColor?: string;
   size?: string;
+  removePadding?: boolean;
 }
 
 const bgColorMap: Record<string, string> = {
@@ -16,6 +17,7 @@ const bgColorMap: Record<string, string> = {
   marigoldYellow: "bg-marigoldYellow hover:bg-marigoldYellowDark",
   starlightBlue: "bg-starlightBlue hover:bg-starlightBlueDark",
   cottonCandyCoral: "bg-cottonCandyCoral hover:bg-cottonCandyCoralDark",
+  ribbonBlue: "bg-ribbonBlue",
 };
 
 const sizeMap: Record<string, string> = {
@@ -27,6 +29,7 @@ const sizeMap: Record<string, string> = {
 const textColorMap: Record<string, string> = {
   charcoalFog: "text-[#353131]",
   white: "text-white",
+  starlightBlue: "text-starlightBlue",
 };
 const Button: React.FC<ButtonProps> = ({
   text,
@@ -35,6 +38,7 @@ const Button: React.FC<ButtonProps> = ({
   onClick,
   icon,
   size = "small",
+  removePadding,
 }) => {
   const bgClass = bgColorMap[color] || bgColorMap["mossGreen"];
   const textColorClass = textColorMap[textColor];
@@ -44,7 +48,7 @@ const Button: React.FC<ButtonProps> = ({
 
   return (
     <button className={buttonClasses} onClick={onClick}>
-      {icon && <span className="p-2">{icon}</span>}
+      {icon && <span className={removePadding ? "" : "p-2"}>{icon}</span>}
       {text && text}
     </button>
   );

diff --git a/packages/ui/src/TestimonialAssets/LeftBush.tsx b/packages/ui/src/TestimonialAssets/LeftBush.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+const LeftBush = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={196}
+    height={127}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#4B642E"
+      d="M53.24 84.798C47.712 49.576 47.45-5.367 83.156.423c14.08 2.284 18.583 12.459 17.552 26.06 11.438-13.828 22.939-19.723 33.376-5.752 19.091 25.554-14.693 60.104-50.376 79.313 7.332 4.223 14.124 8.504 19.843 12.369l2.047-11.042c18.747-18.523 28.682-50.078 61.487-28.53 27.872 18.306-31.827 49.492-64.077 42.508l.297-1.605-11.78 6.76C57.395 122.544-8.508 119.007.91 88.536c5.339-17.269 28.065-13.79 52.329-3.738"
+    />
+    <path
+      fill="#91BE5E"
+      d="M72.224 31.931c12.964-.447 18.172 19.68 19.616 43.001 4.712-18.295 13.456-32.8 25.434-32.8 22.432 0 20.132 17.474 13.505 38.367 2.949-1.805 6.277-2.843 9.955-2.843 20.601 0 17.307 11.179 10.859 24.078 8.086-4.877 17.537-7.742 24.474-5.64 19.549 5.923 31.064 30.272 0 30.272h-39.45l-.009-.011h-19.332l-.002.013h-27.64v-.001h-54.44c-8.412-23.008-17.665-69.169 12.617-69.752 3.459-.067 6.5.487 9.167 1.552 1.386-14.942 5.737-25.908 15.246-26.236"
+    />
+    <path
+      fill="#4B642E"
+      d="M52.41 54.467s-28.234 3.034-25.2-9.333c3.033-12.6 28.233 6.3 28.233 6.3zM142.295 42.48s1.383-11.578 8.079-7.396c6.833 4.23-8.928 13.082-8.928 13.082z"
+    />
+  </svg>
+);
+export default LeftBush;
diff --git a/packages/ui/src/TestimonialAssets/RightBush.tsx b/packages/ui/src/TestimonialAssets/RightBush.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+const RightBush = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={355}
+    height={214}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#4B642E"
+      d="M284.98 202.066s68.096-76.726 39.723-99.07-44.688 56.747-44.688 56.747 87.484-130.517 34.166-145.65c-53.318-15.132-43.978 99.543-43.978 99.543s-8.985-76.134-55.092-66.44c-45.988 9.694 19.507 92.095 19.507 92.095s-66.795-56.392-102.262-30.738c-35.584 25.654 47.053 71.642 47.053 71.642s-65.377-18.679-91.15 4.02c-25.772 22.698-7.802 29.201-7.802 29.201z"
+    />
+    <path
+      fill="#4B642E"
+      d="M252.233 34.427s13.359-31.565.236-34.284c-13.241-2.72-.236 34.284-.236 34.284M74.428 149.34s.591-34.285-12.65-31.92 12.65 31.92 12.65 31.92"
+    />
+    <path
+      fill="#709941"
+      d="M194.305 88.455s-10.522-15.96-17.97-6.502c-7.448 9.457 17.97 6.502 17.97 6.502"
+    />
+    <path
+      fill="#4B642E"
+      d="M19.337 179.485s-10.522-15.96-17.97-6.502 17.97 6.502 17.97 6.502M253.534 81.362s22.817-24.117 9.221-31.092c-13.595-6.976-9.221 31.092-9.221 31.092M321.276 73.324s38.54-.237 32.274-16.67c-6.266-16.432-37.121 13.005-37.121 13.005l4.729 3.783z"
+    />
+    <path
+      fill="#91BE5E"
+      d="M316.9 99.214s-23.29-5.438-35.112 38.895c-11.94 44.333-14.659 57.456-14.659 57.456s-23.054-121.65 6.147-129.453c29.083-7.685 21.398 36.057 21.398 36.057s18.561-7.33 22.226-3.073zM255.662 171.209S233.199 53.815 208.727 65.283c-24.353 11.467 43.151 110.655 43.151 110.655s-85.714-66.02-113.259-45.567 43.179 56.682 43.179 56.682-50.388-14.07-61.027 4.372c-10.64 18.443 2.482 21.162 2.482 21.162l140.566-8.039-8.276-33.339z"
+    />
+  </svg>
+);
+export default RightBush;
diff --git a/packages/ui/src/TestimonialAssets/TrainBackground.tsx b/packages/ui/src/TestimonialAssets/TrainBackground.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+const TrainBackground = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={2000}
+    height={1086}
+    fill="none"
+    {...props}
+  >
+    <g fill="#709941" clipPath="url(#a)">
+      <path d="M203 60.513c-114.8 2.4-191.167-29.334-215-45.5v261.5l2157 29v-245c-55.17-20-191.1-60-293.5-60-128 0-342 60-668.5 60-198 0-435.5-67-612.5-60s-224 57-367.5 60" />
+      <path d="M0 106h2000v843H0zM263 1046c-157 18-238.333-42.83-288-79v-18h2214.5v136.5c-70.33-32.67-238.3-98-347.5-98-229.5 0-263.47 64.64-438 76.5-316.5 21.5-563-79.108-794.5-76.5-177.5 2-205.329 42.31-346.5 58.5" />
+    </g>
+    <defs>
+      <clipPath id="a">
+        <path fill="#fff" d="M0 0h2000v1086H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default TrainBackground;
diff --git a/packages/ui/src/TestimonialAssets/TrainTracks.tsx b/packages/ui/src/TestimonialAssets/TrainTracks.tsx
@@ -0,0 +1,65 @@
+import React from "react";
+import type { SVGProps } from "react";
+
+const TrainTracks = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 1335 125"
+    xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="none"
+    fill="none"
+    {...props}
+  >
+    <path fill="#C8AF89" d="M19.797 0V124.53H53.7V0z" />
+    <path fill="#353131" d="M53.7 0V124.53H19.797v-3.591h29.83V0z" />
+    <path fill="#C8AF89" d="M95.889 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M129.792 0V124.53H95.889v-3.591h29.83V0z" />
+    <path fill="#C8AF89" d="M171.978 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M205.881 0V124.53h-33.903v-3.591h29.831V0z" />
+    <path fill="#C8AF89" d="M242.219 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M276.115 0V124.53h-33.896v-3.591h29.823V0z" />
+    <path fill="#C8AF89" d="M318.309 0V124.53h33.904V0z" />
+    <path fill="#353131" d="M352.205 0V124.53h-33.896v-3.591h29.824V0z" />
+    <path fill="#C8AF89" d="M394.4 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M428.296 0V124.53H394.4v-3.591h29.823V0z" />
+    <path fill="#C8AF89" d="M464.631 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M498.534 0V124.53h-33.903v-3.591h29.831V0z" />
+    <path fill="#C8AF89" d="M540.724 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M574.627 0V124.53h-33.903v-3.591h29.83V0z" />
+    <path fill="#C8AF89" d="M616.816 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M650.719 0V124.53h-33.903v-3.591h29.83V0z" />
+    <path fill="#C8AF89" d="M687.056 0V124.53h33.903V0z" />
+    <path fill="#353131" d="M720.959 0V124.53h-33.903v-3.591h29.831V0z" />
+    <path fill="#C8AF89" d="M763.146 0V124.53h33.904V0z" />
+    <path fill="#353131" d="M797.05 0V124.53h-33.904v-3.591h29.831V0z" />
+    <path fill="#C8AF89" d="M839.237 0V124.53h33.904V0z" />
+    <path fill="#353131" d="M873.141 0V124.53h-33.904v-3.591h29.831V0z" />
+    <path fill="#C8AF89" d="M909.476 0V124.53h33.904V0z" />
+    <path fill="#353131" d="M943.38 0V124.53h-33.904v-3.591h29.831V0z" />
+    <path fill="#C8AF89" d="M985.568 0V124.53h33.902V0z" />
+    <path fill="#353131" d="M1019.47 0V124.53h-33.902v-3.591h29.832V0z" />
+    <path fill="#C8AF89" d="M1061.66 0V124.53h33.9V0z" />
+    <path fill="#353131" d="M1095.56 0V124.53h-33.9v-3.591h29.83V0z" />
+    <path fill="#C8AF89" d="M1131.9 0V124.53h33.9V0z" />
+    <path fill="#353131" d="M1165.79 0V124.53h-33.89v-3.591h29.82V0z" />
+    <path fill="#C8AF89" d="M1207.99 0V124.53h33.9V0z" />
+    <path fill="#353131" d="M1241.89 0V124.53h-33.9v-3.591h29.82V0z" />
+    <path fill="#C8AF89" d="M1284.07 0V124.53h33.91V0z" />
+    <path
+      fill="#353131"
+      d="M1317.98 0V124.53h-33.91v-3.591h29.83V0zM0 98.586v8.896h222.422v-8.896zM0 17.055v8.895h222.422v-8.895zM222.422 98.586v8.896h222.422v-8.896zM222.422 17.055v8.895h222.422v-8.895zM444.844 98.586v8.896h222.422v-8.896zM444.844 17.055v8.895h222.422v-8.895zM667.267 98.586v8.896h222.422v-8.896zM667.267 17.055v8.895h222.422v-8.895z"
+    />
+    <path
+      fill="#353131"
+      d="M889.68 98.586v8.896h222.42v-8.896zM889.68 17.055v8.895h222.42v-8.895zM1112.1 98.586v8.896h222.42v-8.896zM1112.1 17.055v8.895h222.42v-8.895z"
+    />
+    <path
+      fill="#7A7979"
+      d="M0 21.355v2.842h222.422v-2.842zM0 102.772v2.843h222.422v-2.843zM222.422 21.354v2.843h222.422v-2.843zM222.422 102.772v2.843h222.422v-2.843zM444.844 21.355v2.842h222.422v-2.842zM444.844 102.772v2.843h222.422v-2.843zM667.267 21.355v2.842h222.422v-2.842zM667.267 102.772v2.843h222.422v-2.843z"
+    />
+    <path
+      fill="#7A7979"
+      d="M889.68 21.355v2.842h222.42v-2.842zM889.68 102.772v2.843h222.42v-2.843zM1112.1 21.355v2.842h222.42v-2.842zM1112.1 102.772v2.843h222.42v-2.843z"
+    />
+  </svg>
+);
+export default TrainTracks;
diff --git a/packages/ui/src/TestimonialTrain.tsx b/packages/ui/src/TestimonialTrain.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import React, { useState, useCallback, useEffect } from "react";
+import Train from "./Train";
+import TrainTracks from "./TestimonialAssets/TrainTracks";
+import Button from "./Button";
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import useDevice from "@repo/util/hooks/useDevice";
+// import clsx from "clsx";
+
+const deviceBounds = [
+  { leftBound: 0, rightBound: 1400, threshold: 500 }, // isMobile
+  { leftBound: 0, rightBound: 1400, threshold: 600 }, // isTablet
+  { leftBound: 0, rightBound: 1400, threshold: 650 }, // isDesktop
+];
+
+export default function TestimonialTrain() {
+  const { isMobile, isTablet } = useDevice();
+  const [pixelPos, setPixelPos] = useState(1400);
+  const [boundsID, setBoundsID] = useState(2);
+
+  const currBounds = deviceBounds[boundsID];
+
+  useEffect(() => {
+    setBoundsID(isMobile ? 0 : isTablet ? 1 : 2);
+  }, [isMobile, isTablet]);
+
+  const handleLeftClick = useCallback(() => {
+    if (pixelPos > currBounds.leftBound + currBounds.threshold) {
+      setPixelPos((prev) => prev - currBounds.threshold);
+    }
+  }, [pixelPos, currBounds]);
+
+  const handleRightClick = useCallback(() => {
+    if (pixelPos < currBounds.rightBound) {
+      setPixelPos((prev) => prev + currBounds.threshold);
+    }
+    if (pixelPos < currBounds.rightBound) {
+      setPixelPos((prev) => prev + currBounds.threshold);
+    }
+  }, [pixelPos, currBounds]);
+
+  return (
+    <div className="relative w-full h-[400px] bg-tomato">
+      <div className="relative overflow-hidden w-screen z-10 p-10">
+        <Train
+          className={`h-full transition-transform ease-in-out duration-300`}
+          style={{ transform: `translateX(-${pixelPos}px)` }}
+        />
+      </div>
+      <div className="absolute w-full z-20 h-1/2 self-center">
+        <div className="flex flex-row items-center justify-center gap-[550px]">
+          <Button
+            color="ribbonBlue"
+            textColor="starlightBlue"
+            icon={<IoIosArrowBack size={28} />}
+            removePadding={true}
+            onClick={handleLeftClick}
+          />
+          <Button
+            color="ribbonBlue"
+            textColor="starlightBlue"
+            icon={<IoIosArrowForward size={28} />}
+            removePadding={true}
+            onClick={handleRightClick}
+          />
+        </div>
+      </div>
+      <div className="absolute w-full z-0 bottom-10">
+        <TrainTracks />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/Train.tsx b/packages/ui/src/Train.tsx