Seed: real-estate template (18 files)

2026-07-23 22:11:41 +00:00
parent a26e355f06
commit ec815475af
1 changed files with 62 additions and 0 deletions
@@ -0,0 +1,62 @@
+import { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Menu, Home } from "lucide-react";
+import { ThemeToggle } from "@/components/ThemeToggle";
+
+export default function Header() {
+  const [open, setOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const fn = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", fn);
+    return () => window.removeEventListener("scroll", fn);
+  }, []);
+
+  const links = [
+    { label: "Properties", to: "/properties" },
+    { label: "Agents", to: "/agents" },
+    { label: "About", to: "/about" },
+    { label: "Contact", to: "/contact" },
+  ];
+
+  return (
+    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${scrolled ? "bg-white/90 dark:bg-stone-950/95 backdrop-blur-lg border-b border-stone-200 dark:border-stone-800 shadow-sm" : "bg-transparent"}`}>
+      <div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-4">
+        <Link to="/" className="flex items-center gap-2 group">
+          <Home className={`h-6 w-6 transition-colors \${scrolled ? "text-emerald-600" : "text-white"}`} />
+          <span className={`text-lg font-bold tracking-tight transition-colors \${scrolled ? "text-stone-900 dark:text-white" : "text-white"}`}>Prestige Realty</span>
+        </Link>
+        <nav className="hidden md:flex items-center gap-8">
+          {links.map((l) => (
+            <Link key={l.to} to={l.to} className={`text-sm font-medium transition-colors hover:text-emerald-500 \${scrolled ? "text-stone-600 dark:text-stone-300" : "text-white/90"}`}>{l.label}</Link>
+          ))}
+        </nav>
+        <div className="hidden md:flex items-center gap-3">
+          <ThemeToggle />
+          <Button asChild size="sm" className="bg-emerald-600 hover:bg-emerald-700 text-white rounded-full px-6 shadow-lg shadow-emerald-600/20 active:scale-[0.97] transition-all">
+            <Link to="/contact">Schedule Viewing</Link>
+          </Button>
+        </div>
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild className="md:hidden">
+            <Button variant="ghost" size="icon" className={`\${scrolled ? "text-stone-900 dark:text-white" : "text-white"}`}><Menu className="h-5 w-5" /></Button>
+          </SheetTrigger>
+          <SheetContent side="right" className="w-72 bg-white dark:bg-stone-950 border-stone-200 dark:border-stone-800">
+            <nav className="mt-8 flex flex-col gap-4">
+              {links.map((l) => (
+                <Link key={l.to} to={l.to} className="text-lg font-medium text-stone-700 dark:text-stone-200 hover:text-emerald-600 transition-colors" onClick={() => setOpen(false)}>{l.label}</Link>
+              ))}
+              <Button asChild className="mt-4 w-full bg-emerald-600 hover:bg-emerald-700 text-white rounded-full active:scale-[0.97] transition-all">
+                <Link to="/contact" onClick={() => setOpen(false)}>Schedule Viewing</Link>
+              </Button>
+              <ThemeToggle />
+            </nav>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </header>
+  );
+}