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

Merge dev into production #2553

Merged
merged 16 commits into from
Feb 19, 2024
Merged

Merge dev into production #2553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 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
cf19555
Merge pull request #2552 from starknet-io/provisions-hp-popup
igalst Feb 15, 2024
794b74d
Semantic fixes
igalst Feb 15, 2024
051cd01
Merge branch 'dev' into provisions-hp-popup
igalst Feb 15, 2024
45ea0fd
Merge pull request #2554 from starknet-io/provisions-hp-popup
igalst Feb 15, 2024
f284945
fixing color of close button
TalBenAvi Feb 18, 2024
ef098e1
Merge pull request #2556 from starknet-io/provisions-hp-popup-fixing-…
igalst Feb 18, 2024
7de7bec
fixing requested changes
TalBenAvi Feb 18, 2024
9a719a0
edit close modal
TalBenAvi Feb 18, 2024
12edf1d
editing transparent percent
TalBenAvi Feb 18, 2024
aed517e
editing onClose finction
TalBenAvi Feb 18, 2024
54b8846
changing onClick function call
TalBenAvi Feb 18, 2024
8442f0e
Merge pull request #2559 from starknet-io/provisions-hp-popup-adding-…
igalst Feb 18, 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