feat: add preview page templates with theme styling

Implement all 7 preview pages showcasing theme customization:
- Home page: hero, featured products, testimonials, categories
- Collection page: product grid with filters and sorting
- Product detail page (PDP): gallery, variants, add to cart
- Cart page: cart items with quantity controls and order summary
- About page: company story and values
- Contact page: contact form and business information
- 404 error page: error message with product suggestions

Features:
- All pages use CSS custom properties for theming
- Preview data from PreviewData module (mock products, testimonials, categories)
- Responsive layouts with Tailwind utilities
- Grid columns respect theme settings
- Colors, typography, shapes, and spacing all theme-aware
- Components created as embed_templates for clean separation

Technical implementation:
- Created PreviewPages component module with embed_templates
- Wired up preview_data in LiveView mount
- Updated index.html.heex to render preview pages based on @preview_page
- All pages styled with inline styles using CSS variables
- Scrollable preview frame with max-height

All tests passing (197 total).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-30 22:06:04 +00:00
parent da770f121f
commit 6a3069f854
11 changed files with 848 additions and 48 deletions

View File

@@ -90,7 +90,7 @@ defmodule SimpleshopThemeWeb.ThemeLiveTest do
|> element("button", "Collection")
|> render_click()
assert html =~ "Preview: Collection"
assert html =~ "All Products"
end
test "save theme button works", %{conn: conn} do