Rename store items to store products and add an empty-state CTA.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/pages/StoreItemsPage.module.css

@@ -14,6 +14,82 @@
   border-radius: var(--radius);
 }
 
+.emptyState {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 56px 28px;
+  text-align: center;
+  background: var(--glass-bg);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius);
+  box-shadow: var(--glass-shadow);
+}
+
+.emptyIcon {
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 6px;
+  border-radius: 16px;
+  color: var(--primary);
+  background: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.72) 0%,
+    rgba(var(--primary-rgb) / 0.12) 100%
+  );
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+}
+
+.emptyTitle {
+  margin: 0;
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.emptyHint {
+  margin: 0 0 8px;
+  max-width: 360px;
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--text-secondary);
+}
+
+.emptyCta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  text-align: center;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  border-radius: 999px;
+  box-shadow: 0 8px 20px rgba(var(--primary-rgb) / 0.32);
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+button.emptyCta {
+  text-align: center;
+}
+
+.emptyCta:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 12px 26px rgba(var(--primary-rgb) / 0.4);
+}
+
 .error {
   margin-bottom: 16px;
   padding: 12px 14px;

apps/business/src/pages/StoreItemsPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Plus, RotateCcw, Search } from 'lucide-react'
+import { Package, Plus, RotateCcw, Search } from 'lucide-react'
 import { Breadcrumbs } from '../components/Breadcrumbs'
 import { PageTitle } from '../components/PageTitle'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
@@ -283,7 +283,7 @@ function StoreItemsPageContent() {
 
       <div className={pageStyles.pageHeader}>
         <div>
-          <PageTitle en="STORE ITEMS">{t('title.storeItems')}</PageTitle>
+          <PageTitle en="STORE PRODUCTS">{t('title.storeItems')}</PageTitle>
           <p className={pageStyles.pageSubtitle}>{t('storeItems.subtitle')}</p>
         </div>
       </div>
@@ -370,7 +370,21 @@ function StoreItemsPageContent() {
       {isLoading ? (
         <p className={styles.empty}>{t('storeItems.loading')}</p>
       ) : listings.length === 0 ? (
-        <p className={styles.empty}>{t('storeItems.empty')}</p>
+        <div className={styles.emptyState}>
+          <div className={styles.emptyIcon} aria-hidden="true">
+            <Package size={28} strokeWidth={1.75} />
+          </div>
+          <h3 className={styles.emptyTitle}>{t('storeItems.empty')}</h3>
+          <p className={styles.emptyHint}>{t('storeItems.emptyHint')}</p>
+          <button
+            type="button"
+            className={styles.emptyCta}
+            onClick={() => setCreateOpen(true)}
+          >
+            <Plus size={18} strokeWidth={2.25} />
+            {t('storeItems.add')}
+          </button>
+        </div>
       ) : filteredListings.length === 0 ? (
         <p className={styles.empty}>{t('storeItems.emptyFiltered')}</p>
       ) : (