diff --git a/app/layout.tsx b/app/layout.tsx index 82c757b..ac4865c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,7 +3,6 @@ import { Metadata } from "next" import { siteConfig } from "@/config/site" import { fontDisplay, fontSans } from "@/lib/fonts" -import { cn } from "@/lib/utils" import { SiteFooter } from "@/components/site-footer" import { SiteHeader } from "@/components/site-header" import { TailwindIndicator } from "@/components/tailwind-indicator" @@ -34,15 +33,13 @@ interface RootLayoutProps { export default function RootLayout({ children }: RootLayoutProps) { return ( <> - + - +
{children}
diff --git a/app/page.tsx b/app/page.tsx index f2ec041..22f936c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,27 +2,27 @@ 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 (
-

+

Privacy + Scaling Explorations -
+

Programmable cryptography for people like you

-

+

Explore The Project Library

-

+

Learn and Share

@@ -61,7 +61,7 @@ export default function IndexPage() { rel="noreferrer" className="flex items-center justify-start gap-5 md:justify-center" > -

+

Watch

-

+

Learn and Share

@@ -92,7 +92,7 @@ export default function IndexPage() { rel="noreferrer" className="flex items-center justify-start gap-5 md:justify-center" > -

+

Atttend

-

+

Event

@@ -122,7 +122,7 @@ border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20" rel="noreferrer" className="flex items-center justify-start gap-5 md:justify-center" > -

+

Attend

-

+

Blog Post

@@ -156,7 +156,7 @@ border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20" rel="noreferrer" className="flex items-center justify-start gap-5 md:justify-center" > -

+

read

-
+
-

+

Who We Are

@@ -184,72 +184,11 @@ 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. -

-
-
-
- -
-
-
- -
-
+
-

+

How To Plug In

@@ -267,7 +206,7 @@ border-x border-b border-black px-[32px] py-5 md:flex-row md:gap-0 lg:px-20" rel="noreferrer" className="flex items-center gap-2" > -

+

Say Hi On Discord

{item.title} 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/package.json b/package.json index 0ed2c6f..4ff86b1 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.4.0", "clsx": "^1.2.1", + "framer-motion": "^10.12.17", + "gsap": "^3.12.1", "lucide-react": "0.105.0-alpha.4", "next": "^13.4.4", "next-themes": "^0.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a3028eb..f6b9570 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,6 +10,12 @@ dependencies: clsx: specifier: ^1.2.1 version: 1.2.1 + framer-motion: + specifier: ^10.12.17 + version: 10.12.17(react-dom@18.2.0)(react@18.2.0) + gsap: + specifier: ^3.12.1 + version: 3.12.1 lucide-react: specifier: 0.105.0-alpha.4 version: 0.105.0-alpha.4(react@18.2.0) @@ -275,6 +281,19 @@ packages: '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 + /@emotion/is-prop-valid@0.8.8: + resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} + requiresBuild: true + dependencies: + '@emotion/memoize': 0.7.4 + dev: false + optional: true + + /@emotion/memoize@0.7.4: + resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} + dev: false + optional: true + /@eslint-community/eslint-utils@4.4.0(eslint@8.41.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1531,6 +1550,24 @@ packages: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} dev: true + /framer-motion@10.12.17(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-IR+aAYntsyu6ofyxqQV4QYotmOqzcuKxhqNpfc3DXJjNWOPpOeSyH0A+In3IEBu49Yx/+PNht+YMeZSdCNaYbw==} + peerDependencies: + react: ^18.0.0 + react-dom: ^18.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + tslib: 2.5.2 + optionalDependencies: + '@emotion/is-prop-valid': 0.8.8 + dev: false + /fs-constants@1.0.0: resolution: {integrity: sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==} dev: false @@ -1671,6 +1708,10 @@ packages: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} dev: true + /gsap@3.12.1: + resolution: {integrity: sha512-FXtb2YbBE9l8I9Pl5DFLpCMedaiMPztRlr0Ln0CMSnJn+pbTaeKlzgth8cLNPc7PzNwIZe+SEQiBBAWaBKJdVA==} + dev: false + /has-bigints@1.0.2: resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==} dev: true diff --git a/styles/globals.css b/styles/globals.css index 1c28d40..d31ee06 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -74,15 +74,22 @@ * { @apply border-border; } + html{ + @apply font-sans; + } body { - @apply bg-background text-foreground; + @apply bg-background text-foreground font-sans; font-feature-settings: "rlig" 1, "calt" 1; } h1, h2, h3, h4, - h5 { - @apply font-display; + h5, h6 { + @apply font-display font-bold; + } + + #privacy, #scaling, #explorations{ + @apply fill-gray-900; } } diff --git a/tailwind.config.js b/tailwind.config.js index 4c8a230..7ddcbd9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -19,6 +19,7 @@ module.exports = { }, colors: { corduroy: "#4A5754", + orange: "#E1523A", anakiwa: "#F2FAFD", border: "hsl(var(--border))", input: "hsl(var(--input))",