diff --git a/public/background.png b/public/background.png new file mode 100644 index 0000000..a1ffe65 Binary files /dev/null and b/public/background.png differ diff --git a/public/fonts/AzeretMono-VariableFont.ttf b/public/fonts/AzeretMono-VariableFont.ttf new file mode 100644 index 0000000..4e508e8 Binary files /dev/null and b/public/fonts/AzeretMono-VariableFont.ttf differ diff --git a/public/fonts/Inter-VariableFont.ttf b/public/fonts/Inter-VariableFont.ttf new file mode 100644 index 0000000..e31b51e Binary files /dev/null and b/public/fonts/Inter-VariableFont.ttf differ diff --git a/src/components/AlphaIcon/AlphaIcon.tsx b/src/components/AlphaIcon/AlphaIcon.tsx new file mode 100644 index 0000000..3d8f059 --- /dev/null +++ b/src/components/AlphaIcon/AlphaIcon.tsx @@ -0,0 +1,22 @@ +export function AlphaIcon() { + return ( + + + + + ); +} diff --git a/src/components/AlphaText/AlphaText.tsx b/src/components/AlphaText/AlphaText.tsx new file mode 100644 index 0000000..6a679f7 --- /dev/null +++ b/src/components/AlphaText/AlphaText.tsx @@ -0,0 +1,36 @@ +export function AlphaText() { + return ( + + + + + + + + ); +} diff --git a/src/components/ArrowRightCircle/ArrowRightCircle.tsx b/src/components/ArrowRightCircle/ArrowRightCircle.tsx new file mode 100644 index 0000000..a044e79 --- /dev/null +++ b/src/components/ArrowRightCircle/ArrowRightCircle.tsx @@ -0,0 +1,15 @@ +export function ArrowRightCircle() { + return ( + + + + ); +} diff --git a/src/components/CodexLogo/CodexLogo.tsx b/src/components/CodexLogo/CodexLogo.tsx new file mode 100644 index 0000000..1406926 --- /dev/null +++ b/src/components/CodexLogo/CodexLogo.tsx @@ -0,0 +1,17 @@ +export function CodexLogo() { + return ( + + + + ); +} diff --git a/src/components/NetworkIcon/NetworkIcon.tsx b/src/components/NetworkIcon/NetworkIcon.tsx new file mode 100644 index 0000000..aed3dac --- /dev/null +++ b/src/components/NetworkIcon/NetworkIcon.tsx @@ -0,0 +1,12 @@ +export function NetworkIcon() { + return ( + + + + ); +} diff --git a/src/index.css b/src/index.css index 82c61e2..34a8842 100644 --- a/src/index.css +++ b/src/index.css @@ -2,16 +2,29 @@ @import url(./assets/css/indicator.css); @import url(./assets/css/text.css); +@font-face { + font-family: Inter; + font-weight: 300 800; + src: url(/fonts/Inter-VariableFont.ttf); +} + +@font-face { + font-family: "Azeret Mono"; + font-weight: 400 800; + src: url(/fonts/AzeretMono-VariableFont.ttf); +} + :root { --codex-background: rgb(23 23 23); - --codex-color: #e1e4d9; + --codex-color: white; --codex-color-contrast: #f8f8f8; - --codex-color-error: 239, 68, 68; + --codex-color-error: 204, 108, 108; + --codex-color-error-hexa: #cc6c6c; --codex-color-warning: 234, 179, 8; --codex-color-success: 20, 184, 166; --codex-color-blue: 30, 64, 175; --codex-color-grey: 170, 170, 170; - --codex-color-primary: #c1f0a4; + --codex-color-primary: #6ccc93; --codex-color-primary-rgb: 193, 240, 164; --codex-color-primary-variant: #c1f0a4cc; --codex-color-on-primary: #333; @@ -22,7 +35,7 @@ --codex-background-light: rgb(64 64 64); --codex-background-backdrop: rgba(70, 70, 70, 0.75); --codex-border-radius: 0.5rem; - --codex-font-size: 0.875rem; + --codex-font-size: 14px; --codex-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, @@ -39,7 +52,7 @@ font-size: var(--codex-font-size); color-scheme: dark; color: var(--codex-color); - background-color: var(--codex-background); + background: linear-gradient(246.02deg, #000000 30.36%, #222222 91.05%); } ::selection { diff --git a/src/routes/index.css b/src/routes/index.css new file mode 100644 index 0000000..fd3189f --- /dev/null +++ b/src/routes/index.css @@ -0,0 +1,183 @@ +.index { + width: 100%; + background-image: url(/background.png); + background-position: 10px 10px; + background-position: right; + background-repeat: no-repeat; + background-size: auto 90%; + padding: 3rem 6rem; +} + +.index-logo { + position: relative; +} + +.index-network { + display: flex; + position: absolute; + top: -19px; + left: -106px; +} + +.index-network-text { + font-family: Inter; + font-size: 11px; + font-weight: 500; + line-height: 12px; + letter-spacing: 0.02em; + text-transform: uppercase; + color: var(--text-soft-400, #99a0ae); + text-wrap: nowrap; +} + +.index-container { + display: flex; + justify-content: space-between; + height: 100%; +} + +.index-alphaText { + margin-top: 4px; +} + +.index-title { + font-weight: 600; + font-size: 36px; + line-height: 43.2px; +} + +.index-version { + font-weight: 500; + opacity: 0.6; +} + +.index-link { + text-decoration: underline; + font-family: Azeret Mono; + font-size: 12px; + font-weight: 400; + line-height: 14px; + color: inherit; + margin-top: 16px; + cursor: pointer; + display: inline-flex; + align-items: center; +} + +.index-link2:hover, +.index-link:hover { + animation-name: example; + animation-duration: 2.5s; + animation-iteration-count: infinite; +} + +@keyframes example { + 0% { + filter: brightness(1); + -webkit-filter: brightness(1); + } + 50% { + filter: brightness(0.7); + -webkit-filter: brightness(0.7); + } + 100% { + filter: brightness(1); + -webkit-filter: brightness(1); + } +} + +.index-mainTitle { + font-family: Inter; + font-size: 36px; + font-weight: 300; + line-height: 43.57px; + letter-spacing: 0.01em; +} + +.index-codex { + font-weight: 400; +} + +.index-vault { + font-weight: 900; + text-transform: uppercase; +} + +.index-description { + font-family: Azeret Mono; + font-size: 14px; + font-weight: 400; + line-height: 16.34px; + max-width: 532px; + margin-top: 20px; +} + +.index-subtitle { + font-weight: 900; + font-size: 16px; + text-transform: uppercase; + line-height: 19.36px; + color: var(--codex-color-primary); +} + +.index-getStarted { + font-size: 24px; + font-weight: 600; + line-height: 29.05px; + letter-spacing: 0.01em; + margin-top: 32px; + font-family: Inter; + color: #7bfbaf; + gap: 4px; + text-decoration: none; + border-bottom: 2px solid #7bfbaf; +} + +.index-columnRight, +.index-column { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.index-column-section:not(:first-child) { + flex: 1; +} + +.index-column-section:first-child { + flex: 0.7; +} + +.index-column-section:last-child { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.index-dots { + display: flex; + gap: 8px; +} + +.index-dot { + width: 12px; + height: 12px; + background-color: white; + display: inline-block; + border-radius: 50%; + transition: opacity 0.35s; + cursor: pointer; +} + +.index-dot:not(.index-dot--active) { + opacity: 0.4; +} + +.index-dot:hover { + opacity: 0.8; +} + +.index-dot--active { + box-shadow: 0px 0px 13px 2px #fff; + opacity: 1; +} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index c59bca3..a469f08 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,20 +1,98 @@ import { createFileRoute, Link, redirect } from "@tanstack/react-router"; +import "./index.css"; +import { AlphaIcon } from "../components/AlphaIcon/AlphaIcon"; +import { AlphaText } from "../components/AlphaText/AlphaText"; +import { SimpleText } from "@codex-storage/marketplace-ui-components"; +import { ArrowRight } from "lucide-react"; +import { CodexLogo } from "../components/CodexLogo/CodexLogo"; +import { ArrowRightCircle } from "../components/ArrowRightCircle/ArrowRightCircle"; +import { useNetwork } from "../network/useNetwork"; +import { NetworkIcon } from "../components/NetworkIcon/NetworkIcon"; export const Route = createFileRoute("/")({ component: Index, beforeLoad: async () => { - throw redirect({ - to: "/dashboard", - }); + // throw redirect({ + // to: "/dashboard", + // }); }, }); function Index() { - return ( -
-

Welcome Home!

+ const online = useNetwork(); - Go to dashboard + const text = online ? "Network connected" : "Network disconnected"; + + return ( +
+
+
+
+

Codex

+

Vault

+
+ +
+
+ +
+
+

+ +

+

+ + {import.meta.env.PACKAGE_VERSION} + +

+

+ + Legal Disclaimer + +

+
+
+
+

+ Hello, +
Welcome to Codex{" "} + Vault +

+

+ + Codex is a durable, decentralised data storage protocol, created + so the world community can preserve its most important knowledge + without risk of censorship. + +

+
+
+ + + Let’s get started + + + +
+ + + +
+
+
+
+
+
+

{text}

+ +
+ +
+ + + +
+
); }