6: Fix hero component and create new pages

src/routes/(site)/6/+layout.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { preloadData } from '$app/navigation';
+  import { onMount } from 'svelte';
+  import Navbar from '$lib/components/nav/bar.svelte';
+  import Footer from '$lib/components/footer/footer.svelte';
+  import AcmToaster from '$lib/components/toaster/toaster.svelte';
+  import { AcmTheme, theme } from '$lib/public/legacy/theme';
+
+  function changeTheme(event: MediaQueryListEvent) {
+    theme.set(event.matches ? AcmTheme.Dark : AcmTheme.Light);
+  }
+
+  onMount(() => {
+    theme.init();
+
+    if ('matchMedia' in window) {
+      const mediaList = matchMedia('(prefers-color-scheme: dark)');
+      mediaList.addEventListener('change', changeTheme);
+      return () => mediaList.removeEventListener('change', changeTheme);
+    }
+
+    // preloadData improves the load time of the events page, see #772
+    // https://kit.svelte.dev/docs/modules#$app-navigation-preloaddata
+    preloadData('/events');
+  });
+</script>
+
+<Navbar />
+<main><slot /></main>
+<Footer />
+<AcmToaster />
+
+<svelte:head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+</svelte:head>
+
+<style>
+  main {
+    min-height: 100vh;
+  }
+</style>

src/routes/(site)/6/+page.svelte

@@ -0,0 +1,39 @@
+<script>
+  import Spacing from '$lib/public/legacy/spacing.svelte';
+  import Hero from './hero.svelte';
+  import Desc from './desc.svelte';
+  import Teams from './teams.svelte';
+  import Testimony from './testimony.svelte';
+  import Lucky from './lucky.svelte';
+  import Blog from './blog.svelte';
+</script>
+
+<svelte:head>
+  <title>ACM at CSUF</title>
+</svelte:head>
+
+<Spacing --min="175px" --med="200px" --max="200px" />
+
+<Hero />
+
+<Spacing --min="120px" --med="175px" --max="200px" />
+
+<Desc />
+
+<Spacing --min="120px" --med="175px" --max="200px" />
+
+<Teams />
+
+<Spacing --min="120px" --med="175px" --max="200px" />
+
+<Testimony />
+
+<Spacing --min="120px" --med="175px" --max="200px" />
+
+<Lucky />
+
+<Spacing --min="120px" --med="175px" --max="200px" />
+
+<Blog />
+
+<Spacing --min="75px" --med="100px" --max="120px" />

src/routes/(site)/6/hero.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import AcmButton from '$lib/components/button/button.svelte';
+</script>
+
+<section class="hero-container">
+  <div class="hero-inner-container">
+    <div class="hero-text">
+      <h1 class="brand-header size-xl">
+        <span>We are the largest</span> <span class="multicolor-text">Computer Science</span>
+        <span>community at CSUF</span>
+      </h1>
+      <div class="join-button">
+        <AcmButton text="Join today!" link="/discord" redirect={true} />
+      </div>
+    </div>
+
+    <img
+      src="/assets/png/capy-power.png"
+      alt="Chip the Capybara surrounded by all ACM Team badges"
+    />
+  </div>
+</section>
+
+<style>
+  section {
+    display: grid;
+  }
+
+  section .hero-inner-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: center;
+    gap: 1em;
+  }
+
+  section .hero-inner-container .hero-text {
+    display: grid;
+    align-items: center;
+    text-align: center;
+    gap: 1em;
+  }
+
+  section .hero-inner-container .hero-text span.multicolor-text {
+    background: linear-gradient(
+      to right,
+      var(--acm-turquoise),
+      var(--acm-blue),
+      var(--acm-bluer),
+      var(--acm-purple),
+      var(--acm-pink)
+    );
+    -webkit-background-clip: text;
+    color: transparent;
+  }
+
+  section .hero-inner-container .hero-text span {
+    display: block;
+  }
+
+  section .hero-inner-container .hero-text .join-button {
+    display: grid;
+    justify-self: center;
+  }
+
+  section .hero-inner-container img {
+    max-width: clamp(20rem, 17.342rem + 10.13vw, 30rem);
+    justify-self: center;
+  }
+
+  @media screen and (min-width: 768px) {
+    section {
+      display: grid;
+      place-items: center;
+      align-items: center;
+      max-width: 1280px;
+      margin: 0 auto;
+    }
+
+    section .hero-inner-container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      gap: 4em;
+    }
+
+    section .hero-inner-container .hero-text {
+      text-align: start;
+    }
+
+    section .hero-inner-container .hero-text .join-button {
+      justify-self: start;
+    }
+  }
+</style>