From d965a17233d5053252658debfd02c05accd9615f Mon Sep 17 00:00:00 2001
From: Evan Jimenez <evanmji1123@csu.fullerton.edu>
Date: Tue, 21 Nov 2023 19:55:26 -0800
Subject: [PATCH] Design component (#974)

* Added Design team with placeholder text, along with logo flip animation

* changed design text a bit

* npm run all changed formatting

* Fixed tier in Spring 2022

* Fixed design team text color
---
 src/lib/public/board/data/officers.json       |  2 +-
 src/routes/(site)/6/teams/+page.svelte        |  6 ++++++
 src/routes/(site)/6/teams/team-section.svelte | 18 ++++++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/lib/public/board/data/officers.json b/src/lib/public/board/data/officers.json
index 2e0849d4..c5a1e36f 100644
--- a/src/lib/public/board/data/officers.json
+++ b/src/lib/public/board/data/officers.json
@@ -46,7 +46,7 @@
     "positions": {
       "S22": {
         "title": "Dev Project Manager",
-        "tier": 14
+        "tier": 18
       }
     }
   },
diff --git a/src/routes/(site)/6/teams/+page.svelte b/src/routes/(site)/6/teams/+page.svelte
index 1742f4b3..b7111c93 100644
--- a/src/routes/(site)/6/teams/+page.svelte
+++ b/src/routes/(site)/6/teams/+page.svelte
@@ -51,6 +51,12 @@
 <!-- TODO: Algo -->
 
 <!-- TODO: Design -->
+<TeamSection info={TEAMS.design} textAlign={TextAlignment.RIGHT} term={VISIBLE_TERMS[$termIndex]}>
+  <p slot="content" class="size-md">
+    The <span class="brand-pink brand-em">design</span> team is awesome :capycool:
+    <span class="brand-pink brand-em">Design</span> does more than just web dev :surreallick:
+  </p>
+</TeamSection>
 
 <TeamSection info={TEAMS.dev} textAlign={TextAlignment.RIGHT} term={VISIBLE_TERMS[$termIndex]}>
   <p slot="content" class="size-md">
diff --git a/src/routes/(site)/6/teams/team-section.svelte b/src/routes/(site)/6/teams/team-section.svelte
index d02d493b..f774d753 100644
--- a/src/routes/(site)/6/teams/team-section.svelte
+++ b/src/routes/(site)/6/teams/team-section.svelte
@@ -14,6 +14,7 @@
       id={info.id}
       class:align-right={textAlign === TextAlignment.RIGHT}
       class:marketing-animation={info.id === 'marketing'}
+      class:design-animation={info.id === 'design'}
       class:dev-animation={info.id === 'dev'}
       class:oss-animation={info.id === 'oss'}
     >
@@ -72,6 +73,23 @@
     }
   }
 
+  .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);
+    }
+  }
+
   .dev-animation img {
     animation-duration: 3s;
     animation-name: spin;