2026-03-02T08-53-02_auto_memory/memories.db-wal

chatgpt-to-claude/src/components/SignetCallout.astro

@@ -2,41 +2,77 @@
 import { SIGNET_URL } from "@/consts";
 ---
 
-<section class="py-16 px-4 sm:px-6">
+<section class="py-20 px-4 sm:px-6">
   <div class="max-w-4xl mx-auto">
     <div
-      class="rounded-2xl bg-gradient-to-br from-accent/10 via-surface-muted to-primary/10 border border-accent/20 p-8 sm:p-10 text-center"
+      class="relative overflow-hidden rounded-2xl border border-accent/20 p-10 sm:p-14 text-center"
     >
-      <span
-        class="inline-block text-xs font-mono text-accent uppercase tracking-wider mb-4"
+      <!-- Background layers -->
+      <div class="absolute inset-0 bg-surface-muted"></div>
+      <div
+        class="absolute inset-0 bg-gradient-to-br from-accent/8 via-transparent to-primary/8"
       >
-        For Power Users
-      </span>
-      <h2 class="text-2xl sm:text-3xl font-bold text-text mb-4">
-        Using Multiple AI Tools?
-      </h2>
-      <p class="text-text-muted max-w-xl mx-auto mb-6 leading-relaxed">
-        Signet keeps your memory in sync across Claude, ChatGPT, Claude Code,
-        and any AI tool — automatically. No more manual imports.
-      </p>
-      <a
-        href={SIGNET_URL}
-        target="_blank"
-        rel="noopener noreferrer"
-        class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold transition-all"
+      </div>
+      <div
+        class="absolute top-0 right-0 w-[300px] h-[300px] bg-accent/5 rounded-full blur-[80px]"
       >
-        Try Signet
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
+      </div>
+      <div
+        class="absolute bottom-0 left-0 w-[250px] h-[250px] bg-primary/5 rounded-full blur-[60px]"
+      >
+      </div>
+
+      <!-- Content -->
+      <div class="relative z-10">
+        <span
+          class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 border border-accent/20 text-xs font-mono text-accent uppercase tracking-wider mb-6"
         >
-          <path d="M5 12h14M12 5l7 7-7 7"></path>
-        </svg>
-      </a>
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"></path>
+          </svg>
+          For Power Users
+        </span>
+
+        <h2 class="text-3xl sm:text-4xl font-bold text-text mb-4">
+          Using Multiple AI Tools?
+        </h2>
+        <p
+          class="text-text-muted max-w-lg mx-auto mb-8 leading-relaxed text-lg"
+        >
+          Signet keeps your memory in sync across Claude, ChatGPT, Claude Code,
+          and any AI tool — automatically. Never re-import again.
+        </p>
+
+        <a
+          href={SIGNET_URL}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 px-8 py-3.5 rounded-xl bg-accent hover:bg-accent-dark text-white font-semibold transition-all shadow-lg shadow-accent/25 hover:shadow-accent/40 hover:-translate-y-0.5"
+        >
+          Try Signet
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M5 12h14M12 5l7 7-7 7"></path>
+          </svg>
+        </a>
+
+        <p class="mt-6 text-xs text-text-muted/60">
+          Works with Claude, ChatGPT, Claude Code, OpenClaw, and more
+        </p>
+      </div>
     </div>
   </div>
 </section>