Merge pull request #163 from sos-lapsikyla/felix/landing

Start landing-page
sos-lapsikyla · Nov 19, 2024 · 7b3d90d · 7b3d90d
2 parents 84209ba + ca73617
commit 7b3d90d
Show file tree

Hide file tree

Showing 10 changed files with 372 additions and 16 deletions.
diff --git a/src/landing/index.html b/src/landing/index.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="fi">
+   <head>
+      <meta charset="utf-8" />
+      <title localization-key="pageTitle"></title>
+      <meta name="description" content="Ylitse MentorApp" />
+      <meta name="author" content="SOS Children's Villages Finland" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="stylesheet" href="../static/styles/normalize.css" />
+      <link rel="stylesheet" href="../static/styles/static-pages.css" />
+      <link rel="stylesheet" href="../static/styles/fonts.css" />
+      <link rel="stylesheet" href="styles.css" />
+   </head>
+   <body>
+      <main>
+         <div class="top-container">
+            <div class="card" >
+               <div class="ylitse-logo"></div>
+               <p localization-key="cardText"></p>
+               <div class="card-buttons">
+                  <a class="button" href="../login/" localization-key="loginButton"></a>
+                  <a class="button" href="../register/" localization-key="registerButton"></a>
+               </div>
+            </div>
+            <div class="art-jumbo-container"></div>
+         </div>
+         <div class="middle-container">
+            <div class="middle-card">
+               <div class="middle-left-content">
+                  <div class="info-ring">
+                     <p class="white" dynamic-localization-key="infoRing1"></p>
+                  </div>
+                  <div class="info-ring">
+                     <p class="white" dynamic-localization-key="infoRing2"></p>
+                  </div>
+                  <div class="middle-illustration"></div>
+               </div>
+               <div class="middle-right-content">
+                  <h2 localization-key="middleInfo1Heading"></h2>
+                  <p class="white" localization-key="middleInfo1Text"></p>
+                  <h2 localization-key="middleInfo2Heading"></h2>
+                  <p class="white" localization-key="middleInfo2Text"></p>
+                  <h2 localization-key="middleInfo3Heading"></h2>
+                  <p class="white" localization-key="middleInfo3Text"></p>
+               </div>
+            </div>
+            <div class="middle-bottom-footer">
+               <p localization-key="middleInfoFooter"></p>
+               <a class="button" href="../register/" localization-key="registerButton"></a>
+            </div>
+         </div>
+      </main>
+      <footer>
+         <p localization-key="footer">
+         </p>
+         <div class="footer-logo">
+         </div>
+      </footer>
+      <script src="index.js"></script>
+      <script src="../static/localization.js"></script>
+   </body>
+</html>
diff --git a/src/landing/index.js b/src/landing/index.js
@@ -0,0 +1,28 @@
+(async function (_window, document) {
+  const mentorsResponse = await fetch('/api/mentors').then(response =>
+    response.json(),
+  );
+  const mentorsAmount = mentorsResponse.resources.length;
+  const yearsOfService = new Date().getFullYear() - 2018;
+
+  const getInfoLocalizations = (mentorAmount, yearsOfService) => ({
+    en: {
+      infoRing1: `${mentorAmount} mentoria`,
+      infoRing2: `keskusteluja jo ${yearsOfService} vuotta`,
+    },
+    fi: {
+      infoRing1: `${mentorAmount} mentoria`,
+      infoRing2: `keskusteluja jo ${yearsOfService} vuotta`,
+    },
+  });
+
+  const infoLocalizations = getInfoLocalizations(mentorsAmount, yearsOfService);
+
+  for (const key of ['infoRing1', 'infoRing2']) {
+    const element = document.querySelector(
+      `[dynamic-localization-key="${key}"]`,
+    );
+    let translation = infoLocalizations['fi'][key];
+    element.innerText = translation;
+  }
+})(window, document);
diff --git a/src/landing/styles.css b/src/landing/styles.css
@@ -0,0 +1,200 @@
+html,
+body {
+  min-height: 100%;
+  background-color: #E4F3FB;
+}
+
+main {
+  display: flex;
+  flex-direction: column;
+}
+
+.top-container {
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+
+.card {
+  flex: 1;
+  background-color: #43BFFF;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  justify-content: center;
+  align-items: center;
+  padding: 0 6.25rem;
+}
+
+.ylitse-logo {
+  background: url(../static/img/ylitse-logo-mountain.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 12.5rem;
+  width: 100%;
+}
+
+.card-buttons {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.art-jumbo-container {
+  flex: 2;
+  background: url(../static/img/home-page-background.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 40rem;
+}
+
+p {
+  font-family: 'Baloo 2';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 35px;
+  margin: 0;
+  color: #1c325d;
+}
+
+.white {
+  color: #ffffff;
+}
+
+.button,
+button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 1.5rem;
+  line-height: 1.5rem;
+  white-space: nowrap;
+  border-radius: 1.75rem;
+  cursor: pointer;
+  box-sizing: border-box;
+  width: 12.5rem;
+  height: 3.5rem;
+  max-height: 3.5rem;
+  padding: 1rem 2rem;
+  font-family: 'Baloo 2';
+  text-decoration: none;
+  font-style: normal;
+  font-weight: 700;
+  align-self: center;
+  color: #F0BA8C; 
+  background-color: #4A2ACB;
+}
+
+.button:hover,
+button:hover {
+  background-color: #37119d;
+  outline: 0;
+}
+
+.button:focus,
+button:focus,
+.button:active,
+button:active,
+.button:target,
+button:target {
+  background-color: #4a2acb;
+  outline: #4a2acb solid 3px;
+  outline-offset: 4px;
+}
+
+.button:visited,
+button:visited {
+  background-color: #5c33ff;
+}
+
+.middle-container {
+  margin: 5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.middle-card {
+  background-color: #4A2ACB;
+  display: flex;
+  height: 40rem;
+  width: 100%;
+  border-radius: 1rem 1rem 0 0;
+}
+
+.middle-left-content {
+  flex: 1;
+  position: relative;
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 2rem;
+}
+
+.info-ring {
+ border: 6px blue solid;
+ width: 160px;
+ height: 160px;
+ border-radius: 50%;
+ border-color: #ffffff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+}
+
+.middle-illustration {
+  background: url(../static/img/ylitse-middle-illustration.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 28rem;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+}
+
+.middle-right-content {
+  flex: 1;
+  padding: 0 2rem 0 0;
+}
+
+.middle-bottom-footer {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  align-items: center;
+  background-color: #43BFFF;
+  border-radius: 0 0 1rem 1rem;
+  padding: 1rem 0;
+}
+
+h2 {
+  font-family: 'Baloo 2';
+  font-style: normal;
+  font-weight: 600;
+  font-size: 26px;
+  line-height: 42px;
+  margin: 0;
+  margin-top: 30px;
+  color: #ffffff;
+}
+
+footer {
+  background-color: #01A5EC; 
+  color: #1C325D;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin: 0;
+}
+
+.footer-logo {
+  background: url(../static/img/footer-logo.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 11rem;
+  height: 2.5rem;
+}
diff --git a/src/static/img/ylitse-logo-mountain.svg b/src/static/img/ylitse-logo-mountain.svg
diff --git a/src/static/img/ylitse-middle-illustration.svg b/src/static/img/ylitse-middle-illustration.svg
diff --git a/src/static/locales/en/landing.json b/src/static/locales/en/landing.json
@@ -0,0 +1,14 @@
+{
+  "cardText": "Kohtaa ihmisiä, jotka ovat olleet samassa tilanteessa. He tietävät, mistä puhut.",
+  "footer": "Provided by",
+  "loginButton": "Login",
+  "middleInfo1Heading": "Mika Ylitse?",
+  "middleInfo1Text": "Maksuttomassa Ylitse-palvelussa SOS-Lapsikylän valmentamat mentorit auttavat sinua henkilökohtaisessa tilanteessasi luottamuksellisesti — saat apua ajasta ja paikasta riippumatta. Vertaismentori voi olla sinulle juttukaveri, opastaja, ymmärtävä kuuntelija tai sparraaja elämän erilaisissa tilanteissa.",
+  "middleInfo2Heading": "Mista voin jutella mentorin kanssa?",
+  "middleInfo2Text": "Voit jutella vertaismentoreiden kanssa mistä tahansa mieltäsi painavasta asiasta.",
+  "middleInfo3Heading": "Mita jos haluan kayttaa palvelua anonyymisti",
+  "middleInfo3Text": "Voit käyttää sovellusta nimettömästi. Valitse vain nimimerkki, josta sinua ei voi tunnistaa. Keskustelut mentoreiden kanssa ovat luottamuksellisia.",
+  "middleInfoFooter": "Aloita palvelun kaytto rekisteroitymalla",
+  "pageTitle": "Ylitse MentorApp",
+  "registerButton": "Register"
+}
diff --git a/src/static/locales/fi/landing.json b/src/static/locales/fi/landing.json
@@ -0,0 +1,14 @@
+{
+  "cardText": "Kohtaa ihmisiä, jotka ovat olleet samassa tilanteessa. He tietävät, mistä puhut.",
+  "footer": "Palvelun tarjoaa",
+  "loginButton": "Kirjaudu",
+  "middleInfo1Heading": "Mika Ylitse?",
+  "middleInfo1Text": "Maksuttomassa Ylitse-palvelussa SOS-Lapsikylän valmentamat mentorit auttavat sinua henkilökohtaisessa tilanteessasi luottamuksellisesti — saat apua ajasta ja paikasta riippumatta. Vertaismentori voi olla sinulle juttukaveri, opastaja, ymmärtävä kuuntelija tai sparraaja elämän erilaisissa tilanteissa.",
+  "middleInfo2Heading": "Mista voin jutella mentorin kanssa?",
+  "middleInfo2Text": "Voit jutella vertaismentoreiden kanssa mistä tahansa mieltäsi painavasta asiasta.",
+  "middleInfo3Heading": "Mita jos haluan kayttaa palvelua anonyymisti",
+  "middleInfo3Text": "Voit käyttää sovellusta nimettömästi. Valitse vain nimimerkki, josta sinua ei voi tunnistaa. Keskustelut mentoreiden kanssa ovat luottamuksellisia.",
+  "middleInfoFooter": "Aloita palvelun kaytto rekisteroitymalla",
+  "pageTitle": "Ylitse MentorApp",
+  "registerButton": "Rekisteroidy"
+}
diff --git a/src/static/localization.js b/src/static/localization.js
@@ -1,8 +1,18 @@
 (function (document) {
-  const page = window.location.toString().includes('login')
-    ? 'login'
-    : 'register';
-
+  const getPage = path => {
+    switch (path) {
+      case '/login/': {
+        return 'login';
+      }
+      case '/register/': {
+        return 'register';
+      }
+      default: {
+        return 'landing';
+      }
+    }
+  };
+  const page = getPage(window.location.pathname);
   let translations = {};
 
   const enButton = document.getElementById('en-button');
@@ -25,9 +35,11 @@
   };
 
   const styleButton = (button, color, fontWeight, pointerEvents) => {
-    button.style.color = color;
-    button.style.fontWeight = fontWeight;
-    button.style.pointerEvents = pointerEvents;
+    if (button) {
+      button.style.color = color;
+      button.style.fontWeight = fontWeight;
+      button.style.pointerEvents = pointerEvents;
+    }
   };
 
   const showClass = className =>
@@ -71,13 +83,17 @@
     setLocale('fi');
   });
 
-  enButton.onclick = event => {
-    event.preventDefault();
-    setLocale('en');
-  };
+  if (enButton) {
+    enButton.onclick = event => {
+      event.preventDefault();
+      setLocale('en');
+    };
+  }
 
-  fiButton.onclick = event => {
-    event.preventDefault();
-    setLocale('fi');
-  };
+  if (fiButton) {
+    fiButton.onclick = event => {
+      event.preventDefault();
+      setLocale('fi');
+    };
+  }
 })(document);
diff --git a/src/utils/http.ts b/src/utils/http.ts
@@ -60,7 +60,7 @@ export const refreshingBaseQuery: BaseQueryFn<
       return await baseQuery(args, api, extraOptions);
     } else {
       // if refresh fail, logout
-      window.location.href = '/login/';
+      window.location.href = '/landing/';
     }
   }