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 the project directory
2. Open index.html in any modern web browser
3. The page loads CSS from css/styles.css and JS from js/main.js

Option 2: Local Server (Recommended for best experience)

cd /path/to/radiance
python -m http.server 8000
# Then open http://localhost:8000

---

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:

/* 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)

// Click any tab to switch content
// Active tab highlighted with accent-sage color
// Smooth content transition

2. Review Carousel

// 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

// 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

<!-- 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

<!-- 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:

<!-- 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:

<!-- 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:

<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/
│   └── styles.css (main stylesheet)
├── js/
│   └── main.js (tab switching, mobile menu, smooth scroll)
├── 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