From 3ecf5a1f543e493a329621a920f2f69b7df5ae39 Mon Sep 17 00:00:00 2001
From: Yena Yu <160572629+yenayuu@users.noreply.github.com>
Date: Sun, 7 Sep 2025 21:31:58 -0400
Subject: [PATCH 1/2] #42

---
 app/page.tsx                |  2 +
 components/IntroSection.tsx | 78 +++++++++++++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 components/IntroSection.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 33b0cef..2d597d0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,6 +8,7 @@ import RetroRemix from "@/components/RetroRemix/RetroRemix";
 import Schedule from "@/components/Schedule/Schedule";
 import Footer from "@/components/Footer";
 import OurSponsors from "@/components/OurSponsors";
+import IntroSection from "@/components/IntroSection";
 
 const Home = () => {
   return (
@@ -18,6 +19,7 @@ const Home = () => {
           <div id="header" className="w-full h-screen">
             <Header />
           </div>
+          <IntroSection />
           <div id="theme" className="flex flex-col items-center justify-center h-screen text-white">
             <RetroRemix />
           </div>
diff --git a/components/IntroSection.tsx b/components/IntroSection.tsx
new file mode 100644
index 0000000..52036f2
--- /dev/null
+++ b/components/IntroSection.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import Image from "next/image";
+import bubble from "@/public/bubble.svg";
+
+const IntroSection = () => {
+  return (
+    <section className="relative w-full text-white px-4 md:px-8 py-16 md:py-24">
+      {/* Background bubbles behind boxes */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <Image
+          src={bubble}
+          alt="Decorative bubble"
+          width={600}
+          height={600}
+          className="absolute left-[-60px] top-[10%] opacity-25 scale-100 md:scale-125"
+          priority
+        />
+        <Image
+          src={bubble}
+          alt="Decorative bubble"
+          width={500}
+          height={500}
+          className="absolute right-[-40px] bottom-[-20px] opacity-20 scale-100 md:scale-110"
+          priority
+        />
+      </div>
+
+      {/* Quote */}
+      <div className="max-w-5xl mx-auto text-center">
+        <p className="font-akshar text-white-blue-outline-1 text-[28px] md:text-[40px] leading-tight">
+          “Dive into innovation with BostonHacks — where students build what’s next.”
+        </p>
+      </div>
+
+      {/* Boxes */}
+      <div className="max-w-6xl mx-auto mt-10 md:mt-14 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
+        {/* Who are we */}
+        <div className="bg-white/85 text-black border-2 border-inset border-t-black border-l-black border-b-white border-r-white shadow-lg rounded-sm">
+          <div className="px-4 py-3 border-b-2 border-inset border-t-white border-l-white border-b-black border-r-black bg-gradient-to-r from-[#01017D] to-blue-600 text-white font-semibold">
+            Who are we?
+          </div>
+          <div className="px-4 py-4 text-sm md:text-base leading-relaxed">
+            BostonHacks is a student-run hackathon bringing together creators from across the globe to learn, experiment, and build impactful projects in just 24 hours.
+          </div>
+        </div>
+
+        {/* Why us */}
+        <div className="bg-white/85 text-black border-2 border-inset border-t-black border-l-black border-b-white border-r-white shadow-lg rounded-sm">
+          <div className="px-4 py-3 border-b-2 border-inset border-t-white border-l-white border-b-black border-r-black bg-gradient-to-r from-[#01017D] to-blue-600 text-white font-semibold">
+            Why us?
+          </div>
+          <div className="px-4 py-4 text-sm md:text-base leading-relaxed">
+            - Hands-on workshops and mentorship<br />
+            - Prizes and sponsor challenges<br />
+            - Beginner-friendly with resources to get started
+          </div>
+        </div>
+
+        {/* Questions */}
+        <div className="bg-white/85 text-black border-2 border-inset border-t-black border-l-black border-b-white border-r-white shadow-lg rounded-sm">
+          <div className="px-4 py-3 border-b-2 border-inset border-t-white border-l-white border-b-black border-r-black bg-gradient-to-r from-[#01017D] to-blue-600 text-white font-semibold">
+            Questions?
+          </div>
+          <div className="px-4 py-4 text-sm md:text-base leading-relaxed">
+            Have questions about eligibility, schedule, or what to bring? Check out our FAQs for more info.
+            <div className="mt-4">
+              <a href="#faqs" className="inline-block px-4 py-2 bg-blue-700 hover:bg-blue-800 text-white border border-white/40 rounded-sm transition-colors">
+                Go to FAQs
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default IntroSection; 
\ No newline at end of file

From 1a1cbe4bfb95b3bfee88fef8ae5fa87c31c54656 Mon Sep 17 00:00:00 2001
From: yena <yenayu@bu.edu>
Date: Tue, 23 Sep 2025 18:15:03 -0400
Subject: [PATCH 2/2] moved edits to under sponsors

---
 app/page.tsx                 |   2 -
 app/sponsors/page.tsx        |   4 ++
 components/SponsorsAbout.tsx | 106 +++++++++++++++++++++++++++++++++++
 package-lock.json            |  21 +++++--
 package.json                 |   3 +-
 5 files changed, 128 insertions(+), 8 deletions(-)
 create mode 100644 components/SponsorsAbout.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 2d597d0..33b0cef 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,7 +8,6 @@ import RetroRemix from "@/components/RetroRemix/RetroRemix";
 import Schedule from "@/components/Schedule/Schedule";
 import Footer from "@/components/Footer";
 import OurSponsors from "@/components/OurSponsors";
-import IntroSection from "@/components/IntroSection";
 
 const Home = () => {
   return (
@@ -19,7 +18,6 @@ const Home = () => {
           <div id="header" className="w-full h-screen">
             <Header />
           </div>
-          <IntroSection />
           <div id="theme" className="flex flex-col items-center justify-center h-screen text-white">
             <RetroRemix />
           </div>
diff --git a/app/sponsors/page.tsx b/app/sponsors/page.tsx
index cbf6c2d..047c36e 100644
--- a/app/sponsors/page.tsx
+++ b/app/sponsors/page.tsx
@@ -3,6 +3,7 @@ import Background from "@/components/Background";
 import SponsorshipHeader from "@/components/SponsorshipHeader";
 import SponsorshipOpportunities from "@/components/SponsorshipOpportunities";
 import Footer from "@/components/Footer";
+import SponsorsAbout from "@/components/SponsorsAbout";
 
 const SponsorsPage = () => {
   return (
@@ -13,6 +14,9 @@ const SponsorsPage = () => {
           <div className="flex flex-col items-center justify-center min-h-screen text-white">
             <SponsorshipOpportunities />
           </div>
+          <div className="flex flex-col items-center justify-center text-white">
+            <SponsorsAbout />
+          </div>
           {/* <div className="flex flex-col items-center justify-center min-h-screen text-white">section</div> */}
           {/* <div id="about" className="flex flex-col items-center justify-center min-h-screen text-white">section</div> */}
 
diff --git a/components/SponsorsAbout.tsx b/components/SponsorsAbout.tsx
new file mode 100644
index 0000000..226fda6
--- /dev/null
+++ b/components/SponsorsAbout.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import Image from "next/image";
+import bubble from "@/public/bubble.svg";
+
+const PillLabel: React.FC<{ text: string; color?: "blue" | "green" }>= ({ text, color = "blue" }) => {
+  const colorClasses =
+    color === "green"
+      ? "from-[#3FBF3A] to-[#0AA64A] text-white"
+      : "from-[#01017D] to-blue-600 text-white";
+  return (
+    <div className={`inline-block rounded-full px-5 py-2 font-neuropol text-xs sm:text-sm md:text-base bg-gradient-to-r ${colorClasses} shadow-lg`}
+         style={{ boxShadow: "0 10px 20px rgba(0,0,0,0.15)" }}>
+      {text}
+    </div>
+  );
+};
+
+const SponsorsAbout = () => {
+  return (
+    <section className="relative w-full text-white px-4 md:px-8 py-20 md:py-28">
+      {/* Background bubbles */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <Image
+          src={bubble}
+          alt="Decorative bubble"
+          width={600}
+          height={600}
+          className="absolute left-[-60px] top-[10%] opacity-25 scale-100 md:scale-125"
+          priority
+        />
+        <Image
+          src={bubble}
+          alt="Decorative bubble"
+          width={500}
+          height={500}
+          className="absolute right-[-40px] bottom-[-20px] opacity-20 scale-100 md:scale-110"
+          priority
+        />
+      </div>
+
+      {/* WHO ARE WE - right aligned card with pill label */}
+      <div className="max-w-6xl mx-auto flex justify-center">
+        <div className="relative w-full md:w-[560px]">
+          <div className="absolute -top-6 left-1/2 -translate-x-1/2 z-10">
+            <PillLabel text="WHO ARE WE?" />
+          </div>
+          <div className="bg-white/30 backdrop-blur-md p-6 md:p-8 rounded-3xl shadow-[0_20px_60px_rgba(0,0,0,0.35)] ring-1 ring-white/40 z-0">
+            <p className="text-sm md:text-base leading-relaxed text-white/95">
+              BostonHacks brings together over 100 students for an exhilarating 36 hours to build awesome projects. In our past events, students had meaningful interactions with mentors, peers, and sponsors.
+            </p>
+            <p className="text-sm md:text-base leading-relaxed text-white/95 mt-4">
+              A hackathon would be incomplete without new technology, advice, and ideas our sponsors offer, and we’d be eager to have you join us this coming fall. We thrive to provide a comprehensive recruiting and branding experience to our sponsors.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* WHY US - wide card with three columns and green pill */}
+      <div className="max-w-6xl mx-auto mt-12 md:mt-16 relative">
+        <div className="absolute -top-7 left-10 z-10">
+          <PillLabel text="WHY US?" color="green" />
+        </div>
+        <div className="bg-white/30 backdrop-blur-md px-6 md:px-10 py-8 md:py-10 rounded-3xl shadow-[0_20px_60px_rgba(0,0,0,0.35)] ring-1 ring-white/40 z-0">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            <div>
+              <h3 className="font-semibold text-white mb-2">Connect</h3>
+              <p className="text-white/95 text-sm md:text-base leading-relaxed">
+                Resumes are two-dimensional (literally). Interviews give only a small snapshot of an individual’s abilities. By watching a project evolve over a hackathon, you can get a much better picture of a candidate. Plus, you’ll have access to a group of students passionate about what they do, and a friendly environment to interact with them in.
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold text-white mb-2">Recruit</h3>
+              <p className="text-white/95 text-sm md:text-base leading-relaxed">
+                Reach out to future customers, leaders and innovators. Test waters and get a sense of emergent technologies. Collaborate with students on a more intimate level at our comfortably mid-sized hackathon. Offer students advice and/or tech to help them through their projects. Whether you’re looking for brand awareness, technical expertise or personal development, you’ll find it here—with 200 motivated hackers and dozens of skilled mentors.
+              </p>
+            </div>
+            <div>
+              <h3 className="font-semibold text-white mb-2">Get Live Feedback</h3>
+              <p className="text-white/95 text-sm md:text-base leading-relaxed">
+                Give your API or product a test run before sending it out into the world. Show off a great framework or platform before it hits the market. Students are the ideal target for new tech. They will eagerly push your product to its limits, as well as offer suggestions on it and look to you for support.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* QUESTIONS - small card aligned to the right */}
+      <div className="max-w-6xl mx-auto mt-10 flex justify-end">
+        <div className="outline-[0.5px] outline-white bg-white/25 backdrop-blur-sm p-4 md:p-5 rounded-2xl shadow-xl w-[280px]">
+          <h4 className="font-semibold text-white mb-2">QUESTIONS?</h4>
+          <p className="text-white/95 text-sm leading-relaxed">
+            We welcome any questions or special requests. Please email us at
+          </p>
+          <a href="mailto:contact@bostonhacks.io" className="block text-white underline mt-2">contact@bostonhacks.io</a>
+          <div className="mt-4">
+            <a href="/#faqs" className="inline-block px-4 py-2 bg-blue-700 hover:bg-blue-800 text-white border border-white/40 rounded-sm transition-colors">
+              Go to FAQs
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default SponsorsAbout; 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f4e12e1..7412088 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
         "next": "^15.4.5",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
-        "react-phone-number-input": "^3.4.12"
+        "react-phone-number-input": "^3.4.12",
+        "run": "^1.5.0"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2682,14 +2683,12 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
       "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
@@ -2883,7 +2882,6 @@
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/convert-source-map": {
@@ -5286,7 +5284,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
       "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -5995,6 +5992,20 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/run": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/run/-/run-1.5.0.tgz",
+      "integrity": "sha512-CBPzeX6JQZUdhZpSFyNt2vUk44ivKMWZYCNBYoZYEE46mL9nf6WyMP3320WnzIrJuo89+njiUvlo83jUEXjXLg==",
+      "dependencies": {
+        "minimatch": "*"
+      },
+      "bin": {
+        "runjs": "cli.js"
+      },
+      "engines": {
+        "node": ">=v0.9.0"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index 53d3201..66b10a3 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "next": "^15.4.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-phone-number-input": "^3.4.12"
+    "react-phone-number-input": "^3.4.12",
+    "run": "^1.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",