Wdipl-react/pages/HireCustomWebAppDevelopers.tsx

import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { HireTalentHeroBanner } from "../components/HireTalentHeroBanner";
import { FAQSection } from "../components/FAQSection";
import { AppSuccessMetrics } from "../components/AppSuccessMetrics";
import { StepsIllustrated } from "../components/StepsIllustrated";
import { CarouselTestimonials } from "../components/CarouselTestimonials";
import { ResourceCards } from "../components/ResourceCards";
import { SplitCallToAction } from "../components/SplitCallToAction";
import { FrontendVector } from "../components/vectors/FrontendVector";
import { Monitor, Users, Code, CheckCircle, Star, Award, Clock, TrendingUp } from "lucide-react";

const hireCustomWebAppDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire Custom Web Application Developers",
    description: "Build tailored web applications that perfectly match your business requirements. Our developers create scalable, secure, and user-friendly custom web solutions using cutting-edge technologies.",
    primaryCTA: {
      text: "Hire Custom Web Developers",
      href: "/contact-us",
      icon: Monitor
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // Custom Web App specific metrics
  metrics: [
    {
      value: "250+",
      label: "Custom Web Apps Built",
      description: "Tailored solutions delivered"
    },
    {
      value: "98%",
      label: "Client Satisfaction",
      description: "Project success rate"
    },
    {
      value: "60%",
      label: "Faster Development",
      description: "Using modern frameworks"
    },
    {
      value: "100%",
      label: "Responsive Design",
      description: "Mobile-first approach"
    }
  ],

  // Custom Web App development process
  process: {
    title: "Our Custom Web Application Process",
    subtitle: "From business analysis to deployment",
    steps: [
      {
        number: "01",
        title: "Business Analysis & Planning",
        description: "Deep dive into your business requirements to design the perfect custom web application architecture.",
        icon: <Monitor className="w-8 h-8" />,
        details: [
          "Requirements gathering and analysis",
          "User persona and journey mapping",
          "Technology stack selection",
          "Project timeline and milestone planning"
        ]
      },
      {
        number: "02", 
        title: "Custom Design & Prototyping",
        description: "Create unique designs and interactive prototypes tailored to your brand and user needs.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "Custom UI/UX design system",
          "Interactive prototypes and wireframes",
          "Brand integration and consistency",
          "User experience optimization"
        ]
      },
      {
        number: "03",
        title: "Development & Integration",
        description: "Build your custom web application with modern technologies and seamless integrations.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Modern framework implementation",
          "Database design and optimization",
          "API development and integration",
          "Third-party service connections"
        ]
      },
      {
        number: "04",
        title: "Testing & Launch",
        description: "Comprehensive testing and smooth deployment with ongoing support and maintenance.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Comprehensive testing protocols",
          "Performance optimization",
          "Security vulnerability testing",
          "Launch support and monitoring"
        ]
      }
    ]
  },

  // Custom Web App focused FAQs
  faqs: [
    {
      question: "What types of custom web applications can you develop?",
      answer: "We develop a wide range of custom web applications including CRM systems, inventory management tools, project management platforms, e-learning portals, booking systems, and industry-specific business applications tailored to your unique requirements."
    },
    {
      question: "How do you ensure the web application meets our specific business needs?",
      answer: "We start with thorough business analysis, involving stakeholders in requirement gathering sessions, creating detailed specifications, and developing prototypes for feedback. Our agile approach ensures continuous alignment with your business objectives throughout development."
    },
    {
      question: "What technologies do you use for custom web application development?",
      answer: "We use modern technologies including React, Angular, Vue.js for frontend; Node.js, Python Django/Flask, .NET Core, PHP Laravel for backend; and databases like PostgreSQL, MongoDB, MySQL based on your specific requirements and scalability needs."
    },
    {
      question: "How do you handle data security and user privacy?",
      answer: "We implement robust security measures including data encryption, secure authentication systems, role-based access control, regular security audits, and compliance with regulations like GDPR, HIPAA, and industry-specific standards."
    },
    {
      question: "Can you integrate the web application with our existing systems?",
      answer: "Yes, we specialize in system integration and can connect your custom web application with existing CRM, ERP, payment gateways, databases, and other business systems through APIs and custom integration solutions."
    },
    {
      question: "What ongoing support and maintenance do you provide?",
      answer: "We provide comprehensive post-launch support including regular updates, security patches, performance monitoring, bug fixes, feature enhancements, and technical support to ensure your application continues to meet evolving business needs."
    }
  ]
};

export function HireCustomWebAppDevelopers() {
  return (
    <div className="dark min-h-screen bg-background">
      {/* <Navigation /> */}
      
      {/* Hero Section with FrontendVector */}
      <HireTalentHeroBanner
        vectorComponent={FrontendVector}
        category={hireCustomWebAppDevelopersData.heroBanner.category}
        title={hireCustomWebAppDevelopersData.heroBanner.title}
        description={hireCustomWebAppDevelopersData.heroBanner.description}
        primaryCTA={hireCustomWebAppDevelopersData.heroBanner.primaryCTA}
        secondaryCTA={hireCustomWebAppDevelopersData.heroBanner.secondaryCTA}
      />

      {/* Success Metrics */}
      {/* <section>
        <AppSuccessMetrics metrics={hireCustomWebAppDevelopersData.metrics} />
      </section> */}

      {/* Development Process */}
      <section>
        <StepsIllustrated 
          title={hireCustomWebAppDevelopersData.process.title}
          subtitle={hireCustomWebAppDevelopersData.process.subtitle}
          steps={hireCustomWebAppDevelopersData.process.steps}
        />
      </section>

      {/* Client Testimonials */}
      <section>
        <CarouselTestimonials />
      </section>

      {/* FAQ Section */}
      <section>
        <FAQSection 
          title="Custom Web Application FAQs"
          subtitle="Everything you need to know about hiring custom web app developers"
          faqs={hireCustomWebAppDevelopersData.faqs}
        />
      </section>

      {/* Resources */}
      <section>
        <ResourceCards />
      </section>

      {/* Call to Action */}
      <section>
        <SplitCallToAction />
      </section>

      {/* <Footer /> */}
    </div>
  );
}