Motto van de dag: Home Sweet Home

Modern Homepage Implementation

// React Homepage Component with Performance Optimization
import { useState, useEffect, useRef } from 'react';
import { useIntersectionObserver } from './hooks/useIntersectionObserver';

const Homepage = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [ctaVariant, setCTAVariant] = useState('A');
  const heroRef = useRef(null);
  const featuresRef = useRef(null);

  const heroInView = useIntersectionObserver(heroRef, { threshold: 0.5 });
  const featuresInView = useIntersectionObserver(featuresRef, { threshold: 0.3 });

  useEffect(() => {
    // Performance monitoring
    const startTime = performance.now();

    const handleLoad = () => {
      const loadTime = performance.now() - startTime;
      analytics.track('homepage_load_time', { duration: loadTime });
      setIsLoading(false);
    };

    // A/B test CTA variant
    const variant = Math.random() > 0.5 ? 'A' : 'B';
    setCTAVariant(variant);
    analytics.track('cta_variant_shown', { variant });

    window.addEventListener('load', handleLoad);
    return () => window.removeEventListener('load', handleLoad);
  }, []);

  const handleCTAClick = (action) => {
    analytics.track('homepage_cta_click', {
      action,
      variant: ctaVariant,
      timeOnPage: performance.now()
    });
  };

  return (
    <div className="homepage">
      <section
        ref={heroRef}
        className={`hero-section ${heroInView ? 'animate-in' : ''}`}
      >
        <div className="hero-content">
          <h1 className="hero-title">
            Welcome Home to <span className="highlight">Innovation</span>
          </h1>
          <p className="hero-subtitle">
            Discover cutting-edge development solutions that feel like home
          </p>
          <div className="cta-buttons">
            <button
              className={`cta-primary variant-${ctaVariant}`}
              onClick={() => handleCTAClick('primary')}
            >
              {ctaVariant === 'A' ? 'Get Started Today' : 'Begin Your Journey'}
            </button>
            <button
              className="cta-secondary"
              onClick={() => handleCTAClick('secondary')}
            >
              Learn More
            </button>
          </div>
        </div>
        <div className="hero-visual">
          <img
            src="/images/hero-home.webp"
            alt="Modern development workspace"
            loading="eager"
            width="600"
            height="400"
          />
        </div>
      </section>

      <section
        ref={featuresRef}
        className={`features-section ${featuresInView ? 'animate-in' : ''}`}
      >
        <h2>Why Choose Our Platform</h2>
        <div className="features-grid">
          <FeatureCard
            icon="🏠"
            title="Home-like Comfort"
            description="Intuitive interfaces that feel natural and welcoming"
          />
          <FeatureCard
            icon="⚡"
            title="Lightning Fast"
            description="Optimized performance for seamless experiences"
          />
          <FeatureCard
            icon="🔒"
            title="Secure & Reliable"
            description="Enterprise-grade security you can trust"
          />
        </div>
      </section>
    </div>
  );
};

/* Homepage Performance-Optimized Styling */
.homepage {
  min-height: 100vh;
  overflow-x: hidden;
}

.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 80vh;
  padding: 2rem 5%;
  gap: 3rem;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: #2d3748;
}

.highlight {
  background: linear-gradient(120deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: #4a5568;
  margin-bottom: 2.5rem;
  max-width: 500px;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cta-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.cta-primary.variant-B {
  background: linear-gradient(135deg, #fc466b, #3f5efb);
  box-shadow: 0 4px 15px rgba(252, 70, 107, 0.4);
}

.cta-primary.variant-B:hover {
  box-shadow: 0 8px 25px rgba(252, 70, 107, 0.6);
}

.cta-secondary {
  background: transparent;
  color: #667eea;
  border: 2px solid #667eea;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta-secondary:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
}

.hero-visual img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.hero-visual img:hover {
  transform: scale(1.02);
}

.features-section {
  padding: 5rem 5%;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.features-section.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

/* Critical CSS for above-the-fold content */
@media (max-width: 768px) {
  .hero-section {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2rem 1rem;
  }

  .cta-buttons {
    justify-content: center;
  }
}

// Homepage Analytics & A/B Testing System
interface CTAVariant {
  id: 'A' | 'B';
  text: string;
  style: string;
  conversionRate?: number;
}

interface HomepageMetrics {
  loadTime: number;
  timeToInteractive: number;
  ctaClickRate: number;
  scrollDepth: number;
  bounceRate: number;
}

class HomepageOptimizer {
  private variants: CTAVariant[] = [
    { id: 'A', text: 'Get Started Today', style: 'gradient-blue' },
    { id: 'B', text: 'Begin Your Journey', style: 'gradient-pink' }
  ];

  private metrics: HomepageMetrics = {
    loadTime: 0,
    timeToInteractive: 0,
    ctaClickRate: 0,
    scrollDepth: 0,
    bounceRate: 0
  };

  constructor() {
    this.initializeAnalytics();
    this.trackPerformanceMetrics();
  }

  getActiveVariant(): CTAVariant {
    // Simple A/B test with 50/50 split
    const userKey = localStorage.getItem('ab-test-key') || this.generateUserKey();
    const hash = this.hashCode(userKey);
    const variant = hash % 2 === 0 ? this.variants[0] : this.variants[1];

    // Track variant assignment
    this.trackEvent('variant_assigned', {
      variant: variant.id,
      userKey
    });

    return variant;
  }

  trackCTAClick(variant: CTAVariant, action: string): void {
    this.trackEvent('cta_click', {
      variant: variant.id,
      action,
      timestamp: Date.now()
    });
  }

  trackScrollDepth(): void {
    let maxScroll = 0;

    const updateScrollDepth = () => {
      const scrollPercent = Math.round(
        (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100
      );

      if (scrollPercent > maxScroll) {
        maxScroll = scrollPercent;
        this.metrics.scrollDepth = scrollPercent;

        // Track milestone scrolls
        if ([25, 50, 75, 100].includes(scrollPercent)) {
          this.trackEvent('scroll_milestone', { depth: scrollPercent });
        }
      }
    };

    window.addEventListener('scroll', updateScrollDepth, { passive: true });
  }

  private trackPerformanceMetrics(): void {
    // Core Web Vitals tracking
    new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        switch (entry.entryType) {
          case 'largest-contentful-paint':
            this.trackEvent('lcp', { value: entry.startTime });
            break;
          case 'first-input':
            this.trackEvent('fid', { value: entry.processingStart - entry.startTime });
            break;
          case 'layout-shift':
            if (!entry.hadRecentInput) {
              this.trackEvent('cls', { value: entry.value });
            }
            break;
        }
      });
    }).observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });
  }

  private generateUserKey(): string {
    const key = Math.random().toString(36).substring(2, 15);
    localStorage.setItem('ab-test-key', key);
    return key;
  }

  private hashCode(str: string): number {
    let hash = 0;
    for (let i = 0; i < str.length; i++) {
      const char = str.charCodeAt(i);
      hash = ((hash << 5) - hash) + char;
      hash = hash & hash;
    }
    return Math.abs(hash);
  }

  private trackEvent(event: string, data: any): void {
    // Send to analytics service
    if (typeof window !== 'undefined' && (window as any).gtag) {
      (window as any).gtag('event', event, data);
    }
  }

  private initializeAnalytics(): void {
    // Initialize performance tracking
    if (typeof window !== 'undefined') {
      window.addEventListener('load', () => {
        this.metrics.loadTime = performance.now();
        this.trackEvent('homepage_loaded', { loadTime: this.metrics.loadTime });
      });
    }
  }
}