WildDragonLLC/wilddragon-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Polish pass: remove testimonial, mailto CTA, refine spacing and typography: Hero.tsx

Browse source
This commit is contained in:
Zac Gaetano 2026-04-18 16:27:45 -04:00
parent 0eb384bca5
commit f8cfc515b6
1 changed files with 23 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/components/Hero.tsx
View file

@ -22,10 +22,8 @@ export default function Hero() {
return () => clearTimeout(t); return () => clearTimeout(t);
}, []); }, []);
// Typewriter effect for roles
useEffect(() => { useEffect(() => {
const currentRole = roles[roleIndex]; const currentRole = roles[roleIndex];
if (isTyping) { if (isTyping) {
if (displayText.length < currentRole.length) { if (displayText.length < currentRole.length) {
const timer = setTimeout(() => { const timer = setTimeout(() => {
@ -57,13 +55,13 @@ export default function Hero() {
src="/images/photos/production-switcher.jpg" src="/images/photos/production-switcher.jpg"
alt="Production switcher panel" alt="Production switcher panel"
fill fill
className="object-cover opacity-25" className="object-cover opacity-20"
priority priority
/> />
</div> </div>
{/* Subtle grid overlay */} {/* Subtle grid overlay */}
<div className="absolute inset-0 opacity-[0.06]"> <div className="absolute inset-0 opacity-[0.04]">
<div <div
className="absolute inset-0" className="absolute inset-0"
style={{ style={{
@ -76,60 +74,60 @@ export default function Hero() {
/> />
</div> </div>
{/* Gradient overlays for depth */} {/* Gradient overlays */}
<div className="absolute inset-0 bg-gradient-to-b from-primary/70 via-primary/30 to-primary" /> <div className="absolute inset-0 bg-gradient-to-b from-primary/80 via-primary/40 to-primary" />
<div className="absolute inset-0 bg-gradient-to-r from-primary/40 via-transparent to-primary/40" /> <div className="absolute inset-0 bg-gradient-to-r from-primary/50 via-transparent to-primary/50" />
<div className="relative z-10 max-w-5xl mx-auto px-6 text-center"> <div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
{/* Logo */} {/* Logo */}
<div <div
className={`mb-8 transition-all duration-1000 ease-out ${ className={`mb-10 transition-all duration-1000 ease-out ${
loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6" loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
}`} }`}
> >
<Image <Image
src="/images/wild-dragon-logo.png" src="/images/wild-dragon-logo.png"
alt="Wild Dragon" alt="Wild Dragon"
width={260} width={220}
height={74} height={62}
className="mx-auto logo-silhouette" className="mx-auto logo-silhouette opacity-90"
priority priority
/> />
</div> </div>
{/* Animated role tagline */} {/* Animated role tagline */}
<div <div
className={`h-6 mb-8 transition-all duration-1000 delay-150 ease-out ${ className={`h-5 mb-10 transition-all duration-1000 delay-150 ease-out ${
loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6" loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
}`} }`}
> >
<p className="font-mono text-[11px] tracking-[0.35em] uppercase text-accent"> <p className="font-mono text-[10px] tracking-[0.35em] uppercase text-accent/80">
{displayText} {displayText}
<span className="animate-pulse ml-0.5 text-accent/60">|</span> <span className="animate-pulse ml-0.5 text-accent/40">|</span>
</p> </p>
</div> </div>
{/* Name */} {/* Name */}
<h1 <h1
className={`text-5xl md:text-7xl lg:text-[5.5rem] font-light text-white leading-[1.05] mb-8 transition-all duration-1000 delay-300 ease-out ${ className={`text-5xl md:text-6xl lg:text-7xl font-light text-white leading-[1.05] mb-8 transition-all duration-1000 delay-300 ease-out ${
loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6" loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
}`} }`}
> >
Zachary Zachary
<br /> <br />
<span className="font-semibold">Gaetano</span> <span className="font-semibold tracking-tight">Gaetano</span>
</h1> </h1>
{/* Accent line */} {/* Accent line */}
<div <div
className={`mx-auto mb-8 h-px bg-gradient-to-r from-transparent via-accent/60 to-transparent transition-all duration-1000 delay-400 ease-out ${ className={`mx-auto mb-8 h-px bg-gradient-to-r from-transparent via-accent/40 to-transparent transition-all duration-1000 delay-400 ease-out ${
loaded ? "opacity-100 w-32" : "opacity-0 w-0" loaded ? "opacity-100 w-24" : "opacity-0 w-0"
}`} }`}
/> />
{/* Description */} {/* Description */}
<p <p
className={`text-lg md:text-xl text-neutral-400 max-w-2xl mx-auto leading-relaxed mb-14 transition-all duration-1000 delay-500 ease-out ${ className={`text-base md:text-lg text-neutral-500 max-w-xl mx-auto leading-relaxed mb-12 transition-all duration-1000 delay-500 ease-out ${
loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6" loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
}`} }`}
> >
@ -139,19 +137,19 @@ export default function Hero() {
{/* CTAs */} {/* CTAs */}
<div <div
className={`flex flex-col sm:flex-row items-center justify-center gap-4 transition-all duration-1000 delay-[650ms] ease-out ${ className={`flex flex-col sm:flex-row items-center justify-center gap-3 transition-all duration-1000 delay-[650ms] ease-out ${
loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6" loaded ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6"
}`} }`}
> >
<a <a
href="#projects" href="#projects"
className="px-8 py-3.5 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200 hover:shadow-lg hover:shadow-accent/20" className="px-7 py-3 bg-accent text-white text-sm font-medium rounded-md hover:bg-accent-light transition-all duration-200 hover:shadow-lg hover:shadow-accent/20"
> >
View Projects View Projects
</a> </a>
<a <a
href="#contact" href="mailto:zgaetano@wilddragon.net"
className="px-8 py-3.5 border border-neutral-600 text-neutral-300 text-sm font-medium rounded-md hover:border-accent/50 hover:text-white transition-all duration-200" className="px-7 py-3 border border-neutral-700 text-neutral-400 text-sm font-medium rounded-md hover:border-neutral-500 hover:text-neutral-200 transition-all duration-200"
> >
Get in Touch Get in Touch
</a> </a>
@ -165,10 +163,10 @@ export default function Hero() {
loaded ? "opacity-100" : "opacity-0" loaded ? "opacity-100" : "opacity-0"
}`} }`}
> >
<span className="text-[10px] font-mono tracking-[0.2em] uppercase text-neutral-600"> <span className="text-[9px] font-mono tracking-[0.25em] uppercase text-neutral-700">
Scroll Scroll
</span> </span>
<ChevronDown size={18} className="text-neutral-500 animate-bounce" /> <ChevronDown size={16} className="text-neutral-600 animate-bounce" />
</a> </a>
</section> </section>
); );