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

Jump to bottom

NextJS background images #431

Merged
merged 1 commit into from
Nov 8, 2023
Merged

NextJS background images #431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
36 changes: 21 additions & 15 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 @@ -9,7 +9,8 @@ import {
Tab,
TabPanel,
TabIndicator,
Divider
Divider,
Box
} from "@chakra-ui/react"
import Image from "next/image"
import InfoCard, { InfoBlock } from "../../components/InfoCard"
Expand Down Expand Up @@ -82,7 +83,7 @@ export default function Learn() {
codeText: `import { Identity } from "@semaphore-protocol/identity"

const identity = new Identity()

const trapdoor = identity.getTrapdoor()
const nullifier = identity.getNullifier()
const commitment = identity.generateCommitment()`,
Expand Down Expand Up @@ -113,7 +114,7 @@ const commitment = identity.generateCommitment()`,
codeText: `import { Group } from "@semaphore-protocol/group"

const group = new Group()

group.addMember(commitment)`,
itemList: [
{
Expand Down Expand Up @@ -143,14 +144,14 @@ group.addMember(commitment)`,

const externalNullifier = BigInt(1)
const signal = "Hello world"

const fullProof = await generateProof(identity, group, externalNullifier, signal, {
zkeyFilePath: "./semaphore.zkey",
wasmFilePath: "./semaphore.wasm"
})

const verificationKey = JSON.parse(fs.readFileSync("./semaphore.json", "utf-8"))

await verifyProof(verificationKey, fullProof)`,
itemList: [
{
Expand Down Expand Up @@ -239,15 +240,20 @@ await verifyProof(verificationKey, fullProof)`,

return (
<VStack>
<VStack h="1187px">
<Image
src="https://semaphore.cedoor.dev/guy-shadow-horizontal.png"
width={0}
height={0}
sizes="100vw"
style={{ width: "auto", height: "1187px", zIndex: "-1", position: "absolute" }}
alt="Shadow of a person"
/>
<VStack h="1300px" position="relative">
<Box 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.png"
quality="100"
sizes="100vw"
fill
style={{
objectFit: "cover"
}}
/>
</Box>

<Tabs position="relative" variant="unstyled" align={"center"} mt={"170px"}>
<TabList gap={"40px"}>
<Tab px={0} fontSize={"24px"}>
Expand Down
49 changes: 26 additions & 23 deletions apps/website/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Box, Button, Card, CardBody, Heading, HStack, Link, Stack, Text, VStack } from "@chakra-ui/react"
import { Sora } from "next/font/google"
import Image from "next/image"
import ProjectsCarousel from "../components/ProjectsCarousel"
import events from "../data/events.json"
import IconDiscord from "../icons/IconDiscord"
Expand All @@ -11,18 +12,19 @@ const sora = Sora({
export default function Home() {
return (
<VStack>
<VStack h={{ base: "718", sm: "734", md: "724" }} justify="center" spacing="40">
<Box
zIndex="-1"
left="0"
w="100%"
h={{ base: "718", sm: "734", md: "724" }}
pos="absolute"
bgImg="url('https://semaphore.cedoor.dev/section-1.png')"
bgSize="cover"
bgPos="center"
bgRepeat="no-repeat"
/>
<VStack h={{ base: "718", sm: "734", md: "724" }} justify="center" spacing="40" position="relative">
<Box zIndex="-1" left="50%" transform="translateX(-50%)" w="100vw" h="100%" pos="absolute">
<Image
alt="Midnight whispers image"
src="https://semaphore.cedoor.dev/midnight-whispers.png"
quality="100"
sizes="100vw"
fill
style={{
objectFit: "cover"
}}
/>
</Box>

<VStack spacing="4">
<Heading fontSize={{ base: "40px", sm: "46px", md: "72px" }} textAlign="center">
Expand Down Expand Up @@ -162,17 +164,18 @@ export default function Home() {
</Card>

<VStack justify="center" spacing="40" py="32" position="relative">
<Box
zIndex="-1"
left="50%"
transform="translateX(-50%)"
w="100vw"
h="100%"
pos="absolute"
bgImg="url('https://semaphore.cedoor.dev/section-2.png')"
bgSize="cover"
bgRepeat="no-repeat"
/>
<Box zIndex="-1" left="50%" transform="translateX(-50%)" w="100vw" h="100%" pos="absolute">
<Image
alt="Fluttering shadow image"
src="https://semaphore.cedoor.dev/shadow-flutter.png"
quality="100"
sizes="100vw"
fill
style={{
objectFit: "cover"
}}
/>
</Box>

<Stack direction={{ base: "column", md: "row" }} px={{ base: "0", md: "12" }} spacing="32">
<VStack maxW="450" align="left" spacing="8">
Expand Down
35 changes: 22 additions & 13 deletions apps/website/src/app/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,31 @@
import { Box, Heading, Text, VStack } from "@chakra-ui/react"
import Image from "next/image"
import ActionCard from "../../components/ActionCard"
import ProjectsList from "@/components/ProjectsList"
import ProjectsList from "../../components/ProjectsList"

export default function Projects() {
return (
<VStack>
<VStack h={{ base: "442", sm: "420", md: "393" }} w="100%" justify="end" align="left" spacing="40">
<Box
zIndex="-1"
left="0"
w="100%"
h={{ base: "442", sm: "420", md: "393" }}
pos="absolute"
bgImg="url('https://semaphore.cedoor.dev/section-3.png')"
bgSize="100%"
bgPos="center"
bgRepeat="no-repeat"
/>
<VStack
h={{ base: "442", sm: "420", md: "393" }}
w="100%"
justify="end"
align="left"
spacing="40"
position="relative"
>
<Box zIndex="-1" left="50%" transform="translateX(-50%)" w="100vw" h="100%" pos="absolute">
<Image
alt="Blue texture image"
src="https://semaphore.cedoor.dev/blue-texture.png"
quality="100"
sizes="100vw"
fill
style={{
objectFit: "cover"
}}
/>
</Box>

<VStack align="left" spacing="4" pb="16">
<Heading fontSize={{ base: "40px", sm: "46px", md: "72px" }}>Built with Semaphore</Heading>
Expand Down
Loading