Change landing page title (#2681)

Author: lmuntaner

src/frontend/src/components/landingPage.json

@@ -1,6 +1,7 @@
 {
   "en": {
-    "title": "Identity that's private and decentralized.",
+    "title_1": "Decentralized.",
+    "title_2": "Private. Identity.",
     "subtitle": "Since 2021, Internet Identity has combined secure passkey technology with the Internet Computer to keep you safe."
   }
 }

src/frontend/src/components/landingPage.ts

@@ -35,7 +35,10 @@ export const landingPage = ({
       </section>
       <section class="c-landingPage__left" aria-label="Action Pane">
         <div class="c-landingPage__left__content">
-          <h1 class="c-landingPage__title">${copy.title}</h1>
+          <h1 class="c-landingPage__title">
+            <span>${copy.title_1}</span>
+            <span>${copy.title_2}</span>
+          </h1>
           <p class="t-paragraph">${copy.subtitle}</p>
         </div>
         <div class="c-landingPage__left__footer">

src/frontend/src/styles/main.css

@@ -995,6 +995,12 @@ a:hover,
   font-size: var(--rs-split-page-title);
   font-weight: 600;
   line-height: 1.1;
+
+  display: flex;
+  flex-direction: column;
+
+  /* We don't want to break the lines of the title */
+  white-space: nowrap;
 }
 
 .c-landingPage__logo {
@@ -1028,7 +1034,7 @@ a:hover,
 
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   justify-content: center;
 
   padding: 0 20%;