Cloak page

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 (
+    <Stack
+      sx={{
+        gap: "1.2rem",
+        p: ["2rem", "3rem", "3rem", "4rem"],
+        borderRadius: "2rem",
+        ...sx,
+      }}
+    >
+      <Icon></Icon>
+      <Typography
+        sx={{
+          mt: [0, 0, "1.2rem"],
+          typography: "title",
+          fontSize: ["1.8rem", "1.8rem"],
+          lineHeight: ["2.8rem", "2.8rem"],
+        }}
+      >
+        {title}
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: ["1.6rem", "1.6rem"],
+          lineHeight: ["2.4rem", "2.4rem"],
+        }}
+      >
+        {content}
+      </Typography>
+    </Stack>
+  )
+}
+
+export default ControlCard

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 (
+    <SectionWrapper
+      title={
+        <>
+          Sovereignty & <br className="inline md:hidden" /> Enterprise Control
+        </>
+      }
+      subTitle="Cloak empowers you with full organizational control:"
+      backgroundColor="#D2FCF6"
+    >
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: ["repeat(auto-fit, minmax(330px, 1fr))", "repeat(auto-fit, minmax(380px, 1fr))"],
+          columnGap: "1.2rem",
+          rowGap: ["1.2rem", "2.4rem", "4.8rem"],
+        }}
+      >
+        {CLOAK_CONTROL_DESCS.map(({ key, title, content }, index) => (
+          <ControlCard
+            key={key}
+            sx={{
+              backgroundColor: index % 2 ? "#D0F3F2" : "#A9F0E6",
+            }}
+            Icon={iconMap[key]}
+            title={title}
+            content={content}
+          ></ControlCard>
+        ))}
+      </Box>
+    </SectionWrapper>
+  )
+}
+export default Control

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 (
+    <Box
+      sx={{
+        position: "relative",
+        width: "100%",
+        mt: "-6.5rem",
+        pt: "6.5rem",
+        height: ["auto", "calc(100svh - 6.5rem)"],
+        minHeight: "100svh",
+      }}
+    >
+      <Container
+        sx={{
+          display: "flex",
+          flexDirection: ["column", "column", "column", "row"],
+          justifyContent: "space-between",
+          alignItems: "center",
+          gap: ["1.2rem", "1.2rem", "6rem"],
+          pt: "5%",
+
+          pb: ["4rem", 0],
+        }}
+      >
+        <Stack direction="column" sx={{ gap: ["1.2rem", "3rem"], maxWidth: ["auto", "78rem"] }}>
+          <Typography sx={{ typography: "title", fontSize: ["28px", "50px"], lineHeight: 1.4 }}>Cloak — Privacy Layer for Onchain Finance</Typography>
+          <Typography sx={{ fontSize: ["16px", "20px"], lineHeight: ["24px", "30px"], mt: [0, 0, "-10px"] }}>
+            Build a global payroll system, merchant payouts, or digital wallets with the transparency you need inside, and total privacy protection
+            outside.
+          </Typography>
+          <Button href={CLOAK_SIGNUP_URL} target="_blank" width="250px" className="my-[8px] md:my-0">
+            Sign up for demo
+          </Button>
+          <Stack direction={["column", "row"]} sx={{ gap: ["1.2rem", "4.4rem"] }}>
+            {CLOAK_HERO_LINKS.map(({ key, label, href }) => (
+              <ScrollLink
+                key={key}
+                className="text-[1.4rem] !font-medium text-[var(--mui-palette-text-primary)] hover:text-[var(--mui-palette-primary-main)]"
+                href={href}
+              >
+                {label} <ExternalLinkSvg className="w-[1rem] h-auto ml-2" />
+              </ScrollLink>
+            ))}
+          </Stack>
+        </Stack>
+        <Image
+          src={HeroImage}
+          className="max-w-[542px] w-full"
+          style={{
+            objectFit: "contain",
+          }}
+          priority
+          alt="Hero"
+        />
+      </Container>
+    </Box>
+  )
+}
+
+export default CloakHero

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 (
+    <Box sx={{ backgroundColor: "themeBackground.highlight", py: "5.6rem" }}>
+      <Container
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <Button target="_blank" width="250px" whiteButton href={CLOAK_SIGNUP_URL}>
+          Sign up for demo
+        </Button>
+      </Container>
+    </Box>
+  )
+}
+export default LearnMore

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 (
+    <Stack
+      sx={{
+        backgroundColor: "#21201E",
+        borderRadius: "2rem",
+        px: ["1.5rem", "4rem"],
+        py: ["2rem", "3rem"],
+        gap: "1.2rem",
+        maxWidth: "400px",
+        height: "min-content",
+        justifyContent: "center",
+        ...sx,
+      }}
+    >
+      <Stack direction="row" sx={{ alignItems: "center", gap: "1rem" }}>
+        <Icon />
+        <Typography
+          sx={{
+            typography: "title",
+            fontSize: ["1.8rem", "1.8rem"],
+            lineHeight: ["2.8rem", "2.8rem"],
+            color: "background.default",
+          }}
+        >
+          {title}
+        </Typography>
+      </Stack>
+
+      <Typography
+        sx={{
+          fontSize: ["1.6rem", "1.6rem"],
+          lineHeight: ["2.4rem", "2.4rem"],
+          color: "background.default",
+        }}
+      >
+        {content}
+      </Typography>
+    </Stack>
+  )
+}
+
+export default PrivateCard

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 (
+    <SectionWrapper title="Private Account Management" backgroundColor="text.primary" color="background.default">
+      <Box
+        sx={{
+          pt: [0, 0, "1.8rem"],
+          display: "grid",
+          width: ["100%", "max-content", "100%"],
+          mx: "auto",
+          gridTemplateColumns: ["1fr", "1fr", "repeat(2, max-content)", "max-content max-content max-content"],
+          gridTemplateAreas: [
+            `
+            "leftCard"
+            "image"
+            "rightCards"
+          `,
+            `
+            "leftCard"
+            "image"
+            "rightCards"
+          `,
+            `
+            "leftCard image"
+            "rightCards image"
+          `,
+            `
+            "leftCard image rightCards"
+          `,
+          ],
+          alignItems: "center",
+          justifyContent: "center",
+          gap: ["2rem", "2rem", "3.4rem", "4px"],
+        }}
+      >
+        <PrivateCard
+          sx={{
+            alignSelf: "center",
+            height: ["unset", "unset", "unset", "21.6rem"],
+            gridArea: "leftCard",
+          }}
+          key={leftCard.key}
+          Icon={iconMap[leftCard.key]}
+          title={leftCard.title}
+          content={leftCard.content}
+        ></PrivateCard>
+
+        <Image src={PrivateAccountImage} alt="Private Account" className="!hidden lg:!block max-h-[500px] w-auto" />
+        <Image
+          src={PrivateAccountMobileImage}
+          alt="Private Account"
+          style={{ gridArea: "image" }}
+          className="block lg:!hidden w-full max-w-[400px]"
+        />
+
+        <Stack sx={{ gap: ["2rem", "3.4rem"], alignSelf: "center", gridArea: "rightCards" }}>
+          {rightCards.map(({ key, title, content }) => (
+            <PrivateCard
+              key={key}
+              sx={{
+                height: ["unset", "unset", "unset", "16.8rem"],
+              }}
+              Icon={iconMap[key]}
+              title={title}
+              content={content}
+            ></PrivateCard>
+          ))}
+        </Stack>
+      </Box>
+    </SectionWrapper>
+  )
+}
+export default PrivateAccount

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 (
+    <Stack
+      sx={{
+        maxWidth: ["auto", "auto", "34rem"],
+        pb: [0, 0, "2.4rem"],
+        alignItems: "center",
+        ...sx,
+      }}
+    >
+      <Image src={imageURL} className="w-[18rem] h-[18rem] md:w-[22rem] md:h-[22rem]" alt={title} />
+      <Typography
+        sx={{
+          typography: "title",
+          fontSize: ["1.8rem", "1.8rem"],
+          lineHeight: ["2.8rem", "2.8rem"],
+          width: "100%",
+          mb: "1.2rem",
+        }}
+      >
+        {title}
+      </Typography>
+      <Typography
+        sx={{
+          fontSize: ["1.6rem", "1.6rem"],
+          lineHeight: ["2.4rem", "2.4rem"],
+        }}
+      >
+        {content}
+      </Typography>
+    </Stack>
+  )
+}
+
+export default SeamlessCard

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 (
+    <SectionWrapper title="Seamless User Experience" backgroundColor="themeBackground.light">
+      <Stack direction="row" sx={{ justifyContent: "space-evenly", flexWrap: "wrap", gap: "3rem" }}>
+        {CLOAK_USER_EXP_DESCS.map(({ key, imageURL, title, content }) => (
+          <SeamlessCard key={key} imageURL={imageURL} title={title} content={content}></SeamlessCard>
+        ))}
+      </Stack>
+    </SectionWrapper>
+  )
+}
+export default SeamlessUserExp