From d5d6af03ab7eb7998c690e473ee83ba77e69d56e Mon Sep 17 00:00:00 2001 From: Dong-Ha Kim Date: Tue, 20 Feb 2024 17:28:43 +0100 Subject: [PATCH] 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 --- .../_components/features-section.tsx | 4 +- .../across-plus/_components/hero-section.tsx | 2 +- .../integrated-partners-section.tsx | 48 +++++++------ .../_components/use-cases-section.tsx | 68 ++++++++++--------- src/app/(routes)/across-plus/page.tsx | 2 + src/app/(routes)/page.tsx | 2 +- src/app/_components/subscribe-section.tsx | 17 ++++- 7 files changed, 85 insertions(+), 58 deletions(-) diff --git a/src/app/(routes)/across-plus/_components/features-section.tsx b/src/app/(routes)/across-plus/_components/features-section.tsx index 017767c..6285720 100644 --- 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() {
- Visit the Across+ documentation page to learn the ins and outs of how - we've built the system. + Visit our documentation page to learn more about the benefits of integrating + Across+. +
Across plus graphic diff --git a/src/app/(routes)/across-plus/_components/integrated-partners-section.tsx b/src/app/(routes)/across-plus/_components/integrated-partners-section.tsx index 967475d..2502a41 100644 --- 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 }) => ( <>
- -
- + {selected ? ( + showAnimation ? ( + +
+ + ) : ( +
+ ) + ) : null}
diff --git a/src/app/(routes)/across-plus/_components/use-cases-section.tsx b/src/app/(routes)/across-plus/_components/use-cases-section.tsx index 1614289..cea462a 100644 --- 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: ( <>
  • - Increase cross-chain trading volume{" "} - with bridge + long perp bundles + Increase TVL with bridge + lend bundles + for users on any chain
  • - Expand bundles to include destination - chain gas token functions + Expand user reach by enabling users to + supply from their home chain
  • - Upgrade trading UX by significantly - simplifying user journies + Consolidate liquidity by pulling + liquidity to the protocol's native chain(s)
    • @@ -191,20 +191,26 @@ function UseCaseTab(props: { tabLabel: string; showAnimation?: boolean }) { {props.tabLabel}
    - -
    - + {selected ? ( + props.showAnimation ? ( + +
    + + ) : ( +
    + ) + ) : null}
    )} @@ -227,12 +233,12 @@ function UseCasePanel({
    diff --git a/src/app/(routes)/across-plus/page.tsx b/src/app/(routes)/across-plus/page.tsx index 3f8ed11..b6a25f9 100644 --- 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() { + ); } diff --git a/src/app/(routes)/page.tsx b/src/app/(routes)/page.tsx index f3afeae..75aab25 100644 --- a/src/app/(routes)/page.tsx +++ b/src/app/(routes)/page.tsx @@ -18,7 +18,7 @@ export default function Home() { - + ); } diff --git a/src/app/_components/subscribe-section.tsx b/src/app/_components/subscribe-section.tsx index 1438904..7f30b39 100644 --- 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() { />