Start landing-page

sos-lapsikyla · Nov 17, 2024 · b759e6b · b759e6b
1 parent 84209ba
commit b759e6b
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 1 deletion.
diff --git a/src/landing/index.html b/src/landing/index.html
@@ -0,0 +1,60 @@
+<!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>Kohtaa ihmisiä, jotka ovat olleet samassa tilanteessa. He tietävät, mistä puhut.</p>
+               <div class="card-buttons">
+                  <a class="button" href="../login/">Kirjaudu</a>
+                  <a class="button" href="../register/">Rekisteroidy</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="middle-illustration"></div>
+               </div>
+               <div class="middle-right-content">
+                  <h2>Mika Ylitse?</h2>
+                  <p class="white">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.</p>
+                  <h2>Mista voin jutella mentorin kanssa?</h2>
+                  <p class="white">
+                     Voit jutella vertaismentoreiden kanssa mistä tahansa mieltäsi painavasta asiasta.
+                  </p>
+                  <h2>Mita jos haluan kayttaa palvelua anonyymisti?</h2>
+                  <p class="white">
+                     Voit käyttää sovellusta nimettömästi. Valitse vain nimimerkki, josta sinua ei voi tunnistaa. Keskustelut mentoreiden kanssa ovat luottamuksellisia.
+                  </p>
+               </div>
+            </div>
+            <div class="middle-bottom-footer">
+               <p>Aloita palvelun kaytto rekisteroitymalla</p>
+               <a class="button" href="../register/">Rekisteroidy</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/styles.css b/src/landing/styles.css
@@ -0,0 +1,185 @@
+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;
+}
+
+.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 1rem 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/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/';
     }
   }
 

diff --git a/webpack.config.js b/webpack.config.js
@@ -80,6 +80,10 @@ module.exports = {
           from: 'register/**/*',
           context: path.resolve(__dirname, 'src'),
         },
+        {
+          from: 'landing/**/*',
+          context: path.resolve(__dirname, 'src'),
+        },
         {
           from: 'static/**/*',
           context: path.resolve(__dirname, 'src'),