diff --git a/public/arrow-down.svg b/public/arrow-down.svg new file mode 100644 index 00000000..f87d1768 --- /dev/null +++ b/public/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/arrow-up.svg b/public/arrow-up.svg new file mode 100644 index 00000000..4ff36f2b --- /dev/null +++ b/public/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/features/signup/components/FaqItem.tsx b/src/features/signup/components/FaqItem.tsx new file mode 100644 index 00000000..9486fd7e --- /dev/null +++ b/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(false); + + const openDescription = useCallback(() => { + setIsOpen(!isOpen); + }, [isOpen, setIsOpen]); + + return ( +
+ + + {isOpen &&
{description}
} +
+ ); +}; diff --git a/src/features/signup/components/FaqList.tsx b/src/features/signup/components/FaqList.tsx new file mode 100644 index 00000000..2a8c2af5 --- /dev/null +++ b/src/features/signup/components/FaqList.tsx @@ -0,0 +1,36 @@ +import { FAQItem } from "./FaqItem"; + +export const FAQList = (): JSX.Element => ( +
+

FAQ

+ + + + + + +

Minimal Anti-Collusion Infrastructure (MACI) is a private, on-chain, voting system.

+ +

+ 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. +

+
+ } + title="What is MACI?" + /> + + + +); diff --git a/src/features/signup/types.ts b/src/features/signup/types.ts new file mode 100644 index 00000000..c964cc2b --- /dev/null +++ b/src/features/signup/types.ts @@ -0,0 +1,6 @@ +import type { ReactNode } from "react"; + +export interface FAQItemProps { + title: string; + description: ReactNode; +} diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx index 60654916..7bd04d28 100644 --- a/src/layouts/BaseLayout.tsx +++ b/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 = ({ -
+
{header} -
+ {sidebar === "left" ? wrappedSidebar : null} -
- {children} -
+
{children}
{sidebar === "right" ? wrappedSidebar : null} -
+
diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx index 896d1a5f..601ed823 100644 --- a/src/layouts/DefaultLayout.tsx +++ b/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 { + 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 ( - {props.showInfo && } + {showInfo && } - {props.showBallot && address && isRegistered && } + {showBallot && address && isRegistered && } - {props.showSubmitButton && ballot.votes.length > 0 && ( + {showSubmitButton && ballot.votes.length > 0 && (
diff --git a/src/pages/signup/index.tsx b/src/pages/signup/index.tsx index 72bff7e2..7d63602c 100644 --- a/src/pages/signup/index.tsx +++ b/src/pages/signup/index.tsx @@ -9,6 +9,7 @@ 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 => { @@ -16,10 +17,10 @@ const SignupPage = (): JSX.Element => { const { isRegistered } = useMaci(); return ( - + -
+

{config.eventName.toUpperCase()}

{config.roundId.toUpperCase()}

@@ -46,6 +47,8 @@ const SignupPage = (): JSX.Element => {
+ + ); };