SPECTRUM EYE CARE TEMPLATE STRUCTURE
==========================================

STEP 1: PAGE INVENTORY
---------------------
Primary Pages:
- Homepage (main landing)
- About Us
- Services Hub
- Individual Service Pages:
  * General Eye Care
  * Eye Exams for Children  
  * Special Eye Testing
  * Dry Eye Clinic
  * Myopia Management
  * LASIK Eye Surgery
- Products Hub
- Individual Product Pages:
  * Eyeglasses and Frames
  * Designer Sunglasses
  * Contact Lenses
  * New Lens Technology
- Location Pages (3):
  * Uptown Charlotte
  * South Charlotte
  * South End Charlotte
- Contact/Appointment Pages
- Blog/Educational Content
- Career/Work at Spectrum

STEP 2: COMPONENT LIBRARY
------------------------
Reusable UI Elements:

Navigation Components:
- Main navigation header
- Mobile hamburger menu
- Breadcrumb navigation
- Footer navigation

Content Components:
- Hero sections (full-width background image)
- Service cards (image, title, description, CTA)
- Location cards (address, hours, contact, special notes)
- Promotion banners
- Staff bio cards
- Testimonial cards
- Brand partner logos grid
- Instagram feed integration

Interactive Elements:
- Contact forms
- Appointment booking CTAs
- Phone number click-to-call
- Map integrations
- Image galleries/sliders

Informational Components:
- FAQ sections
- Feature comparison tables
- Process step indicators
- Educational video embeds
- Blog post previews

STEP 3: CONTENT MAPPING
----------------------

TEMPLATE_STRUCTURE: {
  template_name: "Homepage",
  layout_hierarchy: {
    header: {
      components: ["logo", "main_navigation", "phone_cta", "appointment_cta"],
      behavior: "sticky"
    },
    hero_section: {
      elements: ["primary_headline", "subheadline", "seasonal_message", "hero_background_image", "location_quick_access"],
      layout_type: "full-width"
    },
    content_sections: [
      {
        section_name: "Location Contact Cards",
        components: ["location_card", "contact_info", "parking_notes"],
        content_type: "mixed"
      },
      {
        section_name: "Primary Services Showcase",
        components: ["service_grid", "service_cards", "learn_more_ctas"],
        content_type: "image_text_combo"
      },
      {
        section_name: "Specialized Services",
        components: ["dry_eye_clinic_highlight", "orthokeratology_feature", "myopia_management_info", "specialty_contacts_info"],
        content_type: "feature_blocks"
      },
      {
        section_name: "Promotions",
        components: ["optical_promotions_banner", "hsa_fsa_reminder", "promotional_details"],
        content_type: "promotional_content"
      },
      {
        section_name: "Contact Lens Benefits",
        components: ["benefits_list", "brand_partner_logos"],
        content_type: "text_logo_grid"
      },
      {
        section_name: "Staff Showcase",
        components: ["staff_grid", "experience_highlights"],
        content_type: "bio_cards"
      },
      {
        section_name: "Social Proof",
        components: ["instagram_feed", "social_handle"],
        content_type: "social_media"
      }
    ],
    footer: {
      components: ["location_info", "office_hours", "contact_links", "social_media", "copyright"],
      style: "comprehensive"
    }
  },
  responsive_breakpoints: ["mobile: 320px-768px", "tablet: 768px-1024px", "desktop: 1024px+"],
  reusable_components: [
    "service_cards",
    "location_cards", 
    "cta_buttons",
    "contact_forms",
    "staff_bio_cards",
    "promotion_banners",
    "brand_logo_grids"
  ]
}

STEP 4: RESPONSIVE STRATEGY - MOBILE-FIRST APPROACH
---------------------------------------------------

Mobile (320px-768px):
- Single column layout
- Stacked navigation (hamburger menu)
- Large touch-friendly CTAs
- Simplified hero with key message
- Collapsible sections for services
- Click-to-call prominently displayed
- Location cards stack vertically
- Instagram feed in carousel format

Tablet (768px-1024px):  
- Two-column layout for service cards
- Horizontal navigation with dropdowns
- Hero section maintains impact
- Side-by-side content blocks
- Location cards in 2x2 or 3x1 grid
- Staff cards in 2-column layout

Desktop (1024px+):
- Full multi-column layouts
- Horizontal mega-menu navigation
- Full-width hero sections
- Service cards in 3-4 column grids
- Location cards horizontal layout
- Staff showcase in full grid
- Instagram feed in grid format

Key Mobile-First Considerations:
- Touch-optimized button sizes (44px minimum)
- Legible font sizes (16px+ for body text)
- Fast-loading optimized images
- Simplified forms with large input fields
- Easy access to phone numbers and directions
- Streamlined appointment booking flow
- Accessible color contrast ratios
- Performance optimization for slower connections

Brand-Specific Responsive Features:
- Prominent display of all 3 location options
- Easy access to parking validation info for Uptown
- Clear optical shop hours differentiation
- Mobile-friendly appointment scheduling
- Touch-friendly service exploration
- Location-aware content prioritization