Initial commit from v0

2026-03-20 00:11:55 +00:00
commit a0a04d3f87
87 changed files with 8419 additions and 0 deletions
@@ -0,0 +1,149 @@
+"use client"
+
+import Link from "next/link"
+import { Cloud } from "lucide-react"
+
+const footerLinks = {
+  services: [
+    { label: "Web Development", href: "#services" },
+    { label: "Cloud Hosting", href: "#services" },
+    { label: "I.T Support", href: "#services" },
+    { label: "Computer Repairs", href: "#services" },
+  ],
+  company: [
+    { label: "About Us", href: "#features" },
+    { label: "Our Process", href: "#process" },
+    { label: "Contact", href: "#contact" },
+  ],
+  legal: [
+    { label: "Privacy Policy", href: "#" },
+    { label: "Terms of Service", href: "#" },
+  ]
+}
+
+export function Footer() {
+  const currentYear = new Date().getFullYear()
+
+  return (
+    <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">
+          {/* Brand Column */}
+          <div className="col-span-2 md:col-span-1">
+            <Link href="/" className="flex items-center gap-2 mb-6 group">
+              <div className="relative">
+                <Cloud className="w-8 h-8 text-primary transition-transform duration-300 group-hover:scale-110" />
+              </div>
+              <span className="text-xl font-bold tracking-tight">
+                Cloud<span className="text-primary">rite</span>
+              </span>
+            </Link>
+            <p className="text-muted-foreground text-sm leading-relaxed mb-6">
+              Helping Auckland businesses thrive with expert I.T solutions. 
+              Every business needs an I.T guy.
+            </p>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <span className="w-2 h-2 bg-primary rounded-full animate-pulse" />
+              <span>Proudly NZ Owned</span>
+            </div>
+          </div>
+
+          {/* Services */}
+          <div>
+            <h4 className="font-bold mb-4">Services</h4>
+            <ul className="space-y-3">
+              {footerLinks.services.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>
+
+          {/* Company */}
+          <div>
+            <h4 className="font-bold mb-4">Company</h4>
+            <ul className="space-y-3">
+              {footerLinks.company.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>
+
+          {/* 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>
+
+      {/* Bottom Bar */}
+      <div className="border-t border-border">
+        <div className="mx-auto max-w-7xl px-6 lg:px-8 py-6">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+            <p className="text-sm text-muted-foreground">
+              © {currentYear} Cloudrite. All rights reserved.
+            </p>
+            <div className="flex items-center gap-6">
+              <Link
+                href="https://cloudrite.co.nz"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-300"
+              >
+                cloudrite.co.nz
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Large Background Text */}
+      <div className="absolute bottom-0 left-0 right-0 overflow-hidden pointer-events-none">
+        <div className="relative">
+          <div 
+            className="text-[20vw] font-bold text-border/30 leading-none tracking-tighter whitespace-nowrap animate-marquee"
+            style={{ animation: "marquee 30s linear infinite" }}
+          >
+            CLOUDRITE • CLOUDRITE • CLOUDRITE •&nbsp;
+          </div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes marquee {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-33.33%); }
+        }
+        .animate-marquee {
+          animation: marquee 30s linear infinite;
+        }
+      `}</style>
+    </footer>
+  )
+}