ref:Cleaned the Structure

frontend/components/landing/AgentsOverview.tsx

@@ -0,0 +1,46 @@
+import { Reveal } from "../common/Reveal";
+
+export function AgentsOverview() {
+  const agents = [
+    {
+      title: "Discovery Agent",
+      desc:
+        "Continuously inventories systems to locate personal and sensitive data across sources, fixing visibility gaps.",
+      emoji: "🛰️",
+    },
+    {
+      title: "Cleaner Agent",
+      desc:
+        "Identifies PII and sensitive attributes, classifies content, and prepares data for remediation and audits.",
+      emoji: "🧽",
+    },
+    {
+      title: "Remediation Agent",
+      desc:
+        "Suggests anonymization, consent validation, or deletion; generates compliance reports and monitors posture.",
+      emoji: "🛡️",
+    },
+  ];
+
+  return (
+    <div className="container-max py-16 content-auto" id="agents">
+      <Reveal className="text-center" as="div">
+        <h2 className="text-2xl sm:text-3xl font-bold text-slate-900">Our agents</h2>
+        <p className="mt-3 text-slate-600 max-w-2xl mx-auto">
+          Modular, AI-driven roles that work together to keep your data compliant.
+        </p>
+      </Reveal>
+  <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-6">
+        {agents.map((a, i) => (
+          <Reveal key={a.title} delayMs={i * 110}>
+            <div className="rounded-xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-transform duration-300 hover:-translate-y-0.5">
+              <div className="text-3xl">{a.emoji}</div>
+              <h3 className="mt-3 font-semibold text-slate-900">{a.title}</h3>
+              <p className="mt-2 text-sm text-slate-600">{a.desc}</p>
+            </div>
+          </Reveal>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/components/landing/FeatureGrid.tsx

@@ -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>
+  );
+}

frontend/components/landing/Footer.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+export function Footer() {
+  return (
+    <footer className="mt-24 border-t border-slate-200 bg-white/80">
+      <div className="container-max py-10 flex flex-col sm:flex-row items-center justify-between gap-6">
+        <div className="text-sm text-slate-600">© {new Date().getFullYear()} Nordic Privacy AI. Hackathon prototype.</div>
+        <nav className="flex gap-6 text-sm">
+          <Link href="#features" className="hover:text-brand-600">Features</Link>
+          <Link href="#agents" className="hover:text-brand-600">Agents</Link>
+          <Link href="#contact" className="hover:text-brand-600">Contact</Link>
+          <Link href="/try" className="hover:text-brand-600">Try</Link>
+        </nav>
+      </div>
+    </footer>
+  );
+}

frontend/components/landing/Steps.tsx

@@ -0,0 +1,32 @@
+import { Reveal } from "../common/Reveal";
+
+export function Steps() {
+  const steps = [
+    { title: 'Discover', desc: 'Continuously inventory data across apps, logs, DBs, and cloud.' , emoji: '🧭' },
+    { title: 'Classify', desc: 'Detect PII and sensitive categories with AI labeling.', emoji: '🔎' },
+    { title: 'Mitigate', desc: 'Anonymize, minimize, and enforce consent governance.', emoji: '🛡️' },
+    { title: 'Monitor', desc: 'Continuous checks and reports mapped to GDPR.', emoji: '📈' },
+  ];
+  return (
+    <section className="container-max py-16 content-auto">
+      <Reveal className="text-center" as="div">
+        <h2 className="text-2xl sm:text-3xl font-bold text-slate-900">How it works</h2>
+        <p className="mt-3 text-slate-600 max-w-2xl mx-auto">Simple, proactive steps to keep your data compliant.</p>
+      </Reveal>
+  <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6">
+        {steps.map((s, i) => (
+          <Reveal key={s.title} delayMs={i * 100}>
+            <div className="relative rounded-xl border border-slate-200 bg-white/80 p-6 shadow-sm transition-transform duration-300 hover:-translate-y-0.5">
+              <div className="text-3xl">{s.emoji}</div>
+              <div className="mt-3 flex items-baseline gap-2">
+                <span className="text-xs text-slate-500">Step {i + 1}</span>
+                <h3 className="font-semibold text-slate-900">{s.title}</h3>
+              </div>
+              <p className="mt-2 text-sm text-slate-600">{s.desc}</p>
+            </div>
+          </Reveal>
+        ))}
+      </div>
+    </section>
+  );
+}

frontend/components/landing/ValueProps.tsx

@@ -0,0 +1,21 @@
+export function ValueProps() {
+  const items = [
+    { title: 'EU-first compliance', desc: 'Designed around GDPR principles: lawfulness, purpose limitation, minimization, and accountability.', emoji: '🇪🇺' },
+    { title: 'Nordic identity ready', desc: 'Built with BankID, MitID, and Suomi.fi contexts in mind for seamless identity-aware workflows.', emoji: '🧩' },
+    { title: 'Continuous by default', desc: 'Move from manual audits to ongoing monitoring with alerts and clear reports.', emoji: '⏱️' },
+  ];
+  return (
+    <section className="container-max py-16">
+      <h2 className="text-2xl sm:text-3xl font-bold text-slate-900 text-center">Why it fits the Nordics</h2>
+      <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
+        {items.map((v) => (
+          <div key={v.title} className="rounded-xl border border-slate-200 bg-white/70 backdrop-blur p-6 shadow-sm">
+            <div className="text-3xl">{v.emoji}</div>
+            <h3 className="mt-3 font-semibold text-slate-900">{v.title}</h3>
+            <p className="mt-2 text-sm text-slate-600">{v.desc}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}