Complete landing page with full product experience

🔥 COMPLETE LANDING PAGE SECTIONS:
✅ ProofBar - Trust signals (benchmarks, creator split, refunds)
✅ AssetStrip - Featured assets with fire gradient previews
✅ HowItWorks - 4-step process (Generate → Gate → Publish → Iterate)
✅ Bundles - Product Hunt, ArchViz, Game Starter packs
✅ FAQ - License, refunds, payouts, AI disclosure

🎨 VISUAL UPGRADES:
- Hotter fire gradient (#FF2A15 → #FF5A14 → #FFC14D)
- All bundles use animated fire gradient backgrounds
- Consistent glass morphism styling throughout

📊 ANALYTICS TRACKING:
- Added data-evt attributes for GA4/PostHog tracking
- CTA click tracking across all sections
- Bundle preview and activate button tracking

Landing page now feels like a complete marketplace platform ready for launch.

Author: Metatronsdoob369

anymate_system/anymate_landing-page/src/App.tsx

@@ -9,21 +9,26 @@ import ActivatePanel from './components/ActivatePanel';
 import { AdminDashboard } from './components/AdminDashboard';
 import Wordmark from './components/Wordmark';
 import AssetStrip from './components/AssetStrip';
+import ProofBar from './components/ProofBar';
+import HowItWorks from './components/HowItWorks';
+import Bundles from './components/Bundles';
+import FAQ from './components/FAQ';
 
 function HeaderBar(){
   const [open, setOpen] = useState(false);
   return (
     <header className="flex justify-between items-center px-4 py-3 sticky top-0 bg-black/60 backdrop-blur-md z-50 border-b border-white/10">
       <div><Wordmark /></div>
       <nav className="flex gap-4 items-center">
-        <Link to="/waitlist" className="text-white hover:text-emerald-400 transition-colors">
+        <Link to="/waitlist" className="text-white hover:text-emerald-400 transition-colors" data-evt="cta_waitlist_header">
           Get early access
         </Link>
         <button 
           onClick={() => setOpen(true)} 
           aria-expanded={open} 
           aria-controls="activate-panel" 
           className="px-4 py-2 border border-white/20 bg-white/10 hover:bg-white/20 text-white rounded-lg transition-colors font-medium"
+          data-evt="activate_open"
         >
           ACTIVATE
         </button>
@@ -41,7 +46,15 @@ function AppLayout() {
       <HeaderBar />
       <main className="px-4 md:px-6">{/* page content */}
         <Outlet />
-        {onHome ? <AssetStrip /> : null}
+        {onHome ? (
+          <>
+            <ProofBar />
+            <AssetStrip />
+            <HowItWorks />
+            <Bundles />
+            <FAQ />
+          </>
+        ) : null}
       </main>
     </>
   );

anymate_system/anymate_landing-page/src/components/Bundles.tsx

@@ -0,0 +1,29 @@
+const bundles = [
+  { title: 'Product Hunt Launch Pack', blurb: 'Hero + ad set + welcome emails with proven hooks.', price: '$79' },
+  { title: 'ArchViz Client Pack', blurb: 'Outcomes-first LP sections + showcase grid + inquiry CTA.', price: '$59' },
+  { title: 'Game Starter Pack', blurb: 'Store page hero + trailer copy + UA ad set.', price: '$69' },
+];
+
+export default function Bundles(){
+  return (
+    <section className="mx-auto max-w-6xl mt-12">
+      <div className="flex items-baseline justify-between mb-3">
+        <h2 className="text-xl md:text-2xl font-semibold text-white/90">Bundles (coming online)</h2>
+        <a href="/waitlist" className="text-sm text-sky-300 hover:underline" data-evt="cta_waitlist_bundles">Join the drop →</a>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        {bundles.map((b, i) => (
+          <article key={i} className="rounded-xl border border-white/10 bg-white/5 p-4">
+            <div className="h-36 rounded-lg border border-white/10 bg-[linear-gradient(90deg,var(--fire-1),var(--fire-2),var(--fire-3))] animate-flame" />
+            <h3 className="text-white font-semibold mt-3">{b.title}</h3>
+            <p className="text-white/70 text-sm mt-1">{b.blurb}</p>
+            <div className="mt-3 flex items-center justify-between">
+              <span className="text-white/80 text-sm">{b.price}</span>
+              <a href="/waitlist" className="text-sm px-3 py-1 rounded-md border border-white/15 bg-white/5 hover:bg-white/10" data-evt="preview_bundle">Preview</a>
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}

anymate_system/anymate_landing-page/src/components/FAQ.tsx

@@ -0,0 +1,26 @@
+const Q = [
+  ['What license comes with a pack?',
+   'Non-exclusive, perpetual commercial use on your projects. Resale outside the marketplace is not allowed.'],
+  ['Do you allow refunds?',
+   'If a pack doesn't improve your flow in 14 days, we'll swap or credit your account.'],
+  ['How do creators get paid?',
+   'Stripe Connect (Express). Payouts typically clear after a short refund window.'],
+  ['Do you disclose AI usage?',
+   'Yes. Listings include an AI disclosure and any provenance we have.']
+];
+
+export default function FAQ(){
+  return (
+    <section className="mx-auto max-w-4xl mt-12 md:mt-16">
+      <h2 className="text-xl md:text-2xl font-semibold text-white/90 mb-4">FAQ</h2>
+      <div className="divide-y divide-white/10 border border-white/10 rounded-xl bg-white/5">
+        {Q.map(([q,a], i) => (
+          <details key={i} className="p-4">
+            <summary className="cursor-pointer text-white/90">{q}</summary>
+            <p className="mt-2 text-white/70 text-sm">{a}</p>
+          </details>
+        ))}
+      </div>
+    </section>
+  );
+}

anymate_system/anymate_landing-page/src/components/HowItWorks.tsx

@@ -0,0 +1,23 @@
+const steps = [
+  { n: 1, t: 'Generate', d: 'Brief in. Create ad sets, LP sections, emails.' },
+  { n: 2, t: 'Gate', d: 'Auto-checks: clarity, proof, UVs/LODs/maps if 3D.' },
+  { n: 3, t: 'Publish / Buy', d: 'List as a pack or buy verified packs.' },
+  { n: 4, t: 'Iterate', d: 'Benchmarks + analytics guide the next rev.' }
+];
+
+export default function HowItWorks(){
+  return (
+    <section className="mx-auto max-w-6xl mt-12 md:mt-16">
+      <h2 className="text-xl md:text-2xl font-semibold text-white/90 mb-4">How it works</h2>
+      <ol className="grid grid-cols-1 md:grid-cols-4 gap-4">
+        {steps.map(s => (
+          <li key={s.n} className="rounded-xl border border-white/10 bg-white/5 p-4">
+            <div className="text-white/60 text-sm">Step {s.n}</div>
+            <div className="text-white font-semibold mt-1">{s.t}</div>
+            <p className="text-white/70 text-sm mt-2">{s.d}</p>
+          </li>
+        ))}
+      </ol>
+    </section>
+  );
+}

anymate_system/anymate_landing-page/src/components/ProofBar.tsx

@@ -0,0 +1,17 @@
+export default function ProofBar(){
+  return (
+    <section className="mx-auto max-w-6xl mt-8">
+      <ul className="grid grid-cols-1 md:grid-cols-3 gap-3">
+        <li className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80">
+          ✅ Verified Benchmarks — packs list CVR/CTR when available
+        </li>
+        <li className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80">
+          💸 Creator Split — 90/10 for founding creators (90 days)
+        </li>
+        <li className="rounded-md border border-white/10 bg-white/5 px-3 py-2 text-sm text-white/80">
+          ↩️ Refunds/Credits — if a pack doesn't lift CVR, we swap/credit
+        </li>
+      </ul>
+    </section>
+  );
+}

anymate_system/anymate_landing-page/src/index.css

@@ -4,9 +4,9 @@
 
 @layer base {
   :root {
-    --fire-1: #FF3B1F; /* deeper red/orange */
-    --fire-2: #FF6A1A; /* hot orange */
-    --fire-3: #FFD166; /* ember gold */
+    --fire-1: #FF2A15; /* more red */
+    --fire-2: #FF5A14; /* hot orange */
+    --fire-3: #FFC14D; /* gold/ember */
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
     --card: 222.2 84% 4.9%;