From d5fe73a00f6059a2618cf18cc3fcf822b4453408 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 16 Mar 2026 18:28:42 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 428 ++++++++++-------------------------------------
 1 file changed, 93 insertions(+), 335 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index c328735..06711da 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,8 +8,6 @@ import FeatureBento from "@/components/sections/feature/FeatureBento";
 import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
 import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
 import FaqSplitText from "@/components/sections/faq/FaqSplitText";
-import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
-import BlogCardTwo from "@/components/sections/blog/BlogCardTwo";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import Link from "next/link";
 import {
@@ -33,9 +31,6 @@ import {
   TrendingUp,
   Heart,
   Star,
-  DollarSign,
-  Crown,
-  Newspaper,
 } from "lucide-react";
 
 export default function HomePage() {
@@ -86,61 +81,30 @@ export default function HomePage() {
           background={{ variant: "rotated-rays-static" }}
           carouselItems={[
             {
-              id: "carousel-1",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-sleek-modern-software-development-plat-1773685170875-ebd384df.png",
-              imageAlt: "DevPlatform Dashboard Interface",
-            },
+              id: "carousel-1",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-sleek-modern-software-development-plat-1773685170875-ebd384df.png",              imageAlt: "DevPlatform Dashboard Interface"},
             {
-              id: "carousel-2",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/an-abstract-visualization-showing-a-port-1773685170493-2c9cd943.png",
-              imageAlt: "Portable Environment",
-            },
+              id: "carousel-2",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/an-abstract-visualization-showing-a-port-1773685170493-2c9cd943.png",              imageAlt: "Portable Environment"},
             {
-              id: "carousel-3",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-futuristic-visualization-of-ai-and-mac-1773685169729-91524a57.png",
-              imageAlt: "Multi-LLM Integration",
-            },
+              id: "carousel-3",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-futuristic-visualization-of-ai-and-mac-1773685169729-91524a57.png",              imageAlt: "Multi-LLM Integration"},
             {
-              id: "carousel-4",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-technical-stack-visualization-showing--1773685170525-e4e231c0.png",
-              imageAlt: "Full-Stack Capabilities",
-            },
+              id: "carousel-4",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-technical-stack-visualization-showing--1773685170525-e4e231c0.png",              imageAlt: "Full-Stack Capabilities"},
             {
-              id: "carousel-5",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-modern-mobile-app-generation-tool-inte-1773685170394-a4b3434d.png",
-              imageAlt: "Mobile App Generation",
-            },
+              id: "carousel-5",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-modern-mobile-app-generation-tool-inte-1773685170394-a4b3434d.png",              imageAlt: "Mobile App Generation"},
             {
-              id: "carousel-6",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/an-infrastructure-management-dashboard-s-1773685172051-eb50a6c6.png",
-              imageAlt: "Infrastructure Tools",
-            },
+              id: "carousel-6",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/an-infrastructure-management-dashboard-s-1773685172051-eb50a6c6.png",              imageAlt: "Infrastructure Tools"},
           ]}
           autoPlay={true}
           autoPlayInterval={5000}
         />
       </div>
 
-      {/* About Section */}
-      <div id="about" data-section="about" className="mx-auto px-4 md:px-6">
-        <TextAbout
-          tag="Platform"
-          tagIcon={Rocket}
-          tagAnimation="slide-up"
-          title="What is DevPlatform?"
-          useInvertedBackground={false}
-          buttons={[{ text: "Learn More", href: "/features" }]}
-          buttonAnimation="slide-up"
-        />
-      </div>
-
-      {/* Features Section */}
+      {/* Features Overview Section */}
       <div id="features" data-section="features" className="mx-auto px-4 md:px-6">
         <FeatureBento
           title="Powerful Features"
@@ -153,34 +117,22 @@ export default function HomePage() {
           useInvertedBackground={false}
           features={[
             {
-              title: "Portable Environment",
-              description:
-                "Develop anywhere, deploy everywhere. Your environment travels with you.",
-              bentoComponent: "icon-info-cards",
-              items: [
+              title: "Portable Environment",              description:
+                "Develop anywhere, deploy everywhere. Your environment travels with you.",              bentoComponent: "icon-info-cards",              items: [
                 {
                   icon: Cloud,
-                  label: "Cloud Ready",
-                  value: "Instant Setup",
-                },
+                  label: "Cloud Ready",                  value: "Instant Setup"},
                 {
                   icon: GitBranch,
-                  label: "Version Control",
-                  value: "Git Native",
-                },
+                  label: "Version Control",                  value: "Git Native"},
                 {
                   icon: Zap,
-                  label: "Quick Start",
-                  value: "Zero Config",
-                },
+                  label: "Quick Start",                  value: "Zero Config"},
               ],
             },
             {
-              title: "Multi-LLM Integration",
-              description:
-                "Leverage multiple AI models for intelligent code generation and assistance.",
-              bentoComponent: "orbiting-icons",
-              centerIcon: Brain,
+              title: "Multi-LLM Integration",              description:
+                "Leverage multiple AI models for intelligent code generation and assistance.",              bentoComponent: "orbiting-icons",              centerIcon: Brain,
               items: [
                 {
                   icon: Sparkles,
@@ -205,114 +157,30 @@ export default function HomePage() {
               ],
             },
             {
-              title: "Full-Stack Capabilities",
-              description:
-                "Build complete applications without context switching between tools.",
-              bentoComponent: "3d-stack-cards",
-              items: [
+              title: "Full-Stack Capabilities",              description:
+                "Build complete applications without context switching between tools.",              bentoComponent: "3d-stack-cards",              items: [
                 {
                   icon: Code,
-                  title: "Frontend",
-                  subtitle: "React, Vue, Svelte",
-                  detail: "Modern UI frameworks",
-                },
+                  title: "Frontend",                  subtitle: "React, Vue, Svelte",                  detail: "Modern UI frameworks"},
                 {
                   icon: Server,
-                  title: "Backend",
-                  subtitle: "Node, Python, Go",
-                  detail: "Powerful servers",
-                },
+                  title: "Backend",                  subtitle: "Node, Python, Go",                  detail: "Powerful servers"},
                 {
                   icon: Database,
-                  title: "Database",
-                  subtitle: "SQL, NoSQL, Graph",
-                  detail: "Any data store",
-                },
+                  title: "Database",                  subtitle: "SQL, NoSQL, Graph",                  detail: "Any data store"},
               ],
             },
-            {
-              title: "Mobile App Generation",
-              description: "Create native mobile apps from a single codebase instantly.",
-              bentoComponent: "phone",
-              statusIcon: CheckCircle,
-              alertIcon: AlertCircle,
-              alertTitle: "App Status",
-              alertMessage: "Build successful",
-              apps: [
-                {
-                  name: "React Native",
-                  icon: Smartphone,
-                },
-                {
-                  name: "Flutter",
-                  icon: Smartphone,
-                },
-                {
-                  name: "Swift",
-                  icon: Apple,
-                },
-                {
-                  name: "Kotlin",
-                  icon: Smartphone,
-                },
-                {
-                  name: "PWA",
-                  icon: Globe,
-                },
-                {
-                  name: "Expo",
-                  icon: Smartphone,
-                },
-                {
-                  name: "Capacitor",
-                  icon: Smartphone,
-                },
-                {
-                  name: "NativeScript",
-                  icon: Smartphone,
-                },
-              ],
-            },
-            {
-              title: "Infrastructure Tools",
-              description:
-                "Deploy and manage infrastructure with enterprise-grade tooling.",
-              bentoComponent: "timeline",
-              heading: "Deployment Pipeline",
-              subheading: "From code to production",
-              items: [
-                {
-                  label: "Build",
-                  detail: "Compile and test",
-                },
-                {
-                  label: "Deploy",
-                  detail: "Push to servers",
-                },
-                {
-                  label: "Monitor",
-                  detail: "Real-time metrics",
-                },
-              ],
-              completedLabel: "All systems ready",
-            },
-            {
-              title: "Security Features",
-              description: "Enterprise-grade security for peace of mind.",
-              bentoComponent: "reveal-icon",
-              icon: Shield,
-            },
           ]}
           carouselMode="buttons"
         />
       </div>
 
-      {/* Metrics Section */}
+      {/* Value Propositions Section */}
       <div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
         <MetricCardThree
-          title="Trusted by Teams Worldwide"
-          description="Join thousands of developers using DevPlatform to accelerate their development."
-          tag="Impact"
+          title="Why Choose DevPlatform"
+          description="Three core value propositions that set us apart from the competition."
+          tag="Benefits"
           tagIcon={TrendingUp}
           tagAnimation="slide-up"
           animationType="blur-reveal"
@@ -320,29 +188,14 @@ export default function HomePage() {
           useInvertedBackground={false}
           metrics={[
             {
-              id: "metric-1",
-              icon: Users,
-              title: "Active Users",
-              value: "50K+",
-            },
+              id: "metric-1",              icon: Zap,
+              title: "Accelerated Development",              value: "50% Faster"},
             {
-              id: "metric-2",
-              icon: Zap,
-              title: "Deployments Daily",
-              value: "100K+",
-            },
+              id: "metric-2",              icon: Users,
+              title: "Team Collaboration",              value: "Real-time Sync"},
             {
-              id: "metric-3",
-              icon: Globe,
-              title: "Countries",
-              value: "120+",
-            },
-            {
-              id: "metric-4",
-              icon: Zap,
-              title: "Avg Build Time",
-              value: "2min",
-            },
+              id: "metric-3",              icon: Globe,
+              title: "Global Deployment",              value: "120+ Countries"},
           ]}
         />
       </div>
@@ -360,69 +213,40 @@ export default function HomePage() {
           useInvertedBackground={false}
           testimonials={[
             {
-              id: "testimonial-1",
-              name: "Alex Johnson",
-              role: "Lead Developer",
-              testimonial:
-                "DevPlatform revolutionized how we develop. We cut our deployment time in half and our team productivity skyrocketed.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-software-de-1773685169826-0e87a6fd.png",
-              icon: Star,
+              id: "testimonial-1",              name: "Alex Johnson",              role: "Lead Developer",              testimonial:
+                "DevPlatform revolutionized how we develop. We cut our deployment time in half and our team productivity skyrocketed.",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-software-de-1773685169826-0e87a6fd.png",              icon: Star,
             },
             {
-              id: "testimonial-2",
-              name: "Sarah Chen",
-              role: "CTO",
-              testimonial:
-                "The multi-LLM integration alone is worth it. Our developers write better code, faster than ever before.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-female-cto--1773685169773-0c5a4cce.png",
-              icon: Star,
+              id: "testimonial-2",              name: "Sarah Chen",              role: "CTO",              testimonial:
+                "The multi-LLM integration alone is worth it. Our developers write better code, faster than ever before.",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-female-cto--1773685169773-0c5a4cce.png",              icon: Star,
             },
             {
-              id: "testimonial-3",
-              name: "Michael Roberts",
-              role: "Product Manager",
-              testimonial:
-                "From frontend to backend to mobile, everything in one platform. No more context switching between tools.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-product-man-1773685169529-2cb7f80f.png",
-              icon: Star,
-            },
-            {
-              id: "testimonial-4",
-              name: "Emily Zhang",
-              role: "Startup Founder",
-              testimonial:
-                "As a founder, DevPlatform lets me focus on building, not managing infrastructure. Game changer.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-startup-fou-1773685171884-d6a614fb.png",
-              icon: Star,
-            },
-            {
-              id: "testimonial-5",
-              name: "David Kim",
-              role: "Engineering Director",
-              testimonial:
-                "Enterprise-grade security, scalability, and support. Exactly what we needed for our growing team.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-an-engineerin-1773685169886-167fc062.png",
-              icon: Star,
-            },
-            {
-              id: "testimonial-6",
-              name: "Lisa Anderson",
-              role: "Solutions Architect",
-              testimonial:
-                "The infrastructure tools are incredible. We went from months of setup to days. Highly recommended.",
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-solutions-a-1773685170117-8d88e1d7.png",
-              icon: Star,
+              id: "testimonial-3",              name: "Michael Roberts",              role: "Product Manager",              testimonial:
+                "From frontend to backend to mobile, everything in one platform. No more context switching between tools.",              imageSrc:
+                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3B2QgD03BGzZCcdct8OQoSGmHLm/a-professional-headshot-of-a-product-man-1773685169529-2cb7f80f.png",              icon: Star,
             },
           ]}
         />
       </div>
 
+      {/* Call-to-Action Sections */}
+      <div id="cta-section" data-section="cta-section" className="mx-auto px-4 md:px-6 py-12">
+        <div className="flex flex-col gap-6 items-center justify-center">
+          <h2 className="text-4xl font-bold text-center">Ready to Transform Your Development Workflow?</h2>
+          <p className="text-lg text-center max-w-2xl">Start building faster with DevPlatform today. Get full access to all features with our free plan.</p>
+          <div className="flex gap-4">
+            <button className="px-8 py-3 bg-[var(--primary-cta)] text-[var(--primary-cta-text)] rounded-lg font-semibold hover:opacity-90">
+              Start Free Trial
+            </button>
+            <button className="px-8 py-3 border border-[var(--primary-cta)] text-[var(--primary-cta)] rounded-lg font-semibold hover:bg-[var(--primary-cta)] hover:text-[var(--primary-cta-text)]">
+              Schedule Demo
+            </button>
+          </div>
+        </div>
+      </div>
+
       {/* FAQ Section */}
       <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6">
         <FaqSplitText
@@ -432,53 +256,23 @@ export default function HomePage() {
           useInvertedBackground={false}
           faqs={[
             {
-              id: "faq-1",
-              title: "What is DevPlatform?",
-              content:
-                "DevPlatform is an all-in-one development platform that combines portable environments, multi-LLM integration, full-stack capabilities, mobile app generation, and enterprise infrastructure tools in one unified interface.",
-            },
+              id: "faq-1",              title: "What is DevPlatform?",              content:
+                "DevPlatform is an all-in-one development platform that combines portable environments, multi-LLM integration, full-stack capabilities, mobile app generation, and enterprise infrastructure tools in one unified interface."},
             {
-              id: "faq-2",
-              title: "How does the portable environment work?",
-              content:
-                "Your entire development environment is containerized and can run anywhere. Deploy to any cloud provider, on-premises, or locally without configuration changes.",
-            },
+              id: "faq-2",              title: "How does the portable environment work?",              content:
+                "Your entire development environment is containerized and can run anywhere. Deploy to any cloud provider, on-premises, or locally without configuration changes."},
             {
-              id: "faq-3",
-              title: "What LLMs are supported?",
-              content:
-                "We support integration with OpenAI, Google's Gemini, Claude, and open-source models like Llama. You can mix and match models based on your needs.",
-            },
+              id: "faq-3",              title: "What LLMs are supported?",              content:
+                "We support integration with OpenAI, Google's Gemini, Claude, and open-source models like Llama. You can mix and match models based on your needs."},
             {
-              id: "faq-4",
-              title: "Can I use DevPlatform for full-stack development?",
-              content:
-                "Yes! Build frontend with React/Vue/Svelte, backend with Node/Python/Go, databases with SQL/NoSQL/Graph, and all from a single integrated environment.",
-            },
+              id: "faq-4",              title: "Can I use DevPlatform for full-stack development?",              content:
+                "Yes! Build frontend with React/Vue/Svelte, backend with Node/Python/Go, databases with SQL/NoSQL/Graph, and all from a single integrated environment."},
             {
-              id: "faq-5",
-              title: "How do I generate mobile apps?",
-              content:
-                "Our mobile app generator uses your codebase to automatically create native Android, iOS, and progressive web apps without writing platform-specific code.",
-            },
+              id: "faq-5",              title: "How do I generate mobile apps?",              content:
+                "Our mobile app generator uses your codebase to automatically create native Android, iOS, and progressive web apps without writing platform-specific code."},
             {
-              id: "faq-6",
-              title: "What security features are included?",
-              content:
-                "We provide end-to-end encryption, multi-factor authentication, role-based access control, audit logging, SOC 2 compliance, and dedicated security infrastructure for enterprise users.",
-            },
-            {
-              id: "faq-7",
-              title: "Is there a free trial?",
-              content:
-                "Yes, our Free tier includes basic tools and limited features. Start building immediately with no credit card required. Upgrade anytime.",
-            },
-            {
-              id: "faq-8",
-              title: "What support is available?",
-              content:
-                "Free users get community support, Pro users get priority email support, and Enterprise users get 24/7 dedicated support with a dedicated account manager.",
-            },
+              id: "faq-6",              title: "What security features are included?",              content:
+                "We provide end-to-end encryption, multi-factor authentication, role-based access control, audit logging, SOC 2 compliance, and dedicated security infrastructure for enterprise users."},
           ]}
         />
       </div>
@@ -490,87 +284,51 @@ export default function HomePage() {
           copyrightText="© 2025 DevPlatform. All rights reserved."
           columns={[
             {
-              title: "Product",
-              items: [
+              title: "Product",              items: [
                 {
-                  label: "Features",
-                  href: "/features",
-                },
+                  label: "Features",                  href: "/features"},
                 {
-                  label: "Pricing",
-                  href: "/pricing",
-                },
+                  label: "Pricing",                  href: "/pricing"},
                 {
-                  label: "Security",
-                  href: "#security",
-                },
+                  label: "Security",                  href: "#security"},
                 {
-                  label: "Roadmap",
-                  href: "#roadmap",
-                },
+                  label: "Roadmap",                  href: "#roadmap"},
               ],
             },
             {
-              title: "Developers",
-              items: [
+              title: "Developers",              items: [
                 {
-                  label: "Documentation",
-                  href: "/docs",
-                },
+                  label: "Documentation",                  href: "/docs"},
                 {
-                  label: "API Reference",
-                  href: "/docs/api",
-                },
+                  label: "API Reference",                  href: "/docs/api"},
                 {
-                  label: "GitHub",
-                  href: "https://github.com/devplatform",
-                },
+                  label: "GitHub",                  href: "https://github.com/devplatform"},
                 {
-                  label: "Community",
-                  href: "#community",
-                },
+                  label: "Community",                  href: "#community"},
               ],
             },
             {
-              title: "Company",
-              items: [
+              title: "Company",              items: [
                 {
-                  label: "About",
-                  href: "/about",
-                },
+                  label: "About",                  href: "/about"},
                 {
-                  label: "Blog",
-                  href: "/blog",
-                },
+                  label: "Blog",                  href: "/blog"},
                 {
-                  label: "Careers",
-                  href: "/careers",
-                },
+                  label: "Careers",                  href: "/careers"},
                 {
-                  label: "Contact",
-                  href: "/contact",
-                },
+                  label: "Contact",                  href: "/contact"},
               ],
             },
             {
-              title: "Legal",
-              items: [
+              title: "Legal",              items: [
                 {
-                  label: "Privacy Policy",
-                  href: "/privacy",
-                },
+                  label: "Privacy Policy",                  href: "/privacy"},
                 {
-                  label: "Terms of Service",
-                  href: "/terms",
-                },
+                  label: "Terms of Service",                  href: "/terms"},
                 {
-                  label: "Cookie Policy",
-                  href: "/cookies",
-                },
+                  label: "Cookie Policy",                  href: "/cookies"},
                 {
-                  label: "Status",
-                  href: "https://status.devplatform.dev",
-                },
+                  label: "Status",                  href: "https://status.devplatform.dev"},
               ],
             },
           ]}
@@ -578,4 +336,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
-- 
2.49.1