diff --git a/public/assets/images/target-user_dark.webm b/public/assets/images/target-user_dark.webm new file mode 100644 index 0000000..195eace Binary files /dev/null and b/public/assets/images/target-user_dark.webm differ diff --git a/public/assets/images/target-user_light.webm b/public/assets/images/target-user_light.webm new file mode 100644 index 0000000..252241c Binary files /dev/null and b/public/assets/images/target-user_light.webm differ diff --git a/src/pages/index.astro b/src/pages/index.astro index f1f13e4..20cad43 100644 --- a/src/pages/index.astro +++ b/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"; ---
- + - + +
diff --git a/src/views/TargetUser/TargetUser.astro b/src/views/TargetUser/TargetUser.astro new file mode 100644 index 0000000..eb31794 --- /dev/null +++ b/src/views/TargetUser/TargetUser.astro @@ -0,0 +1,26 @@ +--- +import './TargetUser.scss'; +--- + +
+

Wir sind alle wichtig!

+

Jede:r kann Scrumlr nutzen und dadurch die Teamarbeit stärken.

+ + +
diff --git a/src/views/TargetUser/TargetUser.scss b/src/views/TargetUser/TargetUser.scss new file mode 100644 index 0000000..a9c2b2d --- /dev/null +++ b/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; + } +}