Skip to content

Commit

Permalink
Merge pull request #435 from semaphore-protocol/ref/responsive-learn-…
Browse files Browse the repository at this point in the history 
…page

Add responsive design to learn page
  • Loading branch information
@cedoor
cedoor authored Nov 9, 2023
2 parents 173d051 + 799b765 commit 4df0e40
Show file tree
Hide file tree
Showing 5 changed files with 125 additions and 33 deletions.
107 changes: 91 additions & 16 deletions apps/website/src/app/learn/page.tsx
View file
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 @@ -316,6 +355,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
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
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
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
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

0 comments on commit 4df0e40

Please sign in to comment.