feat: initial release of NASG

components/Header.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { Shield } from "lucide-react";
+
+export default function Header() {
+  return (
+    <motion.div
+      className="text-center"
+      initial={{ opacity: 0, y: -15 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2, duration: 0.5, ease: "easeOut" }}
+    >
+      <div className="mx-auto mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/10 px-3 py-1 text-xs font-medium text-neutral-200 backdrop-blur-sm">
+        <Shield className="h-3.5 w-3.5" />
+        secure • 32 bytes Base64
+      </div>
+      <h1 className="text-3xl md:text-5xl font-extrabold tracking-tight text-white">
+        Auth secret generator
+      </h1>
+      <p className="mt-2 text-sm text-neutral-300">
+        Generate a cryptographically-secure secret for your Next.js apps.
+      </p>
+    </motion.div>
+  );
+}