diff --git a/packages/react-app/public/assets/challenges/ctf.svg b/packages/react-app/public/assets/challenges/ctf.svg new file mode 100644 index 00000000..ca19aca0 --- /dev/null +++ b/packages/react-app/public/assets/challenges/ctf.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react-app/public/assets/challenges/techTree.svg b/packages/react-app/public/assets/challenges/techTree.svg new file mode 100644 index 00000000..5e141e81 --- /dev/null +++ b/packages/react-app/public/assets/challenges/techTree.svg @@ -0,0 +1,442 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/react-app/src/components/AfterSreCard.jsx b/packages/react-app/src/components/AfterSreCard.jsx new file mode 100644 index 00000000..139d8065 --- /dev/null +++ b/packages/react-app/src/components/AfterSreCard.jsx @@ -0,0 +1,89 @@ +import React from "react"; +import { chakra, Button, Center, Image, Flex, Text, Link, Box, VStack } from "@chakra-ui/react"; +import useCustomColorModes from "../hooks/useCustomColorModes"; + +const AfterSreCard = ({ title, description, externalLink, previewImage, backgroundColor, buttonText }) => { + const { borderColor, bgColor, primaryFontColor } = useCustomColorModes(); + return ( +
+ + + + + + {title} + + + + + {description} + + + + + + + {`${title} + + +
+ ); +}; + +export default AfterSreCard; diff --git a/packages/react-app/src/components/AfterSreLine.jsx b/packages/react-app/src/components/AfterSreLine.jsx new file mode 100644 index 00000000..70a23ae6 --- /dev/null +++ b/packages/react-app/src/components/AfterSreLine.jsx @@ -0,0 +1,83 @@ +import React from "react"; +import { chakra, Box, Flex } from "@chakra-ui/react"; +import useCustomColorModes from "../hooks/useCustomColorModes"; + +const AfterSreLine = () => { + const { bgColor, borderColor } = useCustomColorModes(); + + return ( + + + + + + + + ); +}; + +export default AfterSreLine; diff --git a/packages/react-app/src/views/HomeView.jsx b/packages/react-app/src/views/HomeView.jsx index e1456c9c..09a57302 100644 --- a/packages/react-app/src/views/HomeView.jsx +++ b/packages/react-app/src/views/HomeView.jsx @@ -1,16 +1,19 @@ import React, { useMemo } from "react"; -import { Container, Box, Text, Center, useColorModeValue, Button } from "@chakra-ui/react"; +import { Container, Box, Text, Center, useColorModeValue, Button, Flex } from "@chakra-ui/react"; +import { useHistory } from "react-router-dom"; import ChallengeExpandedCard from "../components/ChallengeExpandedCard"; import { challengeInfo } from "../data/challenges"; import useCustomColorModes from "../hooks/useCustomColorModes"; import HeroLogo from "../components/icons/HeroLogo"; import HeroDiamond from "../components/icons/HeroDiamond"; -import { useHistory } from "react-router-dom"; +import AfterSreCard from "../components/AfterSreCard"; +import AfterSreLine from "../components/AfterSreLine"; export default function HomeView({ connectedBuilder, userProvider }) { const history = useHistory(); const { primaryFontColor, bgColor } = useCustomColorModes(); const cardBgColor = useColorModeValue("sre.cardBackground", "sreDark.cardBackground"); + const techTreeBgColor = useColorModeValue("#96EAEA", "#3AACAD"); const builderAttemptedChallenges = useMemo(() => { if (!connectedBuilder?.challenges) { @@ -18,6 +21,7 @@ export default function HomeView({ connectedBuilder, userProvider }) { } return Object.fromEntries( + // eslint-disable-next-line no-unused-vars Object.entries(connectedBuilder.challenges).filter(([_, challengeData]) => challengeData?.status), ); }, [connectedBuilder]); @@ -96,6 +100,35 @@ export default function HomeView({ connectedBuilder, userProvider }) { /> ))} + + + + + + + + ); }