feat(bridge): hero + features sections

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/_components/features-section.tsx

@@ -0,0 +1,55 @@
+import Image from "next/image";
+
+import {
+  CodeIcon,
+  ShieldLargeIcon,
+  DoubleChevronRightIcon,
+  DollarIcon,
+} from "@/app/_components/icons";
+import { Text } from "@/app/_components/text";
+import { FeaturesGrid } from "@/app/_components/features-grid";
+import bridge2Image from "@/app/_assets/bridge-2.png";
+
+const features = [
+  {
+    Icon: <CodeIcon className="h-14 w-14" />,
+    title: "efficient",
+    body: "With Across, bridging your tokens at the fastest speed and lowest cost does not come with security tradeoffs. How? At Across, only bridge users or bridge LPs never shoulder the risks associated with cross-chain transfers.",
+  },
+  {
+    Icon: <ShieldLargeIcon className="h-14 w-14" />,
+    title: "Secure",
+    body: "Using canonical assets is the only trustless way to transfer value, which is why Across only circulates genuine tokens, never representative or synthetic assets. In every transfer facilitated by Across, user assets are never put at risk.",
+  },
+  {
+    Icon: <DoubleChevronRightIcon className="h-14 w-14" />,
+    title: "Fast",
+    body: "Intents architecture enables the fastest bridge experience. By using a network of third party relayers, incentivized to quickly fill transfers, fill times are usually completed in a few seconds.",
+  },
+  {
+    Icon: <DollarIcon className="h-14 w-14" />,
+    title: "Superior",
+    body: "Canonical assets are the only trustless way to transfer value, which is why Across only circulates canonical tokens, never representative or synthetic ones. In every transfer at Across, users always receive canonical assets.",
+  },
+];
+
+export function FeaturesSection() {
+  return (
+    <section className="container mx-auto flex flex-col gap-16 px-4 sm:gap-24">
+      <Image
+        src={bridge2Image}
+        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-aqua-100">
+          built for safe travels
+        </Text>
+        <Text variant="heading-2" className="text-center capitalize text-light-200">
+          Engineered for best execution
+        </Text>
+      </div>
+      <FeaturesGrid features={features} />
+    </section>
+  );
+}

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

@@ -0,0 +1,47 @@
+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 { INFORMATION_LINKS } from "@/app/_constants";
+import bridgeHeroImage from "@/app/_assets/bridge-hero.png";
+
+export function HeroSection() {
+  return (
+    <Hero title="supported chains">
+      <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={bridgeHeroImage} alt="Across bridge ui" priority={true} />
+        </div>
+        <div className="flex flex-1 flex-col gap-6">
+          <Text
+            variant="heading-1"
+            className="text-center tracking-tight-5 sm:tracking-tight-2 md:text-left md:tracking-tight-1"
+          >
+            <span className="text-aqua-100">Bridge</span>{" "}
+            <span className="text-light-100">Without</span>{" "}
+            <br className="block sm:hidden md:block" />
+            <span className="text-aqua-100">Compromise</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">
+              Experience extraordinarily fast and cost-effective cross-chain bridging,
+              secured by an intents-based architecture.
+            </Text>
+          </div>
+          <a
+            className="flex cursor-pointer flex-row items-center justify-center gap-2 text-aqua-100 md:justify-start"
+            href={INFORMATION_LINKS.docs.href}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Text variant="cap-case">bridge now</Text>
+            <div className="flex h-5 w-5 items-center justify-center rounded-full bg-aqua-100">
+              <ArrowRightIcon />
+            </div>
+          </a>
+        </div>
+      </div>
+    </Hero>
+  );
+}

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

@@ -1,6 +1,7 @@
 import { Metadata } from "next";
 
-import { Hero } from "@/app/_components/hero";
+import { HeroSection } from "./_components/hero-section";
+import { FeaturesSection } from "./_components/features-section";
 
 export const metadata: Metadata = {
   title: "Across Bridge",
@@ -9,10 +10,9 @@ 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>
+    <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 />
+      <FeaturesSection />
     </main>
   );
 }

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

@@ -0,0 +1,70 @@
+import {
+  ArrowUpIcon,
+  ShieldIcon,
+  ChatIcon,
+  ArrowUpRightThickIcon,
+} from "@/app/_components/icons";
+import { Text } from "@/app/_components/text";
+import { FeaturesGrid } from "@/app/_components/features-grid";
+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>
+      <FeaturesGrid features={features}>
+        <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>
+      </FeaturesGrid>
+    </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>
+  );
+}