-m

src/pages/services/CybersecurityServices.tsx

@@ -0,0 +1,355 @@
+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;