{/* Foreground SVG Stuff (ballons, clouds, etc) */}
= {
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 = {
const textColorMap: Record = {
charcoalFog: "text-[#353131]",
white: "text-white",
+ carouselCreamLight: "text-[#FFF5E5]",
starlightBlue: "text-starlightBlue",
};
+
const Button: React.FC = ({
text,
textColor = "charcoalFog",
diff --git a/packages/ui/src/TestimonialTrain.tsx b/packages/ui/src/TestimonialTrain.tsx
index b450ed22..833ea55f 100644
--- a/packages/ui/src/TestimonialTrain.tsx
+++ b/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);
diff --git a/apps/main/src/app/lib/Assets/SVG/SponsorUsPageAssets/SponsorUsTestimonialsBackground.tsx b/apps/main/src/app/lib/Assets/SVG/SponsorUsPageAssets/SponsorUsTestimonialsBackground.tsx
new file mode 100644
index 00000000..bcb2c3b3
--- /dev/null
+++ b/apps/main/src/app/lib/Assets/SVG/SponsorUsPageAssets/SponsorUsTestimonialsBackground.tsx
@@ -0,0 +1,828 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const SponsorUsTestimonialsBackground = (props: SVGProps) => (
+
+);
+export default SponsorUsTestimonialsBackground;
diff --git a/apps/main/src/app/lib/Assets/SVG/SponsorUsPageAssets/TestimonialsFerrisWheel.tsx b/apps/main/src/app/lib/Assets/SVG/SponsorUsPageAssets/TestimonialsFerrisWheel.tsx
new file mode 100644
index 00000000..67dfac71
--- /dev/null
+++ b/apps/main/src/app/lib/Assets/SVG/SponsorUsPageAssets/TestimonialsFerrisWheel.tsx
@@ -0,0 +1,303 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const TestimonialsFerrisWheel = (props: SVGProps) => (
+
+);
+export default TestimonialsFerrisWheel;
diff --git a/apps/main/src/app/lib/Assets/SVG/index.ts b/apps/main/src/app/lib/Assets/SVG/index.ts
index d8e140a4..b41614eb 100644
--- a/apps/main/src/app/lib/Assets/SVG/index.ts
+++ b/apps/main/src/app/lib/Assets/SVG/index.ts
@@ -3,3 +3,5 @@ export { default as ProjectStarIcon } from "./StarIcon";
export { default as VolunteeringBackground } from "./VolunteeringAssets/VolunteeringBackground";
export { default as ImpactSign } from "./SponsorUsAssets/ImpactSign";
export { default as HeroBackground } from "./SponsorUsAssets/HeroBackground";
+export { default as TestimonialsFerrisWheel } from "./SponsorUsPageAssets/TestimonialsFerrisWheel";
+export { default as SponsorUsTestimonialsBackground } from "./SponsorUsPageAssets/SponsorUsTestimonialsBackground";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
\ No newline at end of file
diff --git a/apps/main/src/app/lib/Components/index.ts b/apps/main/src/app/lib/Components/index.ts
index e645d9dd..b40f3f4b 100644
--- a/apps/main/src/app/lib/Components/index.ts
+++ b/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";
diff --git a/apps/main/src/app/sponsor-us/components/SponsorUsTestimonialCart.tsx b/apps/main/src/app/sponsor-us/components/SponsorUsTestimonialCart.tsx
new file mode 100644
index 00000000..706b2ae8
--- /dev/null
+++ b/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 (
+
);
diff --git a/apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketBoothComp.tsx b/apps/main/src/app/sponsors/components/SponsorTicketBoothComp.tsx
similarity index 93%
rename from apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketBoothComp.tsx
rename to apps/main/src/app/sponsors/components/SponsorTicketBoothComp.tsx
index 6f85ad15..7f483ab6 100644
--- a/apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketBoothComp.tsx
+++ b/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";
diff --git a/apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketComp.tsx b/apps/main/src/app/sponsors/components/SponsorTicketComp.tsx
similarity index 87%
rename from apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketComp.tsx
rename to apps/main/src/app/sponsors/components/SponsorTicketComp.tsx
index c5af86f8..2d459443 100644
--- a/apps/main/src/app/lib/Components/SponsorComponents/SponsorTicketComp.tsx
+++ b/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 = {
diff --git a/apps/main/src/app/sponsors/page.tsx b/apps/main/src/app/sponsors/page.tsx
index a149fae3..e4443c91 100644
--- a/apps/main/src/app/sponsors/page.tsx
+++ b/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";
diff --git a/packages/config-tailwind/theme-tokens/screens.ts b/packages/config-tailwind/theme-tokens/screens.ts
index 37015174..d03b91dc 100644
--- a/packages/config-tailwind/theme-tokens/screens.ts
+++ b/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" },
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 9d6ffc38..6d4cb509 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -16,6 +16,7 @@ const bgColorMap: Record
+
+ );
+}
diff --git a/apps/main/src/app/sponsor-us/components/SponsorUsTestimonials.tsx b/apps/main/src/app/sponsor-us/components/SponsorUsTestimonials.tsx
new file mode 100644
index 00000000..7cb14b8d
--- /dev/null
+++ b/apps/main/src/app/sponsor-us/components/SponsorUsTestimonials.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import React, { useState } from "react";
+import RibbonTitle from "@repo/ui/RibbonTitle";
+import clsx from "clsx";
+import { TestimonialsFerrisWheel, SponsorUsTestimonialsBackground } from "../../lib/Assets/SVG";
+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 (
+
+ 
+
+
+
+
+ {testimonial}
+
+
+ {sponsorRep}
++ {sponsorRepPosition} at {sponsor} +
+
+ {/* Testimonials Ribbon */}
+
+ );
+}
diff --git a/apps/main/src/app/sponsor-us/page.tsx b/apps/main/src/app/sponsor-us/page.tsx
index 9bbb4349..10a2ff7f 100644
--- a/apps/main/src/app/sponsor-us/page.tsx
+++ b/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 = () => {
+
+ {/* Testimonials Cart */}
+
+
+ {/* Buttons */}
+
+
+
+
+
+ {/* Ferris Wheel */}
+
+ {/* Left Button */}
+ }
+ size="small"
+ textColor="carouselCreamLight"
+ removePadding={true}
+ onClick={onClickLeftArrow}
+ />
+ {/* Right Button */}
+ }
+ size="small"
+ textColor="carouselCreamLight"
+ removePadding={true}
+ onClick={onClickRightArrow}
+ />
+
+