Merge pull request #180 from unihackhq/2025/update-sponsorship

update sponsorship page
unihackhq · Jul 15, 2024 · c0414fe · c0414fe
2 parents da65c17 + c9e325c
commit c0414fe
Show file tree

Hide file tree

Showing 13 changed files with 288 additions and 89 deletions.
diff --git a/lib/constants.ts b/lib/constants.ts
@@ -1,2 +1,4 @@
 export const SPONSORSHIP_EMAIL =
   'mailto:[email protected]?subject=UNIHACK 2024 Sponsorship';
+
+  export const SPONSORSHIP_FILE = '/files/2025-sponsorship-prospectus.pdf'
diff --git a/pages/sponsorship/index.tsx b/pages/sponsorship/index.tsx
@@ -1,33 +1,27 @@
 import Head from 'next/head';
 import Page from '@layouts/page/page';
 import SponsorHero from '@sections/sponsorship/sponsor-hero';
-import Addons from '@sections/sponsorship/sponsor-addons';
 import PreviousSponsors from '@sections/sponsorship/previous-sponsors';
-import SponsorPerks from '@sections/sponsorship/sponsor-perks';
 import SponsorPrompt from '@sections/sponsorship/sponsor-prompt';
 import SponsorGetInvolved from '@sections/sponsorship/sponsor-get-involved';
-import TiersTable from '@sections/sponsorship/tiers-table';
 import Stack from '@components/stack/stack';
 import styles from './sponsorship.module.scss';
+import SponsorEventOutline from '@sections/sponsorship/sponsor-event-outline';
 
 export default () => (
   <>
     <Head>
-      <title>Sponsor UNIHACK 2024</title>
-      <meta property="og:title" content="Sponsor UNIHACK 2024" key="title" />
+      <title>Sponsor UNIHACK 2025</title>
+      <meta property="og:title" content="Sponsor UNIHACK 2025" key="title" />
     </Head>
     <Page>
-      <Stack size="xxlarge">
-        <SponsorHero />
-        <PreviousSponsors />
+      <SponsorHero />
+      <Stack size="xxlarge" className={styles.body}>
         <SponsorGetInvolved />
-        <Stack size="large" className={styles.tiers}>
-          <TiersTable />
-          <Addons />
-        </Stack>
-        <SponsorPerks />
-        <SponsorPrompt />
+        <SponsorEventOutline />
+        <PreviousSponsors />
       </Stack>
+      <SponsorPrompt />
     </Page>
   </>
 );
diff --git a/pages/sponsorship/sponsorship.module.scss b/pages/sponsorship/sponsorship.module.scss
@@ -1,9 +1,24 @@
 @import '../../styles/breakpoints.scss';
 @import '../../styles/spacing.scss';
+@import '../../styles/styles.scss';
 
 .tiers {
   border-top: 1px solid #e0e0e0;
   background: #F3F4F5;
   position: relative;
   padding-bottom: $space-xxlarge;
 }
+
+.body {
+  background-color: $light_grey;
+  padding-bottom: $space-xxlarge;
+
+  h2 {
+    margin-bottom: $base * 4;
+    text-align: center;
+    font-size: 24px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+
+}
diff --git a/public/files/2025-sponsorship-prospectus.pdf b/public/files/2025-sponsorship-prospectus.pdf
diff --git a/sections/sponsorship/previous-sponsors/index.tsx b/sections/sponsorship/previous-sponsors/index.tsx
@@ -6,15 +6,13 @@ import { H2XL } from '@components/typography/typography';
 
 const PreviousSponsors = () => (
   <section className={styles['previous-sponsors']}>
-    <div className={styles['previous-sponsors-wrapper']}>
-      <div className={styles['previous-sponsors-container']}>
-        <H2XL>Past Sponsors</H2XL>
-        <Grid
-          items={pastSponsors.sponsors}
-          basePath={pastSponsors.base}
-          style={styles['previous-sponsors-grid']}
-        />
-      </div>
+    <div className={styles['previous-sponsors-container']}>
+      <H2XL>Past Sponsors</H2XL>
+      <Grid
+        items={pastSponsors.sponsors}
+        basePath={pastSponsors.base}
+        style={styles['previous-sponsors-grid']}
+      />
     </div>
   </section>
 );

diff --git a/sections/sponsorship/previous-sponsors/previous-sponsors.module.scss b/sections/sponsorship/previous-sponsors/previous-sponsors.module.scss
@@ -3,26 +3,9 @@
 @import "../../../styles/typography/typography.scss";
 
 .previous-sponsors {
-  padding: 0;
   z-index: 1;
   position: relative;
 
-  h2 {
-    margin-bottom: $base * 4;
-    text-align: center;
-  }
-
-  &-wrapper {
-    max-width: 1200px;
-    background: white;
-    padding: $space-xlarge 0;
-
-    @include xl {
-      padding: $space-xlarge;
-      margin: -$space-xlarge * 2 auto 0;
-    }
-  }
-
   &-container {
     @include page-margin;
 

diff --git a/sections/sponsorship/sponsor-event-outline/index.tsx b/sections/sponsorship/sponsor-event-outline/index.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import styles from './sponsor-event-outline.module.scss';
+import { H2XL } from '@components/typography/typography';
+
+const SponsorEventOutline: React.FC = () => (
+  <section className={styles['sponsor-event-outline']}>
+    <div className={styles['sponsor-event-outline-content']}>
+      <H2XL>What is UNIHACK?</H2XL>
+      <p>
+        UNIHACK is where the next generation of tech makers and disrupters build
+        and showcase their innovative projects over a 48-hour period.
+      </p>
+      <div className={styles['sponsor-event-outline-grid']}>
+        <div>
+          <p>
+            <strong>There is no prescribed theme for UNIHACK.</strong> Students
+            are not restricted on what they want to create; and all projects are
+            eligible for the Main Prize.
+          </p>
+          <p>
+            However, certain category and sponsor prizes may have challenges or
+            themes attached to them.
+          </p>
+        </div>
+        <div>
+          <p>
+            <strong>Our event is a hybrid event.</strong> Students can
+            participate remotely from any location in Australia and New Zealand;
+            or through our Event Hubs in some universities.
+          </p>
+          <p>
+            These Event Hubs are locations where students can meet and come
+            together to work on their prototypes.
+          </p>
+        </div>
+        <div>
+          <p>
+            <strong>Our event is open to all students</strong> studying at an
+            accredited university/TAFE in Australia or New Zealand. We encourage
+            students from non-IT backgrounds to participate.
+          </p>
+        </div>
+      </div>
+      <div className={styles['sponsor-event-outline-numbers']}>
+        <h3>2024 by the numbers...</h3>
+        <ul>
+          <li>
+            <span>477</span> students participating
+          </li>
+          <li>
+            <span>70</span> projects submitted
+          </li>
+          <li>
+            <span>40%</span> final year or honours students
+          </li>
+          <li>
+            <span>18+</span> universities participating
+          </li>
+        </ul>
+      </div>
+    </div>
+  </section>
+);
+
+export default SponsorEventOutline;
diff --git a/sections/sponsorship/sponsor-event-outline/sponsor-event-outline.module.scss b/sections/sponsorship/sponsor-event-outline/sponsor-event-outline.module.scss
@@ -0,0 +1,91 @@
+@import '../../../styles/styles.scss';
+@import '../../../styles/spacing.scss';
+@import '../../../styles/typography/typography.scss';
+
+.sponsor-event-outline {
+  padding: $space-xxlarge 0 0;
+  background-color: $light_grey;
+  border-top: 1px solid #e0e0e0;
+
+  &-content {
+    @include page-margin;
+
+    & > p {
+      font-weight: 300;
+      font-size: 36px;
+      margin: 0 0 $base * 8;
+      text-align: center;
+      letter-spacing: -1px;
+    }
+  }
+
+  &-numbers {
+    background: $pacific;
+    padding: 32px;
+    border-radius: 4px;
+    margin: 64px 0 0 0;
+    color: white;
+
+    h3 {
+      margin: 0 0 24px;
+      text-transform: uppercase;
+      font-size: 18px;
+      letter-spacing: 3px;
+      font-weight: 500;
+      text-align: center;
+    }
+
+    ul {
+      display: grid;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      grid-template-columns: repeat(1, 1fr);
+      grid-gap: 32px;
+      text-align: center;
+
+      @include md {
+        grid-template-columns: repeat(4, 1fr);
+      }
+    }
+
+    li {
+      line-height: 18px;
+
+      span {
+        display: block;
+        font-size:48px;
+        line-height: 54px;
+        font-weight: 700;
+        letter-spacing: -1px;
+      }
+    }
+  }
+
+  &-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    grid-gap: 32px;
+    margin: 0 auto;
+
+    @include md {
+      grid-template-columns: repeat(3, 1fr);
+    }
+
+    > div {
+      padding-left: 20px;
+      position: relative;
+
+      &:before {
+        content: '▷';
+        color: $pacific;
+        position: absolute;
+        left: 0;
+      }
+    }
+
+    p {
+      margin: 0 0 $base * 2;
+    }
+  }
+}
diff --git a/sections/sponsorship/sponsor-get-involved/index.tsx b/sections/sponsorship/sponsor-get-involved/index.tsx
@@ -5,6 +5,8 @@ import { Player } from '@lottiefiles/react-lottie-player';
 import TechTalentLottie from '@content/lottie/tech-talent.json';
 import MarketingLottie from '@content/lottie/marketing.json';
 import ToolsLottie from '@content/lottie/tools.json';
+import ButtonLink from '@components/button/button-link';
+import { SPONSORSHIP_FILE } from '@lib/constants';
 
 interface LottiePlayerTypes {
   src: object;
@@ -32,28 +34,41 @@ const LottiePlayer: React.FC<LottiePlayerTypes> = ({
 const SponsorGetInvolved: React.FC = () => (
   <section className={styles['sponsor-get-involved']}>
     <div className={styles['sponsor-get-involved-content']}>
-      <H2XL>Get involved to...</H2XL>
+      <H2XL>Why Sponsor?</H2XL>
       <div className={styles['sponsor-get-involved-grid']}>
         <div className={styles['sponsor-get-involved-grid-item']}>
           <LottiePlayer
             id="sponsor-get-involved-tech-talent"
             src={TechTalentLottie}
           />
-          <Text>Meet, shape, and recruit emerging tech talent</Text>
+          <Text>
+            Meet, shape, and recruit the next generation of tech talent
+          </Text>
         </div>
+
+        <div className={styles['sponsor-get-involved-grid-item']}>
+          <LottiePlayer id="sponsor-get-involved-tools" src={ToolsLottie} />
+          <Text>Promote your products/tools &amp; receive live feedback</Text>
+        </div>
+
         <div className={styles['sponsor-get-involved-grid-item']}>
           <LottiePlayer
             id="sponsor-get-involved-marketing"
             src={MarketingLottie}
             loop={false}
           />
-          <Text>Increase brand awareness</Text>
-        </div>
-        <div className={styles['sponsor-get-involved-grid-item']}>
-          <LottiePlayer id="sponsor-get-involved-tools" src={ToolsLottie} />
-          <Text>Promote your tools & receive live feedback</Text>
+          <Text>Increase brand awareness and support innovation</Text>
         </div>
       </div>
+      <div className={styles.actions}>
+        <ButtonLink
+          type="secondary"
+          theme="transparent"
+          href={SPONSORSHIP_FILE}
+        >
+          Download Prospectus
+        </ButtonLink>
+      </div>
     </div>
   </section>
 );