233 lines
12 KiB
TypeScript
233 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Cloud, Code, Zap, TrendingUp, Sparkles, Shield, Lock, BarChart3, Globe, Cpu, Headphones, Users, MessageCircle, GitBranch, DollarSign, Star, Rocket } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="DevFlow"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Get Started", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
title="Modern SaaS Development Platform"
|
|
description="Build, deploy, and scale your applications with our comprehensive development suite. Streamline workflows, collaborate seamlessly, and ship faster."
|
|
background={{ variant: "radial-gradient" }}
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AywQOPNmT5VxZoBVdlVVSgPBHk/professional-headshot-of-a-young-male-so-1773640351536-c2531a97.png", alt: "Professional headshot of a young male software developer, smiling, wearing casual tech attire, well-" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AywQOPNmT5VxZoBVdlVVSgPBHk/professional-headshot-of-a-female-softwa-1773640351851-5b4c150a.png", alt: "Professional headshot of a female software engineer, confident expression, wearing tech company casu" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AywQOPNmT5VxZoBVdlVVSgPBHk/professional-headshot-of-a-diverse-softw-1773640351679-26820cb5.png", alt: "Professional headshot of a diverse software developer, smiling confidently, wearing modern casual te" }
|
|
]}
|
|
avatarText="Trusted by 10,000+ developers"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "#contact" },
|
|
{ text: "View Demo", href: "#features" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
marqueeItems={[
|
|
{ type: "text-icon", text: "Cloud Infrastructure", icon: Cloud },
|
|
{ type: "text-icon", text: "API Management", icon: Code },
|
|
{ type: "text-icon", text: "DevOps Automation", icon: Zap },
|
|
{ type: "text-icon", text: "Real-time Analytics", icon: TrendingUp }
|
|
]}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-bento" data-section="features-bento">
|
|
<FeatureBento
|
|
title="Powerful Development Tools"
|
|
description="Everything you need to develop, test, and deploy modern applications with confidence and efficiency."
|
|
tag="Core Features"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
buttons={[{ text: "Explore Documentation", href: "#" }]}
|
|
features={[
|
|
{
|
|
title: "Integrated Development Environment", description: "Full-featured IDE with intelligent code completion, debugging, and profiling tools.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Code, label: "Smart Completion", value: "AI-powered" },
|
|
{ icon: Zap, label: "Advanced Debugging", value: "Real-time" },
|
|
{ icon: Zap, label: "Performance", value: "Optimized" }
|
|
]
|
|
},
|
|
{
|
|
title: "Cloud Infrastructure", description: "Scalable cloud deployment with automatic load balancing and global CDN.", bentoComponent: "globe"
|
|
},
|
|
{
|
|
title: "API Management", description: "Create, monitor, and scale APIs with built-in rate limiting and authentication.", bentoComponent: "animated-bar-chart"
|
|
},
|
|
{
|
|
title: "Collaboration Suite", description: "Real-time collaboration features for distributed development teams.", bentoComponent: "3d-stack-cards", items: [
|
|
{ icon: Users, title: "Team Sync", subtitle: "Real-time Updates", detail: "See changes instantly" },
|
|
{ icon: MessageCircle, title: "Code Review", subtitle: "Streamlined Process", detail: "Integrated feedback" },
|
|
{ icon: GitBranch, title: "Version Control", subtitle: "Git Integration", detail: "Seamless workflows" }
|
|
]
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features-border" data-section="features-border">
|
|
<FeatureBorderGlow
|
|
title="Advanced Capabilities"
|
|
description="Enterprise-grade features designed for teams that demand reliability and performance."
|
|
tag="Enterprise Ready"
|
|
tagIcon={Shield}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
features={[
|
|
{ icon: Lock, title: "Security First", description: "End-to-end encryption, SSO, and compliance with GDPR, HIPAA, and SOC 2." },
|
|
{ icon: BarChart3, title: "Comprehensive Analytics", description: "Deep insights into application performance, usage metrics, and user behavior." },
|
|
{ icon: Zap, title: "Lightning Fast", description: "Sub-100ms deployments with automatic scaling and performance optimization." },
|
|
{ icon: Globe, title: "Global Distribution", description: "Deploy to 50+ regions with automatic failover and geo-routing." },
|
|
{ icon: Cpu, title: "Scalability", description: "Handle millions of requests per second with auto-scaling infrastructure." },
|
|
{ icon: Headphones, title: "24/7 Support", description: "Enterprise support with dedicated account managers and SLAs." }
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="DevFlow transformed our development pipeline. We reduced deployment time by 70% and our team collaboration has never been better. Highly recommend!"
|
|
rating={5}
|
|
author="Engineering Team at TechCorp"
|
|
avatars={[
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AywQOPNmT5VxZoBVdlVVSgPBHk/professional-headshot-of-a-confident-mal-1773640351811-9799a704.png", alt: "Professional headshot of a confident male tech executive or team lead, wearing business casual attir" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AywQOPNmT5VxZoBVdlVVSgPBHk/professional-headshot-of-a-creative-fema-1773640351515-1a1377d9.png", alt: "Professional headshot of a creative female developer or product manager, warm smile, modern casual s" },
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AywQOPNmT5VxZoBVdlVVSgPBHk/professional-headshot-of-a-diverse-softw-1773640351040-abb49856.png", alt: "Professional headshot of a diverse software architect or senior engineer, confident expression, wear" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Transparent Pricing"
|
|
description="Choose the perfect plan for your team. All plans include core features with flexible scaling."
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="blur-reveal"
|
|
buttonAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "starter", price: "$29", subtitle: "/month per seat", badge: "Popular", badgeIcon: Sparkles,
|
|
buttons: [{ text: "Get Started", href: "#contact" }],
|
|
features: ["Up to 5 team members", "Basic IDE features", "5 deployments per month", "Community support", "Standard analytics"]
|
|
},
|
|
{
|
|
id: "professional", price: "$99", subtitle: "/month per seat", badge: "Best Value", badgeIcon: Star,
|
|
buttons: [{ text: "Start Free Trial", href: "#contact" }],
|
|
features: ["Unlimited team members", "Advanced IDE with AI", "Unlimited deployments", "Priority email support", "Advanced analytics", "Custom integrations"]
|
|
},
|
|
{
|
|
id: "enterprise", price: "Custom", subtitle: "Custom pricing", badge: "Enterprise", badgeIcon: Shield,
|
|
buttons: [{ text: "Contact Sales", href: "#contact" }],
|
|
features: ["All Professional features", "Dedicated support", "Custom SLAs", "On-premise deployment", "Advanced security", "Custom workflows"]
|
|
}
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get Started"
|
|
tagIcon={Rocket}
|
|
tagAnimation="slide-up"
|
|
title="Start Your Journey Today"
|
|
description="Join thousands of developers building the future. Get instant access to our platform."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={true}
|
|
inputPlaceholder="Enter your email address"
|
|
buttonText="Start Free Trial"
|
|
termsText="By signing up, you agree to our Terms of Service and Privacy Policy."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
copyrightText="© 2024 DevFlow. 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: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" },
|
|
{ label: "Press", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Documentation", href: "#" },
|
|
{ label: "API Reference", href: "#" },
|
|
{ label: "Community", href: "#" },
|
|
{ label: "Support", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" },
|
|
{ label: "Contact", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|