{
handleCollegeClick(college)}
style={{ animationDelay: `${index * 0.1}s` }}
>
diff --git a/src/app/food/[slug]/styles/CollegePage.module.scss b/src/app/food/[slug]/styles/CollegePage.module.scss
index ba941a9f..c5c2a408 100644
--- a/src/app/food/[slug]/styles/CollegePage.module.scss
+++ b/src/app/food/[slug]/styles/CollegePage.module.scss
@@ -396,24 +396,27 @@
}
.foodCard {
- background: rgba(255, 255, 255, 0.95);
+ background: var(--kampyn-component-card-dish-background, rgba(255, 255, 255, 0.95));
backdrop-filter: blur(10px);
- border-radius: 20px;
+ border-radius: var(--kampyn-component-card-dish-radius, 20px);
padding: 1.25rem;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-dish-shadow,
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 2px 4px -1px rgba(0, 0, 0, 0.03),
- 0 0 0 1px rgba(226, 232, 240, 0.5);
- border: 1px solid rgba(226, 232, 240, 0.8);
+ 0 0 0 1px rgba(226, 232, 240, 0.5)
+ );
+ border: 1px solid var(--kampyn-component-card-dish-border, rgba(226, 232, 240, 0.8));
min-height: 450px;
box-sizing: border-box;
overflow: hidden;
position: relative;
+ color: var(--kampyn-component-card-dish-title, var(--kampyn-color-text, #1e293b));
&::before {
content: '';
@@ -430,11 +433,17 @@
.foodCard:hover {
transform: translateY(-8px) scale(1.02);
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-dish-hoverShadow,
0 20px 40px -10px rgba(var(--secondary-color-rgb, 78, 161, 153), 0.2),
0 8px 12px -4px rgba(0, 0, 0, 0.1),
- 0 0 0 1px rgba(var(--secondary-color-rgb, 78, 161, 153), 0.2);
- border-color: rgba(var(--secondary-color-rgb, 78, 161, 153), 0.3);
+ 0 0 0 1px rgba(var(--secondary-color-rgb, 78, 161, 153), 0.2)
+ );
+ border-color: var(--kampyn-component-card-dish-border, rgba(var(--secondary-color-rgb, 78, 161, 153), 0.3));
+ background: var(
+ --kampyn-component-card-dish-hoverBackground,
+ var(--kampyn-component-card-dish-background, rgba(255, 255, 255, 0.95))
+ );
&::before {
opacity: 1;
@@ -1069,27 +1078,36 @@
}
.vendorCard {
- background: rgba(255, 255, 255, 0.9);
+ background: var(--kampyn-component-card-vendor-background, rgba(255, 255, 255, 0.9));
backdrop-filter: blur(10px);
- border-radius: 20px;
+ border-radius: var(--kampyn-component-card-vendor-radius, 20px);
overflow: hidden;
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-vendor-shadow,
0 4px 6px -1px rgba(0, 0, 0, 0.1),
- 0 2px 4px -1px rgba(0, 0, 0, 0.06);
- border: 2px solid #e2e8f0; // Neutral border
+ 0 2px 4px -1px rgba(0, 0, 0, 0.06)
+ );
+ border: 2px solid var(--kampyn-component-card-vendor-border, #e2e8f0);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
+ color: var(--kampyn-component-card-vendor-title, var(--kampyn-color-text, #1e293b));
&:hover {
transform: translateY(-5px);
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-vendor-hoverShadow,
0 20px 25px -5px rgba(0, 0, 0, 0.1),
- 0 10px 10px -5px rgba(0, 0, 0, 0.04);
- border-color: #cbd5e1; // Neutral hover border
+ 0 10px 10px -5px rgba(0, 0, 0, 0.04)
+ );
+ border-color: var(--kampyn-component-card-vendor-border, #cbd5e1);
+ background: var(
+ --kampyn-component-card-vendor-hoverBackground,
+ var(--kampyn-component-card-vendor-background, rgba(255, 255, 255, 0.9))
+ );
}
&Selected {
diff --git a/src/app/food/styles/Home.module.scss b/src/app/food/styles/Home.module.scss
index 980e7cac..d2ef220a 100644
--- a/src/app/food/styles/Home.module.scss
+++ b/src/app/food/styles/Home.module.scss
@@ -136,21 +136,24 @@
.collegeCard {
position: relative;
- background: rgba(255, 255, 255, 0.8);
+ background: var(--kampyn-component-card-college-background, rgba(255, 255, 255, 0.8));
backdrop-filter: blur(20px);
- border-radius: 20px;
+ border-radius: var(--kampyn-component-card-college-radius, 20px);
padding: 2rem;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
- border: 1px solid rgba(226, 232, 240, 0.8);
+ border: 1px solid var(--kampyn-component-card-college-border, rgba(226, 232, 240, 0.8));
min-height: 140px;
display: flex;
align-items: center;
overflow: hidden;
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-college-shadow,
0 4px 6px -1px rgba(0, 0, 0, 0.05),
- 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+ 0 2px 4px -1px rgba(0, 0, 0, 0.03)
+ );
animation: fadeInUp 0.6s ease-out backwards;
+ color: var(--kampyn-component-card-college-title, var(--kampyn-color-text, #1e293b));
&::before {
content: '';
@@ -162,16 +165,18 @@
background: linear-gradient(135deg, rgba(var(--secondary-color-rgb, 78, 161, 153), 0.05), rgba(var(--secondary-color-rgb, 78, 161, 153), 0.05));
opacity: 0;
transition: opacity 0.4s ease;
- border-radius: 20px;
+ border-radius: var(--kampyn-component-card-college-radius, 20px);
}
&:hover {
transform: translateY(-8px) scale(1.02);
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-college-hoverShadow,
0 25px 50px -12px rgba(var(--secondary-color-rgb, 78, 161, 153), 0.25),
- 0 0 0 1px rgba(var(--secondary-color-rgb, 78, 161, 153), 0.1);
- border-color: rgba(var(--secondary-color-rgb, 78, 161, 153), 0.3);
- background: rgba(255, 255, 255, 0.95);
+ 0 0 0 1px rgba(var(--secondary-color-rgb, 78, 161, 153), 0.1)
+ );
+ border-color: var(--kampyn-component-card-college-border, rgba(var(--secondary-color-rgb, 78, 161, 153), 0.3));
+ background: var(--kampyn-component-card-college-hoverBackground, rgba(255, 255, 255, 0.95));
&::before {
opacity: 1;
diff --git a/src/app/home/HomeGatewayClient.tsx b/src/app/home/HomeGatewayClient.tsx
index 89ce5a8f..8faea8c6 100644
--- a/src/app/home/HomeGatewayClient.tsx
+++ b/src/app/home/HomeGatewayClient.tsx
@@ -114,7 +114,7 @@ export default function HomeGatewayClient() {
key={card.key}
type="button"
className={styles.optionCard}
- data-theme-component="card.category"
+ data-theme-component="card.home"
onClick={() => router.push(card.route)}
>
{card.title}
diff --git a/src/app/home/page.module.scss b/src/app/home/page.module.scss
index 0589738c..557406c8 100644
--- a/src/app/home/page.module.scss
+++ b/src/app/home/page.module.scss
@@ -69,41 +69,46 @@
display: block;
width: 100%;
text-align: left;
- border-radius: var(--kampyn-component-card-category-radius, var(--kampyn-shape-radiusLg, 20px));
- border: 1px solid var(--kampyn-component-card-category-border, rgba(226, 232, 240, 0.8));
- background: var(--kampyn-component-card-category-background, rgba(255, 255, 255, 0.82));
+ border-radius: var(--kampyn-component-card-home-radius, var(--kampyn-shape-radiusLg, 20px));
+ border: 1px solid var(--kampyn-component-card-home-border, rgba(226, 232, 240, 0.8));
+ background: var(--kampyn-component-card-home-background, rgba(255, 255, 255, 0.82));
backdrop-filter: blur(20px);
padding: 1.75rem;
text-decoration: none;
min-height: 180px;
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-home-shadow,
0 4px 6px -1px rgba(0, 0, 0, 0.05),
- 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+ 0 2px 4px -1px rgba(0, 0, 0, 0.03)
+ );
transition: all 0.25s ease;
cursor: pointer;
+ color: var(--kampyn-component-card-home-title, var(--kampyn-color-text, #1e293b));
}
.optionCard:hover {
transform: translateY(-6px);
- border-color: rgba(var(--primary-color-rgb, 1, 121, 111), 0.3);
+ border-color: var(--kampyn-component-card-home-border, rgba(var(--primary-color-rgb, 1, 121, 111), 0.3));
background: var(
- --kampyn-component-card-category-hoverBackground,
+ --kampyn-component-card-home-hoverBackground,
rgba(255, 255, 255, 0.95)
);
- box-shadow:
+ box-shadow: var(
+ --kampyn-component-card-home-hoverShadow,
0 20px 40px -12px rgba(var(--primary-color-rgb, 1, 121, 111), 0.22),
- 0 0 0 1px rgba(var(--primary-color-rgb, 1, 121, 111), 0.1);
+ 0 0 0 1px rgba(var(--primary-color-rgb, 1, 121, 111), 0.1)
+ );
}
.cardTitle {
font-size: 1.35rem;
font-weight: 700;
- color: var(--kampyn-component-card-category-title, var(--kampyn-color-text, #1e293b));
+ color: var(--kampyn-component-card-home-title, var(--kampyn-color-text, #1e293b));
margin-bottom: 0.65rem;
}
.cardDescription {
- color: var(--kampyn-color-textMuted, #64748b);
+ color: var(--kampyn-component-card-home-description, var(--kampyn-color-textMuted, #64748b));
margin-bottom: 1.1rem;
line-height: 1.6;
}
diff --git a/src/app/tenant-studio/ThemeStudioPanel.tsx b/src/app/tenant-studio/ThemeStudioPanel.tsx
index 8a667c8c..707ae93a 100644
--- a/src/app/tenant-studio/ThemeStudioPanel.tsx
+++ b/src/app/tenant-studio/ThemeStudioPanel.tsx
@@ -26,6 +26,41 @@ type ThemeSection = "tokens" | "components" | "pages" | "importExport";
const COLOR_TOKEN_KEYS = Object.keys(DEFAULT_TOKENS.color) as (keyof typeof DEFAULT_TOKENS.color)[];
+/** Human-readable labels for shopper card ids in Tenant Studio */
+const CARD_ID_LABELS: Record = {
+ home: "Home option",
+ college: "College picker",
+ vendor: "Vendor tile",
+ dish: "Dish / product",
+ offer: "Special offer",
+ cartItem: "Cart item",
+ bill: "Bill panel",
+ restaurant: "Restaurant",
+ category: "Category",
+ membership: "Membership",
+ wallet: "Wallet",
+ analytics: "Analytics",
+ statistics: "Statistics",
+ coupon: "Coupon",
+ profile: "Profile",
+ order: "Order",
+ notification: "Notification",
+};
+
+const SHOPPER_CARD_PREVIEW_IDS = [
+ "home",
+ "college",
+ "vendor",
+ "dish",
+ "offer",
+ "cartItem",
+ "bill",
+] as const;
+
+function cardLabel(id: string): string {
+ return CARD_ID_LABELS[id] || id;
+}
+
function setDeep(
obj: ThemeDocument,
path: string[],
@@ -425,7 +460,7 @@ export default function ThemeStudioPanel({ triggerToast, onPublished }: ThemeStu
>
{(COMPONENT_CATALOG[componentCategory].ids as readonly string[]).map((id) => (
))}
@@ -621,31 +656,98 @@ export default function ThemeStudioPanel({ triggerToast, onPublished }: ThemeStu
>
Navbar · {primary}
-
-
- Dish card
-
-
- Description preview
-
-
+
+ Card gallery — click to edit
+
+
+ {SHOPPER_CARD_PREVIEW_IDS.map((id) => {
+ const selected = componentId === id;
+ return (
+
+ );
+ })}
+
+
- ₹120
-
-
+
+ Dish card
+
+
+ Description preview
+
+
+ ₹120
+
+