Skip to content

Commit d195b6c

Browse files
NullSoldierNullSoldier
authored
Add principles to foundation page (#740)
1 parent ee0784b commit d195b6c

File tree

5 files changed

+178
-0
lines changed

5 files changed

+178
-0
lines changed

‎components/Foundation/OurPrinciples/OurPrinciples.tsx

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import { Container, Text, Heading, Grid, GridItem, Box, Flex } from "@/lib/ui";
2+
import {
3+
AutoExpandingList,
4+
useAutoExpandingList,
5+
} from "@/components/AutoExpandingList/AutoExpandingList";
6+
import Image from "next/image";
7+
import { AnimatePresence, motion } from "framer-motion";
8+
import { defineMessages, useIntl } from "react-intl";
9+
import image1 from "./assets/image-01.svg";
10+
import image2 from "./assets/image-02.svg";
11+
import image3 from "./assets/image-03.svg";
12+
13+
export const CHIP_COLOR = "#C7F182";
14+
15+
const IMAGE_BY_INDEX = {
16+
0: <Image alt="" src={image1} />,
17+
1: <Image alt="" src={image2} />,
18+
2: <Image alt="" src={image3} />,
19+
};
20+
21+
const messages = defineMessages({
22+
ourPrinciples: {
23+
id: "OurPrinciples.ourPrinciples",
24+
defaultMessage: "Our Principles",
25+
},
26+
encryptionHeading: {
27+
id: "OurPrinciples.encryptionHeading",
28+
defaultMessage: "Encryption is the Future of Crypto",
29+
},
30+
encryptionBody1: {
31+
id: "OurPrinciples.encryptionBody1",
32+
defaultMessage:
33+
"Privacy is a fundamental right, and yet everyday people give away personal information — often without even realizing it. We empower users to decide when and how to share their data, by ensuring all transactions are encrypted.",
34+
},
35+
encryptionBody2: {
36+
id: "OurPrinciples.encryptionBody2",
37+
defaultMessage:
38+
"We do not compromise on protection — using zero-knowledge proofs (zk-SNARKs) and the highest industry standards for encryption.",
39+
},
40+
buildTogetherHeading: {
41+
id: "OurPrinciples.buildTogetherHeading",
42+
defaultMessage: "We Build, Together",
43+
},
44+
buildTogetherBody: {
45+
id: "OurPrinciples.buildTogetherBody",
46+
defaultMessage:
47+
"As a decentralized, open-source network, Iron Fish relies on an engaged community to support protocol development and raise awareness of privacy as a social good. Our community is the heart of our platform.",
48+
},
49+
complianceHeading: {
50+
id: "OurPrinciples.complianceHeading",
51+
defaultMessage: "Common Sense Compliance",
52+
},
53+
complianceBody: {
54+
id: "OurPrinciples.complianceBody",
55+
defaultMessage:
56+
"To date, crypto privacy projects have either failed to offer necessary levels of protection or more often, they've fallen on the wrong side of public authorities. Iron Fish addresses this impasse with a leading edge platform with built-in compliance controls.",
57+
},
58+
});
59+
60+
export function OurPrinciples() {
61+
const expandingListProps = useAutoExpandingList();
62+
const { formatMessage } = useIntl();
63+
64+
return (
65+
<Container w="100%" maxW="container.xl" py="150px">
66+
<Grid
67+
templateColumns={{
68+
base: "1fr",
69+
md: "repeat(2, 1fr)",
70+
}}
71+
gap={10}
72+
>
73+
<GridItem>
74+
<Text textStyle="h3" mb={2}>
75+
{formatMessage(messages.ourPrinciples)}
76+
</Text>
77+
<AutoExpandingList {...expandingListProps}>
78+
<AutoExpandingList.Item
79+
chipColor={CHIP_COLOR}
80+
heading={
81+
<Heading fontSize="xl">
82+
{formatMessage(messages.encryptionHeading)}
83+
</Heading>
84+
}
85+
body={
86+
<Box>
87+
<Text mb={6}>{formatMessage(messages.encryptionBody1)}</Text>
88+
<Text>{formatMessage(messages.encryptionBody2)}</Text>
89+
<Box
90+
mt={8}
91+
display={{
92+
base: "block",
93+
md: "none",
94+
}}
95+
>
96+
<Image alt="" src={image1} />
97+
</Box>
98+
</Box>
99+
}
100+
/>
101+
<AutoExpandingList.Item
102+
chipColor={CHIP_COLOR}
103+
heading={
104+
<Heading fontSize="xl">
105+
{formatMessage(messages.buildTogetherHeading)}
106+
</Heading>
107+
}
108+
body={
109+
<Box>
110+
<Text>{formatMessage(messages.buildTogetherBody)}</Text>
111+
<Box
112+
mt={8}
113+
display={{
114+
base: "block",
115+
md: "none",
116+
}}
117+
>
118+
<Image alt="" src={image2} />
119+
</Box>
120+
</Box>
121+
}
122+
/>
123+
<AutoExpandingList.Item
124+
chipColor={CHIP_COLOR}
125+
heading={
126+
<Heading fontSize="xl">
127+
{formatMessage(messages.complianceHeading)}
128+
</Heading>
129+
}
130+
body={
131+
<Box>
132+
<Text>{formatMessage(messages.complianceBody)}</Text>
133+
<Box
134+
mt={8}
135+
display={{
136+
base: "block",
137+
md: "none",
138+
}}
139+
>
140+
<Image alt="" src={image3} />
141+
</Box>
142+
</Box>
143+
}
144+
/>
145+
</AutoExpandingList>
146+
</GridItem>
147+
<GridItem
148+
display={{
149+
base: "none",
150+
md: "flex",
151+
}}
152+
justifyContent="flex-end"
153+
>
154+
<AnimatePresence mode="wait">
155+
<motion.div
156+
key={expandingListProps.activeIndex}
157+
initial={{ opacity: 0 }}
158+
animate={{ opacity: 1 }}
159+
exit={{ opacity: 0 }}
160+
>
161+
{expandingListProps.activeIndex in IMAGE_BY_INDEX &&
162+
IMAGE_BY_INDEX[
163+
expandingListProps.activeIndex as keyof typeof IMAGE_BY_INDEX
164+
]}
165+
</motion.div>
166+
</AnimatePresence>
167+
</GridItem>
168+
</Grid>
169+
</Container>
170+
);
171+
}

‎components/Foundation/OurPrinciples/assets/image-01.svg

Lines changed: 1 addition & 0 deletions
Loading

‎components/Foundation/OurPrinciples/assets/image-02.svg

Lines changed: 1 addition & 0 deletions
Loading

‎components/Foundation/OurPrinciples/assets/image-03.svg

Lines changed: 1 addition & 0 deletions
Loading

‎pages/community/foundation/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import flower from "../../../assets/heroImages/foundation/flower.svg";
1515
import key from "../../../assets/heroImages/foundation/key.svg";
1616
import weather from "../../../assets/heroImages/foundation/weather.svg";
1717
import Link from "next/link";
18+
import { OurPrinciples } from "@/components/Foundation/OurPrinciples/OurPrinciples";
1819

1920
const flowerImg = flower as LocalImage;
2021
const keyImg = key as LocalImage;
@@ -222,6 +223,9 @@ export default function Governance() {
222223
}}
223224
/>
224225
</Box>
226+
<Box borderBottom="1px solid black">
227+
<OurPrinciples />
228+
</Box>
225229
<ContactUs />
226230
</Box>
227231
);

0 commit comments

Comments
 (0)