mirror of
https://github.com/status-im/nimbus-gui.git
synced 2025-02-09 01:55:18 +00:00
feat: add landing page layout and styles
This commit is contained in:
Ivana Andersson
parent
d59a382e4c
commit
11a7fb0cf3
38
src/App.css
38
src/App.css
@ -1,30 +1,5 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
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);
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
@ -33,10 +8,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
29
src/App.tsx
29
src/App.tsx
@ -1,36 +1,15 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from '/vite.svg'
|
||||
import { Button, TamaguiProvider } from 'tamagui'
|
||||
import { 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>
|
||||
<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>
|
||||
<LandingPage />
|
||||
</StatusProvider>
|
||||
</TamaguiProvider>
|
||||
)
|
||||
|
||||
BIN
src/assets/bg-img/landing-page-bg.png
Normal file
BIN
src/assets/bg-img/landing-page-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
13
src/assets/node.svg
Normal file
13
src/assets/node.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
BIN
src/assets/nodes-app-icon.png
Normal file
BIN
src/assets/nodes-app-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
7
src/components/LayoutComponent/LandingPage.css
Normal file
7
src/components/LayoutComponent/LandingPage.css
Normal file
@ -0,0 +1,7 @@
|
||||
|
||||
.landing-page header div img {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.landing-page .content .subtitle {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
101
src/components/LayoutComponent/LandingPage.tsx
Normal file
101
src/components/LayoutComponent/LandingPage.tsx
Normal file
File diff suppressed because one or more lines are too long
32
src/components/LayoutComponent/LayoutComponent.tsx
Normal file
32
src/components/LayoutComponent/LayoutComponent.tsx
Normal file
@ -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
|
||||
108
src/components/LayoutComponent/layout.css
Normal file
108
src/components/LayoutComponent/layout.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user