feat(site): add Trust & Safety section

CHANGELOG.md

@@ -46,6 +46,9 @@ All notable changes to Diskern are documented here. The format follows
   waits and says so — then prompts once the app goes quiet — and a failed
   download or install reads "Update failed — you can keep using Diskern"
   rather than looking like the app froze
+- The site homepage now includes a Trust & Safety section explaining the
+  scan, review, and quarantine flow and that safety verdicts are
+  rule-based
 
 ### Fixed
 

site/src/components/TrustSafety.jsx

@@ -0,0 +1,105 @@
+const steps = [
+  {
+    title: 'Scan',
+    description: 'Diskern reads your filesystem without changing anything.',
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    ),
+  },
+  {
+    title: 'Review',
+    description: 'You see what Diskern found before anything is removed.',
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <path d="m9 11 3 3L22 4" />
+        <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
+      </svg>
+    ),
+  },
+  {
+    title: 'Quarantine',
+    description: 'Files can be quarantined and restored if you change your mind.',
+    icon: (
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      >
+        <path d="M3 12a9 9 0 1 0 3-6.7" />
+        <path d="M3 4v6h6" />
+        <path d="M12 7v5l3 2" />
+      </svg>
+    ),
+  },
+]
+export default function TrustSafety() {
+  return (
+    <section className="trust-safety">
+      <div className="container">
+        <h2 className="section-title">Trust &amp; Safety</h2>
+
+        <p className="section-subtitle">
+          You stay in control at every step.
+        </p>
+
+        <div className="safety-flow">
+          {steps.map((step, index) => (
+            <div className="safety-step-wrapper" key={step.title}>
+              <article className="safety-step">
+                <div className="safety-step-icon" aria-hidden="true">
+                  {step.icon}
+                </div>
+
+                <h3>{step.title}</h3>
+
+                <p>{step.description}</p>
+              </article>
+
+              {index < steps.length - 1 && (
+                <div className="safety-arrow" aria-hidden="true">
+                  →
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="safety-rules">
+          <div className="safety-rules-icon" aria-hidden="true">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+            >
+              <path d="M12 3 4 6v5c0 5 3.4 8.8 8 10 4.6-1.2 8-5 8-10V6l-8-3Z" />
+              <path d="m9 12 2 2 4-4" />
+            </svg>
+          </div>
+
+          <div className="safety-rules-content">
+            <h3>Safety is rule-based</h3>
+            <p>
+              Safety verdicts come from explicit, auditable rules — not AI
+              guesses.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

site/src/pages/Home.jsx

@@ -1,13 +1,14 @@
 import Hero from '../components/Hero.jsx'
 import Downloads from '../components/Downloads.jsx'
 import HowItWorks from '../components/HowItWorks.jsx'
-
+import TrustSafety from '../components/TrustSafety.jsx'
 export default function Home() {
   return (
     <main>
       <Hero />
       <Downloads />
       <HowItWorks />
+      <TrustSafety />
     </main>
   )
 }

site/src/styles/index.css

@@ -414,6 +414,120 @@ section {
   font-size: 0.92rem;
   line-height: 1.55;
 }
+/* ---------- Trust & Safety ---------- */
+
+.trust-safety {
+  border-top: 1px solid var(--border);
+}
+
+.safety-flow {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.safety-step-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.safety-step {
+  flex: 1;
+  min-height: 230px;
+  padding: 32px 24px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  text-align: center;
+}
+
+.safety-step-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 20px;
+  color: var(--accent);
+}
+
+.safety-step-icon svg {
+  width: 42px;
+  height: 42px;
+}
+
+.safety-step h3 {
+  margin: 0 0 10px;
+  font-size: 1.05rem;
+}
+
+.safety-step p {
+  max-width: 250px;
+  margin: 0 auto;
+  color: var(--text-muted);
+  font-size: 0.92rem;
+  line-height: 1.55;
+}
+
+.safety-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  color: var(--accent);
+  font-size: 1.6rem;
+  font-weight: 600;
+}
+
+/* ---------- Safety rules banner ---------- */
+
+.safety-rules {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  max-width: 900px;
+  margin: 28px auto 0;
+  padding: 24px 32px;
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--accent) 5%, var(--bg));
+}
+
+.safety-rules-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  color: var(--accent);
+}
+
+.safety-rules-icon svg {
+  width: 38px;
+  height: 38px;
+}
+
+.safety-rules-content {
+  padding-left: 24px;
+  border-left: 1px solid var(--border);
+}
+
+.safety-rules h3 {
+  margin: 0 0 5px;
+  font-size: 1rem;
+}
+
+.safety-rules p {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.92rem;
+  line-height: 1.5;
+}
 
 /* ---------- Footer ---------- */
 
@@ -461,6 +575,35 @@ section {
   .downloads-card {
     padding: 22px;
   }
+
+  .safety-flow {
+  flex-direction: column;
+}
+
+  .safety-step-wrapper {
+  flex-direction: column;
+}
+
+  .safety-step {
+  width: 100%;
+  min-height: 0;
+}
+
+  .safety-arrow {
+  width: auto;
+  height: 40px;
+  transform: rotate(90deg);
+}
+
+  .safety-rules {
+  align-items: flex-start;
+  gap: 16px;
+  padding: 20px;
+}
+
+  .safety-rules-content {
+  padding-left: 16px;
+}
 }
 
 /* ---------- Support ---------- */