From 2d3901bbedcd78d4682ec6dfa242bef68ae81d2d Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 4 Mar 2026 07:02:43 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 198 +++++++++++++++++++++++++----------------------
 1 file changed, 104 insertions(+), 94 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ed08b05..58c7cab 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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>
   );