feat(settlement): page

src/app/(routes)/_components/stats-section.tsx

@@ -1,27 +1,7 @@
-import { Text } from "../../_components/text";
-import { StatBox } from "../../_components/stat-box";
+import { Text } from "@/app/_components/text";
+import { StatsRow } from "@/app/_components/stats-row";
 
-import { getProtocolStats } from "../../_lib/scraper";
-import { humanReadableNumber } from "../../_lib/format";
-
-async function getFormattedStatsData() {
-  const protocolStats = await getProtocolStats({
-    revalidate: 24 * 60 * 60, // Update once a day
-  });
-
-  return {
-    totalVolumeUsd: `$${humanReadableNumber(protocolStats.totalVolumeUsd)}`,
-    totalDeposits: `${humanReadableNumber(protocolStats.totalDeposits)}`,
-    avgFillTimeInMinutes: `${protocolStats.avgFillTimeInMinutes < 1 ? "<" : ""} ${Math.max(
-      protocolStats.avgFillTimeInMinutes,
-      1,
-    )}m`,
-    bridgeFee: "<$1",
-  };
-}
-
-export async function StatsSection() {
-  const formattedStatsData = await getFormattedStatsData();
+export function StatsSection() {
   return (
     <section className="container mx-auto flex flex-col gap-10 px-4 sm:gap-16">
       <div className="flex flex-col items-center gap-4">
@@ -38,36 +18,7 @@ export async function StatsSection() {
           tradeoffs.
         </Text>
       </div>
-      <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
-        <StatBox
-          title="volume"
-          value={formattedStatsData.totalVolumeUsd}
-          titleClassName="text-teal-100"
-          className="group-hover:border-teal-100"
-          dividerClassName="group-hover:bg-teal-100/[.5]"
-        />
-        <StatBox
-          title="transaction"
-          value={formattedStatsData.totalDeposits}
-          titleClassName="text-orange-100"
-          className="group-hover:border-orange-100"
-          dividerClassName="group-hover:bg-orange-100/[.5]"
-        />
-        <StatBox
-          title="avg. fill time"
-          value={formattedStatsData.avgFillTimeInMinutes}
-          titleClassName="text-purple-100"
-          className="group-hover:border-purple-100"
-          dividerClassName="group-hover:bg-purple-100/[.5]"
-        />
-        <StatBox
-          title="bridge 1 eth"
-          value={formattedStatsData.bridgeFee}
-          titleClassName="text-aqua-100"
-          className="group-hover:border-aqua-100"
-          dividerClassName="group-hover:bg-aqua-100/[.5]"
-        />
-      </div>
+      <StatsRow />
     </section>
   );
 }

src/app/(routes)/across-plus/_components/features-section.tsx

@@ -27,7 +27,7 @@ const features = [
 
 export function FeaturesSection() {
   return (
-    <section className="container mx-auto flex flex-col gap-16 px-4 sm:gap-24              ">
+    <section className="container mx-auto flex flex-col gap-16 px-4 sm:gap-24">
       <div className="flex flex-col gap-4">
         <Text
           variant="cap-case"
@@ -49,7 +49,7 @@ export function FeaturesSection() {
             <Text variant="heading-4" className="mb-4 mt-8 capitalize text-light-200">
               {feature.title}
             </Text>
-            <Text className="text-light-300">{feature.body}</Text>
+            <Text className="max-w-[520px] text-light-300">{feature.body}</Text>
           </div>
         ))}
         <div className="flex flex-col items-center gap-8 rounded-2xl bg-teal-100/[.02] p-6 shadow-md sm:items-start">

src/app/(routes)/across-plus/_components/get-started-section.tsx

@@ -1,38 +1,13 @@
 import Image from "next/image";
 
-import { ArrowRightIcon } from "@/app/_components/icons";
-import { Text } from "@/app/_components/text";
+import { GetStartedSection } from "@/app/_components/get-started-section";
 import plusGetStartedImage from "@/app/_assets/plus-get-started.png";
-import { INFORMATION_LINKS } from "@/app/_constants";
 
-export function GetStartedSection() {
+export function PlusGetStartedSection() {
   return (
-    <section className="container mx-auto flex flex-col items-center gap-16 sm:gap-24">
-      <Image src={plusGetStartedImage} alt="get started image" />
-      <Text variant="heading-1" className="tracking-tight-1">
-        Ready to get started?
-      </Text>
-      <div className="flex flex-row gap-6">
-        <a
-          href={INFORMATION_LINKS.docs.href}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex h-10 flex-col items-center justify-center rounded-full bg-teal-100/[.05] px-6 py-2 shadow-sm"
-        >
-          <Text variant="cap-case" className="text-teal-100">
-            go to docs
-          </Text>
-        </a>
-        {/* TODO: Use correct link */}
-        <a href="#" className="flex flex-row items-center justify-center gap-2 px-6 py-2">
-          <Text variant="cap-case" className="text-teal-100">
-            get it touch
-          </Text>
-          <div className="flex h-5 w-5 flex-col items-center justify-center rounded-full bg-teal-100">
-            <ArrowRightIcon />
-          </div>
-        </a>
-      </div>
-    </section>
+    <GetStartedSection
+      variant="teal"
+      Image={<Image src={plusGetStartedImage} alt="get started image" />}
+    />
   );
 }

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

@@ -3,8 +3,8 @@ import { Metadata } from "next";
 import { HeroSection } from "./_components/hero-section";
 import { FeaturesSection } from "./_components/features-section";
 import { UseCasesSection } from "./_components/use-cases-section";
-import { SupportedChainsSection } from "./_components/supported-chains-section";
-import { GetStartedSection } from "./_components/get-started-section";
+import { SupportedChainsSection } from "@/app/_components/supported-chains-section";
+import { PlusGetStartedSection } from "./_components/get-started-section";
 
 export const metadata: Metadata = {
   title: "Across Plus",
@@ -17,8 +17,8 @@ export default function PlusLanding() {
       <HeroSection />
       <FeaturesSection />
       <UseCasesSection />
-      <SupportedChainsSection />
-      <GetStartedSection />
+      <SupportedChainsSection variant="teal" />
+      <PlusGetStartedSection />
     </main>
   );
 }

src/app/(routes)/across-settlement/_components/features-section.tsx

@@ -0,0 +1,65 @@
+import {
+  BlocksConnectedIcon,
+  ChecklistIcon,
+  CheckmarkIcon,
+  CrossChainIcon,
+} from "@/app/_components/icons";
+import { Text } from "@/app/_components/text";
+import settlement2Image from "@/app/_assets/settlement-2.png";
+import Image from "next/image";
+
+const features = [
+  {
+    Icon: <BlocksConnectedIcon className="h-14 w-14" />,
+    title: "Cross-Chain Intents Settlement",
+    body: "Intents are cross-chain limit orders submitted to an RFQ system and fulfilled by relayers with their own capital. Settlement verifies fulfillment and repays relayers. Across’ maximally efficient settlement system reduces cost to relayers, and ultimately, users.",
+  },
+  {
+    Icon: <ChecklistIcon className="h-14 w-14" />,
+    title: "Modular by design",
+    body: "Across Settlement can accept any intents-based order flow following a standard structure. It seamlessly enables any DEX or application with RFQ order flow to offer best-execution cross-chain swaps from the most competitive network of professional market markets.",
+  },
+  {
+    Icon: <CheckmarkIcon className="h-14 w-14" />,
+    title: "aggregated and optimistic verification",
+    body: "Across verifies fulfillment optimistically. This enables aggregated, off-chain verification and repayment over a 1-2 hour period, amortizing this cost over thousands of orders, resulting in an order of magnitude gas savings vs. per-fill repayment.",
+  },
+  {
+    Icon: <CrossChainIcon className="h-14 w-14" />,
+    title: "Seamless cross-chain management",
+    body: "Repayment is made on the relayers’ chain of choice, reducing overhead and complexity of managing cross-chain positions. Lower costs for relayers resulting in lower costs for users.",
+  },
+];
+
+export function FeaturesSection() {
+  return (
+    <section className="container mx-auto flex flex-col gap-16 px-4 sm:gap-24">
+      <Image
+        src={settlement2Image}
+        alt="Across settlement layers graphic"
+        className="self-center sm:max-w-[514px]"
+      />
+      <div className="flex flex-col gap-4">
+        <Text variant="cap-case" className="text-center text-purple-100">
+          industry-leading performance
+        </Text>
+        <Text variant="heading-2" className="text-center capitalize text-light-200">
+          Superior settlement
+          <br />
+          Best Execution
+        </Text>
+      </div>
+      <div className="grid grid-cols-1 gap-12 sm:gap-y-16 md:grid-cols-2">
+        {features.map((feature) => (
+          <div key={feature.title}>
+            {feature.Icon}
+            <Text variant="heading-4" className="mb-4 mt-8 capitalize text-light-200">
+              {feature.title}
+            </Text>
+            <Text className="max-w-100 text-light-300">{feature.body}</Text>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

src/app/(routes)/across-settlement/_components/get-started-section.tsx

@@ -0,0 +1,19 @@
+import Image from "next/image";
+
+import { GetStartedSection } from "@/app/_components/get-started-section";
+import settlementLayerImage from "@/app/_assets/settlement-layer.png";
+
+export function SettlementGetStartedSection() {
+  return (
+    <GetStartedSection
+      variant="purple"
+      Image={
+        <Image
+          src={settlementLayerImage}
+          alt="get started image"
+          className="max-w-100 md:max-w-[576px]"
+        />
+      }
+    />
+  );
+}

src/app/(routes)/across-settlement/_components/hero-section.tsx

@@ -0,0 +1,53 @@
+import Image from "next/image";
+
+import { Text } from "@/app/_components/text";
+import { ArrowRightIcon } from "@/app/_components/icons/arrow-right";
+import settlementHeroImage from "@/app/_assets/settlement-hero.png";
+import { INFORMATION_LINKS } from "@/app/_constants";
+
+export function HeroSection() {
+  return (
+    <section className="min-h-screen">
+      <div className="container mx-auto flex flex-col items-center gap-16 px-4 pb-16 pt-8 md:flex-row-reverse md:gap-8 md:pt-16">
+        <div className="flex max-w-80 flex-1 sm:max-w-100 md:max-w-full">
+          <Image
+            src={settlementHeroImage}
+            alt="Across settlement graphic"
+            priority={true}
+          />
+        </div>
+        <div className="flex flex-1 flex-col gap-6">
+          <Text
+            variant="heading-1"
+            className="text-center sm:tracking-tight-1 md:text-left"
+          >
+            <span className="text-purple-100">Cross-Chain</span>{" "}
+            <span className="text-light-100">Intents</span> <br />
+            <span className="text-light-100">Settlement</span>{" "}
+            <span className="text-purple-100">Layer</span>
+          </Text>
+          <div className="flex w-full flex-row justify-center md:justify-start">
+            <Text
+              variant="body-nums"
+              className="max-w-[336px] text-center sm:max-w-[430px] md:text-left"
+            >
+              Efficiently transform RFQ order flow into cross-chain swaps with
+              Across&apos; intents settlement system.
+            </Text>
+          </div>
+          <a
+            className="flex cursor-pointer flex-row items-center justify-center gap-2 text-purple-100 md:justify-start"
+            href={INFORMATION_LINKS.docs.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Text variant="cap-case-sm">go to docs</Text>
+            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-purple-100">
+              <ArrowRightIcon />
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}

src/app/(routes)/across-settlement/_components/stats-section.tsx

@@ -0,0 +1,20 @@
+import { StatsRow } from "@/app/_components/stats-row";
+
+const statBoxOverrides = {
+  className: "group-hover:border-purple-100",
+  titleClassName: "text-purple-100",
+  dividerClassName: "group-hover:bg-purple-100/[.5]",
+};
+
+export async function StatsSection() {
+  return (
+    <section className="container mx-auto -mt-48 flex flex-col px-4 sm:-mt-16 md:-mt-48">
+      <StatsRow
+        volumeBoxProps={statBoxOverrides}
+        transactionBoxProps={statBoxOverrides}
+        avgFillTimeBoxProps={statBoxOverrides}
+        bridgeFeeBoxProps={statBoxOverrides}
+      />
+    </section>
+  );
+}

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

@@ -1,14 +1,24 @@
 import { Metadata } from "next";
 
+import { HeroSection } from "./_components/hero-section";
+import { StatsSection } from "./_components/stats-section";
+import { FeaturesSection } from "./_components/features-section";
+import { SupportedChainsSection } from "@/app/_components/supported-chains-section";
+import { SettlementGetStartedSection } from "./_components/get-started-section";
+
 export const metadata: Metadata = {
   title: "Across Settlement",
   description: "Interoperability powered by Intents.",
 };
 
 export default function SettlementLanding() {
   return (
-    <main className="z-0 min-h-screen overflow-hidden">
-      <div className="py-10 text-center">Across Settlement</div>
+    <main className="z-0 mb-24 flex min-h-screen flex-col gap-24 overflow-hidden px-4 sm:gap-32 md:gap-48">
+      <HeroSection />
+      <StatsSection />
+      <FeaturesSection />
+      <SupportedChainsSection variant="purple" />
+      <SettlementGetStartedSection />
     </main>
   );
 }