Services Page - Copy this React, Tailwind Component to your project
import-React-from-"react";-import-{-FaChartBar,-FaDatabase,-FaChartPie,-FaChartLine,-FaCloudUploadAlt,-FaBrain-}-from-"react-icons/fa";-const-services-=-[-{-id:-1,-title:-"Predictive-Analytics",-description:-"Leverage-advanced-algorithms-to-forecast-trends-and-make-data-driven-decisions-for-your-business-growth.",-image:-"https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",-icon:-FaChartLine-},-{-id:-2,-title:-"Big-Data-Processing",-description:-"Process-and-analyze-large-datasets-efficiently-using-cutting-edge-technologies-and-scalable-solutions.",-image:-"https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",-icon:-FaDatabase-},-{-id:-3,-title:-"Business-Intelligence",-description:-"Transform-raw-data-into-meaningful-insights-with-our-comprehensive-BI-solutions-and-visualizations.",-image:-"https://images.unsplash.com/photo-1560221328-12fe60f83ab8?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",-icon:-FaChartBar-},-{-id:-4,-title:-"Data-Visualization",-description:-"Create-compelling-visual-stories-from-your-data-with-interactive-dashboards-and-reports.",-image:-"https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",-icon:-FaChartPie-},-{-id:-5,-title:-"Cloud-Analytics",-description:-"Harness-the-power-of-cloud-computing-for-scalable-and-secure-data-analytics-solutions.",-image:-"https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",-icon:-FaCloudUploadAlt-},-{-id:-6,-title:-"Machine-Learning-Solutions",-description:-"Implement-AI-driven-analytics-to-uncover-hidden-patterns-and-automate-decision-making-processes.",-image:-"https://images.unsplash.com/photo-1555949963-aa79dcee981c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",-icon:-FaBrain-}-];-const-ServiceItem-=-({-service-})-=>-{-return-(-<div-className="group-relative-overflow-hidden-rounded-2xl-bg-white-shadow-xl-transition-all-duration-300-hover:shadow-2xl-hover:scale-[1.02]">-<div-className="aspect-video-w-full-overflow-hidden">-<img-src={service.image}-alt={service.title}-className="h-full-w-full-object-cover-transition-transform-duration-300-group-hover:scale-110"-onError={(e)-=>-{-e.target.onerror-=-null;-e.target.src-=-"https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80";-}}-/>-<div-className="absolute-inset-0-bg-gradient-to-t-from-black/70-to-transparent">-<div-className="absolute-bottom-0-left-0-right-0-p-6">-<div-className="flex-items-center-gap-4">-<div-className="rounded-full-bg-white/20-p-3-backdrop-blur-sm">-<service.icon-className="text-white-text-2xl"-/>-</div>-<h3-className="text-2xl-font-bold-text-white">{service.title}</h3>-</div>-</div>-</div>-</div>-<div-className="p-6">-<p-className="text-gray-600-text-lg-leading-relaxed-mb-6">{service.description}</p>-<button-className="group-inline-flex-items-center-gap-2-rounded-lg-bg-blue-600-px-6-py-3-text-white-transition-all-duration-300-hover:bg-blue-700">-Learn-More-<svg-className="w-5-h-5-transition-transform-duration-300-group-hover:translate-x-1"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-strokeLinecap="round"-strokeLinejoin="round"-strokeWidth="2"-d="M9-5l7-7-7-7"-/>-</svg>-</button>-</div>-</div>-);-};-const-ServicesPage-=-()-=>-{-return-(-<div-className="min-h-screen-bg-gradient-to-br-from-blue-50-via-white-to-purple-50-py-20-px-4-sm:px-6-lg:px-8">-<div-className="max-w-7xl-mx-auto">-<div-className="text-center-mb-20">-<h1-className="text-5xl-font-bold-text-transparent-bg-clip-text-bg-gradient-to-r-from-blue-600-to-purple-600-mb-6-sm:text-6xl-md:text-7xl">-Our-Data-Analysis-Services-</h1>-<p-className="text-xl-text-gray-600-max-w-3xl-mx-auto">-Unlock-the-power-of-your-data-with-our-comprehensive-suite-of-analysis-services-</p>-</div>-<div-className="grid-grid-cols-1-md:grid-cols-2-gap-8-lg:gap-12">-{services.map((service)-=>-(-<ServiceItem-key={service.id}-service={service}-/>-))}-</div>-</div>-</div>-);-};-export-default-ServicesPage;-make-this-code-new-design-avoid-cards-user-listing-or-tree
