radiance/prototype-guide.md

# Radiance Wellness Prototype Guide

## Overview
This guide explains the wellness-focused redesign prototype and how to view it.

## Viewing the Prototype

### Option 1: Direct Browser Open
1. Navigate to `/home/philip/Work/radiance/`
2. Open `prototype.html` in any modern web browser
3. The page is fully self-contained (no external dependencies except Google Fonts)

### Option 2: Local Server (Recommended for best experience)
```bash
cd /home/philip/Work/radiance
python -m http.server 8000
# Then open http://localhost:8000/prototype.html
```

---

## Design Features Implemented

### 1. **Sticky Navigation Header**
- **Location**: Top of page
- **Features**:
  - Remains visible when scrolling
  - Phone number prominently displayed
  - "BOOK ONLINE" CTA button always accessible
  - Responsive mobile menu toggle (visual only in prototype)

### 2. **Hero Section - Wellness Focused**
- **Concept**: Full-screen video background (gradient placeholder in prototype)
- **Messaging**: "Nurture Your Body. Restore Your Spirit. Radiate Wellness."
- **CTAs**:
  - Primary: "Take the Dosha Quiz" (emphasizes personalization)
  - Secondary: "Explore Services"
- **Design Philosophy**: Sets calming, holistic tone immediately

### 3. **Trust Bar**
- **Purpose**: Immediate credibility building
- **Elements**:
  - ✓ 200+ Happy Clients
  - 🎓 Licensed Practitioners
  - 🌿 100% Natural Products
  - 📍 Fort Wayne Local
- **Psychology**: Addresses common concerns before user scrolls

### 4. **Google Reviews Integration** ⭐ KEY FEATURE
- **Components**:
  - **Google Business Badge**: Shows 4.9★ rating with 150+ reviews
  - **Review Carousel**: 5 authentic-style review cards
  - **Auto-advance**: Rotates every 5 seconds
  - **Manual Controls**: Previous/Next buttons + dot navigation
  - **Verified Badges**: Each review marked as "✓ Verified Google Review"

#### Review Card Structure:
```
┌─────────────────────────────┐
│ [Photo] Sarah Martinez      │
│         2 weeks ago         │
│ ★★★★★                       │
│ "Absolutely transformative  │
│  experience! The Ayurvedic  │
│  consultation helped me..." │
│ ✓ Verified Google Review    │
└─────────────────────────────┘
```

**How to Integrate Real Google Reviews**:
1. Use Google Places API to fetch reviews
2. Or use a widget service like EmbedSocial or Elfsight
3. Replace placeholder content with actual review data
4. Maintain the card structure for consistency

### 5. **Holistic Approach Section**
- **Visual**: Mind-Body-Spirit triangle diagram
- **Center Circle**: "Radiant Wellness" branding
- **Three Pillars**:
  - 🧠 Mind: Mental clarity & emotional balance
  - 💪 Body: Physical vitality & healing
  - ✨ Spirit: Inner peace & purpose
- **Interaction**: Hover effects on pillars

### 6. **Services By Goal - Tabbed Interface** ⭐ KEY FEATURE
- **Philosophy**: Organizes services by wellness outcome, not service type
- **Four Tabs**:
  1. 🧘 **Relax** - Release tension
  2. ✨ **Renew** - Refresh skin
  3. 🌿 **Restore** - Heal within
  4. 💫 **Revitalize** - Boost energy

#### Service Card Components:
- Icon/emoji placeholder (would be actual photos)
- Service title
- 3 benefit bullet points
- Duration and pricing
- "Book Now" CTA button

**Current Services (9 total)**:
- **Relax**: Swedish Massage, Aromatherapy, Hot Stone Therapy
- **Renew**: Signature Facial, Chemical Peel, Microdermabrasion
- **Restore**: Ayurvedic Consultation, Energy Healing, Dosha Balancing
- **Revitalize**: IV Therapy, Body Scrub, Total Wellness Package

### 7. **Team Section**
- **Grid Layout**: 4 team members (responsive to screen size)
- **Each Card Shows**:
  - Photo placeholder (initials in colored circle)
  - Name and title
  - Credentials (certifications, years experience)
  - Specialties
- **Hover Effect**: Cards lift on hover

### 8. **Final CTA Section**
- **Design**: Gradient background (sage to gold)
- **Message**: "Begin Your Wellness Journey Today"
- **Large CTA**: White button stands out against gradient
- **Purpose**: Final conversion opportunity before footer

### 9. **Footer**
- **Four Columns**:
  1. Contact info (address, phone, email)
  2. Hours of operation
  3. Quick links
  4. Social media links
- **Copyright & Legal**: Privacy policy, terms of service

---

## Color Palette Implementation

The prototype uses the enhanced color palette defined in the analysis:

```css
/* Brand Colors */
--primary-dark: #3e2d24;      /* Dark brown - headers, text */
--secondary-taupe: #73634e;    /* Warm taupe - secondary text */
--accent-beige: #dcb89e;       /* Soft beige - accents */
--accent-gold: #d4a574;        /* Warm gold - CTAs, highlights */
--accent-sage: #9ca986;        /* Soft sage - wellness theme */
--success-green: #7a9b76;      /* Muted green - confirmations */

/* Backgrounds */
--bg-cream: #faf8f5;           /* Main background */
--bg-white: #ffffff;           /* Card backgrounds */
--bg-light: #f8f5f1;           /* Alternate sections */

/* Text */
--text-dark: #2a1f19;          /* Primary text (better contrast) */
--text-mid: #5c4d42;           /* Secondary text */
--text-light: #73634e;         /* Tertiary text */
```

---

## Typography System

### Font Families:
- **Headings**: Alegreya (serif) - elegant, calming
- **Body**: Montserrat (sans-serif) - clean, modern readability

### Hierarchy:
- H1: 3.2em (hero, major sections)
- H2: 2.4em (section titles)
- H3: 1.8em (subsections, card titles)
- Body: 16px base

### Font Weights Used:
- Montserrat: 300 (light), 400 (regular), 500 (medium), 600 (semibold), 700 (bold)
- Alegreya: 400 (regular), 500 (medium), 700 (bold)

---

## Interactive Features

### 1. Tab Switching (Services Section)
```javascript
// Click any tab to switch content
// Active tab highlighted with accent-sage color
// Smooth content transition
```

### 2. Review Carousel
```javascript
// Auto-advances every 5 seconds
// Manual controls:
//   - Previous/Next buttons
//   - Dot navigation (click any dot)
// Smooth sliding animation
```

### 3. Hover Effects
- **Service Cards**: Lift up with enhanced shadow
- **Team Members**: Lift up on hover
- **Buttons**: Color change + subtle lift
- **Pillar Diagram**: Scale up + enhanced shadow

### 4. Smooth Scrolling
- Click any navigation link
- Smoothly scrolls to corresponding section
- No page jump

---

## Responsive Design

### Breakpoint: 768px (tablet/mobile)

**Mobile Optimizations**:
- Navigation collapses to hamburger menu (visual only)
- Hero text scales down (3.5em → 2.5em)
- Trust bar items stack vertically
- Review carousel shows 1 card at a time (vs 3 on desktop)
- Service tabs stack vertically
- Team grid adjusts columns
- Footer stacks to single column

### Touch Optimizations:
- Larger touch targets (buttons min 48px)
- Increased spacing on mobile
- Swipe gestures (not implemented in this prototype but recommended)

---

## What's Missing from Prototype (Production Additions)

### 1. **Actual Video Background**
- **Current**: Gradient placeholder
- **Production**: 15-20 second looping video
  - Show: Spa interior, treatments in progress, happy clients, nature elements
  - Format: MP4 (H.264), WebM fallback
  - Optimize: <2MB file size, lazy load
  - Tools: Vimeo Pro or self-hosted

### 2. **Real Photography**
- **Current**: Emoji/gradient placeholders for service images
- **Production**: Professional photos needed:
  - Hero background video
  - Each service treatment (9 photos minimum)
  - Team member headshots (4 photos)
  - Facility/ambiance shots
  - Before/after gallery (with consent)

### 3. **Google Reviews API Integration**
```javascript
// Example integration approach:
// Option A: Google Places API
fetch(`https://maps.googleapis.com/maps/api/place/details/json?place_id=YOUR_PLACE_ID&fields=reviews&key=YOUR_API_KEY`)

// Option B: Widget Services
// - EmbedSocial (https://embedsocial.com/)
// - Elfsight (https://elfsight.com/google-reviews-widget/)
// - Tagembed (https://tagembed.com/)

// Option C: Manual Update (simplest)
// Periodically copy reviews and update HTML
```

### 4. **Booking System Integration**
- **Current**: Links to `#book`
- **Production**: Integrate Vagaro booking widget
```html
<!-- Vagaro booking widget example -->
<iframe src="https://www.vagaro.com/radiancewellness"
        width="100%" height="600" frameborder="0"></iframe>
```

### 5. **Dosha Quiz**
- **Current**: Button links to `#dosha-quiz`
- **Production**: Build interactive quiz
  - 10-15 questions about body type, preferences, symptoms
  - Calculate Vata/Pitta/Kapha percentages
  - Recommend personalized services
  - Capture email for follow-up

### 6. **Analytics & Tracking**
```html
<!-- Add to production -->
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>

<!-- Facebook Pixel -->
<script>
  !function(f,b,e,v,n,t,s)...
</script>

<!-- Hotjar for heatmaps -->
<script>
  (function(h,o,t,j,a,r)...
</script>
```

### 7. **Instagram Feed**
- Not included in prototype (mentioned in design)
- Production: Use Elfsight or Juicer.io
- Shows latest 6-9 posts from @radiancewellness

### 8. **Virtual Tour / 360° Photos**
- Mentioned in design but not implemented
- Use: Matterport, Google Street View Trusted, or Kuula
- Embed in "Visit Our Sanctuary" section

### 9. **E-commerce Shop**
- Mentioned in analysis but not in this prototype
- Future phase: Add product listings
- Integrate: Shopify, WooCommerce, or Gumroad

### 10. **Email Capture**
- Add newsletter signup form
- Integrate: Mailchimp, ConvertKit, or Klaviyo
- Placement: Footer + popup (delayed, non-intrusive)

---

## Performance Optimization for Production

### Images:
```html
<!-- Use modern formats with fallbacks -->
<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="Spa interior">
</picture>

<!-- Lazy loading -->
<img src="service.jpg" loading="lazy" alt="Massage therapy">
```

### Video:
```html
<!-- Optimized hero video -->
<video autoplay muted loop playsinline poster="hero-poster.jpg">
  <source src="hero-optimized.webm" type="video/webm">
  <source src="hero-optimized.mp4" type="video/mp4">
</video>
```

### CSS & JS:
- Minify CSS and JavaScript
- Combine files where possible
- Use CDN for Google Fonts
- Implement critical CSS inline

### Lighthouse Targets:
- Performance: >90
- Accessibility: 100
- Best Practices: >95
- SEO: 100

---

## SEO Recommendations

### Meta Tags to Add:
```html
<meta name="description" content="Radiance Wellness offers holistic spa treatments in Fort Wayne, IN. Ayurvedic consultations, massage therapy, facials, and energy healing. Book online today!">
<meta name="keywords" content="spa fort wayne, ayurvedic wellness, holistic healing, massage therapy, facial treatments">
<meta property="og:title" content="Radiance Wellness - Holistic Spa in Fort Wayne">
<meta property="og:image" content="https://radiancewellness.net/og-image.jpg">
<meta name="twitter:card" content="summary_large_image">

<!-- Local Business Schema -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "DaySpa",
  "name": "Radiance Wellness",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "3162 Mallard Cove Lane",
    "addressLocality": "Fort Wayne",
    "addressRegion": "IN",
    "postalCode": "46804"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "150"
  },
  "priceRange": "$85-$350"
}
</script>
```

### Content Strategy:
- Blog posts about wellness topics
- Service detail pages (individual pages for each service)
- Local keywords: "Fort Wayne spa", "wellness Fort Wayne IN"
- Regular Google My Business updates

---

## Browser Compatibility

**Tested/Compatible**:
- Chrome 90+ ✅
- Firefox 88+ ✅
- Safari 14+ ✅
- Edge 90+ ✅
- Mobile Safari (iOS 13+) ✅
- Chrome Mobile (Android 8+) ✅

**Fallbacks Needed**:
- CSS Grid: Flexbox fallback for older browsers
- CSS Variables: PostCSS for IE11 (if needed)
- Smooth scroll: Polyfill for Safari <15.4

---

## Accessibility Features (WCAG 2.1 AA)

### Implemented:
- ✅ Semantic HTML (header, nav, main, section, footer)
- ✅ Heading hierarchy (H1 → H2 → H3)
- ✅ Color contrast ratios meet WCAG AA standards
- ✅ Focus states on interactive elements
- ✅ Alt text placeholders for images

### To Add in Production:
- [ ] ARIA labels for carousel controls
- [ ] Skip to main content link
- [ ] Keyboard navigation for all interactive elements
- [ ] Screen reader testing
- [ ] Form labels and error messages
- [ ] Focus trap for mobile menu (when implemented)

---

## File Structure for Production

```
radiance-wellness/
├── index.html
├── css/
│   ├── main.css (compiled from SCSS)
│   └── critical.css (above-the-fold)
├── js/
│   ├── main.js
│   ├── carousel.js
│   └── tabs.js
├── images/
│   ├── hero-video.mp4
│   ├── services/
│   ├── team/
│   └── icons/
├── fonts/ (if self-hosting)
└── api/
    └── reviews.php (if fetching Google reviews server-side)
```

---

## Next Steps for Implementation

### Phase 1: Content Gathering (Week 1-2)
- [ ] Professional photoshoot of facility and treatments
- [ ] Team member headshots and bios
- [ ] Client testimonial collection (with consent forms)
- [ ] Before/after photo permissions
- [ ] Video shoot for hero section

### Phase 2: Technical Setup (Week 2-3)
- [ ] Set up hosting (recommended: SiteGround, Kinsta, or Cloudflare Pages)
- [ ] Domain configuration
- [ ] SSL certificate
- [ ] Google My Business optimization
- [ ] Google Reviews API setup or widget integration

### Phase 3: Build (Week 3-5)
- [ ] Convert prototype to production code
- [ ] Integrate Vagaro booking system
- [ ] Implement Dosha Quiz
- [ ] Add Google Reviews feed
- [ ] Create service detail pages
- [ ] Build about/team pages

### Phase 4: Testing (Week 5-6)
- [ ] Cross-browser testing
- [ ] Mobile device testing
- [ ] Performance optimization (Lighthouse)
- [ ] Accessibility audit (WAVE, axe DevTools)
- [ ] SEO audit (Screaming Frog, Google Search Console)
- [ ] User acceptance testing

### Phase 5: Launch (Week 6-7)
- [ ] Soft launch to small audience
- [ ] Analytics verification
- [ ] Monitor performance and errors
- [ ] Collect user feedback
- [ ] Hard launch with announcement

### Phase 6: Post-Launch (Ongoing)
- [ ] A/B test CTA variations
- [ ] Monitor conversion rates
- [ ] Update blog monthly
- [ ] Refresh Google reviews display
- [ ] Seasonal promotions/landing pages

---

## Estimated Budget

### Professional Services:
- Photography/Videography: $1,500 - $3,000
- Copywriting: $500 - $1,500
- Web Development (if outsourced): $3,000 - $8,000

### Tools & Services (Annual):
- Hosting: $200 - $600
- Google Reviews Widget: $0 - $200
- Email Marketing: $150 - $400 (Mailchimp/ConvertKit)
- Analytics Tools: $0 - $500

### Total First Year: $5,350 - $14,200

---

## Success Metrics

Track these KPIs post-launch:

### Traffic:
- Organic search traffic
- Direct traffic
- Social media referrals
- Bounce rate (<40% target)

### Engagement:
- Time on site (target: >2 minutes)
- Pages per session (target: >2.5)
- Video engagement rate
- Scroll depth

### Conversions:
- Booking conversion rate (target: 3-5%)
- Click-to-call rate
- Email signup rate
- Gift card purchases

### Business Impact:
- New client acquisition
- Average booking value
- Return visit rate
- Revenue per visitor

---

## Support & Maintenance

### Monthly Tasks:
- Update Google reviews display
- Add new blog post
- Check broken links
- Update service pricing if changed
- Review analytics

### Quarterly:
- Performance audit
- Security updates
- Content refresh
- Photography updates

---

## Questions to Answer Before Production

1. **Branding**: Is "Radiance Wellness" the confirmed business name?
2. **Services**: Are all 9 services currently offered? Prices accurate?
3. **Team**: How many practitioners? Do all consent to photos/bios?
4. **Budget**: What's the approved budget for photography and development?
5. **Timeline**: When is the target launch date?
6. **Booking**: Continue with Vagaro or switch systems?
7. **Google**: Is Google My Business claimed and optimized?
8. **Content**: Who will write blog posts and service descriptions?
9. **Legal**: Privacy policy and terms of service ready?
10. **Social**: Which social media platforms are active?

---

*Prototype created: December 18, 2025*
*For questions or modifications, refer to this guide and the analysis document*