Finish main page hero

src/components/events/EventCarousel/index.tsx

@@ -21,7 +21,7 @@ const EventCarousel = ({ title, description, events, attendances }: EventCarouse
           <Typography variant="body/medium">{description}</Typography>
         </div>
         <Link className={styles.viewToggle} href={config.eventsRoute}>
-          See all events
+          See all events &gt;
         </Link>
       </div>
       <Carousel>

src/components/home/Hero/index.tsx

@@ -0,0 +1,98 @@
+import { Typography } from '@/components/common';
+import { config } from '@/lib';
+import type { PrivateProfile } from '@/lib/types/apiResponses';
+import CheckMark from '@/public/assets/icons/check-mark.svg';
+import LeaderboardIcon from '@/public/assets/icons/leaderboard-icon.svg';
+import ShopIcon from '@/public/assets/icons/shop-icon.svg';
+import Image from 'next/image';
+import Link from 'next/link';
+import { FormEvent, useState } from 'react';
+import styles from './style.module.scss';
+
+interface HeroProps {
+  user: PrivateProfile;
+  checkin: (code: string) => void;
+}
+
+const Hero = ({ user, checkin }: HeroProps) => {
+  const [checkinCode, setCheckinCode] = useState('');
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    checkin(checkinCode);
+  };
+
+  return (
+    <div className={styles.hero}>
+      <Image
+        className={`${styles.image} ${styles.desktop}`}
+        src="/assets/graphics/portal/raccoon-waves.svg"
+        alt="Landing page graphic"
+        priority
+        fill
+      />
+      <Image
+        className={`${styles.image} ${styles.mobile}`}
+        src="/assets/graphics/portal/waves.svg"
+        alt="Landing page graphic"
+        priority
+        fill
+      />
+      <div className={styles.content}>
+        <div className={styles.header}>
+          <div>
+            <Typography variant="display/light/large" className={styles.headline}>
+              {'Welcome to ACM, '}
+            </Typography>
+            <Link href={config.profileRoute}>
+              <Typography variant="display/heavy/large" className={styles.headline}>
+                {user.firstName}
+              </Typography>
+            </Link>
+            <Typography variant="display/light/large" className={styles.headline}>
+              !
+            </Typography>
+          </div>
+          <div>
+            <Typography variant="h3/regular" className={styles.inline}>
+              {'You have '}
+            </Typography>
+            <Typography variant="h3/bold" className={styles.inline}>
+              {user.points}
+            </Typography>
+            <Typography variant="h3/regular" className={styles.inline}>
+              {' membership points.'}
+            </Typography>
+          </div>
+        </div>
+        <div className={styles.actions}>
+          <form className={styles.checkin} onSubmit={handleSubmit} action="">
+            <Typography variant="h1/regular">Check in to an event</Typography>
+            <div className={styles.checkinButtons}>
+              <input
+                type="text"
+                placeholder="Check-in code"
+                className={styles.checkinInput}
+                value={checkinCode}
+                onChange={e => setCheckinCode(e.target.value)}
+              />
+              <button type="submit" className={styles.submit}>
+                <CheckMark />
+              </button>
+            </div>
+          </form>
+          <Link href={config.storeRoute} className={styles.link}>
+            <LeaderboardIcon />
+            <Typography variant="h4/regular">Spend points on merch</Typography>
+          </Link>
+          <Link href={config.leaderboardRoute} className={styles.link}>
+            <ShopIcon />
+            <Typography variant="h4/regular">Compete with friends</Typography>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;

src/components/home/Hero/style.module.scss

@@ -0,0 +1,154 @@
+@use 'src/styles/vars.scss' as vars;
+
+.inline {
+  display: inline;
+}
+
+.hero {
+  min-height: min(vars.$min-content-height, calc(1080px - 6.25rem));
+  /* Header height: 4.25 rem, padding: 2 rem */
+  position: relative;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+    height: 100%;
+    padding: 0 1rem;
+    position: relative;
+    z-index: 1;
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+
+      .headline {
+        display: inline;
+      }
+    }
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      max-width: fit-content;
+      padding-bottom: 2rem;
+
+      .checkin {
+        background-color: var(--theme-accent-line-2-transparent);
+        border-radius: 1rem;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        padding: 2rem;
+        transition: box-shadow 0.2s;
+
+        &:hover {
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+        }
+
+        .checkinButtons {
+          display: flex;
+          flex-direction: row;
+          gap: 1rem;
+          justify-content: space-between;
+          width: 100%;
+
+          .checkinInput {
+            border: 0;
+            border-radius: 1rem;
+            box-shadow: 0 4px 4px var(--theme-shadow);
+            flex: 1;
+            font: inherit;
+            overflow: hidden;
+            padding: 1rem 1.5rem;
+          }
+
+          .submit {
+            align-items: center;
+            background-color: var(--theme-primary-3);
+            border-radius: 100%;
+            box-shadow: 0 4px 4px var(--theme-shadow);
+            display: flex;
+            height: 50px;
+            justify-content: center;
+            width: 50px;
+          }
+        }
+      }
+
+      .link {
+        align-items: center;
+        background-color: var(--theme-accent-line-2-transparent);
+        border-radius: 1rem;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        min-width: fit-content;
+        padding: 1rem 1.5rem;
+        transition: box-shadow 0.2s;
+
+        &:hover {
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+        }
+      }
+    }
+  }
+
+  .image {
+    margin: 0 auto;
+    max-height: 1080px;
+    max-width: 1920px;
+    object-fit: cover;
+    object-position: 100% 100%;
+    // We have to manually add width since it's taking the width of the container, which is padded.
+    width: calc(100% + 4rem) !important;
+    z-index: 0;
+
+    &.mobile {
+      display: none;
+    }
+
+    @media screen and (width <= 1920px) {
+      // This helps center the image when we have to manually add width to it.
+      // If the whole image is being displayed (width > 1920px), we don't need this.
+      margin-left: -2rem;
+    }
+  }
+}
+
+@media screen and (width <= vars.$breakpoint-md) {
+  .hero {
+    .header {
+      .headline {
+        font-size: 3rem !important;
+        line-height: 4rem !important;
+      }
+    }
+
+    .image {
+      &.mobile {
+        display: block;
+      }
+
+      &.desktop {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (width <= vars.$breakpoint-sm) {
+  .actions {
+    .checkin {
+      .checkinButtons {
+        .submit {
+          display: none !important;
+        }
+      }
+    }
+  }
+}

src/components/home/Hero/style.module.scss.d.ts

@@ -0,0 +1,22 @@
+export type Styles = {
+  actions: string;
+  checkin: string;
+  checkinButtons: string;
+  checkinInput: string;
+  content: string;
+  desktop: string;
+  header: string;
+  headline: string;
+  hero: string;
+  image: string;
+  inline: string;
+  link: string;
+  mobile: string;
+  submit: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;