Merge pull request #1824 from bluewave-labs/fix/remove-prism-components
fix: remove accidental prism components
This commit is contained in:
9 files changed
-1027
No files matched your search
@@ -1,17 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
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);
|
||||
}
|
||||
@@ -1,158 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,189 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
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;
|
||||
@@ -1,295 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
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;
|
||||
@@ -1,55 +0,0 @@
|
||||
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%',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,33 +0,0 @@
|
||||
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;
|
||||
Reference in new issue
Block a user