Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Project Chimera — The Psychometric Engine for Conversational AI</title> | |
| <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧬</text></svg>"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap'); | |
| :root { | |
| --bg: #0a0a0a; | |
| --accent1: #00e0ff; | |
| --accent2: #7b61ff; | |
| --accent3: #00ffaa; | |
| } | |
| body { | |
| background: var(--bg); | |
| color: #f0f0f0; | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--accent1), var(--accent2)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .btn-primary { | |
| background: linear-gradient(90deg, var(--accent1), var(--accent2)); | |
| color: #000; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 0.5rem; | |
| font-weight: 600; | |
| transition: transform 0.2s; | |
| } | |
| .btn-primary:hover { | |
| transform: scale(1.05); | |
| } | |
| .card { | |
| background: rgba(255,255,255,0.03); | |
| border: 1px solid rgba(255,255,255,0.08); | |
| border-radius: 1rem; | |
| backdrop-filter: blur(8px); | |
| } | |
| .step-icon { | |
| width: 64px; | |
| height: 64px; | |
| background: linear-gradient(135deg, var(--accent1), var(--accent2)); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| color: #000; | |
| margin: 0 auto 1rem; | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| background: var(--accent1); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| opacity: 0.6; | |
| } | |
| </style> | |
| </head> | |
| <body class="overflow-x-hidden"> | |
| <!-- Hero --> | |
| <section id="hero" class="relative min-h-screen flex items-center justify-center px-6"> | |
| <div id="particles" class="absolute inset-0"></div> | |
| <div class="relative z-10 text-center max-w-4xl mx-auto"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 gradient-text">Project Chimera</h1> | |
| <p class="text-xl md:text-2xl mb-6">The Psychometric Engine for Conversational AI.</p> | |
| <p class="text-base md:text-lg text-gray-300 mb-8">Build high-fidelity Synthetic Selves that power explainable predictions and decisions.</p> | |
| <a href="#demo" class="btn-primary inline-block">See the Engine in Action</a> | |
| </div> | |
| </section> | |
| <!-- What is Chimera? --> | |
| <section id="what" class="py-20 px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">What is Chimera?</h2> | |
| <p class="text-lg text-gray-300 mb-12">Chimera turns conversation into a calibrated instrument. Every question, every answer builds a dynamic model of mind — a Synthetic Self — consented, auditable, and predictive.</p> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Presentation Persona</h3> | |
| <p class="text-gray-400">Surface-level responses, social mask.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Authentic Core</h3> | |
| <p class="text-gray-400">Deep psychometric profile revealed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How it Works --> | |
| <section id="how" class="py-20 px-6 bg-black/20"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 gradient-text">How it Works</h2> | |
| <div class="grid md:grid-cols-5 gap-6 text-center"> | |
| <div class="card p-6 hover:scale-105 transition"> | |
| <div class="step-icon">1</div> | |
| <h3 class="text-lg font-semibold mb-2">Consent First</h3> | |
| <p class="text-sm text-gray-400">Logged, revocable, transparent.</p> | |
| </div> | |
| <div class="card p-6 hover:scale-105 transition"> | |
| <div class="step-icon">2</div> | |
| <h3 class="text-lg font-semibold mb-2">Conversational Baselining</h3> | |
| <p class="text-sm text-gray-400">Psychometrics from dialogue.</p> | |
| </div> | |
| <div class="card p-6 hover:scale-105 transition"> | |
| <div class="step-icon">3</div> | |
| <h3 class="text-lg font-semibold mb-2">Subtle Elicitation</h3> | |
| <p class="text-sm text-gray-400">Precision probes, no drift.</p> | |
| </div> | |
| <div class="card p-6 hover:scale-105 transition"> | |
| <div class="step-icon">4</div> | |
| <h3 class="text-lg font-semibold mb-2">Dynamic Persona Template</h3> | |
| <p class="text-sm text-gray-400">Living model, explainable outputs.</p> | |
| </div> | |
| <div class="card p-6 hover:scale-105 transition"> | |
| <div class="step-icon">5</div> | |
| <h3 class="text-lg font-semibold mb-2">Predictive Convergence</h3> | |
| <p class="text-sm text-gray-400"><5% error, continuously updated.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Applications --> | |
| <section id="applications" class="py-20 px-6"> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-12 gradient-text">Applications</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Hiring & Recruiting</h3> | |
| <p class="text-gray-400">Explainable screening scorecards, faster decisions.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Learning & Development</h3> | |
| <p class="text-gray-400">Personalized coaching loops.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Sales & CS</h3> | |
| <p class="text-gray-400">Playbooks tuned to customer psychology.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Education</h3> | |
| <p class="text-gray-400">Adaptive tutoring & feedback.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">Compliance</h3> | |
| <p class="text-gray-400">Transparent, auditable reasoning.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why it Matters --> | |
| <section id="why" class="py-20 px-6 bg-black/20"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-12 gradient-text">Why it Matters</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">For Leaders</h3> | |
| <p class="text-gray-400">Decisions with proof, not hunches.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">For Users</h3> | |
| <p class="text-gray-400">Control, consent, transparency.</p> | |
| </div> | |
| <div class="card p-6"> | |
| <h3 class="text-xl font-semibold mb-2">For Teams</h3> | |
| <p class="text-gray-400">Less noise, more clarity.</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 card p-6 inline-block"> | |
| <p class="text-lg">Old Way → Gut Feel</p> | |
| <div class="w-48 h-2 bg-gray-700 rounded-full my-2 mx-auto relative"> | |
| <div class="absolute left-0 top-0 h-2 bg-gradient-to-r from-red-500 to-orange-500 rounded-full" style="width: 30%"></div> | |
| </div> | |
| <p class="text-lg mt-4">Chimera Way → Predictive Convergence</p> | |
| <div class="w-48 h-2 bg-gray-700 rounded-full my-2 mx-auto relative"> | |
| <div class="absolute left-0 top-0 h-2 bg-gradient-to-r from-teal-400 to-blue-500 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Case Study --> | |
| <section id="demo" class="py-20 px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">Applicant Insight (Case Study)</h2> | |
| <p class="text-lg text-gray-300 mb-12">Voice-first candidate intake → explainable scorecards → faster, fairer hiring.</p> | |
| <img src="http://static.photos/technology/1200x630/42" alt="Case Study" class="rounded-xl mx-auto mb-8"/> | |
| <div class="grid md:grid-cols-3 gap-6 text-left"> | |
| <div class="card p-4"> | |
| <h4 class="font-semibold mb-1">Candidate Phone Call</h4> | |
| <p class="text-sm text-gray-400">Natural dialogue, consent logged.</p> | |
| </div> | |
| <div class="card p-4"> | |
| <h4 class="font-semibold mb-1">AI Dialogue</h4> | |
| <p class="text-sm text-gray-400">Subtle probes, real-time modeling.</p> | |
| </div> | |
| <div class="card p-4"> | |
| <h4 class="font-semibold mb-1">Recruiter Dashboard</h4> | |
| <p class="text-sm text-gray-400">Explainable scorecard, decision ready.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trust & Governance --> | |
| <section id="trust" class="py-20 px-6 bg-black/20"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">Trust & Governance</h2> | |
| <p class="text-lg text-gray-300 mb-12">Consent ledger, provenance, audit trails, revocation — built-in by design.</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <span class="badge">No fabricated references</span> | |
| <span class="badge">Explainability Mandatory</span> | |
| <span class="badge">Consent Ledger</span> | |
| <span class="badge">Audit Trails</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section id="cta" class="py-20 px-6"> | |
| <div class="max-w-2xl mx-auto text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">Ready to Build Synthetic Selves?</h2> | |
| <form id="pilotForm" class="flex flex-col md:flex-row gap-4 justify-center"> | |
| <input type="email" placeholder="your@email.com" required class="flex-1 px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-teal-400"> | |
| <button type="submit" class="btn-primary">Request a Pilot</button> | |
| </form> | |
| <p id="formMsg" class="mt-4 text-sm hidden"></p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-8 px-6 border-t border-white/10"> | |
| <div class="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4"> | |
| <nav class="flex gap-6 text-sm"> | |
| <a href="#what" class="hover:text-teal-400 transition">About</a> | |
| <a href="#how" class="hover:text-teal-400 transition">Docs</a> | |
| <a href="#cta" class="hover:text-teal-400 transition">Contact</a> | |
| <a href="#" class="hover:text-teal-400 transition">Privacy</a> | |
| </nav> | |
| <p class="text-sm text-gray-500">Project Chimera — Predictive Convergence with Consent.</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Particles | |
| const particlesContainer = document.getElementById('particles'); | |
| for (let i = 0; i < 80; i++) { | |
| const p = document.createElement('div'); | |
| p.className = 'particle'; | |
| p.style.left = Math.random() * 100 + '%'; | |
| p.style.top = Math.random() * 100 + '%'; | |
| particlesContainer.appendChild(p); | |
| } | |
| anime({ | |
| targets: '.particle', | |
| translateX: () => anime.random(-20, 20), | |
| translateY: () => anime.random(-20, 20), | |
| scale: [1, 1.5, 1], | |
| opacity: [0.6, 1, 0.6], | |
| duration: anime.random(3000, 5000), | |
| easing: 'easeInOutQuad', | |
| loop: true, | |
| delay: anime.stagger(100) | |
| }); | |
| // Form | |
| document.getElementById('pilotForm').addEventListener('submit', e => { | |
| e.preventDefault(); | |
| const msg = document.getElementById('formMsg'); | |
| msg.textContent = 'Thank you! We’ll be in touch shortly.'; | |
| msg.classList.remove('hidden', 'text-red-400'); | |
| msg.classList.add('text-teal-400'); | |
| e.target.reset(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |