250 lines
21 KiB
TypeScript
250 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroOverlayTestimonial from "@/components/sections/hero/HeroOverlayTestimonial";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
|
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
|
import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
|
|
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
|
import FooterBase from "@/components/sections/footer/FooterBase";
|
|
import { Activity, Building, CreditCard, Gift, Globe, HelpCircle, Layers, MessageSquare, Server, ShoppingCart, Sparkles, Star, User, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="ChatX AI"
|
|
navItems={[
|
|
{ name: "Home", id: "#hero" },
|
|
{ name: "About", id: "#about" },
|
|
{ name: "Features", id: "#features" },
|
|
{ name: "Marketplace", id: "#marketplace" },
|
|
{ name: "Pricing", id: "#pricing" },
|
|
{ name: "Testimonials", id: "#testimonials" },
|
|
{ name: "FAQ", id: "#faq" },
|
|
{ name: "Contact", id: "#contact" }
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-vector/flat-electronics-logos-set_23-2148980884.jpg"
|
|
logoAlt="futuristic AI logo"
|
|
button={{ text: "Sign In", href: "#" }}
|
|
/>
|
|
</div>
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlayTestimonial
|
|
title="Unlock Next-Gen AI Power with ChatX AI"
|
|
description="Experience a futuristic AI operating system combining intelligent conversations, voice agents, and business automation in a secure, intuitive platform."
|
|
tag="The Future of AI is Here"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Get Started Free", href: "#pricing" },
|
|
{ text: "Explore Features", href: "#features" }
|
|
]}
|
|
testimonials={[
|
|
{ name: "Dr. Anya Sharma", testimonial: "ChatX AI has revolutionized how we interact with data. The AI agents are incredibly intuitive and the security is unmatched. Truly a game-changer for enterprise AI.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-stylish-jacket-is-posing-photographer-blue-red-lights_613910-13126.jpg?_wi=1", imageAlt: "Dr. Anya Sharma", handle: "AI Researcher", rating: 5 },
|
|
{ name: "Mark Chen", testimonial: "The voice assistants are astonishingly natural, making complex tasks feel effortless. Our team's productivity has soared since implementing ChatX AI.", imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg?_wi=1", imageAlt: "Mark Chen", handle: "Lead Developer", rating: 5 },
|
|
{ name: "Sarah Miller", testimonial: "From AI image generation to project management, ChatX AI integrates seamlessly into our workflow. The data isolation features provide absolute peace of mind.", imageSrc: "http://img.b2bpic.net/free-photo/sensual-blond-female-dressed-purple-jacket-isolated-dark-grey-background_613910-141.jpg?_wi=1", imageAlt: "Sarah Miller", handle: "Creative Director", rating: 5 },
|
|
{ name: "David Lee", testimonial: "As a developer, the AI Marketplace is a goldmine. Cloning and customizing agents is incredibly efficient, accelerating our project timelines significantly.", imageSrc: "http://img.b2bpic.net/free-photo/joyful-tablet-user-glasses-happy-about-high-speed-connection_74855-2969.jpg?_wi=1", imageAlt: "David Lee", handle: "Product Manager", rating: 5 },
|
|
{ name: "Emily Watson", testimonial: "The AI image and video generation tools are powerful and easy to use, opening up new creative avenues. This platform truly delivers on its promise of next-gen AI.", imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg?_wi=1", imageAlt: "Emily Watson", handle: "AI Innovator", rating: 5 }
|
|
]}
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/happy-smiling-man-winter-sweater-is-posing-photographer-studio_613910-13711.jpg", alt: "AI Avatar 1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/top-view-boss-day-concept_23-2148586496.jpg", alt: "AI Avatar 2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/young-peaceful-man-with-headphones-looking-away_23-2148205434.jpg", alt: "AI Avatar 3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/colorful-3d-shapes-vaporwave-style_23-2148981127.jpg", alt: "AI Avatar 4" }
|
|
]}
|
|
avatarText="Join 100K+ innovators"
|
|
imageSrc="http://img.b2bpic.net/free-photo/3d-graph-computer-illustration_23-2151884885.jpg"
|
|
imageAlt="Futuristic AI dashboard"
|
|
showDimOverlay={true}
|
|
showBlur={true}
|
|
textPosition="bottom"
|
|
/>
|
|
</div>
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="Your Private AI Ecosystem, Always Secure"
|
|
description={[
|
|
"ChatX AI is meticulously engineered to be a fortress for your data. Every user benefits from a strictly isolated environment, guaranteeing that your projects, conversations, and uploaded files are unequivocally private. Our robust security architecture prevents any cross-user access, maintaining the integrity and confidentiality of your information at all times.", "We go beyond standard security measures, employing advanced encryption, secure authentication (including email and Google login with OTP verification), and continuous activity monitoring. From encrypted passwords to parameterized database queries, every layer of ChatX AI is built with your privacy and data security as your paramount concern, making it a truly next-generation AI operating system you can trust."
|
|
]}
|
|
buttons={[{ text: "Learn More About Security", href: "#faq" }]}
|
|
useInvertedBackground={true}
|
|
showBorder={false}
|
|
/>
|
|
</div>
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
title="Intelligent AI Features for Every Workflow"
|
|
description="ChatX AI combines powerful capabilities to streamline your tasks, enhance creativity, and automate business processes like never before."
|
|
tag="Core Capabilities"
|
|
tagIcon={Zap}
|
|
features={[
|
|
{ title: "Dynamic AI Conversations", description: "Engage in ChatGPT-style chats, manage projects, upload files, and leverage powerful business automation tools all from one intuitive interface.", imageSrc: "http://img.b2bpic.net/free-photo/smartphone-with-opened-ai-chat-it_1268-21624.jpg", imageAlt: "Holographic chat interface" },
|
|
{ title: "Personalized Voice Agents", description: "Interact with unique AI voice assistants, each with distinct avatars and personalities, tailored for roles like Mom, Dad, Teacher, Coach, and Business Advisor.", imageSrc: "http://img.b2bpic.net/free-photo/gradient-ai-cloud-with-broken-pieces_23-2149739757.jpg", imageAlt: "Holographic voice agent avatars" },
|
|
{ title: "Advanced AI Generation", description: "Transform text to stunning images and videos. Generate diverse visual content with powerful AI models, saving time and sparking creativity.", imageSrc: "http://img.b2bpic.net/free-photo/representation-collective-mind-process-concept-digital-art-style_23-2151657803.jpg", imageAlt: "AI image and video generation" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="marketplace" data-section="marketplace">
|
|
<ProductCardFour
|
|
title="Discover & Deploy Powerful AI Agents"
|
|
description="Explore the ChatX AI Marketplace, a hub for specialized AI assistants across various categories. Publish your own agents or customize existing templates to fit your unique needs."
|
|
tag="AI Marketplace"
|
|
tagIcon={ShoppingCart}
|
|
products={[
|
|
{ id: "mp1", name: "Customer Support Agent", price: "Free / Custom", variant: "Communication", imageSrc: "http://img.b2bpic.net/free-photo/female-programmer-scanning-her-face-with-biometric-security-technology-virtual-screen-digital-remix_53876-104936.jpg", imageAlt: "AI Customer Support Agent" },
|
|
{ id: "mp2", name: "Sales Booster AI", price: "Free / Custom", variant: "Sales & Marketing", imageSrc: "http://img.b2bpic.net/free-photo/birth-rate-fertility-level-concept_23-2148761002.jpg", imageAlt: "AI Sales Booster" },
|
|
{ id: "mp3", name: "E-commerce Optimizer", price: "Free / Custom", variant: "Retail & E-commerce", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wfekeu", imageAlt: "AI E-commerce Optimizer" },
|
|
{ id: "mp4", name: "Educational Tutor AI", price: "Free / Custom", variant: "Education", imageSrc: "http://img.b2bpic.net/free-photo/blue-reflections-background_1017-2652.jpg", imageAlt: "AI Educational Tutor" },
|
|
{ id: "mp5", name: "Personal Productivity AI", price: "Free / Custom", variant: "Personal Assistant", imageSrc: "http://img.b2bpic.net/free-photo/light-equipment-grey-technology-serious_1134-1423.jpg", imageAlt: "AI Personal Productivity" },
|
|
{ id: "mp6", name: "Business Strategy AI", price: "Free / Custom", variant: "Business Advisor", imageSrc: "http://img.b2bpic.net/free-photo/man-using-smartphone-with-neon-effect-background_53876-108545.jpg", imageAlt: "AI Business Strategy Advisor" }
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="bento-grid"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Quantifying Your AI Impact"
|
|
description="Gain real-time insights into your AI usage, project progress, and overall subscription benefits from a centralized dashboard."
|
|
tag="Performance Overview"
|
|
tagIcon={Activity}
|
|
metrics={[
|
|
{ id: "m1", value: "99.9%", title: "Uptime Reliability", description: "Ensuring continuous access to your AI tools.", icon: Server },
|
|
{ id: "m2", value: "100K+", title: "Active Projects", description: "Innovators collaborating and building with ChatX AI.", icon: Layers },
|
|
{ id: "m3", value: "5M+", title: "AI Generations", description: "Images and videos created by our users.", icon: Sparkles }
|
|
]}
|
|
carouselMode="buttons"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
title="Flexible Plans for Every AI Ambition"
|
|
description="Start with our Free Plan or scale up with more credits and advanced features tailored for individuals and enterprises."
|
|
tag="Pricing & Credits"
|
|
tagIcon={CreditCard}
|
|
plans={[
|
|
{ id: "free", badge: "Free Tier", badgeIcon: Gift, price: "0", subtitle: "Explore basic features", buttons: [{ text: "Start for Free", href: "#" }], features: ["100 Credits per month", "ChatGPT-style conversations", "Basic AI agents", "File Uploads (limited)", "Secure data isolation"] },
|
|
{ id: "starter", badge: "Starter", badgeIcon: User, price: "$9/mo", subtitle: "Perfect for individuals", buttons: [{ text: "Choose Starter", href: "#" }], features: ["1,000 Credits per month", "All Free features", "Priority chat support", "Enhanced file storage", "Access to AI Marketplace"] },
|
|
{ id: "pro", badge: "Pro", badgeIcon: Star, price: "$29/mo", subtitle: "For power users & teams", buttons: [{ text: "Choose Pro", href: "#" }], features: ["5,000 Credits per month", "All Starter features", "AI Image & Video Generation", "Advanced AI agents", "Dedicated project spaces"] },
|
|
{ id: "business", badge: "Business", badgeIcon: Building, price: "$99/mo", subtitle: "Enterprise-grade AI solutions", buttons: [{ text: "Choose Business", href: "#" }], features: ["20,000 Credits per month", "All Pro features", "WhatsApp Business Assistant", "Custom AI agent development", "Team collaboration features"] }
|
|
]}
|
|
carouselMode="buttons"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Innovators Are Saying"
|
|
description="Hear from industry leaders and professionals who are transforming their workflows and achieving more with ChatX AI."
|
|
tag="Trusted Voices"
|
|
tagIcon={MessageSquare}
|
|
testimonials={[
|
|
{ id: "test1", name: "Dr. Anya Sharma", handle: "CEO, QuantumLeap Labs", testimonial: "ChatX AI is unparalleled. Its data isolation is crucial for our sensitive research, and the custom AI agents have significantly accelerated our R&D cycles. A truly world-class platform.", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-stylish-jacket-is-posing-photographer-blue-red-lights_613910-13126.jpg?_wi=2", imageAlt: "Dr. Anya Sharma" },
|
|
{ id: "test2", name: "Mark Chen", handle: "CTO, Synapse Solutions", testimonial: "The integration capabilities of ChatX AI are flawless. We've managed to automate complex business processes, freeing up our team to focus on innovation. The voice agents are remarkably intuitive.", imageSrc: "http://img.b2bpic.net/free-photo/videographer-smiling-camera-working-computer-editing-video-footage-audio-app-sitting-mo_482257-2649.jpg?_wi=2", imageAlt: "Mark Chen" },
|
|
{ id: "test3", name: "Sarah Miller", handle: "Marketing Director, PixelPerfect Inc.", testimonial: "Generating high-quality images and videos for our campaigns used to be a bottleneck. With ChatX AI, it's effortless and incredibly fast. The results are stunning and on-brand every time.", imageSrc: "http://img.b2bpic.net/free-photo/sensual-blond-female-dressed-purple-jacket-isolated-dark-grey-background_613910-141.jpg?_wi=2", imageAlt: "Sarah Miller" },
|
|
{ id: "test4", name: "David Lee", handle: "Lead Product Manager, InnovateX", testimonial: "The project management features are robust, and the ability to collaborate with AI agents is a game-changer. ChatX AI provides a seamless, secure environment for our entire product lifecycle.", imageSrc: "http://img.b2bpic.net/free-photo/joyful-tablet-user-glasses-happy-about-high-speed-connection_74855-2969.jpg?_wi=2", imageAlt: "David Lee" },
|
|
{ id: "test5", name: "Emily Watson", handle: "Founder, AI-Driven Startups", testimonial: "As a startup founder, resource optimization is key. ChatX AI's credit system is fair, and the AI Marketplace allowed me to quickly deploy custom solutions without extensive development. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/man-black-working-laptop-cafe_23-2147962625.jpg?_wi=2", imageAlt: "Emily Watson" },
|
|
{ id: "test6", name: "James Rodriguez", handle: "Head of Operations, GlobalTech", testimonial: "Implementing the WhatsApp Business Assistant has transformed our customer engagement. The multi-language support and FAQ training are invaluable for our global reach. Truly an enterprise-grade solution.", imageSrc: "http://img.b2bpic.net/free-photo/young-freelancer-examines-white-screen-smartphone_482257-102839.jpg", imageAlt: "James Rodriguez" }
|
|
]}
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
topMarqueeDirection="left"
|
|
/>
|
|
</div>
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Trusted by Visionaries Worldwide"
|
|
description="Our AI platform is empowering leading enterprises and innovative startups across various industries."
|
|
tag="Global Impact"
|
|
tagIcon={Globe}
|
|
names={[
|
|
"Tech Innovators Inc.", "DataStream Solutions", "Quantum Robotics", "Future Systems Group", "Cognito AI", "Synapse Corp", "NeuralNet Global", "Digital Horizon", "Apex Intelligence", "CoreLogic Tech"
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
speed={35}
|
|
/>
|
|
</div>
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Your Questions, Our Clear Answers"
|
|
description="Find quick answers to common questions about ChatX AI's features, security, pricing, and more."
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
faqs={[
|
|
{ id: "faq1", title: "How does ChatX AI ensure data privacy and isolation?", content: "Every user account on ChatX AI operates within a strictly isolated data environment. This means your projects, conversations, uploads, and settings are linked to your unique user ID and cannot be accessed or interfered with by any other user. We utilize advanced encryption, JWT authentication, and parameterized database queries to enforce stringent data separation and prevent unauthorized access." },
|
|
{ id: "faq2", title: "What types of AI agents are available in the Marketplace?", content: "Our AI Marketplace offers a diverse range of specialized AI agents across categories like Customer Support, Sales, E-commerce, Education, and Personal Assistants. Users can deploy pre-built templates, clone them for customization, or even publish their own unique AI assistants for others to use." },
|
|
{ id: "faq3", title: "How does the credit system work for AI generation?", content: "ChatX AI operates on a flexible credit system. Free users receive 100 monthly credits, while paid subscriptions offer tiered credit bundles. Credits are consumed for resource-intensive operations like text messages, AI image generation, and AI video generation. When credits run out, new content generation is paused until renewal or upgrade." }
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Ready to Elevate Your Enterprise?"
|
|
description="Connect with our expert team to discuss custom AI solutions, enterprise integrations, or any inquiries you may have. We're here to help you harness the full power of ChatX AI."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
|
{ name: "company", type: "text", placeholder: "Company Name" }
|
|
]}
|
|
textarea={{ name: "message", placeholder: "Tell us about your needs...", rows: 5, required: true }}
|
|
useInvertedBackground={true}
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-banking-transparent-screen_53876-105382.jpg"
|
|
imageAlt="Futuristic contact form UI"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{ title: "Platform", items: [{ label: "Features", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Marketplace", href: "#marketplace" }, { label: "Dashboard", href: "#" }] },
|
|
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Testimonials", href: "#testimonials" }, { label: "Contact", href: "#contact" }] },
|
|
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }, { label: "Security Policy", href: "#" }] }
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/3d-rendering-holographic-layering_23-2150491104.jpg"
|
|
logoAlt="futuristic AI logo"
|
|
logoText="ChatX AI"
|
|
copyrightText="© 2024 ChatX AI. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|