Merge pull request #1 from ASOwnerYT/v0/asowneryt-ac5f67f1

Update Cloudrite landing page with real metrics and contact info

components/contact.tsx

@@ -33,14 +33,14 @@ export function Contact() {
     {
       icon: Mail,
       label: "Email",
-      value: "hello@cloudrite.co.nz",
-      href: "mailto:hello@cloudrite.co.nz"
+      value: "contact@cloudrite.co.nz",
+      href: "mailto:contact@cloudrite.co.nz"
     },
     {
       icon: Phone,
       label: "Phone",
-      value: "09 123 4567",
-      href: "tel:+6491234567"
+      value: "021 107 7483",
+      href: "tel:+64211077483"
     },
     {
       icon: MapPin,
@@ -99,16 +99,8 @@ export function Contact() {
               <h4 className="font-bold mb-4">Business Hours</h4>
               <div className="space-y-2 text-muted-foreground">
                 <div className="flex justify-between">
-                  <span>Monday - Friday</span>
-                  <span className="text-foreground">8:30am - 5:30pm</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Saturday</span>
-                  <span className="text-foreground">By Appointment</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>Sunday</span>
-                  <span className="text-foreground">Closed</span>
+                  <span>Hours</span>
+                  <span className="text-foreground">By Appointment Only</span>
                 </div>
               </div>
               <div className="mt-4 pt-4 border-t border-border">

components/features.tsx

@@ -197,11 +197,7 @@ export function Features() {
         </div>
 
         {/* Stats Row */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 p-8 lg:p-12 bg-card border border-border rounded-3xl">
-          <div className="text-center">
-            <AnimatedCounter end={100} suffix="+" />
-            <p className="text-muted-foreground mt-2">Businesses Helped</p>
-          </div>
+        <div className="grid grid-cols-2 lg:grid-cols-3 gap-8 p-8 lg:p-12 bg-card border border-border rounded-3xl">
           <div className="text-center">
             <AnimatedCounter end={99} suffix="%" />
             <p className="text-muted-foreground mt-2">Uptime Guarantee</p>
@@ -211,8 +207,8 @@ export function Features() {
             <p className="text-muted-foreground mt-2">Support Available</p>
           </div>
           <div className="text-center">
-            <AnimatedCounter end={10} suffix="+" />
-            <p className="text-muted-foreground mt-2">Years Experience</p>
+            <p className="text-5xl md:text-6xl font-bold text-primary">NZ</p>
+            <p className="text-muted-foreground mt-2">Hosted & Based</p>
           </div>
         </div>
       </div>

components/footer.tsx

@@ -15,10 +15,6 @@ const footerLinks = {
     { label: "Our Process", href: "#process" },
     { label: "Contact", href: "#contact" },
   ],
-  legal: [
-    { label: "Privacy Policy", href: "#" },
-    { label: "Terms of Service", href: "#" },
-  ]
 }
 
 export function Footer() {
@@ -28,7 +24,7 @@ export function Footer() {
     <footer className="relative bg-card border-t border-border">
       {/* Main Footer */}
       <div className="mx-auto max-w-7xl px-6 lg:px-8 py-16">
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-16">
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-8 lg:gap-16">
           {/* Brand Column */}
           <div className="col-span-2 md:col-span-1">
             <Link href="/" className="flex items-center gap-2 mb-6 group">
@@ -82,23 +78,6 @@ export function Footer() {
               ))}
             </ul>
           </div>
-
-          {/* Legal */}
-          <div>
-            <h4 className="font-bold mb-4">Legal</h4>
-            <ul className="space-y-3">
-              {footerLinks.legal.map((link) => (
-                <li key={link.label}>
-                  <Link
-                    href={link.href}
-                    className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-300"
-                  >
-                    {link.label}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
         </div>
       </div>
 

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); }