Nicholai
1be512f658
🐛 Bug Fix: The Next.js <Image> component requires Node.js APIs that aren't available in Cloudflare Workers runtime, causing 'Image constructor: new is required' errors. Changes: - Revert hero-section.tsx to use background-image CSS - Revert artists-section.tsx to use native <img> tags - Add loading='lazy' attributes for native lazy loading - Keep images.unoptimized: true in next.config.mjs - Add clear comment explaining Cloudflare compatibility requirement ✅ What's Still Working: - All SEO improvements (metadata, Open Graph, Twitter Cards) - JSON-LD structured data (LocalBusiness, Organization) - Canonical URLs on all pages - Font preloading - Page-specific metadata Note: Native <img> tags with loading='lazy' provide basic optimization without requiring Next.js Image APIs. For Cloudflare R2 image optimization, consider using Cloudflare Images service separately. Issue: #GH-419 (React error) Platform: Cloudflare Workers
93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
|
|
import { useFeatureFlag } from "@/components/feature-flags-provider"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useMultiLayerParallax, useReducedMotion } from "@/hooks/use-parallax"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function HeroSection() {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
const advancedNavAnimations = useFeatureFlag("ADVANCED_NAV_SCROLL_ANIMATIONS_ENABLED")
|
|
const reducedMotion = useReducedMotion()
|
|
|
|
// Use new parallax system with proper accessibility support
|
|
const parallax = useMultiLayerParallax(!advancedNavAnimations || reducedMotion)
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setIsVisible(true), 300)
|
|
return () => clearTimeout(timer)
|
|
}, [])
|
|
|
|
return (
|
|
<section
|
|
id="home"
|
|
className="min-h-screen flex items-center justify-center relative overflow-hidden"
|
|
data-reduced-motion={reducedMotion}
|
|
>
|
|
{/* Background Layer - Slowest parallax */}
|
|
<div
|
|
ref={parallax.background.ref}
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat will-change-transform"
|
|
style={{
|
|
backgroundImage: "url(/united-logo-full.jpg)",
|
|
...parallax.background.style,
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Midground Layer - Overlay with subtle parallax */}
|
|
<div
|
|
ref={parallax.midground.ref}
|
|
className="absolute inset-0 bg-black/70 will-change-transform"
|
|
style={parallax.midground.style}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Foreground Layer - Content with slight counter-parallax */}
|
|
<div
|
|
ref={parallax.foreground.ref}
|
|
className="relative z-10 text-center max-w-4xl px-8 will-change-transform"
|
|
style={parallax.foreground.style}
|
|
>
|
|
<div
|
|
className={cn(
|
|
"transition-all duration-1000",
|
|
isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
|
)}
|
|
>
|
|
<h1 className="font-playfair text-5xl lg:text-7xl font-bold text-white mb-6 tracking-tight">
|
|
UNITED TATTOO
|
|
</h1>
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"transition-all duration-1000 delay-300",
|
|
isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
|
)}
|
|
>
|
|
<p className="text-xl lg:text-2xl text-gray-200 mb-12 font-light leading-relaxed">
|
|
Custom Tattoos in Fountain, Colorado
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"transition-all duration-1000 delay-500",
|
|
isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
|
)}
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-gray-50 text-gray-900 hover:bg-gray-100 px-8 py-4 text-lg font-medium rounded-lg w-full sm:w-auto transition-colors"
|
|
>
|
|
Book Consultation
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|