feat(home): technology section (#8)

* feat: partners carousel

* fixup

* feat(home): hero section

* refactor: cleaner file structure

* fix: formatting

* fixup

* fixup

* feat: add reusable text component

* rename carousel to ticker

* fix: format

* feat(home): technology section

* fixup

* fixup

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

@@ -11,7 +11,7 @@ export function HeroSection() {
     <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" />
+          <Image src={landingHeroSrc} alt="Across protocol diagram" priority={true} />
         </div>
         <div className="flex flex-1 flex-col gap-6">
           <Text variant="heading-1" className="text-center md:text-left">

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

@@ -0,0 +1,56 @@
+import { ChatIcon, FeatherIcon, BlocksDiagonalIcon } from "../../_components/icons";
+import { Text } from "../../_components/text";
+import landingTechnologySrc from "../../_assets/landing-2.png";
+import landingTechnologyMobileSrc from "../../_assets/landing-2-mobile.png";
+
+const sections = [
+  {
+    Icon: ChatIcon,
+    title: "User-Centric",
+    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.",
+  },
+  {
+    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.",
+  },
+  {
+    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.",
+  },
+];
+
+export function TechnologySection() {
+  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-aqua-100 md:text-center">
+          the technology
+        </Text>
+        <Text variant="heading-2" className="capitalize text-light-200 md:text-center">
+          How intents work
+        </Text>
+      </div>
+      <div className="grid grid-cols-1 gap-12 sm:grid-cols-2 sm:gap-y-16 md:grid-cols-3">
+        {sections.map((section) => (
+          <div key={section.title}>
+            <section.Icon className="mb-8 h-14 w-14" />
+            <Text variant="heading-4" className="mb-4 text-light-200">
+              {section.title}
+            </Text>
+            <Text className="text-light-300">{section.body}</Text>
+          </div>
+        ))}
+      </div>
+      <div className="flex flex-col items-center">
+        <div className="flex max-w-100 flex-1 sm:max-w-lg md:max-w-full">
+          <picture>
+            <source srcSet={landingTechnologySrc.src} media="(min-width: 760px)" />
+            <img src={landingTechnologyMobileSrc.src} alt="MDN" />
+          </picture>
+        </div>
+      </div>
+    </section>
+  );
+}

src/app/(routes)/page.tsx

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

src/app/_components/footer.tsx

@@ -135,7 +135,7 @@ function FooterBoxItem(props: {
       <IconBox className={twMerge("h-10 w-10", props.item.iconContainerClassName)}>
         <props.item.Icon className={props.item.iconClassName} />
       </IconBox>
-      <div className=" text-sm lining-nums tabular-nums">{props.item.label}</div>
+      <div className="text-sm lining-nums tabular-nums">{props.item.label}</div>
     </div>
   );
 }

src/app/_components/text.tsx

@@ -1,7 +1,8 @@
 import { ComponentProps } from "react";
-import { twMerge } from "tailwind-merge";
+import { twJoin } from "tailwind-merge";
 
 type TextVariant =
+  | "body"
   | "cap-case"
   | "heading-1"
   | "heading-2"
@@ -10,10 +11,11 @@ type TextVariant =
   | "body-nums";
 
 type Props = ComponentProps<"div"> & {
-  variant: TextVariant;
+  variant?: TextVariant;
 };
 
 const textBaseClasses = {
+  body: "text-md",
   "cap-case":
     "text-medium text-xs uppercase lining-nums tabular-nums tracking-wide-4 sm:text-md",
   "heading-1":
@@ -27,9 +29,9 @@ const textBaseClasses = {
   "body-nums": "text-md lining-nums tabular-nums sm:text-lg",
 };
 
-export function Text({ variant, className, children, ...props }: Props) {
+export function Text({ variant = "body", className, children, ...props }: Props) {
   return (
-    <div className={twMerge(textBaseClasses[variant], className)} {...props}>
+    <div className={twJoin(textBaseClasses[variant], className)} {...props}>
       {children}
     </div>
   );