updated paths and names

website/src/components/PolicyCards/PolicyChapterCard.tsx

@@ -0,0 +1,35 @@
+import { Box, Flex, Heading, Stack, Text, useColorModeValue } from "@chakra-ui/react";
+
+export interface ChapterInfo {
+  number: string;
+  title: string;
+  desc: string;
+}
+
+export interface ChapterProps {
+  chapter: ChapterInfo;
+  children: React.ReactNode;
+}
+
+export const PolicyChapterCard = ({ chapter, children }: ChapterProps) => {
+  const backgroundColor = useColorModeValue("gray.100", "gray.800");
+
+  return (
+    <Box bg={backgroundColor} p="6" borderRadius="xl" shadow="base">
+      <Stack spacing="4">
+        <Stack>
+          <Flex alignItems="end" gap="2">
+            <Text as="b" fontSize="xl" color="blue.500">
+              {chapter.number}
+            </Text>
+            <Heading as="h3" size="lg">
+              {chapter.title}
+            </Heading>
+          </Flex>
+          <Text>{chapter.desc}</Text>
+        </Stack>
+        {children}
+      </Stack>
+    </Box>
+  );
+};

website/src/components/PolicyCards/PolicySectionCard.tsx

@@ -0,0 +1,31 @@
+import { Box, Flex, Heading, Stack, Text, useColorModeValue } from "@chakra-ui/react";
+
+export interface SectionInfo {
+  number: string;
+  title: string;
+  desc: string;
+}
+
+export interface SectionProps {
+  section: SectionInfo;
+}
+
+export const PolicySectionCard = ({ section }: SectionProps) => {
+  const backgroundColor = useColorModeValue("gray.200", "gray.700");
+
+  return (
+    <Box bg={backgroundColor} p="6" borderRadius="lg">
+      <Stack>
+        <Flex alignItems="end" gap="2">
+          <Text as="b" fontSize="md" color="blue.500">
+            {section.number}
+          </Text>
+          <Heading as="h4" size="md">
+            {section.title}
+          </Heading>
+        </Flex>
+        <Text>{section.desc}</Text>
+      </Stack>
+    </Box>
+  );
+};