From 5ee449fc9c3e7cd58024c5ac67263378c399600b Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 26 Sep 2025 23:58:10 +0000
Subject: [PATCH] Dashboard: Bridge page UI adjustments, add tracking (#8139)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the UI and functionality of the dashboard and bridge components. It includes style updates, component restructuring, and the addition of an event reporting function for link clicks.

### Detailed summary
- Added `bg-background` class to the `canvas` in `DarkVeil.tsx`.
- Wrapped `FaqSection` in a `div` for padding in `page.tsx`.
- Introduced `reportBridgePageLinkClick` function in `report.ts` for event tracking.
- Simplified structure of `faq-section.tsx`.
- Created `PillLink` component in `pill-link.tsx` for better link handling and event tracking.
- Updated `BridgePage` to include new `PillLink` components and adjusted layout with spacing elements.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- New Features
  - Added click tracking for Bridge page links.
  - Introduced pill-style external link buttons on the Bridge page.

- Refactor
  - Simplified FAQ markup to a single semantic section.
  - Extracted and reused a PillLink component across the Bridge page.
  - Reorganized Bridge page layout for clearer structure.

- Style
  - Adjusted vertical spacing and rhythm across Bridge, FAQ, and chain pages.
  - Made hero animation snappier.
  - Updated pill text color, background pattern accents, and veil canvas background.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 apps/dashboard/src/@/analytics/report.ts      | 14 +++++
 apps/dashboard/src/@/components/DarkVeil.tsx  |  2 +-
 .../src/@/components/blocks/faq-section.tsx   | 32 ++++++-----
 .../(chain)/[chain_id]/(chainPage)/page.tsx   |  4 +-
 .../bridge/components/client/pill-link.tsx    | 33 ++++++++++++
 apps/dashboard/src/app/bridge/page.tsx        | 54 ++++++++++---------
 6 files changed, 94 insertions(+), 45 deletions(-)
 create mode 100644 apps/dashboard/src/app/bridge/components/client/pill-link.tsx

diff --git a/apps/dashboard/src/@/analytics/report.ts b/apps/dashboard/src/@/analytics/report.ts
index 0712427ff9b..ee807b9ec54 100644
--- a/apps/dashboard/src/@/analytics/report.ts
+++ b/apps/dashboard/src/@/analytics/report.ts
@@ -691,3 +691,17 @@ export function reportProductFeedback(properties: {
     source: properties.source,
   });
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track conversions for the bridge page links
+ *
+ * ### Who is responsible for this event?
+ * @MananTank
+ *
+ */
+export function reportBridgePageLinkClick(params: {
+  linkType: "integrate-bridge" | "trending-tokens";
+}) {
+  posthog.capture("bridge page link clicked", params);
+}
diff --git a/apps/dashboard/src/@/components/DarkVeil.tsx b/apps/dashboard/src/@/components/DarkVeil.tsx
index e3fde0d79aa..caa6c98d1ce 100644
--- a/apps/dashboard/src/@/components/DarkVeil.tsx
+++ b/apps/dashboard/src/@/components/DarkVeil.tsx
@@ -188,5 +188,5 @@ export function DarkVeil({
     backgroundOpacity,
     patternLightness,
   ]);
-  return <canvas ref={ref} className="w-full h-full block" />;
+  return <canvas ref={ref} className="w-full h-full block bg-background" />;
 }
diff --git a/apps/dashboard/src/@/components/blocks/faq-section.tsx b/apps/dashboard/src/@/components/blocks/faq-section.tsx
index bbef1d4f1aa..9fd1fb6fc24 100644
--- a/apps/dashboard/src/@/components/blocks/faq-section.tsx
+++ b/apps/dashboard/src/@/components/blocks/faq-section.tsx
@@ -9,23 +9,21 @@ export function FaqSection(props: {
   faqs: Array<{ title: string; description: string }>;
 }) {
   return (
-    <div className="py-10">
-      <section className="">
-        <h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
-          Frequently asked questions
-        </h2>
-        <div className="flex flex-col">
-          {props.faqs.map((faq, faqIndex) => (
-            <FaqItem
-              key={faq.title}
-              title={faq.title}
-              description={faq.description}
-              className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
-            />
-          ))}
-        </div>
-      </section>
-    </div>
+    <section>
+      <h2 className="text-2xl md:text-3xl font-semibold mb-4 tracking-tight">
+        Frequently asked questions
+      </h2>
+      <div className="flex flex-col">
+        {props.faqs.map((faq, faqIndex) => (
+          <FaqItem
+            key={faq.title}
+            title={faq.title}
+            description={faq.description}
+            className={cn(faqIndex === props.faqs.length - 1 && "border-b-0")}
+          />
+        ))}
+      </div>
+    </section>
   );
 }
 
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx
index 4c492c32c9f..3ba73e13dd2 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx
@@ -67,7 +67,9 @@ export default async function Page(props: Props) {
       )}
 
       {chainSeo?.faqs && chainSeo.faqs.length > 0 && (
-        <FaqSection faqs={chainSeo.faqs} />
+        <div className="py-10">
+          <FaqSection faqs={chainSeo.faqs} />
+        </div>
       )}
     </div>
   );
diff --git a/apps/dashboard/src/app/bridge/components/client/pill-link.tsx b/apps/dashboard/src/app/bridge/components/client/pill-link.tsx
new file mode 100644
index 00000000000..111fa6e8a28
--- /dev/null
+++ b/apps/dashboard/src/app/bridge/components/client/pill-link.tsx
@@ -0,0 +1,33 @@
+"use client";
+import { ChevronRightIcon, DollarSignIcon, TrendingUpIcon } from "lucide-react";
+import Link from "next/link";
+import { reportBridgePageLinkClick } from "@/analytics/report";
+import { cn } from "@/lib/utils";
+
+export function PillLink(props: {
+  children: React.ReactNode;
+  href: string;
+  linkType: "integrate-bridge" | "trending-tokens";
+}) {
+  const Icon =
+    props.linkType === "integrate-bridge" ? DollarSignIcon : TrendingUpIcon;
+  return (
+    <Link
+      href={props.href}
+      target="_blank"
+      onClick={() => reportBridgePageLinkClick({ linkType: props.linkType })}
+      className={cn(
+        "shadow-sm text-center justify-center inline-flex items-center gap-4 text-foreground group",
+        "text-sm bg-card/50 backdrop-blur-lg border border-border/70",
+        "rounded-full px-4 py-2.5 transition-colors duration-300 text-pretty leading-5",
+        "hover:bg-pink-300/20 dark:hover:bg-pink-950/30 hover:text-foreground hover:border-pink-400 dark:hover:border-pink-800",
+      )}
+    >
+      <div className="flex items-center gap-2.5">
+        <Icon className="size-4 shrink-0 text-pink-600" />
+        {props.children}
+      </div>
+      <ChevronRightIcon className="size-4 shrink-0 text-muted-foreground/50 group-hover:translate-x-1 transition-all duration-300 group-hover:text-foreground" />
+    </Link>
+  );
+}
diff --git a/apps/dashboard/src/app/bridge/page.tsx b/apps/dashboard/src/app/bridge/page.tsx
index 660541cc24d..cac02859019 100644
--- a/apps/dashboard/src/app/bridge/page.tsx
+++ b/apps/dashboard/src/app/bridge/page.tsx
@@ -1,7 +1,5 @@
 import { cn } from "@workspace/ui/lib/utils";
-import { ChevronRightIcon } from "lucide-react";
 import type { Metadata } from "next";
-import Link from "next/link";
 import type { Address } from "thirdweb";
 import { defineChain } from "thirdweb/chains";
 import { getContract } from "thirdweb/contract";
@@ -9,6 +7,7 @@ import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
 import { FaqSection } from "@/components/blocks/faq-section";
 import { AppFooter } from "@/components/footers/app-footer";
 import { BridgeVeil } from "./components/BridgeVeil";
+import { PillLink } from "./components/client/pill-link";
 import { UniversalBridgeEmbed } from "./components/client/UniversalBridgeEmbed";
 import { PageHeader } from "./components/header";
 import { bridgeAppThirdwebClient } from "./constants";
@@ -56,15 +55,17 @@ export default async function BridgePage({
 
   return (
     <div className="grow flex flex-col relative overflow-hidden">
-      <div className="absolute top-0 left-0 right-0 h-dvh  md:h-[1200px] fade-in-0 animate-in duration-1000">
+      <div className="absolute top-0 left-0 right-0 h-dvh  md:h-[1200px] fade-in-0 animate-in duration-700">
         <BridgeVeil />
       </div>
 
       <div className="relative z-10">
         <PageHeader />
 
-        <div className="pt-28 pb-32 min-h-dvh relative z-10">
-          <div className="container mb-20">
+        <div className="h-20" />
+
+        <div className="relative z-10">
+          <div className="container">
             <h1 className="text-5xl md:text-6xl font-bold mb-6 tracking-tighter text-center leading-none text-pretty">
               Bridge and Swap tokens <br className="max-sm:hidden" /> across any
               chain, instantly
@@ -77,6 +78,8 @@ export default async function BridgePage({
             </div>
           </div>
 
+          <div className="h-16" />
+
           <div className="flex grow items-center justify-center px-4 relative">
             <DotsBackgroundPattern />
             <UniversalBridgeEmbed
@@ -95,21 +98,33 @@ export default async function BridgePage({
           </div>
         </div>
 
-        <div className="mb-24 container max-w-4xl">
-          <BridgeFaqSection />
-        </div>
+        <div className="h-32" />
 
-        <div className="flex flex-col gap-4 items-center mb-28 container">
-          <PillLink href="https://portal.thirdweb.com/bridge">
+        <div className="flex flex-col gap-4 items-center container">
+          <PillLink
+            href="https://portal.thirdweb.com/bridge"
+            linkType="integrate-bridge"
+          >
             Integrate Bridge in your apps in minutes, and start generating
             revenue
           </PillLink>
 
-          <PillLink href="https://thirdweb.com/tokens">
+          <PillLink
+            href="https://thirdweb.com/tokens"
+            linkType="trending-tokens"
+          >
             Discover Trending Tokens
           </PillLink>
         </div>
 
+        <div className="h-32" />
+
+        <div className="container max-w-2xl">
+          <BridgeFaqSection />
+        </div>
+
+        <div className="h-32" />
+
         <div className="relative">
           <AppFooter />
         </div>
@@ -120,30 +135,17 @@ export default async function BridgePage({
 
 function DataPill(props: { children: React.ReactNode }) {
   return (
-    <p className="flex items-center gap-1.5 text-foreground/60 text-xs bg-accent/30 backdrop-blur-lg border border-border/70 rounded-full px-3 py-1.5 hover:text-foreground transition-colors duration-300">
+    <p className="flex items-center gap-1.5 text-foreground/50 text-xs bg-accent/30 backdrop-blur-lg border border-border/70 rounded-full px-3 py-1.5 hover:text-foreground transition-colors duration-300">
       {props.children}
     </p>
   );
 }
 
-function PillLink(props: { children: React.ReactNode; href: string }) {
-  return (
-    <Link
-      href={props.href}
-      target="_blank"
-      className="shadow-lg text-center justify-center inline-flex items-center gap-2 text-foreground text-sm bg-card/50 backdrop-blur-lg border border-border/70 hover:border-active-border rounded-full px-5 py-2.5 hover:text-foreground transition-colors duration-300 text-pretty leading-5"
-    >
-      {props.children}
-      <ChevronRightIcon className="size-3.5 shrink-0 text-muted-foreground" />
-    </Link>
-  );
-}
-
 function DotsBackgroundPattern(props: { className?: string }) {
   return (
     <div
       className={cn(
-        "pointer-events-none absolute -inset-20 text-foreground/30 dark:text-foreground/10",
+        "pointer-events-none absolute -inset-x-36 -inset-y-24 text-pink-700/30 dark:text-pink-500/20",
         props.className,
       )}
       style={{