Page Layout

Compositional shell for public pages. Provides the skip-to-content link, header slot, scrollable main with proper landmark roles, and footer slot. Defaults are sensible — pass header / footer to swap brand-specific implementations and mainWidth="full" for full-bleed templates.

Live preview

The shell below renders with the existing PublicHeader and PublicFooter and a skip link that becomes visible only when keyboard focus lands on it. Tab into the preview below to reveal it.

Sample page

This pane shows how a TpEMIS public template would render inside the layout. Header sticks to the top, main scrolls, footer sits at the bottom of the flow. The container width defaults to max-w-7xl.

Card 1

Sample card content for the layout demo.

Card 2

Sample card content for the layout demo.

Card 3

Sample card content for the layout demo.

Card 4

Sample card content for the layout demo.

Card 5

Sample card content for the layout demo.

Card 6

Sample card content for the layout demo.

Usage

import { PageLayout } from "@/components/ui/page-layout";
import { PublicHeader } from "@/components/layout/PublicHeader";
import { PublicFooter } from "@/components/layout/PublicFooter";

export function TpEmisPlatformHomePage() {
  return (
    <PageLayout
      header={<PublicHeader brandName="TpEMIS" />}
      footer={<PublicFooter />}
    >
      <Hero />
      <FeaturedUniversities />
      <CTASection />
    </PageLayout>
  );
}

Accessibility

  • Skip link is the first focusable child; Tab from the URL bar lands on it.
  • It uses sr-only until focused, then takes a fixed corner position with the brand accent.
  • <main> exposes id="main-content" and tabindex=-1 so the skip link can land focus.
  • The skip link sits at z-toast from the new z-index scale to outrank header dropdowns.
  • Header / footer are slots — pass any markup that exposes the right landmark role.