Frontend Patterns

React component structure for public broker landing pages, admin management UI, routing configuration, and navigation integration.

Public Broker Landing Page

Route: /broker/:slug. This page is publicly accessible and serves as the broker's branded entry point.

Key Sections

Hero

Gradient background using brandColor, headline, subheadline, CTA button

Bio

Broker photo, name, company, contact details

Services

Grid of service cards (from JSON field)

Testimonials

Client testimonials (from JSON field)

Trust Indicators

"Why Choose Us" section with icons

Footer CTA

Second call-to-action with application link

CTA links should include the broker slug: /apply?broker={slug}

pages/BrokerLandingPage.tsx — Component Pattern

// Route: /broker/:slug
export default function BrokerLandingPage() {
  const params = useParams<{ slug: string }>();
  const { data: page, isLoading } = trpc.brokerLanding.getBySlug.useQuery(
    { slug: params.slug! },
    { enabled: !!params.slug }
  );

  if (isLoading) return <LoadingSkeleton />;
  if (!page) return <NotFoundPage />;

  const brandColor = page.brandColor || "#1e3a5f";
  // Render hero, bio, services, testimonials, CTA sections
}

Admin Landing Pages Management

Route: /admin/landing-pages. Admin-only page for managing all broker landing pages.

Features

Table listing all landing pages with slug, broker name, status, view/app counts

Create dialog with form (broker dropdown, slug, display fields, brand color)

Edit dialog (same fields, pre-populated)

Toggle active/inactive with eye icon

Delete with confirmation dialog

External link icon to open public page in new tab

Copy URL button

pages/AdminLandingPages.tsx — Component Pattern

export default function AdminLandingPages() {
  const { data: pages } = trpc.brokerLanding.listAll.useQuery();
  const utils = trpc.useUtils();
  
  const createMut = trpc.brokerLanding.create.useMutation({
    onSuccess: () => utils.brokerLanding.listAll.invalidate(),
  });
  
  const updateMut = trpc.brokerLanding.adminUpdate.useMutation({
    onSuccess: () => utils.brokerLanding.listAll.invalidate(),
  });
  
  const deleteMut = trpc.brokerLanding.delete.useMutation({
    onSuccess: () => utils.brokerLanding.listAll.invalidate(),
  });
  
  // ... render table, dialogs, actions
}

Routing

Add these routes to App.tsx:

App.tsx — Route Registration

<Route path="/broker/:slug" component={BrokerLandingPage} />
<Route path="/admin/landing-pages" component={AdminLandingPages} />

Navigation

Add the landing pages link to the admin navigation or dropdown menu:

Navigation — Admin Link

{ label: "Landing Pages", href: "/admin/landing-pages", icon: Globe }