Initial commit

2026-02-20 16:22:48 +01:00
commit 77023919df
73 changed files with 12378 additions and 0 deletions
@@ -0,0 +1,96 @@
+import { Link, useLocation } from "react-router";
+import { Menu, X, Wrench } from "lucide-react";
+import { useState } from "react";
+
+export function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const location = useLocation();
+
+  const navItems = [
+    { name: "Home", path: "/" },
+    { name: "Services", path: "/services" },
+    { name: "About", path: "/about" },
+    { name: "Gallery", path: "/gallery" },
+    { name: "Contact", path: "/contact" },
+  ];
+
+  const isActive = (path: string) => location.pathname === path;
+
+  return (
+    <header className="bg-white shadow-md sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo */}
+          <Link to="/" className="flex items-center space-x-2">
+            <Wrench className="h-8 w-8 text-orange-600" />
+            <span className="font-bold text-xl text-gray-900">ProFix Handyman</span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <nav className="hidden md:flex space-x-8">
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                className={`transition-colors ${
+                  isActive(item.path)
+                    ? "text-orange-600"
+                    : "text-gray-700 hover:text-orange-600"
+                }`}
+              >
+                {item.name}
+              </Link>
+            ))}
+          </nav>
+
+          {/* CTA Button */}
+          <Link
+            to="/contact"
+            className="hidden md:block bg-orange-600 text-white px-6 py-2 rounded-md hover:bg-orange-700 transition-colors"
+          >
+            Get a Quote
+          </Link>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? (
+              <X className="h-6 w-6 text-gray-900" />
+            ) : (
+              <Menu className="h-6 w-6 text-gray-900" />
+            )}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {mobileMenuOpen && (
+          <nav className="md:hidden pb-4 pt-2">
+            {navItems.map((item) => (
+              <Link
+                key={item.path}
+                to={item.path}
+                onClick={() => setMobileMenuOpen(false)}
+                className={`block py-2 transition-colors ${
+                  isActive(item.path)
+                    ? "text-orange-600"
+                    : "text-gray-700 hover:text-orange-600"
+                }`}
+              >
+                {item.name}
+              </Link>
+            ))}
+            <Link
+              to="/contact"
+              onClick={() => setMobileMenuOpen(false)}
+              className="block mt-4 bg-orange-600 text-white px-6 py-2 rounded-md text-center hover:bg-orange-700 transition-colors"
+            >
+              Get a Quote
+            </Link>
+          </nav>
+        )}
+      </div>
+    </header>
+  );
+}