Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding Provisions pop-up #2552

Merged
merged 4 commits into from
Feb 15, 2024
Merged

adding Provisions pop-up #2552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bd5a55c
adding Provisions pop-up
TalBenAvi Feb 15, 2024
3b0f1dc
fix comments
TalBenAvi Feb 15, 2024
bf8dead
fix names
TalBenAvi Feb 15, 2024
edf7e26
Merge branch 'dev' into provisions-hp-popup
igalst Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
259 changes: 134 additions & 125 deletions workspaces/website/src/blocks/HomepageHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
};
20 changes: 20 additions & 0 deletions workspaces/website/src/components/ProvisionsPopup/ArrowRight/ArrowRight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
28 changes: 28 additions & 0 deletions workspaces/website/src/components/ProvisionsPopup/CloseIcon/CloseIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Loading
Loading