Nicholai
b20db98051
Some checks failed
CI / build-and-test (pull_request) Failing after 1m19s
CI (.gitea/workflows/ci.yaml): lint → typecheck → vitest w/ coverage → OpenNext build → preview smoke → bundle-size budgets; Node 20; npm ci; artifacts; safe env; D1 dry-run scaffold. Budgets: add scripts/budgets.mjs; TOTAL_STATIC_MAX_BYTES and MAX_ASSET_BYTES thresholds; report top offenders; fail on breach; README CI section. Flags: add lib/flags.ts with typed booleans and safe defaults (ADMIN_ENABLED, ARTISTS_MODULE_ENABLED, UPLOADS_ADMIN_ENABLED, BOOKING_ENABLED, PUBLIC_APPOINTMENT_REQUESTS_ENABLED, REFERENCE_UPLOADS_PUBLIC_ENABLED, DEPOSITS_ENABLED, PUBLIC_DB_ARTISTS_ENABLED, ADVANCED_NAV_SCROLL_ANIMATIONS_ENABLED, STRICT_CI_GATES_ENABLED, ISR_CACHE_R2_ENABLED); robust parsing; client provider; unit tests. Wiring: gate Admin shell and admin write APIs (503 JSON on uploads and artists writes); disable booking submit and short-circuit booking mutations when off; render static Hero/Artists when advanced animations off; tests for UI and API guards. Ops: expand docs/prd/rollback-strategy.md with “Feature Flags Operations,” Cloudflare Dashboard and wrangler.toml steps, preview simulation, incident playbook, and post-toggle smoke checklist. Release: add docs/releases/2025-09-19-feature-flags-rollout.md with last-good commit, preview/production flag matrices, rollback notes, and smoke results; link from rollback doc. Chore: fix TS issues (gift-cards boolean handling, Lenis options, tailwind darkMode), remove next-on-pages peer conflict, update package.json scripts, configure Gitea act_runner label, open draft PR to trigger CI. Refs: CI-1, FF-1, FF-2, FF-3, OPS-1 Impact: defaults preserve current behavior; no runtime changes unless flags flipped
74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
|
|
import { useFeatureFlag } from "@/components/feature-flags-provider"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
export function HeroSection() {
|
|
const [isVisible, setIsVisible] = useState(false)
|
|
const [scrollY, setScrollY] = useState(0)
|
|
const advancedNavAnimations = useFeatureFlag("ADVANCED_NAV_SCROLL_ANIMATIONS_ENABLED")
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => setIsVisible(true), 300)
|
|
return () => clearTimeout(timer)
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (!advancedNavAnimations) return
|
|
const handleScroll = () => {
|
|
setScrollY(window.scrollY)
|
|
}
|
|
window.addEventListener("scroll", handleScroll, { passive: true })
|
|
return () => window.removeEventListener("scroll", handleScroll)
|
|
}, [advancedNavAnimations])
|
|
|
|
return (
|
|
<section id="home" className="min-h-screen flex items-center justify-center relative overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
|
style={{
|
|
backgroundImage: "url(/united-logo-full.jpg)",
|
|
transform: advancedNavAnimations ? `translateY(${scrollY * 0.5}px)` : undefined,
|
|
}}
|
|
/>
|
|
<div className="absolute inset-0 bg-black/70" />
|
|
|
|
<div
|
|
className="relative z-10 text-center max-w-4xl px-8"
|
|
style={{ transform: advancedNavAnimations ? `translateY(${scrollY * -0.1}px)` : undefined }}
|
|
>
|
|
<div
|
|
className={`transition-all duration-1000 ${
|
|
isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
|
|
}`}
|
|
>
|
|
<h1 className="text-5xl lg:text-7xl font-bold text-white mb-6 tracking-tight">UNITED TATTOO</h1>
|
|
</div>
|
|
|
|
<div
|
|
className={`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">Where artistry meets precision</p>
|
|
</div>
|
|
|
|
<div
|
|
className={`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"
|
|
>
|
|
Book Consultation
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|