1144 lines
57 KiB
TypeScript
1144 lines
57 KiB
TypeScript
"use client";
|
||
|
||
import { motion, AnimatePresence } from "framer-motion";
|
||
import { useRef, useState, useEffect } from "react";
|
||
import type { DemoData } from "@/data/demos";
|
||
|
||
const fadeUp = {
|
||
hidden: { opacity: 0, y: 35 },
|
||
show: { opacity: 1, y: 0, transition: { duration: 0.75, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
|
||
};
|
||
|
||
const stagger = {
|
||
hidden: {},
|
||
show: { transition: { staggerChildren: 0.1 } },
|
||
};
|
||
|
||
interface ChatMessage {
|
||
sender: "bot" | "user";
|
||
text: string;
|
||
}
|
||
|
||
const translations = {
|
||
tr: {
|
||
navSim: "AI Simülatörü",
|
||
navInteg: "Entegrasyonlar",
|
||
navFeatures: "Özellikler",
|
||
navReviews: "Yorumlar",
|
||
navPricing: "Planlar",
|
||
signUp: "Kayıt Ol",
|
||
badge: "VAATBOT COSMIC AI SAAS",
|
||
heroTitlePart1: "SİTENİZE",
|
||
heroTitlePart2: "AI CHATBOT",
|
||
heroTitlePart3: "EKLEYİN",
|
||
heroDesc: "Özel yapay zekayı 2 dakikadan kısa sürede sitenize entegre edin. Cybernetic botlarımız veri tabanlarınızdan, dökümanlarınızdan ve web bağlantılarınızdan doğrudan öğrenerek %100 doğru yanıtları garanti eder.",
|
||
accuracyLabel: "HATA PAYI %0",
|
||
accuracyText: "Zendesk, Notion ve web sitenizle eğitilerek sıfır halüsinasyon sağlar.",
|
||
speedLabel: "3x DAHA HIZLI",
|
||
speedText: "Slack, WhatsApp ve Web widget'larında 600ms altında yanıt süresi.",
|
||
bounceLabel: "-20% ÇIKMA ORANI",
|
||
bounceText: "Ziyaretçileri sayfada tutarak abone dönüşümlerini anında ikiye katlar.",
|
||
getStartedFree: "Ücretsiz Başla",
|
||
integrations: "Entegrasyonlar",
|
||
platformsTitle: "Esnek Platformlar",
|
||
platformsHeader: "ESNEK ENTEGRASYONLAR",
|
||
platformsDesc: "Kanalları sorunsuz bir şekilde değiştirin. Yapay zeka sohbet robotunuzu tüm platformlara dakikalar içinde kurun.",
|
||
tabWidget: "Web Chat Widget'ı",
|
||
tabSlack: "Slack Çalışma Alanı",
|
||
tabWhatsapp: "WhatsApp Business",
|
||
scriptTitle: "HTML ENTEGRASYON KODU",
|
||
scriptDesc: "Tek yapmanız gereken bu hafif script etiketini sitenizin gövdesine eklemektir. Tarayıcı önbelleğini destekler ve sıfır gecikme yükü getirir.",
|
||
featuresTitle: "Premium Değerler",
|
||
featuresHeader: "TEMEL ÖZELLİKLER",
|
||
featuresDesc: "Binlerce SaaS girişimi ve kurumsal destek platformunun VaatBot altyapısını tercih etme nedenleri.",
|
||
reviewsTitle: "Değerlendirmeler",
|
||
reviewsHeader: "MUTLU MÜŞTERİLER",
|
||
reviewsDesc: "Şirket kurucularının ve tasarımcıların otomatik destek sistemlerimiz hakkındaki yorumları.",
|
||
pricingTitle: "Karşılaştırmalı Planlar",
|
||
pricingHeader: "FİYATLANDIRMA PLANLARI",
|
||
pricingDesc: "Ziyaretçiden aboneye dönüşüm akışını hızlandıracak şeffaf fiyatlandırma yapısı.",
|
||
planFree: "Ücretsiz Paket",
|
||
planFreeDesc: "Temel bir sohbet robotu eklemek isteyen girişimler için. 5 adede kadar web bağlantısını indeksler.",
|
||
planGrowth: "Büyüme Paketi",
|
||
planGrowthDesc: "Ölçeklenen işletmeler ve öncelikli destek için. Notion, Slack entegrasyonu ve özel markalama içerir.",
|
||
planEnt: "Kurumsal Paket",
|
||
planEntDesc: "KVKK uyumluluğu, şirket içi veri tabanları ve anlık senkronizasyon gerektiren kurumsal platformlar için.",
|
||
bestValue: "EN POPÜLER",
|
||
choosePlan: "PLANI SEÇ",
|
||
month: "AYLIK",
|
||
footerDesc: "Notion veri tabanlarını, API belgelerini ve destek makalelerini indeksleyerek 600 milisaniyenin altında doğrulanmış yanıt garantisi sunan derin kozmik AI sohbet asistanı.",
|
||
privacyRegs: "Gizlilik Sözleşmesi",
|
||
termsStay: "Kullanım Şartları",
|
||
dismiss: "KAPAT",
|
||
startIntegration: "ENTEGRASYONU BAŞLAT",
|
||
sandboxToken: "Sandbox Anahtarı Oluşturuldu",
|
||
webLabel: "Web Sitesi Adresi",
|
||
emailLabel: "İletişim E-Postası",
|
||
generate: "KODLARI ÜRET",
|
||
welcomeMsg: "Merhaba! VaatBot AI'a hoş geldiniz. Bugün size nasıl yardımcı olabilirim?",
|
||
welcomeHelp: "Bana 50+ dil desteğimizi, 600ms altındaki yanıt hızımızı veya %100 doğruluk oranımızı sorabilirsiniz!",
|
||
botTyping: "Yazıyor...",
|
||
inputPlaceholder: "Doğruluk, fiyatlar veya diller hakkında sorun...",
|
||
readyToSupercharge: "DESTEK SİSTEMİNİZİ YAPAY ZEKA İLE GÜÇLENDİRMEYE HAZIR MISINIZ?",
|
||
startIntegBtn: "ENTEGRASYONU ŞİMDİ BAŞLAT",
|
||
customizerTitle: "Özel Markalama",
|
||
customizerDesc: "Renkleri, isimleri, avatarları ve karşılama mesajlarını kurumsal kimliğinize göre tamamen uyarlayın.",
|
||
languagesTitle: "50+ Dil Desteği",
|
||
languagesDesc: "İngilizce, İspanyolca, Türkçe ve daha fazlasını kapsayan 50'den fazla dilde müşterilerinizle akıcı konuşun.",
|
||
widgetsTitle: "Esnek Widget",
|
||
widgetsDesc: "Temiz kopyala-yapıştır script etiketimizi veya özelleştirilebilir iframe kapsayıcılarımızı saniyeler içinde kurun.",
|
||
industriesTitle: "Tüm Sektörler",
|
||
industriesDesc: "E-ticaret, SaaS, Emlak, Sağlık Klinikleri ve Müşteri Destek kanalları için yüksek düzeyde optimize edilmiştir.",
|
||
},
|
||
en: {
|
||
navSim: "AI Simulator",
|
||
navInteg: "Integrations",
|
||
navFeatures: "Core Features",
|
||
navReviews: "Reviews",
|
||
navPricing: "Plans",
|
||
signUp: "Sign Up",
|
||
badge: "VAATBOT COSMIC AI SAAS",
|
||
heroTitlePart1: "ADD FREE",
|
||
heroTitlePart2: "AI CHATBOT",
|
||
heroTitlePart3: "TO YOUR SITE",
|
||
heroDesc: "Deploy custom intelligence in under 2 minutes. Our verified cybernetic bots learn directly from your databases, documents, and web links to guarantee 100% accurate responses.",
|
||
accuracyLabel: "0% ERROR RATE",
|
||
accuracyText: "Trained on Zendesk, Notion, and your website URLs to achieve zero hallucination.",
|
||
speedLabel: "3x FASTER CHAT",
|
||
speedText: "Sub-600ms latency responses across Slack, WhatsApp, and Web widgets.",
|
||
bounceLabel: "-20% BOUNCE RATE",
|
||
bounceText: "Keep visitors deeply engaged and instantly double visitor-to-lead subscription rates.",
|
||
getStartedFree: "Get Started Free",
|
||
integrations: "Integrations",
|
||
platformsTitle: "Flexible Platforms",
|
||
platformsHeader: "FLEXIBLE INTEGRATIONS",
|
||
platformsDesc: "Switch channels seamlessly. Deploy custom chat intelligence in minutes across all platforms.",
|
||
tabWidget: "Web Chat Widget",
|
||
tabSlack: "Slack Workspace",
|
||
tabWhatsapp: "WhatsApp Business",
|
||
scriptTitle: "HTML INTEGRATION SCRIPT",
|
||
scriptDesc: "Simply copy and paste this lightweight async JS script tag into your body. Highly optimized with zero load latency.",
|
||
featuresTitle: "Premium Values",
|
||
featuresHeader: "CORE FEATURES",
|
||
featuresDesc: "Why thousands of SaaS startups and corporate support platforms rely on our bot layers.",
|
||
reviewsTitle: "Reviews",
|
||
reviewsHeader: "HAPPY CLIENTS",
|
||
reviewsDesc: "Hear what designers and company founders say about their automated support loops.",
|
||
pricingTitle: "Comparative Plans",
|
||
pricingHeader: "PRICING PLANS",
|
||
pricingDesc: "Clear pricing structure designed to supercharge visitor-to-lead subscription streams.",
|
||
planFree: "Free Tier",
|
||
planFreeDesc: "For startups looking to add a basic custom widget. Index up to 5 web links.",
|
||
planGrowth: "Growth Tier",
|
||
planGrowthDesc: "For scaling businesses wanting priority support. Index Notion, Slack threads & custom branding.",
|
||
planEnt: "Enterprise Tier",
|
||
planEntDesc: "For corporate platforms requiring GDP alignment, on-prem databases, and instant sync.",
|
||
bestValue: "BEST VALUES",
|
||
choosePlan: "CHOOSE PLAN",
|
||
month: "MONTH",
|
||
footerDesc: "Deep cosmic cybernetic AI chatbot layer indexing Notion databases and Zendesk support lines with sub-second response guarantees.",
|
||
privacyRegs: "Privacy Policy",
|
||
termsStay: "Terms of Service",
|
||
dismiss: "DISMISS",
|
||
startIntegration: "START INTEGRATION",
|
||
sandboxToken: "Free Sandbox Token Issued",
|
||
webLabel: "Website URL",
|
||
emailLabel: "Contact Email",
|
||
generate: "GENERATE SCRIPTS",
|
||
welcomeMsg: "Hello! Welcome to VaatBot AI. How can I help you today?",
|
||
welcomeHelp: "Ask me about my 50+ languages support, our sub-second response times, or how we achieve 100% accuracy!",
|
||
botTyping: "Typing...",
|
||
inputPlaceholder: "Ask about accuracy, prices, or languages...",
|
||
readyToSupercharge: "READY TO SUPERCHARGE YOUR SUPPORT WITH AI?",
|
||
startIntegBtn: "START INTEGRATION NOW",
|
||
customizerTitle: "Brand Customizer",
|
||
customizerDesc: "Tailor colors, names, avatars, and greetings to fully respect your corporate branding system.",
|
||
languagesTitle: "50+ Languages",
|
||
languagesDesc: "Speaks your customer's native tongue fluently, spanning English, Spanish, Turkish, and more.",
|
||
widgetsTitle: "Flexible Widget",
|
||
widgetsDesc: "Deploy in seconds using our clean copy-paste JS script tag or customizable iframe containers.",
|
||
industriesTitle: "Any Industry",
|
||
industriesDesc: "Highly optimized for E-commerce, SaaS, Real Estate, Health Clinics, and Customer Support channels.",
|
||
}
|
||
};
|
||
|
||
export default function ChatbotTemplate({ data }: { data: DemoData }) {
|
||
const { firma, istatistikler = [], hizmetler = [], yorumlar = [] } = data;
|
||
const [showBookingModal, setShowBookingModal] = useState(false);
|
||
const [lang, setLang] = useState<"tr" | "en">("tr");
|
||
const [preloader, setPreloader] = useState(true);
|
||
|
||
const t = translations[lang];
|
||
|
||
// Live Chat Simulator State
|
||
const [messages, setMessages] = useState<ChatMessage[]>([]);
|
||
const [inputVal, setInputVal] = useState("");
|
||
const [isTyping, setIsTyping] = useState(false);
|
||
const chatEndRef = useRef<HTMLDivElement>(null);
|
||
|
||
// Platform Integration Selector State
|
||
const [activePlatform, setActivePlatform] = useState<"widget" | "slack" | "whatsapp">("widget");
|
||
|
||
// Initial welcome messages
|
||
useEffect(() => {
|
||
setMessages([
|
||
{ sender: "bot", text: t.welcomeMsg },
|
||
{ sender: "bot", text: t.welcomeHelp },
|
||
]);
|
||
}, [lang, t.welcomeMsg, t.welcomeHelp]);
|
||
|
||
// Lenis Smooth Scroll Integration
|
||
useEffect(() => {
|
||
let lenis: any;
|
||
import("@studio-freight/lenis").then(({ default: Lenis }) => {
|
||
lenis = new Lenis({ duration: 1.2, easing: (x: number) => Math.min(1, 1.001 - Math.pow(2, -10 * x)) });
|
||
function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
|
||
requestAnimationFrame(raf);
|
||
});
|
||
return () => lenis?.destroy();
|
||
}, []);
|
||
|
||
// Preloader Curtain Timer
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
setPreloader(false);
|
||
}, 1500);
|
||
return () => clearTimeout(timer);
|
||
}, []);
|
||
|
||
// Scroll chat to bottom on new messages
|
||
useEffect(() => {
|
||
chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||
}, [messages, isTyping]);
|
||
|
||
// Handles Simulated Bot Responses
|
||
const handleSendMessage = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
if (!inputVal.trim() || isTyping) return;
|
||
|
||
const userText = inputVal;
|
||
setMessages((prev) => [...prev, { sender: "user", text: userText }]);
|
||
setInputVal("");
|
||
setIsTyping(true);
|
||
|
||
setTimeout(() => {
|
||
let botResponse = "";
|
||
const lower = userText.toLowerCase();
|
||
|
||
if (lower.includes("lang") || lower.includes("dil") || lower.includes("lisan")) {
|
||
botResponse = lang === "tr"
|
||
? "50'den fazla dili akıcı bir şekilde destekliyorum! Müşterinin Türkçe, İngilizce veya İspanyolca konuştuğunu otomatik olarak algılayıp gerçek zamanlı çeviri yaparım."
|
||
: "I support 50+ languages fluently! I automatically detect if a customer speaks Turkish, English, Spanish, or German, and translate in real-time.";
|
||
} else if (lower.includes("price") || lower.includes("fiyat") || lower.includes("ücret") || lower.includes("plan")) {
|
||
botResponse = lang === "tr"
|
||
? "Hemen başlamanız için ücretsiz bir sürümümüz ($0) ve özel markalama, Notion entegrasyonu sunan bir Büyüme Paketimiz ($49/ay) mevcuttur!"
|
||
: "We have a Free Tier ($0) to get you started instantly, and a Growth Tier ($49/mo) which adds custom branding and support for up to 10k monthly active chats!";
|
||
} else if (lower.includes("accuracy") || lower.includes("doğru") || lower.includes("hata") || lower.includes("güven")) {
|
||
botResponse = lang === "tr"
|
||
? "Sıfır hata garantisi veriyoruz! Notion dökümanlarınızı, destek makalelerinizi ve şirket içi bağlantılarınızı indeksleyerek yalnızca doğrulanmış gerçeklerle yanıt veririm."
|
||
: "We guarantee 100% accuracy! By indexing your custom website URLs, PDF files, and Zendesk support hubs, we answer only using verified facts, ensuring zero hallucinations.";
|
||
} else {
|
||
botResponse = lang === "tr"
|
||
? "Harika bir soru! Veri tabanlarınıza ve API belgelerinize doğrudan bağlanıp doğrulanmış şirket verilerinizle 600 milisaniyenin altında yanıt veriyorum."
|
||
: "That is a great question! VaatBot AI connects directly to your databases, Notion files, and API docs to respond with verified company facts in under 600 milliseconds.";
|
||
}
|
||
|
||
setMessages((prev) => [...prev, { sender: "bot", text: botResponse }]);
|
||
setIsTyping(false);
|
||
}, 1200);
|
||
};
|
||
|
||
// Localized statistics label mappings
|
||
const getLocalizedStatLabel = (deger: string) => {
|
||
if (deger.includes("Accuracy")) return t.accuracyLabel;
|
||
if (deger.includes("Faster")) return t.speedLabel;
|
||
return t.bounceLabel;
|
||
};
|
||
|
||
const getLocalizedStatText = (deger: string) => {
|
||
if (deger.includes("Accuracy")) return t.accuracyText;
|
||
if (deger.includes("Faster")) return t.speedText;
|
||
return t.bounceText;
|
||
};
|
||
|
||
// Custom vector icons for chatbot values (No raw emojis)
|
||
const getIconSvg = (name: string) => {
|
||
switch (name) {
|
||
case "languages":
|
||
return (
|
||
<svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21a9.004 9.004 0 0 1-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9m0 18c-2.485 0-4.5-4.03-4.5-9s2.015-9 4.5-9" />
|
||
</svg>
|
||
);
|
||
case "customizer":
|
||
return (
|
||
<svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.53 16.122a3 3 0 0 0-2.22 4.582M18.47 16.122a3 3 0 0 1 2.22 4.582M9.3 8.598a6.002 6.002 0 0 0 0 6.804m5.4 0a6.002 6.002 0 0 0 0-6.804M12 6.75a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 0v10.5m0 0a3 3 0 1 1-6 0m6 0a3 3 0 1 0 6 0" />
|
||
</svg>
|
||
);
|
||
case "widgets":
|
||
return (
|
||
<svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
|
||
</svg>
|
||
);
|
||
case "industries":
|
||
return (
|
||
<svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18" />
|
||
</svg>
|
||
);
|
||
default:
|
||
return (
|
||
<svg className="w-7 h-7 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||
</svg>
|
||
);
|
||
}
|
||
};
|
||
|
||
const getBentoServiceText = (ikon: string) => {
|
||
switch (ikon) {
|
||
case "languages": return { title: t.languagesTitle, desc: t.languagesDesc };
|
||
case "customizer": return { title: t.customizerTitle, desc: t.customizerDesc };
|
||
case "widgets": return { title: t.widgetsTitle, desc: t.widgetsDesc };
|
||
default: return { title: t.industriesTitle, desc: t.industriesDesc };
|
||
}
|
||
};
|
||
|
||
const css = `
|
||
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;700&display=swap');
|
||
|
||
:root {
|
||
--color-neon-cyan: #00E5FF;
|
||
--color-neon-pink: #FF007A;
|
||
--color-neon-purple: #BD00FF;
|
||
--color-space-black: #080710;
|
||
--color-space-card: rgba(18, 20, 30, 0.45);
|
||
--color-space-border: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.font-sora-premium {
|
||
font-family: 'Sora', sans-serif;
|
||
}
|
||
|
||
.font-mono-code {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
.bg-mesh-cosmic {
|
||
background-image:
|
||
radial-gradient(circle at 10% 20%, rgba(0, 229, 255, 0.04) 0%, transparent 45%),
|
||
radial-gradient(circle at 90% 80%, rgba(255, 0, 122, 0.03) 0%, transparent 50%),
|
||
linear-gradient(rgba(255, 255, 255, 0.005) 1px, transparent 1px),
|
||
linear-gradient(90deg, rgba(255, 255, 255, 0.005) 1px, transparent 1px);
|
||
background-size: 100% 100%, 100% 100%, 60px 60px, 60px 60px;
|
||
}
|
||
|
||
.neon-cyan-glow {
|
||
box-shadow: 0 0 30px rgba(0, 229, 255, 0.15);
|
||
}
|
||
|
||
.text-gradient-cyan-pink {
|
||
background: linear-gradient(90deg, #00E5FF, #FF007A);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.hero-title-clamp {
|
||
font-size: clamp(34px, 5.5vw, 85px);
|
||
letter-spacing: -0.02em;
|
||
line-height: 0.95;
|
||
}
|
||
`;
|
||
|
||
return (
|
||
<>
|
||
<style>{css}</style>
|
||
|
||
{/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
|
||
<AnimatePresence>
|
||
{preloader && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 bg-[#080710] flex flex-col items-center justify-center p-6"
|
||
exit={{
|
||
clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)",
|
||
transition: { duration: 0.95, ease: [0.16, 1, 0.3, 1] }
|
||
}}
|
||
>
|
||
<div className="max-w-md text-center space-y-6">
|
||
<motion.span
|
||
className="text-[9px] font-mono-code tracking-[4px] uppercase text-[#00E5FF] block"
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5 }}
|
||
>
|
||
VAATBOT CYBERNETICS
|
||
</motion.span>
|
||
<div className="h-[1px] w-48 bg-white/10 mx-auto relative overflow-hidden">
|
||
<motion.div
|
||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-[#00E5FF] to-[#FF007A]"
|
||
initial={{ width: "0%" }}
|
||
animate={{ width: "100%" }}
|
||
transition={{ duration: 1.2, ease: "easeInOut" }}
|
||
/>
|
||
</div>
|
||
<motion.h2
|
||
className="font-sora-premium text-white/50 text-xs tracking-wider uppercase"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ delay: 0.4, duration: 0.5 }}
|
||
>
|
||
COSMIC AI PROTOXY
|
||
</motion.h2>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
<div className="bg-[#080710] text-white min-h-screen font-sora-premium selection:bg-[#00E5FF] selection:text-black overflow-hidden relative pb-20">
|
||
|
||
{/* Ambient mesh grid */}
|
||
<div className="absolute inset-0 bg-mesh-cosmic pointer-events-none z-0" />
|
||
|
||
{/* Ambient Orbs */}
|
||
<div className="absolute top-[10%] right-[-10%] w-[600px] h-[600px] bg-[#BD00FF]/4 blur-[130px] rounded-full pointer-events-none z-0" />
|
||
<div className="absolute bottom-[10%] left-[-15%] w-[600px] h-[600px] bg-[#00E5FF]/3 blur-[140px] rounded-full pointer-events-none z-0" />
|
||
|
||
{/* ── FLOATING CONCEPT BANNER ── */}
|
||
<div className="fixed bottom-4 left-4 z-40 bg-[#12141E]/90 backdrop-blur-md border border-white/10 px-4 py-2.5 rounded-xl shadow-2xl flex items-center gap-2.5 max-w-sm pointer-events-none select-none">
|
||
<div className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-pulse" />
|
||
<span className="text-[9px] font-mono-code uppercase tracking-[1.5px] text-white/90">
|
||
{lang === "tr" ? "Bu web sitesi Ayris Tech tarafından hazırlanmış bir konsept çalışmasıdır." : "This website is a premium concept prototype designed by Ayris Tech."}
|
||
</span>
|
||
</div>
|
||
|
||
{/* ── FLOATING GLASS HEADER ── */}
|
||
<motion.header
|
||
className="fixed top-4 left-4 right-4 z-50 px-4"
|
||
initial={{ y: -80, opacity: 0 }}
|
||
animate={{ y: 0, opacity: 1 }}
|
||
transition={{ duration: 0.85, ease: [0.16, 1, 0.3, 1] }}
|
||
>
|
||
<div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-white/[0.03] backdrop-blur-2xl border border-white/10 rounded-2xl shadow-[0_15px_35px_rgba(0,0,0,0.6)]">
|
||
{/* Logo */}
|
||
<a href="#" className="flex items-center gap-2.5 group">
|
||
<div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-[#00E5FF] to-[#BD00FF] flex items-center justify-center shadow-[0_0_15px_rgba(0,229,255,0.3)] transition-transform group-hover:scale-105">
|
||
<svg className="w-5 h-5 fill-black" viewBox="0 0 24 24">
|
||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
|
||
</svg>
|
||
</div>
|
||
<span className="text-lg font-black tracking-wider text-white font-mono-code uppercase">
|
||
VAAT<span className="text-[#00E5FF]">BOT</span>
|
||
</span>
|
||
</a>
|
||
|
||
{/* Navigation Links */}
|
||
<nav className="hidden lg:flex items-center gap-8">
|
||
{[
|
||
{ label: t.navSim, href: "#simulator-sandbox" },
|
||
{ label: t.navInteg, href: "#integrations" },
|
||
{ label: t.navFeatures, href: "#features" },
|
||
{ label: t.navReviews, href: "#testimonials" },
|
||
{ label: t.navPricing, href: "#pricing" }
|
||
].map(item => (
|
||
<a
|
||
key={item.label}
|
||
href={item.href}
|
||
className="text-[10px] font-bold tracking-[1.5px] uppercase text-white/60 hover:text-[#00E5FF] transition-colors relative py-1 cursor-pointer group"
|
||
>
|
||
{item.label}
|
||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#00E5FF] transition-all group-hover:w-full" />
|
||
</a>
|
||
))}
|
||
</nav>
|
||
|
||
{/* Language Selector + Signup Button */}
|
||
<div className="flex items-center gap-4">
|
||
{/* Language Switcher */}
|
||
<div className="flex items-center gap-1 bg-white/5 border border-white/10 rounded-xl p-1 shrink-0">
|
||
<button
|
||
onClick={() => setLang("tr")}
|
||
className={`text-[9px] font-mono-code px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "tr" ? "bg-white text-black shadow-sm" : "text-white/60 hover:text-white"
|
||
}`}
|
||
>
|
||
TR
|
||
</button>
|
||
<button
|
||
onClick={() => setLang("en")}
|
||
className={`text-[9px] font-mono-code px-2 py-1.5 rounded-lg transition-all cursor-pointer ${
|
||
lang === "en" ? "bg-white text-black shadow-sm" : "text-white/60 hover:text-white"
|
||
}`}
|
||
>
|
||
EN
|
||
</button>
|
||
</div>
|
||
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="text-[10px] font-black tracking-[2px] uppercase text-black bg-[#00E5FF] hover:bg-white px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_5px_15px_rgba(0,229,255,0.25)] hidden sm:block"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.signUp}
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</motion.header>
|
||
|
||
{/* ── HERO & INTERACTIVE SANDBOX SECTION ── */}
|
||
<section id="simulator-sandbox" className="relative min-h-screen pt-32 pb-20 flex items-center z-10 px-6">
|
||
<div className="max-w-7xl mx-auto w-full">
|
||
<div className="grid lg:grid-cols-12 gap-16 items-center">
|
||
|
||
{/* Left Column: Heading and high-impact metric counters */}
|
||
<motion.div
|
||
className="lg:col-span-6 z-20"
|
||
variants={stagger}
|
||
initial="hidden"
|
||
animate="show"
|
||
>
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="inline-flex items-center gap-2 text-[9px] font-mono-code tracking-widest text-[#00E5FF] mb-6 bg-[#00E5FF]/10 border border-[#00E5FF]/20 px-4 py-2 rounded-full"
|
||
>
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-pulse" />
|
||
{t.badge}
|
||
</motion.div>
|
||
|
||
<motion.h1
|
||
variants={fadeUp}
|
||
className="font-sora-premium font-black text-white mb-6 uppercase hero-title-clamp"
|
||
>
|
||
{t.heroTitlePart1}
|
||
<br />
|
||
<span className="text-gradient-cyan-pink">{t.heroTitlePart2}</span>
|
||
<br />
|
||
{t.heroTitlePart3}
|
||
</motion.h1>
|
||
|
||
<motion.p
|
||
variants={fadeUp}
|
||
className="text-white/60 text-xs lg:text-sm leading-relaxed max-w-xl mb-10 font-medium"
|
||
>
|
||
{t.heroDesc}
|
||
</motion.p>
|
||
|
||
{/* Accuracy & response blocks */}
|
||
<motion.div
|
||
variants={fadeUp}
|
||
className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10"
|
||
>
|
||
{istatistikler.map((stat, sIdx) => (
|
||
<div key={sIdx} className="bg-white/[0.02] border border-white/5 p-5 rounded-2xl flex flex-col justify-between">
|
||
<div className="text-[#00E5FF] font-mono-code font-black text-sm mb-2">{getLocalizedStatLabel(stat.etiket)}</div>
|
||
<div className="text-white/50 text-[10px] leading-relaxed font-semibold">{getLocalizedStatText(stat.etiket)}</div>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
|
||
{/* Call-to-actions */}
|
||
<motion.div variants={fadeUp} className="flex gap-4">
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="px-8 py-4.5 rounded-xl bg-[#00E5FF] hover:bg-white text-black font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(0,229,255,0.3)] cursor-pointer"
|
||
whileHover={{ scale: 1.02 }}
|
||
>
|
||
{t.getStartedFree}
|
||
</motion.button>
|
||
<a
|
||
href="#integrations"
|
||
className="px-8 py-4.5 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-black text-[10px] tracking-[2px] uppercase transition-all cursor-pointer text-center flex items-center justify-center shrink-0"
|
||
>
|
||
{t.integrations}
|
||
</a>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right Column: Live Chat Sandbox & Flying Robot Mascot */}
|
||
<div className="lg:col-span-6 relative flex flex-col justify-center items-center">
|
||
|
||
{/* Floating Robot mascot overlap */}
|
||
<motion.div
|
||
className="absolute -top-16 -left-12 z-20 w-28 h-28 hidden md:block"
|
||
animate={{ y: [0, -10, 0] }}
|
||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
|
||
>
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src="/chatbot_mascot.png"
|
||
alt="VaatBot AI 3D mascot"
|
||
className="w-full h-full object-contain filter drop-shadow-[0_10px_20px_rgba(0,229,255,0.2)]"
|
||
/>
|
||
</motion.div>
|
||
|
||
{/* Chatbox Sandbox Container */}
|
||
<motion.div
|
||
className="w-full max-w-md bg-[#12141E]/40 backdrop-blur-2xl border border-white/10 rounded-3xl overflow-hidden shadow-[0_20px_50px_rgba(0,0,0,0.5)] neon-cyan-glow relative"
|
||
initial={{ opacity: 0, scale: 0.95 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8 }}
|
||
>
|
||
{/* Top Bar */}
|
||
<div className="px-6 py-4 bg-white/[0.04] border-b border-white/5 flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||
<div>
|
||
<div className="font-mono-code text-[11px] font-black tracking-wide text-white uppercase">VAATBOT SANDBOX</div>
|
||
<div className="text-[8px] text-white/40 uppercase tracking-widest font-bold">100% ACCURACY ACTIVE</div>
|
||
</div>
|
||
</div>
|
||
{/* Visual platform icon */}
|
||
<div className="w-8 h-8 rounded-lg bg-[#00E5FF]/10 flex items-center justify-center shrink-0">
|
||
<span className="text-xs">🤖</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Message Stream */}
|
||
<div className="h-72 p-6 overflow-y-auto space-y-4 text-xs font-semibold leading-relaxed">
|
||
{messages.map((msg, mIdx) => (
|
||
<div key={mIdx} className={`flex ${msg.sender === "user" ? "justify-end" : "justify-start"}`}>
|
||
<div className={`max-w-[80%] px-4 py-3 rounded-2xl ${
|
||
msg.sender === "user"
|
||
? "bg-[#00E5FF] text-black font-bold rounded-tr-none shadow-sm"
|
||
: "bg-white/[0.04] border border-white/5 text-white/90 rounded-tl-none"
|
||
}`}>
|
||
{msg.text}
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* Typing Indicator */}
|
||
{isTyping && (
|
||
<div className="flex justify-start">
|
||
<div className="bg-white/[0.04] border border-white/5 px-4 py-3 rounded-2xl rounded-tl-none flex items-center gap-1.5">
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-bounce" />
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-bounce [animation-delay:0.2s]" />
|
||
<span className="w-1.5 h-1.5 rounded-full bg-[#00E5FF] animate-bounce [animation-delay:0.4s]" />
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div ref={chatEndRef} />
|
||
</div>
|
||
|
||
{/* Input Form */}
|
||
<form onSubmit={handleSendMessage} className="p-4 bg-white/[0.02] border-t border-white/5 flex gap-2">
|
||
<input
|
||
type="text"
|
||
value={inputVal}
|
||
onChange={(e) => setInputVal(e.target.value)}
|
||
placeholder={t.inputPlaceholder}
|
||
className="grow px-4 py-3.5 rounded-xl border border-white/5 bg-[#080710] text-xs text-white placeholder-white/20 focus:outline-none focus:border-[#00E5FF] focus:ring-1 focus:ring-[#00E5FF] font-medium"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
className="w-11 h-11 rounded-xl bg-[#00E5FF] hover:bg-white flex items-center justify-center shrink-0 transition-colors cursor-pointer"
|
||
>
|
||
<svg className="w-4 h-4 fill-black" viewBox="0 0 24 24">
|
||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||
</svg>
|
||
</button>
|
||
</form>
|
||
</motion.div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 2: INTERACTIVE INTEGRATION TOGGLE ── */}
|
||
<section id="integrations" className="py-32 relative z-10 px-6 bg-[#080710] border-t border-white/5">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center max-w-xl mx-auto mb-20">
|
||
<span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.platformsTitle}</span>
|
||
<h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
|
||
{t.platformsHeader}
|
||
</h2>
|
||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||
{t.platformsDesc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Platform Selector Tabs */}
|
||
<div className="flex items-center justify-center gap-4 mb-16 flex-wrap">
|
||
{[
|
||
{ id: "widget", label: t.tabWidget, icon: "🌐" },
|
||
{ id: "slack", label: t.tabSlack, icon: "💬" },
|
||
{ id: "whatsapp", label: t.tabWhatsapp, icon: "📱" },
|
||
].map((p) => (
|
||
<button
|
||
key={p.id}
|
||
onClick={() => setActivePlatform(p.id as any)}
|
||
className={`px-6 py-3.5 rounded-xl border text-[10px] font-black uppercase tracking-widest transition-all cursor-pointer flex items-center gap-2.5 ${
|
||
activePlatform === p.id
|
||
? "bg-[#00E5FF] text-black border-[#00E5FF] shadow-[0_4px_12px_rgba(0,229,255,0.2)]"
|
||
: "bg-white/[0.02] text-white/60 border-white/5 hover:border-white/10"
|
||
}`}
|
||
>
|
||
<span>{p.icon}</span>
|
||
{p.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
{/* Preview Area container */}
|
||
<div className="max-w-3xl mx-auto bg-white/[0.02] border border-white/5 rounded-3xl p-6 md:p-8 shadow-2xl min-h-[380px] flex items-center justify-center">
|
||
<AnimatePresence mode="wait">
|
||
{activePlatform === "widget" && (
|
||
<motion.div
|
||
key="widget"
|
||
initial={{ opacity: 0, y: 15 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -15 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="w-full text-center space-y-6"
|
||
>
|
||
<div className="max-w-md mx-auto bg-white/[0.03] border border-white/10 rounded-2xl p-6 text-left shadow-lg">
|
||
<div className="text-[9px] text-[#00E5FF] font-mono-code font-black uppercase tracking-widest mb-3">{t.scriptTitle}</div>
|
||
<code className="block text-white/50 text-[10px] font-mono-code leading-relaxed bg-[#080710] p-4 rounded-xl overflow-x-auto select-all">
|
||
{`<!-- Copy and paste this into the bottom of your <body> -->
|
||
<script
|
||
src="https://cdn.vaatbot.ai/v1/widget.js"
|
||
data-token="vb_demo_09a3kjl128"
|
||
data-theme="cosmic"
|
||
defer>
|
||
</script>`}
|
||
</code>
|
||
</div>
|
||
<p className="text-white/40 text-xs font-semibold max-w-sm mx-auto">
|
||
{t.scriptDesc}
|
||
</p>
|
||
</motion.div>
|
||
)}
|
||
|
||
{activePlatform === "slack" && (
|
||
<motion.div
|
||
key="slack"
|
||
initial={{ opacity: 0, y: 15 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -15 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="w-full max-w-md bg-[#1B1A24] rounded-2xl border border-white/5 overflow-hidden text-left"
|
||
>
|
||
{/* Slack Header */}
|
||
<div className="bg-[#12111A] px-4 py-3 border-b border-white/5 flex items-center justify-between">
|
||
<div className="font-mono-code text-[10px] font-black uppercase tracking-widest text-[#E01E5A]"># slack-workspace</div>
|
||
<span className="text-[8px] bg-white/10 text-white/60 px-2 py-0.5 rounded-full font-mono-code">Channel Integration</span>
|
||
</div>
|
||
{/* Thread */}
|
||
<div className="p-4 space-y-4 text-xs font-semibold">
|
||
<div className="flex gap-3">
|
||
<div className="w-8 h-8 rounded bg-gradient-to-tr from-[#E01E5A] to-[#36C5F0] flex items-center justify-center text-[10px] shrink-0 font-bold">U</div>
|
||
<div>
|
||
<h4 className="font-bold text-white/80">User <span className="text-[9px] text-white/30 ml-2 font-normal">11:34 AM</span></h4>
|
||
<p className="text-white/60 mt-1">@VaatBot {lang === "tr" ? "doğruluk garantimiz nedir?" : "what is our accuracy guarantee?"}</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-3">
|
||
<div className="w-8 h-8 rounded bg-gradient-to-tr from-[#00E5FF] to-[#BD00FF] flex items-center justify-center text-[10px] shrink-0 font-bold">🤖</div>
|
||
<div>
|
||
<h4 className="font-bold text-[#00E5FF]">VaatBot <span className="text-[8px] bg-[#00E5FF]/10 text-[#00E5FF] px-1.5 py-0.5 rounded font-mono-code ml-2">APP</span></h4>
|
||
<p className="text-white/90 mt-1">
|
||
{lang === "tr"
|
||
? "Yüklenen Notion belgeleriniz, destek dökümanlarınız ve web bağlantılarınız üzerinden doğrudan eğitiliyoruz. Bu sayede kanallarda %100 doğru yanıtları garanti ediyoruz!"
|
||
: "We are trained directly on your uploaded Notion docs, Zendesk files, and web links to guarantee 100% accurate responses in Slack channels!"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{activePlatform === "whatsapp" && (
|
||
<motion.div
|
||
key="whatsapp"
|
||
initial={{ opacity: 0, y: 15 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
exit={{ opacity: 0, y: -15 }}
|
||
transition={{ duration: 0.3 }}
|
||
className="w-full max-w-xs bg-[#0F1E1E] rounded-[36px] border-4 border-white/10 overflow-hidden text-left shadow-2xl relative"
|
||
>
|
||
{/* Phone Header */}
|
||
<div className="bg-[#128C7E] px-6 py-4 flex items-center gap-3">
|
||
<div className="w-7 h-7 rounded-full bg-white/20 flex items-center justify-center font-bold text-xs select-none">🤖</div>
|
||
<div>
|
||
<h4 className="text-xs font-bold text-white leading-tight">VaatBot Business</h4>
|
||
<span className="text-[8px] text-white/60 tracking-wider">online</span>
|
||
</div>
|
||
</div>
|
||
{/* Chat */}
|
||
<div className="p-4 h-64 bg-[#0B1414] overflow-y-auto space-y-4 text-[10px] font-semibold">
|
||
<div className="flex justify-start">
|
||
<div className="bg-white/5 text-white/90 px-3 py-2 rounded-xl rounded-tl-none max-w-[85%]">
|
||
{lang === "tr" ? "Merhaba! Destek sorunuzu iletin." : "Hello! Ask me any support question."}
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-end">
|
||
<div className="bg-[#056162] text-white px-3 py-2 rounded-xl rounded-tr-none max-w-[85%]">
|
||
{lang === "tr" ? "Destek biletini İspanyolca'ya çevir." : "Translate the customer support ticket to Spanish."}
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-start">
|
||
<div className="bg-white/5 text-white/90 px-3 py-2 rounded-xl rounded-tl-none max-w-[85%]">
|
||
{lang === "tr" ? "¡Por supuesto! Destek bileti İspanyolca'ya çevrilerek iletildi." : "¡Por supuesto! The support ticket has been translated and dispatched."}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── BENTO FEATURES GRID ── */}
|
||
<section id="features" className="py-28 relative z-10 px-6 bg-[#080710]/80 border-t border-white/5">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center max-w-xl mx-auto mb-20">
|
||
<span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.featuresTitle}</span>
|
||
<h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
|
||
{t.featuresHeader}
|
||
</h2>
|
||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||
{t.featuresDesc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Bento Grid */}
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{hizmetler.map((hizmet, hIdx) => {
|
||
const item = getBentoServiceText(hizmet.ikon);
|
||
return (
|
||
<motion.div
|
||
key={hIdx}
|
||
className="bg-white/[0.02] rounded-2xl p-8 border border-white/5 hover:border-[#00E5FF]/30 transition-all duration-300 flex flex-col items-center text-center group cursor-default shadow-sm"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: hIdx * 0.1 }}
|
||
whileHover={{ y: -4 }}
|
||
>
|
||
<div className="w-16 h-16 rounded-2xl bg-white/[0.02] border border-white/5 flex items-center justify-center mb-6 transition-transform group-hover:scale-105 group-hover:border-[#00E5FF]/20 shadow-sm">
|
||
{getIconSvg(hizmet.ikon)}
|
||
</div>
|
||
|
||
<h3 className="font-sora-premium font-bold text-base text-white mb-3 tracking-wider uppercase leading-snug">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-white/50 text-[11px] leading-relaxed font-semibold">
|
||
{item.desc}
|
||
</p>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── TESTIMONIALS ── */}
|
||
<section id="testimonials" className="py-28 relative z-10 px-6 bg-[#080710] border-t border-white/5">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center max-w-xl mx-auto mb-20">
|
||
<span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.reviewsTitle}</span>
|
||
<h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
|
||
{t.reviewsHeader}
|
||
</h2>
|
||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||
{t.reviewsDesc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Testimonials 2-Column Grid */}
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
{yorumlar.map((y, yIdx) => (
|
||
<motion.div
|
||
key={yIdx}
|
||
className="bg-white/[0.02] border border-white/5 rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 hover:border-[#00E5FF]/30 group"
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: yIdx * 0.1 }}
|
||
whileHover={{ y: -4 }}
|
||
>
|
||
{/* Rating Stars SVG */}
|
||
<div className="flex gap-1.5 mb-6">
|
||
{[...Array(5)].map((_, starIdx) => (
|
||
<svg key={starIdx} className="w-4 h-4 fill-[#00E5FF]" viewBox="0 0 24 24">
|
||
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
|
||
</svg>
|
||
))}
|
||
</div>
|
||
|
||
<p className="text-white/70 text-xs leading-relaxed italic mb-8 font-semibold">
|
||
“{y.yorum}”
|
||
</p>
|
||
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 rounded-full border border-white/10 flex items-center justify-center text-lg bg-[#080710] select-none font-bold">
|
||
{y.yazar.charAt(0)}
|
||
</div>
|
||
<div>
|
||
<h4 className="font-sora-premium text-white text-xs font-bold uppercase tracking-wider">
|
||
{y.yazar}
|
||
</h4>
|
||
<span className="text-[9px] text-white/40 uppercase tracking-widest font-black font-mono-code">
|
||
{y.tarih}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── SECTION 5: PRICING PLANS (Comparative pricing cards) ── */}
|
||
<section id="pricing" className="py-32 relative z-10 px-6 bg-[#080710]/90 border-t border-white/5">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="text-center max-w-xl mx-auto mb-20">
|
||
<span className="text-[#00E5FF] font-bold text-xs uppercase tracking-widest block mb-2 font-mono-code">{t.pricingTitle}</span>
|
||
<h2 className="font-sora-premium text-3xl lg:text-4xl font-black uppercase text-white tracking-tight">
|
||
{t.pricingHeader}
|
||
</h2>
|
||
<p className="text-white/40 text-xs mt-2 font-medium">
|
||
{t.pricingDesc}
|
||
</p>
|
||
</div>
|
||
|
||
{/* Three Pricing Cards */}
|
||
<div className="grid lg:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||
{[
|
||
{ title: t.planFree, price: "$0", desc: t.planFreeDesc, popular: false },
|
||
{ title: t.planGrowth, price: "$49", desc: t.planGrowthDesc, popular: true },
|
||
{ title: t.planEnt, price: "Custom", desc: t.planEntDesc, popular: false }
|
||
].map((plan, pIdx) => (
|
||
<motion.div
|
||
key={pIdx}
|
||
className={`relative rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 group ${
|
||
plan.popular
|
||
? "bg-white/[0.04] border-2 border-[#00E5FF] shadow-[0_15px_40px_rgba(0,229,255,0.08)]"
|
||
: "bg-white/[0.02] border border-white/5 hover:border-white/10"
|
||
}`}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.5, delay: pIdx * 0.1 }}
|
||
whileHover={{ y: -6 }}
|
||
>
|
||
{plan.popular && (
|
||
<div className="absolute -top-3.5 left-1/2 -translate-x-1/2 px-4 py-1.5 bg-[#00E5FF] text-black text-[9px] font-black uppercase tracking-widest rounded-full z-10 shadow-md">
|
||
{t.bestValue}
|
||
</div>
|
||
)}
|
||
|
||
<div>
|
||
<h3 className="font-sora-premium font-black text-xl uppercase tracking-wider text-white mb-2 leading-tight">
|
||
{plan.title}
|
||
</h3>
|
||
<p className="text-white/50 text-xs leading-relaxed mb-8 font-semibold">
|
||
{plan.desc}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
{/* Price display */}
|
||
<div className="flex items-baseline gap-1.5 mb-8">
|
||
<span className="text-4xl font-black text-[#00E5FF] font-mono-code">{plan.price}</span>
|
||
<span className="text-white/40 text-[9px] uppercase tracking-widest font-black font-mono-code">/ {t.month}</span>
|
||
</div>
|
||
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className={`w-full py-4 rounded-xl font-black text-xs uppercase tracking-widest transition-all cursor-pointer ${
|
||
plan.popular
|
||
? "bg-[#00E5FF] hover:bg-white text-black shadow-md"
|
||
: "bg-[#080710] hover:bg-white/5 text-white/70 border border-white/5 hover:border-white/10"
|
||
}`}
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
>
|
||
{t.choosePlan}
|
||
</motion.button>
|
||
</div>
|
||
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── BOTTOM BANNER ── */}
|
||
<section className="relative z-10 bg-gradient-to-r from-[#00E5FF] to-[#BD00FF] text-black py-12 px-6 text-center shadow-lg">
|
||
<div className="max-w-7xl mx-auto relative z-10 flex flex-col md:flex-row justify-between items-center gap-6">
|
||
<h3 className="font-sora-premium font-black text-xl md:text-2xl uppercase tracking-wider text-black text-center md:text-left leading-tight">
|
||
{t.readyToSupercharge}
|
||
</h3>
|
||
<motion.button
|
||
onClick={() => setShowBookingModal(true)}
|
||
className="inline-flex items-center gap-3 px-8 py-4 bg-black hover:bg-white text-white hover:text-black rounded-xl font-mono-code font-black tracking-widest uppercase transition-all shadow-[0_5px_15px_rgba(0,0,0,0.3)] text-xs cursor-pointer"
|
||
whileHover={{ scale: 1.02 }}
|
||
>
|
||
{t.startIntegBtn}
|
||
</motion.button>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── FOOTER ── */}
|
||
<footer className="bg-[#080710] border-t border-white/5 pt-24 pb-8 px-6 relative z-10">
|
||
<div className="max-w-7xl mx-auto">
|
||
|
||
<div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
|
||
|
||
{/* About Column */}
|
||
<div className="md:col-span-2">
|
||
<span className="font-mono-code text-2xl font-black text-white tracking-wider uppercase mb-4 block">
|
||
VAAT<span className="text-[#00E5FF]">BOT</span>
|
||
</span>
|
||
<p className="text-white/50 text-xs leading-relaxed max-w-sm mb-8 font-semibold">
|
||
{firma.slogan} — {t.footerDesc}
|
||
</p>
|
||
<div className="text-white/60 text-xs font-semibold space-y-3">
|
||
<p className="flex items-center gap-2">
|
||
<svg className="w-4 h-4 text-[#00E5FF] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
|
||
<circle cx="12" cy="10" r="3" />
|
||
</svg>
|
||
<span className="text-white/80">{firma.adres}</span>
|
||
</p>
|
||
<p className="flex items-center gap-2">
|
||
<svg className="w-4 h-4 text-[#00E5FF] shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect width="20" height="16" x="2" y="4" rx="2" />
|
||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
|
||
</svg>
|
||
<span className="text-white/80">{firma.email}</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Integrations Column */}
|
||
<div>
|
||
<h4 className="font-mono-code text-[#00E5FF] text-xs font-black uppercase tracking-wider mb-6">
|
||
INTEGRATIONS
|
||
</h4>
|
||
<div className="space-y-4">
|
||
<a href="#" className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold">
|
||
{t.tabWidget}
|
||
</a>
|
||
<a href="#" className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold">
|
||
{t.tabSlack}
|
||
</a>
|
||
<a href="#" className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold">
|
||
{t.tabWhatsapp}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Navigation Column */}
|
||
<div>
|
||
<h4 className="font-mono-code text-[#00E5FF] text-xs font-black uppercase tracking-wider mb-6">
|
||
USEFUL LINKS
|
||
</h4>
|
||
<div className="space-y-4">
|
||
{[t.navSim, t.navPricing, t.navFeatures, t.navReviews].map(item => (
|
||
<a
|
||
key={item}
|
||
href="#"
|
||
className="block text-white/50 hover:text-[#00E5FF] text-xs transition-colors font-semibold"
|
||
>
|
||
{item}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 text-white/30 text-xs font-semibold">
|
||
<p>© 2026 {firma.adi}. All rights reserved.</p>
|
||
<div className="flex gap-4">
|
||
<a href="#" className="hover:text-white transition-colors">{t.privacyRegs}</a>
|
||
<span>·</span>
|
||
<a href="#" className="hover:text-white transition-colors">{t.termsStay}</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
|
||
{/* ── FAST SIGN UP MODAL ── */}
|
||
<AnimatePresence>
|
||
{showBookingModal && (
|
||
<motion.div
|
||
className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/85 backdrop-blur-sm"
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
>
|
||
<motion.div
|
||
className="bg-[#12141E] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-white/10"
|
||
initial={{ scale: 0.95, y: 20 }}
|
||
animate={{ scale: 1, y: 0 }}
|
||
exit={{ scale: 0.95, y: 20 }}
|
||
>
|
||
{/* Close Button */}
|
||
<button
|
||
className="absolute top-6 right-6 w-8 h-8 rounded-full bg-white/5 border border-white/10 flex items-center justify-center text-white/40 hover:text-[#00E5FF] hover:border-[#00E5FF]/20 transition-all cursor-pointer font-bold"
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
{/* Success check indicator */}
|
||
<div className="w-16 h-16 rounded-2xl bg-[#00E5FF]/10 border border-[#00E5FF]/20 flex items-center justify-center mb-6">
|
||
<svg className="w-8 h-8 stroke-[#00E5FF] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
|
||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
||
</svg>
|
||
</div>
|
||
|
||
<h3 className="font-mono-code font-black text-white text-2xl mb-1 uppercase tracking-wider leading-none">
|
||
{t.startIntegration}
|
||
</h3>
|
||
<p className="text-[#00E5FF] font-mono-code text-[10px] mb-6 uppercase tracking-widest font-black">
|
||
{t.sandboxToken}
|
||
</p>
|
||
|
||
<div className="space-y-4 mb-6">
|
||
<div>
|
||
<label className="block text-[9px] font-mono-code font-black text-white/50 mb-1.5 uppercase tracking-wider">{t.webLabel}</label>
|
||
<input type="text" className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#080710] text-xs text-white focus:outline-none focus:border-[#00E5FF] font-semibold" placeholder="https://yourwebsite.com" />
|
||
</div>
|
||
<div>
|
||
<label className="block text-[9px] font-mono-code font-black text-white/50 mb-1.5 uppercase tracking-wider">{t.emailLabel}</label>
|
||
<input type="email" className="w-full px-4 py-3 rounded-xl border border-white/5 bg-[#080710] text-xs text-white focus:outline-none focus:border-[#00E5FF] font-semibold" placeholder="you@company.com" />
|
||
</div>
|
||
</div>
|
||
|
||
<motion.button
|
||
className="w-full py-4 rounded-xl bg-[#00E5FF] hover:bg-white text-black font-black text-xs uppercase tracking-widest cursor-pointer shadow-[0_5px_15px_rgba(0,229,255,0.3)]"
|
||
whileHover={{ scale: 1.02 }}
|
||
whileTap={{ scale: 0.98 }}
|
||
onClick={() => setShowBookingModal(false)}
|
||
>
|
||
{t.generate}
|
||
</motion.button>
|
||
</motion.div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
</div>
|
||
</>
|
||
);
|
||
}
|