Ethyca + Fides Animated Explainer #6114
Description
import React, { useState, useEffect } from 'react';
import { ArrowRight, Database, Shield, Code, Settings, Users, List, FileText, Check, X } from 'lucide-react';
const EthycaFidesVisual = () => {
const [step, setStep] = useState(0);
const totalSteps = 5;
useEffect(() => {
const timer = setTimeout(() => {
setStep((prevStep) => (prevStep + 1) % (totalSteps + 1));
}, 3000);
return () => clearTimeout(timer);
}, [step]);
const handleStepClick = (index) => {
setStep(index);
};
return (
How Fides and Ethyca Work Together
<div className="w-full mb-8">
<div className="flex justify-between mb-2">
{[...Array(totalSteps)].map((_, i) => (
<button
key={i}
onClick={() => handleStepClick(i)}
className={`w-12 h-1 rounded-full transition-all duration-300 ${
i === step ? 'bg-blue-600 w-16' : 'bg-gray-300'
}`}
/>
))}
</div>
<div className="text-sm text-center text-gray-600">
{step === 0 && "Overview: Ethyca and Fides Ecosystem"}
{step === 1 && "Step 1: Privacy-as-Code with Fides"}
{step === 2 && "Step 2: Data Mapping & Classification"}
{step === 3 && "Step 3: Subject Rights Fulfillment"}
{step === 4 && "Step 4: Compliance & Reporting"}
</div>
</div>
<div className="relative w-full h-96 bg-white rounded-lg shadow-md overflow-hidden border border-gray-200">
{/* Overview */}
<div className={`absolute inset-0 p-6 transition-opacity duration-500 ${
step === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<div className="flex flex-col h-full">
<div className="flex justify-between items-center mb-8">
<div className="flex flex-col items-center p-4 bg-blue-100 rounded-lg w-1/3 mx-2 transform transition-transform duration-700 hover:scale-105">
<Code size={40} className="text-blue-600 mb-2" />
<h3 className="font-bold text-blue-800">Fides</h3>
<p className="text-sm text-center text-gray-700">Open-source privacy engineering platform</p>
</div>
<ArrowRight size={24} className="text-gray-400" />
<div className="flex flex-col items-center p-4 bg-purple-100 rounded-lg w-1/3 mx-2 transform transition-transform duration-700 hover:scale-105">
<Shield size={40} className="text-purple-600 mb-2" />
<h3 className="font-bold text-purple-800">Ethyca</h3>
<p className="text-sm text-center text-gray-700">Privacy infrastructure company</p>
</div>
</div>
<div className="grid grid-cols-3 gap-4 mt-4">
<div className="bg-gray-100 p-3 rounded border border-gray-200 flex items-center">
<Code size={20} className="text-gray-600 mr-2" />
<span className="text-sm">Privacy-as-Code</span>
</div>
<div className="bg-gray-100 p-3 rounded border border-gray-200 flex items-center">
<Database size={20} className="text-gray-600 mr-2" />
<span className="text-sm">Data Mapping</span>
</div>
<div className="bg-gray-100 p-3 rounded border border-gray-200 flex items-center">
<Users size={20} className="text-gray-600 mr-2" />
<span className="text-sm">Consent Management</span>
</div>
<div className="bg-gray-100 p-3 rounded border border-gray-200 flex items-center">
<List size={20} className="text-gray-600 mr-2" />
<span className="text-sm">Rights Requests</span>
</div>
<div className="bg-gray-100 p-3 rounded border border-gray-200 flex items-center">
<Settings size={20} className="text-gray-600 mr-2" />
<span className="text-sm">Privacy Orchestration</span>
</div>
<div className="bg-gray-100 p-3 rounded border border-gray-200 flex items-center">
<FileText size={20} className="text-gray-600 mr-2" />
<span className="text-sm">Compliance Reporting</span>
</div>
</div>
</div>
</div>
{/* Step 1: Privacy-as-Code */}
<div className={`absolute inset-0 p-6 transition-opacity duration-500 ${
step === 1 ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<h2 className="text-xl font-bold mb-4">Privacy-as-Code with Fides</h2>
<div className="flex h-4/5">
<div className="w-1/2 p-4 flex flex-col justify-between">
<div className="bg-gray-100 p-4 rounded shadow-sm mb-4 overflow-hidden">
<pre className="text-xs">
<code className="text-blue-700">
{`# Fides privacy manifest
resources:
customer_table:
fides_key: customer
name: customers
fields:
- name: id
fides_meta:
primary_key: true
- name: email
fides_meta:
categories: [user.contact.email]
data_type: string
- name: full_name
fides_meta:
categories: [user.name]
data_type: string`}
<div className="bg-blue-100 p-3 rounded animate-pulse">
<p className="text-sm"><strong>Fides adds privacy metadata</strong> to your data models as code</p>
</div>
</div>
<div className="w-1/2 flex flex-col items-center justify-center p-4">
<div className="relative w-full h-64 bg-white rounded-lg border border-gray-300 p-4 flex flex-col">
<div className="text-sm font-bold mb-2">Customer Database</div>
<div className="border-b border-gray-300 pb-2 mb-2 flex">
<span className="w-1/3 text-xs font-semibold">id</span>
<span className="w-1/3 text-xs font-semibold">email</span>
<span className="w-1/3 text-xs font-semibold">full_name</span>
</div>
<div className="flex text-xs mb-1 animate-pulse bg-green-50">
<span className="w-1/3">001</span>
<span className="w-1/3 relative">
[email protected]
<span className="absolute top-0 right-1 text-green-500 text-xs">📧</span>
</span>
<span className="w-1/3 relative">
Jane Smith
<span className="absolute top-0 right-1 text-green-500 text-xs">👤</span>
</span>
</div>
<div className="flex text-xs mb-1">
<span className="w-1/3">002</span>
<span className="w-1/3 relative">
[email protected]
<span className="absolute top-0 right-1 text-green-500 text-xs">📧</span>
</span>
<span className="w-1/3 relative">
John Doe
<span className="absolute top-0 right-1 text-green-500 text-xs">👤</span>
</span>
</div>
<div className="mt-4 text-xs text-center bg-blue-50 p-2 rounded">
<p>Privacy metadata is attached to each field</p>
<div className="flex justify-center mt-2">
<span className="mx-2 flex items-center"><span className="text-green-500 mr-1">📧</span> PII: Contact Email</span>
<span className="mx-2 flex items-center"><span className="text-green-500 mr-1">👤</span> PII: Personal Name</span>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Step 2: Data Mapping */}
<div className={`absolute inset-0 p-6 transition-opacity duration-500 ${
step === 2 ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<h2 className="text-xl font-bold mb-4">Data Mapping & Classification</h2>
<div className="flex h-4/5">
<div className="w-1/2 p-4">
<div className="relative bg-white rounded-lg border border-gray-300 p-4 h-64">
<div className="absolute -top-3 -left-3 bg-blue-500 text-white px-2 py-1 rounded text-xs">
CRM System
</div>
<div className="bg-blue-50 rounded p-2 mb-2 flex items-center">
<Database size={16} className="text-blue-500 mr-2" />
<span className="text-xs">customers</span>
</div>
<div className="bg-blue-50 rounded p-2 mb-2 flex items-center">
<Database size={16} className="text-blue-500 mr-2" />
<span className="text-xs">orders</span>
</div>
<div className="absolute -bottom-3 -right-3 bg-green-100 text-green-800 px-2 py-1 rounded text-xs transform rotate-6 border border-green-300">
Fides mapped!
</div>
</div>
<div className="flex justify-center mt-8">
<ArrowRight size={60} className="text-gray-400 animate-pulse" />
</div>
</div>
<div className="w-1/2 p-4">
<div className="bg-white rounded-lg border border-gray-300 p-4 h-full relative">
<h3 className="text-md font-bold mb-4">Fides Data Map</h3>
<div className="flex mb-4 items-center">
<div className="bg-blue-100 rounded-full w-10 h-10 flex items-center justify-center">
<Database size={20} className="text-blue-600" />
</div>
<div className="ml-3">
<div className="text-sm font-semibold">Customer Data</div>
<div className="text-xs text-gray-500">3 PII fields identified</div>
</div>
<div className="ml-auto bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">
GDPR, CCPA
</div>
</div>
<div className="flex mb-4 items-center opacity-50">
<div className="bg-purple-100 rounded-full w-10 h-10 flex items-center justify-center">
<Database size={20} className="text-purple-600" />
</div>
<div className="ml-3">
<div className="text-sm font-semibold">Order History</div>
<div className="text-xs text-gray-500">2 PII fields identified</div>
</div>
<div className="ml-auto bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">
GDPR
</div>
</div>
<div className="absolute bottom-4 left-4 right-4">
<div className="bg-green-100 p-2 rounded text-sm border border-green-200 text-center">
<span className="font-semibold">Automatic data classification</span>
<div className="flex justify-center mt-1 text-xs text-gray-700">
<span className="mx-1 px-1 bg-red-100 rounded">sensitive</span>
<span className="mx-1 px-1 bg-yellow-100 rounded">personal</span>
<span className="mx-1 px-1 bg-blue-100 rounded">contact</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Step 3: Subject Rights */}
<div className={`absolute inset-0 p-6 transition-opacity duration-500 ${
step === 3 ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<h2 className="text-xl font-bold mb-4">Subject Rights Fulfillment</h2>
<div className="flex h-4/5">
<div className="w-1/3 p-4 flex flex-col">
<div className="bg-gray-100 p-3 rounded mb-4 shadow-sm">
<h3 className="text-sm font-bold text-gray-700 mb-2">User Request</h3>
<div className="bg-white p-2 rounded border border-gray-200 animate-pulse">
<div className="text-xs mb-1"><strong>From:</strong> [email protected]</div>
<div className="text-xs mb-1"><strong>Request:</strong> Delete my data</div>
<div className="text-xs"><strong>Status:</strong> <span className="text-orange-500">Processing</span></div>
</div>
</div>
<div className="flex-1 flex flex-col justify-end">
<div className="bg-blue-100 p-3 rounded">
<p className="text-xs font-semibold">Fides orchestrates data subject requests across all systems</p>
</div>
</div>
</div>
<div className="w-2/3 flex flex-col items-center justify-center p-4">
<div className="w-full bg-white rounded-lg border border-gray-300 p-4">
<h3 className="text-sm font-bold mb-3">Fides Rights Request Orchestration</h3>
<div className="space-y-3 mb-4">
<div className="flex items-center">
<div className="w-1/3 text-xs">CRM Database</div>
<div className="w-2/3 bg-gray-100 h-6 rounded relative overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-green-500 animate-pulse" style={{width: '100%'}}></div>
<Check size={16} className="absolute right-2 top-1/2 transform -translate-y-1/2 text-white" />
</div>
</div>
<div className="flex items-center">
<div className="w-1/3 text-xs">Marketing System</div>
<div className="w-2/3 bg-gray-100 h-6 rounded relative overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-green-500 animate-pulse" style={{width: '80%'}}></div>
</div>
</div>
<div className="flex items-center">
<div className="w-1/3 text-xs">Analytics Platform</div>
<div className="w-2/3 bg-gray-100 h-6 rounded relative overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-blue-500 animate-pulse" style={{width: '50%'}}></div>
</div>
</div>
<div className="flex items-center">
<div className="w-1/3 text-xs">Payment Processor</div>
<div className="w-2/3 bg-gray-100 h-6 rounded relative overflow-hidden">
<div className="absolute top-0 left-0 h-full bg-gray-300" style={{width: '0%'}}></div>
<span className="absolute left-2 top-1/2 transform -translate-y-1/2 text-xs text-gray-500">Queued</span>
</div>
</div>
</div>
<div className="text-xs text-center bg-yellow-50 p-2 rounded border border-yellow-200">
<p>Fides automatically tracks and reports on the fulfillment status across all systems</p>
</div>
</div>
</div>
</div>
</div>
{/* Step 4: Compliance */}
<div className={`absolute inset-0 p-6 transition-opacity duration-500 ${
step === 4 ? 'opacity-100' : 'opacity-0 pointer-events-none'
}`}>
<h2 className="text-xl font-bold mb-4">Compliance & Reporting</h2>
<div className="flex h-4/5">
<div className="w-1/2 p-4">
<div className="bg-white rounded-lg border border-gray-300 p-4 h-full flex flex-col">
<h3 className="text-sm font-bold mb-4 text-center">Ethyca Privacy Control Center</h3>
<div className="flex justify-around mb-6">
<div className="flex flex-col items-center">
<div className="rounded-full w-12 h-12 bg-green-100 flex items-center justify-center mb-2">
<span className="text-green-600 font-bold">98%</span>
</div>
<span className="text-xs">GDPR</span>
</div>
<div className="flex flex-col items-center">
<div className="rounded-full w-12 h-12 bg-green-100 flex items-center justify-center mb-2">
<span className="text-green-600 font-bold">100%</span>
</div>
<span className="text-xs">CCPA</span>
</div>
<div className="flex flex-col items-center">
<div className="rounded-full w-12 h-12 bg-yellow-100 flex items-center justify-center mb-2">
<span className="text-yellow-600 font-bold">86%</span>
</div>
<span className="text-xs">CPRA</span>
</div>
</div>
<div className="flex-1 bg-gray-100 rounded p-3 mb-3">
<h4 className="text-xs font-bold mb-2">Recent Activity</h4>
<div className="space-y-2">
<div className="text-xs bg-white p-1 rounded">✓ 5 DSRs completed today</div>
<div className="text-xs bg-white p-1 rounded">⚠️ Cookie banner compliance issue detected</div>
<div className="text-xs bg-white p-1 rounded">✓ Privacy policy updated on website</div>
</div>
</div>
<div className="bg-blue-100 p-2 rounded text-xs text-center">
<p>Ethyca provides real-time compliance monitoring and reporting</p>
</div>
</div>
</div>
<div className="w-1/2 p-4">
<div className="bg-white rounded-lg border border-gray-300 p-4 h-full relative">
<h3 className="text-sm font-bold mb-3">Compliance Documentation</h3>
<div className="flex items-center mb-3 bg-green-50 p-2 rounded">
<FileText size={16} className="text-green-500 mr-2" />
<span className="text-xs">GDPR Compliance Report</span>
<span className="ml-auto text-green-500"><Check size={16} /></span>
</div>
<div className="flex items-center mb-3 bg-green-50 p-2 rounded">
<FileText size={16} className="text-green-500 mr-2" />
<span className="text-xs">DSR Fulfillment Records</span>
<span className="ml-auto text-green-500"><Check size={16} /></span>
</div>
<div className="flex items-center mb-3 bg-green-50 p-2 rounded">
<FileText size={16} className="text-green-500 mr-2" />
<span className="text-xs">Data Processing Agreements</span>
<span className="ml-auto text-green-500"><Check size={16} /></span>
</div>
<div className="flex items-center mb-3 bg-yellow-50 p-2 rounded">
<FileText size={16} className="text-yellow-500 mr-2" />
<span className="text-xs">Third-Party Vendor Assessment</span>
<span className="ml-auto text-yellow-500">In progress</span>
</div>
<div className="absolute bottom-4 left-4 right-4">
<div className="bg-purple-100 p-2 rounded text-sm border border-purple-200 text-center">
<p className="text-xs">Automatically generated compliance documentation for audits and regulators</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="mt-6 w-full">
<div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
<h3 className="font-bold text-lg mb-2">Key Benefits</h3>
<div className="grid grid-cols-2 gap-3">
<div className="flex items-start">
<Check size={16} className="text-green-500 mr-2 mt-1" />
<p className="text-sm">Privacy implemented directly as code</p>
</div>
<div className="flex items-start">
<Check size={16} className="text-green-500 mr-2 mt-1" />
<p className="text-sm">Automated data mapping and classification</p>
</div>
<div className="flex items-start">
<Check size={16} className="text-green-500 mr-2 mt-1" />
<p className="text-sm">Streamlined rights request fulfillment</p>
</div>
<div className="flex items-start">
<Check size={16} className="text-green-500 mr-2 mt-1" />
<p className="text-sm">Comprehensive compliance reporting</p>
</div>
</div>
</div>
</div>
</div>
);
};
export default EthycaFidesVisual;