Merge branch 'main' into hn.line-chart

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "NODE_ENV=development vite",
-    "build": "tsc && vite build",
+    "build": "tsc -p . && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",

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,27 +1,14 @@
-import './App.css'
 import { TamaguiProvider } from 'tamagui'
+import './App.css'
 import { Provider as StatusProvider } from '@status-im/components'
-import StandardGauge from './components/StandardGauge'
+ 
+ 
+import LandingPage from './components/LayoutComponent/LandingPage'
 
 import config from '../tamagui.config'
 import StatisticBox from './components/StaticBox'
 
 function App() {
-  const data = [
-    {
-      id: 'php',
-      label: 'Free Space',
-      value: 40,
-      color: '#ea5e78',
-    },
-    {
-      id: 'javascript',
-      label: 'Memmory',
-      value: 60,
-      color: '#ecedf0',
-    },
-  ]
-
   return (
     <TamaguiProvider config={config}>
       <StatisticBox
@@ -31,9 +18,7 @@ function App() {
         title="Title of the box"
       />
       <StatusProvider>
-        <div style={{ height: '500px', width: '300px' }}>
+        <LandingPage />
-          <StandardGauge data={data} />
-        </div>
       </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/BackgroundImage.tsx

@@ -1,7 +1,7 @@
 import { Stack, styled } from 'tamagui'
 
 const BackgroundImage = styled(Stack, {
-  boxShadow: 'inset 100px 0px 100px white',
+  style: { boxShadow: 'inset 100px 0px 100px white' },
   width: '650px',
   height: '91.9vh',
   borderTopRightRadius: '25px',

src/components/Icon.tsx

@@ -4,7 +4,6 @@ export type IconProps = {
   source: string
   width?: number
   height?: number
-  style?: unknown
   className?: string
 }
 

src/components/InformationBox.tsx

@@ -20,7 +20,7 @@ const InformationBox = ({ icon, textElements }: InformationBoxProps) => {
       }}
       space={'$2'}
     >
-      <Icon source={icon} width={12} height={12} style={{ marginTop: '6px' }} />
+      <Icon source={icon} width={12} height={12} />
       <FormattedText textElements={textElements} color={'#647084'} fontSize={'$3'} />
     </XStack>
   )

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/components/QuickStartBar/QuickStartBar.css

@@ -0,0 +1,35 @@
+.quick-start-bar {
+    border-radius: 18px;
+    border: 1px solid rgba(0, 0, 0, 0.10);
+    opacity: 0.949999988079071;
+    background: rgba(255, 255, 255, 0.70);
+    backdrop-filter: blur(15px);
+    display: flex;
+    align-items: center;
+    width: 66%;
+    margin: 0 auto;
+    padding: 12px 1rem;
+    position: relative;
+    top: -120px;
+}
+.quick-start-bar > div {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 24px;
+    background: rgba(100, 112, 132, 0.05);
+    margin-left: 1rem;
+}
+.quick-start-bar ul {
+    list-style-type: none;
+    display: flex;
+    padding: 0;
+    margin: 0;
+}
+
+.quick-start-bar ul li {
+    padding: 0 1rem;
+    color: #0D1625;
+    font-size: 13px;
+}

src/components/QuickStartBar/QuickStartBar.tsx

@@ -0,0 +1,31 @@
+import './QuickStartBar.css'
+
+function QuickStartBar() {
+    return (
+        <nav className='quick-start-bar'>
+            <span>
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                <g clip-path="url(#clip0_760_8063)">
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.00008 14.3334C11.4979 14.3334 14.3334 11.4978 14.3334 8.00002C14.3334 4.50222 11.4979 1.66669 8.00008 1.66669C4.50228 1.66669 1.66675 4.50222 1.66675 8.00002C1.66675 11.4978 4.50228 14.3334 8.00008 14.3334ZM8.00008 15.3334C12.0502 15.3334 15.3334 12.0501 15.3334 8.00002C15.3334 3.94993 12.0502 0.666687 8.00008 0.666687C3.94999 0.666687 0.666748 3.94993 0.666748 8.00002C0.666748 12.0501 3.94999 15.3334 8.00008 15.3334Z" fill="#939BA1"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M4.82684 10.7661C4.76188 11.0129 4.98716 11.2382 5.23403 11.1733L9.74792 9.98539C9.86412 9.95481 9.95487 9.86406 9.98545 9.74786L11.1733 5.23397C11.2383 4.9871 11.013 4.76182 10.7661 4.82678L6.25224 6.01465C6.13604 6.04523 6.04529 6.13598 6.01471 6.25218L4.82684 10.7661ZM6.17202 9.58376C6.13304 9.73189 6.26821 9.86706 6.41634 9.82808L8.9293 9.16677C9.0455 9.13619 9.13625 9.04544 9.16683 8.92924L9.82814 6.41628C9.86712 6.26815 9.73195 6.13298 9.58383 6.17196L7.07086 6.83327C6.95466 6.86385 6.86391 6.9546 6.83333 7.0708L6.17202 9.58376Z" fill="#939BA1"/>
+                </g>
+                <defs>
+                <clipPath id="clip0_760_8063">
+                <rect width="16" height="16" fill="white"/>
+                </clipPath>
+                </defs>
+                </svg>
+            </span>
+            <div>
+                <ul>
+                    <li>Learn More</li>
+                    <li>Nodes Community</li>
+                    <li>Documentation</li>
+                </ul>
+                <button className='inversed'>Quick Start</button>
+            </div>
+        </nav>
+    )
+}
+
+export default QuickStartBar

src/components/ShadowBox.tsx

@@ -1,9 +1,8 @@
 import { Stack, styled } from 'tamagui'
 
 const ShadowBox = styled(Stack, {
-  boxSizing: 'border-box',
+  style: { boxSizing: 'border-box', boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)' },
   borderRadius: '16px',
-  boxShadow: '0px 4px 20px 0px rgba(9, 16, 28, 0.08)',
   width: '100%',
 })
 

src/index.css

@@ -2,11 +2,11 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
+  
   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;
-
+  
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -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 {