I created a responsive Next.js landing page for TruthSnap with a textarea, image upload, and a “Scan Now” button that posts FormData to ${NEXT_PUBLIC_API_URL || http://localhost:8003}/analyze/. It shows a loading spinner, renders a styled results card with color-coded verdict, risk score, and extracted text, and displays a red destructive toast on errors. The color palette stays within 5 colors: neutrals (white, gray), primary brand orange (buttons), plus green and red for verdicts.

The TruthSnap landing UI is ready: a responsive form with textarea and image upload that posts to ${NEXT_PUBLIC_API_URL || http://localhost:8003}/analyze/ as FormData, shows a spinner while loading, and displays a styled results card with color-coded verdict, risk score, and extracted text. Errors trigger a destructive toast for clear feedback. If you don’t see the toast, ensure <Toaster /> is rendered (for example in app/page.tsx) and set NEXT_PUBLIC_API_URL in Project Settings if your API isn’t on localhost. To configure the generation, complete these steps: <StepsCard steps={[{type: "add-env-var", stepName: "NEXT_PUBLIC_API_URL"}]} />