feat: add faq components and section on signup page

src/features/signup/components/FaqItem.tsx

@@ -0,0 +1,31 @@
+import clsx from "clsx";
+import Image from "next/image";
+import { useState, useCallback } from "react";
+
+import type { FAQItemProps } from "../types";
+
+export const FAQItem = ({ title, description }: FAQItemProps): JSX.Element => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const openDescription = useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen, setIsOpen]);
+
+  return (
+    <div className="flex w-3/5 flex-col gap-4 border-b border-b-black py-6">
+      <button className="flex cursor-pointer justify-between" type="button" onClick={openDescription}>
+        <p className="font-mono text-2xl uppercase">{title}</p>
+
+        <Image
+          alt="arrow-down"
+          className={clsx(isOpen && "origin-center rotate-180")}
+          height="24"
+          src="/arrow-down.svg"
+          width="24"
+        />
+      </button>
+
+      {isOpen && <div className="text-black">{description}</div>}
+    </div>
+  );
+};

src/features/signup/components/FaqList.tsx

@@ -0,0 +1,36 @@
+import { FAQItem } from "./FaqItem";
+
+export const FAQList = (): JSX.Element => (
+  <div className="mt-28 flex flex-col items-center justify-center">
+    <h1 className="mb-8">FAQ</h1>
+
+    <FAQItem
+      description="(Please enter the main focus and description of this round.)"
+      title="what is the focus of this round?"
+    />
+
+    <FAQItem
+      description="(This is related to what gatekeeper is used.)"
+      title="Who are the requirements for participation?"
+    />
+
+    <FAQItem
+      description={
+        <div className="flex flex-col gap-4">
+          <p>Minimal Anti-Collusion Infrastructure (MACI) is a private, on-chain, voting system.</p>
+
+          <p>
+            MACI is an open-source cryptographic protocol designed to facilitate secure, anonymous voting systems while
+            minimizing the potential for collusion, manipulation and bribery using zero-knowledge proofs.
+          </p>
+        </div>
+      }
+      title="What is MACI?"
+    />
+
+    <FAQItem
+      description="Join our Telegram group or Discord channel to learn more!"
+      title="Do you have any other questions?"
+    />
+  </div>
+);

src/features/signup/types.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from "react";
+
+export interface FAQItemProps {
+  title: string;
+  description: ReactNode;
+}

src/layouts/BaseLayout.tsx

@@ -11,13 +11,31 @@ import {
   useCallback,
   useMemo,
 } from "react";
+import { tv } from "tailwind-variants";
 import { useAccount } from "wagmi";
 
 import { Footer } from "~/components/Footer";
+import { createComponent } from "~/components/ui";
 import { metadata } from "~/config";
 
 const Context = createContext({ eligibilityCheck: false, showBallot: false });
 
+const MainContainer = createComponent(
+  "div",
+  tv({
+    base: "w-full flex-1 2xl:container md:flex",
+    variants: {
+      type: {
+        default: "mt-12 pl-2 pr-6",
+        home: "mt-0 pl-0 pr-0",
+      },
+    },
+    defaultVariants: {
+      type: "default",
+    },
+  }),
+);
+
 export const useLayoutOptions = (): { eligibilityCheck: boolean; showBallot: boolean } => useContext(Context);
 
 const Sidebar = ({ side = undefined, ...props }: { side?: "left" | "right" } & PropsWithChildren) => (
@@ -36,6 +54,7 @@ export interface LayoutProps {
   requireAuth?: boolean;
   eligibilityCheck?: boolean;
   showBallot?: boolean;
+  type?: string;
 }
 
 export const BaseLayout = ({
@@ -46,6 +65,7 @@ export const BaseLayout = ({
   requireAuth = false,
   eligibilityCheck = false,
   showBallot = false,
+  type = undefined,
   children = null,
 }: PropsWithChildren<
   {
@@ -104,29 +124,16 @@ export const BaseLayout = ({
         <meta content={metadata.image} name="twitter:image" />
       </Head>
 
-      <div
-        className={clsx(" flex h-full min-h-screen flex-1 flex-col bg-white dark:bg-gray-900 dark:text-white", theme)}
-      >
+      <div className={clsx("flex h-full min-h-screen flex-1 flex-col bg-white", theme)}>
         {header}
 
-        <div
-          className={clsx(
-            "mx-auto w-full flex-1 pt-12 2xl:container md:flex",
-            router.asPath === "/signup" && "bg-blue-50",
-          )}
-        >
+        <MainContainer type={type}>
           {sidebar === "left" ? wrappedSidebar : null}
 
-          <div
-            className={clsx("w-full min-w-0 px-2 pb-24", {
-              "mx-auto max-w-5xl": !sidebar,
-            })}
-          >
-            {children}
-          </div>
+          <div className="w-full min-w-0 pb-24">{children}</div>
 
           {sidebar === "right" ? wrappedSidebar : null}
-        </div>
+        </MainContainer>
 
         <Footer />
       </div>

src/layouts/DefaultLayout.tsx

@@ -14,16 +14,14 @@ import { EAppState } from "~/utils/types";
 
 import { BaseLayout, type LayoutProps } from "./BaseLayout";
 
-type Props = PropsWithChildren<
-  {
-    sidebar?: "left" | "right";
-    sidebarComponent?: ReactNode;
-    showInfo?: boolean;
-    showSubmitButton?: boolean;
-  } & LayoutProps
->;
-
-export const Layout = ({ children = null, ...props }: Props): JSX.Element => {
+interface ILayoutProps extends PropsWithChildren<LayoutProps> {
+  sidebar?: "left" | "right";
+  sidebarComponent?: ReactNode;
+  showInfo?: boolean;
+  showSubmitButton?: boolean;
+}
+
+export const Layout = ({ children = null, ...props }: ILayoutProps): JSX.Element => {
   const { address } = useAccount();
   const appState = useAppState();
   const { ballot } = useBallot();
@@ -80,21 +78,23 @@ export const Layout = ({ children = null, ...props }: Props): JSX.Element => {
   );
 };
 
-export const LayoutWithSidebar = ({ ...props }: Props): JSX.Element => {
+export const LayoutWithSidebar = ({ ...props }: ILayoutProps): JSX.Element => {
   const { isRegistered } = useMaci();
   const { address } = useAccount();
   const { ballot } = useBallot();
 
+  const { showInfo, showBallot, showSubmitButton } = props;
+
   return (
     <Layout
       sidebar="left"
       sidebarComponent={
         <div>
-          {props.showInfo && <Info showVotingInfo size="sm" />}
+          {showInfo && <Info showVotingInfo size="sm" />}
 
-          {props.showBallot && address && isRegistered && <BallotOverview />}
+          {showBallot && address && isRegistered && <BallotOverview />}
 
-          {props.showSubmitButton && ballot.votes.length > 0 && (
+          {showSubmitButton && ballot.votes.length > 0 && (
             <div className="flex flex-col gap-4">
               <SubmitBallotButton />
 

src/pages/signup/index.tsx

@@ -9,17 +9,18 @@ import { JoinButton } from "~/components/JoinButton";
 import { Button } from "~/components/ui/Button";
 import { config } from "~/config";
 import { useMaci } from "~/contexts/Maci";
+import { FAQList } from "~/features/signup/components/FaqList";
 import { Layout } from "~/layouts/DefaultLayout";
 
 const SignupPage = (): JSX.Element => {
   const { isConnected } = useAccount();
   const { isRegistered } = useMaci();
 
   return (
-    <Layout>
+    <Layout type="home">
       <EligibilityDialog />
 
-      <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex h-[90vh] w-screen flex-col items-center justify-center gap-4 bg-blue-50">
         <h1 className="max-w-screen-lg text-center font-mono">{config.eventName.toUpperCase()}</h1>
 
         <h2 className="max-w-screen-lg text-center font-mono">{config.roundId.toUpperCase()}</h2>
@@ -46,6 +47,8 @@ const SignupPage = (): JSX.Element => {
           <Info size="default" />
         </div>
       </div>
+
+      <FAQList />
     </Layout>
   );
 };