From d195b6c0eccbac90fdf2fef542c9dfb95adcc87f Mon Sep 17 00:00:00 2001 From: Jason Spafford Date: Tue, 29 Oct 2024 14:02:13 -0700 Subject: [PATCH] Add principles to foundation page (#740) --- .../OurPrinciples/OurPrinciples.tsx | 171 ++++++++++++++++++ .../OurPrinciples/assets/image-01.svg | 1 + .../OurPrinciples/assets/image-02.svg | 1 + .../OurPrinciples/assets/image-03.svg | 1 + pages/community/foundation/index.tsx | 4 + 5 files changed, 178 insertions(+) create mode 100644 components/Foundation/OurPrinciples/OurPrinciples.tsx create mode 100644 components/Foundation/OurPrinciples/assets/image-01.svg create mode 100644 components/Foundation/OurPrinciples/assets/image-02.svg create mode 100644 components/Foundation/OurPrinciples/assets/image-03.svg diff --git a/components/Foundation/OurPrinciples/OurPrinciples.tsx b/components/Foundation/OurPrinciples/OurPrinciples.tsx new file mode 100644 index 00000000..bd3528bc --- /dev/null +++ b/components/Foundation/OurPrinciples/OurPrinciples.tsx @@ -0,0 +1,171 @@ +import { Container, Text, Heading, Grid, GridItem, Box, Flex } from "@/lib/ui"; +import { + AutoExpandingList, + useAutoExpandingList, +} from "@/components/AutoExpandingList/AutoExpandingList"; +import Image from "next/image"; +import { AnimatePresence, motion } from "framer-motion"; +import { defineMessages, useIntl } from "react-intl"; +import image1 from "./assets/image-01.svg"; +import image2 from "./assets/image-02.svg"; +import image3 from "./assets/image-03.svg"; + +export const CHIP_COLOR = "#C7F182"; + +const IMAGE_BY_INDEX = { + 0: , + 1: , + 2: , +}; + +const messages = defineMessages({ + ourPrinciples: { + id: "OurPrinciples.ourPrinciples", + defaultMessage: "Our Principles", + }, + encryptionHeading: { + id: "OurPrinciples.encryptionHeading", + defaultMessage: "Encryption is the Future of Crypto", + }, + encryptionBody1: { + id: "OurPrinciples.encryptionBody1", + defaultMessage: + "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.", + }, + encryptionBody2: { + id: "OurPrinciples.encryptionBody2", + defaultMessage: + "We do not compromise on protection — using zero-knowledge proofs (zk-SNARKs) and the highest industry standards for encryption.", + }, + buildTogetherHeading: { + id: "OurPrinciples.buildTogetherHeading", + defaultMessage: "We Build, Together", + }, + buildTogetherBody: { + id: "OurPrinciples.buildTogetherBody", + defaultMessage: + "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.", + }, + complianceHeading: { + id: "OurPrinciples.complianceHeading", + defaultMessage: "Common Sense Compliance", + }, + complianceBody: { + id: "OurPrinciples.complianceBody", + defaultMessage: + "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.", + }, +}); + +export function OurPrinciples() { + const expandingListProps = useAutoExpandingList(); + const { formatMessage } = useIntl(); + + return ( + + + + + {formatMessage(messages.ourPrinciples)} + + + + {formatMessage(messages.encryptionHeading)} + + } + body={ + + {formatMessage(messages.encryptionBody1)} + {formatMessage(messages.encryptionBody2)} + + + + + } + /> + + {formatMessage(messages.buildTogetherHeading)} + + } + body={ + + {formatMessage(messages.buildTogetherBody)} + + + + + } + /> + + {formatMessage(messages.complianceHeading)} + + } + body={ + + {formatMessage(messages.complianceBody)} + + + + + } + /> + + + + + + {expandingListProps.activeIndex in IMAGE_BY_INDEX && + IMAGE_BY_INDEX[ + expandingListProps.activeIndex as keyof typeof IMAGE_BY_INDEX + ]} + + + + + + ); +} diff --git a/components/Foundation/OurPrinciples/assets/image-01.svg b/components/Foundation/OurPrinciples/assets/image-01.svg new file mode 100644 index 00000000..c9def3c5 --- /dev/null +++ b/components/Foundation/OurPrinciples/assets/image-01.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/Foundation/OurPrinciples/assets/image-02.svg b/components/Foundation/OurPrinciples/assets/image-02.svg new file mode 100644 index 00000000..823c9b60 --- /dev/null +++ b/components/Foundation/OurPrinciples/assets/image-02.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/Foundation/OurPrinciples/assets/image-03.svg b/components/Foundation/OurPrinciples/assets/image-03.svg new file mode 100644 index 00000000..a17e02af --- /dev/null +++ b/components/Foundation/OurPrinciples/assets/image-03.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/community/foundation/index.tsx b/pages/community/foundation/index.tsx index 4c7c2642..20144541 100644 --- a/pages/community/foundation/index.tsx +++ b/pages/community/foundation/index.tsx @@ -15,6 +15,7 @@ import flower from "../../../assets/heroImages/foundation/flower.svg"; import key from "../../../assets/heroImages/foundation/key.svg"; import weather from "../../../assets/heroImages/foundation/weather.svg"; import Link from "next/link"; +import { OurPrinciples } from "@/components/Foundation/OurPrinciples/OurPrinciples"; const flowerImg = flower as LocalImage; const keyImg = key as LocalImage; @@ -222,6 +223,9 @@ export default function Governance() { }} /> + + + );