fix(plus): design tweaks and updates

package.json

@@ -16,7 +16,8 @@
     "numeral": "^2.0.6",
     "react": "^18",
     "react-dom": "^18",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@types/node": "^20",

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

@@ -1,10 +1,14 @@
 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";
+import { PartnersTicker } from "@/app/_components/partners-ticker";
+import { Hero } from "@/app/_components/hero";
+import { Text } from "@/app/_components/text";
+import { ArrowRightIcon } from "@/app/_components/icons/arrow-right";
+import landingHeroSrc from "@/app/_assets/landing-hero.png";
+import { INFORMATION_LINKS } from "@/app/_constants";
+import { Button } from "@/app/_components/button";
+import { BridgeNowLink } from "@/app/_components/bridge-now-link";
+import { twMerge } from "@/app/_lib/tw-merge";
 
 export function HeroSection() {
   return (
@@ -14,7 +18,10 @@ export function HeroSection() {
           <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">
+          <Text
+            variant="heading-1"
+            className="text-center sm:tracking-tight-1 md:text-left"
+          >
             <span className="text-aqua-100">Interoperability</span>
             <br />
             <span className="text-light-100">Powered By</span>{" "}
@@ -25,6 +32,15 @@ export function HeroSection() {
             A new paradigm in cross-chain experiences, seamlessly connecting users with
             applications.
           </Text>
+          <BridgeNowLink>
+            <Button
+              className={twMerge(
+                "hidden border-aqua-100 bg-aqua-100/[.05] text-aqua-100 transition md:block",
+              )}
+            >
+              <Text variant="cap-case-sm">Bridge now</Text>
+            </Button>
+          </BridgeNowLink>
           <a
             className="flex cursor-pointer flex-row items-center justify-center gap-2 text-aqua-100 md:justify-start"
             href={INFORMATION_LINKS.docs.href}
@@ -38,6 +54,7 @@ export function HeroSection() {
           </a>
         </div>
       </div>
+      <PartnersTicker />
     </Hero>
   );
 }

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

@@ -18,8 +18,8 @@ const products = [
     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",
+      "bg-gradient-to-b from-aqua-100/[.05] to-transparent",
+      "md:group-hover:bg-gradient-to-b md:group-hover:from-aqua-100/[.05] md:group-hover:to-transparent",
     ],
   },
   {
@@ -29,8 +29,8 @@ const products = [
     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",
+      "bg-gradient-to-b from-teal-100/[.05] to-transparent",
+      "md:group-hover:bg-gradient-to-b md:group-hover:from-teal-100/[.05] md:group-hover:to-transparent",
     ],
   },
   {
@@ -40,23 +40,23 @@ const products = [
     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",
+      "bg-gradient-to-b from-purple-100/[.05] to-transparent",
+      "md:group-hover:bg-gradient-to-b 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">
+    <section className="container mx-auto flex flex-col gap-16 px-4 md:gap-24">
+      <div className="flex flex-col gap-3 sm:gap-4 md:items-center">
+        <Text variant="cap-case" className="text-aqua-100">
           Solutions
         </Text>
         <Text variant="heading-2" className="capitalize text-light-200">
           Across Products
         </Text>
-        <Text variant="body-nums">
+        <Text variant="body-nums" className="md:text-center">
           Fastest and lowest-cost bridging for end-users.
           <br />
           Streamlined interoperability for developers.

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

@@ -8,7 +8,10 @@ export function StatsSection() {
         <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">
+        <Text
+          variant="heading-2"
+          className="text-center capitalize tracking-tight-2 text-light-200"
+        >
           Production ready <br />
           Empirically Proven
         </Text>

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

@@ -1,18 +1,18 @@
 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";
+import landingTechnologySrc from "../../_assets/landing-tech.png";
+import landingTechnologyMobileSrc from "../../_assets/landing-tech-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.",
+    body: "Intents replace explicit execution steps with user outcomes, allowing relayers to compete to provide the optimal execution path for the user. Cross-chain intents are a cross-chain limit order plus an action to execute.",
   },
   {
     Icon: FeatherIcon,
     title: "Elegant Abstraction",
-    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.",
+    body: "Unlike complex, trusted message passing solutions, Across connects users to dapps via intents, not just blockchains to other blockchains. Developers only need to embed a standard order in protocol actions to create seamless cross-chain experiences.",
   },
   {
     Icon: BlocksDiagonalIcon,
@@ -22,7 +22,7 @@ const sections = [
         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>Network of competitive relayers</li>
           <li>Settlement layer to escrow user input funds, verify, and repay relayers</li>
         </ol>
       </>
@@ -53,7 +53,7 @@ export function TechnologySection() {
         ))}
       </div>
       <div className="flex flex-col items-center">
-        <div className="flex max-w-100 flex-1 sm:max-w-lg md:max-w-full">
+        <div className="flex max-w-100 flex-1 sm:max-w-lg md:max-w-[638px]">
           <picture>
             <source srcSet={landingTechnologySrc.src} media="(min-width: 760px)" />
             <img src={landingTechnologyMobileSrc.src} alt="MDN" />

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

@@ -1,6 +1,7 @@
 import Image from "next/image";
 
 import { Hero } from "@/app/_components/hero";
+import { SupportedChainsTicker } from "@/app/_components/supported-chains-ticker";
 import { Text } from "@/app/_components/text";
 import { BridgeNowLink } from "@/app/_components/bridge-now-link";
 import { ArrowRightIcon } from "@/app/_components/icons/arrow-right";
@@ -37,6 +38,7 @@ export function HeroSection() {
           </BridgeNowLink>
         </div>
       </div>
+      <SupportedChainsTicker />
     </Hero>
   );
 }

src/app/(routes)/across-newsletter/route.ts

@@ -0,0 +1,43 @@
+import { z } from "zod";
+
+export async function POST(request: Request) {
+  const body = await request.json();
+  const email = body.email;
+
+  const parsedEmail = z.string().email().safeParse(email);
+
+  if (!parsedEmail.success) {
+    return new Response("Invalid email address", {
+      status: 400,
+    });
+  }
+
+  const API_KEY = process.env.MAILCHIMP_API_KEY;
+  const API_SERVER = process.env.MAILCHIMP_API_SERVER;
+  const AUDIENCE_ID = process.env.MAILCHIMP_AUDIENCE_ID;
+
+  const response = await fetch(
+    `https://${API_SERVER}.api.mailchimp.com/3.0/lists/${AUDIENCE_ID}/members`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `api_key ${API_KEY}`,
+      },
+      body: JSON.stringify({
+        email_address: parsedEmail.data,
+        status: "subscribed",
+      }),
+    },
+  );
+
+  if (response.status == 200) {
+    return new Response("Successfully subscribed", {
+      status: 201,
+    });
+  }
+
+  return new Response("Something went wrong", {
+    status: 500,
+  });
+}

src/app/(routes)/across-plus/_components/features-section.tsx

@@ -52,8 +52,8 @@ export function FeaturesSection() {
           </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.
+              Visit our documentation page to learn more about the benefits of integrating
+              Across+.
             </Text>
             <a
               className="mt-4 flex cursor-pointer flex-row items-center gap-1"

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

@@ -8,7 +8,7 @@ import { INFORMATION_LINKS } from "@/app/_constants";
 
 export function HeroSection() {
   return (
-    <Hero title="trusted by top tier protocols">
+    <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} />

src/app/(routes)/across-plus/_components/integrated-partners-section.tsx

@@ -20,7 +20,7 @@ import onthisProfileSrc from "../_assets/onthis-profile.png";
  *    enter="transition transform ease-linear duration-[5000ms]"
  * ```
  */
-const sliderInterval = 15000;
+const sliderInterval = 20000;
 
 const partners = [
   {
@@ -173,30 +173,36 @@ function IntegratedPartnerPanel({
       {({ selected }) => (
         <>
           <div className="mb-8 h-[1px] overflow-x-hidden rounded-bl-2xl">
-            <Transition
-              appear={true}
-              show={showAnimation}
-              // NOTE: `duration-[${sliderInterval}ms]` needs to be in sync with value of
-              // variable `sliderInterval`.
-              enter="transition transform ease-linear duration-[15000ms]"
-              enterFrom="translate-x-0"
-              enterTo="-translate-x-full"
-              leave="transition duration-[0ms] transform"
-              leaveFrom="-translate-x-full"
-              leaveTo="-translate-x-full"
-            >
-              <div className={twMerge("h-[1px] w-full bg-teal-100")} />
-            </Transition>
+            {selected ? (
+              showAnimation ? (
+                <Transition
+                  appear={true}
+                  show={showAnimation}
+                  // NOTE: `duration-[${sliderInterval}ms]` needs to be in sync with value of
+                  // variable `sliderInterval`.
+                  enter="transition transform ease-linear duration-[20000ms]"
+                  enterFrom="translate-x-0"
+                  enterTo="-translate-x-full"
+                  leave="transition duration-[0ms] transform"
+                  leaveFrom="-translate-x-full"
+                  leaveTo="-translate-x-full"
+                >
+                  <div className={twMerge("h-[1px] w-full bg-teal-100")} />
+                </Transition>
+              ) : (
+                <div className={twMerge("h-[1px] w-full bg-teal-100")} />
+              )
+            ) : null}
           </div>
           <Transition
             appear={true}
             show={selected}
-            enter="transition-opacity duration-500"
-            enterFrom="opacity-0"
-            enterTo="opacity-100"
-            leave="transition-opacity duration-500"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
+            enter="transition duration-500"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition duration-500"
+            leaveFrom="translate-x-0"
+            leaveTo="-translate-x-full"
           >
             <div className="flex flex-col gap-8 md:flex-row">
               <div className="flex flex-1 flex-col gap-8">