Fixes and new hero

unihackhq · Sep 18, 2021 · 257ce81 · 257ce81
1 parent 8155715
commit 257ce81
Show file tree

Hide file tree

Showing 10 changed files with 144 additions and 85 deletions.
diff --git a/components/icon-label/icon-label.module.scss b/components/icon-label/icon-label.module.scss
@@ -4,7 +4,22 @@
   display: flex;
   align-items: center;
 
+  &-with-title {
+    align-items: flex-start;
+  }
+
   img {
     margin-right: $space-small;
   }
+
+  h4 {
+    margin-bottom: $base / 2;
+  }
+
+  p {
+    font-size: 21px;
+    line-height: 28px;
+    margin: 0;
+    font-weight: 400;
+  }
 }
diff --git a/components/icon-label/icon-label.tsx b/components/icon-label/icon-label.tsx
@@ -1,16 +1,22 @@
 import React from 'react';
 import Icon from '@components/icon/icon';
-import { H3 } from '@components/typography/typography';
+import { H4 } from '@components/typography/typography';
 import styles from './icon-label.module.scss';
 
 type Props = {
   icon: string;
+  title?: string;
   children: React.ReactNode;
 };
 
-export const IconLabel = ({ icon, children }: Props) => (
-  <div className={`${styles['icon-section']}`}>
-    <Icon icon={icon} />
-    <H3>{children}</H3>
-  </div>
-);
+export const IconLabel = ({ icon, title, children }: Props) => {
+  return (
+    <div className={`${styles['icon-section']}`}>
+      <Icon icon={icon} />
+      <div className={`${styles['icon-content']}`}>
+        {!!title && <H4>{title}</H4>}
+        <p>{children}</p>
+      </div>
+    </div>
+  );
+};
diff --git a/public/images/sponsor-hero.jpg b/public/images/sponsor-hero.jpg
diff --git a/public/images/sponsor-hero.png b/public/images/sponsor-hero.png
diff --git a/sections/sponsor-hero/sponsor-hero.module.scss b/sections/sponsor-hero/sponsor-hero.module.scss
@@ -2,36 +2,61 @@
 @import '../../styles/spacing.scss';
 
 .sponsor-hero {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  background-color: $light_grey;
   @include page-margin;
+  position: relative;
 
-  &-content {
-    box-shadow: $floatingShadow;
+  > img {
+    display: block;
+    width: 100%;
+
+    @include lg {
+      width: 800px;
+    }
+
+    @include xl {
+      width: 850px;
+    }
   }
 
-  &-content-left {
+  &-content {
+    background: $white;
     color: $secondary;
     padding: $space-large $space-medium;
 
     @include md {
-      width: 50%;
+      background-color: rgba($white, 0.87);
+      backdrop-filter: blur(10px);
+      width: 350px;
       padding: $space-xlarge;
+      position: absolute;
+      top: 0px;
+      right: 0;
+      bottom: 0;
     }
 
-
-    background-color: rgba($white, .87);
-    backdrop-filter: blur(10px);
-    text-align-last: left;
+    @include lg {
+      background: $white;
+      backdrop-filter: unset;
+      width: 420px;
+      top: 140px;
+      bottom: unset;
+    }
 
-  }
+    @include xl {
+      width: 450px;
+    }
 
-  &-content-right {
-    @include md {
-      width: 50%;
+    &-subtitle {
+      font-weight: 600;
+      line-height: 42px;
+      font-size: 32px;
+      color: $midori;
+      letter-spacing: -1px;
+      margin: 0;
+      @include lg {
+        line-height: 54px;
+        font-size: 42px;
+      }
     }
   }
-
-}
+}
diff --git a/sections/sponsor-hero/sponsor-hero.tsx b/sections/sponsor-hero/sponsor-hero.tsx
@@ -1,38 +1,23 @@
 import React from 'react';
 import styles from './sponsor-hero.module.scss';
-import { H2, Text } from '@components/typography/typography';
 import Stack from '@components/stack/stack';
 import { IconLabel } from '@components/icon-label/icon-label';
 
 const SponsorHero = () => (
   <section className={styles['sponsor-hero']}>
-    <div
-      className={styles['sponsor-hero-content']}
-      style={{
-        background: 'url(/images/sponsor-hero.jpg)',
-        backgroundSize: 'cover',
-      }}
-    >
-      <div className={styles['sponsor-hero-content-left']}>
-        <Stack size="medium">
-          <Stack size="small">
-            <Stack size="medium">
-              <H2>What is UNIHACK?</H2>
-              <Text>
-                UNIHACK is a 48-hour hackathon with the mission to provide a
-                creative space for engineering, design and product students to
-                build innovative projects that are ready to go to market. Come
-                join us in the Imagination Revolution.
-              </Text>
-            </Stack>
-            <Text bold>Come join us in the Imagination Revolution!</Text>
-          </Stack>
-          <Stack size="small">
-            <IconLabel icon="Calendar">Next event TBC</IconLabel>
-            <IconLabel icon="Location">TBC</IconLabel>
-          </Stack>
-        </Stack>
-      </div>
+    <img src="/images/sponsor-hero.png" alt="Sponsorship UNIHACK" />
+    <div className={styles['sponsor-hero-content']}>
+      <Stack size="large">
+        <p className={styles['sponsor-hero-content-subtitle']}>
+          Come join us in the Imagination Revolution!
+        </p>
+        <IconLabel icon="Location" title="Location">
+          Australia &amp; New Zealand
+        </IconLabel>
+        <IconLabel icon="Calendar" title="Date">
+          TBA, Early 2022
+        </IconLabel>
+      </Stack>
     </div>
   </section>
 );

diff --git a/sections/sponsor-perks/perk/perk.module.scss b/sections/sponsor-perks/perk/perk.module.scss
@@ -9,11 +9,10 @@
     flex-direction: column;
   }
 
-  @include md {
+  @include lg {
     display: inline-table;
-    max-width: 464px;
-    max-height: 608px;
-    margin-right: $base * 8;
+    max-width: 420px;
+    margin-right: $base * 4;
   }
 
   .perk-img {
@@ -22,19 +21,17 @@
       width: 100%;
       height: 100%;
       display: block;
-
     }
   }
 
   .perk-desc {
     padding: $space-large;
-
-    @include md {
-      padding: $space-large $space-xlarge;
-    }
-
     color: $secondary;
     text-align: left;
     white-space: normal;
+
+    @include md {
+      padding: $space-large $space-xlarge;
+    }
   }
-}
+}
diff --git a/sections/sponsor-perks/sponsor-perks.module.scss b/sections/sponsor-perks/sponsor-perks.module.scss
@@ -5,7 +5,6 @@
   &-container {
     background-color: $secondary;
     padding-top: $space-xxlarge;
-    padding-bottom: $space-xxlarge;
   }
 
   &-header {
@@ -14,25 +13,31 @@
   }
 
   &-content {
-    @include md {
-      padding-left: 10%;
-      padding-right: 10%;
-      overflow-y: hidden;
-      white-space: nowrap;
-    }
+    @include offset-scroll;
+    padding-bottom: $space-xxlarge;
 
     .perks {
       margin-top: $space-large;
+      display: grid;
+      grid-gap: $base;
 
-      .perk-item {
-        &:not(:last-of-type) {
-          margin-bottom: $base * 2;
+      @include sm {
+        grid-template-columns: 1fr 1fr;
+        grid-gap: $base * 2;
+      }
 
-          @include md {
-            margin-bottom: 0;
-          }
+      @include lg {
+        display: flex;
+        &:after {
+          display: block;
+          content: '';
+          padding-right: $space-xxlarge;
         }
       }
+
+      .perk-item {
+        flex-shrink: 0;
+      }
     }
   }
-}
+}
diff --git a/styles/styles.scss b/styles/styles.scss
@@ -2,8 +2,11 @@
 @import './colours.scss';
 @import './variables.scss';
 
-$fonts: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-$fontsBasic: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+$fonts: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol';
+$fontsBasic: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+  Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
 
 $floatingShadow: 0px 2px 4px rgba(0, 0, 0, 0.13);
 
@@ -30,6 +33,29 @@ $floatingShadow: 0px 2px 4px rgba(0, 0, 0, 0.13);
   }
 }
 
+@mixin offset-scroll {
+  @include xsm {
+    padding-left: $base * 2;
+    padding-right: $base * 2;
+  }
+
+  @include sm {
+    padding-left: $base * 3;
+    padding-right: $base * 3;
+  }
+
+  @include lg {
+    padding-left: calc((100vw - 970px) / 2);
+    overflow-y: hidden;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include xl {
+    padding-left: calc((100vw - 1100px) / 2);
+  }
+}
+
 @mixin action-container {
   display: flex;
   flex-wrap: wrap;
@@ -114,4 +140,4 @@ $floatingShadow: 0px 2px 4px rgba(0, 0, 0, 0.13);
 
 @mixin link($color: $secondary) {
   @include link-base($color);
-}
+}
diff --git a/styles/typography/typography-base.scss b/styles/typography/typography-base.scss
@@ -34,14 +34,14 @@
 }
 
 @mixin hl-mobile {
-  font-size: 40px;
+  font-size: 42px;
   line-height: 48px;
   font-weight: 600;
   letter-spacing: -0.06em;
 }
 
 @mixin h1-desktop {
-  font-size: 40px;
+  font-size: 42px;
   line-height: 48px;
   font-weight: 400;
   letter-spacing: 0;
@@ -69,7 +69,7 @@
 }
 
 @mixin h4-desktop {
-  font-size: 16px;
+  font-size: 18px;
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0;
@@ -110,4 +110,4 @@
   line-height: 20px;
   font-weight: 600;
   letter-spacing: 0;
-}
+}