From a11c00453a3336ec72ef918cedfda9c71687672e Mon Sep 17 00:00:00 2001
From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com>
Date: Thu, 7 Dec 2023 16:15:45 -0800
Subject: [PATCH] Finishing touches before 6.0 (#1000)

* Update +page.svelte

TODO: Resolve issue 999!!!

* move 6 to root level

* Fixed dev logo path

---------

Co-authored-by: Karnikaa Velumani <60043611+karnikaavelumani@users.noreply.github.com>
Co-authored-by: Karnikaa Velumani <karnikaavelumani@csu.fullerton.edu>
---
 src/routes/(site)/+page.svelte                |  22 +-
 src/routes/(site)/6/+page.svelte              |  39 --
 src/routes/(site)/6/hero.svelte               |  98 -----
 src/routes/(site)/6/teams/+page.svelte        | 205 ----------
 src/routes/(site)/6/teams/team-section.svelte | 336 -----------------
 src/routes/(site)/{6 => }/blog.svelte         |   0
 src/routes/(site)/{6 => }/desc.svelte         |   0
 src/routes/(site)/hero.svelte                 | 125 ++++---
 src/routes/(site)/{6 => }/lucky.svelte        |   0
 src/routes/(site)/{6 => }/teams.svelte        |   2 +-
 src/routes/(site)/teams/+page.svelte          | 210 +++++++++--
 .../{6 => }/teams/diamond-picture.svelte      |   0
 .../(site)/{6 => }/teams/members.svelte       |   2 +-
 src/routes/(site)/teams/team-section.svelte   | 349 +++++++++++++++---
 src/routes/(site)/{6 => }/testimony.svelte    |   0
 15 files changed, 563 insertions(+), 825 deletions(-)
 delete mode 100644 src/routes/(site)/6/+page.svelte
 delete mode 100644 src/routes/(site)/6/hero.svelte
 delete mode 100644 src/routes/(site)/6/teams/+page.svelte
 delete mode 100644 src/routes/(site)/6/teams/team-section.svelte
 rename src/routes/(site)/{6 => }/blog.svelte (100%)
 rename src/routes/(site)/{6 => }/desc.svelte (100%)
 rename src/routes/(site)/{6 => }/lucky.svelte (100%)
 rename src/routes/(site)/{6 => }/teams.svelte (98%)
 rename src/routes/(site)/{6 => }/teams/diamond-picture.svelte (100%)
 rename src/routes/(site)/{6 => }/teams/members.svelte (92%)
 rename src/routes/(site)/{6 => }/testimony.svelte (100%)

diff --git a/src/routes/(site)/+page.svelte b/src/routes/(site)/+page.svelte
index 89c9732d7..5d862fe0c 100644
--- a/src/routes/(site)/+page.svelte
+++ b/src/routes/(site)/+page.svelte
@@ -1,9 +1,11 @@
 <script>
   import Spacing from '$lib/public/legacy/spacing.svelte';
   import Hero from './hero.svelte';
-  import WhyJoin from './why-join.svelte';
-  import AcmPaths from './acm-paths.svelte';
-  import ReadyUp from './ready-up.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>
@@ -16,14 +18,22 @@
 
 <Spacing --min="120px" --med="175px" --max="200px" />
 
-<WhyJoin />
+<Desc />
 
 <Spacing --min="120px" --med="175px" --max="200px" />
 
-<AcmPaths />
+<Teams />
 
 <Spacing --min="120px" --med="175px" --max="200px" />
 
-<ReadyUp />
+<Testimony />
+
+<Spacing --min="120px" --med="175px" --max="200px" />
+
+<Lucky />
+
+<Spacing --min="120px" --med="175px" --max="200px" />
+
+<Blog />
 
 <Spacing --min="75px" --med="100px" --max="120px" />
diff --git a/src/routes/(site)/6/+page.svelte b/src/routes/(site)/6/+page.svelte
deleted file mode 100644
index 5d862fe0c..000000000
--- a/src/routes/(site)/6/+page.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<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" />
diff --git a/src/routes/(site)/6/hero.svelte b/src/routes/(site)/6/hero.svelte
deleted file mode 100644
index 370d8e532..000000000
--- a/src/routes/(site)/6/hero.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<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/capy-power.svg" 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 {
-    display: block;
-  }
-
-  /* Since we gave a display block to the span elements within the h1, 
-   * each will cover the entire page width, causing issues with the 
-   * multicolor linear-gradient (covering the webpage width rather than 
-   * the actual text ONLY). Giving a display of inline-block to the span 
-   * containing the multicolor text resolved this issue.
-   */
-  section .hero-inner-container .hero-text span.multicolor-text {
-    display: inline-block;
-    background: linear-gradient(
-      to right,
-      var(--acm-turquoise),
-      var(--acm-blue),
-      var(--acm-bluer),
-      var(--acm-purple),
-      var(--acm-pink)
-    );
-    background-clip: text;
-    -webkit-background-clip: text;
-    color: transparent;
-  }
-
-  section .hero-inner-container .hero-text .join-button {
-    display: grid;
-    justify-self: center;
-  }
-
-  section .hero-inner-container img {
-    max-width: 90%;
-    justify-self: center;
-  }
-
-  @media screen and (min-width: 1000px) {
-    section {
-      display: grid;
-      place-items: center;
-      align-items: center;
-    }
-
-    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;
-      margin: 2em;
-    }
-
-    section .hero-inner-container .hero-text .join-button {
-      justify-self: start;
-    }
-  }
-</style>
diff --git a/src/routes/(site)/6/teams/+page.svelte b/src/routes/(site)/6/teams/+page.svelte
deleted file mode 100644
index 140fa21aa..000000000
--- a/src/routes/(site)/6/teams/+page.svelte
+++ /dev/null
@@ -1,205 +0,0 @@
-<script lang="ts">
-  import { TEAMS } from '$lib/public/board/data';
-  import { VISIBLE_TERMS } from '$lib/public/board/data/terms';
-  import { termIndex } from '$lib/public/board/utils';
-  import Spacing from '$lib/public/legacy/spacing.svelte';
-  import TeamSection from './team-section.svelte';
-  import Select from '$lib/components/select/select.svelte';
-
-  /**
-   * @param termCode ex: `F21`, `S22`, etc.
-   * @returns `"Fall 2021"`, `"Spring 2022"`, etc.
-   */
-  function formatTerm(termCode: string) {
-    const [termAbbr, yearDigit1, yearDigit2] = termCode.split('');
-    const termText = termAbbr === 'S' ? 'Spring' : 'Fall';
-    return `${termText} 20${yearDigit1}${yearDigit2}`;
-  }
-
-  const formattedTerms = VISIBLE_TERMS.map(formatTerm);
-  let currentFormattedTerm = formattedTerms[$termIndex];
-  $: $termIndex = formattedTerms.indexOf(currentFormattedTerm);
-</script>
-
-<Spacing --min="175px" --med="200px" --max="200px" />
-
-<section class="hero-container">
-  <div class="hero-inner-container">
-    <div class="hero-text">
-      <h1 class="brand-header size-xl">Explore our teams</h1>
-      <p>
-        Our teams specialize in specific fields in the tech industry. We've designed the teams to be
-        gateways for students to explore new fields, develop new interests, and learn new skills
-        that will benefit them in the industry.
-      </p>
-      <div class="semester-button">
-        <Select bind:defaultValue={currentFormattedTerm} options={formattedTerms} />
-      </div>
-    </div>
-    <img src="/assets/capy-read.svg" alt="Chip the Capybara reading a book" />
-  </div>
-  <Spacing --min="100px" --med="125px" --max="125px" />
-</section>
-
-<TeamSection info={TEAMS.general} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The ACM <span class="brand-blue brand-em">general</span> team is a dynamic group of individuals
-    driving the success of our organization. ACM <span class="brand-blue brand-em">General</span>
-    manages operations, organizes events, and ensure the smooth functioning of ACM. They are the backbone
-    of our community, fostering collaboration and innovation among members.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.marketing} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-blush brand-em">marketing</span> team has a strong passion towards
-    advertising and spreading word on all our ACM events.
-    <span class="brand-blush brand-em">Marketing</span> utilizes their expertise in digital strategies
-    and creative storytelling to display a welcoming environment to all students.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.algo} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-purple brand-em">algorithm</span> team is dedicated to building
-    programming fundamentals within students. <span class="brand-purple brand-em">Algo</span> focuses
-    on mastering data structures and algorithms, enhancing problem solving abilities, and exploration
-    of competitive programming.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.design} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-pink brand-em">design</span> team is dedicated to emphasizing the
-    importance of product design and product management in the tech industry.
-    <span class="brand-pink brand-em">Design</span> focuses on educating students about design principles,
-    design tools, and the intricacies of conceptualization, development, and management of a product.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.dev} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-bluer brand-em">development</span> team is dedicated to giving students
-    the opportunity to explore tech via hands-on projects and activities.
-    <span class="brand-bluer brand-em">Dev</span> focuses on introducing students to software development,
-    and the various tech stacks used in the industry.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.ai} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-emerald brand-em">artificial intelligence</span> team is dedicated to
-    providing accessible information about artificial intelligence and machine learning to all.
-    <span class="brand-emerald brand-em">AI</span> focuses on fun projects geared towards beginners in
-    the field.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS['gamedev']} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-red brand-em">game development</span> team is dedicated to teaching the
-    basics of programming in the gaming industry. <span class="brand-red brand-em">Gamedev</span> focuses
-    on educating students about design principles, design tools, and the development process of a project.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS['special-events']} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-lemon brand-em">special events</span> team is all about creating
-    unforgettable moments and experiences. <span class="brand-lemon brand-em">Special Events</span> plan
-    and execute ex citing events that bring our community together, fostering connections and celebrating
-    shared passions.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.nodebuds} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    Personalized for your success, <span class="brand-red brand-em">node buds</span> is our exclusive
-    program in partnership with ACM-W that exposes students to various opportunities that encourage connection,
-    skill building, as well as both personal and technical development. Everone under this program will
-    get paired with student-mentors, called Buddies , who will be there to help students prepare for
-    their successful journeys through the tech industry.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.icpc} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-orange brand-em"
-      >Intercollegiate Competitive Programming Competition</span
-    >
-    is a contest to challenge students on their algorithms and problem solving skills. The
-    <span class="brand-orange brand-em">ICPC</span> Team is dedicated to preparing students for the competition
-    by hosting weekly practice sessions and mock contests.
-  </p>
-</TeamSection>
-
-<TeamSection info={TEAMS.oss} term={VISIBLE_TERMS[$termIndex]}>
-  <p slot="content" class="size-md">
-    The <span class="brand-turquoise brand-em">open source software</span> team is committed to
-    fostering collaboration and innovation in the tech community.
-    <span class="brand-turquoise brand-em">OSS</span> actively contributes to ACM open source projects,
-    sharing their expertise and driving advancements in software development.
-  </p>
-</TeamSection>
-
-<Spacing --min="100px" --med="125px" --max="125px" />
-
-<style>
-  p {
-    align-self: start;
-  }
-
-  section {
-    display: grid;
-  }
-
-  section .hero-inner-container {
-    display: grid;
-    grid-template-columns: 1fr;
-    align-items: center;
-    gap: 1em;
-    max-width: 1000px;
-  }
-
-  section .hero-inner-container .hero-text {
-    display: grid;
-    align-items: center;
-    text-align: center;
-  }
-
-  section .hero-inner-container .hero-text p {
-    margin: 0.5em;
-    font-size: var(--size-md);
-  }
-
-  section .hero-inner-container img {
-    max-width: clamp(20rem, 17.342rem + 10.13vw, 30rem);
-    justify-self: center;
-  }
-
-  @media screen and (min-width: 1000px) {
-    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: 1em;
-    }
-
-    section .hero-inner-container .hero-text {
-      text-align: start;
-      gap: 1em;
-    }
-
-    section .hero-inner-container .hero-text p {
-      margin: 0;
-    }
-  }
-</style>
diff --git a/src/routes/(site)/6/teams/team-section.svelte b/src/routes/(site)/6/teams/team-section.svelte
deleted file mode 100644
index 0592b29ba..000000000
--- a/src/routes/(site)/6/teams/team-section.svelte
+++ /dev/null
@@ -1,336 +0,0 @@
-<script lang="ts">
-  import type { Team } from '$lib/public/board/types';
-  import { OFFICERS_JSON } from '$lib/public/board/data';
-  import { Term, getMembers } from '$lib/public/board';
-  import DiamondPicture from './diamond-picture.svelte';
-  import Members from './members.svelte';
-
-  export let info: Team;
-  export let term: Term;
-
-  $: members = getMembers(OFFICERS_JSON, term, info?.tiers ?? []);
-
-  const permanentTeamIDs = ['general', 'icpc', 'oss'];
-  const oldTerms = [Term.Fall21, Term.Spring21, Term.Spring22];
-  const nodebudsTerms = [...oldTerms];
-  const gamedevTerms = [Term.Fall23, Term.Spring23];
-  $: skip =
-    (members.length === 0 && !permanentTeamIDs.includes(info?.id)) ||
-    (info?.id === 'nodebuds' && !nodebudsTerms.includes(term)) ||
-    (info?.id === 'gamedev' && !gamedevTerms.includes(term));
-</script>
-
-{#if !skip}
-  <div class="container">
-    <section
-      id={info.id}
-      class:marketing-animation={info.id === 'marketing'}
-      class:algo-animation={info.id === 'algo'}
-      class:design-animation={info.id === 'design'}
-      class:dev-animation={info.id === 'dev'}
-      class:ai-animation={info.id === 'ai'}
-      class:oss-animation={info.id === 'oss'}
-      class:nodebuds-animation={info.id === 'nodebuds'}
-      class:icpc-animation={info.id === 'icpc'}
-      class:special-events-animation={info.id === 'special-events'}
-      class:gamedev-animation={info.id === 'gamedev'}
-    >
-      {#if info.id === 'general'}
-        <DiamondPicture
-          src="https://cdn.discordapp.com/icons/710225099923521558/a_f72bf9caa196d84a44ff40cdfd3f8d9a.gif?size=1024"
-          reducedMotionSrc={info.logoSrc}
-          altSrc="General Picture"
-        />
-      {:else}
-        <img
-          src={oldTerms.includes(term) ? info.oldLogoSrc ?? info.logoSrc : info.logoSrc}
-          alt={`${info.title} Team Logo`}
-        />
-      {/if}
-
-      <div class="team-description">
-        <h2>
-          <span class="headers size-lg brand-em">
-            <span style:--font-color={info.color} class="team-title">{info.title}</span>
-            Team
-          </span>
-        </h2>
-        <slot name="content" />
-      </div>
-    </section>
-
-    <Members data={{ members, term, team: info }} />
-  </div>
-{/if}
-
-<style>
-  .container {
-    display: grid;
-  }
-
-  section {
-    display: grid;
-    grid-template-columns: 1fr;
-    margin: 0 1rem;
-    scroll-margin-top: 100px;
-  }
-
-  section img {
-    max-width: clamp(20rem, 17.342rem + 10.13vw, 30rem);
-    justify-self: center;
-  }
-
-  section .team-title {
-    color: var(--font-color, var(--acm-dark));
-  }
-
-  section .team-description {
-    display: grid;
-    align-items: center;
-    text-align: center;
-  }
-
-  .marketing-animation img {
-    animation-duration: 2s;
-    animation-name: portrait-rotate;
-    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  @keyframes portrait-rotate {
-    from {
-      transform: rotate(0);
-    }
-    to {
-      transform: rotate(-90deg);
-    }
-  }
-
-  .algo-animation img {
-    animation-duration: 0.7s;
-    animation-name: bounce;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  @keyframes bounce {
-    from {
-      transform: translateY(0);
-    }
-    to {
-      transform: translateY(-0.5rem);
-    }
-  }
-
-  .design-animation img {
-    animation-duration: 2.8s;
-    animation-timing-function: cubic-bezier(0.425, 0.145, 0.515, 0.955);
-    animation-name: flip;
-    animation-iteration-count: infinite;
-    animation-direction: normal;
-  }
-
-  @keyframes flip {
-    from {
-      transform: rotateX(0deg);
-    }
-    to {
-      transform: rotateX(-360deg);
-    }
-  }
-
-  .icpc-animation img {
-    animation-duration: 3s;
-    animation-timing-function: cubic-bezier(0.425, 0.145, 0.515, 0.955);
-    animation-name: rotate;
-    animation-iteration-count: infinite;
-    animation-direction: normal;
-  }
-
-  @keyframes rotate {
-    from {
-      transform: rotateY(0deg);
-    }
-    to {
-      transform: rotateY(-360deg);
-    }
-  }
-
-  .dev-animation img {
-    animation-duration: 3s;
-    animation-name: spin;
-    animation-iteration-count: infinite;
-    animation-direction: normal;
-  }
-
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  .ai-animation img {
-    animation-duration: 1s;
-    animation-name: tilt;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  @keyframes tilt {
-    from {
-      transform: rotate(-30deg);
-    }
-    to {
-      transform: rotate(30deg);
-    }
-  }
-
-  .gamedev-animation img {
-    --rumble: 5;
-    animation-duration: 1s;
-    animation-name: rumble;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  @keyframes rumble {
-    10% {
-      transform: translate(calc(1px * var(--rumble)), calc(1px * var(--rumble)));
-    }
-    20% {
-      transform: translate(calc(-1px * var(--rumble)), calc(-2px * var(--rumble)));
-    }
-    30% {
-      transform: translate(calc(-3px * var(--rumble)), calc(0px * var(--rumble)));
-    }
-    40% {
-      transform: translate(calc(3px * var(--rumble)), calc(2px * var(--rumble)));
-    }
-    50% {
-      transform: translate(calc(1px * var(--rumble)), calc(-1px * var(--rumble)));
-    }
-    100% {
-      transform: translate(0px, 0px);
-    }
-  }
-
-  .oss-animation img {
-    animation-duration: 0.42069s;
-    animation-name: thrust;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-  }
-
-  @keyframes thrust {
-    0% {
-      transform: translate(1px, 1px) rotate(-10deg);
-    }
-    10% {
-      transform: translate(-1px, -2px) rotate(-8deg);
-    }
-    20% {
-      transform: translate(-3px, 0px) rotate(-6deg);
-    }
-    30% {
-      transform: translate(3px, 2px) rotate(-4deg);
-    }
-    40% {
-      transform: translate(1px, -1px) rotate(-2deg);
-    }
-    50% {
-      transform: translate(-1px, 2px) rotate(0deg);
-    }
-    60% {
-      transform: translate(-3px, 1px) rotate(2deg);
-    }
-    70% {
-      transform: translate(3px, 1px) rotate(4deg);
-    }
-    80% {
-      transform: translate(-1px, -1px) rotate(6deg);
-    }
-    90% {
-      transform: translate(1px, 2px) rotate(8deg);
-    }
-    100% {
-      transform: translate(1px, -2px) rotate(10deg);
-    }
-  }
-
-  .special-events-animation img {
-    animation-duration: 1.8s;
-    animation-name: slide;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-    position: relative;
-  }
-
-  .nodebuds-animation img {
-    animation-duration: 1.8s;
-    animation-name: slide;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-    position: relative;
-  }
-
-  @keyframes slide {
-    0% {
-      left: -60px;
-      top: 0px;
-    }
-
-    100% {
-      left: 15px;
-      top: 0px;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    /* Stops team logo animations when reduced animation is on :) */
-    .ai-animation img,
-    .algo-animation img,
-    .marketing-animation img,
-    .design-animation img,
-    .dev-animation img,
-    .nodebuds-animation img,
-    .icpc-animation img,
-    .special-events-animation img,
-    .oss-animation img {
-      animation: none;
-    }
-  }
-
-  @media screen and (min-width: 1000px) {
-    section {
-      grid-template-columns: 1fr 2fr;
-      justify-self: center;
-      width: 1064px;
-      gap: 2rem;
-      margin: 0 32px;
-    }
-
-    section img {
-      margin-left: -32px;
-      width: 350px;
-    }
-
-    section .team-description {
-      text-align: left;
-    }
-
-    section .team-description h2 {
-      align-self: end;
-    }
-
-    :nth-child(even) section {
-      grid-template-columns: 2fr 1fr;
-    }
-    :nth-child(even) .team-description {
-      order: -1;
-    }
-  }
-</style>
diff --git a/src/routes/(site)/6/blog.svelte b/src/routes/(site)/blog.svelte
similarity index 100%
rename from src/routes/(site)/6/blog.svelte
rename to src/routes/(site)/blog.svelte
diff --git a/src/routes/(site)/6/desc.svelte b/src/routes/(site)/desc.svelte
similarity index 100%
rename from src/routes/(site)/6/desc.svelte
rename to src/routes/(site)/desc.svelte
diff --git a/src/routes/(site)/hero.svelte b/src/routes/(site)/hero.svelte
index e85e389be..370d8e532 100644
--- a/src/routes/(site)/hero.svelte
+++ b/src/routes/(site)/hero.svelte
@@ -2,76 +2,97 @@
   import AcmButton from '$lib/components/button/button.svelte';
 </script>
 
-<section>
-  <div class="container">
-    <div class="left">
+<section class="hero-container">
+  <div class="hero-inner-container">
+    <div class="hero-text">
       <h1 class="brand-header size-xl">
-        We are the largest computer science community at
-        <b class="acm-blue">CSUF</b>
+        <span>We are the largest</span> <span class="multicolor-text">Computer Science</span>
+        <span>community at CSUF</span>
       </h1>
-
-      <AcmButton text="Join us today!" link="/discord" redirect={true} />
+      <div class="join-button">
+        <AcmButton text="Join today!" link="/discord" redirect={true} />
+      </div>
     </div>
 
-    <img
-      src="assets/hero-photo.png"
-      alt="Chip the Capybara holding a flag that says 'I Love ACM'"
-    />
+    <img src="/assets/capy-power.svg" alt="Chip the Capybara surrounded by all ACM Team badges" />
   </div>
 </section>
 
-<style lang="scss">
+<style>
   section {
-    display: flex;
-    justify-content: center;
+    display: grid;
+  }
+
+  section .hero-inner-container {
+    display: grid;
+    grid-template-columns: 1fr;
     align-items: center;
+    gap: 1em;
+  }
 
-    .container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 16px;
-      width: 1280px;
+  section .hero-inner-container .hero-text {
+    display: grid;
+    align-items: center;
+    text-align: center;
+    gap: 1em;
+  }
 
-      .left {
-        display: flex;
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 64px;
+  section .hero-inner-container .hero-text span {
+    display: block;
+  }
 
-        h1 {
-          max-width: clamp(21.875rem, 18.8048rem + 17.5439vw, 46.875rem);
-        }
-      }
+  /* Since we gave a display block to the span elements within the h1, 
+   * each will cover the entire page width, causing issues with the 
+   * multicolor linear-gradient (covering the webpage width rather than 
+   * the actual text ONLY). Giving a display of inline-block to the span 
+   * containing the multicolor text resolved this issue.
+   */
+  section .hero-inner-container .hero-text span.multicolor-text {
+    display: inline-block;
+    background: linear-gradient(
+      to right,
+      var(--acm-turquoise),
+      var(--acm-blue),
+      var(--acm-bluer),
+      var(--acm-purple),
+      var(--acm-pink)
+    );
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+  }
 
-      img {
-        width: clamp(20rem, 17.342rem + 10.13vw, 30rem);
-        margin-left: 32px;
-        filter: drop-shadow(0 10px 40px rgba(44, 145, 198, 0.5));
-      }
-    }
+  section .hero-inner-container .hero-text .join-button {
+    display: grid;
+    justify-self: center;
+  }
+
+  section .hero-inner-container img {
+    max-width: 90%;
+    justify-self: center;
   }
 
-  @media screen and (max-width: 900px) {
-    section .container {
-      padding: 0 8px;
-      flex-direction: column-reverse;
+  @media screen and (min-width: 1000px) {
+    section {
+      display: grid;
+      place-items: center;
+      align-items: center;
+    }
 
-      .left {
-        align-items: center;
-        text-align: center;
-        gap: 32px;
+    section .hero-inner-container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      gap: 4em;
+    }
 
-        h1 {
-          font-size: var(--size-lg);
-        }
-      }
+    section .hero-inner-container .hero-text {
+      text-align: start;
+      margin: 2em;
+    }
 
-      img {
-        margin: 0;
-        padding-bottom: 64px;
-        filter: drop-shadow(0 6px 24px rgba(44, 145, 198, 0.5));
-      }
+    section .hero-inner-container .hero-text .join-button {
+      justify-self: start;
     }
   }
 </style>
diff --git a/src/routes/(site)/6/lucky.svelte b/src/routes/(site)/lucky.svelte
similarity index 100%
rename from src/routes/(site)/6/lucky.svelte
rename to src/routes/(site)/lucky.svelte
diff --git a/src/routes/(site)/6/teams.svelte b/src/routes/(site)/teams.svelte
similarity index 98%
rename from src/routes/(site)/6/teams.svelte
rename to src/routes/(site)/teams.svelte
index 37022c7b7..89441347c 100644
--- a/src/routes/(site)/6/teams.svelte
+++ b/src/routes/(site)/teams.svelte
@@ -29,7 +29,7 @@
       </div>
       <!--Dev Header-->
       <div class="hero-inner-container">
-        <img src="/assets/badges/dev-badge.svg" alt="Dev Team Badge" />
+        <img src="/assets/dev-logo.svg" alt="Dev Team Badge" />
         <div class="size-md brand-med hero-text">
           <span><span class="acm-bluer">Develop</span> semester long projects to show your mom</span
           >
diff --git a/src/routes/(site)/teams/+page.svelte b/src/routes/(site)/teams/+page.svelte
index e2a0f36a9..140fa21aa 100644
--- a/src/routes/(site)/teams/+page.svelte
+++ b/src/routes/(site)/teams/+page.svelte
@@ -1,65 +1,205 @@
 <script lang="ts">
-  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
   import { TEAMS } from '$lib/public/board/data';
+  import { VISIBLE_TERMS } from '$lib/public/board/data/terms';
+  import { termIndex } from '$lib/public/board/utils';
   import Spacing from '$lib/public/legacy/spacing.svelte';
-  import Block from '$lib/components/block/block.svelte';
   import TeamSection from './team-section.svelte';
-</script>
+  import Select from '$lib/components/select/select.svelte';
+
+  /**
+   * @param termCode ex: `F21`, `S22`, etc.
+   * @returns `"Fall 2021"`, `"Spring 2022"`, etc.
+   */
+  function formatTerm(termCode: string) {
+    const [termAbbr, yearDigit1, yearDigit2] = termCode.split('');
+    const termText = termAbbr === 'S' ? 'Spring' : 'Fall';
+    return `${termText} 20${yearDigit1}${yearDigit2}`;
+  }
 
-<svelte:head>
-  <title>Teams | ACM at CSUF</title>
-</svelte:head>
+  const formattedTerms = VISIBLE_TERMS.map(formatTerm);
+  let currentFormattedTerm = formattedTerms[$termIndex];
+  $: $termIndex = formattedTerms.indexOf(currentFormattedTerm);
+</script>
 
 <Spacing --min="175px" --med="200px" --max="200px" />
 
-<Block>
-  <h1 slot="headline" class="size-xl">Meet the Teams</h1>
-  <p slot="text" class="size-md">
-    Teams are committees that specialize in specific fields in the tech industry. We’ve designed the
-    teams to be gateways for students to explore new fields, develop new interests, and learn new
-    skills that will benefit them in the industry.
+<section class="hero-container">
+  <div class="hero-inner-container">
+    <div class="hero-text">
+      <h1 class="brand-header size-xl">Explore our teams</h1>
+      <p>
+        Our teams specialize in specific fields in the tech industry. We've designed the teams to be
+        gateways for students to explore new fields, develop new interests, and learn new skills
+        that will benefit them in the industry.
+      </p>
+      <div class="semester-button">
+        <Select bind:defaultValue={currentFormattedTerm} options={formattedTerms} />
+      </div>
+    </div>
+    <img src="/assets/capy-read.svg" alt="Chip the Capybara reading a book" />
+  </div>
+  <Spacing --min="100px" --med="125px" --max="125px" />
+</section>
+
+<TeamSection info={TEAMS.general} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The ACM <span class="brand-blue brand-em">general</span> team is a dynamic group of individuals
+    driving the success of our organization. ACM <span class="brand-blue brand-em">General</span>
+    manages operations, organizes events, and ensure the smooth functioning of ACM. They are the backbone
+    of our community, fostering collaboration and innovation among members.
+  </p>
+</TeamSection>
+
+<TeamSection info={TEAMS.marketing} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-blush brand-em">marketing</span> team has a strong passion towards
+    advertising and spreading word on all our ACM events.
+    <span class="brand-blush brand-em">Marketing</span> utilizes their expertise in digital strategies
+    and creative storytelling to display a welcoming environment to all students.
+  </p>
+</TeamSection>
+
+<TeamSection info={TEAMS.algo} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-purple brand-em">algorithm</span> team is dedicated to building
+    programming fundamentals within students. <span class="brand-purple brand-em">Algo</span> focuses
+    on mastering data structures and algorithms, enhancing problem solving abilities, and exploration
+    of competitive programming.
   </p>
-</Block>
+</TeamSection>
 
-<Spacing --min="100px" --med="175px" --max="200px" />
+<TeamSection info={TEAMS.design} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-pink brand-em">design</span> team is dedicated to emphasizing the
+    importance of product design and product management in the tech industry.
+    <span class="brand-pink brand-em">Design</span> focuses on educating students about design principles,
+    design tools, and the intricacies of conceptualization, development, and management of a product.
+  </p>
+</TeamSection>
 
-<TeamSection info={TEAMS.ai} textAlign={TextAlignment.RIGHT}>
+<TeamSection info={TEAMS.dev} term={VISIBLE_TERMS[$termIndex]}>
   <p slot="content" class="size-md">
-    This team is dedicated to providing accessible information about artificial intelligence and
-    machine learning to all. <span class="brand-emerald brand-em">AI</span> focuses on fun projects geared
-    towards beginners in the field.
+    The <span class="brand-bluer brand-em">development</span> team is dedicated to giving students
+    the opportunity to explore tech via hands-on projects and activities.
+    <span class="brand-bluer brand-em">Dev</span> focuses on introducing students to software development,
+    and the various tech stacks used in the industry.
   </p>
 </TeamSection>
 
-<Spacing --med="64px" />
+<TeamSection info={TEAMS.ai} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-emerald brand-em">artificial intelligence</span> team is dedicated to
+    providing accessible information about artificial intelligence and machine learning to all.
+    <span class="brand-emerald brand-em">AI</span> focuses on fun projects geared towards beginners in
+    the field.
+  </p>
+</TeamSection>
 
-<TeamSection info={TEAMS.algo} textAlign={TextAlignment.LEFT}>
+<TeamSection info={TEAMS['gamedev']} term={VISIBLE_TERMS[$termIndex]}>
   <p slot="content" class="size-md">
-    This team is dedicated to building programming fundamentals within students.
-    <span class="brand-purple brand-em">Algo</span> focuses on mastering data structures and algorithms,
-    enhancing problem solving abilities, and exploration of competitive programming.
+    The <span class="brand-red brand-em">game development</span> team is dedicated to teaching the
+    basics of programming in the gaming industry. <span class="brand-red brand-em">Gamedev</span> focuses
+    on educating students about design principles, design tools, and the development process of a project.
   </p>
 </TeamSection>
 
-<Spacing --med="64px" />
+<TeamSection info={TEAMS['special-events']} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-lemon brand-em">special events</span> team is all about creating
+    unforgettable moments and experiences. <span class="brand-lemon brand-em">Special Events</span> plan
+    and execute ex citing events that bring our community together, fostering connections and celebrating
+    shared passions.
+  </p>
+</TeamSection>
 
-<TeamSection info={TEAMS.design} textAlign={TextAlignment.RIGHT}>
+<TeamSection info={TEAMS.nodebuds} term={VISIBLE_TERMS[$termIndex]}>
   <p slot="content" class="size-md">
-    This team is dedicated to emphasizing the importance of product design and product management in
-    the tech industry. <span class="brand-pink brand-em">Design</span> focuses on educating students
-    about design principles, design tools, and the intricacies of conceptualization, development, and
-    management of a product.
+    Personalized for your success, <span class="brand-red brand-em">node buds</span> is our exclusive
+    program in partnership with ACM-W that exposes students to various opportunities that encourage connection,
+    skill building, as well as both personal and technical development. Everone under this program will
+    get paired with student-mentors, called Buddies , who will be there to help students prepare for
+    their successful journeys through the tech industry.
   </p>
 </TeamSection>
 
-<Spacing --med="64px" />
+<TeamSection info={TEAMS.icpc} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-orange brand-em"
+      >Intercollegiate Competitive Programming Competition</span
+    >
+    is a contest to challenge students on their algorithms and problem solving skills. The
+    <span class="brand-orange brand-em">ICPC</span> Team is dedicated to preparing students for the competition
+    by hosting weekly practice sessions and mock contests.
+  </p>
+</TeamSection>
 
-<TeamSection info={TEAMS.dev} textAlign={TextAlignment.LEFT}>
+<TeamSection info={TEAMS.oss} term={VISIBLE_TERMS[$termIndex]}>
   <p slot="content" class="size-md">
-    This team is dedicated to giving students the opportunity to explore tech via hands-on projects
-    and activities. <span class="brand-em brand-bluer">Dev</span> focuses on introducing students to
-    software development, and the various tech stacks used in the industry.
+    The <span class="brand-turquoise brand-em">open source software</span> team is committed to
+    fostering collaboration and innovation in the tech community.
+    <span class="brand-turquoise brand-em">OSS</span> actively contributes to ACM open source projects,
+    sharing their expertise and driving advancements in software development.
   </p>
 </TeamSection>
 
-<Spacing --min="40px" --med="95px" --max="120px" />
+<Spacing --min="100px" --med="125px" --max="125px" />
+
+<style>
+  p {
+    align-self: start;
+  }
+
+  section {
+    display: grid;
+  }
+
+  section .hero-inner-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: center;
+    gap: 1em;
+    max-width: 1000px;
+  }
+
+  section .hero-inner-container .hero-text {
+    display: grid;
+    align-items: center;
+    text-align: center;
+  }
+
+  section .hero-inner-container .hero-text p {
+    margin: 0.5em;
+    font-size: var(--size-md);
+  }
+
+  section .hero-inner-container img {
+    max-width: clamp(20rem, 17.342rem + 10.13vw, 30rem);
+    justify-self: center;
+  }
+
+  @media screen and (min-width: 1000px) {
+    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: 1em;
+    }
+
+    section .hero-inner-container .hero-text {
+      text-align: start;
+      gap: 1em;
+    }
+
+    section .hero-inner-container .hero-text p {
+      margin: 0;
+    }
+  }
+</style>
diff --git a/src/routes/(site)/6/teams/diamond-picture.svelte b/src/routes/(site)/teams/diamond-picture.svelte
similarity index 100%
rename from src/routes/(site)/6/teams/diamond-picture.svelte
rename to src/routes/(site)/teams/diamond-picture.svelte
diff --git a/src/routes/(site)/6/teams/members.svelte b/src/routes/(site)/teams/members.svelte
similarity index 92%
rename from src/routes/(site)/6/teams/members.svelte
rename to src/routes/(site)/teams/members.svelte
index a9e6fedf2..b204b1232 100644
--- a/src/routes/(site)/6/teams/members.svelte
+++ b/src/routes/(site)/teams/members.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Officer, Term, Team } from '$lib/public/board';
-  import OfficerProfile from '../../about/officer-profile.svelte';
+  import OfficerProfile from '../about/officer-profile.svelte';
 
   export let data: { members: Officer[]; term: Term; team: Team };
 </script>
diff --git a/src/routes/(site)/teams/team-section.svelte b/src/routes/(site)/teams/team-section.svelte
index 46d0758b5..0592b29ba 100644
--- a/src/routes/(site)/teams/team-section.svelte
+++ b/src/routes/(site)/teams/team-section.svelte
@@ -1,91 +1,336 @@
 <script lang="ts">
   import type { Team } from '$lib/public/board/types';
-  import { TextAlignment } from '$lib/public/text-alignment/text-alignment';
+  import { OFFICERS_JSON } from '$lib/public/board/data';
+  import { Term, getMembers } from '$lib/public/board';
+  import DiamondPicture from './diamond-picture.svelte';
+  import Members from './members.svelte';
 
-  export let textAlign: TextAlignment = TextAlignment.RIGHT;
-  export let info: Team | undefined;
+  export let info: Team;
+  export let term: Term;
+
+  $: members = getMembers(OFFICERS_JSON, term, info?.tiers ?? []);
+
+  const permanentTeamIDs = ['general', 'icpc', 'oss'];
+  const oldTerms = [Term.Fall21, Term.Spring21, Term.Spring22];
+  const nodebudsTerms = [...oldTerms];
+  const gamedevTerms = [Term.Fall23, Term.Spring23];
+  $: skip =
+    (members.length === 0 && !permanentTeamIDs.includes(info?.id)) ||
+    (info?.id === 'nodebuds' && !nodebudsTerms.includes(term)) ||
+    (info?.id === 'gamedev' && !gamedevTerms.includes(term));
 </script>
 
-<div class="container">
-  {#if info !== undefined}
-    <section id={info.id} class:👈={textAlign === TextAlignment.LEFT}>
-      <img src={info.logoSrc} alt={`acm${info.title} Logo`} />
-      <div>
+{#if !skip}
+  <div class="container">
+    <section
+      id={info.id}
+      class:marketing-animation={info.id === 'marketing'}
+      class:algo-animation={info.id === 'algo'}
+      class:design-animation={info.id === 'design'}
+      class:dev-animation={info.id === 'dev'}
+      class:ai-animation={info.id === 'ai'}
+      class:oss-animation={info.id === 'oss'}
+      class:nodebuds-animation={info.id === 'nodebuds'}
+      class:icpc-animation={info.id === 'icpc'}
+      class:special-events-animation={info.id === 'special-events'}
+      class:gamedev-animation={info.id === 'gamedev'}
+    >
+      {#if info.id === 'general'}
+        <DiamondPicture
+          src="https://cdn.discordapp.com/icons/710225099923521558/a_f72bf9caa196d84a44ff40cdfd3f8d9a.gif?size=1024"
+          reducedMotionSrc={info.logoSrc}
+          altSrc="General Picture"
+        />
+      {:else}
+        <img
+          src={oldTerms.includes(term) ? info.oldLogoSrc ?? info.logoSrc : info.logoSrc}
+          alt={`${info.title} Team Logo`}
+        />
+      {/if}
+
+      <div class="team-description">
         <h2>
-          <span class="headers size-lg">
-            <span style:--font-color={info.color}>
-              <span class="brand-em">{info.title}</span>
-            </span>
-            <span class="brand-em">Team</span>
+          <span class="headers size-lg brand-em">
+            <span style:--font-color={info.color} class="team-title">{info.title}</span>
+            Team
           </span>
         </h2>
-        <slot name="content" tag="p" />
+        <slot name="content" />
       </div>
     </section>
-  {/if}
-</div>
 
-<style lang="scss">
+    <Members data={{ members, term, team: info }} />
+  </div>
+{/if}
+
+<style>
   .container {
-    display: flex;
-    justify-content: center;
+    display: grid;
   }
 
   section {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 1064px;
-    margin: 0 32px;
-    scroll-margin-top: 4rem;
+    display: grid;
+    grid-template-columns: 1fr;
+    margin: 0 1rem;
+    scroll-margin-top: 100px;
   }
 
   section img {
-    margin-left: -32px;
-    width: 350px;
+    max-width: clamp(20rem, 17.342rem + 10.13vw, 30rem);
+    justify-self: center;
+  }
+
+  section .team-title {
+    color: var(--font-color, var(--acm-dark));
+  }
+
+  section .team-description {
+    display: grid;
+    align-items: center;
+    text-align: center;
+  }
+
+  .marketing-animation img {
+    animation-duration: 2s;
+    animation-name: portrait-rotate;
+    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+
+  @keyframes portrait-rotate {
+    from {
+      transform: rotate(0);
+    }
+    to {
+      transform: rotate(-90deg);
+    }
+  }
+
+  .algo-animation img {
+    animation-duration: 0.7s;
+    animation-name: bounce;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+
+  @keyframes bounce {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(-0.5rem);
+    }
+  }
+
+  .design-animation img {
+    animation-duration: 2.8s;
+    animation-timing-function: cubic-bezier(0.425, 0.145, 0.515, 0.955);
+    animation-name: flip;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+  }
+
+  @keyframes flip {
+    from {
+      transform: rotateX(0deg);
+    }
+    to {
+      transform: rotateX(-360deg);
+    }
+  }
+
+  .icpc-animation img {
+    animation-duration: 3s;
+    animation-timing-function: cubic-bezier(0.425, 0.145, 0.515, 0.955);
+    animation-name: rotate;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotateY(0deg);
+    }
+    to {
+      transform: rotateY(-360deg);
+    }
+  }
+
+  .dev-animation img {
+    animation-duration: 3s;
+    animation-name: spin;
+    animation-iteration-count: infinite;
+    animation-direction: normal;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .ai-animation img {
+    animation-duration: 1s;
+    animation-name: tilt;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+
+  @keyframes tilt {
+    from {
+      transform: rotate(-30deg);
+    }
+    to {
+      transform: rotate(30deg);
+    }
   }
 
-  section div {
-    text-align: right;
-    max-width: 650px;
+  .gamedev-animation img {
+    --rumble: 5;
+    animation-duration: 1s;
+    animation-name: rumble;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
   }
 
-  section div h2 {
-    padding-bottom: 16px;
+  @keyframes rumble {
+    10% {
+      transform: translate(calc(1px * var(--rumble)), calc(1px * var(--rumble)));
+    }
+    20% {
+      transform: translate(calc(-1px * var(--rumble)), calc(-2px * var(--rumble)));
+    }
+    30% {
+      transform: translate(calc(-3px * var(--rumble)), calc(0px * var(--rumble)));
+    }
+    40% {
+      transform: translate(calc(3px * var(--rumble)), calc(2px * var(--rumble)));
+    }
+    50% {
+      transform: translate(calc(1px * var(--rumble)), calc(-1px * var(--rumble)));
+    }
+    100% {
+      transform: translate(0px, 0px);
+    }
+  }
+
+  .oss-animation img {
+    animation-duration: 0.42069s;
+    animation-name: thrust;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+  }
+
+  @keyframes thrust {
+    0% {
+      transform: translate(1px, 1px) rotate(-10deg);
+    }
+    10% {
+      transform: translate(-1px, -2px) rotate(-8deg);
+    }
+    20% {
+      transform: translate(-3px, 0px) rotate(-6deg);
+    }
+    30% {
+      transform: translate(3px, 2px) rotate(-4deg);
+    }
+    40% {
+      transform: translate(1px, -1px) rotate(-2deg);
+    }
+    50% {
+      transform: translate(-1px, 2px) rotate(0deg);
+    }
+    60% {
+      transform: translate(-3px, 1px) rotate(2deg);
+    }
+    70% {
+      transform: translate(3px, 1px) rotate(4deg);
+    }
+    80% {
+      transform: translate(-1px, -1px) rotate(6deg);
+    }
+    90% {
+      transform: translate(1px, 2px) rotate(8deg);
+    }
+    100% {
+      transform: translate(1px, -2px) rotate(10deg);
+    }
   }
 
-  section div h2 span span {
-    color: var(--font-color);
+  .special-events-animation img {
+    animation-duration: 1.8s;
+    animation-name: slide;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    position: relative;
   }
 
-  /* Left */
-  .👈 {
-    flex-direction: row-reverse;
+  .nodebuds-animation img {
+    animation-duration: 1.8s;
+    animation-name: slide;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    position: relative;
   }
 
-  .👈 div {
-    text-align: left;
+  @keyframes slide {
+    0% {
+      left: -60px;
+      top: 0px;
+    }
+
+    100% {
+      left: 15px;
+      top: 0px;
+    }
   }
 
-  .👈 img {
-    margin-right: -32px;
+  @media (prefers-reduced-motion: reduce) {
+    /* Stops team logo animations when reduced animation is on :) */
+    .ai-animation img,
+    .algo-animation img,
+    .marketing-animation img,
+    .design-animation img,
+    .dev-animation img,
+    .nodebuds-animation img,
+    .icpc-animation img,
+    .special-events-animation img,
+    .oss-animation img {
+      animation: none;
+    }
   }
 
-  @media (max-width: 900px) {
-    section,
-    .👈 {
-      flex-direction: column;
+  @media screen and (min-width: 1000px) {
+    section {
+      grid-template-columns: 1fr 2fr;
+      justify-self: center;
+      width: 1064px;
+      gap: 2rem;
+      margin: 0 32px;
     }
 
-    section div,
-    .👈 div {
-      text-align: center;
+    section img {
+      margin-left: -32px;
+      width: 350px;
     }
 
-    section img,
-    .👈 img {
-      margin: 0;
-      width: 200px;
+    section .team-description {
+      text-align: left;
+    }
+
+    section .team-description h2 {
+      align-self: end;
+    }
+
+    :nth-child(even) section {
+      grid-template-columns: 2fr 1fr;
+    }
+    :nth-child(even) .team-description {
+      order: -1;
     }
   }
 </style>
diff --git a/src/routes/(site)/6/testimony.svelte b/src/routes/(site)/testimony.svelte
similarity index 100%
rename from src/routes/(site)/6/testimony.svelte
rename to src/routes/(site)/testimony.svelte