Mainsite/enhancement/icon adjustment

apps/main/src/app/(landing)/Sections/Values.tsx

@@ -48,9 +48,7 @@ export default function Values() {
   const iconSize = isMobile ? "w-[6vw]" : isTablet ? "w-[4vw]" : "w-[4vw]";
 
   return (
-    <div
-      className={`relative w-full ${aspectRatio} bg-ribbonBlue`}
-    >
+    <div className={`relative w-full ${aspectRatio} bg-ribbonBlue`}>
       {/* Foreground SVG Stuff (ballons, clouds, etc) */}
       <CloudsTop className="absolute z-30 top-0 left-1/2 w-[100vw] -mt-[13vw] h-auto -translate-x-1/2 " />
       <div className={`relative w-full ${aspectRatio} overflow-hidden`}>

apps/main/src/app/lib/Components/index.ts

@@ -3,4 +3,4 @@ export { default as Footer } from "./Footer.tsx";
 export { default as LocalLink } from "./LocalLink";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as VolunteeringInfoCard } from "./VolunteeringComponents/VolunteeringInfoCard.tsx";
-export { default as SponsorTicketComp } from "./SponsorComponents/SponsorTicketComp.tsx";
+export { default as SponsorTicketComp } from "../../sponsors/components/SponsorTicketComp.tsx";

apps/main/src/app/sponsor-us/components/SponsorUsTestimonialCart.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import clsx from "clsx";
+import React from "react";
+
+export type CarouselCardProps = {
+  testimonial: string;
+  sponsorRep: string;
+  sponsorRepPosition: string;
+  sponsor: string;
+};
+
+export default function SponsorUsTestimonialCart({
+  testimonial,
+  sponsorRep,
+  sponsorRepPosition,
+  sponsor,
+}: CarouselCardProps): React.ReactNode {
+  const outerDivStyles = clsx(
+    "relative flex justify-center items-center size-full text-carouselCreamLight font-DMSans-Regular mobile:text-[10px] mobile-xl:text-[10px] tablet:text-[14px] desktop:text-[18px]",
+  );
+
+  const scaleFactor = clsx(
+    "mobile:scale-[60%] mobile-xl:scale-[60%] tablet:scale-[70%] desktop:scale-[110%] desktop-sm:scale-[115%] desktop-md:scale-[125%] desktop-xl:scale-[140%]",
+  );
+
+  const outerTextStyles = clsx(
+    "absolute z-20 flex flex-col text-left space-y-5 mobile:p-32 mobile-xl:p-36 mobile-xl:top-[6%] tablet:p-36 desktop:p-8 desktop:top-[6%]",
+  );
+
+  return (
+    <div className={outerDivStyles}>
+      <div className="relative flex size-full">
+        <img
+          src="/sponsor-testimonials/cart.svg"
+          className={`size-full ${scaleFactor}`}
+          alt="Ferris Wheel Cart"
+        />
+      </div>
+      <div className={outerTextStyles}>
+        <p>{testimonial}</p>
+        <div>
+          <p className="font-DMSans-Bold">{sponsorRep}</p>
+          <p>
+            {sponsorRepPosition} at {sponsor}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/main/src/app/sponsor-us/components/SponsorUsTestimonials.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import React, { useState } from "react";
+import SponsorUsTestimonialsBackground from "../../lib/Assets/SVG/SponsorUsPageAssets/SponsorUsTestimonialsBackground";
+import RibbonTitle from "@repo/ui/RibbonTitle";
+import clsx from "clsx";
+import TestimonialsFerrisWheel from "../../lib/Assets/SVG/SponsorUsPageAssets/TestimonialsFerrisWheel";
+import Button from "@repo/ui/Button";
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
+import SponsorUsTestimonialCart from "./SponsorUsTestimonialCart";
+import useDevice from "@util/hooks/useDevice";
+
+const defaultOrder = [
+  {
+    testimonial:
+      "If I could describe HBP in one word - invigorating. We had a lot of folks who weren’t  sure what the experience would be like, and they left feeling united - really energized and really impressed with the amount of talent that was on display as well as the atmosphere.",
+    sponsorRep: "Rob Antczak",
+    sponsorRepPosition: "CTO",
+    sponsor: "Wood Mackenzie",
+  },
+  {
+    testimonial:
+      "This hackathon is very good for recruitment. We recruited half of our Fall 2023 tech co-ops exclusively through this hackathon. I’ve talked to every single project group that participated in the hackathon, observing their capabilities to explain and communicate their project to an outsider – the very things we look for at WoodMac.",
+    sponsorRep: "William Guo",
+    sponsorRepPosition: "Senior Software Engineer and Co-op Experiential Lead",
+    sponsor: "Wood Mackenzie",
+  },
+];
+
+export default function SponsorUsTestimonials() {
+  const [currentIdx, setCurrentIdx] = useState(0);
+  const [currentAnimation, setCurrentAnimation] = useState("");
+  const [currWheelAngle, setCurrWheelAngle] = useState(0);
+  const [animationKey, setAnimationKey] = useState(0);
+  const { isTablet, isDesktop } = useDevice();
+
+  const currentItem = defaultOrder[currentIdx];
+  const leftBound = currentIdx === 0;
+  const rightBound = currentIdx === defaultOrder.length - 1;
+
+  const triggerAnimation = (direction: "left" | "right") => {
+    if (
+      (leftBound && direction === "left") ||
+      (rightBound && direction === "right")
+    ) {
+      return;
+    }
+
+    setCurrentAnimation(
+      direction === "left" ? "animate-fade-left" : "animate-fade-right",
+    );
+
+    setCurrWheelAngle((prev) => (direction === "left" ? prev - 90 : prev + 90));
+
+    setAnimationKey((prev) => prev + 1);
+  };
+
+  function onClickLeftArrow() {
+    setCurrentIdx((prev) => Math.max(prev - 1, 0));
+    triggerAnimation("left");
+  }
+
+  function onClickRightArrow() {
+    setCurrentIdx((prev) => Math.min(prev + 1, defaultOrder.length - 1));
+    triggerAnimation("right");
+  }
+
+  const outerDivStyles = clsx(
+    "relative flex flex-col items-center justify-center overflow-hidden",
+  );
+
+  const outerRibbonStyles = clsx(
+    "absolute z-10 w-full desktop:top-[20%] desktop-md:top-[25%] desktop-xl:top-[25%] desktop-xl:scale-[150%] tablet:top-[20%] tablet:scale-[65%] mobile:top-[20%] mobile:scale-[60%] mobile-xl:top-[20%] mobile-xl:scale-[65%]",
+  );
+
+  const cartOuterStyles = clsx(
+    "absolute z-20 mobile:top-[15%] mobile-xl:top-[15%] tablet:top-[20%] desktop:top-[30%] desktop-md:top-[35%] desktop-xl:top-[40%]",
+  );
+
+  const buttonsOuterStyles = clsx(
+    "absolute w-full z-20 mobile:top-[60%] mobile-xl:top-[55%] tablet:top-[55%] desktop:top-[60%] desktop-md:top-[45%] desktop-xl:top-[45%]",
+  );
+
+  const buttonsInnerStyles = clsx(
+    "absolute flex flex-row items-center justify-center w-full h-auto mobile:gap-[50vw] tablet:gap-[77vw] desktop-xl:gap-[55vw]",
+  );
+
+  const buttonSizes = isDesktop ? 60 : isTablet ? 30 : 10;
+
+  const ferrisWheelStyles = clsx(
+    "absolute size-full z-10 transform transition-transform duration-300 top-[70%]",
+    isDesktop && "top-[80%]",
+  );
+
+  const ferrisWheelScaling = clsx("scale(1.2)", isDesktop && "scale(1.5)");
+
+  const backgroundStyles = clsx("relative z-0 w-[165vw] h-full -ml-10");
+
+  return (
+    <div className={outerDivStyles}>
+      {/* Testimonials Ribbon */}
+      <div className={outerRibbonStyles}>
+        <RibbonTitle text={"TESTIMONIALS"} />
+      </div>
+      {/* Testimonials Cart */}
+      <div className={cartOuterStyles}>
+        <div
+          key={animationKey}
+          className={`transition-opacity duration-300 animate-ease-out ${currentAnimation}`}
+        >
+          <SponsorUsTestimonialCart
+            testimonial={currentItem.testimonial}
+            sponsorRep={currentItem.sponsorRep}
+            sponsorRepPosition={currentItem.sponsorRepPosition}
+            sponsor={currentItem.sponsor}
+          />
+        </div>
+      </div>
+      {/* Buttons */}
+      <div className={buttonsOuterStyles}>
+        <div className={buttonsInnerStyles}>
+          {/* Left Button */}
+          <Button
+            color={leftBound ? "starlightBlueLight" : "starlightBlue"}
+            icon={<IoIosArrowBack size={buttonSizes} />}
+            size="small"
+            textColor="carouselCreamLight"
+            removePadding={true}
+            onClick={onClickLeftArrow}
+          />
+          {/* Right Button */}
+          <Button
+            color={rightBound ? "starlightBlueLight" : "starlightBlue"}
+            icon={<IoIosArrowForward size={buttonSizes} />}
+            size="small"
+            textColor="carouselCreamLight"
+            removePadding={true}
+            onClick={onClickRightArrow}
+          />
+        </div>
+      </div>
+
+      {/* Ferris Wheel */}
+      <TestimonialsFerrisWheel
+        className={ferrisWheelStyles}
+        style={{
+          transform: `${ferrisWheelScaling} rotate(${currWheelAngle}deg)`,
+        }}
+      />
+
+      {/* Testimonials Background */}
+      <SponsorUsTestimonialsBackground className={backgroundStyles} />
+    </div>
+  );
+}

apps/main/src/app/sponsor-us/page.tsx

@@ -5,6 +5,7 @@ import SponsorUsStatsComp from "./Sections/SponsorUsStatsComp";
 import SponsorUsHero from "./Sections/SponsorHero";
 import BenefitsSection from "./Sections/BenefitsSection";
 import { Footer, NavBar } from "../lib/Components";
+import SponsorUsTestimonials from "./components/SponsorUsTestimonials.tsx";
 
 const SponsorUsPage = () => {
   return (
@@ -13,6 +14,8 @@ const SponsorUsPage = () => {
       <SponsorUsHero />
       <SponsorUsStatsComp />
       <BenefitsSection />
+      {/* TODO: Past Sponsors Section  */}
+      <SponsorUsTestimonials />
       <Footer />
     </div>
   );

apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketBoothComp.tsx → apps/main/src/app/sponsors/components/SponsorTicketBoothComp.tsx

@@ -1,6 +1,6 @@
 import useDevice from "@util/hooks/useDevice.ts";
-import Ticket from "../../Assets/SVG/SponsorUsAssets/Ticket.tsx";
-import TicketBooth from "../../Assets/SVG/SponsorUsAssets/TicketBooth.tsx";
+import Ticket from "../../lib/Assets/SVG/SponsorUsAssets/Ticket.tsx";
+import TicketBooth from "../../lib/Assets/SVG/SponsorUsAssets/TicketBooth.tsx";
 import Button from "@repo/ui/Button";
 import React from "react";
 

apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketComp.tsx → apps/main/src/app/sponsors/components/SponsorTicketComp.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import React from "react";
-import SponsorTicket from "../../Assets/SVG/SponsorAssets/SponsorTicket";
-import SponsorUsTicket from "../../Assets/SVG/SponsorAssets/SponsorUsTicket";
+import SponsorTicket from "../../lib/Assets/SVG/SponsorAssets/SponsorTicket";
+import SponsorUsTicket from "../../lib/Assets/SVG/SponsorAssets/SponsorUsTicket";
 import Image from "next/image";
 
 export type SponsorTicketProps = {

apps/main/src/app/sponsors/page.tsx

@@ -3,8 +3,8 @@
 import React from "react";
 import SponsorBackground from "../lib/Assets/SVG/SponsorAssets/SponsorBackground.tsx";
 import { Footer, NavBar } from "../lib/Components";
-import SponsorTicketComp from "../lib/Components/SponsorComponents/SponsorTicketComp.tsx";
-import SponsorTicketBoothComp from "../lib/Components/SponsorComponents/SponsorTicketBoothComp.tsx";
+import SponsorTicketComp from "./components/SponsorTicketComp.tsx";
+import SponsorTicketBoothComp from "./components/SponsorTicketBoothComp.tsx";
 import useDevice from "@util/hooks/useDevice.ts";
 import SponsorText from "../lib/Assets/SVG/SponsorAssets/SponsorText.tsx";
 

apps/main/src/app/team/components/Icon.tsx

@@ -13,13 +13,13 @@ const Icon: React.FC<IconProps> = ({ src, name, url }) => {
     <div className="flex flex-col items-center ">
       <div
         className="relative inline-block rounded-full overflow-hidden group
-            w-40 h-40 sm:w-24 sm:h-24 md:w-28 md:h-28 lg:w-32 lg:h-32"
+          w-40 h-40 sm:w-24 sm:h-24 md:w-28 md:h-28 lg:w-32 lg:h-32 object-cover rounded-full border-6 border-firecrackerRed"
       >
         <Image
           src={src}
           alt={name}
           fill
-          className="object-cover rounded-full border-6 border-firecrackerRed"
+          className="group-hover:scale-[105%] transition-transform duration-300"
         />
         <div
           className="

packages/config-tailwind/theme-tokens/screens.ts

@@ -6,6 +6,8 @@ const screens = {
   "desktop-2xl": { max: "4080px" },
   "desktop-xl": { max: "3060px" },
   desktop: { max: "1920px" },
+  "desktop-md": { min: "1600px", max: "1919px" },
+  "desktop-sm": { min: "1280px", max: "1599px" },
   tablet: { min: "640px", max: "1279px" },
   "mobile-xl": { min: "482px", max: "639px" },
   mobile: { max: "481px" },

packages/ui/src/Button.tsx

@@ -16,6 +16,7 @@ const bgColorMap: Record<string, string> = {
   firecrackerRedLight: "bg-firecrackerRedLight hover:bg-firecrackerRed",
   marigoldYellow: "bg-marigoldYellow hover:bg-marigoldYellowDark",
   starlightBlue: "bg-starlightBlue hover:bg-starlightBlueDark",
+  starlightBlueLight: "bg-starlightBlueLight",
   cottonCandyCoral: "bg-cottonCandyCoral hover:bg-cottonCandyCoralDark",
   ribbonBlue: "bg-ribbonBlue",
   firecrackerRed: "bg-firecrackerRed hover:bg-firecrackerRedDark",
@@ -30,8 +31,10 @@ const sizeMap: Record<string, string> = {
 const textColorMap: Record<string, string> = {
   charcoalFog: "text-[#353131]",
   white: "text-white",
+  carouselCreamLight: "text-[#FFF5E5]",
   starlightBlue: "text-starlightBlue",
 };
+
 const Button: React.FC<ButtonProps> = ({
   text,
   textColor = "charcoalFog",

packages/ui/src/TestimonialTrain.tsx

@@ -7,6 +7,8 @@ import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 import useDevice from "@repo/util/hooks/useDevice";
 // import clsx from "clsx";
 
+const currBounds = { leftBound: 0, rightBound: 10000, threshold: 21.7 };
+
 export default function TestimonialTrain() {
   const numCarts = 4;
   const [currCart, setCurrCart] = useState(1);
@@ -15,8 +17,6 @@ export default function TestimonialTrain() {
   const { isDesktop } = useDevice();
   const [pixelPos, setPixelPos] = useState(startingPos);
 
-  const currBounds = { leftBound: 0, rightBound: 10000, threshold: 21.7 };
-
   const handleLeftClick = useCallback(() => {
     if (currCart < numCarts) {
       setPixelPos((prev) => prev + currBounds.threshold);