Page uses semantic HTML elements

Search engines use semantic HTML elements — <main>, <nav>, <article>, <section>, <header>, <footer> — to identify the primary content region, navigation landmarks, and page sections. A layout built entirely from <div> elements provides no structural signal; crawlers treat every block of text as equally weighted. WCAG 2.2 SC 1.3.1 (Info and Relationships) requires that structure conveyed visually is also expressed in the markup — missing <main> means keyboard users and screen reader users cannot jump directly to the main content, breaking a core navigation pattern.

Replace generic <div> wrappers in your root layout with the appropriate semantic elements. At minimum, your layout should include <header>, <main>, and <footer>:

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>
          <nav aria-label="Primary navigation">...</nav>
        </header>
        <main>{children}</main>
        <footer>...</footer>
      </body>
    </html>
  )
}

Use <article> for self-contained content (blog posts, product cards), <section> for thematic groupings with headings, and <aside> for supplementary content like sidebars. Shadcn/ui components render <div> by default — replace wrapper divs manually at the layout level rather than inside component internals.