355 lines
14 KiB
TypeScript
355 lines
14 KiB
TypeScript
import { useState } from "react";
|
|
import { Monitor, Shield, Bell, TrendingUp, Clock, Wifi, HardDrive, Cpu, Activity, AlertTriangle, CheckCircle, ArrowRight, Check } from "lucide-react";
|
|
import Navigation from "@/components/Navigation";
|
|
import Footer from "@/components/Footer";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { Link } from "react-router-dom";
|
|
|
|
const CybersecurityServices = () => {
|
|
const [showDemo, setShowDemo] = useState(false);
|
|
const [simulationActive, setSimulationActive] = useState(false);
|
|
|
|
const features = [
|
|
{
|
|
icon: Monitor,
|
|
title: "24/7 Monitoring",
|
|
description: "Continuous surveillance of all your systems",
|
|
benefit: "99.9% uptime"
|
|
},
|
|
{
|
|
icon: Bell,
|
|
title: "Instant Alerts",
|
|
description: "Real-time notifications for any issues",
|
|
benefit: "<5min response"
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Threat Protection",
|
|
description: "Proactive security monitoring and patching",
|
|
benefit: "Zero-day protection"
|
|
},
|
|
{
|
|
icon: HardDrive,
|
|
title: "Automated Backups",
|
|
description: "Daily backups with instant recovery options",
|
|
benefit: "15-min recovery"
|
|
},
|
|
{
|
|
icon: Cpu,
|
|
title: "Performance Optimization",
|
|
description: "Keep systems running at peak efficiency",
|
|
benefit: "30% faster"
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: "Predictive Analytics",
|
|
description: "AI-powered insights to prevent issues",
|
|
benefit: "85% issue prevention"
|
|
}
|
|
];
|
|
|
|
const monitoringMetrics = [
|
|
{ icon: Activity, label: "CPU Usage", value: "42%", status: "healthy" },
|
|
{ icon: HardDrive, label: "Disk Space", value: "68%", status: "healthy" },
|
|
{ icon: Wifi, label: "Network", value: "125 Mbps", status: "healthy" },
|
|
{ icon: Clock, label: "Uptime", value: "99.98%", status: "excellent" }
|
|
];
|
|
|
|
const tiers = [
|
|
{
|
|
name: "Essential",
|
|
price: "AED 2,500/month",
|
|
devices: "Up to 25 devices",
|
|
features: [
|
|
"24/7 system monitoring",
|
|
"Automated alerts",
|
|
"Monthly reports",
|
|
"Email support",
|
|
"Basic patching"
|
|
]
|
|
},
|
|
{
|
|
name: "Professional",
|
|
price: "AED 5,000/month",
|
|
devices: "Up to 100 devices",
|
|
popular: true,
|
|
features: [
|
|
"Everything in Essential",
|
|
"Real-time dashboards",
|
|
"Automated patching",
|
|
"Priority phone support",
|
|
"Backup management",
|
|
"Performance optimization"
|
|
]
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
price: "Custom pricing",
|
|
devices: "Unlimited devices",
|
|
features: [
|
|
"Everything in Professional",
|
|
"Dedicated account manager",
|
|
"Custom integrations",
|
|
"Advanced analytics",
|
|
"SLA guarantees",
|
|
"On-site support available"
|
|
]
|
|
}
|
|
];
|
|
|
|
const benefits = [
|
|
{
|
|
title: "Reduced Downtime",
|
|
stat: "95%",
|
|
description: "Issues detected and resolved before impact"
|
|
},
|
|
{
|
|
title: "Cost Savings",
|
|
stat: "60%",
|
|
description: "Reduction in emergency IT costs"
|
|
},
|
|
{
|
|
title: "Faster Resolution",
|
|
stat: "10x",
|
|
description: "Problems fixed before users notice"
|
|
},
|
|
{
|
|
title: "Security Updates",
|
|
stat: "100%",
|
|
description: "All systems always patched and protected"
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen gradient-bg">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
{/* <section className="relative container mx-auto px-6 pt-32 pb-20">
|
|
<div className="text-center mb-16 animate-slide-in-up">
|
|
<h1 className="text-5xl md:text-6xl font-bold text-foreground mb-6">
|
|
Cybersecurity Services
|
|
</h1>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto mb-4">
|
|
Never worry about IT infrastructure again.
|
|
</p>
|
|
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
|
24/7 remote monitoring and management that keeps your business running smoothly.
|
|
</p>
|
|
</div>
|
|
|
|
|
|
<div className="glass-strong rounded-3xl p-8 max-w-5xl mx-auto mb-20 animate-slide-in-up" style={{ animationDelay: "200ms" }}>
|
|
<div className="aspect-video glass-card rounded-2xl flex items-center justify-center relative overflow-hidden">
|
|
<div className="relative">
|
|
<Monitor className="w-24 h-24 text-primary/30 animate-glow-pulse" />
|
|
<div className="absolute -top-8 -left-8">
|
|
<div className="w-3 h-3 rounded-full bg-primary animate-ping" />
|
|
</div>
|
|
<div className="absolute -top-8 -right-8">
|
|
<div className="w-3 h-3 rounded-full bg-primary animate-ping" style={{ animationDelay: "0.5s" }} />
|
|
</div>
|
|
<div className="absolute -bottom-8 -left-8">
|
|
<div className="w-3 h-3 rounded-full bg-primary animate-ping" style={{ animationDelay: "1s" }} />
|
|
</div>
|
|
<div className="absolute -bottom-8 -right-8">
|
|
<div className="w-3 h-3 rounded-full bg-primary animate-ping" style={{ animationDelay: "1.5s" }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-6">
|
|
{monitoringMetrics.map((metric, i) => (
|
|
<div key={i} className="glass-card p-4 rounded-2xl animate-scale-in" style={{ animationDelay: `${400 + i * 100}ms` }}>
|
|
<metric.icon className="w-6 h-6 text-primary mb-2" />
|
|
<div className="text-sm text-muted-foreground mb-1">{metric.label}</div>
|
|
<div className="text-xl font-bold text-foreground">{metric.value}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section> */}
|
|
|
|
{/* Features Grid */}
|
|
<section className="container mx-auto px-6 py-20">
|
|
<h2 className="text-4xl font-bold text-center text-foreground mb-4">
|
|
Comprehensive Monitoring & Management
|
|
</h2>
|
|
<p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
|
|
Protect your infrastructure with enterprise-grade monitoring
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">
|
|
{features.map((feature, index) => (
|
|
<Card
|
|
key={index}
|
|
className="group glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 hover:glow-effect cursor-pointer"
|
|
style={{ animationDelay: `${index * 50}ms` }}
|
|
>
|
|
<div className="mb-6">
|
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-primary/10 to-accent/20 flex items-center justify-center">
|
|
<feature.icon className="w-7 h-7 text-primary" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-2">{feature.title}</h3>
|
|
<p className="text-sm text-muted-foreground mb-4">{feature.description}</p>
|
|
<div className="text-xs text-primary font-bold">{feature.benefit}</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Live Status Simulation */}
|
|
{/* <section className="container mx-auto px-6 py-20">
|
|
<div className="glass-strong rounded-3xl p-8 md:p-12 max-w-5xl mx-auto">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4 text-center">
|
|
Live Dashboard Preview
|
|
</h2>
|
|
<p className="text-center text-muted-foreground mb-12">
|
|
See how our monitoring system keeps your infrastructure healthy
|
|
</p>
|
|
|
|
{!simulationActive ? (
|
|
<div className="text-center">
|
|
<Button
|
|
size="lg"
|
|
className="glass-card hover:glow-effect px-8 py-6 text-lg"
|
|
onClick={() => setSimulationActive(true)}
|
|
>
|
|
<Activity className="mr-2 w-5 h-5" />
|
|
Start Live Simulation
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{[
|
|
{ type: "success", message: "All systems operational", icon: CheckCircle },
|
|
{ type: "info", message: "Backup completed successfully", icon: HardDrive },
|
|
{ type: "warning", message: "High CPU usage detected - optimizing", icon: AlertTriangle },
|
|
{ type: "success", message: "Security patch applied", icon: Shield }
|
|
].map((alert, index) => (
|
|
<div
|
|
key={index}
|
|
className="glass-card p-4 rounded-2xl flex items-center gap-4 animate-slide-in-up"
|
|
style={{ animationDelay: `${index * 200}ms` }}
|
|
>
|
|
<alert.icon className={`w-6 h-6 ${
|
|
alert.type === "success" ? "text-green-500" :
|
|
alert.type === "warning" ? "text-yellow-500" :
|
|
"text-primary"
|
|
}`} />
|
|
<span className="text-foreground">{alert.message}</span>
|
|
<span className="ml-auto text-xs text-muted-foreground">Just now</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section> */}
|
|
|
|
{/* Benefits Stats */}
|
|
<section className="container mx-auto px-6 py-20">
|
|
<h2 className="text-4xl font-bold text-center text-foreground mb-16">
|
|
Measurable Business Impact
|
|
</h2>
|
|
|
|
<div className="grid md:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
|
{benefits.map((benefit, index) => (
|
|
<Card
|
|
key={index}
|
|
className="glass-card p-8 rounded-3xl text-center transition-all duration-500 hover:scale-105 hover:glow-effect"
|
|
>
|
|
<div className="text-5xl font-bold text-primary mb-2 animate-glow-pulse">
|
|
{benefit.stat}
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-foreground mb-2">{benefit.title}</h3>
|
|
<p className="text-sm text-muted-foreground">{benefit.description}</p>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Pricing Tiers */}
|
|
{/* <section className="container mx-auto px-6 py-20">
|
|
<h2 className="text-4xl font-bold text-center text-foreground mb-4">
|
|
Choose Your Monitoring Plan
|
|
</h2>
|
|
<p className="text-center text-muted-foreground mb-16 max-w-2xl mx-auto">
|
|
Flexible plans that scale with your business
|
|
</p>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
|
{tiers.map((tier, index) => (
|
|
<Card
|
|
key={index}
|
|
className={`glass-card p-8 rounded-3xl transition-all duration-500 hover:scale-105 ${
|
|
tier.popular ? "ring-2 ring-primary glow-effect" : ""
|
|
}`}
|
|
>
|
|
{tier.popular && (
|
|
<div className="inline-block px-4 py-1 rounded-full bg-primary text-primary-foreground text-xs font-bold mb-4">
|
|
Most Popular
|
|
</div>
|
|
)}
|
|
<h3 className="text-2xl font-bold text-foreground mb-2">{tier.name}</h3>
|
|
<div className="text-3xl font-bold text-primary mb-2">{tier.price}</div>
|
|
<div className="text-sm text-muted-foreground mb-6">{tier.devices}</div>
|
|
<ul className="space-y-3 mb-8">
|
|
{tier.features.map((feature, i) => (
|
|
<li key={i} className="flex items-start gap-2 text-sm text-muted-foreground">
|
|
<Check className="w-4 h-4 text-primary mt-0.5 flex-shrink-0" />
|
|
<span>{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<Button className="w-full glass-card hover:glow-effect">
|
|
Get Started
|
|
</Button>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</section> */}
|
|
|
|
{/* CTA Section */}
|
|
<section className="container mx-auto px-6 py-20">
|
|
<div className="glass-strong rounded-3xl p-12 max-w-4xl mx-auto text-center">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
|
|
Ready to Protect Your Infrastructure?
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
|
|
Start monitoring your systems today with a free 30-day trial
|
|
</p>
|
|
|
|
{!showDemo ? (
|
|
<Button
|
|
size="lg"
|
|
className="glass-card hover:glow-effect px-8 py-6 text-lg group"
|
|
onClick={() => setShowDemo(true)}
|
|
>
|
|
<Monitor className="mr-2 w-5 h-5" />
|
|
Start Free Trial
|
|
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</Button>
|
|
) : (
|
|
<div className="glass-card p-8 rounded-2xl animate-scale-in">
|
|
<Check className="w-16 h-16 text-primary mx-auto mb-4 animate-glow-pulse" />
|
|
<h3 className="text-xl font-semibold text-foreground mb-2">Request Received!</h3>
|
|
<p className="text-muted-foreground mb-6">
|
|
Our Cybersecurity specialists will set up your trial within 24 hours.
|
|
</p>
|
|
<Link to="/contact">
|
|
<Button variant="outline" className="glass-card">
|
|
Contact Us Directly
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CybersecurityServices; |