AI-powered features
Sign in and upgrade to Premium to unlock: application message generator,
@@ -64,18 +106,15 @@ export default function AiAssistant({ rawText, intake, settings }) {
if (tier !== "premium") {
return (
-
+
AI-powered features
Upgrade to Premium to unlock all four AI features: message generator,
deep scam analysis, resume tailoring, and interview prep.
-
+
+
This feature sends the job post to our AI provider for processing.
It is processed in memory and never stored.
@@ -85,16 +124,16 @@ export default function AiAssistant({ rawText, intake, settings }) {
}
return (
-
+
AI features
-
+
{remaining} of {aiCap} uses left this month
- {/* Tabs */}
-
+ {/* Tabs — the active pill travels between features (layoutId) */}
+
{AI_FEATURES.map((f) => (
))}
@@ -123,24 +172,19 @@ export default function AiAssistant({ rawText, intake, settings }) {
value={resumeText}
onChange={(e) => setResumeText(e.target.value)}
placeholder="Paste your resume text here…"
- className="w-full rounded-xl border border-line bg-paper p-3.5 text-sm text-ink placeholder:text-ink-faint focus:border-brand focus:outline-none resize-y"
+ className="glass-subtle field-input w-full rounded-xl p-3.5 text-sm text-ink placeholder:text-ink-faint focus:border-brand focus:outline-none resize-y"
/>
This feature sends the post to our AI provider to generate the result.
@@ -149,19 +193,67 @@ export default function AiAssistant({ rawText, intake, settings }) {
{/* Error */}
{error && (
-
+
)}
- {/* Result */}
- {result && (
-
-
- {result}
-
+ {/* Thinking state — a calm drafting rhythm while the AI works */}
+ {loading && (
+
+
+
Drafting your {feature?.name}…
)}
+
+ {/* Result — rises in like a sheet of correspondence, then unfolds */}
+
+ {result && !loading && (
+
+
+ {feature?.name}
+
+
+ {reduced ? (
+
+ {result}
+
+ ) : (
+
+ {result.split(/\n{2,}/).map((para, i) => (
+
+ {para}
+
+ ))}
+
+ )}
+
+ )}
+
);
}
diff --git a/src/components/BackgroundCheckPage.jsx b/src/components/BackgroundCheckPage.jsx
index 0e3941a..38ba150 100644
--- a/src/components/BackgroundCheckPage.jsx
+++ b/src/components/BackgroundCheckPage.jsx
@@ -1,34 +1,112 @@
-import { useState } from "react";
-import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { m } from "motion/react";
import { useAuth } from "../auth.jsx";
+import { useApp } from "../store.jsx";
import { callAi } from "../lib/ai.js";
+import { useReducedMotion } from "../motion/useMotionConfig.js";
+import { duration, easing } from "../motion/tokens.js";
+import { useCountUp } from "../hooks/useCountUp.js";
+import { useCopy } from "../hooks/useCopy.js";
+import Button from "./ui/Button.jsx";
+import { Field, FieldFrame, fieldInputCls } from "./ui/Field.jsx";
+import { BoltIcon, CheckIcon, ChevronRightIcon, CopyIcon } from "./ui/icons.jsx";
import {
analyzeUrl,
parseUrl,
canUseFreeCheck,
getFreeChecksUsed,
incrementFreeCheck,
+ formatCheckReport,
DAILY_FREE_LIMIT,
+ VERDICT_LABELS,
} from "../lib/backgroundcheck.js";
+// Verdict wording comes from the lib (shared with the copy-report text) so the
+// card and the clipboard summary can never disagree.
const VERDICT_STYLES = {
- credible: { bg: "bg-go-soft", border: "border-go/30", text: "text-go-ink", label: "Looks credible", dot: "bg-go" },
- caution: { bg: "bg-warn-soft", border: "border-warn/30", text: "text-warn-ink", label: "Proceed with caution", dot: "bg-warn" },
- suspicious: { bg: "bg-stop-soft", border: "border-stop/30", text: "text-stop-ink", label: "Suspicious — investigate first", dot: "bg-stop" },
- invalid: { bg: "bg-panel", border: "border-line", text: "text-ink-soft", label: "Invalid URL", dot: "bg-ink-faint" },
+ credible: { bg: "bg-go-soft", border: "border-go/30", text: "text-go-ink", label: VERDICT_LABELS.credible, dot: "bg-go" },
+ caution: { bg: "bg-warn-soft", border: "border-warn/30", text: "text-warn-ink", label: VERDICT_LABELS.caution, dot: "bg-warn" },
+ suspicious: { bg: "bg-stop-soft", border: "border-stop/30", text: "text-stop-ink", label: VERDICT_LABELS.suspicious, dot: "bg-stop" },
+ invalid: { bg: "bg-panel", border: "border-line", text: "text-ink-soft", label: VERDICT_LABELS.invalid, dot: "bg-ink-faint" },
};
+// UrlBreakdown — Phase 6 URL analysis. Splits the pasted link into protocol,
+// domain, path, and query so the reader sees exactly which part matters. The
+// domain is highlighted and underlined; the surrounding protocol/path/query are
+// de-emphasised. Segments rule in left-to-right like a marked-up field note.
+// It is display-only and re-parses the same string the heuristic scored, so it
+// can never disagree with the verdict. Reduced motion renders the final state.
+function UrlBreakdown({ input }) {
+ const reduced = useReducedMotion();
+ const parsed = parseUrl(input);
+ if (!parsed) return null;
+
+ const domain = parsed.hostname.replace(/^www\./, "");
+ const subPrefix = parsed.hostname.slice(0, parsed.hostname.length - domain.length);
+ const path = parsed.pathname && parsed.pathname !== "/" ? parsed.pathname : "";
+ const query = parsed.search || "";
+
+ const segments = [
+ { key: "protocol", text: parsed.protocol + "//", role: "dim" },
+ subPrefix ? { key: "sub", text: subPrefix, role: "dim" } : null,
+ { key: "domain", text: domain, role: "domain" },
+ path ? { key: "path", text: path, role: "dim" } : null,
+ query ? { key: "query", text: query, role: "dim" } : null,
+ ].filter(Boolean);
+
+ return (
+
+
Link breakdown
+
+ {segments.map((seg, i) => (
+
+ {seg.text}
+
+ ))}
+
+
+ The highlighted domain is who you'd
+ actually be dealing with — the rest of the link can be made to say anything.
+
+
+ );
+}
+
function ScoreGauge({ score, verdict }) {
- const style = VERDICT_STYLES[verdict] || VERDICT_STYLES.invalid;
const r = 44;
const c = 2 * Math.PI * r;
- const offset = c * (1 - score / 100);
+ const target = c * (1 - score / 100);
+ // Fill from empty on mount, matching the result page's score ring. The
+ // number counts up alongside; reduced motion shows both instantly.
+ const [offset, setOffset] = useState(c);
+ useEffect(() => {
+ const id = requestAnimationFrame(() => setOffset(target));
+ return () => cancelAnimationFrame(id);
+ }, [target]);
+ const displayScore = useCountUp(score, 1000);
const strokeColor = verdict === "credible" ? "var(--color-go)" : verdict === "caution" ? "var(--color-warn)" : "var(--color-stop)";
return (
-
@@ -48,7 +126,7 @@ function HeuristicResult({ result }) {
const style = VERDICT_STYLES[result.verdict] || VERDICT_STYLES.invalid;
return (
-
+
@@ -58,7 +136,7 @@ function HeuristicResult({ result }) {
{result.meta.domain || result.meta.input}
{result.meta.isKnownPlatform && (
-
+
Known platform
@@ -103,7 +181,9 @@ function HeuristicResult({ result }) {
}
export default function BackgroundCheckPage() {
- const { user, tier, usageCount, aiCap, refreshEntitlement } = useAuth();
+ const { tier, usageCount, aiCap, refreshEntitlement } = useAuth();
+ const { notify } = useApp();
+ const { copied: reportCopied, copy: copyReport } = useCopy();
const [url, setUrl] = useState("");
const [companyName, setCompanyName] = useState("");
@@ -117,6 +197,15 @@ export default function BackgroundCheckPage() {
const remaining = DAILY_FREE_LIMIT - checksUsed;
const aiRemaining = Math.max(0, aiCap - usageCount);
+ const handleCopyReport = async () => {
+ if (!heuristicResult) return;
+ try {
+ await copyReport(formatCheckReport(heuristicResult));
+ } catch {
+ notify("Couldn't copy the report. Try again.", "error");
+ }
+ };
+
const handleQuickCheck = () => {
setError("");
setAiResult(null);
@@ -160,25 +249,24 @@ export default function BackgroundCheckPage() {
return (
{/* Header */}
-
-
-
-
+
+
+
Company & link check
- Background check a company or link
+ Background check a company or link
Paste a job-posting URL or company website. Get an instant credibility scan for free,
or unlock the full AI-powered deep check with Premium.
-
+
Free: instant URL scan ({DAILY_FREE_LIMIT}/day)
-
+
Premium: AI deep credibility report
@@ -187,17 +275,13 @@ export default function BackgroundCheckPage() {
{/* Input form */}
-
+
{/* URL input */}
-
-
-
-
+
+
{/* Optional fields for AI check */}
- ▶
+
Add context for the AI deep check (optional)
-
-
-
-
+
+
setCompanyName(e.target.value)}
- placeholder="e.g. Acme Remote Solutions"
- className="field-input w-full rounded-xl bg-transparent px-3.5 py-2.5 text-ink placeholder:text-ink-faint focus:outline-none"
+ placeholder="e.g. Northgate Outsourcing Inc."
+ className={fieldInputCls}
/>
-
-
-
-
-
-
+
+
+
+
setContext(e.target.value)}
placeholder="e.g. $500/day data entry, no experience"
- className="field-input w-full rounded-xl bg-transparent px-3.5 py-2.5 text-ink placeholder:text-ink-faint focus:outline-none"
+ className={fieldInputCls}
/>
-
-
+
+
{/* Action buttons */}
-
{tier === "premium" ? (
-
+
) : (
-
-
+
)}
@@ -296,7 +370,7 @@ export default function BackgroundCheckPage() {
{/* Error */}
{error && (
-
+
)}
@@ -306,22 +380,40 @@ export default function BackgroundCheckPage() {
{/* Heuristic result */}
{heuristicResult && (
- Quick scan result
+
+
Quick scan result
+ {heuristicResult.verdict !== "invalid" && (
+
+ )}
+
)}
{/* AI result */}
{aiLoading && (
-
+
Running AI credibility analysis…
)}
@@ -329,9 +421,9 @@ export default function BackgroundCheckPage() {
{aiResult && (
AI deep check report
-
+
-
+
AI Credibility Report
@@ -342,7 +434,7 @@ export default function BackgroundCheckPage() {
)}
{/* Info section */}
-
+
What we check
diff --git a/src/components/HeroScanNarrative.jsx b/src/components/HeroScanNarrative.jsx
new file mode 100644
index 0000000..cab801e
--- /dev/null
+++ b/src/components/HeroScanNarrative.jsx
@@ -0,0 +1,280 @@
+// HeroScanNarrative.jsx — the signature hero animation.
+//
+// Instead of a passive "Apply 82" card that bobs, this tells ApplyGuard's story:
+// a mock job listing appears, a scanner sweeps down it, suspicious phrases get
+// marked, the score gauge advances, and a verdict is stamped. It loops on a long
+// pause so it reads as a demonstration, not a banner ad.
+//
+// Motion discipline:
+// • Only transform/opacity animate.
+// • Desktop-only damped tilt follows the pointer; off on touch.
+// • Reduced-motion renders the final stamped state instantly, no loop, no tilt.
+import { useEffect, useRef, useState } from "react";
+import { m, useMotionValue, useSpring, useTransform } from "motion/react";
+import { useReducedMotion, useFinePointer } from "../motion/useMotionConfig.js";
+import { duration, easing, spring } from "../motion/tokens.js";
+
+// Phases of the scan story.
+const PHASE = { READY: 0, LISTING: 1, SCAN: 2, FLAGS: 3, VERDICT: 4 };
+
+// The mock listing the scanner examines. Tones drive the annotation color:
+// stop = red flag, warn = missing/caution, neutral = plain line.
+const LISTING = [
+ { id: "title", text: "Virtual Assistant — full remote", tone: "neutral" },
+ { id: "pay", text: "Earn ₱15,000 weekly, no experience", tone: "stop", note: "Unrealistic pay" },
+ { id: "contact", text: "Message us on Telegram to start", tone: "stop", note: "Off-platform" },
+ { id: "fee", text: "₱500 activation fee required", tone: "stop", note: "Upfront fee" },
+ { id: "addr", text: "Company address: not provided", tone: "warn", note: "Missing" },
+];
+
+const FINAL_SCORE = 22; // low = risky; this listing is a trap
+const RADIUS = 26;
+const CIRC = 2 * Math.PI * RADIUS;
+
+const toneStyles = {
+ stop: { line: "text-stop-ink", mark: "bg-stop", chip: "bg-stop-soft text-stop-ink" },
+ warn: { line: "text-warn-ink", mark: "bg-warn", chip: "bg-warn-soft text-warn-ink" },
+ neutral: { line: "text-ink-soft", mark: "", chip: "" },
+};
+
+// Mobile-friendly static version (no tilt/pointer animation)
+function HeroMobile() {
+ const dashoffset = CIRC * (1 - FINAL_SCORE / 100);
+ return (
+
+
+ Example result
+
+
+ Done
+
+
+
+
+ {LISTING.map((row) => {
+ const s = toneStyles[row.tone];
+ const flagged = row.tone !== "neutral";
+ return (
+ -
+
+ {row.text}
+
+ {flagged && (
+
+ {row.note}
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+
+ 22
+
+
+
+ SKIP
+
+
+
+ );
+}
+
+export default function HeroScanNarrative() {
+ const reduced = useReducedMotion();
+ const finePointer = useFinePointer();
+ const [phase, setPhase] = useState(reduced ? PHASE.VERDICT : PHASE.READY);
+ const timers = useRef([]);
+
+ // Pointer tilt (desktop, motion-on only). Springs give the damped return.
+ const px = useMotionValue(0);
+ const py = useMotionValue(0);
+ const rotateX = useSpring(useTransform(py, [-0.5, 0.5], [6, -6]), spring.gentle);
+ const rotateY = useSpring(useTransform(px, [-0.5, 0.5], [-6, 6]), spring.gentle);
+ const tiltEnabled = finePointer && !reduced;
+
+ const handlePointerMove = (e) => {
+ if (!tiltEnabled) return;
+ const r = e.currentTarget.getBoundingClientRect();
+ px.set((e.clientX - r.left) / r.width - 0.5);
+ py.set((e.clientY - r.top) / r.height - 0.5);
+ };
+ const handlePointerLeave = () => {
+ px.set(0);
+ py.set(0);
+ };
+
+ // The autonomous, looping timeline. Disabled entirely under reduced-motion.
+ useEffect(() => {
+ if (reduced) return undefined;
+ const schedule = (fn, ms) => {
+ timers.current.push(setTimeout(fn, ms));
+ };
+ const run = () => {
+ setPhase(PHASE.READY);
+ schedule(() => setPhase(PHASE.LISTING), 400);
+ schedule(() => setPhase(PHASE.SCAN), 1200);
+ schedule(() => setPhase(PHASE.FLAGS), 3000);
+ schedule(() => setPhase(PHASE.VERDICT), 3900);
+ schedule(run, 8200); // long pause, then loop
+ };
+ run();
+ return () => {
+ timers.current.forEach(clearTimeout);
+ timers.current = [];
+ };
+ }, [reduced]);
+
+ const scanning = phase === PHASE.SCAN;
+ const showFlags = phase >= PHASE.FLAGS;
+ const showVerdict = phase >= PHASE.VERDICT;
+ const listingVisible = phase >= PHASE.LISTING;
+
+ const dashoffset = showVerdict ? CIRC * (1 - FINAL_SCORE / 100) : CIRC;
+
+ return (
+ <>
+
+
+
+ {/* header: what the tool is doing */}
+
+ Live scan
+
+
+ {scanning ? "Inspecting…" : showVerdict ? "Done" : "Ready"}
+
+
+
+ {/* the document being scanned */}
+
+ {/* scan line sweeps top → bottom during SCAN */}
+ {!reduced && (
+
+ )}
+
+
+ {LISTING.map((row, i) => {
+ const s = toneStyles[row.tone];
+ const flagged = row.tone !== "neutral";
+ return (
+
+
+ {row.text}
+ {/* marker underline drawn under flagged phrases */}
+ {flagged && (
+
+ )}
+
+ {/* side annotation chip */}
+ {flagged && (
+
+ {row.note}
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+ {showVerdict ? FINAL_SCORE : "—"}
+
+
+
+
+ SKIP
+
+
+ 3 red flags · 1 missing detail
+
+
+
The scanner flags red flags like unrealistic pay and off-platform contact, then stamps a risk verdict.
+ Live example — watches for traps
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/HowItWorks.jsx b/src/components/HowItWorks.jsx
new file mode 100644
index 0000000..56d9879
--- /dev/null
+++ b/src/components/HowItWorks.jsx
@@ -0,0 +1,94 @@
+// HowItWorks.jsx — Phase 7: the three steps as one connected field-guide story.
+//
+// A hand-drawn marker path draws left-to-right across the numbered nodes as the
+// section scrolls into view; the numbered ink circles pop in on the path, and
+// the cards rise just after. Desktop shows the horizontal path; on mobile the
+// cards simply stack (path hidden) to stay robust across widths.
+import { m } from "motion/react";
+import { duration, easing } from "../motion/tokens.js";
+import { glassIn } from "../motion/variants.js";
+import { useSpotlight } from "../hooks/useSpotlight.js";
+
+const STEPS = [
+ { step: "1", title: "Paste the job post", desc: "Copy the full listing — title, description, pay, contact info." },
+ { step: "2", title: "Add your details", desc: "Optionally tell us your role, skills, and expected pay for a personal fit score." },
+ { step: "3", title: "Get your verdict", desc: "See Apply, Caution, or Skip — plus red flags, missing info, and questions to ask." },
+];
+
+// once:true so the story plays a single time, not on every scroll pass.
+const viewport = { once: true, amount: 0.4 };
+
+export default function HowItWorks() {
+ const spotlight = useSpotlight();
+ return (
+
+ How it works
+
+
+ {/* The drawn path connecting the numbered nodes on sm+.
+ Geometry, not guesswork: the nodes are 40px circles at the start of
+ each column of a 3-column grid with a 24px gap, so their centres sit
+ at 20px and at (2W + 2·gap)/3 + 20px. The span between them is
+ therefore 66.667% + 16px, and 20px down from the top of the row.
+ The previous inset-x-[12%] / width:76% guess drifted off both ends. */}
+
+
+
+ {STEPS.map((item) => (
+
+ {/* numbered ink circle sits on the path */}
+
+
+ {item.step}
+
+
+
+
+
{item.title}
+
{item.desc}
+
+
+ );
+}
diff --git a/src/components/HowItWorksVideo.jsx b/src/components/HowItWorksVideo.jsx
new file mode 100644
index 0000000..a909b51
--- /dev/null
+++ b/src/components/HowItWorksVideo.jsx
@@ -0,0 +1,150 @@
+// HowItWorksVideo.jsx — player for the Remotion instructional walkthrough.
+//
+// The film is a silent, 68-second, twelve-chapter tutorial rendered by
+// video/src/compositions/HowItWorks.tsx. Two deliberate choices:
+//
+// 1. Click-to-play, not autoplay-in-view. The asset is ~4 MB; auto-fetching
+// it for anyone who merely scrolls past would cost more bandwidth than
+// the entire rest of the page. `preload="metadata"` means the bytes only
+// move once someone opts in.
+// 2. The chapter list is visible, not sr-only. The film has no narration, so
+// it needs a text alternative anyway — and a numbered outline is more
+// useful to a sighted skimmer than to anyone else.
+//
+// The IntersectionObserver only pauses playback that is already running, so a
+// video never keeps going off-screen.
+
+import { useEffect, useRef, useState } from "react";
+
+// Mirrors the chapter titles in video/src/howto/script.ts, which is the source
+// of truth for the film itself. Kept as plain data here so the web build never
+// has to reach into the Remotion project.
+const CHAPTERS = [
+ "Paste the job post",
+ "Add your details",
+ "Read the verdict",
+ "See why the score landed there",
+ "Review the scam signals",
+ "Ask what the post left out",
+ "Copy the prompt, not the message",
+ "Background-check the link",
+ "Track every application",
+ "Your data stays yours",
+];
+
+const SUMMARY =
+ "A silent walkthrough of the whole tool. A suspicious Marketing Coordinator listing is pasted in, " +
+ "and ApplyGuard flags off-platform contact and an upfront onboarding fee. The verdict comes back Skip " +
+ "with a high risk score, and a fit score of 15 out of 100 — one hard flag caps the score regardless of " +
+ "the rest. The film then walks through the four-part score breakdown, the hard and soft scam signals, " +
+ "the questions the post left unanswered, copying the generated prompt into your own AI, background-checking " +
+ "the company link (a high-risk .tk domain scoring 24 out of 100), verifying the business through SEC or DTI, " +
+ "tracking the application from Saved to Offer, and where your data lives: in your browser, exportable and " +
+ "erasable at any time.";
+
+const SOURCES = {
+ desktop: { src: "/video/how-it-works-desktop.mp4", poster: "/video/how-it-works-poster-desktop.jpeg" },
+ mobile: { src: "/video/how-it-works-mobile.mp4", poster: "/video/how-it-works-poster-mobile.jpeg" },
+};
+
+export default function HowItWorksVideo() {
+ const videoRef = useRef(null);
+ const sectionRef = useRef(null);
+ const [started, setStarted] = useState(false);
+
+ const isMobileViewport = typeof window !== "undefined" && window.innerWidth < 768;
+ const { src, poster } = isMobileViewport ? SOURCES.mobile : SOURCES.desktop;
+
+ // Pause when scrolled away; never resume on its own, since playback is
+ // something the viewer explicitly started.
+ useEffect(() => {
+ const el = sectionRef.current;
+ if (!el || typeof IntersectionObserver === "undefined") return undefined;
+
+ const io = new IntersectionObserver(
+ ([entry]) => {
+ if (!entry.isIntersecting) videoRef.current?.pause();
+ },
+ { threshold: 0.1 }
+ );
+ io.observe(el);
+ return () => io.disconnect();
+ }, []);
+
+ // Play from an effect rather than the click handler: the