-
- grimoire
-
-
+ {/* Mobile: Logo with gradient */}
+
+
+
a nostr client for magicians
diff --git a/src/components/ui/grimoire-logo.tsx b/src/components/ui/grimoire-logo.tsx
new file mode 100644
index 0000000..8038e53
--- /dev/null
+++ b/src/components/ui/grimoire-logo.tsx
@@ -0,0 +1,78 @@
+import { cn } from "@/lib/utils";
+import { useId } from "react";
+
+interface GrimoireLogoProps {
+ className?: string;
+ size?: number;
+ /**
+ * Which gradient style to use:
+ * - "original": The original radial gradient (orange -> purple -> blue)
+ * - "theme": Linear gradient matching text-grimoire-gradient (yellow -> orange -> purple -> cyan)
+ */
+ gradient?: "original" | "theme";
+}
+
+/**
+ * Grimoire logo with the signature gradient.
+ * The logo shape is a stylized pentagram/grimoire icon with a star element.
+ */
+export function GrimoireLogo({
+ className,
+ size = 160,
+ gradient = "original",
+}: GrimoireLogoProps) {
+ // Maintain original aspect ratio (121:160)
+ const width = (size * 121) / 160;
+ const height = size;
+
+ // Use unique ID to avoid conflicts when multiple logos are on the page
+ const gradientId = useId();
+
+ return (
+
+ );
+}