Seed: saas template (34 files)

2026-07-23 22:08:35 +00:00
parent 4f760782ac
commit d232731c62
1 changed files with 103 additions and 0 deletions
@@ -0,0 +1,103 @@
+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, Layers } from "lucide-react";
+import { ThemeToggle } from "@/components/ThemeToggle";
+
+const navLinks = [
+  { label: "Features", to: "/features" },
+  { label: "Pricing", to: "/pricing" },
+  { label: "About", to: "/about" },
+  { label: "Blog", to: "/blog" },
+  { label: "Contact", to: "/contact" },
+  { label: "Dashboard", to: "/dashboard" },
+];
+
+export default function Header() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 20);
+    window.addEventListener("scroll", onScroll);
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  return (
+    <header className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${
+      scrolled
+        ? "bg-white/95 backdrop-blur-lg border-b border-slate-100 shadow-sm"
+        : "bg-transparent"
+    }`}>
+      <div className="mx-auto max-w-7xl flex items-center justify-between px-6 py-4">
+        {/* Logo */}
+        <Link to="/" className="flex items-center gap-2">
+          <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center">
+            <Layers className="h-4 w-4 text-white" />
+          </div>
+          <span className={`text-lg font-bold tracking-tight \${scrolled ? "text-slate-900" : "text-white"}`}>
+            Nexus
+          </span>
+        </Link>
+
+        {/* Desktop Nav */}
+        <nav className="hidden md:flex items-center gap-8">
+          {navLinks.map((l) => (
+            <Link
+              key={l.to}
+              to={l.to}
+              className={`text-sm font-medium transition-colors \${
+                scrolled ? "text-slate-600 hover:text-slate-900" : "text-slate-300 hover:text-white"
+              }`}
+            >
+              {l.label}
+            </Link>
+          ))}
+        </nav>
+
+        {/* Right Actions */}
+        <div className="hidden md:flex items-center gap-3">
+          <ThemeToggle />
+          <Button asChild variant="ghost" size="sm" className={`rounded-full \${scrolled ? "text-slate-600 hover:text-slate-900" : "text-slate-300 hover:text-white hover:bg-white/10"}`}>
+            <Link to="/login">Sign In</Link>
+          </Button>
+          <Button asChild size="sm" className="active:scale-[0.98] rounded-full bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg shadow-indigo-500/20">
+            <Link to="/signup">Get Started</Link>
+          </Button>
+        </div>
+
+        {/* Mobile Menu */}
+        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+          <SheetTrigger asChild className="md:hidden">
+            <Button variant="ghost" size="icon" className={`\${scrolled ? "text-slate-900" : "text-white"}`}>
+              <Menu className="h-5 w-5" />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="right" className="w-72 bg-white">
+            <div className="flex flex-col gap-1 mt-8">
+              {navLinks.map((l) => (
+                <Link
+                  key={l.to}
+                  to={l.to}
+                  onClick={() => setMobileOpen(false)}
+                  className="text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg px-4 py-3 transition-colors"
+                >
+                  {l.label}
+                </Link>
+              ))}
+              <div className="border-t border-slate-100 my-4" />
+              <Link to="/login" onClick={() => setMobileOpen(false)} className="text-sm font-medium text-slate-600 hover:text-slate-900 hover:bg-slate-50 rounded-lg px-4 py-3">
+                Sign In
+              </Link>
+              <Button asChild className="active:scale-[0.98] mx-4 mt-2 rounded-full bg-indigo-600 hover:bg-indigo-500 text-white">
+                <Link to="/signup" onClick={() => setMobileOpen(false)}>Get Started</Link>
+              </Button>
+              <div className="px-4 mt-2"><ThemeToggle /></div>
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </header>
+  );
+}