sfusurge · ChrisFong604 · Sep 9, 2024 · Sep 11, 2024 · Sep 11, 2024 · Sep 13, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@next/third-parties": "^14.2.10",
     "geist": "^1.3.1",
     "next": "14.2.6",
     "react": "^18",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/testimonials/christinaraganit.jpg b/public/testimonials/christinaraganit.jpg
diff --git a/public/testimonials/christopherfong.jpg b/public/testimonials/christopherfong.jpg
diff --git a/public/testimonials/johnsonluong.jpg b/public/testimonials/johnsonluong.jpg
diff --git a/public/testimonials/karrensusanto.jpeg b/public/testimonials/karrensusanto.jpeg
diff --git a/public/testimonials/lindajolly.jpg b/public/testimonials/lindajolly.jpg
diff --git a/public/testimonials/vickyxu.jpg b/public/testimonials/vickyxu.jpg
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -1,11 +1,13 @@
 import Testimonials from "@/app/sections/about/Testimonials";
 import TeamGallery from "@/app/sections/about/TeamGallery";
+import JoinDiscord from "@/components/JoinDiscord";
 
 export default function Page() {
   return (
-    <main className="flex flex-col gap-40">
+    <main className="flex flex-col gap-24 lg:gap-32">
       <TeamGallery />
       <Testimonials />
+      <JoinDiscord />
     </main>
   );
 }
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
@@ -1,11 +1,13 @@
 import EventsHero from "@/app/sections/events/EventsHero";
+import JoinDiscord from "@/components/JoinDiscord";
 import CurrentEvents from "@/app/sections/events/CurrentEvents";
 
 export default function Page() {
   return (
     <main className="flex flex-col gap-36">
       <EventsHero/>
       <CurrentEvents />
+      <JoinDiscord />
     </main>
   );
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -62,31 +62,31 @@
   }
 
   .title-1 {
-    @apply text-3xl text-balance;
+    @apply text-3xl text-balance tracking-tight;
   }
 
   .title-1.emphasized {
     @apply font-medium;
   }
 
   .title-2 {
-    @apply text-2xl text-balance;
+    @apply text-2xl text-balance tracking-tight;
   }
 
   .title-2.emphasized {
     @apply font-medium;
   }
 
   .title-3 {
-    @apply text-xl text-balance;
+    @apply text-xl text-balance tracking-tight;
   }
 
   .title-3.emphasized {
     @apply font-medium;
   }
 
   .paragraph {
-    @apply text-text-secondary font-light max-w-xl;
+    @apply text-text-secondary font-light max-w-xl tracking-normal;
   }
 
   .paragraph-lg {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import { GeistMono } from "geist/font/mono";
 import "./globals.css";
 import Nav from "../components/Nav";
 import Footer from "../components/footer";
+import { GoogleTagManager } from "@next/third-parties/google";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -22,7 +23,8 @@ export default function RootLayout({
 }>) {
 
   return (
-      <html className={`${GeistSans.variable} ${GeistMono.variable}  !scroll-p-24 `} lang="en">
+    <html className={`${GeistSans.variable} ${GeistMono.variable}  !scroll-p-24 `} lang="en">
+      <GoogleTagManager gtmId="GTM-PJKGX34K" />
       <head>
         <link rel="icon" href="/surge-logo.svg" type="image/x-icon"/>
       </head>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,14 @@
 import Landing from "@/app/sections/home/Landing";
 import Events from "@/app/sections/home/Events";
 import Involvement from "@/app/sections/home/Involvement";
+import Sponsors from "@/app/sections/home/Sponsors";
 
 export default function Home() {
   return (
     <main>
       <Landing />
       <Events />
+      <Sponsors />
       <Involvement />
     </main>
   );

diff --git a/src/app/sections/about/TeamGallery/index.tsx b/src/app/sections/about/TeamGallery/index.tsx
@@ -73,11 +73,11 @@ export default function TeamGallery() {
       >
         <div className="w-full lg:w-[40%]">
           <div className=" flex flex-col lg:sticky top-24 ">
-            <h2 className="text-caption">MEET THE TEAM</h2>
-            <h3 className="title-2 emphasized">
+            <h2 className="text-caption mb-2">MEET THE TEAM</h2>
+            <h3 className="title-2 emphasized mb-4">
               Introducing the students powering SFU Surge.
             </h3>
-            <p className="paragraph ">
+            <p className="paragraph mb-8">
               Meet our executive team of SFU students, bringing together diverse
               backgrounds in business, computer science, and design.
             </p>
@@ -104,7 +104,7 @@ export default function TeamGallery() {
           className=" flex flex-col w-full lg:w-[65%] lg:ml-8 rounded-2xl
        "
         >
-          <div className=" flex flex-col  bg-[#121318]/80  p-5 rounded-2xl  gap-5 transition-all ">
+          <div className=" flex flex-col rounded-2xl  gap-5 transition-all ">
             {teamMembers.map((member) =>
               activeButton === member.team ? (
                 <TeamCard

diff --git a/src/app/sections/about/Testimonials/index.tsx b/src/app/sections/about/Testimonials/index.tsx
@@ -1,27 +1,42 @@
 import EventCard from "@/components/EventCard";
 import TestimonialCard from "@/components/TestimonialCard";
-import eventData from "@/lib/testimonials.json"
+import eventData from "@/lib/testimonials.json";
 
 export default function Testimonials() {
-  return(
+  return (
     <section>
+      <div className="text-center flex flex-col items-center">
+        <p className="text-caption mb-2">OUR STORIES</p>
+        <h1 className="max-w-[40rem] title-2 emphasized mb-8">
+        Discover how being part of SFU Surge has shaped their journeys in technology and beyond.
+        </h1>
+      </div>
+
       <div className="grid gridSmall md:gridMedium xl:gridLarge  gap-6 ">
+        {
+        eventData.map((thisEvent, index) => {
 
-      {eventData.map((thisEvent, index) =>{
-          return(
-            <div key={index} style={{gridArea: thisEvent.area}}>
-              <TestimonialCard cardStyle={thisEvent.cardStyle} name={thisEvent.name} position={thisEvent.position} testimonial={thisEvent.testimonial} />
+          console.log(thisEvent.testimonial);
+
+          return (
+            <div key={index} style={{ gridArea: thisEvent.area }}>
+              <TestimonialCard
+                cardStyle={thisEvent.cardStyle}
+                name={thisEvent.name}
+                position={thisEvent.position}
+                testimonial={thisEvent.testimonial}
+                imageLink={thisEvent.src}
+              />
             </div>
-          )
-      } )}
-
+          );
+        })}
       </div>
-
     </section>
-  ) ;
+  );
 }
 
-
-{/* <div key={index} className={`col-span-${thisEvent.col} row-span-${thisEvent.row}`}>
+{
+  /* <div key={index} className={`col-span-${thisEvent.col} row-span-${thisEvent.row}`}>
 <TestimonialCard name={thisEvent.name} position={thisEvent.position} testimonial={thisEvent.testimonial} />
-</div> */}
+</div> */
+}
diff --git a/src/app/sections/home/Events/index.jsx b/src/app/sections/home/Events/index.jsx
@@ -13,7 +13,7 @@ const TitleSection = () => {
         <h6 className="text-caption text-center">
           {text_content.homepage.events.callout}
         </h6>
-        <h2 className="text-center title-3 text-balance max-w-3xl mx-auto">
+        <h2 className="text-center title-1 emphasized text-balance max-w-3xl mx-auto">
           {text_content.homepage.events.heading}
         </h2>
       </section>
@@ -27,22 +27,25 @@ const EventSection = () => {
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-12">
 
           <HomeCard
-            title="Stormhacks"
+            title="StormHacks"
             description="Our flagship hackathon"
-            src="/stormhacks.png"
+            src= {StormHacksImage}
             className="bg-[#2d1367]"
+            url="https://stormhacks.com/"
           />
           <HomeCard
-            title="Journeyhacks"
+            title="JourneyHacks"
             description="Our beginner-friendly hackathon"
-            src="/journeyhacks.png"
+            src={JourneyHacksImage}
             className="bg-[#32269F]"
+            url="https://journeyhacks2024.devpost.com/"
           />
           <HomeCard
             title="Workshops"
             description="Learn new skills"
-            src="/workshops.png"
+            src={WorkshopsImage}
             className="bg-[#1E293B]"
+            url="/events"
           />
         </div>
     </>

diff --git a/src/app/sections/home/Involvement/index.jsx b/src/app/sections/home/Involvement/index.jsx
@@ -1,8 +1,10 @@
 import React from "react";
 import InvolvementImage from "/public/Discord image.png";
 import Image from "next/image";
+import Button from "@/components/Button";
 
 import text_content from "@/lib/content/text_content.json";
+import JoinDiscord from "@/components/JoinDiscord";
 
 const Involvement = () => {
   return (
@@ -27,36 +29,7 @@ const Involvement = () => {
           </button>
         </div>
       </div>
-      <div className="bg-surface rounded-custom-radius p-8 pb-0 lg:pb-0 w-full flex sm:flex-row md:flex-row lg:flex-col items-start">
-        <div className="flex flex-col lg:flex-row">
-          <div className="lg:m-4 lg:w-1/2 flex items-center">
-            <div>
-              <h2 className="text-caption">
-                {text_content.homepage.join_discord.callout}
-              </h2>
-              <h1 className="title-2 mb-4 mt-3 emphasized">
-                {text_content.homepage.join_discord.heading}
-              </h1>
-              <p className="paragraph mb-6">
-                {text_content.homepage.join_discord.description}
-              </p>
-              <button className="button-link bg-brand-primary hover:bg-brand-primary-hover text-primary py-2 my-8 px-6 rounded-custom-radius transition mb-8">
-                <a href="https://discord.gg/UcFkUktxfy">
-                  {text_content.homepage.join_discord.cta}
-                </a>
-              </button>
-            </div>
-          </div>
-
-          <div className="flex-1 flex items-end justify-center">
-            <Image
-              src={InvolvementImage}
-              alt="Involvement"
-              className="w-full md:w-3/4 lg:w-full h-auto"
-            />
-          </div>
-        </div>
-      </div>
+      <JoinDiscord/>
     </div>
   );
 };

diff --git a/src/app/sections/home/Sponsors/index.jsx b/src/app/sections/home/Sponsors/index.jsx
@@ -0,0 +1,74 @@
+import Link from "next/link";
+import sponsorImages from "@/lib/sponsors.json";
+import Image from "next/image";
+import text_content from "@/lib/content/text_content.json";
+
+const TextSection = () => {
+    return (
+        <>
+            <section
+                className="flex flex-col gap-4">
+                <h6
+                    className="text-caption text-center
+                    text-s font-semibold">
+                    {/* eslint-disable-next-line react/no-unescaped-entities */}
+                    {text_content.homepage.sponsors.callout}
+                </h6>
+                <h2
+                    className="text-center title-1 emphasized">
+                    {text_content.homepage.sponsors.heading}
+                </h2>
+                <p className="text-center text-text-secondary">
+                    {/* eslint-disable-next-line react/no-unescaped-entities */}
+                    The organizers of Simon Fraser University's largest hackathon, SFU Surge provides an inclusive space
+                    for students to explore their passions, connect with industry professionals.
+                </p>
+                <button
+                    className="button-link md primary text-center text-text-primary to-brand-primary"
+                    style={{ backgroundColor: '#364FB8', display: 'inline-block', margin: '0 auto' }}
+                >
+                    {/* Replace href later */}
+                    <Link className="link" href="/about"> 
+                        Read Our Lore
+                    </Link>
+                </button>
+                <h3
+                  className="text-center title-2 emphasized mt-20">
+                  Some of our previous sponsors include...
+                </h3>
+
+            </section>
+        </>
+    );
+};
+
+
+const SponsorImages = () => {
+    return (
+        <div className="flex flex-wrap justify-center gap-4 mb-10">
+
+            {sponsorImages.map((sponsor) => (
+                <div key={sponsor.name} className="flex flex-col items-center" style={{ width: "18.25rem" }}>
+                    <Image
+                        alt={sponsor.link}
+                        src={sponsor.image}
+                        width={292} // Set the exact dimensions for the image file itself
+                        height={200}
+                        className="w-[18.25rem] h-[12.5rem] rounded-[1.5rem]"
+                    />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+const Sponsors = () => {
+    return (
+      <div className="flex flex-col gap-12">
+        <TextSection />
+        <SponsorImages />
+      </div>
+    );
+};
+
+export default Sponsors;