mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-05 01:10:36 -06:00
sync
This commit is contained in:
Alex Holliday
@@ -3,9 +3,9 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="./checkmate_favicon.svg" />
|
||||
<link rel="icon" href="/prism-logo-only.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Checkmate</title>
|
||||
<title>Prism</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
30
package-lock.json
generated
30
package-lock.json
generated
@@ -39,12 +39,14 @@
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^15.4.0",
|
||||
"react-icons": "5.4.0",
|
||||
"react-redux": "9.2.0",
|
||||
"react-router": "^6.23.0",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"react-toastify": "^10.0.5",
|
||||
"recharts": "2.15.1",
|
||||
"redux-persist": "6.0.0",
|
||||
"swiper": "11.2.4",
|
||||
"vite-plugin-svgr": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -16031,6 +16033,15 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/react-icons": {
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz",
|
||||
"integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-is": {
|
||||
"version": "18.3.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
|
||||
@@ -17812,6 +17823,25 @@
|
||||
"integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/swiper": {
|
||||
"version": "11.2.4",
|
||||
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.4.tgz",
|
||||
"integrity": "sha512-DTtglrsFfMYytid+oNy4QI3t2N2+XhhwSYbnyOhlwBmvY8Bkoj3ombK1/b80w8vDpQ+Lqlnbm+0737+i32MrcA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "patreon",
|
||||
"url": "https://www.patreon.com/swiperjs"
|
||||
},
|
||||
{
|
||||
"type": "open_collective",
|
||||
"url": "http://opencollective.com/swiper"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 4.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.39.0",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",
|
||||
|
||||
@@ -42,12 +42,14 @@
|
||||
"react-dnd-html5-backend": "^16.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-i18next": "^15.4.0",
|
||||
"react-icons": "5.4.0",
|
||||
"react-redux": "9.2.0",
|
||||
"react-router": "^6.23.0",
|
||||
"react-router-dom": "^6.23.1",
|
||||
"react-toastify": "^10.0.5",
|
||||
"recharts": "2.15.1",
|
||||
"redux-persist": "6.0.0",
|
||||
"swiper": "11.2.4",
|
||||
"vite-plugin-svgr": "^4.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
30
src/Components/Buttons/RoundGradientButton.jsx
Normal file
30
src/Components/Buttons/RoundGradientButton.jsx
Normal file
@@ -0,0 +1,30 @@
|
||||
import React from "react";
|
||||
import Button from "@mui/material/Button";
|
||||
import { styled } from "@mui/material/styles";
|
||||
|
||||
const RoundGradientButton = styled(Button)(({ theme }) => ({
|
||||
position: "relative",
|
||||
border: "5px solid transparent",
|
||||
backgroundClip: "padding-box",
|
||||
borderRadius: 30,
|
||||
fontSize: "1.2rem",
|
||||
color: theme.palette.primary.contrastText,
|
||||
backgroundColor: theme.palette.background.main,
|
||||
|
||||
"&:after": {
|
||||
position: "absolute",
|
||||
top: -3,
|
||||
left: -3,
|
||||
right: -3,
|
||||
bottom: -3,
|
||||
background:
|
||||
theme.palette.mode === "dark"
|
||||
? "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)"
|
||||
: "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)",
|
||||
content: '""',
|
||||
zIndex: -1,
|
||||
borderRadius: 30,
|
||||
},
|
||||
}));
|
||||
|
||||
export default RoundGradientButton;
|
||||
216
src/Components/Common/AppBar.jsx
Normal file
216
src/Components/Common/AppBar.jsx
Normal file
@@ -0,0 +1,216 @@
|
||||
import { useState } from "react";
|
||||
import { styled, alpha } from "@mui/material/styles";
|
||||
import Box from "@mui/material/Box";
|
||||
import AppBar from "@mui/material/AppBar";
|
||||
import Toolbar from "@mui/material/Toolbar";
|
||||
import Button from "@mui/material/Button";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Container from "@mui/material/Container";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Drawer from "@mui/material/Drawer";
|
||||
import MenuIcon from "@mui/icons-material/Menu";
|
||||
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
|
||||
import ThemeSwitch from "../ThemeSwitch";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useSelector } from "react-redux";
|
||||
import { useLocation, useNavigate } from "react-router-dom";
|
||||
|
||||
const StyledToolbar = styled(Toolbar)(({ theme, mode }) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
flexShrink: 0,
|
||||
borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`,
|
||||
backdropFilter: "blur(24px)",
|
||||
border: "1px solid",
|
||||
borderColor:
|
||||
mode === "light"
|
||||
? alpha(theme.palette.common.black, 0.1)
|
||||
: alpha(theme.palette.common.white, 0.1),
|
||||
backgroundColor:
|
||||
mode === "light"
|
||||
? alpha(theme.palette.common.white, 0.4)
|
||||
: alpha(theme.palette.common.black, 0.4),
|
||||
boxShadow: theme.shadows[3],
|
||||
padding: "8px 12px",
|
||||
}));
|
||||
|
||||
const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
|
||||
fontSize: "1.1rem",
|
||||
margin: theme.spacing(4, 2),
|
||||
}));
|
||||
|
||||
const AppAppBar = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const theme = useTheme();
|
||||
const mode = useSelector((state) => state.ui.mode);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Debugging: Log the current theme mode
|
||||
console.log("Current theme mode:", mode);
|
||||
|
||||
const logoSrc =
|
||||
mode === "light" ? "/images/prism-black.png" : "/images/prism-white.png";
|
||||
|
||||
const toggleDrawer = (newOpen) => () => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
const handleScroll = (id) => {
|
||||
if (location.pathname === "/") {
|
||||
const element = document.getElementById(id);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
} else {
|
||||
navigate(`/#${id}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
boxShadow: 0,
|
||||
bgcolor: "transparent",
|
||||
backgroundImage: "none",
|
||||
border: "none",
|
||||
mt: "calc(var(--template-frame-height, 0px) + 28px)",
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg">
|
||||
<StyledToolbar
|
||||
variant="dense"
|
||||
disableGutters
|
||||
mode={mode}
|
||||
>
|
||||
<Box sx={{ flexGrow: 1, display: "flex", alignItems: "center", px: 0 }}>
|
||||
<img
|
||||
src={logoSrc}
|
||||
alt="Prism Logo"
|
||||
style={{
|
||||
height: "auto",
|
||||
width: "auto",
|
||||
marginRight: "10px",
|
||||
maxHeight: "32px",
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ display: { xs: "none", md: "flex" } }}>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="large"
|
||||
onClick={() => handleScroll("features")}
|
||||
>
|
||||
Features
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="large"
|
||||
onClick={() => handleScroll("highlights")}
|
||||
>
|
||||
Highlights
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="large"
|
||||
onClick={() => handleScroll("faq")}
|
||||
>
|
||||
FAQ
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
color="info"
|
||||
size="large"
|
||||
href="https://uprock.com/blog"
|
||||
>
|
||||
Blog
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: "none", md: "flex" },
|
||||
gap: 1,
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{/* <Button color="primary" variant="text" size="small">
|
||||
Sign in
|
||||
</Button>
|
||||
<Button color="primary" variant="contained" size="small">
|
||||
Sign up
|
||||
</Button> */}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: "flex", md: "none" },
|
||||
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
aria-label="Menu button"
|
||||
onClick={toggleDrawer(true)}
|
||||
>
|
||||
<MenuIcon sx={{ color: theme.palette.text.primary }} />
|
||||
</IconButton>
|
||||
<Drawer
|
||||
anchor="top"
|
||||
open={open}
|
||||
onClose={toggleDrawer(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
top: 0,
|
||||
marginTop: 0,
|
||||
borderRadius: 0,
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box sx={{ p: 4, backgroundColor: theme.palette.background.main }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
}}
|
||||
>
|
||||
<IconButton onClick={toggleDrawer(false)}>
|
||||
<CloseRoundedIcon sx={{ color: theme.palette.text.primary }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<StyledMenuItem>Features</StyledMenuItem>
|
||||
<StyledMenuItem>Testimonials</StyledMenuItem>
|
||||
<StyledMenuItem>Highlights</StyledMenuItem>
|
||||
<StyledMenuItem>FAQ</StyledMenuItem>
|
||||
<StyledMenuItem
|
||||
component="a"
|
||||
href="https://uprock.com/blog"
|
||||
>
|
||||
Blog
|
||||
</StyledMenuItem>
|
||||
{/* <MenuItem>
|
||||
<Button color="primary" variant="contained" fullWidth>
|
||||
Sign up
|
||||
</Button>
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<Button color="primary" variant="outlined" fullWidth>
|
||||
Sign in
|
||||
</Button>
|
||||
</MenuItem> */}
|
||||
</Box>
|
||||
</Drawer>
|
||||
</Box>
|
||||
<ThemeSwitch />
|
||||
</StyledToolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default AppAppBar;
|
||||
214
src/Components/Common/Footer.jsx
Normal file
214
src/Components/Common/Footer.jsx
Normal file
@@ -0,0 +1,214 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Container from '@mui/material/Container';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Link from '@mui/material/Link';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { FaFacebook, FaLinkedin, FaGithub, FaTwitter, FaEnvelope } from 'react-icons/fa';
|
||||
|
||||
|
||||
function Copyright() {
|
||||
return (
|
||||
<Typography sx={{ color: 'text.secondary', mt: 1 }}>
|
||||
{'Copyright © '}
|
||||
<Link color="text.secondary" href="https://prism.uprock.com/">
|
||||
UpRock
|
||||
</Link>
|
||||
|
||||
{new Date().getFullYear()}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<Container
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: { xs: 4, sm: 8 },
|
||||
py: { xs: 24, sm: 24 },
|
||||
px: { xs: 12, sm: 12 },
|
||||
textAlign: { sm: 'center', md: 'left' },
|
||||
}}
|
||||
>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
pt: { xs: 4, sm: 8 },
|
||||
width: '100%',
|
||||
borderColor: 'divider',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Link color="text.secondary" href="https://uprock.com/privacy-policy">
|
||||
Privacy Policy
|
||||
</Link>
|
||||
<Typography sx={{ display: 'inline', mx: 0.5, opacity: 0.5 }}>
|
||||
•
|
||||
</Typography>
|
||||
<Link color="text.secondary" href="https://uprock.com/terms-of-use">
|
||||
Terms of Service
|
||||
</Link>
|
||||
<Copyright />
|
||||
</div>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1}
|
||||
useFlexGap
|
||||
sx={{ justifyContent: 'left', color: 'text.secondary' }}
|
||||
>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
size="small"
|
||||
href="mailto:prism@uprock.com?subject=Interested%20in%20UpRock%20Prism"
|
||||
aria-label="Contact Us"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<FaEnvelope />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
size="small"
|
||||
href="https://facebook.com/uprockcom"
|
||||
aria-label="Facebook"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<FaFacebook />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
size="small"
|
||||
href="https://x.com/uprockcom"
|
||||
aria-label="X"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<FaTwitter />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
size="small"
|
||||
href="https://www.linkedin.com/company/uprock/"
|
||||
aria-label="LinkedIn"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<FaLinkedin />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
size="small"
|
||||
href="https://github.com/uprockcom"
|
||||
aria-label="GitHub"
|
||||
sx={{ alignSelf: 'center' }}
|
||||
>
|
||||
<FaGithub />
|
||||
</IconButton>
|
||||
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
mt: 4,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2" sx={{ color: 'text.secondary' }}>
|
||||
Made with ❤️ by
|
||||
<Link href="https://uprock.com" color="inherit" sx={{ mx: 0.5 }}>
|
||||
UpRock
|
||||
</Link>
|
||||
&
|
||||
<Link href="https://bluewavelabs.ca" color="inherit" sx={{ mx: 0.5 }}>
|
||||
Bluewave Labs
|
||||
</Link>
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2" sx={{ color: 'text.secondary', mr: 1 }}>
|
||||
Built on
|
||||
</Typography>
|
||||
<svg
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 397.7 311.7"
|
||||
xmlSpace="preserve"
|
||||
width="15"
|
||||
height="15"
|
||||
>
|
||||
<style type="text/css">
|
||||
{`.st0{fill:url(#SVGID_1_);}
|
||||
.st1{fill:url(#SVGID_2_);}
|
||||
.st2{fill:url(#SVGID_3_);}`}
|
||||
</style>
|
||||
<linearGradient
|
||||
id="SVGID_1_"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="360.8791"
|
||||
y1="351.4553"
|
||||
x2="141.213"
|
||||
y2="-69.2936"
|
||||
gradientTransform="matrix(1 0 0 -1 0 314)"
|
||||
>
|
||||
<stop offset="0" style={{ stopColor: 'rgb(0, 255, 163)' }} />
|
||||
<stop offset="1" style={{ stopColor: 'rgb(220, 31, 255)' }} />
|
||||
</linearGradient>
|
||||
<path
|
||||
className="st0"
|
||||
d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"
|
||||
/>
|
||||
<linearGradient
|
||||
id="SVGID_2_"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="264.8291"
|
||||
y1="401.6014"
|
||||
x2="45.163"
|
||||
y2="-19.1475"
|
||||
gradientTransform="matrix(1 0 0 -1 0 314)"
|
||||
>
|
||||
<stop offset="0" style={{ stopColor: 'rgb(0, 255, 163)' }} />
|
||||
<stop offset="1" style={{ stopColor: 'rgb(220, 31, 255)' }} />
|
||||
</linearGradient>
|
||||
<path
|
||||
className="st1"
|
||||
d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"
|
||||
/>
|
||||
<linearGradient
|
||||
id="SVGID_3_"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="312.5484"
|
||||
y1="376.688"
|
||||
x2="92.8822"
|
||||
y2="-44.061"
|
||||
gradientTransform="matrix(1 0 0 -1 0 314)"
|
||||
>
|
||||
<stop offset="0" style={{ stopColor: 'rgb(0, 255, 163)' }} />
|
||||
<stop offset="1" style={{ stopColor: 'rgb(220, 31, 255)' }} />
|
||||
</linearGradient>
|
||||
<path
|
||||
className="st2"
|
||||
d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4 c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"
|
||||
/>
|
||||
</svg>
|
||||
<Typography variant="h2" sx={{ color: 'text.secondary', ml: 1 }}>
|
||||
Solana
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
17
src/Components/Home/ArcadeEmbed.jsx
Normal file
17
src/Components/Home/ArcadeEmbed.jsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import React from 'react';
|
||||
|
||||
export function ArcadeEmbed() {
|
||||
return (
|
||||
<div style={{ position: 'relative', paddingBottom: 'calc(57.419936851601264% + 41px)', height: 0, width: '100%' }}>
|
||||
<iframe
|
||||
src="https://demo.arcade.software/sbWTOnn9WYdlTewqV7HI?embed&embed_mobile=tab&embed_desktop=inline&show_copy_link=true"
|
||||
title="Explore Prism's Data Management Capabilities"
|
||||
frameBorder="0"
|
||||
loading="lazy"
|
||||
allowFullScreen
|
||||
allow="clipboard-write"
|
||||
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', colorScheme: 'light' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
33
src/Components/Home/Divider.jsx
Normal file
33
src/Components/Home/Divider.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
import { Divider as MUIDivider } from '@mui/material';
|
||||
|
||||
const Divider = () => {
|
||||
return (
|
||||
<MUIDivider
|
||||
sx={{
|
||||
background: 'linear-gradient(90deg, #842bd2, #ff5451, #8c52ff, #00bf63, #842bd2)',
|
||||
backgroundSize: '400% 400%',
|
||||
animation: 'gradientAnimation 10s ease infinite',
|
||||
height: '2px',
|
||||
opacity: 0.3,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default Divider;
|
||||
|
||||
const styles = `
|
||||
@keyframes gradientAnimation {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
`;
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
const styleSheet = document.createElement("style");
|
||||
styleSheet.type = "text/css";
|
||||
styleSheet.innerText = styles;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
158
src/Components/Home/FAQ.jsx
Normal file
158
src/Components/Home/FAQ.jsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import React from 'react';
|
||||
import Accordion from '@mui/material/Accordion';
|
||||
import AccordionDetails from '@mui/material/AccordionDetails';
|
||||
import AccordionSummary from '@mui/material/AccordionSummary';
|
||||
import Box from '@mui/material/Box';
|
||||
import Container from '@mui/material/Container';
|
||||
import Link from '@mui/material/Link';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { FaChevronDown } from 'react-icons/fa';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
export default function FAQ() {
|
||||
const [expanded, setExpanded] = React.useState([]);
|
||||
const theme = useTheme();
|
||||
|
||||
const handleChange =
|
||||
(panel) => (event, isExpanded) => {
|
||||
setExpanded(
|
||||
isExpanded
|
||||
? [...expanded, panel]
|
||||
: expanded.filter((item) => item !== panel),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container
|
||||
id="faq"
|
||||
sx={{
|
||||
py: { xs: 24, sm: 24 },
|
||||
px: { xs: 12, sm: 12 },
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
gap: { xs: 3, sm: 6 },
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h4"
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
width: { sm: '100%', md: '60%' },
|
||||
textAlign: { sm: 'left', md: 'center' },
|
||||
fontFamily: "BabaPro",
|
||||
}}
|
||||
>
|
||||
Frequently Asked Questions
|
||||
</Typography>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Accordion
|
||||
expanded={expanded.includes('panel1')}
|
||||
onChange={handleChange('panel1')}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
px: 6,
|
||||
}}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
|
||||
aria-controls="panel1d-content"
|
||||
id="panel1d-header"
|
||||
>
|
||||
<Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
|
||||
How does UpRock Prism ensure reliable uptime monitoring?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
gutterBottom
|
||||
sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
|
||||
>
|
||||
UpRock Prism leverages a decentralized network of real devices across the globe, providing continuous and accurate monitoring of your website's uptime and performance.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
expanded={expanded.includes('panel2')}
|
||||
onChange={handleChange('panel2')}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
px: 6,
|
||||
}}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
|
||||
aria-controls="panel2d-content"
|
||||
id="panel2d-header"
|
||||
>
|
||||
<Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
|
||||
What kind of insights can I gain from UpRock Prism?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
gutterBottom
|
||||
sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
|
||||
>
|
||||
UpRock Prism provides detailed insights into your website's performance, including load times, downtime incidents, and speed test metrics, helping you optimize and improve your digital presence.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
<Accordion
|
||||
expanded={expanded.includes('panel3')}
|
||||
onChange={handleChange('panel3')}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
px: 6,
|
||||
}}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
|
||||
aria-controls="panel3d-content"
|
||||
id="panel3d-header"
|
||||
>
|
||||
<Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
|
||||
How does the decentralized network benefit my business?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
gutterBottom
|
||||
sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
|
||||
>
|
||||
The decentralized network ensures that data is collected from diverse locations, providing a comprehensive view of your website's performance globally, and reducing the risk of single points of failure.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
{/* <Accordion
|
||||
expanded={expanded.includes('panel4')}
|
||||
onChange={handleChange('panel4')}
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
px: 6,
|
||||
}}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<FaChevronDown color={theme.palette.text.primary} />}
|
||||
aria-controls="panel4d-content"
|
||||
id="panel4d-header"
|
||||
>
|
||||
<Typography component="span" variant="subtitle1" sx={{ mr: 10, fontWeight: 'bold' }}>
|
||||
Is UpRock Prism easy to integrate with existing systems?
|
||||
</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Typography
|
||||
gutterBottom
|
||||
sx={{ maxWidth: { sm: '100%', md: '70%' }, pb: 6 }}
|
||||
>
|
||||
Yes, UpRock Prism is designed to seamlessly integrate with your existing infrastructure, providing easy setup and compatibility with various platforms and tools.
|
||||
</Typography>
|
||||
</AccordionDetails>
|
||||
</Accordion> */}
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
189
src/Components/Home/Features.jsx
Normal file
189
src/Components/Home/Features.jsx
Normal file
@@ -0,0 +1,189 @@
|
||||
import { Box, Container, Typography, Stack, Card } from "@mui/material";
|
||||
import {
|
||||
FaGlobe,
|
||||
FaTachometerAlt,
|
||||
FaServer,
|
||||
FaDocker,
|
||||
FaHeartbeat,
|
||||
FaExclamationTriangle,
|
||||
FaEnvelope,
|
||||
FaCalendarAlt,
|
||||
FaLock,
|
||||
} from "react-icons/fa";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Website Monitoring",
|
||||
description:
|
||||
"Leverage our global network to ensure your website is always up and running, with real-time performance insights from every corner of the world.",
|
||||
icon: FaGlobe,
|
||||
},
|
||||
{
|
||||
title: "Page Speed Insights",
|
||||
description:
|
||||
"Optimize your site with precise speed metrics and recommendations, powered by data from a worldwide community of real users.",
|
||||
icon: FaTachometerAlt,
|
||||
},
|
||||
{
|
||||
title: "Infrastructure Monitoring",
|
||||
description:
|
||||
"Gain comprehensive visibility into your systems with community-driven insights on CPU, memory, and disk usage.",
|
||||
icon: FaServer,
|
||||
},
|
||||
{
|
||||
title: "Docker Monitoring",
|
||||
description:
|
||||
"Monitor container health and performance with real-time data from our extensive global network.",
|
||||
icon: FaDocker,
|
||||
},
|
||||
{
|
||||
title: "Ping Monitoring",
|
||||
description:
|
||||
"Ensure network reliability with customizable ping checks, supported by our distributed community infrastructure.",
|
||||
icon: FaHeartbeat,
|
||||
},
|
||||
{
|
||||
title: "Incident Management",
|
||||
description:
|
||||
"Stay ahead of issues with proactive incident management, backed by detailed status and impact analysis.",
|
||||
icon: FaExclamationTriangle,
|
||||
},
|
||||
{
|
||||
title: "Email Notifications",
|
||||
description:
|
||||
"Receive instant alerts when issues are detected, ensuring you're always informed.",
|
||||
icon: FaEnvelope,
|
||||
},
|
||||
{
|
||||
title: "Maintenance Windows",
|
||||
description:
|
||||
"Effortlessly schedule and manage maintenance with automated notifications.",
|
||||
icon: FaCalendarAlt,
|
||||
},
|
||||
{
|
||||
title: "Self-Hosted",
|
||||
description: "Deploy on your own infrastructure for complete control.",
|
||||
icon: FaLock,
|
||||
},
|
||||
];
|
||||
|
||||
export default function FeatureGrid() {
|
||||
const theme = useTheme();
|
||||
const mode = useSelector((state) => state.ui.mode);
|
||||
|
||||
return (
|
||||
<Box
|
||||
id="Features"
|
||||
sx={{
|
||||
py: 24,
|
||||
px: 12,
|
||||
color: theme.palette.primary.contrastText,
|
||||
backgroundImage:
|
||||
mode === "light"
|
||||
? `radial-gradient(circle at center, #ffffff, white)`
|
||||
: `radial-gradient(circle at center, #2a2547, black)`,
|
||||
}}
|
||||
>
|
||||
<Container
|
||||
sx={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: { xs: 6, sm: 12 },
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: { sm: "100%", md: "80%" },
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h4"
|
||||
gutterBottom
|
||||
fontFamily="BabaPro"
|
||||
>
|
||||
Features
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
color: theme.palette.secondary.contrastText,
|
||||
fontSize: "clamp(0.9rem, 2.5vw, 1.1rem)",
|
||||
}}
|
||||
>
|
||||
Experience unparalleled distributed uptime monitoring, precise data
|
||||
extraction, and comprehensive speed testing. Our platform ensures optimal
|
||||
performance, real-time insights, and proactive issue resolution, powered by
|
||||
decentralized network of real user devices.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: {
|
||||
xs: "1fr",
|
||||
sm: "repeat(2, 1fr)",
|
||||
md: "repeat(3, 1fr)",
|
||||
},
|
||||
gap: 6,
|
||||
}}
|
||||
>
|
||||
{features.map((feature, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{ display: "flex", flexDirection: "column", height: "100%" }}
|
||||
>
|
||||
<Stack
|
||||
direction="column"
|
||||
component={Card}
|
||||
spacing={5}
|
||||
sx={{
|
||||
color: "inherit",
|
||||
p: 8,
|
||||
height: "100%",
|
||||
borderColor: "hsla(220, 25%, 25%, 0.3)",
|
||||
backgroundColor: "theme.palette.text.secondary",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: "50%",
|
||||
bgcolor: theme.palette.primary.main,
|
||||
color: theme.palette.background.default,
|
||||
}}
|
||||
>
|
||||
<feature.icon
|
||||
size={18}
|
||||
color="currentColor"
|
||||
/>
|
||||
</Box>
|
||||
<div>
|
||||
<Typography
|
||||
variant="h6"
|
||||
gutterBottom
|
||||
sx={{ fontWeight: "medium" }}
|
||||
>
|
||||
{feature.title}
|
||||
</Typography>
|
||||
<Typography sx={{ color: theme.palette.secondary.contrastText }}>
|
||||
{feature.description}
|
||||
</Typography>
|
||||
</div>
|
||||
</Stack>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
136
src/Components/Home/Hero.jsx
Normal file
136
src/Components/Home/Hero.jsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Container from "@mui/material/Container";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Link from "@mui/material/Link";
|
||||
import Stack from "@mui/material/Stack";
|
||||
import { styled, useTheme } from "@mui/material/styles";
|
||||
import { useSelector } from "react-redux";
|
||||
import { ArcadeEmbed } from "./ArcadeEmbed";
|
||||
import RoundGradientButton from "../Buttons/RoundGradientButton";
|
||||
|
||||
const GradientText = styled(Typography)(({ theme }) => ({
|
||||
fontSize: "inherit",
|
||||
fontFamily: "BabaPro",
|
||||
background: "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff, #00bf63, #842bd2)",
|
||||
backgroundSize: "400% 400%",
|
||||
WebkitBackgroundClip: "text",
|
||||
WebkitTextFillColor: "transparent",
|
||||
animation: "gradientAnimation 8s ease infinite",
|
||||
"@keyframes gradientAnimation": {
|
||||
"0%": { backgroundPosition: "0% 50%" },
|
||||
"50%": { backgroundPosition: "100% 50%" },
|
||||
"100%": { backgroundPosition: "0% 50%" },
|
||||
},
|
||||
}));
|
||||
|
||||
const Hero = () => {
|
||||
const theme = useTheme();
|
||||
const mode = useSelector((state) => state.ui.mode);
|
||||
|
||||
return (
|
||||
<Box
|
||||
id="hero"
|
||||
sx={{
|
||||
width: "100%",
|
||||
backgroundRepeat: "no-repeat",
|
||||
px: 12,
|
||||
backgroundImage:
|
||||
mode === "light"
|
||||
? "radial-gradient(ellipse 80% 50% at 50% -34%, hsl(215deg 100% 16%), transparent)"
|
||||
: "radial-gradient(ellipse 80% 50% at 50% -34%, hsl(265deg 100% 20%), transparent)",
|
||||
}}
|
||||
>
|
||||
<Container
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
pt: { xs: 60, sm: 80 },
|
||||
pb: { xs: 8, sm: 12 },
|
||||
}}
|
||||
>
|
||||
<Stack
|
||||
spacing={4}
|
||||
sx={{ alignItems: "center", width: { xs: "100%", sm: "70%" }, mb: 10 }}
|
||||
>
|
||||
<Typography
|
||||
variant="h2"
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: { xs: "column", sm: "row" },
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
fontSize: "clamp(0.8rem, 4vw, 3rem)",
|
||||
textAlign: "center",
|
||||
fontFamily: "BabaPro",
|
||||
}}
|
||||
>
|
||||
<GradientText
|
||||
component="span"
|
||||
variant="h2"
|
||||
>
|
||||
UpRock Prism
|
||||
</GradientText>
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{
|
||||
fontSize: "clamp(2rem, 6vw, 4.5rem)",
|
||||
textAlign: "center",
|
||||
fontFamily: "BabaPro",
|
||||
color: theme.palette.primary.contrastText,
|
||||
}}
|
||||
>
|
||||
Unmatched Uptime Monitoring
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
color: theme.palette.primary.contrastText,
|
||||
width: { xs: "100%", sm: "100%", md: "80%" },
|
||||
lineHeight: 1.5,
|
||||
fontSize: "clamp(0.9rem, 2.5vw, 1.1rem)",
|
||||
}}
|
||||
>
|
||||
Elevate your digital presence with UpRock Prism, the first decentralized data
|
||||
network for uptime monitoring and distributed performance testing. Gain
|
||||
unparalleled insights from every corner of the world.
|
||||
</Typography>
|
||||
<Stack
|
||||
direction="row"
|
||||
justifyContent="center"
|
||||
spacing={2}
|
||||
sx={{ pt: 10, pb: 6, width: "100%" }}
|
||||
>
|
||||
<RoundGradientButton
|
||||
variant="contained"
|
||||
className="gradient-button"
|
||||
href="/login"
|
||||
>
|
||||
Launch App
|
||||
</RoundGradientButton>
|
||||
</Stack>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color={theme.palette.secondary.contrastText}
|
||||
sx={{ textAlign: "center" }}
|
||||
>
|
||||
By clicking "Launch App" you agree to our
|
||||
<Link
|
||||
href="https://uprock.com/terms-of-use"
|
||||
color={theme.palette.primary.contrastText}
|
||||
>
|
||||
Terms of Use
|
||||
</Link>
|
||||
.
|
||||
</Typography>
|
||||
</Stack>
|
||||
<ArcadeEmbed />
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
295
src/Components/Home/Highlights.jsx
Normal file
295
src/Components/Home/Highlights.jsx
Normal file
@@ -0,0 +1,295 @@
|
||||
import * as React from 'react';
|
||||
import Box from '@mui/material/Box';
|
||||
import Button from '@mui/material/Button';
|
||||
import Card from '@mui/material/Card';
|
||||
import MuiChip from '@mui/material/Chip';
|
||||
import Container from '@mui/material/Container';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import PropTypes from 'prop-types';
|
||||
import StrokeAnimation from './StrokeAnimation';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import DevicesRoundedIcon from '@mui/icons-material/DevicesRounded';
|
||||
import EdgesensorHighRoundedIcon from '@mui/icons-material/EdgesensorHighRounded';
|
||||
import ViewQuiltRoundedIcon from '@mui/icons-material/ViewQuiltRounded';
|
||||
|
||||
const items = [
|
||||
{
|
||||
icon: <ViewQuiltRoundedIcon />,
|
||||
title: 'Unrivaled Dashboard',
|
||||
description:
|
||||
'Experience the ultimate control center with unparalleled insights into your website and online product performance.',
|
||||
imageLight: "/images/dashboard-light.png",
|
||||
imageDark: "/images/dashboard-dark.png",
|
||||
},
|
||||
{
|
||||
icon: <EdgesensorHighRoundedIcon />,
|
||||
title: 'Global Mobile Integration',
|
||||
description:
|
||||
'Harness the power of a groundbreaking DePIN network, with data from over 2.65 million devices worldwide.',
|
||||
imageLight: "/images/dash-light.png",
|
||||
imageDark: "/images/dash-dark.png",
|
||||
},
|
||||
{
|
||||
icon: <DevicesRoundedIcon />,
|
||||
title: 'Universal Platform Access',
|
||||
description:
|
||||
'Access Prism on any device, anywhere. Our platform ensures you receive comprehensive data from every corner of the globe.',
|
||||
imageLight: "/images/all-platforms.png",
|
||||
imageDark: "/images/all-platforms.png",
|
||||
},
|
||||
];
|
||||
|
||||
const Chip = styled(MuiChip)(({ theme, selected }) => ({
|
||||
variants: [
|
||||
{
|
||||
props: { selected },
|
||||
style: {
|
||||
background:
|
||||
'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
|
||||
color: 'hsl(0, 0%, 100%)',
|
||||
borderColor: (theme.vars || theme).palette.primary.light,
|
||||
'& .MuiChip-label': {
|
||||
color: 'hsl(0, 0%, 100%)',
|
||||
},
|
||||
...theme.applyStyles('dark', {
|
||||
borderColor: (theme.vars || theme).palette.primary.dark,
|
||||
}),
|
||||
},
|
||||
},
|
||||
],
|
||||
}));
|
||||
|
||||
export function MobileLayout({ selectedItemIndex, handleItemClick, selectedFeature }) {
|
||||
const mode = useSelector((state) => state.ui.mode);
|
||||
|
||||
if (!items[selectedItemIndex]) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: 'flex', sm: 'none' },
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: 'flex', gap: 4, overflow: 'auto', mb: 4, pb: 6 }}>
|
||||
{items.map(({ title }, index) => (
|
||||
<Chip
|
||||
size="medium"
|
||||
key={index}
|
||||
label={title}
|
||||
onClick={() => handleItemClick(index)}
|
||||
selected={selectedItemIndex === index}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
<Card variant="outlined">
|
||||
<Box
|
||||
sx={{
|
||||
mb: 2,
|
||||
position: 'relative',
|
||||
minHeight: 280,
|
||||
width: '100%',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={mode === 'dark'
|
||||
? items[selectedItemIndex].imageDark.replace('url("', '').replace('")', '')
|
||||
: items[selectedItemIndex].imageLight.replace('url("', '').replace('")', '')
|
||||
}
|
||||
alt={items[selectedItemIndex].title}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ px: 6, py: 4 }}>
|
||||
<Typography
|
||||
gutterBottom
|
||||
sx={{
|
||||
color: 'text.primary',
|
||||
fontWeight: 'medium',
|
||||
fontSize: { xs: '1.5rem', sm: '2rem' },
|
||||
}}
|
||||
>
|
||||
{selectedFeature.title}
|
||||
</Typography>
|
||||
<Typography sx={{ color: 'text.secondary', mb: 1.5 }}>
|
||||
{selectedFeature.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
MobileLayout.propTypes = {
|
||||
selectedItemIndex: PropTypes.number.isRequired,
|
||||
handleItemClick: PropTypes.func.isRequired,
|
||||
selectedFeature: PropTypes.shape({
|
||||
title: PropTypes.string.isRequired,
|
||||
description: PropTypes.string.isRequired,
|
||||
imageLight: PropTypes.string.isRequired,
|
||||
imageDark: PropTypes.string.isRequired,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default function Features() {
|
||||
const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
|
||||
const mode = useSelector((state) => state.ui.mode);
|
||||
const handleItemClick = (index) => {
|
||||
setSelectedItemIndex(index);
|
||||
};
|
||||
|
||||
const selectedFeature = items[selectedItemIndex];
|
||||
|
||||
return (
|
||||
<Container id="features" sx={{ py: { xs: 8, sm: 16 }, px: { xs: 12, sm: 12 } }}>
|
||||
<Box sx={{ width: { sm: '100%', md: '60%' } }}>
|
||||
<Typography
|
||||
component="h2"
|
||||
variant="h4"
|
||||
gutterBottom
|
||||
fontFamily="BabaPro"
|
||||
sx={{ color: 'text.primary' }}
|
||||
>
|
||||
Prism Highlights
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{ color: 'text.secondary', mb: { xs: 12, sm: 12 } }}
|
||||
>
|
||||
Discover the world's first and most advanced uptime monitoring service, powered by a vibrant web3 community. Prism delivers superior insights and a clearer picture of your digital presence, supported by a global network of real devices.
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', md: 'row-reverse' },
|
||||
gap: 2,
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<Box
|
||||
sx={{
|
||||
display: { xs: 'none', sm: 'flex' },
|
||||
flexDirection: 'column',
|
||||
gap: 2,
|
||||
ml: 6,
|
||||
mb: 0,
|
||||
height: '100%',
|
||||
}}
|
||||
>
|
||||
{items.map(({ icon, title, description }, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
component={Button}
|
||||
onClick={() => handleItemClick(index)}
|
||||
sx={[
|
||||
(theme) => ({
|
||||
p: 8,
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
'&:hover': {
|
||||
backgroundColor: mode === 'dark'
|
||||
? 'rgba(133, 113, 255, 0.1)'
|
||||
: (theme.vars || theme).palette.action.hover,
|
||||
},
|
||||
}),
|
||||
selectedItemIndex === index && {
|
||||
backgroundColor: (theme) => (mode === 'dark' ? 'rgba(133, 113, 255, 0.1)' : theme.palette.action.selected),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Box
|
||||
sx={[
|
||||
{
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'left',
|
||||
gap: 1,
|
||||
py: 6,
|
||||
textAlign: 'left',
|
||||
textTransform: 'none',
|
||||
color: 'text.secondary',
|
||||
},
|
||||
selectedItemIndex === index && {
|
||||
color: 'text.primary',
|
||||
},
|
||||
]}
|
||||
>
|
||||
{icon}
|
||||
|
||||
<Typography variant="h6">{title}</Typography>
|
||||
<Typography>{description}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
<MobileLayout
|
||||
selectedItemIndex={selectedItemIndex}
|
||||
handleItemClick={handleItemClick}
|
||||
selectedFeature={selectedFeature}
|
||||
/>
|
||||
</div>
|
||||
<Box id="stroke-animation"
|
||||
sx={{
|
||||
position: 'relative',
|
||||
display: { xs: 'none', sm: 'flex' },
|
||||
width: { xs: '100%', md: '70%' },
|
||||
height: 'var(--items-image-height)',
|
||||
}}
|
||||
>
|
||||
<Card
|
||||
variant="outlined"
|
||||
sx={{
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
display: { xs: 'none', sm: 'flex' },
|
||||
pointerEvents: 'none',
|
||||
mt: 0,
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: '100%',
|
||||
height: 500,
|
||||
overflow: 'hidden',
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'center',
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={mode === 'dark'
|
||||
? items[selectedItemIndex]?.imageDark.replace('url("', '').replace('")', '')
|
||||
: items[selectedItemIndex]?.imageLight.replace('url("', '').replace('")', '')
|
||||
}
|
||||
alt={items[selectedItemIndex]?.title}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
<StrokeAnimation />
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
111
src/Components/Home/LogoCarousel.jsx
Normal file
111
src/Components/Home/LogoCarousel.jsx
Normal file
@@ -0,0 +1,111 @@
|
||||
import React from 'react';
|
||||
import { Box, Container, Typography, Grid } from '@mui/material';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
|
||||
// Swiper imports
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Autoplay } from 'swiper/modules';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/autoplay';
|
||||
|
||||
const LogoCarousel = () => {
|
||||
const mode = useSelector((state) => state.ui.mode);
|
||||
const theme = useTheme();
|
||||
|
||||
const lightLogos = [
|
||||
{ src: '/images/borderless-dark.png', alt: 'borderless' },
|
||||
{ src: '/images/draperdragon-dark.png', alt: 'draperdragon' },
|
||||
{ src: '/images/animoca-dark.png', alt: 'animoca' },
|
||||
{ src: '/images/gydra-dark.png', alt: 'gydra' },
|
||||
{ src: '/images/fusion7-dark.png', alt: 'fusion7' },
|
||||
{ src: '/images/initialvc-dark.png', alt: 'initialvc' },
|
||||
{ src: '/images/gummies-dark.png', alt: 'gummies' },
|
||||
{ src: '/images/laserdigital-dark.png', alt: 'laserdigital' },
|
||||
{ src: '/images/depinhub-dark.png', alt: 'depinhub' },
|
||||
{ src: '/images/decentralised-dark.png', alt: 'decentralised' },
|
||||
{ src: '/images/sagadao-dark.png', alt: 'sagadao' },
|
||||
{ src: '/images/seancarey-dark.png', alt: 'seancarey' },
|
||||
{ src: '/images/alvarograce-dark.png', alt: 'alvarograce' },
|
||||
];
|
||||
|
||||
const darkLogos = [
|
||||
{ src: '/images/borderless-light.png', alt: 'borderless' },
|
||||
{ src: '/images/draperdragon-light.png', alt: 'draperdragon' },
|
||||
{ src: '/images/animoca-light.png', alt: 'animoca' },
|
||||
{ src: '/images/gydra-light.png', alt: 'gydra' },
|
||||
{ src: '/images/fusion7-light.png', alt: 'fusion7' },
|
||||
{ src: '/images/initialvc-light.png', alt: 'initialvc' },
|
||||
{ src: '/images/gummies-light.png', alt: 'gummies' },
|
||||
{ src: '/images/laserdigital-light.png', alt: 'laserdigital' },
|
||||
{ src: '/images/depinhub-light.png', alt: 'depinhub' },
|
||||
{ src: '/images/decentralised-light.png', alt: 'decentralised' },
|
||||
{ src: '/images/sagadao-light.png', alt: 'sagadao' },
|
||||
{ src: '/images/seancarey-light.png', alt: 'seancarey' },
|
||||
{ src: '/images/alvarograce-light.png', alt: 'alvarograce' },
|
||||
];
|
||||
|
||||
const logos = mode === 'light' ? lightLogos : darkLogos;
|
||||
|
||||
const logoStyle = {
|
||||
width: 'auto',
|
||||
height: '50px',
|
||||
maxWidth: '100%',
|
||||
margin: '0 12px',
|
||||
opacity: 1,
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="section"
|
||||
className="brand-slider-section section-padding fix"
|
||||
sx={{
|
||||
py: 28,
|
||||
px: 12,
|
||||
}}
|
||||
>
|
||||
<Box className="brand-slider-container-wrapper">
|
||||
<Box className="brand-slider-wrapper" textAlign="center">
|
||||
<Typography
|
||||
variant="h4"
|
||||
sx={{ mb: 18, opacity: 1, color: theme.palette.text.primary }}
|
||||
fontFamily="BabaPro"
|
||||
>
|
||||
Backed by the best
|
||||
</Typography>
|
||||
|
||||
<Swiper
|
||||
modules={[Autoplay]}
|
||||
autoplay={{ delay: 0, disableOnInteraction: false }}
|
||||
speed={5000}
|
||||
loop={true}
|
||||
breakpoints={{
|
||||
0: { slidesPerView: 3, spaceBetween: 10 },
|
||||
576: { slidesPerView: 4, centeredSlides: true },
|
||||
768: { slidesPerView: 5 },
|
||||
1025: { slidesPerView: 6 },
|
||||
1400: { slidesPerView: 7 },
|
||||
1600: { slidesPerView: 8 },
|
||||
}}
|
||||
spaceBetween={20}
|
||||
>
|
||||
{logos.map((logo, index) => (
|
||||
<SwiperSlide key={index}>
|
||||
<Box className="brand-logo">
|
||||
<img
|
||||
src={logo.src}
|
||||
alt={logo.alt}
|
||||
style={logoStyle}
|
||||
/>
|
||||
</Box>
|
||||
</SwiperSlide>
|
||||
))}
|
||||
</Swiper>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default LogoCarousel;
|
||||
55
src/Components/Home/StrokeAnimation.jsx
Normal file
55
src/Components/Home/StrokeAnimation.jsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import React from 'react';
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
export default function BorderBeam() {
|
||||
return (
|
||||
<Box
|
||||
style={{
|
||||
'--size': 250,
|
||||
'--duration': 7,
|
||||
'--anchor': 90,
|
||||
'--border-width': 1.5,
|
||||
'--color-from': '#842bd2',
|
||||
'--color-to': '#ff5451',
|
||||
'--delay': '-9s',
|
||||
}}
|
||||
sx={{
|
||||
pointerEvents: 'none',
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
borderRadius: 'inherit',
|
||||
border: 'calc(var(--border-width) * 1px) solid transparent',
|
||||
maskClip: 'padding-box, border-box',
|
||||
maskComposite: 'intersect',
|
||||
maskImage: 'linear-gradient(transparent, transparent), linear-gradient(white, white)',
|
||||
|
||||
'&::after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
|
||||
width: 'calc(var(--size) * 1px)',
|
||||
height: 'calc(var(--size) * 1px)',
|
||||
|
||||
background: 'linear-gradient(to left, #842bd2, #ff5451, #8c52ff, #00bf63, transparent)',
|
||||
|
||||
// The “border-beam” keyframes:
|
||||
animation: 'borderBeam calc(var(--duration) * 1s) infinite linear',
|
||||
animationDelay: 'var(--delay)',
|
||||
|
||||
// The offset-path & offset-anchor are experimental:
|
||||
offsetPath: 'rect(0 auto auto 0 round calc(var(--size) * 1px))',
|
||||
offsetAnchor: 'calc(var(--anchor) * 1%) 50%',
|
||||
},
|
||||
|
||||
/* Keyframes (Tailwind's `animate-border-beam`)
|
||||
We only need a single "to { offset-distance: 100%; }"
|
||||
*/
|
||||
'@keyframes borderBeam': {
|
||||
to: {
|
||||
offsetDistance: '100%',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
15
src/Pages/About/index.jsx
Normal file
15
src/Pages/About/index.jsx
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import AppBar from '../../Components/Common/AppBar';
|
||||
import Footer from '../../Components/Common/Footer';
|
||||
|
||||
const AboutUs = () => {
|
||||
return (
|
||||
<div>
|
||||
<AppBar />
|
||||
<h1>About Us</h1>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AboutUs;
|
||||
33
src/Pages/Landing/index.jsx
Normal file
33
src/Pages/Landing/index.jsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import AppBar from "../../Components/Common/AppBar";
|
||||
import Footer from "../../Components/Common/Footer";
|
||||
import Hero from "../../Components/Home/Hero";
|
||||
import Features from "../../Components/Home/Features";
|
||||
import Highlights from "../../Components/Home/Highlights";
|
||||
import FAQ from "../../Components/Home/FAQ";
|
||||
import Divider from "../../Components/Home/Divider";
|
||||
import LogoCarousel from "../../Components/Home/LogoCarousel";
|
||||
|
||||
const Landing = () => {
|
||||
return (
|
||||
<div>
|
||||
<AppBar />
|
||||
<Hero />
|
||||
<LogoCarousel />
|
||||
<Divider />
|
||||
<div id="features">
|
||||
<Features />
|
||||
</div>
|
||||
<Divider />
|
||||
<div id="highlights">
|
||||
<Highlights />
|
||||
</div>
|
||||
<Divider />
|
||||
<div id="faq">
|
||||
<FAQ />
|
||||
</div>
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
@@ -52,6 +52,12 @@ import Settings from "../Pages/Settings";
|
||||
|
||||
import Maintenance from "../Pages/Maintenance";
|
||||
|
||||
// Landing page
|
||||
import Landing from "../Pages/Landing";
|
||||
|
||||
// About page
|
||||
import About from "../Pages/About";
|
||||
|
||||
import ProtectedRoute from "../Components/ProtectedRoute";
|
||||
import ProtectedDistributedUptimeRoute from "../Components/ProtectedDistributedUptimeRoute";
|
||||
import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance";
|
||||
@@ -61,6 +67,14 @@ const Routes = () => {
|
||||
const AdminCheckedRegister = withAdminCheck(AuthRegister);
|
||||
return (
|
||||
<LibRoutes>
|
||||
<Route
|
||||
path="/"
|
||||
element={<Landing />}
|
||||
/>
|
||||
<Route
|
||||
path="/about"
|
||||
element={<About />}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
element={
|
||||
|
||||
35
src/assets/Images/jupiter_logo_banner_dark.svg
Normal file
35
src/assets/Images/jupiter_logo_banner_dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.2 KiB |
35
src/assets/Images/jupiter_logo_banner_light.svg
Normal file
35
src/assets/Images/jupiter_logo_banner_light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.2 KiB |
24
src/assets/Images/solana_logo_banner_dark.svg
Normal file
24
src/assets/Images/solana_logo_banner_dark.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg width="646" height="96" viewBox="0 0 646 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1064_606)">
|
||||
<path d="M108.53 75.6899L90.81 94.6899C90.4267 95.1026 89.9626 95.432 89.4464 95.6573C88.9303 95.8827 88.3732 95.9994 87.81 95.9999H3.81C3.40937 95.9997 3.01749 95.8827 2.68235 95.6631C2.34722 95.4436 2.08338 95.1311 1.92313 94.7639C1.76288 94.3967 1.71318 93.9908 1.78012 93.5958C1.84706 93.2008 2.02772 92.8338 2.3 92.5399L20 73.5399C20.3833 73.1273 20.8474 72.7979 21.3636 72.5725C21.8797 72.3472 22.4368 72.2305 23 72.2299H107C107.404 72.2216 107.802 72.333 108.143 72.5502C108.484 72.7674 108.754 73.0806 108.917 73.4504C109.081 73.8203 109.131 74.2303 109.062 74.6288C108.993 75.0273 108.808 75.3965 108.53 75.6899ZM90.81 37.4199C90.4253 37.0091 89.9608 36.6811 89.445 36.4558C88.9292 36.2306 88.3728 36.1129 87.81 36.11H3.81C3.40937 36.1102 3.01749 36.2272 2.68235 36.4468C2.34722 36.6663 2.08338 36.9788 1.92313 37.346C1.76288 37.7132 1.71318 38.1191 1.78012 38.5141C1.84706 38.9091 2.02772 39.2761 2.3 39.57L20 58.58C20.3847 58.9908 20.8492 59.3188 21.365 59.5441C21.8808 59.7693 22.4372 59.887 23 59.8899H107C107.4 59.8878 107.79 59.7693 108.124 59.5491C108.458 59.3288 108.72 59.0162 108.879 58.6494C109.038 58.2826 109.087 57.8774 109.019 57.4833C108.952 57.0892 108.772 56.7232 108.5 56.43L90.81 37.4199ZM3.81 23.7699H87.81C88.3732 23.7694 88.9303 23.6527 89.4464 23.4273C89.9626 23.202 90.4267 22.8726 90.81 22.4599L108.53 3.45995C108.808 3.16647 108.993 2.79726 109.062 2.39877C109.131 2.00028 109.081 1.59031 108.917 1.22045C108.754 0.850591 108.484 0.537368 108.143 0.320195C107.802 0.103021 107.404 -0.0084012 107 -5.10783e-05H23C22.4368 0.000541762 21.8797 0.117167 21.3636 0.342553C20.8474 0.567938 20.3833 0.897249 20 1.30995L2.3 20.3099C2.02772 20.6038 1.84706 20.9708 1.78012 21.3658C1.71318 21.7608 1.76288 22.1667 1.92313 22.5339C2.08338 22.9011 2.34722 23.2136 2.68235 23.4331C3.01749 23.6527 3.40937 23.7697 3.81 23.7699Z" fill="url(#paint0_linear_1064_606)"/>
|
||||
<path d="M210.94 40.6002H166V25.8002H222.62V11.0002H165.85C163.91 10.9897 161.988 11.3613 160.192 12.0938C158.396 12.8264 156.761 13.9055 155.383 15.2696C154.004 16.6337 152.907 18.2561 152.155 20.044C151.403 21.832 151.01 23.7506 151 25.6902V40.6902C151.008 42.6315 151.398 44.5523 152.149 46.3425C152.9 48.1328 153.996 49.7575 155.375 51.1237C156.755 52.49 158.39 53.5709 160.187 54.3047C161.984 55.0385 163.909 55.4108 165.85 55.4002H210.85V70.2002H152.07V85.0002H210.94C212.88 85.0108 214.802 84.6391 216.598 83.9066C218.394 83.174 220.029 82.0949 221.407 80.7308C222.786 79.3667 223.883 77.7444 224.635 75.9564C225.387 74.1684 225.78 72.2498 225.79 70.3102V55.3102C225.782 53.3689 225.392 51.4482 224.641 49.6579C223.89 47.8676 222.794 46.2429 221.415 44.8767C220.035 43.5105 218.4 42.4296 216.603 41.6958C214.806 40.962 212.881 40.5897 210.94 40.6002Z" fill="white"/>
|
||||
<path d="M298 11H252.89C250.947 10.9842 249.02 11.3519 247.219 12.0821C245.419 12.8123 243.78 13.8905 242.397 15.2552C241.013 16.6198 239.913 18.2439 239.159 20.0345C238.404 21.8251 238.01 23.747 238 25.69V70.31C238.01 72.253 238.404 74.1749 239.159 75.9655C239.913 77.7561 241.013 79.3802 242.397 80.7448C243.78 82.1095 245.419 83.1877 247.219 83.9179C249.02 84.6481 250.947 85.0158 252.89 85H298C299.94 85.0105 301.862 84.6389 303.658 83.9064C305.454 83.1738 307.089 82.0947 308.467 80.7306C309.846 79.3665 310.943 77.7441 311.695 75.9562C312.447 74.1682 312.84 72.2496 312.85 70.31V25.69C312.84 23.7504 312.447 21.8318 311.695 20.0438C310.943 18.2559 309.846 16.6335 308.467 15.2694C307.089 13.9053 305.454 12.8262 303.658 12.0936C301.862 11.3611 299.94 10.9895 298 11ZM297.89 70.2H253V25.8H297.87L297.89 70.2Z" fill="white"/>
|
||||
<path d="M456 11.0001H412C410.06 10.9896 408.138 11.3612 406.342 12.0937C404.546 12.8263 402.911 13.9054 401.533 15.2695C400.154 16.6336 399.057 18.256 398.305 20.0439C397.553 21.8319 397.16 23.7505 397.15 25.6901V85.0001H412.15V60.6901H455.95V85.0001H470.95V25.6901C470.94 23.742 470.544 21.8152 469.786 20.0206C469.027 18.2261 467.922 16.5993 466.532 15.2338C465.143 13.8684 463.497 12.7914 461.689 12.0648C459.881 11.3382 457.948 10.9764 456 11.0001ZM455.89 45.8901H412.09V25.8001H455.89V45.8901Z" fill="white"/>
|
||||
<path d="M631.15 11.0002H587.15C585.21 10.9897 583.288 11.3613 581.492 12.0938C579.696 12.8264 578.062 13.9055 576.683 15.2696C575.304 16.6337 574.207 18.2561 573.455 20.044C572.703 21.832 572.31 23.7506 572.3 25.6902V85.0002H587.3V60.6902H631V85.0002H646V25.6902C645.99 23.7506 645.597 21.832 644.845 20.044C644.093 18.2561 642.996 16.6337 641.617 15.2696C640.238 13.9055 638.604 12.8264 636.808 12.0938C635.012 11.3613 633.09 10.9897 631.15 11.0002ZM631 45.8902H587.2V25.8002H631V45.8902Z" fill="white"/>
|
||||
<path d="M544 70.2001H538L516.55 17.2001C515.815 15.3716 514.55 13.8045 512.918 12.6999C511.286 11.5952 509.361 11.0033 507.39 11.0001H494.08C492.786 10.9935 491.504 11.2418 490.307 11.7307C489.109 12.2197 488.02 12.9397 487.1 13.8497C486.181 14.7598 485.45 15.8419 484.949 17.0345C484.448 18.227 484.187 19.5066 484.18 20.8001V85.0001H499.18V25.8001H505.18L526.62 78.8001C527.367 80.6251 528.642 82.1858 530.281 83.283C531.919 84.3803 533.848 84.9641 535.82 84.9601H549.13C550.424 84.9667 551.706 84.7185 552.903 84.2295C554.101 83.7406 555.19 83.0205 556.11 82.1105C557.029 81.2005 557.76 80.1183 558.261 78.9258C558.762 77.7332 559.023 76.4537 559.03 75.1601V11.0001H544V70.2001Z" fill="white"/>
|
||||
<path d="M341.1 11H326.1V70.31C326.11 72.2539 326.505 74.1766 327.26 75.9678C328.015 77.7591 329.116 79.3836 330.5 80.7484C331.884 82.1132 333.525 83.1912 335.326 83.9208C337.128 84.6504 339.056 85.0171 341 85H386V70.2H341.1V11Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1064_606" x1="10.81" y1="98.29" x2="98.89" y2="-1.01005" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.08" stop-color="#9945FF"/>
|
||||
<stop offset="0.3" stop-color="#8752F3"/>
|
||||
<stop offset="0.5" stop-color="#5497D5"/>
|
||||
<stop offset="0.6" stop-color="#43B4CA"/>
|
||||
<stop offset="0.72" stop-color="#28E0B9"/>
|
||||
<stop offset="0.97" stop-color="#19FB9B"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1064_606">
|
||||
<rect width="646" height="96" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
49
src/assets/Images/solana_logo_banner_light.svg
Normal file
49
src/assets/Images/solana_logo_banner_light.svg
Normal file
@@ -0,0 +1,49 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="646" height="96" viewBox="0 0 646 96" fill="none" version="1.1" id="svg36"
|
||||
sodipodi:docname="solana_logo_banner_dark.svg" inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview id="namedview38" pagecolor="#ffffff" bordercolor="#000000" borderopacity="0.25"
|
||||
inkscape:showpageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false" inkscape:zoom="2.0820433" inkscape:cx="324.68104" inkscape:cy="48.02974"
|
||||
inkscape:window-width="1854" inkscape:window-height="1131" inkscape:window-x="0" inkscape:window-y="0"
|
||||
inkscape:window-maximized="1" inkscape:current-layer="svg36" />
|
||||
<g clip-path="url(#clip0_1064_606)" id="g16">
|
||||
<path
|
||||
d="M108.53 75.6899L90.81 94.6899C90.4267 95.1026 89.9626 95.432 89.4464 95.6573C88.9303 95.8827 88.3732 95.9994 87.81 95.9999H3.81C3.40937 95.9997 3.01749 95.8827 2.68235 95.6631C2.34722 95.4436 2.08338 95.1311 1.92313 94.7639C1.76288 94.3967 1.71318 93.9908 1.78012 93.5958C1.84706 93.2008 2.02772 92.8338 2.3 92.5399L20 73.5399C20.3833 73.1273 20.8474 72.7979 21.3636 72.5725C21.8797 72.3472 22.4368 72.2305 23 72.2299H107C107.404 72.2216 107.802 72.333 108.143 72.5502C108.484 72.7674 108.754 73.0806 108.917 73.4504C109.081 73.8203 109.131 74.2303 109.062 74.6288C108.993 75.0273 108.808 75.3965 108.53 75.6899ZM90.81 37.4199C90.4253 37.0091 89.9608 36.6811 89.445 36.4558C88.9292 36.2306 88.3728 36.1129 87.81 36.11H3.81C3.40937 36.1102 3.01749 36.2272 2.68235 36.4468C2.34722 36.6663 2.08338 36.9788 1.92313 37.346C1.76288 37.7132 1.71318 38.1191 1.78012 38.5141C1.84706 38.9091 2.02772 39.2761 2.3 39.57L20 58.58C20.3847 58.9908 20.8492 59.3188 21.365 59.5441C21.8808 59.7693 22.4372 59.887 23 59.8899H107C107.4 59.8878 107.79 59.7693 108.124 59.5491C108.458 59.3288 108.72 59.0162 108.879 58.6494C109.038 58.2826 109.087 57.8774 109.019 57.4833C108.952 57.0892 108.772 56.7232 108.5 56.43L90.81 37.4199ZM3.81 23.7699H87.81C88.3732 23.7694 88.9303 23.6527 89.4464 23.4273C89.9626 23.202 90.4267 22.8726 90.81 22.4599L108.53 3.45995C108.808 3.16647 108.993 2.79726 109.062 2.39877C109.131 2.00028 109.081 1.59031 108.917 1.22045C108.754 0.850591 108.484 0.537368 108.143 0.320195C107.802 0.103021 107.404 -0.0084012 107 -5.10783e-05H23C22.4368 0.000541762 21.8797 0.117167 21.3636 0.342553C20.8474 0.567938 20.3833 0.897249 20 1.30995L2.3 20.3099C2.02772 20.6038 1.84706 20.9708 1.78012 21.3658C1.71318 21.7608 1.76288 22.1667 1.92313 22.5339C2.08338 22.9011 2.34722 23.2136 2.68235 23.4331C3.01749 23.6527 3.40937 23.7697 3.81 23.7699Z"
|
||||
fill="url(#paint0_linear_1064_606)" id="path2" />
|
||||
<path
|
||||
d="M210.94 40.6002H166V25.8002H222.62V11.0002H165.85C163.91 10.9897 161.988 11.3613 160.192 12.0938C158.396 12.8264 156.761 13.9055 155.383 15.2696C154.004 16.6337 152.907 18.2561 152.155 20.044C151.403 21.832 151.01 23.7506 151 25.6902V40.6902C151.008 42.6315 151.398 44.5523 152.149 46.3425C152.9 48.1328 153.996 49.7575 155.375 51.1237C156.755 52.49 158.39 53.5709 160.187 54.3047C161.984 55.0385 163.909 55.4108 165.85 55.4002H210.85V70.2002H152.07V85.0002H210.94C212.88 85.0108 214.802 84.6391 216.598 83.9066C218.394 83.174 220.029 82.0949 221.407 80.7308C222.786 79.3667 223.883 77.7444 224.635 75.9564C225.387 74.1684 225.78 72.2498 225.79 70.3102V55.3102C225.782 53.3689 225.392 51.4482 224.641 49.6579C223.89 47.8676 222.794 46.2429 221.415 44.8767C220.035 43.5105 218.4 42.4296 216.603 41.6958C214.806 40.962 212.881 40.5897 210.94 40.6002Z"
|
||||
fill="white" id="path4" style="fill:#000000;fill-opacity:1" />
|
||||
<path
|
||||
d="M298 11H252.89C250.947 10.9842 249.02 11.3519 247.219 12.0821C245.419 12.8123 243.78 13.8905 242.397 15.2552C241.013 16.6198 239.913 18.2439 239.159 20.0345C238.404 21.8251 238.01 23.747 238 25.69V70.31C238.01 72.253 238.404 74.1749 239.159 75.9655C239.913 77.7561 241.013 79.3802 242.397 80.7448C243.78 82.1095 245.419 83.1877 247.219 83.9179C249.02 84.6481 250.947 85.0158 252.89 85H298C299.94 85.0105 301.862 84.6389 303.658 83.9064C305.454 83.1738 307.089 82.0947 308.467 80.7306C309.846 79.3665 310.943 77.7441 311.695 75.9562C312.447 74.1682 312.84 72.2496 312.85 70.31V25.69C312.84 23.7504 312.447 21.8318 311.695 20.0438C310.943 18.2559 309.846 16.6335 308.467 15.2694C307.089 13.9053 305.454 12.8262 303.658 12.0936C301.862 11.3611 299.94 10.9895 298 11ZM297.89 70.2H253V25.8H297.87L297.89 70.2Z"
|
||||
fill="white" id="path6" style="fill:#000000" />
|
||||
<path
|
||||
d="M456 11.0001H412C410.06 10.9896 408.138 11.3612 406.342 12.0937C404.546 12.8263 402.911 13.9054 401.533 15.2695C400.154 16.6336 399.057 18.256 398.305 20.0439C397.553 21.8319 397.16 23.7505 397.15 25.6901V85.0001H412.15V60.6901H455.95V85.0001H470.95V25.6901C470.94 23.742 470.544 21.8152 469.786 20.0206C469.027 18.2261 467.922 16.5993 466.532 15.2338C465.143 13.8684 463.497 12.7914 461.689 12.0648C459.881 11.3382 457.948 10.9764 456 11.0001ZM455.89 45.8901H412.09V25.8001H455.89V45.8901Z"
|
||||
fill="white" id="path8" style="fill:#000000" />
|
||||
<path
|
||||
d="M631.15 11.0002H587.15C585.21 10.9897 583.288 11.3613 581.492 12.0938C579.696 12.8264 578.062 13.9055 576.683 15.2696C575.304 16.6337 574.207 18.2561 573.455 20.044C572.703 21.832 572.31 23.7506 572.3 25.6902V85.0002H587.3V60.6902H631V85.0002H646V25.6902C645.99 23.7506 645.597 21.832 644.845 20.044C644.093 18.2561 642.996 16.6337 641.617 15.2696C640.238 13.9055 638.604 12.8264 636.808 12.0938C635.012 11.3613 633.09 10.9897 631.15 11.0002ZM631 45.8902H587.2V25.8002H631V45.8902Z"
|
||||
fill="white" id="path10" style="fill:#000000" />
|
||||
<path
|
||||
d="M544 70.2001H538L516.55 17.2001C515.815 15.3716 514.55 13.8045 512.918 12.6999C511.286 11.5952 509.361 11.0033 507.39 11.0001H494.08C492.786 10.9935 491.504 11.2418 490.307 11.7307C489.109 12.2197 488.02 12.9397 487.1 13.8497C486.181 14.7598 485.45 15.8419 484.949 17.0345C484.448 18.227 484.187 19.5066 484.18 20.8001V85.0001H499.18V25.8001H505.18L526.62 78.8001C527.367 80.6251 528.642 82.1858 530.281 83.283C531.919 84.3803 533.848 84.9641 535.82 84.9601H549.13C550.424 84.9667 551.706 84.7185 552.903 84.2295C554.101 83.7406 555.19 83.0205 556.11 82.1105C557.029 81.2005 557.76 80.1183 558.261 78.9258C558.762 77.7332 559.023 76.4537 559.03 75.1601V11.0001H544V70.2001Z"
|
||||
fill="white" id="path12" style="fill:#000000" />
|
||||
<path
|
||||
d="M341.1 11H326.1V70.31C326.11 72.2539 326.505 74.1766 327.26 75.9678C328.015 77.7591 329.116 79.3836 330.5 80.7484C331.884 82.1132 333.525 83.1912 335.326 83.9208C337.128 84.6504 339.056 85.0171 341 85H386V70.2H341.1V11Z"
|
||||
fill="white" id="path14" style="fill:#000000" />
|
||||
</g>
|
||||
<defs id="defs34">
|
||||
<linearGradient id="paint0_linear_1064_606" x1="10.81" y1="98.29" x2="98.89" y2="-1.01005"
|
||||
gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.08" stop-color="#9945FF" id="stop18" />
|
||||
<stop offset="0.3" stop-color="#8752F3" id="stop20" />
|
||||
<stop offset="0.5" stop-color="#5497D5" id="stop22" />
|
||||
<stop offset="0.6" stop-color="#43B4CA" id="stop24" />
|
||||
<stop offset="0.72" stop-color="#28E0B9" id="stop26" />
|
||||
<stop offset="0.97" stop-color="#19FB9B" id="stop28" />
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1064_606">
|
||||
<rect width="646" height="96" fill="white" id="rect31" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
4
src/assets/icons/bwu-icon.svg
Normal file
4
src/assets/icons/bwu-icon.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="32" height="32" fill="#1570EF"/>
|
||||
<path d="M4.43466 24V9.45455H10.0028C11.054 9.45455 11.9276 9.62026 12.6236 9.9517C13.3243 10.2784 13.8475 10.7259 14.1932 11.294C14.5436 11.8622 14.7188 12.5062 14.7188 13.2259C14.7188 13.8177 14.6051 14.3243 14.3778 14.7457C14.1506 15.1624 13.8452 15.5009 13.4616 15.7614C13.0781 16.0218 12.6496 16.2088 12.1761 16.3224V16.4645C12.6922 16.4929 13.187 16.6515 13.6605 16.9403C14.1387 17.2244 14.5294 17.6269 14.8324 18.1477C15.1354 18.6686 15.2869 19.2983 15.2869 20.0369C15.2869 20.7898 15.1046 21.4669 14.7401 22.0682C14.3755 22.6648 13.8262 23.1359 13.0923 23.4815C12.3584 23.8272 11.4351 24 10.3224 24H4.43466ZM7.0696 21.7983H9.90341C10.8598 21.7983 11.5488 21.616 11.9702 21.2514C12.3963 20.8821 12.6094 20.4086 12.6094 19.831C12.6094 19.4001 12.5028 19.0118 12.2898 18.6662C12.0767 18.3158 11.7737 18.0412 11.3807 17.8423C10.9877 17.6387 10.5189 17.5369 9.97443 17.5369H7.0696V21.7983ZM7.0696 15.6406H9.67614C10.1307 15.6406 10.5402 15.5578 10.9048 15.392C11.2694 15.2216 11.5559 14.9825 11.7642 14.6747C11.9773 14.3622 12.0838 13.9929 12.0838 13.5668C12.0838 13.0033 11.8849 12.5393 11.4872 12.1747C11.0942 11.8101 10.5095 11.6278 9.73295 11.6278H7.0696V15.6406ZM25.5482 9.45455H28.1832V18.9574C28.1832 19.9991 27.937 20.9152 27.4445 21.706C26.9568 22.4967 26.2703 23.1146 25.3849 23.5597C24.4995 24 23.4649 24.2202 22.2812 24.2202C21.0927 24.2202 20.0558 24 19.1704 23.5597C18.285 23.1146 17.5984 22.4967 17.1107 21.706C16.623 20.9152 16.3792 19.9991 16.3792 18.9574V9.45455H19.0141V18.7372C19.0141 19.3433 19.1467 19.883 19.4119 20.3565C19.6817 20.83 20.0605 21.2017 20.5482 21.4716C21.0359 21.7367 21.6136 21.8693 22.2812 21.8693C22.9488 21.8693 23.5264 21.7367 24.0141 21.4716C24.5066 21.2017 24.8853 20.83 25.1505 20.3565C25.4156 19.883 25.5482 19.3433 25.5482 18.7372V9.45455Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
1
src/assets/icons/groups.svg
Normal file
1
src/assets/icons/groups.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#5f6368"><g><rect fill="none" height="24" width="24"/></g><g><g/><g><g><path d="M16.67,13.13C18.04,14.06,19,15.32,19,17v3h4v-3 C23,14.82,19.43,13.53,16.67,13.13z" fill-rule="evenodd"/></g><g><circle cx="9" cy="8" fill-rule="evenodd" r="4"/></g><g><path d="M15,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4c-0.47,0-0.91,0.1-1.33,0.24 C14.5,5.27,15,6.58,15,8s-0.5,2.73-1.33,3.76C14.09,11.9,14.53,12,15,12z" fill-rule="evenodd"/></g><g><path d="M9,13c-2.67,0-8,1.34-8,4v3h16v-3C17,14.34,11.67,13,9,13z" fill-rule="evenodd"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 659 B |
52
src/assets/icons/jupiter_ag_logo.svg
Normal file
52
src/assets/icons/jupiter_ag_logo.svg
Normal file
@@ -0,0 +1,52 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#141726;}
|
||||
.st1{fill:url(#SVGID_1_);}
|
||||
.st2{fill:url(#SVGID_2_);}
|
||||
.st3{fill:url(#SVGID_3_);}
|
||||
.st4{fill:url(#SVGID_4_);}
|
||||
.st5{fill:url(#SVGID_5_);}
|
||||
.st6{fill:url(#SVGID_6_);}
|
||||
</style>
|
||||
<circle class="st0" cx="400" cy="400" r="400"/>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="574.9257" y1="665.8727" x2="248.5257" y2="142.3127" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st1" d="M536,568.9c-66.8-108.5-166.4-170-289.4-195.6c-43.5-9-87.2-8.9-129.4,7.7c-28.9,11.4-33.3,23.4-19.7,53.7
|
||||
c92.4-21.9,178.4-1.5,258.9,45c81.1,46.9,141.6,112.2,169.1,205c38.6-11.8,43.6-18.3,34.3-54.2C554.3,609.4,547.4,587.4,536,568.9
|
||||
L536,568.9z"/>
|
||||
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="572.5896" y1="667.3303" x2="246.1996" y2="143.7703" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st2" d="M609.1,480.6c-85.8-125-207.3-194.9-355.8-218.3c-39.3-6.2-79.4-4.5-116.2,14.3c-17.6,9-33.2,20.5-37.4,44.9
|
||||
c115.8-31.9,219.7-3.7,317.5,53c98.3,57,175.1,133.5,205,251.1c20.8-18.4,24.5-41,19.1-62C633.9,534.8,625.5,504.5,609.1,480.6
|
||||
L609.1,480.6z"/>
|
||||
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="577.0148" y1="664.5671" x2="250.6247" y2="141.0071" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st3" d="M105,488.6c7.3,16.2,12.1,34.5,23,47.6c5.5,6.7,22.2,4.1,33.8,5.7c1.8,0.2,3.6,0.5,5.4,0.7
|
||||
c102.9,15.3,184.1,65.1,242.1,152c3.4,5.1,8.9,12.7,13.4,12.7c17.4-0.1,34.9-2.8,52.5-4.5C449,557.5,232.8,438.3,105,488.6
|
||||
L105,488.6z"/>
|
||||
<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="569.0272" y1="669.5518" x2="242.6272" y2="145.9917" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st4" d="M656.6,366.7C599.9,287.4,521.7,234.6,432.9,197c-61.5-26.1-125.2-41.8-192.8-33.7
|
||||
c-23.4,2.8-45.3,9.5-63.4,24.7c230.9,5.8,404.6,105.8,524,303.3c0.2-13.1,2.2-27.7-2.6-39.5C686.1,422.5,674.7,392,656.6,366.7z"/>
|
||||
<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="571.6973" y1="667.8917" x2="245.2973" y2="144.3317" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st5" d="M709.8,325.3c-47-178.9-238-265-379.2-221.4C482.7,133.9,607.5,206.4,709.8,325.3z"/>
|
||||
<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="579.0382" y1="663.3111" x2="252.6482" y2="139.7511" gradientTransform="matrix(1 0 0 -1 0 800)">
|
||||
<stop offset="0.16" style="stop-color:#C6F462"/>
|
||||
<stop offset="0.89" style="stop-color:#33D9FF"/>
|
||||
</linearGradient>
|
||||
<path class="st6" d="M155.4,583.9c54.6,69.3,124,109.7,213,122.8C334.4,643.2,214.6,574.5,155.4,583.9L155.4,583.9z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
35
src/assets/icons/jupiter_logo_banner_dark.svg
Normal file
35
src/assets/icons/jupiter_logo_banner_dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.2 KiB |
35
src/assets/icons/jupiter_logo_banner_light.svg
Normal file
35
src/assets/icons/jupiter_logo_banner_light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.2 KiB |
24
src/assets/icons/solana_logo_banner.svg
Normal file
24
src/assets/icons/solana_logo_banner.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg width="646" height="96" viewBox="0 0 646 96" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_1064_606)">
|
||||
<path d="M108.53 75.6899L90.81 94.6899C90.4267 95.1026 89.9626 95.432 89.4464 95.6573C88.9303 95.8827 88.3732 95.9994 87.81 95.9999H3.81C3.40937 95.9997 3.01749 95.8827 2.68235 95.6631C2.34722 95.4436 2.08338 95.1311 1.92313 94.7639C1.76288 94.3967 1.71318 93.9908 1.78012 93.5958C1.84706 93.2008 2.02772 92.8338 2.3 92.5399L20 73.5399C20.3833 73.1273 20.8474 72.7979 21.3636 72.5725C21.8797 72.3472 22.4368 72.2305 23 72.2299H107C107.404 72.2216 107.802 72.333 108.143 72.5502C108.484 72.7674 108.754 73.0806 108.917 73.4504C109.081 73.8203 109.131 74.2303 109.062 74.6288C108.993 75.0273 108.808 75.3965 108.53 75.6899ZM90.81 37.4199C90.4253 37.0091 89.9608 36.6811 89.445 36.4558C88.9292 36.2306 88.3728 36.1129 87.81 36.11H3.81C3.40937 36.1102 3.01749 36.2272 2.68235 36.4468C2.34722 36.6663 2.08338 36.9788 1.92313 37.346C1.76288 37.7132 1.71318 38.1191 1.78012 38.5141C1.84706 38.9091 2.02772 39.2761 2.3 39.57L20 58.58C20.3847 58.9908 20.8492 59.3188 21.365 59.5441C21.8808 59.7693 22.4372 59.887 23 59.8899H107C107.4 59.8878 107.79 59.7693 108.124 59.5491C108.458 59.3288 108.72 59.0162 108.879 58.6494C109.038 58.2826 109.087 57.8774 109.019 57.4833C108.952 57.0892 108.772 56.7232 108.5 56.43L90.81 37.4199ZM3.81 23.7699H87.81C88.3732 23.7694 88.9303 23.6527 89.4464 23.4273C89.9626 23.202 90.4267 22.8726 90.81 22.4599L108.53 3.45995C108.808 3.16647 108.993 2.79726 109.062 2.39877C109.131 2.00028 109.081 1.59031 108.917 1.22045C108.754 0.850591 108.484 0.537368 108.143 0.320195C107.802 0.103021 107.404 -0.0084012 107 -5.10783e-05H23C22.4368 0.000541762 21.8797 0.117167 21.3636 0.342553C20.8474 0.567938 20.3833 0.897249 20 1.30995L2.3 20.3099C2.02772 20.6038 1.84706 20.9708 1.78012 21.3658C1.71318 21.7608 1.76288 22.1667 1.92313 22.5339C2.08338 22.9011 2.34722 23.2136 2.68235 23.4331C3.01749 23.6527 3.40937 23.7697 3.81 23.7699Z" fill="url(#paint0_linear_1064_606)"/>
|
||||
<path d="M210.94 40.6002H166V25.8002H222.62V11.0002H165.85C163.91 10.9897 161.988 11.3613 160.192 12.0938C158.396 12.8264 156.761 13.9055 155.383 15.2696C154.004 16.6337 152.907 18.2561 152.155 20.044C151.403 21.832 151.01 23.7506 151 25.6902V40.6902C151.008 42.6315 151.398 44.5523 152.149 46.3425C152.9 48.1328 153.996 49.7575 155.375 51.1237C156.755 52.49 158.39 53.5709 160.187 54.3047C161.984 55.0385 163.909 55.4108 165.85 55.4002H210.85V70.2002H152.07V85.0002H210.94C212.88 85.0108 214.802 84.6391 216.598 83.9066C218.394 83.174 220.029 82.0949 221.407 80.7308C222.786 79.3667 223.883 77.7444 224.635 75.9564C225.387 74.1684 225.78 72.2498 225.79 70.3102V55.3102C225.782 53.3689 225.392 51.4482 224.641 49.6579C223.89 47.8676 222.794 46.2429 221.415 44.8767C220.035 43.5105 218.4 42.4296 216.603 41.6958C214.806 40.962 212.881 40.5897 210.94 40.6002Z" fill="white"/>
|
||||
<path d="M298 11H252.89C250.947 10.9842 249.02 11.3519 247.219 12.0821C245.419 12.8123 243.78 13.8905 242.397 15.2552C241.013 16.6198 239.913 18.2439 239.159 20.0345C238.404 21.8251 238.01 23.747 238 25.69V70.31C238.01 72.253 238.404 74.1749 239.159 75.9655C239.913 77.7561 241.013 79.3802 242.397 80.7448C243.78 82.1095 245.419 83.1877 247.219 83.9179C249.02 84.6481 250.947 85.0158 252.89 85H298C299.94 85.0105 301.862 84.6389 303.658 83.9064C305.454 83.1738 307.089 82.0947 308.467 80.7306C309.846 79.3665 310.943 77.7441 311.695 75.9562C312.447 74.1682 312.84 72.2496 312.85 70.31V25.69C312.84 23.7504 312.447 21.8318 311.695 20.0438C310.943 18.2559 309.846 16.6335 308.467 15.2694C307.089 13.9053 305.454 12.8262 303.658 12.0936C301.862 11.3611 299.94 10.9895 298 11ZM297.89 70.2H253V25.8H297.87L297.89 70.2Z" fill="white"/>
|
||||
<path d="M456 11.0001H412C410.06 10.9896 408.138 11.3612 406.342 12.0937C404.546 12.8263 402.911 13.9054 401.533 15.2695C400.154 16.6336 399.057 18.256 398.305 20.0439C397.553 21.8319 397.16 23.7505 397.15 25.6901V85.0001H412.15V60.6901H455.95V85.0001H470.95V25.6901C470.94 23.742 470.544 21.8152 469.786 20.0206C469.027 18.2261 467.922 16.5993 466.532 15.2338C465.143 13.8684 463.497 12.7914 461.689 12.0648C459.881 11.3382 457.948 10.9764 456 11.0001ZM455.89 45.8901H412.09V25.8001H455.89V45.8901Z" fill="white"/>
|
||||
<path d="M631.15 11.0002H587.15C585.21 10.9897 583.288 11.3613 581.492 12.0938C579.696 12.8264 578.062 13.9055 576.683 15.2696C575.304 16.6337 574.207 18.2561 573.455 20.044C572.703 21.832 572.31 23.7506 572.3 25.6902V85.0002H587.3V60.6902H631V85.0002H646V25.6902C645.99 23.7506 645.597 21.832 644.845 20.044C644.093 18.2561 642.996 16.6337 641.617 15.2696C640.238 13.9055 638.604 12.8264 636.808 12.0938C635.012 11.3613 633.09 10.9897 631.15 11.0002ZM631 45.8902H587.2V25.8002H631V45.8902Z" fill="white"/>
|
||||
<path d="M544 70.2001H538L516.55 17.2001C515.815 15.3716 514.55 13.8045 512.918 12.6999C511.286 11.5952 509.361 11.0033 507.39 11.0001H494.08C492.786 10.9935 491.504 11.2418 490.307 11.7307C489.109 12.2197 488.02 12.9397 487.1 13.8497C486.181 14.7598 485.45 15.8419 484.949 17.0345C484.448 18.227 484.187 19.5066 484.18 20.8001V85.0001H499.18V25.8001H505.18L526.62 78.8001C527.367 80.6251 528.642 82.1858 530.281 83.283C531.919 84.3803 533.848 84.9641 535.82 84.9601H549.13C550.424 84.9667 551.706 84.7185 552.903 84.2295C554.101 83.7406 555.19 83.0205 556.11 82.1105C557.029 81.2005 557.76 80.1183 558.261 78.9258C558.762 77.7332 559.023 76.4537 559.03 75.1601V11.0001H544V70.2001Z" fill="white"/>
|
||||
<path d="M341.1 11H326.1V70.31C326.11 72.2539 326.505 74.1766 327.26 75.9678C328.015 77.7591 329.116 79.3836 330.5 80.7484C331.884 82.1132 333.525 83.1912 335.326 83.9208C337.128 84.6504 339.056 85.0171 341 85H386V70.2H341.1V11Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_1064_606" x1="10.81" y1="98.29" x2="98.89" y2="-1.01005" gradientUnits="userSpaceOnUse">
|
||||
<stop offset="0.08" stop-color="#9945FF"/>
|
||||
<stop offset="0.3" stop-color="#8752F3"/>
|
||||
<stop offset="0.5" stop-color="#5497D5"/>
|
||||
<stop offset="0.6" stop-color="#43B4CA"/>
|
||||
<stop offset="0.72" stop-color="#28E0B9"/>
|
||||
<stop offset="0.97" stop-color="#19FB9B"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_1064_606">
|
||||
<rect width="646" height="96" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
3
src/assets/icons/spedometer-icon.svg
Normal file
3
src/assets/icons/spedometer-icon.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12M22 12C22 6.47715 17.5228 2 12 2M22 12H19.5M2 12C2 6.47715 6.47715 2 12 2M2 12H4.5M12 2V4.5M19.0784 5L13.4999 10.5M19.0784 19.0784L18.8745 18.8745C18.1827 18.1827 17.8368 17.8368 17.4331 17.5894C17.0753 17.3701 16.6851 17.2085 16.2769 17.1105C15.8166 17 15.3274 17 14.349 17L9.65096 17C8.6726 17 8.18342 17 7.72307 17.1106C7.31493 17.2086 6.92475 17.3702 6.56686 17.5895C6.1632 17.8369 5.8173 18.1828 5.12549 18.8746L4.92163 19.0784M4.92163 5L6.65808 6.73645M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 834 B |
Reference in New Issue
Block a user