325 lines
17 KiB
TypeScript
325 lines
17 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroTextImage from '@/components/sections/hero/HeroTextImage';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { Bot, User, Signal, Bell, MessageCircle, Calendar, MapPin, Image, Settings, Music, ShoppingBag, Cloud, Zap, Shield, Layers, GitBranch, BarChart3, Smartphone, Sparkles } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="Webild"
|
|
bottomLeftText="Global Community"
|
|
bottomRightText="hello@example.com"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "FAQ", id: "faq" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroTextImage
|
|
title="Experience the Future of Web Design"
|
|
description="Create stunning, interactive landing pages with our cutting-edge component library. Build faster, design smarter, and deliver experiences that captivate."
|
|
tag="Premium Components"
|
|
buttons={[
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-vector/abstract-background-with-blue-lights_1035-67.jpg"
|
|
imageAlt="Hero spotlight"
|
|
mediaAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureBento
|
|
title="Powerful Features at Your Fingertips"
|
|
description="Leverage our comprehensive suite of interactive components and visualization tools designed for modern web applications."
|
|
tag="Capabilities"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
title: "Global Analytics", description: "Real-time data visualization across your entire platform with interactive globe mapping.", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "Performance Metrics", description: "Track growth with animated bar charts that update in real-time as data flows in.", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Mobile Excellence", description: "Full-featured mobile app interface with notifications and real-time alerts.", bentoComponent: "phone", statusIcon: Signal,
|
|
alertIcon: Bell,
|
|
alertTitle: "New Update", alertMessage: "Version 2.0 is now available", apps: [
|
|
{ name: "Messages", icon: MessageCircle },
|
|
{ name: "Calendar", icon: Calendar },
|
|
{ name: "Maps", icon: MapPin },
|
|
{ name: "Photos", icon: Image },
|
|
{ name: "Settings", icon: Settings },
|
|
{ name: "Music", icon: Music },
|
|
{ name: "Store", icon: ShoppingBag },
|
|
{ name: "Weather", icon: Cloud }
|
|
]
|
|
},
|
|
{
|
|
title: "AI-Powered Chat", description: "Intelligent conversational interface with seamless user and AI interactions.", bentoComponent: "chat", aiIcon: Bot,
|
|
userIcon: User,
|
|
exchanges: [
|
|
{
|
|
userMessage: "What are the key metrics for this month?", aiResponse: "Based on current data, your revenue is up 24% and user engagement increased by 18%."
|
|
},
|
|
{
|
|
userMessage: "Show me the top performing features", aiResponse: "Analytics and reporting tools lead with 34% adoption, followed by automation at 28%."
|
|
},
|
|
{
|
|
userMessage: "Any recommendations?", aiResponse: "I suggest focusing on mobile optimization. Current mobile traffic is 62% but conversion is 15% lower."
|
|
}
|
|
],
|
|
placeholder: "Ask me anything..."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-advanced" data-section="features-advanced">
|
|
<FeatureHoverPattern
|
|
title="Advanced Capabilities"
|
|
description="Explore our comprehensive toolkit designed for developers and designers who demand performance and creativity."
|
|
tag="Developer Tools"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
features={[
|
|
{
|
|
icon: Zap,
|
|
title: "Lightning Fast", description: "Optimized for performance with sub-millisecond rendering and zero-layout shift."
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Secure by Default", description: "Enterprise-grade security with built-in encryption and compliance standards."
|
|
},
|
|
{
|
|
icon: Layers,
|
|
title: "Fully Customizable", description: "Extensive theming system with 50+ pre-built color palettes and typography options."
|
|
},
|
|
{
|
|
icon: GitBranch,
|
|
title: "Version Control", description: "Seamless Git integration with branching, merging, and collaboration tools."
|
|
},
|
|
{
|
|
icon: BarChart3,
|
|
title: "Analytics Driven", description: "Comprehensive analytics dashboard with real-time insights and predictive analytics."
|
|
},
|
|
{
|
|
icon: Smartphone,
|
|
title: "Responsive Design", description: "Perfect on every device from mobile to desktop with adaptive layouts."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
title="Built for Tomorrow's Web"
|
|
description="Our platform combines cutting-edge technology with intuitive design to empower creators worldwide. Founded on principles of performance, accessibility, and innovation, we're reshaping how digital experiences are built."
|
|
tag="Our Mission"
|
|
imageSrc="http://img.b2bpic.net/free-vector/abstract-background-with-blue-lights_1035-67.jpg"
|
|
imageAlt="About vision"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ value: "10M+", title: "Active Developers" },
|
|
{ value: "500K+", title: "Projects Built" },
|
|
{ value: "99.9%", title: "Uptime Guaranteed" },
|
|
{ value: "150+", title: "Countries Served" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="Loved by Creators Worldwide"
|
|
description="See what developers, designers, and teams have to say about building with our platform."
|
|
tag="Client Stories"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
speed={40}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", handle: "@sarahjdev", testimonial: "This platform completely transformed our development workflow. We cut development time in half and our design system is now infinitely more scalable.", imageSrc: "http://img.b2bpic.net/free-photo/proud-businessman-with-his-company_1098-2864.jpg", imageAlt: "Sarah Johnson"
|
|
},
|
|
{
|
|
id: "2", name: "Michael Chen", handle: "@michaeluix", testimonial: "The component library is incredible. Every component is battle-tested, well-documented, and just works. No more reinventing the wheel.", imageSrc: "http://img.b2bpic.net/free-photo/female-employee-black-suit-looks-positive_114579-21797.jpg", imageAlt: "Michael Chen"
|
|
},
|
|
{
|
|
id: "3", name: "Emma Rodriguez", handle: "@emmadesigns", testimonial: "Beautiful, performant, and accessible. This is what modern web development should feel like. Our clients are thrilled with the results.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-caucasian-happy-teacher-glasses_74855-9736.jpg", imageAlt: "Emma Rodriguez"
|
|
},
|
|
{
|
|
id: "4", name: "David Kim", handle: "@davkim_dev", testimonial: "Best investment for our team. The learning curve is minimal and the productivity gains are massive. Highly recommended for any serious developer.", imageSrc: "http://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg", imageAlt: "David Kim"
|
|
},
|
|
{
|
|
id: "5", name: "Jessica Martinez", handle: "@jessicamtech", testimonial: "The documentation is phenomenal and the community support is outstanding. I've never felt more confident building production apps.", imageSrc: "http://img.b2bpic.net/free-photo/proud-businessman-with-his-company_1098-2864.jpg", imageAlt: "Jessica Martinez"
|
|
},
|
|
{
|
|
id: "6", name: "Alex Thompson", handle: "@alexthompson", testimonial: "A game-changer for our agency. We now deliver projects faster without compromising on quality or design excellence.", imageSrc: "http://img.b2bpic.net/free-photo/female-employee-black-suit-looks-positive_114579-21797.jpg", imageAlt: "Alex Thompson"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
title="Simple, Transparent Pricing"
|
|
description="Choose the plan that's right for you. Upgrade or downgrade anytime."
|
|
tag="Pricing Plans"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
plans={[
|
|
{
|
|
id: "starter", name: "Starter", price: "$29/mo", badge: "Popular", badgeIcon: Sparkles,
|
|
buttons: [{ text: "Get Started", href: "#" }],
|
|
features: [
|
|
"Up to 5 projects", "Core components library", "Community support", "Basic analytics", "Monthly updates"
|
|
]
|
|
},
|
|
{
|
|
id: "professional", name: "Professional", price: "$79/mo", badge: "Best Value", badgeIcon: Zap,
|
|
buttons: [{ text: "Start Free Trial", href: "#" }],
|
|
features: [
|
|
"Unlimited projects", "Full component library", "Priority support", "Advanced analytics", "Weekly updates", "Custom themes", "Team collaboration"
|
|
]
|
|
},
|
|
{
|
|
id: "enterprise", name: "Enterprise", price: "Custom", buttons: [{ text: "Contact Sales", href: "#contact" }],
|
|
features: [
|
|
"Everything in Professional", "Dedicated account manager", "Custom integrations", "SLA guarantee", "White-label options", "Advanced security", "On-premises deployment"
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our platform, pricing, and support."
|
|
tag="Help Center"
|
|
animationType="smooth"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What's included in each plan?", content: "Starter includes our core component library with 50+ components, community support, and basic analytics. Professional adds unlimited projects, priority support, and advanced customization. Enterprise includes everything plus dedicated support and custom development."
|
|
},
|
|
{
|
|
id: "2", title: "Can I cancel anytime?", content: "Yes, absolutely. You can cancel your subscription at any time with no penalties or long-term contracts. Your access continues until the end of your billing cycle."
|
|
},
|
|
{
|
|
id: "3", title: "Do you offer a free trial?", content: "We offer a 14-day free trial for all plans. No credit card required. Full access to all features so you can experience everything before committing."
|
|
},
|
|
{
|
|
id: "4", title: "What about technical support?", content: "Starter includes community support with typical 24-48 hour response times. Professional and Enterprise include priority support with faster response times. Enterprise customers get a dedicated account manager."
|
|
},
|
|
{
|
|
id: "5", title: "Can I use this for client projects?", content: "Yes, all plans include rights to use components in commercial projects. Enterprise plans offer white-label options and custom licensing terms."
|
|
},
|
|
{
|
|
id: "6", title: "Is my data secure?", content: "We maintain enterprise-grade security with HTTPS encryption, regular backups, and compliance with GDPR, CCPA, and SOC 2 Type II standards. Enterprise customers can request additional security measures."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get in Touch"
|
|
title="Ready to Get Started?"
|
|
description="Join thousands of developers building amazing experiences. Our team is here to help you succeed."
|
|
buttons={[
|
|
{ text: "Start Your Free Trial", href: "#" },
|
|
{ text: "Schedule a Demo", href: "#" }
|
|
]}
|
|
background={{ variant: "animated-grid" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Webild"
|
|
copyrightText="© 2025 Webild. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#pricing" },
|
|
{ label: "Security", href: "#" },
|
|
{ label: "Roadmap", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "Guides", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Support", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy", href: "#" },
|
|
{ label: "Terms", href: "#" },
|
|
{ label: "Cookies", href: "#" },
|
|
{ label: "License", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|