feat: update ui

website/docusaurus.config.ts

@@ -1,4 +1,3 @@
-import { themes as prismThemes } from "prism-react-renderer";
 import rehypeKatex from "rehype-katex";
 import remarkMath from "remark-math";
 
@@ -134,7 +133,6 @@ const config: Config = {
       ],
     },
     footer: {
-      style: "dark",
       links: [
         {
           title: "Docs",
@@ -174,10 +172,6 @@ const config: Config = {
       ],
       copyright: `Copyright © ${new Date().getFullYear()} Privacy and Scaling Explorations`,
     },
-    prism: {
-      theme: prismThemes.github,
-      darkTheme: prismThemes.dracula,
-    },
   } satisfies Preset.ThemeConfig,
 };
 

website/src/components/HomepageFeatures/index.tsx

@@ -1,22 +1,22 @@
 import Heading from "@theme/Heading";
 import clsx from "clsx";
 
-import mountainSvgImage from "../../../static/img/undraw_docusaurus_mountain.svg";
-import reactSvgImage from "../../../static/img/undraw_docusaurus_react.svg";
-import treeSvgImage from "../../../static/img/undraw_docusaurus_tree.svg";
+import boxImage from "../../../static/img/box.png";
+import chainImage from "../../../static/img/chain.png";
+import chartImage from "../../../static/img/chart.png";
 
 import styles from "./styles.module.css";
 
 interface FeatureItem {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<"svg">>;
+  img: string;
   description: JSX.Element;
 }
 
 const FeatureList: FeatureItem[] = [
   {
     title: "Highly secure",
-    Svg: mountainSvgImage,
+    img: boxImage as string,
     description: (
       <>
         MACI was designed to be a secure voting system. It is built using smart contracts on the Ethereum blockchain,
@@ -26,7 +26,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: "Protects privacy",
-    Svg: treeSvgImage,
+    img: chainImage as string,
     description: (
       <>
         With MACI, votes are encrypted before submitting them on-chain to ensure that your privacy is preserved when
@@ -36,7 +36,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: "Powered by zk-SNARKs",
-    Svg: reactSvgImage,
+    img: chartImage as string,
     description: (
       <>
         MACI is powered by zk-SNARKs, a cutting edge cryptographic technology that ensures votes are counted correctly
@@ -46,10 +46,10 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-const Feature = ({ title, Svg, description }: FeatureItem) => (
+const Feature = ({ title, img, description }: FeatureItem) => (
   <div className={clsx("col col--4")}>
     <div className="text--center">
-      <Svg className={styles.featureSvg} role="img" />
+      <img alt={title} className={styles.featureSvg} src={img} />
     </div>
 
     <div className="text--center padding-horiz--md">

website/src/components/HomepageFeatures/styles.module.css

@@ -6,6 +6,5 @@
 }
 
 .featureSvg {
-  height: 200px;
   width: 200px;
 }

website/src/css/custom.css

@@ -4,27 +4,65 @@
  * work well for content-centric websites.
  */
 
+/* imported fonts */
+@font-face {
+  font-family: ShareTechMono;
+  src: url("../../static/fonts/Share_Tech_Mono.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: DMMono;
+  src: url("../../static/fonts/DM_Mono.woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary: #5e5e5e;
+  --ifm-background-color: #ffffff;
+  --ifm-navbar-background-color: #ffffff;
+  --ifm-footer-background-color: #020203;
+  --ifm-footer-color: #ffffff;
+  --ifm-footer-link-color: #ffffff;
+  --ifm-link-color: #579bea;
+  --ifm-color-hero: #fcfcfc;
+  --ifm-font-family-base: DMMono;
+  --ifm-font-color-base: #0b0b0b;
   --ifm-code-font-size: 95%;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+[data-theme="dark"]:root {
+  --ifm-color-primary: #fcfcfc;
+  --ifm-background-color: #0b0b0b;
+  --ifm-navbar-background-color: #0b0b0b;
+  --ifm-font-color-base: #cdcdcd;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+h1 {
+  font-family: ShareTechMono;
+  font-size: 4rem;
+  color: var(--ifm-color-primary);
+}
+
+h2 {
+  font-family: ShareTechMono;
+  font-size: 3rem;
+  margin: 0;
+  color: var(--ifm-color-primary);
+}
+
+@media screen and (max-width: 996px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+  }
+}

website/src/pages/index.module.css

@@ -4,16 +4,27 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
-  text-align: center;
   position: relative;
+  height: 427px;
   overflow: hidden;
+  background-image: url("../../static/img/hero.svg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  padding: 8rem;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.heroTitle {
+  border: 2px solid white;
+  border-radius: 4px;
+  padding: 0rem 0.5rem;
+}
+
+.heroColor {
+  color: var(--ifm-color-hero);
 }
 
 .buttons {
@@ -28,3 +39,23 @@
   padding: 4rem;
   width: 100%;
 }
+
+.blue {
+  color: var(--ifm-link-color);
+}
+
+.borderBlue {
+  width: max-content;
+  border-bottom: 3px solid var(--ifm-link-color);
+  box-sizing: content-box;
+}
+
+@media screen and (max-width: 996px) {
+  .heroBanner {
+    padding: 1.5rem;
+  }
+
+  .introduction {
+    padding: 1.5rem;
+  }
+}

website/src/pages/index.tsx

@@ -2,16 +2,26 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Layout from "@theme/Layout";
 import clsx from "clsx";
 
-import Logo from "../../static/img/maci.svg";
 import HomepageFeatures from "../components/HomepageFeatures";
 
 import styles from "./index.module.css";
 
-const HomepageHeader = () => (
-  <header className={clsx("hero hero--primary", styles.heroBanner)}>
-    <div className="container">
-      <Logo height="50%" width="50%" />
+interface HomepageHeaderProps {
+  tagline: string;
+  title: string;
+}
+
+const HomepageHeader = ({ tagline, title }: HomepageHeaderProps) => (
+  <header className={clsx("hero hero--dark", styles.heroBanner)}>
+    <div className={styles.heroTitle}>
+      <h2 className={styles.heroColor}>{title}</h2>
     </div>
+
+    <h1 className={styles.heroColor}>
+      {tagline}
+
+      <span className={styles.blue}>.</span>
+    </h1>
   </header>
 );
 
@@ -23,26 +33,23 @@ const Home = (): JSX.Element => {
       description="Minimal Anti-Collusion Infrastructure (MACI) is an on-chain voting platform which protects privacy and minimizes the risk of collusion and bribery"
       title={`Minimal Anti-Collusion Infrastructure (${siteConfig.title})`}
     >
-      <HomepageHeader />
+      <HomepageHeader tagline={siteConfig.tagline} title={siteConfig.title} />
 
       <main>
         <section className={styles.introduction}>
           <div className="container">
-            <div>
-              <h1>What is MACI?</h1>
-
-              <p>Minimal Anti-Collusion Infrastructure (MACI) is a private, on-chain, voting system.</p>
-
-              <p>
-                MACI is a protocol designed to provide a highly secure e-voting solution. It enables organizations to
-                conduct on-chain voting processes with a significantly reduced risk of cheating, such as bribery or
-                collusion. MACI uses zero-knowledge proofs to implement a receipt-free voting scheme, making it
-                impossible for anyone other than the vote coordinator to verify how a specific user voted. This ensures
-                the correct execution of votes and allows anyone to verify the results. It is particularly beneficial
-                for governance and funding events, where its anti-collusion mechanisms help ensure fair and transparent
-                outcomes.
-              </p>
-            </div>
+            <h1 className={styles.borderBlue}>What is MACI?</h1>
+
+            <p>Minimal Anti-Collusion Infrastructure (MACI) is a private, on-chain, voting system.</p>
+
+            <p>
+              MACI is a protocol designed to provide a highly secure e-voting solution. It enables organizations to
+              conduct on-chain voting processes with a significantly reduced risk of cheating, such as bribery or
+              collusion. MACI uses zero-knowledge proofs to implement a receipt-free voting scheme, making it
+              coordinator to verify how a specific user voted. This ensures the correct the correct execution of votes
+              and allows anyone to verify the results. It is particularly beneficial for governance and funding and
+              funding events, where its anti-collusion mechanisms help ensure fair and transparent outcomes.
+            </p>
           </div>
         </section>
 

website/src/react-app-env.d.ts

@@ -0,0 +1 @@
+declare module "*.png";