chore: update branding page

components/billing/pro-annual-banner.tsx

@@ -5,6 +5,7 @@ import { Dispatch, SetStateAction, useState } from "react";
 import { useTeam } from "@/context/team-context";
 import Cookies from "js-cookie";
 import { usePlausible } from "next-plausible";
+import { toast } from "sonner";
 
 import X from "@/components/shared/icons/x";
 import { Button } from "@/components/ui/button";
@@ -42,10 +43,10 @@ export default function ProAnnualBanner({
         <span className="sr-only">Close</span>
       </button>
       <div className="flex space-x-2">
-        <span className="text-sm font-bold">Papermark Pro Annual</span>
+        <span className="text-sm font-bold">Papermark Pro Annual ✨</span>
       </div>
       <p className="my-4 text-sm">
-        Upgrade to Papermark Pro Annual to get 2 months free.
+        Lock in a better price and get 2 months free.
       </p>
       <div className="flex">
         <Button
@@ -67,14 +68,15 @@ export default function ProAnnualBanner({
                 })
                 .catch((err) => {
                   alert(err);
+                  toast.error("Something went wrong");
                 })
                 .finally(() => {
                   setIsLoading(false);
                 });
             }
           }}
         >
-          {isLoading ? "Upgrading..." : "Upgrade"}
+          {isLoading ? "Redirecting..." : "Upgrade"}
         </Button>
       </div>
     </aside>

pages/branding.tsx

@@ -13,6 +13,7 @@ import {
   UpgradePlanModal,
 } from "@/components/billing/upgrade-plan-modal";
 import AppLayout from "@/components/layouts/app";
+import { NavMenu } from "@/components/navigation-menu";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
@@ -138,15 +139,50 @@ export default function Branding() {
   return (
     <AppLayout>
       <main className="relative mx-2 mb-10 mt-4 space-y-8 overflow-hidden px-1 sm:mx-3 md:mx-5 md:mt-5 lg:mx-7 lg:mt-8 xl:mx-10">
+        <header>
+          <section className="mb-4 flex items-center justify-between md:mb-8 lg:mb-12">
+            <div className="space-y-1">
+              <h1 className="text-xl font-semibold tracking-tight text-foreground sm:text-2xl">
+                Branding
+              </h1>
+              <p className="text-xs text-muted-foreground sm:text-sm">
+                Customize how your brand appears globally across Papermark
+                documents your visitors see.
+              </p>
+            </div>
+          </section>
+
+          <NavMenu
+            navigation={[
+              {
+                label: "Document Branding",
+                href: "/branding",
+                segment: `branding`,
+              },
+              {
+                label: "Domains",
+                href: "/settings/domains",
+                segment: "domains",
+              },
+              {
+                label: "Link Previews",
+                href: "/settings/presets",
+                segment: "presets",
+              },
+            ]}
+          />
+        </header>
         <div>
           <div className="mb-4 flex items-center justify-between md:mb-8 lg:mb-12">
             <div className="space-y-1">
               <h3 className="text-2xl font-semibold tracking-tight text-foreground">
                 Document Branding
               </h3>
               <p className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
-                Customize how your brand appears globally across Papermark
-                documents your visitors see.
+                All direct links to documents will have your branding applied.
+                <span className="italic">
+                  Data rooms are styled individually.
+                </span>
                 <BadgeTooltip
                   linkText="Click here"
                   content="How to customize document branding?"

pages/settings/domains.tsx

@@ -46,7 +46,7 @@ export default function Domains() {
                 Domains
               </h3>
               <p className="flx-row flex items-center gap-2 text-sm text-muted-foreground">
-                Manage your custom domain for document sharing
+                Manage your custom domain for sharing documents and data rooms.
                 <BadgeTooltip
                   content="How to connect a custom domain to your link?"
                   key="verified"