diff --git a/package.json b/package.json index 4fed0acc..6dc94f4b 100644 --- a/package.json +++ b/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", diff --git a/src/App.css b/src/App.css index b9d355df..b31320fd 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 5e9d989d..268911d6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,33 +1,15 @@ -import './App.css' import { TamaguiProvider } from 'tamagui' +import './App.css' import { Provider as StatusProvider } from '@status-im/components' -import StandardGauge from './components/StandardGauge' - import config from '../tamagui.config' +import LandingPage from './components/LayoutComponent/LandingPage' function App() { - const data = [ - { - id: 'php', - label: 'Free Space', - value: 40, - color: '#ea5e78', - }, - { - id: 'javascript', - label: 'Memmory', - value: 60, - color: '#ecedf0', - }, - ] - return ( -
- -
+ ) diff --git a/src/assets/bg-img/landing-page-bg.png b/src/assets/bg-img/landing-page-bg.png new file mode 100644 index 00000000..8257c527 Binary files /dev/null and b/src/assets/bg-img/landing-page-bg.png differ diff --git a/src/assets/node.svg b/src/assets/node.svg new file mode 100644 index 00000000..d2354133 --- /dev/null +++ b/src/assets/node.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/assets/nodes-app-icon.png b/src/assets/nodes-app-icon.png new file mode 100644 index 00000000..c41a6508 Binary files /dev/null and b/src/assets/nodes-app-icon.png differ diff --git a/src/components/BackgroundImage.tsx b/src/components/BackgroundImage.tsx index ca85f113..c3cd755d 100644 --- a/src/components/BackgroundImage.tsx +++ b/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', diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 56eae101..c65a6302 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -4,7 +4,6 @@ export type IconProps = { source: string width?: number height?: number - style?: unknown className?: string } diff --git a/src/components/InformationBox.tsx b/src/components/InformationBox.tsx index 56959795..36016d53 100644 --- a/src/components/InformationBox.tsx +++ b/src/components/InformationBox.tsx @@ -20,7 +20,7 @@ const InformationBox = ({ icon, textElements }: InformationBoxProps) => { }} space={'$2'} > - + ) diff --git a/src/components/LayoutComponent/LandingPage.css b/src/components/LayoutComponent/LandingPage.css new file mode 100644 index 00000000..39012d51 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/LayoutComponent/LandingPage.tsx b/src/components/LayoutComponent/LandingPage.tsx new file mode 100644 index 00000000..8968c9e1 --- /dev/null +++ b/src/components/LayoutComponent/LandingPage.tsx @@ -0,0 +1,101 @@ +import LayoutComponent from './LayoutComponent' +import './LandingPage.css' +import QuickStartBar from '../QuickStartBar/QuickStartBar' + +function LandingPage() { + return ( + <> + } /> + + + ) +} + +function Content() { + return ( +
+
+
+
+ +
+

+ nodesBETA +

+
+
+
+
+ + + + + + + + + +
+

+ Welcome, John. This is your complete access to a truly decentralized Web 3.0 +

+

+ Status Nodes allows you to finally take control and ownership of the services + you wish to run in a completely trustless and decentralized manner. +

+ +
+
+ ) +} +export default LandingPage diff --git a/src/components/LayoutComponent/LayoutComponent.tsx b/src/components/LayoutComponent/LayoutComponent.tsx new file mode 100644 index 00000000..9fe53758 --- /dev/null +++ b/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 ( +
+
+ {props.breadcrumbBar} +
{props.content}
+
+ +
+ ) +} + +function LayoutRight() { + return ( +
+
+ + {/* */} + {/* */} +
+
+ ) +} + +export default LayoutComponent diff --git a/src/components/LayoutComponent/layout.css b/src/components/LayoutComponent/layout.css new file mode 100644 index 00000000..cc9c610f --- /dev/null +++ b/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; + } \ No newline at end of file diff --git a/src/components/QuickStartBar/QuickStartBar.css b/src/components/QuickStartBar/QuickStartBar.css new file mode 100644 index 00000000..334c8d90 --- /dev/null +++ b/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; +} diff --git a/src/components/QuickStartBar/QuickStartBar.tsx b/src/components/QuickStartBar/QuickStartBar.tsx new file mode 100644 index 00000000..1145038f --- /dev/null +++ b/src/components/QuickStartBar/QuickStartBar.tsx @@ -0,0 +1,31 @@ +import './QuickStartBar.css' + +function QuickStartBar() { + return ( + + ) +} + +export default QuickStartBar \ No newline at end of file diff --git a/src/components/ShadowBox.tsx b/src/components/ShadowBox.tsx index 790dd226..a522a146 100644 --- a/src/components/ShadowBox.tsx +++ b/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%', }) diff --git a/src/index.css b/src/index.css index 2c3fac68..1019558c 100644 --- a/src/index.css +++ b/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 {