1518 lines
61 KiB
TypeScript
1518 lines
61 KiB
TypeScript
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
import { Button } from "../components/ui/button";
|
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "../components/ui/accordion";
|
|
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
|
import {
|
|
Shield,
|
|
ShieldCheck,
|
|
Lock,
|
|
Key,
|
|
FileCheck,
|
|
Database,
|
|
Eye,
|
|
AlertTriangle,
|
|
CheckCircle,
|
|
Search,
|
|
Code,
|
|
Network,
|
|
Rocket,
|
|
X,
|
|
ArrowRight,
|
|
Star,
|
|
Calendar,
|
|
MessageSquare,
|
|
Users,
|
|
Activity,
|
|
Settings,
|
|
BarChart3,
|
|
FileText,
|
|
Palette,
|
|
Brain,
|
|
Zap,
|
|
Clock,
|
|
ChevronRight,
|
|
UserCheck,
|
|
Fingerprint,
|
|
ScrollText,
|
|
Archive,
|
|
} from "lucide-react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { Helmet } from "react-helmet-async";
|
|
|
|
// Medical Compliance Hero Section
|
|
const MedicalComplianceHero = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Medical Compliance Solutions & Services by WDI</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI delivers medical compliance solutions to automate regulatory processes, minimize risks, and ensure your healthcare organization stays fully compliant."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/industries/healthcare/medical-compliance-solutions" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Medical Compliance Solutions & Services by WDI" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI delivers medical compliance solutions to automate regulatory processes, minimize risks, and ensure your healthcare organization stays fully compliant."
|
|
/>
|
|
<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="Medical Compliance Solutions & Services by WDI" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI delivers medical compliance solutions to automate regulatory processes, minimize risks, and ensure your healthcare organization stays fully compliant."
|
|
/>
|
|
<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"
|
|
>
|
|
{/* Industries 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">
|
|
Industries • Healthcare
|
|
</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">
|
|
Medical Compliance Solutions
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Ensure unwavering regulatory adherence and robust data security
|
|
with WDI's specialized medical compliance software solutions.
|
|
</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>View Compliance Case Studies</span>
|
|
</div>
|
|
</Button>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with Compliance Dashboard 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 Dashboard 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 Interface */}
|
|
<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-3xl p-6 mx-auto max-w-2xl shadow-2xl border border-gray-700"
|
|
>
|
|
{/* Dashboard Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.0 }}
|
|
className="flex items-center justify-between mb-6"
|
|
>
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-white">
|
|
Compliance Management Center
|
|
</h3>
|
|
<p className="text-gray-400 text-sm">
|
|
Real-time compliance monitoring
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<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" />
|
|
Compliant
|
|
</Badge>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Compliance Overview */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
className="bg-gradient-to-br from-green-600 to-emerald-600 rounded-2xl p-6 mb-6"
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div>
|
|
<div className="text-green-100 text-sm mb-1">
|
|
Overall Compliance Score
|
|
</div>
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 1, delay: 1.4 }}
|
|
className="text-white text-3xl font-bold"
|
|
>
|
|
98.7%
|
|
</motion.div>
|
|
</div>
|
|
<div className="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
|
|
<Shield className="w-6 h-6 text-white" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-green-100 text-sm">
|
|
<span className="flex items-center gap-1">
|
|
<FileCheck className="w-4 h-4" />
|
|
Last Audit: Passed
|
|
</span>
|
|
<span>Next Review: 30 days</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Compliance Status Grid */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.6 }}
|
|
className="grid grid-cols-2 gap-4 mb-6"
|
|
>
|
|
{[
|
|
{
|
|
name: "HIPAA",
|
|
status: "100%",
|
|
detail: "Fully Compliant",
|
|
icon: ShieldCheck,
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "GDPR",
|
|
status: "98%",
|
|
detail: "2 Minor Items",
|
|
icon: Lock,
|
|
color: "yellow",
|
|
},
|
|
{
|
|
name: "FDA 21 CFR",
|
|
status: "100%",
|
|
detail: "Validated",
|
|
icon: FileCheck,
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "SOC 2",
|
|
status: "95%",
|
|
detail: "In Progress",
|
|
icon: Settings,
|
|
color: "blue",
|
|
},
|
|
].map((compliance, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: 1.8 + i * 0.1 }}
|
|
className="bg-gray-800/50 rounded-xl p-4"
|
|
>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<compliance.icon
|
|
className={`w-4 h-4 ${compliance.color === "green"
|
|
? "text-green-400"
|
|
: compliance.color === "yellow"
|
|
? "text-yellow-400"
|
|
: compliance.color === "blue"
|
|
? "text-blue-400"
|
|
: "text-gray-400"
|
|
}`}
|
|
/>
|
|
<span className="text-white font-medium text-sm">
|
|
{compliance.name}
|
|
</span>
|
|
</div>
|
|
<div className="text-gray-300 text-lg font-semibold">
|
|
{compliance.status}
|
|
</div>
|
|
<div className="text-gray-400 text-xs">
|
|
{compliance.detail}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
|
|
{/* Audit Trail */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 2.2 }}
|
|
className="bg-gray-800/30 rounded-xl p-4 mb-6"
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="text-white font-medium">
|
|
Audit Trail Activity
|
|
</span>
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-gray-400 hover:text-white"
|
|
>
|
|
24H
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="text-xs text-accent bg-accent/20"
|
|
>
|
|
7D
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Simulated Activity Chart */}
|
|
<div className="relative h-24 flex items-end justify-between gap-1">
|
|
{Array.from({ length: 12 }, (_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ height: 0 }}
|
|
animate={{ height: `${40 + Math.random() * 40}%` }}
|
|
transition={{ duration: 0.8, delay: 2.4 + i * 0.05 }}
|
|
className="bg-gradient-to-t from-blue-500/60 to-blue-400/20 rounded-t-sm w-full"
|
|
></motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Recent Compliance Activities */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 2.6 }}
|
|
className="space-y-3"
|
|
>
|
|
<div className="flex items-center justify-between text-white">
|
|
<span className="font-medium">Recent Activities</span>
|
|
<ChevronRight className="w-4 h-4 text-gray-400" />
|
|
</div>
|
|
|
|
{[
|
|
{
|
|
activity: "Access Control Review",
|
|
detail: "User permissions updated",
|
|
time: "1h ago",
|
|
icon: Key,
|
|
color: "blue",
|
|
},
|
|
{
|
|
activity: "Data Encryption Audit",
|
|
detail: "All systems validated",
|
|
time: "4h ago",
|
|
icon: Lock,
|
|
color: "green",
|
|
},
|
|
{
|
|
activity: "Compliance Report Generated",
|
|
detail: "Q4 2024 assessment",
|
|
time: "1 day ago",
|
|
icon: FileText,
|
|
color: "purple",
|
|
},
|
|
].map((activity, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.5, delay: 2.8 + i * 0.1 }}
|
|
className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
|
|
>
|
|
<div
|
|
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "blue"
|
|
? "bg-blue-500/20"
|
|
: activity.color === "green"
|
|
? "bg-green-500/20"
|
|
: "bg-purple-500/20"
|
|
}`}
|
|
>
|
|
<activity.icon
|
|
className={`w-4 h-4 ${activity.color === "blue"
|
|
? "text-blue-400"
|
|
: activity.color === "green"
|
|
? "text-green-400"
|
|
: "text-purple-400"
|
|
}`}
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-white text-sm">
|
|
{activity.activity}
|
|
</div>
|
|
<div className="text-gray-400 text-xs">
|
|
{activity.detail}
|
|
</div>
|
|
</div>
|
|
<div className="text-gray-400 text-xs">
|
|
{activity.time}
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Floating Security Element */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, delay: 3.0 }}
|
|
className="absolute -bottom-6 -left-6 transform -rotate-12"
|
|
>
|
|
<div className="w-16 h-16 bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-full flex items-center justify-center border border-red-500/30">
|
|
<Lock className="w-8 h-8 text-red-400" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Real-time Monitoring */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.8, delay: 3.2 }}
|
|
className="absolute -top-8 -right-8 space-y-2"
|
|
>
|
|
<div className="flex items-center gap-2 text-blue-400 text-sm">
|
|
<Activity className="w-4 h-4" />
|
|
<span>Real-time Monitoring</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-blue-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-green-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>
|
|
|
|
{/* Audit Trail Badge */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 3.4 }}
|
|
className="absolute top-1/4 right-1/4 transform translate-x-1/2 -translate-y-1/2"
|
|
>
|
|
<div className="w-16 h-16 bg-purple-500/10 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl border border-purple-500/30">
|
|
<div className="text-center">
|
|
<ScrollText className="w-6 h-6 text-purple-400 mx-auto mb-1" />
|
|
<div className="text-purple-400 text-xs font-bold">
|
|
AUDIT
|
|
</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: 3.6 }}
|
|
className="flex justify-center gap-4 flex-wrap mt-8"
|
|
>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30"
|
|
>
|
|
<ShieldCheck className="w-3 h-3 mr-1" />
|
|
HIPAA Compliant
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
|
>
|
|
<Lock className="w-3 h-3 mr-1" />
|
|
Data Encryption
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
|
>
|
|
<ScrollText className="w-3 h-3 mr-1" />
|
|
Audit Trails
|
|
</Badge>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// The Challenge We Solve
|
|
const MedicalComplianceChallenge = () => {
|
|
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">
|
|
Addressing the Core Challenges of Medical Compliance
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
|
{/* Challenge */}
|
|
<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 Challenge
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-4 text-muted-foreground">
|
|
<p>
|
|
Navigating the complex and ever-evolving landscape of
|
|
healthcare regulations (e.g., HIPAA, GDPR, FDA 21 CFR Part
|
|
11) is a significant challenge for medical organizations.
|
|
Non-compliance can lead to severe penalties, data
|
|
breaches, and reputational damage, while manual compliance
|
|
processes are often inefficient and prone to error.
|
|
</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</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 severe penalties</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Manual compliance processes</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<X className="w-4 h-4 text-red-400 mt-1 flex-shrink-0" />
|
|
<span>Data breach vulnerabilities</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 Medical Compliance Solution
|
|
</h3>
|
|
</div>
|
|
<div className="space-y-4 text-muted-foreground">
|
|
<p>
|
|
WDI specializes in developing and integrating medical
|
|
compliance solutions that ensure stringent adherence to
|
|
global and local healthcare regulations. We build systems
|
|
for secure data management, audit trails, privacy
|
|
management, and electronic record keeping, minimizing risk
|
|
and streamlining your compliance efforts.
|
|
</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>Automated compliance workflows</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</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>Secure data management</span>
|
|
</li>
|
|
<li className="flex items-start gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-400 mt-1 flex-shrink-0" />
|
|
<span>Risk minimization systems</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Key Features & Capabilities
|
|
const MedicalComplianceFeatures = () => {
|
|
const features = [
|
|
{
|
|
icon: ShieldCheck,
|
|
title: "HIPAA & GDPR Compliant Data Management",
|
|
description:
|
|
"Secure storage, transmission, and processing of Protected Health Information (PHI) and personal data.",
|
|
},
|
|
{
|
|
icon: FileCheck,
|
|
title: "FDA 21 CFR Part 11 Adherence",
|
|
description:
|
|
"Solutions for electronic records and electronic signatures, ensuring authenticity, integrity, and confidentiality.",
|
|
},
|
|
{
|
|
icon: ScrollText,
|
|
title: "Audit Trails & Activity Logging",
|
|
description:
|
|
"Comprehensive tracking of all system access and data modifications for accountability and compliance reporting.",
|
|
},
|
|
{
|
|
icon: Key,
|
|
title: "Access Control & User Permissions",
|
|
description:
|
|
"Granular control over who can access specific data and functionalities, minimizing unauthorized access.",
|
|
},
|
|
{
|
|
icon: Lock,
|
|
title: "Data Encryption (At Rest & In Transit)",
|
|
description:
|
|
"Implementing industry-standard encryption protocols to protect sensitive health data from breaches.",
|
|
},
|
|
{
|
|
icon: UserCheck,
|
|
title: "Consent Management Systems",
|
|
description:
|
|
"Tools for managing patient consent for data usage, sharing, and communication in line with privacy regulations.",
|
|
},
|
|
{
|
|
icon: MessageSquare,
|
|
title: "Secure Communication & Collaboration",
|
|
description:
|
|
"Encrypted messaging and file sharing within healthcare environments to protect sensitive discussions.",
|
|
},
|
|
];
|
|
|
|
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">
|
|
Powerful Features for Your Medical Compliance
|
|
</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"
|
|
>
|
|
{features.slice(0, 6).map((feature, index) => {
|
|
const IconComponent = feature.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">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{feature.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">
|
|
<MessageSquare className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{features[6].title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{features[6].description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// The WDI Advantage
|
|
const MedicalComplianceAdvantage = () => {
|
|
const advantages = [
|
|
{
|
|
icon: Brain,
|
|
title: "Unrivaled Regulatory Expertise",
|
|
description:
|
|
"Our team possesses deep knowledge of HIPAA, GDPR, FDA guidelines, and other critical healthcare compliance frameworks.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Security-First Development",
|
|
description:
|
|
"We bake security into every layer of development, from architecture to deployment, ensuring robust data protection.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Automated Compliance Workflows",
|
|
description:
|
|
"Designing systems that automate audit trails, access controls, and reporting, reducing manual effort and human error.",
|
|
},
|
|
{
|
|
icon: Activity,
|
|
title: "Scalable & Future-Proof",
|
|
description:
|
|
"Building solutions that can adapt to evolving regulations and securely handle growing volumes of sensitive data.",
|
|
},
|
|
];
|
|
|
|
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">
|
|
Why Partner with WDI for Medical Compliance Solutions?
|
|
</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-4 gap-8"
|
|
>
|
|
{advantages.map((advantage, index) => {
|
|
const IconComponent = advantage.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">
|
|
{advantage.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{advantage.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Development Process
|
|
const MedicalComplianceProcess = () => {
|
|
const steps = [
|
|
{
|
|
title: "Compliance Assessment & Requirements Definition",
|
|
description:
|
|
"In-depth analysis of your specific regulatory landscape and precise needs for data protection and auditability.",
|
|
icon: Search,
|
|
},
|
|
{
|
|
title: "Secure Architecture Design",
|
|
description:
|
|
"Designing system architecture with security-by-design and privacy-by-design principles at its core.",
|
|
icon: Palette,
|
|
},
|
|
{
|
|
title: "Development with Compliance Protocols",
|
|
description:
|
|
"Building features and functionalities while strictly adhering to secure coding standards and regulatory requirements.",
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "Robust Security & Compliance Testing",
|
|
description:
|
|
"Comprehensive penetration testing, vulnerability assessments, and specific compliance audits (e.g., HIPAA compliance checks).",
|
|
icon: Shield,
|
|
},
|
|
{
|
|
title: "Documentation & Validation Support",
|
|
description:
|
|
"Providing thorough documentation and supporting your team through validation and audit processes.",
|
|
icon: FileText,
|
|
},
|
|
{
|
|
title: "Deployment & Ongoing Monitoring",
|
|
description:
|
|
"Secure system deployment, continuous security monitoring, and regular updates to adapt to new regulations.",
|
|
icon: Rocket,
|
|
},
|
|
];
|
|
|
|
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 Streamlined Process for Medical Compliance Solution Development
|
|
</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>
|
|
);
|
|
};
|
|
|
|
// Case Studies
|
|
const MedicalComplianceCaseStudies = () => {
|
|
const caseStudies = [
|
|
{
|
|
title: "HIPAA-Compliant Patient Data Archiving System",
|
|
client: "Large Medical Facility",
|
|
problem:
|
|
"A large medical facility struggled with securely archiving and retrieving vast amounts of patient data while maintaining HIPAA compliance.",
|
|
solution:
|
|
"WDI developed a centralized, encrypted, and auditable data archiving system with granular access controls and robust audit trails.",
|
|
results:
|
|
"Ensured 100% HIPAA compliance for archived data and reduced data retrieval time by 70%.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=400&h=300&fit=crop&auto=format",
|
|
engagement: "Compliance transformation",
|
|
gradient: "from-blue-500/20 to-cyan-500/20",
|
|
},
|
|
{
|
|
title: "Electronic Consent Management Platform",
|
|
client: "Research Institution",
|
|
problem:
|
|
"A research institution faced challenges managing patient consents for clinical trials in a compliant and efficient manner.",
|
|
solution:
|
|
"Built a digital consent management platform adhering to FDA 21 CFR Part 11 standards, with electronic signatures and automated audit logs.",
|
|
results:
|
|
"Achieved full compliance for electronic consents and accelerated patient enrollment by 15%.",
|
|
image:
|
|
"https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=400&h=300&fit=crop&auto=format",
|
|
engagement: "Research compliance optimization",
|
|
gradient: "from-green-500/20 to-emerald-500/20",
|
|
},
|
|
];
|
|
|
|
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-8">
|
|
Medical Compliance Solution Success Stories
|
|
</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 gap-8 max-w-5xl mx-auto"
|
|
>
|
|
{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-card/20 backdrop-blur-md border-white/10 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-muted-foreground mb-2 uppercase tracking-wider">
|
|
{study.client}
|
|
</div>
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-xs bg-accent/20 text-accent border-accent/30"
|
|
>
|
|
{study.results.split(" ").slice(0, 4).join(" ")}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-foreground 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">
|
|
<div className="space-y-3 mb-4">
|
|
<div>
|
|
<span className="text-red-400 text-xs font-medium">
|
|
Problem:{" "}
|
|
</span>
|
|
<span className="text-muted-foreground text-sm">
|
|
{study.problem}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-blue-400 text-xs font-medium">
|
|
Solution:{" "}
|
|
</span>
|
|
<span className="text-muted-foreground text-sm">
|
|
{study.solution}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="text-green-400 text-xs font-medium">
|
|
Results:{" "}
|
|
</span>
|
|
<span className="text-muted-foreground text-sm">
|
|
{study.results}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4 text-xs text-muted-foreground">
|
|
<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>
|
|
);
|
|
};
|
|
|
|
// Client Testimonials
|
|
const MedicalComplianceTestimonials = () => {
|
|
const testimonials = [
|
|
{
|
|
quote:
|
|
"WDI's expertise in medical compliance is unparalleled. They built us a system that gives us complete peace of mind regarding HIPAA and patient data security.",
|
|
author: "Compliance Officer",
|
|
company: "Healthcare Provider",
|
|
avatar:
|
|
"https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&auto=format",
|
|
},
|
|
{
|
|
quote:
|
|
"Navigating FDA regulations was a huge challenge until we partnered with WDI. Their solution for electronic records is robust and made our audit process so much smoother.",
|
|
author: "Director of Clinical Operations",
|
|
company: "Biotech Firm",
|
|
avatar:
|
|
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&auto=format",
|
|
},
|
|
];
|
|
|
|
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">
|
|
What Our Clients Say About Our Medical Compliance Solutions
|
|
</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 gap-8 max-w-4xl mx-auto"
|
|
>
|
|
{testimonials.map((testimonial, 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: -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">
|
|
<div className="flex items-center gap-1 mb-6">
|
|
{[...Array(5)].map((_, i) => (
|
|
<Star
|
|
key={i}
|
|
className="w-5 h-5 fill-yellow-400 text-yellow-400"
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<blockquote className="text-gray-300 mb-6 leading-relaxed">
|
|
"{testimonial.quote}"
|
|
</blockquote>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<ImageWithFallback
|
|
src={testimonial.avatar}
|
|
alt={testimonial.author}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
<div>
|
|
<div className="text-white font-medium">
|
|
{testimonial.author}
|
|
</div>
|
|
<div className="text-gray-400 text-sm">
|
|
{testimonial.company}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Mid-Page Lead Capture CTA
|
|
const MedicalComplianceInlineCTA = () => {
|
|
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-purple-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 Excellence
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
|
Ready to Fortify Your{" "}
|
|
<span className="text-accent">Medical Compliance Strategy?</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Leverage our expertise to build secure and fully compliant medical
|
|
software 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">
|
|
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
|
<span>Discuss Your Compliance Needs</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// FAQs
|
|
const MedicalComplianceFAQs = () => {
|
|
const faqs = [
|
|
{
|
|
question:
|
|
"What specific healthcare regulations (e.g., HIPAA, GDPR, FDA 21 CFR Part 11) do you specialize in?",
|
|
answer:
|
|
"We specialize in all major healthcare regulations including HIPAA (Health Insurance Portability and Accountability Act), GDPR (General Data Protection Regulation), FDA 21 CFR Part 11 for electronic records and signatures, SOC 2 compliance, HITECH Act requirements, and state-specific healthcare privacy laws. Our team stays current with regulatory updates and ensures your systems meet all applicable standards.",
|
|
},
|
|
{
|
|
question:
|
|
"How do you ensure data encryption and access control for sensitive medical data?",
|
|
answer:
|
|
"We implement multiple layers of security including AES-256 encryption for data at rest, TLS 1.3 for data in transit, and end-to-end encryption for communications. Access controls include role-based permissions, multi-factor authentication, privileged access management, and the principle of least privilege. All access is logged and monitored in real-time with automated alerting for anomalies.",
|
|
},
|
|
{
|
|
question:
|
|
"Can you integrate compliance features into existing healthcare systems?",
|
|
answer:
|
|
"Yes, we excel at retrofitting existing healthcare systems with compliance features. We can integrate audit logging, access controls, encryption, and monitoring capabilities into legacy systems without disrupting operations. Our approach includes comprehensive assessment, phased implementation, and thorough testing to ensure seamless integration while maintaining system performance.",
|
|
},
|
|
{
|
|
question:
|
|
"What is your process for auditing and validating the compliance of developed software?",
|
|
answer:
|
|
"Our compliance validation process includes automated security scanning, penetration testing, code audits, documentation reviews, and compliance gap analyses. We conduct mock audits, provide detailed compliance reports, maintain audit trails, and offer ongoing compliance monitoring. We also work with third-party auditors and can support you through official regulatory audits.",
|
|
},
|
|
{
|
|
question:
|
|
"Do you provide solutions for electronic signatures in a compliant manner?",
|
|
answer:
|
|
"Yes, we provide FDA 21 CFR Part 11 compliant electronic signature solutions that ensure authenticity, integrity, and non-repudiation. Our solutions include biometric authentication, digital certificates, timestamping, audit trails, and user verification. We support various signature methods including typed, drawn, and certificate-based signatures with full legal validity.",
|
|
},
|
|
];
|
|
|
|
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 MedicalComplianceFinalCTA = () => {
|
|
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-purple-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">
|
|
Regulatory Excellence
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
|
Your Unwavering Partner for{" "}
|
|
<span className="text-accent">Medical Regulatory Excellence</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"
|
|
>
|
|
Partner with WDI to leverage deep compliance expertise and robust
|
|
technology, ensuring your medical operations are secure, efficient,
|
|
and fully aligned with regulatory 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>Book Your Expert Compliance Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
<p className="text-muted-foreground text-sm">
|
|
Assessment • Design • Development • Testing • Validation • Support
|
|
</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-purple-500/3 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main Medical Compliance Page
|
|
export const MedicalComplianceSolutions = () => {
|
|
return (
|
|
<div className="dark min-h-screen">
|
|
{/* <Navigation /> */}
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-black">
|
|
<MedicalComplianceHero />
|
|
</section>
|
|
|
|
{/* Challenge */}
|
|
<section className="bg-background">
|
|
<MedicalComplianceChallenge />
|
|
</section>
|
|
|
|
{/* Features */}
|
|
<section className="bg-card">
|
|
<MedicalComplianceFeatures />
|
|
</section>
|
|
|
|
{/* Advantage */}
|
|
<section className="bg-background">
|
|
<MedicalComplianceAdvantage />
|
|
</section>
|
|
|
|
{/* Process */}
|
|
<section className="bg-card">
|
|
<MedicalComplianceProcess />
|
|
</section>
|
|
|
|
{/* Case Studies */}
|
|
<section className="bg-background">
|
|
<MedicalComplianceCaseStudies />
|
|
</section>
|
|
|
|
{/* Testimonials */}
|
|
{/* <section className="bg-card">
|
|
<MedicalComplianceTestimonials />
|
|
</section> */}
|
|
|
|
{/* Mid-Page CTA */}
|
|
<section className="bg-background">
|
|
<MedicalComplianceInlineCTA />
|
|
</section>
|
|
|
|
{/* FAQs */}
|
|
<section className="bg-card">
|
|
<MedicalComplianceFAQs />
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="bg-background">
|
|
<MedicalComplianceFinalCTA />
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<section className="bg-card">
|
|
{/* <Footer /> */}
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|