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,124 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import Link from "next/link"
+import { Menu, X, Cloud } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export function Header() {
+  const [isScrolled, setIsScrolled] = useState(false)
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 50)
+    }
+    window.addEventListener("scroll", handleScroll)
+    return () => window.removeEventListener("scroll", handleScroll)
+  }, [])
+
+  const navLinks = [
+    { href: "#services", label: "Services" },
+    { href: "#features", label: "Why Us" },
+    { href: "#process", label: "Process" },
+    { href: "#contact", label: "Contact" },
+  ]
+
+  return (
+    <header
+      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
+        isScrolled
+          ? "bg-background/80 backdrop-blur-xl border-b border-border/50"
+          : "bg-transparent"
+      }`}
+    >
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <nav className="flex items-center justify-between h-20">
+          {/* Logo */}
+          <Link href="/" className="flex items-center gap-2 group">
+            <div className="relative">
+              <Cloud className="w-8 h-8 text-primary transition-transform duration-300 group-hover:scale-110" />
+              <div className="absolute inset-0 bg-primary/30 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            </div>
+            <span className="text-xl font-bold tracking-tight">
+              Cloud<span className="text-primary">rite</span>
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center gap-8">
+            {navLinks.map((link) => (
+              <Link
+                key={link.href}
+                href={link.href}
+                className="relative text-sm font-medium text-muted-foreground hover:text-foreground transition-colors duration-300 group"
+              >
+                {link.label}
+                <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-primary transition-all duration-300 group-hover:w-full" />
+              </Link>
+            ))}
+          </div>
+
+          {/* CTA Button */}
+          <div className="hidden md:block">
+            <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"
+            >
+              <Link href="#contact">Get in Touch</Link>
+            </Button>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+            className="md:hidden relative w-10 h-10 flex items-center justify-center"
+            aria-label="Toggle menu"
+          >
+            <div className="relative w-6 h-6">
+              <Menu
+                className={`absolute inset-0 w-6 h-6 transition-all duration-300 ${
+                  isMobileMenuOpen ? "opacity-0 rotate-90" : "opacity-100 rotate-0"
+                }`}
+              />
+              <X
+                className={`absolute inset-0 w-6 h-6 transition-all duration-300 ${
+                  isMobileMenuOpen ? "opacity-100 rotate-0" : "opacity-0 -rotate-90"
+                }`}
+              />
+            </div>
+          </button>
+        </nav>
+      </div>
+
+      {/* Mobile Menu */}
+      <div
+        className={`md:hidden absolute top-full left-0 right-0 bg-background/95 backdrop-blur-xl border-b border-border overflow-hidden transition-all duration-500 ${
+          isMobileMenuOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="px-6 py-6 space-y-4">
+          {navLinks.map((link, index) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              onClick={() => setIsMobileMenuOpen(false)}
+              className="block text-lg font-medium text-muted-foreground hover:text-foreground transition-all duration-300"
+              style={{ transitionDelay: `${index * 50}ms` }}
+            >
+              {link.label}
+            </Link>
+          ))}
+          <Button
+            asChild
+            className="w-full mt-4 bg-primary text-primary-foreground hover:bg-primary/90"
+          >
+            <Link href="#contact" onClick={() => setIsMobileMenuOpen(false)}>
+              Get in Touch
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </header>
+  )
+}