`docs/superpowers/specs/2026-03-27-project-showcase-design.md`

69 lines

# Project Showcase Pages — Design Spec

**Date:** 2026-03-27
**Status:** Approved

## Overview

Add a `/projects` section to goodquestion.ai showcasing 5 Shopify client builds. Each project gets a dedicated case study page with challenges, solutions, and live screenshots.

## Pages

### `/projects` (Index)
- Hero: "What I've Built" heading + subtitle
- 5 project cards in a responsive grid (2-col desktop, 1-col mobile)
- Each card: screenshot thumbnail, project name, one-line description, "View Case Study" CTA
- Uses BlogLayout for consistent nav/footer

### Individual Project Pages (Standalone)
Each at `/projects/{slug}`:
- **Hero:** Full-width site screenshot, project name, live URL link
- **Overview:** 2-3 sentence description
- **The Challenge:** What made this project hard
- **The Solution:** Bullet points with expanded detail
- **Tech Stack:** Technology badges
- **Back to Projects** nav link

## Projects

### 1. Fresh Cut Paper (freshcutpaper.com)
- **Description:** Vibrant 3D paper flower cards and gifts
- **Challenge:** Selling 3D handcrafted paper art online requires conveying depth and dimension that flat product photos can't capture. Seasonal demand spikes (Mother's Day, holidays) stressed inventory management. Generic theme didn't match the brand's artisanal identity.
- **Solutions:** Custom theme for pop-up designs, performance optimization, inventory app integration

### 2. HomeKor (homekor.com)
- **Description:** Curated art, mirrors, and custom framing tools
- **Challenge:** Custom framing requires non-standard product configuration — customers select frame styles, mat options, and upload photos, creating complex checkout flows. Mobile users were abandoning carts due to poor responsive design.
- **Solutions:** Theme upgrade, custom framing/personalization apps, navigation + responsive redesign

### 3. DW Wallcoverings (designerwallcoverings.com)
- **Description:** Leading architectural & interior designer resource for 25+ years
- **Challenge:** Massive catalog spanning thousands of SKUs across dozens of material types. Products needed complex categorization, high-res image galleries for texture detail, and multi-tier pricing.
- **Solutions:** Premium theme customization, catalog/gallery app integration, checkout optimization

### 4. Airsoft Eire (airsofteire.com)
- **Description:** Replica customization — optics, attachments, accessories
- **Challenge:** Accessories have complex compatibility requirements — customers need parts that fit their exact model. Slow performance losing mobile shoppers. No smart filtering in a high-SKU catalog.
- **Solutions:** Performance upgrades, product filters + live search, navigation + mobile enhancement

### 5. Rose & Harry's NY (roseandharrysny.com)
- **Description:** Quality tznius tops and t-shirts uniting fashion and function
- **Challenge:** Niche market at the intersection of fashion and faith — needed to showcase contemporary style while communicating modesty standards. Original theme didn't highlight fabric quality or fit details.
- **Solutions:** Theme customization for quality focus, promo/newsletter apps, mobile + speed optimization

## Visual Design

- **Style:** Standalone pages (like hire.astro) with inline CSS
- **Colors:** Dark bg #0A0A0A, brass accent #E85D26, card bg #111111
- **Fonts:** Playfair Display (headings), Inter (body)
- **Challenge sections:** Brass left border, slightly lighter bg
- **Solution bullets:** Checkmark icons
- **Responsive:** 640px breakpoint, single-column mobile

## Navigation
- Add "Projects" link to BlogLayout header between "About" and "Hire"

## Assets
- Live screenshots captured via browser automation
- Saved to `/public/images/projects/{slug}.png`