feat(settlement): page

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

@@ -8,7 +8,7 @@ import { INFORMATION_LINKS } from "../../_constants";
 
 export function HeroSection() {
   return (
-    <Hero>
+    <Hero title="trusted by top applications">
       <div className="container mx-auto flex flex-col items-center gap-16 px-4 pb-16 pt-8 md:flex-row-reverse md:gap-0 md:pr-2 md:pt-16">
         <div className="flex max-w-80 flex-1 sm:max-w-100 md:max-w-full">
           <Image src={landingHeroSrc} alt="Across protocol diagram" priority={true} />

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-bridge/page.tsx

@@ -1,7 +1,5 @@
 import { Metadata } from "next";
 
-import { Hero } from "@/app/_components/hero";
-
 export const metadata: Metadata = {
   title: "Across Bridge",
   description: "Interoperability powered by Intents.",
@@ -10,9 +8,7 @@ export const metadata: Metadata = {
 export default function BridgeLanding() {
   return (
     <main className="z-0 min-h-screen overflow-hidden">
-      <Hero>
-        <div className="py-10 text-center">Across Bridge</div>
-      </Hero>
+      <div className="py-10 text-center">Across Bridge</div>
     </main>
   );
 }

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

@@ -0,0 +1,78 @@
+import {
+  ArrowUpIcon,
+  ShieldIcon,
+  ChatIcon,
+  ArrowUpRightThickIcon,
+} from "@/app/_components/icons";
+import { Text } from "@/app/_components/text";
+import { INFORMATION_LINKS } from "@/app/_constants";
+
+const features = [
+  {
+    Icon: <ArrowUpIcon className="h-14 w-14" />,
+    title: "Web2-Grade UX",
+    body: "Users want to use apps, not bridges. Across+ upgrades dapp UX by abstracting bridging to the background for a Web2-like experience.",
+  },
+  {
+    Icon: <ShieldIcon className="h-14 w-14" />,
+    title: "Secure by Design",
+    body: "Most cross-chain messaging solutions increase trust assumptions vs. the chains they connect. Across+ actions are not cross-chain messages -- they are actions to execute when assets are delivered on the destination.",
+  },
+  {
+    Icon: <ChatIcon variant="teal" className="h-14 w-14" />,
+    title: "intents-based Architecture",
+    body: "Cross-chain intents are cross-chain limit orders plus a protocol action to execute on destination. Simply attach the intent order standard to protocol actions to create seamless cross-chain experiences.",
+  },
+];
+
+export function FeaturesSection() {
+  return (
+    <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" className="text-center text-teal-100">
+          +users +TVL +chains
+        </Text>
+        <Text variant="heading-2" className="text-center capitalize text-light-200">
+          Seamless Cross-chain Onboarding
+        </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-[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">
+          <div className="flex flex-col items-center justify-center self-center rounded-lg bg-teal-100/[.05] p-2">
+            <Text variant="cap-case" className="text-teal-100">
+              across.to/docs
+            </Text>
+          </div>
+          <div>
+            <Text className="max-w-100 text-light-300">
+              Visit the Across+ documentation page to learn the ins and outs of how
+              we&apos;ve built the system.
+            </Text>
+            <a
+              className="mt-4 flex cursor-pointer flex-row items-center gap-1"
+              href={INFORMATION_LINKS.docs.href}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Text variant="cap-case" className="text-teal-100 sm:text-xs md:text-xs">
+                visit docs
+              </Text>
+              <div className="flex h-4 w-4 items-center justify-center rounded-full bg-teal-100">
+                <ArrowUpRightThickIcon className="stroke-grey-dark" />
+              </div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,13 @@
+import Image from "next/image";
+
+import { GetStartedSection } from "@/app/_components/get-started-section";
+import plusGetStartedImage from "@/app/_assets/plus-get-started.png";
+
+export function PlusGetStartedSection() {
+  return (
+    <GetStartedSection
+      variant="teal"
+      Image={<Image src={plusGetStartedImage} alt="get started image" />}
+    />
+  );
+}

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

@@ -0,0 +1,53 @@
+import Image from "next/image";
+
+import { Hero } from "@/app/_components/hero";
+import { Text } from "@/app/_components/text";
+import { ArrowRightIcon } from "@/app/_components/icons/arrow-right";
+import plusHeroSrc from "@/app/_assets/plus-hero.png";
+import { INFORMATION_LINKS } from "@/app/_constants";
+
+export function HeroSection() {
+  return (
+    <Hero title="trusted by top tier protocols">
+      <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={plusHeroSrc} alt="Across plus 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-light-100">Cross-Chain</span>{" "}
+            <br className="hidden md:block" />
+            <span className="text-teal-100">Bridge Hooks</span>{" "}
+            <br className="hidden sm:block md:hidden" />
+            <span className="text-light-100">
+              To
+              <br className="hidden md:block" /> Fulfill
+            </span>{" "}
+            {/* <br className="hidden md:block" /> */}
+            <span className="text-teal-100">User Intents</span>
+          </Text>
+          <div className="flex w-full flex-row justify-center md:justify-start">
+            <Text variant="body-nums" className="max-w-[430px] text-center md:text-left">
+              Bridge abstraction promotes user onboarding and bootstraps cross-chain
+              capital by bundling bridge + protocol actions within dapps.
+            </Text>
+          </div>
+          <a
+            className="flex cursor-pointer flex-row items-center justify-center gap-2 text-teal-100 md:justify-start"
+            href={INFORMATION_LINKS.docs.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Text variant="cap-case">go to docs</Text>
+            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-teal-100">
+              <ArrowRightIcon />
+            </div>
+          </a>
+        </div>
+      </div>
+    </Hero>
+  );
+}