Merge pull request #1552

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"],
       }}
     >
-      <MotionBox sx={{ position: "relative", width: ["334px", "492px"], height: ["334px", "492px"], aspectRatio: "1/1" }}>
+      <MotionBox sx={{ position: "relative", width: cardGroupHeight, height: cardGroupHeight, aspectRatio: "1/1" }}>
         {FOUNDER_LIST.map(({ name, image, bgColor }, index) => {
           return (
             <MotionBox
               key={index}
-              initial={{ y: -index * OFFSET, x: -index * OFFSET }}
+              initial={{ y: -index * cardOffset, x: -index * cardOffset }}
               animate={{ y: calc(index), x: calc(index) }}
               transition={{ type: "linear", duration: 0.6 }}
               sx={{
@@ -114,7 +166,7 @@ const Founders = () => {
                 width: ["28.6rem", "42rem"],
                 aspectRatio: "1/1",
                 backgroundColor: bgColor,
-                zIndex: OFFSET * FOUNDER_LIST.length + calc(index),
+                zIndex: cardOffset * FOUNDER_LIST.length + calc(index),
               }}
             >
               <Image src={image} alt={name} className="h-[85.7%] w-auto" />
@@ -126,7 +178,7 @@ const Founders = () => {
         <Quota className="w-[4rem] sm:w-[6rem]"></Quota>
         <Typography sx={{ fontSize: ["2rem", "2.8rem"], lineHeight: ["3.6rem", "5.6rem"] }}>{currentFounder.content}</Typography>
         <Typography sx={{ fontSize: ["1.8rem", "2rem"], lineHeight: ["2.8rem", "3.6rem"], fontFamily: "var(--font-title)", flex: 1 }}>
-          {currentFounder.name}, Co-founder of{" "}
+          {currentFounder.name}, {currentFounder.title} of{" "}
           <a href={currentFounder.href} className="underline cursor-pointer whitespace-nowrap" target="_blank" rel="noreferrer">
             {currentFounder.prototol}
           </a>

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 = () => {