Skip to content

Commit e2926fc

Browse files
HolybasilHolybasil
authored
Merge pull request #1561 from scroll-tech/cloak
Cloak page
2 parents bab8563 + 9016c45 commit e2926fc

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1040
-38
lines changed

‎src/app/cloak/Control/ControlCard.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Stack, Typography } from "@mui/material"
2+
3+
const ControlCard = props => {
4+
const { Icon, title, content, sx } = props
5+
6+
return (
7+
<Stack
8+
sx={{
9+
gap: "1.2rem",
10+
p: ["2rem", "3rem", "3rem", "4rem"],
11+
borderRadius: "2rem",
12+
...sx,
13+
}}
14+
>
15+
<Icon></Icon>
16+
<Typography
17+
sx={{
18+
mt: [0, 0, "1.2rem"],
19+
typography: "title",
20+
fontSize: ["1.8rem", "1.8rem"],
21+
lineHeight: ["2.8rem", "2.8rem"],
22+
}}
23+
>
24+
{title}
25+
</Typography>
26+
<Typography
27+
sx={{
28+
fontSize: ["1.6rem", "1.6rem"],
29+
lineHeight: ["2.4rem", "2.4rem"],
30+
}}
31+
>
32+
{content}
33+
</Typography>
34+
</Stack>
35+
)
36+
}
37+
38+
export default ControlCard

‎src/app/cloak/Control/index.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Box, Container, Typography } from "@mui/material"
2+
3+
import AdminSvg from "@/assets/svgs/cloak/admin.svg"
4+
import DisclosureSvg from "@/assets/svgs/cloak/disclosure.svg"
5+
import ModularSvg from "@/assets/svgs/cloak/modular.svg"
6+
import SelfHostedSvg from "@/assets/svgs/cloak/self-hosted.svg"
7+
import WorkflowSvg from "@/assets/svgs/cloak/workflow.svg"
8+
import { CLOAK_CONTROL_DESCS } from "@/constants"
9+
10+
import SectionWrapper from "../SectionWrapper"
11+
import ControlCard from "./ControlCard"
12+
13+
const iconMap = {
14+
"self-hosted": SelfHostedSvg,
15+
admin: AdminSvg,
16+
modular: ModularSvg,
17+
workflow: WorkflowSvg,
18+
disclosure: DisclosureSvg,
19+
}
20+
21+
const Control = () => {
22+
return (
23+
<SectionWrapper
24+
title={
25+
<>
26+
Sovereignty & <br className="inline md:hidden" /> Enterprise Control
27+
</>
28+
}
29+
subTitle="Cloak empowers you with full organizational control:"
30+
backgroundColor="#D2FCF6"
31+
>
32+
<Box
33+
sx={{
34+
display: "grid",
35+
gridTemplateColumns: ["repeat(auto-fit, minmax(330px, 1fr))", "repeat(auto-fit, minmax(380px, 1fr))"],
36+
columnGap: "1.2rem",
37+
rowGap: ["1.2rem", "2.4rem", "4.8rem"],
38+
}}
39+
>
40+
{CLOAK_CONTROL_DESCS.map(({ key, title, content }, index) => (
41+
<ControlCard
42+
key={key}
43+
sx={{
44+
backgroundColor: index % 2 ? "#D0F3F2" : "#A9F0E6",
45+
}}
46+
Icon={iconMap[key]}
47+
title={title}
48+
content={content}
49+
></ControlCard>
50+
))}
51+
</Box>
52+
</SectionWrapper>
53+
)
54+
}
55+
export default Control

‎src/app/cloak/Hero/index.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import Image from "next/image"
2+
3+
import { Box, Container, Stack, Typography } from "@mui/material"
4+
5+
import HeroImage from "@/assets/images/cloak/cloak-hero.webp"
6+
import ExternalLinkSvg from "@/assets/svgs/common/external-link.svg"
7+
import Button from "@/components/Button"
8+
import ScrollLink from "@/components/Link"
9+
import { CLOAK_HERO_LINKS, CLOAK_SIGNUP_URL } from "@/constants"
10+
11+
const CloakHero = () => {
12+
return (
13+
<Box
14+
sx={{
15+
position: "relative",
16+
width: "100%",
17+
mt: "-6.5rem",
18+
pt: "6.5rem",
19+
height: ["auto", "calc(100svh - 6.5rem)"],
20+
minHeight: "100svh",
21+
}}
22+
>
23+
<Container
24+
sx={{
25+
display: "flex",
26+
flexDirection: ["column", "column", "column", "row"],
27+
justifyContent: "space-between",
28+
alignItems: "center",
29+
gap: ["1.2rem", "1.2rem", "6rem"],
30+
pt: "5%",
31+
32+
pb: ["4rem", 0],
33+
}}
34+
>
35+
<Stack direction="column" sx={{ gap: ["1.2rem", "3rem"], maxWidth: ["auto", "78rem"] }}>
36+
<Typography sx={{ typography: "title", fontSize: ["28px", "50px"], lineHeight: 1.4 }}>Cloak — Privacy Layer for Onchain Finance</Typography>
37+
<Typography sx={{ fontSize: ["16px", "20px"], lineHeight: ["24px", "30px"], mt: [0, 0, "-10px"] }}>
38+
Build a global payroll system, merchant payouts, or digital wallets with the transparency you need inside, and total privacy protection
39+
outside.
40+
</Typography>
41+
<Button href={CLOAK_SIGNUP_URL} target="_blank" width="250px" className="my-[8px] md:my-0">
42+
Sign up for demo
43+
</Button>
44+
<Stack direction={["column", "row"]} sx={{ gap: ["1.2rem", "4.4rem"] }}>
45+
{CLOAK_HERO_LINKS.map(({ key, label, href }) => (
46+
<ScrollLink
47+
key={key}
48+
className="text-[1.4rem] !font-medium text-[var(--mui-palette-text-primary)] hover:text-[var(--mui-palette-primary-main)]"
49+
href={href}
50+
>
51+
{label} <ExternalLinkSvg className="w-[1rem] h-auto ml-2" />
52+
</ScrollLink>
53+
))}
54+
</Stack>
55+
</Stack>
56+
<Image
57+
src={HeroImage}
58+
className="max-w-[542px] w-full"
59+
style={{
60+
objectFit: "contain",
61+
}}
62+
priority
63+
alt="Hero"
64+
/>
65+
</Container>
66+
</Box>
67+
)
68+
}
69+
70+
export default CloakHero

‎src/app/cloak/LearnMore/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
"use client"
2+
3+
import { Box, Container } from "@mui/material"
4+
5+
import Button from "@/components/Button"
6+
import { CLOAK_SIGNUP_URL } from "@/constants"
7+
import useCheckViewport from "@/hooks/useCheckViewport"
8+
9+
const LearnMore = () => {
10+
const { isMobile } = useCheckViewport()
11+
return (
12+
<Box sx={{ backgroundColor: "themeBackground.highlight", py: "5.6rem" }}>
13+
<Container
14+
sx={{
15+
display: "flex",
16+
justifyContent: "center",
17+
}}
18+
>
19+
<Button target="_blank" width="250px" whiteButton href={CLOAK_SIGNUP_URL}>
20+
Sign up for demo
21+
</Button>
22+
</Container>
23+
</Box>
24+
)
25+
}
26+
export default LearnMore

‎src/app/cloak/PrivateAccount/PrivateCard.tsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Stack, Typography } from "@mui/material"
2+
3+
const PrivateCard = props => {
4+
const { Icon, title, content, sx } = props
5+
6+
return (
7+
<Stack
8+
sx={{
9+
backgroundColor: "#21201E",
10+
borderRadius: "2rem",
11+
px: ["1.5rem", "4rem"],
12+
py: ["2rem", "3rem"],
13+
gap: "1.2rem",
14+
maxWidth: "400px",
15+
height: "min-content",
16+
justifyContent: "center",
17+
...sx,
18+
}}
19+
>
20+
<Stack direction="row" sx={{ alignItems: "center", gap: "1rem" }}>
21+
<Icon />
22+
<Typography
23+
sx={{
24+
typography: "title",
25+
fontSize: ["1.8rem", "1.8rem"],
26+
lineHeight: ["2.8rem", "2.8rem"],
27+
color: "background.default",
28+
}}
29+
>
30+
{title}
31+
</Typography>
32+
</Stack>
33+
34+
<Typography
35+
sx={{
36+
fontSize: ["1.6rem", "1.6rem"],
37+
lineHeight: ["2.4rem", "2.4rem"],
38+
color: "background.default",
39+
}}
40+
>
41+
{content}
42+
</Typography>
43+
</Stack>
44+
)
45+
}
46+
47+
export default PrivateCard

‎src/app/cloak/PrivateAccount/index.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import Image from "next/image"
2+
3+
import { Box, Stack } from "@mui/material"
4+
5+
import PrivateAccountMobileImage from "@/assets/images/cloak/cloak-private-mobile.webp"
6+
import PrivateAccountImage from "@/assets/images/cloak/cloak-private.webp"
7+
import BalanceSvg from "@/assets/svgs/cloak/balance.svg"
8+
import DepositSvg from "@/assets/svgs/cloak/deposit.svg"
9+
import HistorySvg from "@/assets/svgs/cloak/history.svg"
10+
import { CLOAK_PRIVATE_DESCS } from "@/constants"
11+
12+
import SectionWrapper from "../SectionWrapper"
13+
import PrivateCard from "./PrivateCard"
14+
15+
const iconMap = {
16+
history: HistorySvg,
17+
balance: BalanceSvg,
18+
deposit: DepositSvg,
19+
}
20+
21+
const PrivateAccount = () => {
22+
const [leftCard, ...rightCards] = CLOAK_PRIVATE_DESCS
23+
24+
return (
25+
<SectionWrapper title="Private Account Management" backgroundColor="text.primary" color="background.default">
26+
<Box
27+
sx={{
28+
pt: [0, 0, "1.8rem"],
29+
display: "grid",
30+
width: ["100%", "max-content", "100%"],
31+
mx: "auto",
32+
gridTemplateColumns: ["1fr", "1fr", "repeat(2, max-content)", "max-content max-content max-content"],
33+
gridTemplateAreas: [
34+
`
35+
"leftCard"
36+
"image"
37+
"rightCards"
38+
`,
39+
`
40+
"leftCard"
41+
"image"
42+
"rightCards"
43+
`,
44+
`
45+
"leftCard image"
46+
"rightCards image"
47+
`,
48+
`
49+
"leftCard image rightCards"
50+
`,
51+
],
52+
alignItems: "center",
53+
justifyContent: "center",
54+
gap: ["2rem", "2rem", "3.4rem", "4px"],
55+
}}
56+
>
57+
<PrivateCard
58+
sx={{
59+
alignSelf: "center",
60+
height: ["unset", "unset", "unset", "21.6rem"],
61+
gridArea: "leftCard",
62+
}}
63+
key={leftCard.key}
64+
Icon={iconMap[leftCard.key]}
65+
title={leftCard.title}
66+
content={leftCard.content}
67+
></PrivateCard>
68+
69+
<Image src={PrivateAccountImage} alt="Private Account" className="!hidden lg:!block max-h-[500px] w-auto" />
70+
<Image
71+
src={PrivateAccountMobileImage}
72+
alt="Private Account"
73+
style={{ gridArea: "image" }}
74+
className="block lg:!hidden w-full max-w-[400px]"
75+
/>
76+
77+
<Stack sx={{ gap: ["2rem", "3.4rem"], alignSelf: "center", gridArea: "rightCards" }}>
78+
{rightCards.map(({ key, title, content }) => (
79+
<PrivateCard
80+
key={key}
81+
sx={{
82+
height: ["unset", "unset", "unset", "16.8rem"],
83+
}}
84+
Icon={iconMap[key]}
85+
title={title}
86+
content={content}
87+
></PrivateCard>
88+
))}
89+
</Stack>
90+
</Box>
91+
</SectionWrapper>
92+
)
93+
}
94+
export default PrivateAccount

‎src/app/cloak/SeamlessUserExp/SeamlessCard.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import Image from "next/image"
2+
3+
import { Stack, Typography } from "@mui/material"
4+
5+
const SeamlessCard = props => {
6+
const { imageURL, title, content, sx } = props
7+
8+
return (
9+
<Stack
10+
sx={{
11+
maxWidth: ["auto", "auto", "34rem"],
12+
pb: [0, 0, "2.4rem"],
13+
alignItems: "center",
14+
...sx,
15+
}}
16+
>
17+
<Image src={imageURL} className="w-[18rem] h-[18rem] md:w-[22rem] md:h-[22rem]" alt={title} />
18+
<Typography
19+
sx={{
20+
typography: "title",
21+
fontSize: ["1.8rem", "1.8rem"],
22+
lineHeight: ["2.8rem", "2.8rem"],
23+
width: "100%",
24+
mb: "1.2rem",
25+
}}
26+
>
27+
{title}
28+
</Typography>
29+
<Typography
30+
sx={{
31+
fontSize: ["1.6rem", "1.6rem"],
32+
lineHeight: ["2.4rem", "2.4rem"],
33+
}}
34+
>
35+
{content}
36+
</Typography>
37+
</Stack>
38+
)
39+
}
40+
41+
export default SeamlessCard

‎src/app/cloak/SeamlessUserExp/index.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Stack } from "@mui/material"
2+
3+
import { CLOAK_USER_EXP_DESCS } from "@/constants/cloak"
4+
5+
import SectionWrapper from "../SectionWrapper"
6+
import SeamlessCard from "./SeamlessCard"
7+
8+
const SeamlessUserExp = () => {
9+
return (
10+
<SectionWrapper title="Seamless User Experience" backgroundColor="themeBackground.light">
11+
<Stack direction="row" sx={{ justifyContent: "space-evenly", flexWrap: "wrap", gap: "3rem" }}>
12+
{CLOAK_USER_EXP_DESCS.map(({ key, imageURL, title, content }) => (
13+
<SeamlessCard key={key} imageURL={imageURL} title={title} content={content}></SeamlessCard>
14+
))}
15+
</Stack>
16+
</SectionWrapper>
17+
)
18+
}
19+
export default SeamlessUserExp

0 commit comments

Comments
 (0)