290 lines
18 KiB
TypeScript
290 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
|
|
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
import { Award, CheckCircle, Github, HelpCircle, Linkedin, MessageCircle, Shield, Sparkles, Star, TrendingUp, Twitter, Users, Zap, Lock, AlertCircle, Settings, Brain } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
export default function LandingPage() {
|
|
const [chatMessages, setChatMessages] = useState<Array<{ type: 'user' | 'ai', text: string }>>([]);
|
|
const [inputValue, setInputValue] = useState('');
|
|
|
|
const handleSendMessage = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (inputValue.trim()) {
|
|
setChatMessages([...chatMessages, { type: 'user', text: inputValue }]);
|
|
setInputValue('');
|
|
|
|
// Simulate AI response
|
|
setTimeout(() => {
|
|
setChatMessages(prev => [...prev, { type: 'ai', text: 'Thank you for your message. I\'m here to help! How can I assist you further?' }]);
|
|
}, 500);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLarge"
|
|
background="fluid"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="AI Chatbot"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Capabilities", id: "capabilities" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Start Chatting", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Meet Your AI Assistant"
|
|
description="Experience the future of conversation with an intelligent chatbot powered by advanced AI. Natural, seamless, and always ready to help."
|
|
tag="Apple-Inspired AI"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-sleek-modern-ai-chatbot-interface-with-1772596448607-849e1d90.png?_wi=1", imageAlt: "AI Chatbot Interface"
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-sleek-modern-ai-chatbot-interface-with-1772596448607-849e1d90.png?_wi=2", imageAlt: "Premium Chat Experience"
|
|
}
|
|
]}
|
|
rating={5}
|
|
ratingText="Trusted by 50K+ Users"
|
|
buttons={[
|
|
{ text: "Start Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
className="py-20"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
title="Why Choose Our AI Chatbot?"
|
|
description="Discover the key capabilities that set our chatbot apart"
|
|
tag="Core Features"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Lightning-Fast Responses", description: "Get instant replies powered by cutting-edge AI technology. Experience real-time conversation without delays.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-minimalist-illustration-showing-fast-s-1772596448224-d2ceb712.png", imageAlt: "Fast Response Time"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Advanced Intelligence", description: "Understand context, nuance, and complex queries. Our AI learns and adapts to your communication style.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/an-abstract-representation-of-artificial-1772596448321-9eb8d9db.png", imageAlt: "AI Intelligence"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Enterprise Security", description: "Your data is protected with military-grade encryption. Privacy and security are our top priorities.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-sophisticated-representation-of-securi-1772596448767-9cbc8a1f.png", imageAlt: "Security Protection"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Personalized Experience", description: "Every interaction is tailored to your preferences. The chatbot remembers context and improves over time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/an-elegant-illustration-showing-personal-1772596449001-3c139844.png", imageAlt: "Personalization"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="chat-demo" data-section="chat-demo">
|
|
<FeatureBento
|
|
title="Try Interactive Chat"
|
|
description="Experience our AI chatbot in action with real-time conversation"
|
|
tag="Live Demo"
|
|
tagIcon={Brain}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Interactive Chat", description: "Start a conversation with our AI chatbot", bentoComponent: 'chat',
|
|
aiIcon: Brain,
|
|
userIcon: Users,
|
|
exchanges: [
|
|
{
|
|
userMessage: "Hello, can you help me with my order?", aiResponse: "Of course! I'd be happy to help. Could you please provide your order number?"
|
|
},
|
|
{
|
|
userMessage: "It's ORD-2024-12345", aiResponse: "Thank you! I found your order. It was shipped yesterday and should arrive in 2-3 business days."
|
|
},
|
|
{
|
|
userMessage: "Great! Can I track it?", aiResponse: "Absolutely! You'll receive tracking updates via email. You can also track it anytime in your account dashboard."
|
|
}
|
|
],
|
|
placeholder: "Type your message..."
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="capabilities" data-section="capabilities">
|
|
<MetricCardThree
|
|
title="By The Numbers"
|
|
description="See the impact our AI chatbot delivers"
|
|
tag="Performance Metrics"
|
|
tagIcon={TrendingUp}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "1", icon: MessageCircle, title: "Conversations", value: "10M+" },
|
|
{ id: "2", icon: Zap, title: "Response Speed", value: "<100ms" },
|
|
{ id: "3", icon: Users, title: "Active Users", value: "50K+" },
|
|
{ id: "4", icon: Award, title: "Satisfaction Rate", value: "98%" }
|
|
]}
|
|
animationType="slide-up"
|
|
carouselMode="buttons"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Leading Companies"
|
|
description="Join thousands of organizations using our AI chatbot"
|
|
tag="Partners"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["TechFlow", "InnovateLab", "CloudSync", "DataVista", "NextGen AI", "SmartBuild", "VisionCore", "PrecisionAI"]}
|
|
speed={40}
|
|
showCard={true}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Users Are Saying"
|
|
description="Real feedback from real users who've transformed their workflow"
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson, CEO of TechCorp", date: "Date: 15 November 2024", title: "Transformed Our Customer Support", quote: "This AI chatbot has been a game-changer for our customer support team. It handles 80% of inquiries automatically, freeing up our team to focus on complex issues. The natural conversation flow is impressive.", tag: "Enterprise Plan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596448542-6912fb4c.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596448542-6912fb4c.png?_wi=1"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen, CTO of InnovateLab", date: "Date: 20 October 2024", title: "Seamless Integration, Amazing Results", quote: "The integration process was incredibly smooth. Within hours, we had the chatbot up and running. The accuracy and speed have exceeded our expectations. Our user satisfaction scores jumped 35%.", tag: "Professional Plan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596447861-88dfac36.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596447861-88dfac36.png?_wi=1"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Rodriguez, Marketing Director at GrowthCo", date: "Date: 8 September 2024", title: "Best Investment in Customer Experience", quote: "We tried several chatbot solutions before this one. The difference is remarkable. It understands context, maintains conversation history, and feels like talking to a real person. Our conversion rate increased by 42%.", tag: "Startup Plan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596447667-669a91e4.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596447667-669a91e4.png"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim, Product Manager at StartupXYZ", date: "Date: 25 August 2024", title: "Exceptional Support & Documentation", quote: "From onboarding to deployment, every step was guided by their excellent support team. The documentation is clear and comprehensive. The chatbot's ability to learn from interactions is outstanding.", tag: "Growth Plan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596448596-a0980528.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596448596-a0980528.png"
|
|
},
|
|
{
|
|
id: "5", name: "Lisa Anderson, VP Operations at FutureFirst", date: "Date: 12 July 2024", title: "ROI Beyond Expectations", quote: "We calculated ROI within the first month. The cost savings and improved customer satisfaction metrics have made this one of our best strategic decisions. Highly recommend.", tag: "Enterprise Plan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596448542-6912fb4c.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596448542-6912fb4c.png?_wi=2"
|
|
},
|
|
{
|
|
id: "6", name: "James Wilson, Founder of AccelerateAI", date: "Date: 3 June 2024", title: "Powers Our Entire Platform", quote: "We've integrated this chatbot into our core platform. Its reliability, performance, and continuous improvements through updates make it indispensable. It's the backbone of our customer engagement strategy.", tag: "Enterprise Plan", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596447861-88dfac36.png", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-professional-headshot-photograph-of-a--1772596447861-88dfac36.png?_wi=2"
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our AI chatbot"
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ASqbOxorS0tXBmEgt6e6ET7yGF/a-clean-minimalist-illustration-showing--1772596448653-1c20e301.png"
|
|
imageAlt="FAQ Support"
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How does the AI chatbot learn?", content: "Our chatbot uses advanced machine learning algorithms that analyze conversations and patterns. It continuously improves through user interactions while maintaining strict privacy standards. Each conversation helps refine responses, but your data remains secure and confidential."
|
|
},
|
|
{
|
|
id: "2", title: "Is my data secure?", content: "Absolutely. We use military-grade encryption for all data transmission and storage. Our infrastructure complies with GDPR, CCPA, and SOC 2 standards. Regular security audits and penetration testing ensure your information stays protected."
|
|
},
|
|
{
|
|
id: "3", title: "What integrations are supported?", content: "We support integrations with Slack, Teams, Discord, Telegram, WhatsApp, and major CRM platforms. Our REST API allows custom integrations with any system. Full documentation and SDK support available for developers."
|
|
},
|
|
{
|
|
id: "4", title: "How quickly will I see results?", content: "Most customers see measurable improvements within the first week. Initial setup takes 2-4 hours, and the chatbot starts handling conversations immediately. Average ROI is achieved within 30 days."
|
|
},
|
|
{
|
|
id: "5", title: "Can I customize the chatbot's personality?", content: "Yes! You can fully customize tone, language, response style, and brand voice. Our configuration dashboard allows real-time adjustments without coding. Pre-built templates for various industries are also available."
|
|
},
|
|
{
|
|
id: "6", title: "What's the pricing model?", content: "We offer flexible pricing based on conversation volume and features. Plans start at $99/month for startups and scale to enterprise custom pricing. All plans include 24/7 support, regular updates, and security patches."
|
|
}
|
|
]}
|
|
animationType="smooth"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to revolutionize your customer experience? Start your AI chatbot journey today."
|
|
animationType="entrance-slide"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Get Started Free", href: "#" },
|
|
{ text: "Schedule Demo", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="AI Chatbot"
|
|
copyrightText="© 2025 AI Chatbot. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
|
|
{ icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
|
|
{ icon: Github, href: "https://github.com", ariaLabel: "GitHub" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |