mirror of
https://github.com/logos-storage/logos-storage-marketplace-ui.git
synced 2026-01-05 23:13:08 +00:00
Add splash screen
This commit is contained in:
Arnaud
parent
d69fe9750b
commit
715aeb4796
BIN
public/background.png
Normal file
BIN
public/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
public/fonts/AzeretMono-VariableFont.ttf
Normal file
BIN
public/fonts/AzeretMono-VariableFont.ttf
Normal file
Binary file not shown.
BIN
public/fonts/Inter-VariableFont.ttf
Normal file
BIN
public/fonts/Inter-VariableFont.ttf
Normal file
Binary file not shown.
22
src/components/AlphaIcon/AlphaIcon.tsx
Normal file
22
src/components/AlphaIcon/AlphaIcon.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
export function AlphaIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="27"
|
||||
height="27"
|
||||
viewBox="0 0 27 27"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M12.957 1.38171C13.0441 1.33141 13.1515 1.33141 13.2386 1.38171L23.1736 7.11769C23.2607 7.16799 23.3144 7.26095 23.3144 7.36156V18.8335C23.3144 18.9341 23.2607 19.0271 23.1736 19.0774L13.2386 24.8134C13.1515 24.8637 13.0441 24.8637 12.957 24.8134L3.02198 19.0774L2.47465 20.0254L3.02198 19.0774C2.93485 19.0271 2.88118 18.9341 2.88118 18.8335V7.36156C2.88118 7.26095 2.93485 7.16799 3.02198 7.11769L2.45878 6.14219L3.02198 7.11769L12.957 1.38171Z"
|
||||
stroke="var(--codex-color-error-hexa)"
|
||||
stroke-width="2.25282"
|
||||
/>
|
||||
<circle
|
||||
cx="13.0978"
|
||||
cy="13.0975"
|
||||
r="3.92933"
|
||||
fill="var(--codex-color-error-hexa)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
36
src/components/AlphaText/AlphaText.tsx
Normal file
36
src/components/AlphaText/AlphaText.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
export function AlphaText() {
|
||||
return (
|
||||
<svg
|
||||
width="72"
|
||||
height="11"
|
||||
viewBox="0 0 72 11"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M67.7256 8.55733H61.5796L60.7396 10.1953H58.2336L63.2876 0.395325H65.9196L71.1276 10.1953H68.5936L67.7256 8.55733ZM66.7036 6.61132L64.6316 2.74733L62.5876 6.61132H66.7036Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M56.9429 0.395325V10.1953H54.5629V6.17733H38.3229V10.1953H35.9429V0.395325H38.3229V4.13333H54.5629V0.395325H56.9429Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M24.3967 10.1953V0.395325H30.2767C32.6567 0.395325 34.1267 1.80932 34.1267 3.99333C34.1267 6.26133 32.6567 7.70333 30.2767 7.70333H26.7767L26.8047 10.1953H24.3967ZM26.7767 5.67333H30.2767C31.1027 5.67333 31.6207 5.11333 31.6207 4.02133C31.6207 2.97132 31.1167 2.42533 30.2767 2.42533H26.7767V5.67333Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M14.3544 10.1953V0.395325H16.7344V8.16533H22.8524V10.1953H14.3544Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
opacity="0.6"
|
||||
d="M9.66003 8.55733H3.51403L2.67403 10.1953H0.16803L5.22203 0.395325H7.85403L13.062 10.1953H10.528L9.66003 8.55733ZM8.63803 6.61132L6.56603 2.74733L4.52203 6.61132H8.63803Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
15
src/components/ArrowRightCircle/ArrowRightCircle.tsx
Normal file
15
src/components/ArrowRightCircle/ArrowRightCircle.tsx
Normal file
@ -0,0 +1,15 @@
|
||||
export function ArrowRightCircle() {
|
||||
return (
|
||||
<svg
|
||||
width="46"
|
||||
height="46"
|
||||
viewBox="0 0 46 46"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M23 20.75V14L32 23L23 32V25.25H14V20.75H23ZM23 0.5C35.42 0.5 45.5 10.58 45.5 23C45.5 35.42 35.42 45.5 23 45.5C10.58 45.5 0.5 35.42 0.5 23C0.5 10.58 10.58 0.5 23 0.5ZM23 41C32.945 41 41 32.945 41 23C41 13.055 32.945 5 23 5C13.055 5 5 13.055 5 23C5 32.945 13.055 41 23 41Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
17
src/components/CodexLogo/CodexLogo.tsx
Normal file
17
src/components/CodexLogo/CodexLogo.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
export function CodexLogo() {
|
||||
return (
|
||||
<svg
|
||||
width="36"
|
||||
height="41"
|
||||
viewBox="0 0 36 41"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.6277 40.9015C17.7411 40.9665 17.8695 41 17.9991 41C18.1287 41 18.4137 40.8758 18.4137 40.8758L35.5914 31.0392C35.6002 31.0348 35.6126 31.0286 35.6246 31.0218C35.7396 30.9568 35.8333 30.8625 35.8985 30.7506C35.965 30.6376 36 30.509 36 30.3785C36 30.3629 35.9994 30.3487 35.9988 30.338V10.6641C36 10.6463 36 10.6304 36 10.6225L36 10.6203C36 10.4895 35.9648 10.3618 35.8996 10.2496C35.8344 10.1363 35.7399 10.0428 35.6268 9.97791C35.6145 9.97079 35.6016 9.96385 35.5887 9.95754L18.4118 0.121802C18.3992 0.113347 18.387 0.105972 18.3767 0.0999143L18.3757 0.0993501C18.2618 0.0336983 18.1327 0 18.0021 0H17.9991C17.8683 0 17.7403 0.0343409 17.6291 0.0974203C17.6147 0.10543 17.6012 0.113822 17.5892 0.121917L0.408018 9.96017C0.399175 9.96457 0.386783 9.97084 0.374828 9.97761C0.260512 10.0426 0.165847 10.1377 0.1006 10.2499C0.0352476 10.3622 7.9445e-06 10.4899 7.9445e-06 10.6209C7.9445e-06 10.6365 0.000647846 10.6507 0.00123813 10.6614V30.3359C-4.66798e-05 30.3537 -1.25595e-05 30.3695 4.63313e-06 30.3775L7.9445e-06 30.3797C7.9445e-06 30.5104 0.0351009 30.6391 0.101723 30.7522C0.166892 30.8633 0.260777 30.9569 0.371036 31.0204L0.373266 31.0217L0.375526 31.0229C0.388987 31.0303 0.401193 31.0364 0.410473 31.041L17.5901 40.8783C17.5983 40.8838 17.6123 40.8929 17.6277 40.9015ZM35.5145 30.8299C35.5059 30.8347 35.496 30.8396 35.4862 30.8445C35.4915 30.8419 35.4971 30.8391 35.5022 30.8365C35.5065 30.8343 35.5106 30.8321 35.5145 30.8299ZM35.7765 30.3443C35.7768 30.3481 35.777 30.352 35.7772 30.3561C35.7775 30.3632 35.7778 30.3707 35.7778 30.3785C35.7778 30.3761 35.7777 30.3737 35.7777 30.3713C35.7775 30.3617 35.777 30.3526 35.7765 30.3443ZM18.7525 31.6737L25.134 35.3218L18.7475 38.9786L18.7525 31.6737ZM10.8663 35.3217L17.2481 31.6733L17.2531 38.9786L10.8663 35.3217ZM27.3792 26.7329L33.7607 30.3811L27.3742 34.0378L27.3792 26.7329ZM18.7527 29.088V21.7935L25.1214 25.4408L18.7527 29.088ZM10.126 24.1479V16.8534L16.4947 20.5006L10.126 24.1479ZM18.7527 19.2065V11.912L25.1214 15.5592L18.7527 19.2065ZM17.2488 9.32667L10.8669 5.67835L17.2538 2.02143L17.2488 9.32667ZM2.23991 30.3811L8.62645 34.0378L8.62143 26.7326L2.23991 30.3811ZM25.8755 26.7335L25.8805 34.0369L19.5057 30.3816L25.8755 26.7335ZM10.1258 26.7335L10.1208 34.0369L16.4955 30.3816L10.1258 26.7335ZM28.1316 25.4408L34.5087 21.784V29.0975L28.1316 25.4408ZM1.49196 21.784V29.0975L7.86904 25.4408L1.49196 21.784ZM10.8787 25.4398L17.2479 29.0874V21.7923L10.8787 25.4398ZM33.7587 20.4994L27.3794 16.8513V24.1475L33.7587 20.4994ZM2.24192 20.5L8.62117 24.1481V16.8519L2.24192 20.5ZM25.8746 16.8521V24.1473L19.5054 20.4997L25.8746 16.8521ZM34.5087 11.9025V19.216L28.1316 15.5592L34.5087 11.9025ZM7.86904 15.5592L1.49196 19.216V11.9025L7.86904 15.5592ZM17.2479 11.9114V19.2059L10.8792 15.5586L17.2479 11.9114ZM33.7613 10.6189L27.3742 6.96184L27.3792 14.2674L33.7613 10.6189ZM8.62706 6.96217L8.62205 14.2674L2.23994 10.6189L8.62706 6.96217ZM25.8805 6.96308L25.8755 14.2665L19.5057 10.6184L25.8805 6.96308ZM16.4955 10.6184L10.1258 14.2665L10.1208 6.96308L16.4955 10.6184ZM25.1346 5.67818L18.7475 2.02141L18.7525 9.32667L25.1346 5.67818Z"
|
||||
fill="var(--codex-color-primary)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
12
src/components/NetworkIcon/NetworkIcon.tsx
Normal file
12
src/components/NetworkIcon/NetworkIcon.tsx
Normal file
@ -0,0 +1,12 @@
|
||||
export function NetworkIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.11111 2L2 9.11111M10 6.44444L6.44444 10" stroke="#6CCC93" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@ -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 {
|
||||
|
||||
183
src/routes/index.css
Normal file
183
src/routes/index.css
Normal file
@ -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;
|
||||
}
|
||||
@ -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 (
|
||||
<div className="p-2">
|
||||
<h3>Welcome Home!</h3>
|
||||
const online = useNetwork();
|
||||
|
||||
<Link to="/dashboard">Go to dashboard</Link>
|
||||
const text = online ? "Network connected" : "Network disconnected";
|
||||
|
||||
return (
|
||||
<div className="index">
|
||||
<div className="index-container">
|
||||
<div className="index-column">
|
||||
<div className="index-column-section">
|
||||
<h1 className="index-title">Codex</h1>
|
||||
<h2 className="index-subtitle">Vault</h2>
|
||||
</div>
|
||||
|
||||
<div className="index-column-section">
|
||||
<div>
|
||||
<AlphaIcon />
|
||||
</div>
|
||||
<div className="index-alphaText">
|
||||
<p>
|
||||
<AlphaText></AlphaText>
|
||||
</p>
|
||||
<p>
|
||||
<SimpleText className="index-version" variant="normal">
|
||||
{import.meta.env.PACKAGE_VERSION}
|
||||
</SimpleText>
|
||||
</p>
|
||||
<p>
|
||||
<SimpleText className="index-disclaimer" variant="error">
|
||||
<a className="index-link">Legal Disclaimer</a>
|
||||
</SimpleText>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="index-column-section">
|
||||
<h3 className="index-mainTitle">
|
||||
Hello,
|
||||
<br /> Welcome to <span className="index-codex">Codex</span>{" "}
|
||||
<span className="index-vault">Vault</span>
|
||||
</h3>
|
||||
<p className="index-description">
|
||||
<SimpleText variant="light">
|
||||
Codex is a durable, decentralised data storage protocol, created
|
||||
so the world community can preserve its most important knowledge
|
||||
without risk of censorship.
|
||||
</SimpleText>
|
||||
</p>
|
||||
</div>
|
||||
<div className="index-column-section ">
|
||||
<SimpleText variant="primary">
|
||||
<a href="/dashboard" className="index-link index-getStarted">
|
||||
Let’s get started <ArrowRight></ArrowRight>
|
||||
</a>
|
||||
</SimpleText>
|
||||
|
||||
<div className="index-dots">
|
||||
<span className="index-dot index-dot--active"></span>
|
||||
<span className="index-dot"></span>
|
||||
<span className="index-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="index-columnRight">
|
||||
<div className="index-logo">
|
||||
<div className="index-network">
|
||||
<p className="index-network-text">{text}</p>
|
||||
<NetworkIcon></NetworkIcon>
|
||||
</div>
|
||||
<CodexLogo></CodexLogo>
|
||||
</div>
|
||||
<a href="/dashboard" className="index-link2">
|
||||
<ArrowRightCircle></ArrowRightCircle>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user