here’s the prompt and the drop-in code to create the Presentation Template section with your exact flow:

Size (16:9 / 4:3)

Branding side panel (logo, fonts, 6 accent colors)

Pick body layouts from a gallery

Pick infographic pages (2/3/4/6 sections)

“Generate Template” button (saves a build config; backend POST stub included)

Prompt for Replit

Goal: Add a new page “Presentation Template” under Business Assets → Templates. It shows size selection, brand side panel (logo, fonts, 6 accents), layout & infographic galleries, and a Generate Template button (currently saves config to localStorage; backend POST stub included).

Do:

Update src/routes.tsx to register the new route.

Update src/components/Sidebar.tsx to add the menu item under Templates.

Create src/pages/business-assets/templates/PresentationTemplate.tsx (full UI below).

Create src/hooks/useLocalStorage.ts.

Reuse existing useBrandKit from utils/brand.

Libraries: React + React Router + Tailwind (already in project). No new deps.

1) Update src/routes.tsx
// ...existing imports
import React from "react";

const DocumentCovers = React.lazy(() => import("./pages/business-assets/templates/DocumentCovers"));
const SlideshowTemplates = React.lazy(() => import("./pages/business-assets/templates/SlideshowTemplates"));
const BusinessPlanTemplate = React.lazy(() => import("./pages/business-assets/templates/BusinessPlanTemplate"));
const LogoTemplates = React.lazy(() => import("./pages/business-assets/templates/LogoTemplates"));
+const PresentationTemplate = React.lazy(() => import("./pages/business-assets/templates/PresentationTemplate"));

// ...NAV stays, but add the new item under Business Assets → Templates
export const NAV: NavItem[] = [
  {
    label: "Business Development",
    icon: <Briefcase className="w-4 h-4" />,
    children: [/* ... */],
  },
  {
    label: "Business Assets",
    icon: <Layers className="w-4 h-4" />,
    children: [
      { groupLabel: "Templates" },
      { label: "Document Covers", path: "/business-assets/templates/document-covers", icon: <FileText className="w-4 h-4" /> },
      { label: "Slideshow Templates", path: "/business-assets/templates/slideshow-templates", icon: <Presentation className="w-4 h-4" /> },
+     { label: "Presentation Template", path: "/business-assets/templates/presentation-template", icon: <Presentation className="w-4 h-4" /> },
      { label: "Business Plan Template", path: "/business-assets/templates/business-plan", icon: <GalleryVerticalEnd className="w-4 h-4" /> },
      { label: "Logo Templates", path: "/business-assets/templates/logo-templates", icon: <CaseSensitive className="w-4 h-4" /> },

      { groupLabel: "Stock Library" },
      // Icons, Mockups, Photos...
    ],
  },
];

export const ROUTES = [
  { path: "/business-assets/templates/document-covers", element: <DocumentCovers /> },
  { path: "/business-assets/templates/slideshow-templates", element: <SlideshowTemplates /> },
+ { path: "/business-assets/templates/presentation-template", element: <PresentationTemplate /> },
  { path: "/business-assets/templates/business-plan", element: <BusinessPlanTemplate /> },
  { path: "/business-assets/templates/logo-templates", element: <LogoTemplates /> },

  { path: "/business-assets/stock/icons", element: <IconsPage /> },
  { path: "/business-assets/stock/mockups", element: <MockupsPage /> },
  { path: "/business-assets/stock/photos", element: <StockPhotosPage /> },
];


(No change needed in Sidebar.tsx if it renders NAV automatically. If you hardcoded it, just ensure the new nav item appears.)

2) Add src/hooks/useLocalStorage.ts
import { useEffect, useState } from "react";

export function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    try {
      const raw = localStorage.getItem(key);
      return raw ? (JSON.parse(raw) as T) : initial;
    } catch { return initial; }
  });

  useEffect(() => {
    try { localStorage.setItem(key, JSON.stringify(value)); } catch {}
  }, [key, value]);

  return [value, setValue] as const;
}