From 128de2d4ef5b2d0045567aeda4a4821d430270a8 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Wed, 18 Mar 2026 08:18:58 +0700
Subject: [PATCH] feat: update title hierarchy in ShowcaseView for improved
 accessibility and consistency

---
 apps/web/src/apps/showcase/showcase-view.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/apps/showcase/showcase-view.tsx b/apps/web/src/apps/showcase/showcase-view.tsx
index 73fbd64..a267b45 100644
--- a/apps/web/src/apps/showcase/showcase-view.tsx
+++ b/apps/web/src/apps/showcase/showcase-view.tsx
@@ -44,7 +44,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
             CONTROL PANEL
             ========================================= */}
         <Card withBorder shadow="sm" radius="md" p="md">
-          <Title order={3} mb="md">
+          <Title order={4} mb="md">
             Theme Controls
           </Title>
           <Group grow align="flex-end">
@@ -73,7 +73,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
             TAILWIND V4 BRIDGE TEST
             ========================================= */}
         <Card withBorder shadow="sm" radius="md" p="md">
-          <Title order={3} mb="md">
+          <Title order={4} mb="md">
             Tailwind v4 Synchronization
           </Title>
           {/* This div purely uses Tailwind classes to prove it inherits Mantine's variables */}
@@ -89,7 +89,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
         <Card withBorder shadow="sm" radius="md" p="md">
           <Stack gap="lg">
             <div>
-              <Title order={3} mb="xs">
+              <Title order={4} mb="xs">
                 Typography & Badges
               </Title>
               <Text size="sm" c="dimmed">
@@ -113,7 +113,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
             <Divider />
 
             <div>
-              <Title order={3} mb="md">
+              <Title order={4} mb="md">
                 Buttons
               </Title>
               <Group>
@@ -138,7 +138,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
             COMPLEX FORMS (ERP STYLE)
             ========================================= */}
         <Card withBorder shadow="sm" radius="md" p="md">
-          <Title order={3} mb="md">
+          <Title order={4} mb="md">
             Form Elements
           </Title>
           <Stack gap="md">
@@ -173,7 +173,7 @@ export default function ShowcaseView({ colorScheme, setColorScheme, density, set
             DATA GRID / TABLE
             ========================================= */}
         <Card withBorder shadow="sm" radius="md" p="md">
-          <Title order={3} mb="md">
+          <Title order={4} mb="md">
             Data Grid
           </Title>
           <Table striped highlightOnHover withTableBorder withColumnBorders>