[Dashboard] Feature : Adding Next Steps guide into chain pages (#6743)

Add actionable next step guide for users who visit a chain page.

Steps to Test:
1. Visit thirdweb.com/{chainID}
2. Scroll to the bottom and you should see
![image](https://github.com/user-attachments/assets/df68ad4b-a0b7-4384-9e2d-1bb207400087)
3. Click on the article
4. Get redirected to a blog post.

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces a new component called `NextSteps` to the `page.tsx` file in the dashboard application. This component provides users with actionable links and information related to integrating in-app wallets, enhancing user experience and adoption.

### Detailed summary
- Added `NextSteps` component to `page.tsx`.
- `NextSteps` displays a title and a link for creating a login for the specified `chain`.
- Integrated tracking for link clicks using `useTrack` to monitor user engagement.
- Included a brief description under the link in `NextSteps`.

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

<!-- end pr-codex -->

Author: Joe-Thirdweb

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/NextSteps.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { useTrack } from "hooks/analytics/useTrack";
+import { FileText } from "lucide-react";
+import Link from "next/link";
+import type { ChainMetadata } from "thirdweb/chains";
+import { SectionTitle } from "../server/SectionTitle";
+
+export default function NextSteps(props: { chain: ChainMetadata }) {
+  const { chain } = props;
+  const trackEvent = useTrack();
+
+  return (
+    <section>
+      <SectionTitle title="Next Steps" />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
+        <div className="relative flex gap-3 rounded-lg border bg-card p-4 pr-8 transition-colors hover:border-active-border">
+          <FileText className="mt-0.5 size-5 shrink-0" />
+          <div>
+            <h3 className="mb-1.5 font-medium">
+              <Link
+                href={
+                  "https://blog.thirdweb.com/supercharge-user-adoption-integrate-embedded-wallets-in-minutes/"
+                }
+                className="before:absolute before:inset-0"
+                target="_blank"
+                onClick={() =>
+                  trackEvent({
+                    category: "nextSteps",
+                    action: "click-inapp",
+                    label: "success",
+                    chain_id: chain.chainId,
+                  })
+                }
+              >
+                Create a login for {chain.name}
+              </Link>
+            </h3>
+            <p className="text-muted-foreground text-sm">
+              Supercharge User Adoption—Integrate In-App Wallets in Minutes
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx

@@ -1,6 +1,7 @@
 import { CircleAlertIcon } from "lucide-react";
 import { getRawAccount } from "../../../../account/settings/getAccount";
 import { getChain, getChainMetadata } from "../../utils";
+import NextSteps from "./components/client/NextSteps";
 import { BuyFundsSection } from "./components/server/BuyFundsSection";
 import { ChainOverviewSection } from "./components/server/ChainOverviewSection";
 import { ClaimChainSection } from "./components/server/ClaimChainSection";
@@ -57,6 +58,8 @@ export default async function Page(props: {
       {chain.services.filter((s) => s.enabled).length > 0 && (
         <SupportedProductsSection services={chain.services} />
       )}
+      {/*Next Steps */}
+      <NextSteps chain={chain} />
 
       {/* Claim Chain */}
       {!chainMetadata && <ClaimChainSection />}