Add login button, UI tweaks

components/header.tsx

@@ -60,7 +60,14 @@ export function Header() {
           </div>
 
           {/* CTA Button */}
-          <div className="hidden md:block">
+          <div className="hidden md:flex items-center gap-8">
+            <Link
+              href="https://auth.cloudrite.co.nz"
+              className="relative text-sm font-medium text-muted-foreground hover:text-foreground transition-colors duration-300 group"
+            >
+              Login
+              <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
+            </Link>
             <Button
               asChild
               className="bg-primary text-primary-foreground hover:bg-primary/90 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-primary/25"
@@ -115,7 +122,15 @@ export function Header() {
           ))}
           <Button
             asChild
-            className="w-full mt-4 bg-primary text-primary-foreground hover:bg-primary/90"
+            className="w-full mt-4 bg-secondary text-secondary-foreground hover:bg-secondary/90"
+          >
+            <Link href="https://auth.cloudrite.co.nz" onClick={() => setIsMobileMenuOpen(false)}>
+              Login
+            </Link>
+          </Button>
+          <Button
+            asChild
+            className="w-full bg-primary text-primary-foreground hover:bg-primary/90"
           >
             <Link href="#contact" onClick={() => setIsMobileMenuOpen(false)}>
               Get in Touch

components/hero.tsx

@@ -5,11 +5,11 @@ import { Button } from "@/components/ui/button"
 import { ArrowRight } from "lucide-react"
 import Link from "next/link"
 
-function FloatingElement({ delay = 0, duration = 20, children, className = "" }: { 
+function FloatingElement({ delay = 0, duration = 20, children, className = "" }: {
   delay?: number
   duration?: number
   children: React.ReactNode
-  className?: string 
+  className?: string
 }) {
   return (
     <div
@@ -85,7 +85,7 @@ export function Hero() {
     >
       {/* Background Elements */}
       <GridPattern />
-      
+
       {/* Floating decorative elements */}
       <FloatingElement delay={0} duration={25} className="top-[15%] left-[10%]">
         <div className="w-32 h-32 border border-primary/20 rounded-full" />
@@ -96,7 +96,7 @@ export function Hero() {
       <FloatingElement delay={10} duration={22} className="bottom-[20%] left-[20%]">
         <div className="w-16 h-16 bg-primary/10 rounded-lg" />
       </FloatingElement>
-      
+
       {/* Glow effect */}
       <div
         className="absolute w-[600px] h-[600px] rounded-full bg-primary/10 blur-[120px] transition-transform duration-500 ease-out"
@@ -117,8 +117,8 @@ export function Hero() {
           <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" 
+            <AnimatedText
+              text="I.T Guy"
               className="text-primary"
             />
             <div className="absolute -inset-2 bg-primary/20 blur-2xl -z-10 animate-pulse" />
@@ -127,16 +127,16 @@ export function Hero() {
 
         {/* Subtitle */}
         <p className="max-w-2xl mx-auto text-lg md:text-xl text-muted-foreground mb-12 animate-fade-in animation-delay-500">
-          From websites and cloud infrastructure to computer repairs and I.T support — 
+          From websites and cloud infrastructure to computer repairs and I.T support —
           we help small businesses thrive in the digital world.
         </p>
 
         {/* CTA Buttons */}
-        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in animation-delay-700">
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in animation-delay-700 max-w-36 mx-auto">
           <Button
             asChild
             size="lg"
-            className="group bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-6 text-lg transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-primary/25"
+            className="group bg-primary text-primary-foreground hover:bg-primary/90 w-full py-6 text-lg transition-all duration-300 hover:scale-105 hover:shadow-xl hover:shadow-primary/25"
           >
             <Link href="#contact">
               Let&apos;s Talk
@@ -147,7 +147,7 @@ export function Hero() {
             asChild
             variant="outline"
             size="lg"
-            className="px-8 py-6 text-lg border-border hover:bg-card hover:border-primary/50 transition-all duration-300"
+            className="w-full py-6 text-lg border-border hover:bg-card hover:border-primary/50 transition-all duration-300"
           >
             <Link href="#services">Our Services</Link>
           </Button>
@@ -179,17 +179,17 @@ export function Hero() {
           0%, 100% { transform: translateY(0px) rotate(0deg); }
           50% { transform: translateY(-20px) rotate(5deg); }
         }
-        
+
         .animate-fade-in {
           animation: fadeIn 0.8s ease-out forwards;
           opacity: 0;
         }
-        
+
         @keyframes fadeIn {
           from { opacity: 0; transform: translateY(20px); }
           to { opacity: 1; transform: translateY(0); }
         }
-        
+
         .animation-delay-500 { animation-delay: 500ms; }
         .animation-delay-700 { animation-delay: 700ms; }
         .animation-delay-1000 { animation-delay: 1000ms; }