update ui update and fix layout issue

src/shared/components/patterns/CollectionRegion.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import {VStack} from '@astryxdesign/core/Layout';
+import {Heading} from '@astryxdesign/core/Text';
+import {VisuallyHidden} from '@astryxdesign/core/VisuallyHidden';
+
+/**
+ * A labelled region wrapping a grid of entity cards.
+ *
+ * The card grids (stores, rewards, staff) are visually self-explanatory — the
+ * filter bar above already says "5 stores" — so they carry no visible heading.
+ * But each card titles itself with an h3, and an h3 with no h2 above it is a
+ * hole in the document outline: screen-reader users navigating by heading jump
+ * from the page title straight into individual cards with no sense of what
+ * collection they are in.
+ *
+ * So the heading exists, and is hidden. This is one of the few legitimate uses
+ * of visually-hidden text: the information is genuinely redundant for sighted
+ * users and genuinely missing for everyone else.
+ */
+export function CollectionRegion({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <VStack gap={4} as="section">
+      <VisuallyHidden>
+        <Heading level={2}>{label}</Heading>
+      </VisuallyHidden>
+      {children}
+    </VStack>
+  );
+}