diff --git a/next.config.mjs b/next.config.mjs index 4678774..cd0f948 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,14 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "pbs.twimg.com", + pathname: "**", + }, + ], + }, +}; export default nextConfig; diff --git a/src/app/(routes)/across-bridge/_components/bridge-now-section.tsx b/src/app/(routes)/across-bridge/_components/bridge-now-section.tsx new file mode 100644 index 0000000..aa07de8 --- /dev/null +++ b/src/app/(routes)/across-bridge/_components/bridge-now-section.tsx @@ -0,0 +1,31 @@ +import Image from "next/image"; + +import { Text } from "@/app/_components/text"; +import { BridgeNowLink } from "@/app/_components/bridge-now-link"; +import { Button } from "@/app/_components/button"; +import bridgeHeroImage from "@/app/_assets/bridge-hero.png"; + +export function BridgeNowSection() { + return ( +
+ screenshot of bridge ui + + experience the bridge + +
+ + + +
+
+ ); +} diff --git a/src/app/(routes)/across-bridge/_components/testimonials-section.tsx b/src/app/(routes)/across-bridge/_components/testimonials-section.tsx new file mode 100644 index 0000000..b65f795 --- /dev/null +++ b/src/app/(routes)/across-bridge/_components/testimonials-section.tsx @@ -0,0 +1,273 @@ +"use client"; + +import Image from "next/image"; +import { useState } from "react"; + +import { TwitterIcon, VerifiedCheckmarkIcon } from "@/app/_components/icons"; +import { Text } from "@/app/_components/text"; +import { twMerge } from "@/app/_lib/tw-merge"; + +const mainTweet = { + title: ( + <> + Lowest fees, Zero slippage, +
+ professional team. + + ), + body: ( + <> + 'I've tried every L2 bridge out there. @AcrossProtocol is undoubtedly the + best one. +
+
+ Lowest fees, 0 slippage, professional team. Very under-appreciated, use it.' + + ), + username: "@aradtski", +}; + +const tweets = { + firstColumn: [ + { + isVerified: true, + displayName: "pray.eth", + username: "@pray_eth", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1692052698307153920/WiHp_6vw_200x200.jpg", + tweet: ( + <> + Yeah, I bridge a lot, noticed @BungeeExchange routes were giving me + @AcrossProtocol most of the time, so just started to use it as my default bridge + (minimizing risk is my primary concern when bridging). +
+
+ Transfers are incredibly fast and cheap. Great work! + + ), + tweetUrl: "https://x.com/pray_eth/status/1679328596261842944?s=20", + }, + { + isVerified: false, + displayName: "David Goose", + username: "@davidjgoosey", + tweetUrl: "https://x.com/davidjgoosey/status/1649207665518690304?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1594113194397687816/l2RGYB8y_200x200.jpg", + tweet: ( + <> + Across has one of the best UX of the bridges I've tried to date, keep up + the good work + + ), + }, + { + isVerified: true, + displayName: "Scott BurkΞ", + username: "@scottburke777", + tweetUrl: "https://x.com/scottburke777/status/1656557680012476416?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1618111203586314240/obBfZyuv_200x200.jpg", + tweet: ( + <> + Tried a few Arbitrum bridges over the last few months, just tried + @AcrossProtocol and it was the fastest yet, it was like 1 min Eth -> Arb + + ), + }, + { + isVerified: true, + displayName: "kidponga.eth", + username: "@kidponga", + tweetUrl: "https://x.com/Infinity_1001/status/1749523278228521112?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1692052698307153920/WiHp_6vw_200x200.jpg", + tweet: ( + <> + What's the best bridge in crypto? +
+
A bridge that focuses on what users want the most: +
- speed +
- cost +
- trust +
+
+ @AcrossProtocol $ACX + + ), + }, + { + isVerified: true, + displayName: "Kisuke Urahara", + username: "@Ivan90403291", + tweetUrl: "https://x.com/Ivan90403291/status/1692120646602391671?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1255439408100265984/JjHosYHZ_200x200.jpg", + tweet: <>@AcrossProtocol is 100% the best bridge, + }, + ], + secondColumn: [ + { + isVerified: false, + displayName: "maxlomu", + username: "@maxlomu", + tweetUrl: "https://x.com/maxlomu/status/1675975309835882502?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1620485487466094602/oAWikXJe_200x200.jpg", + tweet: ( + <> + Honestly well done guys. +
+
+ Not only Across liquidity model is very capital efficient (so you can be + cheaper), but the architecture (contrary to L0) is actually trust-minimized. + + ), + }, + { + isVerified: true, + displayName: "Andy", + username: "@ayyyeandy", + tweetUrl: "https://x.com/ayyyeandy/status/1726985723285553249?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1687521808331702272/Ky0QmeqD_200x200.jpg", + tweet: ( + <> + Lol. One second to bridge from @arbitrum to @zksync using @AcrossProtocol +
+
+ Across bridge ui + + ), + }, + { + isVerified: false, + displayName: "Infinity", + username: "@Infinity_1001", + // TODO: update tweet url + tweetUrl: "https://x.com/kidponga/status/1750013537379111135?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1687521808331702272/Ky0QmeqD_200x200.jpg", + tweet: ( + <> + Across is without a doubt the best bridge you can use today. +
+
+ It is the fastest, most efficient and safest +
+
+ Not because I say so, the statistics support it + + ), + }, + { + isVerified: false, + displayName: "jaeger 狼", + username: "@carlshuu", + tweetUrl: "https://x.com/carlshuu/status/1742052941480255592?s=20", + profileImageUrl: + "https://pbs.twimg.com/profile_images/1737090443962413056/aHv5T66J_200x200.jpg", + tweet: ( + <> + @AcrossProtocol is so freaking good. It's insane how fast their bridge is. + + ), + }, + ], +}; + +export function TestimonialsSection() { + const [isExpanded, setIsExpanded] = useState(false); + return ( +
+
+
+ + across users say it all + + + "{mainTweet.title}" + + + {mainTweet.body} + +
+ {mainTweet.username} + +
+
+
+ {tweets.firstColumn.map((tweet, index) => ( + + ))} +
+
+ {tweets.secondColumn.map((tweet, index) => ( + + ))} +
+
+
+ {!isExpanded && ( +
+ )} +
+ {!isExpanded && ( +
+ +
+ )} +
+ ); +} + +function TweetCard({ tweet }: { tweet: (typeof tweets.firstColumn)[0] }) { + return ( + +
+
+
+ {`${tweet.displayName} +
+
+
+ + {tweet.displayName} + + {tweet.isVerified && } +
+ + {tweet.username} + +
+
+ {tweet.tweet} +
+ + ); +} diff --git a/src/app/(routes)/across-bridge/page.tsx b/src/app/(routes)/across-bridge/page.tsx index 4e24a8d..fbf8d7e 100644 --- a/src/app/(routes)/across-bridge/page.tsx +++ b/src/app/(routes)/across-bridge/page.tsx @@ -2,6 +2,8 @@ import { Metadata } from "next"; import { HeroSection } from "./_components/hero-section"; import { FeaturesSection } from "./_components/features-section"; +import { TestimonialsSection } from "./_components/testimonials-section"; +import { BridgeNowSection } from "./_components/bridge-now-section"; export const metadata: Metadata = { title: "Across Bridge", @@ -13,6 +15,8 @@ export default function BridgeLanding() {
+ +
); } diff --git a/src/app/_components/icons/index.tsx b/src/app/_components/icons/index.tsx index a6b6cb7..9fa07e2 100644 --- a/src/app/_components/icons/index.tsx +++ b/src/app/_components/icons/index.tsx @@ -13,6 +13,7 @@ export { Partner1Icon } from "./partner-1"; export { ArrowRightIcon } from "./arrow-right"; export { ArrowUpRightIcon } from "./arrow-up-right"; export { ArrowUpRightThickIcon } from "./arrow-up-right-thick"; +export { VerifiedCheckmarkIcon } from "./verified-checkmark"; // Gradient icons export { ArrowUpIcon } from "./gradient/arrow-up"; diff --git a/src/app/_components/icons/twitter.tsx b/src/app/_components/icons/twitter.tsx index b073d48..97dd59d 100644 --- a/src/app/_components/icons/twitter.tsx +++ b/src/app/_components/icons/twitter.tsx @@ -1,6 +1,8 @@ import { SVGProps } from "react"; -export function TwitterIcon(props: SVGProps) { +import { twMerge } from "@/app/_lib/tw-merge"; + +export function TwitterIcon({ className, ...props }: SVGProps) { return ( ) { viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" + className={twMerge("fill-light-100", className)} {...props} > - + diff --git a/src/app/_components/icons/verified-checkmark.tsx b/src/app/_components/icons/verified-checkmark.tsx new file mode 100644 index 0000000..85f59b6 --- /dev/null +++ b/src/app/_components/icons/verified-checkmark.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from "react"; + +export function VerifiedCheckmarkIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/src/app/_components/supported-chains-section.tsx b/src/app/_components/supported-chains-section.tsx index 8f92b36..a197103 100644 --- a/src/app/_components/supported-chains-section.tsx +++ b/src/app/_components/supported-chains-section.tsx @@ -21,7 +21,7 @@ const chains = [ { label: "Polygon Network", Icon: PolygonIcon, - iconClassName: "h-8 w-9 md:h-10 md:w-10", + iconClassName: "h-8 w-8 md:h-10 md:w-10", }, { label: "Arbitrum One",