All Systems Operational
Trust Center
Transparency is at the core of our security philosophy. Monitor our uptime, security practices, and compliance status in real-time.
API
99.99%uptime
Dashboard
100%uptime
Database
99.999%uptime
CDN
100%uptime
Security Practices
Data Encryption
All data is encrypted at rest using AES-256 and in transit using TLS 1.3.
Access Control
Strict role-based access control (RBAC) and MFA enforcement for all internal tools.
Regular Audits
Quarterly third-party security audits and continuous vulnerability scanning.
Infrastructure
Hosted on AWS with multi-region redundancy and automated failover.
Incident History
resolvedOct 24, 2023
API Latency Spike
We observed increased latency in our US-East region. The issue has been identified and resolved.
No other incidents to report.
Installation
Install dependencies
npm install framer-motion lucide-reactCopy and paste the following code into your project.
"use client";
import { motion } from "framer-motion";
import {
ShieldCheck,
Activity,
Lock,
FileText,
CheckCircle2,
AlertCircle,
Server,
Clock,
type LucideIcon,
} from "lucide-react";
import { cn } from "@/lib/utils";
interface SystemStatus {
name: string;
status: "operational" | "degraded" | "outage";
uptime: string;
}
interface SecurityPractice {
title: string;
description: string;
icon: LucideIcon;
}
interface Incident {
date: string;
title: string;
status: "resolved" | "investigating" | "identified";
description: string;
}
const systems: SystemStatus[] = [
{ name: "API", status: "operational", uptime: "99.99%" },
{ name: "Dashboard", status: "operational", uptime: "100%" },
{ name: "Database", status: "operational", uptime: "99.999%" },
{ name: "CDN", status: "operational", uptime: "100%" },
];
const practices: SecurityPractice[] = [
{
title: "Data Encryption",
description:
"All data is encrypted at rest using AES-256 and in transit using TLS 1.3.",
icon: Lock,
},
{
title: "Access Control",
description:
"Strict role-based access control (RBAC) and MFA enforcement for all internal tools.",
icon: ShieldCheck,
},
{
title: "Regular Audits",
description:
"Quarterly third-party security audits and continuous vulnerability scanning.",
icon: FileText,
},
{
title: "Infrastructure",
description:
"Hosted on AWS with multi-region redundancy and automated failover.",
icon: Server,
},
];
const incidents: Incident[] = [
{
date: "Oct 24, 2023",
title: "API Latency Spike",
status: "resolved",
description:
"We observed increased latency in our US-East region. The issue has been identified and resolved.",
},
// Add more incidents if needed, or keep it clean to show stability
];
export function TrustCenter() {
return (
<section className="py-24 bg-neutral-950 text-white relative overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-emerald-900/20 via-neutral-950/0 to-neutral-950/0 pointer-events-none" />
<div className="absolute inset-0 bg-grid-white/[0.02] bg-[size:32px_32px] pointer-events-none" />
<div className="container mx-auto px-6 max-w-6xl relative z-10">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-8 mb-16">
<div>
<motion.div
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4 }}
className="flex items-center gap-2 mb-4"
>
<div className="relative flex h-2.5 w-2.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
</div>
<span className="text-sm font-medium text-emerald-400 tracking-wide uppercase">
All Systems Operational
</span>
</motion.div>
<motion.h2
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: 0.1 }}
className="text-4xl md:text-5xl font-bold tracking-tight mb-4 bg-gradient-to-r from-white via-neutral-200 to-neutral-400 bg-clip-text text-transparent"
>
Trust Center
</motion.h2>
<motion.p
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: 0.1 }}
className="text-lg text-neutral-400 max-w-2xl leading-relaxed"
>
Transparency is at the core of our security philosophy. Monitor
our uptime, security practices, and compliance status in
real-time.
</motion.p>
</div>
<motion.div
initial={{ opacity: 0, x: 20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: 0.2 }}
className="flex gap-4"
>
<button className="inline-flex items-center justify-center rounded-lg bg-white px-6 py-3 text-sm font-semibold text-neutral-950 shadow-lg shadow-white/10 hover:bg-neutral-200 transition-all hover:scale-105 active:scale-95">
Subscribe to Updates
</button>
<button className="inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-6 py-3 text-sm font-semibold text-white backdrop-blur-sm hover:bg-white/10 transition-all hover:scale-105 active:scale-95">
Contact Security
</button>
</motion.div>
</div>
{/* System Status Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-16">
{systems.map((system, i) => (
<motion.div
key={i}
initial={{ opacity: 1, y: 0 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: i * 0.05 }}
className="group p-6 rounded-xl border border-white/5 bg-neutral-900/50 backdrop-blur-sm hover:border-emerald-500/30 transition-all duration-500"
>
<div className="flex items-center justify-between mb-4">
<span className="font-medium text-neutral-200 group-hover:text-white transition-colors duration-300">
{system.name}
</span>
<CheckCircle2 className="w-5 h-5 text-emerald-500/50 group-hover:text-emerald-400 transition-colors duration-300" />
</div>
<div className="flex items-end justify-between">
<span className="text-3xl font-bold text-white tracking-tight">
{system.uptime}
</span>
<span className="text-xs text-neutral-500 font-medium uppercase tracking-wider mb-1">
uptime
</span>
</div>
<div className="w-full h-1 bg-neutral-800 rounded-full mt-4 overflow-hidden">
<motion.div
initial={{ width: 0 }}
whileInView={{ width: "100%" }}
viewport={{ once: true }}
transition={{ duration: 1, delay: 0.2 }}
className="h-full bg-emerald-500 w-full rounded-full shadow-[0_0_10px_rgba(16,185,129,0.5)]"
/>
</div>
</motion.div>
))}
</div>
<div className="grid lg:grid-cols-3 gap-12">
{/* Security Practices */}
<div className="lg:col-span-2 space-y-8">
<h3 className="text-2xl font-bold text-white tracking-tight mb-8 flex items-center gap-2">
<ShieldCheck className="w-6 h-6 text-emerald-500" />
Security Practices
</h3>
<div className="grid md:grid-cols-2 gap-6">
{practices.map((practice, i) => (
<motion.div
key={i}
initial={{ opacity: 1, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.2, ease: "easeInOut" }}
className="group flex gap-4 p-6 rounded-xl border border-white/5 bg-neutral-900/30 hover:bg-neutral-900/60 hover:border-white/10 transition-all duration-500"
>
<div className="flex-shrink-0">
<div className="w-12 h-12 rounded-lg bg-white/5 border border-white/5 flex items-center justify-center group-hover:border-emerald-500/30 group-hover:bg-emerald-500/10 transition-all duration-500">
<practice.icon className="w-6 h-6 text-neutral-400 group-hover:text-emerald-400 transition-colors duration-500" />
</div>
</div>
<div>
<h4 className="font-semibold text-white mb-2 group-hover:text-emerald-400 transition-colors duration-300">
{practice.title}
</h4>
<p className="text-sm text-neutral-400 leading-relaxed group-hover:text-neutral-300 transition-colors duration-300">
{practice.description}
</p>
</div>
</motion.div>
))}
</div>
</div>
{/* Incident History */}
<div className="lg:col-span-1">
<h3 className="text-2xl font-bold text-white tracking-tight mb-8 flex items-center gap-2">
<Activity className="w-6 h-6 text-blue-500" />
Incident History
</h3>
<div className="relative border-l border-white/10 ml-3 space-y-10 pb-8">
{incidents.map((incident, i) => (
<motion.div
key={i}
initial={{ opacity: 0, x: 10 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.4, delay: i * 0.05 }}
className="ml-8 relative group"
>
<div className="absolute -left-[39px] top-1 h-5 w-5 rounded-full border-4 border-neutral-950 bg-emerald-500 shadow-[0_0_10px_rgba(16,185,129,0.4)]" />
<div className="flex items-center gap-3 mb-2">
<span className="text-xs font-bold px-2.5 py-0.5 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 uppercase tracking-wider">
{incident.status}
</span>
<span className="text-xs text-neutral-500 font-mono">
{incident.date}
</span>
</div>
<h4 className="font-semibold text-white mb-2 group-hover:text-emerald-400 transition-colors duration-300">
{incident.title}
</h4>
<p className="text-sm text-neutral-400 leading-relaxed">
{incident.description}
</p>
</motion.div>
))}
<div className="ml-8 relative">
<div className="absolute -left-[39px] top-1 h-5 w-5 rounded-full border-4 border-neutral-950 bg-neutral-800" />
<p className="text-sm text-neutral-500 italic">
No other incidents to report.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
);
}Update the import paths to match your project setup.
Features
- ✅ Live System Status - Real-time operational status indicator
- ✅ Uptime Stats - Visual display of system reliability metrics
- ✅ Security Practices - Detailed grid of security measures and protocols
- ✅ Incident History - Timeline view of past incidents and resolutions
- ✅ Premium Design - Clean, professional aesthetic suitable for enterprise SaaS
- ✅ Responsive - Adapts perfectly to all screen sizes
Usage
import TrustCenter from "@/components/ui/trust-center";
export default function Page() {
return <TrustCenter />;
}Customization
Modifying Content
The content is defined in constant arrays at the top of the component file:
systems: Array of system components and their statuspractices: Array of security practicesincidents: Array of past incidents
const systems = [
{ name: "API", status: "operational", uptime: "99.99%" },
// ...
];