add banners

messages/en-US.json

@@ -51,6 +51,9 @@
     "siteQuestionRemove": "Are you sure you want to remove the site from the organization?",
     "siteManageSites": "Manage Sites",
     "siteDescription": "Create and manage sites to enable connectivity to private networks",
+    "sitesBannerTitle": "Connect Any Network",
+    "sitesBannerDescription": "A site is a connection to a remote network that allows Pangolin to provide access to resources, whether public or private, to users anywhere. Install the site network connector (Newt) anywhere you can run a binary or container to establish the connection.",
+    "sitesBannerButtonText": "Install Site",
     "siteCreate": "Create Site",
     "siteCreateDescription2": "Follow the steps below to create and connect a new site",
     "siteCreateDescription": "Create a new site to start connecting resources",
@@ -147,8 +150,12 @@
     "shareErrorSelectResource": "Please select a resource",
     "proxyResourceTitle": "Manage Public Resources",
     "proxyResourceDescription": "Create and manage resources that are publicly accessible through a web browser",
+    "proxyResourcesBannerTitle": "Web-based Public Access",
+    "proxyResourcesBannerDescription": "Public resources are HTTPS or TCP/UDP proxies accessible to anyone on the internet through a web browser. Unlike private resources, they do not require client-side software and can include identity and context-aware access policies.",
     "clientResourceTitle": "Manage Private Resources",
     "clientResourceDescription": "Create and manage resources that are only accessible through a connected client",
+    "privateResourcesBannerTitle": "Zero-Trust Private Access",
+    "privateResourcesBannerDescription": "Private resources use zero-trust security, ensuring users and machines can only access resources you explicitly grant. Connect user devices or machine clients to access these resources over a secure virtual private network.",
     "resourcesSearch": "Search resources...",
     "resourceAdd": "Add Resource",
     "resourceErrorDelte": "Error deleting resource",
@@ -1944,8 +1951,15 @@
     "beta": "Beta",
     "manageUserDevices": "User Devices",
     "manageUserDevicesDescription": "View and manage devices that users use to privately connect to resources",
+    "downloadClientBannerTitle": "Download Pangolin Client",
+    "downloadClientBannerDescription": "Download the Pangolin client for your system to connect to the Pangolin network and access resources privately",
     "manageMachineClients": "Manage Machine Clients",
     "manageMachineClientsDescription": "Create and manage clients that servers and systems use to privately connect to resources",
+    "machineClientsBannerTitle": "Servers & Automated Systems",
+    "machineClientsBannerDescription": "Machine clients are for servers and automated systems that are not associated with a specific user. They authenticate with an ID and secret, and can run with Pangolin CLI, Olm CLI, or Olm as a container.",
+    "machineClientsBannerPangolinCLI": "Pangolin CLI",
+    "machineClientsBannerOlmCLI": "Olm CLI",
+    "machineClientsBannerOlmContainer": "Olm Container",
     "clientsTableUserClients": "User",
     "clientsTableMachineClients": "Machine",
     "licenseTableValidUntil": "Valid Until",

src/app/[orgId]/settings/clients/machine/page.tsx

@@ -1,6 +1,7 @@
 import type { ClientRow } from "@app/components/MachineClientsTable";
 import MachineClientsTable from "@app/components/MachineClientsTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import MachineClientsBanner from "@app/components/MachineClientsBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { ListClientsResponse } from "@server/routers/client";
@@ -71,6 +72,8 @@ export default async function ClientsPage(props: ClientsPageProps) {
                 description={t("manageMachineClientsDescription")}
             />
 
+            <MachineClientsBanner orgId={params.orgId} />
+
             <MachineClientsTable
                 machineClients={machineClientRows}
                 orgId={params.orgId}

src/app/[orgId]/settings/resources/client/page.tsx

@@ -1,6 +1,7 @@
 import type { InternalResourceRow } from "@app/components/ClientResourcesTable";
 import ClientResourcesTable from "@app/components/ClientResourcesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import PrivateResourcesBanner from "@app/components/PrivateResourcesBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { getCachedOrg } from "@app/lib/api/getCachedOrg";
@@ -81,6 +82,8 @@ export default async function ClientResourcesPage(
                 description={t("clientResourceDescription")}
             />
 
+            <PrivateResourcesBanner orgId={params.orgId} />
+
             <OrgProvider org={org}>
                 <ClientResourcesTable
                     internalResources={internalResourceRows}

src/app/[orgId]/settings/resources/proxy/page.tsx

@@ -1,6 +1,7 @@
 import type { ResourceRow } from "@app/components/ProxyResourcesTable";
 import ProxyResourcesTable from "@app/components/ProxyResourcesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import ProxyResourcesBanner from "@app/components/ProxyResourcesBanner";
 import { internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import OrgProvider from "@app/providers/OrgProvider";
@@ -97,6 +98,8 @@ export default async function ProxyResourcesPage(
                 description={t("proxyResourceDescription")}
             />
 
+            <ProxyResourcesBanner />
+
             <OrgProvider org={org}>
                 <ProxyResourcesTable
                     resources={resourceRows}

src/app/[orgId]/settings/sites/page.tsx

@@ -4,6 +4,7 @@ import { ListSitesResponse } from "@server/routers/site";
 import { AxiosResponse } from "axios";
 import SitesTable, { SiteRow } from "../../../../components/SitesTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import SitesBanner from "@app/components/SitesBanner";
 import SitesSplashCard from "../../../../components/SitesSplashCard";
 import { getTranslations } from "next-intl/server";
 
@@ -67,6 +68,8 @@ export default async function SitesPage(props: SitesPageProps) {
                 description={t("siteDescription")}
             />
 
+            <SitesBanner />
+
             <SitesTable sites={siteRows} orgId={params.orgId} />
         </>
     );

src/components/ClientDownloadBanner.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { Download } from "lucide-react";
+import { FaApple, FaWindows, FaLinux } from "react-icons/fa";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+export const ClientDownloadBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="client-download-banner-dismissed"
+            version={1}
+            title={t("downloadClientBannerTitle")}
+            titleIcon={<Download className="w-5 h-5 text-primary" />}
+            description={t("downloadClientBannerDescription")}
+        >
+            <Link
+                href="https://pangolin.net/downloads/mac"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <FaApple className="w-4 h-4" />
+                    Mac
+                </Button>
+            </Link>
+            <Link
+                href="https://pangolin.net/downloads/windows"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <FaWindows className="w-4 h-4" />
+                    Windows
+                </Button>
+            </Link>
+            <Link
+                href="https://pangolin.net/downloads/linux"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <FaLinux className="w-4 h-4" />
+                    Linux
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default ClientDownloadBanner;
+

src/components/DismissableBanner.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState, useEffect, type ReactNode } from "react";
+import { Card, CardContent } from "@app/components/ui/card";
+import { X } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+type DismissableBannerProps = {
+    storageKey: string;
+    version: number;
+    title: string;
+    titleIcon: ReactNode;
+    description: string;
+    children?: ReactNode;
+};
+
+export const DismissableBanner = ({
+    storageKey,
+    version,
+    title,
+    titleIcon,
+    description,
+    children
+}: DismissableBannerProps) => {
+    const [isDismissed, setIsDismissed] = useState(true);
+    const t = useTranslations();
+
+    useEffect(() => {
+        const dismissedData = localStorage.getItem(storageKey);
+        if (dismissedData) {
+            try {
+                const parsed = JSON.parse(dismissedData);
+                // If version matches, use the dismissed state
+                if (parsed.version === version) {
+                    setIsDismissed(parsed.dismissed);
+                } else {
+                    // Version changed, show the banner again
+                    setIsDismissed(false);
+                }
+            } catch {
+                // If parsing fails, check for old format (just "true" string)
+                if (dismissedData === "true") {
+                    // Old format, show banner again for new version
+                    setIsDismissed(false);
+                } else {
+                    setIsDismissed(true);
+                }
+            }
+        } else {
+            setIsDismissed(false);
+        }
+    }, [storageKey, version]);
+
+    const handleDismiss = () => {
+        setIsDismissed(true);
+        localStorage.setItem(
+            storageKey,
+            JSON.stringify({ dismissed: true, version })
+        );
+    };
+
+    if (isDismissed) {
+        return null;
+    }
+
+    return (
+        <Card className="mb-6 relative border-primary/30 bg-gradient-to-br from-primary/10 via-background to-background overflow-hidden">
+            <button
+                onClick={handleDismiss}
+                className="absolute top-3 right-3 z-10 p-1.5 rounded-md hover:bg-background/80 transition-colors"
+                aria-label={t("dismiss")}
+            >
+                <X className="w-4 h-4 text-muted-foreground" />
+            </button>
+            <CardContent className="p-6">
+                <div className="flex flex-col lg:flex-row lg:items-center gap-6">
+                    <div className="flex-1 space-y-2 min-w-0">
+                        <h3 className="text-lg font-semibold flex items-center gap-2">
+                            {titleIcon}
+                            {title}
+                        </h3>
+                        <p className="text-sm text-muted-foreground max-w-4xl">
+                            {description}
+                        </p>
+                    </div>
+                    {children && (
+                        <div className="flex flex-wrap gap-3 lg:flex-shrink-0 lg:justify-end">
+                            {children}
+                        </div>
+                    )}
+                </div>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default DismissableBanner;
+

src/components/MachineClientsBanner.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { Server, Terminal, Container } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+type MachineClientsBannerProps = {
+    orgId: string;
+};
+
+export const MachineClientsBanner = ({
+    orgId
+}: MachineClientsBannerProps) => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="machine-clients-banner-dismissed"
+            version={1}
+            title={t("machineClientsBannerTitle")}
+            titleIcon={<Server className="w-5 h-5 text-primary" />}
+            description={t("machineClientsBannerDescription")}
+        >
+            <Link
+                href="https://docs.pangolin.net/manage/clients/install-client#pangolin-cli-linux"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Terminal className="w-4 h-4" />
+                    {t("machineClientsBannerPangolinCLI")}
+                </Button>
+            </Link>
+            <Link
+                href="https://docs.pangolin.net/manage/clients/install-client#docker"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Container className="w-4 h-4" />
+                    {t("machineClientsBannerOlmContainer")}
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default MachineClientsBanner;
+

src/components/PrivateResourcesBanner.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React from "react";
+import { Button } from "@app/components/ui/button";
+import { Shield, ArrowRight, Laptop, Server } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import DismissableBanner from "./DismissableBanner";
+
+type PrivateResourcesBannerProps = {
+    orgId: string;
+};
+
+export const PrivateResourcesBanner = ({
+    orgId
+}: PrivateResourcesBannerProps) => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="private-resources-banner-dismissed"
+            version={1}
+            title={t("privateResourcesBannerTitle")}
+            titleIcon={<Shield className="w-5 h-5 text-primary" />}
+            description={t("privateResourcesBannerDescription")}
+        >
+            <Link href={`/${orgId}/settings/clients/user`}>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Laptop className="w-4 h-4" />
+                    {t("sidebarUserDevices")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+            <Link href={`/${orgId}/settings/clients/machine`}>
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    <Server className="w-4 h-4" />
+                    {t("sidebarMachineClients")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
+    );
+};
+
+export default PrivateResourcesBanner;
+

src/components/ProxyResourcesBanner.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { Globe } from "lucide-react";
+import { useTranslations } from "next-intl";
+import DismissableBanner from "./DismissableBanner";
+
+export const ProxyResourcesBanner = () => {
+    const t = useTranslations();
+
+    return (
+        <DismissableBanner
+            storageKey="proxy-resources-banner-dismissed"
+            version={1}
+            title={t("proxyResourcesBannerTitle")}
+            titleIcon={<Globe className="w-5 h-5 text-primary" />}
+            description={t("proxyResourcesBannerDescription")}
+        />
+    );
+};
+
+export default ProxyResourcesBanner;
+

src/components/SitesBanner.tsx

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

src/components/UserDevicesTable.tsx

@@ -25,6 +25,7 @@ import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition } from "react";
 import { Badge } from "./ui/badge";
 import { InfoPopup } from "./ui/info-popup";
+import ClientDownloadBanner from "./ClientDownloadBanner";
 
 export type ClientRow = {
     id: number;
@@ -413,6 +414,8 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                 />
             )}
 
+            <ClientDownloadBanner />
+
             <DataTable
                 columns={columns}
                 data={userClients || []}