diff --git a/package.json b/package.json index 71d93df8f..694de4314 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "lodash": "^4.17.21", "motion": "^11.18.1", "nanoid": "^5.1.5", - "next": "15.1.4", + "next": "15.4.7", "notistack": "^3.0.1", "number-flip": "^1.2.3", "numbro": "^2.3.6", diff --git a/src/app/cloak/Control/ControlCard.tsx b/src/app/cloak/Control/ControlCard.tsx new file mode 100644 index 000000000..1a5de6d1a --- /dev/null +++ b/src/app/cloak/Control/ControlCard.tsx @@ -0,0 +1,38 @@ +import { Stack, Typography } from "@mui/material" + +const ControlCard = props => { + const { Icon, title, content, sx } = props + + return ( + + + + {title} + + + {content} + + + ) +} + +export default ControlCard diff --git a/src/app/cloak/Control/index.tsx b/src/app/cloak/Control/index.tsx new file mode 100644 index 000000000..3e7848338 --- /dev/null +++ b/src/app/cloak/Control/index.tsx @@ -0,0 +1,55 @@ +import { Box, Container, Typography } from "@mui/material" + +import AdminSvg from "@/assets/svgs/cloak/admin.svg" +import DisclosureSvg from "@/assets/svgs/cloak/disclosure.svg" +import ModularSvg from "@/assets/svgs/cloak/modular.svg" +import SelfHostedSvg from "@/assets/svgs/cloak/self-hosted.svg" +import WorkflowSvg from "@/assets/svgs/cloak/workflow.svg" +import { CLOAK_CONTROL_DESCS } from "@/constants" + +import SectionWrapper from "../SectionWrapper" +import ControlCard from "./ControlCard" + +const iconMap = { + "self-hosted": SelfHostedSvg, + admin: AdminSvg, + modular: ModularSvg, + workflow: WorkflowSvg, + disclosure: DisclosureSvg, +} + +const Control = () => { + return ( + + Sovereignty &
Enterprise Control + + } + subTitle="Cloak empowers you with full organizational control:" + backgroundColor="#D2FCF6" + > + + {CLOAK_CONTROL_DESCS.map(({ key, title, content }, index) => ( + + ))} + + + ) +} +export default Control diff --git a/src/app/cloak/Hero/index.tsx b/src/app/cloak/Hero/index.tsx new file mode 100644 index 000000000..0f3bee874 --- /dev/null +++ b/src/app/cloak/Hero/index.tsx @@ -0,0 +1,70 @@ +import Image from "next/image" + +import { Box, Container, Stack, Typography } from "@mui/material" + +import HeroImage from "@/assets/images/cloak/cloak-hero.webp" +import ExternalLinkSvg from "@/assets/svgs/common/external-link.svg" +import Button from "@/components/Button" +import ScrollLink from "@/components/Link" +import { CLOAK_HERO_LINKS, CLOAK_SIGNUP_URL } from "@/constants" + +const CloakHero = () => { + return ( + + + + Cloak — Privacy Layer for Onchain Finance + + Build a global payroll system, merchant payouts, or digital wallets with the transparency you need inside, and total privacy protection + outside. + + + + {CLOAK_HERO_LINKS.map(({ key, label, href }) => ( + + {label} + + ))} + + + Hero + + + ) +} + +export default CloakHero diff --git a/src/app/cloak/LearnMore/index.tsx b/src/app/cloak/LearnMore/index.tsx new file mode 100644 index 000000000..5ad4a679b --- /dev/null +++ b/src/app/cloak/LearnMore/index.tsx @@ -0,0 +1,26 @@ +"use client" + +import { Box, Container } from "@mui/material" + +import Button from "@/components/Button" +import { CLOAK_SIGNUP_URL } from "@/constants" +import useCheckViewport from "@/hooks/useCheckViewport" + +const LearnMore = () => { + const { isMobile } = useCheckViewport() + return ( + + + + + + ) +} +export default LearnMore diff --git a/src/app/cloak/PrivateAccount/PrivateCard.tsx b/src/app/cloak/PrivateAccount/PrivateCard.tsx new file mode 100644 index 000000000..343aa4f4f --- /dev/null +++ b/src/app/cloak/PrivateAccount/PrivateCard.tsx @@ -0,0 +1,47 @@ +import { Stack, Typography } from "@mui/material" + +const PrivateCard = props => { + const { Icon, title, content, sx } = props + + return ( + + + + + {title} + + + + + {content} + + + ) +} + +export default PrivateCard diff --git a/src/app/cloak/PrivateAccount/index.tsx b/src/app/cloak/PrivateAccount/index.tsx new file mode 100644 index 000000000..2e825da75 --- /dev/null +++ b/src/app/cloak/PrivateAccount/index.tsx @@ -0,0 +1,94 @@ +import Image from "next/image" + +import { Box, Stack } from "@mui/material" + +import PrivateAccountMobileImage from "@/assets/images/cloak/cloak-private-mobile.webp" +import PrivateAccountImage from "@/assets/images/cloak/cloak-private.webp" +import BalanceSvg from "@/assets/svgs/cloak/balance.svg" +import DepositSvg from "@/assets/svgs/cloak/deposit.svg" +import HistorySvg from "@/assets/svgs/cloak/history.svg" +import { CLOAK_PRIVATE_DESCS } from "@/constants" + +import SectionWrapper from "../SectionWrapper" +import PrivateCard from "./PrivateCard" + +const iconMap = { + history: HistorySvg, + balance: BalanceSvg, + deposit: DepositSvg, +} + +const PrivateAccount = () => { + const [leftCard, ...rightCards] = CLOAK_PRIVATE_DESCS + + return ( + + + + + Private Account + Private Account + + + {rightCards.map(({ key, title, content }) => ( + + ))} + + + + ) +} +export default PrivateAccount diff --git a/src/app/cloak/SeamlessUserExp/SeamlessCard.tsx b/src/app/cloak/SeamlessUserExp/SeamlessCard.tsx new file mode 100644 index 000000000..e21dc5c8e --- /dev/null +++ b/src/app/cloak/SeamlessUserExp/SeamlessCard.tsx @@ -0,0 +1,41 @@ +import Image from "next/image" + +import { Stack, Typography } from "@mui/material" + +const SeamlessCard = props => { + const { imageURL, title, content, sx } = props + + return ( + + {title} + + {title} + + + {content} + + + ) +} + +export default SeamlessCard diff --git a/src/app/cloak/SeamlessUserExp/index.tsx b/src/app/cloak/SeamlessUserExp/index.tsx new file mode 100644 index 000000000..babff83db --- /dev/null +++ b/src/app/cloak/SeamlessUserExp/index.tsx @@ -0,0 +1,19 @@ +import { Stack } from "@mui/material" + +import { CLOAK_USER_EXP_DESCS } from "@/constants/cloak" + +import SectionWrapper from "../SectionWrapper" +import SeamlessCard from "./SeamlessCard" + +const SeamlessUserExp = () => { + return ( + + + {CLOAK_USER_EXP_DESCS.map(({ key, imageURL, title, content }) => ( + + ))} + + + ) +} +export default SeamlessUserExp diff --git a/src/app/cloak/SectionWrapper/index.tsx b/src/app/cloak/SectionWrapper/index.tsx new file mode 100644 index 000000000..172a8071b --- /dev/null +++ b/src/app/cloak/SectionWrapper/index.tsx @@ -0,0 +1,47 @@ +// TODO: a new section wrapper, but not ready to replace components/SectionWrapper yet +import { Box, Container, Stack, Typography } from "@mui/material" + +interface SectionWrapperProps { + title: string | React.ReactNode + subTitle?: string + children: React.ReactNode + backgroundColor?: string + color?: string +} + +const SectionWrapper = (props: SectionWrapperProps) => { + const { title, subTitle, children, backgroundColor = "themeBackground.light", color = "text.primary" } = props + return ( + + + + + {title} + + {subTitle && ( + + {subTitle} + + )} + + {children} + + + ) +} + +export default SectionWrapper diff --git a/src/app/cloak/Workflow/AppCard/index.tsx b/src/app/cloak/Workflow/AppCard/index.tsx new file mode 100644 index 000000000..93dfa5bd1 --- /dev/null +++ b/src/app/cloak/Workflow/AppCard/index.tsx @@ -0,0 +1,104 @@ +import Image from "next/image" + +import { Box, Stack, Typography } from "@mui/material" + +const AppCard = props => { + const { imageURL, title, name, list, sx } = props + return ( + + + {title} +
+ {name} + + {title} + + + {list.map((item, index) => ( +
  • + + {item} + +
    • + ))} +     +     + ) +} + +export default AppCard diff --git a/src/app/cloak/Workflow/StepCard/index.tsx b/src/app/cloak/Workflow/StepCard/index.tsx new file mode 100644 index 000000000..f278d1856 --- /dev/null +++ b/src/app/cloak/Workflow/StepCard/index.tsx @@ -0,0 +1,54 @@ +import Image from "next/image" + +import { Box, Stack, Typography } from "@mui/material" + +// translate-x-[-8px] translate-y-[-2px] +const StepCard = props => { + const { imageURL, content, content2, backgroundColor } = props + return ( + + {content} + + + {content} + + + {content2} + + + + ) +} + +export default StepCard diff --git a/src/app/cloak/Workflow/StepLine/index.tsx b/src/app/cloak/Workflow/StepLine/index.tsx new file mode 100644 index 000000000..942aed455 --- /dev/null +++ b/src/app/cloak/Workflow/StepLine/index.tsx @@ -0,0 +1,29 @@ +import { Stack } from "@mui/material" +import { Typography } from "@mui/material" + +import WorkflowLineSvg from "@/assets/svgs/cloak/workflow-line.svg" + +const StepLine = props => { + const { content } = props + return ( + + + + {content} + + + ) +} + +export default StepLine diff --git a/src/app/cloak/Workflow/index.tsx b/src/app/cloak/Workflow/index.tsx new file mode 100644 index 000000000..f1f2f5bfd --- /dev/null +++ b/src/app/cloak/Workflow/index.tsx @@ -0,0 +1,66 @@ +import { Stack, Typography } from "@mui/material" + +import WorkflowLinesMobileSvg from "@/assets/svgs/cloak/workflow-double-lines-mobile.svg" +import WorkflowLinesSvg from "@/assets/svgs/cloak/workflow-double-lines.svg" +import { CLOAK_WORKFLOW_APPS, CLOAK_WORKFLOW_STEPS } from "@/constants/cloak" + +import SectionWrapper from "../SectionWrapper" +import AppCard from "./AppCard" +import StepCard from "./StepCard" +import StepLine from "./StepLine" + +const Workflow = () => { + return ( + + + + {CLOAK_WORKFLOW_APPS.map(({ key, imageURL, title, name, list }) => ( + + ))} + + + + + +

    Only send validity proofs.

    +

    No specific data can be accessed.

    +     +     + + {CLOAK_WORKFLOW_STEPS.map(({ key, imageURL, content, content2, backgroundColor, stepMark }) => ( + <> + + {stepMark && } + + ))} +     +     + ) +} +export default Workflow diff --git a/src/app/cloak/page.tsx b/src/app/cloak/page.tsx new file mode 100644 index 000000000..901779d57 --- /dev/null +++ b/src/app/cloak/page.tsx @@ -0,0 +1,20 @@ +import Control from "./Control" +import Hero from "./Hero" +import LearnMore from "./LearnMore" +import PrivateAccount from "./PrivateAccount" +import SeamlessUserExp from "./SeamlessUserExp" +import Workflow from "./Workflow" + +const CloakPage = () => { + return ( + <> + + + + + + + + ) +} +export default CloakPage diff --git a/src/app/template.tsx b/src/app/template.tsx index dec028f4f..befec2913 100644 --- a/src/app/template.tsx +++ b/src/app/template.tsx @@ -6,19 +6,15 @@ import { Box } from "@mui/material" import Footer from "@/components/Footer" import Header from "@/components/Header" -import useHideFooter from "@/hooks/useHideFooter" -import { isSepolia } from "@/utils" import "./global" export default function RootTemplate({ children }: { children: ReactNode }) { - const hideFooter = useHideFooter() - return (
    {children} - {!(isSepolia || hideFooter) &&