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);
}, []);
// Typewriter effect for roles
useEffect(() => {
const currentRole = roles[roleIndex];
if (isTyping) {
if (displayText.length < currentRole.length) {
const timer = setTimeout(() => {
@ -57,13 +55,13 @@ export default function Hero() {
src="/images/photos/production-switcher.jpg"
alt="Production switcher panel"
fill
className="object-cover opacity-25"
className="object-cover opacity-20"
priority
/>
</div>
{/* Subtle grid overlay */}
<div className="absolute inset-0 opacity-[0.06]">
<div className="absolute inset-0 opacity-[0.04]">
<div
className="absolute inset-0"
style={{
@ -76,60 +74,60 @@ export default function Hero() {
/>
</div>
{/* Gradient overlays for depth */}
<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-r from-primary/40 via-transparent to-primary/40" />
{/* Gradient overlays */}
<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/50 via-transparent to-primary/50" />
<div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
{/* Logo */}
<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"
}`}
>
<Image
src="/images/wild-dragon-logo.png"
alt="Wild Dragon"
width={260}
height={74}
className="mx-auto logo-silhouette"
width={220}
height={62}
className="mx-auto logo-silhouette opacity-90"
priority
/>
</div>
{/* Animated role tagline */}
<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"
}`}
>
<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}
<span className="animate-pulse ml-0.5 text-accent/60">|</span>
<span className="animate-pulse ml-0.5 text-accent/40">|</span>
</p>
</div>
{/* Name */}
<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"
}`}
>
Zachary
<br />
<span className="font-semibold">Gaetano</span>
<span className="font-semibold tracking-tight">Gaetano</span>
</h1>
{/* Accent line */}
<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 ${
loaded ? "opacity-100 w-32" : "opacity-0 w-0"
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-24" : "opacity-0 w-0"
}`}
/>
{/* Description */}
<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"
}`}
>
@ -139,19 +137,19 @@ export default function Hero() {
{/* CTAs */}
<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"
}`}
>
<a
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
</a>
<a
href="#contact"
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"
href="mailto:zgaetano@wilddragon.net"
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
</a>
@ -165,10 +163,10 @@ export default function Hero() {
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
</span>
<ChevronDown size={18} className="text-neutral-500 animate-bounce" />
<ChevronDown size={16} className="text-neutral-600 animate-bounce" />
</a>
</section>
);