|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>NeuroSphere | KI-Agenten der Zukunft</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Exo+2:wght@300;400;600;700&display=swap'); |
|
|
|
|
|
:root { |
|
|
--neon-blue: #00f3ff; |
|
|
--neon-purple: #bd00ff; |
|
|
--neon-pink: #ff00c8; |
|
|
--dark-bg: #0a0a1a; |
|
|
--darker-bg: #050510; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Exo 2', sans-serif; |
|
|
background: var(--dark-bg); |
|
|
color: #e0e0ff; |
|
|
overflow-x: hidden; |
|
|
background-image: |
|
|
radial-gradient(circle at 10% 20%, rgba(0, 243, 255, 0.05) 0%, transparent 15%), |
|
|
radial-gradient(circle at 90% 80%, rgba(189, 0, 255, 0.05) 0%, transparent 15%), |
|
|
linear-gradient(to bottom, var(--darker-bg), var(--dark-bg) 80%); |
|
|
background-attachment: fixed; |
|
|
} |
|
|
|
|
|
h1, h2, h3, h4 { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
font-weight: 700; |
|
|
letter-spacing: 1px; |
|
|
} |
|
|
|
|
|
.neon-text { |
|
|
color: var(--neon-blue); |
|
|
text-shadow: 0 0 10px rgba(0, 243, 255, 0.7), |
|
|
0 0 20px rgba(0, 243, 255, 0.5), |
|
|
0 0 30px rgba(0, 243, 255, 0.3); |
|
|
} |
|
|
|
|
|
.neon-border { |
|
|
border: 1px solid var(--neon-blue); |
|
|
box-shadow: 0 0 10px rgba(0, 243, 255, 0.3), |
|
|
inset 0 0 10px rgba(0, 243, 255, 0.1); |
|
|
} |
|
|
|
|
|
.neon-glow { |
|
|
box-shadow: 0 0 15px rgba(0, 243, 255, 0.5), |
|
|
inset 0 0 10px rgba(0, 243, 255, 0.2); |
|
|
} |
|
|
|
|
|
.hologram { |
|
|
background: rgba(0, 243, 255, 0.05); |
|
|
backdrop-filter: blur(5px); |
|
|
border: 1px solid rgba(0, 243, 255, 0.2); |
|
|
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2), |
|
|
inset 0 0 10px rgba(0, 243, 255, 0.1); |
|
|
} |
|
|
|
|
|
.agent-card { |
|
|
transition: all 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.agent-card:hover { |
|
|
transform: translateY(-10px) scale(1.03); |
|
|
box-shadow: 0 10px 30px rgba(0, 243, 255, 0.3); |
|
|
} |
|
|
|
|
|
.agent-card:hover .agent-name { |
|
|
color: var(--neon-purple); |
|
|
text-shadow: 0 0 10px rgba(189, 0, 255, 0.7); |
|
|
} |
|
|
|
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { |
|
|
box-shadow: 0 0 0 0 rgba(0, 243, 255, 0.4); |
|
|
} |
|
|
70% { |
|
|
box-shadow: 0 0 0 15px rgba(0, 243, 255, 0); |
|
|
} |
|
|
100% { |
|
|
box-shadow: 0 0 0 0 rgba(0, 243, 255, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: floating 3s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes floating { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-15px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.rotating { |
|
|
animation: rotating 20s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes rotating { |
|
|
from { transform: rotateY(0deg); } |
|
|
to { transform: rotateY(360deg); } |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
position: relative; |
|
|
background: rgba(10, 10, 30, 0.7); |
|
|
border: 1px solid rgba(0, 243, 255, 0.3); |
|
|
border-radius: 20px; |
|
|
padding: 15px; |
|
|
margin-bottom: 20px; |
|
|
max-width: 80%; |
|
|
} |
|
|
|
|
|
.chat-bubble::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 20px; |
|
|
width: 0; |
|
|
height: 0; |
|
|
border: 10px solid transparent; |
|
|
border-top-color: rgba(10, 10, 30, 0.7); |
|
|
} |
|
|
|
|
|
.chat-bubble.user { |
|
|
background: rgba(189, 0, 255, 0.2); |
|
|
border-color: rgba(189, 0, 255, 0.5); |
|
|
margin-left: auto; |
|
|
} |
|
|
|
|
|
.chat-bubble.user::after { |
|
|
left: auto; |
|
|
right: 20px; |
|
|
border-top-color: rgba(189, 0, 255, 0.2); |
|
|
} |
|
|
|
|
|
.voice-wave { |
|
|
height: 50px; |
|
|
display: flex; |
|
|
align-items: flex-end; |
|
|
justify-content: center; |
|
|
gap: 3px; |
|
|
margin: 20px 0; |
|
|
} |
|
|
|
|
|
.wave-bar { |
|
|
width: 4px; |
|
|
background: var(--neon-blue); |
|
|
border-radius: 2px; |
|
|
animation: wave 1.5s infinite ease-in-out; |
|
|
} |
|
|
|
|
|
.wave-bar:nth-child(1) { animation-delay: 0.1s; height: 20px; } |
|
|
.wave-bar:nth-child(2) { animation-delay: 0.2s; height: 35px; } |
|
|
.wave-bar:nth-child(3) { animation-delay: 0.3s; height: 50px; } |
|
|
.wave-bar:nth-child(4) { animation-delay: 0.4s; height: 35px; } |
|
|
.wave-bar:nth-child(5) { animation-delay: 0.5s; height: 20px; } |
|
|
|
|
|
@keyframes wave { |
|
|
0%, 100% { transform: scaleY(0.5); } |
|
|
50% { transform: scaleY(1); } |
|
|
} |
|
|
|
|
|
.modal-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
backdrop-filter: blur(5px); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
z-index: 1000; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.modal-overlay.active { |
|
|
opacity: 1; |
|
|
pointer-events: all; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
transform: translateY(50px); |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.modal-overlay.active .modal-content { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.price-card { |
|
|
transition: all 0.3s ease; |
|
|
background: rgba(20, 20, 40, 0.6); |
|
|
border: 1px solid rgba(0, 243, 255, 0.2); |
|
|
} |
|
|
|
|
|
.price-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 15px 30px rgba(0, 243, 255, 0.2); |
|
|
border-color: var(--neon-blue); |
|
|
} |
|
|
|
|
|
.price-card.featured { |
|
|
border: 2px solid var(--neon-purple); |
|
|
box-shadow: 0 0 20px rgba(189, 0, 255, 0.3); |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.price-card.featured:hover { |
|
|
box-shadow: 0 0 30px rgba(189, 0, 255, 0.5); |
|
|
} |
|
|
|
|
|
.scroll-down { |
|
|
position: absolute; |
|
|
bottom: 30px; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);} |
|
|
40% {transform: translateY(-30px) translateX(-50%);} |
|
|
60% {transform: translateY(-15px) translateX(-50%);} |
|
|
} |
|
|
|
|
|
.typing-indicator { |
|
|
display: inline-block; |
|
|
padding: 5px 10px; |
|
|
background: rgba(0, 243, 255, 0.1); |
|
|
border-radius: 20px; |
|
|
} |
|
|
|
|
|
.typing-indicator span { |
|
|
height: 8px; |
|
|
width: 8px; |
|
|
float: left; |
|
|
margin: 0 1px; |
|
|
background-color: var(--neon-blue); |
|
|
display: block; |
|
|
border-radius: 50%; |
|
|
opacity: 0.4; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-of-type(1) { |
|
|
animation: typing 1s infinite; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-of-type(2) { |
|
|
animation: typing 1s infinite 0.2s; |
|
|
} |
|
|
|
|
|
.typing-indicator span:nth-of-type(3) { |
|
|
animation: typing 1s infinite 0.4s; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
0% { opacity: 0.4; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.4; } |
|
|
} |
|
|
|
|
|
.agent-hologram { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 200px; |
|
|
margin: 0 auto; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.hologram-inner { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
transform-style: preserve-3d; |
|
|
animation: rotate3d 20s infinite linear; |
|
|
} |
|
|
|
|
|
@keyframes rotate3d { |
|
|
0% { transform: rotateX(0) rotateY(0) rotateZ(0); } |
|
|
100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } |
|
|
} |
|
|
|
|
|
.hologram-face { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
border: 2px solid var(--neon-blue); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
background: rgba(0, 243, 255, 0.05); |
|
|
box-shadow: 0 0 20px rgba(0, 243, 255, 0.3); |
|
|
} |
|
|
|
|
|
.hologram-face:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 150%; |
|
|
height: 150%; |
|
|
border: 2px solid rgba(0, 243, 255, 0.3); |
|
|
border-radius: 50%; |
|
|
animation: pulse-border 4s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse-border { |
|
|
0% { transform: scale(0.8); opacity: 0.7; } |
|
|
50% { transform: scale(1.1); opacity: 0.3; } |
|
|
100% { transform: scale(0.8); opacity: 0.7; } |
|
|
} |
|
|
|
|
|
.social-mockup { |
|
|
width: 300px; |
|
|
height: 500px; |
|
|
background: #1e1e2e; |
|
|
border-radius: 20px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 0 30px rgba(0, 243, 255, 0.2); |
|
|
border: 1px solid rgba(0, 243, 255, 0.2); |
|
|
} |
|
|
|
|
|
.social-mockup .header { |
|
|
background: linear-gradient(90deg, #1a1a2e, #16213e); |
|
|
padding: 15px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.social-mockup .chat-area { |
|
|
height: 380px; |
|
|
padding: 15px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.social-mockup .input-area { |
|
|
padding: 10px; |
|
|
background: #2d2d44; |
|
|
display: flex; |
|
|
} |
|
|
|
|
|
.social-mockup .input-area input { |
|
|
flex: 1; |
|
|
background: #1e1e2e; |
|
|
border: none; |
|
|
padding: 10px; |
|
|
border-radius: 20px; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.social-mockup .input-area button { |
|
|
background: var(--neon-blue); |
|
|
border: none; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
margin-left: 10px; |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen text-white"> |
|
|
|
|
|
<section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div id="scene-container" class="absolute inset-0 z-0"></div> |
|
|
|
|
|
<div class="container mx-auto px-4 z-10 relative text-center"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 neon-text"> |
|
|
NeuroSphere<span class="text-purple-400">.</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto"> |
|
|
Zukunftsfähige KI-Agenten für Unternehmen - Live und in Aktion |
|
|
</p> |
|
|
<button class="cta-live-demo neon-border bg-transparent text-white px-8 py-4 rounded-full text-xl font-bold mb-12 pulse" onclick="window.open('https://calendly.com/daniel-rdtb/30min', '_blank')"> |
|
|
🚀 Jetzt Live-Demo buchen |
|
|
</button> |
|
|
<div class="flex justify-center space-x-8 mb-12"> |
|
|
<div class="text-center"> |
|
|
<div class="hologram w-24 h-24 rounded-full mx-auto mb-3 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-3xl text-blue-300"></i> |
|
|
</div> |
|
|
<p>Voice Agents</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="hologram w-24 h-24 rounded-full mx-auto mb-3 flex items-center justify-center"> |
|
|
<i class="fas fa-comments text-3xl text-purple-300"></i> |
|
|
</div> |
|
|
<p>Chatbots</p> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<div class="hologram w-24 h-24 rounded-full mx-auto mb-3 flex items-center justify-center"> |
|
|
<i class="fab fa-whatsapp text-3xl text-green-400"></i> |
|
|
</div> |
|
|
<p>Social Media</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="scroll-down"> |
|
|
<i class="fas fa-chevron-down text-2xl text-blue-300 animate-bounce"></i> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="gallery" class="py-20 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-4xl font-bold text-center mb-16 neon-text">Unsere KI-Agenten</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-10"> |
|
|
|
|
|
<div class="agent-card hologram p-6 rounded-2xl"> |
|
|
<div class="agent-hologram mb-6"> |
|
|
<div class="hologram-inner"> |
|
|
<div class="hologram-face" style="background: radial-gradient(circle, rgba(0,243,255,0.2), rgba(0,243,255,0.05));"> |
|
|
|
|
|
<div class="gif-placeholder w-full h-full rounded-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300"> |
|
|
<i class="fas fa-play-circle text-4xl text-blue-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="agent-name text-2xl font-bold text-center mb-3">Alexa<span class="text-blue-300">AI</span></h3> |
|
|
<p class="text-center mb-4">Sprachbasierter Kundenservice-Agent</p> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="voice-wave"> |
|
|
<div class="wave-bar"></div> |
|
|
<div class="wave-bar"></div> |
|
|
<div class="wave-bar"></div> |
|
|
<div class="wave-bar"></div> |
|
|
<div class="wave-bar"></div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full neon�t-900 transition" onclick="window.open('https://calendly.com/daniel-rdtb/30min', '_blank')"> |
|
|
Agent jetzt buchen |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card hologram p-6 rounded-2xl"> |
|
|
<div class="agent-hologram mb-6"> |
|
|
<div class="hologram-inner"> |
|
|
<div class="hologram-face" style="background: radial-gradient(circle, rgba(189,0,255,0.2), rgba(189,0,255,0.05));"> |
|
|
|
|
|
<div class="gif-placeholder w-full h-full rounded-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300"> |
|
|
<i class="fas fa-play-circle text-4xl text-purple-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="agent-name text-2xl font-bold text-center mb-3">Chat<span class="text-purple-300">Bot</span></h3> |
|
|
<p class="text-center mb-4">Intelligenter Chat- und Supportagent</p> |
|
|
<div class="text-center mb-4"> |
|
|
<div class="chat-bubble inline-block"> |
|
|
Hallo! Wie kann ich Ihnen helfen? |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-purple-900 transition" onclick="window.open('https://calendly.com/daniel-rdtb/30min', '_blank')"> |
|
|
💼 Agent jetzt buchen |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="agent-card hologram p-6 rounded-2xl"> |
|
|
<div class="agent-hologram mb-6"> |
|
|
<div class="hologram-inner"> |
|
|
<div class="hologram-face" style="background: radial-gradient(circle, rgba(100,255,100,0.2), rgba(100,255,100,0.05));"> |
|
|
|
|
|
<div class="gif-placeholder w-full h-full rounded-full flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300"> |
|
|
<i class="fas fa-play-circle text-4xl text-green-300"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<h3 class="agent-name text-2xl font-bold text-center mb-3">Insta<span class="text-green-300">AI</span></h3> |
|
|
<p class="text-center mb-4">Social-Media-Marketing-Agent</p> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<div class="bg-gray-800 rounded-lg p-3 inline-block"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fab fa-instagram text-pink-400 mr-2"></i> |
|
|
<span class="font-bold">neuro.ai</span> |
|
|
</div> |
|
|
<div class="mt-2 text-sm">Neuer Post: Unsere KI-Agenten...</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-green-900 transition" onclick="window.open('https://calendly.com/daniel-rdtb/30min', '_blank')"> |
|
|
💼 Agent jetzt buchen |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="demo" class="py-20 px-4 bg-black bg-opacity-30"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-4xl font-bold text-center mb-16 neon-text">Live-Demo-Zone</h2> |
|
|
<div class="flex flex-col lg:flex-row gap-10 items-center"> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="social-mockup mx-auto"> |
|
|
<div class="header"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fab fa-whatsapp text-green-400 text-2xl mr-2"></i> |
|
|
<h3 class="font-bold">WhatsApp Demo</h3> |
|
|
</div> |
|
|
</div> |
|
|
<div class="chat-area"> |
|
|
<div class="chat-bubble"> |
|
|
Guten Tag! Ich bin Ihr KI-Assistent. Wie kann ich Ihnen heute helfen? |
|
|
</div> |
|
|
<div class="chat-bubble user"> |
|
|
Hallo, ich habe eine Frage zur Bestellung. |
|
|
</div> |
|
|
<div class="chat-bubble"> |
|
|
Gerne! Können Sie mir Ihre Bestellnummer nennen? |
|
|
</div> |
|
|
<div class="typing-indicator"> |
|
|
<span></span> |
|
|
<span></span> |
|
|
<span></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="input-area"> |
|
|
<input type="text" placeholder="Nachricht eingeben..."> |
|
|
<button><i class="fas fa-paper-plane"></i></button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<h3 class="text-2xl font-bold mb-6">Interaktive Demo</h3> |
|
|
<p class="mb-6"> |
|
|
Erleben Sie in Echtzeit, wie unsere KI-Agenten funktionieren. |
|
|
Wählen Sie einen Agenten aus und starten Sie die Demo: |
|
|
</p> |
|
|
<div class="grid grid-cols-2 gap-4 mb-8"> |
|
|
<button class="neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-blue-900 transition"> |
|
|
<i class="fas fa-microphone mr-2"></i> Voice-Agent |
|
|
</button> |
|
|
<button class="neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-purple-900 transition"> |
|
|
<i class="fas fa-comment mr-2"></i> Chat-Agent |
|
|
</button> |
|
|
<button class="neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-green-900 transition"> |
|
|
<i class="fab fa-whatsapp mr-2"></i> WhatsApp |
|
|
</button> |
|
|
<button class="neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-pink-900 transition"> |
|
|
<i class="fab fa-instagram mr-2"></i> Instagram |
|
|
</button> |
|
|
</div> |
|
|
<div class="neon-border p-6 rounded-lg"> |
|
|
<h4 class="text-xl font-bold mb-3">Aktuelle Live-Session</h4> |
|
|
<p class="mb-3">Verbinden Sie Ihr Mikrofon, um mit unserem Voice-Agenten zu sprechen.</p> |
|
|
<button class="cta-purchase bg-gradient-to-r from-blue-500 to-purple-600 text-white px-6 py-3 rounded-full font-bold"> |
|
|
Mikrofon aktivieren |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-20 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<h2 class="text-4xl font-bold text-center mb-16 neon-text">Pricing & Anpassung</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
<div class="price-card rounded-2xl p-8"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-center">Starter</h3> |
|
|
<div class="text-4xl font-bold text-center mb-6 neon-text">€299<span class="text-xl">/Monat</span></div> |
|
|
<ul class="mb-8 space-y-3"> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> 1 KI-Agent</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Basis-Training</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> WhatsApp Integration</li> |
|
|
<li class="flex items-center"><i class="fas fa-times text-gray-500 mr-2"></i> Voice-Training</li> |
|
|
<li class="flex items-center"><i class="fas fa-times text-gray-500 mr-2"></i> Social-Media-Bots</li> |
|
|
</ul> |
|
|
<button class="w-full neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-blue-900 transition"> |
|
|
Agent kaufen |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="price-card rounded-2xl p-8 featured"> |
|
|
<div class="text-center mb-4"> |
|
|
<span class="bg-purple-700 text-white px-4 py-1 rounded-full text-sm">BELIEBT</span> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4 text-center">Professional</h3> |
|
|
<div class="text-4xl font-bold text-center mb-6 neon-text">€799<span class="text-xl">/Monat</span></div> |
|
|
<ul class="mb-8 space-y-3"> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> 3 KI-Agenten</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Fortgeschrittenes Training</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> WhatsApp & Instagram</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Voice-Training</li> |
|
|
<li class="flex items-center"><i class="fas fa-times text-gray-500 mr-2"></i> Enterprise Integration</li> |
|
|
</ul> |
|
|
<button class="w-full neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-purple-900 transition"> |
|
|
Agent kaufen |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="price-card rounded-2xl p-8"> |
|
|
<h3 class="text-2xl font-bold mb-4 text-center">Enterprise</h3> |
|
|
<div class="text-4xl font-bold text-center mb-6 neon-text">Auf Anfrage</div> |
|
|
<ul class="mb-8 space-y-3"> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Unbegrenzte Agenten</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Volles Trainingssystem</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Alle Plattformen</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Voice & Video</li> |
|
|
<li class="flex items-center"><i class="fas fa-check text-green-400 mr-2"></i> Individuelle Integration</li> |
|
|
</ul> |
|
|
<button class="w-full neon-border bg-transparent text-white py-3 rounded-lg font-bold hover:bg-pink-900 transition"> |
|
|
Angebot anfragen |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-10 text-center border-t border-gray-800"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="text-3xl font-bold neon-text">NeuroSphere<span class="text-purple-400">.</span></div> |
|
|
</div> |
|
|
<p class="mb-6">© 2027 NeuroSphere Technologies. Alle Rechte vorbehalten.</p> |
|
|
<div class="flex justify-center space-x-6"> |
|
|
<a href="#" class="text-blue-300 hover:text-blue-100"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-purple-400 hover:text-purple-200"><i class="fab fa-linkedin"></i></a> |
|
|
<a href="#" class="text-green-400 hover:text-green-200"><i class="fab fa-whatsapp"></i></a> |
|
|
<a href="#" class="text-pink-400 hover:text-pink-200"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="demo-modal" class="modal-overlay"> |
|
|
<div class="modal-content w-full max-w-4xl mx-4 bg-gray-900 rounded-2xl border border-blue-500 overflow-hidden"> |
|
|
<div class="p-6 border-b border-gray-700 flex justify-between items-center"> |
|
|
<h3 class="text-2xl font-bold">Live-Demo starten</h3> |
|
|
<button id="close-modal" class="text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-times text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-4">KI-Agent auswählen</h4> |
|
|
<div class="space-y-4"> |
|
|
<div class="neon-border rounded-lg p-4 cursor-pointer hover:bg-blue-900 transition"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-microphone text-blue-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h5 class="font-bold">Voice-Agent</h5> |
|
|
<p class="text-sm text-gray-400">Sprachbasierter Kundenservice</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="neon-border rounded-lg p-4 cursor-pointer hover:bg-purple-900 transition"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-comments text-purple-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h5 class="font-bold">Chat-Agent</h5> |
|
|
<p class="text-sm text-gray-400">Intelligenter Chatbot</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="neon-border rounded-lg p-4 cursor-pointer hover:bg-green-900 transition"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-green-900 flex items-center justify-center mr-4"> |
|
|
<i class="fab fa-whatsapp text-green-300"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h5 class="font-bold">WhatsApp-Agent</h5> |
|
|
<p class="text-sm text-gray-400">Social Media Integration</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-xl font-bold mb-4">Demo konfigurieren</h4> |
|
|
<div class="neon-border rounded-lg p-6 mb-6"> |
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2">Name des Agenten</label> |
|
|
<input type="text" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3" value="AlexaAI"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2">Branchenwissen</label> |
|
|
<select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3"> |
|
|
<option>E-Commerce</option> |
|
|
<option>Finanzen</option> |
|
|
<option>Gesundheit</option> |
|
|
<option>Bildung</option> |
|
|
<option>Immobilien</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block mb-2">Sprache</label> |
|
|
<select class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3"> |
|
|
<option>Deutsch</option> |
|
|
<option>Englisch</option> |
|
|
<option>Französisch</option> |
|
|
<option>Spanisch</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<button class="cta-purchase w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-4 rounded-lg font-bold text-lg"> |
|
|
Live-Demo starten |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function initScene() { |
|
|
const scene = new THREE.Scene(); |
|
|
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); |
|
|
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
renderer.setClearColor(0x000000, 0); |
|
|
document.getElementById('scene-container').appendChild(renderer.domElement); |
|
|
|
|
|
|
|
|
const particlesGeometry = new THREE.BufferGeometry(); |
|
|
const particlesCount = 2000; |
|
|
const posArray = new Float32Array(particlesCount * 3); |
|
|
|
|
|
for(let i = 0; i < particlesCount * 3; i++) { |
|
|
posArray[i] = (Math.random() - 0.5) * 20; |
|
|
} |
|
|
|
|
|
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); |
|
|
const particlesMaterial = new THREE.PointsMaterial({ |
|
|
size: 0.02, |
|
|
color: 0x00f3ff, |
|
|
transparent: true, |
|
|
opacity: 0.8 |
|
|
}); |
|
|
|
|
|
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial); |
|
|
scene.add(particlesMesh); |
|
|
|
|
|
|
|
|
const sphereGeometry = new THREE.SphereGeometry(0.5, 32, 32); |
|
|
const sphereMaterial = new THREE.MeshBasicMaterial({ |
|
|
color: 0x00f3ff, |
|
|
wireframe: true, |
|
|
transparent: true, |
|
|
opacity: 0.3 |
|
|
}); |
|
|
|
|
|
const spheres = []; |
|
|
for(let i = 0; i < 15; i++) { |
|
|
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); |
|
|
sphere.position.x = (Math.random() - 0.5) * 15; |
|
|
sphere.position.y = (Math.random() - 0.5) * 15; |
|
|
sphere.position.z = (Math.random() - 0.5) * 15; |
|
|
sphere.scale.set(0.5 + Math.random(), 0.5 + Math.random(), 0.5 + Math.random()); |
|
|
scene.add(sphere); |
|
|
spheres.push(sphere); |
|
|
} |
|
|
|
|
|
camera.position.z = 5; |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
camera.aspect = window.innerWidth / window.innerHeight; |
|
|
camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth, window.innerHeight); |
|
|
}); |
|
|
|
|
|
|
|
|
function animate() { |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
particlesMesh.rotation.x += 0.001; |
|
|
particlesMesh.rotation.y += 0.001; |
|
|
|
|
|
spheres.forEach((sphere, index) => { |
|
|
sphere.rotation.x += 0.01; |
|
|
sphere.rotation.y += 0.01; |
|
|
sphere.position.y += Math.sin(Date.now() * 0.001 + index) * 0.01; |
|
|
}); |
|
|
|
|
|
renderer.render(scene, camera); |
|
|
} |
|
|
|
|
|
animate(); |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelector('.cta-live-demo').addEventListener('click', function() { |
|
|
document.getElementById('demo-modal').classList.add('active'); |
|
|
}); |
|
|
|
|
|
document.getElementById('close-modal').addEventListener('click', function() { |
|
|
document.getElementById('demo-modal').classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('demo-modal').addEventListener('click', function(e) { |
|
|
if(e.target === this) { |
|
|
this.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('load', function() { |
|
|
initScene(); |
|
|
|
|
|
|
|
|
const hero = document.getElementById('hero'); |
|
|
hero.addEventListener('mousemove', (e) => { |
|
|
const xAxis = (window.innerWidth / 2 - e.pageX) / 25; |
|
|
const yAxis = (window.innerHeight / 2 - e.pageY) / 25; |
|
|
hero.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const chatArea = document.querySelector('.chat-area'); |
|
|
if(chatArea) { |
|
|
chatArea.scrollTop = chatArea.scrollHeight; |
|
|
} |
|
|
}, 1000); |
|
|
</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=rockguard/nuroxai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
