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() {
}}
/>
+
+
+
);