YarnWise Static Site (SUR-63 Phase 4.1)

React + Tailwind CSS static site for YarnWise crochet & knitting brand.

Built Files

The dist/ folder contains the production-ready static site:

• index.html — Entry point (SPA)
• assets/ — CSS and JS bundles

Pages Implemented

Page	Route	Description
Home	/	Hero, featured content, features section, newsletter CTA
Blog Listing	/blog	Article grid with category filters, pagination
Blog Post	/blog/:slug	Article template with sidebar (related posts, newsletter)
About	/about	Mission statement, team, values
Opt-in	/starter-kit	Lead capture page with form, social proof, testimonials
Thank-you	/thanks	Confirmation page with email series preview

Brand Implementation

Colors (matches brand kit exactly):

• Heather Plum: #7B5EA7 (primary CTAs, headers)
• Cream Linen: #FAF7F2 (background)
• Warm Charcoal: #2D2D2D (body text)
• Sage Moss: #8FAF7E (accents)
• Dusty Rose: #D4877C (accents)
• Saffron Gold: #E8A838 (secondary CTAs)

Typography:

• Headings: Lora (serif) — Google Fonts
• Body: Inter (sans-serif) — Google Fonts

Development

npm install
npm run dev      # Development server
npm run build    # Production build to dist/

Deployment

This is a Single Page Application (SPA). For static hosting, configure:

• All routes → index.html (200 rewrite/redirect)
• Or use hash-based routing by modifying vite.config.ts

Source Files

• src/pages/ — Page components
• src/components/ — Shared components (Navbar, Footer, NewsletterCTA)
• tailwind.config.js — Brand color tokens
• index.html — Font loading (Google Fonts)