created about, sponsorship, linked to riseforms for registration link

src/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

src/app/about/AboutPage.jsx

@@ -335,6 +335,7 @@ const AboutPage = () => {
                 <div className="flex justify-center space-x-4">
                     <button
                         onClick={() => handleViewToggle("full")}
+                        id='timeline'
                         className={`px-4 py-2 rounded-md ${
                             viewMode === "full"
                                 ? "bg-blue-600 text-white"

src/app/program/page.jsx

@@ -1,5 +1,9 @@
 "use client";
 
+import Link from "next/link";
+
 export default function Page() {
-    return (<div>Program page</div>)
+    return (
+        <Link href="/about/#timeline"></Link>
+    );
 }

src/app/sponsorship/TierList.css

@@ -0,0 +1,143 @@
+/* @font-face {
+    font-family: 'Poppins';
+    src: url('../../../fonts/poppins/Poppins-Regular.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Sansation';
+    src: url('../../../fonts/sansation/Sansation_Regular.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Sansation-Bold';
+    src: url('../../../fonts/sansation/Sansation_Bold.ttf') format('truetype');
+} */
+
+.tier-list {
+    background: #262626; /* Dark blue background */
+    color: #a3a3a3;
+    padding: 5vh 5vw;
+    align-items: center;
+    border: 2px solid #2e3f4f; /* Slightly lighter blue border */
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+.tiers {
+    padding: 2vh 1vw;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 4vh;
+    font-family: 'Poppins', sans-serif;
+    overflow-x: scroll;
+    scroll-snap-type: x mandatory;
+}
+
+.tier {
+    scroll-snap-align: center;
+    background: #171717; /* Tier background blue */
+    padding: 2vh 2vw; /* Adjusted padding for better responsiveness */
+    width: 80%;
+    min-width: 200px;
+    border: 1px solid #171717; /* Border color */
+    border-radius: 2rem;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    height: 100%;
+}
+
+.tier-text {
+    height: 33vh;
+}
+
+.tier-name {
+    font-family: 'Arial', 'Helvetica', sans-serif;
+    font-weight: 600;
+    font-size: 2.5vmin; /* Use vmin for responsive font scaling */
+    margin: 4vh 0 2vh 0;
+    height: 100%;
+    color: #ffffff; /* Bright blue for tier names */
+    text-align: center;
+
+}
+
+.benefits {
+    font-family: 'Arial', 'Helvetica', sans-serif;
+    color: "#A3a3a3";
+    font-weight: 400;
+    border-left: 4px solid #ffffff; /* Bright blue line */
+    padding-left: 2vw;
+}
+
+.benefit {
+    font-size: 2.20vmin; /* Use vmin for responsive font scaling */
+    padding: 4vh 0;
+    position: relative;
+    transition: background-color 0.3s ease-in, border 0.3s ease-in;
+}
+
+.benefit:hover {
+    color: #ffffff;
+    text-decoration: underline;
+}
+
+/* ... Remaining Styles ... */
+
+
+.benefit:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: -2vw;
+    bottom: 0;
+    width: calc(100% + 3.7vw + 1.7vh);
+    border-bottom: 1px solid #ffffff; /* Horizontal line between benefits */
+}
+
+.cost {
+    font-family: 'Arial', sans-serif;
+    font-weight: 600;
+    font-size: 1.5em;
+    color: #4a90e2; /* Bright blue for costs */
+    padding-top: 1vh;
+    text-align: right;
+    align-self: end;
+    justify-self: end;
+}
+.platinum {
+    color: #e5e4e2; /* Base color for platinum */
+    background: -webkit-linear-gradient(45deg, #e5e4e2, #b0b0b0, #e5e4e2);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
+}
+
+/* Shiny Gold tier color */
+.gold {
+    color: #ffd700; /* Base color for gold */
+    background: -webkit-linear-gradient(45deg, #ffd700, #d4af37, #ffd700);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0px 0px 8px rgba(255,215,0,0.5);
+}
+
+/* Silver tier color */
+.silver {
+    color: #c0c0c0; /* Base color for silver */
+    background: -webkit-linear-gradient(45deg, #c0c0c0, #9e9e9e, #c0c0c0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0px 0px 6px rgba(192,192,192,0.5);
+}
+
+/* Participant tier color (assuming a blue color for participants) */
+.participant {
+    color: #4a90e2; /* A blue color for participants */
+}
+.tier-inclusion-note {
+    color: #ffffff; /* White text color for readability */
+    font-size: 1em;
+    margin-top: 3vh; /* Spacing from the last tier */
+    text-align: center; /* Center the text */
+    opacity: 0.8; /* Slightly transparent for subtlety */
+    font-style: italic; /* Italicize for emphasis */
+}
+/* Add any additional styling here */

src/app/sponsorship/TierList.jsx

@@ -0,0 +1,36 @@
+"use client";
+import "./TierList.css"
+
+const Tier = ({ tierName, cost, benefits, tierColor }) => {
+    return (
+        <div className="tier">
+            <div className="tier-name">{tierName}</div>
+            <div className="tier-text">
+            <div className="benefits overflow-x-hidden">
+                {benefits.map((benefit, index) => (
+                    <div key={index} className="benefit">{benefit}</div>
+                ))}
+            </div>
+            </div>
+            <div className={`cost ${tierColor}`}>{cost}</div>
+        </div>
+    );
+};
+
+const TierList = () => {
+    return (
+        <div className="tier-list">
+            <div className= "tiers">
+                <Tier tierName="RISE PARTICIPANT" cost="FREE" benefits={["Booth Space to Display Projects", "Application for Presentation Slot"]} tierColor="participant" />
+                <Tier tierName="SILVER PARTNER" cost="$1,000+" benefits={["Logo on Website", "Additional Booth Space"]} tierColor="silver" />
+                <Tier tierName="GOLD PARTNER" cost="$3,000+" benefits={["Prelude Session Slot", "Logo on Digital Promotion", "Logo on Merchandise"]} tierColor="gold" />
+                <Tier tierName="PLATINUM PARTNER" cost="$5,000+" benefits={["Dedicated Spotlight Day", "Special Recognition at RISE", "Dedicated Social Media Post"]} tierColor="platinum" />
+            </div>
+            <div className="tier-inclusion-note">
+                *All higher tier perks include the benefits of the previous tiers.
+            </div>
+        </div>
+    );
+};
+
+export default TierList;