fix: cleanup hero component and remove unused imports

Adjust title padding and replace fake stats; remove scroll indicator
and unused ChevronDown import.

Co-authored-by: ASOwnerYT <[email protected]>

components/hero.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
-import { ArrowRight, ChevronDown } from "lucide-react"
+import { ArrowRight } from "lucide-react"
 import Link from "next/link"
 
 function FloatingElement({ delay = 0, duration = 20, children, className = "" }: { 
@@ -113,10 +113,10 @@ export function Hero() {
         </div>
 
         {/* Main Heading */}
-        <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[0.9] mb-8">
-          <AnimatedText text="Every Business" className="mb-2" />
-          <AnimatedText text="Needs an" className="mb-2" />
-          <span className="relative inline-block">
+        <h1 className="text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-[1.05] mb-8">
+          <AnimatedText text="Every Business" className="mb-2 pb-1" />
+          <AnimatedText text="Needs an" className="mb-2 pb-1" />
+          <span className="relative inline-block pb-2">
             <AnimatedText 
               text="I.T Guy" 
               className="text-primary"
@@ -154,12 +154,11 @@ export function Hero() {
         </div>
 
         {/* Stats */}
-        <div className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8 animate-fade-in animation-delay-1000">
+        <div className="mt-20 grid grid-cols-3 gap-8 max-w-lg mx-auto animate-fade-in animation-delay-1000">
           {[
-            { value: "100+", label: "Happy Clients" },
-            { value: "24/7", label: "Support" },
-            { value: "NZ", label: "Based Hosting" },
-            { value: "10+", label: "Years Experience" },
+            { value: "24/7", label: "Support Available" },
+            { value: "NZ", label: "Hosted Locally" },
+            { value: "Auckland", label: "Based Business" },
           ].map((stat, index) => (
             <div
               key={stat.label}
@@ -175,14 +174,6 @@ export function Hero() {
         </div>
       </div>
 
-      {/* Scroll indicator */}
-      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
-        <Link href="#services" className="flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors">
-          <span className="text-xs tracking-widest uppercase">Scroll</span>
-          <ChevronDown className="w-5 h-5" />
-        </Link>
-      </div>
-
       <style jsx>{`
         @keyframes float {
           0%, 100% { transform: translateY(0px) rotate(0deg); }