238 lines
16 KiB
TypeScript
238 lines
16 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 { Award, CheckCircle, Github, HelpCircle, Linkedin, MessageCircle, Shield, Sparkles, Star, TrendingUp, Twitter, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
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="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>
|
|
);
|
|
}
|