A
Anonymous

Secure Your Digital Future

import-React,-{-useState-}-from-"react";-import-{-FaLaptopCode,-FaMobile,-FaDesktop,-FaCloud,-FaDatabase,-FaCode,-FaShieldAlt,-FaLock-}-from-"react-icons/fa";-const-WebAppApplications-=-()-=>-{-const-[applications]-=-useState([-{-id:-1,-title:-"Web-Development",-description:-"Modern-web-applications-built-with-cutting-edge-technologies",-icon:-<FaLaptopCode-className="text-4xl-text-indigo-600"-/>,-image:-"https://images.unsplash.com/photo-1517694712202-14dd9538aa97"-},-{-id:-2,-title:-"Mobile-Applications",-description:-"Native-and-cross-platform-mobile-app-development",-icon:-<FaMobile-className="text-4xl-text-blue-600"-/>,-image:-"https://images.unsplash.com/photo-1551650975-87deedd944c3"-},-{-id:-3,-title:-"Desktop-Solutions",-description:-"Powerful-desktop-applications-for-enhanced-productivity",-icon:-<FaDesktop-className="text-4xl-text-green-600"-/>,-image:-"https://images.unsplash.com/photo-1537498425277-c283d32ef9db"-},-{-id:-4,-title:-"Cloud-Services",-description:-"Scalable-cloud-solutions-for-modern-businesses",-icon:-<FaCloud-className="text-4xl-text-purple-600"-/>,-image:-"https://images.unsplash.com/photo-1544197150-b99a580bb7a8"-},-{-id:-5,-title:-"Database-Management",-description:-"Efficient-database-design-and-optimization",-icon:-<FaDatabase-className="text-4xl-text-red-600"-/>,-image:-"https://images.unsplash.com/photo-1544197150-b99a580bb7a8"-},-{-id:-6,-title:-"Custom-Solutions",-description:-"Tailored-software-solutions-for-specific-needs",-icon:-<FaCode-className="text-4xl-text-yellow-600"-/>,-image:-"https://images.unsplash.com/photo-1516116216624-53e697fedbea"-}-]);-return-(-<div>-{/*-Updated-Hero-Section-with-enhanced-background-design-*/}-<section-className="relative-bg-gradient-to-r-from-gray-900-via-blue-900-to-purple-900-text-white-overflow-hidden">-<div-className="absolute-inset-0-bg-pattern">-<div-className="absolute-inset-0-bg-[url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b')]-opacity-20-bg-cover-bg-center-mix-blend-overlay"></div>-<div-className="absolute-inset-0-bg-gradient-to-t-from-gray-900-via-transparent-to-transparent"></div>-<div-className="absolute-inset-0-bg-grid-white/[0.05]"></div>-</div>-<div-className="relative-container-mx-auto-px-4-py-32">-<div-className="max-w-3xl">-<div-className="flex-items-center-space-x-4-mb-8-animate-pulse">-<FaShieldAlt-className="text-5xl-text-blue-400"-/>-<FaLock-className="text-5xl-text-green-400"-/>-</div>-<h1-className="text-6xl-font-bold-mb-6-bg-clip-text-text-transparent-bg-gradient-to-r-from-blue-400-to-purple-400">-Secure-Your-Digital-Future-</h1>-<p-className="text-xl-text-gray-300-mb-8-leading-relaxed">-Protect-your-business-with-enterprise-grade-cybersecurity-solutions.-Stay-ahead-of-threats-with-our-advanced-security-measures-and-expert-consulting-services.-</p>-<div-className="flex-space-x-4">-<button-className="px-8-py-3-bg-gradient-to-r-from-blue-500-to-blue-700-hover:from-blue-600-hover:to-blue-800-rounded-lg-font-semibold-transition-all-duration-300-transform-hover:scale-105-shadow-lg-hover:shadow-blue-500/50">-Get-Protected-Now-</button>-<button-className="px-8-py-3-border-2-border-white/80-hover:bg-white-hover:text-gray-900-rounded-lg-font-semibold-transition-all-duration-300-transform-hover:scale-105-backdrop-blur-sm">-Learn-More-</button>-</div>-<div-className="mt-12-grid-grid-cols-3-gap-8-max-w-2xl">-<div-className="text-center-p-4-backdrop-blur-sm-bg-white/5-rounded-lg">-<h3-className="text-3xl-font-bold-text-blue-400">99.9%</h3>-<p-className="text-gray-400">Threat-Detection</p>-</div>-<div-className="text-center-p-4-backdrop-blur-sm-bg-white/5-rounded-lg">-<h3-className="text-3xl-font-bold-text-green-400">24/7</h3>-<p-className="text-gray-400">Monitoring</p>-</div>-<div-className="text-center-p-4-backdrop-blur-sm-bg-white/5-rounded-lg">-<h3-className="text-3xl-font-bold-text-purple-400">500+</h3>-<p-className="text-gray-400">Clients-Protected</p>-</div>-</div>-</div>-</div>-</section>-{/*-Existing-Applications-Section-*/}-<section-className="min-h-screen-bg-gradient-to-b-from-gray-200-to-gray-50-py-20-px-4">-<div-className="container-mx-auto">-<div-className="text-center-mb-16">-<h2-className="text-4xl-font-bold-text-gray-800-mb-4"-role="heading">-Our-Development-Solutions-</h2>-<p-className="text-xl-text-gray-600-max-w-2xl-mx-auto">-Explore-our-comprehensive-range-of-development-services-tailored-to-meet-your-digital-needs-</p>-</div>-<div-className="grid-grid-cols-1-md:grid-cols-2-lg:grid-cols-3-gap-8">-{applications.map((app)-=>-(-<div-key={app.id}-className="bg-white-rounded-xl-shadow-lg-overflow-hidden-transform-transition-all-duration-300-hover:scale-105-hover:shadow-2xl"-role="article"->-<div-className="relative-h-48">-<img-src={app.image}-alt={app.title}-className="w-full-h-full-object-cover"-onError={(e)-=>-{-e.target.src-=-"https://images.unsplash.com/photo-1517694712202-14dd9538aa97";-}}-/>-<div-className="absolute-inset-0-bg-black-bg-opacity-40-flex-items-center-justify-center">-<div-className="p-4-rounded-full-bg-white-bg-opacity-90">-{app.icon}-</div>-</div>-</div>-<div-className="p-6">-<h3-className="text-2xl-font-semibold-text-gray-800-mb-3">-{app.title}-</h3>-<p-className="text-gray-600">{app.description}</p>-<button-className="mt-6-px-6-py-2-bg-indigo-600-text-white-rounded-lg-hover:bg-indigo-700-transition-colors-duration-300"-aria-label={`Learn-more-about-${app.title}`}->-Learn-More-</button>-</div>-</div>-))}-</div>-</div>-</section>-</div>-);-};-export-default-WebAppApplications;-avoid-solution-page

Prompt
Component Preview

About

Discover cutting-edge web, mobile, desktop, cloud, and database solutions tailored to elevate your business. Explore our comprehensive development services today.

Share

Last updated 1 month ago