From 9eb674a5977aec5f4ea0651fd339737b8d918601 Mon Sep 17 00:00:00 2001 From: thebeyondr <19380973+thebeyondr@users.noreply.github.com> Date: Tue, 27 Jun 2023 21:49:00 -0500 Subject: [PATCH] feat: :dizzy: Add `WhatWeDo` logo animation --- app/page.tsx | 67 +--------- components/sections/WhatWeDo.tsx | 222 +++++++++++++++++++++++++++++++ styles/globals.css | 4 + 3 files changed, 229 insertions(+), 64 deletions(-) create mode 100644 components/sections/WhatWeDo.tsx diff --git a/app/page.tsx b/app/page.tsx index 106b6a7..22f936c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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" -
+

@@ -184,68 +184,7 @@ border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20"

-
-
-

- What We Do -

-
-
- -
-
-
-
-

Privacy

-

- 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. -

-
-
-

Scaling

-

- 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. -

-
-
-

Explorations

-

- We are mapping the emerging zero knowledge ecosystem through - collective experimentation. We collaborate, share what we - learn, and welcome contributions from around the world. -

-
-
-
- -
-
-
- -
-
+
diff --git a/components/sections/WhatWeDo.tsx b/components/sections/WhatWeDo.tsx new file mode 100644 index 0000000..da0cbca --- /dev/null +++ b/components/sections/WhatWeDo.tsx @@ -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 ( +
+

+ What we do +

+
+ {content.map((item, index) => ( +
+

{item.title}

+
+

{item.description}

+
+ ))} +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ) +} + +export default WhatWeDo diff --git a/styles/globals.css b/styles/globals.css index 2564ef5..d31ee06 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -88,4 +88,8 @@ h5, h6 { @apply font-display font-bold; } + + #privacy, #scaling, #explorations{ + @apply fill-gray-900; + } }