Hugging Face's logo

Spaces:
steake
/
project-chimera-the-psychometric-engine
Running

App Files Community
steake commited on
Commit
47fe85a
·
verified ·
1 Parent(s): 3b41a11

# Prompt: Generate a full responsive website for **Project Chimera**

Browse files

## Brand & Voice
- Style: **futuristic, elegant, precise**, with subtle hints of deep intelligence (think: **neural networks meets scientific instruments**).
- Tone: **clear, authoritative, visionary**—avoid hype, but keep it inspiring.
- Visuals: Dark background with luminous accent gradients (teal, violet, electric blue).
- Typography: Clean sans-serif for body; distinctive modern serif for headings.
- Imagery: Subtle data-driven animations (flowing network graphs, pulses, “synthetic self” motifs).
- Symbolism: **Chimera = fusion of human + machine cognition**.

## Core Pages / Sections

### 1. Home
- Hero headline: **“Project Chimera — The Psychometric Engine for Conversational AI.”**
- Subheadline: *“Build high-fidelity Synthetic Selves that power explainable predictions and decisions.”*
- Call to Action: **“See the Engine in Action”** (scrolls to demo).
- Background: Animated hypergraph / particles forming a human silhouette.

### 2. What is Chimera?
- Short explainer: *“Chimera turns conversation into a calibrated instrument. Every question, every answer builds a dynamic model of mind — a Synthetic Self — consented, auditable, and predictive.”*
- Visual: Split-layer diagram: *Presentation Persona* vs *Authentic Core*.

### 3. How it Works
- 5-step graphic (with hover animations):
1. **Consent First** (logged, revocable)
2. **Conversational Baselining** (psychometrics from dialogue)
3. **Subtle Elicitation** (precision probes, no open-ended drift)
4. **Dynamic Persona Template** (living model, explainable outputs)
5. **Predictive Convergence** (<5% error, continuously updated)
- Each step shows icon + one sentence.

### 4. Applications
- Hiring & Recruiting → Explainable screening scorecards, faster decisions.
- Learning & Development → Personalized coaching loops.
- Sales & CS → Playbooks tuned to customer psychology.
- Education → Adaptive tutoring & feedback.
- Compliance → Transparent, auditable reasoning.

### 5. Why it Matters
- **For leaders:** Decisions with proof, not hunches.
- **For users:** Control, consent, transparency.
- **For teams:** Less noise, more clarity.
- Visual: Infographic showing “Old Way → Gut Feel” vs “Chimera Way → Predictive Convergence.”

### 6. Applicant Insight (Case Study)
- Real example: voice-first candidate intake → explainable scorecards → faster, fairer hiring.
- Graphic: Candidate phone call → AI dialogue → recruiter dashboard with scorecard.

### 7. Trust & Governance
- Highlight: Consent ledger, provenance, audit trails, revocation.
- Badges: “No fabricated references”, “Explainability Mandatory.”

### 8. Call to Action
- Headline: **“Ready to Build Synthetic Selves?”**
- Button: **“Request a Pilot”** (form capture).

### 9. Footer
- Minimalist: Links to About, Docs, Contact, Privacy.
- Tagline: *“Project Chimera — Predictive Convergence with Consent.”*

## Additional Notes
- Include smooth scroll, subtle particle effects, and animated SVG diagrams.
- Mobile-first design, fast loading.
- Integrate sections as one continuous **scroll-based storytelling** page.

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +584 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Project Chimera The Psychometric Engine
3
- emoji: 🌖
4
- colorFrom: green
5
  colorTo: yellow
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Project Chimera - The Psychometric Engine 🧠
3
+ colorFrom: yellow
 
4
  colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,585 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Project Chimera - The Psychometric Engine</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Inter', sans-serif;
15
+ background-color: #111827;
16
+ color: #f3f4f6;
17
+ scroll-behavior: smooth;
18
+ }
19
+
20
+ h1, h2, h3, h4 {
21
+ font-family: 'Playfair Display', serif;
22
+ }
23
+
24
+ .gradient-text {
25
+ background: linear-gradient(90deg, #10b981, #3b82f6);
26
+ -webkit-background-clip: text;
27
+ background-clip: text;
28
+ color: transparent;
29
+ }
30
+
31
+ .section-divider {
32
+ height: 1px;
33
+ background: linear-gradient(90deg, rgba(16, 185, 129, 0), #10b981, rgba(16, 185, 129, 0));
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <!-- Navigation -->
39
+ <nav class="fixed w-full bg-gray-900 bg-opacity-90 backdrop-blur-sm z-50">
40
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
41
+ <div class="flex justify-between h-16 items-center">
42
+ <div class="flex-shrink-0 flex items-center">
43
+ <span class="text-xl font-bold gradient-text">Project Chimera</span>
44
+ </div>
45
+ <div class="hidden md:block">
46
+ <div class="ml-10 flex items-baseline space-x-4">
47
+ <a href="#about" class="text-gray-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium">What is Chimera?</a>
48
+ <a href="#how-it-works" class="text-gray-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium">How it Works</a>
49
+ <a href="#applications" class="text-gray-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium">Applications</a>
50
+ <a href="#case-study" class="text-gray-300 hover:text-emerald-400 px-3 py-2 rounded-md text-sm font-medium">Case Study</a>
51
+ <a href="#contact" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-md text-sm font-medium">Request Pilot</a>
52
+ </div>
53
+ </div>
54
+ <div class="md:hidden">
55
+ <button class="text-gray-300 hover:text-white focus:outline-none">
56
+ <i data-feather="menu"></i>
57
+ </button>
58
+ </div>
59
+ </div>
60
+ </div>
61
+ </nav>
62
+
63
+ <!-- Hero Section -->
64
+ <section id="hero" class="relative h-screen flex items-center justify-center overflow-hidden">
65
+ <div id="vanta-bg" class="absolute inset-0"></div>
66
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
67
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
68
+ <span class="gradient-text">Project Chimera</span> —<br>
69
+ The Psychometric Engine for Conversational AI
70
+ </h1>
71
+ <p class="text-lg md:text-xl text-gray-300 max-w-3xl mx-auto mb-8">
72
+ Build high-fidelity Synthetic Selves that power explainable predictions and decisions.
73
+ </p>
74
+ <div class="flex justify-center space-x-4">
75
+ <a href="#demo" class="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-3 rounded-md font-medium">
76
+ See the Engine in Action
77
+ </a>
78
+ <a href="#about" class="border border-emerald-500 text-emerald-400 hover:bg-emerald-900 hover:bg-opacity-30 px-6 py-3 rounded-md font-medium">
79
+ Learn More
80
+ </a>
81
+ </div>
82
+ </div>
83
+ </section>
84
+
85
+ <!-- What is Chimera? -->
86
+ <section id="about" class="py-20 bg-gray-900">
87
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
88
+ <div class="text-center mb-16">
89
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">What is <span class="gradient-text">Chimera</span>?</h2>
90
+ <div class="section-divider w-1/3 mx-auto my-6"></div>
91
+ <p class="text-lg text-gray-300 max-w-4xl mx-auto">
92
+ Chimera turns conversation into a calibrated instrument. Every question, every answer builds a dynamic model of mind — a Synthetic Self — consented, auditable, and predictive.
93
+ </p>
94
+ </div>
95
+
96
+ <div class="flex flex-col md:flex-row items-center">
97
+ <div class="md:w-1/2 mb-10 md:mb-0">
98
+ <div class="relative h-80 bg-gray-800 rounded-xl overflow-hidden">
99
+ <!-- Placeholder for split-layer diagram -->
100
+ <div class="absolute inset-0 flex items-center justify-center text-gray-500">
101
+ <div class="text-center">
102
+ <i data-feather="layers" class="w-12 h-12 mx-auto mb-4"></i>
103
+ <p>Presentation Persona vs Authentic Core</p>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ <div class="md:w-1/2 md:pl-12">
109
+ <div class="space-y-6">
110
+ <div class="flex items-start">
111
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-50 rounded-lg p-3">
112
+ <i data-feather="cpu" class="w-6 h-6 text-emerald-400"></i>
113
+ </div>
114
+ <div class="ml-4">
115
+ <h3 class="text-xl font-semibold mb-2">Human + Machine Cognition</h3>
116
+ <p class="text-gray-400">
117
+ Chimera represents the fusion of human psychology and machine learning, creating synthetic selves that evolve through conversation.
118
+ </p>
119
+ </div>
120
+ </div>
121
+ <div class="flex items-start">
122
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-50 rounded-lg p-3">
123
+ <i data-feather="shield" class="w-6 h-6 text-emerald-400"></i>
124
+ </div>
125
+ <div class="ml-4">
126
+ <h3 class="text-xl font-semibold mb-2">Consent-First Architecture</h3>
127
+ <p class="text-gray-400">
128
+ Every interaction begins with explicit consent, logged on an immutable ledger that users can audit or revoke at any time.
129
+ </p>
130
+ </div>
131
+ </div>
132
+ <div class="flex items-start">
133
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-50 rounded-lg p-3">
134
+ <i data-feather="activity" class="w-6 h-6 text-emerald-400"></i>
135
+ </div>
136
+ <div class="ml-4">
137
+ <h3 class="text-xl font-semibold mb-2">Explainable Predictions</h3>
138
+ <p class="text-gray-400">
139
+ Unlike black-box AI, Chimera provides transparent reasoning for every prediction and recommendation.
140
+ </p>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+ </section>
148
+
149
+ <!-- How it Works -->
150
+ <section id="how-it-works" class="py-20 bg-gray-800">
151
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
152
+ <div class="text-center mb-16">
153
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">How <span class="gradient-text">Chimera</span> Works</h2>
154
+ <div class="section-divider w-1/3 mx-auto my-6"></div>
155
+ <p class="text-lg text-gray-300 max-w-4xl mx-auto">
156
+ A five-step process that transforms conversation into calibrated psychometric intelligence.
157
+ </p>
158
+ </div>
159
+
160
+ <div class="grid md:grid-cols-5 gap-8">
161
+ <!-- Step 1 -->
162
+ <div class="group bg-gray-700 bg-opacity-50 hover:bg-opacity-70 rounded-xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-900/20">
163
+ <div class="bg-emerald-900 bg-opacity-30 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
164
+ <span class="text-emerald-400 font-bold">1</span>
165
+ </div>
166
+ <h3 class="text-xl font-semibold mb-3 group-hover:text-emerald-400">Consent First</h3>
167
+ <p class="text-gray-400">
168
+ Every interaction begins with logged, revocable consent ensuring ethical data collection.
169
+ </p>
170
+ </div>
171
+
172
+ <!-- Step 2 -->
173
+ <div class="group bg-gray-700 bg-opacity-50 hover:bg-opacity-70 rounded-xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-900/20">
174
+ <div class="bg-emerald-900 bg-opacity-30 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
175
+ <span class="text-emerald-400 font-bold">2</span>
176
+ </div>
177
+ <h3 class="text-xl font-semibold mb-3 group-hover:text-emerald-400">Conversational Baselining</h3>
178
+ <p class="text-gray-400">
179
+ Psychometric profiles emerge naturally from dialogue patterns and response dynamics.
180
+ </p>
181
+ </div>
182
+
183
+ <!-- Step 3 -->
184
+ <div class="group bg-gray-700 bg-opacity-50 hover:bg-opacity-70 rounded-xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-900/20">
185
+ <div class="bg-emerald-900 bg-opacity-30 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
186
+ <span class="text-emerald-400 font-bold">3</span>
187
+ </div>
188
+ <h3 class="text-xl font-semibold mb-3 group-hover:text-emerald-400">Subtle Elicitation</h3>
189
+ <p class="text-gray-400">
190
+ Precision probes uncover deeper insights without open-ended questioning drift.
191
+ </p>
192
+ </div>
193
+
194
+ <!-- Step 4 -->
195
+ <div class="group bg-gray-700 bg-opacity-50 hover:bg-opacity-70 rounded-xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-900/20">
196
+ <div class="bg-emerald-900 bg-opacity-30 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
197
+ <span class="text-emerald-400 font-bold">4</span>
198
+ </div>
199
+ <h3 class="text-xl font-semibold mb-3 group-hover:text-emerald-400">Dynamic Persona Template</h3>
200
+ <p class="text-gray-400">
201
+ A living model that evolves with each interaction while maintaining explainable outputs.
202
+ </p>
203
+ </div>
204
+
205
+ <!-- Step 5 -->
206
+ <div class="group bg-gray-700 bg-opacity-50 hover:bg-opacity-70 rounded-xl p-6 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-900/20">
207
+ <div class="bg-emerald-900 bg-opacity-30 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
208
+ <span class="text-emerald-400 font-bold">5</span>
209
+ </div>
210
+ <h3 class="text-xl font-semibold mb-3 group-hover:text-emerald-400">Predictive Convergence</h3>
211
+ <p class="text-gray-400">
212
+ Achieves &lt;5% error rates that continuously improve with additional data.
213
+ </p>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Applications -->
220
+ <section id="applications" class="py-20 bg-gray-900">
221
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
222
+ <div class="text-center mb-16">
223
+ <h2 class="text-3xl md:text-4xl font-bold mb-4"><span class="gradient-text">Chimera</span> Applications</h2>
224
+ <div class="section-divider w-1/3 mx-auto my-6"></div>
225
+ <p class="text-lg text-gray-300 max-w-4xl mx-auto">
226
+ Transforming decision-making across industries with psychometric intelligence.
227
+ </p>
228
+ </div>
229
+
230
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
231
+ <!-- Hiring -->
232
+ <div class="bg-gray-800 rounded-xl p-6 hover:shadow-lg hover:shadow-emerald-900/20 transition-all duration-300">
233
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
234
+ <i data-feather="users" class="w-6 h-6 text-emerald-400"></i>
235
+ </div>
236
+ <h3 class="text-xl font-semibold mb-3">Hiring & Recruiting</h3>
237
+ <p class="text-gray-400 mb-4">
238
+ Explainable screening scorecards that reduce bias and accelerate decisions.
239
+ </p>
240
+ <div class="bg-emerald-900 bg-opacity-10 text-emerald-400 text-xs px-3 py-1 rounded-full inline-block">
241
+ +47% prediction accuracy
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Learning -->
246
+ <div class="bg-gray-800 rounded-xl p-6 hover:shadow-lg hover:shadow-emerald-900/20 transition-all duration-300">
247
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
248
+ <i data-feather="book" class="w-6 h-6 text-emerald-400"></i>
249
+ </div>
250
+ <h3 class="text-xl font-semibold mb-3">Learning & Development</h3>
251
+ <p class="text-gray-400 mb-4">
252
+ Personalized coaching loops that adapt to individual learning styles.
253
+ </p>
254
+ <div class="bg-emerald-900 bg-opacity-10 text-emerald-400 text-xs px-3 py-1 rounded-full inline-block">
255
+ +62% engagement
256
+ </div>
257
+ </div>
258
+
259
+ <!-- Sales -->
260
+ <div class="bg-gray-800 rounded-xl p-6 hover:shadow-lg hover:shadow-emerald-900/20 transition-all duration-300">
261
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
262
+ <i data-feather="dollar-sign" class="w-6 h-6 text-emerald-400"></i>
263
+ </div>
264
+ <h3 class="text-xl font-semibold mb-3">Sales & Customer Success</h3>
265
+ <p class="text-gray-400 mb-4">
266
+ Playbooks dynamically tuned to customer psychology and readiness.
267
+ </p>
268
+ <div class="bg-emerald-900 bg-opacity-10 text-emerald-400 text-xs px-3 py-1 rounded-full inline-block">
269
+ +35% conversion
270
+ </div>
271
+ </div>
272
+
273
+ <!-- Education -->
274
+ <div class="bg-gray-800 rounded-xl p-6 hover:shadow-lg hover:shadow-emerald-900/20 transition-all duration-300">
275
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-4">
276
+ <i data-feather="graduation-cap" class="w-6 h-6 text-emerald-400"></i>
277
+ </div>
278
+ <h3 class="text-xl font-semibold mb-3">Education</h3>
279
+ <p class="text-gray-400 mb-4">
280
+ Adaptive tutoring systems that respond to student engagement and comprehension.
281
+ </p>
282
+ <div class="bg-emerald-900 bg-opacity-10 text-emerald-400 text-xs px-3 py-1 rounded-full inline-block">
283
+ +28% retention
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </section>
289
+
290
+ <!-- Why it Matters -->
291
+ <section id="why-it-matters" class="py-20 bg-gray-800">
292
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
293
+ <div class="text-center mb-16">
294
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Why <span class="gradient-text">Chimera</span> Matters</h2>
295
+ <div class="section-divider w-1/3 mx-auto my-6"></div>
296
+ <p class="text-lg text-gray-300 max-w-4xl mx-auto">
297
+ Moving beyond intuition to calibrated, explainable decision-making.
298
+ </p>
299
+ </div>
300
+
301
+ <div class="flex flex-col md:flex-row items-center">
302
+ <div class="md:w-1/2 mb-10 md:mb-0">
303
+ <div class="bg-gray-700 rounded-xl p-6">
304
+ <div class="flex mb-6">
305
+ <div class="w-1/2 pr-4">
306
+ <h3 class="text-lg font-semibold text-gray-400 mb-2">Old Way</h3>
307
+ <div class="bg-gray-600 rounded-lg p-4 h-40 flex items-center justify-center">
308
+ <div class="text-center">
309
+ <i data-feather="heart" class="w-8 h-8 text-pink-500 mx-auto mb-2"></i>
310
+ <p class="text-sm">Gut Feel</p>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ <div class="w-1/2 pl-4">
315
+ <h3 class="text-lg font-semibold text-emerald-400 mb-2">Chimera Way</h3>
316
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-4 h-40 flex items-center justify-center">
317
+ <div class="text-center">
318
+ <i data-feather="activity" class="w-8 h-8 text-emerald-400 mx-auto mb-2"></i>
319
+ <p class="text-sm">Predictive Convergence</p>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ <div class="space-y-4">
325
+ <div class="flex items-center">
326
+ <div class="flex-shrink-0 bg-gray-600 rounded-full p-1 mr-3">
327
+ <i data-feather="x" class="w-4 h-4 text-red-400"></i>
328
+ </div>
329
+ <p class="text-gray-300">Subjective judgments prone to bias</p>
330
+ </div>
331
+ <div class="flex items-center">
332
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-30 rounded-full p-1 mr-3">
333
+ <i data-feather="check" class="w-4 h-4 text-emerald-400"></i>
334
+ </div>
335
+ <p class="text-gray-300">Calibrated psychometric models</p>
336
+ </div>
337
+ <div class="flex items-center">
338
+ <div class="flex-shrink-0 bg-gray-600 rounded-full p-1 mr-3">
339
+ <i data-feather="x" class="w-4 h-4 text-red-400"></i>
340
+ </div>
341
+ <p class="text-gray-300">Opaque decision processes</p>
342
+ </div>
343
+ <div class="flex items-center">
344
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-30 rounded-full p-1 mr-3">
345
+ <i data-feather="check" class="w-4 h-4 text-emerald-400"></i>
346
+ </div>
347
+ <p class="text-gray-300">Fully explainable reasoning</p>
348
+ </div>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ <div class="md:w-1/2 md:pl-12">
353
+ <div class="space-y-8">
354
+ <div>
355
+ <h3 class="text-xl font-semibold mb-3 text-emerald-400">For Leaders</h3>
356
+ <p class="text-gray-400">
357
+ Decisions backed by psychometric proof rather than hunches. Reduce risk while increasing prediction accuracy across hiring, promotions, and strategic planning.
358
+ </p>
359
+ </div>
360
+ <div>
361
+ <h3 class="text-xl font-semibold mb-3 text-emerald-400">For Users</h3>
362
+ <p class="text-gray-400">
363
+ Maintain control through consent management and transparency. Understand how your data is used and revoke access at any time.
364
+ </p>
365
+ </div>
366
+ <div>
367
+ <h3 class="text-xl font-semibold mb-3 text-emerald-400">For Teams</h3>
368
+ <p class="text-gray-400">
369
+ Replace noisy, subjective debates with calibrated models that highlight signal through the noise. Focus on what matters most.
370
+ </p>
371
+ </div>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </section>
377
+
378
+ <!-- Case Study -->
379
+ <section id="case-study" class="py-20 bg-gray-900">
380
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
381
+ <div class="text-center mb-16">
382
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Applicant Insight <span class="gradient-text">Case Study</span></h2>
383
+ <div class="section-divider w-1/3 mx-auto my-6"></div>
384
+ <p class="text-lg text-gray-300 max-w-4xl mx-auto">
385
+ How a Fortune 500 company transformed hiring with Chimera's psychometric engine.
386
+ </p>
387
+ </div>
388
+
389
+ <div class="bg-gray-800 rounded-xl overflow-hidden">
390
+ <div class="flex flex-col md:flex-row">
391
+ <div class="md:w-1/2 p-8 md:p-12">
392
+ <h3 class="text-2xl font-semibold mb-4">Voice-First Candidate Screening</h3>
393
+ <p class="text-gray-400 mb-6">
394
+ A global technology firm implemented Chimera to handle initial candidate screening through natural conversation, reducing time-to-hire while improving quality.
395
+ </p>
396
+ <div class="space-y-4 mb-8">
397
+ <div class="flex">
398
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-30 rounded-full p-1 mr-3 mt-1">
399
+ <i data-feather="check" class="w-4 h-4 text-emerald-400"></i>
400
+ </div>
401
+ <div>
402
+ <h4 class="font-semibold">67% faster screening</h4>
403
+ <p class="text-sm text-gray-500">Reduced from 14 days to 4.7 days average</p>
404
+ </div>
405
+ </div>
406
+ <div class="flex">
407
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-30 rounded-full p-1 mr-3 mt-1">
408
+ <i data-feather="check" class="w-4 h-4 text-emerald-400"></i>
409
+ </div>
410
+ <div>
411
+ <h4 class="font-semibold">92% candidate satisfaction</h4>
412
+ <p class="text-sm text-gray-500">Compared to 68% with traditional methods</p>
413
+ </div>
414
+ </div>
415
+ <div class="flex">
416
+ <div class="flex-shrink-0 bg-emerald-900 bg-opacity-30 rounded-full p-1 mr-3 mt-1">
417
+ <i data-feather="check" class="w-4 h-4 text-emerald-400"></i>
418
+ </div>
419
+ <div>
420
+ <h4 class="font-semibold">5.8x more diverse hires</h4>
421
+ <p class="text-sm text-gray-500">By reducing unconscious bias in screening</p>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ <a href="#" class="inline-flex items-center text-emerald-400 font-medium">
426
+ Read full case study <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
427
+ </a>
428
+ </div>
429
+ <div class="md:w-1/2 bg-gray-700 p-8 flex items-center justify-center">
430
+ <!-- Placeholder for candidate flow diagram -->
431
+ <div class="text-center text-gray-500">
432
+ <i data-feather="smartphone" class="w-12 h-12 mx-auto mb-4"></i>
433
+ <p>Candidate phone call → AI dialogue → Recruiter dashboard</p>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </section>
440
+
441
+ <!-- Trust & Governance -->
442
+ <section id="trust" class="py-20 bg-gray-800">
443
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
444
+ <div class="text-center mb-16">
445
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Trust & <span class="gradient-text">Governance</span></h2>
446
+ <div class="section-divider w-1/3 mx-auto my-6"></div>
447
+ <p class="text-lg text-gray-300 max-w-4xl mx-auto">
448
+ Designed for transparency, auditability, and ethical AI practices.
449
+ </p>
450
+ </div>
451
+
452
+ <div class="grid md:grid-cols-3 gap-8">
453
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl p-8">
454
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-6">
455
+ <i data-feather="lock" class="w-6 h-6 text-emerald-400"></i>
456
+ </div>
457
+ <h3 class="text-xl font-semibold mb-3">Consent Ledger</h3>
458
+ <p class="text-gray-400 mb-4">
459
+ Every data point tied to immutable consent records that users can review or revoke.
460
+ </p>
461
+ <div class="flex flex-wrap gap-2">
462
+ <span class="bg-gray-600 text-gray-300 text-xs px-3 py-1 rounded-full">GDPR Compliant</span>
463
+ <span class="bg-gray-600 text-gray-300 text-xs px-3 py-1 rounded-full">CCPA Ready</span>
464
+ </div>
465
+ </div>
466
+
467
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl p-8">
468
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-6">
469
+ <i data-feather="eye" class="w-6 h-6 text-emerald-400"></i>
470
+ </div>
471
+ <h3 class="text-xl font-semibold mb-3">Provenance Tracking</h3>
472
+ <p class="text-gray-400 mb-4">
473
+ Full audit trails showing how each data point influenced specific predictions.
474
+ </p>
475
+ <div class="flex flex-wrap gap-2">
476
+ <span class="bg-gray-600 text-gray-300 text-xs px-3 py-1 rounded-full">Explainability API</span>
477
+ <span class="bg-gray-600 text-gray-300 text-xs px-3 py-1 rounded-full">Decision Logs</span>
478
+ </div>
479
+ </div>
480
+
481
+ <div class="bg-gray-700 bg-opacity-50 rounded-xl p-8">
482
+ <div class="bg-emerald-900 bg-opacity-20 rounded-lg p-3 w-12 h-12 flex items-center justify-center mb-6">
483
+ <i data-feather="shield" class="w-6 h-6 text-emerald-400"></i>
484
+ </div>
485
+ <h3 class="text-xl font-semibold mb-3">Ethical Boundaries</h3>
486
+ <p class="text-gray-400 mb-4">
487
+ Hard-coded constraints prevent unethical use cases or questionable inferences.
488
+ </p>
489
+ <div class="flex flex-wrap gap-2">
490
+ <span class="bg-gray-600 text-gray-300 text-xs px-3 py-1 rounded-full">No Fabrication</span>
491
+ <span class="bg-gray-600 text-gray-300 text-xs px-3 py-1 rounded-full">Bias Controls</span>
492
+ </div>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </section>
497
+
498
+ <!-- CTA -->
499
+ <section id="contact" class="py-20 bg-gradient-to-r from-gray-900 to-emerald-900">
500
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
501
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Build <span class="gradient-text">Synthetic Selves</span>?</h2>
502
+ <p class="text-lg text-gray-300 max-w-2xl mx-auto mb-8">
503
+ Start your pilot program and experience predictive convergence with consent.
504
+ </p>
505
+ <form class="max-w-md mx-auto">
506
+ <div class="flex flex-col sm:flex-row gap-4">
507
+ <input type="email" placeholder="Your email" class="flex-grow bg-gray-800 bg-opacity-50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-emerald-500">
508
+ <button type="submit" class="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-3 rounded-lg font-medium whitespace-nowrap">
509
+ Request a Pilot
510
+ </button>
511
+ </div>
512
+ <p class="text-xs text-gray-400 mt-3">
513
+ By submitting, you agree to our <a href="#" class="text-emerald-400 hover:underline">Privacy Policy</a>.
514
+ </p>
515
+ </form>
516
+ </div>
517
+ </section>
518
+
519
+ <!-- Footer -->
520
+ <footer class="bg-gray-900 py-12">
521
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
522
+ <div class="flex flex-col md:flex-row justify-between items-center">
523
+ <div class="mb-6 md:mb-0">
524
+ <span class="text-xl font-bold gradient-text">Project Chimera</span>
525
+ <p class="text-gray-500 text-sm mt-2">
526
+ Predictive Convergence with Consent.
527
+ </p>
528
+ </div>
529
+ <div class="flex flex-wrap justify-center gap-6 md:gap-8">
530
+ <a href="#" class="text-gray-400 hover:text-emerald-400">About</a>
531
+ <a href="#" class="text-gray-400 hover:text-emerald-400">Documentation</a>
532
+ <a href="#" class="text-gray-400 hover:text-emerald-400">Contact</a>
533
+ <a href="#" class="text-gray-400 hover:text-emerald-400">Privacy</a>
534
+ </div>
535
+ </div>
536
+ <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
537
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">
538
+ © 2023 Project Chimera. All rights reserved.
539
+ </p>
540
+ <div class="flex space-x-6">
541
+ <a href="#" class="text-gray-400 hover:text-emerald-400">
542
+ <i data-feather="twitter"></i>
543
+ </a>
544
+ <a href="#" class="text-gray-400 hover:text-emerald-400">
545
+ <i data-feather="linkedin"></i>
546
+ </a>
547
+ <a href="#" class="text-gray-400 hover:text-emerald-400">
548
+ <i data-feather="github"></i>
549
+ </a>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </footer>
554
+
555
+ <script>
556
+ feather.replace();
557
+
558
+ // Initialize Vanta.js
559
+ document.addEventListener('DOMContentLoaded', function() {
560
+ VANTA.NET({
561
+ el: "#vanta-bg",
562
+ mouseControls: true,
563
+ touchControls: true,
564
+ gyroControls: false,
565
+ minHeight: 200.00,
566
+ minWidth: 200.00,
567
+ scale: 1.00,
568
+ scaleMobile: 1.00,
569
+ color: 0x10b981,
570
+ backgroundColor: 0x111827,
571
+ points: 12.00,
572
+ maxDistance: 22.00,
573
+ spacing: 18.00
574
+ });
575
+
576
+ // Mobile menu toggle
577
+ const mobileMenuButton = document.querySelector('.md\\:hidden button');
578
+ mobileMenuButton.addEventListener('click', function() {
579
+ // Implement mobile menu functionality here
580
+ console.log('Mobile menu clicked');
581
+ });
582
+ });
583
+ </script>
584
+ </body>
585
  </html>