zkemail · Eeshau · Aug 2, 2024 · Aug 7, 2024 · Aug 7, 2024 · Aug 18, 2024
diff --git a/package.json b/package.json
@@ -8,5 +8,17 @@
   "keywords": [],
   "author": "",
   "license": "MIT",
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.40",
+    "react-router-dom": "^6.26.0",
+    "tailwindcss": "^3.4.7"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.6",
+    "@mui/material": "^5.16.6"
+  }
 }
diff --git a/packages/app/index.css b/packages/app/index.css
@@ -2,11 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  font-family: "Space Grotesk", sans-serif;
+  background-color: #ffbfbf;
+  background: radial-gradient(70.71% 70.71% at 50% 50%, #FFF 19%, rgba(255, 255, 255, 0.00) 61%), linear-gradient(38deg, rgba(255, 255, 255, 0.00) 60%, rgba(255, 255, 255, 0.69) 100%), linear-gradient(45deg, #FFF 10%, rgba(255, 255, 255, 0.00) 23.5%), linear-gradient(36deg, #FFF 12.52%, rgba(255, 255, 255, 0.00) 76.72%), linear-gradient(214deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 220, 234, 0.40) 37.53%, rgba(255, 255, 255, 0.00) 71%), linear-gradient(212deg, rgba(255, 255, 255, 0.00) 15%, #E4F1FE 72.5%, rgba(255, 255, 255, 0.00) 91.5%);
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:  "Space Grotesk", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

diff --git a/packages/app/index.html b/packages/app/index.html
@@ -39,6 +39,17 @@
       window.process = process;
       window.setImmediate = setImmediate;
     </script>
+
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap" rel="stylesheet">
+
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap');
+    </style>
+
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/packages/app/src/App.tsx b/packages/app/src/App.tsx
@@ -1,4 +1,82 @@
+// import { MainPage } from "./pages/MainPage";
+// import "./styles.css";
+// import {
+//   BrowserRouter as Router,
+//   Route,
+//   Routes,
+//   Link,
+// } from "react-router-dom";
+// import { useLocation } from "react-use";
+// import styled from "styled-components";
+// import { ConnectButton } from "@rainbow-me/rainbowkit";
+
+// const NavSection = () => {
+//   const { pathname } = useLocation();
+
+//   return (
+//     <Nav>
+//       <Logo to={"https://prove.email/"}>
+//         ZK-Email
+//       </Logo>
+//       <div
+//         style={{
+//           display: "flex",
+//           alignItems: "center",
+//           gap: "1rem",
+//         }}
+//       >
+//         <DocsLink href="https://prove.email/docs">Docs</DocsLink>
+//         <ConnectButton />
+//       </div>
+//     </Nav>
+//   );
+// };
+
+// const App = () => {
+//   return (
+//     <Router>
+//       <div>
+//         <NavSection />
+
+//         <Routes>
+//           <Route path="/" element={<MainPage />} />
+//           <Route element={<>Not found</>} />
+//         </Routes>
+//       </div>
+//     </Router>
+//   );
+// };
+
+// export default App;
+
+// const Logo = styled(Link)`
+//   text-transform: uppercase;
+//   letter-spacing: 0.04em;
+//   color: #fff;
+//   text-decoration: none;
+//   font-size: 1.2rem;
+// `;
+
+// const Nav = styled.nav`
+//   display: flex;
+//   align-items: center;
+//   justify-content: space-between;
+//   margin: 12px;
+// `;
+
+// const DocsLink = styled.a`
+//   color: rgba(255, 255, 255, 0.8);
+//   text-decoration: none;
+//   underline: none;
+//   transition: all 0.2s ease-in-out;
+//   &:hover {
+//     color: rgba(255, 255, 255, 1);
+//   }
+// `;
+
+
 import { MainPage } from "./pages/MainPage";
+import AboutPage from "./pages/AboutPage";
 import "./styles.css";
 import {
   BrowserRouter as Router,
@@ -10,36 +88,16 @@ import { useLocation } from "react-use";
 import styled from "styled-components";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 
-const NavSection = () => {
-  const { pathname } = useLocation();
-
-  return (
-    <Nav>
-      <Logo to={"https://prove.email/"}>
-        ZK-Email
-      </Logo>
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: "1rem",
-        }}
-      >
-        <DocsLink href="https://prove.email/docs">Docs</DocsLink>
-        <ConnectButton />
-      </div>
-    </Nav>
-  );
-};
 
 const App = () => {
+  const { pathname } = useLocation();
   return (
     <Router>
       <div>
-        <NavSection />
 
         <Routes>
           <Route path="/" element={<MainPage />} />
+          <Route path="/about" element={<AboutPage/>} />
           <Route element={<>Not found</>} />
         </Routes>
       </div>
@@ -49,27 +107,3 @@ const App = () => {
 
 export default App;
 
-const Logo = styled(Link)`
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: #fff;
-  text-decoration: none;
-  font-size: 1.2rem;
-`;
-
-const Nav = styled.nav`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 12px;
-`;
-
-const DocsLink = styled.a`
-  color: rgba(255, 255, 255, 0.8);
-  text-decoration: none;
-  underline: none;
-  transition: all 0.2s ease-in-out;
-  &:hover {
-    color: rgba(255, 255, 255, 1);
-  }
-`;
diff --git a/packages/app/src/components/Accordion.tsx b/packages/app/src/components/Accordion.tsx
@@ -0,0 +1,97 @@
+import React, { FC } from 'react';
+import {
+  Accordion as MuiAccordion,
+  AccordionSummary,
+  AccordionDetails,
+  Typography,
+  styled,
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+
+// Define the props types
+interface AccordionProps {
+  title: string;
+  contents: string;
+  alignment?: 'left' | 'right';
+}
+
+const CustomAccordion = styled(MuiAccordion)(({ theme }) => ({
+  marginBottom: theme.spacing(2),
+  '&:before': {
+    display: 'none',
+  },
+  background: 'inherit',
+  boxShadow: 'none',
+  borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
+  '& .MuiAccordionSummary-root': {
+    backgroundColor: 'rgba(0, 0, 0, 0)',
+    '&:hover .MuiAccordionSummary-expandIconWrapper': {
+      color: theme.palette.secondary.main,
+    },
+  },
+  '& .MuiAccordionSummary-content': {
+    margin: 0,
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+  },
+  '& .MuiAccordionSummary-expandIconWrapper': {
+    marginRight: theme.spacing(1),
+    transition: 'transform 0.2s',
+  },
+  '& .MuiAccordionSummary-expandIconWrapper.Mui-expanded': {
+    transform: 'rotate(180deg)',
+  },
+  '& .MuiAccordionDetails-root': {
+    padding: theme.spacing(2),
+  },
+}));
+
+const Accordion: FC<AccordionProps> = ({ title, contents, alignment = 'left' }) => {
+  return (
+    <CustomAccordion>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        aria-controls="panel-content"
+        id="panel-header"
+        sx={{
+          flexDirection: alignment === 'right' ? 'row-reverse' : 'row',
+          justifyContent: alignment === 'right' ? 'space-between' : 'flex-start',
+          '& .MuiAccordionSummary-expandIconWrapper': {
+            order: alignment === 'right' ? 2 : 1,
+            marginRight: alignment === 'right' ? 0 : 1,
+            marginLeft: alignment === 'right' ? 1 : 0,
+          },
+          width: '100%',
+        }}
+      >
+        <Typography
+          color="black"
+          fontWeight="500"
+          sx={{
+            fontSize: { xs: '12px', sm: '15px', md: '19px' },
+            textAlign: alignment === 'right' ? 'right' : 'left',
+            flexGrow: 1,
+          }}
+        >
+          {title}
+        </Typography>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Typography
+          sx={{
+            paddingLeft: alignment === 'right' ? '0px' : '0px',
+            paddingRight: alignment === 'right' ? '0px' : '0px',
+            color: '#666363',
+            fontSize: { xs: '11px', sm: '14px', md: '16px' },
+            textAlign: alignment === 'right' ? 'right' : 'left',
+          }}
+        >
+          {contents}
+        </Typography>
+      </AccordionDetails>
+    </CustomAccordion>
+  );
+};
+
+export default Accordion;