feat(home): products section

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 md:gap-0 md:pr-2">
+      <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)/page.tsx

@@ -3,6 +3,7 @@ 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",
@@ -11,10 +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

@@ -22,7 +22,7 @@ export function StatBox({
     <div className="group">
       <div
         className={twMerge(
-          "group flex flex-col rounded-2xl border border-grey-600 px-4 pb-6 transition sm:pb-10",
+          "group flex flex-col rounded-2xl border border-light-100/[.02] px-4 pb-6 transition sm:pb-10",
           className,
         )}
         {...props}