Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -3,292 +3,123 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
+import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
-import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="text-shift"
+        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
+        borderRadius="pill"
-        contentWidth="compact"
+        contentWidth="medium"
-        sizing="mediumLargeSizeMediumTitles"
+        sizing="largeSizeMediumTitles"
-        background="aurora"
+        background="fluid"
-        cardStyle="solid"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="radial-glow"
-        secondaryButtonStyle="solid"
+        secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+          <NavbarStyleFullscreen
-      navItems={[
+            navItems={[
-        {
+              { name: "Features", id: "#features" },
-          name: "Features",
+              { name: "How It Works", id: "#how-it-works" },
-          id: "#features",
+              { name: "Testimonials", id: "#testimonials" },
-        },
+              { name: "Pricing", id: "#pricing" },
-        {
+              { name: "FAQ", id: "#faq" }
-          name: "Pricing",
+            ]}
-          id: "#pricing",
+            brandName="VibeAgent"
-        },
+          />
-        {
+        </div>
-          name: "FAQ",
-          id: "#faq",
-        },
-      ]}
-      brandName="VibeAgent"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroBillboardScroll
+          <HeroCarouselLogo
-      background={{
+            logoText="VibeAgent"
-        variant: "sparkles-gradient",
+            description="Next-generation AI agents. Elevate your productivity with our glassmorphic interface, powered by electric intelligence."
-      }}
+            buttons={[{ text: "Launch Agent", href: "#" }]}
-      title="Build AI Agents That Actually Work"
+            slides={[{ videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-3d-glowing-ai-orb-in-a-dark-void-1774547318555-4d2c88d8.mp4" }]} 
-      description="Automate your workflows, connect your tools, and run your business on autopilot with VibeAgent. No code required—start free in minutes."
+          />
-      buttons={[
+        </div>
-        {
-          text: "Get Started Free",
-          href: "#",
-        },
-        {
-          text: "Watch Demo",
-          href: "#",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-high-end-futuristic-software-dashboard-1774547318433-3f27cfbc.png?_wi=1"
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <SplitAbout
+           <InlineImageSplitTextAbout
-      textboxLayout="split"
+              heading={[{ type: 'text', content: 'The Intelligence Your Workflow Deserves' }]}
-      useInvertedBackground={true}
+              useInvertedBackground={true}
-      title="Designed for Efficiency, Built for Scale"
+              buttons={[{ text: 'Explore Capabilities' }]}
-      description="VibeAgent removes the complexity of building custom AI automation. We provide the infrastructure, you focus on the strategy."
+           />
-      bulletPoints={[
+        </div>
-        {
-          title: "No-Code Flexibility",
-          description: "Drag-and-drop your way to sophisticated workflows without writing a single line of code.",
-        },
-        {
-          title: "Deep Integrations",
-          description: "Native connections with Slack, Gmail, WhatsApp, and hundreds of other enterprise tools.",
-        },
-        {
-          title: "Scalable AI Infrastructure",
-          description: "Deploy production-ready agents that handle millions of requests with ease and security.",
-        },
-      ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-conceptual-3d-representation-of-interc-1774547319114-029818b9.png"
-      mediaAnimation="blur-reveal"
-    />
-  </div>
 
-  <div id="features" data-section="features">
+        <div id="features" data-section="features">
-      <FeatureCardNine
+          <FeatureCardNineteen
-      animationType="slide-up"
+            title="Core Capabilities"
-      textboxLayout="default"
+            description="Experience true automation with our advanced feature set."
-      useInvertedBackground={false}
+            textboxLayout="split"
-      features={[
+            useInvertedBackground={false}
-        {
+            features={[
-          id: 1,
+              { id: 1, tag: "AI", title: "Autonomous Logic", subtitle: "Self-Optimizing", description: "Agents that learn your business patterns to predict the next step." },
-          title: "Customer Support Automation",
+              { id: 2, tag: "Neural", title: "Electric Speed", subtitle: "Real-time Processing", description: "Process massive data volumes with sub-millisecond latency." },
-          description: "Automatically resolve tickets and FAQs with our intelligent, contextual AI agents.",
+              { id: 3, tag: "Glass", title: "Unified UI", subtitle: "Immersive Control", description: "A visual interface designed for clarity and power in dark-mode." }
-          phoneOne: {
+            ]}
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-high-end-futuristic-software-dashboard-1774547318433-3f27cfbc.png?_wi=2",
+          />
-          },
+        </div>
-          phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-high-end-futuristic-software-dashboard-1774547318433-3f27cfbc.png?_wi=3",
-          },
-        },
-        {
-          id: 2,
-          title: "Task Management Sync",
-          description: "Connect your project management tools to keep teams aligned and eliminate manual entry.",
-          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-high-end-futuristic-software-dashboard-1774547318433-3f27cfbc.png?_wi=4",
-          },
-          phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-high-end-futuristic-software-dashboard-1774547318433-3f27cfbc.png?_wi=5",
-          },
-        },
-        {
-          id: 3,
-          title: "Data Processing Streams",
-          description: "Automate complex data extraction and reporting tasks across fragmented cloud services.",
-          phoneOne: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-high-end-futuristic-software-dashboard-1774547318433-3f27cfbc.png?_wi=6",
-          },
-          phoneTwo: {
-            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-high-end-futuristic-software-dashboard-1774547318433-3f27cfbc.png?_wi=7",
-          },
-        },
-      ]}
-      showStepNumbers={true}
-      title="Automate Everything"
-      description="See how VibeAgent powers your daily operations."
-    />
-  </div>
 
-  <div id="social-proof" data-section="social-proof">
+        <div id="testimonials" data-section="testimonials">
-      <SocialProofOne
+           <TestimonialCardThirteen
-      textboxLayout="default"
+             title="Voices of Innovation"
-      useInvertedBackground={true}
+             description="What our early adopters say about us."
-      names={[
+             showRating={true}
-        "Slack",
+             textboxLayout="default"
-        "Gmail",
+             useInvertedBackground={false}
-        "WhatsApp",
+             animationType="blur-reveal"
-        "Zapier",
+             testimonials={[
-        "Notion",
+               { id: '1', name: 'Alex Rivers', handle: '@arivers', testimonial: 'VibeAgent is the future of work.', rating: 5 },
-        "GitHub",
+               { id: '2', name: 'Sarah Chen', handle: '@schen', testimonial: 'Unmatched speed and beauty.', rating: 5 },
-        "Stripe",
+               { id: '3', name: 'Mike Ross', handle: '@mross', testimonial: 'Finally, an AI that feels human.', rating: 5 }
-      ]}
+             ]}
-      logos={[
+           />
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/slack-company-logo-on-a-dark-background--1774547317014-9b45841a.png",
+        </div>
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/gmail-company-logo-on-a-dark-background--1774547317433-8fcdb05e.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/whatsapp-company-logo-on-a-dark-backgrou-1774547318655-df8748cb.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/zapier-company-logo-on-a-dark-background-1774547317813-904d14d5.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/notion-company-logo-on-a-dark-background-1774547317182-2f1405d7.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/github-company-logo-on-a-dark-background-1774547317052-e141a82d.png",
-        "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/stripe-company-logo-on-a-dark-background-1774547317800-895bafb1.png",
-      ]}
-      title="Trusted by Innovative Teams"
-      description="Leading startups and mid-market companies use VibeAgent to unlock productivity."
-    />
-  </div>
 
-  <div id="pricing" data-section="pricing">
+        <div id="pricing" data-section="pricing">
-      <PricingCardOne
+          <PricingCardFive
-      animationType="depth-3d"
+            title="Pricing Plans"
-      textboxLayout="default"
+            description="Clear, transparent pricing for your AI journey."
-      useInvertedBackground={false}
+            textboxLayout="default"
-      plans={[
+            useInvertedBackground={false}
-        {
+            animationType="scale-rotate"
-          id: "basic",
+            plans={[
-          badge: "Starter",
+              { id: 'basic', tag: 'Starter', price: '$99', period: '/mo', description: 'Entry level agent access.', button: { text: 'Select' }, featuresTitle: 'Essentials', features: ['1 Agent', 'Basic API Access', 'Shared Support'] },
-          price: "$49",
+              { id: 'pro', tag: 'Professional', price: '$299', period: '/mo', description: 'For growing enterprises.', button: { text: 'Select' }, featuresTitle: 'Pro Features', features: ['5 Agents', 'Advanced API', '24/7 Priority Support'] },
-          subtitle: "For early-stage startups",
+              { id: 'enterprise', tag: 'Enterprise', price: 'Custom', period: '', description: 'Scale without limits.', button: { text: 'Contact Us' }, featuresTitle: 'Custom Features', features: ['Unlimited Agents', 'Dedicated Onboarding', 'Private Cloud'] }
-          features: [
+            ]}
-            "10 Agents",
+          />
-            "50k Tasks/mo",
+        </div>
-            "Community Support",
-          ],
-        },
-        {
-          id: "pro",
-          badge: "Pro",
-          price: "$199",
-          subtitle: "For scaling teams",
-          features: [
-            "50 Agents",
-            "250k Tasks/mo",
-            "Priority Support",
-          ],
-        },
-        {
-          id: "enterprise",
-          badge: "Enterprise",
-          price: "Custom",
-          subtitle: "For growing businesses",
-          features: [
-            "Unlimited Agents",
-            "Custom Integrations",
-            "SLA Support",
-          ],
-        },
-      ]}
-      title="Simple Pricing, Unlimited Potential"
-      description="Choose the right plan for your business growth."
-    />
-  </div>
 
-  <div id="faq" data-section="faq">
+        <div id="faq" data-section="faq">
-      <FaqDouble
+          <FaqDouble 
-      textboxLayout="default"
+            title="Need Answers?"
-      useInvertedBackground={true}
+            description="Find the information you need below."
-      faqs={[
+            textboxLayout="default"
-        {
+            useInvertedBackground={false}
-          id: "1",
+            faqsAnimation="blur-reveal"
-          title: "Do I need coding skills?",
+            faqs={[{ id: '1', title: 'Is dark mode optional?', content: 'Our UI is optimized for a deep-space aesthetic, but can be customized.' }]} 
-          content: "No, our visual builder allows you to build complex workflows easily.",
+          />
-        },
+        </div>
-        {
-          id: "2",
-          title: "Can I integrate with custom tools?",
-          content: "Yes, our flexible API allows you to connect any tool with REST endpoints.",
-        },
-        {
-          id: "3",
-          title: "Is my data secure?",
-          content: "We prioritize security with enterprise-grade encryption and SOC2 compliance.",
-        },
-      ]}
-      title="Frequently Asked Questions"
-      description="Everything you need to know about VibeAgent."
-      faqsAnimation="blur-reveal"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+          <FooterMedia
-      columns={[
+            logoText="VibeAgent"
-        {
+            columns={[{ title: 'Navigation', items: [{ label: 'Docs', href: '#' }, { label: 'Contact', href: '#' }] }]}
-          items: [
+            videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BUcbKJdlAvrxjwCaiKP0q86wGs/a-glowing-neon-cyberpunk-footer-abstract-1774547318777-92d99292.mp4"
-            {
+          />
-              label: "Product",
+        </div>
-              href: "#",
-            },
-            {
-              label: "Integrations",
-              href: "#",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Company",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="VibeAgent"
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #000000;
+  --background: #0a0a0a;
-  --card: #0c0c0c;
+  --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #cee7ff;
+  --primary-cta: #8b5cf6;
   --primary-cta-text: #000000;
-  --secondary-cta: #000000;
+  --secondary-cta: #06b6d4;
   --secondary-cta-text: #ffffff;
-  --accent: #535353;
+  --accent: #8b5cf6;
-  --background-accent: #CEE7FF;
+  --background-accent: #06b6d4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);