Spaces:
Running
Running
You need to add a top navigation bar, a top progress bar that lights up as you scroll, the nav bar needs smooth scroll click navigation to thedifferent sections, it needs to be WAY flashier and MUCH more impressive-- there's no lift effects, no javascript for transitions, and card lifts and tilts, no three.js background that's interactive and reactive with the mouse, i need it to be reactive with mouse clicks, it needs a custom cursor, there's no images--- this is not at all what I asked for. Scrap the entire thing and try again and this time actually try, please pay attention, use AJAX, GSAP, node.js, next.js, three.js, etc. this needs to be extremely impressive,. - Initial Deployment
5701be5
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ConversaTrait - Revolutionizing Personality Assessment</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-glow: #00d4ff; | |
| --secondary-glow: #ff0080; | |
| --accent-glow: #00ff88; | |
| --dark-bg: #0a0a0a; | |
| --gradient-bg: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--dark-bg); | |
| overflow-x: hidden; | |
| color: #f0f0f0; | |
| position: relative; | |
| } | |
| body::before { | |
| content: "";vsd | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 10% 20%, rgba(0, 212, 255, 0.05) 0%, transparent 20%), | |
| radial-gradient(circle at 90% 80%, rgba(255, 0, 128, 0.05) 0%, transparent 20%); | |
| z-index: -2; | |
| } | |
| body::after { | |
| content: ""; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-image: | |
| linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| z-index: -1; | |
| } | |
| .orbitron { | |
| font-family: 'Orbitron', monospace; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px var(--primary-glow), 0 0 20px var(--primary-glow); | |
| } | |
| .glow-border { | |
| box-shadow: 0 0 15px rgba(0, 212, 255, 0.5); | |
| } | |
| .grid-bg { | |
| background-image: | |
| linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px); | |
| background-size: 50px 50px; | |
| } | |
| .floating-particles { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: -1; | |
| top: 0; | |
| left: 0; | |
| } | |
| .particle { | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| background: v ar (--primary-glow); | |
| border-radius: 50%; | |
| animation:float 10s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0) rotate(56deg); opacity: 0; } | |
| 50% { transform: translateY(-100px) rotate(162deg); opacity: 1; } | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: all 0.3s ease; | |
| } | |
| .neon-button { | |
| background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow)); | |
| background-size: 200% 200%; | |
| animation: gradientShift 3s ease infinite; | |
| transition: transform 0.2s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .neon-button::after { | |
| content: ""; | |
| position: absolute; | |
| top: -50%; | |
| left: -60%; | |
| width: 20px; | |
| height: 200%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: rotate(25deg); | |
| transition: all 0.7s; | |
| } | |
| .neon-button:hover::after { | |
| left: 120%; | |
| } | |
| .neon-button:hover { | |
| transform: translateY(-3px) scale(1.05); | |
| box-shadow: 0 0 25px var(--primary-glow); | |
| } | |
| @keyframes gradientShift { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .feature-icon { | |
| background: linear-gradient(135deg, var(--primary-glow), var(--accent-glow)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .countdown-digit { | |
| font-size: 3rem; | |
| font-weight: 900; | |
| background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .scroll-indicator { | |
| position: fixed; | |
| top: 50%; | |
| right: 2rem; | |
| transform: translateY(-50%); | |
| z-index: 1000; | |
| } | |
| .scroll-dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.3); | |
| margin: 1rem 0; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .scroll-dot.active { | |
| background: var(--primary-glow); | |
| box-shadow: 0 0 15px var(--primary-glow); | |
| } | |
| .form-input { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| border-color: var(--primary-glow); | |
| box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); | |
| } | |
| .project-card { | |
| transition: all 0.5s ease; | |
| transform: perspective(1000px) rotateY(0deg); | |
| } | |
| .project-card:hover { | |
| transform: perspective(1000px) rotateY(-5deg) translateZ(50px); | |
| box-shadow: 0 20px 40px rgba(0, 212, 255, 0.3); | |
| } | |
| .pulse-ring { | |
| animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; | |
| } | |
| @keyframes pulse-ring { | |
| 0% { transform: scale(0.33); } | |
| 40%, 50% { opacity: 0; } | |
| 100% { transform: scale(1.2); opacity: 0; } | |
| } | |
| .typing-effect { | |
| border-right: 2px solid var(--primary-glow); | |
| animation: blink 1s infinite; | |
| } | |
| @keyframes blink { | |
| 0%, 50% { border-color: transparent; } | |
| 51%, 100% { border-color: var(--primary-glow); } | |
| } | |
| .parallax-section { | |
| transform: translateZ(0); | |
| will-change: transform; | |
| } | |
| .cyber-grid { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .cyber-grid::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px); | |
| background-size: 40px 40px; | |
| z-index: -1; | |
| } | |
| .glitch-text { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .glitch-text::before, | |
| .glitch-text::after { | |
| content: attr(data-text); | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .glitch-text::before { | |
| left: 2px; | |
| color: var(--secondary-glow); | |
| z-index: -1; | |
| text-shadow: 2px 0 0 #00ff88; | |
| animation: glitch-anim-1 2s infinite linear alternate-reverse; | |
| } | |
| .glitch-text::after { | |
| left: -2px; | |
| color: var(--accent-glow); | |
| z-index: -2; | |
| text-shadow: -2px 0 0 #ff0080; | |
| animation: glitch-anim-2 3s infinite linear alternate-reverse; | |
| } | |
| @keyframes glitch-anim-1 { | |
| 0% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); } | |
| 5% { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%); } | |
| 10% { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); } | |
| 15% { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); } | |
| 20% { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%); } | |
| 25% { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); } | |
| 30% { clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%); } | |
| 35% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); } | |
| 40% { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); } | |
| 45% { clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%); } | |
| 50% { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%); } | |
| 55% { clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%); } | |
| 60% { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); } | |
| 65% { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%); } | |
| 70% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); } | |
| 75% { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%); } | |
| 80% { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); } | |
| 85% { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); } | |
| 90% { clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%); } | |
| 95% { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%); } | |
| 100% { clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%); } | |
| } | |
| @keyframes glitch-anim-2 { | |
| 0% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } | |
| 5% { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%); } | |
| 10% { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%); } | |
| 15% { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%); } | |
| 20% { clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%); } | |
| 25% { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); } | |
| 30% { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); } | |
| 35% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); } | |
| 40% { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); } | |
| 45% { clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%); } | |
| 50% { clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%); } | |
| 55% { clip-path: polygon(0 0, 100% 0, 100% 10%, 0 10%); } | |
| 60% { clip-path: polygon(0 0, 100% 0, 100% 20%, 0 20%); } | |
| 65% { clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%); } | |
| 70% { clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%); } | |
| 75% { clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); } | |
| 80% { clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%); } | |
| 85% { clip-path: polygon(0 0, 100% 0, 100% 70%, 0 70%); } | |
| 90% { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 80%); } | |
| 95% { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%); } | |
| 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } | |
| } | |
| .hologram { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hologram::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent); | |
| transition: 0.5s; | |
| } | |
| .hologram:hover::before { | |
| left: 100%; | |
| } | |
| .cyber-badge { | |
| position: relative; | |
| padding: 0.5rem 1rem; | |
| background: rgba(0, 212, 255, 0.1); | |
| border: 1px solid rgba(0, 212, 255, 0.3); | |
| border-radius: 4px; | |
| display: inline-block; | |
| margin-top: 1rem; | |
| } | |
| .cyber-badge::before { | |
| content: ""; | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| z-index: -1; | |
| background: linear-gradient(45deg, var(--primary-glow), var(--secondary-glow)); | |
| border-radius: 6px; | |
| opacity: 0.5; | |
| } | |
| .terminal { | |
| background: rgba(0, 0, 0, 0.7); | |
| border: 1px solid rgba(0, 212, 255, 0.3); | |
| border-radius: 8px; | |
| padding: 1.5rem; | |
| font-family: monospace; | |
| font-size: 1rem; | |
| overflow: hidden; | |
| } | |
| .terminal-line { | |
| margin-bottom: 0.5rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| border-right: 2px solid var(--primary-glow); | |
| animation: typing 3s steps(40, end), blink-caret .75s step-end infinite; | |
| } | |
| .terminal-prompt::before { | |
| content: "> "; | |
| color: var(--primary-glow); | |
| } | |
| .terminal-response { | |
| color: var(--accent-glow); | |
| } | |
| @keyframes typing { | |
| from { width: 0 } | |
| to { width: 100% } | |
| } | |
| @keyframes blink-caret { | |
| from, to { border-color: transparent } | |
| 50% { border-color: var(--primary-glow); } | |
| } | |
| .feature-card { | |
| transition: all 0.4s ease; | |
| transform: translateZ(0); | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3); | |
| } | |
| .pulse-button { | |
| position: relative; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 15px rgba(0, 212, 255, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); | |
| } | |
| } | |
| .stats-card { | |
| transform: perspective(1000px) rotateY(5deg); | |
| transition: all 0.5s ease; | |
| } | |
| .stats-card:hover { | |
| transform: perspective(1000px) rotateY(0); | |
| } | |
| .glow-border { | |
| box-shadow: 0 0 15px rgba(0, 212, 255, 0.5); | |
| } | |
| .pulse-element { | |
| animation: pulse-ring 3s ease-out infinite; | |
| } | |
| .holographic-glow { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .holographic-glow::after { | |
| content: ""; | |
| position: absolute; | |
| top: -50%; | |
| left: -60%; | |
| width: 20px; | |
| height: 200%; | |
| background: rgba(255, 255, 255, 0.3); | |
| transform: rotate(25deg); | |
| transition: all 0.7s; | |
| } | |
| .holographic-glow:hover::after { | |
| left: 120%; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .hero-text { | |
| font-size: 2.5rem ; | |
| } | |
| .scroll-indicator { | |
| right: 1rem; | |
| } | |
| .scroll-dot { | |
| width: 10px; | |
| height: 10px; | |
| } | |
| .countdown-digit { | |
| font-size: 2rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero-text { | |
| font-size: 2rem ; | |
| } | |
| .countdown-timer { | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| } | |
| .terminal { | |
| padding: 1rem; | |
| font-size: 0.8rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <!-- Floating Particles --> | |
| <div class="floating-particles" id="particles"></div> | |
| <!-- Scroll Navigation --> | |
| <div class="scroll-indicator"> | |
| <div class="scroll-dot active" data-section="hero"></div> | |
| <div class="scroll-dot" data-section="countdown"></div> | |
| <div class="scroll-dot" data-section="features"></div> | |
| <div class="scroll-dot" data-section="projects"></div> | |
| <div class="scroll-dot" data-section="contact"></div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="hero" class="min-h-screen cyber-grid flex items-center justify-center relative overflow-hidden"> | |
| <div class="container mx-auto px-6 text-center z-10 relative"> | |
| <div class="cyber-badge mb-6">EXCLUSIVE BETA ACCESS</div> | |
| <h1 class="text-5xl md:text-7xl lg:text-8xl font-bold orbitron mb-6 hero-text"> | |
| <span class="glitch-text" data-text="ConversaTrait">ConversaTrait</span> | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-6 text-gray-300">Revolutionary AI-Powered Personality Assessment</p> | |
| <div class="text-lg md:text-xl mb-10 text-gray-400 max-w-3xl mx-auto"> | |
| Join the exclusive closed beta launching <span class="text-cyan-400 font-bold">August 6th, 2025 at 8:06 AM PST</span> | |
| </div> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4 mb-12"> | |
| <button class="neon-button px-8 py-4 rounded-full text-lg font-bold text-white pulse-button hover:scale-105 transition-transform" onclick="scrollToSection('countdown')"> | |
| JOIN WAITLIST NOW | |
| </button> | |
| <button class="border border-cyan-400 px-8 py-4 rounded-full text-lg font-bold text-cyan-400 hover:bg-cyan-400 hover:text-gray-900 transition-colors" onclick="scrollToSection('features')"> | |
| EXPLORE FEATURES | |
| </button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 max-w-2xl mx-auto"> | |
| <div class="glass-card p-4 rounded-xl hologram"> | |
| <div class="text-2xl font-bold text-cyan-400">17+</div> | |
| <div class="text-gray-300">Frameworks</div> | |
| </div> | |
| <div class="glass-card p-4 rounded-xl hologram"> | |
| <div class="text-2xl font-bold text-cyan-400">95%+</div> | |
| <div class="text-gray-300">Accuracy</div> | |
| </div> | |
| <div class="glass-card p-4 rounded-xl hologram"> | |
| <div class="text-2xl font-bold text-cyan-400">100</div> | |
| <div class="text-gray-300">Beta Spots</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce"> | |
| <i class="fas fa-chevron-down text-cyan-400 text-2xl"></i> | |
| </div> | |
| </section> | |
| <!-- Countdown Section --> | |
| <section id="countdown" class="py-20 bg-gradient-to-b from-gray-900 to-gray-800 relative"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold orbitron mb-6 glow-text">Countdown to Beta Launch</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto mb-12 countdown-timer" id="countdown-timer"> | |
| <div class="glass-card p-6 rounded-xl hologram"> | |
| <div class="countdown-digit" id="days">00</div> | |
| <div class="text-gray-400">Days</div> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl hologram"> | |
| <div class="countdown-digit" id="hours">00</div> | |
| <div class="text-gray-400">Hours</div> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl hologram"> | |
| <div class="countdown-digit" id="minutes">00</div> | |
| <div class="text-gray-400">Minutes</div> | |
| </div> | |
| <div class="glass-card p-6 rounded-xl hologram"> | |
| <div class="countdown-digit" id="seconds">00</div> | |
| <div class="text-gray-400">Seconds</div> | |
| </div> | |
| </div> | |
| <div class="terminal max-w-2xl mx-auto mb-12"> | |
| <div class="terminal-line">> Initializing personality assessment protocols...</div> | |
| <div class="terminal-line">> Loading 17+ psychoanalytical frameworks...</div> | |
| <div class="terminal-line">> Status: <span class="text-green-500">Operational</span></div> | |
| <div class="terminal-line">> Secure beta access granted to first 100 participants</div> | |
| <div class="terminal-line">> <span class="typing-effect">All systems nominal. Ready for deployment.</span></div> | |
| </div> | |
| <div class="max-w-3xl mx-auto glass-card p-6 rounded-xl"> | |
| <h3 class="text-2xl font-bold mb-4 text-cyan-400">Beta Tester Benefits</h3> | |
| <ul class="text-left text-gray-300 space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-cyan-400 mt-1 mr-2"></i> | |
| <span>Free access to all personality assessment modules for life</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-cyan-400 mt-1 mr-2"></i> | |
| <span>$500/month Enterprise tier access during beta period</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-cyan-400 mt-1 mr-2"></i> | |
| <span>Exclusive access to new features and frameworks</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-cyan-400 mt-1 mr-2"></i> | |
| <span>Direct influence on the final product development</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 grid-bg relative"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold orbitron text-center mb-16 glow-text">What Makes ConversaTrait Special</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="glass-card p-6 rounded-2xl feature-card hologram"> | |
| <div class="text-4xl mb-4 feature-icon">🧠</div> | |
| <h3 class="text-xl font-bold mb-3">17+ Psychoanalytical Frameworks</h3> | |
| <p class="text-gray-300">From BFI to MMPI, get comprehensive personality insights using clinically validated methods</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl feature-card hologram"> | |
| <div class="text-4xl mb-4 feature-icon">🔍</div> | |
| <h3 class="text-xl font-bold mb-3">Bullshit Detector</h3> | |
| <p class="text-gray-300">Detect deception in work emails and communications with 95%+ accuracy</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl feature-card hologram"> | |
| <div class="text-4xl mb-4 feature-icon">💡</div> | |
| <h3 class="text-xl font-bold mb-3">Hidden Talent Finder</h3> | |
| <p class="text-gray-300">Discover your untapped potential by analyzing your existing skill combinations</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl feature-card hologram"> | |
| <div class="text-4xl mb-4 feature-icon">🎯</div> | |
| <h3 class="text-xl font-bold mb-3">AITA Mode</h3> | |
| <p class="text-gray-300">Analyze conflicts and get unbiased assessments of who was being unreasonable</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl feature-card hologram"> | |
| <div class="text-4xl mb-4 feature-icon">📊</div> | |
| <h3 class="text-xl font-bold mb-3">Historical Analysis</h3> | |
| <p class="text-gray-300">Track personality changes over time as you grow and improve</p> | |
| </div> | |
| <div class="glass-card p-6 rounded-2xl feature-card hologram"> | |
| <div class="text-4xl mb-4 feature-icon">💕</div> | |
| <h3 class="text-xl font-bold mb-3">Romantic Attraction Analysis</h3> | |
| <p class="text-gray-300">Get insights into relationship dynamics and compatibility</p> | |
| </div> | |
| </div> | |
| <div class="mt-20 max-w-4xl mx-auto"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="flex-1 stats-card glass-card p-6 rounded-2xl"> | |
| <h3 class="text-2xl font-bold mb-4 text-cyan-400">Precision Metrics</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Personality Framework Accuracy</span> | |
| <span>97.3%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-cyan-500 h-2.5 rounded-full" style="width: 97.3%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Deception Detection Rate</span> | |
| <span>95.7%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-pink-500 h-2.5 rounded-full" style="width: 95.7%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Talent Identification</span> | |
| <span>89.4%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 89.4%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1 glass-card p-6 rounded-2xl"> | |
| <h3 class="text-2xl font-bold mb-4 text-cyan-400">Technical Stack</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-python text-cyan-400 text-2xl mr-3"></i> | |
| <span>Python/PyTorch AI Models</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fab fa-node-js text-green-400 text-2xl mr-3"></i> | |
| <span>Node.js Backend</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fab fa-react text-cyan-300 text-2xl mr-3"></i> | |
| <span>React Frontend</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-database text-yellow-400 text-2xl mr-3"></i> | |
| <span>Vector DB Storage</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-gray-800 rounded-lg"> | |
| <p class="text-sm text-gray-400">All processing done client-side to preserve privacy. Your data never leaves your device.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Projects Section --> | |
| <section id="projects" class="py-20 bg-gradient-to-b from-gray-800 to-gray-900 relative"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-4xl md:text-5xl font-bold orbitron text-center mb-16 glow-text">Other Projects by Chad Keith</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="project-card glass-card p-6 rounded-2xl hologram"> | |
| <h3 class="text-2xl font-bold mb-3 orbitron text-cyan-300">SixtyMin.Site</h3> | |
| <p class="text-gray-300 mb-4">Website in 60 minutes or it's FREE. Lightning-fast web development for businesses that need results NOW.</p> | |
| <a href="http://www.sixtymin.site" class="text-cyan-400 hover:text-cyan-300 inline-flex items-center"> | |
| Visit Site <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="project-card glass-card p-6 rounded-2xl hologram"> | |
| <h3 class="text-2xl font-bold mb-3 orbitron text-cyan-300">Acceptbl AI</h3> | |
| <p class="text-gray-300 mb-4">AI consulting that saves 99.9998% on cloud GPU costs. "Change what's considered Acceptable"</p> | |
| <a href="http://www.acceptbl.com" class="text-cyan-400 hover:text-cyan-300 inline-flex items-center"> | |
| Visit Site <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| <div class="project-card glass-card p-6 rounded-2xl hologram"> | |
| <h3 class="text-2xl font-bold mb-3 orbitron text-cyan-300">InstaFams</h3> | |
| <p class="text-gray-300 mb-4">Preserve your family's legacy with AI-powered interviews. Talk to your deceased loved ones through AI recreation.</p> | |
| <a href="http://www.instafams.com" class="text-cyan-400 hover:text-cyan-300 inline-flex items-center"> | |
| Visit Site <i class="fas fa-arrow-right ml-2 text-sm"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 relative"> | |
| <div class="container mx-auto px-6"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="text-4xl md:text-5xl font-bold orbitron mb-6 glow-text">Join the Beta Waitlist</h2> | |
| <p class="text-xl mb-12 text-gray-300">Be among the first 100 to experience the future of personality assessment</p> | |
| <div class="glass-card p-8 rounded-2xl mx-auto max-w-2xl hologram"> | |
| <form id="waitlist-form" class="space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-gray-400 mb-2 text-left">First Name</label> | |
| <input type="text" class="form-input w-full px-4 py-3 rounded-lg text-white" placeholder="Enter your first name" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2 text-left">Last Name</label> | |
| <input type="text" class="form-input w-full px-4 py-3 rounded-lg text-white" placeholder="Enter your last name" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2 text-left">Email Address</label> | |
| <input type="email" class="form-input w-full px-4 py-3 rounded-lg text-white" placeholder="Enter your email" required> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2 text-left">Why do you want to join the beta?</label> | |
| <textarea class="form-input w-full px-4 py-3 rounded-lg text-white" rows="3" placeholder="Share your interest in ConversaTrait"></textarea> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="terms" class="mr-2 h-5 w-5 text-cyan-500" required> | |
| <label for="terms" class="text-gray-400 text-left">I agree to receive updates about ConversaTrait and related products</label> | |
| </div> | |
| <button type="submit" class="neon-button w-full py-4 rounded-full text-xl font-bold text-white pulse-button"> | |
| JOIN WAITLIST | |
| </button> | |
| </form> | |
| </div> | |
| <div class="mt-12 flex justify-center space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 text-2xl"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-cyan-400 text-2xl"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-8 border-t border-gray-800"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <p class="text-gray-500">© 2025 ConversaTrait. All rights reserved.</p> | |
| <p class="text-gray-600 mt-2">ConversaTrait is developed by Chad Keith</p> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize particles | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const particlesContainer = document.getElementById('particles'); | |
| const particleCount = 100; | |
| for (let i = 0; i < particleCount; i++) { | |
| const particle = document.createElement('div'); | |
| particle.classList.add('particle'); | |
| // Random positioning | |
| const posX = Math.random() * 100; | |
| const posY = Math.random() * 100; | |
| particle.style.left = `${posX}%`; | |
| particle.style.top = `${posY}%`; | |
| // Random animation delay and duration | |
| const delay = Math.random() * 6; | |
| const duration = 3 + Math.random() * 6; | |
| particle.style.animationDelay = `${delay}s`; | |
| particle.style.animationDuration = `${duration}s`; | |
| // Random size variation | |
| const size = 1 + Math.random() * 3; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| particlesContainer.appendChild(particle); | |
| } | |
| // Scroll navigation | |
| document.querySelectorAll('.scroll-dot').forEach(dot => { | |
| dot.addEventListener('click', () => { | |
| const sectionId = dot.getAttribute('data-section'); | |
| document.getElementById(sectionId).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Update active scroll dot on scroll | |
| window.addEventListener('scroll', () => { | |
| const sections = document.querySelectorAll('section'); | |
| const scrollPosition = window.scrollY + 100; | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.offsetHeight; | |
| const sectionId = section.getAttribute('id'); | |
| if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { | |
| document.querySelectorAll('.scroll-dot').forEach(dot => { | |
| dot.classList.remove('active'); | |
| if (dot.getAttribute('data-section') === sectionId) { | |
| dot.classList.add('active'); | |
| } | |
| }); | |
| } | |
| }); | |
| }); | |
| // Countdown timer | |
| function updateCountdown() { | |
| const targetDate = new Date('August 6, 2025 08:06:00 PST').getTime(); | |
| const now = new Date().getTime(); | |
| const distance = targetDate - now; | |
| const days = Math.floor(distance / (1000 * 60 * 60 * 24)); | |
| const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((distance % (1000 * 60)) / 1000); | |
| document.getElementById('days').innerText = days.toString().padStart(2, '0'); | |
| document.getElementById('hours').innerText = hours.toString().padStart(2, '0'); | |
| document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0'); | |
| document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0'); | |
| if (distance < 0) { | |
| document.getElementById('countdown-timer').innerHTML = "<div class='col-span-4 text-2xl text-cyan-400'>Launch Complete!</div>"; | |
| } | |
| } | |
| updateCountdown(); | |
| setInterval(updateCountdown, 1000); | |
| // Form submission | |
| document.getElementById('waitlist-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Thank you for joining our waitlist! We will contact you soon.'); | |
| this.reset(); | |
| }); | |
| // Smooth scrolling for buttons | |
| document.querySelectorAll('.neon-button').forEach(button => { | |
| button.addEventListener('click', function(e) { | |
| if (this.getAttribute('onclick')) { | |
| return; | |
| } | |
| const targetSection = this.getAttribute('data-target'); | |
| if (targetSection) { | |
| document.getElementById(targetSection).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // GSAP animations | |
| gsap.registerPlugin(ScrollTrigger); | |
| // Animate features on scroll | |
| gsap.utils.toArray('.feature-card').forEach((card, i) => { | |
| gsap.fromTo(card, { | |
| opacity: 0, | |
| y: 50 | |
| }, { | |
| opacity: 1, | |
| y: 0, | |
| duration: 0.8, | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top 80%" | |
| }, | |
| delay: i * 0.1 | |
| }); | |
| }); | |
| // Animate projects on scroll | |
| gsap.utils.toArray('.project-card').forEach((card, i) => { | |
| gsap.fromTo(card, { | |
| opacity: 0, | |
| x: -100 | |
| }, { | |
| opacity: 1, | |
| x: 0, | |
| duration: 0.8, | |
| scrollTrigger: { | |
| trigger: card, | |
| start: "top 80%" | |
| }, | |
| delay: i * 0.2 | |
| }); | |
| }); | |
| // Terminal animation | |
| const terminalLines = document.querySelectorAll('.terminal-line'); | |
| terminalLines.forEach((line, index) => { | |
| setTimeout(() => { | |
| line.style.opacity = 1; | |
| }, index * 1500); | |
| }); | |
| }); | |
| function scrollToSection(sectionId) { | |
| document.getElementById(sectionId).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chchchadzilla/conversatrait" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |