feat: add landing page layout and styles

src/App.css

@@ -1,30 +1,5 @@
 #root {
-  max-width: 1280px;
+  width: 100%;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
 }
 
 @media (prefers-reduced-motion: no-preference) {
@@ -33,10 +8,7 @@
   }
 }
 
-.card {
+span {
-  padding: 2em;
+  display: inline-block;
-}
+  vertical-align: middle;
-
-.read-the-docs {
-  color: #888;
 }

src/App.tsx

@@ -1,36 +1,15 @@
-import { useState } from 'react'
+import { TamaguiProvider } from 'tamagui'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import { Button, TamaguiProvider } from 'tamagui'
 import './App.css'
-import { Button as StatusButton, Provider as StatusProvider } from '@status-im/components'
+import { Provider as StatusProvider } from '@status-im/components'
 
 import config from '../tamagui.config'
+import LandingPage from './components/LayoutComponent/LandingPage'
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
     <TamaguiProvider config={config}>
       <StatusProvider>
-        <Button size="$6">Tamagui LEL</Button>
+        <LandingPage />
-        <StatusButton>Status LEL</StatusButton>
-        <div>
-          <a href="https://vitejs.dev" target="_blank">
-            <img src={viteLogo} className="logo" alt="Vite logo" />
-          </a>
-          <a href="https://react.dev" target="_blank">
-            <img src={reactLogo} className="logo react" alt="React logo" />
-          </a>
-        </div>
-        <h1>Vite + React</h1>
-        <div className="card">
-          <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
-          <p>
-            Edit <code>src/App.tsx</code> and save to test HMR
-          </p>
-        </div>
-        <p className="read-the-docs">Click on the Vite and React logos to learn more</p>
       </StatusProvider>
     </TamaguiProvider>
   )

src/assets/node.svg

@@ -0,0 +1,13 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="20/node" clip-path="url(#clip0_760_1602)">
+<g id="body">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.9999 2.60002C3.67442 2.60002 2.5999 3.67454 2.5999 5.00002C2.5999 6.32551 3.67442 7.40002 4.9999 7.40002C6.32539 7.40002 7.3999 6.32551 7.3999 5.00002C7.3999 3.67454 6.32539 2.60002 4.9999 2.60002ZM1.3999 5.00002C1.3999 3.0118 3.01168 1.40002 4.9999 1.40002C6.98813 1.40002 8.5999 3.0118 8.5999 5.00002C8.5999 5.77749 8.35345 6.4974 7.9344 7.08587L9.48712 8.63859C10.4478 7.86383 11.6697 7.4 13 7.4C16.0928 7.4 18.6 9.90721 18.6 13C18.6 16.0928 16.0928 18.6 13 18.6C9.9072 18.6 7.4 16.0928 7.4 13C7.4 11.6697 7.86383 10.4478 8.63859 9.48712L7.08589 7.93442C6.49739 8.35353 5.77743 8.60002 4.9999 8.60002C3.01168 8.60002 1.3999 6.98825 1.3999 5.00002ZM8.6 13C8.6 10.5699 10.5699 8.6 13 8.6C15.4301 8.6 17.4 10.5699 17.4 13C17.4 15.4301 15.4301 17.4 13 17.4C10.5699 17.4 8.6 15.4301 8.6 13Z" fill="white" fill-opacity="0.7"/>
+<path d="M7.9344 7.08587L7.52711 6.79585C7.3855 6.99472 7.40821 7.26679 7.58085 7.43943L7.9344 7.08587ZM9.48712 8.63859L9.13357 8.99215C9.31425 9.17283 9.6021 9.18821 9.801 9.0278L9.48712 8.63859ZM8.63859 9.48712L9.0278 9.801C9.18821 9.6021 9.17283 9.31425 8.99215 9.13357L8.63859 9.48712ZM7.08589 7.93442L7.43945 7.58087C7.26681 7.40823 6.99472 7.38552 6.79585 7.52715L7.08589 7.93442ZM3.0999 5.00002C3.0999 3.95068 3.95056 3.10002 4.9999 3.10002V2.10002C3.39828 2.10002 2.0999 3.3984 2.0999 5.00002H3.0999ZM4.9999 6.90002C3.95056 6.90002 3.0999 6.04937 3.0999 5.00002H2.0999C2.0999 6.60165 3.39828 7.90002 4.9999 7.90002V6.90002ZM6.8999 5.00002C6.8999 6.04937 6.04924 6.90002 4.9999 6.90002V7.90002C6.60153 7.90002 7.8999 6.60165 7.8999 5.00002H6.8999ZM4.9999 3.10002C6.04924 3.10002 6.8999 3.95068 6.8999 5.00002H7.8999C7.8999 3.3984 6.60153 2.10002 4.9999 2.10002V3.10002ZM4.9999 0.900024C2.73553 0.900024 0.899902 2.73566 0.899902 5.00002H1.8999C1.8999 3.28794 3.28782 1.90002 4.9999 1.90002V0.900024ZM9.0999 5.00002C9.0999 2.73566 7.26427 0.900024 4.9999 0.900024V1.90002C6.71198 1.90002 8.0999 3.28794 8.0999 5.00002H9.0999ZM8.34169 7.3759C8.81905 6.70553 9.0999 5.88483 9.0999 5.00002H8.0999C8.0999 5.67015 7.88784 6.28926 7.52711 6.79585L8.34169 7.3759ZM9.84068 8.28504L8.28795 6.73232L7.58085 7.43943L9.13357 8.99215L9.84068 8.28504ZM9.801 9.0278C10.676 8.32213 11.788 7.9 13 7.9V6.9C11.5514 6.9 10.2196 7.40554 9.17324 8.24939L9.801 9.0278ZM13 7.9C15.8167 7.9 18.1 10.1833 18.1 13H19.1C19.1 9.63106 16.3689 6.9 13 6.9V7.9ZM18.1 13C18.1 15.8167 15.8167 18.1 13 18.1V19.1C16.3689 19.1 19.1 16.3689 19.1 13H18.1ZM13 18.1C10.1833 18.1 7.9 15.8167 7.9 13H6.9C6.9 16.3689 9.63106 19.1 13 19.1V18.1ZM7.9 13C7.9 11.788 8.32213 10.676 9.0278 9.801L8.24939 9.17324C7.40554 10.2196 6.9 11.5514 6.9 13H7.9ZM6.73234 8.28798L8.28504 9.84068L8.99215 9.13357L7.43945 7.58087L6.73234 8.28798ZM4.9999 9.10002C5.88478 9.10002 6.70554 8.81913 7.37594 8.3417L6.79585 7.52715C6.28924 7.88793 5.67008 8.10002 4.9999 8.10002V9.10002ZM0.899902 5.00002C0.899902 7.26439 2.73553 9.10002 4.9999 9.10002V8.10002C3.28782 8.10002 1.8999 6.71211 1.8999 5.00002H0.899902ZM13 8.1C10.2938 8.1 8.1 10.2938 8.1 13H9.1C9.1 10.8461 10.8461 9.1 13 9.1V8.1ZM17.9 13C17.9 10.2938 15.7062 8.1 13 8.1V9.1C15.1539 9.1 16.9 10.8461 16.9 13H17.9ZM13 17.9C15.7062 17.9 17.9 15.7062 17.9 13H16.9C16.9 15.1539 15.1539 16.9 13 16.9V17.9ZM8.1 13C8.1 15.7062 10.2938 17.9 13 17.9V16.9C10.8461 16.9 9.1 15.1539 9.1 13H8.1Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_760_1602">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/components/LayoutComponent/LandingPage.css

@@ -0,0 +1,7 @@
+
+.landing-page header div img {
+    margin-right: 0.5rem;
+}
+.landing-page .content .subtitle {
+    margin-bottom: 3em;
+}

src/components/LayoutComponent/LayoutComponent.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react'
+import './layout.css'
+
+type LeftProps = {
+  breadcrumbBar?: ReactNode
+  content: ReactNode
+}
+function LayoutComponent(props: LeftProps) {
+  return (
+    <div className="layout">
+      <section className="layout-left">
+        {props.breadcrumbBar}
+        <div className="container">{props.content}</div>
+      </section>
+      <LayoutRight />
+    </div>
+  )
+}
+
+function LayoutRight() {
+  return (
+    <section className="layout-right">
+      <div className="image-container">
+        <img src="src/assets/bg-img/landing-page-bg.png" alt="" />
+        {/* <img src="src/assets/bg-img/day-night-bg.png" alt="" /> */}
+        {/* <img src="src/assets/bg-img/key-lock-bg.png" alt="" /> */}
+      </div>
+    </section>
+  )
+}
+
+export default LayoutComponent

src/components/LayoutComponent/layout.css

@@ -0,0 +1,108 @@
+.layout{
+    background-color: #FFF;
+    height: 100%;
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+}
+.layout-left {
+    flex: 0 0 55%;
+    max-width: 55%;
+}
+.container {
+    display: flex;
+    flex-wrap: wrap; 
+    justify-content: end; 
+    height: 100%;  
+    margin: 0 auto;
+}
+.container-inner {
+    max-width: 70%;
+    flex: 1 0 70%;
+    display: flex;
+    flex-wrap: wrap;
+}
+header {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+header > div {
+    display: flex;
+    align-items: center;
+}
+.logo-title {
+    font-size: 27px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+
+}
+.logo-title .beta{
+    color: #FFF;
+    font-size: 10px;
+    font-weight: 600;
+    border-radius: 66.667px;
+    background-color: #2A4AF5;
+    padding: 4px 6px;
+    margin-left: 10px;
+}
+.content .title {
+    font-size: 27px;
+    margin-bottom: 0.25em;
+}
+.content .subtitle {
+    font-size: 15px;
+    margin: 0.1em;
+}
+.content .subtitle span{
+    font-weight: 700;
+}
+.content button {
+    display: flex;
+    align-items: center;
+}
+.content button span {
+    padding-right: 10px;
+}
+
+
+
+
+    /* LAYOUT RIGHT ELEMENT WITH IMAGE TAKING UP THE WHOLE HIGHT OF THE VIEWPORT */
+    .layout-right {
+        flex: 0 0 45%;
+        max-width: 45%;
+    }
+    
+    .image-container {
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+    }
+    .image-container::before {
+        display: block;
+        content: "";
+        padding-bottom: 100%;
+    }
+    .image-container::after {
+        display: block;
+        content: "";
+        position: absolute;
+        top: 0;
+        left: -1%;
+        width: 50%;
+        height: 100%;
+        background: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0.0));
+    }
+    .image-container img {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        /* height: 100%; */
+        height: 140%;
+        width: auto;
+    }

src/index.css

@@ -14,6 +14,23 @@
   -webkit-text-size-adjust: 100%;
 }
 
+body {
+  margin: 0;
+  display: flex;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+h1 {
+  font-size: 3.2em;
+
+}
+
 a {
   font-weight: 500;
   color: #646cff;
@@ -22,28 +39,26 @@ a {
 a:hover {
   color: #535bf2;
 }
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
 button {
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid transparent;
   padding: 0.6em 1.2em;
-  font-size: 1em;
+  font-size: 15px;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #2A4AF5;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button.inversed {
+  border-radius: 12px;
+  border: 1px solid #2A4AF5;
+  color: #2A4AF5;
+  padding: 0.75em 1.2em;
+  font-size: 15px;
+  background-color:transparent;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
   transition: border-color 0.25s;
 }
@@ -57,7 +72,7 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
+    color: #09101C;
     background-color: #ffffff;
   }
   a:hover {