Merge pull request #2552 from starknet-io/provisions-hp-popup

adding Provisions pop-up
starknet-io · Feb 15, 2024 · cf19555 · cf19555
2 parents 41bc4fa + edf7e26
commit cf19555
Show file tree

Hide file tree

Showing 7 changed files with 384 additions and 146 deletions.
diff --git a/workspaces/website/src/blocks/HomepageHero.tsx b/workspaces/website/src/blocks/HomepageHero.tsx
@@ -2,151 +2,160 @@ import { Box, Flex, Img, Stack } from "@chakra-ui/react";
 import { Button } from "@ui/Button";
 import { Heading } from "@ui/Typography/Heading";
 import { Text } from "@ui/Typography/Text";
+import { Intro } from "./Intro";
+import ProvisionsPopup from "@ui/ProvisionsPopup/ProvisionsPopup";
 
 type Props = {
   readonly seo: {
     heroText: string;
   };
 };
-import { Intro } from "./Intro";
 
 export const HomepageHero = ({ seo }: Props) => {
   return (
-    <Box
-      as="section"
-      pt="46px"
-      pb="93px"
-      overflow="hidden"
-      bg="#eaeaea"
-      minHeight="729px"
-      _dark={{
-        bgGradient:
-          "linear(0.39deg, #3F1838 -0.96%, #110751 44.39%, #171B31 100.23%)",
-      }}
-      bgGradient="linear(0.59deg, #FBECF3 0.97%, #F3EBF7 26.24%, #F0F0FB 54.59%, #E6F0FF 99.96%)"
-      borderRadius="24px"
-      position="relative"
-      mt="-24px"
-    >
-      <Box
-        inset={0}
-        position="absolute"
-        opacity="0.6"
-        mixBlendMode="overlay"
-        _dark={{
-          opacity: 0.3,
-        }}
-      >
-        <Img
-          zIndex={0}
-          pos="relative"
-          w="full"
-          h="full"
-          src="/assets/home/Pattern.png"
-          alt="Screenshot for Form builder"
-          objectFit={{ base: "cover", lg: "cover" }}
-        />
-      </Box>
+    <>
+      <ProvisionsPopup />
       <Box
-        zIndex={2}
-        inset={0}
-        position="absolute"
-        mixBlendMode="color-dodge"
+        as="section"
+        pt="46px"
+        pb="93px"
+        overflow="hidden"
+        bg="#eaeaea"
+        minHeight="729px"
         _dark={{
-          mixBlendMode: "soft-light",
-          opacity: 0.4,
+          bgGradient:
+            "linear(0.39deg, #3F1838 -0.96%, #110751 44.39%, #171B31 100.23%)",
         }}
+        bgGradient="linear(0.59deg, #FBECF3 0.97%, #F3EBF7 26.24%, #F0F0FB 54.59%, #E6F0FF 99.96%)"
+        borderRadius="24px"
+        position="relative"
+        mt="-24px"
       >
-        <Img
-          pos="relative"
-          w="full"
-          h="full"
-          src="/assets/home/curves.svg"
-          alt="curves"
-          objectFit={{ base: "cover", lg: "cover" }}
-        />
-      </Box>
+        <Box
+          inset={0}
+          position="absolute"
+          opacity="0.6"
+          mixBlendMode="overlay"
+          _dark={{
+            opacity: 0.3,
+          }}
+        >
+          <Img
+            zIndex={0}
+            pos="relative"
+            w="full"
+            h="full"
+            src="/assets/home/Pattern.png"
+            alt="Screenshot for Form builder"
+            objectFit={{ base: "cover", lg: "cover" }}
+          />
+        </Box>
+        <Box
+          zIndex={2}
+          inset={0}
+          position="absolute"
+          mixBlendMode="color-dodge"
+          _dark={{
+            mixBlendMode: "soft-light",
+            opacity: 0.4,
+          }}
+        >
+          <Img
+            pos="relative"
+            w="full"
+            h="full"
+            src="/assets/home/curves.svg"
+            alt="curves"
+            objectFit={{ base: "cover", lg: "cover" }}
+          />
+        </Box>
 
-      <Box
-        zIndex={2}
-        maxW={{ base: "xl", md: "7xl" }}
-        mx="auto"
-        px={{ base: "6", md: "48px", lg: "40px", xl: "56px" }}
-      >
-        <Flex
-          align="flex-end"
-          direction={{ base: "column", lg: "row" }}
-          justify="space-between"
-          // paddingBottom="33px"
-          // mb="56px"
+        <Box
+          zIndex={2}
+          maxW={{ base: "xl", md: "7xl" }}
+          mx="auto"
+          px={{ base: "6", md: "48px", lg: "40px", xl: "56px" }}
         >
-          <Box
-            top={{ lg: "-64px" }}
-            position="relative"
-            flex="1"
-            maxW={{ lg: "xl" }}
-            pt="0"
-            order={{ base: 1, lg: 0 }}
+          <Flex
+            align="flex-end"
+            direction={{ base: "column", lg: "row" }}
+            justify="space-between"
+            // paddingBottom="33px"
+            // mb="56px"
           >
-            <Intro />
-
-            <Heading
-              variant="h1"
-              fontWeight="bold"
-              color="heading-navy-fg"
-              mt={{ base: "0", lg: "-20px" }}
-              fontSize={{ base: "56px", md: "80px", xl: "92px" }}
-            >
-              Starknet
-            </Heading>
-            <Text
-              color="hero-subtitle-fg"
-              mt="5"
-              fontSize="20px"
-              fontWeight="500"
+            <Box
+              top={{ lg: "-64px" }}
+              position="relative"
+              flex="1"
+              maxW={{ lg: "xl" }}
+              pt="0"
+              order={{ base: 1, lg: 0 }}
             >
-              {seo.heroText}
-            </Text>
+              <Intro />
 
-            <Stack
-              direction={{ base: "column", md: "row" }}
-              spacing="4"
-              mt="72px"
-              position={{ base: "relative", md: "relative" }}
-              zIndex={4}
-            >
-              <Button
-                href="/en/developers"
-                size="lg"
-                minW="210px"
-                variant="primaryHero"
+              <Heading
+                variant="h1"
+                fontWeight="bold"
+                color="heading-navy-fg"
+                mt={{ base: "0", lg: "-20px" }}
+                fontSize={{ base: "56px", md: "80px", xl: "92px" }}
               >
-                Build on Starknet
-              </Button>
-              <Button
-                size="lg"
-                variant="secondaryHero"
-                href="/en/explore-starknet"
+                Starknet
+              </Heading>
+              <Text
+                color="hero-subtitle-fg"
+                mt="5"
+                fontSize="20px"
+                fontWeight="500"
               >
-                Explore Starknet
-              </Button>
-            </Stack>
-          </Box>
-          <Box
-            zIndex={0}
-            order={{ base: 0, lg: 1 }}
-            // boxSize={{ base: "20", lg: "8" }}
-          />
-          <Img
-            position="relative"
-            marginRight={{ sm: "-70px", md: "-10px", lg: "-5rem", xl: "-9rem" }}
-            right={{ base: "-2rem", md: "-3rem", lg: "auto" }}
-            width={{ base: "100%", lg: "35rem" }}
-            src="/assets/home/hero_illustration.png"
-            alt="Screenshot for Form builder"
-          />
-        </Flex>
+                {seo.heroText}
+              </Text>
+
+              <Stack
+                direction={{ base: "column", md: "row" }}
+                spacing="4"
+                mt="72px"
+                position={{ base: "relative", md: "relative" }}
+                zIndex={4}
+              >
+                <Button
+                  href="/en/developers"
+                  size="lg"
+                  minW="210px"
+                  variant="primaryHero"
+                >
+                  Build on Starknet
+                </Button>
+                <Button
+                  size="lg"
+                  variant="secondaryHero"
+                  href="/en/explore-starknet"
+                >
+                  Explore Starknet
+                </Button>
+              </Stack>
+            </Box>
+            <Box
+              zIndex={0}
+              order={{ base: 0, lg: 1 }}
+              // boxSize={{ base: "20", lg: "8" }}
+            />
+            <Img
+              position="relative"
+              marginRight={{
+                sm: "-70px",
+                md: "-10px",
+                lg: "-5rem",
+                xl: "-9rem",
+              }}
+              right={{ base: "-2rem", md: "-3rem", lg: "auto" }}
+              width={{ base: "100%", lg: "35rem" }}
+              src="/assets/home/hero_illustration.png"
+              alt="Screenshot for Form builder"
+            />
+          </Flex>
+        </Box>
       </Box>
-    </Box>
+    </>
   );
 };
diff --git a/workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx b/workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx
@@ -0,0 +1,20 @@
+const ArrowRight = () => {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M12.9697 3.96967C13.2626 3.67678 13.7374 3.67678 14.0303 3.96967L21.5303 11.4697C21.671 11.6103 21.75 11.8011 21.75 12C21.75 12.1989 21.671 12.3897 21.5303 12.5303L14.0303 20.0303C13.7374 20.3232 13.2626 20.3232 12.9697 20.0303C12.6768 19.7374 12.6768 19.2626 12.9697 18.9697L19.1893 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H19.1893L12.9697 5.03033C12.6768 4.73744 12.6768 4.26256 12.9697 3.96967Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ArrowRight;
diff --git a/workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx b/workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx
@@ -0,0 +1,28 @@
+const CloseIcon = () => {
+  return (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-path="url(#clip0_1_600)">
+        <path
+          d="M20.125 20.125L7.875 7.875M20.125 7.875L7.875 20.125"
+          stroke="white"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1_600">
+          <rect width="28" height="28" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default CloseIcon;