diff --git a/CHANGELOG.md b/CHANGELOG.md index d63d5c4..143a849 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/site/src/components/TrustSafety.jsx b/site/src/components/TrustSafety.jsx new file mode 100644 index 0000000..068cb89 --- /dev/null +++ b/site/src/components/TrustSafety.jsx @@ -0,0 +1,105 @@ +const steps = [ + { + title: 'Scan', + description: 'Diskern reads your filesystem without changing anything.', + icon: ( + + + + + ), + }, + { + title: 'Review', + description: 'You see what Diskern found before anything is removed.', + icon: ( + + + + + ), + }, + { + title: 'Quarantine', + description: 'Files can be quarantined and restored if you change your mind.', + icon: ( + + + + + + ), + }, +] +export default function TrustSafety() { + return ( +
+
+

Trust & Safety

+ +

+ You stay in control at every step. +

+ +
+ {steps.map((step, index) => ( +
+
+ + +

{step.title}

+ +

{step.description}

+
+ + {index < steps.length - 1 && ( + + )} +
+ ))} +
+ +
+ + +
+

Safety is rule-based

+

+ Safety verdicts come from explicit, auditable rules — not AI + guesses. +

+
+
+
+
+ ) +} \ No newline at end of file diff --git a/site/src/pages/Home.jsx b/site/src/pages/Home.jsx index 977a75c..66f7df7 100644 --- a/site/src/pages/Home.jsx +++ b/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 (
+
) } diff --git a/site/src/styles/index.css b/site/src/styles/index.css index c4eec3a..ea4c16f 100644 --- a/site/src/styles/index.css +++ b/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 ---------- */