2026-03-02T08-52-11_auto_memory/memories.db-wal

chatgpt-to-claude/src/components/Hero.tsx

@@ -1,24 +1,78 @@
-export default function Hero() {
-  return (
-    <section className="relative pt-28 pb-20 sm:pt-36 sm:pb-28 px-4 sm:px-6 overflow-hidden">
-      {/* Background gradient */}
-      <div className="absolute inset-0 bg-gradient-to-b from-primary/5 via-transparent to-transparent pointer-events-none" />
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-primary/5 rounded-full blur-3xl pointer-events-none" />
+import { useEffect, useRef } from "react";
 
-      <div className="relative max-w-3xl mx-auto text-center">
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 border border-accent/20 text-xs text-accent font-medium mb-6">
+export default function Hero() {
+  const heroRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const mm = window.matchMedia("(prefers-reduced-motion: reduce)");
+    if (mm.matches) return;
+
+    let raf: number;
+    const hero = heroRef.current;
+    if (!hero) return;
+
+    const orbs = hero.querySelectorAll<HTMLDivElement>("[data-orb]");
+    let t = 0;
+
+    const animate = () => {
+      t += 0.002;
+      orbs.forEach((orb, i) => {
+        const offset = i * 2.1;
+        const x = Math.sin(t + offset) * 30;
+        const y = Math.cos(t * 0.7 + offset) * 20;
+        orb.style.transform = `translate(${x}px, ${y}px)`;
+      });
+      raf = requestAnimationFrame(animate);
+    };
+
+    raf = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  return (
+    <section
+      ref={heroRef}
+      className="relative pt-28 pb-20 sm:pt-40 sm:pb-32 px-4 sm:px-6 overflow-hidden"
+    >
+      {/* Gradient mesh background */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div
+          data-orb
+          className="absolute top-[15%] left-[20%] w-[500px] h-[500px] rounded-full bg-primary/8 blur-[120px]"
+        />
+        <div
+          data-orb
+          className="absolute top-[40%] right-[15%] w-[400px] h-[400px] rounded-full bg-accent/6 blur-[100px]"
+        />
+        <div
+          data-orb
+          className="absolute bottom-[10%] left-[40%] w-[350px] h-[350px] rounded-full bg-primary/5 blur-[80px]"
+        />
+      </div>
+
+      {/* Grid pattern overlay */}
+      <div
+        className="absolute inset-0 pointer-events-none opacity-[0.03]"
+        style={{
+          backgroundImage: `linear-gradient(rgba(99,102,241,0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.3) 1px, transparent 1px)`,
+          backgroundSize: "60px 60px",
+        }}
+      />
+
+      <div className="relative max-w-3xl mx-auto text-center z-10">
+        <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-accent/10 border border-accent/20 text-xs text-accent font-medium mb-8 backdrop-blur-sm">
           <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse" />
           Free — No account required
         </div>
 
-        <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-text leading-tight mb-6">
-          Move Your{" "}
-          <span className="text-primary-light">ChatGPT Memory</span>
+        <h1 className="text-4xl sm:text-5xl lg:text-[3.5rem] xl:text-[4rem] font-bold leading-[1.1] mb-6 tracking-tight">
+          <span className="text-text">Move Your </span>
+          <span className="text-gradient">ChatGPT Memory</span>
           <br />
-          to Claude in 3 Minutes
+          <span className="text-text">to Claude in 3 Minutes</span>
         </h1>
 
-        <p className="text-lg sm:text-xl text-text-muted max-w-2xl mx-auto mb-8 leading-relaxed">
+        <p className="text-lg sm:text-xl text-text-muted max-w-2xl mx-auto mb-10 leading-relaxed">
           Extract your preferences, context, and working style from ChatGPT.
           Import it into Claude. No data leaves your browser.
         </p>
@@ -26,17 +80,44 @@ export default function Hero() {
         <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
           <a
             href="#wizard"
-            className="px-8 py-3 rounded-xl bg-primary hover:bg-primary-dark text-white font-semibold text-base transition-all"
+            className="group relative px-8 py-3.5 rounded-xl bg-primary hover:bg-primary-dark text-white font-semibold text-base transition-all shadow-lg shadow-primary/25 hover:shadow-primary/40 hover:-translate-y-0.5"
           >
             Start the Migration
           </a>
           <a
             href="/blog/how-to-switch-from-chatgpt-to-claude/"
-            className="px-6 py-3 rounded-xl bg-surface-muted border border-surface-border hover:border-text-muted/50 text-text-muted hover:text-text text-sm transition-all"
+            className="px-6 py-3.5 rounded-xl bg-surface-muted/80 backdrop-blur-sm border border-surface-border hover:border-text-muted/50 text-text-muted hover:text-text text-sm font-medium transition-all"
           >
             Read the Guide
           </a>
         </div>
+
+        {/* Social proof */}
+        <div className="mt-12 flex items-center justify-center gap-6 text-xs text-text-muted">
+          <span className="flex items-center gap-1.5">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-accent">
+              <path d="M22 11.08V12a10 10 0 11-5.93-9.14" />
+              <polyline points="22 4 12 14.01 9 11.01" />
+            </svg>
+            No sign-up
+          </span>
+          <span className="w-px h-3 bg-surface-border" />
+          <span className="flex items-center gap-1.5">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-accent">
+              <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+              <path d="M7 11V7a5 5 0 0110 0v4" />
+            </svg>
+            100% private
+          </span>
+          <span className="w-px h-3 bg-surface-border" />
+          <span className="flex items-center gap-1.5">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-accent">
+              <circle cx="12" cy="12" r="10" />
+              <path d="M12 6v6l4 2" />
+            </svg>
+            ~3 minutes
+          </span>
+        </div>
       </div>
     </section>
   );