mirror of
https://github.com/PlatypusPus/MushroomEmpire.git
synced 2026-02-07 22:18:59 +00:00
ref:Cleaned the Structure
This commit is contained in:
52
frontend/components/landing/FeatureGrid.tsx
Normal file
52
frontend/components/landing/FeatureGrid.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { Reveal } from "../common/Reveal";
|
||||
|
||||
export function FeatureGrid() {
|
||||
const items = [
|
||||
{
|
||||
title: "Discovery",
|
||||
desc: "Continuously map data across apps, logs, DBs, and cloud storage to restore visibility.",
|
||||
emoji: "🧭",
|
||||
},
|
||||
{
|
||||
title: "Classification",
|
||||
desc: "Detect PII and sensitive categories (health, finance) with AI-driven labeling.",
|
||||
emoji: "🔎",
|
||||
},
|
||||
{
|
||||
title: "Remediation",
|
||||
desc: "Anonymize, minimize, and automate consent workflows to reduce exposure.",
|
||||
emoji: "🧹",
|
||||
},
|
||||
{
|
||||
title: "Monitoring",
|
||||
desc: "Continuous compliance checks with alerts and reports aligned to GDPR.",
|
||||
emoji: "📈",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="container-max py-16 content-auto" id="features">
|
||||
<Reveal className="text-center" as="div">
|
||||
<h2 className="text-2xl sm:text-3xl font-bold text-slate-900">Core capabilities</h2>
|
||||
<p className="mt-3 text-slate-600 max-w-2xl mx-auto">
|
||||
Proactive privacy protection tailored for Nordic identity ecosystems and EU data law.
|
||||
</p>
|
||||
</Reveal>
|
||||
<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 items-stretch">
|
||||
{items.map((f, i) => (
|
||||
<Reveal key={f.title} delayMs={i * 90} className="h-full">
|
||||
<div className="h-full rounded-xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-transform duration-300 hover:-translate-y-0.5 flex flex-col">
|
||||
<div className="text-3xl">{f.emoji}</div>
|
||||
<h3 className="mt-3 font-semibold text-slate-900">{f.title}</h3>
|
||||
<p className="mt-2 text-sm text-slate-600">
|
||||
{f.desc}
|
||||
</p>
|
||||
{/* Spacer to ensure consistent padding at bottom when descriptions vary */}
|
||||
<div className="mt-auto" />
|
||||
</div>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user