github/pse.dev
1
1
Fork 0
mirror of https://github.com/privacy-scaling-explorations/pse.dev.git synced 2026-01-10 14:48:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: 💫 Add WhatWeDo logo animation

Browse Source
This commit is contained in:
thebeyondr
2023-06-27 21:49:00 -05:00
parent 101306bcce
commit 9eb674a597
3 changed files with 229 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/page.tsx
View File

@@ -2,13 +2,13 @@ import NextImage from "next/image"
import NextLink from "next/link"
import ArrowUpVector from "@/public/arrow-right-up-line.svg"
import ArrowRightVector from "@/public/arrowright-vector.png"
import PSELogoCircle from "@/public/pse-logo-circle.png"
import PSEIcon1 from "@/public/pseicon-1.svg"
import PSEIcon2 from "@/public/pseicon-2.svg"
import PSEIcon3 from "@/public/pseicon-3.svg"
import PSELogo from "@/public/pselogo-homepage.png"
import { siteConfig } from "@/config/site"
import WhatWeDo from "@/components/sections/WhatWeDo"
export default function IndexPage() {
return (
@@ -169,7 +169,7 @@ border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20"
</div>
</div>
<div className="flex flex-col gap-40 bg-radial-gradient px-[32px] py-40 lg:px-20">
<div className="flex flex-col gap-32 bg-radial-gradient px-[32px] py-24 lg:px-20">
<div className="flex flex-col gap-10 text-center lg:flex-row">
<div className="flex w-full items-start justify-start lg:w-[500px] lg:justify-center">
<h1 className="text-xl font-[700] uppercase text-orange">
@@ -184,68 +184,7 @@ border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20"
</div>
</div>
<div className="flex flex-col gap-10 text-center lg:flex-row">
<div className="flex w-full items-start justify-start lg:w-[500px] lg:justify-center">
<h1 className="text-xl font-[700] uppercase text-orange">
What We Do
</h1>
</div>
<div className="flex w-full items-start justify-center md:hidden lg:hidden">
<NextImage
src={PSELogoCircle}
alt="pselogocircle"
style={{ objectFit: "contain" }}
width={252}
height={252}
/>
</div>
<div className="flex w-full flex-row gap-10 lg:w-[420px]">
<div className="flex flex-col gap-[200px] text-start">
<div className="flex flex-col">
<h1 className="text-xl font-[700] text-black">Privacy</h1>
<p className="text-lg">
We believe privacy is a social good that should be accessible
to everyone. That’s why we’re creating open source tools that
help people choose what, how, when, and where they share.
</p>
</div>
<div className="flex flex-col">
<h1 className="text-xl font-[700] text-black">Scaling</h1>
<p className="text-lg">
Our infrastructure helps communities grow by making Ethereum
more efficient and accessible. From account abstraction and
reducing transaction costs, to rollups and zkEVM, we are
building towards an interoperable future.
</p>
</div>
<div className="flex flex-col">
<h1 className="text-xl font-[700] text-black">Explorations</h1>
<p className="text-lg">
We are mapping the emerging zero knowledge ecosystem through
collective experimentation. We collaborate, share what we
learn, and welcome contributions from around the world.
</p>
</div>
</div>
<div className="hidden w-full items-start md:flex lg:hidden">
<NextImage
src={PSELogoCircle}
alt="pselogocircle"
style={{ objectFit: "contain" }}
width={252}
height={252}
/>
</div>
</div>
<div className="hidden items-start lg:flex">
<NextImage
src={PSELogoCircle}
alt="pselogocircle"
width={252}
height={252}
/>
</div>
</div>
<WhatWeDo />
<div className="flex flex-col gap-10 text-center lg:flex-row">
<div className="flex w-full items-start justify-start lg:w-[500px] lg:justify-center">

222
components/sections/WhatWeDo.tsx Normal file
View File

@@ -0,0 +1,222 @@
"use client"
import { useEffect } from "react"
import { gsap } from "gsap"
import { ScrollTrigger } from "gsap/ScrollTrigger"
import { cn } from "@/lib/utils"
const content = [
{
title: "Privacy",
description:
"We believe privacy is a social good that should be accessible to everyone. That's why we're creating open source tools that help people choose what, how, when, and where they share.",
className: "privacyDesc",
},
{
title: "Scaling",
description:
"Our infrastructure helps communities grow by making Ethereum more efficient and accessible. From account abstraction and reducing transaction costs, to rollups and zkEVM, we are building towards an interoperable future.",
className: "scalingDesc",
},
{
title: "Explorations",
description:
"We are mapping the emerging zero knowledge ecosystem through collective experimentation. We collaborate, share what we learn, and welcome contributions from around the world.",
className: "explorationsDesc",
},
]
const WhatWeDo = () => {
useEffect(() => {
gsap.registerPlugin(ScrollTrigger)
const tl = gsap.timeline({
scrollTrigger: {
trigger: ".badge-start-trigger",
start: "top 300",
end: "+=510",
scrub: 1,
},
})
tl.from("#privacy", { fill: "#E1523A" }, "+=0.5")
.to("#privacy", { fill: "#111827", ease: "ease-out" })
.to(".badge-right", { y: 220, ease: "ease-out" })
.to("#scaling", { fill: "#E1523A", ease: "ease-in" }, "+=0.5")
.to(".badge-right", { y: 510, ease: "ease-out" })
.to("#scaling", { fill: "#111827", ease: "ease-out" })
.to("#explorations", { fill: "#E1523A", ease: "ease-in" })
}, [])
return (
<section className="badge-start-trigger relative grid w-full grid-cols-3 overflow-hidden">
<h2 className="pt-6 text-center text-xl uppercase text-orange">
What we do
</h2>
<div className="flex flex-col gap-6 pt-6">
{content.map((item, index) => (
<article className={cn("pb-24", item.className)} key={index}>
<h3 className="text-3xl">{item.title}</h3>
<div className="p-2"></div>
<p className="text-lg">{item.description}</p>
</article>
))}
</div>
<div className="mx-auto">
<svg
width="213"
height="213"
viewBox="0 0 213 213"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="badge-right"
>
<g id="pse-logo-badge">
<path
id="Vector"
d="M106.404 212.807C77.9803 212.807 51.263 201.739 31.1635 181.644C11.0684 161.544 0 134.822 0 106.404C0 77.9848 11.0684 51.263 31.1635 31.1635C51.2585 11.0639 77.9803 0 106.404 0C134.827 0 161.544 11.0684 181.644 31.1635C201.739 51.2585 212.807 77.9803 212.807 106.404C212.807 134.827 201.739 161.544 181.644 181.644C161.549 201.739 134.827 212.807 106.404 212.807ZM106.404 5.37301C79.4176 5.37301 54.048 15.8817 34.9649 34.9649C15.8817 54.048 5.37301 79.4176 5.37301 106.404C5.37301 133.39 15.8817 158.759 34.9649 177.842C54.048 196.925 79.4176 207.434 106.404 207.434C133.39 207.434 158.759 196.925 177.842 177.842C196.925 158.759 207.434 133.39 207.434 106.404C207.434 79.4176 196.925 54.048 177.842 34.9649C158.759 15.8817 133.39 5.37301 106.404 5.37301Z"
fill="#171C1B"
/>
<g id="privacy">
<path
id="Vector_2"
d="M30.5641 95.574L16.4062 92.6233L17.4764 87.4876C18.2196 83.928 20.5345 82.1638 23.5927 82.7996L23.9016 82.8623C26.9239 83.4937 28.3567 86.0414 27.6179 89.601L27.206 91.5845L31.2268 92.4218L30.5686 95.5785L30.5641 95.574ZM19.7957 90.0353L24.4702 91.0114L24.9135 88.8756C25.2225 87.3936 24.4837 86.3145 23.0777 86.0235C21.636 85.7235 20.5479 86.4175 20.239 87.8995L19.7957 90.0353Z"
/>
<path
id="Vector_3"
d="M33.7553 81.917L20.4258 76.3112L22.6108 71.1128C24.0033 67.7995 26.3585 66.3577 29.3092 67.598L29.6002 67.7189C31.539 68.5338 32.4434 69.98 32.4345 71.8292L38.5776 70.4501L37.1314 73.8933L31.6822 74.9903L30.7688 77.1619L35.009 78.944L33.7598 81.9126L33.7553 81.917ZM24.1914 74.3993L28.4316 76.1814L29.4659 73.7187C30.0077 72.4337 29.533 71.2292 28.2435 70.6919C26.9764 70.1591 25.7675 70.6516 25.2257 71.9367L24.1914 74.3993Z"
/>
<path
id="Vector_4"
d="M40.3113 67.9456L28.0742 60.4592L29.7578 57.71L41.9948 65.1964L40.3113 67.9456Z"
/>
<path
id="Vector_5"
d="M46.332 59.0753L32.5547 53.165L34.6949 50.6262L45.8305 55.6186L46.2603 55.1082L39.2933 45.1726L41.3709 42.71L49.717 55.0679L46.3365 59.0797L46.332 59.0753Z"
/>
<path
id="Vector_6"
d="M52.7696 51.4423L47.4727 37.2934L51.5338 34.0293L64.3484 42.1336L61.7425 44.2246L58.6082 42.1784L53.9382 45.935L55.277 49.423L52.7651 51.4423H52.7696ZM56.2486 40.6515L51.4218 37.4994L50.8532 37.9561L52.9263 43.3246L56.2486 40.6515Z"
/>
<path
id="Vector_7"
d="M62.3967 35.1645L62.1997 34.7795C60.5878 31.6094 60.9012 27.1945 65.3294 24.9424C68.8174 23.1693 72.1979 24.0513 74.0695 26.9572L71.1771 28.4259C70.1562 27.0289 68.4234 26.7378 66.6906 27.6199C64.4116 28.7796 63.9728 31.0765 65.2086 33.5123C66.4309 35.9123 68.5712 36.9152 70.9174 35.7242C72.686 34.8242 73.5546 33.2347 73.0442 31.578L75.9188 30.1184C77.0381 33.1004 75.9456 36.5436 72.283 38.4062C67.6578 40.7569 63.8608 38.0615 62.3922 35.169L62.3967 35.1645Z"
/>
<path
id="Vector_8"
d="M84.4868 33.1348L83.0271 27.8917L82.3465 28.0797L75.9258 20.6291L79.1048 19.7426L83.6674 25.2052L84.2719 25.035L85.0689 18.0814L88.0777 17.2441L86.7569 26.8529L86.0763 27.0409L87.536 32.2841L84.4868 33.1348Z"
/>
</g>
<path
id="Vector_9"
d="M102.894 28.2006L102.796 24.5469L99.3211 24.641L99.2539 22.0888L102.728 21.9947L102.63 18.3232L105.419 18.2471L105.518 21.9186L109.015 21.8246L109.082 24.3768L105.585 24.4708L105.684 28.1245L102.894 28.2006Z"
fill="#171C1B"
/>
<g id="scaling">
<path
id="Vector_10"
d="M118.192 26.1981L121.241 26.8742C121.004 27.9488 121.617 29.0727 123.596 29.5115C125.342 29.8965 126.448 29.3592 126.685 28.2846C126.887 27.3846 126.274 26.7041 124.599 26.1712L123.565 25.8399C120.815 24.9892 119.378 23.0191 119.933 20.5251C120.529 17.8386 122.933 16.6207 126.059 17.3147C129.359 18.0446 130.93 20.3057 130.321 23.0504L127.25 22.3698C127.474 21.3534 126.927 20.2833 125.468 19.9609C124.066 19.652 123.202 20.2833 122.996 21.2057C122.817 22.0116 123.189 22.7773 124.456 23.1579L125.508 23.4937C128.499 24.4384 130.326 26.3727 129.748 28.9652C129.148 31.6696 126.551 32.9457 123.001 32.1577C119.181 31.3114 117.578 28.9204 118.183 26.1981H118.192Z"
/>
<path
id="Vector_11"
d="M133.996 27.3194L134.17 26.9254C135.621 23.6792 139.248 21.1449 143.788 23.1732C147.356 24.7672 148.798 27.9507 147.719 31.2327L144.759 29.9119C145.207 28.2373 144.339 26.7104 142.561 25.9179C140.228 24.8747 138.164 25.9761 137.054 28.4701C135.957 30.9283 136.521 33.2252 138.925 34.2998C140.739 35.1103 142.516 34.7834 143.483 33.3461L146.425 34.6625C144.813 37.4072 141.446 38.7236 137.698 37.049C132.961 34.9356 132.67 30.2835 133.996 27.3239V27.3194Z"
/>
<path
id="Vector_12"
d="M145.583 40.3281L157.887 31.5566L162.087 34.6372L157.564 49.113L154.869 47.1384L156.038 43.5832L151.202 40.037L148.18 42.231L145.578 40.3236L145.583 40.3281ZM156.906 40.9057L158.706 35.4252L158.12 34.9954L153.468 38.3848L156.906 40.9057Z"
/>
<path
id="Vector_13"
d="M159.457 51.2407L169.912 41.417L172.119 43.7677L163.729 51.6571L167.579 55.754L165.515 57.6927L159.457 51.2496V51.2407Z"
/>
<path
id="Vector_14"
d="M167.461 60.3691L179.085 51.9648L180.974 54.5752L169.35 62.9795L167.461 60.3691Z"
/>
<path
id="Vector_15"
d="M171.942 66.4119L184.815 60.0762L187.148 64.8179L179.007 74.8475L179.128 75.0937L189.655 69.9133L190.989 72.6311L178.116 78.9668L175.766 74.1893L183.906 64.1597L183.785 63.9134L173.258 69.0939L171.938 66.4119H171.942Z"
/>
<path
id="Vector_16"
d="M186.102 80.4898L186.523 80.3913C190.047 79.5809 194.22 81.1614 195.29 85.818C196.158 89.5926 194.497 92.7358 191.332 93.7835L190.611 90.6448C192.084 90.0448 192.796 88.3881 192.357 86.4941C191.793 84.0449 189.626 83.0285 187.02 83.6285C184.28 84.2599 182.833 86.2031 183.447 88.8672C183.774 90.2866 184.557 91.3343 185.556 91.8089L186.724 91.5403L185.883 87.8822L188.144 87.3628L189.912 95.0596L187.651 95.579L187.387 94.4283L185.014 94.9745C182.806 94.2313 181.235 92.297 180.595 89.5164C179.444 84.4972 182.636 81.2868 186.102 80.4898Z"
/>
</g>
<path
id="Vector_17"
d="M145.925 109.369C145.925 110.749 144.949 111.899 143.646 112.163C143.463 112.204 143.27 112.222 143.073 112.222H133.558C131.982 112.222 130.706 113.498 130.706 115.074V124.589C130.706 125.574 130.209 126.442 129.448 126.953C129.144 127.159 128.799 127.306 128.427 127.382C128.244 127.418 128.051 127.441 127.854 127.441H118.339C116.763 127.441 115.487 128.717 115.487 130.293V139.808C115.487 141.384 114.211 142.66 112.635 142.66H103.12C101.544 142.66 100.268 141.384 100.268 139.808V130.293C100.268 128.717 101.544 127.441 103.12 127.441H112.635C114.211 127.441 115.487 126.165 115.487 124.589V115.074C115.487 113.498 116.763 112.222 118.339 112.222H127.854C129.43 112.222 130.706 110.946 130.706 109.369V97.0026C130.706 88.6162 123.923 81.8149 115.541 81.7835C107.164 81.8149 100.376 88.6162 100.376 97.0026V109.369C100.376 110.946 99.0995 112.222 97.5234 112.222H88.0087C86.4326 112.222 85.1566 113.498 85.1566 115.074V127.441V139.808C85.1566 141.384 83.8805 142.66 82.3044 142.66H72.7897C71.2136 142.66 69.9375 141.384 69.9375 139.808V115.074C69.9375 113.498 71.2136 112.222 72.7897 112.222H82.3044C83.8805 112.222 85.1566 110.946 85.1566 109.369V96.9488C85.1566 80.1671 98.7592 66.5645 115.541 66.5645C132.323 66.5645 145.925 80.1671 145.925 96.9488V109.369Z"
fill="#171C1B"
/>
<path
id="Vector_18"
d="M106.412 173.343C69.4994 173.343 39.4688 143.312 39.4688 106.399C39.4688 69.4867 69.4994 39.4561 106.412 39.4561C143.325 39.4561 173.355 69.4867 173.355 106.399C173.355 143.312 143.325 173.343 106.412 173.343ZM106.412 42.1426C70.9815 42.1426 42.1553 70.9688 42.1553 106.399C42.1553 141.83 70.9815 170.656 106.412 170.656C141.843 170.656 170.669 141.83 170.669 106.399C170.669 70.9688 141.843 42.1426 106.412 42.1426Z"
fill="#171C1B"
/>
<g id="explorations">
<path
id="Vector_19"
d="M27.1562 151.57L39.2724 143.882L44.032 151.382L41.7753 152.814L38.6993 147.97L36.1292 149.6L39.0351 154.18L36.7784 155.613L33.8725 151.032L31.1009 152.792L34.2486 157.753L31.992 159.186L27.1607 151.57H27.1562Z"
/>
<path
id="Vector_20"
d="M34.4732 162.732L43.2626 161.219L45.3401 153.356L47.7267 155.967L46.3028 161.049L46.6073 161.385L51.7698 160.391L54.0892 162.929L45.9446 164.331L43.8044 172.946L41.4044 170.322L42.9447 164.492L42.6268 164.143L36.7881 165.271L34.4688 162.732H34.4732Z"
/>
<path
id="Vector_21"
d="M47.6094 176.155L56.3226 164.616L60.5091 167.777C63.4105 169.967 64.015 172.815 62.1344 175.309L61.9464 175.559C60.0882 178.022 57.1689 178.232 54.2719 176.043L52.6555 174.825L50.1795 178.102L47.6094 176.159V176.155ZM57.2136 168.785L54.3346 172.595L56.0764 173.907C57.2853 174.82 58.5748 174.61 59.439 173.468C60.3255 172.291 60.1643 171.01 58.9554 170.097L57.2136 168.785Z"
/>
<path
id="Vector_22"
d="M60.8086 185.385L67.4577 172.674L70.3143 174.169L64.9772 184.374L69.9561 186.979L68.6442 189.487L60.8086 185.39V185.385Z"
/>
<path
id="Vector_23"
d="M74.5391 184.629L74.6645 184.217C75.6988 180.814 79.2897 177.94 84.121 179.413C88.9343 180.877 90.3492 185.274 89.3104 188.677L89.185 189.089C88.2448 192.174 84.6672 195.42 79.7062 193.907C74.7406 192.393 73.5988 187.714 74.5391 184.629ZM86.1224 187.952C86.9015 185.395 85.8403 183.08 83.2434 182.287C80.6509 181.499 78.4972 182.834 77.7181 185.39C76.9838 187.799 77.9868 190.24 80.5837 191.028C83.1762 191.816 85.3926 190.356 86.1224 187.947V187.952Z"
/>
<path
id="Vector_24"
d="M92.9648 196.675L94.2006 182.262L99.8199 182.745C103.402 183.054 105.497 184.85 105.224 188.042L105.197 188.356C105.018 190.451 103.921 191.759 102.157 192.314L105.359 197.736L101.638 197.418L98.9199 192.569L96.5692 192.367L96.1752 196.948L92.9648 196.67V196.675ZM97.1782 185.262L96.7842 189.842L99.4483 190.07C100.836 190.191 101.835 189.368 101.956 187.979C102.072 186.609 101.23 185.611 99.8423 185.49L97.1782 185.262Z"
/>
<path
id="Vector_25"
d="M109.172 197.746L112.293 182.961L117.469 182.384L123.939 196.098L120.616 196.47L119.072 193.063L113.112 193.725L112.373 197.388L109.172 197.742V197.746ZM117.899 190.506L115.517 185.254L114.796 185.334L113.663 190.976L117.903 190.506H117.899Z"
/>
<path
id="Vector_26"
d="M130.23 194.354L127.019 183.273L123.151 184.392L122.367 181.692L133.221 178.549L134.004 181.249L130.113 182.373L133.324 193.454L130.23 194.35V194.354Z"
/>
<path
id="Vector_27"
d="M141.645 190.428L135.855 177.3L138.806 175.997L144.596 189.125L141.645 190.428Z"
/>
<path
id="Vector_28"
d="M145.805 181.087L145.568 180.725C143.625 177.743 143.728 173.149 147.963 170.395C152.177 167.65 156.457 169.388 158.396 172.37L158.633 172.732C160.393 175.432 160.581 180.259 156.233 183.089C151.886 185.919 147.565 183.787 145.805 181.087ZM155.79 174.349C154.33 172.11 151.877 171.434 149.602 172.916C147.332 174.398 146.969 176.905 148.429 179.144C149.804 181.253 152.316 182.055 154.59 180.572C156.865 179.09 157.165 176.458 155.79 174.349Z"
/>
<path
id="Vector_29"
d="M167.051 174.701L156.73 164.734L160.402 160.932L172.594 165.195L172.787 164.998L164.347 156.849L166.451 154.673L176.772 164.635L173.073 168.468L160.881 164.205L160.689 164.402L169.129 172.552L167.056 174.701H167.051Z"
/>
<path
id="Vector_30"
d="M176.42 157.841L178.095 155.203C179.022 155.794 180.289 155.597 181.377 153.887C182.335 152.378 182.205 151.156 181.274 150.565C180.495 150.068 179.644 150.417 178.574 151.81L177.911 152.669C176.174 154.966 173.832 155.642 171.679 154.272C169.355 152.799 169.028 150.122 170.747 147.417C172.561 144.565 175.22 143.857 177.593 145.362L175.91 148.017C175.032 147.457 173.841 147.61 173.04 148.872C172.27 150.081 172.57 151.111 173.367 151.617C174.065 152.06 174.911 151.971 175.7 150.91L176.371 150.032C178.279 147.542 180.719 146.486 182.958 147.905C185.295 149.392 185.613 152.266 183.661 155.338C181.565 158.638 178.771 159.332 176.416 157.836L176.42 157.841Z"
/>
</g>
<path
id="Vector_31"
d="M185.508 119.682L184.648 123.893C184.506 124.589 184.954 125.267 185.65 125.409L189.861 126.269C190.557 126.411 191.235 125.963 191.377 125.267L192.237 121.056C192.379 120.36 191.931 119.682 191.235 119.54L187.024 118.68C186.328 118.538 185.65 118.986 185.508 119.682Z"
fill="#171C1B"
/>
<path
id="Vector_32"
d="M25.7675 118.681L21.5559 119.541C20.8606 119.683 20.412 120.362 20.554 121.057L21.4139 125.268C21.5558 125.964 22.2346 126.412 22.93 126.27L27.1415 125.411C27.8369 125.269 28.2855 124.59 28.1435 123.894L27.2836 119.683C27.1416 118.988 26.4628 118.539 25.7675 118.681Z"
fill="#171C1B"
/>
</g>
</svg>
</div>
</section>
)
}
export default WhatWeDo

4
styles/globals.css
View File

@@ -88,4 +88,8 @@
h5, h6 {
@apply font-display font-bold;
}
#privacy, #scaling, #explorations{
@apply fill-gray-900;
}
}