scenic-srs

As a frontend developer, implement the LandingHero section for the Landing page. This is a complex 3D + scroll-animated section using @react-three/fiber Canvas, @react-three/drei PerspectiveCamera and Float, and framer-motion. The LightbulbScene component uses useFrame to animate groupRef rotation (sin/cos), bulbRef opacity (1 - morphFactor*0.8) and scale pulse, and docRef opacity (0.2 + morphFactor*0.8) and y-position based on scrollProgress. The 3D scene includes a sphereGeometry lightbulb body with emissive #6366F1 material, a filament glow sphere with #F59E0B emissive, a cylinderGeometry base, a boxGeometry document mesh that fades in, 4 document line meshes with morphFactor-driven opacity, and a FloatingParticles component. Uses useScroll + useTransform from framer-motion for parallax hero text. Apply LandingHero.css styles.

As a frontend developer, implement the LandingTrustBadges section for the Landing page. Renders 5 trust badges (AI-Powered, COPPA Compliant, WIPO Compliant, On-Premise GPU, Multi-Model Verification) using FiCpu, FiShield, FiFileText, FiServer, FiLayers from react-icons/fi. Each badge uses motion.div with badgeVariants (opacity 0→1, scale 0.8→1, staggered delay i*0.1) triggered by whileInView viewport. Badge icons have whileHover scale spring animation. An animated underline uses underlineVariants (scaleX 0→1, delay i*0.1+0.25) also whileInView. Includes two parallax background layers (tb-parallax-bg at -0.3x scroll, tb-parallax-mid at -0.5x) with decorative orbs tb-orb--1/2/3. Apply LandingTrustBadges.css.

As a frontend developer, implement the LandingKeyFeatures section for the Landing page. Renders a 6-card flip grid (mentor, research, drafting, examination, collaboration, and one more) where each card has a front face (icon from lucide-react: MessageSquare, Search, FileText, ShieldCheck, Users, Send; title; desc) and a back face (backTitle, backDesc, CTA link). Uses useState for tracking the flipped card index, AnimatePresence for flip transitions, and per-card colorClass variants (mentor, research, drafting, examination, collaboration). CTA buttons link to /Chat, /Research, /Document, /Patentability. Includes ArrowRight and RotateCcw icons for flip controls. Apply LandingKeyFeatures.css with per-colorClass accent theming.

As a frontend developer, implement the LandingHowItWorks section for the Landing page. Renders a 5-step vertical timeline using steps array (Describe Invention, AI Research, Collaborative Drafting, Patentability Review, One-Click Filing) with icons FileText, Search, PenTool, ShieldCheck, Send from lucide-react. Each StepItem uses useRef + useInView (once: true, margin: -60px) to trigger entrance animations. The hiw-badge uses spring scale animation (delay index*0.1), the hiw-step-icon uses opacity+x slide (delay index*0.12+0.2), and hiw-step-text uses opacity+y slide (delay index*0.12+0.15). AnimatedNumber component animates step number with spring scale 0.5→1 on inView. Uses useScroll + useTransform for a parallax connector line. Apply LandingHowItWorks.css.

As a frontend developer, implement the LandingTierComparison section for the Landing page. Imports both MobileTierCard.css and LandingTierComparison.css. Renders a 10-row feature comparison table between Basic and Pro tiers using a features array with isDiff flags and optional basicLabel/proLabel text. Custom SVG icon components CheckIcon, XIcon, MinusIcon are used to build StatusIcon (tc-table-check--yes/limited/no) and MobileStatusIcon (tc-check--yes/limited/no) variants. Uses useState for mobile accordion expand state. Includes AnimatePresence for row highlight animations on diff rows, and a motion.div Pro column highlight. Renders a responsive mobile card layout alongside the desktop table. Apply LandingTierComparison.css and MobileTierCard.css.

As a frontend developer, implement the LandingTestimonials section for the Landing page. Renders a carousel of 4 testimonials (Mia Chen youth inventor, James Okafor independent inventor, Dr. Sarah Lindström biotech, Marcus Rivera educator) with avatar initials and avatarClass variants (lt-avatar--youth/independent/professional/educator). Uses useState for activeIndex and direction, useEffect with setInterval for 5000ms AUTOPLAY_INTERVAL, useCallback for navigation handlers. Implements drag-to-swipe via onDragEnd with SWIPE_THRESHOLD=50 and VELOCITY_THRESHOLD=300. Card transitions use cardVariants with enter (x: ±500, scale 0.92), center (spring stiffness 350 damping 32), exit states via AnimatePresence custom direction prop. Dot navigation and prev/next buttons use useAnimation controls. Apply LandingTestimonials.css.

As a frontend developer, implement the LandingUseCases section for the Landing page. Imports UseCaseCard.css and LandingUseCases.css. Renders 4 use-case cards (Youth STEM Programs with GraduationCap, Small Business with Briefcase, University Innovation Labs with FlaskConical, Independent Inventor Communities with Users — all from lucide-react). Each card uses motion.div with cardVariants (opacity 0→1, scale 0.9→1, y: 24→0, staggered delay i*0.1) triggered by whileInView. Section header uses headerVariants (opacity+y) whileInView. Two parallax background layers (luc-parallax-bg at -0.25x, luc-parallax-mid at -0.45x) with luc-orb decorative elements. Apply LandingUseCases.css and UseCaseCard.css.

As a frontend developer, implement the LandingPricing section for the Landing page. Uses useState for isAnnual toggle (monthly/annual billing). Pricing object has basic: {monthly:29, annual:23} and pro: {monthly:79, annual:63}. Toggle is a motion.button with whileTap scale 0.95 and an animated thumb using motion.div. Two pricing card arrays: basicFeatures (8 items, 3 not included) and proFeatures (8 items all included). AnimatePresence wraps price display for number flip animation when toggling billing period. Includes three parallax background layers (lp-parallax-bg at -0.3x, lp-parallax-mid at -0.5x) with lp-orb decorative elements. Cards have motion entrance animations and a Pro card popular badge. Apply LandingPricing.css.

As a frontend developer, implement the LandingFAQ section for the Landing page. Uses useState to track the currently open FAQ item index. Renders 7 FAQ items covering: AI mentor operation, data security (on-premise GPU, E2E encryption), youth/COPPA compliance, USPTO filing automation, patentability assessment (RAG + USPTO + Bing), Multi-Model Debate (Pro: local LLM + Grok + Claude), and team collaboration. Each FAQ item is an accordion toggled by click. AnimatePresence wraps the answer panel, which uses motion.div with height animation and opacity transition. The expand/collapse icon uses motion.div rotate transform (0°→180°). Apply LandingFAQ.css.

As a frontend developer, implement the LandingCTA section for the Landing page. Uses useState for name, email, consent, emailValid, submitted, confettiParticles (array of 40 particles with x/y/vx/vy/rotation/scale/color), mousePos, and isHovering. Email validation via regex /^[^\s@]+@[^\s@]+\.[^\s@]+$/. Primary CTA button tracks mouse position via handleMouseMove and useCallback, stored in mousePos for radial gradient spotlight effect. On form submission (requires emailValid + consent + name.trim()), spawnConfetti fires 40 particles from submitBtnRef button rect with colors ['#6366F1','#818CF8','#10B981','#F59E0B','#EF4444','#34d399','#fbbf24'], cleared after 2000ms. Submitted state shows success view for 3000ms then resets all fields. useInView (once:true, amount:0.3) on sectionRef drives headlineVariants, subVariants (delay 0.2), btnAreaVariants (delay 0.4), formVariants (delay 0.6) entrance animations. Apply LandingCTA.css.

As a frontend developer, implement the LandingFooter section for the Landing page. Uses useState for openCol (mobile accordion) and lang (language selector, default 'en'). Renders 4 footer column groups (Product, Company, Legal, Resources) each with a toggleCol button; on mobile, AnimatePresence animates the link list open/close with FiChevronDown rotation. Social links row includes FiGithub, FiLinkedin, FiTwitter from react-icons/fi with hover animations. Language selector uses FiGlobe icon and a languages array (en, en-ca, fr, es) rendered as a dropdown. Brand section shows 'scenic-srs' wordmark and tagline. Parallax background layer (lf-parallax-bg at -0.3x) with lf-parallax-orb--1/2. Note: this Footer component may coexist with or replace footer components from other pages. Apply LandingFooter.css.

As a frontend developer, implement the LoginNavbar section for the Login page. This reuses the LandingNavbar component (already built in task b9ecf99a-93c6-42bb-8b45-2dad2ea17b67) from '../styles/LandingNavbar.css'. The component uses useState for menuOpen and scrolled, useScroll and useTransform from framer-motion to animate background opacity (0→0.92) and blur (0→12px) over the first 120px of scroll. Includes SVG logo with animated pathLength draw-on effect via logoPathVariants, stroke color transition between #6366F1 (unscrolled) and #10B981 (scrolled), desktop nav links (Features, How It Works, Pricing, Research), and a mobile hamburger menu with three animated lines (rotate 45°/-45°, middle fades out) that opens a spring-animated drawer (x: 100%→0) with staggered drawerItemVariants per link. Note: component likely already exists from Landing page — verify before recreating.

As a frontend developer, implement the SignupNavbar section for the Signup page. This reuses the LandingNavbar component (from task b9ecf99a-93c6-42bb-8b45-2dad2ea17b67) which includes: scroll-driven background opacity and blur transforms via framer-motion useScroll/useTransform hooks, a scrolled state toggled at 80px, animated SVG logo with logoPathVariants (pathLength draw-on animation), stroke color transition between #6366F1 and #10B981 on scroll, desktop nav links to /Landing#features, /Landing#how-it-works, /Landing#pricing, /Research, a hamburger menu with three-line AnimatePresence variants (rotate/opacity), a spring-animated mobile drawer (drawerVariants x:100%→0), and staggered drawerItemVariants for mobile links. Import from LandingNavbar.css. Verify the shared component exists before creating a Signup-specific copy.

As a frontend developer, implement the LoginHero section for the Login page using '../styles/LoginHero.css'. The component manages 8 state hooks: email, password, showPassword, rememberMe, mfaEnabled, youthAccount, isLoading, and error. The UI renders a decorative background with three CSS orb divs (lh-bg-orb--1/2/3) and a grid overlay. The card (lh-card) contains: a header with an inline SVG logo linking to /Landing; a form with FiMail-prefixed email input, FiLock-prefixed password input with FiEye/FiEyeOff toggle for showPassword; checkbox rows for rememberMe, mfaEnabled (FiShield icon), and youthAccount (FiAlertTriangle icon); an error display using FiAlertCircle when error state is set; a submit button that triggers handleSubmit which validates fields, sets isLoading for 1500ms, then sets a mock error; Google OAuth button (custom GoogleIcon SVG with 4 colored paths) and Apple OAuth button (custom AppleIcon SVG); and footer links for forgot password and sign-up. handleSubmit includes client-side validation guards before the simulated async call.

As a frontend developer, implement the LoginFooter section for the Login page. This reuses the LandingFooter component (already built in task 4b17a12b-3871-4ff9-872f-4135881c9569) from '../styles/LandingFooter.css'. The component uses useState for openCol (accordion index) and lang (language selector, default 'en'). Renders a parallax background with two orb divs (lf-parallax-orb--1/2) using CSS var(--scroll) transform. Content includes: brand block with 'scenic-srs' name and tagline; four footerColumns (Product, Company, Legal, Resources) each rendered as accordion-style buttons with FiChevronDown toggle using AnimatePresence; social links row with FiGithub, FiLinkedin, FiTwitter via react-icons/fi; and a language picker cycling through 4 locales (en, en-ca, fr, es) with FiGlobe icon. Note: component likely already exists from Landing page — verify before recreating.

As a frontend developer, implement the SignupHero section for the Signup page. The section renders a full-viewport hero (sh-root) with two decorative background orbs (sh-orb--primary, sh-orb--secondary) and a sh-grid-overlay, all aria-hidden. Main content block (sh-content) contains: a badge with an animated sh-badge-dot and label 'AI-Powered Patent Platform', an h1 headline with a gradient accent span (sh-headline-accent) reading 'Start Your Patent Journey Today', a subheadline paragraph, and a sh-trust-row mapping the trustPills array — each pill renders a react-icons/fi icon (FiShield, FiZap, FiUsers) with label text and optional variant class (sh-trust-pill--green for SOC 2). A scroll indicator (sh-scroll-indicator) with sh-scroll-mouse and animated sh-scroll-wheel is rendered at the bottom. Styles from SignupHero.css.

As a frontend developer, implement the SignupForm section for the Signup page. This is the most complex section, featuring: formData state (email, password, confirmPassword, ageGroup, parentalConsent, termsAccepted), showPassword/showConfirm toggles using FiEye/FiEyeOff icons, real-time validation via a useCallback validate() function checking email regex, password length ≥8, password match, required ageGroup select, COPPA-aware parentalConsent checkbox (shown conditionally when ageGroup==='10-17' via isYouth flag), and required termsAccepted checkbox. A getPasswordStrength() helper scores the password (1-4: weak/fair/good/strong) and drives a 4-bar strength meter using getBarClass() with CSS level classes (sf-strength-bar--weak/fair/good/strong). Field-level error display uses FiAlertCircle (error), FiCheckCircle (valid), FiAlertTriangle icons. A submitting/submitted state controls a loading spinner and success state on form submit. Styles from SignupForm.css.

As a frontend developer, implement the SignupBenefits section for the Signup page. The section maps over a benefits array of 3 cards (Instant Access, AI Mentor, Free Prior-Art Search), each containing: a badge label, inline SVG icon (document/chat-bubble/magnifying-glass paths), title, desc paragraph, a features list rendered with a CheckIcon SVG component (polyline checkmark), and a CTA anchor (href to /Dashboard, /Chat, /Research respectively). Uses useRef and useState for an intersection-observer-based scroll-reveal animation (animate-in class toggle). Also includes a reusable ArrowIcon SVG component for CTA arrows. Styles from SignupBenefits.css.

As a frontend developer, implement the SignupFAQ section for the Signup page. Renders an accordion of 5 FAQ items (age, parental, security, upgrade, plus additional) each with: an inline SVG icon (person/group/shield/chart paths), a question string, and a multi-sentence answer. State is a single useState openId that tracks the currently expanded item. Click on an item header toggles open/closed state; only one item is open at a time. The expanded answer panel should animate open/closed (height or opacity transition). Styles from SignupFAQ.css. FAQ content covers: age collection rationale, parental consent flow for under-13 (pending state, email verification), TLS 1.3 / AES-256 data security and COPPA/GDPR/SOC 2 compliance, and Pro tier upgrade path.

As a frontend developer, implement the SignupFooter section for the Signup page. This reuses the LandingFooter component (from task 4b17a12b-3871-4ff9-872f-4135881c9569) which includes: a parallax background with two orbs (lf-parallax-orb--1/2) using CSS var(--scroll) transform, a brand block with 'scenic-srs' name and tagline, four accordion columns (Product, Company, Legal, Resources) with openCol state toggled via toggleCol() and AnimatePresence-animated FiChevronDown rotation, social links row (FiGithub, FiLinkedin, FiTwitter from react-icons/fi), and a language selector dropdown (lang state, 4 options: en/en-ca/fr/es) with FiGlobe icon. Import from LandingFooter.css. Verify shared component exists before duplicating.

As a frontend developer, implement the OnboardingNavbar section for the Onboarding page by reusing the LandingNavbar component from LandingNavbar.css/LandingNavbar styles. The component uses useState for menuOpen and scrolled states, useScroll and useTransform from framer-motion to animate background opacity and blur on scroll (bgOpacity transforms scrollY [0,120] to opacity [0,0.92], blurVal transforms to [0,12]px). Includes animated SVG logo with logoPathVariants (pathLength draw-on animation), hamburger menu with per-line hamburgerLineVariants (rotate/translate on open), a spring-animated drawer with drawerVariants, and staggered drawerItemVariants for mobile nav links. Nav links include Features, How It Works, Pricing, and Research anchors. Note: this component likely already exists from the Landing page — verify and reuse rather than recreating.

As a frontend developer, implement the LandingNavbar section for the Subscription page. This component may already exist from the Landing page (task 4b17a12b). It uses useState for menuOpen/scrolled, useScroll and useTransform from framer-motion to animate bgOpacity (0→0.92) and blurVal (0→12) over the first 120px of scroll. The SVG logo animates its two paths via logoPathVariants (pathLength draw-on). Hamburger lines use custom hamburgerLineVariants per index (rotate ±45°, opacity 0 for middle). Mobile drawer uses drawerVariants (spring x: 100%→0) with staggered drawerItemVariants per nav link. navLinks include Features, How It Works, Pricing, Research. Reuse or import existing LandingNavbar component if already built.

As a frontend developer, implement the DashboardTopBar section for the Dashboard page. This section renders a fixed header using the `dtb-root`/`dtb-inner` CSS structure. Key features: (1) controlled search input with `useState('')` for `searchVal`; (2) notification bell with `useState(false)` for `notifOpen`, a live unread badge driven by `useState(notifications.filter(n=>n.unread).length)`, a dropdown panel rendered from a static `notifications` array (5 items with text/time/unread fields), and a 'Mark all read' action that calls `setUnreadCount(0)`; (3) profile avatar with `useState(false)` for `profileOpen`, rendering a dropdown with `dropdownItems` array (My Profile→/Settings, Subscription→/Subscription, Billing→/Billing, Security→/Settings, Help & Support→/Onboarding) each with a lucide-react icon; (4) dark/light mode toggle via `useState(true)` for `isDark` switching between `Sun`/`Moon` lucide icons; (5) click-outside detection via two `useRef` instances (`notifRef`, `profileRef`) and a `mousedown` event listener in `useEffect` that closes open dropdowns; (6) mutual exclusion — opening notifications closes profile and vice versa. Imports: lucide-react icons (Search, Bell, Settings, Sun, Moon, ChevronDown, User, CreditCard, LogOut, HelpCircle, Shield, FileText). This component may already exist from a previous page's TopBar; reuse if available.

As a frontend developer, implement the AdminNavbar section for the Admin Dashboard page. This reuses the LandingNavbar component (may already exist from Landing/Subscription pages) with framer-motion scroll-driven animations: useScroll/useTransform hooks drive bgOpacity (0→0.92) and blurVal (0→12px) over scrollY [0,120]. Includes ln-scrolled class toggle at 80px, animated SVG logo with logoPathVariants (pathLength draw-on, stroke color transitions indigo→emerald on scroll), hamburger menu with per-line variants (line 0 rotates 45deg+y8, line 1 fades, line 2 rotates -45deg), spring-based mobile drawer (x: 100%→0, stiffness 300 damping 30), and staggered drawerItemVariants (0.05*i delay). Nav links: Features, How It Works, Pricing, Research. Import LandingNavbar.css.

As a frontend developer, implement the OnboardingHero section for the Onboarding page. The component uses a canvas ref (canvasRef) with requestAnimationFrame for a 48-particle ambient animation — particles alternate between indigo (99,102,241) and emerald (16,185,129) RGBA colors, drift upward with random velocities (vx: ±0.18, vy: -0.22 to -0.08), and wrap at edges. A ResizeObserver handles DPR-aware canvas resizing. The section renders a CSS animated gradient background (oh-bg), two decorative glow orbs (oh-orb--tl, oh-orb--br), the particle canvas, and main content including an oh-badge with a pulsing dot, an oh-headline with accent span, and a FEATURES pill row mapping 5 items (AI Patent Drafting, Prior-Art Search, Claim Analysis, USPTO Filing, AI Mentor Chat) each with icon and label.

As a frontend developer, implement the OnboardingProgressBar section for the Onboarding page. The component defines a STEPS array of 5 steps (Account Setup, Describe Your Invention, Prior-Art Search, Draft Patent Claims, Review & File) each with estimateMinutes. State includes activeStep (useState initialized to ACTIVE_STEP_INDEX=2), hoveredDot, and visible (set true after 80ms timeout for entrance animation). Renders a progressbar role element with aria-valuenow/min/max. Includes a motion-animated meta-row showing step badge and ClockIcon with remaining minutes sum. Step dots are rendered with getSegmentState() returning 'completed'/'active'/'upcoming', each dot triggers setActiveStep on click. An AnimatePresence block transitions the active step description card. Uses custom SVG ClockIcon and CheckIcon components.

As a frontend developer, implement the OnboardingFooter section for the Onboarding page by reusing the LandingFooter component (imports LandingFooter.css). Uses useState for openCol (accordion column toggle) and lang (language selector, default 'en'). Renders a parallax background with two orbs (lf-parallax-orb--1/2) driven by a CSS --scroll custom property. Contains a brand block with scenic-srs name and tagline, a 4-column footer grid (Product, Company, Legal, Resources) each as an accordion toggled via toggleCol(), and a bottom bar with FiGithub/FiLinkedin/FiTwitter social links and a language picker (English US/CA, Français, Español) using FiGlobe and FiChevronDown with AnimatePresence dropdown. Note: this component likely already exists from the Landing page — verify and reuse rather than recreating.

As a frontend developer, implement the SubscriptionHero section for the Subscription page. Uses useState for activeTier ('basic'|'pro'), useRef for toggleRef/basicBtnRef/proBtnRef, and a useEffect with ResizeObserver-style logic to dynamically compute pillStyle (left, width) for the animated toggle pill. TIERS array defines Basic (free, 🔬) and Pro ($49/mo, ⚡, isPro flag). STATS array renders 10K+ inventors, 3,400+ patents drafted, 98% USPTO acceptance. Decorative orbs (sh-orb--primary/secondary/accent) and sh-gradient-accent provide atmospheric background. The active tier drives the pill CSS class (sh-toggle-pill--basic vs sh-toggle-pill--pro) and displays visibleTier card with icon, price, and desc. Also renders stat badges from STATS array.

As a frontend developer, implement the SubscriptionTierCards section for the Subscription page. Uses useState for annual billing toggle. Renders three tier cards from a tiers array: Basic (monthly $29/annual $22, ctaHref /Signup), Pro (monthly $79/annual $59, popular: true, ctaHref /Signup), Enterprise (null pricing, ctaHref /Team). The stc-toggle-btn drives price display via conditional monthlyPrice/annualPrice. Each card renders icon, name, tagline, price, features list with CheckIcon SVG component, and a CTA anchor styled per ctaVariant ('basic'|'pro'|'future'). Popular card receives a badge. Monthly/annual toggle uses stc-toggle-thumb animation via CSS class stc-on.

As a frontend developer, implement the SubscriptionComparison section for the Subscription page. Uses useState and useRef/useEffect for scroll-driven sticky column headers and active tier highlighting. TIERS array (Basic/Free, Pro/$29/mo, Future/Coming) with badge variants. CATEGORIES array contains 5 groups (AI Mentorship, Research & Analysis, Document Drafting, Filing & Compliance, and more) each with 4 features. Each feature cell renders true (checkmark), false (dash/x), or a string label like 'Limited', 'Basic', 'Planned'. Implements a responsive comparison table/grid with sticky tier header row and category section dividers. Feature rows include name and desc sub-text. All three tier columns are visually differentiated by badge class.

As a frontend developer, implement the SubscriptionAddOns section for the Subscription page. Uses useState for addedItems (object keyed by add-on id) and visibleCards (object for scroll-triggered reveal), useRef for cardRefs array. IntersectionObserver per card triggers visibleCards state for entrance animations. Three add-ons: Priority Inference ($12, violet, lightning bolt SVG icon), Extended Version History ($8, amber, radial SVG icon), Dedicated Support ($15, emerald, chat bubble SVG icon). Each card renders name, description, price, a features array (3 bullet points each), inline SVG icon, and a toggle Add/Added button driven by addedItems state. CheckIcon and PlusIcon are inline SVG components. Button click toggles addedItems[id].

As a frontend developer, implement the SubscriptionFAQ section for the Subscription page. Uses useState for openId to track which FAQ item is expanded (accordion pattern). faqData array contains 5+ items including: 'basic-vs-pro', 'upgrade-downgrade', 'free-trial', 'payment-methods', 'cancel-subscription'. Each item renders a question button with FiChevronDown icon (rotates on open) from react-icons/fi, and an animated collapsible answer panel containing JSX with <p>, <ul>/<li>, and anchor tags. Answers include links to /Subscription, /Billing. FiArrowRight icon used in section header or CTA. Accordion closes previous item on new selection.

As a frontend developer, implement the SubscriptionCTA section for the Subscription page. Static section with no state. Renders scta-bg-glow div with scta-glow-primary and scta-glow-secondary decorative blobs. Content includes: eyebrow badge with scta-eyebrow-dot span, h2 headline with scta-headline-accent span for 'inventing?', subtext paragraph, two CTA buttons (scta-btn-primary linking to /Signup with ArrowIcon SVG, scta-btn-secondary linking to /Subscription), a disclaimer with ShieldIcon SVG ('No credit card required. Free plan available forever.'), and a trustItems row rendering 4 trust badges (no credit card, cancel anytime, USPTO-compliant, WIPO-standard) each with a CheckIcon SVG component.

As a frontend developer, implement the LandingFooter section for the Subscription page. This component may already exist from the Landing page (task 4b17a12b). Uses useState for openCol (accordion mobile columns) and lang (language selector). footerColumns array has 4 columns: Product (5 links), Company (4 links), Legal (4 links), Resources (4 links). Social links render FiGithub, FiLinkedin, FiTwitter from react-icons/fi. Language selector uses a languages array (en, en-ca, fr, es) and AnimatePresence from framer-motion for dropdown. Decorative lf-parallax-bg with two orbs uses CSS --scroll custom property for parallax. Mobile columns toggle via toggleCol(idx) setting openCol, with FiChevronDown icon. AnimatePresence wraps collapsible link lists.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. This section renders a collapsible `<aside>` navigation using the `dsb-root` CSS class. Key features: (1) mobile open/close toggle controlled by `useState(false)` for `mobileOpen`, toggling between `Menu` and `X` lucide icons via `aria-expanded`; (2) a `navItems` array of 6 entries (Dashboard→/Dashboard, My Patents→/Document badge '12', Teams→/Team, Research→/Research, Filing Queue→/Filing badge '3', Settings→/Settings) split into `section: 'main'` and `section: 'account'` groups using `.filter()`; (3) active-route detection via `window.location.pathname` with SSR guard (`typeof window !== 'undefined'`), special-casing `/Dashboard` and `/` as equivalent, and `startsWith` matching for other routes; (4) `renderNavItem` helper that applies `dsb-active` class and `aria-current='page'` on active items, renders icon via `item.icon` component, label, and optional badge span; (5) mobile toggle bar with brand SVG (scenic-srs logo, indigo stroke). Imports: lucide-react (LayoutDashboard, FileText, Users, Search, Inbox, Settings, ChevronDown, ChevronUp, Menu, X).

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. This is a static presentational section using the `dw-root`/`dw-inner` CSS structure split into left and right columns. Left column: (1) greeting `<h1>` with hard-coded `userName='Sarah'` wrapped in `dw-greeting-name` span; (2) subscription tier badge using `subscriptionTier='Basic'` with dynamic class `dw-tier-badge--basic` and a `dw-tier-badge-dot` indicator; (3) `statusItems` array (2 items: FiFileText/3 patents, FiUsers/1 team) rendered as inline spans with `dw-status-sep` dots between them; (4) `pills` array (4 items: In Progress/3, Filings Submitted/7, Active Teams/1, Pending Review/2) rendered as styled `dw-pill` spans with color variant classes. Right column: two `<a>` buttons — 'Upgrade to Pro' (→/Subscription, FiZap icon, `dw-btn-upgrade`) and 'New Patent' (→/Dashboard, FiPlus icon, `dw-btn-new-patent`). Imports: react-icons/fi (FiZap, FiFileText, FiUsers, FiCheckCircle, FiAlertCircle, FiPlus).

As a frontend developer, implement the DashboardProjectsGrid section for the Dashboard page using `dpg-*` CSS classes. Key features: (1) `ALL_PROJECTS` static array of 6 patent project objects each with id, title, summary, status ('Under Review'|'Drafting'|'Filed'), updatedAt, progress (0-100), iconColor, iconTextColor, and `urgent: boolean`; (2) `useState('All')` for active status filter, with `STATUS_FILTERS = ['All','Drafting','Under Review','Filed']` tab buttons; (3) `STATUS_CONFIG` map providing className and chipDot color per status for badge rendering; (4) filtered project list derived from the active filter state; (5) project card grid rendering each card with: colored icon area (FiFolder with dynamic background/text color), title, summary excerpt, status badge (`dpg-badge-*` class), progress bar (`dpg-progress-bar` with inline `width: progress+'%'`), updatedAt timestamp, and an urgent indicator for `urgent: true` projects; (6) action icon buttons per card: FiEdit2 (edit), FiShare2 (share), FiTrash2 (delete); (7) 'New Project' CTA button with FiPlus icon. Imports: react-icons/fi (FiFileText, FiEdit2, FiShare2, FiTrash2, FiPlus, FiFilter, FiClock, FiCheckCircle, FiAlertCircle, FiFolder).

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page using `dra-*` CSS classes. This section renders a card (`dra-card`) with: (1) a header row containing a title icon group (FiActivity icon in `dra-title-icon`, 'Recent Activity' label) and a 'View all' link to /Audit with FiArrowRight; (2) a `<ul className='dra-list'>` rendering 6 static `activityItems` — each item has id, type ('ai'|'team'|'filing'|'research'|'document'|'trademark'), icon component (FiCpu, FiUsers, FiFileText, FiSearch, FiBookOpen, FiTag), action string, highlight string, timestamp, badge label, and href; (3) each `<li>` renders: icon in `dra-icon-wrap dra-icon-wrap--{type}` (type-specific color), body with action text + `<a>` highlight link to item.href, and a meta row with timestamp and `dra-badge dra-badge--{type}` badge. Imports: react-icons/fi (FiActivity, FiCpu, FiUsers, FiFileText, FiSearch, FiBookOpen, FiTag, FiArrowRight, FiList).

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page using `dqa-*` CSS classes. This is a static presentational section with: (1) a header row with FiLayout icon and 'Quick Actions' title; (2) a `dqa-grid` rendering 4 action items from the `actions` array — each action has id, label, desc, href, variant ('primary'|'secondary'), Icon component, and `isCta: boolean`; (3) each action rendered as an `<a>` tag with dynamic classes `dqa-btn dqa-btn--{variant}` plus `dqa-btn--primary-cta` when `isCta` is true; (4) each button contains three spans: `dqa-btn-icon` (action.Icon component), `dqa-btn-content` (label + desc), `dqa-btn-arrow` (FiChevronRight). Actions: Start New Patent→/Dashboard (primary CTA, FiZap), Create Team→/Team (secondary, FiUsers), Search Prior Art→/Research (secondary, FiSearch), Upload Document→/Document (secondary, FiUploadCloud). Imports: react-icons/fi (FiZap, FiUsers, FiSearch, FiUploadCloud, FiChevronRight, FiLayout).

As a frontend developer, implement the DashboardSubscriptionBanner section for the Dashboard page using `dsb-*` CSS classes (note: distinct from DashboardSidebar which shares the `dsb-` prefix — verify no CSS collision). Key features: (1) `useState(false)` for `dismissed`; when true the component returns `null` (banner fully removed from DOM); (2) banner layout: `dsb-root` > `dsb-banner` containing a `dsb-banner-glow` decorative div and `dsb-banner-inner` split into left and right; (3) left side: FiZap icon in `dsb-icon-wrap`, then a text block with tier badge ('Basic Plan' + `dsb-tier-dot`), headline paragraph, and a `<ul>` of 4 `proFeatures` items each rendered with FiCheck icon + label text (Unlimited team members, Multi-model AI verification, Full USPTO e-filing, Priority prior-art search); (4) right side `dsb-actions`: 'Upgrade Now' `<a>` button linking to /Subscription with FiArrowRight, and a dismiss `<button>` with FiX icon that calls `setDismissed(true)` with `aria-label='Dismiss banner'`. Imports: react-icons/fi (FiZap, FiX, FiArrowRight, FiCheck).

As a frontend developer, implement the DashboardStats section for the Dashboard page using `ds-*` CSS classes. This is a static presentational section with: (1) a header with 'Overview' title in `ds-title`; (2) a `ds-grid` rendering 4 stat cards from the `stats` array — each stat has key, label, number (string), icon component, iconVariant ('primary'|'secondary'|'accent'|'highlight'), cardVariant (same or empty string), glowVariant, trend string ('+12%'|'+5'|'Active'|'+31%'), and trendType ('up'|'neutral'); (3) each card renders: `ds-card-glow ds-card-glow--{glowVariant}` decorative element, `ds-icon-wrap ds-icon-wrap--{iconVariant}` containing the icon component, `ds-info` div with `ds-number` and `ds-label`, and `ds-trend ds-trend--{trendType}` badge. Stat data: Total Patents Filed/142/FiFileText/+12%/up, In Progress/27/FiClock/+5/up, Teams/8/FiUsers/Active/neutral, Filings This Month/19/FiTrendingUp/+31%/up. Imports: react-icons/fi (FiFileText, FiClock, FiUsers, FiTrendingUp).

As a frontend developer, implement the DashboardFooter section for the Dashboard page. This section reuses the `LandingFooter.css` stylesheet and the `LandingFooter` component pattern (may already exist from Subscription page task 5c3092ff-c15a-46dd-95d5-c5afae96812d — reuse that component if available). Key features: (1) decorative parallax background with two `lf-parallax-orb` divs; (2) brand block with 'scenic-srs' name and tagline; (3) `footerColumns` array of 4 columns (Product, Company, Legal, Resources) each with title and links array, rendered in `lf-columns` grid — each column has a `<button className='lf-col-header'>` that toggles open state managed by `useState(null)` for `openCol` (accordion behavior: `setOpenCol(prev => prev===idx ? null : idx)`), with `AnimatePresence` + `motion.ul` from framer-motion for animated link list reveal; (4) social links row with FiGithub, FiLinkedin, FiTwitter icons; (5) language selector with `useState('en')` for `lang` and a `languages` array (en, en-ca, fr, es) rendered with FiGlobe icon and FiChevronDown. Imports: framer-motion (motion, AnimatePresence), react-icons/fi (FiGithub, FiLinkedin, FiTwitter, FiGlobe, FiChevronDown).

As a frontend developer, implement the AdminSidebar section for the Admin Dashboard page. Uses useState for collapsed (bool) and activeId (string, default 'dashboard'). Renders navSections array with 4 groups (Main, Monetization, Operations, System) using lucide-react icons: LayoutDashboard, Users, Layers, Receipt, Server, FileText, ShieldCheck, Settings, ChevronLeft. Each nav item supports badge with count and type variants ('primary', 'success', 'alert'). Sidebar has as-collapsed CSS class toggle, animated ChevronLeft collapse button, as-brand with SVG logo (identical paths to AdminNavbar), and onNavClick prop for parent page communication. Import AdminSidebar.css.

As a frontend developer, implement the LandingFooter section for the Admin Dashboard page. This reuses the LandingFooter component (may already exist from Landing/Subscription/Dashboard pages). State: openCol (nullable int for accordion), lang ('en'). Renders parallax background with two lf-parallax-orb divs and CSS --scroll variable translateY. lf-brand section with scenic-srs logo text and tagline. 4 footerColumns (Product/Company/Legal/Resources) each as accordion-capable lf-col with FiChevronDown toggle button and AnimatePresence-driven link list. Social links row: FiGithub, FiLinkedin, FiTwitter. Language selector with FiGlobe icon and languages dropdown (en/en-ca/fr/es). framer-motion used for AnimatePresence column expand/collapse. Import LandingFooter.css.

As a frontend developer, implement the ChatNavbar section for the Chat page by reusing the LandingNavbar component (may already exist from Landing page). The component uses useState for menuOpen/scrolled, useScroll and useTransform from framer-motion to drive bgOpacity and blurVal based on scrollY (0–120px range). Includes animated SVG logo with logoPathVariants (pathLength draw-on animation), hamburger-to-X transition via hamburgerLineVariants with custom per-line transforms, a slide-in mobile drawer using drawerVariants (spring stiffness 300/damping 30), and staggered drawerItemVariants. Nav links include Features, How It Works, Pricing, and Research. Logo stroke color transitions between #6366F1 and #10B981 based on scroll state. Imports LandingNavbar.css.

As a frontend developer, implement the TrademarkNavbar section for the Trademark page. This reuses the shared LandingNavbar component (already created in task b9ecf99a-93c6-42bb-8b45-2dad2ea17b67). The component uses useScroll/useTransform from framer-motion to drive bgOpacity (0→0.92) and blurVal (0→12) over scrollY range [0,120], a scrolled boolean state toggled at 80px via passive scroll listener, an animated SVG logo with logoPathVariants (pathLength draw-on, duration 0.8s) and stroke color transitioning between #6366F1 and #10B981 on scroll. Desktop nav links point to /Landing#features, /Landing#how-it-works, /Landing#pricing, /Research. Mobile hamburger uses three-line AnimatePresence with hamburgerLineVariants (rotate 45/-45, opacity 0 for middle line). Mobile drawer uses spring drawerVariants (x: 100%→0, stiffness 300, damping 30) with staggered drawerItemVariants (delay 0.05*i). Import from LandingNavbar.css. Verify shared component exists before creating a Trademark-specific copy.

As a frontend developer, implement the TeamNavbar section for the Team page. This reuses the `LandingNavbar` component and `LandingNavbar.css` stylesheet (may already exist from Landing/Subscription pages — reuse if available). Key features: (1) `useState(false)` for `menuOpen` and `useState(false)` for `scrolled`; (2) framer-motion `useScroll` + `useTransform` to animate `bgOpacity` from 0→0.92 and `blurVal` from 0→12 as `scrollY` goes from 0→120px; (3) `useEffect` passive scroll listener setting `scrolled` when `window.scrollY > 80`; (4) animated SVG logo with `motion.path` using `logoPathVariants` (pathLength 0→1, opacity 0→1, 0.8s easeOut), stroke color transitioning between `#6366F1` (unscrolled) and `#10B981` (scrolled); (5) `navLinks` array: Features→/Landing#features, How It Works→/Landing#how-it-works, Pricing→/Landing#pricing, Research→/Research; (6) hamburger with 3 `motion.div` lines using `hamburgerLineVariants` — line 0 rotates 45°+y8, line 1 fades out, line 2 rotates -45°+y-8; (7) mobile drawer with `drawerVariants` (spring stiffness 300, damping 30, x: 100%→0) and staggered `drawerItemVariants` (delay 0.05*i per link). Imports: framer-motion (motion, AnimatePresence, useScroll, useTransform).

As a frontend developer, implement the SettingsTopBar section for the Settings page. Scroll-aware top bar with useState for scrolled (threshold 8px via passive scroll listener) and dropdownOpen (boolean). useRef on dropdownRef for click-outside detection via mousedown event listener (added/removed based on dropdownOpen). Props: title, subtitle, showBack, showClose, onBack, onClose, userName ('Alex Chen'), userEmail. Computes initials from userName by splitting on space, taking first char of each word, uppercasing, slicing to 2 chars. ArrowLeft button calls onBack or window.history.back(). Status dot pill 'All systems operational'. Avatar button renders initials inside stb-avatar-inner, toggles dropdownOpen. Dropdown menu (stb-dropdown--open class) shows header with userName/userEmail, then items: /Dashboard link (User icon), /Settings link (Settings icon), logout button (LogOut icon). stb-root--scrolled class applied when scrolled.

As a frontend developer, implement the NavBar section for the Users page. This reuses the LandingNavbar component (already implemented as landing_navbar_1) — note it may already exist from the Landing page. Uses useState for menuOpen and scrolled, useScroll and useTransform from framer-motion to animate background opacity (0→0.92) and blur (0→12px) past 80px scroll threshold. SVG logo with animated path drawing via logoPathVariants (pathLength 0→1), stroke color transitioning between #6366F1 and #10B981 on scroll. Mobile hamburger with custom hamburgerLineVariants (line 0: rotate 45°+y8, line 1: opacity 0, line 2: rotate -45°+y-8) and spring-animated slide-in drawer (drawerVariants x: 100%→0) with staggered drawerItemVariants. Nav links: Features /Landing#features, How It Works /Landing#how-it-works, Pricing /Landing#pricing, Research /Research. Apply LandingNavbar.css.

As a frontend developer, implement the InfraNavBar section for the Infrastructure page by reusing the LandingNavbar component (imports LandingNavbar.css). Uses useState for menuOpen and scrolled, useScroll and useTransform from framer-motion to animate bgOpacity ([0,0.92]) and blurVal ([0,12]px) over scrollY [0,120]. Renders animated SVG logo with logoPathVariants (pathLength draw-on, stroke color transitions between #6366F1 and #10B981 on scroll), three-line hamburger with per-index hamburgerLineVariants (rotate 45/-45, y ±8, opacity 0 for middle), spring-based drawer with drawerVariants (x: 100%→0), and staggered drawerItemVariants for mobile nav links (Features, How It Works, Pricing, Research). Note: this component already exists from Landing/Login/Signup/Onboarding/Verification pages — verify and reuse.

As a frontend developer, implement the OnboardingStepContainer section for the Onboarding page. The component defines a 5-step wizard array (welcome, research, draft, collaboration implied, file implied) using useState for currentStep and per-step state. Each step has an iconType ('primary'/'green'/'amber'), a react-icons/fi icon (FiZap, FiSearch, FiFileText, FiSend, FiUsers/FiCheckCircle), and a content type: 'features' (step 1 — 4-item feature grid with title+desc), 'demo' (step 2 — prior-art search input with demoPlaceholder and tag pills for USPTO/Bing/WIPO/Semantic/RAG), 'infoGrid' (step 3 — 4 emoji info boxes for Claims/Abstract/ClaimAnalysis/Legal). Uses AnimatePresence for step transition animations with FiArrowRight/FiArrowLeft navigation buttons and FiCheck for completion. Imports useCallback alongside useState, useEffect for validation/side-effects.

As a frontend developer, implement the AdminTopBar section for the Admin Dashboard page. Uses useState for searchValue, filtersActive (bool), isRefreshing (bool), lastUpdated (string). handleRefresh triggers a 900ms async simulation via setTimeout, toggling isRefreshing and resetting lastUpdated to 'Just now'. Layout has three zones: left (atb-title 'Users' + breadcrumb nav with LayoutDashboard icon and ChevronRight separators, BREADCRUMBS array with scenic-srs/Admin/Users), center (search input with Search icon and ⌘K keyboard shortcut badge), right (status dot + lastUpdated label, Export Download button with handleExport, Filters SlidersHorizontal toggle with filtersActive state, Refresh RefreshCw with spin animation during isRefreshing). Import AdminTopBar.css.

As a frontend developer, implement the AdminOverview section for the Admin Dashboard page. Renders 5 MetricCard components from the metrics array: users (14,382, indigo, progress 72%), subscriptions (3,891, green, progress 85%), patents (1,047, amber, progress 61%), uptime (99.97%, green, progress 100%), gpu (4/4 with statusNodes array showing GPU-01/02/03 green + GPU-04 yellow). Each card has ao-card-glow div, ao-icon-badge with lucide icon, TrendIcon sub-component (TrendingUp/TrendingDown/Minus), trend badge, animated progress bar with ao-progress-bar-fill--{color} classes, footer text, and special GPU card rendering statusNodes as colored dots instead of progress bar. Import AdminOverview.css.

As a frontend developer, implement the AdminQuickStats section for the Admin Dashboard page. Renders 5 stat cards from the stats array (registrations 147, conversions 23, failed filings 6, tickets 34, latency 284ms) using react-icons/fi: FiUserPlus, FiTrendingUp, FiAlertTriangle, FiMessageCircle, FiZap. Each card shows accentColor-styled icon badge (iconBg rgba), value+unit, change badge with direction (up/down/neutral), period label. Includes a Sparkline sub-component using SVG with ResizeObserver (observes parent element, updates dimensions state {width, height}), computed linePath and areaPath with gradient fill, animDelay prop for staggered entrance. sparkData arrays have 14 data points each. Import AdminQuickStats.css.

As a frontend developer, implement the AdminUsers section for the Admin Dashboard page. Complex data table with 12 USERS_DATA entries. State: search, accountFilter, tierFilter, statusFilter (all strings), sortKey ('regDate'), sortDir ('desc'), page (1), selected (Set), actionMenu ({userId, x, y} or null), confirmModal (object or null). useMemo computes filtered+sorted+paginated results. Supports multi-column sort (FiChevronUp/Down), row checkbox selection, per-row action menu (FiMoreVertical) with FiEye/FiEdit2/FiTrash2/FiSlash/FiRefreshCw options positioned absolutely at {x,y}. Pagination with FiChevronLeft/FiChevronRight, PAGE_SIZE=8. Avatar initials with avatarColor background. Bulk action bar appears when selected.size>0. Export FiDownload button. Import AdminUsers.css.

As a frontend developer, implement the AdminSubscriptions section for the Admin Dashboard page. State: sortKey ('subscribers'), sortDir ('desc'), filter ('all'). Renders 3 summaryCards (MRR $42,870, Active Subscribers 1,284, Churn Rate 3.2%) with lucide icons (DollarSign, Users, TrendingDown) and metaType-driven up/down badges. Sortable table of 4 subscriptionRows (Pro 748, Basic 491, Enterprise 45, Free Trial 312) with SORT_KEYS constants and ChevronUp/ChevronDown column headers. DeltaCell sub-component renders ArrowUpRight/ArrowDownRight/Minus based on type ('upgrade'/'downgrade') and value. churnClass() maps pct to 'low'/'med'/'high' CSS modifier. Filter tabs (all/pro/basic/enterprise). ExternalLink and Settings action icons per row. BarChart2/List view toggle. Import AdminSubscriptions.css.

As a frontend developer, implement the AdminBilling section for the Admin Dashboard page. State: sortKey, sortDir, page, statusFilter, dateRange (useMemo for filtered/paginated results). Renders summary KPI row (total revenue, failed count, refunds) with DollarSign, AlertCircle, RefreshCw, CreditCard lucide icons. Paginated TRANSACTIONS table (20+ entries, PAGE_SIZE driven) with columns: TXN id, date, user, amount, tier badge, payment method, status badge (Success/Failed/Refunded with color variants), receipt link. Column sort via ChevronUp/ChevronDown. Pagination controls ChevronLeft/ChevronRight with page count. Download button for CSV export placeholder. Inbox empty-state component. Filter by status dropdown. Import AdminBilling.css.

As a frontend developer, implement the AdminInfrastructure section for the Admin Dashboard page. State: useState for selected GPU/node, alert dismissal. Renders 6 gpuData cards with per-GPU metrics: utilization bar, temperature (FiThermometer), memoryUsed/memoryTotal (FiDatabase), powerDraw/powerLimit (FiZap), status badge (healthy/warning/critical) with FiCheckCircle/FiAlertTriangle/FiAlertCircle icons. 4 macMiniNodes rows (FiServer) with uptime and role. failoverNodes panel with FiCloud/FiHardDrive type badges. throughputStats row (4 metrics: req/s, latency, VRAM, power). Alerts list with FiAlertTriangle/FiAlertCircle/FiInfo severity icons, FiRotateCcw restart and FiUploadCloud deploy action buttons. FiRefreshCw global refresh button. FiShield compliance indicator. Import AdminInfrastructure.css.

As a frontend developer, implement the AdminFilings section for the Admin Dashboard page. State: sortKey, sortDir, statusFilter, typeFilter, methodFilter, search, page (useMemo for filtered/sorted/paginated). ALL_FILINGS array has 40+ entries with fields: id (FIL-2026-XXXX), user+initials+avatarColor, title, type (Provisional/Non-Provisional), status (Accepted/Submitted/Rejected/Pending), date, receipt (nullable), method (Automated/Manual). Renders status badges with FiCheckCircle (Accepted), FiXCircle (Rejected), FiClock (Pending), FiSend (Submitted). Method badge with FiCpu (Automated) / FiUser (Manual). Avatar initials circle with avatarColor. FiEye detail action, FiRefreshCw retry for failed. Sortable columns with FiChevronUp/Down. Pagination FiChevronLeft/Right. FiFilter dropdown and FiDownload export. Import AdminFilings.css.

As a frontend developer, implement the AdminCompliance section for the Admin Dashboard page. State: actionFilter, resultFilter, search, page (useMemo filtering ALL_AUDIT_LOGS of 20+ entries). Audit log table columns: timestamp, user (initials avatar + email), action type with icon map (FiLogIn=Login, FiFileText=File Submission, FiTrash2=Account Deletion, FiKey=Password Reset, FiGlobe=Data Export, FiUserCheck=GDPR Request), IP address, result badge (Success green / Failure red with FiCheckCircle/FiAlertTriangle). Compliance summary cards: total events, failures count, GDPR requests count. FiDownload export button. FiFilter dropdown for action type and result. Pagination FiChevronLeft/Right. FiShield header icon. FiArrowRight detail drill-down per row. Import AdminCompliance.css.

As a frontend developer, implement the AdminSettings section for the Admin Dashboard page. Six-tab layout (TABS: system/payment/email/features/alerts/security) managed by activeTab state. System tab: sysSettings state object (apiEndpoint, internalEndpoint, rateLimit, rateLimitWindow, modelVersion, maxTokens, logLevel, maintenanceMode bool) with ToggleSwitch sub-component (as-toggle-switch/track/thumb). Payment tab: stripeSettings state with stripeReveal (pub/secret/webhook bools) for FiEye/FiEyeOff masked fields, currency+taxRate inputs. Email tab: templateSubjects map with 5 EMAIL_TEMPLATES (Welcome/Password Reset/Trial Expiring/Invoice/Filing Status), emailTemplate dropdown, textarea editor. Features tab: feature flags with ToggleSwitch per flag. Alerts/Notifications tab: FiBell preferences. Security tab: initialApiKeys array (FiCopy/FiTrash2/FiRefreshCw per key, active toggle), initialIpList (FiPlus add, FiTrash2 remove). Toast notification (FiCheck) on FiSave. FiX cancel/reset. Import AdminSettings.css.

As a frontend developer, implement the ChatSidebar section for the Chat page. Component uses useState for mobileExpanded, selectedTeam, searchQuery, activeProject and useMemo to derive filteredProjects based on searchQuery. Renders a team switcher dropdown (teams array: Personal Workspace, Inventors Lab, Cloud Wash R&D, Pro Team Alpha), a search input filtering the projects list, and 7 project entries each with color-coded initials avatar (colorBg/colorText), badge ('active'/'new'/null), and meta timestamp. Quick actions nav renders FiBookOpen/FiFileText/FiUsers/FiTrendingUp/FiSettings icons linking to /Research, /Document, /Team, /Filings, /Settings. Mobile toggle collapses/expands the sidebar. Imports react-icons/fi and ChatSidebar.css.

As a frontend developer, implement the ChatHeader section for the Chat page. Component uses useState for menuOpen and copied, and useRef for menuRef. A useEffect adds/removes a mousedown listener to close the dropdown when clicking outside. Renders a left section with FiCpu project icon, project title 'Smart Water Filtration — USPTO Draft v2', live activity dot with '3 minutes ago · AI Mentor responding' text, and a 'Pro AI' status badge. Center section renders 4 stacked avatar chips (AK/PL/MJ/SR with chead-avatar--a/b/c/d color classes) plus an overflow count badge. Right section has FiShare2 download and FiMoreVertical overflow buttons; the overflow dropdown renders menuItems array with icons, labels, optional href links, dividers, and a danger-styled 'Delete Session' entry. Copy share link action sets copied=true for 2s. Imports ChatHeader.css.

As a frontend developer, implement the ChatMessagesContainer section for the Chat page. Component uses useState for messages (INITIAL_MESSAGES array), reactionState, and scroll position; useRef for containerRef and bottom sentinel; useEffect with IntersectionObserver for auto-scroll-to-bottom behavior; useCallback for handleReaction. Renders: date-divider rows, context-label rows, assistant message bubbles with sender avatar, text, optional listItems (bulleted), optional codeBlock (syntax-highlighted pre), citation chips (US11234567, US10987654, WIPO-PCT-2024), and emoji reaction buttons with counts. User message bubbles are right-aligned. AnimatePresence wraps each message with motion.div entry animations. Also renders an AI typing indicator (animated dot pulse) when isTyping is true. Messages include full patent drafting conversation flow with Claim 1 code block. Imports framer-motion AnimatePresence/motion and ChatMessagesContainer.css.

As a frontend developer, implement the DocumentPreviewPanel section for the Chat page. Component uses useState for activeSection (default 'abstract'), copied, and expandedBlocks. useCallback handleCopy sets copied=true for 2s. Renders a panel with documentSections array (abstract 148w, background 212w, summary 189w, detailed specification 534w with sub-blocks, claims list, drawings). Tab navigation highlights activeSection. Content area renders type='text' sections as paragraph, type='spec' sections as heading+paragraph blocks array. Claims section renders numbered independent/dependent claim entries. FiDownload triggers export, FiCopy triggers clipboard copy with FiCheck confirmation swap. FiList/FiAlignLeft/FiBookOpen/FiInfo/FiLayers icons serve as section type indicators. Word count badges displayed per section tab. Imports DocumentPreviewPanel.css.

As a frontend developer, implement the ChatFooter section for the Chat page by reusing the LandingFooter component (may already exist from Landing/Admin Dashboard pages). Component uses useState for openCol (accordion column index) and lang (language selector). Renders a parallax background with two orb divs driven by CSS --scroll variable. Brand section shows 'scenic-srs' name and tagline. Four footer columns (Product, Company, Legal, Resources) render as accordion on mobile via toggleCol/AnimatePresence with FiChevronDown rotation. Social links: FiGithub, FiLinkedin, FiTwitter. Language dropdown cycles through en/en-ca/fr/es with FiGlobe icon and FiChevronDown. Imports LandingFooter.css and framer-motion.

As a frontend developer, implement the ResearchNavbar section for the Research page by reusing the LandingNavbar component (already built from previous pages). The component uses useState for menuOpen and scrolled, useScroll and useTransform from framer-motion to animate bgOpacity (0→0.92) and blurVal (0→12px) over the first 120px of scroll. Logo SVG uses animated pathLength drawing via logoPathVariants, stroke color transitions between #6366F1 and #10B981 on scroll. Hamburger uses per-line custom variants (rotate 45°/-45°, opacity 0 for middle line). Mobile drawer slides in from right via spring animation (stiffness 300, damping 30) with staggered drawerItemVariants per nav link. navLinks array includes Research href pointing to /Research. Imports LandingNavbar.css.

As a frontend developer, implement the TrademarkHero section for the Trademark page. The section (th-root) renders a two-column layout (th-layout) with a decorative background block (th-bg-decor) containing th-bg-glow-1, th-bg-glow-2, and th-bg-grid divs (all aria-hidden). Text column (th-text-col) includes: an animated badge with th-badge-dot, an h1 headline with th-headline-accent span, a subheadline paragraph, a jurisdiction tags row mapping the jurisdictions array (USPTO/CIPO/EUIPO/WIPO/IPO as th-jurisdiction-tag spans), and a th-cta-row with a primary button linking to /Filing ('Start Trademark Check') and a secondary button linking to /Research ('Learn More') — both include inline SVG arrow icons. A stats row maps the stats array (150+ Jurisdictions, 99% Accuracy, 48hr Filing Review, 10K+ Marks Registered) as stat cards. Styles from TrademarkHero.css.

As a frontend developer, implement the TrademarkOverview section for the Trademark page. Renders a tov-root section with a header block (tov-header) containing a tov-eyebrow badge with tov-eyebrow-dot, an h2 title, and a subtitle paragraph. Below is a tov-grid mapping the features array of 3 cards: Availability Checking (FiSearch icon), Conflict Analysis (FiAlertCircle icon), Multi-Jurisdiction Guidance (FiGlobe icon). Each tov-card contains: a tov-card-accent decorative div, a tov-icon-wrap rendering the react-icons/fi Icon component, an h3 header, a description paragraph, a tov-card-divider, a tov-tags row mapping tag strings as individual tag spans, and a CTA anchor link. All three icon imports are from react-icons/fi. Styles from TrademarkOverview.css.

As a frontend developer, implement the TrademarkProcessGuide section for the Trademark page. Renders a numbered step-by-step guide mapping a steps array of 5 items (01–05): Name Creation & Brand Strategy, Availability Check, Conflict Analysis, Application Preparation, and a 5th step. Each step card renders: a step number badge (e.g. '01'), a phase label, an inline SVG icon (layers/search-plus/shield-check/document paths using stroke-only SVG), the step title as h3, a description paragraph, a tags row of pill spans, and a duration badge (e.g. '1–3 days'). The layout is a vertical timeline or grid. No dynamic state — purely static presentational rendering. Styles from TrademarkProcessGuide.css.

As a frontend developer, implement the TrademarkFilingSteps section for the Trademark page. Features useState for an active step index, useRef and useEffect for scroll-based or intersection-observer step activation. Maps a steps array of 4 items (01–04: Generate Application, Review Details, Submit to USPTO, Track Status), each with: a number label, statusLabel badge with dynamic statusClass (tfs-step-status--ai/review/submit/track), title, description paragraph, icon from react-icons/fi (FiFileText, FiEye, FiSend, FiActivity), a screenshotLabel and screenshotIcon, and a details array of 4 items each with a react-icons/fi icon and text string. The active step panel expands to show details; FiChevronRight indicates progression. All icon imports: FiFileText, FiCheckSquare, FiSend, FiActivity, FiChevronRight, FiZap, FiEye, FiShield, FiClock, FiTag, FiAlertCircle, FiLayers, FiCheck. Styles from TrademarkFilingSteps.css.

As a frontend developer, implement the TrademarkJurisdictions section for the Trademark page. Includes useState openCard (null | index) toggled by toggleCard(idx) for accordion-style card expansion. Renders a header block then maps the jurisdictions array of 3 items (USPTO/US, CIPO/CA, WIPO/INT) — each card shows: a flag emoji, jurisdiction name, org label, feeBase + feeNote, timeRange + timeNote, classesSupported badge, and a features list using the FeaturePill sub-component. FeaturePill accepts label and type ('green'/'red'/'yellow') and renders FiCheck, FiAlertCircle, or FiClock icons from react-icons/fi with dynamic CSS class (tj-feature-pill--green/red/yellow). A FiChevronDown icon rotates on expansion. Below the cards, a static tableColumns array drives a comparison table header row (Jurisdiction, Filing Fees, Processing Time, Classes & Features). Styles from TrademarkJurisdictions.css.

As a frontend developer, implement the TrademarkBestPractices section for the Trademark page. Static section mapping the bestPractices array of 5 cards (01–05: Choose Distinctive Names, Conduct Thorough Searches, Document Your Usage, Review Classification Codes, and a 5th practice). Each card renders: a step number badge, a react-icons/fi icon component (FiStar, FiSearch, FiFileText, FiTag, FiGlobe), a title h3, a desc paragraph, a tipsLabel string, and a tips array of 4 bullet strings as a list. Each card uses inline style props for accentColor, iconBg, iconBorder, iconBgHover, iconBorderHover — enabling per-card colour theming (#6366F1 indigo, #10B981 green, #F59E0B amber). A FiArrowRight icon is used for any CTA link within the card. Styles from TrademarkBestPractices.css.

As a frontend developer, implement the TrademarkLegalDisclaimer section for the Trademark page. Renders a tld-root section (aria-label='Legal Disclaimer') containing a tld-inner wrapper with a single tld-card (role='alert', aria-live='polite'). Inside: a decorative tld-card-glow div (aria-hidden), a tld-header with a tld-badge (tld-badge-dot + 'Important Notice' text) and a tld-title-group (h2 + subtitle p), a tld-divider, two tld-body paragraphs (with strong/span.tld-highlight emphasis for legal copy about not being a substitute for attorney advice), and a tld-cta-row with three anchor links: 'Review Filing Checklist' (href=/Filing, inline document SVG), 'Compliance Overview' (href=/Compliance, inline shield SVG), and a tld-note paragraph linking to /Chat for AI Mentor. No state or interactivity. Styles from TrademarkLegalDisclaimer.css.

As a frontend developer, implement the TrademarkFAQ section for the Trademark page. Uses useState for openId (string | null) to track which accordion item is expanded — only one item open at a time. Maps the faqItems array of 5+ items, each with id, label (numbered '01'–'05'), question string, and answer as JSX (paragraphs, ul/li lists with strong tags). Each item renders a FiChevronDown icon (from react-icons/fi) that rotates on open, a FiInfo icon for supplementary context, a question header button, and an animated answer panel (height/opacity transition on open). Answer JSX for q2 includes a ul with strong-tagged list items describing USPTO TESS, phonetic similarity, design code, and common-law usage scans. Answer JSX for q3 covers Nice Classification classes 1–45 with Class 42 and Class 25 examples. Styles from TrademarkFAQ.css.

As a frontend developer, implement the TrademarkCTA section for the Trademark page. Static section (tcta-root) with decorative tcta-bg and tcta-bg-accent divs (aria-hidden), a tcta-badge with tcta-badge-dot, an h2 headline with tcta-headline-accent span, a tcta-copy paragraph, and a benefits row mapping the benefits array (4 items: 'No legal experience required', 'AI-powered conflict detection', 'USPTO & international support', 'Cancel anytime') each with a CheckIcon SVG sub-component (polyline d='M3 8.5L6.5 12L13 5'). Two tier feature lists render: basicFeatures (4 items: USPTO Trademark Search, Similarity Analysis, Filing Guidance, Status Tracking) and proFeatures (4 items: Multi-Jurisdiction Filing, AI Conflict Detection, Multi-Model Verification, Priority Legal Review), each item rendered with CheckIcon. Four inline SVG sub-components: CheckIcon (accepts color prop), SearchIcon (#10B981 circle), StarIcon (#818CF8 star path), ArrowRightIcon and UpgradeIcon (path d strings for navigation). CTA buttons link to /Signup and /Subscription. Styles from TrademarkCTA.css.

As a frontend developer, implement the TrademarkFooter section for the Trademark page. This reuses the shared LandingFooter component (already created in task 4b17a12b-3871-4ff9-872f-4135881c9569). The component uses useState for openCol (null | index) toggled via toggleCol() and lang state ('en' default, options: en/en-ca/fr/es). Renders: a lf-parallax-bg with two lf-parallax-orb divs using CSS var(--scroll) translateY transform, a lf-brand block ('scenic-srs' name + tagline), a lf-columns grid mapping 4 footerColumns (Product, Company, Legal, Resources) — each column is an accordion with AnimatePresence-animated FiChevronDown rotation, and links rendered as anchors. Social links row renders FiGithub, FiLinkedin, FiTwitter icons from react-icons/fi. Language selector renders FiGlobe icon with a dropdown of 4 language options. Import from LandingFooter.css. Verify shared component exists before duplicating.

As a frontend developer, implement the TeamHeader section for the Team page using `th-*` CSS classes. Key features: (1) decorative background with `th-bg-glow--primary` and `th-bg-glow--secondary` divs; (2) team avatar displaying `TEAM_DATA.initials` ('AI') with `th-online-dot` indicator showing `activeCount`; (3) tier badge rendering `Zap` icon for Pro tier or `Star` for Basic, with dynamic class `th-tier-badge--pro`/`th-tier-badge--basic`; (4) meta row with Calendar icon + created date and Users icon + member/online count; (5) invite modal controlled by `useState(false)` for `showModal` — modal contains email input (`useState('')` for `inviteEmail`), role selector (`useState('Member')` for `selectedRole`) with `roles = ['Member','Contributor','Admin']` options, copy-link button using `navigator.clipboard.writeText(TEAM_DATA.inviteLink)` with `useState(false)` for `copied` (auto-resets after 2000ms, shows Check vs Copy icon), and `handleSendInvite` that clears email, closes modal, triggers `useState(false)` for `showToast` (auto-dismisses after 3000ms); (6) `handleKeyDown` handling Enter (submit) and Escape (close modal); (7) modal animated with framer-motion `AnimatePresence` + `motion.div`. Imports: lucide-react (UserPlus, Settings, Star, Zap, Calendar, Users, X, Copy, Check, Link2), framer-motion (motion, AnimatePresence).

As a frontend developer, implement the TeamSidebar section for the Team page using `tsb-*` CSS classes. Key features: (1) `useState(false)` for `drawerOpen` controlling mobile collapse — button toggles with `aria-expanded` and rotates `FiChevronDown` via `tsb-open` class; (2) `useState('self-cleaning-reactor')` for `activeProject` tracking selected project; (3) `teamProjects` array of 6 items each with id, name, status ('active'|'review'|'draft'|'filed'|'paused'), and statusLabel — rendered as clickable list items with `tsb-project-item--active` class when id matches `activeProject`; (4) team identity block showing 'AI' avatar and 'Artificial Inventor' / 'Pro Workspace' labels; (5) `quickStats` array (Members: 12, Projects: 6) rendered in `tsb-stats-grid` with accent color variant on the Projects stat; (6) 'New Project' button with FiPlus icon; (7) desktop: drawer always visible; mobile: drawer shows/hides via `tsb-drawer-open` class. Imports: react-icons/fi (FiChevronDown, FiPlus, FiFolder).

As a frontend developer, implement the TeamWorkspaceHeader section for the Team page using `twh-*` CSS classes. Key features: (1) `useState('in-progress')` for `status` with `STATUS_OPTIONS = [{key:'in-progress',label:'In Progress',color:'#F59E0B'},{key:'review',label:'In Review',color:'#818CF8'},{key:'ready',label:'Ready',color:'#10B981'}]`; (2) `useState(false)` for `statusMenuOpen` — button with `aria-haspopup` and `aria-expanded` toggles the dropdown; (3) click-outside detection via `useRef(null)` for `statusRef` and a `mousedown` event listener in `useEffect`; (4) `useState(null)` for `toast` with `useRef(null)` for `toastTimerRef` — `showToast(message)` clears existing timer, sets toast, auto-clears after 2800ms; (5) `handleStatusChange(key)` updates status, closes menu, calls `showToast`; (6) `handleAction(label)` triggers toast for Download/Archive actions; (7) project identity block with inline SVG document icon, project name 'Autonomous Sensor Array Patent Draft', and breadcrumb path (scenic-srs / Team Workspace / Documents); (8) action buttons: FiDownload, FiArchive, FiEdit3 (each calls `handleAction`), FiClock (last edited). Imports: react-icons/fi (FiFileText, FiClock, FiDownload, FiArchive, FiChevronDown, FiCheck, FiEdit3).

As a frontend developer, implement the TeamDiscussionThread section for the Team page using `tdt-*` CSS classes. This is the most complex section. Key features: (1) `USERS` array of 5 users each with id, name, initials, color, role ('owner'|'member'|'ai'), and presence ('online'|'away'|'offline'); (2) `INITIAL_MESSAGES` array of 5 message objects with id, userId, type ('human'|'ai'), text, time, reactions array ({emoji, count, active}), and isNew flag — managed by `useState(INITIAL_MESSAGES)` for `messages`; (3) message composer with `useState('')` for `draft`, toolbar buttons (FiBold, FiItalic, FiLink, FiPaperclip) that prepend markdown syntax to draft, and FiSend submit button; (4) `useState(false)` for `searching` toggling a search input with FiSearch; (5) `EMOJI_LIST` of 16 emojis for reaction picker — `useState(null)` for `reactionPickerOpen` tracking which message has picker open; (6) reaction toggle handler that increments/decrements count and flips `active` on the matching reaction; (7) `useRef` for `messagesEndRef` with `useEffect` auto-scrolling to bottom on messages change; (8) `useCallback` for send handler appending new message object; (9) AI messages rendered with distinct `tdt-msg--ai` styling and FiCpu icon; (10) role badge icons: FiShield for owner, FiUser for member, FiZap for AI; (11) framer-motion `AnimatePresence` + `motion.div` for new message entrance animation. Imports: framer-motion (motion, AnimatePresence), react-icons/fi (FiHash, FiSearch, FiMoreHorizontal, FiBold, FiItalic, FiLink, FiPaperclip, FiSend, FiZap, FiUser, FiShield, FiCpu).

As a frontend developer, implement the TeamMembersList section for the Team page using `tml-*` CSS classes. Key features: (1) `useState(MEMBERS)` for `members` — MEMBERS array of 6 objects each with id, name, email, role ('Owner'|'Editor'|'Viewer'), status ('online'|'away'|'offline'), initials, avatarBg (CSS gradient string), and joinedLabel; (2) `useState('')` for `search` filtering members by name or email case-insensitively; (3) `useState('All')` for `filter` with `FILTER_OPTS = ['All','Online','Owner','Editor','Viewer']` tab buttons; (4) `useState(null)` for `openMenu` tracking which member's `MoreHorizontal` context menu is open — `useRef(null)` for `menuRef` with `mousedown` outside-click handler; (5) `useState(null)` for `toast` with `useRef(null)` for `toastTimer` auto-clearing after timeout; (6) `CURRENT_USER_ROLE = 'Owner'` determining `canModify` (Owner or Editor); (7) `ROLE_ICON` map: Owner→Crown, Editor→Shield, Viewer→Eye (lucide-react); (8) `ROLE_CLASS` and `STATUS_MAP` maps for dynamic CSS classes; (9) context menu actions: change role (cycling through ROLES array updating `members` state), remove member (filtering from `members` state) — both trigger toast; (10) 'Invite Member' button with Plus icon; (11) member row renders: gradient avatar, name+email, role badge with icon, status dot+label, joined date, and MoreHorizontal menu button. Imports: lucide-react (Users, Crown, Shield, Eye, MoreHorizontal, UserMinus, UserCheck, Search, Check, Mail, Plus, X).

As a frontend developer, implement the TeamFooter section for the Team page. This reuses the `LandingFooter` component and `LandingFooter.css` stylesheet — the component may already exist from Subscription page (task 5c3092ff-c15a-46dd-95d5-c5afae96812d) or Dashboard page; reuse if available. Key features: (1) `useState(null)` for `openCol` accordion — `toggleCol(idx)` sets `openCol` to idx or null if already open; (2) `useState('en')` for `lang` language selector; (3) decorative parallax background with two `lf-parallax-orb` divs and CSS `--scroll` variable transform; (4) brand block with 'scenic-srs' name and tagline; (5) `footerColumns` array of 4 columns (Product, Company, Legal, Resources) each rendered with an accordion `<button className='lf-col-header'>` and `AnimatePresence` + `motion.ul` from framer-motion animating the link list; (6) social links: FiGithub, FiLinkedin, FiTwitter; (7) language picker with FiGlobe + FiChevronDown toggling a dropdown over `languages` array (en, en-ca, fr, es). Imports: framer-motion (motion, AnimatePresence), react-icons/fi (FiGithub, FiLinkedin, FiTwitter, FiGlobe, FiChevronDown).

As a frontend developer, implement the WorkspaceNavBar section for the Workspace page. This reuses the LandingNavbar component (may already exist from Landing/Subscription/Dashboard/Admin pages) importing LandingNavbar.css. Uses framer-motion useScroll/useTransform for scroll-driven bgOpacity (0→0.92) and blurVal (0→12px) over scrollY [0,120]. useState for menuOpen and scrolled (toggled at 80px scroll via passive event listener). Animated SVG logo with logoPathVariants (pathLength draw-on, stroke color transitions indigo #6366F1→emerald #10B981 on scroll). Hamburger with hamburgerLineVariants: line 0 rotates 45deg+y8, line 1 opacity 0, line 2 rotates -45deg. Spring drawer (x: 100%→0, stiffness 300 damping 30) with staggered drawerItemVariants (delay 0.05*i). Nav links: Features, How It Works, Pricing, Research.

As a frontend developer, implement the SettingsSidebar section for the Settings page. Navigation sidebar with useState for active (string, default from activeItem prop defaulting to 'profile'). Renders navGroups array (4 groups: Account [profile/security/password], Preferences [general/notifications/appearance/language], Billing [subscription/billing], Workspace [team/integrations]). Groups separated by ss-divider. Each group shows ss-group-label header and ul of nav items. Each item is an anchor tag with ss-nav-item--active class when active===item.id. onClick calls e.preventDefault() and setActive(item.id). Items with badge prop render ss-nav-badge span — notifications item has badge '3', subscription item has badge 'Pro' with badgeAccent: true (sia-badge--accent class). Icons from lucide-react: User, Shield, SlidersHorizontal, CreditCard, Bell, Palette, Link2, KeyRound, Globe, LogOut, FileText, Users at size 18 strokeWidth 1.8. Billing items link to /Subscription and /Billing; Team links to /Team.

As a frontend developer, implement the SettingsProfileSection for the Settings page. Form section with multiple useState hooks: firstName ('Alex'), lastName ('Chen'), email (readonly, 'alex.chen@artificialinventor.com'), bio (280-char max, BIO_MAX constant), language ('en-us'), photoSrc (null), dragging (boolean), copied (boolean), saved (boolean), saving (boolean). useRef for fileInputRef. Computes initials from firstName+lastName charAt(0) uppercased. Avatar upload zone: drag-and-drop handlers (handleDrop via useCallback, handleDragOver sets dragging true, handleDragLeave sets false) — drops image files, reads via FileReader.readAsDataURL, sets photoSrc. Hidden file input triggered by Upload button. Email field with Copy button: navigator.clipboard.writeText, sets copied true for 2s (Check icon replaces Copy icon). Bio textarea tracks length against BIO_MAX=280. Language dropdown over LANGUAGES array (10 options). handleSave: sets saving=true, simulates async, sets saved=true. handleReset: restores all defaults. Save button shows spinner while saving.

As a frontend developer, implement the SettingsAccountSecuritySection for the Settings page. Complex security form with three subsystems. (1) Password change: useState for currentPw, newPw, confirmPw (strings), showCurrent/showNew/showConfirm (Eye/EyeOff toggles), pwSaving, pwSuccess, pwError. getStrength(pw) function scoring: length≥8 (+1), ≥12 (+1), has uppercase (+1), has digit (+1), has special char (+1) → returns {score, label, color, pct} — Weak=#EF4444/20%, Fair=#F59E0B/40%, Good=#F59E0B/60%, Strong=#10B981/80%, Excellent=#10B981/100%. Strength bar rendered as CSS width pct. mismatch boolean when confirmPw!==newPw. (2) MFA toggle: useState mfaEnabled (false), mfaToggling — simulates async toggle with loading state. (3) Sessions: useState sessions (SESSIONS array of 4: Chrome/macOS current, Safari/iPhone, Firefox/Windows, Chrome/iPad), revokingId (string|null), revokeAllConfirm (boolean). DeviceIcon sub-component renders Monitor/Smartphone/Tablet lucide icon based on type. Revoke session removes from sessions array; revokeAll shows confirm UI before clearing non-current sessions.

As a frontend developer, implement the SettingsNotificationPreferencesSection for the Settings page. Notification toggles section with useState for prefs object (13 boolean keys: email_milestones, email_team_invites, email_filing_updates, email_prior_art_alerts, email_weekly_digest, inapp_claim_analysis, inapp_document_ready, inapp_collaboration, inapp_system_alerts, inapp_patent_expiry, sms_filing_confirmation, sms_urgent_deadlines, sms_team_mentions) initialized from initialState. useCallback for handleToggle updating single key via spread. userTier constant ('basic'|'pro') gates SMS section — SMS toggles disabled when userTier!=='pro'. Toggle sub-component: renders checkbox input + snp-toggle-track + snp-toggle-thumb spans. InfoTip sub-component: Info lucide icon with snp-tooltip span shown on hover (role='tooltip'). ToggleRow sub-component: renders label, desc, InfoTip with tooltip text from tooltips map, and Toggle. Three channel sections with icons: Mail (email), Bell (in-app), MessageSquare (SMS, locked behind pro gate with Lock icon + upgrade CTA). CheckCircle shown for saved state, Zap for pro upgrade prompt.

As a frontend developer, implement the SettingsAppearanceSection for the Settings page. Appearance customization section with useState for theme ('dark'), accentColor ('indigo'), fontSizeIdx (1). THEME_OPTIONS array: dark (Moon icon, sas-swatch-dark), light (Sun icon, sas-swatch-light), auto/System (Monitor icon, sas-swatch-auto) — rendered as radio group (name='theme') with visual swatch cards. ACCENT_COLORS array (7 entries: Indigo #6366F1, Emerald #10B981, Amber #F59E0B, Red #EF4444, Sky #38BDF8, Violet #8B5CF6, Rose #FB7185) — rendered as color dot buttons, selected shows Check icon overlay. FONT_SIZES array ['Small', 'Medium', 'Large'] with fontSizeMeta mapping to px values (heading: 15/18/22px, body: 12/14/16px) — rendered as segmented control updating fontSizeIdx. handleSave sets saved=true, resets after 2200ms. handleReset restores all defaults to dark/indigo/index 1. Section icon: Palette size 18 strokeWidth 1.8. Type icon from lucide-react for font size section header.

As a frontend developer, implement the SettingsSubscriptionBillingSection for the Settings page. Subscription and billing section with useState for currentPage (1). Paginated billing history: ALL_HISTORY array (10 invoices), PAGE_SIZE=5, totalPages=Math.ceil(length/PAGE_SIZE), pageRows sliced from startIdx=(currentPage-1)*PAGE_SIZE. StatusChip sub-component: renders colored chip with ssb-status-dot based on status 'paid'/'pending'/'failed'. BILLING_INFO object: tier 'Pro', amount '$49.00', nextBillingDate 'June 5, 2026', status 'Active', paymentMethod 'Visa •••• 4242'. isBasic/isPro booleans from CURRENT_TIER. Subscription card shows tier badge (Zap for Basic, Star for Pro), amount, nextBillingDate with Calendar icon, paymentMethod with CreditCard icon. Action buttons: RefreshCw (update payment), ArrowUpCircle/ArrowDownCircle (upgrade/downgrade conditional on tier), XCircle (cancel). Billing history table: id (INV-YYYY-NNN), date, description, amount columns + StatusChip. ChevronLeft/ChevronRight pagination controls with ExternalLink for invoice download.

As a frontend developer, implement the SettingsIntegrationAccessSection for the Settings page. Integration management section with useState for integrations object (initialIntegrations: uspto connected=true, google connected=true, apple connected=false) and per-integration editing/copying states. StatusBadge sub-component: renders sia-badge--connected or sia-badge--disconnected with sia-badge-dot. GoogleLogo and AppleLogo inline SVG sub-components (Google 4-path multicolor, Apple single-path). CopyButton sub-component: useState copied (false), navigator.clipboard.writeText, shows Check icon for 1800ms then reverts to Copy icon. USPTO integration card: shows apiKey 'USPTO-••••-••••-••••-4F2A', filingId 'AI-2026-0042', scopes array [eFiling/ApplicationStatus/DocumentRetrieval/PatentSearch] as chips, lastAuth, Edit2 and Trash2 action buttons, Link2Off disconnect button. Google card: shows connected email, GOOGLE_SCOPES chips [openid/profile/email/drive.readonly], disconnect button. Apple card: disconnected state with Connect button. Shield and Lock icons for security context headers.

As a frontend developer, implement the SettingsDangerZoneSection for the Settings page. Destructive actions section with three modal flows controlled by MODAL_TYPES enum (DELETE/EXPORT/DEACTIVATE) and MODAL_STEPS map. StepDots sub-component: renders step indicator dots with active/done/inactive states and variant-based color classes (danger=sdz-step-dot--active, warning=sdz-step-dot--active-warning, export=sdz-step-dot--active-export). DeleteModal sub-component: useState step (0–2), confirmText (string). Step 0: warning description + sdz-warning-box with AlertTriangle. Step 1: text input requiring exact string 'DELETE MY ACCOUNT' — isValid = confirmText.trim()===REQUIRED, Continue button disabled until valid. Step 2: success/done state. ExportModal sub-component: useState step (0–2), similar multi-step pattern with Download/FileDown icons and data export description. DeactivateModal: useState step (0–2), PauseCircle/ShieldOff icons, reactivation notice. Main section renders three danger cards (Delete Account/Trash2, Export Data/Download, Deactivate Account/PauseCircle) each opening respective modal. AlertOctagon section header icon. X button closes modals. WarningIcon functional component wrapping AlertTriangle.

As a frontend developer, implement the UsersHeader section for the Users page. Renders a page header with hardcoded totalUsers=1284 displayed in a uh-count-badge with a live uh-count-dot indicator. Includes a breadcrumb nav (Admin → Users) with an inline chevron SVG separator and aria-label. The main row has a title group (h1 'Users' + count badge) and an actions group with two controls: an Export CSV button (handleExportCSV creates a programmatic anchor element with data:text/csv URI for 'users_export.csv' and triggers click) and an Add User link (href='/Users') — both with inline SVG icons. A uh-gradient-bar accent line runs at the bottom. Apply UsersHeader.css.

As a frontend developer, implement the UsersSidebar section for the Users page. Uses useState for mobileOpen (false), openAccordions ({user_type: true, subscription: true, status: true, youth: false}), and selectedFilters ({}). Renders 4 filter accordion groups from filterGroups array: User Type (FiUsers, options: All/Youth/Independent/Professional), Subscription (FiCreditCard, options: All/Basic/Pro), Account Status (FiShield, options: Active/Pending/Suspended each with dot color), and Youth Parental Controls (FiAlertCircle, options: Has Consent/No Consent). toggleAccordion flips the open state per group id. toggleFilter adds/removes values from selectedFilters[groupId] array. totalActiveFilters aggregates all selected filter counts and displays as a usb-badge on the mobile toggle button. clearAllFilters resets selectedFilters to {}. Mobile toggle uses FiFilter + FiChevronDown with usb-chevron--open class rotation. Apply UsersSidebar.css with FiX for active filter chip removal.

As a frontend developer, implement the UsersSearchFilter section for the Users page. Uses useState for query, debouncedQuery, suggestions (array), showSuggestions, highlightedIdx (-1), sortBy ('name'), sortDir ('asc'), and view ('list'). Debounces query input via useRef debounceRef with 220ms setTimeout, updating debouncedQuery. Filters SAMPLE_USERS (8 entries: Alexandra Chen, Marcus Reid, Sofia Patel, James Okafor, Nadia Kowalski, Derek Tran, Priya Sharma, Liam Nguyen with tier labels and avatar colors) by name/email match against debouncedQuery, capped at 5 results. Dropdown suggestions use highlightMatch() to wrap matched substrings in <mark>. Keyboard navigation (ArrowUp/Down to move highlightedIdx, Enter to select, Escape to close) handled via onKeyDown. Click-outside closes dropdown via useRef dropdownRef + document event listener. Sort controls use SORT_OPTIONS array (name, email, signup, lastlogin) with a ChevronDown dropdown and ArrowUp/ArrowDown/ArrowUpDown icons toggling sortDir. View toggle switches between List (List icon) and Grid (LayoutGrid icon) views. X button clears query. Apply UsersSearchFilter.css.

As a frontend developer, implement the UsersTableSection section for the Users page. Uses useState for sortKey, sortDir, selectedRows (Set), and expandedRow. USERS_DATA has 10 entries (u-001 through u-010) with fields: id, name, email, userType (admin/pro/basic/guest), subscription (pro/basic/trial/none), status (active/pending/suspended/inactive), created, lastLogin, avatarColor. COLUMNS array has 7 columns (name, email, userType, subscription, status, created, lastLogin) with sortable flags. Renders a table with column headers using ChevronUp/ChevronDown/ChevronsUpDown sort icons. Each row has a checkbox (selectedRows Set toggled via useCallback), avatar circle with avatarColor background showing initials, status badge with color-coded class, subscription badge, userType badge, and an actions cell with 4 icon buttons: Eye (view), Pencil (edit), Ban (suspend toggle), Trash2 (delete) — all from lucide-react. Bulk action toolbar appears when selectedRows.size > 0 showing count with Download, ShieldOff, Users, Trash2 bulk actions. Row click expands an inline detail drawer. Apply UsersTableSection.css.

As a frontend developer, implement the UsersPagination section for the Users page. Uses useState for currentPage (1), rowsPerPage (25), and jumpValue (''). TOTAL_RESULTS is hardcoded to 248, ROWS_OPTIONS is [10, 25, 50, 100]. totalPages = Math.ceil(248 / rowsPerPage), startResult and endResult derived from currentPage × rowsPerPage. getPageNumbers(currentPage, totalPages) returns a smart array: if totalPages ≤ 7 returns all pages; otherwise uses three patterns based on currentPage proximity to start/end — inserting 'ellipsis-start' and 'ellipsis-end' sentinel strings rendered as &hellip; spans. Prev/Next buttons use FiChevronLeft/FiChevronRight from react-icons/fi and are disabled at boundaries. Active page button gets up-active class with aria-current='page'. Rows-per-page select triggers handleRowsChange which resets to page 1. Jump-to-page input field calls goToPage on Enter key via handleJumpKeyDown with parseInt validation. Apply UsersPagination.css.

As a frontend developer, implement the UsersDetailPanel section for the Users page. This is the most complex section — a full side-panel user detail view. Uses useState for activeTab and selectedUserId to switch between 3 SAMPLE_USERS: DEMO_USER (Alexandra Chen, Pro Inventor, Active, MFA enabled, 7 filings, 2 teams), YOUTH_USER (Jordan Patel, Youth Inventor, Basic, parental consent Verified, 1 filing), and SUSPENDED_USER (Marcus Williams, Admin, Suspended, 12 filings, 3 teams). Helper functions: getUserTypeBadgeClass (admin→udp-badge--admin, youth→udp-badge--youth, else udp-badge--user-type), getStatusBadgeClass (Active→udp-badge--active, Suspended→udp-badge--suspended, else udp-badge--pending), getSubBadgeClass (Pro→udp-badge--pro, else udp-badge--basic), getConsentClass (Verified/Pending/na). Panel header shows avatar with initials, name, id (USR-XXXXX), userType badge, status badge. Icons from react-icons/fi: FiUser, FiMail, FiShield, FiCreditCard, FiUsers, FiFileText, FiX (close), FiEdit2, FiTrash2, FiAlertTriangle, FiCheck, FiLock, FiClock, FiCalendar, FiMapPin. Tabbed sections include: Overview (stats: filingCount, draftCount, priorArtSearches), Security (MFA status, lastLogin with FiClock), Billing (paymentMethod type+last4+expiry, billingAddress with FiMapPin), Teams list (name + role per team). Youth users show parental consent row with getConsentClass styling. FiX closes the panel. Apply UsersDetailPanel.css.

As a frontend developer, implement the Footer section for the Users page. This reuses the LandingFooter component (already implemented as landing_footer_12 from Landing, fe6bad90 from Admin Dashboard, and document_footer_1 from Document) — note that the component should be reused rather than re-implemented. Uses useState for openCol (mobile accordion, null default) and lang (language selector, 'en' default). Renders 4 footer column groups — Product (Patent Drafting, Prior-Art Search, Claim Analysis, USPTO Filing, AI Mentor Chat), Company (About, Team, Workspace, Audit), Legal (Privacy Policy, Terms of Service, Compliance, Trademark Policy), Resources (Help Center, Community Discussions, Document Templates, Subscription Plans). Mobile accordion via toggleCol with AnimatePresence and FiChevronDown rotation. Social links: FiGithub, FiLinkedin, FiTwitter. Language dropdown with FiGlobe and languages array (en, en-ca, fr, es). Parallax background lf-parallax-bg at -0.3x with lf-parallax-orb--1/2. Apply LandingFooter.css.

As a frontend developer, implement the SubscriptionsNavbar section for the Subscriptions page. This reuses the LandingNavbar component (already built in task b9ecf99a-93c6-42bb-8b45-2dad2ea17b67) from '../styles/LandingNavbar.css'. The component uses useState for menuOpen and scrolled, useScroll and useTransform from framer-motion to animate background opacity (0→0.92) and blur (0→12px) over the first 120px of scroll. Includes SVG logo with animated pathLength draw-on effect via logoPathVariants, stroke color transition between #6366F1 (unscrolled) and #10B981 (scrolled), desktop nav links (Features, How It Works, Pricing, Research), and a mobile hamburger menu with three animated lines (rotate 45°/-45°, middle fades out) that opens a spring-animated drawer (x: 100%→0) with staggered drawerItemVariants per link. Note: component likely already exists from Landing page — verify before recreating.

As a frontend developer, implement the InfraHeader section for the Infrastructure page (imports InfraHeader.css). Uses useState for isRefreshing, lastUpdated (string), and secondsAgo (number). A setInterval fires every 30000ms incrementing secondsAgo and updating lastUpdated to '{n}s ago' or '{n}m ago'. handleRefresh sets isRefreshing=true, runs a 900ms timeout then resets secondsAgo to 0 and lastUpdated to 'Just now'. Renders a decorative ih-bg-accent layer with ih-bg-glow and ih-bg-scanline divs. Main content includes an ih-breadcrumb nav (Admin Dashboard / Infrastructure), an ih-title-row with a server-rack SVG icon and h1 'Infrastructure Monitoring' with accent span, a subtitle paragraph, and an ih-meta-row with an ih-status-badge (pulsing ih-status-dot, 'All Systems Operational') and an ih-updated span with clock SVG showing lastUpdated (aria-live='polite'). A refresh button triggers handleRefresh and shows a spinning icon when isRefreshing.

As a frontend developer, implement the InfraFooter section for the Infrastructure page by reusing the LandingFooter component (imports LandingFooter.css). Uses useState for openCol (accordion column index) and lang (default 'en'). Renders a parallax background with two lf-parallax-orb divs driven by CSS --scroll custom property. Brand block shows scenic-srs name and tagline. Four accordion columns (Product, Company, Legal, Resources) toggle via toggleCol(idx) with AnimatePresence. Bottom bar includes FiGithub/FiLinkedin/FiTwitter social links and a language dropdown (FiGlobe + FiChevronDown) with 4 language options (en/en-ca/fr/es). Note: this component already exists from Landing/Onboarding/Verification pages — verify and reuse rather than recreating.

As a frontend developer, implement the FilingsNavbar section for the Filings page. Uses useState for scrolled, notifOpen, profileOpen, drawerOpen, and notifs (array). useRef for notifRef and profileRef with a mousedown document listener to close dropdowns on outside click. useEffect scroll listener sets scrolled when scrollY > 10. navLinks array (6 items) includes Dashboard, Chat, Research, Workspace, Filings, Compliance — each with a lucide-react icon (LayoutDashboard, MessageSquare, Search, Briefcase, FileText, Shield). isActive() checks window.location.pathname. notifications array (4 items: n1 success, n2 warning, n3 info, n4 error) rendered in a dropdown panel with dotClass color map. clearNotifications() empties notifs state. Profile dropdown renders Settings, User, LogOut lucide icons. Mobile drawer uses Menu/X toggle with drawerOpen state. Bell icon shows unread badge count derived from notifs.length.

As a frontend developer, implement the ChatInputArea section for the Chat page. Component manages useState for inputValue, attachments (array), researchTags (array), activeModel ('local'/'grok'/'claude'), modelOpen, isTyping, and placeholderIdx. useEffect rotates placeholder text every 4s through PLACEHOLDER_TEXTS array when inputValue is empty. useCallback autoResize adjusts textarea height up to 160px. useEffect closes model dropdown on outside mousedown via modelRef. A demo useEffect sets isTyping true at 1.5s and false at 4.5s. Renders: TOOL_BUTTONS row (FiPaperclip file attach triggering hidden fileInputRef, FiSearch prior-art research tag, FiCode snippet insert), auto-resizing textarea with MAX_CHARS=4000 counter, attachment chip list with FiX remove, research tag chips, model selector dropdown (FiCpu Local LLM / FiZap Grok API / FiZap Claude API) with FiChevronDown toggle, and FiSend submit button. Enter key (no shift) triggers handleSend. Imports ChatInputArea.css.

As a frontend developer, implement the ResearchHero section for the Research page. The component uses useState for query string. Renders a full-screen hero with two background glow divs (rh-bg-glow, rh-bg-glow-secondary) and a CSS grid overlay. Six floatingIcons (FileText, ShieldCheck, Microscope, Globe) are absolutely positioned with CSS float animation. Badge reads 'Prior-Art Research Module' with a pulsing dot. H1 headline has an accent span. A controlled search form renders a Search icon, text input with placeholder, and submit button. Below the form, searchHints render as clickable chip buttons calling handleChipClick to populate the query. Stats row renders three items (90M+ Patents, 180 Countries, <8s Search Time) with accent styling on first item. Imports ResearchHero.css.

As a frontend developer, implement the ResearchToolbar section for the Research page. The component manages 8 pieces of state: database (select, DB_BADGE_MAP drives active badge pills), dateFrom/dateTo (date inputs defaulting to 2015-01-01 and 2026-05-05), classification (12-option dropdown), relevance (range slider 0–100, default 75), advancedOpen (boolean toggling advanced panel), status (4 options), inventorType (4 options), and chips array (removable keyword tags using FiX icon via removeChip callback). Primary filter row shows database select, date range inputs, and classification dropdown with FiChevronDown. Advanced panel slides open via advancedOpen toggle showing status, inventorType selects and the chips list. handleReset restores all state to defaults. FiSliders icon triggers advanced panel. Imports ResearchToolbar.css.

As a frontend developer, implement the ResearchPriorArtResults section for the Research page. Renders a list of 3+ patent result cards using useState for expanded card ID, useRef for scroll restoration, and useEffect for intersection-based reveal. Each card shows: patent ID badge, title, status pill (Granted/Pending color-coded), similarity percentage bar, filing/grant dates via FiCalendar, assignee via FiUser, USPC class, and an FiExternalLink anchor. Collapsed cards show truncated abstract; FiChevronDown/FiChevronUp toggle full abstract and examinerNote (rendered with FiAlertCircle icon). FiFileText icon anchors to patent details. Similarity bar width is driven by the similarity field (e.g. 87%, 74%). Imports ResearchPriorArtResults.css.

As a frontend developer, implement the ResearchWebResults section for the Research page. Uses useState for bookmarked IDs set and useMemo for filtered/sorted results. TYPE_COLORS map drives colored type badges (Research=#6366F1, Academic=#F59E0B, News=#10B981, Patent=#EF4444, Industry=#8B5CF6). Each result card renders: favicon fallback text badge, title as external link, url domain, snippet, date, type badge, and relevance percentage. FiBookmark / FiCheck icons toggle bookmark state per result ID. FiAlertCircle flags low-relevance results. FiRefreshCw triggers a mock re-fetch. FiGlobe icon precedes domain display. Results include ieeexplore, patents.google.com, microsoft.com, techcrunch, arxiv sources. Imports ResearchWebResults.css.

As a frontend developer, implement the ResearchAnalysisTimeline section for the Research page. Renders 5 decade-era timeline entries (1980s–2020s) from timelineData array. Each era has: yearLabel, decadeLabel, breakthroughLabel, patentCount, maxCount (for bar width = patentCount/maxCount * 100%), and 3 featured patents with emoji icons, number, title, and assignee. Uses useState for activeEra (expanded accordion), useRef for container, and useEffect with IntersectionObserver for scroll-triggered reveal of each era row. Alternating variant ('primary'/'secondary') drives left/right layout or color accent. Patent count bar animates width on reveal. Clicking an era expands the 3 patent cards beneath. Imports ResearchAnalysisTimeline.css.

As a frontend developer, implement the ResearchPatentabilityGauge section for the Research page. Features an SVG circular gauge (RADIUS=110, CIRCUMFERENCE=2π×110) using stroke-dasharray/stroke-dashoffset. The gauge arc covers 75% of the circle (gaugeArc = CIRCUMFERENCE * 0.75). Score arc offset is computed as CIRCUMFERENCE - (SCORE/100)*gaugeArc. A secondary confidence band arc spans CONFIDENCE_LOW=64 to CONFIDENCE_HIGH=81 using confDashOffset. Uses IntersectionObserver (threshold 0.3) to trigger animated state; counter animates 0→73 via requestAnimationFrame with cubic ease-out over 1800ms. CSS custom props --rpg-dash-offset and --rpg-conf-offset drive arc transitions. Five factor rows (Prior-Art Overlap, Claim Novelty, Non-Obviousness, Utility, Clarity) each render a colored progress bar and score. getScoreClass/getRiskLabel derive 'moderate' label at score 73. Imports ResearchPatentabilityGauge.css.

As a frontend developer, implement the ResearchSimilarPatents section for the Research page. Renders a horizontally scrollable carousel of patent cards using useRef for the scroll container and useCallback for prev/next navigation via FiChevronLeft/FiChevronRight buttons. Each of 3+ patent cards shows: rank badge, similarity percentage, category tag (AI/ML, NLP, Search), title, assignee, filing date via FiCalendar, claim count, and truncated abstract. An FiArrowRight detail button or card click opens a modal/drawer overlay using useState for selectedPatent. The detail panel (FiX close button) shows full abstract and keyClaimsList as a numbered list. FiExternalLink links to patent URL. Imports ResearchSimilarPatents.css.

As a frontend developer, implement the ResearchKeywordTrends section for the Research page. Renders a tag-cloud of 26 keywords sized by sizeStyles map (xl/lg/md/sm/xs) affecting fontSize (12px–28px), padding, and countSize. Uses useState for activeKeyword (toggle on click via handleKeywordClick useCallback). Active keyword highlights the selected tag and computes matchCount = round(activeData.count * 0.73) for display. handleReset useCallback clears activeKeyword. A legend row renders 4 legendDots (Rare/Common/Frequent/Dominant) with corresponding size indicators. Header includes 'Keyword Analysis' label, title 'Technical Keyword Trends', and subtitle. Inactive keywords dim when another is active. Imports ResearchKeywordTrends.css.

As a frontend developer, implement the ResearchSaveExport section for the Research page. Uses useState for includeAnalysis toggle (FiBarChart2 checkbox), loadingKey (tracks which of 4 action buttons is loading), toast ({message, type}), toastExit (boolean for exit animation), and visible (scroll reveal). IntersectionObserver (threshold 0.1) sets visible=true for CSS reveal class. Four action buttons (save, pdf, csv, share) each call handleAction(key, label) which sets loadingKey, waits 1400–2000ms random delay, then clears loadingKey and calls showToast. showToast manages TOAST_DURATION=3200ms auto-dismiss with dismissToast triggering toastExit animation before null. Toast renders FiCheckCircle (success) or FiAlertCircle (error). Action icons: FiSave, FiFileText, FiDownload, FiLink2. Imports ResearchSaveExport.css.

As a frontend developer, implement the ResearchCTA section for the Research page. Uses useRef for rootRef and useEffect with IntersectionObserver (threshold 0.15) to add 'rcta-visible' CSS class triggering entrance animation, then disconnects observer. Background renders 3 animated orb divs (rcta-bg-orb--1/2/3) and a grid overlay. Badge reads 'Research Complete' with pulsing rcta-badge-dot. H2 headline has rcta-headline-accent span on 'Patent?'. Two CTA buttons: rcta-btn-draft links to /Document with inline SVG plus icon, rcta-btn-consult links to /Dashboard with inline SVG calendar icon. Stats strip renders 3 items (12K Patents Filed, 94% Approval Rate, 48h Avg. Draft Time) with highlight suffix characters. Imports ResearchCTA.css.

As a frontend developer, implement the ResearchFooter section for the Research page by reusing the LandingFooter component (may already exist from Landing or Admin Dashboard pages). Uses useState for openCol (accordion index) and lang (language selector, default 'en'). Renders 4 footerColumns (Product, Company, Legal, Resources) with mobile accordion via toggleCol. Each column header is a button with FiChevronDown. Social links row renders FiGithub, FiLinkedin, FiTwitter via FiIcon components. Language selector dropdown using FiGlobe and FiChevronDown toggles 4 language options. Background has parallax orbs (lf-parallax-orb--1/2) with CSS transform using --scroll custom prop. Brand section shows 'scenic-srs' name and tagline. AnimatePresence from framer-motion wraps accordion content. Imports LandingFooter.css.

As a frontend developer, implement the DocumentNavbar section for the Document page. This reuses the LandingNavbar component (from LandingNavbar.css/LandingNavbar pattern) — verify it already exists before recreating. Implements scroll-aware glassmorphism navbar using useScroll and useTransform from framer-motion to animate bgOpacity [0→0.92] and blurVal [0→12px] over scrollY [0,120]. Uses useState for menuOpen and scrolled (threshold 80px). Animated SVG logo with logoPathVariants (pathLength draw-on animation, 0.8s easeOut) that changes stroke color from #6366F1 to #10B981 on scroll. Hamburger with three motion lines using hamburgerLineVariants: line 0 rotates 45deg+y8, line 1 fades, line 2 rotates -45deg+y-8. Mobile drawer with drawerVariants (spring stiffness 300/damping 30, x: 100%→0) and staggered drawerItemVariants (0.05*i delay). Nav links: Features→/Landing#features, How It Works, Pricing, Research→/Research.

As a frontend developer, implement the DocumentFooter section for the Document page. This component reuses the LandingFooter component (imported via LandingFooter.css) — note that this component already exists from the Landing page (landing_footer_12) and the Admin Dashboard page (fe6bad90-50c1-47eb-8993-27c07e0c5903) and should be reused rather than re-implemented. The footer uses useState for openCol (mobile accordion, null default) and lang (language selector, default 'en'). Renders 4 column groups — Product (Patent Drafting /Dashboard, Prior-Art Search /Research, Claim Analysis /Patentability, USPTO Filing /Filing, AI Mentor Chat /Chat), Company (About /Landing, Team, Workspace, Audit), Legal (Privacy Policy, Terms of Service, Compliance, Trademark Policy), and Resources (Help Center /Onboarding, Community Discussions, Document Templates /Document, Subscription Plans). Mobile accordion uses toggleCol to toggle openCol index, with AnimatePresence animating link list visibility and FiChevronDown rotation. Social links row renders FiGithub, FiLinkedin, FiTwitter from react-icons/fi. Language selector uses FiGlobe icon with a languages array (en, en-ca, fr, es) dropdown. Parallax background layer (lf-parallax-bg at -0.3x scroll) with lf-parallax-orb--1/2 decorative orbs. Apply LandingFooter.css.

As a frontend developer, implement the WorkspaceSidebar section for the Workspace page. Uses useState for openGroups ({projects: true, teams: true, favorites: false}) and drawerOpen (bool). toggleGroup(key) flips individual group collapse state. Renders three accordion groups: My Projects (myProjects array: 4 items with FiFolder, badge variants: null/'new'/number, active highlight, FiMoreHorizontal context menu), My Teams (myTeams array: 3 items with FiUsers, 'new' badge, active), Favorites (favorites array: 5 items with individual icons: FiSearch/FiMessageSquare/FiFileText/FiShield/FiTag). FiChevronRight rotates on wsb-chevron-open class. Top CTA button 'New Project' → /Document with FiPlus. Mobile drawer toggle via FiMenu/FiX with drawerOpen state and closeDrawer on overlay click. Bottom links: FiSettings, FiHelpCircle, FiAlertCircle, FiBookOpen, FiCheckSquare. Import WorkspaceSidebar.css.

As a frontend developer, implement the LandingFooter section for the Workspace page. This reuses the LandingFooter component (may already exist from Landing/Subscription/Dashboard/Admin Dashboard pages). Uses useState for openCol (nullable int accordion state) and lang ('en'). Renders parallax background with lf-parallax-bg div containing lf-parallax-orb--1 and lf-parallax-orb--2, CSS --scroll variable translateY(-0.3px). lf-brand section with 'scenic-srs' logo text and tagline. 4 footerColumns (Product/Company/Legal/Resources) as accordion lf-col divs with FiChevronDown toggle buttons and AnimatePresence-driven link lists. Social row: FiGithub, FiLinkedin, FiTwitter. Language selector with FiGlobe and languages dropdown (en/en-ca/fr/es). Import LandingFooter.css.

As a frontend developer, implement the DiscussionNavbar section for the Discussion page by reusing the LandingNavbar component (may already exist from Landing, Chat, and other pages). Component uses useState for menuOpen/scrolled, useScroll and useTransform from framer-motion to animate bgOpacity (0→0.92) and blurVal (0→12) over scrollY 0–120px range. Animated SVG logo uses logoPathVariants (pathLength draw-on, 0.8s easeOut), stroke color transitions between #6366F1 and #10B981 based on scroll state. Hamburger-to-X via hamburgerLineVariants with per-line rotate/y/opacity transforms. Mobile drawer uses drawerVariants (spring stiffness 300/damping 30) and staggered drawerItemVariants (0.05*i delay). Nav links: Features, How It Works, Pricing, Research. Imports LandingNavbar.css.

As a frontend developer, implement the AuditTopBar section for the Audit page. Uses useState for dropdownOpen, filterOpen, and activeFilters array. useRef for dropdownRef with useEffect adding/removing mousedown outside-click listener when dropdownOpen is true. Renders brand SVG logo (two paths + circle, stroke #6366F1) linking to /Landing and 'scenic-srs' name. Breadcrumb nav shows Admin → Audit & Compliance using FiChevronRight separator. Right actions include: live status indicator with pulsing atb-status-dot, FiFilter button toggling filterOpen panel showing 5 filterOptions (Filings, Team Activity, Compliance, Incidents, Exports) as toggleable chips via toggleFilter/clearFilters callbacks, FiDownload export button calling handleExport, FiSettings link, and FiUser avatar dropdown (dropdownRef) with FiLogOut and FiShield menu items. FiCheck marks active filters; FiX clears them. FiAlertTriangle used for warning states. Imports AuditTopBar.css.

As a frontend developer, implement the SubscriptionsHero section for the Subscriptions page using '../styles/SubscriptionsHero.css'. This is a purely static section with no useState hooks. Renders a decorative animated background with sh-bg-gradient, sh-grid, and three sh-orb divs (sh-orb-1/2/3). Content includes: an sh-badge with animated sh-badge-dot and text 'Artificial Inventor Subscription Plans'; an h1 with sh-headline-gradient span 'Choose Your Path to Innovation'; a subheadline paragraph. The CTA row contains two buttons (primary 'Start Free Trial' href='/Signup', secondary 'Explore Plans') using inline ArrowRightIcon and LayersIcon SVG components. A 4-item sh-trust row renders trustItems array ('No credit card required', 'Cancel anytime', 'USPTO-compliant drafts', 'Local GPU infrastructure') each with a custom CheckIcon SVG (circle + polyline). Below that, a 3-card depth stack renders depthCards array (Basic/Free, Pro/$29 mo, Team/$79 mo) with sh-card--basic/pro/team modifier classes for stacked visual depth effect.

As a frontend developer, implement the SubscriptionsTierComparison section for the Subscriptions page using '../styles/SubscriptionsTierComparison.css'. The component uses useState for isAnnual (false) and activeMobileTier ('basic'). proDisplayPrice toggles between $29/mo and $23/mo based on isAnnual; proAnnualNote conditionally renders 'Billed $276/year — save $72'. Renders: a section header with eyebrow, h2 with accent span, and subtitle; a billing toggle row with 'Monthly'/'Annual' labels, an aria-role='switch' button (stc-toggle-track with stc-toggle-thumb) toggling isAnnual, and a 'Save 20%' badge; a mobile-only tier tab row with 'Basic' and 'Pro' buttons toggling activeMobileTier. Two plan cards render side-by-side (desktop) or stacked by activeMobileTier (mobile): Basic card (stc-card--basic) showing Free price, 5 basicFeatures with CheckIcon SVGs, and a 'Get Started Free' CTA; Pro card (stc-card--pro) showing proDisplayPrice, proAnnualNote, 5 proFeatures with CheckIcon SVGs, a 'Most Popular' badge, and an 'Upgrade to Pro' CTA. Each CheckIcon is an inline SVG with a polyline path.

As a frontend developer, implement the SubscriptionsFeatureMatrix section for the Subscriptions page using '../styles/SubscriptionsFeatureMatrix.css'. The component uses useState for activeCategory ('all') and openGroups (Set of expanded group IDs). CATEGORIES array has 5 filters (all, ai, filing, team, support) each with a hex color and dot color. FEATURE_GROUPS has 4 groups (AI Features with 🤖, Filing with 📄, and others) each containing features with name, desc, and basic/pro cell descriptors of type 'check', 'cross', or 'text' (with optional highlight flag). Imports FiCheck, FiX, FiChevronDown, FiCpu, FiFileText, FiUsers, FiHeadphones, FiSearch, FiShield from react-icons/fi. Renders: a category filter tab bar where clicking a tab sets activeCategory and filters visible groups; a feature matrix table/accordion where each group row is toggleable via openGroups Set (add/delete); each feature row shows the feature name and desc, a Basic tier cell (FiCheck, FiX, or text value), and a Pro tier cell (FiCheck, FiX, or highlighted text). Highlight cells get a distinct accent class.

As a frontend developer, implement the SubscriptionsPricingScale section for the Subscriptions page using '../styles/SubscriptionsPricingScale.css'. The component uses useState for isAnnual (false), projectIndex (2), visible (false), a sectionRef wired to an IntersectionObserver for CSS entrance animation. Imports Line from 'react-chartjs-2' and registers ChartJS with CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler. PROJECT_STEPS array [1,2,3,5,8,12,20,30,50] drives a range slider (projectIndex 0–8) that sets numProjects. basicPPM and proPPM toggle between monthly ($29/$79) and annual ($19/$55) rates. Derived stats: costPerProjectBasic (capped at 3 projects for Basic), costPerProjectPro, attorneyCostForProjects (numProjects × $350 × 20 hours), savingsVsAttorney. chartData has 3 datasets: 'Attorney (est. monthly)' in #EF4444, 'Artificial Inventor Basic' in #818CF8, 'Artificial Inventor Pro' in another color; all use tension: 0.3 and fill. Renders: isAnnual toggle; project count slider; stat cards showing per-project costs and attorney savings; and the Line chart with responsive options.

As a frontend developer, implement the SubscriptionsTeamPlans section for the Subscriptions page using '../styles/SubscriptionsTeamPlans.css'. The component uses useState for activeRole ('owner'), visible (false), activeScenario (0), and a sectionRef IntersectionObserver for entrance animation. Imports motion, AnimatePresence from framer-motion and FiUsers, FiEdit3, FiEye, FiShield, FiZap, FiMessageSquare, FiLock, FiUserPlus from react-icons/fi. Renders: a 3-role tab selector (owner/editor/viewer) from the roles array — each with emoji icon, name, colorClass, desc, and 4 permissions list items; an AnimatePresence block animates the active role panel in/out. Below that, a 4-item collabFeatures grid renders each feature's emoji icon, title, desc, and 'Pro Exclusive'/'Pro & Basic' tag badge. A scenarios carousel (3 items) shows quote, emoji, who, members, and tier badge with prev/next navigation updating activeScenario. An audit log preview renders auditEntries with initials avatar, role badge, action text, and timestamp — styled as a live activity feed.

As a frontend developer, implement the SubscriptionsUpgradeGuide section for the Subscriptions page using '../styles/SubscriptionsUpgradeGuide.css'. The component uses useState for activeExample (null or example id) and a sectionRef IntersectionObserver for visible state. Imports FiCheck, FiArrowRight, FiZap, FiUsers, FiShield, FiClock, FiGitBranch from react-icons/fi. Renders: a 5-item proFeatures list where each feature has an icon component (FiGitBranch, FiZap, FiUsers, FiShield, FiClock), name, desc, and a FiCheck badge; a 4-item useCaseExamples grid (attorney, startup, team, professional) where each card shows emoji icon with iconClass modifier (sug-example-icon--attorney/startup/team/filing), name, Pro Use Case badge, detail paragraph, and 2–3 tag chips. Clicking a card sets activeExample to its id for an expanded/highlighted state (or null to collapse). Tags for each example map to proFeature names (e.g., 'Multi-Model Verification', 'Full USPTO Filing', 'Unlimited Team Members') for cross-referencing. A sticky CTA button 'Upgrade to Pro' links to '/Subscriptions'.

As a frontend developer, implement the SubscriptionsFAQ section for the Subscriptions page using '../styles/SubscriptionsFAQ.css'. The component uses useState for openId (null — tracks which FAQ accordion is expanded). Imports FiChevronDown, FiRepeat, FiArchive, FiGift, FiCpu, FiXCircle, FiBook, FiInfo from react-icons/fi. faqItems array has 6 entries (change-tiers, downgrade-projects, free-trial, multi-model, and others), each with: id, icon component reference, question string, callout object ({text, variant: 'highlight'|'secondary'|'accent'|'primary'}), and answer array of 2 paragraph strings. Renders: a section header; a list where each item is a button toggling openId. Active item expands to show: a callout badge styled per variant, and the 2 answer paragraphs. The icon prop (e.g., FiRepeat, FiGift) renders as a react-icon next to the question. FiChevronDown rotates 180° when open. Collapsed items show only the icon + question + chevron.

As a frontend developer, implement the SubscriptionsCTA section for the Subscriptions page using '../styles/SubscriptionsCTA.css'. The component uses useState for email (''), submitted (false), and submitting (false). Imports FiArrowRight, FiCheck, FiMail from react-icons/fi. handleEmailSubmit validates email is non-empty, sets submitting for 800ms via setTimeout, then sets submitted true. Renders: a decorative background with three scta-bg-orb divs and a scta-shimmer-line; a scta-badge with animated scta-badge-dot and 'Start for Free Today'; h2 with scta-headline-accent span 'Patent Your Invention?'; a reassurance paragraph; a 4-item scta-trust row (14-day free trial, No credit card required, Cancel anytime, USPTO-ready documents) each with FiCheck icon; a CTA button row with primary 'Start Free Trial' (href='/Signup') with FiArrowRight and secondary 'View All Features' (href='/Subscriptions'); and an email capture subsection: when submitted=false, renders a form with FiMail-prefixed email input and submit button (disabled during submitting); when submitted=true, replaces form with a success div containing FiCheck and confirmation text.

As a frontend developer, implement the SubscriptionsFooter section for the Subscriptions page. This reuses the LandingFooter component (already built in task 4b17a12b-3871-4ff9-872f-4135881c9569) from '../styles/LandingFooter.css'. The component uses useState for openCol (accordion index) and lang (language selector, default 'en'). Renders a parallax background with two lf-parallax-orb divs using CSS var(--scroll) transform. Content includes: brand block with 'scenic-srs' name and tagline; four footerColumns (Product, Company, Legal, Resources) rendered as AnimatePresence accordion buttons with FiChevronDown; social links row (FiGithub, FiLinkedin, FiTwitter); and a language picker with 4 locales (en, en-ca, fr, es) and FiGlobe icon. Note: component likely already exists from Landing page — verify before recreating.

As a frontend developer, implement the BillingNavbar section for the Billing page. This reuses the shared LandingNavbar component (already created in task b9ecf99a-93c6-42bb-8b45-2dad2ea17b67). The component uses useScroll/useTransform from framer-motion to drive bgOpacity (0→0.92) and blurVal (0→12) over scrollY range [0,120], a scrolled boolean state toggled at 80px via passive scroll listener, and an animated SVG logo with logoPathVariants (pathLength draw-on, duration 0.8s) with stroke color transitioning between #6366F1 and #10B981 on scroll. Desktop nav links: /Landing#features, /Landing#how-it-works, /Landing#pricing, /Research. Mobile hamburger uses three-line AnimatePresence with hamburgerLineVariants (rotate 45/-45, middle line opacity 0). Mobile drawer uses spring drawerVariants (x: 100%→0, stiffness 300, damping 30) with staggered drawerItemVariants (delay 0.05*i). Import from LandingNavbar.css. Verify shared component exists before creating a Billing-specific copy.

As a frontend developer, implement the InfraSidebar section for the Infrastructure page (imports InfraSidebar.css). Uses useState for activeId ('overview'), collapsed (bool), and mobileOpen (bool). Defines navSections array with 3 groups — Monitoring (Overview/FiGrid, GPU Cluster/FiCpu with badge '4x B300'/ok, System Health/FiActivity), Resilience (Failover/FiShield with badge 'Ready'/ok, Backup & Redundancy/FiDatabase), Operations (Alerts/FiBell with badge '3'/alert, Scaling/FiTrendingUp with badge '2'/warn, Logs/FiFileText). handleNavClick sets activeId, closes mobile drawer, and calls scrollIntoView({behavior:'smooth'}). toggleCollapse and toggleMobile toggle their respective states. Root aside className combines 'isb-root', 'isb-root--collapsed', 'isb-mobile-open' conditionally. Bottom systemStats strip shows 4 metrics (Cluster Uptime 99.94%/ok, GPU Temp Avg 68°C/warn, Active Jobs 12/ok, Queue Depth 47/warn). Imports react-icons/fi: FiGrid, FiCpu, FiShield, FiDatabase, FiBell, FiActivity, FiTrendingUp, FiFileText, FiChevronLeft, FiMenu.

As a frontend developer, implement the FilingsSidebar section for the Filings page. Uses useState for activeFilter ('all'), activeSort ('date'), sortAsc (false), mobileOpen (false). STATUS_FILTERS array has 5 items (all/47, pending/12, submitted/18, approved/11, rejected/6) each with react-icons/fi icon, dotClass, count badge, and dataStatus. Clicking a filter sets activeFilter. SORT_OPTIONS array (date/FiCalendar, status/FiFlag, jurisdiction/FiGlobe); handleSortClick toggles sortAsc if same sort clicked, else sets new activeSort. Sort direction renders FiArrowUp/FiArrowDown conditionally. QUICK_LINKS array (Research/FiBarChart2, Documents/FiFileText, Team/FiUsers, Compliance/FiCheckCircle) render as anchor links. Mobile toggle button shows FiList icon and FiChevronDown (rotates on open) to collapse the fsb-drawer. User/team indicator section renders 'AI' avatar circle. FiPlus button for new filing CTA.

As a frontend developer, implement the FilingsHeader section for the Filings page. Uses AnimatedNumber subcomponent that runs a requestAnimationFrame count-up over 600ms using performance.now() and easing logic, driven by a target prop. stats array has 4 items: Total Filings (148, delta '+12 this month', deltaType 'up'), Pending Review (23, '8 awaiting USPTO', 'neutral'), Approved (97, '+5 this week', 'up'), Rejected (28, '-2 vs last month', 'down'). iconMap maps each stat key to a dedicated SVG icon component (TotalIcon, PendingIcon, ApprovedIcon, RejectedIcon — all defined as inline SVG functional components). PlusIcon renders a '+' SVG for the 'New Filing' CTA button. HomeIcon (12px) used in breadcrumb nav. deltaType drives color class (up=green, down=red, neutral=muted). Each stat card renders icon, AnimatedNumber, label, and delta badge.

As a frontend developer, implement the FilingsFilterBar section for the Filings page. Uses useState for search (string), jurisdiction (string), dateFrom (string), dateTo (string), and selectedStatuses (object with 5 boolean keys: pending/submitted/approved/rejected/draft). toggleStatus and removeStatusPill use useCallback. STATUS_OPTIONS array (5 items) each with key, label, dotClass. JURISDICTION_OPTIONS array (4 items: all/USA/Canada/International). activePills derived from filtered STATUS_OPTIONS where selectedStatuses[key] is true. activeFilterCount sums activePills.length + hasJurisdiction + (hasDateFrom||hasDateTo) + hasSearch. clearAll() resets all state. Row 1 renders: FiSearch input for keyword search, jurisdiction select with FiGlobe + FiChevronDown, date range inputs (dateFrom/dateTo). Row 2 renders status toggle chips from STATUS_OPTIONS with colored dots. Active filter pills render below with FiX remove buttons. FiSliders icon and activeFilterCount badge shown when hasAnyFilter is true.

As a frontend developer, implement the FilingsStatusCards section for the Filings page. Defines useCountUp custom hook using useEffect with requestAnimationFrame, ease-out-cubic formula (1 - Math.pow(1-progress, 3)), and a configurable delay param for staggering. CARDS array has 4 items (total/pending/approved/rejected) each with variant, label, target count, trend string, trendType, and trendDelay. Each card renders an inline SVG icon component (IconTotal, IconPending, IconApproved, IconRejected — document/clock/checkmark/X SVGs), animated count from useCountUp with per-card delay, label, and trend row with TrendArrowUp/TrendArrowDown/TrendNeutral SVG components. IntersectionObserver on the cards container triggers a started ref so count-up only fires on scroll-into-view. Cards use variant-driven CSS classes for accent color theming.

As a frontend developer, implement the FilingsList section for the Filings page. Uses useState for sortField, sortDir ('asc'|'desc'), currentPage, openMenuId. useRef for menuRefs with a mousedown document listener closing open context menus. FILINGS_DATA array has 10 items each with id, title, date, jurisdiction ({flag emoji, label}), and status ('pending'|'approved'|'rejected'|'expired'). STATUS_LABELS maps status keys to display strings with color-coded badge classes. Sortable columns: clicking a header cycles sortDir and sets sortField; FiChevronUp/FiChevronDown icons indicate sort state. FiMoreVertical button per row opens a context menu (openMenuId state) with ACTIONS array items: View Details (FiEye, /Filing), Edit Filing (FiEdit2, /Filing), Download PDF (FiDownload), divider, Resubmit (FiRefreshCw), Delete (FiTrash2, danger styling). Pagination renders FiChevronLeft/FiChevronRight with page number buttons. FiFileText icon shown for empty state. Row click navigates to /Filing.

As a frontend developer, implement the FilingsDetailPanel section for the Filings page. Uses useState for activeTab ('overview'|'claims'|'documents'|'timeline'|'compliance') and isOpen (panel open/close toggle). Imports FiFileText, FiChevronDown, FiDownload, FiX, FiInfo, FiList, FiPaperclip, FiClock, FiShield from react-icons/fi. filingData object contains: id ('US-2026-00847-NP'), title, status ('approved'), abstract paragraph, metadata object (filingDate, jurisdiction, entityType, filingFee, examiner, applicationNo), claims array (5 items with num and text), documents array (5 items with name, size, type), and timeline array with label/date/status entries. Tab navigation renders 5 tabs with corresponding FI icons. Overview tab shows abstract + metadata key-value grid. Claims tab lists numbered claims. Documents tab renders download rows with FiDownload buttons. Timeline tab renders chronological status entries. FiX closes the panel. Status badge styled per 'approved' value.

As a frontend developer, implement the FilingsFooter section for the Filings page. This component reuses the LandingFooter component (imports '../styles/LandingFooter.css') — it may already exist from the Landing, Subscription, or other pages. Uses useState for openCol (accordion mobile columns) and lang (language selector, default 'en'). footerColumns array has 4 columns: Product (5 links to /Dashboard, /Research, /Patentability, /Filing, /Chat), Company (4 links), Legal (4 links), Resources (4 links). socialLinks render FiGithub, FiLinkedin, FiTwitter from react-icons/fi. languages array (en, en-ca, fr, es) drives AnimatePresence dropdown from framer-motion. Decorative lf-parallax-bg with two orbs uses CSS --scroll variable. Mobile columns toggle via toggleCol(idx) with FiChevronDown icon. AnimatePresence wraps collapsible link lists per column.

As a frontend developer, implement the ComplianceNavbar section for the Compliance page. This reuses the `LandingNavbar` component and `LandingNavbar.css` stylesheet (may already exist from Landing/Subscription/Team pages — reuse if available). Key features: (1) `useState(false)` for `menuOpen` and `useState(false)` for `scrolled`; (2) framer-motion `useScroll` + `useTransform` animating `bgOpacity` from 0→0.92 and `blurVal` from 0→12 as `scrollY` goes 0→120px; (3) passive scroll `useEffect` setting `scrolled` when `window.scrollY > 80`; (4) animated SVG logo with `motion.path` using `logoPathVariants` (pathLength 0→1, 0.8s easeOut), stroke color transitioning `#6366F1`→`#10B981` on scroll; (5) `navLinks` array: Features→/Landing#features, How It Works→/Landing#how-it-works, Pricing→/Landing#pricing, Research→/Research; (6) hamburger with 3 `motion.div` lines using `hamburgerLineVariants` (line 0: rotate 45°+y8, line 1: opacity 0, line 2: rotate -45°+y-8); (7) mobile drawer with `drawerVariants` (spring stiffness 300, damping 30) and staggered `drawerItemVariants` (delay 0.05*i). Imports: framer-motion (motion, AnimatePresence, useScroll, useTransform).

As a frontend developer, implement the DocumentHero section for the Document page. Static hero section with blueprint-themed decorative elements: dh-blueprint grid pattern div, dh-glow orb, four dh-corner markers (tl/tr/bl/br), and a dh-ref-number span showing 'SRS-AI-001 / REV 1.0'. Content area includes: icon row with FileText lucide icon + document type label ('Software Requirements Specification') and status dot with 'Active Document — Initial Draft' text. H1 headline 'System Requirements Document: Artificial Inventor' with dh-headline-sub span. Subheadline paragraph. Metadata chips row mapping over 4 items [{Tag, Version, 1.0}, {Calendar, Date, May 5 2026}, {User, Author, ALGO Development Team}, {Hash, Doc ID, SRS-AI-001}]. Quick nav buttons row mapping over 4 items with variants dh-nav-btn--primary (Layers icon→#functional-requirements), dh-nav-btn--secondary (Cpu→#architecture), dh-nav-btn--accent (Shield→#constraints), dh-nav-btn--ghost (ArrowRight→#table-of-contents).

As a frontend developer, implement the DocumentTableOfContents section for the Document page. Interactive TOC with useState for expandedSection (string|null) and searchQuery (string). Uses useMemo to filter tocData array (10 top-level sections, each with subsections) based on searchQuery matching title or subsection titles. FiSearch input with controlled value filters visible entries in real time. FiBookOpen header icon and FiList section count badge. Each top-level section renders as an expandable accordion item with FiChevronDown (animated open/close state) toggled via onClick setting expandedSection. Subsections revealed on expand show number, title, FiArrowRight link icon, and anchor href. Section numbers displayed as badges. Handles edge cases: search with no results shows empty state. All anchors navigate to #anchor-id fragment links within the Document page.

As a frontend developer, implement the DocumentIntroduction section for the Document page. Static content section with id='introduction'. Layout uses di-grid for two-column subsection arrangement. Section heading row has di-section-accent bar, di-section-number 'Section 1', and h2 'Introduction'. Four subsections (1.1 Purpose, 1.2 Scope, 1.3 Intended Audience, 1.4 Definitions & Acronyms), each with di-subsection-accent bar, di-subsection-number, and h3 title. 1.3 renders audienceTags array (7 tags: Project Stakeholders, ALGO Development Team, Head of AI, etc.) as pill/tag chips. 1.4 renders definitions array (12 acronyms: USPTO, CIPO, WIPO, LLM, LoRA, GPU, SaaS, MVP, CDN, API, RAG, RBAC) as a definition table with acronym and full term columns. All content is static — no state hooks required.

As a frontend developer, implement the DocumentOverallDescription section for the Document page. Static content section with id='overall-description'. Renders userClasses array (4 entries) as cards: Youth Inventors (dod-user-avatar--youth, 🎓, amber tags), Independent Inventors (dod-user-avatar--indie, 💡, green tags), Professional Inventors (dod-user-avatar--pro, 🏢, green tags), Platform Administrators (dod-user-avatar--admin, ⚙️, red tags). Each card shows avatarClass emoji, role, demo demographics, needs text, and tag chips with color variants (dod-tag--amber, dod-tag--red, dod-tag--green). Below user cards renders techSpecs array (6 entries) as a spec grid: Frontend (FiMonitor), Backend (FiServer), AI/ML (FiCpu, badge 'On-Premise GPU'), Cloud Backup (FiCloud), Data Layer (FiDatabase), plus additional spec. Icons from react-icons/fi. Also renders FiBox (Product Perspective), FiUsers (User Classes), FiServer (Environment), FiCheckCircle (Assumptions) for subsection headings.

As a frontend developer, implement the DocumentFunctionalRequirements section for the Document page. Interactive accordion section with useState for expandedId (string|null) and useRef + useEffect for animated height transitions on accordion panels. Renders subsections array (9 entries: FR-3.1 through FR-3.9) as collapsible accordion items. Each subsection shows id badge, title, desc, and ChevronIcon component (SVG with dfr-chevron + dfr-open class toggle). On expand, renders requirements array — each requirement has: id badge, text, type badge ('core' via CheckIcon SVG or 'pro' via StarIcon SVG), tier chips (Basic/Pro pill tags), and optional xref link (LinkIcon SVG with href). Inline SVG icon components: CheckIcon (polyline 2,6 5,9 10,3), StarIcon (polygon), LinkIcon (path), ChevronIcon (polyline with open class). Accordion expand/collapse controlled by setExpandedId toggling between id and null.

As a frontend developer, implement the DocumentNonFunctionalRequirements section for the Document page. Static grid section rendering nfrCategories array (6 entries: NFR-4.1 through NFR-4.6). Each category card shows: id badge, title, lucide icon component (Zap, TrendingUp, ShieldCheck, Activity, Users, Scale), critical boolean flag (renders AlertTriangle warning badge when true — NFR-4.3 Security is critical), metrics array as small chips (e.g. '< 3s page load', '< 5s AI response (P95)'), and requirements array as a list with id prefix and text. Icons imported from lucide-react: Zap, TrendingUp, ShieldCheck, Activity, Users, Scale, AlertTriangle, Clock, CheckCircle, Lock. No state hooks — fully static render. Cards use CSS grid layout with accent color per category.

As a frontend developer, implement the DocumentAIInfrastructure section for the Document page. Interactive section with useState for activeTab controlling which spec table is visible. Renders modelCards array (6 entries: Mistral-7B, LLaMA-3-8B, grok-2-1212, claude-opus-4, text-embedding-3-large, Whisper-large-v3) as cards with name, tier badge (basic→Basic Tier / pro→Pro Tier), and desc. Tab switcher toggles between three spec tables: modelSpecRows (6 rows: architecture, context window 32768 tokens, quantisation GPTQ INT4/AWQ, serving vLLM 0.4.x, API protocol, throughput ≥80 tokens/s), loraSpecRows (7 rows: LoRA r=64 α=128, HuggingFace PEFT+TRL, USPTO XML corpus ~500K pairs, 4×A100 80GB hardware, 3 epochs, adapter merge), and cloudBackupRows (model weights S3, LoRA adapters Git LFS). Each table row shows param, value, and note columns.

As a frontend developer, implement the DocumentExternalInterfaces section for the Document page. Interactive section with useState for activeIntegration (string, default 'bing') controlling which integration detail panel is shown. Renders integrations array (minimum 2 shown: Bing Search API and USPTO Integration — likely more truncated in JSX). Each integration has: icon emoji, iconClass (dei-api-icon--bing/dei-api-icon--uspto), title, subtitle, tier badges array, isPro flag, description paragraph, flowNodes array (4–5 nodes rendered as a visual flow diagram with user/system/api type styling and icons), endpoints array (rendered as method+path+description rows with GET/POST badges), and notes array (label/value/type: normal/pro/warn). Active integration panel shown/hidden via activeIntegration state comparison. Tab-style navigation switches between integrations.

As a frontend developer, implement the DocumentUIRequirements section for the Document page. Interactive section with useState for activeUI (string) controlling active requirement card highlight. Renders uiRequirements array (4+ entries: UI-1.1 Chat Interface, UI-1.2 Document Panel, UI-1.3 Project Dashboard, UI-1.4 Research View). Each card shows: id badge, title, icon emoji with iconBg background, accentColor CSS variable, category tag, tags array (e.g. 'Conversational AI', 'Multi-turn', 'Streaming'), description paragraph, ctaDesc (action prompts description), a11yNote (accessibility note), wireframe type identifier, and href link to the live page. Cards use accentColor for left border/accent styling. Active card highlighted via activeUI state. Includes cross-links to /Chat, /Document, /Dashboard, /Research routes.

As a frontend developer, implement the DocumentSubscriptionMatrix section for the Document page. Interactive comparison table with useState for hoveredFeature (string|null) and useEffect for scroll-triggered animation. Renders CATEGORIES array (multiple categories: Account & Access, Conversational AI Mentor, Prior-Art Research, Patent Document Drafting, etc.). Each category has a header row and features array. Each feature row shows: name, desc, and two tier columns (basic/pro) with value indicators: 'yes' (checkmark), 'no' (dash/cross), 'limited' (warning icon + limitedLabel text e.g. 'Up to 3 members', '10 queries/mo', 'Up to 3 claims'), proOnly flag renders Pro-exclusive badge. Table has sticky header with Basic/Pro column labels. Hover state on feature rows sets hoveredFeature for highlight styling. Features with proOnly: true get special Pro-only visual treatment.

As a frontend developer, implement the DocumentArchitecture section for the Document page. Interactive architecture diagram section with useState for activeLayer (string, default 'frontend'). Renders layers array (4 entries: frontend, backend, ai, data) as selectable layer tabs. Each layer has: id, label (e.g. '9.1 Frontend'), icon character (⬡/⬢/◈/◉), variant CSS class, title, description, components array (6 items each with name and tech stack string, e.g. {name: 'React SPA', tech: 'React 18 + Vite'}, {name: 'Patent Editor', tech: 'Monaco Editor'}), and connections array (2 items each with label, protocol, and variant for color: green=WebSocket, amber=gRPC, empty=REST/SQL). Active layer panel expands to show components grid and connections list. Layer selector renders as tab row with icon + label.

As a frontend developer, implement the DocumentConstraintsAndFuture section for the Document page. Static section rendering constraints array (6 entries: C-1 through C-6) as cards. C-1 and C-2 have critical: true flag, rendering FiAlertTriangle icon and a highlighted critical badge. C-3 through C-6 are non-critical. Each constraint card shows id, critical indicator, and text paragraph. Below constraints renders limitations array (6 entries: AI Legal Disclaimer, USPTO API Dependency, LLM Output Variability, Third-Party API Pricing Risk, Prior-Art Search Completeness, COPPA Compliance Constraints) as a two-column label+note table. Future enhancements section uses icons: FiZap, FiGlobe, FiSmartphone, FiTrendingUp, FiUsers, FiShield, FiServer, FiDollarSign, FiCpu from react-icons/fi. All content is static — no state hooks required.

As a frontend developer, implement the FilingNavbar section for the Filing page. This reuses the LandingNavbar component (already built in task b9ecf99a-93c6-42bb-8b45-2dad2ea17b67) from '../styles/LandingNavbar.css'. The component uses useState for menuOpen and scrolled, useScroll and useTransform from framer-motion to animate background opacity (0→0.92) and blur (0→12px) over the first 120px of scroll. Includes SVG logo with animated pathLength draw-on effect via logoPathVariants, stroke color transition between #6366F1 (unscrolled) and #10B981 (scrolled), desktop nav links (Features, How It Works, Pricing, Research), and a mobile hamburger menu with three animated lines (rotate 45°/-45°, middle fades out) that opens a spring-animated drawer (x: 100%→0) with staggered drawerItemVariants per link. Note: component likely already exists from Landing page — verify before recreating.

As a frontend developer, implement the VerificationNavbar section for the Verification page by reusing the LandingNavbar component (imports LandingNavbar.css). Uses useState for menuOpen and scrolled, useScroll and useTransform from framer-motion to animate bgOpacity ([0,0.92]) and blurVal ([0,12]px) over scrollY [0,120]. Renders an animated SVG logo with logoPathVariants (pathLength draw-on, stroke transitions between #6366F1 and #10B981 on scroll), three-line hamburger with per-index hamburgerLineVariants (rotate 45/-45, y ±8, opacity 0), spring-based drawer with drawerVariants (x: 100%→0), and staggered drawerItemVariants for mobile nav links (Features, How It Works, Pricing, Research). Note: this component very likely already exists from Landing/Login/Signup/Onboarding pages — verify and reuse.

As a frontend developer, implement the WorkspaceHeader section for the Workspace page. Uses useState for currentTime (string) initialized via useEffect that calls updateGreeting() — checks new Date().getHours() to return 'Good morning' (<12), 'Good afternoon' (<17), or 'Good evening' (else), with fallback 'Welcome back'. Decorative wh-bg-glow div containing two wh-glow-orb elements (wh-glow-orb--1, wh-glow-orb--2). Breadcrumb nav with FiHome icon on first crumb, FiChevronRight separators, wh-breadcrumb-dot span on active item (breadcrumbs: Home/Dashboard/Workspace). Main row: wh-avatar initials ('AR'), wh-status-dot online indicator, h1 with greeting + userName 'Alex Rivera'. Stats row: 3 wh-stat badges (7 Active Projects FiFileText primary, 3 Pending Filings FiClock amber, 12 Claims Approved FiCheckCircle green). Action buttons: FiPlus 'New Project' → /Document, FiUsers 'Invite Team' → /Team, FiCreditCard 'Upgrade' → /Subscription. Import WorkspaceHeader.css.

As a frontend developer, implement the WorkspaceProjectGrid section for the Workspace page. Uses useState for activeFilter ('all') and possibly view mode. ALL_PROJECTS array has 6 entries with fields: id, title, subtitle, category, status ('progress'/'draft'/'filed'/'review'), statusLabel, progress (0-100), lastModified, claimsCount, inventors (array of {initials, color} from AVATAR_COLORS palette), extraInventors. Renders project cards with: status badge using status-specific CSS modifier classes, progress bar (width = progress%), inventor avatar stack (stacked circles with overlap, +N overflow chip), claimsCount, lastModified, category tag, title/subtitle. Filter tabs by status (All/In Progress/Draft/Filed/Under Review). 'New Project' CTA card at end of grid. Import WorkspaceProjectGrid.css.

As a frontend developer, implement the WorkspaceTeamSection for the Workspace page. Uses framer-motion for TeamCard sub-component with initial {opacity:0, y:16} → animate {opacity:1, y:0}, transition delay of index*0.07 and duration 0.35 easeOut. TEAMS array has 5 entries (Patent Drafters/Prior Art Research/Claim Analysis/Filing Operations/AI Infrastructure) with emoji, avatarClass (wts-avatar--{color}), cardClass, role, roleClass (wts-role-badge--owner/editor/viewer), memberCount, members (initials array), description. MemberAvatarStack sub-component renders up to 3 wts-member-avatar-chip divs from MEMBER_COLORS palette with +overflow chip. Each TeamCard shows: team emoji avatar, name, description, role badge, MemberAvatarStack, memberCount, lucide icons (Shield/Cpu/FileText/BookOpen per team type), Settings icon, ArrowRight CTA, Plus invite button. AnimatePresence wraps grid. Import WorkspaceTeamSection.css.

As a frontend developer, implement the WorkspaceActivityFeed for the Workspace page. Uses useState for activeFilter ('all') and expandedId (nullable). useRef + useEffect for scroll-to-new-item behavior. ACTIVITY_TYPES map defines 6 types (edit/comment/filing/ai/research/team) each with label, color, dotColor, tagClass. FILTER_OPTIONS array (5 entries) drives filter pill row. FEED_ITEMS array has 10+ entries with fields: id, type, isNew (bool), user {name, initials, avatarColor}, action (string), target + targetHref, preview (nullable string), timestamp, tags (string array), dateGroup ('Today'/'Yesterday'), icon (react-icons/fi component). Renders timeline with date group headers, vertical connector line, activity dot (dotColor from ACTIVITY_TYPES), user avatar, action text with linked target, optional preview blockquote, tag chips (waf-tag-primary/secondary/accent/highlight), FiArrowRight detail link. FiChevronDown 'Load more' button. FiActivity header icon. Import WorkspaceActivityFeed.css.

As a frontend developer, implement the WorkspaceQuickActions section for the Workspace page. Uses useState for hoveredIdx (nullable int) to drive hover accent effects. Renders 6 action cards from the actions array: Start New Patent Chat (MessageSquarePlus, amber, /Chat), Search Prior Art (Search, indigo, /Research), Invite Team Member (UserPlus, green, /Team, badge='New'), Export Documents (FileDown, amber, /Document), Track Filings (ClipboardList, red, /Filing, badge='3'), View Patentability Reports (BarChart2, violet, /Patentability). Each card has per-item iconColor/iconBg/iconBorder/iconBgHover/accentColor/borderHover/badgeBg CSS custom properties applied inline for dynamic theming. Badge chip displayed when action.badge is non-null. ArrowRight icon on each card. Zap 'Quick Actions' section header icon. Import WorkspaceQuickActions.css.

As a frontend developer, implement the DiscussionSidebar section for the Discussion page. This is a purely presentational component (no useState) importing DiscussionSidebar.css. Renders three panels: (1) Associated Document card showing 'Adaptive Heat-Recovery System Patent' with FiFileText icon, ds-doc-title/subtitle/preview text, v2.4 Draft version badge, and FiExternalLink 'Open Editor' link to /Document; (2) Quick Info panel with FiInfo/FiClock/FiUsers metadata rows; (3) Activity Feed rendering activityFeed array (5 entries) each with initials avatar using colorClass variants (ds-activity-avatar--indigo/green/amber/violet), activity text, time string, and typeIcon (FiMessageSquare/FiEdit3/FiUserPlus/FiAlertCircle); (4) Quick Links list rendering 5 entries (FiFileText /Document, FiCheckSquare /Filing, FiUsers /Team, FiLink /Research, FiZap /Patentability). Imports react-icons/fi icons throughout.

As a frontend developer, implement the DiscussionThread section for the Discussion page. Component uses useState for messages (MESSAGES array), reactionState, showScrollBtn, and replyingTo; useRef for containerRef and bottom sentinel; useEffect with IntersectionObserver for scroll-to-bottom floating button visibility; useCallback for handleReaction and handleReply. Renders mixed message types: system event rows (icon='users' FiUsers or icon='file' FiFile with text like 'Sarah Chen joined' or document update events), user message bubbles with initials avatars (dt-avatar--user-a/b/c/d color classes), author name, timestamp, message text, attachment chips (pdf/doc types with FiPaperclip, file name, size), emoji reaction buttons with counts (👍🔥✅👀), and nested replies (collapsible via FiChevronDown). AI assistant messages render distinctly with FiCpu icon, green styling, and ≈67% allowance rate analysis text. FiMoreHorizontal overflow menu per message with FiEdit2/FiTrash2/FiCornerUpLeft actions. FiArrowDown floating scroll button appears when not at bottom. Imports DiscussionThread.css and framer-motion.

As a frontend developer, implement the DiscussionFooter section for the Discussion page by reusing the LandingFooter component (may already exist from Landing, Chat, Workspace, and other pages). Component uses useState for openCol (mobile accordion index) and lang (language selector, default 'en'). Renders parallax background with two lf-parallax-orb divs driven by CSS --scroll variable translateY. Brand section shows 'scenic-srs' name and tagline. Four footer columns (Product, Company, Legal, Resources) with mobile accordion behavior via AnimatePresence and FiChevronDown rotation toggle. Social links: FiGithub, FiLinkedin, FiTwitter. Language selector cycles through en/en-ca/fr/es with FiGlobe icon. Imports LandingFooter.css and framer-motion.

As a frontend developer, implement the AuditHeader section for the Audit page. Uses useState for fromDate/toDate (controlled date inputs), appliedFrom/appliedTo (committed range), and showApplied boolean (auto-clears after 2500ms via setTimeout). Computes today and firstOfMonth via new Date() and formats both as YYYY-MM-DD strings using formatDate helper. handleApply commits the date range, sets showApplied=true, and schedules reset. formatDisplayDate converts YYYY-MM-DD to 'Mon D, YYYY' display format using a months array. Renders FiShield icon alongside H1 'Audit & Compliance' title and subtitle paragraph. Controls row contains FiCalendar-labeled date range group with two date inputs, 'to' separator, Apply button, and a conditional ah-applied-note span with FiCheck icon. Right side shows compliance status badge pills. Imports AuditHeader.css.

As a frontend developer, implement the AuditFilingSubmissions section for the Audit page. Uses useState for expandedId, searchQuery, sortField, sortDir, and statusFilter. useMemo computes filtered+sorted FILINGS_DATA (7+ records) based on search against id/filer/invention fields and status filter. Sort toggles between FiArrowUp/FiArrowDown on column headers (timestamp, filer, status, filingFee). FiSearch input filters inline. FiFilter dropdown for status (accepted/pending/rejected/all). Each row renders: filing ID badge, type pill (provisional/non-provisional), filer name, invention title, status color-coded pill, filing fee, timestamp. FiChevronDown/FiChevronUp expand a detail panel showing receipt number, appNumber, attorney, entity type, confirmedAt. Rejected rows show FiAlertCircle. Imports AuditFilingSubmissions.css.

As a frontend developer, implement the AuditTeamContributions section for the Audit page. Uses useState for activeFilter ('all'/'human'/'ai'/'system') and useMemo to filter ALL_ACTIVITIES (10+ entries) by actorType tag. Each activity entry renders: avatar circle with initials (AC, BR, AI, SY, DK) color-coded by actorType (human=indigo, ai=emerald, system=amber), actionIcon mapped to FiEdit3/FiCpu/FiMessageSquare/FiFolderPlus/FiUploadCloud/FiEye/FiCheckCircle/FiAlertCircle, actionDesc text, target string, relativeTime, and team badge. FiActivity icon in section header. FiChevronDown 'Load More' button. Filter tabs (All/Human/AI/System) use tag arrays for filtering. FiUsers in section title. Imports AuditTeamContributions.css.

As a frontend developer, implement the AuditUserActivityLog section for the Audit page. Uses useState for searchQuery, actionFilter, statusFilter, sortField, sortDir, and currentPage. useMemo computes filtered+sorted+paginated slice of ALL_ACTIVITY_LOGS (20+ EVT-xxx entries). Each log row shows: event ID, timestamp, user email, action type pill (login/export/filing/invite/credential), IP address, user-agent string truncated, and status badge (success=green, failure=red with FiAlertCircle). FiSearch input filters by user/IP/action. FiChevronUp/FiChevronDown sort indicators on timestamp and user columns. FiChevronLeft/FiChevronRight pagination controls with page counter. FiActivity in section header. FiUser icon prefixes user column. Failure rows highlighted. PAGE_SIZE constant controls rows per page. Imports AuditUserActivityLog.css.

As a frontend developer, implement the AuditComplianceStatus section for the Audit page. Uses useState for expandedId (accordion). Renders complianceItems array covering COPPA, GDPR, CCPA, WCAG 2.1, and additional regulations. Each item is an accordion row: clicking toggles expandedId via FiChevronDown. Collapsed view shows name, category badge, status pill (compliant=FiCheckCircle green, pending=FiAlertTriangle amber, warning=FiXCircle red), and lastChecked date. Expanded panel renders description paragraph, a details grid (label/value pairs with type-based coloring: compliant/neutral/warning), and action link buttons using FiExternalLink and FiFileText icons. Status counts (e.g. '✓ Compliant') displayed inline. Imports AuditComplianceStatus.css.

As a frontend developer, implement the AuditDataExport section for the Audit page. Uses useState for startDate/endDate (initialized to today and 30 days ago via Date.now() arithmetic), appliedRange (null or {start, end} object), downloading (tracks active export item ID), and toasts array. handleApplyRange validates startDate <= endDate before setting appliedRange. handleClearRange resets dates. handleExport useCallback blocks concurrent exports via downloading guard, sets downloading=item.id, waits 1200ms mock delay, clears downloading, appends toast with label including applied date range if set, then auto-removes toast after 3500ms. Renders 4 exportItems (filing-log CSV, activity-log CSV, compliance-report PDF, full-audit-trail JSON) each with Icon component (FiFileText/FiDatabase/FiArchive), format badge (csv/pdf/json class), title, desc, and FiDownload export button showing spinner when downloading. FiCalendar date range inputs. FiAlertTriangle for invalid range. Toast stack renders FiCheckCircle success messages. Imports AuditDataExport.css.

As a frontend developer, implement the AuditIncidentLog section for the Audit page. Uses useState for searchQuery, severityFilter, statusFilter, currentPage, and expandedId. useMemo filters ALL_INCIDENTS (10+ INC-2026-xxxx entries) by search text against description/affectedComponent and severity/status filters. Each incident row renders: ID badge, severity icon (critical=FiXCircle red, warning=FiAlertTriangle amber, info=FiInfo blue), timestamp, description truncated, affectedComponent tag, detectedBy label, status pill (resolved=FiCheckCircle, open=FiAlertCircle). FiChevronRight expands detail panel showing resolvedAt, resolutionNotes paragraph. FiSearch filters inline. Severity filter tabs (All/Critical/Warning/Info). FiSlash for 'no results' empty state. FiChevronLeft/FiChevronRight pagination. FiAlertTriangle in section header with incident count badge. Imports AuditIncidentLog.css.

As a frontend developer, implement the AuditFooter section for the Audit page by reusing the LandingFooter component (may already exist from Landing, Admin Dashboard, Research, or other pages). Uses useState for openCol (mobile accordion index) and lang ('en' default). Renders 4 footerColumns (Product, Company, Legal, Resources) with toggleCol accordion for mobile via FiChevronDown button headers. AnimatePresence from framer-motion wraps accordion link lists. Social row renders FiGithub, FiLinkedin, FiTwitter icon links. FiGlobe language selector dropdown toggles 4 language options (en, en-ca, fr, es). Background has two lf-parallax-orb divs with CSS --scroll custom prop translateY transform. Brand section shows 'scenic-srs' name and tagline. Imports LandingFooter.css.

As a frontend developer, implement the BillingHero section for the Billing page. Renders a bh-root section with: six decorative animated accent lines (bh-line--1 through bh-line--6, aria-hidden), a bh-glow radial gradient div (aria-hidden), and a bh-content block. Content includes: a bh-badge with bh-badge-dot and 'Billing & Subscriptions' label, an h1 with bh-headline-accent span ('Subscription.'), a subheadline paragraph, and a bh-ctas row with a primary button (href=/Subscription, Zap + ChevronRight lucide icons, 'View Plans') and secondary button (href=/Billing, Download lucide icon, 'Download Invoices'). A bh-stats row renders four stat blocks: '2+ Subscription Tiers', '100% Transparent Pricing', a CreditCard lucide icon (size=22, color var(--primary-light, #818CF8)) for 'Secure Payments', and '24/7 Billing Support' — separated by bh-stat-divider elements. No state. Styles from BillingHero.css.

As a frontend developer, implement the PricingTiers section for the Billing page. Uses useState for isAnnual (boolean, default false) and animatingPrice (boolean), plus useRef prevAnnual to detect toggle changes. A useEffect fires setAnimatingPrice(true) for 260ms on toggle via setTimeout. A handleToggle callback flips isAnnual. Renders a pt-root section with a header (pt-eyebrow, pt-title h2, pt-subtitle, billing toggle with pt-toggle-wrap). Maps the TIERS array of 2 objects (Basic: $29/mo or $23/annual, current plan; Pro: $79/mo or $63/annual, isPopular=true). Each tier card renders: a name, desc, price (animated with animatingPrice class), ctaLabel button (ctaType 'current' or 'upgrade'), and a features list using the CheckIcon sub-component (variant prop, SVG polyline d='M1.5 5L4 7.5L8.5 2.5'). Pro card includes a 'Most Popular' badge. Price toggles between monthlyPrice and annualPrice based on isAnnual. Styles from PricingTiers.css.

As a frontend developer, implement the FeatureComparison section for the Billing page. Uses useState, useEffect, and useRef for intersection-observer-based scroll reveal. Maps the CATEGORIES array of 4 category groups: Core AI Features (4 features), Research & Search (3 features), Filing & Compliance (4 features), Collaboration & Team (4 features). Each feature row has a label, desc, and basic/pro values that can be: true (checkmark), false (dash/X), 'limited' (renders basicLabel like '50 msg/mo' or '5/mo'), or 'text' (renders basicLabel/proLabel strings like '1 user'/'Up to 10'). A sticky comparison header shows 'Basic' and 'Pro' column headers. Category group headers visually separate feature rows. A CheckIcon and CrossIcon or DashIcon sub-component renders the cell value state. Styles from FeatureComparison.css.

As a frontend developer, implement the BillingHistory section for the Billing page. The most complex billing section, featuring: useState for filters (status: 'all'/'paid'/'pending'/'failed'), sort (field + direction toggled via FiArrowUp/FiArrowDown), search query string, and current page index. useMemo derives filtered+sorted+paginated invoice list from ALL_INVOICES array (12 mock invoices spanning May 2026 to late 2025, including INV-2026-0042 through INV-2025-0xxx). Each invoice has: id, date, dateISO, description, detail, amount, status, period, paymentMethod. Table renders columns: invoice ID (FiFileText icon), date, description+detail, amount, status badge (paid/pending/failed), and action buttons (FiEye view, FiDownload download, HiOutlineDocumentDownload bulk). FiFilter opens a filter panel with FiX to close. Pagination uses FiChevronLeft/FiChevronRight. FiRefreshCw triggers a reload/refresh action. Imports from react-icons/fi and react-icons/hi. Styles from BillingHistory.css.

As a frontend developer, implement the SubscriptionManagement section for the Billing page. Uses useState for isCancelling (boolean, default false) and useRef rootRef + revealRefs array. A useEffect sets up per-element IntersectionObserver instances (threshold 0.15) via addRevealRef(index) callback pattern, adding 'sm-visible' class on intersection and disconnecting. SUBSCRIPTION_DATA object provides: tierName 'Pro Inventor', tierTagline, tierIcon '⚡', status 'active', renewalDate 'June 5, 2026', billingCycle 'Annual', nextInvoiceAmount '$299.00', memberSince 'January 2025', and usageMetrics array of 3 items (Patent Drafts 14/20 70%, Prior-Art Searches 38/50 76%, USPTO Filings 2/5 40%) each with colorClass (sm-usage-bar-fill--primary/secondary/accent). TEAM_MEMBERS array renders 3 member avatars (initials + color). PLAN_COMPARE array of 4 rows drives a current-vs-upgrade comparison table. isCancelling toggles sm-badge--cancelling/sm-badge--active and sm-status-card--cancelling classes. All icons from react-icons/fi: FiZap, FiCalendar, FiRefreshCw, FiUsers, FiAlertTriangle, FiArrowRight, FiTrendingUp, FiShield, FiCheckCircle, FiXCircle. Styles from SubscriptionManagement.css.

As a frontend developer, implement the PaymentMethods section for the Billing page. Uses useState for: methods array (initialMethods — 3 cards: Visa •••• 4242 default, Mastercard •••• 5555, Amex •••• 1234 each with id/type/label/holder/last4/expiry/isDefault), confirmDelete (null | id), showForm (boolean), formTab ('card' | other). Card form states: cardNumber, cardHolder, cardExpiry, cardCVV (all strings), setAsDefault (boolean). Handlers: handleSetDefault(id) maps methods to update isDefault, handleDeleteRequest(id) sets confirmDelete, handleDeleteConfirm(id) filters out the method, handleDeleteCancel clears confirmDelete, handleAddOpen shows form. BrandIcon sub-component renders type-specific brand badges: pm-brand-icon--visa ('VISA' text), pm-brand-icon--mastercard (two overlapping pm-mc-circle divs: red + orange), pm-brand-icon--amex ('AMEX'), pm-brand-icon--apple (' Pay'), pm-brand-icon--google ('G Pay'). formatCardNumber() strips non-digits, chunks to groups of 4 (max 16 digits). formatExpiry() strips non-digits and inserts '/' after position 2. Star/Trash2/Edit3/X/Shield/ChevronRight/Lock/Check from lucide-react. Plus and CreditCard lucide icons for add-card CTA. Styles from PaymentMethods.css.

As a frontend developer, implement the BillingFAQ section for the Billing page. Uses useState for openId (string | null) — single-item accordion pattern. Maps faqItems array of 6+ items, each with: id string, icon component from react-icons/fi (FiCreditCard, FiRefreshCw, FiShield, FiX, FiZap, FiUsers), question string, and answer as JSX. Answer JSX for 'how-billing-works' includes two paragraphs with strong tags and a bfaq-cta-row with an outline CTA button to /Billing. Answer for 'change-plan-mid-cycle' includes paragraphs for upgrade (immediate, prorated) and downgrade (end of cycle) behavior, with a primary CTA to /Subscriptions and outline CTA to /Subscription. Answer for 'refund-policy' describes 7-day money-back guarantee with non-refundable policy after. FiChevronDown rotates on open. All bfaq-answer paragraphs use bfaq-link anchor class for inline links. Styles from BillingFAQ.css.

As a frontend developer, implement the Support section for the Billing page. Uses useState for formData ({name, email, subject, message} all empty strings), submitted (boolean), loading (boolean), and revealed (boolean). useRef sectionRef triggers a single IntersectionObserver (threshold 0.08) that sets revealed=true and disconnects on first intersection. handleChange updates formData by field name. handleSubmit prevents default, sets loading=true, then after 1200ms setTimeout sets loading=false and submitted=true. isValid derived boolean requires all four fields non-empty including a non-empty subject select. Renders two columns: a contactChannels grid mapping 4 card objects (Email — mailto:billing@scenic-srs.com, Live Chat — /Chat with 'Online' badge, Knowledge Base — /Onboarding, Community Forum — /Discussion), each with icon from react-icons/fi (FiMail, FiMessageCircle, FiBookOpen, FiUsers) and FiArrowRight. Second column: a contact form with name/email inputs, a subject select (8 options including invoice/charge/upgrade/cancel/refund/payment/other), a message textarea, submit button (FiSend icon, disabled unless isValid), and a submitted success state with FiCheckCircle. Styles from Support.css.

As a frontend developer, implement the BillingFooter section for the Billing page. This reuses the shared LandingFooter component (already created in task 4b17a12b-3871-4ff9-872f-4135881c9569). The component uses useState for openCol (null | index) toggled via toggleCol() and lang state ('en' default). Renders: a lf-parallax-bg with two lf-parallax-orb divs using CSS var(--scroll) translateY(-0.3px) transform, a lf-brand block ('scenic-srs' + tagline), a lf-columns grid mapping 4 footerColumns (Product, Company, Legal, Resources) as accordion columns with AnimatePresence-animated FiChevronDown, social links row (FiGithub, FiLinkedin, FiTwitter from react-icons/fi), and a FiGlobe language selector dropdown (4 options: en/en-ca/fr/es). Import from LandingFooter.css. Verify shared component exists before duplicating.

As a frontend developer, implement the InfraOverviewMetrics section for the Infrastructure page (imports InfraOverviewMetrics.css). Uses useState for barWidths object and useRef mountedRef to prevent double-init. On mount, a 300ms setTimeout populates barWidths with barValue entries from METRICS_DATA (only uptime=99.94 and avg-latency=72 have non-null barValues). Renders 6 metric cards from METRICS_DATA: Total GPUs (FiCpu, healthy/Online, neutral trend), Active Inference Nodes (FiServer, warning/Degraded, down trend '-1 node', 'Node 4 under maintenance ETA 14 min'), Cloud Backup Status (FiCloud, healthy/In Sync, up trend 'Last: 4m ago'), Uptime (FiActivity, healthy/Nominal, barValue 99.94%), Current Users (FiUsers, primary/Live, up '+8.3%', '1,247'), Avg Response Latency (FiZap, warning/Elevated, barValue 72, '284ms'). trendArrow() maps trend to ↑/↓/→. Header shows iom-pulse-dot and 'Live · Updated just now'. Imports react-icons/fi: FiCpu, FiServer, FiCloud, FiActivity, FiUsers, FiZap.

As a frontend developer, implement the InfraGPUCluster section for the Infrastructure page (imports InfraGPUCluster.css). Renders 4 GPU_DATA cards (GPU-0 active/61°C/73% util/Llama-3.1-70B, GPU-1 busy/74°C/91% util/warning class, GPU-2 active/58°C/55% util/DeepSeek-R1-32B, GPU-3 hot/88°C/97% util/critical class/patent-finetune-v3.2). Each card includes: a UtilRing SVG sub-component that renders a circular SVG with RING_R=20, RING_CIRC=2π×20, strokeDashoffset computed from utilization percent, colored by getRingClass() (ok/accent/highlight). Memory bar, power draw bar, and temperature value colored by getThermalColor()/getPowerColor(). Uses useState for expandedGpu (id or null) to show/hide detail panels. Also renders 3 MAC_NODES (mac-mini-01 API Gateway 38% CPU, mac-mini-02 Queue Manager 62% CPU, mac-mini-03 Vector DB 44% CPU) each with CPU and RAM usage bars. Imports react-icons/fi: FiCpu, FiThermometer, FiZap, FiActivity, FiServer, FiWifi.

As a frontend developer, implement the InfraFailoverStatus section for the Infrastructure page (imports InfraFailoverStatus.css). Uses useState for failoverEnabled (true), simState ('idle'|'running'|'success'), refreshing, lastUpdated, and uptimeSeconds (initialized to 2847613 ~33 days). A setInterval ticks uptimeSeconds every 1000ms; formatUptime() formats to 'Xd HHh MMm SSs'. handleRefresh (useCallback) sets refreshing=true, 1200ms timeout updates lastUpdated to current HH:MM:SS. handleSimulate (useCallback) sets simState='running', 3000ms timeout → 'success', then 6000ms timeout → 'idle'. Renders ON_PREM_CHECKS (4 items, all pass) and CLOUD_CHECKS (4 items, 3 pass + 1 warn for DNS) via StatusIcon sub-component (FiCheckCircle/FiAlertTriangle/FiXCircle). A failover toggle (FiToggleRight) controls failoverEnabled. Simulation button shows FiLoader spinner when running. globalStatusClass changes based on simState. Imports react-icons/fi throughout.

As a frontend developer, implement the InfraBackupRedundancy section for the Infrastructure page (imports InfraBackupRedundancy.css). Uses useState for hoveredBar (index or null). Renders 4 ibr-metric-cards: RPO (1 hr), RTO (4 hrs), Last Backup (May 5 02:01 AM in ibr-green), and Backup Size. A 7-day bar chart renders backupHistory entries (Apr 29–May 5) — success bars use barHeights.success values (52–60px), failure bar (May 1) uses barHeights.failure value (28px) with a distinct failure color; hoveredBar state shows a tooltip with size/duration/time. redundancyLocations renders 3 location cards: On-Premise NAS (FiServer), AWS S3 us-east-1 (FiCloud), Backblaze B2 (FiCloud) each with sync status indicator. storageUsage renders 3 horizontal progress bars: Model Weights 68%/primary, Patent Document Archives 42%/green, System Snapshots 27%/accent. Imports react-icons/fi: FiDatabase, FiServer, FiCloud, FiHardDrive.

As a frontend developer, implement the InfraAlerts section for the Infrastructure page (imports InfraAlerts.css). Uses useState for expandedIds (Set, pre-expanded for autoExpand=true alerts) and dismissedIds (Set). useCallback handles toggleExpand and dismiss. ALERTS_DATA has 4 alerts: 2 critical (GPU-B300-02 thermal throttling at 94°C/THR-GPU-0042, USPTO API 503/NET-USPTO-503) and 2 warning (pgvector P99 1840ms/PERF-DB-VEC-001, Redis at 82%/CAPACITY-REDIS-001). Each alert card renders severity badge, message, timestamp, component tag, expand/collapse chevron, and when expanded: fullMessage, a details grid (errorCode, nodeId/endpoint, threshold/observed, duration, impact). Critical alerts auto-expand on mount. A dismiss button removes the card from view. Alert count summary at top shows critical/warning totals. Severity colors: critical=#EF4444, warning=#F59E0B.

As a frontend developer, implement the InfraSystemHealth section for the Infrastructure page (imports InfraSystemHealth.css). Uses useState for animated (bool) and useEffect with IntersectionObserver to set animated=true when section enters viewport. Defines healthMetrics (4 items: CPU 67%/caution/circular, Memory 43%/healthy/circular, Disk 78%/caution/linear, Queue 22%/healthy/linear). CircularGauge sub-component renders SVG with two circles (ish-arc-bg + ish-arc-fill), strokeDashoffset = CIRCUMFERENCE_GAUGE(188) - (pct/100)*188, stroke color from ZONE_COLORS ({healthy:'#10B981', caution:'#F59E0B', critical:'#EF4444'}), and center icon+value overlay. Linear gauge cards render a CSS-width progress bar. Network panel renders two sparkline SVG paths built by buildSparkPath() using uploadPoints (15 values) and downloadPoints (15 values) — closed=true for fill area. Displays uploadRate '1.24 Gbps' and downloadRate '0.87 Gbps'. Imports react-icons/fi: FiActivity, FiCpu, FiHardDrive, FiDatabase, FiWifi, FiLayers.

As a frontend developer, implement the InfraScaling section for the Infrastructure page (imports InfraScaling.css). Registers Chart.js plugins (CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend) via ChartJS.register(). Renders a react-chartjs-2 Line chart with demandLabels (Jan–Dec), 3 datasets: demandActual (4 GPUs Jan–May with nulls after), demandProjected (null until May then 4→38 GPUs), capacityLine (4→35 GPUs). gpuNodes renders 4 active GPU cards (GPU-01/94%, GPU-02/87%, GPU-03/91%, GPU-04/76%) with util bars; pendingGpus renders 3 pending placeholders; phantomCount=4 renders ghost slots. timelinePhases renders 4 phase cards (Q2 2026/done, Q3 2026/active, Q4 2026/pending, Q2 2027/pending) with gpuCount badges. recommendations renders 3 action cards with severity (critical/AlertTriangle, warning/TrendingUp, info/Info from lucide-react) and action buttons (primary-btn, secondary-btn, muted-btn). Uses useState for activePhase. Imports lucide-react: TrendingUp, Cpu, DollarSign, Clock, AlertTriangle, CheckCircle, Info.

As a frontend developer, implement the InfraLogs section for the Infrastructure page (imports InfraLogs.css). Uses useState for levelFilter (default 'ALL'), serviceFilter (default 'All Services'), searchQuery, and expandedLogId. useMemo filters ALL_LOGS (20+ entries) by levelFilter, serviceFilter, and searchQuery against id/message/service. Log levels: ERROR (2 entries — CUDA OOM, Pinecone refused), WARNING (3 — rate limit, low confidence embedding, failed login), INFO (7 — vector index rebuilt, JWT issued, patent draft, filing accepted, backup complete, GPU health, auto-scaling), DEBUG (3 — VRAM snapshot, cron trigger, cache hit ratio). Each log row shows id badge, timestamp, level pill (color-coded), service tag, and truncated message. expandedLogId toggles a full-detail panel. Level filter buttons (ALL/ERROR/WARNING/INFO/DEBUG) and service dropdown (GPU Manager, API Server, RAG Pipeline, Auth Service, USPTO Bridge, Scheduler) control filtering. A search input filters by text match.

As a frontend developer, implement the ComplianceHero section for the Compliance page using `ch-*` CSS classes. This is a fully static presentational section with: (1) a badge row with `ch-badge-dot` pulse indicator and 'Transparency & Trust' label; (2) `<h1>` headline with `ch-headline-accent` span wrapping 'Compliance'; (3) subheadline paragraph referencing COPPA, GDPR, CCPA, and USPTO; (4) a `ch-value-prop` block with italic 'AI-powered patent assistance' emphasis; (5) `complianceStandards` array of 5 items (COPPA/Children's Online Privacy, GDPR/EU Data Protection, CCPA/California Consumer Privacy, USPTO/Patent Filing Standards, WIPO/International IP Standards) rendered as `ch-standard-chip` divs each with `FiCheckCircle` icon, label span, and desc span; (6) CTA row with two `<a>` tags — primary 'View Audit Trail' button linking to /Audit (FiShield + FiArrowRight icons) and secondary 'Privacy Policy' button linking to /Settings (FiFileText icon); (7) `ch-divider` closing element. Imports: react-icons/fi (FiShield, FiCheckCircle, FiFileText, FiArrowRight).

As a frontend developer, implement the ComplianceOverview section for the Compliance page using `co-*` CSS classes. This is a static section rendering three compliance pillar cards from the `pillars` array (Data Privacy & Protection, Security & Infrastructure, Legal & Regulatory Compliance). Each pillar object has key, title, description, features array (5 bullet points each), href, and linkLabel. Three custom inline SVG icon components are defined: `ShieldIcon` (path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'), `LockIcon` (rect + path for padlock), and `ScaleIcon` (balance scale SVG). Each pillar card renders: the corresponding icon, title, description paragraph, an unordered list of feature bullet points, and a `<a>` link using href/linkLabel. Features include specifics like 'AES-256 encryption', 'GDPR-compliant data subject rights', 'COPPA safeguards for inventors under 13', 'USPTO electronic filing interface compliance', and 'Redis-backed rate limiting'. No state hooks required. Imports: React only (no external icon library — all icons are inline SVG components).

As a frontend developer, implement the ComplianceDataProtection section for the Compliance page using `cdp-*` CSS classes. This is a rich static section with multiple subsections: (1) `userRights` array of 4 items (Right of Access/FiEye, Right to Erasure/FiTrash2, Data Portability/FiDownload, Right to Rectification/FiSend) rendered as cards with icon, title, and desc; (2) `retentionPolicies` table of 5 rows (Active Account Data/Duration of account, Patent Draft Documents/7 years, Billing & Payment Records/7 years, Audit & Activity Logs/2 years, Session & Analytics Data/90 days) each with category, period, and note columns; (3) `encryptionFeatures` list of 5 bullet points (AES-256 at rest, TLS 1.3 in transit, 90-day key rotation, column-level PII encryption, zero-knowledge architecture for third-party LLMs); (4) `isolationFeatures` list of 4 items (per-user data namespacing, team workspace isolation, RBAC at API gateway, patent document access scoping); (5) `regulations` array of 3 items (GDPR/CCPA/COPPA) each with label badge, title, and descriptive paragraph. No state hooks required. Imports: react-icons/fi (FiShield, FiLock, FiUsers, FiClock, FiDownload, FiTrash2, FiEye, FiSend, FiCheck, FiDatabase, FiGlobe, FiAlertCircle).

As a frontend developer, implement the ComplianceSecurityPrivacy section for the Compliance page using `csp-*` CSS classes. Key features: (1) `securityPillars` array of 6 items each with icon component, name, desc, tags array, badge string ('Critical'|'Active'|'Standard'), badgeType ('critical'|'active'|'standard'), and `critical: boolean` — rendered as a grid of cards with the icon, name, desc paragraph, tag chips, and a badge; pillar details include TLS 1.3/FiLock, AES-256/FiDatabase, MFA/FiKey (TOTP+WebAuthn+FIDO2), USPTO Credential Vault/FiShield (envelope encryption, zero plain-text), Automatic Failover/FiServer (active-passive), RBAC/FiRefreshCw (least privilege, quarterly review); (2) `useState` for an expandable MFA setup section — `mfaSteps` array of 5 ordered steps ('Enable MFA from your Account Security settings', 'Scan QR code with TOTP app', 'Enter 6-digit code', 'Store backup recovery codes', 'Admin accounts require MFA'); (3) rate-limiting informational block with FiAlertTriangle. Imports: react-icons/fi (FiShield, FiLock, FiKey, FiServer, FiCheck, FiAlertTriangle, FiRefreshCw, FiDatabase).

As a frontend developer, implement the ComplianceLegalDisclaimers section for the Compliance page using `cld-*` CSS classes. Key features: (1) `disclaimers` array of 3+ items each with num ('01'|'02'|'03'), title, tag string, and `content` array of typed blocks — block types: 'text' (renders as `<p>` with `dangerouslySetInnerHTML` for inline `<strong>` tags), 'inset' (styled callout block, also uses dangerouslySetInnerHTML), 'bullets' (renders `<ul>` from `items` array); (2) `useState` and `useRef` for accordion expand/collapse — `useState(null)` tracking open disclaimer index, each disclaimer header is a `<button>` with `FiChevronDown` rotating via CSS class when open; (3) click-outside `useEffect` with ref to close open accordion panels; (4) disclaimer content includes: AI-Generated Content Disclaimer (LLMs/Grok/Claude, embedded legal review reminder), Not a Substitute for Legal Counsel (bullet list: jurisdiction-specific patent law, non-exhaustive prior-art search, claim drafting ≠ patent allowance, trademark advice is informational), Limitation of Liability (max extent permitted by law, Cloud Wash parent company reference); (5) FiAlertTriangle warning icon on critical inset blocks; (6) FiInfo and FiCheckCircle for informational tags. Imports: react-icons/fi (FiAlertTriangle, FiChevronDown, FiInfo, FiCheckCircle).

As a frontend developer, implement the ComplianceCOPPA section for the Compliance page using `cco-*` CSS classes. Key features: (1) `consentSteps` array of 6 numbered steps (01–06) each with num, title, desc — rendered as a vertical timeline/stepper: Age Verification at Registration, Parental Consent Email (VPC email with time-limited approval link), Guardian Approval Gateway (account inactive until parent approves), Linked Parent Dashboard (parent can review/modify/revoke), Annual Re-Consent Review (30-day window or account suspended), Instant Revocation (data purged within 72 hours); (2) `featureCards` array of 4 items each with title, desc, and an inline SVG icon component — Activity Visibility (eye/circle SVG), Spending Approval Workflow (credit card rect SVG), Content Filtering (layered polygon SVG for safe-content layer), Restricted Data Collection (truncated in source — minimal data for under-13 users); (3) `useState` for an expandable/interactive FAQ or detail panel within the section. Imports: React only (all icons are inline SVG JSX, no external icon library).

As a frontend developer, implement the ComplianceInternational section for the Compliance page using `ci-*` CSS classes. Key features: (1) `jurisdictions` array of 3+ items each with id, abbr, name, flag emoji, region, status ('compliant'|'monitoring'), statusLabel, description, and three sub-arrays: `dataProtection` (5 bullet points), `officeRequirements` (5 bullet points), `posture` (4 bullet points); jurisdictions include USPTO (🇺🇸, CCPA/SOC2/AES-256, EFS-Web/Patent Center, 35 U.S.C. §112), CIPO (🇨🇦, PIPEDA/bilingual/breach notification, Patent Act SOR/96-423/PCT, future roadmap), WIPO (🌐, monitoring status); (2) `useState` for active jurisdiction tab — clicking a jurisdiction tab/card switches the detail panel; (3) detail panel renders the selected jurisdiction's description, and three labeled sub-sections (Data Protection, Office Requirements, Legal Posture) each as a bulleted list; (4) status badge with color variant based on `status` field ('compliant'→green, 'monitoring'→amber). Imports: React only (no external icon library visible in truncated source).

As a frontend developer, implement the ComplianceAuditTrail section for the Compliance page using `cat-*` CSS classes. This is a static data-display section with: (1) `overviewCards` array of 4 items each with icon component, colorClass ('cat-overview-icon--indigo'|'--green'|'--amber'|'--red'), title, and desc — rendered as a 2×2 grid: All User Actions Tracked/FiActivity, Document Version History/FiDatabase, Administrative Changes/FiShield, Team Collaboration Logs/FiLock; (2) `auditEntries` array of 6 log rows each with timestamp (UTC format), user email or 'sys.automation', initials, avatarClass ('cat-td-avatar--a' through '--e'), action string, resource API path, ip address, status ('success'|'denied'|'warning'), and statusLabel — rendered as a styled table or list with all fields displayed; status cells use color-coded badges (success→green, denied→red, warning→amber); (3) avatar circles using initials with per-user color classes; (4) FiClock for timestamp column header, FiAlertTriangle for warning/denied rows. No state hooks required. Imports: react-icons/fi (FiShield, FiLock, FiDatabase, FiActivity, FiClock, FiAlertTriangle).

As a frontend developer, implement the ComplianceCertifications section for the Compliance page using `cc-*` CSS classes. This is a static grid section rendering the `certifications` array of 5 items (SOC 2 Type II, ISO 27001, GDPR Compliant, CCPA Compliant, and a fifth truncated in source). Each certification object has id, name, issuer, status string, statusType ('active'|'compliant'), description, details array (3 tag strings), verifyHref, verifyLabel, and an inline SVG `icon` JSX element. Each card renders: (1) the inline SVG icon in a styled icon wrapper; (2) name as heading; (3) issuer subtext; (4) status badge with dynamic class `cc-status--{statusType}`; (5) description paragraph; (6) `details` array rendered as 3 small tag chips; (7) a `<a>` verify link using verifyHref/verifyLabel (linking to /Audit or /Compliance). No state hooks required. All icons are inline SVG JSX (shield+checkmark, clock circle, padlock, heart/CCPA). Imports: React only.

As a frontend developer, implement the ComplianceFAQ section for the Compliance page using `cfaq-*` CSS classes. Key features: (1) `faqItems` array of 5+ items each with id, question, answer (long paragraph string), tag object ({label, type: 'privacy'|'data'|'security'}), and `relatedLinks` array of {label, href} objects; FAQ topics include: invention data sharing with third parties, document retention periods (90-day grace after cancellation, 12-month audit logs), data export (PDF/DOCX/JSON, GDPR Article 20, Settings > Data & Privacy > Export), service shutdown continuity (90-day notice, USPTO filings remain valid), and USPTO credential storage; (2) accordion state with `useState(null)` tracking open item id — clicking a question header toggles it; (3) `useRef` for the accordion container; (4) each FAQ item renders: tag badge with `type`-based color class, question as `<button>` header, and collapsible answer panel with answer text + `relatedLinks` as `<a>` tags; (5) answer panels animate open/close (height transition via CSS or ref-based measurement). Imports: React (useState, useRef) only — no external icon library visible in truncated source.

As a frontend developer, implement the ComplianceCTA section for the Compliance page using `ccta-*` CSS classes. This is a fully static presentational section with: (1) a badge row with `ccta-badge-dot` pulse indicator and 'Compliance Support' label; (2) `<h2>` headline with `ccta-headline-accent` span wrapping 'Legal Policies?'; (3) description paragraph about compliance documentation transparency; (4) `ccta-buttons` row with two `<a>` tags — secondary 'Read Full Privacy Policy' linking to /Settings (FiFileText icon) and primary 'Contact Compliance Team' linking to `mailto:compliance@scenic-srs.com` (FiShield + FiArrowRight icons); (5) `ccta-divider` separator element; (6) contact block with `ccta-contact-label` 'Direct Contact', `ccta-contact-email` mailto link with FiMail icon displaying 'compliance@scenic-srs.com', `ccta-contact-sep` separator, and `ccta-response-time` span ('Response within 2 business days' with `<strong>` on '2 business days'); (7) disclaimer paragraph noting scenic-srs is not a licensed law firm and all AI-generated documents carry professional review disclaimers. No state hooks required. Imports: react-icons/fi (FiFileText, FiMail, FiArrowRight, FiShield).

As a frontend developer, implement the ComplianceFooter section for the Compliance page. This reuses the `LandingFooter` component and `LandingFooter.css` stylesheet — the component may already exist from Subscription, Dashboard, or Team pages; reuse if available. Key features: (1) `useState(null)` for `openCol` accordion — `toggleCol(idx)` sets openCol to idx or null if already open; (2) `useState('en')` for `lang` language selector; (3) decorative parallax background with two `lf-parallax-orb` divs and CSS `--scroll` variable inline transform; (4) brand block with 'scenic-srs' name and tagline; (5) `footerColumns` array of 4 columns (Product: Patent Drafting/Prior-Art Search/Claim Analysis/USPTO Filing/AI Mentor Chat; Company: About/Team/Workspace/Audit; Legal: Privacy Policy/Terms/Compliance/Trademark; Resources: Help Center/Discussions/Document Templates/Subscription Plans) each with accordion `<button className='lf-col-header'>` and `AnimatePresence` + `motion.ul` framer-motion animated link list; (6) social links: FiGithub→github.com, FiLinkedin→linkedin.com, FiTwitter→twitter.com; (7) language picker with FiGlobe + FiChevronDown toggling `languages` array (en, en-ca, fr, es). Imports: framer-motion (motion, AnimatePresence), react-icons/fi (FiGithub, FiLinkedin, FiTwitter, FiGlobe, FiChevronDown).

As a frontend developer, implement the FilingHero section for the Filing page using '../styles/FilingHero.css'. This is a static presentational section with no useState hooks. Renders a decorative background with fh-bg-radial and fh-bg-mesh divs. Content includes: a top bar with a three-crumb breadcrumb nav (Dashboard › Filings › USPTO Application) using anchor tags and a 'Draft in Progress' status badge with an animated dot. Below that, a hero row (fh-hero-row) splits into a headline group (Briefcase icon from lucide-react, h1 with fh-headline-accent span, subheadline paragraph) and a progress card (fh-progress-section) showing 'Step 2 of 5' counter, a progress track div with fh-progress-fill at 20%, and a steps row rendering the 5 filingSteps array items (Invention Details=done, Claims Review=active, Document Preview/Filing Details/Submit=pending) with CheckCircle2 icons for completed steps. CURRENT_STEP is hardcoded to 1 (0-indexed).

As a frontend developer, implement the FilingWizardSteps section for the Filing page using '../styles/FilingWizardSteps.css'. The component uses useState for activeStep (default 1) and renders a 5-step wizard from the STEPS array (Document Review, Application Type, Entity Info, Fee Calculation, Confirmation & Submit). Each step bubble is a motion.div with whileTap scale: 0.95, initial opacity: 0/y: 12, animate opacity: 1/y: 0 with staggered delay (idx * 0.08). Steps use getStepState() to assign 'is-completed', 'is-active', or 'is-future' CSS classes; completed steps render a custom CheckIcon SVG (polyline fws-check-path). Desktop shows horizontal step row; a connector line between steps reflects progress. progressPct is computed as ((activeStep-1)/(totalSteps-1))*100. An AnimatePresence block below renders the active step's desc text. A mobile vertical step list mirrors the same logic. Clicking any step bubble calls setActiveStep.

As a frontend developer, implement the DocumentPreview section for the Filing page using '../styles/DocumentPreview.css'. The component uses useState for progressVisible and a useRef (rootRef) wired to an IntersectionObserver (threshold: 0.15) that sets progressVisible to true on first intersection, triggering CSS progress bar animations. Renders: a section header with 'Document Preview' label and an inline SVG info icon with 'Not legal advice' disclaimer; a 4-item claims list (2 independent, 2 dependent) from the claims array showing claim number, type badge, and full text; a 4-item figures grid (FIG. 1–4) with label and desc; a document completeness meter with animated progress bar gated on progressVisible; and an export options row with 3 buttons (PDF/USPTO ready, DOCX/Editable, XML/EFS-Web) each with emoji icon rendered from the exportOptions array.

As a frontend developer, implement the ClaimsReview section for the Filing page using '../styles/ClaimsReview.css'. The component manages rich claim state from the CLAIMS_DATA array (6 claims: C1–C6, mix of independent/dependent types, some with flagged: true and flagReason text, deps arrays for dependency tracking). useState hooks manage: expandedClaim (which claim accordion is open), editingClaim (active inline edit target), editText (live textarea value), filter ('all'|'independent'|'dependent'|'flagged'), approvedClaims (Set), and rejectedClaims (Set). Renders: a header with claim count stats and filter tab buttons; a claim list where each item shows claim number badge, type tag, dependency chain display (deps mapped to claim numbers), flag warning banner (FiAlertTriangle + flagReason) for flagged claims, expandable full text, and action buttons for Approve (adds to approvedClaims Set) and Reject (adds to rejectedClaims Set) with visual state; an inline edit mode triggered per claim showing a textarea pre-filled with editText and Save/Cancel buttons; a summary footer showing approved/rejected/pending counts.

As a frontend developer, implement the FilingDetails section for the Filing page using '../styles/FilingDetails.css'. The component uses 10 state hooks: appType ('nonprovisional'), inventors (['']) array, address object ({street, city, state, zip, country: 'United States'}), phone, email, entitySize, category, touched (validation tracking object), breakdownOpen (fee accordion), and feeFlash (CSS flash trigger). Imports AlertCircle, AlertTriangle, Plus, X, ChevronDown, ChevronRight, DollarSign, FileText from lucide-react. computeFee(appType, entitySize) derives filing/search/examination/total from FEE_TABLE (provisional vs nonprovisional × micro/small/large). handleAppTypeChange and handleEntityChange call triggerFeeFlash (sets feeFlash true for 450ms via setTimeout) when values change, using useRef (prevEntityRef, prevTypeRef) to detect actual changes. Inventors list supports up to 6 entries with Plus/X add-remove buttons. Address fields with 5 inputs, validateEmail and validatePhone regex helpers guard email/phone inputs. ENTITY_OPTIONS and CATEGORY_OPTIONS render as radio/select groups. Fee breakdown accordion toggled by breakdownOpen with ChevronDown/Right icon swap.

As a frontend developer, implement the FeeCalculator section for the Filing page using '../styles/FeeCalculator.css'. The component uses useState for entityType ('large'), appType ('nonprovisional'), and animating (bool), plus a useRef (prevTotalRef) to track previous total for change detection. ENTITY_TYPES array defines 3 entity keys with discount factors (large: 0, small: 0.6, micro: 0.8). APP_TYPES has 3 options (nonprovisional, provisional, pct). BASE_FEES object maps each appType to 4 fee line items (filing, search, examination, publication) with base amounts and hex color codes (#6366F1, #10B981, #F59E0B, #94A3B8). computedFees maps each fee applying the entity discount to get amount and savings. formatUSD formats numbers with comma separators. Renders: entity type selector tabs; app type selector tabs; a fee breakdown list with each fee's name, desc, color-coded bar, original vs discounted amount, and savings badge; DISCOUNT_INFO banner showing the active discount label and percentage; and a total row. When total changes, triggers animating state for a CSS pulse effect.

As a frontend developer, implement the ConfirmationGates section for the Filing page using '../styles/ConfirmationGates.css'. The component manages 9 state hooks: attorneyChecked, disclaimerOpen, responsibilityChecked, mfaEnabled (hardcoded true), otpDigits (array of 6 empty strings), mfaVerified, mfaError, submitting, and a useRef otpRefs array for 6 digit inputs. Uses motion and AnimatePresence from framer-motion for gate reveal animations. allGatesCleared derives from all three gates: attorneyChecked && responsibilityChecked && mfaVerified. progressPct = Math.round((completedGates / totalGates) * 100). OTP flow: handleOtpChange validates digits-only input, auto-advances focus via otpRefs, handleOtpKeyDown handles Backspace (focus previous), ArrowLeft/Right navigation; handleOtpPaste strips non-digits and distributes pasted chars across inputs. handleVerifyMfa compares joined otpDigits to DEMO_VALID_CODE ('123456'), sets mfaVerified or mfaError. handleResendCode resets OTP state. handleSubmit checks allGatesCleared, sets submitting for 1800ms then redirects to '/Filing'. disclaimerOpen toggles an AnimatePresence accordion. Submit button is disabled until all gates clear.

As a frontend developer, implement the SubmissionStatus section for the Filing page using '../styles/SubmissionStatus.css'. The component uses useState for copied (bool). CONFIRMATION_NUMBER is hardcoded to 'USP-2026-0505-A7X3K' and RECEIPT_TIMESTAMP to 'May 5, 2026 — 14:37:22 UTC'. handleCopy writes to navigator.clipboard then sets copied true for 2200ms via setTimeout (with fallback for browsers lacking clipboard API). Renders: a decorative ss-bg-glow div; an animated success check wrap containing 8 ss-confetti-dot spans for burst animation and an SVG with a CSS-animated circle (ss-check-circle) and polyline tick (ss-check-tick); h2 heading 'Patent Application Filed!'; subheading referencing scenic-srs and USPTO; confirmation number display with FiCopy/FiCheck toggle button (copied state switches icon); receipt timestamp with FiClock icon; a 4-item nextSteps list rendered with dangerouslySetInnerHTML for bold formatting (USPTO Acknowledgment, Application Examination, Office Actions, Maintain Records); and action buttons row with FiHome (Dashboard), FiFileText (Download Receipt with FiDownload), and FiArrowRight (Track Application) using react-icons/fi.

As a frontend developer, implement the FilingFooter section for the Filing page. This reuses the LandingFooter component (already built in task 4b17a12b-3871-4ff9-872f-4135881c9569) from '../styles/LandingFooter.css'. The component uses useState for openCol (accordion index) and lang (language selector, default 'en'). Renders a parallax background with two lf-parallax-orb divs using CSS var(--scroll) transform. Content includes: brand block with 'scenic-srs' name and tagline; four footerColumns (Product, Company, Legal, Resources) as AnimatePresence accordion buttons with FiChevronDown; social links row (FiGithub, FiLinkedin, FiTwitter); and a language picker with 4 locales and FiGlobe icon. Note: component likely already exists from Landing page — verify before recreating.

As a frontend developer, implement the VerificationHero section for the Verification page (imports VerificationHero.css). Purely static — no state hooks. Renders a decorative vh-bg layer containing a vh-bg-gradient, vh-glow-ring, vh-glow-ring-outer, and 12 vh-ray divs generated via Array.from({length:12}). Main vh-content contains a vh-badge with pulsing vh-badge-dot labeled 'Secure Verification Portal', a vh-icon-wrapper with an SVG shield icon using a linearGradient (vh-shield-grad, #6366F1→#10B981) and an emerald checkmark path, an h1 headline, subtitle, and three reassurancePills (End-to-End Encrypted/green, USPTO Compliant/indigo, SOC 2 Certified/amber) each with inline SVG icons, plus a metaItems list of three security statements.

As a frontend developer, implement the VerificationStepTracker section for the Verification page (imports VerificationStepTracker.css). Defines a STEPS array of 6 objects (Credential Entry/completed, Security Check/completed, MFA Setup/active, Document Review/pending, Confirmation/pending, Success/pending). ACTIVE_INDEX is computed via findIndex on state='active' (=2). PROGRESS_PCT is calculated as (ACTIVE_INDEX / (STEPS.length-1)) * 95 + '%' for the desktop horizontal fill line; MOBILE_PROGRESS_HEIGHT = ACTIVE_INDEX * 68 + 20 + 'px' for vertical mobile layout. Renders a vst-track with role='list', a vst-progress-line div with inline width style, step dots with CheckIcon SVG (white checkmark) for completed steps and BadgeDot SVG for others, and an active step detail card below. No interactive state — display only based on static STEPS config.

As a frontend developer, implement the VerificationTrustIndicators section for the Verification page (imports VerificationTrustIndicators.css). Uses useState for activeTooltip (badge id or null). Defines 4 badges: ssl (TLS 1.3, pill 'Active'), mfa (MFA Enabled, pill 'Enabled'), coppa (COPPA Compliant, pill 'Compliant'), password (Password-Protected, pill 'Secured'). Each badge card renders a custom inline SVG icon component (LockIcon, MFAIcon, CoppaIcon, and a fourth PasswordIcon), the pill with variant-based class, name, desc, and an info button that toggles the tooltip. Tooltip content explains the technical detail (TLS traffic encryption, TOTP/FIDO2 second factor, COPPA under-13 restrictions, bcrypt cost-12 hashing). Tooltip dismisses on outside click or re-click of the info button.

As a frontend developer, implement the VerificationFAQ section for the Verification page (imports VerificationFAQ.css). Uses useState for openId (accordion — one open at a time). Defines 6 faqItems with id, icon string ('shield-question'/'shield'/'lock'/'edit'/'alert-circle'), question, answer, and optional badge ({label:'AES-256 Encrypted', type:'security'} on the password-security item). Icon strings map to inline SVG variants rendered by a switch/lookup. Accordion items toggle open/closed via setOpenId(id === openId ? null : id). When open, answer text and optional badge render inside an animated collapsible div. Topics cover: why credentials are needed, AES-256 password storage, MFA explanation, updating credentials, lost MFA device recovery, and data sharing policy.

As a frontend developer, implement the VerificationSupport section for the Verification page (imports VerificationSupport.css). Static layout — no state hooks. Defines 3 supportCards: Email Support (FiMail, vs-icon-wrap--email, no badge, mailto:support@scenic-srs.com), Chat with AI Mentor (FiMessageCircle, vs-icon-wrap--chat, badge 'AI-Powered'/vs-badge--ai, href '/Chat'), Knowledge Base (FiBook, vs-icon-wrap--kb, badge 'Instant'/vs-badge--instant, href '/Onboarding'). Each card conditionally renders the badge, icon wrapper, title, description, and a CTA anchor with FiArrowRight. Below the vs-grid renders a vs-availability banner with a pulsing vs-avail-dot indicating 24/7 support availability. Imports react-icons/fi: FiMail, FiMessageCircle, FiBook, FiArrowRight.

As a frontend developer, implement the VerificationFooter section for the Verification page by reusing the LandingFooter component (imports LandingFooter.css). Uses useState for openCol (accordion column index) and lang (default 'en'). Renders a parallax background with two lf-parallax-orb divs. Brand block shows scenic-srs name and tagline. Four accordion columns (Product, Company, Legal, Resources) toggle via toggleCol(idx). Bottom bar includes FiGithub/FiLinkedin/FiTwitter social links and a language dropdown (FiGlobe + FiChevronDown) with AnimatePresence for 4 language options (en/en-ca/fr/es), all animated via framer-motion. Note: this component already exists from Landing/Onboarding pages — verify and reuse rather than recreating.

As a frontend developer, implement the PatentabilityHero section for the Patentability page. Static section with no state. Imports ShieldCheck, Calendar, BarChart2, CheckCircle2, AlertCircle from lucide-react. Renders a decorative SVG shield watermark (ph-accent-bg) with two layered path shapes in indigo/violet. Breadcrumb nav links to /Dashboard, /Research, /Filing with › separators and ph-breadcrumb-current span. Title row renders ph-icon-shield div with ShieldCheck (size 24) plus h1 'AI-Driven Autonomous Patent Filing System' and subtitle paragraph. Meta row shows 'Under Review' badge with animated ph-status-dot, Calendar icon with 'Filed: May 5, 2026', and a filing reference element. SCORE_STATS array renders 3 stat cards (patentability 87%, claims 12, prior art conflicts 3) each with lucide icon, value, label, and a progress bar driven by barWidth and barColor values from the SCORE_STATS data.

As a frontend developer, implement the DiscussionComposer section for the Discussion page. Component uses useState for message, showMention, mentionFilter, activeFormats ({bold, italic, code, list}), attachments, isDragOver, and activeMentionIdx. useRef for textareaRef and fileInputRef. handleTextChange auto-resizes textarea (height capped at 200px via scrollHeight) and detects @mention trigger via regex /@(\w*)$/ on text before cursor position, setting showMention and mentionFilter accordingly. insertMention useCallback splices member name into message at the @ position and closes the dropdown. Mention dropdown renders filteredMembers (filtered from TEAM_MEMBERS by name/role) with initials avatars in member-specific colors (#6366F1/#10B981/#F59E0B/#EF4444/#818CF8), keyboard navigation via ArrowUp/Down/Enter. Toolbar renders FiBold/FiItalic/FiCode/FiList format toggles with activeFormats state, FiAtSign to trigger mention, FiPaperclip to open hidden fileInputRef. Drag-and-drop zone sets isDragOver on dragenter/dragleave. Typing indicator shows 'Priya & Jordan are typing…' from TYPING_USERS. FiSend submit button disabled when isEmpty. FiZap AI-assist button. Attachment chips with FiX remove. Imports DiscussionComposer.css.

As a frontend developer, implement the VerificationCredentialForm section for the Verification page (imports VerificationCredentialForm.css). Uses useState for authMode ('credentials'|'oauth'), username, password, oauthToken, showPassword, touched ({username, password, oauthToken}), loading, and submitted. AUTH_MODES tabs switch between 'USPTO Login' (User icon) and 'OAuth Token' (Key icon) modes. calcPasswordStrength() scores 0-4 against length≥8, uppercase, digit, special char — rendered as STRENGTH_LABELS['','Weak','Fair','Good','Strong'] with a 4-segment bar. Inline validation: usernameError (min 3 chars), passwordError (min 8 chars), oauthError (must start with 'ey' JWT). handleBlur sets touched state. handleSubmit validates isCredentialsValid then runs a 1800ms loading simulation (Loader2 spinner) before setSubmitted(true). Imports lucide-react icons: Lock, User, Eye, EyeOff, Key, ShieldCheck, AlertCircle, CheckCircle2, Info, ArrowRight, Loader2, LogIn.

As a frontend developer, implement the VerificationSecurityChecklist section for the Verification page (imports VerificationSecurityChecklist.css). Defines 6 checklistItems with status 'pass'/'fail'/'pending': Password Contains Uppercase (pass), Account Has No Pending Disputes (pass), Device Is Recognized (fail), Session Is Encrypted TLS 1.3 (pass), Multi-Factor Authentication Ready (pending), Session Integrity Verified (pass). Uses useState for visibleCards array and useRef for cardRefs array. IntersectionObserver is set up per card in useEffect — on intersection, a staggered setTimeout adds each card index to visibleCards, triggering CSS entrance. statusConfig maps each status to cardClass, iconClass, badgeClass, and BadgeIcon (CheckCircle2/XCircle/null). Imports lucide-react icons: ShieldCheck, KeyRound, MonitorSmartphone, Lock, UserCheck, AlertTriangle, CheckCircle2, XCircle, Clock, ArrowRight, ShieldAlert.

As a frontend developer, implement the PatentabilityOverview section for the Patentability page. Uses useState for cardVisible, pillsVisible, barsAnimated; useRef for cardRef, pillRefs array, barRefs array. IntersectionObserver on cardRef triggers setCardVisible(true), then sequentially triggers setPillsVisible and setBarsAnimated via chained timeouts. VERDICT object renders a 'Promising' badge with type-driven CSS class. SUMMARY string renders as a prose paragraph. METRICS array (4 items: novelty 87/100, non-obviousness 74/100, disclosure 92%, claims 18) each with inline SVG icon, name, value+unit text, and an animated progress bar whose width transitions from 0 to barWidth when barsAnimated is true. TIMESTAMP 'May 5, 2026 · 14:32 UTC' renders as a footer note on the card.

As a frontend developer, implement the PatentabilityScorecard section for the Patentability page. METRICS array defines 4 cards: Overall (78, #6366F1, 'Likely Patentable'), Novelty (84, #10B981, 'Novel'), Non-Obviousness (71, #F59E0B, 'Meets Threshold'), Disclosure (91, #38BDF8, 'Complete'). RadialProgress subcomponent renders an SVG with psc-radial-track circle and psc-radial-fill circle; strokeDashoffset animates from CIRCUMFERENCE (2π×52) to CIRCUMFERENCE-(value/100×CIRCUMFERENCE) over 1.4s cubic-bezier when animated=true. MetricCard subcomponent uses local useState for animated, triggered by a 100ms setTimeout when visible prop becomes true. IntersectionObserver on the section root drives a visible state array to stagger card entrance. Each card renders --card-accent CSS var, psc-card-glow div, radial SVG, numeric value in accent color, label, interpretation text, and a tier badge with dynamic bg/border/color from METRICS data.

As a frontend developer, implement the PatentabilityStrengths section for the Patentability page. Uses useState for isOpen (default true) to control accordion expand/collapse. Imports CheckCircle, ChevronDown, ShieldCheck, Star, Zap, Layers, Lock, GitBranch, Award from lucide-react. Header button toggles isOpen with aria-expanded and aria-controls='ps-body-content'. Header renders Award icon (size 20), title 'Patentability Strengths', and subtitle showing strengths.length count. strengths array contains 6 items each with title, desc, tag badge, and a lucide icon component (Star, Layers, Zap, Lock, GitBranch, ShieldCheck). Collapsed state hides ps-body-content; expanded state renders each strength as a card with icon, title, desc paragraph, and colored tag chip. ChevronDown rotates on open via CSS class.

As a frontend developer, implement the PatentabilityWeaknesses section for the Patentability page. Uses useState for expandedId (accordion), useRef and useEffect with IntersectionObserver for scroll-triggered card entrance animations. Imports AlertTriangle, ChevronDown, CheckCircle, AlertCircle, Info from lucide-react. weaknesses array contains 4 items (w1–w4) each with id, title, description, severity ('high'|'medium'), and remediation string. Each weakness card renders a severity indicator icon (AlertTriangle for high, AlertCircle for medium), title, description paragraph, and a collapsible remediation panel controlled by expandedId state. ChevronDown icon rotates when item is expanded. High severity cards receive distinct CSS accent treatment. Card visibility driven by IntersectionObserver triggering CSS entrance classes.

As a frontend developer, implement the PatentabilityClaims section for the Patentability page. Uses useState for expandedId, useRef and useEffect with IntersectionObserver for scroll-driven reveal. Imports FiChevronDown, FiCheckCircle, FiAlertTriangle, FiXCircle from react-icons/fi. CLAIMS array contains multiple items each with id, num, type ('Independent'|'Dependent'), status ('pass'|'warn'|'fail'), score (0-100), briefFeedback, fullClaimText, examinerFeedback, and tags array. Each claim renders a header row with claim number, type badge, status icon (FiCheckCircle/FiAlertTriangle/FiXCircle), score chip, and briefFeedback summary. Clicking a claim expands an accordion panel showing fullClaimText in a code-style block and examinerFeedback paragraph, plus tag chips. FiChevronDown rotates on expand. Score chips are color-coded by value range.

As a frontend developer, implement the PatentabilityPriorArt section for the Patentability page. Uses useState for expandedId, useRef and useEffect with IntersectionObserver for card entrance animations. Imports FiExternalLink, FiCalendar, FiChevronDown, FiAlertTriangle, FiCheckCircle, FiAlertCircle from react-icons/fi. priorArtReferences array contains 5 references each with id (patent number), title, filingDate, grantDate, relevanceScore (0-100), severity ('high'|'moderate'|'low'), overlapSummary, usptoLink, and googleLink. Each reference card renders patent ID, severity badge with appropriate FiAlert icon, relevanceScore as a percentage bar and numeric chip, title, filingDate with FiCalendar icon, grantDate, and a collapsible overlapSummary panel. Expanded state controlled by expandedId. External link buttons use FiExternalLink and open usptoLink/googleLink in new tabs.

As a frontend developer, implement the PatentabilityRecommendations section for the Patentability page. Uses useState for expandedId and completedIds (Set), useRef and useEffect with IntersectionObserver for scroll-triggered reveal. Imports ChevronDown, Check, FileText, ExternalLink, Zap, Edit3 from lucide-react. RECOMMENDATIONS array contains items each with id, number ('01'–N), priority ('critical'|'high'|'medium'), category string, title, impact (1-5 star rating), guidance (JSX with bold labels and inline links), and docLinks array ({label, href}). Each recommendation renders a priority badge (critical/high/medium with color coding), number chip, category tag, title, impact star row, and a collapsible guidance panel. Guidance JSX includes <strong> labels, <br/> breaks, and inline anchor tags. docLinks render as anchor chips with ExternalLink icon. A Check button marks items as completed via completedIds state toggling.

As a frontend developer, implement the PatentabilityActions section for the Patentability page. Uses three independent useState booleans: refining, reviewing, exporting. handleRefine sets refining=true, waits 900ms via setTimeout, then navigates to /Document via window.location.href. handleReview sets reviewing=true, waits 1800ms, then resets. handleExport sets exporting=true, waits 1200ms, then resets. Imports FileEdit, ShieldCheck, FileDown, MessageCircle, Loader2, Sparkles from lucide-react. paa-primary-group renders three buttons: 'Refine Document' (paa-btn-refine, FileEdit icon, navigates to /Document), 'Run Full Review' (paa-btn-review, ShieldCheck icon, PRO badge with Sparkles size 9), 'Export PDF' (paa-btn-export, FileDown icon). All buttons show Loader2 spinner with spin animation when their loading state is true and receive paa-loading class + disabled prop. paa-secondary-group renders a 'Talk to Examiner Bot' anchor linking to /Chat with MessageCircle icon.

As a frontend developer, implement the VerificationMFASetup section for the Verification page (imports VerificationMFASetup.css). Defines 3 TABS (SMS/FiSmartphone, TOTP/FiShield, Security Key/FiKey) with a tab switcher. SMSPanel sub-component uses useState for phone, countryCode (from COUNTRY_CODES: +1/+44/+61/+49/+33/+81/+86), codeSent, otp (6-element string array), countdown (60s interval via setInterval/timerRef), and inputRefs for OTP auto-focus. TOTPPanel renders a decorative QRCodeSVG (21×21 SVG grid of rect cells from hardcoded binary pattern array, each cell 7.2px, rx=0.8), displays SECRET_KEY='JBSWY3DPEHPK3PXP' with FiCopy copy button and copied state, and lists 8 BACKUP_CODES with FiDownload. Security Key panel shows FIDO2/WebAuthn instructions. Imports react-icons/fi: FiSmartphone, FiShield, FiKey, FiCopy, FiCheck, FiAlertTriangle, FiDownload, FiChevronRight, FiLock.

As a frontend developer, implement the VerificationReview section for the Verification page (imports VerificationReview.css). Static display component — no state hooks. Renders a vr-header with step label 'Step 5 of 6 — Review', title, and subtitle. Main vr-card contains a credentials group with 3 credentialRows: USPTO Username (FiUser, value 'inventor_jsmith_2026'), Email Address (FiMail with vr-row-icon--success, value 'j.smith@cloudwash.io', pill 'Verified'/vr-pill--verified), Account Password (FiLock, masked value '••••••••••••', vr-row-value--mono, pill 'Set'/vr-pill--active). Each row has an FiEdit2 edit link pointing to '/Verification'. A security summary group renders a 6-item list (Password strength, No breach, Email validated, Account not flagged, SSL/TLS secured, USPTO reachable) each with FiCheck. An FiShield MFA status block and FiSmartphone device block appear below. Imports react-icons/fi icons throughout.

As a frontend developer, implement the VerificationConfirmation section for the Verification page (imports VerificationConfirmation.css). Uses useState for checked ({credential_storage, responsibility}), password, showPassword, passwordTouched, submitting, and submitted. Two GATES are rendered as sequential unlock cards: gate1 (credential_storage) is always unlocked; gate2 (responsibility) unlocks only when gate1Done. Each gate shows a checkbox, title, desc, statusPending/statusDone pill. A gate3 password field (FiEye/FiEyeOff toggle, min 8 chars, FiAlertTriangle error) appears when gate2Done. REQUIREMENTS checklist (3 items) shows live pass/fail icons. allGatesPassed = gate1Done && gate2Done && passwordValid. handleSubmit runs a 1800ms submitting simulation then setSubmitted(true). When submitted, renders a vc-success-overlay with FiCheckCircle icon. A progressSteps array (4 steps: Credentials/Responsibility/Identity/Confirmed) tracks activeStep via findIndex. Imports react-icons/fi: FiCheck, FiLock, FiEye, FiEyeOff, FiAlertTriangle, FiShield, FiArrowRight, FiX, FiCheckCircle.