1031 lines
59 KiB
TypeScript
1031 lines
59 KiB
TypeScript
"use client";
|
||
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useState, useEffect, useRef } from "react";
|
||
import type { DemoData } from "@/data/demos";
|
||
|
||
interface ChatbotTemplate2Props {
|
||
data: DemoData;
|
||
}
|
||
|
||
interface Message {
|
||
sender: "bot" | "user";
|
||
text: string;
|
||
}
|
||
|
||
const translations = {
|
||
tr: {
|
||
features: "Özellikler",
|
||
simulator: "AI Simülatörü",
|
||
integrations: "Entegrasyonlar",
|
||
pricing: "Planlar",
|
||
reviews: "Yorumlar",
|
||
tryNow: "Hemen Dene",
|
||
badge: "ZENITH COGNITIVE ENGINE V2.0",
|
||
heroTitle1: "Özel Bilginizle Eğitilmiş",
|
||
heroTitle2: "Sıfır Hatalı Yapay Zekâ",
|
||
heroDesc: "Zenith AI; web sitenizi, dokümanlarınızı ve Notion sayfalarınızı saniyeler içinde analiz eder. %99.4 doğruluk oranıyla halüsinasyonsuz, 240ms altında çalışan ultra hızlı bir chatbot oluşturur.",
|
||
startBtn: "Ücretsiz Başlat",
|
||
exploreBtn: "Entegrasyonları Gör",
|
||
sandboxTitle: "Zenith AI Arayüzü",
|
||
statusOnline: "Çevrimiçi & Aktif",
|
||
suggest1: "Semantik İndeksleme nedir?",
|
||
suggest2: "Hangi kanalları destekler?",
|
||
suggest3: "Sıfır halüsinasyon garantisi",
|
||
typing: "Yapay zeka yanıt üretiyor...",
|
||
inputPlaceholder: "Zenith AI'a bir soru sorun...",
|
||
terminalTitle: "Zenith AI Semantik Konsol",
|
||
terminalRunBtn: "Bilgi Tabanını İndeksle",
|
||
featuresHeader: "Yapay Zeka Destekli Kabiliyetler",
|
||
featuresSub: "Bento yapısında kurgulanmış üst segment altyapı mimarisi.",
|
||
integrationsHeader: "Tam Entegre Çalışma Ortamı",
|
||
integrationsSub: "Kullandığınız kurumsal araçlarla ve mesajlaşma kanallarıyla saniyeler içinde senkronize edin.",
|
||
pricingHeader: "Şeffaf Fiyatlandırma",
|
||
pricingSub: "İşletmenizin büyüklüğüne göre ölçeklenebilen esnek abonelik planları.",
|
||
reviewsHeader: "Görüşler",
|
||
reviewsSub: "Zenith AI altyapısını kullanan lider ekiplerin gerçek deneyimleri.",
|
||
footerText: "Bilgi tabanınızı semantik indekslerle saniyeler içinde analiz edip 240ms altında doğrulanmış yanıtlar sunan yeni nesil yapay zekâ sohbet asistanı.",
|
||
privacy: "Gizlilik Politikası",
|
||
terms: "Kullanım Şartları",
|
||
tryModalTitle: "Zenith AI Sandbox Deneyimi",
|
||
tryModalDesc: "Kendi web siteniz ve e-posta adresinizle hemen bir deneme anahtarı oluşturun ve sitenize ekleyebileceğiniz script kodunu kopyalayın.",
|
||
urlLabel: "Web Siteniz",
|
||
emailLabel: "E-Posta Adresiniz",
|
||
generateBtn: "Sandbox Kodunu Üret",
|
||
tokenTitle: "Sandbox Kodunuz Hazır",
|
||
tokenDesc: "Aşağıdaki script kodunu web sitenizin <body> etiketinin kapanışından hemen önce yapıştırın.",
|
||
copyBtn: "Kodu Kopyala",
|
||
copied: "Kopyalandı!",
|
||
closeBtn: "Kapat"
|
||
},
|
||
en: {
|
||
features: "Features",
|
||
simulator: "AI Simulator",
|
||
integrations: "Integrations",
|
||
pricing: "Pricing",
|
||
reviews: "Reviews",
|
||
tryNow: "Try Now",
|
||
badge: "ZENITH COGNITIVE ENGINE V2.0",
|
||
heroTitle1: "AI Chatbot Trained on",
|
||
heroTitle2: "Your Brand Knowledge",
|
||
heroDesc: "Zenith AI parses your website, documents, and Notion databases in seconds. It guarantees 99.4% accurate customer responses with sub-240ms latency and zero hallucination.",
|
||
startBtn: "Get Started Free",
|
||
exploreBtn: "Explore Integrations",
|
||
sandboxTitle: "Zenith AI Widget",
|
||
statusOnline: "Online & Active",
|
||
suggest1: "What is semantic indexing?",
|
||
suggest2: "Which channels are supported?",
|
||
suggest3: "Zero hallucination guarantee",
|
||
typing: "AI is thinking...",
|
||
inputPlaceholder: "Ask Zenith AI a question...",
|
||
terminalTitle: "Zenith Semantic Indexing Console",
|
||
terminalRunBtn: "Simulate Knowledge Indexing",
|
||
featuresHeader: "AI-Powered Capabilities",
|
||
featuresSub: "Bento-grid capabilities built with high performance and zero-hallucination engines.",
|
||
integrationsHeader: "Seamless Ecosystem Integrations",
|
||
integrationsSub: "Sync with your existing corporate workspaces and messaging channels in under a minute.",
|
||
pricingHeader: "Transparent Pricing Plans",
|
||
pricingSub: "Flexible scales designed to accommodate startups and enterprise support systems.",
|
||
reviewsHeader: "Wall of Love",
|
||
reviewsSub: "Honest feedback from customer support leaders and tech team leads globally.",
|
||
footerText: "Next-generation conversational interface parsing document structures to deliver verified responses with sub-240ms latency.",
|
||
privacy: "Privacy Policy",
|
||
terms: "Terms of Service",
|
||
tryModalTitle: "Zenith AI Sandbox Experience",
|
||
tryModalDesc: "Enter your website URL and contact email to issue a unique sandbox token and generate your lightweight embed script.",
|
||
urlLabel: "Your Website URL",
|
||
emailLabel: "Your Contact Email",
|
||
generateBtn: "Generate Embed Script",
|
||
tokenTitle: "Sandbox Script Ready",
|
||
tokenDesc: "Copy and paste this lightweight script tag right before the closing </body> tag of your website code.",
|
||
copyBtn: "Copy Script",
|
||
copied: "Copied!",
|
||
closeBtn: "Close"
|
||
}
|
||
};
|
||
|
||
const mockResponses: Record<string, Record<string, string>> = {
|
||
tr: {
|
||
suggest1: "Semantik İndeksleme; dokümanlarınızı sadece kelime bazlı değil, anlamsal ilişkileriyle haritalandırıp vektör veritabanına kaydeder. Böylece yapay zeka bağlamı mükemmel anlar.",
|
||
suggest2: "Zenith AI; Web siteniz için özel JS widget'ı, Slack workspace, WhatsApp Business, Telegram botları ve Discord sunucuları üzerinde tamamen yerel entegrasyon desteği sağlar.",
|
||
suggest3: "%99.4 doğruluk oranımız, yapay zekanın sadece sizin onayladığınız bilgi tabanını referans almasından kaynaklanır. Bilmediği konularda uydurmak yerine destek ekibinize yönlendirir."
|
||
},
|
||
en: {
|
||
suggest1: "Semantic Indexing maps your documents based on structural meaning rather than simple keywords, storing them in vector formats. This allows the AI to fully grasp context.",
|
||
suggest2: "Zenith AI natively integrates across custom JavaScript Web Widgets, Slack workspaces, WhatsApp Business API, Telegram channels, and Discord servers.",
|
||
suggest3: "Our 99.4% accuracy is achieved by strictly grounding the AI responses within your verified knowledge base. If a query is out-of-scope, it routes to a human agent instead of hallucinating."
|
||
}
|
||
};
|
||
|
||
export default function ChatbotTemplate2({ data }: ChatbotTemplate2Props) {
|
||
const [lang, setLang] = useState<"tr" | "en">("tr");
|
||
const t = translations[lang];
|
||
|
||
// Chat Sandbox State
|
||
const [chatMessages, setChatMessages] = useState<Message[]>([
|
||
{ sender: "bot", text: lang === "tr" ? "Merhaba! Ben Zenith AI. Markanızın özel bilgi tabanıyla eğitildim. Özelliklerimi test etmek için aşağıdaki butonlara basabilir veya yazabilirsiniz." : "Hello! I am Zenith AI, trained on your custom knowledge base. Feel free to click the suggestion chips or write to test my capabilities." }
|
||
]);
|
||
const [chatInput, setChatInput] = useState("");
|
||
const [isBotTyping, setIsBotTyping] = useState(false);
|
||
const [streamedText, setStreamedText] = useState("");
|
||
const chatEndRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Sync initial message on language switch
|
||
useEffect(() => {
|
||
setChatMessages([
|
||
{ sender: "bot", text: lang === "tr" ? "Merhaba! Ben Zenith AI. Markanızın özel bilgi tabanıyla eğitildim. Özelliklerimi test etmek için aşağıdaki butonlara basabilir veya yazabilirsiniz." : "Hello! I am Zenith AI, trained on your custom knowledge base. Feel free to click the suggestion chips or write to test my capabilities." }
|
||
]);
|
||
}, [lang]);
|
||
|
||
// Terminal Simulation State
|
||
const [terminalLogs, setTerminalLogs] = useState<string[]>([]);
|
||
const [isTerminalIndexing, setIsTerminalIndexing] = useState(false);
|
||
const terminalEndRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Try Now Modal State
|
||
const [showModal, setShowModal] = useState(false);
|
||
const [userUrl, setUserUrl] = useState("");
|
||
const [userEmail, setUserEmail] = useState("");
|
||
const [generatedScript, setGeneratedScript] = useState("");
|
||
const [isGenerating, setIsGenerating] = useState(false);
|
||
const [isCopied, setIsCopied] = useState(false);
|
||
|
||
// Custom Streaming Response Helper
|
||
const triggerStreamingResponse = async (responseText: string) => {
|
||
setIsBotTyping(true);
|
||
// Simulate thinking delay
|
||
await new Promise((res) => setTimeout(res, 800));
|
||
setIsBotTyping(false);
|
||
|
||
setChatMessages((prev) => [...prev, { sender: "bot", text: "" }]);
|
||
const words = responseText.split(" ");
|
||
let currentText = "";
|
||
|
||
for (let i = 0; i < words.length; i++) {
|
||
currentText += (i === 0 ? "" : " ") + words[i];
|
||
// Update the last message in chat array
|
||
setChatMessages((prev) => {
|
||
const updated = [...prev];
|
||
updated[updated.length - 1] = { sender: "bot", text: currentText };
|
||
return updated;
|
||
});
|
||
await new Promise((res) => setTimeout(res, 45)); // stream pacing
|
||
}
|
||
};
|
||
|
||
const handleSendCustomMessage = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!chatInput.trim() || isBotTyping) return;
|
||
|
||
const userText = chatInput;
|
||
setChatMessages((prev) => [...prev, { sender: "user", text: userText }]);
|
||
setChatInput("");
|
||
|
||
// Simulate standard answers
|
||
let reply = lang === "tr"
|
||
? "Sorduğunuz soruyu Zenith AI semantik motorumuzda işledim. Bilgi tabanınızda bu veriye ulaştım: Zenith AI, 240ms gibi rekor bir sürede doğrulanmış yanıtlar verir."
|
||
: "I processed your query in our Zenith semantic cognitive engine. According to your synced documents: Zenith AI operates in a sub-240ms timeframe with verified responses.";
|
||
|
||
if (userText.toLowerCase().includes("hız") || userText.toLowerCase().includes("speed") || userText.toLowerCase().includes("ms")) {
|
||
reply = lang === "tr"
|
||
? "Zenith AI, özel geliştirilmiş hafif LLM ara katmanı sayesinde web widgetlarında ve API uçlarında 240 milisaniyenin altında anlık kelime akışı başlatır."
|
||
: "Zenith AI features an optimized micro-model layer initiating word streams on web frontends in under 240 milliseconds.";
|
||
} else if (userText.toLowerCase().includes("hata") || userText.toLowerCase().includes("error") || userText.toLowerCase().includes("halüs")) {
|
||
reply = lang === "tr"
|
||
? "%99.4 oranında doğrulanmış yanıt modelimiz, veri tabanınız dışındaki konulara uydurma cevaplar üretilmesini engeller ve anında gerçek bir insana aktarım sunar."
|
||
: "Our 99.4% accuracy threshold prevents arbitrary generation on out-of-bounds topics, offering direct failover to human support.";
|
||
}
|
||
|
||
triggerStreamingResponse(reply);
|
||
};
|
||
|
||
const handleSuggestionClick = (key: string, label: string) => {
|
||
if (isBotTyping) return;
|
||
setChatMessages((prev) => [...prev, { sender: "user", text: label }]);
|
||
const responseText = mockResponses[lang][key];
|
||
triggerStreamingResponse(responseText);
|
||
};
|
||
|
||
// Terminal Indexing Simulator
|
||
const runTerminalSimulation = async () => {
|
||
if (isTerminalIndexing) return;
|
||
setIsTerminalIndexing(true);
|
||
setTerminalLogs([]);
|
||
|
||
const logs = lang === "tr" ? [
|
||
"⚡ Zenith AI Cognitive Indexer v2.0 başlatıldı...",
|
||
"🔗 Bağlantı taranıyor: https://docs.yourcompany.com",
|
||
"📂 Bulunan alt dokümanlar: /api-reference, /installation, /customization",
|
||
"🧠 Semantik parçalama algoritması yükleniyor (Chunk size: 512, overlap: 64)...",
|
||
"📦 Parçalanan doküman sayısı: 184.",
|
||
"🧬 Vektör gömmeleri hesaplanıyor (OpenAI text-embedding-3-small)...",
|
||
"💾 Veriler Zenith Vector Cloud veritabanına kaydedildi.",
|
||
"🟢 Bilgi tabanı başarıyla indekslendi. 240ms anlık sorgulara hazır!"
|
||
] : [
|
||
"⚡ Zenith AI Cognitive Indexer v2.0 active...",
|
||
"🔗 Scanning core connection: https://docs.yourcompany.com",
|
||
"📂 Found sub-documents: /api-reference, /installation, /customization",
|
||
"🧠 Launching semantic chunking parser (Chunk size: 512, overlap: 64)...",
|
||
"📦 Indexed block count: 184.",
|
||
"🧬 Computing vector dimensional weights (OpenAI text-embedding-3-small)...",
|
||
"💾 Synced indices with Zenith Vector Cloud database.",
|
||
"🟢 Knowledge base indexed successfully! Sub-240ms queries ready."
|
||
];
|
||
|
||
for (let i = 0; i < logs.length; i++) {
|
||
setTerminalLogs((prev) => [...prev, logs[i]]);
|
||
await new Promise((res) => setTimeout(res, 600));
|
||
}
|
||
setIsTerminalIndexing(false);
|
||
};
|
||
|
||
// Modal Generator Script
|
||
const handleGenerateScript = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!userUrl.trim() || !userEmail.trim()) return;
|
||
|
||
setIsGenerating(true);
|
||
setTimeout(() => {
|
||
const cleanUrl = userUrl.replace(/https?:\/\/(www\.)?/, "").split("/")[0];
|
||
const code = `<!-- Zenith AI Conversational Widget Embed -->\n<script>\n window.ZenithConfig = {\n token: "zen_${Math.random().toString(36).substring(2, 9)}",\n domain: "${cleanUrl}"\n };\n</script>\n<script src="https://cdn.zenithai.com/widget.js" async></script>`;
|
||
setGeneratedScript(code);
|
||
setIsGenerating(false);
|
||
}, 1200);
|
||
};
|
||
|
||
const handleCopyCode = () => {
|
||
navigator.clipboard.writeText(generatedScript);
|
||
setIsCopied(true);
|
||
setTimeout(() => setIsCopied(false), 2000);
|
||
};
|
||
|
||
// Auto-scroll for chat
|
||
useEffect(() => {
|
||
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||
}, [chatMessages, isBotTyping]);
|
||
|
||
// Auto-scroll for terminal
|
||
useEffect(() => {
|
||
terminalEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||
}, [terminalLogs]);
|
||
|
||
return (
|
||
<div className="min-h-screen bg-[#070709] text-zinc-100 overflow-x-hidden relative selection:bg-violet-600 selection:text-white font-sans antialiased">
|
||
|
||
{/* Custom Global Styles for fonts & animations */}
|
||
<style jsx global>{`
|
||
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
|
||
body {
|
||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||
}
|
||
@keyframes marquee {
|
||
0% { transform: translateX(0%); }
|
||
100% { transform: translateX(-50%); }
|
||
}
|
||
.animate-marquee {
|
||
display: flex;
|
||
width: max-content;
|
||
animation: marquee 25s linear infinite;
|
||
}
|
||
.animate-marquee:hover {
|
||
animation-play-state: paused;
|
||
}
|
||
`}</style>
|
||
|
||
{/* Decorative Ambient Background */}
|
||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-[1400px] h-[550px] bg-[radial-gradient(ellipse_60%_40%_at_50%_0%,rgba(139,92,246,0.14),transparent)] pointer-events-none z-0" />
|
||
<div className="absolute top-[800px] -left-[200px] w-[500px] h-[500px] bg-[radial-gradient(circle_at_center,rgba(139,92,246,0.03),transparent_70%)] pointer-events-none z-0" />
|
||
<div className="absolute bottom-[200px] -right-[200px] w-[600px] h-[600px] bg-[radial-gradient(circle_at_center,rgba(20,184,166,0.03),transparent_70%)] pointer-events-none z-0" />
|
||
|
||
{/* ── HEADER / NAVBAR ── */}
|
||
<header className="fixed top-4 left-4 right-4 z-40">
|
||
<nav className="max-w-6xl mx-auto bg-zinc-900/50 backdrop-blur-xl border border-zinc-800/60 rounded-2xl px-6 py-3.5 flex items-center justify-between shadow-[0_12px_30px_rgba(0,0,0,0.5)]">
|
||
<div className="flex items-center gap-3">
|
||
<span className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-600 to-indigo-700 flex items-center justify-center text-white text-base font-bold shadow-md shadow-violet-500/20">
|
||
🧬
|
||
</span>
|
||
<span className="font-extrabold text-sm sm:text-base tracking-wide bg-gradient-to-r from-zinc-50 to-zinc-300 bg-clip-text text-transparent uppercase">
|
||
{data.firma.adi}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Navigation Links */}
|
||
<div className="hidden md:flex items-center gap-8 text-xs font-semibold text-zinc-400">
|
||
<a href="#features" className="hover:text-violet-400 transition-colors">{t.features}</a>
|
||
<a href="#simulator" className="hover:text-violet-400 transition-colors">{t.simulator}</a>
|
||
<a href="#integrations" className="hover:text-violet-400 transition-colors">{t.integrations}</a>
|
||
<a href="#pricing" className="hover:text-violet-400 transition-colors">{t.pricing}</a>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4">
|
||
{/* Lang Switcher */}
|
||
<div className="flex bg-zinc-950 border border-zinc-800 p-1 rounded-lg text-[10px] font-black tracking-wider uppercase select-none">
|
||
<button
|
||
onClick={() => setLang("tr")}
|
||
className={`px-2 py-1 rounded transition-all cursor-pointer ${lang === "tr" ? "bg-violet-600 text-white" : "text-zinc-500 hover:text-zinc-300"}`}
|
||
>
|
||
TR
|
||
</button>
|
||
<button
|
||
onClick={() => setLang("en")}
|
||
className={`px-2 py-1 rounded transition-all cursor-pointer ${lang === "en" ? "bg-violet-600 text-white" : "text-zinc-500 hover:text-zinc-300"}`}
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
|
||
{/* Header CTA */}
|
||
<button
|
||
onClick={() => setShowModal(true)}
|
||
className="bg-zinc-100 hover:bg-white text-zinc-950 font-bold text-[11px] tracking-wide px-4 py-2 rounded-xl transition-all cursor-pointer active:scale-98"
|
||
>
|
||
{t.tryNow}
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
</header>
|
||
|
||
{/* ── HERO & CONVERSATIONAL SANDBOX GRID ── */}
|
||
<section className="relative z-10 max-w-6xl mx-auto pt-32 pb-20 px-6">
|
||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center min-h-[550px]">
|
||
|
||
{/* Left: Text Elements */}
|
||
<div className="lg:col-span-6 space-y-6 text-center lg:text-left">
|
||
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-violet-500/20 bg-violet-500/5 text-violet-400 text-[10px] font-black tracking-widest uppercase">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-violet-400 animate-pulse" />
|
||
{t.badge}
|
||
</div>
|
||
|
||
<h1 className="text-3xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.08] text-white">
|
||
{t.heroTitle1}
|
||
<br />
|
||
<span className="bg-gradient-to-r from-violet-400 via-indigo-300 to-teal-300 bg-clip-text text-transparent">
|
||
{t.heroTitle2}
|
||
</span>
|
||
</h1>
|
||
|
||
<p className="text-zinc-400 text-sm sm:text-base leading-relaxed font-medium max-w-xl mx-auto lg:mx-0">
|
||
{t.heroDesc}
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4">
|
||
<button
|
||
onClick={() => setShowModal(true)}
|
||
className="w-full sm:w-auto bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-extrabold text-[12px] tracking-wider uppercase px-8 py-4.5 rounded-2xl transition-all cursor-pointer active:scale-98 shadow-lg shadow-violet-600/15"
|
||
>
|
||
{t.startBtn}
|
||
</button>
|
||
<a
|
||
href="#integrations"
|
||
className="w-full sm:w-auto text-center border border-zinc-800 bg-zinc-950/40 hover:bg-zinc-900 text-zinc-300 font-extrabold text-[12px] tracking-wider uppercase px-8 py-4.5 rounded-2xl transition-all cursor-pointer"
|
||
>
|
||
{t.exploreBtn}
|
||
</a>
|
||
</div>
|
||
|
||
{/* Quick Stats Grid */}
|
||
<div className="grid grid-cols-3 gap-6 pt-10 border-t border-zinc-900 max-w-md mx-auto lg:mx-0">
|
||
{data.istatistikler.map((stat, i) => (
|
||
<div key={i} className="text-center lg:text-left">
|
||
<span className="block text-xl sm:text-2xl font-extrabold text-white">{stat.deger}</span>
|
||
<span className="block text-[10px] text-zinc-500 font-bold uppercase tracking-wider mt-1">{stat.etiket.substring(0, 15)}...</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: Conversational UI Preview Sandbox */}
|
||
<div id="simulator" className="lg:col-span-6 flex flex-col items-center">
|
||
<div className="w-full max-w-[430px] h-[520px] bg-zinc-950/80 border border-zinc-800/80 rounded-3xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.8)] relative flex flex-col z-10 backdrop-blur-xl">
|
||
|
||
{/* Chat Header */}
|
||
<div className="bg-zinc-900/60 border-b border-zinc-800/60 px-5 py-4 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-9 h-9 rounded-xl bg-violet-600/10 border border-violet-500/20 flex items-center justify-center text-lg shadow-sm">
|
||
🧬
|
||
</div>
|
||
<div>
|
||
<span className="block font-bold text-xs text-white uppercase tracking-wider">{t.sandboxTitle}</span>
|
||
<span className="block text-[9px] text-teal-400 font-semibold tracking-wide flex items-center gap-1">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse" />
|
||
{t.statusOnline}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-zinc-700" />
|
||
<span className="w-1.5 h-1.5 rounded-full bg-zinc-700" />
|
||
</div>
|
||
</div>
|
||
|
||
{/* Chat Messages Log */}
|
||
<div className="flex-1 overflow-y-auto p-5 space-y-4 text-xs scrollbar-none">
|
||
{chatMessages.map((msg, i) => (
|
||
<div
|
||
key={i}
|
||
className={`flex ${msg.sender === "user" ? "justify-end" : "justify-start"}`}
|
||
>
|
||
<div
|
||
className={`max-w-[80%] rounded-2xl px-4 py-3 leading-relaxed shadow-sm ${
|
||
msg.sender === "user"
|
||
? "bg-violet-600 text-white rounded-br-none"
|
||
: "bg-zinc-900 border border-zinc-800/60 text-zinc-300 rounded-bl-none"
|
||
}`}
|
||
>
|
||
{msg.text}
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* Bot Typing Indicator */}
|
||
{isBotTyping && (
|
||
<div className="flex justify-start">
|
||
<div className="bg-zinc-900 border border-zinc-800/60 rounded-2xl rounded-bl-none px-4 py-3 flex items-center gap-1.5">
|
||
<span className="text-[10px] text-zinc-500 italic mr-1">{t.typing}</span>
|
||
<span className="w-1 h-1 rounded-full bg-violet-500 animate-bounce" style={{ animationDelay: "0ms" }} />
|
||
<span className="w-1 h-1 rounded-full bg-violet-500 animate-bounce" style={{ animationDelay: "150ms" }} />
|
||
<span className="w-1 h-1 rounded-full bg-violet-500 animate-bounce" style={{ animationDelay: "300ms" }} />
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div ref={chatEndRef} />
|
||
</div>
|
||
|
||
{/* Suggested Questions Chips */}
|
||
<div className="px-5 py-2.5 bg-zinc-950/40 border-t border-zinc-900/60 flex flex-wrap gap-2">
|
||
<button
|
||
onClick={() => handleSuggestionClick("suggest1", t.suggest1)}
|
||
disabled={isBotTyping}
|
||
className="text-[10px] font-bold text-zinc-400 bg-zinc-900 border border-zinc-800 hover:border-violet-500/40 hover:text-white px-3 py-1.5 rounded-full transition-all cursor-pointer shrink-0 disabled:opacity-50"
|
||
>
|
||
{t.suggest1}
|
||
</button>
|
||
<button
|
||
onClick={() => handleSuggestionClick("suggest2", t.suggest2)}
|
||
disabled={isBotTyping}
|
||
className="text-[10px] font-bold text-zinc-400 bg-zinc-900 border border-zinc-800 hover:border-violet-500/40 hover:text-white px-3 py-1.5 rounded-full transition-all cursor-pointer shrink-0 disabled:opacity-50"
|
||
>
|
||
{t.suggest2}
|
||
</button>
|
||
<button
|
||
onClick={() => handleSuggestionClick("suggest3", t.suggest3)}
|
||
disabled={isBotTyping}
|
||
className="text-[10px] font-bold text-zinc-400 bg-zinc-900 border border-zinc-800 hover:border-violet-500/40 hover:text-white px-3 py-1.5 rounded-full transition-all cursor-pointer shrink-0 disabled:opacity-50"
|
||
>
|
||
{t.suggest3}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Chat Input Area */}
|
||
<form onSubmit={handleSendCustomMessage} className="p-4 bg-zinc-900/40 border-t border-zinc-800/40 flex items-center gap-2">
|
||
<input
|
||
type="text"
|
||
value={chatInput}
|
||
onChange={(e) => setChatInput(e.target.value)}
|
||
disabled={isBotTyping}
|
||
placeholder={t.inputPlaceholder}
|
||
className="flex-1 bg-zinc-950 border border-zinc-800/80 rounded-xl px-4 py-3 text-xs text-white focus:outline-none focus:border-violet-500 transition-all placeholder-zinc-600 disabled:opacity-50"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
disabled={isBotTyping || !chatInput.trim()}
|
||
className="bg-violet-600 hover:bg-violet-500 disabled:bg-zinc-800 text-white w-9 h-9 rounded-xl flex items-center justify-center shrink-0 transition-all cursor-pointer"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
|
||
</svg>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── STREAMING TEXT / INDEXING TERMINAL WIDGET ── */}
|
||
<section className="relative z-10 max-w-6xl mx-auto py-16 px-6">
|
||
<div className="bg-zinc-950/60 border border-zinc-800/75 rounded-3xl p-6 sm:p-8 flex flex-col md:flex-row gap-8 items-center">
|
||
|
||
<div className="flex-1 space-y-4 text-center md:text-left">
|
||
<div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-xl">
|
||
💻
|
||
</div>
|
||
<h3 className="text-xl sm:text-2xl font-black text-white uppercase tracking-wide">
|
||
{t.terminalTitle}
|
||
</h3>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-md">
|
||
{lang === "tr"
|
||
? "Zenith AI, arka planda web sitelerinizi semantik kütüphanelere ayrıştırırken eşzamanlı bir tarama yürütür. Kod bloklarını simüle edin ve veri indekslemeyi canlı izleyin."
|
||
: "Zenith AI runs synchronous crawlers that dissect pages into semantic vector models. Simulate knowledge indexing in real-time below."}
|
||
</p>
|
||
<button
|
||
onClick={runTerminalSimulation}
|
||
disabled={isTerminalIndexing}
|
||
className="bg-zinc-900 hover:bg-zinc-800 disabled:opacity-50 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase px-6 py-3.5 rounded-xl border border-zinc-800 transition-all cursor-pointer inline-flex items-center gap-2"
|
||
>
|
||
{isTerminalIndexing && (
|
||
<svg className="animate-spin h-3.5 w-3.5 text-zinc-400" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
)}
|
||
{t.terminalRunBtn}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Terminal Console Card */}
|
||
<div className="w-full md:w-[500px] h-[260px] bg-black border border-zinc-900 rounded-2xl overflow-hidden p-5 flex flex-col font-mono text-[11px] text-zinc-400 shadow-2xl">
|
||
{/* Header controls */}
|
||
<div className="flex items-center justify-between border-b border-zinc-900 pb-3 mb-3">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="w-2.5 h-2.5 rounded-full bg-red-500/40" />
|
||
<span className="w-2.5 h-2.5 rounded-full bg-yellow-500/40" />
|
||
<span className="w-2.5 h-2.5 rounded-full bg-green-500/40" />
|
||
</div>
|
||
<span className="text-[9px] text-zinc-600 font-bold uppercase tracking-wider">sh - zenith_indexer.sh</span>
|
||
</div>
|
||
|
||
{/* Scrollable logs */}
|
||
<div className="flex-1 overflow-y-auto space-y-2 text-left scrollbar-none pr-1">
|
||
{terminalLogs.length === 0 ? (
|
||
<span className="text-zinc-600 italic">{lang === "tr" ? "İndeksleme simülatörünü başlatmak için sol taraftaki butona basın." : "Click the button to simulate the semantic vector indexer."}</span>
|
||
) : (
|
||
terminalLogs.map((log, i) => (
|
||
<div
|
||
key={i}
|
||
className={`leading-relaxed ${
|
||
log.startsWith("🟢")
|
||
? "text-teal-400 font-bold"
|
||
: log.startsWith("⚡")
|
||
? "text-violet-400"
|
||
: "text-zinc-400"
|
||
}`}
|
||
>
|
||
{log}
|
||
</div>
|
||
))
|
||
)}
|
||
<div ref={terminalEndRef} />
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── BENTO FEATURE CARDS Grid ── */}
|
||
<section id="features" className="relative z-10 max-w-6xl mx-auto py-20 px-6 border-t border-zinc-900">
|
||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-4">
|
||
<h2 className="text-2xl sm:text-4xl font-extrabold text-white tracking-wide uppercase">
|
||
{t.featuresHeader}
|
||
</h2>
|
||
<p className="text-zinc-400 text-xs sm:text-sm max-w-md mx-auto leading-relaxed">
|
||
{t.featuresSub}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Bento Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-12 gap-6">
|
||
|
||
{/* Card 1: 8cols top */}
|
||
<div className="md:col-span-8 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
|
||
{/* Ambient hover glow */}
|
||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_200px_120px_at_10%_10%,rgba(139,92,246,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
|
||
|
||
<div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-violet-400">
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 18v-5.25m0 0a3 3 0 0 0-3-3H9.75a3 3 0 0 0-3-3H6m12 11.25V9.75m0 0a3 3 0 0 0-3-3H14.25a3 3 0 0 0-3-3H12" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[0].baslik}</h4>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-xl">{data.hizmetler[0].aciklama}</p>
|
||
</div>
|
||
|
||
{/* Card 2: 4cols top */}
|
||
<div className="md:col-span-4 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
|
||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_150px_100px_at_10%_10%,rgba(20,184,166,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
|
||
|
||
<div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-teal-400">
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M7.5 12h9m-9 3.75h9m-9 3.75h9M3.75 6.75h16.5M3.75 12h.008v.008H3.75V12Zm0 3.75h.008v.008H3.75v-.008Zm0 3.75h.008v.008H3.75v-.008Z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[1].baslik}</h4>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed">{data.hizmetler[1].aciklama}</p>
|
||
</div>
|
||
|
||
{/* Card 3: 4cols bottom */}
|
||
<div className="md:col-span-4 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
|
||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_150px_100px_at_10%_10%,rgba(139,92,246,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
|
||
|
||
<div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-indigo-400">
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122A3 3 0 0 0 11.75 17.5h.5a3 3 0 0 0 2.22-1.378M9.53 16.122A3 3 0 0 1 11.75 15h.5a3 3 0 0 1 2.22 1.122M9.53 16.122h5.19M12 2.25V5.25m0 13.5v3m9.75-9.75h-3m-13.5 0H2.25m16.243-6.243l-2.122 2.122M7.636 16.364l-2.122 2.122m13.728 0l-2.122-2.122M7.636 7.636L5.514 5.514" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[2].baslik}</h4>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed">{data.hizmetler[2].aciklama}</p>
|
||
</div>
|
||
|
||
{/* Card 4: 8cols bottom */}
|
||
<div className="md:col-span-8 bg-zinc-950/40 border border-zinc-800/60 rounded-3xl p-8 hover:border-violet-500/20 hover:bg-zinc-950/60 transition-all duration-300 relative group overflow-hidden">
|
||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_200px_120px_at_10%_10%,rgba(20,184,166,0.06),transparent)] opacity-0 group-hover:opacity-100 transition-all" />
|
||
|
||
<div className="w-12 h-12 rounded-2xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg mb-6 text-violet-400">
|
||
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h4 className="text-lg font-bold text-white uppercase tracking-wider mb-2">{data.hizmetler[3].baslik}</h4>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-xl">{data.hizmetler[3].aciklama}</p>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── INTEGRATIONS SCROLLING LOGO MARQUEE ── */}
|
||
<section id="integrations" className="relative z-10 py-16 bg-zinc-950/40 border-y border-zinc-900 overflow-hidden">
|
||
<div className="max-w-6xl mx-auto px-6 mb-12 text-center md:text-left flex flex-col md:flex-row items-center justify-between gap-6">
|
||
<div>
|
||
<h2 className="text-2xl sm:text-3xl font-extrabold text-white tracking-wide uppercase">{t.integrationsHeader}</h2>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed mt-2 max-w-md">{t.integrationsSub}</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scrolling logos container */}
|
||
<div className="w-full relative flex overflow-hidden">
|
||
<div className="animate-marquee flex items-center gap-16 py-3">
|
||
{[1, 2].map((loop) => (
|
||
<div key={loop} className="flex items-center gap-16 select-none">
|
||
|
||
{/* Integration Logo: Slack */}
|
||
<div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
|
||
<svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523 2.528 2.528 0 0 1-2.522-2.523 2.528 2.528 0 0 1 2.522-2.52h2.52v2.52zm1.261 0a2.528 2.528 0 0 1 2.52-2.52h5.043a2.528 2.528 0 0 1 2.522 2.52v5.042a2.528 2.528 0 0 1-2.522 2.52H8.824a2.528 2.528 0 0 1-2.52-2.52v-5.042zM8.824 5.043a2.528 2.528 0 0 1-2.52-2.522A2.528 2.528 0 0 1 8.824 0a2.528 2.528 0 0 1 2.52 2.521v2.522h-2.52zm0 1.261a2.528 2.528 0 0 1 2.52 2.52v5.043a2.528 2.528 0 0 1-2.52 2.522H3.782a2.528 2.528 0 0 1-2.52-2.522V8.824a2.528 2.528 0 0 1 2.52-2.52h5.042zm10.134 3.782a2.528 2.528 0 0 1 2.52-2.521 2.528 2.528 0 0 1 2.522 2.521 2.528 2.528 0 0 1-2.522 2.52h-2.52v-2.52zm-1.262 0a2.528 2.528 0 0 1-2.52 2.52h-5.043a2.528 2.528 0 0 1-2.522-2.52V5.043a2.528 2.528 0 0 1 2.522-2.52h5.043a2.528 2.528 0 0 1 2.52 2.52v5.042zm-3.781 10.134a2.528 2.528 0 0 1 2.52 2.522 2.528 2.528 0 0 1-2.52 2.52 2.528 2.528 0 0 1-2.522-2.52v-2.522h2.522zm0-1.262a2.528 2.528 0 0 1-2.522-2.52v-5.043a2.528 2.528 0 0 1 2.522-2.52h5.042a2.528 2.528 0 0 1 2.52 2.52v5.043h-5.042z"/>
|
||
</svg>
|
||
<span className="text-sm font-bold tracking-wide">SLACK</span>
|
||
</div>
|
||
|
||
{/* Integration Logo: WhatsApp */}
|
||
<div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
|
||
<svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.73-1.45L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.625 1.451 5.403.002 9.803-4.394 9.805-9.795.001-2.618-1.01-5.074-2.845-6.912-1.833-1.836-4.273-2.847-6.892-2.848-5.408 0-9.81 4.398-9.813 9.799-.001 1.702.463 3.361 1.34 4.8l-.996 3.636 3.776-.99zm11.166-5.414c-.307-.154-1.817-.897-2.097-.999-.28-.102-.484-.154-.688.154-.204.307-.79.997-.969 1.2-.178.204-.356.23-.663.077-1.185-.593-2.001-1.033-2.798-2.398-.21-.359.21-.334.6-.113.35.199.307.256.46.41.153.153.077.435-.038.64-.115.205-.688 1.664-.944 2.278-.249.597-.502.512-.688.502-.172-.009-.37-.01-.567-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.817-.743 2.072-1.46.255-.718.255-1.332.179-1.46-.077-.128-.28-.204-.587-.358z"/>
|
||
</svg>
|
||
<span className="text-sm font-bold tracking-wide">WHATSAPP</span>
|
||
</div>
|
||
|
||
{/* Integration Logo: Notion */}
|
||
<div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
|
||
<span className="text-xl shrink-0 font-black">N</span>
|
||
<span className="text-sm font-bold tracking-wide">NOTION</span>
|
||
</div>
|
||
|
||
{/* Integration Logo: Discord */}
|
||
<div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
|
||
<svg className="w-6 h-6 shrink-0" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.58 2.019 18.0619a.0724.0724 0 00.0287.0502 20.1049 20.1049 0 006.0023 3.03.0784.0784 0 00.0845-.0276c.462-.6308.8755-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057 13.1 13.1 0 01-1.8716-.8923.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286 19.9863 19.9863 0 006.003-3.03.0771.0771 0 00.0289-.0497c2.8122-4.9451 1.9837-9.455 1.0186-13.6896a.071.071 0 00-.0325-.0276zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9559-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0951 2.1568 2.419 0 1.3332-.9559 2.4189-2.1569 2.4189zm7.975 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.211 0 2.1756 1.0951 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z"/>
|
||
</svg>
|
||
<span className="text-sm font-bold tracking-wide">DISCORD</span>
|
||
</div>
|
||
|
||
{/* Integration Logo: Zendesk */}
|
||
<div className="flex items-center gap-3 text-zinc-400 hover:text-white transition-colors duration-200 cursor-default">
|
||
<span className="text-xl shrink-0 font-semibold font-serif">Z</span>
|
||
<span className="text-sm font-bold tracking-wide">ZENDESK</span>
|
||
</div>
|
||
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── PRICING TIER SECTION ── */}
|
||
<section id="pricing" className="relative z-10 max-w-6xl mx-auto py-20 px-6">
|
||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-4">
|
||
<h2 className="text-2xl sm:text-4xl font-extrabold text-white tracking-wide uppercase">{t.pricingHeader}</h2>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-md mx-auto">{t.pricingSub}</p>
|
||
</div>
|
||
|
||
{/* Pricing Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch max-w-5xl mx-auto">
|
||
|
||
{/* Plan 1: Free */}
|
||
<div className="bg-zinc-950/30 border border-zinc-900 rounded-3xl p-8 flex flex-col justify-between hover:border-zinc-800/80 transition-all">
|
||
<div>
|
||
<span className="text-zinc-500 font-mono text-[9px] font-black uppercase tracking-widest block mb-4">Tier 01</span>
|
||
<h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">Sandbox</h3>
|
||
<p className="text-zinc-500 text-xs mb-6">
|
||
{lang === "tr" ? "Yapay zekayı kendi web sitenizde test edin." : "Test conversational intelligence live on your host."}
|
||
</p>
|
||
|
||
<div className="flex items-baseline gap-1.5 mb-6">
|
||
<span className="text-3xl font-extrabold text-white">$0</span>
|
||
<span className="text-zinc-600 text-xs font-semibold">/ {lang === "tr" ? "Sonsuza Dek" : "Forever"}</span>
|
||
</div>
|
||
|
||
<ul className="text-xs text-zinc-400 space-y-3.5 border-t border-zinc-900 pt-6">
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-teal-400">✓</span> 1 Website Connection
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-teal-400">✓</span> 5 Semantic Chunk Indexing
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-teal-400">✓</span> JS Embed Widget
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setShowModal(true)}
|
||
className="w-full bg-zinc-900 hover:bg-zinc-800 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer mt-8"
|
||
>
|
||
{t.startBtn}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Plan 2: Pro (Active Glow) */}
|
||
<div className="bg-zinc-950/70 border-2 border-violet-600/60 rounded-3xl p-8 flex flex-col justify-between hover:border-violet-600 transition-all relative shadow-[0_15px_40px_rgba(139,92,246,0.1)]">
|
||
<span className="absolute top-4 right-4 bg-violet-600 text-white text-[8px] font-black px-2.5 py-1 rounded-full uppercase tracking-wider">
|
||
POPULAR
|
||
</span>
|
||
|
||
<div>
|
||
<span className="text-violet-400 font-mono text-[9px] font-black uppercase tracking-widest block mb-4">Tier 02</span>
|
||
<h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">Growth</h3>
|
||
<p className="text-zinc-400 text-xs mb-6">
|
||
{lang === "tr" ? "Küçük ekipler ve büyüyen SaaS markaları için." : "Ideal support scale for early corporate integrations."}
|
||
</p>
|
||
|
||
<div className="flex items-baseline gap-1.5 mb-6">
|
||
<span className="text-3xl font-extrabold text-white">$49</span>
|
||
<span className="text-zinc-500 text-xs font-semibold">/ {lang === "tr" ? "Aylık" : "Month"}</span>
|
||
</div>
|
||
|
||
<ul className="text-xs text-zinc-300 space-y-3.5 border-t border-zinc-900 pt-6">
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-violet-400">✓</span> 3 Website Connections
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-violet-400">✓</span> 200+ Pages Semantic Indexing
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-violet-400">✓</span> Slack & WhatsApp channels
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-violet-400">✓</span> Custom Brand colors & logo
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setShowModal(true)}
|
||
className="w-full bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer mt-8"
|
||
>
|
||
{lang === "tr" ? "Hemen Başlat" : "Launch Now"}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Plan 3: Enterprise */}
|
||
<div className="bg-zinc-950/30 border border-zinc-900 rounded-3xl p-8 flex flex-col justify-between hover:border-zinc-800/80 transition-all">
|
||
<div>
|
||
<span className="text-zinc-500 font-mono text-[9px] font-black uppercase tracking-widest block mb-4">Tier 03</span>
|
||
<h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">Corporate</h3>
|
||
<p className="text-zinc-500 text-xs mb-6">
|
||
{lang === "tr" ? "Sınırsız sunucu kapasitesi ve KVKK entegrasyonu." : "Full GDPR validation and cluster node orchestration."}
|
||
</p>
|
||
|
||
<div className="flex items-baseline gap-1.5 mb-6">
|
||
<span className="text-3xl font-extrabold text-white">Custom</span>
|
||
</div>
|
||
|
||
<ul className="text-xs text-zinc-400 space-y-3.5 border-t border-zinc-900 pt-6">
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-teal-400">✓</span> Unlimited data sync loops
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-teal-400">✓</span> Dedicated Cluster Node
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-teal-400">✓</span> Personal Support Sommelier
|
||
</li>
|
||
<li className="flex items-center gap-2.5">
|
||
<span className="text-teal-400">✓</span> Custom Model fine-tuning
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setShowModal(true)}
|
||
className="w-full bg-zinc-900 hover:bg-zinc-800 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer mt-8"
|
||
>
|
||
{lang === "tr" ? "İletişime Geç" : "Talk to Sales"}
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── CLIENT TESTIMONIALS ── */}
|
||
<section className="relative z-10 max-w-6xl mx-auto py-20 px-6 border-t border-zinc-900">
|
||
<div className="text-center max-w-2xl mx-auto mb-16 space-y-4">
|
||
<h2 className="text-2xl sm:text-4xl font-extrabold text-white tracking-wide uppercase">{t.reviewsHeader}</h2>
|
||
<p className="text-zinc-400 text-xs sm:text-sm leading-relaxed max-w-md mx-auto">{t.reviewsSub}</p>
|
||
</div>
|
||
|
||
{/* Testimonial Cards */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||
{data.yorumlar.map((review, i) => (
|
||
<div key={i} className="bg-zinc-950/40 border border-zinc-900 rounded-2xl p-7 text-left space-y-4 hover:border-zinc-800 transition-all">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-xl bg-zinc-900 border border-zinc-800 flex items-center justify-center text-lg">
|
||
{review.emoji}
|
||
</div>
|
||
<div>
|
||
<span className="block font-bold text-xs text-white uppercase tracking-wider">{review.yazar}</span>
|
||
<span className="block text-[9px] text-zinc-500 uppercase font-black tracking-widest mt-0.5">{review.tarih}</span>
|
||
</div>
|
||
</div>
|
||
<p className="text-zinc-300 text-xs sm:text-sm leading-relaxed font-medium italic">
|
||
"{review.yorum}"
|
||
</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── BOTTOM CALL TO ACTION BANNER ── */}
|
||
<section className="relative z-10 max-w-5xl mx-auto py-24 px-6 text-center">
|
||
<div className="bg-gradient-to-br from-zinc-950 via-zinc-900 to-zinc-950 border border-violet-500/20 rounded-3xl p-10 sm:p-16 relative overflow-hidden shadow-2xl">
|
||
{/* Purple decorative spotlight */}
|
||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[350px] h-[350px] bg-violet-600/10 rounded-full blur-3xl pointer-events-none" />
|
||
|
||
<h2 className="text-2xl sm:text-4xl lg:text-5xl font-black text-white leading-none uppercase tracking-wide mb-6">
|
||
{lang === "tr" ? "Müşteri Destek Dönüşümünü Katlayın" : "Double your customer conversion loop"}
|
||
</h2>
|
||
<p className="text-zinc-400 text-xs sm:text-sm max-w-xl mx-auto leading-relaxed mb-10">
|
||
{lang === "tr"
|
||
? "Semantik taranan indeksler sayesinde Zenith AI sıfır halüsinasyon riski taşır. Saniyeler içinde kurun ve ekibinizi otomatik yapay zekâ ile özgürleştirin."
|
||
: "Thanks to parsed semantic indexing, Zenith AI delivers responses with zero hallucination. Install in under 60 seconds and automate support loops."}
|
||
</p>
|
||
|
||
<button
|
||
onClick={() => setShowModal(true)}
|
||
className="bg-zinc-100 hover:bg-white text-zinc-950 font-black text-[12px] tracking-wider uppercase px-8 py-4.5 rounded-2xl transition-all cursor-pointer shadow-lg active:scale-98"
|
||
>
|
||
{lang === "tr" ? "Destek Sistemini Güçlendir" : "Supercharge Support Now"}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="relative z-10 max-w-6xl mx-auto py-12 px-6 border-t border-zinc-900 flex flex-col md:flex-row items-center justify-between gap-8 text-xs text-zinc-500">
|
||
<div className="space-y-3 text-center md:text-left">
|
||
<div className="flex items-center justify-center md:justify-start gap-2">
|
||
<span className="w-6 h-6 rounded-md bg-violet-600 flex items-center justify-center text-xs font-black text-white">Z</span>
|
||
<span className="font-extrabold text-white tracking-wide uppercase">{data.firma.adi}</span>
|
||
</div>
|
||
<p className="max-w-xs leading-relaxed text-[11px]">
|
||
{t.footerText}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex flex-col sm:flex-row items-center gap-6 font-semibold">
|
||
<a href="#features" className="hover:text-zinc-300">{t.features}</a>
|
||
<a href="#simulator" className="hover:text-zinc-300">{t.simulator}</a>
|
||
<a href="#pricing" className="hover:text-zinc-300">{t.pricing}</a>
|
||
<span>·</span>
|
||
<span>{data.firma.sehir}</span>
|
||
</div>
|
||
</footer>
|
||
|
||
{/* ── INTERACTIVE SCRIPTS MODAL (SANDBOX INTEGRATOR) ── */}
|
||
<AnimatePresence>
|
||
{showModal && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-md"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
>
|
||
<motion.div
|
||
className="bg-[#0b0b0f] border border-zinc-800 rounded-3xl p-6 sm:p-8 max-w-lg w-full relative shadow-2xl text-left"
|
||
initial={{ scale: 0.95, y: 15 }}
|
||
animate={{ scale: 1, y: 0 }}
|
||
exit={{ scale: 0.95, y: 15 }}
|
||
>
|
||
{/* Close Button */}
|
||
<button
|
||
onClick={() => {
|
||
setShowModal(false);
|
||
setGeneratedScript("");
|
||
setUserUrl("");
|
||
setUserEmail("");
|
||
}}
|
||
className="absolute top-6 right-6 w-8 h-8 rounded-full bg-zinc-950 border border-zinc-800/80 flex items-center justify-center text-zinc-500 hover:text-white transition-all cursor-pointer font-bold text-xs"
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
{/* Title & Badge */}
|
||
<div className="w-12 h-12 rounded-xl bg-violet-600/10 border border-violet-500/20 flex items-center justify-center text-lg mb-6">
|
||
🧬
|
||
</div>
|
||
|
||
<h3 className="text-xl font-bold text-white uppercase tracking-wider mb-2">
|
||
{t.tryModalTitle}
|
||
</h3>
|
||
<p className="text-zinc-400 text-xs leading-relaxed mb-6">
|
||
{t.tryModalDesc}
|
||
</p>
|
||
|
||
{/* Generative Embed Code Form */}
|
||
{generatedScript === "" ? (
|
||
<form onSubmit={handleGenerateScript} className="space-y-4">
|
||
<div>
|
||
<label className="block text-[9px] font-black text-zinc-500 mb-1.5 uppercase tracking-widest">{t.urlLabel}</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
value={userUrl}
|
||
onChange={(e) => setUserUrl(e.target.value)}
|
||
placeholder="e.g., https://yourbrand.com"
|
||
className="w-full px-4 py-3 rounded-xl border border-zinc-800 bg-zinc-950 text-xs text-white placeholder-zinc-700 focus:outline-none focus:border-violet-500 transition-all font-semibold"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-[9px] font-black text-zinc-500 mb-1.5 uppercase tracking-widest">{t.emailLabel}</label>
|
||
<input
|
||
type="email"
|
||
required
|
||
value={userEmail}
|
||
onChange={(e) => setUserEmail(e.target.value)}
|
||
placeholder="e.g., tech@yourbrand.com"
|
||
className="w-full px-4 py-3 rounded-xl border border-zinc-800 bg-zinc-950 text-xs text-white placeholder-zinc-700 focus:outline-none focus:border-violet-500 transition-all font-semibold"
|
||
/>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
disabled={isGenerating}
|
||
className="w-full bg-gradient-to-r from-violet-600 to-indigo-600 hover:from-violet-500 hover:to-indigo-500 text-white font-extrabold text-[10px] tracking-wider uppercase py-4.5 rounded-xl transition-all cursor-pointer mt-4 flex items-center justify-center gap-2"
|
||
>
|
||
{isGenerating && (
|
||
<svg className="animate-spin h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||
</svg>
|
||
)}
|
||
{t.generateBtn}
|
||
</button>
|
||
</form>
|
||
) : (
|
||
// Display Embed Script
|
||
<div className="space-y-4">
|
||
<h4 className="text-xs font-bold text-teal-400 uppercase tracking-wider flex items-center gap-1.5">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-teal-400 animate-pulse" />
|
||
{t.tokenTitle}
|
||
</h4>
|
||
<p className="text-zinc-500 text-[11px] leading-relaxed">
|
||
{t.tokenDesc}
|
||
</p>
|
||
|
||
<div className="bg-black border border-zinc-900 rounded-xl p-4 font-mono text-[10px] text-zinc-400 relative overflow-hidden select-all leading-normal whitespace-pre-wrap text-left">
|
||
{generatedScript}
|
||
</div>
|
||
|
||
<div className="flex gap-3 mt-6">
|
||
<button
|
||
onClick={handleCopyCode}
|
||
className="flex-1 bg-violet-600 hover:bg-violet-500 text-white font-extrabold text-[10px] tracking-wider uppercase py-4 rounded-xl transition-all cursor-pointer flex items-center justify-center gap-2"
|
||
>
|
||
{isCopied ? "✓" : "📋"} {isCopied ? t.copied : t.copyBtn}
|
||
</button>
|
||
<button
|
||
onClick={() => {
|
||
setShowModal(false);
|
||
setGeneratedScript("");
|
||
setUserUrl("");
|
||
setUserEmail("");
|
||
}}
|
||
className="border border-zinc-800 bg-zinc-950/40 hover:bg-zinc-900 text-zinc-300 font-extrabold text-[10px] tracking-wider uppercase py-4 px-6 rounded-xl transition-all cursor-pointer"
|
||
>
|
||
{t.closeBtn}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
</div>
|
||
);
|
||
}
|