sync
This commit is contained in:
Alex Holliday committed
1 parent
6dbb6dad7e
commit
7e4e6b7d1d
28 files changed
+1847
-2
No files matched your search
@@ -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;
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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%',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user