feat: validator

package.json

@@ -7,8 +7,12 @@
     "node": "~14.17.0"
   },
   "dependencies": {
+    "@emotion/react": "^11.6.0",
+    "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
+    "@mui/icons-material": "^5.1.1",
+    "@mui/material": "^5.1.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/App.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { Header } from "./components/Header";
+import { Banner } from "./components/Banner";
 import { Cards } from "./components/Cards";
 import SmoothScroll from "smooth-scroll";
 import "./App.css";
@@ -15,6 +16,7 @@ import { TEXT_BROWN } from "./constants/colors";
 import clsx from "clsx";
 import Footer from "./components/Footer";
 import Roadmap from "./components/Roadmap";
+import Validator from "./components/Validator";
 
 export const scroll = new SmoothScroll('a[href*="#"]', {
   speed: 1000,
@@ -100,6 +102,7 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <Header />
+      <Banner />
       <div
         className={
           isXsScreenAndSmaller
@@ -149,6 +152,7 @@ const App = () => {
           <Cards />
         </div>
       </div>
+      <Validator />
       <Roadmap />
       <Footer />
     </ThemeProvider>

src/components/Banner.jsx

@@ -0,0 +1,65 @@
+import React from "react";
+import Paper from "@material-ui/core/Paper";
+import ArrowRightAltIcon from "@mui/icons-material/ArrowRightAlt";
+import { makeStyles } from "@material-ui/core/styles";
+import { createTheme } from "@material-ui/core/styles";
+import { ThemeProvider } from "@material-ui/core/styles";
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: "#FFFFFF",
+    },
+    secondary: {
+      main: "#000000",
+      fontSize: "2rem",
+    },
+  },
+});
+
+const useStyles = makeStyles((theme) => ({
+  "@global": {},
+  paper: {
+    textAlign: "center",
+    padding: "10px",
+    color: "white",
+    fontWeight: "600",
+    fontSize: "1.25em",
+    background: "linear-gradient(89.55deg, #71EA9E 0%, #7E3EB0 100%)",
+    lineHeight: "42px",
+  },
+  icon: {
+    paddingTop: "8px",
+    transform: "scale(1.5)",
+    "&:hover": {
+      color: "black",
+    },
+  },
+}));
+
+export function Banner() {
+  const classes = useStyles();
+  return (
+    <ThemeProvider theme={theme}>
+      {/* <Box
+        sx={{
+          p: 2,
+          bgcolor: "background.default",
+          display: "grid",
+          gridTemplateColumns: { md: "1fr 1fr" },
+          gap: 2,
+        }}
+      > */}{" "}
+      <Paper variant="outlined" className={classes.paper}>
+        We’re the first decentralized organisation to launch a validator node on
+        Solana.
+        <br />
+        Stake with us and earn up to 7% APY on your SOL!{" "}
+        <ArrowRightAltIcon
+          className={classes.icon}
+          onClick={(event) => (window.location.href = "http://google.com")}
+        />
+      </Paper>
+    </ThemeProvider>
+  );
+}

src/components/Faq.jsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import RemoveIcon from '@mui/icons-material/Remove';
+import MuiAccordion from '@mui/material/Accordion';
+import MuiAccordionSummary from '@mui/material/AccordionSummary';
+import MuiAccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+
+const Accordion = styled((props) => (
+  <MuiAccordion disableGutters elevation={0} square {...props} />
+))(({ theme }) => ({
+  '&:before': {
+    display: 'none',
+  },
+}));
+
+const AccordionSummary = styled((props) => (
+  <MuiAccordionSummary
+  disableGutters
+    expandIcon={<RemoveIcon sx={{ fontSize: '0.9rem' }} />}
+    {...props}
+  />
+))(({ theme }) => ({
+  backgroundColor: 'black',
+  color: 'white',
+  flexDirection: 'row-reverse',
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(90deg)',
+  },
+  '& .MuiAccordionSummary-content': {
+    marginLeft: theme.spacing(1),
+  },
+}));
+
+const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
+  padding: theme.spacing(2),
+//   borderTop: '1px solid rgba(0, 0, 0, .125)',
+}));
+
+export default function Faq() {
+  const [expanded, setExpanded] = React.useState('panel1');
+
+  const handleChange = (panel) => (event, newExpanded) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+
+  return (
+    <div>
+      <Accordion expanded={expanded === 'panel1'} onChange={handleChange('panel1')}>
+        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
+          <Typography>Collapsible Group Item #1</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === 'panel2'} onChange={handleChange('panel2')}>
+        <AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
+          <Typography>Collapsible Group Item #2</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+      <Accordion expanded={expanded === 'panel3'} onChange={handleChange('panel3')}>
+        <AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
+          <Typography>Collapsible Group Item #3</Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+            malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor
+            sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
+            sit amet blandit leo lobortis eget.
+          </Typography>
+        </AccordionDetails>
+      </Accordion>
+    </div>
+  );
+}

src/components/Roadmap.jsx

@@ -151,6 +151,13 @@ export default function Roadmap(props) {
       body: "",
       isActive: false,
     },
+    {
+      emoji: "⛓️",
+      emojiAria: "chains",
+      title: "Launch of DAO Validator",
+      body: "",
+      isActive: true,
+    },
     {
       emoji: "✈️",
       emojiAria: "airplane",