Refactor site header, heroes, and design system

components/ui/ui-kit-showcase.tsx

@@ -53,6 +53,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
           surfaces: "Surfaces",
           typography: "Typography",
           headers: "Headers",
+          workspace: "Workspace",
           cardsDesc:
             "Aussenflaechen, innere Karten und verschachtelte Ebenen mit einheitlicher Hierarchie.",
           buttonsDesc:
@@ -67,6 +68,8 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
             "Typografische Grundstufen fuer Seiten, Sektionen und Metainformationen.",
           headersDesc:
             "Header Muster fuer Seiten und Sektionen innerhalb des Systems.",
+          workspaceDesc:
+            "Editor Muster mit breitem Inhaltsbereich und schmaler Kontextspalte fuer Admin Oberflaechen.",
           tabsDesc:
             "Tabs bleiben in einer Route und verwenden dieselbe verschachtelte Steuerlogik.",
           outerCard: "Aeussere Card",
@@ -128,7 +131,12 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
           outerSurfaceHeaderText: "Dieses Muster wird fuer Seitensektionen mit staerkerer Hierarchie genutzt.",
           sectionHeader: "Abschnittsheader",
           nestedBlockHeading: "Ueberschrift des verschachtelten Blocks",
-          nestedBlockHeadingText: "Innerhalb einer aeusseren Card verwenden, wenn Inhalte bereits gruppiert sind."
+          nestedBlockHeadingText: "Innerhalb einer aeusseren Card verwenden, wenn Inhalte bereits gruppiert sind.",
+          workspaceHeader: "Editor Workspace",
+          workspaceMain: "Breiter Inhaltsbereich",
+          workspaceMainText: "Hier liegen Formschritte, Listen und eigentliche Bearbeitung.",
+          workspaceSide: "Kontextspalte",
+          workspaceSideText: "Status, Checklisten und Fokusdetails bleiben immer sichtbar."
         }
       : {
           title: "UI Kit",
@@ -142,6 +150,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
           surfaces: "Surfaces",
           typography: "Typography",
           headers: "Headers",
+          workspace: "Workspace",
           cardsDesc:
             "Outer surfaces, inner cards, and nested levels with one consistent hierarchy.",
           buttonsDesc:
@@ -156,6 +165,8 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
             "Typography foundations for pages, sections, and supporting copy.",
           headersDesc:
             "Header patterns for pages and sections inside the system.",
+          workspaceDesc:
+            "Editor pattern with a wide content area and a narrow context rail for admin workflows.",
           tabsDesc:
             "Tabs stay within one route and use the same nested control logic.",
           outerCard: "Outer card",
@@ -217,7 +228,12 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
           outerSurfaceHeaderText: "This pattern is used for page-level sections that need stronger hierarchy.",
           sectionHeader: "Section header",
           nestedBlockHeading: "Nested block heading",
-          nestedBlockHeadingText: "Use inside an outer card when content is already grouped."
+          nestedBlockHeadingText: "Use inside an outer card when content is already grouped.",
+          workspaceHeader: "Editor workspace",
+          workspaceMain: "Wide content area",
+          workspaceMainText: "This area carries form steps, lists, and direct editing work.",
+          workspaceSide: "Context rail",
+          workspaceSideText: "Status, checklists, and focus details stay visible at all times."
         };
 
   return (
@@ -249,6 +265,7 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
           <TabsTrigger value="surfaces">{copy.surfaces}</TabsTrigger>
           <TabsTrigger value="typography">{copy.typography}</TabsTrigger>
           <TabsTrigger value="headers">{copy.headers}</TabsTrigger>
+          <TabsTrigger value="workspace">{copy.workspace}</TabsTrigger>
         </TabsList>
 
         <TabsContent value="cards">
@@ -516,6 +533,44 @@ export function UiKitShowcase({ localeKey }: UiKitShowcaseProps) {
             </div>
           </UiKitSection>
         </TabsContent>
+
+        <TabsContent value="workspace">
+          <UiKitSection title={copy.workspace} description={copy.workspaceDesc}>
+            <div className="grid gap-6 xl:grid-cols-3">
+              <AppCard level={2} className="xl:col-span-2">
+                <CardContent className="space-y-4 p-6">
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground">{copy.workspaceMain}</p>
+                    <h3 className="mt-2 text-xl font-semibold text-foreground">{copy.workspaceHeader}</h3>
+                  </div>
+                  <p className="text-sm text-muted-foreground">{copy.workspaceMainText}</p>
+                  <div className="grid gap-3 md:grid-cols-2">
+                    <div className="rounded-lg border border-input bg-background p-4 text-sm text-muted-foreground">
+                      Step 1
+                    </div>
+                    <div className="rounded-lg border border-input bg-background p-4 text-sm text-muted-foreground">
+                      Step 2
+                    </div>
+                  </div>
+                </CardContent>
+              </AppCard>
+
+              <AppCard level={2}>
+                <CardContent className="space-y-4 p-6">
+                  <p className="text-sm font-medium text-muted-foreground">{copy.workspaceSide}</p>
+                  <p className="text-sm text-muted-foreground">{copy.workspaceSideText}</p>
+                  <div className="space-y-3">
+                    <Badge variant="success">Ready</Badge>
+                    <Badge variant="warning">Open</Badge>
+                    <div className="rounded-lg border border-input bg-background p-4 text-sm text-muted-foreground">
+                      Checklist / status / focus details
+                    </div>
+                  </div>
+                </CardContent>
+              </AppCard>
+            </div>
+          </UiKitSection>
+        </TabsContent>
       </Tabs>
     </div>
   );