Skip to main content
Vue

weddings

Luxury Hudson Valley wedding photography site with conversion-optimized design. Features multi-step booking forms, Vue.js animations, and film photography aesthetic. Built with Nuxt 3.

Commits
4
Files
24
Size
670.2 KB
Langs
4
Created
Jun 13, 2025
Last push
about 1 year ago
README.md

Hudson Valley Wedding Photography

Live Site: weddings.ejfox.tools

A luxury wedding photography booking site built for EJ Fox & Ben Durland, featuring film photography aesthetics and conversion-optimized design.

🎯 Project Goals

Transform from basic portfolio into a $8,500 luxury wedding photography conversion powerhouse targeting Hudson Valley estate clientele with:

  • Premium positioning and luxury branding
  • Data-driven conversion optimization
  • Seamless booking experience
  • Film photography aesthetic

🚀 Development Process

Phase 1: Foundation & Positioning

  • Luxury repositioning: Elevated from $1,500 → $8,500 pricing
  • Estate branding: "Bespoke Hudson Valley luxury" messaging
  • Scarcity positioning: "Only 12 weddings per year"
  • Film aesthetic: Contact sheet gallery design with metadata styling

Phase 2: Conversion Optimization Research

Applied 2025 best practices based on actual conversion data:

Multi-step Forms: 300% conversion boost (vs single-page forms)

  • 3-step progressive disclosure booking process
  • Reduced cognitive load per step
  • Mobile-optimized form experience

Social Proof & Trust: 86% higher conversion rates

  • Customer testimonials with real names
  • Trust indicators ("No spam, ever" • "Instant response")
  • Social proof badges (47+ couples, 5-star rating)

Urgency & Scarcity: Psychological conversion triggers

  • Dynamic time-based messaging
  • Limited availability indicators
  • Rotating scarcity messages

Phase 3: User Experience & Interactivity

Vue.js Enhancements:

  • Testimonial carousel with quad-ease transitions
  • Scroll-triggered gallery animations
  • Animated number counters for pricing
  • Interactive pricing card hover effects
  • Floating sticky CTA with urgency badges

Performance Optimizations:

  • Lazy loading gallery images
  • Optimized image formats with auto=format
  • Proper image dimensions to prevent layout shift
  • GPU-accelerated animations with will-change

Phase 4: Strategic CTA Placement

7 Booking Touch Points:

  1. Hero section main CTA
  2. Gallery "View Our Full Portfolio"
  3. Pricing "Secure Your Date"
  4. Testimonials "Start Your Story"
  5. Main booking section with multi-step form
  6. Footer "Ready to Begin? Let's Talk"
  7. Floating sticky CTA (appears on scroll)

Phase 5: Technical Implementation

Advanced Features:

  • Multi-step booking form with progress tracking
  • Dynamic urgency messaging based on time/day
  • Intersection Observer for scroll animations
  • Structured data for local SEO
  • Mobile-responsive throughout

🎨 Design Philosophy

Film Photography Aesthetic:

  • Metadata-style typography (monospace technical details)
  • Contact sheet gallery layout
  • Newsreader serif + IBM Plex Sans typography
  • Stone color palette (warm, neutral tones)
  • No border radius (flat, editorial design)

Luxury Positioning:

  • "Estate Collection" vs "Wedding Collection"
  • "Curated portfolio" vs "basic package"
  • "Museum-quality" and "heirloom" language
  • White-glove service messaging

📊 Expected Results

Based on conversion optimization research:

  • 300% increase in form completions (multi-step vs single-page)
  • 66.7% conversion rate from form to booking (vs 30% average)
  • 86% higher conversion rates overall
  • Sub-2 second page load times

🛠 Tech Stack

  • Nuxt 3 - Vue.js framework with SSG
  • Tailwind CSS - Utility-first styling
  • Vue Composition API - Reactive state management
  • Google Fonts - Newsreader serif + IBM Plex Sans
  • Cal.com - Booking integration
  • Intersection Observer API - Scroll animations

🚀 Deployment

# Generate static build
npm run generate

# Deploy to smallweb (auto-hosting)
cp -r .output/public ~/smallweb/weddings

Site automatically available at weddings.ejfox.tools via smallweb magic.

🎯 Conversion Features

Multi-Step Booking Form:

  1. Event details (date, venue, guest count)
  2. Contact information (name, email, phone)
  3. Confirmation with instant calendar booking

Trust & Urgency Elements:

  • Real customer testimonials with names
  • Dynamic availability messaging
  • Time-sensitive urgency badges
  • Social proof indicators

Performance Optimized:

  • Lazy loading images
  • GPU-accelerated animations
  • Mobile-first responsive design
  • SEO structured data

Result: A conversion-optimized luxury wedding photography site that positions EJ Fox & Ben Durland as premium Hudson Valley photographers, with data-driven UX designed to convert high-end couples at $8,500+ price points.

Built with love, Vue.js, and way too much attention to conversion details 📸✨