diff --git a/src/app/(routes)/_components/hero-section.tsx b/src/app/(routes)/_components/hero-section.tsx index 72a6cb5..f0c1a50 100644 --- a/src/app/(routes)/_components/hero-section.tsx +++ b/src/app/(routes)/_components/hero-section.tsx @@ -1,5 +1,6 @@ import Image from "next/image"; +import { PartnersTicker } from "@/app/_components/partners-ticker"; import { Hero } from "../../_components/hero"; import { Text } from "../../_components/text"; import { ArrowRightIcon } from "../../_components/icons/arrow-right"; @@ -38,6 +39,7 @@ export function HeroSection() { + ); } diff --git a/src/app/(routes)/across-bridge/_components/hero-section.tsx b/src/app/(routes)/across-bridge/_components/hero-section.tsx index cab7894..80a1139 100644 --- a/src/app/(routes)/across-bridge/_components/hero-section.tsx +++ b/src/app/(routes)/across-bridge/_components/hero-section.tsx @@ -1,6 +1,7 @@ import Image from "next/image"; import { Hero } from "@/app/_components/hero"; +import { SupportedChainsTicker } from "@/app/_components/supported-chains-ticker"; import { Text } from "@/app/_components/text"; import { BridgeNowLink } from "@/app/_components/bridge-now-link"; import { ArrowRightIcon } from "@/app/_components/icons/arrow-right"; @@ -37,6 +38,7 @@ export function HeroSection() { + ); } diff --git a/src/app/(routes)/globals.css b/src/app/(routes)/globals.css index 307e2cb..b5c61c9 100644 --- a/src/app/(routes)/globals.css +++ b/src/app/(routes)/globals.css @@ -1,12 +1,3 @@ @tailwind base; @tailwind components; @tailwind utilities; - -:root { - /* These variables are used for the infinite scrolling effect in _components/partners-carousel.tsx */ - --no-of-slides: 6; - --slides-in-view: 4; - --slide-width: 200px; - --slide-height: 56px; - --iteration-time: 15s; -} diff --git a/src/app/_assets/logos/arb.svg b/src/app/_assets/logos/arb.svg new file mode 100644 index 0000000..e3d15b3 --- /dev/null +++ b/src/app/_assets/logos/arb.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/balancer.svg b/src/app/_assets/logos/balancer.svg new file mode 100644 index 0000000..359f4fe --- /dev/null +++ b/src/app/_assets/logos/balancer.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/base.svg b/src/app/_assets/logos/base.svg new file mode 100644 index 0000000..b27a52e --- /dev/null +++ b/src/app/_assets/logos/base.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/_assets/logos/bungee.svg b/src/app/_assets/logos/bungee.svg new file mode 100644 index 0000000..c04f633 --- /dev/null +++ b/src/app/_assets/logos/bungee.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/app/_assets/logos/chainhop.svg b/src/app/_assets/logos/chainhop.svg new file mode 100644 index 0000000..40a038c --- /dev/null +++ b/src/app/_assets/logos/chainhop.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/dodo.svg b/src/app/_assets/logos/dodo.svg new file mode 100644 index 0000000..5d0c041 --- /dev/null +++ b/src/app/_assets/logos/dodo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/_assets/logos/eth.svg b/src/app/_assets/logos/eth.svg new file mode 100644 index 0000000..3a5c3ed --- /dev/null +++ b/src/app/_assets/logos/eth.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/jumper.svg b/src/app/_assets/logos/jumper.svg new file mode 100644 index 0000000..5594454 --- /dev/null +++ b/src/app/_assets/logos/jumper.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/li-fi.svg b/src/app/_assets/logos/li-fi.svg new file mode 100644 index 0000000..44428b1 --- /dev/null +++ b/src/app/_assets/logos/li-fi.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/_assets/logos/matic.svg b/src/app/_assets/logos/matic.svg new file mode 100644 index 0000000..8f54b00 --- /dev/null +++ b/src/app/_assets/logos/matic.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/_assets/logos/okx.svg b/src/app/_assets/logos/okx.svg new file mode 100644 index 0000000..9ed0eb1 --- /dev/null +++ b/src/app/_assets/logos/okx.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/op.svg b/src/app/_assets/logos/op.svg new file mode 100644 index 0000000..c36e2be --- /dev/null +++ b/src/app/_assets/logos/op.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/pooltogether.svg b/src/app/_assets/logos/pooltogether.svg new file mode 100644 index 0000000..8fa81ce --- /dev/null +++ b/src/app/_assets/logos/pooltogether.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/_assets/logos/rainbow.svg b/src/app/_assets/logos/rainbow.svg new file mode 100644 index 0000000..b67bc58 --- /dev/null +++ b/src/app/_assets/logos/rainbow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/_assets/logos/rango.svg b/src/app/_assets/logos/rango.svg new file mode 100644 index 0000000..db79e9a --- /dev/null +++ b/src/app/_assets/logos/rango.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/snx.svg b/src/app/_assets/logos/snx.svg new file mode 100644 index 0000000..a9c1924 --- /dev/null +++ b/src/app/_assets/logos/snx.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/app/_assets/logos/socket.svg b/src/app/_assets/logos/socket.svg new file mode 100644 index 0000000..3e99aa4 --- /dev/null +++ b/src/app/_assets/logos/socket.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/swing.svg b/src/app/_assets/logos/swing.svg new file mode 100644 index 0000000..1a20aaa --- /dev/null +++ b/src/app/_assets/logos/swing.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/src/app/_assets/logos/taho.svg b/src/app/_assets/logos/taho.svg new file mode 100644 index 0000000..e1bd8cf --- /dev/null +++ b/src/app/_assets/logos/taho.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/app/_assets/logos/xy.svg b/src/app/_assets/logos/xy.svg new file mode 100644 index 0000000..660fc98 --- /dev/null +++ b/src/app/_assets/logos/xy.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/_assets/logos/zk.svg b/src/app/_assets/logos/zk.svg new file mode 100644 index 0000000..326e7af --- /dev/null +++ b/src/app/_assets/logos/zk.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/_components/hero.tsx b/src/app/_components/hero.tsx index 8781e5c..630c3c6 100644 --- a/src/app/_components/hero.tsx +++ b/src/app/_components/hero.tsx @@ -1,17 +1,12 @@ import { ComponentProps } from "react"; import { twMerge } from "@/app/_lib/tw-merge"; -import { PartnersTicker } from "./partners-ticker"; +type HeroProps = ComponentProps<"section">; -type HeroProps = ComponentProps<"section"> & { - title: string; -}; - -export function Hero({ className, children, title, ...props }: HeroProps) { +export function Hero({ className, children, ...props }: HeroProps) { return ( -
+
{children} -
); } diff --git a/src/app/_components/partners-ticker.tsx b/src/app/_components/partners-ticker.tsx index 0b757ff..34ec5ce 100644 --- a/src/app/_components/partners-ticker.tsx +++ b/src/app/_components/partners-ticker.tsx @@ -1,63 +1,59 @@ -import { Partner1Icon } from "./icons"; +import Image from "next/image"; + +import { Ticker } from "./ticker"; + +import balancerLogoSrc from "@/app/_assets/logos/balancer.svg"; +import bungeeLogoSrc from "@/app/_assets/logos/bungee.svg"; +import chainhopLogoSrc from "@/app/_assets/logos/chainhop.svg"; +import dodoLogoSrc from "@/app/_assets/logos/dodo.svg"; +import jumperLogoSrc from "@/app/_assets/logos/jumper.svg"; +import lifiLogoSrc from "@/app/_assets/logos/li-fi.svg"; +import okxLogoSrc from "@/app/_assets/logos/okx.svg"; +import pooltogetherLogoSrc from "@/app/_assets/logos/pooltogether.svg"; +import rainbowLogoSrc from "@/app/_assets/logos/rainbow.svg"; +import rangoLogoSrc from "@/app/_assets/logos/rango.svg"; +import snxLogoSrc from "@/app/_assets/logos/snx.svg"; +import socketLogoSrc from "@/app/_assets/logos/socket.svg"; -// TODO: Replace with actual partner logos const partners = [ { - name: "Partner 1", - Logo: Partner1Icon, + logo: balancer logo, + }, + { + logo: bungee logo, + }, + { + logo: chainhop logo, + }, + { + logo: dodo logo, }, { - name: "Partner 2", - Logo: Partner1Icon, + logo: jumper logo, }, { - name: "Partner 3", - Logo: Partner1Icon, + logo: lifi logo, }, { - name: "Partner 4", - Logo: Partner1Icon, + logo: okx logo, }, { - name: "Partner 5", - Logo: Partner1Icon, + logo: pooltogether logo, }, { - name: "Partner 6", - Logo: Partner1Icon, + logo: rainbow logo, + }, + { + logo: rango logo, + }, + { + logo: snx logo, + }, + { + logo: socket logo, }, ]; -// Duplicate partners to simulate infinite scrolling -const partnersToRender = [...partners, ...partners]; - -export function PartnersTicker(props: { title: string }) { - return ( - <> -
- {props.title} -
-
-
-
-
- {partnersToRender.map((partner, index) => ( -
- {/* Note: partner.name only for testing purposes */} - {/* FIXME: remove before deploying to prod */} -
{partner.name}
- -
- ))} -
-
-
- {/* Fade in/out overlay */} -
-
- - ); +export function PartnersTicker() { + return ; } diff --git a/src/app/_components/supported-chains-ticker.tsx b/src/app/_components/supported-chains-ticker.tsx new file mode 100644 index 0000000..c152f1e --- /dev/null +++ b/src/app/_components/supported-chains-ticker.tsx @@ -0,0 +1,35 @@ +import Image from "next/image"; + +import { Ticker } from "./ticker"; + +import zkLogoSrc from "@/app/_assets/logos/zk.svg"; +import opLogoSrc from "@/app/_assets/logos/op.svg"; +import baseLogoSrc from "@/app/_assets/logos/base.svg"; +import ethLogoSrc from "@/app/_assets/logos/eth.svg"; +import arbLogoSrc from "@/app/_assets/logos/arb.svg"; +import maticLogoSrc from "@/app/_assets/logos/matic.svg"; + +const chains = [ + { + logo: zk logo, + }, + { + logo: op logo, + }, + { + logo: base logo, + }, + { + logo: eth logo, + }, + { + logo: arb logo, + }, + { + logo: matic logo, + }, +]; + +export function SupportedChainsTicker() { + return ; +} diff --git a/src/app/_components/ticker.tsx b/src/app/_components/ticker.tsx new file mode 100644 index 0000000..2db72bf --- /dev/null +++ b/src/app/_components/ticker.tsx @@ -0,0 +1,44 @@ +export function Ticker(props: { + title: string; + items: { + logo: React.ReactNode; + }[]; +}) { + const notEnoughItems = props.items.length < 10; + return ( +
+
+ {props.title} +
+
+
+ {props.items.map((item, index) => ( +
+ {item.logo} +
+ ))} +
+ {/* Duplicate for infinite scroll */} +
+ {props.items.map((item, index) => ( +
+ {item.logo} +
+ ))} +
+ {/* Multiply again if not enough items for large screen */} + {notEnoughItems && ( +
+ {props.items.map((item, index) => ( +
+ {item.logo} +
+ ))} +
+ )} + {/* Fade in/out overlay */} +
+
+
+ ); +} diff --git a/src/app/_lib/tw-merge.ts b/src/app/_lib/tw-merge.ts index c243c1e..da5bde1 100644 --- a/src/app/_lib/tw-merge.ts +++ b/src/app/_lib/tw-merge.ts @@ -39,7 +39,7 @@ export const twMerge = extendTailwindMerge({ "max-w": ["max-w-100"], animate: [ { - animate: ["scroll", "progress"], + animate: ["infinite-scroll"], }, ], "drop-shadow": [ diff --git a/tailwind.config.ts b/tailwind.config.ts index f10b80e..5009b11 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -73,19 +73,12 @@ const config: Config = { "100": "400px", }, animation: { - scroll: "scroll var(--iteration-time) linear infinite", - progress: "horizontalScrollFull 5000ms linear infinite", + "infinite-scroll": "infinite-scroll 25s linear infinite", }, keyframes: { - scroll: { - "0%": { transform: "translateX(0)" }, - "100%": { - transform: "translateX(calc(var(--slide-width) * var(--no-of-slides)* -1))", - }, - }, - horizontalScrollFull: { - "0%": { transform: "translateX(0)" }, - "100%": { transform: "translateX(-100%)" }, + "infinite-scroll": { + from: { transform: "translateX(0)" }, + to: { transform: "translateX(-100%)" }, }, }, dropShadow: {