A bunch of code changes

unihackhq · Sep 19, 2021 · 91765b0 · 91765b0
1 parent 257ce81
commit 91765b0
Show file tree

Hide file tree

Showing 17 changed files with 194 additions and 78 deletions.
diff --git a/components/button/button-link.tsx b/components/button/button-link.tsx
@@ -1,27 +1,31 @@
 import { ReactNode } from 'react';
 import Link from 'next/link';
+import classNames from 'classnames/bind';
 import styles from '../button/button.module.scss';
 
+const cx = classNames.bind(styles);
+
 type Props = {
   type: 'primary' | 'secondary';
   theme: 'light' | 'dark';
   href: string;
   target?: string;
   children: ReactNode;
+  className?: string;
 };
 
 const ButtonLink = (props: Props) => {
   return isInternalLink(props.href) ? (
     <ButtonLinkInternal {...props} />
   ) : (
-      <ButtonLinkExternal {...props} />
-    );
+    <ButtonLinkExternal {...props} />
+  );
 };
 
 const ButtonLinkInternal = (props: Props) => (
   <Link href={props.href}>
     <a
-      className={`${styles['btn-link']} ${styles[props.type]} ${styles[props.theme]} ${styles.btn}`}
+      className={cx(props.type, props.theme, 'btn', props.className)}
       target={props.target ? props.target : ''}
     >
       {props.children}
@@ -31,7 +35,7 @@ const ButtonLinkInternal = (props: Props) => (
 
 const ButtonLinkExternal = (props: Props) => (
   <a
-    className={`${styles['btn-link']} ${styles[props.type]} ${styles[props.theme]} ${styles.btn}`}
+    className={cx(props.type, props.theme, 'btn', props.className)}
     href={props.href}
     target={props.target ? props.target : ''}
   >

diff --git a/components/typography/typography.module.scss b/components/typography/typography.module.scss
@@ -34,6 +34,10 @@
   @include h2;
 }
 
+.h2xl {
+  @include h2xl;
+}
+
 .h3 {
   @include h3;
 }
@@ -48,4 +52,4 @@
 
 .body-bold {
   @include body-bold;
-}
+}
diff --git a/components/typography/typography.tsx b/components/typography/typography.tsx
@@ -30,6 +30,10 @@ const H2 = (props: HeadingProps) => (
   <h2 className={cx('h2', props.className)}>{props.children}</h2>
 );
 
+const H2XL = (props: HeadingProps) => (
+  <h2 className={cx('h2xl', props.className)}>{props.children}</h2>
+);
+
 const H3 = (props: HeadingProps) => (
   <h3 className={cx('h3', props.className)}>{props.children}</h3>
 );
@@ -53,4 +57,4 @@ const Text = (props: TextProps) => {
   );
 };
 
-export { HXL, HL, H1, H2, H3, H4, Text };
+export { HXL, HL, H1, H2, H2XL, H3, H4, Text };
diff --git a/next.config.js b/next.config.js
@@ -1,29 +1,40 @@
-module.exports = {
-  async redirects() {
-    return [
-      {
-        source: '/mentor',
-        destination: 'https://forms.gle/qjkjeRPNzoa7PVbg8',
-        permanent: false
-      },
-      {
-        source: '/mentor-info',
-        destination: 'https://www.notion.so/unihack/Mentor-Information-Pack-2021-a5473d95671147ba80ca93f5c5980558',
-        permanent: false
-      },
-      {
-        source: '/mentor-brief',
-        destination: 'https://www.notion.so/unihack/Mentor-Information-Pack-2021-a5473d95671147ba80ca93f5c5980558',
-        permanent: false
-      },
-      {
-        source: '/conduct',
-        destination: 'https://github.com/unihackhq/rules/blob/master/code-of-conduct.md',
-        permanent: false
-      }
-    ]
-  },
+const redirects = async () => {
+  return [
+    {
+      source: '/mentor',
+      destination: 'https://forms.gle/qjkjeRPNzoa7PVbg8',
+      permanent: false
+    },
+    {
+      source: '/mentor-info',
+      destination:
+        'https://www.notion.so/unihack/Mentor-Information-Pack-2021-a5473d95671147ba80ca93f5c5980558',
+      permanent: false
+    },
+    {
+      source: '/mentor-brief',
+      destination:
+        'https://www.notion.so/unihack/Mentor-Information-Pack-2021-a5473d95671147ba80ca93f5c5980558',
+      permanent: false
+    },
+    {
+      source: '/conduct',
+      destination:
+        'https://github.com/unihackhq/rules/blob/master/code-of-conduct.md',
+      permanent: false
+    }
+  ];
+};
 
+const webpack = async (config, options) => {
+  console.log(config);
+
+  return config;
+};
+
+module.exports = {
+  redirects,
+  webpack,
   target: 'serverless',
   exportPathMap: function() {
     return {
@@ -40,6 +51,7 @@ module.exports = {
 const withMDX = require('@next/mdx')({
   extension: /\.(md|mdx)$/
 });
+
 module.exports = withMDX({
   pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx']
 });
diff --git a/pages/sponsorship/index.tsx b/pages/sponsorship/index.tsx
@@ -6,7 +6,7 @@ import SponsorHero from '../../sections/sponsor-hero/sponsor-hero';
 import Addons from '../../sections/sponsor-addons/sponsor-addons';
 import PreviousSponsors from '../../sections/previous-sponsors/previous-sponsors';
 import SponsorPerks from '../../sections/sponsor-perks/sponsor-perks';
-import SponsorPrompt from '../../sections/sponsor-prompt/sponsor-prompt';
+import SponsorPrompt from '../../sections/sponsor-prompt';
 import TiersTable from '../../sections/tiers-table/tiers-table';
 import Stack from '@components/stack/stack';
 import { PageNavigation } from '@components/page-navigation/page-navigation';
@@ -28,13 +28,14 @@ export default () => (
       </PageNavigation>
       <Stack className={styles.content} size="xxlarge">
         <SponsorHero />
-        <Stack size="large">
+        <p></p>
+        <Stack size="large" className={styles.tiers}>
           <TiersTable />
           <Addons />
         </Stack>
+        <SponsorPrompt />
         <SponsorPerks />
         <PreviousSponsors />
-        <SponsorPrompt />
       </Stack>
     </Page>
   </div>

diff --git a/pages/sponsorship/sponsorship.module.scss b/pages/sponsorship/sponsorship.module.scss
@@ -9,4 +9,9 @@
   @include md {
     padding-top: $space-xxlarge;
   }
-}
+}
+
+.tiers {
+  border-top: 1px solid #e0e0e0;
+  padding-bottom: $space-xxlarge;
+}
diff --git a/public/images/sponsor-callout.jpg b/public/images/sponsor-callout.jpg
diff --git a/sections/previous-sponsors/previous-sponsors.module.scss b/sections/previous-sponsors/previous-sponsors.module.scss
@@ -3,11 +3,21 @@
 
 .previous-sponsors {
   background-color: $light_grey;
-
+  padding-bottom: $space-xxlarge;
+
+  h2 {
+    margin-bottom: $base * 2;
+    @include md {
+      text-align: center;
+    }
+  }
+
   &-content {
     @include page-margin;
 
-    h3 {
+    p {
+      font-size: 21px;
+      margin-top: $base * 2;
       text-transform: uppercase;
       text-align: center;
     }

diff --git a/sections/previous-sponsors/previous-sponsors.tsx b/sections/previous-sponsors/previous-sponsors.tsx
@@ -2,15 +2,15 @@ import React from 'react';
 import styles from './previous-sponsors.module.scss';
 import pastSponsors from '../../content/past-sponsors.json';
 import Grid from '@components/grid/grid';
-import { H2, H3 } from '@components/typography/typography';
+import { H2XL, Text } from '@components/typography/typography';
 import Stack from '@components/stack/stack';
 
 const PreviousSponsors = () => (
   <section className={styles['previous-sponsors']}>
     <Stack size="small" className={styles['previous-sponsors-content']}>
-      <H2>Previous Sponsors</H2>
+      <H2XL>Previous Sponsors</H2XL>
       <Grid items={pastSponsors.sponsors} basePath={pastSponsors.base} />
-      <H3>... and many more</H3>
+      <Text>... and many more</Text>
     </Stack>
   </section>
 );

diff --git a/sections/sponsor-perks/sponsor-perks.module.scss b/sections/sponsor-perks/sponsor-perks.module.scss
@@ -2,10 +2,7 @@
 @import '../../styles/spacing.scss';
 
 .sponsor-perks {
-  &-container {
-    background-color: $secondary;
-    padding-top: $space-xxlarge;
-  }
+  background-color: $secondary;
 
   &-header {
     @include page-margin;
@@ -19,11 +16,11 @@
     .perks {
       margin-top: $space-large;
       display: grid;
-      grid-gap: $base;
+      grid-gap: $base * 2;
 
       @include sm {
         grid-template-columns: 1fr 1fr;
-        grid-gap: $base * 2;
+        grid-gap: $base * 3;
       }
 
       @include lg {

diff --git a/sections/sponsor-perks/sponsor-perks.tsx b/sections/sponsor-perks/sponsor-perks.tsx
@@ -1,7 +1,7 @@
 import styles from './sponsor-perks.module.scss';
 import Perk from './perk/perk';
 import perkData from '../../content/perks.json';
-import { H2 } from '@components/typography/typography';
+import { H2XL } from '@components/typography/typography';
 
 const SponsorPerks = () => {
   const perks = perkData.map(perk => (
@@ -20,7 +20,7 @@ const SponsorPerks = () => {
     <section className={styles['sponsor-perks']}>
       <div className={styles['sponsor-perks-container']}>
         <div className={styles['sponsor-perks-header']}>
-          <H2>Perks</H2>
+          <H2XL>Perks</H2XL>
         </div>
         <div className={styles['sponsor-perks-content']}>
           <div className={styles.perks}>{perks}</div>

diff --git a/sections/sponsor-prompt/sponsor-prompt.tsx → sections/sponsor-prompt/index.tsx b/sections/sponsor-prompt/sponsor-prompt.tsx → sections/sponsor-prompt/index.tsx
@@ -1,21 +1,20 @@
 import React from 'react';
 import styles from './sponsor-prompt.module.scss';
 import ButtonLink from '@components/button/button-link';
-import { H2, Text } from '@components/typography/typography';
+import { H2XL, Text } from '@components/typography/typography';
 import Stack from '@components/stack/stack';
 
 const SponsorPrompt = () => (
   <section className={styles['sponsor-prompt']} id="sponsor-prompt">
     <div className={styles['sponsor-prompt-container']}>
+      <span className={styles['sponsor-prompt-image']}></span>
       <Stack size="medium" className={styles['sponsor-prompt-content']}>
         <Stack size="small">
-          <H2>Contact us to become a sponsor today!</H2>
+          <H2XL>Become a sponsor today!</H2XL>
           <Text>
             We're happy to discuss customisations according to your needs. Send
             us an email at{' '}
-            <a href="mailto:[email protected]">
-              [email protected]
-            </a>{' '}
+            <a href="mailto:[email protected]">[email protected]</a>{' '}
             and we’ll follow-up within 24 hours.
           </Text>
           {/* <p>
@@ -27,6 +26,7 @@ const SponsorPrompt = () => (
           <ButtonLink
             type="primary"
             theme="dark"
+            className={styles['sponsor-prompt-link']}
             href="mailto:[email protected]?subject=General Sponsorship Enquiry"
           >
             Enquire now

diff --git a/sections/sponsor-prompt/sponsor-prompt.module.scss b/sections/sponsor-prompt/sponsor-prompt.module.scss
@@ -2,29 +2,73 @@
 @import '../../styles/spacing.scss';
 
 .sponsor-prompt {
+  background: $midori;
+  padding-bottom: $space-xxlarge;
+
   &-container {
-    background-color: $secondary;
+    @include page-margin;
+    position: relative;
   }
 
-  &-content {
-    @include page-margin;
+  &-image {
+    position: absolute;
+    display: none;
+    background: $midori url('../../public/images/sponsor-callout.jpg') center
+      center no-repeat;
+    background-size: cover;
+
+    @include md {
+      display: block;
+      top: -$space-xxlarge;
+      bottom: -$space-xxlarge;
+      right: -$base * 3;
+      left: 400px;
+    }
+
+    @include lg {
+      left: 440px;
+      right: calc((970px - 100vw) / 2);
+    }
+
+    @include xl {
+      left: 480px;
+      right: calc((1100px - 100vw) / 2);
+    }
+  }
 
-    padding-top: $space-xlarge;
-    padding-bottom: $space-xlarge;
+  &-content {
     color: $white;
-    font-size: 16px;
+
+    @include md {
+      width: 360px;
+    }
+
+    @include lg {
+      width: 400px;
+    }
 
     h2 {
-      color: $primary;
+      color: $white;
+      margin: 0 0 $base * 2;
     }
 
-    p a {
-      @include link-underline($white);
-      font-weight: 500;
+    p {
+      font-size: 18px;
+      line-height: 28px;
+      font-weight: 200;
+      margin: 0 0 $base * 2;
+      & a {
+        @include link-underline($white);
+        font-weight: 600;
+      }
     }
 
     .actions {
       @include action-container;
     }
   }
-}
+
+  &-link {
+    background-color: transparent !important;
+  }
+}