Added user research page

uradotdesign · Sep 24, 2024 · 705425b · 705425b
1 parent 5ddd764
commit 705425b
Show file tree

Hide file tree

Showing 12 changed files with 373 additions and 15 deletions.
diff --git a/assets/scss/_custom.scss b/assets/scss/_custom.scss
@@ -158,7 +158,7 @@ html[data-theme="dark"] {
     .d-lg-block.d-none.on-light {
       display: none !important;
     }
-  
+
     .d-lg-block.d-none.on-dark {
       display: none !important;
     }
@@ -185,7 +185,7 @@ body {
 
 @supports (font-variation-settings: normal) {
   body {
-    font-family: "InterVariable", sans-serif; 
+    font-family: "InterVariable", sans-serif;
     font-optical-sizing: auto;
   }
 }
@@ -799,6 +799,35 @@ article.first {
   }
 }
 
+.signup {
+  background-color: $blue-600;
+  color: $white;
+  padding: 4rem 5rem;
+
+  & a {
+    color: $blue-800;
+  }
+
+  & a.design {
+    color: $white;
+    border: 2px solid $white;
+    padding: 0.5rem 1.5rem;
+    background-color: transparent;
+    text-decoration: none;
+    transition: 0.25s ease-in-out;
+    display: inline-flex;
+    align-items: center;
+    font-weight: 500;
+
+    &:hover,
+    &:focus-visible,
+    &:focus {
+      color: $blue-500 !important;
+      background-color: $white;
+    }
+  }
+}
+
 address {
   margin-bottom: 0;
 }
@@ -1083,6 +1112,11 @@ details[open] summary svg {
   transform: rotate(180deg);
 }
 
+.faq details summary {
+  color: $gray-800;
+  font-weight: 600;
+}
+
 .circle-icons span {
   color: $blue-500;
   font-size: 1.25rem;
@@ -1507,6 +1541,35 @@ details[open] summary svg {
   margin-top: 1rem;
 }
 
+.research-card {
+  display: flex;
+  flex-direction: column;
+  background-color: $white;
+  padding: 2rem;
+  border: 1px solid $blue-200;
+  border-radius: 1rem;
+  height: 100%;
+
+  & p {
+    margin-bottom: 0;
+  }
+
+  & p:has(.inline-svg) {
+    margin-bottom: 0;
+    text-align: end;
+    margin-top: auto;
+  }
+
+  & .inline-svg {
+    height: 5em;
+    width: 5em;
+
+    & svg path {
+      fill: $blue-200;
+    }
+  }
+}
+
 .cta-card {
   background-color: $blue-500;
   color: $white;
@@ -1641,7 +1704,8 @@ details[open] summary svg {
   .copyright {
     font-size: 0.75rem;
   }
-  .schedule {
+  .schedule,
+  .signup {
     padding: 2rem;
   }
   article.first {
@@ -1710,13 +1774,12 @@ details[open] summary svg {
 // Clients
 .client {
   &-title {
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     line-height: 120%;
-    font-weight: 500;
-    margin-bottom: 0.5rem;
+    font-weight: 700;
+    margin-bottom: 0.25rem;
   }
   &-description {
-    font-size: 1.125rem;
     margin-bottom: 0;
   }
 }

diff --git a/content/de/research.md b/content/de/research.md
@@ -0,0 +1,5 @@
++++
+title = "User Research Panel"
+layout = "research"
+type = "research"
++++
diff --git a/content/en/research.md b/content/en/research.md
@@ -0,0 +1,5 @@
++++
+title = "User Research Panel"
+layout = "research"
+type = "research"
++++
diff --git a/i18n/de.toml b/i18n/de.toml
@@ -97,6 +97,36 @@ other = "Wir freuen uns über Bewerbungen von allen Open-Source-Tools, die sich
 [otfDetails]
 other = "Details über"
 
+# Research
+[researchLabel]
+other = "Join our research panel"
+[researchTitle]
+other = "Help us make Open Source easier to use"
+[researchSubtitle]
+other = "Become a part of our research panel and help make open source tools easier to use and more accessible for everyone."
+[signUp]
+other = "Sign up"
+[researchExamples]
+other = "Examples"
+[researchExamplesDescription]
+other = "People like you have helped us in the past on many projects, including some here."
+[researchersTitle]
+other = "Meet our Researchers"
+[researchersDescription]
+other = "Work with our user experience research team and help make our products better."
+[stillQuestions]
+other = "Still have questions?"
+[keyPlayer]
+other = "Become a key player in our mission to enhance open-source projects."
+[makeDifference]
+other = "Sign up now and start making a difference"
+[faq]
+other = "Frequently Asked Questions"
+[whatTest]
+other = "What Does It Mean to Be a Tester?"
+[whatDescription]
+other = "As a tester, you’ll play a crucial role in improving open-source projects. Here’s what you can expect."
+
 # Contact
 [getinTouch]
 other = "Kontakt aufnehmen"
@@ -116,6 +146,10 @@ other = "Wir sind auf"
 # Footer
 [letsTalk]
 other = "Lass uns reden"
+[getInvolved]
+other = "Werde Aktiv"
+[researchPanel]
+other = "Forschungspanel"
 
 # Works
 [allWorks]

diff --git a/i18n/en.toml b/i18n/en.toml
@@ -98,6 +98,36 @@ other = "We welcome applications from all open source tools dedicated to interne
 [otfDetails]
 other = "Details about"
 
+# Research
+[researchLabel]
+other = "Join our research panel"
+[researchTitle]
+other = "Help us make Open Source easier to use"
+[researchSubtitle]
+other = "Become a part of our research panel and help make open source tools easier to use and more accessible for everyone."
+[signUp]
+other = "Sign up"
+[researchExamples]
+other = "Examples"
+[researchExamplesDescription]
+other = "People like you have helped us in the past on many projects, including some here."
+[researchersTitle]
+other = "Meet our Researchers"
+[researchersDescription]
+other = "Work with our user experience research team and help make our products better."
+[stillQuestions]
+other = "Still have questions?"
+[keyPlayer]
+other = "Become a key player in our mission to enhance open-source projects."
+[makeDifference]
+other = "Sign up now and start making a difference"
+[faq]
+other = "Frequently Asked Questions"
+[whatTest]
+other = "What Does It Mean to Be a Tester?"
+[whatDescription]
+other = "As a tester, you’ll play a crucial role in improving open-source projects. Here’s what you can expect."
+
 # Contact
 [getinTouch]
 other = "Get in touch"
@@ -117,6 +147,10 @@ other = "We are on"
 # Footer
 [letsTalk]
 other = "Let's talk"
+[getInvolved]
+other = "Get involved"
+[researchPanel]
+other = "Research Panel"
 
 # Works
 [allWorks]