Merge pull request #12908 from ethereum/contributor-quiz

Contributors quiz callout banner

Author: wackerow

public/content/contributing/index.md

@@ -68,6 +68,8 @@ Before contributing, make sure you're familiar with:
 - our [style guide](/contributing/style-guide/)
 - our [code of conduct](/community/code-of-conduct)
 
+<ContributorsQuizBanner mt={16} mb={8} />
+
 ## How decisions about the site are made {#how-decisions-about-the-site-are-made}
 
 Decisions about individual PRs, design evolution and major upgrades are made by a team from across the Ethereum ecosystem. This team includes project managers, developers, designers, marketing and communications, and subject matter experts. Community input informs every decision: so please raise questions in issues, submit PRs, or contact the team:

public/people-learning.png

@@ -0,0 +1,64 @@
+import { Box, Flex, FlexProps, Heading, Text } from "@chakra-ui/react"
+
+import { Image } from "@/components/Image"
+
+import { ButtonLink } from "../Buttons"
+
+import PeopleLearning from "@/public/people-learning.png"
+
+// TODO: refactor to use CalloutBanner component
+function ContributorsQuizBanner(props: FlexProps) {
+  return (
+    <Flex
+      as="aside"
+      flexDir={{ base: "column", md: "row-reverse" }}
+      bg="layer2Gradient"
+      borderRadius="base"
+      {...props}
+    >
+      <Flex
+        flex="1 1 50%"
+        position="relative"
+        justify={{ base: "center", md: "end" }}
+        align="end"
+        minH={{ base: 200, md: "auto" }}
+        px={{ base: 8, md: 0 }}
+      >
+        <Image
+          position="absolute"
+          src={PeopleLearning}
+          alt="People learning about Ethereum"
+          w="full"
+          maxH="120%"
+          style={{
+            objectFit: "contain",
+          }}
+        />
+        <Box hideFrom="md" borderBottom="1px solid #D3C5F1" w="full" />
+      </Flex>
+      <Flex
+        flex="1 1 50%"
+        flexDir="column"
+        gap="8"
+        py="8"
+        ps="8"
+        pe={{ base: 8, lg: 0 }}
+      >
+        <Flex gap="2" flexDir="column">
+          <Heading size="lg">Unsure where to start?</Heading>
+          <Text size="lg" color="body.base">
+            Take a quick quiz and find out how you can contribute on
+            ethereum.org.
+          </Text>
+        </Flex>
+        <Box>
+          <ButtonLink href="https://ethdotorg.typeform.com/contributor">
+            Take a quiz
+          </ButtonLink>
+        </Box>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default ContributorsQuizBanner

src/components/Banners/ContributorsQuizBanner.tsx

@@ -32,6 +32,7 @@ import { mdxTableComponents } from "@/components/Table"
 import TooltipLink from "@/components/TooltipLink"
 import YouTube from "@/components/YouTube"
 
+import ContributorsQuizBanner from "./Banners/ContributorsQuizBanner"
 import GlossaryTooltip from "./Glossary/GlossaryTooltip"
 import { StandaloneQuizWidget } from "./Quiz/QuizWidget"
 import Card from "./Card"
@@ -269,6 +270,7 @@ export const reactComponents = {
   Card,
   ContentContainer,
   Contributors,
+  ContributorsQuizBanner,
   Divider,
   DocLink,
   Emoji,