[TOOL-3909] Dashboard: Add footer links to project pages & header style adjustments (#6627)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the layout and structure of various components in the application, introducing new footer sections, and improving the user interface for better organization and navigation.

### Detailed summary
- Removed the `SupportedPlatformLink.tsx` file.
- Updated `href` in `react-native/v5/page.mdx` from `/installation` to `/getting-started`.
- Enhanced layout in multiple components with added `container` classes for better styling.
- Introduced new `FooterCard` component in various pages for documentation and tutorial links.
- Replaced `AAFooterSection` with `AAFooter` in `AccountAbstractionPage.tsx`.
- Updated `InAppWalletFooterSection` to `InAppWalletsFooter` with a new structure.
- Modified headers and added spacing in several components for improved visual hierarchy.
- Introduced new `InsightFooter` component with relevant links.
- Adjusted various components to use consistent `container` class for layout consistency.

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

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/@/components/blocks/SidebarLayout.tsx

@@ -17,6 +17,7 @@ import { NavLink } from "../ui/NavLink";
 import { Separator } from "../ui/separator";
 import { MobileSidebar, useActiveSidebarLink } from "./MobileSidebar";
 import { CustomSidebar, type SidebarLink } from "./Sidebar";
+import { AppFooter } from "./app-footer";
 
 export function SidebarLayout(props: {
   sidebarLinks: SidebarLink[];
@@ -54,7 +55,6 @@ export function FullWidthSidebarLayout(props: {
   footerSidebarLinks?: SidebarLink[];
   children: React.ReactNode;
   className?: string;
-  footer?: React.ReactNode;
 }) {
   const { contentSidebarLinks, children, footerSidebarLinks } = props;
   return (
@@ -65,7 +65,7 @@ export function FullWidthSidebarLayout(props: {
       )}
     >
       {/* left - sidebar */}
-      <Sidebar collapsible="icon" side="left">
+      <Sidebar collapsible="icon" side="left" className="pt-2">
         <SidebarContent>
           <SidebarGroup>
             <SidebarGroupContent>
@@ -95,10 +95,10 @@ export function FullWidthSidebarLayout(props: {
           links={[...contentSidebarLinks, ...(footerSidebarLinks || [])]}
         />
 
-        <main className="container z-0 flex min-w-0 max-w-[1280px] grow flex-col pb-20 max-sm:w-full lg:pt-6">
+        <main className="z-0 flex min-w-0 grow flex-col max-sm:w-full">
           {children}
         </main>
-        {props.footer}
+        <AppFooter containerClassName="max-w-7xl" />
       </div>
     </div>
   );
@@ -156,7 +156,7 @@ function MobileSidebarTrigger(props: { links: SidebarLink[] }) {
   const activeLink = useActiveSidebarLink(props.links);
 
   return (
-    <div className="mb-4 flex items-center gap-3 border-b px-4 py-4 lg:hidden">
+    <div className="flex items-center gap-3 border-b px-4 py-4 lg:hidden">
       <SidebarTrigger className="size-4" />
       <Separator orientation="vertical" className="h-4" />
       {activeLink && <span className="text-sm">{activeLink.label}</span>}

apps/dashboard/src/@/components/blocks/app-footer.tsx

@@ -12,17 +12,23 @@ import Link from "next/link";
 
 type AppFooterProps = {
   className?: string;
+  containerClassName?: string;
 };
 
 export function AppFooter(props: AppFooterProps) {
   return (
     <footer
       className={cn(
-        "w-full border-border border-t bg-card py-6 md:py-8",
+        "w-full border-border border-t py-6 md:py-8",
         props.className,
       )}
     >
-      <div className="container flex flex-col gap-4 md:gap-6">
+      <div
+        className={cn(
+          "container flex flex-col gap-4 md:gap-6",
+          props.containerClassName,
+        )}
+      >
         {/* top row */}
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
           <div className="flex flex-row items-center gap-3">

apps/dashboard/src/@/components/ui/tabs.tsx

@@ -20,6 +20,7 @@ export function TabLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const { containerRef, lineRef, activeTabRef } =
     useUnderline<HTMLAnchorElement>();
@@ -30,7 +31,7 @@ export function TabLinks(props: {
       <div className="absolute right-0 bottom-0 left-0 h-[1px] bg-border" />
 
       <ScrollShadow
-        scrollableClassName="pb-[8px] relative"
+        scrollableClassName={cn("pb-[8px] relative", props.scrollableClassName)}
         shadowColor={props.shadowColor}
       >
         <div
@@ -159,9 +160,11 @@ function useUnderline<El extends HTMLElement>() {
         const containerRect = containerRef.current.getBoundingClientRect();
         const lineEl = lineRef.current;
         const rect = activeTabEl.getBoundingClientRect();
+        const containerPaddingLeft =
+          containerRect.left - containerRef.current.offsetLeft;
         lineEl.style.width = `${rect.width}px`;
         lineEl.style.transform = `translateX(${
-          rect.left - containerRect.left
+          rect.left - containerPaddingLeft
         }px)`;
         setTimeout(() => {
           lineEl.style.transition = "transform 0.3s, width 0.3s";
@@ -205,6 +208,7 @@ export function TabPathLinks(props: {
   className?: string;
   tabContainerClassName?: string;
   shadowColor?: string;
+  scrollableClassName?: string;
 }) {
   const pathname = usePathname() || "";
   const { links, ...restProps } = props;

apps/dashboard/src/app/account/contracts/DeployedContractsPageHeader.tsx

@@ -13,7 +13,7 @@ export function DeployedContractsPageHeader(props: {
   const [importModalOpen, setImportModalOpen] = useState(false);
 
   return (
-    <div>
+    <div className="border-b">
       <ImportModal
         isOpen={importModalOpen}
         onClose={() => {
@@ -23,9 +23,11 @@ export function DeployedContractsPageHeader(props: {
         projectId={props.projectId}
       />
 
-      <div className="flex flex-col gap-3 pt-2 pb-8 lg:flex-row lg:items-center lg:justify-between">
+      <div className="container flex max-w-7xl flex-col gap-3 py-10 lg:flex-row lg:items-center lg:justify-between">
         <div>
-          <h1 className="font-semibold text-3xl tracking-tight">Contracts</h1>
+          <h1 className="font-semibold text-2xl tracking-tight lg:text-3xl">
+            Contracts
+          </h1>
         </div>
         <div className="flex gap-3 [&>*]:grow">
           <Button

apps/dashboard/src/app/account/contracts/_components/DeployedContractsPage.tsx

@@ -17,7 +17,8 @@ export function DeployedContractsPage(props: {
         teamId={props.teamId}
         projectId={props.projectId}
       />
-      <div className="flex grow flex-col">
+      <div className="h-6" />
+      <div className="container flex max-w-7xl grow flex-col">
         <Suspense fallback={<Loading />}>
           <DeployedContractsPageAsync {...props} />
         </Suspense>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/ProjectSidebarLayout.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { FullWidthSidebarLayout } from "@/components/blocks/SidebarLayout";
-import { AppFooter } from "@/components/blocks/app-footer";
 import {
   BookTextIcon,
   BoxIcon,
@@ -29,7 +28,6 @@ export function ProjectSidebarLayout(props: {
 
   return (
     <FullWidthSidebarLayout
-      footer={<AppFooter />}
       contentSidebarLinks={[
         {
           href: layoutPath,

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/footer/FooterLinksSection.tsx

@@ -0,0 +1,89 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+import { LinkIcon } from "lucide-react";
+
+type FooterSectionProps = {
+  title: string;
+  links: {
+    href: string;
+    label: string;
+  }[];
+};
+
+type FooterCardProps = {
+  left: FooterSectionProps;
+  center: FooterSectionProps;
+  right: FooterSectionProps;
+  trackingCategory: string;
+};
+
+export function FooterLinksSection(props: FooterCardProps) {
+  return (
+    <div className="py-6">
+      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3 xl:gap-0 xl:divide-x xl:divide-border">
+        <div className="xl:pr-6">
+          <FooterSection
+            {...props.left}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+
+        <div className="xl:px-6">
+          <FooterSection
+            {...props.center}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+
+        <div className="xl:pl-6">
+          <FooterSection
+            {...props.right}
+            trackingCategory={props.trackingCategory}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FooterSection(
+  props: FooterSectionProps & { trackingCategory: string },
+) {
+  return (
+    <div>
+      <h3 className="mb-2.5 font-medium">{props.title}</h3>
+      <div className="flex flex-col gap-2.5">
+        {props.links.map((link) => (
+          <FooterLink
+            key={link.label}
+            href={link.href}
+            trackingCategory={props.trackingCategory}
+            label={link.label}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function FooterLink({
+  href,
+  label,
+  trackingCategory,
+}: {
+  href: string;
+  label: string;
+  trackingCategory: string;
+}) {
+  return (
+    <TrackedLinkTW
+      href={href}
+      category={trackingCategory}
+      label={label.replace(/ /g, "-").toLowerCase()}
+      target="_blank"
+      className="flex items-start gap-2 text-balance text-muted-foreground text-sm hover:text-foreground"
+    >
+      <LinkIcon className="mt-1 size-3 shrink-0 opacity-70" />
+      {label}
+    </TrackedLinkTW>
+  );
+}