diff --git a/src/app/(routes)/across-plus/_assets/onthis-logo.png b/src/app/(routes)/across-plus/_assets/onthis-logo.png new file mode 100644 index 0000000..bffd896 Binary files /dev/null and b/src/app/(routes)/across-plus/_assets/onthis-logo.png differ diff --git a/src/app/(routes)/across-plus/_assets/onthis-profile.png b/src/app/(routes)/across-plus/_assets/onthis-profile.png new file mode 100644 index 0000000..987274b Binary files /dev/null and b/src/app/(routes)/across-plus/_assets/onthis-profile.png differ diff --git a/src/app/(routes)/across-plus/_assets/tele-ordinal-logo.png b/src/app/(routes)/across-plus/_assets/tele-ordinal-logo.png new file mode 100644 index 0000000..14b5e88 Binary files /dev/null and b/src/app/(routes)/across-plus/_assets/tele-ordinal-logo.png differ diff --git a/src/app/(routes)/across-plus/_assets/tele-ordinal-profile.png b/src/app/(routes)/across-plus/_assets/tele-ordinal-profile.png new file mode 100644 index 0000000..78e685a Binary files /dev/null and b/src/app/(routes)/across-plus/_assets/tele-ordinal-profile.png differ diff --git a/src/app/(routes)/across-plus/_components/integrated-partners-section.tsx b/src/app/(routes)/across-plus/_components/integrated-partners-section.tsx new file mode 100644 index 0000000..967475d --- /dev/null +++ b/src/app/(routes)/across-plus/_components/integrated-partners-section.tsx @@ -0,0 +1,228 @@ +"use client"; + +import { Fragment, useEffect, useState } from "react"; +import { Tab, Transition } from "@headlessui/react"; +import Image from "next/image"; + +import { twMerge } from "@/app/_lib/tw-merge"; +import { ArrowRightIcon } from "@/app/_components/icons"; +import { Text } from "@/app/_components/text"; + +import teleOrdinalLogoSrc from "../_assets/tele-ordinal-logo.png"; +import teleOrdinalProfileSrc from "../_assets/tele-ordinal-profile.png"; +import onthisLogoSrc from "../_assets/onthis-logo.png"; +import onthisProfileSrc from "../_assets/onthis-profile.png"; + +/** + * NOTE: This needs to be in sync with the `duration-[sliderInterval]` in the `` component. + * ``` + * + TeleOrdinal has integrated Across+ to facilitate cross-chain bidding on Ordinals + (Bitcoin NFTs). The feature allows users to participate in Ordinal auctions via + TeleOrdinal using stablecoins from their desired chains. + + ), + quote: ( + <> + We chose Across+ to expand TeleOrdinal, our cross-chain Ordinals marketplace, to + new EVMs for its fast and cost-effective bridging. The solution made integration + remarkably straightforward, enabling seamless token transfers and cross-chain + contract calls. + + ), + name: "Mahyar Daneshpajooh", + title: "Founder", + }, + { + logo: onthisLogoSrc, + profile: onthisProfileSrc, + partner: "Onthis", + description: ( + <> + The onthis product, Shortcuts, sends ETH to human-readable contracts to bridge, + swap, stake, mint, and more, directly from a user’s wallet. Across+ powers these + cross-chain bundled transactions. + + ), + quote: ( + <> + We selected Across+ because it enables users to initiate specific actions on the + destination chain immediately after completing their deposit. Additionally, Across + has fast and dependable bridging times, underpinned by the security and efficiency + of UMA's optimistic oracle. This integration ensures a seamless and secure + transfer experience. + + ), + name: "Igor Yuzo", + title: "Founder", + }, +]; + +export function IntegratedPartnersSection() { + const [currentSlideIndex, setCurrentSlideIndex] = useState(0); + const [stopAutoSlide, setStopAutoSlide] = useState(false); + + useEffect(() => { + if (stopAutoSlide) { + return; + } + + const interval = setInterval(() => { + setCurrentSlideIndex((prev) => (prev + 1) % partners.length); + }, sliderInterval); + + return () => clearInterval(interval); + }, [stopAutoSlide]); + + const nextSlideIndex = (currentSlideIndex + 1) % partners.length; + + return ( +
+
+ + how they use across+ + + + Integrated partners + +
+ + + {({ selectedIndex }) => ( + <> + + {partners.map((partner, index) => ( + setStopAutoSlide(true)} + onMouseLeave={() => setStopAutoSlide(false)} + /> + ))} + +
+ + {partners.map((partner, index) => ( + + ))} + + +
+ + )} + +
+ ); +} + +function PartnerTab() { + return ( + + {({ selected }) => ( +
+ )} + + ); +} + +function IntegratedPartnerPanel({ + partner, + showAnimation, + onMouseEnter, + onMouseLeave, +}: { + partner: (typeof partners)[0]; + showAnimation: boolean; + onMouseEnter?: () => void; + onMouseLeave?: () => void; +}) { + return ( + + {({ selected }) => ( + <> +
+ +
+ +
+ +
+
+ {`integrated + {partner.description} +
+
+ "{partner.quote}" +
+ {`integrated +
+ {partner.name} + {partner.title} +
+
+
+
+ + + )} + + ); +} diff --git a/src/app/(routes)/across-plus/page.tsx b/src/app/(routes)/across-plus/page.tsx index 3e2e7c8..3f8ed11 100644 --- a/src/app/(routes)/across-plus/page.tsx +++ b/src/app/(routes)/across-plus/page.tsx @@ -5,6 +5,7 @@ import { FeaturesSection } from "./_components/features-section"; 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"; export const metadata: Metadata = { title: "Across Plus", @@ -18,6 +19,7 @@ export default function PlusLanding() { + );