fix(plus): design tweaks and updates (#21)

* fix(ticker): simplify + correct values * fixup * fix(home): design, copy tweaks + subscribe section * fix(plus): design tweaks and updates * fixup * fixup
across-protocol · Feb 20, 2024 · d5d6af0 · d5d6af0
1 parent ca6ec4f
commit d5d6af0
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 58 deletions.
diff --git a/src/app/(routes)/across-plus/_components/features-section.tsx b/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"

diff --git a/src/app/(routes)/across-plus/_components/hero-section.tsx b/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} />

diff --git a/src/app/(routes)/across-plus/_components/integrated-partners-section.tsx b/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">

diff --git a/src/app/(routes)/across-plus/_components/use-cases-section.tsx b/src/app/(routes)/across-plus/_components/use-cases-section.tsx
@@ -18,11 +18,11 @@ import addLiquidityMobileImage from "@/app/_assets/plus-use-case-add-liquidity-m
  *    enter="transition transform ease-linear duration-[5000ms]"
  * ```
  */
-const sliderInterval = 5000;
+const sliderInterval = 15000;
 
 const useCases = [
   {
-    tabButtonLabel: "Add Liquidity",
+    tabButtonLabel: "Bootstrap Liquidity",
     title: "Bootstrap Liquidity",
     body: "Secure TVL and consolidate capital on your protocol's home chain using Across+. Bridge + LP bundled functions allow protocols to sidestep elaborate multichain deployments and pull capital rather than chase it.",
     learnMoreLink: "https://docs.across.to/additional-info/faq",
@@ -56,29 +56,29 @@ const useCases = [
     },
   },
   {
-    tabButtonLabel: "Long Perpetual",
-    title: "Trade from any chain",
-    body: "Increase dapp trading volume by enabling users to enter into a perp position from any chain. Implementing cross-chain bridge hooks for perpetuals enhances UX, streamlining dapp-level interactions. Reduce user steps, decrease transaction time and increase user engagement.",
+    tabButtonLabel: "Lend",
+    title: "Attract Users",
+    body: "With Across+ lending protocols can attract liquidity and users from any chain. Increase TVL and expand user reach by accepting deposits from any chain to any market.",
     learnMoreLink: "https://docs.across.to/additional-info/faq",
     listTitle: "value props",
     listItems: (
       <>
         <li>
           <Text variant="body-nums-sm" className="text-light-200">
-            <span className="text-teal-100">Increase cross-chain trading volume</span>{" "}
-            with bridge + long perp bundles
+            <span className="text-teal-100">Increase TVL</span> with bridge + lend bundles
+            for users on any chain
           </Text>
         </li>
         <li>
           <Text variant="body-nums-sm" className="text-light-200">
-            <span className="text-teal-100">Expand bundles to include</span> destination
-            chain gas token functions
+            <span className="text-teal-100">Expand user reach</span> by enabling users to
+            supply from their home chain
           </Text>
         </li>
         <li>
           <Text variant="body-nums-sm" className="text-light-200">
-            <span className="text-teal-100">Upgrade trading UX</span> by significantly
-            simplifying user journies
+            <span className="text-teal-100">Consolidate liquidity</span> by pulling
+            liquidity to the protocol&apos;s native chain(s)
           </Text>
         </li>
       </>
@@ -191,20 +191,26 @@ function UseCaseTab(props: { tabLabel: string; showAnimation?: boolean }) {
             {props.tabLabel}
           </button>
           <div className="mx-2 h-[1px] overflow-x-hidden rounded-bl-2xl">
-            <Transition
-              appear={true}
-              show={selected && Boolean(props.showAnimation)}
-              // NOTE: `duration-[${sliderInterval}ms]` needs to be in sync with value of
-              // variable `sliderInterval`.
-              enter="transition transform ease-linear duration-[5000ms]"
-              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 ? (
+              props.showAnimation ? (
+                <Transition
+                  appear={true}
+                  show={true}
+                  // 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>
+              ) : (
+                <div className={twMerge("h-[1px] w-full bg-teal-100")} />
+              )
+            ) : null}
           </div>
         </div>
       )}
@@ -227,12 +233,12 @@ function UseCasePanel({
         <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">
             <div className="flex flex-col gap-8 md:flex-row">

diff --git a/src/app/(routes)/across-plus/page.tsx b/src/app/(routes)/across-plus/page.tsx
@@ -6,6 +6,7 @@ import { UseCasesSection } from "./_components/use-cases-section";
 import { SupportedChainsSection } from "@/app/_components/supported-chains-section";
 import { PlusGetStartedSection } from "./_components/get-started-section";
 import { IntegratedPartnersSection } from "./_components/integrated-partners-section";
+import { SubscribeSection } from "@/app/_components/subscribe-section";
 
 export const metadata: Metadata = {
   title: "Across Plus",
@@ -21,6 +22,7 @@ export default function PlusLanding() {
       <SupportedChainsSection variant="teal" />
       <IntegratedPartnersSection />
       <PlusGetStartedSection />
+      <SubscribeSection variant="teal" />
     </main>
   );
 }
diff --git a/src/app/(routes)/page.tsx b/src/app/(routes)/page.tsx
@@ -18,7 +18,7 @@ export default function Home() {
       <ProductsSection />
       <TechnologySection />
       <StatsSection />
-      <SubscribeSection />
+      <SubscribeSection variant="aqua" />
     </main>
   );
 }
diff --git a/src/app/_components/subscribe-section.tsx b/src/app/_components/subscribe-section.tsx
@@ -3,8 +3,18 @@
 import { useState } from "react";
 
 import { Text } from "./text";
+import { twMerge } from "../_lib/tw-merge";
 
-export function SubscribeSection() {
+const variantToClassNames = {
+  aqua: {
+    buttonClassName: "bg-aqua-100/[.05] text-aqua-100",
+  },
+  teal: {
+    buttonClassName: "bg-teal-100/[.05] text-teal-100",
+  },
+};
+
+export function SubscribeSection(props: { variant: "aqua" | "teal" }) {
   const [email, setEmail] = useState("");
   const [status, setStatus] = useState<"idle" | "loading" | "success" | "error">("idle");
   const [responseMsg, setResponseMsg] = useState("");
@@ -51,7 +61,10 @@ export function SubscribeSection() {
         />
         <button
           type="submit"
-          className="h-10 w-[112px] rounded-full bg-aqua-100/[.05] px-6 text-aqua-100 shadow hover:opacity-75"
+          className={twMerge(
+            "h-10 w-[112px] rounded-full px-6  shadow hover:opacity-75",
+            variantToClassNames[props.variant].buttonClassName,
+          )}
           disabled={status === "loading"}
         >
           <Text variant="cap-case-sm">Sign up</Text>