feat: add Navbar and Hero sections

2026-08-03 07:46:42 +02:00 · 2026-04-23 17:23:09 +08:00
parent d22e4c2596
commit 64f3e3f792
2 changed files with 134 additions and 0 deletions
@@ -0,0 +1,51 @@
+import { Github } from "lucide-react";
+import { FadeIn } from "./fade-in";
+import { TypingCursor } from "./typing-cursor";
+
+export function Hero() {
+  return (
+    <section className="px-6 pt-32 pb-20 md:pt-44 md:pb-32">
+      <div className="mx-auto max-w-4xl text-center">
+        <FadeIn>
+          <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
+            Your images.
+            <br />
+            Your infrastructure.
+          </h1>
+        </FadeIn>
+
+        <FadeIn delay={0.1}>
+          <p className="mt-6 text-xl md:text-2xl">
+            <TypingCursor />
+          </p>
+        </FadeIn>
+
+        <FadeIn delay={0.2}>
+          <div className="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
+            <a
+              href="https://demo.snapotter.com"
+              className="rounded-xl bg-accent px-8 py-3.5 text-base font-semibold text-accent-foreground shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
+            >
+              Try the Demo &rarr;
+            </a>
+            <a
+              href="https://github.com/ashim-hq/ashim"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 rounded-xl border border-border px-8 py-3.5 text-base font-semibold transition-colors hover:bg-background-alt"
+            >
+              <Github size={18} />
+              View on GitHub
+            </a>
+          </div>
+        </FadeIn>
+
+        <FadeIn delay={0.3}>
+          <p className="mt-8 text-sm text-muted">
+            AGPL-3.0 &middot; Docker one-liner &middot; Free forever
+          </p>
+        </FadeIn>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,83 @@
+"use client";
+
+import { Github, Menu, X } from "lucide-react";
+import { useState } from "react";
+
+const links = [
+  { label: "Features", href: "#features" },
+  { label: "Enterprise", href: "#enterprise" },
+  { label: "Docs", href: "https://docs.snapotter.com" },
+  { label: "GitHub", href: "https://github.com/ashim-hq/ashim", icon: Github },
+];
+
+export function Navbar() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-lg">
+      <div className="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
+        <a href="/" className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-accent-foreground text-sm font-bold">
+            S
+          </div>
+          <span className="text-lg font-bold tracking-tight">SnapOtter</span>
+        </a>
+
+        <div className="hidden items-center gap-8 md:flex">
+          {links.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="flex items-center gap-1.5 text-sm text-muted transition-colors hover:text-foreground"
+              {...(link.href.startsWith("http")
+                ? { target: "_blank", rel: "noopener noreferrer" }
+                : {})}
+            >
+              {link.icon && <link.icon size={16} />}
+              {link.label}
+            </a>
+          ))}
+        </div>
+
+        <div className="hidden md:block">
+          <a
+            href="https://demo.snapotter.com"
+            className="rounded-lg bg-accent px-4 py-2 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent-hover"
+          >
+            Try Demo
+          </a>
+        </div>
+
+        <button
+          className="md:hidden text-muted"
+          onClick={() => setOpen(!open)}
+          aria-label="Toggle menu"
+          type="button"
+        >
+          {open ? <X size={24} /> : <Menu size={24} />}
+        </button>
+      </div>
+
+      {open && (
+        <div className="border-t border-border bg-background px-6 py-4 md:hidden">
+          {links.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="block py-2 text-sm text-muted"
+              onClick={() => setOpen(false)}
+            >
+              {link.label}
+            </a>
+          ))}
+          <a
+            href="https://demo.snapotter.com"
+            className="mt-2 block rounded-lg bg-accent px-4 py-2 text-center text-sm font-medium text-accent-foreground"
+          >
+            Try Demo
+          </a>
+        </div>
+      )}
+    </nav>
+  );
+}