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 learn page #435

Merged
merged 8 commits into from
Nov 9, 2023
Merged

Add responsive design to learn page #435

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
48b6d85
refactor(website): add responsive design to learn page
vplasencia Nov 8, 2023
0bf2131
refactor(website): run prettier
vplasencia Nov 8, 2023
e0332f1
chore(website): merge branch 'chore/website' into ref/responsive-lear…
vplasencia Nov 8, 2023
f21c777
chore(website): merge branch 'chore/website' into ref/responsive-lear…
vplasencia Nov 8, 2023
075cdb8
refactor(website): create scrollable list for videos and articles
vplasencia Nov 8, 2023
c70f162
style(website): format code with prettier
vplasencia Nov 8, 2023
3979f34
refactor(website): update copy code button style
vplasencia Nov 9, 2023
799b765
refactor(website): update font size for responsive design
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
107 changes: 91 additions & 16 deletions apps/website/src/app/learn/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@ import IconBadge from "@/icons/IconBadge"
import IconCheck from "@/icons/IconCheck"
import IconFlag from "@/icons/IconFlag"
import Carousel from "@/components/Carousel"
import videos from "../../data/videos.json"
import VideoCard from "../../components/VideoCard"
import articles from "../../data/articles.json"
import ArticleCard from "../../components/ArticleCard"

export default function Learn() {
const infoCardTexts: InfoBlock[][] = [
Expand Down Expand Up @@ -174,26 +178,26 @@ await verifyProof(verificationKey, fullProof)`,

const renderTabBlockSemaphore = () => (
<VStack>
<VStack w={"720px"}>
<Text fontSize={"44px"} fontWeight={"500"}>
<VStack w={{ base: "auto", md: "720px" }}>
<Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
Semaphore: Anonymous interactions
</Text>
<Text fontSize={"20px"} mt={"24px"} lineHeight={"32px"}>
<Text fontSize={{ base: "16px", md: "20px" }} mt={"24px"} lineHeight={"32px"}>
Using zero knowledge, Semaphore allows users to prove their membership of a group and send signals
such as votes or endorsements without revealing their original identity. The goal is to make
Semaphore a standard for anonymous signaling and group membership proving.
</Text>
</VStack>
<VStack mt={"40px"}>
<Flex gap={"32px"}>
<Flex wrap={{ base: "wrap", lg: "nowrap" }} justify={"center"} alignItems={"center"} gap={"32px"}>
<VStack>
<Text fontSize={"30px"} fontWeight={"500"}>
<Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
Principles
</Text>
<InfoCard texts={infoCardTexts[0]} />
</VStack>
<VStack>
<Text fontSize={"30px"} fontWeight={"500"}>
<Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
Main focus
</Text>
<InfoCard texts={infoCardTexts[1]} />
Expand All @@ -205,11 +209,11 @@ await verifyProof(verificationKey, fullProof)`,

const renderTabBlockZeroKnowledge = () => (
<VStack>
<VStack w={"720px"}>
<Text fontSize={"44px"} fontWeight={"500"}>
<VStack w={{ base: "auto", md: "720px" }}>
<Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
Zero Knowledge: new cryptography
</Text>
<Text fontSize={"20px"} mt={"24px"} lineHeight={"32px"}>
<Text fontSize={{ base: "16px", md: "20px" }} mt={"24px"} lineHeight={"32px"}>
Zero-knowledge is a new field in cryptography that allows developers to build apps that allow users
to share information with each other without revealing their identities or the contents of the
information being shared.
Expand All @@ -219,7 +223,7 @@ await verifyProof(verificationKey, fullProof)`,
borderBottomWidth={"1px"}
borderBottomColor={"white"}
_hover={{ borderBottomColor: "transparent" }}
fontSize="20px"
fontSize={{ base: "16px", md: "20px" }}
fontWeight="normal"
>
Learn more
Expand All @@ -228,7 +232,7 @@ await verifyProof(verificationKey, fullProof)`,
</VStack>
<VStack mt={"40px"}>
<VStack>
<Text fontSize={"30px"} fontWeight={"500"}>
<Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
Characteristics
</Text>
<InfoCard texts={infoCardTexts[0]} />
Expand All @@ -239,8 +243,16 @@ await verifyProof(verificationKey, fullProof)`,

return (
<VStack>
<VStack h="1300px" position="relative">
<Box zIndex="-1" left="50%" transform="translateX(-50%)" w="100vw" h="100%" pos="absolute">
<VStack h={{ base: "2100px", md: "1800px", lg: "1300px" }} position="relative">
<Box
display={{ base: "none", md: "block" }}
zIndex="-1"
left={"50%"}
transform="translateX(-50%)"
w="100vw"
h="100%"
pos="absolute"
>
<Image
alt="Guy shadow image"
src="https://semaphore.cedoor.dev/guy-shadow-horizontal.jpg"
Expand All @@ -253,7 +265,34 @@ await verifyProof(verificationKey, fullProof)`,
/>
</Box>

<Tabs position="relative" variant="unstyled" align={"center"} mt={"170px"}>
<Box
display={{ base: "block", lg: "none" }}
zIndex="-1"
left={"50%"}
transform="translateX(-50%)"
w="100vw"
h="100%"
pos="absolute"
>
<Image
alt="Guy shadow image"
src="https://semaphore.cedoor.dev/guy-shadow.png"
quality="100"
sizes="100vw"
fill
style={{
objectFit: "cover"
}}
/>
</Box>

<Tabs
position="relative"
variant="unstyled"
align={"center"}
mt={{ base: "100px", md: "170px" }}
mb={{ base: "50px", md: "112px" }}
>
<TabList gap={"40px"}>
<Tab px={0} fontSize={"24px"}>
About Semaphore
Expand All @@ -270,7 +309,7 @@ await verifyProof(verificationKey, fullProof)`,
</Tabs>
</VStack>

<VStack p={"128px 80px"}>
<VStack p={{ base: "128px 20px", md: "128px 80px" }}>
{sectionBlockTexts.map((sectionBlockText, i) => (
<VStack key={i}>
<SectionBlock
Expand All @@ -297,7 +336,7 @@ await verifyProof(verificationKey, fullProof)`,
pos="absolute"
></Box>

<VStack p="100px 40px" w="full" spacing="20">
<VStack display={{ base: "none", xl: "block" }} p="100px 40px" w="full" spacing="20">
<Carousel
title="Videos"
sizes={{
Expand All @@ -318,6 +357,42 @@ await verifyProof(verificationKey, fullProof)`,
type="articles"
/>
</VStack>
<Text
display={{ base: "flex", xl: "none" }}
flex="1"
alignSelf={"start"}
fontSize={{ base: "40px", md: "44px" }}
fontWeight={"500"}
mt={"100px"}
>
Videos
</Text>
<Flex display={{ base: "flex", xl: "none" }} w={"100%"} overflowX={"auto"}>
{videos.map((video, i) => (
<VStack key={i}>
<Box px="3">
<VideoCard key={i} title={video.title} embeddedVideoUrl={video.embeddedUrl} />
</Box>
</VStack>
))}
</Flex>
<Text
display={{ base: "flex", xl: "none" }}
flex="1"
alignSelf={"start"}
fontSize="44px"
fontWeight={"500"}
mt={"96px"}
>
Articles
</Text>
<Flex display={{ base: "flex", xl: "none" }} w={"100%"} overflowX={"auto"} mb={"66px"}>
{articles.map((article, i) => (
<VStack key={i}>
<ArticleCard key={i} title={article.title} minRead={article.minRead} url={article.url} />
</VStack>
))}
</Flex>
</VStack>
</VStack>
)
Expand Down
15 changes: 10 additions & 5 deletions apps/website/src/components/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,28 @@ export default function CodekBlock({ text }: CodekBlockProps) {
showLineNumbers: false,
wrapLines: true,
theme: ocean,
customStyle: { background: "transparent", overflow: "auto", paddingRight: "70px" }
customStyle: {
background: "transparent",
overflow: "auto",
padding: "24px",
paddingRight: "120px",
paddingTop: "60px"
}
}
return (
<Flex
overflow={"auto"}
gap={"200px"}
justify={"space-around"}
w={"602px"}
h={"auto"}
w={{ base: "300px", md: "602px" }}
position={"relative"}
p={"24px"}
borderRadius={"8px"}
backgroundColor={"darkBlue"}
>
<CodeBlock {...copyBlockProps} />
<Button
textColor={"alabaster.300"}
fontSize={"18px"}
fontSize={{ base: "16px", md: "18px" }}
fontWeight={"400"}
borderColor={"alabaster.800"}
backgroundColor={"darkBlue"}
Expand All @@ -41,6 +45,7 @@ export default function CodekBlock({ text }: CodekBlockProps) {
onClick={onCopy}
position={"absolute"}
right={"24px"}
top={"24px"}
>
{hasCopied ? "copied!" : "copy"}
</Button>
Expand Down
12 changes: 8 additions & 4 deletions apps/website/src/components/InfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,19 @@ export default function InfoCard({ texts }: InfoCardProps) {
border="1px"
borderColor="white"
padding="30px"
width={"410px"}
height={"474px"}
width={{ base: "350px", md: "410px" }}
height={{ base: "auto", md: "474px" }}
>
<CardBody padding="0">
<VStack align="left" spacing="10" maxH="500" overflowY="auto">
{texts.map((text, i) => (
<VStack key={i} align="left">
<Heading fontSize="24px">{text.title}</Heading>
<Text fontSize="16px">{text.body}</Text>
<Heading textAlign={"left"} fontSize={{ base: "20px", md: "24px" }}>
{text.title}
</Heading>
<Text textAlign={"left"} fontSize={{ base: "14px", md: "16px" }}>
{text.body}
</Text>
</VStack>
))}
</VStack>
Expand Down
22 changes: 15 additions & 7 deletions apps/website/src/components/SectionBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,12 @@ export type SectionBlockProps = {
export default function SectionBlock({ title, description, linkText, linkUrl, codeText, itemList }: SectionBlockProps) {
return (
<VStack>
<Flex justify={"space-around"} gap={"52px"}>
<VStack alignItems={"start"} gap={"32px"}>
<Text fontSize={"44px"}>{title}</Text>
<Text w={"602px"} fontSize={"18px"} textColor={"alabaster.400"}>
<Flex justify={{ base: "start", xl: "space-around" }} wrap={{ base: "wrap", xl: "nowrap" }} gap={"52px"}>
<VStack w={{ base: "auto", lg: "602px" }} alignItems={{ base: "start", xl: "center" }} gap={"32px"}>
<Text fontSize={{ base: "40px", md: "44px" }} fontWeight={{ base: "400", md: "500" }}>
{title}
</Text>
<Text fontSize={{ base: "16px", md: "18px" }} textColor={"alabaster.400"}>
{description}
</Text>
<Link
Expand All @@ -41,16 +43,23 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
borderBottomColor={"white"}
_hover={{ borderBottomColor: "transparent" }}
fontSize="18px"
fontWeight="normal"
fontWeight="400"
>
{linkText}
</Text>
<IconArrowRight width="14px" />
</Link>
</VStack>

<CodekBlock text={codeText} />
</Flex>
<Flex mt={"80px"} gap={"40px"} justify={"start"} alignItems={"center"}>
<Flex
mt={"80px"}
gap={"40px"}
justify={"start"}
alignItems={"center"}
wrap={{ base: "wrap", xl: "nowrap" }}
>
{itemList.map((item, i) => (
<VStack key={i} alignItems={"start"}>
<VStack>{item.icon}</VStack>
Expand All @@ -61,7 +70,6 @@ export default function SectionBlock({ title, description, linkText, linkUrl, co
</VStack>
))}
</Flex>
<VStack></VStack>
</VStack>
)
}
2 changes: 1 addition & 1 deletion apps/website/src/components/VideoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function VideoCard({ embeddedVideoUrl, title }: VideoCardProps) {
</AspectRatio>
</HStack>
<CardBody padding={"0px 20px 20px 20px"}>
<Heading fontSize={"20px"} lineHeight={"28px"} fontWeight={"normal"}>
<Heading fontSize={{ base: "18px", md: "20px" }} lineHeight={"28px"} fontWeight={"normal"}>
{title}
</Heading>
</CardBody>
Expand Down