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

chatgpt-to-claude/src/pages/index.astro

@@ -0,0 +1,160 @@
+---
+import BaseLayout from "@/layouts/BaseLayout.astro";
+import Hero from "@/components/Hero";
+import MigrationWizard from "@/components/wizard/MigrationWizard";
+import SignetCallout from "@/components/SignetCallout.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "@/consts";
+---
+
+<BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION}>
+  <Hero client:load />
+
+  <!-- How It Works -->
+  <section class="py-16 px-4 sm:px-6 border-t border-surface-border">
+    <div class="max-w-4xl mx-auto">
+      <h2 class="text-2xl font-bold text-text text-center mb-10">
+        How It Works
+      </h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div
+          class="rounded-xl bg-surface-muted border border-surface-border p-6 text-center"
+        >
+          <div
+            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4"
+          >
+            <span class="text-xl font-bold text-primary-light">1</span>
+          </div>
+          <h3 class="text-base font-semibold text-text mb-2">
+            Extract from ChatGPT
+          </h3>
+          <p class="text-sm text-text-muted">
+            Copy our prompt into ChatGPT. It generates a summary of everything
+            it knows about you.
+          </p>
+        </div>
+
+        <div
+          class="rounded-xl bg-surface-muted border border-surface-border p-6 text-center"
+        >
+          <div
+            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4"
+          >
+            <span class="text-xl font-bold text-primary-light">2</span>
+          </div>
+          <h3 class="text-base font-semibold text-text mb-2">
+            Review & Clean Up
+          </h3>
+          <p class="text-sm text-text-muted">
+            Paste the response here. Edit out anything you don't want Claude to
+            know. Trim the boilerplate.
+          </p>
+        </div>
+
+        <div
+          class="rounded-xl bg-surface-muted border border-surface-border p-6 text-center"
+        >
+          <div
+            class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4"
+          >
+            <span class="text-xl font-bold text-primary-light">3</span>
+          </div>
+          <h3 class="text-base font-semibold text-text mb-2">
+            Import into Claude
+          </h3>
+          <p class="text-sm text-text-muted">
+            One click opens Claude's memory import. Paste your profile and
+            you're done.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Migration Wizard -->
+  <section id="wizard" class="py-16 px-4 sm:px-6">
+    <div class="max-w-4xl mx-auto">
+      <MigrationWizard client:load />
+    </div>
+  </section>
+
+  <!-- Value Props -->
+  <section class="py-16 px-4 sm:px-6 border-t border-surface-border">
+    <div class="max-w-4xl mx-auto">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div class="text-center">
+          <div
+            class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mx-auto mb-3"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="text-accent"
+            >
+              <circle cx="12" cy="12" r="10"></circle>
+              <path d="M12 6v6l4 2"></path>
+            </svg>
+          </div>
+          <h3 class="text-sm font-semibold text-text mb-1">3-Minute Setup</h3>
+          <p class="text-xs text-text-muted">
+            Copy, paste, done. No complex export processes.
+          </p>
+        </div>
+
+        <div class="text-center">
+          <div
+            class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mx-auto mb-3"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="text-accent"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+              <path d="M7 11V7a5 5 0 0110 0v4"></path>
+            </svg>
+          </div>
+          <h3 class="text-sm font-semibold text-text mb-1">
+            100% Client-Side
+          </h3>
+          <p class="text-xs text-text-muted">
+            No data leaves your browser. No server, no tracking.
+          </p>
+        </div>
+
+        <div class="text-center">
+          <div
+            class="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mx-auto mb-3"
+          >
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              class="text-accent"
+            >
+              <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+            </svg>
+          </div>
+          <h3 class="text-sm font-semibold text-text mb-1">
+            Free Forever
+          </h3>
+          <p class="text-xs text-text-muted">
+            No account, no paywall, no upsell. Just a useful tool.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <SignetCallout />
+</BaseLayout>