diff --git a/src/App.tsx b/src/App.tsx index cf051cb..893926b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import AnalysisDashboard from './pages/AnalysisDashboard'; import MarketMapPage from './pages/MarketMapPage'; import ResultsPage from './pages/ResultsPage'; import Leaderboard from './pages/Leaderboard'; +import FAQPage from './pages/FAQPage'; import PostHogPageView from './components/PostHogPageView'; import NotFound from './pages/NotFound'; import InstallPrompt from './components/InstallPrompt'; @@ -48,7 +49,8 @@ useEffect(() => { } /> } /> } /> - + } /> + {/* Public shareable report — MUST be before the * catchall */} } /> @@ -58,4 +60,7 @@ useEffect(() => { ); -} \ No newline at end of file +} + + + diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index e0d90f0..08df5e8 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -58,6 +58,7 @@ export default function Navbar() { { to: '/', label: t('home') }, { to: '/scanner', label: t('scanner') }, { to: '/map', label: t('trustMap') }, + { to: '/faq', label: 'FAQ' }, ]; return ( @@ -168,4 +169,5 @@ export default function Navbar() { ); -} \ No newline at end of file +} + diff --git a/src/pages/FAQPage.tsx b/src/pages/FAQPage.tsx new file mode 100644 index 0000000..a779fd9 --- /dev/null +++ b/src/pages/FAQPage.tsx @@ -0,0 +1,84 @@ +import { useState } from "react"; +import { ChevronDown, ScanLine, Award, MapPin } from "lucide-react"; + +const faqs = [ + { + title: "How should I position the fish for scanning?", + icon: ScanLine, + content: + "Place the fish on a flat surface with good lighting. Keep the camera around 15 cm away and ensure the whole fish is visible.", + }, + { + title: "What do the freshness scores mean?", + icon: Award, + content: + "Scores range from 0 to 100. Higher scores indicate fresher fish. Scores above 80 are considered high quality.", + }, + { + title: "How does the Market Map work?", + icon: MapPin, + content: + "The Market Map displays freshness trends from anonymized scan results and helps users identify reliable seafood vendors.", + }, +]; + +export default function FAQPage() { + const [openIndex, setOpenIndex] = useState(0); + + return ( +
+
+ + USER_GUIDE_AND_FAQ + + +

+ How To Use +
+ FreshScan AI +

+ +

+ Learn how to scan fish correctly, understand freshness scores, + and use the Market Map effectively. +

+ +
+ {faqs.map((faq, index) => ( +
+ + + {openIndex === index && ( +
+

+ {faq.content} +

+
+ )} +
+ ))} +
+
+
+ ); +} \ No newline at end of file