Refactor homepage storefront into modular tenant-configurable sections #109

Copilot · 2025-12-06T19:52:40Z

The homepage was monolithic and lacked tenant customization. This refactors it into five modular sections with a configuration system and adds newsletter subscription functionality.

Architecture Changes

Type System

src/types/storefront-config.ts: Configuration types for hero styles (gradient/image/minimal), category grid columns (2/3/4), featured product counts (8/12/16), and newsletter settings
src/lib/storefront/get-default-config.ts: Dynamic default generator using store name/description

Modular Components (src/app/store/[slug]/components/homepage/)

hero-section.tsx: Three style variants with configurable CTAs and backgrounds
trust-badges.tsx: Icon-mapped badges with enable/disable toggle
categories-section.tsx: Configurable grid layout with product counts
featured-section.tsx: Wraps ProductGrid with empty state handling
newsletter-section.tsx: Client component with email validation and state management

API Route

src/app/store/[slug]/actions/subscribe/route.ts: Newsletter subscription endpoint with validation (ready for Resend integration via TODOs)

Homepage Refactor

// Before: 263 lines of inline JSX
<section className="...">
  <div className="hero-content">...</div>
</section>

// After: 135 lines with composition
const config = getDefaultStorefrontConfig(store);

<HeroSection store={store} config={config.homepage.hero} />
<TrustBadges config={config.homepage.trustBadges} />
<CategoriesSection store={store} categories={categories} config={config.homepage.categories} />
<FeaturedSection store={store} products={products} config={config.homepage.featuredProducts} />
<NewsletterSection storeSlug={store.slug} config={config.homepage.newsletter} />

Newsletter Form States

The form implements loading → success/error → auto-reset flow:

const [state, setState] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');

// Validates email client-side before API call
if (!isValidEmail(email)) {
  setErrorMessage("Please enter a valid email address");
  return;
}

// Shows success for 5s then resets
setState('success');
setTimeout(() => setState('idle'), 5000);

Configuration System

Future tenant customization ready:

interface StorefrontConfig {
  homepage: {
    hero: { style: 'gradient' | 'image' | 'minimal'; headline?: string; ... }
    categories: { enabled: boolean; maxCount: number; columns: 2 | 3 | 4; ... }
    featuredProducts: { enabled: boolean; count: 8 | 12 | 16; ... }
    newsletter: { enabled: boolean; headline: string; ... }
    trustBadges: { enabled: boolean; badges: TrustBadge[]; }
  }
}

Currently uses defaults; add storefrontConfig JSON field to Store model for per-tenant overrides.

Visual Results

Desktop (1280px)

Mobile (375px)

Tablet (768px)

Newsletter Validation

Notes

Server Components by default; only newsletter is client-side for form interactivity
Newsletter route includes TODOs for NewsletterSubscription model and Resend double opt-in
Hero backgroundImage prop ready for future upload feature
Section ordering/visibility configurable via enabled flags

Original prompt

Overview

Refactor and enhance the Homepage Storefront Layout at src/app/store/[slug]/page.tsx to be more modular, tenant-configurable, and feature-complete. The layout should support hero, categories grid, featured products, and newsletter sections with per-tenant customization.

Current State

The existing src/app/store/[slug]/page.tsx has:

A basic hero section with gradient background
Trust badges section
Categories grid
Featured products grid

Requirements

1. Tenant-Configurable Layout System

Create a layout configuration type that allows each store/tenant to customize:

Hero section (title, subtitle, CTA buttons, background style)
Categories display (number of categories, layout style)
Featured products (number of products, heading text)
Newsletter section (headline, description, privacy text)
Section ordering/visibility

2. Refactored Homepage Sections

Hero Section (Enhanced)

Support for different hero styles: gradient, image, minimal
Configurable headline and subheadline
Primary and secondary CTA buttons
Animated gradient background option
Store branding integration

Categories Grid Section (Enhanced)

Configurable grid columns (2, 3, or 4)
Support for "View All" link
Category card with hover effects
Product count badges
Image or icon fallback

Featured Products Section (Enhanced)

Configurable product count (8, 12, or 16)
Section heading customization
Empty state design
Integration with existing ProductGrid component

Newsletter Section (NEW)

Create a new newsletter subscription section with:

Headline and description text
Email input with validation
Subscribe button
Privacy policy link
Success/error state handling
Integration point for email service (Resend)

3. Component Architecture

Create modular section components in src/app/store/[slug]/components/:

homepage/
├── hero-section.tsx         # Configurable hero with multiple styles
├── categories-section.tsx   # Categories grid with tenant config
├── featured-section.tsx     # Featured products wrapper
├── newsletter-section.tsx   # Newsletter subscription form
├── trust-badges.tsx         # Trust badges section
└── types.ts                 # Shared types for homepage config

4. Tenant Configuration Types

Create src/types/storefront-config.ts with:

interface StorefrontConfig {
  homepage: {
    hero: {
      style: 'gradient' | 'image' | 'minimal';
      headline?: string;
      subheadline?: string;
      primaryCta?: { text: string; href: string };
      secondaryCta?: { text: string; href: string };
      backgroundImage?: string;
    };
    categories: {
      enabled: boolean;
      maxCount: number;
      columns: 2 | 3 | 4;
      showProductCount: boolean;
    };
    featuredProducts: {
      enabled: boolean;
      count: 8 | 12 | 16;
      heading: string;
      subheading?: string;
    };
    newsletter: {
      enabled: boolean;
      headline: string;
      description: string;
      privacyText?: string;
    };
    trustBadges: {
      enabled: boolean;
      badges: Array<{ icon: string; title: string; description: string }>;
    };
  };
}

5. Default Configuration

Provide sensible defaults for stores that don't have custom configuration, using the store's name and description dynamically.

6. Technical Requirements

Use Next.js 16 App Router patterns
Use shadcn/ui components (Button, Input, Card, Badge)
Tailwind CSS for styling
TypeScript strict mode
Mobile-first responsive design
Accessibility (ARIA labels, keyboard navigation)
Server Component where possible, Client Component only for interactivity

7. Files to Create/Modify

Create:

src/types/storefront-config.ts - Tenant configuration types
src/app/store/[slug]/components/homepage/hero-section.tsx
src/app/store/[slug]/components/homepage/categories-section.tsx
src/app/store/[slug]/components/homepage/featured-section.tsx
src/app/store/[slug]/components/homepage/newsletter-section.tsx
src/app/store/[slug]/components/homepage/trust-badges.tsx
src/app/store/[slug]/components/homepage/types.ts
src/lib/storefront/get-default-config.ts - Default config generator

Modify:

src/app/store/[slug]/page.tsx - Refactor to use new modular components

8. Newsletter API Integration

Create a server action or API route for newsletter subscription:

src/app/store/[slug]/actions/subscribe.ts - Server action for newsletter

Acceptance Criteria

Homepage renders with all four sections (hero, categories, featured, newsletter)
Each section is a separate, reusable component
Tenant configuration type is properly defined
Default configuration works for stores without custom config
Newsletter form validates email and shows feedback
Mobile responsive (tested at 375px, 768px, 1024px)
TypeScript compiles with no errors
All existing functionality...

This pull request was created as a result of the following prompt from Copilot chat.

Overview

Refactor and enhance the Homepage Storefront Layout at src/app/store/[slug]/page.tsx to be more modular, tenant-configurable, and feature-complete. The layout should support hero, categories grid, featured products, and newsletter sections with per-tenant customization.

Current State

The existing src/app/store/[slug]/page.tsx has:

A basic hero section with gradient background

Trust badges section

Categories grid

Featured products grid

Requirements

1. Tenant-Configurable Layout System

Create a layout configuration type that allows each store/tenant to customize:

Hero section (title, subtitle, CTA buttons, background style)

Categories display (number of categories, layout style)

Featured products (number of products, heading text)

Newsletter section (headline, description, privacy text)

Section ordering/visibility

2. Refactored Homepage Sections

Hero Section (Enhanced)

Support for different hero styles: gradient, image, minimal

Configurable headline and subheadline

Primary and secondary CTA buttons

Animated gradient background option

Store branding integration

Categories Grid Section (Enhanced)

Configurable grid columns (2, 3, or 4)

Support for "View All" link

Category card with hover effects

Product count badges

Image or icon fallback

Featured Products Section (Enhanced)

Configurable product count (8, 12, or 16)

Section heading customization

Empty state design

Integration with existing ProductGrid component

Newsletter Section (NEW)

Create a new newsletter subscription section with:

Headline and description text

Email input with validation

Subscribe button

Privacy policy link

Success/error state handling

Integration point for email service (Resend)

3. Component Architecture

Create modular section components in src/app/store/[slug]/components/:
homepage/
├── hero-section.tsx         # Configurable hero with multiple styles
├── categories-section.tsx   # Categories grid with tenant config
├── featured-section.tsx     # Featured products wrapper
├── newsletter-section.tsx   # Newsletter subscription form
├── trust-badges.tsx         # Trust badges section
└── types.ts                 # Shared types for homepage config
4. Tenant Configuration Types

Create src/types/storefront-config.ts with:
interface StorefrontConfig {
  homepage: {
    hero: {
      style: 'gradient' | 'image' | 'minimal';
      headline?: string;
      subheadline?: string;
      primaryCta?: { text: string; href: string };
      secondaryCta?: { text: string; href: string };
      backgroundImage?: string;
    };
    categories: {
      enabled: boolean;
      maxCount: number;
      columns: 2 | 3 | 4;
      showProductCount: boolean;
    };
    featuredProducts: {
      enabled: boolean;
      count: 8 | 12 | 16;
      heading: string;
      subheading?: string;
    };
    newsletter: {
      enabled: boolean;
      headline: string;
      description: string;
      privacyText?: string;
    };
    trustBadges: {
      enabled: boolean;
      badges: Array<{ icon: string; title: string; description: string }>;
    };
  };
}
5. Default Configuration

Provide sensible defaults for stores that don't have custom configuration, using the store's name and description dynamically.

6. Technical Requirements

Use Next.js 16 App Router patterns

Use shadcn/ui components (Button, Input, Card, Badge)

Tailwind CSS for styling

TypeScript strict mode

Mobile-first responsive design

Accessibility (ARIA labels, keyboard navigation)

Server Component where possible, Client Component only for interactivity

7. Files to Create/Modify

Create:

src/types/storefront-config.ts - Tenant configuration types

src/app/store/[slug]/components/homepage/hero-section.tsx

src/app/store/[slug]/components/homepage/categories-section.tsx

src/app/store/[slug]/components/homepage/featured-section.tsx

src/app/store/[slug]/components/homepage/newsletter-section.tsx

src/app/store/[slug]/components/homepage/trust-badges.tsx

src/app/store/[slug]/components/homepage/types.ts

src/lib/storefront/get-default-config.ts - Default config generator

Modify:

src/app/store/[slug]/page.tsx - Refactor to use new modular components

8. Newsletter API Integration

Create a server action or API route for newsletter subscription:

src/app/store/[slug]/actions/subscribe.ts - Server action for newsletter

Acceptance Criteria

Homepage renders with all four sections (hero, categories, featured, newsletter)

Each section is a separate, reusable component

Tenant configuration type is properly defined

Default configuration works for stores without custom config

Newsletter form validates email and shows feedback

Mobile responsive (tested at 375px, 768px, 1024px)

TypeScript compiles with no errors

All existing functionality preserved

References

Existing layout: src/app/store/[slug]/layout.tsx

Existing page: src/app/store/[slug]/page.tsx

ProductGrid component: src/app/store/[slug]/components/product-grid.tsx

shadcn/ui components: src/components/ui/

Issue [Phase 1] Storefront Template #1 (Basic) #21 and Epic [Phase 1] Epic: Storefront #19 for context

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

vercel · 2025-12-06T19:52:51Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
stormcomui	Error			Dec 7, 2025 0:26am

- Created StorefrontConfig types with HeroConfig, CategoriesConfig, FeaturedProductsConfig, NewsletterConfig, TrustBadgesConfig - Implemented getDefaultStorefrontConfig generator for dynamic defaults - Created modular homepage components: * HeroSection with gradient/image/minimal styles * TrustBadges with configurable badges and icons * CategoriesSection with configurable grid columns (2/3/4) * FeaturedSection with empty state and product count config * NewsletterSection with client-side form validation - Added newsletter subscription API route - Refactored page.tsx to use modular components - All TypeScript type checks pass - Build completes successfully Co-authored-by: syed-reza98 <71028588+syed-reza98@users.noreply.github.com>

Initial plan

ffb28f5

Copilot AI assigned Copilot and syed-reza98 Dec 6, 2025

github-project-automation bot added this to StormCom Dec 6, 2025

github-project-automation bot moved this to Backlog in StormCom Dec 6, 2025

Copilot started work on behalf of syed-reza98 December 6, 2025 19:52 View session

vercel bot had a problem deploying to Preview – stormcomui December 6, 2025 19:53 Failure

vercel bot had a problem deploying to Preview – stormcomui December 6, 2025 20:04 Failure

Copilot AI changed the title ~~[WIP] Refactor and enhance homepage storefront layout for tenant customization~~ Refactor homepage storefront into modular tenant-configurable sections Dec 6, 2025

Copilot AI requested a review from syed-reza98 December 6, 2025 20:13

Copilot finished work on behalf of syed-reza98 December 6, 2025 20:13

Merge branch 'main' into copilot/refactor-homepage-storefront-layout

3572b95

vercel bot had a problem deploying to Preview – stormcomui December 7, 2025 00:26 Failure

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Refactor homepage storefront into modular tenant-configurable sections #109

Refactor homepage storefront into modular tenant-configurable sections #109

Uh oh!

Copilot AI commented Dec 6, 2025 •

edited

Loading

Uh oh!

vercel bot commented Dec 6, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Refactor homepage storefront into modular tenant-configurable sections #109

Are you sure you want to change the base?

Refactor homepage storefront into modular tenant-configurable sections #109

Uh oh!

Conversation

Copilot AI commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Architecture Changes

Newsletter Form States

Configuration System

Visual Results

Notes

Overview

Current State

Requirements

1. Tenant-Configurable Layout System

2. Refactored Homepage Sections

Hero Section (Enhanced)

Categories Grid Section (Enhanced)

Featured Products Section (Enhanced)

Newsletter Section (NEW)

3. Component Architecture

4. Tenant Configuration Types

5. Default Configuration

6. Technical Requirements

7. Files to Create/Modify

8. Newsletter API Integration

Acceptance Criteria

Overview

Current State

Requirements

1. Tenant-Configurable Layout System

2. Refactored Homepage Sections

Hero Section (Enhanced)

Categories Grid Section (Enhanced)

Featured Products Section (Enhanced)

Newsletter Section (NEW)

3. Component Architecture

4. Tenant Configuration Types

5. Default Configuration

6. Technical Requirements

7. Files to Create/Modify

8. Newsletter API Integration

Acceptance Criteria

References

Uh oh!

vercel bot commented Dec 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Dec 6, 2025 •

edited

Loading

vercel bot commented Dec 6, 2025 •

edited

Loading