diff --git a/frontend/src/components/LandingSecurityFaq.tsx b/frontend/src/components/LandingSecurityFaq.tsx new file mode 100644 index 0000000..c401250 --- /dev/null +++ b/frontend/src/components/LandingSecurityFaq.tsx @@ -0,0 +1,106 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { HelpCircle, ShieldCheck } from 'lucide-react'; + +type FaqItem = { + question: string; + answer: string; + source: string; +}; + +const FAQ_ITEMS: FaqItem[] = [ + { + question: 'What does zero-knowledge mean in AccountSafe?', + answer: + 'Sensitive vault data is encrypted in the browser before it is sent anywhere. The server stores encrypted vault data, not readable credentials.', + source: 'README and SECURITY.md', + }, + { + question: 'Does my master password leave my device?', + answer: + 'No. The browser derives authentication and encryption material locally, then sends only the derived authentication hash needed for verification.', + source: 'SECURITY.md security model', + }, + { + question: 'What encryption protects vault data?', + answer: + 'Vault data uses AES-256-GCM authenticated encryption with Argon2id key derivation, matching the project security documentation.', + source: 'README feature list', + }, + { + question: 'Can I export or restore my vault?', + answer: + 'Yes. AccountSafe supports encrypted zero-knowledge export and import flows, so backups stay decryptable only by the account holder.', + source: 'README and disaster recovery docs', + }, + { + question: 'What is duress mode?', + answer: + 'Duress mode lets a separate password open a decoy vault while keeping the real vault protected, which is useful for coercion-resistant access.', + source: 'README active defense section', + }, + { + question: 'How does shared-secret access work?', + answer: + 'Shared secrets are protected with a passphrase and expiry controls so temporary access can be granted without exposing the entire vault.', + source: 'README and API docs', + }, + { + question: 'Can I self-host AccountSafe?', + answer: + 'Yes. The repository includes local, Docker, and production setup guidance for running the Django backend and React frontend yourself.', + source: 'README and configuration docs', + }, +]; + +const LandingSecurityFaq: React.FC = () => { + return ( +
+
+
+
+
+
+

+ Practical answers before you trust a vault +

+

+ Short, implementation-backed answers about how AccountSafe protects credentials without marketing claims or fabricated social proof. +

+
+ + Read security docs + +
+ +
+ {FAQ_ITEMS.map(item => ( +
+ + +

+ {item.answer} +

+

+ Source: {item.source} +

+
+ ))} +
+
+
+ ); +}; + +export default LandingSecurityFaq; diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index b69b80b..b581fa7 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import { useAuth } from '../contexts/AuthContext'; import { CategoryManager } from '../features/vault/components'; +import LandingSecurityFaq from '../components/LandingSecurityFaq'; const HomePage: React.FC = () => { const { token } = useAuth(); @@ -11,66 +12,69 @@ const HomePage: React.FC = () => { {token ? ( ) : ( -
-
- {/* Hero Icon */} -
-
- AccountSafe + <> +
+
+ {/* Hero Icon */} +
+
+ AccountSafe +
-
- -

- Welcome to AccountSafe -

-

- Protected by AES-256-GCM authenticated encryption with Argon2id key derivation. Our zero-knowledge architecture ensures your data is encrypted securely at rest -

- -
- - Log in to your vault - - - Create free account - -
- - {/* Trust indicators */} -
-
- - - - Zero-Knowledge Architecture -
-
- - - - Industry-Standard Encryption at Rest -
-
- - - - Secure Credential Management + +

+ Welcome to AccountSafe +

+

+ Protected by AES-256-GCM authenticated encryption with Argon2id key derivation. Our zero-knowledge architecture ensures your data is encrypted securely at rest +

+ +
+ + Log in to your vault + + + Create free account +
-
- - - - Managed Security Architecture + + {/* Trust indicators */} +
+
+ + + + Zero-Knowledge Architecture +
+
+ + + + Industry-Standard Encryption at Rest +
+
+ + + + Secure Credential Management +
+
+ + + + Managed Security Architecture +
-
+ + )}
); diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx index fa3fc96..fcc56ff 100644 --- a/frontend/src/pages/LandingPage.tsx +++ b/frontend/src/pages/LandingPage.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { BookOpen, ArrowRight, Check } from 'lucide-react'; import { ButtonLink } from '../components/ui'; +import LandingSecurityFaq from '../components/LandingSecurityFaq'; const LandingPage: React.FC = () => { return ( @@ -73,6 +74,7 @@ const LandingPage: React.FC = () => {
+
); };