From f8cfc515b6171374722ec49cc8321336fbdb41c4 Mon Sep 17 00:00:00 2001
From: ZGaetano <zgaetano@wilddragon.net>
Date: Sat, 18 Apr 2026 16:27:45 -0400
Subject: [PATCH] Polish pass: remove testimonial, mailto CTA, refine spacing
 and typography: Hero.tsx

---
 src/components/Hero.tsx | 48 ++++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index bd02c6f..70b4d91 100755
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -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>
   );