add product banner to approvals page

src/app/[orgId]/settings/(private)/access/approvals/page.tsx

@@ -1,6 +1,7 @@
 import { ApprovalFeed } from "@app/components/ApprovalFeed";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import ApprovalsBanner from "@app/components/ApprovalsBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { getCachedOrg } from "@app/lib/api/getCachedOrg";
@@ -44,6 +45,8 @@ export default async function ApprovalFeedPage(props: ApprovalFeedPageProps) {
                 description={t("accessApprovalsDescription")}
             />
 
+            <ApprovalsBanner />
+
             <PaidFeaturesAlert />
 
             <OrgProvider org={org}>

src/components/ApprovalsBanner.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { ShieldCheck, ArrowRight } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+export const ApprovalsBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="approvals-banner-dismissed"
+            version={1}
+            title={t("approvalsBannerTitle")}
+            titleIcon={<ShieldCheck className="w-5 h-5 text-primary" />}
+            description={t("approvalsBannerDescription")}
+        >
+            <Link
+                href="https://docs.pangolin.net/manage/access/approvals"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    {t("approvalsBannerButtonText")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default ApprovalsBanner;