feat: partners carousel

src/app/(routes)/across-bridge/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
-import Image from "next/image";
+
+import { Hero } from "@/app/_components/hero";
 
 export const metadata: Metadata = {
   title: "Across Bridge",
@@ -8,8 +9,10 @@ export const metadata: Metadata = {
 
 export default function BridgeLanding() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      Across Bridge
+    <main className="z-0 min-h-screen overflow-hidden">
+      <Hero>
+        <div className="py-10 text-center">Across Bridge</div>
+      </Hero>
     </main>
   );
 }

src/app/(routes)/across-plus/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
-import Image from "next/image";
+
+import { Hero } from "@/app/_components/hero";
 
 export const metadata: Metadata = {
   title: "Across Plus",
@@ -8,8 +9,10 @@ export const metadata: Metadata = {
 
 export default function PlusLanding() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      Across+
+    <main className="z-0 min-h-screen overflow-hidden">
+      <Hero>
+        <div className="py-10 text-center">Across Plus</div>
+      </Hero>
     </main>
   );
 }

src/app/(routes)/across-settlement/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next";
-import Image from "next/image";
+
+import { Hero } from "@/app/_components/hero";
 
 export const metadata: Metadata = {
   title: "Across Settlement",
@@ -8,8 +9,10 @@ export const metadata: Metadata = {
 
 export default function SettlementLanding() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      Settlement
+    <main className="z-0 min-h-screen overflow-hidden">
+      <Hero>
+        <div className="py-10 text-center">Across Settlement</div>
+      </Hero>
     </main>
   );
 }

src/app/(routes)/globals.css

@@ -1,3 +1,12 @@
 @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;
+}

src/app/(routes)/page.tsx

@@ -1,14 +1,18 @@
 import { Metadata } from "next";
 
+import { Hero } from "@/app/_components/hero";
+
 export const metadata: Metadata = {
   title: "Home | Across Protocol",
   description: "Interoperability powered by Intents.",
 };
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      Home
+    <main className="z-0 min-h-screen overflow-hidden">
+      <Hero>
+        <div className="py-10 text-center">Home</div>
+      </Hero>
     </main>
   );
 }

src/app/_components/header-nav/index.tsx

@@ -80,7 +80,7 @@ export function HeaderNav() {
   );
 
   return (
-    <header className="sticky top-0 bg-grey-dark">
+    <header className="sticky top-0 z-10 bg-grey-dark">
       <nav className="mx-auto max-w-7xl p-4">
         <div className="flex flex-row items-center justify-between">
           <div className="flex flex-row items-center">

src/app/_components/hero.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { PartnersCarousel } from "./partners-carousel";
+
+type HeroProps = ComponentProps<"section">;
+
+export function Hero({ className, children, ...props }: HeroProps) {
+  return (
+    <section className={twMerge("min-h-screen", className)} {...props}>
+      {children}
+      <PartnersCarousel />
+    </section>
+  );
+}

src/app/_components/icons/document.tsx

@@ -14,13 +14,13 @@ export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
         d="M12.5007 1.66675H5.00065C4.55862 1.66675 4.1347 1.84234 3.82214 2.1549C3.50958 2.46746 3.33398 2.89139 3.33398 3.33341V16.6667C3.33398 17.1088 3.50958 17.5327 3.82214 17.8453C4.1347 18.1578 4.55862 18.3334 5.00065 18.3334H15.0007C15.4427 18.3334 15.8666 18.1578 16.1792 17.8453C16.4917 17.5327 16.6673 17.1088 16.6673 16.6667V5.83341L12.5007 1.66675Z"
         stroke="white"
         stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
       <path
         d="M12 2V4.66667C12 5.02029 12.1756 5.35943 12.4882 5.60948C12.8007 5.85952 13.2246 6 13.6667 6H16"
         stroke="white"
         stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

src/app/_components/icons/index.tsx

@@ -9,6 +9,7 @@ export { TwitterIcon } from "./twitter";
 export { ChevronDownIcon } from "./chevron-down";
 export { QuestionMarkIcon } from "./question-mark";
 export { DocumentIcon } from "./document";
+export { Partner1Icon } from "./partner-1";
 
 // Gradient icons
 export { ArrowUpIcon } from "./gradient/arrow-up";

src/app/_components/icons/partner-1.tsx

@@ -0,0 +1,41 @@
+import { SVGProps } from "react";
+
+export function Partner1Icon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="200"
+      height="56"
+      viewBox="0 0 200 56"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M79.6133 37.0475H83.7719V29.9185H85.58L89.9969 37.0475H94.4396L89.5578 29.1953C91.7276 28.5495 93.3548 27.0772 93.3548 24.2876V24.1842C93.3548 20.3615 90.591 18.5792 86.2257 18.5792H79.6133V37.0475ZM83.7719 27.0772V21.7821H86.1224C88.1372 21.7821 89.2737 22.4279 89.2737 24.3134V24.4167C89.2737 26.199 88.2147 27.0772 86.1224 27.0772H83.7719Z"
+        fill="#9DAAB3"
+      />
+      <path
+        d="M101.579 37.3316C105.273 37.3316 107.597 35.7044 108.036 32.7855H104.498C104.265 33.9221 103.413 34.6712 101.682 34.6712C99.6417 34.6712 98.4277 33.3797 98.3244 31.1325H108.062V30.0993C108.062 25.269 104.963 23.2285 101.476 23.2285C97.5495 23.2285 94.5273 25.9923 94.5273 30.2542V30.4608C94.5273 34.7745 97.4978 37.3316 101.579 37.3316ZM98.376 28.8336C98.6601 26.9222 99.7967 25.8115 101.476 25.8115C103.258 25.8115 104.291 26.793 104.42 28.8336H98.376Z"
+        fill="#9DAAB3"
+      />
+      <path d="M109.844 37.0475H113.563V17.4168H109.844V37.0475Z" fill="#9DAAB3" />
+      <path
+        d="M120.699 37.3316C122.921 37.3316 124.289 36.2984 124.987 34.9295V37.0475H128.706V23.5385H124.987V31.4682C124.987 33.4572 123.747 34.4387 122.172 34.4387C120.571 34.4387 119.821 33.5604 119.821 31.7265V23.5385H116.102V32.2431C116.102 35.7818 118.065 37.3316 120.699 37.3316Z"
+        fill="#9DAAB3"
+      />
+      <path
+        d="M131.246 37.0475H134.992V29.0661C134.992 27.2322 136.154 26.3022 137.6 26.3022C138.918 26.3022 139.719 27.0771 139.719 28.8078V37.0475H143.438V29.0661C143.438 27.2322 144.6 26.3022 146.047 26.3022C147.39 26.3022 148.165 27.0771 148.165 28.8078V37.0475H151.885V28.3945C151.885 24.8041 149.947 23.2285 147.441 23.2285C145.737 23.2285 143.981 23.9517 142.896 25.579C142.25 23.9776 140.907 23.2285 139.125 23.2285C137.109 23.2285 135.663 24.3392 134.992 25.6048V23.5384H131.246V37.0475Z"
+        fill="#9DAAB3"
+      />
+      <path
+        d="M160.532 37.3316C164.226 37.3316 166.551 35.7044 166.99 32.7855H163.451C163.218 33.9221 162.366 34.6712 160.635 34.6712C158.595 34.6712 157.381 33.3797 157.278 31.1325H167.016V30.0993C167.016 25.269 163.916 23.2285 160.429 23.2285C156.503 23.2285 153.48 25.9923 153.48 30.2542V30.4608C153.48 34.7745 156.451 37.3316 160.532 37.3316ZM157.33 28.8336C157.614 26.9222 158.751 25.8115 160.429 25.8115C162.211 25.8115 163.245 26.793 163.374 28.8336H157.33Z"
+        fill="#9DAAB3"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M65.303 19.684L65.0519 19.2356C64.728 18.6932 64.2712 18.2425 63.7246 17.9261L51.6885 10.9843C51.1435 10.6682 50.5249 10.5011 49.8948 10.5H49.3746C48.7445 10.5011 48.1259 10.6682 47.5808 10.9843L35.5449 17.9441C35.0013 18.2584 34.5498 18.7099 34.2354 19.2535L33.9843 19.7019C33.6682 20.2469 33.5011 20.8656 33.5 21.4956V35.3972C33.5011 36.0273 33.6682 36.6459 33.9843 37.1909L34.2354 37.6393C34.5579 38.1766 35.0076 38.6263 35.5449 38.9488L47.5988 45.8905C48.1411 46.2132 48.7616 46.3808 49.3925 46.3748H49.8948C50.5249 46.3737 51.1435 46.2066 51.6885 45.8905L63.7246 38.9309C64.2735 38.6236 64.7267 38.1704 65.0339 37.6214L65.303 37.173C65.6154 36.6264 65.7822 36.0087 65.7873 35.3792V21.4777C65.7863 20.8477 65.6192 20.229 65.303 19.684ZM49.3746 14.0874H49.8948L60.4062 20.1503L49.6437 26.3566L38.8812 20.1503L49.3746 14.0874ZM51.4374 41.8906L61.9308 35.8277L62.1998 35.3793V23.2536L51.4374 29.4779V41.8906Z"
+        fill="#9DAAB3"
+      />
+    </svg>
+  );
+}

src/app/_components/icons/question-mark.tsx

@@ -25,7 +25,7 @@ export function QuestionMarkIcon(props: SVGProps<SVGSVGElement>) {
       <path
         d="M10 14.1667H10.0083"
         stroke="white"
-        stroke-width="1.5"
+        strokeWidth="1.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

src/app/_components/partners-carousel.tsx

@@ -0,0 +1,62 @@
+import { Partner1Icon } from "./icons";
+
+// TODO: Replace with actual partner logos
+const partners = [
+  {
+    name: "Partner 1",
+    Logo: Partner1Icon,
+  },
+  {
+    name: "Partner 2",
+    Logo: Partner1Icon,
+  },
+  {
+    name: "Partner 3",
+    Logo: Partner1Icon,
+  },
+  {
+    name: "Partner 4",
+    Logo: Partner1Icon,
+  },
+  {
+    name: "Partner 5",
+    Logo: Partner1Icon,
+  },
+  {
+    name: "Partner 6",
+    Logo: Partner1Icon,
+  },
+];
+
+// Duplicate partners to simulate infinite scrolling
+const partnersToRender = [...partners, ...partners];
+
+export function PartnersCarousel() {
+  return (
+    <>
+      <div className="mb-8 text-center text-xs uppercase lining-nums tabular-nums tracking-wide-4 text-grey-400">
+        Integrated Partners
+      </div>
+      <div className="w-[calc(2 * var(--no-of-slides))] relative overflow-hidden">
+        <div className="container mx-auto">
+          <div className="grid">
+            <div className="w-[calc(var(--slides-in-view) * var(--slide-width))] flex flex-row overflow-hidden">
+              {partnersToRender.map((partner, index) => (
+                <div
+                  key={index}
+                  className="flex h-[var(--slide-height)] w-[var(--slide-width)] flex-auto flex-shrink-0 flex-grow-0 animate-scroll flex-col items-center"
+                >
+                  {/* Note: partner.name only for testing purposes */}
+                  <div>{partner.name}</div>
+                  <partner.Logo className="h-8 w-8" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        {/* Fade in/out overlay */}
+        <div className="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-gradient-to-r from-grey-dark via-transparent via-50% to-grey-dark bg-fixed sm:from-10% sm:to-90% xl:from-25% xl:to-75%" />
+      </div>
+    </>
+  );
+}

tailwind.config.ts

@@ -8,6 +8,7 @@ const config: Config = {
   ],
   theme: {
     colors: {
+      transparent: "transparent",
       light: {
         100: "#fff",
         200: "#F0FFFB",
@@ -52,6 +53,17 @@ const config: Config = {
       "wide-4": "0.12rem", // 1.92px
     },
     extend: {
+      animation: {
+        scroll: "scroll var(--iteration-time) linear infinite",
+      },
+      keyframes: {
+        scroll: {
+          "0%": { transform: "translateX(0)" },
+          "100%": {
+            transform: "translateX(calc(var(--slide-width) * var(--no-of-slides)* -1))",
+          },
+        },
+      },
       dropShadow: {
         "aqua-sm": [
           "0px 0px 8.286px #6CF9D8",