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

Add responsive design to build page #440

Merged
merged 7 commits into from
Nov 9, 2023
Merged

Add responsive design to build page #440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
491bfe5
refactor(website): make the build page responsive
vplasencia Nov 9, 2023
1fbb437
style(website): style code with prettier
vplasencia Nov 9, 2023
e026973
refactor(website): make the image responsive
vplasencia Nov 9, 2023
7368255
refactor(website): update action card padding
vplasencia Nov 9, 2023
2d974cf
refactor(website): change font style
vplasencia Nov 9, 2023
075e8f4
refactor(website): update action card button style
vplasencia Nov 9, 2023
3b7542e
refactor(website): update tools card height
vplasencia Nov 9, 2023
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
43 changes: 25 additions & 18 deletions apps/website/src/app/build/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Flex, Link, Text, VStack } from "@chakra-ui/react"
import { Flex, Link, Text, VStack, Box } from "@chakra-ui/react"
import Image from "next/image"
import ActionCard from "../../components/ActionCard"
import ToolsCard from "../../components/ToolsCard"
Expand Down Expand Up @@ -58,8 +58,10 @@ export default function Build() {
return (
<VStack justify="center">
<VStack mt={"90px"}>
<Text fontSize={"72px"}>Let’s build something new</Text>
<Text color={"alabaster.400"} mt={"14px"}>
<Text textAlign={"center"} fontSize={{ base: "40px", md: "72px" }}>
Let’s build something new
</Text>
<Text textAlign={"center"} fontSize={{ base: "16px", md: "20px" }} color={"alabaster.400"} mt={"14px"}>
Jumpstart your app development process with these building tools.
</Text>
<VStack mt={"64px"}>
Expand All @@ -83,23 +85,24 @@ export default function Build() {
backgroundColor={"darkBlue"}
p={"0"}
w={"100vw"}
maxW={"1440px"}
h={"auto"}
wrap={"wrap"}
wrap={{ base: "wrap", xl: "nowrap" }}
>
<Flex
justify={"center"}
alignItems={"center"}
mt={"125px"}
ml={"80px"}
mr={"188px"}
mb={"109px"}
w={"445px"}
mt={{ base: "120px", xl: "125px" }}
ml={{ base: "32px", xl: "80px" }}
mr={{ base: "32px", xl: "188px" }}
mb={{ base: "120px", xl: "109px" }}
w={{ base: "auto", xl: "445px" }}
>
<VStack alignItems={"left"}>
<Text fontSize={"44px"} fontWeight={"500"}>
<Text fontSize={{ base: "30px", md: "44px" }} fontWeight={"500"}>
Contribute to Semaphore
</Text>
<Text color={"alabaster.300"} mt={"16px"}>
<Text fontSize={{ base: "16px", md: "18px" }} color={"alabaster.300"} mt={"16px"}>
Semaphore is open source with dozens of community contributors. You can propose improvements
to the protocol or take good first issues to get started.
</Text>
Expand Down Expand Up @@ -129,13 +132,17 @@ export default function Build() {
</VStack>
</VStack>
</Flex>
<Image
src="https://semaphore.cedoor.dev/flower-shadow.jpg"
width={727}
height={630}
style={{ maxHeight: "630px" }}
alt="Flower Shadow"
/>
<Box position={"relative"} w={{ base: "full", xl: "727px" }} h={"630"}>
<Image
src="https://semaphore.cedoor.dev/flower-shadow.jpg"
alt="Flower Shadow"
fill
quality="100"
style={{
objectFit: "cover"
}}
/>
</Box>
</Flex>
<VStack my={"128"}>
<ActionCard
Expand Down
21 changes: 14 additions & 7 deletions apps/website/src/components/ActionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,41 @@ export default function ActionCard({ title, description, buttonText }: ActionCar
borderRadius={"24px"}
width={{ base: "full", xl: "1110px" }}
height={{ base: "full", xl: "244px" }}
direction={{ base: "column", dm: "row" }}
direction={{ base: "column", xl: "row" }}
p={{ base: "64px 32px", xl: "41px 80px" }}
>
<CardBody padding={0} m={"41px 80px"}>
<CardBody padding={0}>
<Flex
justifyContent={"space-between"}
alignItems={"center"}
direction={{ base: "column", md: "row" }}
gap={{ base: "2rem", md: "0" }}
>
<Stack width={{ base: "full", md: "522px" }}>
<Heading fontSize={"40px"} lineHeight={"44px"} fontWeight={"normal"} textColor={"white"}>
<Heading
fontSize={{ base: "30px", md: "40px" }}
lineHeight={"44px"}
fontWeight={"normal"}
textColor={"white"}
>
{title}
</Heading>
<Text
mt={"1rem"}
fontSize={"20px"}
lineHeight={"32px"}
fontSize={{ base: "16px", md: "20px" }}
lineHeight={{ base: "25px", md: "32px" }}
fontWeight={"normal"}
textColor={"alabaster.400"}
>
{description}
</Text>
</Stack>
<Stack>
<Stack width={{ base: "full", md: "auto" }}>
<Button
bg={"semaphore"}
w={"fit-content"}
lineHeight={"24px"}
fontSize={"20px"}
fontSize={{ base: "14px", md: "18px", lg: "20px" }}
textColor={"white"}
padding={"1.5rem 2rem"}
_hover={{ opacity: "85%" }}
Expand Down
4 changes: 2 additions & 2 deletions apps/website/src/components/ToolsCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@ export default function ToolsCard({ icon, title, subtitle, details }: ToolsCardP
border={"1px"}
borderColor={"alabaster.950"}
padding={"32px"}
width={{ base: "full", sm: "348px" }}
height={"501px"}
width={{ base: "full", lg: "348px" }}
height={{ base: "auto", lg: "501px" }}
>
<HStack mb={"2rem"}>{icon}</HStack>
<CardBody padding={0}>
Expand Down
Loading