feat(plus): hero and features sections

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="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/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 plusHeroSrc from "@/app/_assets/plus-hero.png";
+import { INFORMATION_LINKS } from "@/app/_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-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 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" />
+            <span className="text-light-100">To 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>
+  );
+}

src/app/(routes)/across-plus/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 Plus",
@@ -9,10 +10,9 @@ export const metadata: Metadata = {
 
 export default function PlusLanding() {
   return (
-    <main className="z-0 min-h-screen overflow-hidden">
-      <Hero>
-        <div className="py-10 text-center">Across Plus</div>
-      </Hero>
+    <main className="z-0 flex min-h-screen flex-col gap-24 overflow-hidden px-4 sm:gap-32 md:gap-48">
+      <HeroSection />
+      <FeaturesSection />
     </main>
   );
 }

src/app/_components/header-nav/products-sub-nav.tsx

@@ -32,8 +32,8 @@ export function ProductsSubNav(props: { navItems: NavItem[] }) {
   const isCurrentPath = (href: string) => pathname.startsWith(href);
 
   return (
-    <div className="min-w-3xl overflow-x-scroll p-4 sm:overflow-x-hidden">
-      <div className="flex flex-row items-center justify-start gap-4 bg-grey-dark sm:justify-center">
+    <div className="overflow-x-scroll p-4 min-[500px]:overflow-x-hidden">
+      <div className="flex flex-row items-center justify-start gap-4 bg-grey-dark min-[500px]:justify-center">
         {props.navItems.map((item) => (
           <span key={item.href} className="group">
             <Link

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

@@ -0,0 +1,29 @@
+import { SVGProps } from "react";
+
+export function ArrowUpRightThickIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M7.35938 12.6406L12.6391 7.36089"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.35938 7.35938H12.6391V12.6391"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/app/_components/icons/gradient/shield-small.tsx

@@ -8,6 +8,7 @@ export function ShieldIcon(props: SVGProps<SVGSVGElement>) {
       viewBox="0 0 96 96"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <rect
         x="4.28571"

src/app/_components/icons/index.tsx

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