1553 lines
64 KiB
TypeScript
1553 lines
64 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
AlertTriangle,
|
||
ArrowRight,
|
||
BarChart3,
|
||
Building,
|
||
Calendar,
|
||
CheckCircle,
|
||
Clock,
|
||
Code,
|
||
Eye,
|
||
FileCheck,
|
||
FileText,
|
||
Globe,
|
||
Heart,
|
||
Lock,
|
||
MessageSquare,
|
||
Monitor,
|
||
Search,
|
||
Shield,
|
||
ShieldCheck,
|
||
TestTube,
|
||
ThumbsUp,
|
||
TrendingUp,
|
||
UserCheck,
|
||
Users,
|
||
X,
|
||
} from "lucide-react";
|
||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "../components/ui/accordion";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Helmet } from "react-helmet-async";
|
||
|
||
// Compliance-Ready Systems Hero Section
|
||
const ComplianceReadySystemsHero = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely</title>
|
||
<meta
|
||
name="description"
|
||
content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link rel="canonical" href="https://www.wdipl.com/solutions/compliance-ready-systems" />
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta property="og:title" content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely" />
|
||
<meta
|
||
property="og:description"
|
||
content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
|
||
/>
|
||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Twitter Card Tags */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Compliance-Ready Systems Solutions | WDI – Stay Ahead Safely" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="Ensure data security and regulatory compliance with WDI’s Compliance-Ready Systems. Build secure, scalable solutions aligned with industry standards."
|
||
/>
|
||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="space-y-8"
|
||
>
|
||
{/* Solutions Label */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<span className="text-white/70 text-sm font-medium">
|
||
Solutions
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Main Heading */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||
Compliance-Ready Systems{" "}
|
||
<span className="text-gray-400">(HIPAA, GDPR, etc.)</span>
|
||
</h1>
|
||
|
||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||
Build or adapt your digital systems to meet stringent regulatory
|
||
requirements, ensuring data privacy, security, and legal
|
||
adherence.
|
||
</p>
|
||
</div>
|
||
|
||
{/* CTAs */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
className="flex flex-col sm:flex-row gap-4"
|
||
>
|
||
<ShimmerButton
|
||
className="text-lg px-8 py-4"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
||
<span>Get a Free Consultation</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Eye className="w-5 h-5 flex-shrink-0" />
|
||
<span>Explore Our Compliance Solutions</span>
|
||
</div>
|
||
</Button>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with Compliance Security Visualization */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="relative flex flex-col items-center"
|
||
>
|
||
{/* Compliance Security Scene */}
|
||
<div className="relative w-full max-w-2xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="relative"
|
||
>
|
||
{/* Main Compliance Dashboard */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="relative bg-gray-900 rounded-2xl p-8 mx-auto max-w-lg shadow-2xl border border-gray-700"
|
||
>
|
||
{/* Compliance Standards */}
|
||
<div className="relative mb-8">
|
||
{/* Compliance Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 1.0 }}
|
||
className="text-center mb-6"
|
||
>
|
||
<h3 className="text-xl font-semibold text-white mb-2">
|
||
Compliance Dashboard
|
||
</h3>
|
||
<div className="flex items-center justify-center gap-4">
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
|
||
>
|
||
<ShieldCheck className="w-3 h-3 mr-1" />
|
||
Secure
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
|
||
>
|
||
<FileCheck className="w-3 h-3 mr-1" />
|
||
Compliant
|
||
</Badge>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Compliance Standards Grid */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 1.2 }}
|
||
className="grid grid-cols-2 gap-3 mb-6"
|
||
>
|
||
{[
|
||
{ standard: "HIPAA", status: "compliant", delay: 1.4 },
|
||
{ standard: "GDPR", status: "compliant", delay: 1.6 },
|
||
{ standard: "SOC 2", status: "compliant", delay: 1.8 },
|
||
{ standard: "ISO 27001", status: "review", delay: 2.0 },
|
||
].map((item, i) => (
|
||
<motion.div
|
||
key={i}
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5, delay: item.delay }}
|
||
className={`p-3 rounded-lg border text-center ${item.status === "compliant"
|
||
? "bg-green-500/10 border-green-500/30"
|
||
: "bg-orange-500/10 border-orange-500/30"
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-center mb-2">
|
||
{item.status === "compliant" ? (
|
||
<CheckCircle className="w-5 h-5 text-green-400" />
|
||
) : (
|
||
<Clock className="w-5 h-5 text-orange-400" />
|
||
)}
|
||
</div>
|
||
<div
|
||
className={`text-sm font-medium ${item.status === "compliant"
|
||
? "text-green-300"
|
||
: "text-orange-300"
|
||
}`}
|
||
>
|
||
{item.standard}
|
||
</div>
|
||
<div
|
||
className={`text-xs ${item.status === "compliant"
|
||
? "text-green-400"
|
||
: "text-orange-400"
|
||
}`}
|
||
>
|
||
{item.status === "compliant"
|
||
? "Compliant"
|
||
: "In Review"}
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
|
||
{/* Security Measures */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 2.2 }}
|
||
className="space-y-3"
|
||
>
|
||
{[
|
||
{
|
||
measure: "Data Encryption",
|
||
icon: Lock,
|
||
status: "active",
|
||
},
|
||
{
|
||
measure: "Access Control",
|
||
icon: UserCheck,
|
||
status: "active",
|
||
},
|
||
{
|
||
measure: "Audit Trails",
|
||
icon: FileText,
|
||
status: "active",
|
||
},
|
||
].map((security, i) => (
|
||
<div
|
||
key={i}
|
||
className="flex items-center justify-between p-2 bg-black/30 rounded-lg"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<security.icon className="w-4 h-4 text-blue-400" />
|
||
<span className="text-white text-sm">
|
||
{security.measure}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||
<span className="text-green-300 text-xs">
|
||
Active
|
||
</span>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Compliance Metrics */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 2.4 }}
|
||
className="bg-black/50 rounded-lg p-4 border border-gray-700 mb-6"
|
||
>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<div className="flex items-center gap-2">
|
||
<BarChart3 className="w-4 h-4 text-purple-400" />
|
||
<span className="text-purple-400 text-xs font-mono">
|
||
Security Score
|
||
</span>
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
|
||
>
|
||
Excellent
|
||
</Badge>
|
||
</div>
|
||
|
||
{/* Security Metrics */}
|
||
<div className="space-y-2">
|
||
<motion.div
|
||
initial={{ opacity: 0, width: 0 }}
|
||
animate={{ opacity: 1, width: "96%" }}
|
||
transition={{ duration: 1, delay: 2.6 }}
|
||
className="flex items-center justify-between"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-green-400 rounded-full"></div>
|
||
<span className="text-green-300 text-xs">
|
||
Data Protection
|
||
</span>
|
||
</div>
|
||
<span className="text-green-300 text-xs font-mono">
|
||
96%
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, width: 0 }}
|
||
animate={{ opacity: 1, width: "94%" }}
|
||
transition={{ duration: 1, delay: 2.8 }}
|
||
className="flex items-center justify-between"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-blue-400 rounded-full"></div>
|
||
<span className="text-blue-300 text-xs">
|
||
Access Security
|
||
</span>
|
||
</div>
|
||
<span className="text-blue-300 text-xs font-mono">
|
||
94%
|
||
</span>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, width: 0 }}
|
||
animate={{ opacity: 1, width: "98%" }}
|
||
transition={{ duration: 1, delay: 3.0 }}
|
||
className="flex items-center justify-between"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="w-2 h-2 bg-purple-400 rounded-full"></div>
|
||
<span className="text-purple-300 text-xs">
|
||
Audit Readiness
|
||
</span>
|
||
</div>
|
||
<span className="text-purple-300 text-xs font-mono">
|
||
98%
|
||
</span>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Compliance Benefits */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 10 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 3.2 }}
|
||
className="grid grid-cols-2 gap-3"
|
||
>
|
||
<div className="p-3 bg-gradient-to-br from-green-500/20 to-emerald-500/20 rounded-lg border border-green-500/30">
|
||
<div className="text-green-400 text-lg font-bold">
|
||
99%
|
||
</div>
|
||
<div className="text-white text-xs">Risk Reduction</div>
|
||
</div>
|
||
<div className="p-3 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-lg border border-blue-500/30">
|
||
<div className="text-blue-400 text-lg font-bold">
|
||
24/7
|
||
</div>
|
||
<div className="text-white text-xs">Monitoring</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Floating Compliance Elements */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.8, delay: 3.4 }}
|
||
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
||
>
|
||
<div className="w-14 h-14 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-full flex items-center justify-center border border-purple-500/30">
|
||
<Shield className="w-6 h-6 text-purple-400" />
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Compliance Status Indicator */}
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.8, delay: 3.6 }}
|
||
className="absolute -top-8 -right-8 space-y-2"
|
||
>
|
||
<div className="flex items-center gap-2 text-green-400 text-sm">
|
||
<ShieldCheck className="w-4 h-4" />
|
||
<span>Secure</span>
|
||
</div>
|
||
<div className="flex gap-1">
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity }}
|
||
className="w-2 h-2 bg-green-400 rounded-full"
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity, delay: 0.5 }}
|
||
className="w-2 h-2 bg-blue-400 rounded-full"
|
||
></motion.div>
|
||
<motion.div
|
||
animate={{ opacity: [0.3, 1, 0.3] }}
|
||
transition={{ duration: 2, repeat: Infinity, delay: 1 }}
|
||
className="w-2 h-2 bg-purple-400 rounded-full"
|
||
></motion.div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Compliance Badge */}
|
||
<motion.div
|
||
initial={{ opacity: 0, scale: 0 }}
|
||
animate={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.6, delay: 3.8 }}
|
||
className="absolute top-1/4 left-1/4 transform -translate-x-1/2 -translate-y-1/2"
|
||
>
|
||
<div className="w-16 h-16 bg-accent/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl">
|
||
<div className="text-center">
|
||
<div className="text-accent text-sm font-bold">SEC</div>
|
||
<div className="text-white text-xs">OK</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Compliance Features */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 4.0 }}
|
||
className="flex justify-center gap-4 flex-wrap mt-8"
|
||
>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
||
>
|
||
<Shield className="w-3 h-3 mr-1" />
|
||
Secure
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-green-500/20 text-green-300 border-green-500/30"
|
||
>
|
||
<FileCheck className="w-3 h-3 mr-1" />
|
||
Compliant
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
||
>
|
||
<Eye className="w-3 h-3 mr-1" />
|
||
Auditable
|
||
</Badge>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// The Challenge We Solve
|
||
const ComplianceReadySystemsChallenge = () => {
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<div className="max-w-6xl mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-16"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
||
Navigating the Complexities of Regulatory Compliance
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12 items-center">
|
||
{/* Problem */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<Card className="bg-red-500/5 border-red-500/20 p-8 rounded-2xl">
|
||
<CardContent className="p-0">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center">
|
||
<AlertTriangle className="w-6 h-6 text-red-400" />
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-foreground">
|
||
The Problem
|
||
</h3>
|
||
</div>
|
||
<div className="space-y-4 text-muted-foreground">
|
||
<p>
|
||
Building or managing systems that comply with
|
||
industry-specific regulations (like HIPAA, GDPR, SOC 2,
|
||
ISO 27001) is complex, time-consuming, and critical for
|
||
avoiding hefty fines and reputational damage.
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Complex regulatory requirements and frequent changes
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Hefty fines and legal penalties for non-compliance
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Risk of data breaches and security vulnerabilities
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Reputation damage and loss of customer trust
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
|
||
{/* Solution */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 30 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<Card className="bg-green-500/5 border-green-500/20 p-8 rounded-2xl">
|
||
<CardContent className="p-0">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center">
|
||
<CheckCircle className="w-6 h-6 text-green-400" />
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-foreground">
|
||
Our Solution
|
||
</h3>
|
||
</div>
|
||
<div className="space-y-4 text-muted-foreground">
|
||
<p>
|
||
WDI specializes in developing and optimizing
|
||
compliance-ready digital systems. We integrate security,
|
||
privacy, and regulatory requirements directly into your
|
||
software architecture, ensuring your operations are
|
||
robustly compliant from the ground up.
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Privacy-by-design and security-by-design architecture
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Built-in compliance for HIPAA, GDPR, SOC 2, and more
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Comprehensive audit trails and documentation
|
||
</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
||
<span>
|
||
Ongoing monitoring and compliance management
|
||
</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// What's Included in This Solution
|
||
const ComplianceReadySystemsIncludes = () => {
|
||
const includes = [
|
||
{
|
||
icon: Search,
|
||
title: "Compliance Gap Analysis",
|
||
description:
|
||
"Assessing your current systems against target regulations (HIPAA, GDPR, etc.).",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Secure Architecture Design",
|
||
description:
|
||
"Designing systems with privacy-by-design and security-by-design principles.",
|
||
},
|
||
{
|
||
icon: Lock,
|
||
title: "Data Encryption & Masking",
|
||
description:
|
||
"Implementing robust solutions for sensitive data protection.",
|
||
},
|
||
{
|
||
icon: UserCheck,
|
||
title: "Access Control & Auditing",
|
||
description:
|
||
"Developing systems for strict user permissions and comprehensive logging.",
|
||
},
|
||
{
|
||
icon: FileCheck,
|
||
title: "Regulatory Compliance Features",
|
||
description:
|
||
"Building specific features required by regulations (e.g., data subject access requests, consent management).",
|
||
},
|
||
{
|
||
icon: Code,
|
||
title: "Secure Development Practices",
|
||
description: "Implementing DevSecOps and secure coding standards.",
|
||
},
|
||
{
|
||
icon: FileText,
|
||
title: "Documentation & Audit Trails",
|
||
description:
|
||
"Ensuring proper logging and documentation for compliance audits.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Our Compliance-Driven System Development Services
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{includes.slice(0, 6).map((item, index) => {
|
||
const IconComponent = item.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-white mb-4">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{item.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Seventh item centered */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="flex justify-center mt-8"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: 0.6 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group max-w-sm"
|
||
>
|
||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<FileText className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-white mb-4">
|
||
{includes[6].title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{includes[6].description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Key Benefits & Outcomes
|
||
const ComplianceReadySystemsBenefits = () => {
|
||
const benefits = [
|
||
{
|
||
icon: Shield,
|
||
title: "Risk Mitigation",
|
||
description:
|
||
"Drastically reduce the risk of non-compliance fines and legal issues.",
|
||
},
|
||
{
|
||
icon: Lock,
|
||
title: "Enhanced Data Security",
|
||
description:
|
||
"Protect sensitive information with industry-leading security measures.",
|
||
},
|
||
{
|
||
icon: ThumbsUp,
|
||
title: "Increased Trust",
|
||
description:
|
||
"Build confidence with clients, partners, and regulatory bodies.",
|
||
},
|
||
{
|
||
icon: FileCheck,
|
||
title: "Streamlined Audits",
|
||
description:
|
||
"Be prepared for compliance audits with robust documentation and processes.",
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
title: "Business Continuity",
|
||
description:
|
||
"Ensure operational resilience against security breaches and regulatory changes.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Secure Your Operations with Compliant Systems
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{benefits.slice(0, 3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Second row with remaining benefits */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
|
||
>
|
||
{benefits.slice(3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index + 3}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Our Process for Building Compliance-Ready Systems
|
||
const ComplianceReadySystemsProcess = () => {
|
||
const steps = [
|
||
{
|
||
title: "Compliance Assessment",
|
||
description:
|
||
"Deep dive into your specific regulatory needs and current system status.",
|
||
icon: Search,
|
||
},
|
||
{
|
||
title: "Secure Design & Planning",
|
||
description:
|
||
"Architect solutions with compliance requirements embedded from the start.",
|
||
icon: Shield,
|
||
},
|
||
{
|
||
title: "Secure Development",
|
||
description:
|
||
"Implement secure coding practices and features specific to regulations.",
|
||
icon: Code,
|
||
},
|
||
{
|
||
title: "Security Testing & Auditing",
|
||
description:
|
||
"Conduct penetration testing, vulnerability assessments, and compliance checks.",
|
||
icon: TestTube,
|
||
},
|
||
{
|
||
title: "Documentation & Reporting",
|
||
description:
|
||
"Prepare all necessary documentation for compliance and audits.",
|
||
icon: FileText,
|
||
},
|
||
{
|
||
title: "Deployment & Monitoring",
|
||
description:
|
||
"Launch the system with continuous security and compliance monitoring.",
|
||
icon: Monitor,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Our Secure & Compliant Development Process
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<div className="relative">
|
||
{/* Timeline line */}
|
||
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
||
|
||
<div className="space-y-16">
|
||
{steps.map((step, index) => {
|
||
const IconComponent = step.icon;
|
||
const isEven = index % 2 === 0;
|
||
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
||
whileInView={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||
viewport={{ once: true }}
|
||
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
||
} flex-col lg:gap-16 gap-8`}
|
||
>
|
||
<div
|
||
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
||
} text-center lg:text-left`}
|
||
>
|
||
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-accent">
|
||
0{index + 1}
|
||
</div>
|
||
</div>
|
||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||
{step.title}
|
||
</h3>
|
||
<p className="text-gray-300 leading-relaxed">
|
||
{step.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline dot */}
|
||
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
||
|
||
<div className="flex-1 hidden lg:block"></div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Who Benefits from This Solution
|
||
const ComplianceReadySystemsAudience = () => {
|
||
const audiences = [
|
||
{
|
||
icon: Heart,
|
||
title: "Healthcare Providers",
|
||
description: "HIPAA, HITECH compliance for patient data protection.",
|
||
},
|
||
{
|
||
icon: Building,
|
||
title: "Financial Institutions",
|
||
description: "PCI DSS, SOC 2 compliance for secure financial operations.",
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: "EU/International Businesses",
|
||
description: "GDPR compliance for businesses handling EU citizen data.",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Data-Sensitive Companies",
|
||
description: "Handling sensitive customer or proprietary data securely.",
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Security-Focused Organizations",
|
||
description: "Requiring robust data security and privacy measures.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||
Ideal For...
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{audiences.slice(0, 3).map((audience, index) => {
|
||
const IconComponent = audience.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{audience.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{audience.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Second row with remaining audiences */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 gap-8 max-w-2xl mx-auto mt-8"
|
||
>
|
||
{audiences.slice(3).map((audience, index) => {
|
||
const IconComponent = audience.icon;
|
||
return (
|
||
<motion.div
|
||
key={index + 3}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">
|
||
{audience.title}
|
||
</h3>
|
||
<p className="text-muted-foreground leading-relaxed">
|
||
{audience.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Case Studies
|
||
const ComplianceReadySystemsCaseStudies = () => {
|
||
const caseStudies = [
|
||
{
|
||
title: "HIPAA-Compliant Telehealth Platform",
|
||
client: "Healthcare Provider",
|
||
description:
|
||
"Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
|
||
results: "Full HIPAA compliance in 8 months",
|
||
engagement: "Healthcare compliance success",
|
||
gradient: "from-blue-500/20 to-cyan-500/20",
|
||
},
|
||
{
|
||
title: "GDPR-Ready E-commerce Portal",
|
||
client: "E-commerce Company",
|
||
description:
|
||
"Transformed an existing e-commerce site to meet all GDPR requirements, ensuring user data privacy with comprehensive consent management, data portability features, and right-to-be-forgotten implementation for EU customers.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
|
||
results: "Full GDPR compliance achieved",
|
||
engagement: "E-commerce privacy transformation",
|
||
gradient: "from-green-500/20 to-emerald-500/20",
|
||
},
|
||
{
|
||
title: "SOC 2 Financial Services Platform",
|
||
client: "FinTech Startup",
|
||
description:
|
||
"Built a SOC 2 Type II compliant financial services platform from the ground up, implementing comprehensive security controls, audit trails, and monitoring systems to meet strict financial industry standards and customer trust requirements.",
|
||
image:
|
||
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
|
||
results: "SOC 2 Type II certification",
|
||
engagement: "Financial compliance implementation",
|
||
gradient: "from-purple-500/20 to-pink-500/20",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
|
||
Secure & Compliant Systems We've Delivered
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||
>
|
||
{caseStudies.map((study, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="group cursor-pointer"
|
||
>
|
||
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
||
<CardContent className="p-0 flex flex-col h-full">
|
||
<div className="p-8 pb-6">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||
<Shield className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
|
||
{study.client}
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-xs bg-accent/20 text-accent border-accent/30"
|
||
>
|
||
{study.results}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-semibold text-white mb-4 leading-tight">
|
||
{study.title}
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6 flex-1">
|
||
<div
|
||
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
||
>
|
||
<ImageWithFallback
|
||
src={study.image}
|
||
alt={study.title}
|
||
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6">
|
||
<p className="text-gray-300 text-sm leading-relaxed mb-4">
|
||
{study.description}
|
||
</p>
|
||
<div className="flex gap-4 text-xs text-gray-400">
|
||
<div className="flex items-center gap-1">
|
||
<CheckCircle className="w-3 h-3" />
|
||
{study.engagement}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-8 pt-0 mt-auto">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
|
||
>
|
||
<span className="text-sm font-medium">
|
||
VIEW FULL CASE STUDY
|
||
</span>
|
||
<ArrowRight className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Mid-Page Lead Capture CTA
|
||
const ComplianceReadySystemsInlineCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
||
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Shield className="w-5 h-5 text-foreground" />
|
||
<span className="text-foreground text-base font-medium">
|
||
Compliance & Security
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
||
Ensure Your Systems Are{" "}
|
||
<span className="text-accent">Secure & Compliant</span>
|
||
</h2>
|
||
|
||
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
||
Protect your business and your data with our expert-led solutions.
|
||
</p>
|
||
|
||
<ShimmerButton
|
||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Search className="w-6 h-6 flex-shrink-0" />
|
||
<span>Get a Compliance Assessment</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// FAQs
|
||
const ComplianceReadySystemsFAQs = () => {
|
||
const faqs = [
|
||
{
|
||
question:
|
||
"What specific regulations do you have expertise in (e.g., HIPAA, GDPR, SOC 2)?",
|
||
answer:
|
||
"We have extensive expertise across major regulatory frameworks: HIPAA and HITECH for healthcare data protection, GDPR for EU data privacy compliance, SOC 2 Type I and II for service organization controls, ISO 27001 for information security management, PCI DSS for payment card industry compliance, CCPA for California consumer privacy, and FERPA for educational records. Our team stays current with regulatory changes and requirements, ensuring your systems meet the latest standards. We also work with industry-specific regulations like 21 CFR Part 11 for pharmaceuticals, FISMA for federal systems, and various financial services regulations including SOX and GLBA.",
|
||
},
|
||
{
|
||
question: "How do you handle ongoing compliance changes?",
|
||
answer:
|
||
"We provide comprehensive ongoing compliance management: Regulatory monitoring services that track changes in applicable laws and standards, quarterly compliance reviews and gap analyses, automated compliance reporting and documentation updates, proactive system updates to address new requirements, and dedicated compliance consulting for interpreting new regulations. Our compliance management includes: subscription to regulatory update services, legal review partnerships for complex changes, automated testing for compliance drift detection, and documented change management processes. We also provide compliance calendars, training updates for your team, and emergency response procedures for urgent regulatory changes.",
|
||
},
|
||
{
|
||
question: "Can you help us with compliance audits?",
|
||
answer:
|
||
"Yes, we provide comprehensive audit support services: Pre-audit preparation including documentation review, gap analysis, and remediation planning, audit facilitation with technical expertise and evidence preparation, post-audit remediation support for any identified deficiencies, and ongoing audit readiness maintenance. Our audit support includes: creation of audit trails and evidence repositories, preparation of technical documentation and system diagrams, coordination with external auditors and assessors, remediation project management, and compliance testing and validation. We work with major audit firms and have experience with SOC 2, ISO 27001, HIPAA, and other compliance audits, ensuring you're fully prepared and supported throughout the process.",
|
||
},
|
||
{
|
||
question: "What security measures do you integrate into your systems?",
|
||
answer:
|
||
"We implement comprehensive security controls aligned with industry best practices: Data encryption at rest and in transit using AES-256 and TLS 1.3, multi-factor authentication and role-based access controls, comprehensive logging and audit trails for all system activities, network security including firewalls, VPNs, and intrusion detection, vulnerability management with regular scanning and penetration testing, and backup and disaster recovery systems. Additional security measures include: secure software development lifecycle practices, security monitoring and incident response capabilities, data loss prevention systems, privileged access management, and security awareness training programs. All security implementations follow zero-trust principles and defense-in-depth strategies.",
|
||
},
|
||
{
|
||
question: "Is existing system remediation something you offer?",
|
||
answer:
|
||
"Absolutely! We specialize in remediating existing systems for compliance: Comprehensive compliance gap analysis of current systems, risk assessment and prioritization of remediation efforts, phased remediation planning to minimize business disruption, implementation of security controls and compliance features, data migration and system integration services, and post-remediation testing and validation. Our remediation approach includes: minimal downtime deployment strategies, parallel system operation during transitions, comprehensive testing protocols, user training and change management, and ongoing support during the transition period. We work with legacy systems, cloud platforms, and hybrid environments, ensuring your existing investments are preserved while achieving full compliance.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container mx-auto px-6 lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mb-20"
|
||
>
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||
Frequently Asked Questions
|
||
</h2>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto"
|
||
>
|
||
<Accordion type="single" collapsible className="space-y-8">
|
||
{faqs.map((faq, index) => (
|
||
<AccordionItem
|
||
key={index}
|
||
value={`item-${index}`}
|
||
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
||
>
|
||
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
||
<span className="font-semibold text-white">
|
||
{faq.question}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
||
{faq.answer}
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Final CTA Section
|
||
const ComplianceReadySystemsFinalCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 relative overflow-hidden">
|
||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="text-center max-w-4xl mx-auto"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="mb-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-green-500">
|
||
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
||
<Shield className="w-5 h-5 text-foreground" />
|
||
<span className="text-foreground text-base font-medium">
|
||
Trust & Security
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
||
Build Trust and Security{" "}
|
||
<span className="text-accent">with WDI's Expertise</span>
|
||
</h2>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
||
>
|
||
Navigate the complex world of regulatory compliance with confidence.
|
||
WDI builds and fortifies systems that stand up to the strictest
|
||
standards.
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<ShimmerButton
|
||
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Calendar className="w-6 h-6 flex-shrink-0" />
|
||
<span>Schedule a Security & Compliance Consultation</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
<p className="text-muted-foreground text-sm">
|
||
Assessment • Design • Development • Testing • Documentation •
|
||
Monitoring
|
||
</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Background Decorative Elements */}
|
||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
||
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-green-500/3 rounded-full blur-3xl"></div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Main Compliance-Ready Systems Page
|
||
export const ComplianceReadySystems = () => {
|
||
return (
|
||
<div className="dark min-h-screen">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-black">
|
||
<ComplianceReadySystemsHero />
|
||
</section>
|
||
|
||
{/* Challenge */}
|
||
<section className="bg-background">
|
||
<ComplianceReadySystemsChallenge />
|
||
</section>
|
||
|
||
{/* What's Included */}
|
||
<section className="bg-card">
|
||
<ComplianceReadySystemsIncludes />
|
||
</section>
|
||
|
||
{/* Benefits */}
|
||
<section className="bg-background">
|
||
<ComplianceReadySystemsBenefits />
|
||
</section>
|
||
|
||
{/* Process */}
|
||
<section className="bg-card">
|
||
<ComplianceReadySystemsProcess />
|
||
</section>
|
||
|
||
{/* Target Audience */}
|
||
<section className="bg-background">
|
||
<ComplianceReadySystemsAudience />
|
||
</section>
|
||
|
||
{/* Case Studies */}
|
||
<section className="bg-card">
|
||
<ComplianceReadySystemsCaseStudies />
|
||
</section>
|
||
|
||
{/* Mid-Page CTA */}
|
||
<section className="bg-background">
|
||
<ComplianceReadySystemsInlineCTA />
|
||
</section>
|
||
|
||
{/* FAQs */}
|
||
<section className="bg-card">
|
||
<ComplianceReadySystemsFAQs />
|
||
</section>
|
||
|
||
{/* Final CTA */}
|
||
<section className="bg-background">
|
||
<ComplianceReadySystemsFinalCTA />
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<section className="bg-card">
|
||
{/* <Footer /> */}
|
||
</section>
|
||
</div>
|
||
);
|
||
};
|