|
|
|
|
@@ -3,55 +3,54 @@
|
|
|
|
|
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 FeatureBento from "@/components/sections/feature/FeatureBento";
|
|
|
|
|
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
|
|
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
|
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
|
|
|
import { BarChart3, Code, Database, Layers, Shield, Sparkles, Zap, Mail, CreditCard, Star } from "lucide-react";
|
|
|
|
|
import { Sparkles, Zap, Clock, TrendingUp, Wand2, Share2, Clapperboard, User, Play, Mail, Rocket, ArrowRight, CheckCircle } from "lucide-react";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="hover-bubble"
|
|
|
|
|
defaultButtonVariant="hover-magnetic"
|
|
|
|
|
defaultTextAnimation="entrance-slide"
|
|
|
|
|
borderRadius="pill"
|
|
|
|
|
borderRadius="rounded"
|
|
|
|
|
contentWidth="medium"
|
|
|
|
|
sizing="medium"
|
|
|
|
|
sizing="large"
|
|
|
|
|
background="none"
|
|
|
|
|
cardStyle="gradient-bordered"
|
|
|
|
|
primaryButtonStyle="primary-glow"
|
|
|
|
|
secondaryButtonStyle="layered"
|
|
|
|
|
headingFontWeight="medium"
|
|
|
|
|
cardStyle="glass-elevated"
|
|
|
|
|
primaryButtonStyle="gradient"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="bold"
|
|
|
|
|
>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarLayoutFloatingInline
|
|
|
|
|
brandName="DevFlow"
|
|
|
|
|
brandName="Spark AI Video"
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "Features", id: "features" },
|
|
|
|
|
{ name: "How It Works", id: "how-it-works" },
|
|
|
|
|
{ name: "Pricing", id: "pricing" },
|
|
|
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
|
|
|
{ name: "Docs", id: "docs" }
|
|
|
|
|
{ name: "Contact", id: "contact" }
|
|
|
|
|
]}
|
|
|
|
|
button={{ text: "Get Started", href: "https://devflow.dev/signup" }}
|
|
|
|
|
button={{ text: "Start Free", href: "https://sparkainvideo.com/signup" }}
|
|
|
|
|
animateOnLoad={true}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroCentered
|
|
|
|
|
title="Ship Code Faster with DevFlow"
|
|
|
|
|
description="The ultimate development platform for teams that move at the speed of innovation. Streamline workflows, collaborate seamlessly, and deploy with confidence."
|
|
|
|
|
background={{ variant: "downward-rays-animated" }}
|
|
|
|
|
title="Generate Viral AI Videos in Seconds"
|
|
|
|
|
description="Transform your ideas into stunning, shareable AI videos without any technical skills. No cameras, no editing experience, no problem."
|
|
|
|
|
background={{ variant: "sparkles-gradient" }}
|
|
|
|
|
avatars={[
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-software-engi-1772607486842-24cb25c0.png", alt: "Developer 1" },
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-product-manag-1772607487099-ad7d568d.png", alt: "Product Manager" },
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-developer-mod-1772607487566-dffda299.png", alt: "Developer 2" }
|
|
|
|
|
{ src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop", alt: "Creator 1" },
|
|
|
|
|
{ src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop", alt: "Creator 2" },
|
|
|
|
|
{ src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop", alt: "Creator 3" }
|
|
|
|
|
]}
|
|
|
|
|
avatarText="Trusted by 10,000+ developers worldwide"
|
|
|
|
|
avatarText="10,000+ creators making videos daily"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Start Free Trial", href: "https://devflow.dev/signup" },
|
|
|
|
|
{ text: "Create Your First Video", href: "https://sparkainvideo.com/dashboard" },
|
|
|
|
|
{ text: "Watch Demo", href: "#" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="slide-up"
|
|
|
|
|
@@ -59,24 +58,38 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
|
<FeatureBento
|
|
|
|
|
title="Powerful Features Built for Developers"
|
|
|
|
|
description="Everything you need to streamline your development workflow and collaborate effectively with your team."
|
|
|
|
|
tag="Capabilities"
|
|
|
|
|
<div id="problem" data-section="problem">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
title="Why Video Creation Used to Be Hard"
|
|
|
|
|
description="Traditional video creation is time-consuming, expensive, and requires technical expertise. Spark AI Video changes everything."
|
|
|
|
|
tag="The Problem"
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
features={[
|
|
|
|
|
{ icon: Clock, title: "Time-Consuming Process", description: "Hours of filming, editing, and rendering. Get professional videos ready in minutes instead." },
|
|
|
|
|
{ icon: TrendingUp, title: "Limited Creative Control", description: "Unlock unlimited creative possibilities with AI-powered templates and customization options." },
|
|
|
|
|
{ icon: Wand2, title: "Technical Expertise Required", description: "No need for expensive software or years of training. Anyone can create professional videos." }
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="how-it-works" data-section="how-it-works">
|
|
|
|
|
<FeatureBento
|
|
|
|
|
title="Three Simple Steps to Viral Videos"
|
|
|
|
|
description="From idea to viral content in minutes with our intuitive AI video creation platform."
|
|
|
|
|
tag="How It Works"
|
|
|
|
|
tagIcon={Clapperboard}
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
title: "Real-time Collaboration", description: "Work together seamlessly with team members across the globe", bentoComponent: "globe"
|
|
|
|
|
title: "1. Describe Your Vision", description: "Tell our AI what kind of video you want. Text, images, or scripts - we handle the rest.", bentoComponent: "reveal-icon", icon: Play
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Performance Analytics", description: "Track metrics that matter with detailed insights and visualizations", bentoComponent: "animated-bar-chart"
|
|
|
|
|
title: "2. AI Generates Magic", description: "Our advanced AI technology creates stunning visuals, animations, and voiceovers instantly.", bentoComponent: "reveal-icon", icon: Wand2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Deployment Tracking", description: "Monitor your deployments worldwide with interactive mapping", bentoComponent: "map"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Error Monitoring", description: "Catch issues before they hit production with comprehensive analytics", bentoComponent: "line-chart"
|
|
|
|
|
title: "3. Share & Go Viral", description: "Download, customize, and share your video across all platforms. Watch it go viral.", bentoComponent: "reveal-icon", icon: Share2
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
@@ -86,66 +99,63 @@ export default function LandingPage() {
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="advanced-features" data-section="advanced-features">
|
|
|
|
|
<FeatureBorderGlow
|
|
|
|
|
title="Enterprise-Grade Solutions"
|
|
|
|
|
description="Advanced capabilities designed for teams that demand more from their development platform"
|
|
|
|
|
tag="Advanced"
|
|
|
|
|
tagIcon={Zap}
|
|
|
|
|
<div id="features" data-section="features">
|
|
|
|
|
<FeatureBento
|
|
|
|
|
title="Powerful AI Features for Amazing Videos"
|
|
|
|
|
description="Everything you need to create, customize, and share professional-quality AI videos that captivate your audience."
|
|
|
|
|
tag="Features"
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
features={[
|
|
|
|
|
{ icon: Shield, title: "Advanced Security", description: "Enterprise-level security with role-based access control, encryption, and compliance certifications" },
|
|
|
|
|
{ icon: Zap, title: "Lightning Performance", description: "Optimized infrastructure ensuring sub-millisecond response times for critical operations" },
|
|
|
|
|
{ icon: Database, title: "Infinite Scalability", description: "Auto-scaling infrastructure handles millions of requests without breaking a sweat" },
|
|
|
|
|
{ icon: Code, title: "API-First Architecture", description: "Comprehensive REST and GraphQL APIs for complete programmatic access and integrations" },
|
|
|
|
|
{ icon: Layers, title: "Custom Workflows", description: "Build custom automation and workflows tailored to your exact business requirements" },
|
|
|
|
|
{ icon: BarChart3, title: "Advanced Reporting", description: "Deep analytics and customizable reports to drive data-informed decisions" }
|
|
|
|
|
{
|
|
|
|
|
title: "Smart AI Generation", description: "Transform text prompts into stunning visuals with advanced AI models trained on millions of videos.", bentoComponent: "orbiting-icons", centerIcon: Wand2,
|
|
|
|
|
items: [
|
|
|
|
|
{ icon: Sparkles, ring: 1, duration: 20 },
|
|
|
|
|
{ icon: Zap, ring: 2, duration: 25 },
|
|
|
|
|
{ icon: TrendingUp, ring: 3, duration: 30 }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Instant Voiceovers", description: "Natural-sounding AI voiceovers in 50+ languages. Choose from multiple voices and accents.", bentoComponent: "reveal-icon", icon: Mail
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Professional Templates", description: "Access hundreds of beautifully designed templates optimized for social media and marketing.", bentoComponent: "reveal-icon", icon: Clapperboard
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "One-Click Customization", description: "Adjust colors, fonts, timing, and effects without any design experience required.", bentoComponent: "reveal-icon", icon: CheckCircle
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Multi-Format Export", description: "Export to all formats optimized for TikTok, Instagram, YouTube, and LinkedIn automatically.", bentoComponent: "reveal-icon", icon: Share2
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Unlimited Exports", description: "Create as many videos as you want. No limits on exports, rendering, or revisions.", bentoComponent: "reveal-icon", icon: Rocket
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardFifteen
|
|
|
|
|
testimonial="DevFlow transformed how our team ships code. The collaboration features alone have cut our deployment time in half. It's the only platform we trust for production workflows."
|
|
|
|
|
rating={5}
|
|
|
|
|
author="Sarah Chen, VP of Engineering at TechCorp"
|
|
|
|
|
avatars={[
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-woman-tech-in-1772607487192-6f565a45.png", alt: "Sarah Chen" },
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-man-tech-entr-1772607488503-6419b6b7.png", alt: "Team Member 1" },
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-woman-cto-app-1772607487241-71fa61de.png", alt: "Team Member 2" },
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-man-product-d-1772607487520-2650cc73.png", alt: "Team Member 3" },
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-woman-startup-1772607487853-bb3ebc8c.png", alt: "Team Member 4" },
|
|
|
|
|
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ATClF1aIrkpoIJzHrVZTgeAMMx/professional-headshot-of-a-man-tech-arch-1772607487174-34765437.png", alt: "Team Member 5" }
|
|
|
|
|
]}
|
|
|
|
|
ratingAnimation="slide-up"
|
|
|
|
|
avatarsAnimation="slide-up"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
carouselMode="buttons"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
|
|
|
<PricingCardEight
|
|
|
|
|
<PricingCardThree
|
|
|
|
|
title="Simple, Transparent Pricing"
|
|
|
|
|
description="Choose the plan that fits your team's needs. Always scale up or down without long-term commitments."
|
|
|
|
|
description="Start free and scale as your video creation needs grow. No credit card required."
|
|
|
|
|
tag="Pricing"
|
|
|
|
|
tagIcon={CreditCard}
|
|
|
|
|
tagIcon={Sparkles}
|
|
|
|
|
plans={[
|
|
|
|
|
{
|
|
|
|
|
id: "starter", badge: "Popular with Teams", badgeIcon: Star,
|
|
|
|
|
price: "$49/month", subtitle: "Perfect for growing teams", buttons: [{ text: "Start Free Trial", href: "https://devflow.dev/signup?plan=starter" }],
|
|
|
|
|
features: ["Up to 10 team members", "50GB storage", "Basic analytics", "Email support", "Standard integrations", "Monthly billing"]
|
|
|
|
|
id: "free", badge: "Perfect for Creators", price: "Free", name: "Starter Plan", buttons: [{ text: "Start Free", href: "https://sparkainvideo.com/signup" }],
|
|
|
|
|
features: [
|
|
|
|
|
"3 videos per month", "720p video quality", "Basic templates", "20+ AI voices", "Community support", "Standard features"
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
|
|
|
|
|
price: "$149/month", subtitle: "For scaling companies", buttons: [{ text: "Start Free Trial", href: "https://devflow.dev/signup?plan=professional" }],
|
|
|
|
|
features: ["Up to 50 team members", "500GB storage", "Advanced analytics", "Priority support", "Custom integrations", "API access", "Advanced security"]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
id: "enterprise", badge: "For Enterprise", badgeIcon: Shield,
|
|
|
|
|
price: "Custom", subtitle: "Unlimited everything", buttons: [{ text: "Contact Sales", href: "https://devflow.dev/contact-sales" }],
|
|
|
|
|
features: ["Unlimited team members", "Unlimited storage", "Custom analytics", "Dedicated support", "Custom development", "SLA guarantee", "On-premise deployment", "Custom compliance"]
|
|
|
|
|
id: "pro", badge: "Most Popular", badgeIcon: Sparkles,
|
|
|
|
|
price: "$29/month", name: "Pro Plan", buttons: [{ text: "Start Free Trial", href: "https://sparkainvideo.com/signup?plan=pro" }],
|
|
|
|
|
features: [
|
|
|
|
|
"Unlimited videos", "4K video quality", "200+ premium templates", "100+ AI voices", "Priority support", "Advanced customization", "Commercial rights", "API access"
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
@@ -157,15 +167,15 @@ export default function LandingPage() {
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactCenter
|
|
|
|
|
tag="Newsletter"
|
|
|
|
|
title="Stay Updated with DevFlow"
|
|
|
|
|
description="Subscribe to our developer newsletter and get exclusive updates, tips, and early access to new features."
|
|
|
|
|
tagIcon={Mail}
|
|
|
|
|
background={{ variant: "rotated-rays-animated-grid" }}
|
|
|
|
|
tag="Ready to Create?"
|
|
|
|
|
title="Start Making Viral Videos Today"
|
|
|
|
|
description="Join thousands of creators making professional AI videos. Get started free - no credit card required."
|
|
|
|
|
tagIcon={Rocket}
|
|
|
|
|
background={{ variant: "gradient-bars" }}
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
inputPlaceholder="your@email.com"
|
|
|
|
|
buttonText="Subscribe"
|
|
|
|
|
termsText="We respect your privacy. Unsubscribe at any time. By subscribing, you agree to our Terms and Privacy Policy."
|
|
|
|
|
buttonText="Get Started Free"
|
|
|
|
|
termsText="We respect your privacy. Start free and upgrade anytime. No credit card required."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -175,28 +185,28 @@ export default function LandingPage() {
|
|
|
|
|
title: "Product", items: [
|
|
|
|
|
{ label: "Features", href: "#features" },
|
|
|
|
|
{ label: "Pricing", href: "#pricing" },
|
|
|
|
|
{ label: "Security", href: "#" },
|
|
|
|
|
{ label: "Roadmap", href: "#" }
|
|
|
|
|
{ label: "How It Works", href: "#how-it-works" },
|
|
|
|
|
{ label: "Templates", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Resources", items: [
|
|
|
|
|
{ label: "Documentation", href: "https://docs.devflow.dev" },
|
|
|
|
|
{ label: "API Reference", href: "https://api.devflow.dev" },
|
|
|
|
|
{ label: "Blog", href: "https://blog.devflow.dev" },
|
|
|
|
|
{ label: "Community", href: "https://community.devflow.dev" }
|
|
|
|
|
{ label: "Documentation", href: "#" },
|
|
|
|
|
{ label: "API Reference", href: "#" },
|
|
|
|
|
{ label: "Blog", href: "#" },
|
|
|
|
|
{ label: "Community", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Company", items: [
|
|
|
|
|
{ label: "About", href: "#" },
|
|
|
|
|
{ label: "Contact", href: "#" },
|
|
|
|
|
{ label: "Contact", href: "#contact" },
|
|
|
|
|
{ label: "Privacy", href: "#" },
|
|
|
|
|
{ label: "Terms", href: "#" }
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
copyrightText="© 2025 DevFlow. All rights reserved."
|
|
|
|
|
copyrightText="© 2025 Spark AI Video. All rights reserved."
|
|
|
|
|
/>
|
|
|
|
|
</ThemeProvider>
|
|
|
|
|
);
|
|
|
|
|
|