Nicholai
3e739877b4
- Introduced multiple new components including AnimatedLink, Button, Calendar, Card, ColorSwatch, Divider, Filmstrip, FormContainer, FormField, GalleryCard, Heading, HeroOverlay, IdentitySection, ImmersionSection, NewArtistsSection, NewContactSection, NewHero, NewNavigation, Reveal, SectionLabel, StickySplit, and Toast. - Each component is designed with responsive layouts and customizable styles to improve the overall UI consistency and interactivity. - Implemented accessibility features and animations to enhance user engagement. This commit significantly expands the component library, providing a robust foundation for building a cohesive user interface.
76 lines
3.1 KiB
TypeScript
76 lines
3.1 KiB
TypeScript
"use client"
|
|
|
|
import { useRef } from "react"
|
|
import { motion, useScroll, useTransform } from "framer-motion"
|
|
import { Button } from "@/components/ui/button"
|
|
import Link from "next/link"
|
|
|
|
export function NewHero() {
|
|
const ref = useRef<HTMLElement>(null)
|
|
const { scrollY } = useScroll()
|
|
const y = useTransform(scrollY, [0, 1000], [0, 200])
|
|
const opacity = useTransform(scrollY, [0, 300], [1, 0])
|
|
|
|
return (
|
|
<header
|
|
ref={ref}
|
|
className="relative h-[95vh] flex flex-col justify-end pb-[10vh] overflow-hidden"
|
|
>
|
|
{/* Parallax Background */}
|
|
<motion.div
|
|
className="absolute inset-0 bg-cover bg-center z-0"
|
|
style={{
|
|
backgroundImage: "url('/images/UP1_00010_.png')",
|
|
y,
|
|
}}
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
{/* Gradient Scrim for readability */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[var(--sand)] to-transparent z-1" style={{
|
|
backgroundImage: "linear-gradient(to top, var(--sand) 0%, rgba(242, 227, 208, 0.85) 20%, rgba(242, 227, 208, 0.5) 40%, transparent 100%)"
|
|
}} />
|
|
|
|
{/* Editorial Content */}
|
|
<motion.div
|
|
className="relative z-10 px-[clamp(1.5rem,5vw,5rem)] w-full max-w-[1800px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 items-end"
|
|
style={{ opacity }}
|
|
>
|
|
<div className="lg:col-span-8">
|
|
<span className="block text-[0.85rem] uppercase tracking-[0.4em] text-[var(--burnt)] font-bold mb-6 animate-fade-in-up">
|
|
Fountain • Colorado
|
|
</span>
|
|
<h1 className="font-serif text-[clamp(3.5rem,8vw,8.5rem)] leading-[0.9] text-[var(--ink)] tracking-tight mb-8 animate-fade-in-up [animation-delay:100ms]">
|
|
UNITED<br/>
|
|
<span className="italic text-[var(--charcoal)]/80">TATTOO</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="lg:col-span-4 pb-4 animate-fade-in-up [animation-delay:200ms]">
|
|
<p className="text-[1.1rem] leading-[1.7] text-[var(--ink)]/80 mb-8 max-w-[34ch] border-l border-[var(--terracotta)] pl-6">
|
|
A creative collective specializing in custom narrative work, fine line, and traditional tattooing.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 pl-6">
|
|
<Link href="/book">
|
|
<Button
|
|
className="bg-[var(--burnt)] text-white hover:bg-[var(--terracotta)] uppercase tracking-widest px-8 py-6 h-auto rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 w-full sm:w-auto"
|
|
>
|
|
Commission
|
|
</Button>
|
|
</Link>
|
|
<Link href="/artists">
|
|
<Button
|
|
variant="ghost"
|
|
className="text-[var(--ink)] hover:bg-[var(--ink)]/5 uppercase tracking-widest px-8 py-6 h-auto rounded-full transition-all duration-300 border border-[var(--ink)]/10 hover:border-[var(--ink)]/30 w-full sm:w-auto"
|
|
>
|
|
Portfolio
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</header>
|
|
)
|
|
}
|