diff --git a/src/app/_components/FounderClub/Founders.tsx b/src/app/_components/FounderClub/Founders.tsx index 86546ff0b..8ca71eb2f 100644 --- a/src/app/_components/FounderClub/Founders.tsx +++ b/src/app/_components/FounderClub/Founders.tsx @@ -2,14 +2,18 @@ import { motion } from "motion/react" import Image from "next/image" -import { useEffect, useState } from "react" +import { useEffect, useMemo, useState } from "react" import { Box, IconButton, Stack, Typography } from "@mui/material" +import JYImage from "@/assets/images/home/JY.webp" +import JasonImage from "@/assets/images/home/Jason.webp" import MikeImage from "@/assets/images/home/Mike Silagadze.webp" +import PeterMainaImage from "@/assets/images/home/Peter.webp" import RobertoImage from "@/assets/images/home/Roberto Machado.webp" +import TomasDIMaurovImage from "@/assets/images/home/Tomas.webp" import TonyImage from "@/assets/images/home/Tony Olendo.webp" -import YiImage from "@/assets/images/home/Yi Sun.webp" +import YudhishthraImage from "@/assets/images/home/Yudhishthra.webp" import LeftButton from "@/assets/svgs/landingpage/left-button.svg" import Quota from "@/assets/svgs/landingpage/quota.svg" import RightButton from "@/assets/svgs/landingpage/right-button.svg" @@ -18,8 +22,19 @@ import useCheckViewport from "@/hooks/useCheckViewport" const MotionBox = motion(Box) const FOUNDER_LIST = [ + { + name: "Tony Olendo", + title: "Co-Founder", + prototol: "ViFi", + content: + "We are building on Scroll because it offers our users the strongest cryptographic guarantees. Scroll has built the most performant ZK L2 in the industry and offering this security to our users is a no brainer.", + href: "https://www.virtualfinance.xyz/", + image: TonyImage, + bgColor: "#E5E2F7", + }, { name: "Roberto Machado", + title: "Co-Founder", prototol: "Quill Finance", content: "We were able to launch Quill with first-mover advantage because of how easy Scroll makes things for builders. This is an ecosystem meant for those who want to create value, not extract it.", @@ -28,29 +43,62 @@ const FOUNDER_LIST = [ bgColor: "#DCF2EF", }, { - name: "Mike Silagadze", - prototol: "EtherFi", - content: "Fast, cheap, ZK, good long term oriented team, good ecosystem - bet on teams that ship.", - href: "https://www.ether.fi/", - image: MikeImage, + name: "Tomas DI Maurov", + title: "Founder", + prototol: "ChatterPay", + content: + "Scroll helped us take ChatterPay from a hackathon project to mainnet, with low-cost transfers and key support from all the team that boosted our launch, distribution, and content.", + + href: "https://chatterpay.net/", + image: TomasDIMaurovImage, + bgColor: "#FFF8F3", + }, + { + name: "Yudhishthra", + title: "Founder", + prototol: "SynthOS", + content: + "Scroll is building the stablecoin stack for yield, utility, and access. SynthOS plugs into it by routing idle stablecoins to earn in the background, then settling instantly when needed.", + + href: "https://www.synthos.fun/", + image: YudhishthraImage, bgColor: "#FAFDD4", }, { - name: "Tony Olendo", - prototol: "ViFi", + name: "Peter Maina", + title: "Founder", + prototol: "Project Mocha", content: - "We are building on Scroll because it offers our users the strongest cryptographic guarantees. Scroll has built the most performant ZK L2 in the industry and offering this security to our users is a no brainer.", - href: "https://www.virtualfinance.xyz/", - image: TonyImage, + "Project Mocha is building on Scroll’s zkEVM Layer 2 because it gives us the scalability and low fees we need to empower coffee farmers . With Scroll’s fast, secure, and cost-effective infrastructure, we can focus on real impact—helping communities grow while providing global users a frictionless Web3 experience.", + href: "https://projectmocha.com/", + image: PeterMainaImage, bgColor: "#E5E2F7", }, { - name: "Yi Sun", - prototol: "Axiom", - content: - "As we’ve been building Axiom, we’ve benefited tremendously from Scroll’s community-driven ethos in both open source code collaboration and ZK education.", - href: "https://www.axiom.xyz/", - image: YiImage, + name: "JY", + title: "Founder", + prototol: "Polystream", + content: "Building on Scroll is a no-brainer: cheap, secure, and most importantly, dev-friendly. Love the people too!", + href: "https://www.polystream.xyz/", + image: JYImage, + bgColor: "#DCF2EF", + }, + { + name: "Sir Honeyworth B. Goldwing", + title: "Chief Nectar Officer", + prototol: "Honeypop", + content: "Scroll is like if zk-rollups and mainnet had a baby during a gas war and left it on your doorstep wrapped in alpha.", + href: "https://honeypop.app/", + image: JasonImage, + bgColor: "#FAFDD4", + }, + { + name: "Mike Silagadze", + title: "Co-founder", + prototol: "EtherFi", + content: "Fast, cheap, ZK, good long term oriented team, good ecosystem - bet on teams that ship.", + href: "https://www.ether.fi/", + image: MikeImage, bgColor: "#FFF8F3", }, ] @@ -62,7 +110,11 @@ const Founders = () => { const currentFounder = FOUNDER_LIST[current] - const OFFSET = isDesktop ? 24 : 16 + const cardOffset = useMemo(() => (isDesktop ? 24 : 16), [isDesktop]) + + const cardSize = useMemo(() => (isDesktop ? 420 : 286), [isDesktop]) + + const cardGroupHeight = cardSize + cardOffset * FOUNDER_LIST.length useEffect(() => { const interval = setTimeout(() => { @@ -73,10 +125,10 @@ const Founders = () => { const calc = index => { const predictedPosition = index - current + FOUNDER_LIST.length - if (predictedPosition > 3) { - return (predictedPosition % FOUNDER_LIST.length) * OFFSET * -1 + if (predictedPosition > FOUNDER_LIST.length - 1) { + return (predictedPosition % FOUNDER_LIST.length) * cardOffset * -1 } - return predictedPosition * OFFSET * -1 + return predictedPosition * cardOffset * -1 } const handlePrev = () => { @@ -96,12 +148,12 @@ const Founders = () => { gap: ["4rem", "6rem"], }} > - + {FOUNDER_LIST.map(({ name, image, bgColor }, index) => { return ( { width: ["28.6rem", "42rem"], aspectRatio: "1/1", backgroundColor: bgColor, - zIndex: OFFSET * FOUNDER_LIST.length + calc(index), + zIndex: cardOffset * FOUNDER_LIST.length + calc(index), }} > {name} @@ -126,7 +178,7 @@ const Founders = () => { {currentFounder.content} - {currentFounder.name}, Co-founder of{" "} + {currentFounder.name}, {currentFounder.title} of{" "} {currentFounder.prototol} diff --git a/src/app/_components/FounderClub/Protocols.tsx b/src/app/_components/FounderClub/Protocols.tsx index 8e8650f2a..d47512db4 100644 --- a/src/app/_components/FounderClub/Protocols.tsx +++ b/src/app/_components/FounderClub/Protocols.tsx @@ -3,40 +3,38 @@ import Marquee from "react-fast-marquee" import { Box } from "@mui/material" +import Polystream from "@/assets/images/home/Polystream.webp" +import ProjectMocha from "@/assets/images/home/ProjectMocha.webp" +import SynthOS from "@/assets/images/home/SynthOS.webp" import Aave from "@/assets/svgs/landingpage/Aave.svg?url" -import Ambient from "@/assets/svgs/landingpage/Ambient.svg?url" -import Axiom from "@/assets/svgs/landingpage/Axiom.svg?url" +import Authgrow from "@/assets/svgs/landingpage/Authgrow.svg?url" +import ChatterPay from "@/assets/svgs/landingpage/ChatterPay.svg?url" import Circle from "@/assets/svgs/landingpage/Circle.svg?url" -import Compound from "@/assets/svgs/landingpage/Compound.svg?url" -import Ethena from "@/assets/svgs/landingpage/Ethena.svg?url" import EtherFi from "@/assets/svgs/landingpage/EtherFi.svg?url" -import Kelp from "@/assets/svgs/landingpage/Kelp.svg?url" +import Honeypop from "@/assets/svgs/landingpage/Honeypop.svg?url" import Lido from "@/assets/svgs/landingpage/Lido.svg?url" import Mellow from "@/assets/svgs/landingpage/Mellow.svg?url" -import Orbiter from "@/assets/svgs/landingpage/Orbiter.svg?url" -import Puffer from "@/assets/svgs/landingpage/Puffer.svg?url" import QuillFinance from "@/assets/svgs/landingpage/QuillFinance.svg?url" import Symbiotic from "@/assets/svgs/landingpage/Symbiotic.svg?url" import Tempest from "@/assets/svgs/landingpage/Tempest.svg?url" import VIFI from "@/assets/svgs/landingpage/VIFI.svg?url" const PROTOCOL_LIST = [ - { label: "EtherFi", image: EtherFi }, - { label: "Ambient", image: Ambient }, - { label: "Lido", image: Lido }, - { label: "Axiom", image: Axiom }, - { label: "Aave", image: Aave, height: ["15px", "20px"] }, { label: "VIFI", image: VIFI, height: ["18px", "24px"] }, { label: "Quill Finance", image: QuillFinance, height: ["18px", "24px"] }, - { label: "Compound", image: Compound }, - { label: "Orbiter Finance", image: Orbiter }, + { label: "ChatterPay", image: ChatterPay, height: ["20px", "26px"] }, + { label: "SynthOS", image: SynthOS }, + { label: "Project Mocha", image: ProjectMocha }, + { label: "Polystream", image: Polystream }, + { label: "Honeypop", image: Honeypop }, + { label: "Anthgrow", image: Authgrow }, + { label: "EtherFi", image: EtherFi }, + { label: "Circle", image: Circle }, + { label: "Aave", image: Aave, height: ["15px", "20px"] }, + { label: "Lido", image: Lido }, { label: "Mellow", image: Mellow }, { label: "Symbiotic", image: Symbiotic, height: ["15px", "20px"] }, - { label: "Kelp", image: Kelp }, - { label: "Puffer", image: Puffer }, - { label: "Ethena", image: Ethena }, { label: "Tempest", image: Tempest, height: ["15px", "20px"] }, - { label: "Circle", image: Circle }, ] const Protocols = () => { diff --git a/src/assets/images/home/JY.webp b/src/assets/images/home/JY.webp new file mode 100644 index 000000000..de8698b09 Binary files /dev/null and b/src/assets/images/home/JY.webp differ diff --git a/src/assets/images/home/Jason.webp b/src/assets/images/home/Jason.webp new file mode 100644 index 000000000..3be181f3d Binary files /dev/null and b/src/assets/images/home/Jason.webp differ diff --git a/src/assets/images/home/Peter.webp b/src/assets/images/home/Peter.webp new file mode 100644 index 000000000..8141fbb75 Binary files /dev/null and b/src/assets/images/home/Peter.webp differ diff --git a/src/assets/images/home/Polystream.webp b/src/assets/images/home/Polystream.webp new file mode 100644 index 000000000..ddb6f5da6 Binary files /dev/null and b/src/assets/images/home/Polystream.webp differ diff --git a/src/assets/images/home/ProjectMocha.webp b/src/assets/images/home/ProjectMocha.webp new file mode 100644 index 000000000..a91498226 Binary files /dev/null and b/src/assets/images/home/ProjectMocha.webp differ diff --git a/src/assets/images/home/SynthOS.webp b/src/assets/images/home/SynthOS.webp new file mode 100644 index 000000000..8221b314a Binary files /dev/null and b/src/assets/images/home/SynthOS.webp differ diff --git a/src/assets/images/home/Tomas.webp b/src/assets/images/home/Tomas.webp new file mode 100644 index 000000000..5803c4edd Binary files /dev/null and b/src/assets/images/home/Tomas.webp differ diff --git a/src/assets/images/home/Yudhishthra.webp b/src/assets/images/home/Yudhishthra.webp new file mode 100644 index 000000000..cc85feaaa Binary files /dev/null and b/src/assets/images/home/Yudhishthra.webp differ diff --git a/src/assets/svgs/landingpage/Authgrow.svg b/src/assets/svgs/landingpage/Authgrow.svg new file mode 100644 index 000000000..68ab03485 --- /dev/null +++ b/src/assets/svgs/landingpage/Authgrow.svg @@ -0,0 +1,243 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/landingpage/ChatterPay.svg b/src/assets/svgs/landingpage/ChatterPay.svg new file mode 100644 index 000000000..5430f76c4 --- /dev/null +++ b/src/assets/svgs/landingpage/ChatterPay.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/svgs/landingpage/Honeypop.svg b/src/assets/svgs/landingpage/Honeypop.svg new file mode 100644 index 000000000..209fcc3f6 --- /dev/null +++ b/src/assets/svgs/landingpage/Honeypop.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +