Hugging Face's logo

Spaces:
hayatiali
/
undefined
Running

App Files Community
undefined / index.html
hayatiali's picture
hayatiali
servislerin sunumlkarı daha detaylı anlatabilir
1614ebe verified
Raw History Blame Contribute Delete
28 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Neuronic Nexus - AI Speech & Language Solutions</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <script src="https://unpkg.com/feather-icons"></script>
 <script>
 tailwind.config = {
 theme: {
 extend: {
 colors: {
 primary: '#6366f1',
 secondary: '#10b981',
 accent: '#8b5cf6'
 }
 }
 }
 }
 </script>
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 body {
 font-family: 'Inter', sans-serif;
 background-color: #0f172a;
 color: #e2e8f0;
 }
.gradient-bg {
 background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
 }
.tech-grid {
 background-image:
radial-gradient(circle at 25% 25%, rgba(99, 102, 241, 0.1) 0%, transparent 55%),
 radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 55%);
 }
.floating {
 animation: float 6s ease-in-out infinite;
 }
@keyframes float {
 0% { transform: translateY(0px); }
 50% { transform: translateY(-20px); }
 100% { transform: translateY(0px); }
 }
.pulse-glow {
 animation: pulse-glow 2s ease-in-out infinite alternate;
 }
@keyframes pulse-glow {
 from { box-shadow: 0 0 20px rgba(99, 102, 241, 0.3); }
 to { box-shadow: 0 0 30px rgba(99, 102, 241, 0.6); }
 }
.neon-border {
 border: 1px solid rgba(99, 102, 241, 0.3);
 box-shadow: 0 0 15px rgba(99, 102, 241, 0.2);
 }
.code-block {
 background: #1e293b;
 border-radius: 0.5rem;
 padding: 1.5rem;
 font-family: monospace;
 font-size: 0.9rem;
 overflow-x: auto;
 }
.terminal-header {
 background: #1e293b;
 border-radius: 0.5rem 0.5rem 0 0;
 padding: 0.5rem 1rem;
 display: flex;
 align-items: center;
 }
.terminal-dot {
 width: 0.75rem;
 height: 0.75rem;
 border-radius: 50%;
 margin-right: 0.5rem;
 }
.dot-red { background: #ef4444; }
 .dot-yellow { background: #eab308; }
 .dot-green { background: #22c55e; }
 </style>
</head>
<body class="bg-slate-900 text-slate-100">
 <!-- Navigation -->
 <nav class="fixed w-full bg-slate-900/90 backdrop-blur-md z-50 py-4 border-b border-slate-800">
 <div class="container mx-auto px-6">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <div class="w-10 h-10 bg-gradient-to-r from-primary to-accent rounded-lg flex items-center justify-center">
 <i data-feather="cpu" class="text-white"></i>
 </div>
 <span class="text-xl font-bold">Neuronic Nexus</span>
 </div>
<div class="hidden md:flex space-x-8">
 <a href="#solutions" class="font-medium hover:text-primary transition-colors">Solutions</a>
 <a href="#technology" class="font-medium hover:text-primary transition-colors">Technology</a>
 <a href="#platform" class="font-medium hover:text-primary transition-colors">Platform</a>
 <a href="#about" class="font-medium hover:text-primary transition-colors">About</a>
 </div>
<div class="flex items-center space-x-4">
 <a href="#" class="hidden md:inline-block px-4 py-2 text-primary font-medium hover:bg-primary/10 rounded-lg transition-colors">Sign In</a>
 <a href="#" class="px-6 py-2 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors">Get Started</a>
 </div>
 </div>
 </div>
 </nav>
 <!-- Hero Section -->
 <section class="pt-32 pb-20 gradient-bg text-white">
 <div class="container mx-auto px-6">
 <div class="flex flex-col lg:flex-row items-center justify-between">
 <div class="lg:w-1/2 mb-12 lg:mb-0">
 <div class="inline-flex items-center px-4 py-2 bg-primary/20 rounded-full mb-6">
 <span class="text-sm font-medium">AI Development Platform</span>
 </div>
 <h1 class="text-5xl lg:text-7xl font-bold mb-6 leading-tight">
 Build AI That
<span class="text-transparent bg-clip-text bg-gradient-to-r from-secondary to-accent">Thinks</span>
 </h1>
 <p class="text-xl text-slate-300 mb-8 max-w-2xl">
 Fully automated AI development platform. Upload your domain data, let our system handle training, deployment, and optimization. Focus on innovation, not infrastructure.
 </p>
 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
 <a href="#" class="px-8 py-4 bg-primary text-white font-bold rounded-lg hover:bg-primary/90 transition-colors text-center">
 Start Building
 </a>
 <a href="#" class="px-8 py-4 border-2 border-primary text-white font-bold rounded-lg hover:bg-primary/10 transition-colors text-center">
 Watch Demo
 </a>
 </div>
 </div>
 <div class="lg:w-1/2 relative">
 <div class="relative floating">
 <div class="absolute -top-10 -right-10 w-72 h-72 bg-accent/20 rounded-full blur-3xl"></div>
 <div class="absolute -bottom-10 -left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl"></div>
 <div class="relative bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8 border border-slate-700 neon-border">
 <div class="terminal-header">
 <div class="dot-red"></div>
 <div class="dot-yellow"></div>
 <div class="dot-green"></div>
 <span class="text-slate-400 text-sm ml-2">AI Training Terminal</span>
 </div>
 <div class="code-block">
 <div class="text-green-400">$ neuronic train</div>
 <div class="text-slate-400">Loading dataset: medical-records.csv</div>
 <div class="text-slate-400">Processing 2.4M records...</div>
 <div class="text-yellow-400">Training model: 85% complete</div>
 <div class="text-green-400">Deploying to production...</div>
 <div class="text-white">> API endpoint: <span class="text-cyan-400">https://api.neuronic.ai/v1</span></div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Services Section -->
 <section id="solutions" class="py-20 tech-grid">
 <div class="container mx-auto px-6">
 <div class="text-center mb-16">
 <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-white">Size Özel AI Çözümleri</h2>
 <p class="text-xl text-slate-300 max-w-2xl mx-auto">
 İşinize özel geliştirilen, dil ve lehçe anlayışına sahip akıllı konuşma teknolojileri
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <!-- Service 1 -->
 <div class="bg-slate-800/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 neon-border hover:scale-105">
 <div class="w-16 h-16 bg-gradient-to-r from-primary to-accent rounded-xl flex items-center justify-center mb-6">
 <i data-feather="message-square" class="text-white w-8 h-8"></i>
 </div>
 <h3 class="text-2xl font-bold mb-4 text-white">Akıllı Dil Modeli</h3>
 <p class="text-slate-300 mb-6">
 İşinize özel eğitilmiş, bağlamsal anlayışa sahip dil modelleri. Yerel lehçeleri ve sektörel terminolojiyi anlayarak doğal konuşma akışı sağlar.
 </p>
 <ul class="space-y-3">
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Çok Dilli Destek:</strong> 120+ dil ve yerel lehçelerde doğal anlayış</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Duygusal Zeka:</strong> Ton ve niyet analizi ile insan benzeri etkileşim</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Bağlam Hafızası:</strong> Uzun konuşmalarda bile bağlamı koruyan akıllı hafıza</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Özelleştirilebilir:</strong> Sektörünüze özel kelime dağarcığı ve kurallarla eğitim</span>
 </li>
 </ul>
 </div>
<!-- Service 2 -->
 <div class="bg-slate-800/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 neon-border hover:scale-105">
 <div class="w-16 h-16 bg-gradient-to-r from-secondary to-primary rounded-xl flex items-center justify-center mb-6">
 <i data-feather="mic" class="text-white w-8 h-8"></i>
 </div>
 <h3 class="text-2xl font-bold mb-4 text-white">Konuşmayı Metne Çevirme</h3>
 <p class="text-slate-300 mb-6">
 Gürültülü ortamlarda bile %99.7 doğruluk oranıyla gerçek zamanlı konuşma tanıma. Birden fazla konuşmacıyı ayırt edebilme özelliği.
 </p>
 <ul class="space-y-3">
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Gerçek Zamanlı İşleme:</strong> 50ms'den düşük gecikme ile anlık dönüşüm</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Konuşmacı Ayırt Etme:</strong> Toplantı ve görüşmelerde her konuşmacıyı ayrı tanıma</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Gürültü Filtreleme:</strong> Arka plan gürültüsünü otomatik filtreleme teknolojisi</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Yerel Lehçe Desteği:</strong> Türkiye'nin tüm bölgelerine özel lehçe ve aksan tanıma</span>
 </li>
 </ul>
 </div>
<!-- Service 3 -->
 <div class="bg-slate-800/80 backdrop-blur-lg rounded-2xl p-8 shadow-xl hover:shadow-2xl transition-all duration-300 neon-border hover:scale-105">
 <div class="w-16 h-16 bg-gradient-to-r from-accent to-secondary rounded-xl flex items-center justify-center mb-6">
 <i data-feather="volume-2" class="text-white w-8 h-8"></i>
 </div>
 <h3 class="text-2xl font-bold mb-4 text-white">Metinden Konuşmaya</h3>
 <p class="text-slate-300 mb-6">
 İnsan sesine en yakın doğallıkta sentezlenmiş konuşma. Duygu tonlaması ve kişiye özel ses klonlama özellikleri.
 </p>
 <ul class="space-y-3">
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Duygusal Tonlama:</strong> Mutluluk, üzüntü, heyecan gibi duyguları yansıtabilme</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Ses Klonlama:</strong> 5 dakikalık ses kaydından kişiye özel ses oluşturma</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Çok Dilli Destek:</strong> 50+ dil ve 200'den fazla aksan seçeneği</span>
 </li>
 <li class="flex items-start text-slate-300">
 <i data-feather="check" class="text-secondary mr-2 w-5 h-5 mt-0.5 flex-shrink-0"></i>
 <span><strong>Doğal Konuşma Akışı:</strong> Duraklamalar, vurgular ve doğal nefes alışları</span>
 </li>
 </ul>
 </div>
 </div>
<!-- Additional Services Row -->
 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
 <!-- Custom Integration -->
 <div class="bg-gradient-to-br from-primary/20 to-accent/20 backdrop-blur-lg rounded-2xl p-8 shadow-xl neon-border">
 <div class="flex items-center mb-6">
 <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mr-4">
 <i data-feather="settings" class="text-primary w-6 h-6"></i>
 </div>
 <h3 class="text-2xl font-bold text-white">Özel Entegrasyon</h3>
 </div>
 <p class="text-slate-300 mb-4">
 Mevcut sistemlerinizle sorunsuz entegrasyon. CRM, ERP, çağrı merkezi yazılımları ve daha fazlası için özel çözümler.
 </p>
 <ul class="space-y-2 text-slate-300">
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-secondary mr-2 w-4 h-4"></i>
 <span>API ve SDK desteği</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-secondary mr-2 w-4 h-4"></i>
 <span>Özel eğitim ve danışmanlık</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-secondary mr-2 w-4 h-4"></i>
 <span>7/24 teknik destek</span>
 </li>
 </ul>
 </div>
<!-- Industry Specific -->
 <div class="bg-gradient-to-br from-secondary/20 to-primary/20 backdrop-blur-lg rounded-2xl p-8 shadow-xl neon-border">
 <div class="flex items-center mb-6">
 <div class="w-12 h-12 bg-white/10 rounded-xl flex items-center justify-center mr-4">
 <i data-feather="briefcase" class="text-secondary w-6 h-6"></i>
 </div>
 <h3 class="text-2xl font-bold text-white">Sektörel Çözümler</h3>
 </div>
 <p class="text-slate-300 mb-4">
 Sağlık, finans, perakende, eğitim ve daha birçok sektöre özel dil modelleri ve konuşma çözümleri.
 </p>
 <ul class="space-y-2 text-slate-300">
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-secondary mr-2 w-4 h-4"></i>
 <span>Sektöre özel kelime dağarcığı</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-secondary mr-2 w-4 h-4"></i>
 <span>Uyumluluk ve güvenlik standartları</span>
 </li>
 <li class="flex items-center">
 <i data-feather="check-circle" class="text-secondary mr-2 w-4 h-4"></i>
 <span>Özel eğitim veri setleri</span>
 </li>
 </ul>
 </div>
 </div>
 </div>
 </section>
<!-- Technology Section -->
 <section id="technology" class="py-20 tech-grid">
 <div class="container mx-auto px-6">
 <div class="flex flex-col lg:flex-row items-center justify-between">
 <div class="lg:w-1/2 mb-12 lg:mb-0">
 <div class="relative">
 <div class="absolute -top-10 -left-10 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
 <div class="relative bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8 shadow-xl neon-border">
 <div class="grid grid-cols-2 gap-6">
 <div class="text-center p-6 bg-slate-700/50 rounded-xl">
 <div class="text-3xl font-bold text-primary mb-2">99.7%</div>
 <div class="text-slate-300">Speech Accuracy</div>
 </div>
 <div class="text-center p-6 bg-slate-700/50 rounded-xl">
 <div class="text-3xl font-bold text-secondary mb-2">50ms</div>
 <div class="text-slate-300">Response Time</div>
 </div>
 <div class="text-center p-6 bg-slate-700/50 rounded-xl">
 <div class="text-3xl font-bold text-accent mb-2">120+</div>
 <div class="text-slate-300">Languages</div>
 </div>
 <div class="text-center p-6 bg-slate-700/50 rounded-xl">
 <div class="text-3xl font-bold text-primary mb-2">24/7</div>
 <div class="text-slate-300">Uptime</div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <div class="lg:w-1/2 lg:pl-12">
 <h2 class="text-4xl lg:text-5xl font-bold mb-6 text-white">Built on Cutting-Edge AI</h2>
 <p class="text-xl text-slate-300 mb-8">
 Our proprietary neural architecture combines transformer models with novel attention mechanisms for unparalleled performance in speech and language understanding.
 </p>
 <div class="space-y-4">
 <div class="flex items-start">
 <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center mr-4">
 <i data-feather="zap" class="text-primary w-6 h-6"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-2 text-white">Real-time Processing</h3>
 <p class="text-slate-300">Process audio and generate responses in milliseconds</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="w-12 h-12 bg-secondary/10 rounded-xl flex items-center justify-center mr-4">
 <i data-feather="shield" class="text-secondary w-6 h-6"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-2 text-white">Enterprise Security</h3>
 <p class="text-slate-300">End-to-end encryption and compliance with data protection standards</p>
 </div>
 </div>
 <div class="flex items-start">
 <div class="w-12 h-12 bg-accent/10 rounded-xl flex items-center justify-center mr-4">
 <i data-feather="layers" class="text-accent w-6 h-6"></i>
 </div>
 <div>
 <h3 class="text-xl font-bold mb-2 text-white">Scalable Infrastructure</h3>
 <p class="text-slate-300">Handle millions of requests with our distributed cloud architecture</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- CTA Section -->
 <section class="py-20 gradient-bg text-white">
 <div class="container mx-auto px-6 text-center">
 <h2 class="text-4xl lg:text-6xl font-bold mb-6">Ready to Transform Your Business?</h2>
 <p class="text-xl mb-8 max-w-2xl mx-auto">
 Join thousands of companies already using our AI speech technology to revolutionize customer experience and operational efficiency.
 </p>
 <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
 <a href="#" class="px-8 py-4 bg-white text-primary font-bold rounded-lg hover:bg-gray-100 transition-colors">
 Start Free Trial
 </a>
 <a href="#" class="px-8 py-4 border-2 border-white text-white font-bold rounded-lg hover:bg-white/10 transition-colors">
 Schedule Demo
 </a>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-gray-900 text-white py-12">
 <div class="container mx-auto px-6">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <div class="flex items-center space-x-2 mb-6">
 <div class="w-8 h-8 bg-gradient-to-r from-primary to-accent rounded-lg flex items-center justify-center">
 <i data-feather="cpu" class="text-white"></i>
 </div>
 <span class="text-xl font-bold">Neuronic Nexus</span>
 </div>
 <p class="text-gray-400">
 Advanced AI speech and language technology for the next generation of applications.
 </p>
 </div>
 <div>
 <h3 class="font-bold text-lg mb-4">Solutions</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">LLM API</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Speech-to-Text</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Text-to-Speech</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Voice Cloning</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold text-lg mb-4">Company</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">About</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Careers</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Blog</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a></li>
 </ul>
 </div>
 <div>
 <h3 class="font-bold text-lg mb-4">Connect</h3>
 <div class="flex space-x-4">
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
 <i data-feather="twitter" class="w-5 h-5"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
 <i data-feather="linkedin" class="w-5 h-5"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-primary transition-colors">
 <i data-feather="github" class="w-5 h-5"></i>
 </a>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
 <p>&copy; 2024 Neuronic Nexus. All rights reserved.</p>
 </div>
 </div>
 </footer>
<script>
 feather.replace();
// Smooth scrolling for navigation links
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
 document.querySelector(this.getAttribute('href')).scrollIntoView({
 behavior: 'smooth'
 });
 });
 });
 </script>
</body>
</html>