feat(home): hero section

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

@@ -0,0 +1,43 @@
+import Image from "next/image";
+
+import { Hero } from "../../_components/hero";
+import { Text } from "../../_components/text";
+import { ArrowRightIcon } from "../../_components/icons/arrow-right";
+import landingHeroSrc from "../../_assets/landing-1.png";
+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="flex max-w-80 flex-1 sm:max-w-100 md:max-w-full">
+          <Image src={landingHeroSrc} alt="Picture of the author" />
+        </div>
+        <div className="flex flex-1 flex-col gap-6">
+          <Text variant="heading-1" className="text-center md:text-left">
+            <span className="text-aqua-100">Interoperability</span>
+            <br />
+            <span className="text-light-100">Powered By</span>{" "}
+            <br className="hidden md:block" />
+            <span className="text-aqua-100">Intents</span>
+          </Text>
+          <Text variant="body-nums" className="max-w-[433px] text-center md:text-left">
+            A new paradigm in cross-chain experiences, seamlessly connecting users with
+            applications.
+          </Text>
+          <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">start building</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)/layout.tsx

@@ -7,7 +7,11 @@ import { Footer } from "@/app/_components/footer";
 
 import "./globals.css";
 
-const inter = Barlow({ subsets: ["latin"], weight: ["200", "300", "400", "500"] });
+const inter = Barlow({
+  subsets: ["latin"],
+  weight: ["200", "300", "400", "500"],
+  display: "swap",
+});
 
 export const metadata: Metadata = {
   title: {

src/app/(routes)/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next";
 
-import { Hero } from "@/app/_components/hero";
+import { HeroSection } from "./_components/hero-section";
 
 export const metadata: Metadata = {
   title: "Home | Across Protocol",
@@ -10,9 +10,7 @@ export const metadata: Metadata = {
 export default function Home() {
   return (
     <main className="z-0 min-h-screen overflow-hidden">
-      <Hero>
-        <div className="py-10 text-center">Home</div>
-      </Hero>
+      <HeroSection />
     </main>
   );
 }

src/app/_components/header-nav/index.tsx

@@ -96,7 +96,7 @@ export function HeaderNav() {
                 )}
               />
             </Link>
-            <div className="hidden flex-row items-center gap-6 sm:flex">
+            <div className="hidden flex-row items-center gap-6 md:flex">
               <Link href="/">Home</Link>
               <FlyoutMenu buttonLabel="Products" menuItems={productsNavigationItems} />
               <FlyoutMenu
@@ -109,7 +109,7 @@ export function HeaderNav() {
           <div className="flex flex-row gap-3">
             <Button
               className={twMerge(
-                "hidden transition sm:block",
+                "hidden transition md:block",
                 pathname === "/across-plus"
                   ? "border-teal-100/[.05] bg-teal-100/[.05] text-teal-100"
                   : pathname === "/across-settlement"
@@ -121,7 +121,7 @@ export function HeaderNav() {
             </Button>
             {/* Only show menu button on mobile */}
             <button
-              className="flex h-10 w-10 items-center justify-center rounded-full border border-grey-600 sm:hidden"
+              className="flex h-10 w-10 items-center justify-center rounded-full border border-grey-600 md:hidden"
               onClick={() => setIsMenuOpen((isMenuOpen) => !isMenuOpen)}
             >
               {isMenuOpen ? <MinusIcon /> : <MenuIcon />}

src/app/_components/header-nav/mobile-menu.tsx

@@ -27,10 +27,10 @@ export function MobileMenu(props: {
       leaveTo="opacity-0 translate-y-1"
       show={props.isMenuOpen}
     >
-      <div className="absolute flex min-h-screen w-full flex-col gap-6 bg-grey-dark p-4 sm:hidden">
+      <div className="absolute flex min-h-screen w-full flex-col gap-6 bg-grey-dark p-4 md:hidden">
         <Button
           className={twMerge(
-            "sm:hidden",
+            "md:hidden",
             props.pathname === "/across-plus"
               ? "border-teal-100/[.05] bg-teal-100/[.05] text-teal-100"
               : props.pathname === "/across-settlement"

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

@@ -0,0 +1,29 @@
+import { SVGProps } from "react";
+
+export function ArrowRightIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M3.33203 8H12.6654"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8 3.33334L12.6667 8.00001L8 12.6667"
+        stroke="#2D2E33"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/app/_components/icons/document.tsx

@@ -13,13 +13,13 @@ export function DocumentIcon(props: SVGProps<SVGSVGElement>) {
       <path
         d="M12.5007 1.66675H5.00065C4.55862 1.66675 4.1347 1.84234 3.82214 2.1549C3.50958 2.46746 3.33398 2.89139 3.33398 3.33341V16.6667C3.33398 17.1088 3.50958 17.5327 3.82214 17.8453C4.1347 18.1578 4.55862 18.3334 5.00065 18.3334H15.0007C15.4427 18.3334 15.8666 18.1578 16.1792 17.8453C16.4917 17.5327 16.6673 17.1088 16.6673 16.6667V5.83341L12.5007 1.66675Z"
         stroke="white"
-        stroke-linecap="round"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
       <path
         d="M12 2V4.66667C12 5.02029 12.1756 5.35943 12.4882 5.60948C12.8007 5.85952 13.2246 6 13.6667 6H16"
         stroke="white"
-        stroke-linecap="round"
+        strokeLinecap="round"
         strokeLinejoin="round"
       />
     </svg>

src/app/_components/icons/index.tsx

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

src/app/_components/text.tsx

@@ -0,0 +1,36 @@
+import { ComponentProps } from "react";
+import { twMerge } from "tailwind-merge";
+
+type TextVariant =
+  | "cap-case"
+  | "heading-1"
+  | "heading-2"
+  | "heading-3"
+  | "heading-4"
+  | "body-nums";
+
+type Props = ComponentProps<"div"> & {
+  variant: TextVariant;
+};
+
+const textBaseClasses = {
+  "cap-case":
+    "text-medium text-xs uppercase lining-nums tabular-nums tracking-wide-4 sm:text-md",
+  "heading-1":
+    "text-heading-3 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-2 md:text-heading-1",
+  "heading-2":
+    "text-heading-3 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-2",
+  "heading-3":
+    "text-heading-3 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-3",
+  "heading-4":
+    "text-heading-4 font-lighter lining-nums tabular-nums tracking-tight-5 sm:text-heading-4",
+  "body-nums": "text-md lining-nums tabular-nums sm:text-lg",
+};
+
+export function Text({ variant, className, children, ...props }: Props) {
+  return (
+    <div className={twMerge(textBaseClasses[variant], className)} {...props}>
+      {children}
+    </div>
+  );
+}

tailwind.config.ts

@@ -53,6 +53,22 @@ const config: Config = {
       "wide-4": "0.12rem", // 1.92px
     },
     extend: {
+      container: {
+        screens: {
+          xl: "1024px",
+          "2xl": "1024px",
+        },
+      },
+      screens: {
+        sm: "760px",
+        md: "900px",
+      },
+      fontWeight: {
+        lighter: "275",
+      },
+      maxWidth: {
+        "100": "400px",
+      },
       animation: {
         scroll: "scroll var(--iteration-time) linear infinite",
       },