[Bugfix] Mainsite/bug/sponsor us page benefits

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

@@ -11,7 +11,7 @@ import Dart from "../../lib/Assets/AboutLandingAssets/dart";
 import useDevice from "@util/hooks/useDevice";
 
 export default function About(): React.ReactNode {
-  const { isMobile} = useDevice();
+  const { isMobile } = useDevice();
   return (
     <div
       className={`relative w-full z-10 ${

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

@@ -117,24 +117,21 @@ export default function FAQ() {
   const bannerStyles = clsx(
     "relative w-full pointer-events-none flex items-center justify-center z-10",
     isDesktop && "h-[45vh] pt-20",
-    isTablet && "h-[35vh] pt-10 mobile-xl:h-[30vh] mobile-xl:pt-40 mobile-xl:mb-20",
-    isMobile && "h-[20vh] pt-10"
+    isTablet &&
+      "h-[35vh] pt-10 mobile-xl:h-[30vh] mobile-xl:pt-40 mobile-xl:mb-20",
+    isMobile && "h-[20vh] pt-10",
   );
 
   const fireworkStyles = clsx(
     "w-full z-0 scale-125",
     isTablet && "pl-6",
     isDesktop && "pl-16",
-    isMobile && "pl-8"
+    isMobile && "pl-8",
   );
 
-  const ribbonStyles = clsx("w-3/4", 
-    isDesktop && "w-1/2",
-  );
+  const ribbonStyles = clsx("w-3/4", isDesktop && "w-1/2");
 
-  const accordionStyles = clsx(
-    "relative z-10 size-full mb-32",
-  );
+  const accordionStyles = clsx("relative z-10 size-full mb-32");
 
   const carouselStyles = clsx("relative w-[100vw] h-full scale-110 z-0");
 
@@ -147,9 +144,9 @@ export default function FAQ() {
 
       {/* Banner */}
       <div className={bannerStyles}>
-          <div className={ribbonStyles}>
-            <RibbonTitle text={"FAQ"} />
-          </div>
+        <div className={ribbonStyles}>
+          <RibbonTitle text={"FAQ"} />
+        </div>
       </div>
 
       {/* Accordion */}

apps/main/src/app/lib/Assets/SVG/FluffyBush.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+const FluffyBush = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={211}
+    height={137}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#4B642E"
+      d="M57.309 91.277c-5.95-37.913-6.234-97.054 32.2-90.822 15.156 2.458 20.003 13.41 18.894 28.051 12.311-14.885 24.69-21.23 35.925-6.192 20.549 27.505-15.815 64.696-54.224 85.373 7.892 4.544 15.203 9.153 21.359 13.313l2.203-11.885c20.179-19.938 30.873-53.904 66.185-30.71 30.001 19.705-34.259 53.273-68.973 45.755l.319-1.727-12.68 7.277C61.782 131.906-9.157 128.097.982 95.298c5.747-18.587 30.21-14.843 56.328-4.021Z"
+    />
+    <path
+      fill="#709941"
+      d="M77.742 34.373c13.954-.48 19.56 21.184 21.115 46.286 5.071-19.692 14.484-35.305 27.377-35.305 24.144 0 21.67 18.807 14.538 41.294 3.174-1.942 6.756-3.06 10.714-3.06 22.176 0 18.629 12.036 11.687 25.922 8.704-5.25 18.877-8.334 26.345-6.071 21.042 6.375 33.437 32.585 0 32.585h-42.464a.25.25 0 0 0-.012-.017h-20.807l-.002.018H96.482v-.001h-58.6c-9.055-24.766-19.014-74.453 13.581-75.08 3.722-.072 6.994.523 9.865 1.67 1.491-16.085 6.179-27.888 16.414-28.24Z"
+    />
+    <path
+      fill="#4B642E"
+      d="M48.371 34.036s-30.39 3.118-27.125-9.595c3.265-12.953 30.39 6.477 30.39 6.477l-3.265 3.118ZM153.166 11.681s1.489-11.902 8.697-7.603c7.355 4.35-9.61 13.449-9.61 13.449l.913-5.846Z"
+    />
+  </svg>
+);
+export default FluffyBush;

apps/main/src/app/lib/Assets/SVG/RightBush.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+const RightBush = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={245}
+    height={141}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#4B642E"
+      d="M196.646 133.165s46.988-50.563 27.41-65.288c-19.579-14.725-30.836 37.397-30.836 37.397s60.366-86.013 23.575-95.986c-36.791-9.972-30.346 65.6-30.346 65.6s-6.2-50.173-38.015-43.785c-31.733 6.389 13.46 60.692 13.46 60.692S115.803 54.632 91.33 71.538c-24.555 16.907 32.468 47.214 32.468 47.214s-45.112-12.31-62.896 2.649-5.384 19.244-5.384 19.244l141.128-7.48Z"
+    />
+    <path
+      fill="#4B642E"
+      d="M174.049 22.688s9.218-20.802.163-22.594c-9.137-1.792-.163 22.594-.163 22.594ZM51.358 98.416s.408-22.594-8.729-21.035c-9.136 1.558 8.729 21.035 8.729 21.035Z"
+    />
+    <path
+      fill="#709941"
+      d="M134.077 58.294s-7.26-10.517-12.399-4.285c-5.14 6.233 12.399 4.285 12.399 4.285Z"
+    />
+    <path
+      fill="#4B642E"
+      d="M13.343 118.286s-7.26-10.518-12.4-4.285c-5.14 6.233 12.4 4.285 12.4 4.285ZM174.947 53.62s15.744-15.894 6.363-20.491c-9.382-4.597-6.363 20.49-6.363 20.49ZM221.69 48.32s26.594-.156 22.271-10.985c-4.324-10.83-25.615 8.57-25.615 8.57l3.263 2.493.081-.078Z"
+    />
+    <path
+      fill="#709941"
+      d="M218.672 65.383s-16.071-3.584-24.228 25.632c-8.24 29.217-10.116 37.865-10.116 37.865s-15.907-80.17 4.242-85.312c20.068-5.064 14.765 23.763 14.765 23.763s12.808-4.83 15.337-2.026v.078ZM176.415 112.83s-15.499-77.365-32.386-69.807c-16.805 7.557 29.776 72.923 29.776 72.923s-59.146-43.508-78.153-30.03c-19.008 13.479 29.795 37.356 29.795 37.356s-34.769-9.273-42.11 2.881c-7.343 12.154 1.712 13.946 1.712 13.946l96.995-5.298-5.71-21.971h.081Z"
+    />
+  </svg>
+);
+export default RightBush;

apps/main/src/app/lib/Assets/SVG/SponsorUsAssets/SponsorsUsBenefitCard.tsx

@@ -2,11 +2,12 @@ import * as React from "react";
 import type { SVGProps } from "react";
 const SponsorUsBenefitCard = (props: SVGProps<SVGSVGElement>) => (
   <svg
-    width="441"
-    height="302"
-    viewBox="0 0 441 302"
+    width="850"
+    height="350"
+    viewBox="0 0 450 300"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    preserveAspectRatio="none"
     {...props}
   >
     <path

apps/main/src/app/lib/Assets/SVG/SponsorUsAssets/TopGrassWave.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+
+const TopGrassWave = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={2219}
+    height={198}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#F2E06F"
+      d="M291.445 87C184.113 90.2 48.909 61.333 0 46.5v139h2219v-79C2204.6 74.167 2122.92 0 1929.57 0c-241.7 0-343.21 106.5-653.24 106.5-150.75 0-308.03-97-520.081-97C566.227 9.5 425.61 83 291.445 87Z"
+    />
+    <path
+      fill="#B8C952"
+      d="M292.5 128.5C157.7 138.1 41.334 100.167 0 80v117.5h2219v-69c-38.33-27.167-152.9-81.5-304.5-81.5-189.5 0-338.27 72.186-497.5 81.5-359 21-461.5-81.5-672.5-81.5-163.11 0-283.5 69.5-452 81.5Z"
+    />
+  </svg>
+);
+export default TopGrassWave;

apps/main/src/app/sponsor-us/Sections/BenefitsSection.tsx

@@ -3,11 +3,21 @@ import SponsorUsBenefitCardComp from "../components/SponsorUsBenefitCardComp";
 import RibbonTitle from "@repo/ui/RibbonTitle";
 import useDevice from "@util/hooks/useDevice";
 import clsx from "clsx";
+import TopGrassWave from "../../lib/Assets/SVG/SponsorUsAssets/TopGrassWave";
+import FluffyBush from "../../lib/Assets/SVG/FluffyBush";
+import RightBush from "../../lib/Assets/SVG/RightBush";
 
 const BenefitsSection = () => {
-  const { isMobile } = useDevice();
+  const { isMobile, isTablet, isDesktop } = useDevice();
   const [isSmallScreen, setIsSmallScreen] = React.useState(true);
 
+  const ribbonStyles = clsx(
+    "w-1/2",
+    isMobile && "mt-30 mb-10",
+    isTablet && "mt-36 mb-8",
+    isDesktop && "mt-30 mb-12",
+  );
+
   React.useEffect(() => {
     const checkScreenSize = () => {
       const isSmall = window.innerWidth <= 1024;
@@ -34,52 +44,64 @@ const BenefitsSection = () => {
 
   return (
     <>
-      <div className="mt-12">
-        <RibbonTitle text="Sponsorship Benefits" />
-        <div className="mt-7 flex flex-col gap-10">
-          <div className={firstCardClasses}>
-            <div className={cardWrapperClasses}>
-              <SponsorUsBenefitCardComp
-                title="Recruitment"
-                content={
-                  <>
-                    <p>
-                      Scout the next generation of talent here. Receive perks
-                      such as:
-                    </p>
-                    <ul>
-                      <li>• Onsite interviews</li>
-                      <li>• A spot in our career fair</li>
-                      <li>• Hacker resumes</li>
-                      <li>• Sponsoring a company specific prize</li>
-                    </ul>
-                  </>
-                }
-              />
-            </div>
+      <div className="relative inset-0 z-20 flex flex-col">
+        <TopGrassWave
+          className="absolute z-0 -top-28 left-0 right-0 w-[100vw] h-full justify-self-center"
+          preserveAspectRatio="none"
+        />
+        <div>
+          <FluffyBush className="relative z-0 top-14 left-8 w-[50vw]" />
+        </div>
+        <div className="flex flex-col items-center justify-center">
+          <div className={ribbonStyles}>
+            <RibbonTitle text={"BENEFITS"} />
           </div>
-          <div className={secondCardClasses}>
-            <div className={cardWrapperClasses}>
-              <SponsorUsBenefitCardComp
-                title="Market your company"
-                content="Market your product and receive feedback by sponsoring a company-specific prize, hosting a workshop, giving a product demo, or mentoring hackers that are eager to hear your advice and implement your technologies for their projects."
-              />
+          <div>
+            <div className={firstCardClasses}>
+              <div className={cardWrapperClasses}>
+                <SponsorUsBenefitCardComp
+                  title="Recruitment"
+                  content={
+                    <>
+                      <p>
+                        Scout the next generation of talent here. Receive perks
+                        such as:
+                      </p>
+                      <ul>
+                        <li>• Onsite interviews</li>
+                        <li>• A spot in our career fair</li>
+                        <li>• Hacker resumes</li>
+                        <li>• Sponsoring a company specific prize</li>
+                      </ul>
+                    </>
+                  }
+                />
+              </div>
+            </div>
+            <div className={secondCardClasses}>
+              <div className={cardWrapperClasses}>
+                <SponsorUsBenefitCardComp
+                  title="Market your company"
+                  content="Market your product and receive feedback by sponsoring a company-specific prize, hosting a workshop, giving a product demo, or mentoring hackers that are eager to hear your advice and implement your technologies for their projects."
+                />
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div className="justify-items-center mt-24 mb-16 text-center px-4">
-        <h2 className="text-xl font-NeulisNeue-Bold text-charcoalFog">
-          Additionally, we provide the flexibility to create your own perk or
-          package.
-        </h2>
-        <p className="mt-4 text-charcoalFog font-NeulisNeue-Regular max-w-2xl">
-          Let us know your ideas and package choice at
-          [email protected]. Our team will work with you to answer any
-          questions and guide you through the next steps in becoming a
-          HackBeanpot 2026 sponsor!
-        </p>
+        <div className="relative justify-items-center mt-24 mb-16 text-center px-4">
+          <h2 className="text-xl font-NeulisNeue-Bold text-charcoalFog">
+            Additionally, we provide the flexibility to create your own perk or
+            package.
+          </h2>
+          <p className="mt-4 text-charcoalFog font-NeulisNeue-Regular max-w-2xl">
+            Let us know your ideas and package choice at
+            [email protected]. Our team will work with you to answer
+            any questions and guide you through the next steps in becoming a
+            HackBeanpot 2026 sponsor!
+          </p>
+          <RightBush className="relative bottom-0 left-96" />
+        </div>
       </div>
     </>
   );

apps/main/src/app/sponsor-us/Sections/SponsorUsStatsComp.tsx

@@ -23,7 +23,7 @@ export default function SponsorUsBenefitCardComp() {
     "relative w-full overflow-hidden",
     isDesktop && "h-[180vh]",
     isTablet && "h-[100vh] mobile-xl:h-[90vh]",
-    isMobile && "mobile:h-[70vh]"
+    isMobile && "mobile:h-[70vh]",
   );
 
   const ribbonStyles = clsx(

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

@@ -2,6 +2,7 @@
 
 import React from "react";
 import SponsorUsBenefitCard from "../../lib/Assets/SVG/SponsorUsAssets/SponsorsUsBenefitCard";
+import clsx from "clsx";
 
 export type SponsorUsBenefitCardProps = {
   title: string;
@@ -13,14 +14,27 @@ export default function SponsorUsBenefitCardComp({
   content,
 }: SponsorUsBenefitCardProps) {
   return (
-    <div className="relative w-96 h-[302px] flex items-center justify-center">
-      <SponsorUsBenefitCard className="absolute w-full h-full" />
+    <div
+      className={clsx(
+        "relative flex justify-center items-center mx-auto",
+        "w-full max-w-[640px] h-[420px]",
+        "sm:w-[40vw] sm:h-[50vh]",
+        "mb-10",
+      )}
+    >
+      <SponsorUsBenefitCard className="w-full h-full" />
 
-      <div className="relative flex flex-col justify-center text-left left-7 bottom-5 mx-auto px-4">
-        <h3 className="text-lg text-white font-NeulisNeue-Bold max-w-72">
+      <div
+        className={clsx(
+          "absolute z-10 flex flex-col items-start text-left",
+          "top-20 left-32 sm:left-10 md:left-20",
+        )}
+      >
+        <h1 className="font-NeulisNeue-Bold text-white text-xl max-w-[260px]">
           {title}
-        </h3>
-        <p className="mt-2 text-sm text-white font-NeulisNeue-Regular max-w-72">
+        </h1>
+
+        <p className="font-NeulisNeue-Regular text-white text-base mt-4 max-w-[300px]">
           {content}
         </p>
       </div>