Target User (GIF) (#37)

Co-authored-by: Christian Reski <[email protected]>

src/pages/index.astro

@@ -4,17 +4,18 @@ import Choices from '../components/Choices';
 import { Uniqueness } from '../components/Uniqueness';
 import { Mobile } from '../components/Mobile';
 import Layout from '../layouts/Layout.astro';
-import {ReachNewHeights} from "../views/ReachNewHeights/ReachNewHeights";
+import TargetUser from '../views/TargetUser/TargetUser.astro';
 import {AboutUs} from "../views/AboutUs/AboutUs";
 ---
 
 <Layout title="scrumlr">
 	<main>
-    <ReachNewHeights />
+        <ReachNewHeights />
 		<Choices client:visible />
-		<AboutUs />
 		<Uniqueness client:idle />
 		<Mobile client:idle />
+        <TargetUser />
+		<AboutUs />
   </main>
 </Layout>
 

src/views/TargetUser/TargetUser.astro

@@ -0,0 +1,26 @@
+---
+import './TargetUser.scss';
+---
+
+<section class='target-user'>
+    <h2>Wir sind alle wichtig!</h2>
+    <p>Jede:r kann Scrumlr nutzen und dadurch die Teamarbeit stärken.</p>
+    <video 
+         autoplay 
+         loop 
+         muted 
+         playsinline
+         class='target-user__gif target-user__gif--light'
+     >
+        <source src='/assets/images/target-user_light.webm' type='video/webm' />
+    </video>
+    <video 
+         autoplay 
+         loop 
+         muted 
+         playsinline
+         class='target-user__gif target-user__gif--dark'
+    >
+        <source src='/assets/images/target-user_dark.webm' type='video/webm' />
+    </video>
+</section>

src/views/TargetUser/TargetUser.scss

@@ -0,0 +1,62 @@
+.target-user {
+  padding-top: 61px;
+  padding-bottom: 44px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  background-color: rgba(255, 0, 105, 0.02);
+  color: var(--black);
+
+  > h2 {
+    text-align: center;
+    font-size: 24px;
+    font-weight: 700;
+    line-height: normal;  
+    margin: 0;
+  }
+  > p {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+    margin: 0;
+  }
+  > video {
+    min-width: 310px;
+    width: 80vw;
+    max-width: 825px;
+  }
+}
+.target-user__gif--dark {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .target-user {
+    gap: 22px;
+
+    > h2 {
+      font-size: 40px;
+      line-height: 48px; /* 120% */
+    }
+    > p {
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 32px; /* 133.333% */
+    }
+  }
+}
+
+[theme='dark'] {
+  .target-user {
+    color: var(--white);
+    background-color: #1B2435;
+  }
+  .target-user__gif--light {
+    display: none;
+  }
+  .target-user__gif--dark {
+    display: block;
+  }
+}