Merge pull request #18 from acmucsd/alex/sponsors

add sponsors section

src/app/page.tsx

@@ -3,6 +3,7 @@ import Hero from '@/sections/Hero';
 import About from '@/sections/About';
 import FAQ from '@/sections/FAQ';
 import styles from './page.module.scss';
+import Sponsors from '@/sections/Sponsors';
 
 export default function Home() {
   return (
@@ -11,6 +12,7 @@ export default function Home() {
       <About />
       <Statistics />
       <FAQ />
+      <Sponsors />
     </main>
   );
 }

src/components/LandingText/style.module.scss

@@ -75,7 +75,7 @@
         border-color: transparent;
         padding: 10px 24px;
         cursor: pointer;
-        color: vars.$dark-blue;
+        color: vars.$darker-blue;
         transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1);
         text-decoration: none;
 

src/sections/Sponsors/index.tsx

@@ -0,0 +1,44 @@
+import Typography from '@/components/Typography';
+import styles from './style.module.scss';
+import Link from 'next/link';
+import Image from 'next/image';
+import HoldingDiamond from 'public/assets/holding-diamond.png';
+import { SPONSORS } from './sponsors';
+
+const Sponsors: React.FC = () => {
+  return (
+    <section className={styles.container}>
+      <div className={styles.content}>
+        <Typography variant="display/heavy/small" className={styles.title}>
+          Thank you to our past sponsors...
+        </Typography>
+        <div className={styles.sponsorLogos}>
+          {SPONSORS.map(sponsor => (
+            <Link href={sponsor.link} key={sponsor.name}>
+              <Image
+                src={`/sponsors/old/${sponsor.logo}`}
+                alt={sponsor.name}
+                className={styles.sponsorLogo}
+                width={200}
+                height={100}
+              />
+            </Link>
+          ))}
+        </div>
+        <Typography variant="headline/light/small" className={styles.bottomText}>
+          Interested in working with us? Reach out down below!
+        </Typography>
+        <Link
+          href="mailto:[email protected]"
+          className={styles.button}
+          data-variant="secondary"
+        >
+          <Typography variant="title/small">Sponsor DiamondHacks!</Typography>
+        </Link>
+      </div>
+      <Image src={HoldingDiamond} alt="Diamond illustration" className={styles.background} />
+    </section>
+  );
+};
+
+export default Sponsors;

src/sections/Sponsors/sponsors.ts

@@ -0,0 +1,63 @@
+interface Sponsor {
+  name: string;
+  logo: string;
+  link: string;
+}
+
+export const SPONSORS: Sponsor[] = [
+  {
+    name: 'Quokka Brew',
+    logo: 'quokka.png',
+    link: 'https://www.quokkabrew.com/',
+  },
+  {
+    name: 'Happy Hacking Keyboard',
+    logo: 'hhkb.png',
+    link: 'https://hhkeyboard.us/',
+  },
+  {
+    name: 'CoCalc',
+    logo: 'cocalc.png',
+    link: 'https://cocalc.com/',
+  },
+  {
+    name: 'Wolfram',
+    logo: 'wolfram.png',
+    link: 'https://www.wolfram.com/',
+  },
+  {
+    name: 'Pololu',
+    logo: 'pololu.png',
+    link: 'https://www.pololu.com/',
+  },
+  {
+    name: '1Password',
+    logo: '1password.svg',
+    link: 'https://1password.com/',
+  },
+  {
+    name: 'echo3D',
+    logo: 'echo3d.png',
+    link: 'https://www.echo3d.com/',
+  },
+  {
+    name: 'Desmos',
+    logo: 'desmos.png',
+    link: 'https://www.desmos.com/',
+  },
+  {
+    name: 'Northrop Grumman',
+    logo: 'northrop.png',
+    link: 'https://www.northropgrumman.com/',
+  },
+  {
+    name: 'CodeCrafters',
+    logo: 'codecrafters.png',
+    link: 'https://codecrafters.io',
+  },
+  {
+    name: '.xyz',
+    logo: 'xyz.png',
+    link: 'https://gen.xyz/',
+  },
+];

src/sections/Sponsors/style.module.scss

@@ -0,0 +1,89 @@
+@use '@/styles/vars' as vars;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 2rem;
+  position: relative;
+  padding-bottom: 37.5rem; // So the bottom diamond guy fits nicely
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    padding-bottom: 5rem;
+  }
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+}
+
+.title {
+  @media screen and (max-width: vars.$breakpoint-md) {
+    font-size: 2.25rem !important;
+    line-height: 2.625rem !important;
+  }
+}
+
+.sponsorLogos {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.sponsorLogo {
+  width: 200px;
+  height: auto;
+  border-radius: 10px;
+  background-color: vars.$white;
+  padding: 1rem;
+}
+
+.button {
+  text-decoration: none;
+  background-color: vars.$dark-blue;
+  color: vars.$white;
+  padding: 10px 24px;
+  border-radius: 100px;
+  display: inline-block;
+}
+
+.background {
+  position: absolute;
+  bottom: -10rem;
+  width: calc(100% + 2 * vars.$side-padding);
+  height: calc(100% + 17.5rem);
+  z-index: -1;
+  object-fit: cover;
+  object-position: bottom;
+
+  // Blend out the gradients into the background
+  mask-image: linear-gradient(
+    to bottom,
+    transparent,
+    black min(10%, 5rem),
+    black 95rem,
+    transparent
+  );
+  -webkit-mask-image: linear-gradient(to bottom, transparent, black 5rem, black 95rem, transparent);
+
+  @media screen and (max-width: vars.$breakpoint-md) {
+    transform: scale(0.7); // Scale down to fit mobile
+    width: calc((100% + 2 * vars.$side-padding-mobile) / 0.7);
+  }
+}
+
+.bottomText {
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+}

src/styles/vars.scss

@@ -2,7 +2,8 @@
 $black: #151625;
 $blue: #9ecaff;
 $light-blue: #bfeafd;
-$dark-blue: #003258;
+$dark-blue: #0061a3;
+$darker-blue: #003258;
 $red: #ff8e72;
 $orange: #f9a857;
 $yellow: #ecdf98;