Merge pull request #431 from semaphore-protocol/perf/background-images

NextJS background images
semaphore-protocol · Nov 8, 2023 · c04fcda · c04fcda
2 parents 8841b8a + fbb1443
commit c04fcda
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 51 deletions.
diff --git a/apps/website/src/app/learn/page.tsx b/apps/website/src/app/learn/page.tsx
@@ -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"
@@ -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()`,
@@ -113,7 +114,7 @@ const commitment = identity.generateCommitment()`,
             codeText: `import { Group } from "@semaphore-protocol/group"
 
 const group = new Group()
-            
+
 group.addMember(commitment)`,
             itemList: [
                 {
@@ -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: [
                 {
@@ -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"}>

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -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"
@@ -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">
@@ -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">

diff --git a/apps/website/src/app/projects/page.tsx b/apps/website/src/app/projects/page.tsx
@@ -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>