Hugging Face's logo

Spaces:
steake
/
deepsite-project
Running

App Files Community
deepsite-project
File size: 12,351 Bytes 
f9afb4b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
a5528bb
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
 

<!DOCTYPE html>
<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">&lt;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>