Premium landing page: improved typography, spacing, and animations

src/app/page.tsx

@@ -1,55 +1,70 @@
+import Link from 'next/link';
+
 export default function Home() {
   return (
-    <div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden grid-bg">
+    <div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
       {/* Ambient glow orbs */}
-      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-violet-900/20 rounded-full blur-3xl pointer-events-none" />
-      <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-cyan-900/20 rounded-full blur-3xl pointer-events-none" />
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-violet-600/10 rounded-full blur-3xl pointer-events-none animate-pulse-slow" />
+      <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl pointer-events-none" style={{animationDelay: '1s'}} />
 
-      <div className="relative z-10 flex flex-col items-center text-center px-6 max-w-3xl">
-        {/* Gate badge */}
-        <div className="mb-8 px-4 py-1.5 rounded-full border border-violet-800/50 bg-violet-950/40 text-violet-400 text-xs font-mono tracking-widest uppercase">
-          Relational Intelligence Infrastructure
+      <div className="relative z-10 flex flex-col items-center text-center px-6 max-w-5xl mx-auto space-y-12">
+        {/* Badge */}
+        <div className="group">
+          <div className="px-6 py-2.5 rounded-full border border-violet-500/30 bg-violet-950/30 backdrop-blur-sm">
+            <p className="text-sm font-medium text-violet-300 tracking-wide">
+              RELATIONAL INTELLIGENCE INFRASTRUCTURE
+            </p>
+          </div>
         </div>
 
-        <h1 className="text-5xl md:text-7xl font-light tracking-tight text-slate-100 mb-6 leading-tight">
+        {/* Hero headline */}
+        <h1 className="text-6xl md:text-8xl font-light tracking-tight leading-none">
           What broke between<br />
-          <span className="text-violet-400">you</span>?
+          <span className="text-transparent bg-clip-text bg-gradient-to-r from-violet-400 to-violet-200">
+            you
+          </span>
+          <span className="text-violet-400">?</span>
         </h1>
 
-        <p className="text-lg text-slate-500 max-w-xl mb-10 leading-relaxed">
-          DEFRAG maps the invisible architecture of your psychology
-          and the people around you. Know yourself. Navigate each other.
+        {/* Subheading */}
+        <p className="text-xl md:text-2xl text-slate-400 max-w-3xl leading-relaxed font-light">
+          DEFRAG maps the invisible architecture of your psychology and the people around you. 
+          <span className="text-slate-300"> Know yourself. Navigate each other.</span>
         </p>
 
-        <div className="flex flex-col sm:flex-row items-center gap-4">
-          <a
+        {/* CTA buttons */}
+        <div className="flex flex-col sm:flex-row items-center gap-6 pt-4">
+          <Link
             href="/onboarding"
-            className="px-8 py-3 rounded bg-violet-700 hover:bg-violet-600 text-white font-mono text-sm tracking-wide transition-all glow-accent"
+            className="group relative px-10 py-4 rounded-xl bg-gradient-to-r from-violet-600 to-violet-500 hover:from-violet-500 hover:to-violet-400 text-white font-medium text-lg transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-violet-500/40 active:scale-95"
           >
-            Run Diagnostic
-          </a>
-          <a
+            <span className="relative z-10">Run Diagnostic</span>
+            <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-violet-400 to-violet-300 opacity-0 group-hover:opacity-20 blur transition-opacity" />
+          </Link>
+          <Link
             href="/dashboard"
-            className="px-8 py-3 rounded border border-slate-700 text-slate-400 hover:border-violet-700 hover:text-violet-400 font-mono text-sm tracking-wide transition-all"
+            className="px-10 py-4 rounded-xl border-2 border-violet-500/30 hover:border-violet-500/60 hover:bg-violet-500/10 text-slate-300 hover:text-white font-medium text-lg transition-all duration-300 hover:shadow-lg hover:shadow-violet-500/20"
           >
             View Demo
-          </a>
+          </Link>
         </div>
 
-        {/* Ticker */}
-        <div className="mt-16 grid grid-cols-3 gap-8 text-center">
-          {[
-            { label: 'Archetypal Gates', val: '64' },
-            { label: 'Relational Vectors', val: '\u221e' },
-            { label: 'System Load', val: 'NOMINAL' },
-          ].map(({ label, val }) => (
-            <div key={label} className="flex flex-col gap-1">
-              <span className="text-2xl font-mono text-violet-400">{val}</span>
-              <span className="text-xs text-slate-600 tracking-widest uppercase">{label}</span>
-            </div>
-          ))}
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-12 pt-16">
+          <div className="flex flex-col items-center">
+            <div className="text-5xl font-light text-white mb-2">64</div>
+            <div className="text-sm text-slate-500 uppercase tracking-widest">Archetypal Gates</div>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="text-5xl font-light text-white mb-2">∞</div>
+            <div className="text-sm text-slate-500 uppercase tracking-widest">Relational Vectors</div>
+          </div>
+          <div className="flex flex-col items-center">
+            <div className="text-5xl font-light text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400 mb-2">NOMINAL</div>
+            <div className="text-sm text-slate-500 uppercase tracking-widest">System Load</div>
+          </div>
         </div>
       </div>
     </div>
   );
-}
+}