Add login button, UI tweaks

Dockerfile

@@ -3,9 +3,9 @@
 # ============================================
 
 # IMPORTANT: Node.js Version Maintenance
-# This Dockerfile uses Node.js 24.13.0-slim, which was the latest LTS version at the time of writing.
+# This Dockerfile uses Node.js 24.18.0-slim, which was the latest LTS version at the time of writing.
 # To ensure security and compatibility, regularly update the NODE_VERSION ARG to the latest LTS version.
-ARG NODE_VERSION=24.13.0-slim
+ARG NODE_VERSION=24.18.0-slim
 
 FROM node:${NODE_VERSION} AS dependencies
 

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 
+            <AnimatedText
-              text="I.T Guy" 
+              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; }

package.json

@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.0",
-    "@types/node": "^22",
+    "@types/node": "^24",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "postcss": "^8.5",

pnpm-lock.yaml

@@ -160,8 +160,8 @@ importers:
         specifier: ^4.2.0
         version: 4.2.2
       '@types/node':
-        specifier: ^22
+        specifier: ^24
-        version: 22.19.15
+        version: 24.13.3
       '@types/react':
         specifier: 19.2.14
         version: 19.2.14
@@ -1219,8 +1219,8 @@ packages:
   '@types/[email protected]':
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
 
-  '@types/node@22.19.15':
+  '@types/node@24.13.3':
-    resolution: {integrity: sha512-F0R/h2+dsy5wJAUe3tAU6oqa2qbWY5TpNfL/RGmo1y38hiyO1w3x2jPtt76wmuaJI4DQnOBu21cNXQ2STIUUWg==}
+    resolution: {integrity: sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==}
 
   '@types/[email protected]':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
@@ -1646,6 +1646,7 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-cIvMxDfpAmqAmVgc4yb7pgm/O1tmmkl/CjrvXuW+62/+7jj/iF9Ykm+hb/UJt42TREHMyd3gb+pkgoa2MxgDIw==}
     engines: {node: '>=14'}
+    deprecated: 1.x and 2.x branches are no longer active. Bump to Recharts v3 to receive latest features and bugfixes. See https://github.com/recharts/recharts/wiki/3.0-migration-guide
     peerDependencies:
       react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -1709,8 +1710,8 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
-  undici-types@6.21.0:
+  undici-types@7.18.2:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
 
   [email protected]:
     resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
@@ -2723,9 +2724,9 @@ snapshots:
 
   '@types/[email protected]': {}
 
-  '@types/node@22.19.15':
+  '@types/node@24.13.3':
     dependencies:
-      undici-types: 6.21.0
+      undici-types: 7.18.2
 
   '@types/[email protected](@types/[email protected])':
     dependencies:
@@ -3153,7 +3154,7 @@ snapshots:
 
   [email protected]: {}
 
-  undici-types@6.21.0: {}
+  undici-types@7.18.2: {}
 
   [email protected]([email protected]):
     dependencies:

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  sharp: false