Wdipl-react/pages/HireAdminPanelDevelopers.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 { DashboardVector } from "../components/vectors/DashboardVector";
import { BarChart3, Users, Code, CheckCircle, Star, Award, Clock, TrendingUp } from "lucide-react";

const hireAdminPanelDevelopersData = {
  heroBanner: {
    category: "Hire Expert Developers",
    title: "Hire Admin Panels & Dashboards Developers",
    description: "Build powerful, intuitive admin panels and data-driven dashboards that streamline business operations. Our developers create custom management interfaces with advanced analytics and reporting capabilities.",
    primaryCTA: {
      text: "Hire Admin Panel Developers",
      href: "/contact-us",
      icon: BarChart3
    },
    secondaryCTA: {
      text: "View Developer Profiles",
      href: "/hire-talent",
      icon: Users
    }
  },
  
  // Admin Panel specific metrics
  metrics: [
    {
      value: "220+",
      label: "Admin Panels Built",
      description: "Custom management interfaces"
    },
    {
      value: "95%",
      label: "User Adoption Rate",
      description: "Intuitive interface design"
    },
    {
      value: "70%",
      label: "Time Savings",
      description: "Process automation achieved"
    },
    {
      value: "Real-time",
      label: "Data Updates",
      description: "Live dashboard monitoring"
    }
  ],

  // Admin Panel development process
  process: {
    title: "Our Admin Panel Development Process",
    subtitle: "From data analysis to intuitive interfaces",
    steps: [
      {
        number: "01",
        title: "Requirements & Data Analysis",
        description: "Analyze your business processes and data requirements to design the perfect admin interface.",
        icon: <BarChart3 className="w-8 h-8" />,
        details: [
          "Business workflow analysis",
          "Data source identification and mapping",
          "User role and permission planning",
          "Feature prioritization and roadmap"
        ]
      },
      {
        number: "02", 
        title: "Interface Design & UX",
        description: "Create intuitive, efficient interfaces that make complex data management simple and accessible.",
        icon: <Code className="w-8 h-8" />,
        details: [
          "User-centered design approach",
          "Information architecture and navigation",
          "Responsive dashboard layouts",
          "Accessibility and usability optimization"
        ]
      },
      {
        number: "03",
        title: "Development & Integration",
        description: "Build robust admin panels with real-time data processing and seamless system integrations.",
        icon: <CheckCircle className="w-8 h-8" />,
        details: [
          "Custom admin panel development",
          "Database integration and optimization",
          "API development and third-party integrations",
          "Role-based access control implementation"
        ]
      },
      {
        number: "04",
        title: "Analytics & Deployment",
        description: "Deploy with advanced analytics, reporting capabilities, and comprehensive user training.",
        icon: <TrendingUp className="w-8 h-8" />,
        details: [
          "Advanced reporting and analytics",
          "Performance monitoring and optimization",
          "User training and documentation",
          "Ongoing support and maintenance"
        ]
      }
    ]
  },

  // Admin Panel focused FAQs
  faqs: [
    {
      question: "What types of admin panels and dashboards can you develop?",
      answer: "We develop various types including CRM admin panels, inventory management dashboards, analytics dashboards, user management systems, content management interfaces, financial reporting dashboards, and custom business intelligence platforms tailored to your specific needs."
    },
    {
      question: "How do you ensure data security and user access control?",
      answer: "We implement robust security measures including role-based access control (RBAC), data encryption, audit trails, session management, two-factor authentication, and compliance with security standards to protect sensitive business data and user information."
    },
    {
      question: "Can you integrate admin panels with our existing systems?",
      answer: "Yes, we specialize in integrating admin panels with existing databases, CRM systems, ERP platforms, APIs, and third-party services. We ensure seamless data flow and maintain data consistency across all your business systems."
    },
    {
      question: "What technologies do you use for admin panel development?",
      answer: "We use modern technologies including React, Vue.js, Angular for frontend; Node.js, Python Django, .NET Core for backend; and advanced charting libraries like D3.js, Chart.js for data visualization, along with databases optimized for reporting and analytics."
    },
    {
      question: "How do you handle real-time data updates and notifications?",
      answer: "We implement real-time features using WebSockets, Server-Sent Events, and push notification services to ensure your admin panels display live data updates, instant alerts, and real-time system status monitoring for critical business operations."
    },
    {
      question: "Do you provide training and documentation for admin panel users?",
      answer: "Yes, we provide comprehensive user training, detailed documentation, video tutorials, and ongoing support to ensure your team can effectively use all features of the admin panel and maximize productivity from day one."
    }
  ]
};

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

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

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

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

      {/* FAQ Section */}
      <section>
        <FAQSection 
          title="Admin Panel Development FAQs"
          subtitle="Everything you need to know about hiring admin panel developers"
          faqs={hireAdminPanelDevelopersData.faqs}
        />
      </section>

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

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

      <Footer />
    </div>
  );
}