Merge pull request #1354 from scroll-tech/canvas-talent-badges

feat: canvas talent badges

src/pages/canvas-badge/Badges/index.tsx

@@ -116,7 +116,7 @@ const Badges = () => {
   }
 
   return (
-    <SectionWrapper dark sx={{ pt: ["2.2rem", "10.2rem"], pb: ["2.2rem", "12rem"] }}>
+    <SectionWrapper dark sx={{ pt: ["1.4rem", "3rem"], pb: ["2.2rem", "12rem"] }}>
       <div id={`${CANVAS_AND_BADGES_PAGE_SYMBOL}-discover`}></div>
       <Box className={classes.grid}>
         <Typography

src/pages/canvas-badge/FeaturedBadges/index.tsx

@@ -0,0 +1,61 @@
+import { Box, Stack, SvgIcon, Typography } from "@mui/material"
+
+import { ReactComponent as ExternalLinkSvg } from "@/assets/svgs/canvas-badge/external-link.svg"
+import { ReactComponent as PassportSvg } from "@/assets/svgs/canvas-badge/passport-logo.svg"
+import SectionWrapper from "@/components/SectionWrapper"
+import Button from "@/pages/canvas/components/Button"
+
+const FeaturedBadges = () => {
+  return (
+    <SectionWrapper dark sx={{ pt: ["3.2rem", "7.2rem"] }}>
+      <Box>
+        <Typography sx={{ fontSize: ["2.4rem", "4.8rem"], lineHeight: ["3.6rem", "5.6rem"], fontWeight: 500, color: "primary.contrastText" }}>
+          Featured badges
+        </Typography>
+        <Box
+          sx={{
+            mt: ["1.6rem", "2.4rem"],
+            height: ["auto", "auto", "41rem", "38rem"],
+            width: "100%",
+            aspectRatio: ["320/560", "320/560", "unset"],
+            p: ["2.4rem 1.6rem", "5rem 4.8rem"],
+            borderRadius: ["2rem", "2rem", "2.5rem"],
+            background: [
+              "url(/imgs/canvas-badge/featured-badges-bg-mobile.webp) bottom center  / 100% auto no-repeat",
+              "url(/imgs/canvas-badge/featured-badges-bg-mobile.webp) bottom center / 100% auto no-repeat",
+              "url(/imgs/canvas-badge/featured-badges-bg.webp) center right / auto 100% no-repeat",
+            ],
+          }}
+        >
+          <Stack direction="column" gap={["1.6rem", "2.4rem"]}>
+            <SvgIcon sx={{ width: ["71px", "147px"], height: "auto" }} component={PassportSvg} inheritViewBox></SvgIcon>
+            <Typography sx={{ fontSize: ["2rem", "4rem"], fontWeight: 500, lineHeight: ["3.2rem", "4.8rem"], color: "primary.contrastText" }}>
+              Show your ZK talent
+            </Typography>
+            <Typography
+              sx={{
+                fontSize: ["1.6rem", "2.4rem"],
+                lineHeight: ["2.4rem", "3.6rem"],
+                color: "primary.contrastText",
+                maxWidth: ["100%", "100%", "42rem", "57.4rem"],
+              }}
+            >
+              Developer empowerment through onchain attestation. Mint your ZK privacy, infra or rollup talent badge!
+            </Typography>
+            <Button
+              href="https://app.passport.xyz/#/campaign/scroll-developer"
+              target="_blank"
+              color="white"
+              variant="contained"
+              sx={{ borderRadius: "0.8rem", width: ["20rem", "21.2rem"], height: "4.8rem !important", padding: 0 }}
+            >
+              View details <SvgIcon sx={{ fontSize: "1.2rem", ml: "8px" }} component={ExternalLinkSvg} inheritViewBox></SvgIcon>
+            </Button>
+          </Stack>
+        </Box>
+      </Box>
+    </SectionWrapper>
+  )
+}
+
+export default FeaturedBadges

src/pages/canvas-badge/index.tsx

@@ -1,4 +1,5 @@
 import Badges from "./Badges"
+import FeaturedBadges from "./FeaturedBadges"
 import Header from "./Header"
 import Introduction from "./Introduction"
 
@@ -7,6 +8,7 @@ const CanvasBadge = () => {
     <>
       <Header></Header>
       <Introduction></Introduction>
+      <FeaturedBadges></FeaturedBadges>
       <Badges></Badges>
     </>
   )

src/pages/canvas/components/Button/index.tsx

@@ -4,9 +4,9 @@ import { ButtonProps, CircularProgress, Button as ScrollButton } from "@mui/mate
 
 import useCheckViewport from "@/hooks/useCheckViewport"
 
-interface ScrollButtonProps extends ButtonProps {
+interface ScrollButtonProps extends Omit<ButtonProps, "color"> {
   width?: string | number
-  color?: "primary" | "secondary" | "tertiary"
+  color?: "primary" | "secondary" | "tertiary" | "white"
   gloomy?: boolean
   loading?: boolean
   disabled?: boolean
@@ -26,6 +26,8 @@ const backgroundColor = (color, theme) => {
       return "#262626"
     case "tertiary":
       return "transparent"
+    case "white":
+      return "#ffffff"
     default:
       return theme.palette.text.primary
   }
@@ -39,6 +41,8 @@ const cColor = (color, theme) => {
       return "#ffffff"
     case "tertiary":
       return "#ffffff"
+    case "white":
+      return theme.palette.text.primary
     default:
       return theme.palette.primary.contrastText
   }
@@ -52,6 +56,8 @@ const borderColor = (color, theme) => {
       return "#262626"
     case "tertiary":
       return "#ffffff"
+    case "white":
+      return "#ffffff"
     default:
       return theme.palette.primary.contrastText
   }