feat(home): products section

package.json

@@ -13,12 +13,14 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "next": "14.1.0",
+    "numeral": "^2.0.6",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.1"
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/numeral": "^2.0.5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",

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

@@ -9,7 +9,7 @@ import { INFORMATION_LINKS } from "../../_constants";
 export function HeroSection() {
   return (
     <Hero>
-      <div className="container mx-auto flex flex-col items-center gap-16 px-4 pb-16 pt-8 md:flex-row-reverse">
+      <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} />
         </div>

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

@@ -0,0 +1,109 @@
+import { twMerge } from "tailwind-merge";
+import Link from "next/link";
+
+import {
+  BridgeIcon,
+  PlusIcon,
+  CheckmarkSimpleIcon,
+  ArrowUpRightIcon,
+} from "../../_components/icons";
+import { Text } from "../../_components/text";
+import { PRODUCT_LINKS } from "../../_constants/links";
+
+const products = [
+  {
+    ...PRODUCT_LINKS.bridge,
+    Icon: BridgeIcon,
+    iconClassName: "group-hover:drop-shadow-aqua h-6 w-6",
+    iconContainerClassName: "bg-aqua-100/[.05]",
+    arrowIconClassName: "stroke-aqua-100",
+    containerClassName: [
+      "bg-gradient-to-r from-aqua-100/[.05] to-transparent",
+      "md:group-hover:bg-gradient-to-r md:group-hover:from-aqua-100/[.05] md:group-hover:to-transparent",
+    ],
+  },
+  {
+    ...PRODUCT_LINKS.plus,
+    Icon: PlusIcon,
+    iconClassName: "group-hover:drop-shadow-teal h-7 w-7",
+    iconContainerClassName: "bg-teal-100/[.05]",
+    arrowIconClassName: "stroke-teal-100",
+    containerClassName: [
+      "bg-gradient-to-r from-teal-100/[.05] to-transparent",
+      "md:group-hover:bg-gradient-to-r md:group-hover:from-teal-100/[.05] md:group-hover:to-transparent",
+    ],
+  },
+  {
+    ...PRODUCT_LINKS.settlement,
+    Icon: CheckmarkSimpleIcon,
+    iconClassName: "group-hover:drop-shadow-purple h-6 w-7",
+    iconContainerClassName: "bg-purple-100/[.05]",
+    arrowIconClassName: "stroke-purple-100",
+    containerClassName: [
+      "bg-gradient-to-r from-purple-100/[.05] to-transparent",
+      "md:group-hover:bg-gradient-to-r md:group-hover:from-purple-100/[.05] md:group-hover:to-transparent",
+    ],
+  },
+];
+
+export function ProductsSection() {
+  return (
+    <section className="container mx-auto mb-12 flex flex-col gap-16 px-4 sm:gap-24 md:mb-24">
+      <div className="flex flex-col gap-3 sm:gap-4">
+        <Text variant="cap-case" className="text-teal-100">
+          Solutions
+        </Text>
+        <Text variant="heading-2" className="capitalize text-light-200">
+          Across Products
+        </Text>
+        <Text variant="body-nums">
+          Fastest and lowest-cost bridging for end-users.
+          <br />
+          Streamlined interoperability for developers.
+        </Text>
+      </div>
+      <div className="flex flex-col gap-4 md:flex-row">
+        {products.map((product) => (
+          <Link key={product.label} href={product.href} className="group flex-1">
+            <div
+              className={twMerge(
+                "flex flex-col rounded-2xl border border-light-100/[.02] p-5 transition md:h-[336px] md:items-center md:bg-none md:px-6 md:pb-16",
+                product.containerClassName,
+              )}
+            >
+              <div className="flex w-full flex-row items-center justify-between md:flex-col-reverse">
+                <div
+                  className={twMerge(
+                    "flex h-16 w-16 items-center justify-center rounded-lg shadow-sm",
+                    product.iconContainerClassName,
+                  )}
+                >
+                  <product.Icon className={product.iconClassName} />
+                </div>
+                <div className="md:flex md:h-12 md:w-full md:justify-end">
+                  <div
+                    className={twMerge(
+                      "flex h-12 w-12 items-center justify-center rounded-lg shadow-sm md:hidden md:self-end md:group-hover:flex",
+                      product.iconContainerClassName,
+                    )}
+                  >
+                    <ArrowUpRightIcon
+                      className={twMerge("", product.arrowIconClassName)}
+                    />
+                  </div>
+                </div>
+              </div>
+              <Text
+                variant="heading-4"
+                className="mb-1 mt-4 text-light-200 md:mb-4 md:mt-8"
+              >
+                {product.label}
+              </Text>
+              <Text className="text-light-300 md:text-center">{product.description}</Text>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}

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

@@ -0,0 +1,73 @@
+import { Text } from "../../_components/text";
+import { StatBox } from "../../_components/stat-box";
+
+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();
+  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">
+        <Text variant="cap-case" className="text-aqua-100 md:text-center">
+          power in originality
+        </Text>
+        <Text variant="heading-2" className="text-center capitalize text-light-200">
+          Production ready <br />
+          Empirically Proven
+        </Text>
+        <Text className="max-w-xl text-center">
+          Across is the only cross-chain intents protocol in production today, enabling
+          the fastest and lowest-cost interoperability solution without security
+          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>
+    </section>
+  );
+}

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

@@ -12,12 +12,21 @@ const sections = [
   {
     Icon: FeatherIcon,
     title: "Elegant Abstraction",
-    body: "Intents replace explicit execution steps with implicit user outcomes, relying on a competitive network of market makers to fulfill outcomes. Cross-chain intents are a cross-chain limit order plus an action to execute.",
+    body: "Across connects users and applications via intents, not blockchains to other blockchains via complex or trusted message passing. Developers only need to attach a standard  order to protocol actions to create seamless cross-chain experiences.",
   },
   {
     Icon: BlocksDiagonalIcon,
     title: "Modular Interoperability",
-    body: "Intents replace explicit execution steps with implicit user outcomes, relying on a competitive network of market makers to fulfill outcomes. Cross-chain intents are a cross-chain limit order plus an action to execute.",
+    body: (
+      <>
+        Cross-chain intents are powered by a modular system of 3 layers:
+        <ol className="list-decimal pl-6">
+          <li>Request for quote mechanism</li>
+          <li>Network of competitive market makers</li>
+          <li>Settlement layer to escrow user input funds, verify, and repay relayers</li>
+        </ol>
+      </>
+    ),
   },
 ];
 

src/app/(routes)/page.tsx

@@ -2,6 +2,8 @@ import { Metadata } from "next";
 
 import { HeroSection } from "./_components/hero-section";
 import { TechnologySection } from "./_components/technology-section";
+import { StatsSection } from "./_components/stats-section";
+import { ProductsSection } from "./_components/products-section";
 
 export const metadata: Metadata = {
   title: "Home | Across Protocol",
@@ -10,9 +12,11 @@ export const metadata: Metadata = {
 
 export default function Home() {
   return (
-    <main className="z-0 flex min-h-screen flex-col gap-16 overflow-hidden px-4">
+    <main className="z-0 flex min-h-screen flex-col gap-24 overflow-hidden px-4 sm:gap-32 md:gap-48">
       <HeroSection />
       <TechnologySection />
+      <StatsSection />
+      <ProductsSection />
     </main>
   );
 }

src/app/_components/icons/arrow-up-right.tsx

@@ -0,0 +1,27 @@
+import { SVGProps } from "react";
+
+export function ArrowUpRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="40"
+      height="41"
+      viewBox="0 0 40 41"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M14.168 26.7048L25.8346 15.0382"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M14.168 15.0349H25.8346V26.7016"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/app/_components/icons/index.tsx

@@ -11,6 +11,7 @@ export { QuestionMarkIcon } from "./question-mark";
 export { DocumentIcon } from "./document";
 export { Partner1Icon } from "./partner-1";
 export { ArrowRightIcon } from "./arrow-right";
+export { ArrowUpRightIcon } from "./arrow-up-right";
 
 // Gradient icons
 export { ArrowUpIcon } from "./gradient/arrow-up";

src/app/_components/stat-box.tsx

@@ -0,0 +1,45 @@
+import { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+import { Text } from "./text";
+
+type Props = ComponentProps<"div"> & {
+  title: string;
+  titleClassName: string;
+  value: string;
+  dividerClassName?: string;
+};
+
+export function StatBox({
+  className,
+  title,
+  titleClassName,
+  value,
+  dividerClassName,
+  ...props
+}: Props) {
+  return (
+    <div className="group">
+      <div
+        className={twMerge(
+          "group flex flex-col rounded-2xl border border-light-100/[.02] px-4 pb-6 transition sm:pb-10",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          className={twMerge(
+            "mb-6 h-1 w-11 self-center rounded-b-[12px] rounded-t-none bg-grey-600 sm:mb-10",
+            dividerClassName,
+          )}
+        />
+        <Text variant="cap-case" className={twMerge("mb-2 text-center", titleClassName)}>
+          {title}
+        </Text>
+        <Text variant="heading-3" className="text-center">
+          {value}
+        </Text>
+      </div>
+    </div>
+  );
+}

src/app/_lib/format.ts

@@ -0,0 +1,15 @@
+import numeral from "numeral";
+
+/**
+ * Formats a number into a human readable format
+ * @param num The number to format
+ * @returns A human readable format. I.e. 1000 -> 1K, 1001 -> 1K+
+ */
+export function humanReadableNumber(num: number, decimals = 0): string {
+  if (num <= 0) return "0";
+  return (
+    numeral(num)
+      .format(decimals <= 0 ? "0a" : `0.${"0".repeat(decimals)}a`)
+      .toUpperCase() + "+"
+  );
+}

src/app/_lib/scraper.ts

@@ -0,0 +1,31 @@
+type ProtocolStatsResponse = {
+  totalDeposits: number;
+  avgFillTime: number;
+  totalVolumeUsd: number;
+};
+
+type ProtocolStatsFormatted = ProtocolStatsResponse & {
+  avgFillTimeInMinutes: number;
+};
+
+export async function getProtocolStats(
+  nextFetchRequestConfig?: NextFetchRequestConfig,
+): Promise<ProtocolStatsFormatted> {
+  const response = await fetch(`https://public.api.across.to/deposits/stats`, {
+    next: nextFetchRequestConfig,
+  });
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch protocol stats: ${response.status} ${response.statusText}`,
+    );
+  }
+  const data = await response.json();
+  return formatResult(data);
+}
+
+function formatResult(data: ProtocolStatsResponse) {
+  return {
+    ...data,
+    avgFillTimeInMinutes: Math.floor(data.avgFillTime / 60),
+  };
+}