instructSite

As a frontend developer, implement the LandingHero section from `LandingHero.jsx`. Build a React Three Fiber `Canvas` scene containing: a `BlueprintPlane` mesh with a procedurally generated 512×512 canvas grid texture (light grid lines, boundary rectangles, floor-plan shapes drawn via canvas 2D API); a `Float` wrapper from `@react-three/drei` for gentle floating animation; `OrbitControls` for interactive camera; and 4 `conflictData` conflict markers at specific `[x,y,z]` positions (HVAC Duct Overlap, Fire Rating Mismatch, Egress Width Deficiency, Waterproofing Scope Gap) each with clickable `Html` overlays showing title, type, desc, keywords, and suggestion. Use `useState` for selected conflict ID, `useRef` for the canvas, `useMemo` for the texture, `useCallback` for click handlers, and `useFrame` for any per-frame animation. Layer framer-motion `AnimatePresence` for the conflict detail panel slide-in outside the Canvas. Import `THREE` for geometry and materials.

As a frontend developer, implement the TrustBadges section from `TrustBadges.jsx`. Build 8 `BadgeCard` components sourced from a `badges` array, each with a lucide-react icon (BarChart3, ShieldCheck, Zap, Users, Award, Building2, Code2, Globe), a stat label, and a `numericTarget`. Implement the custom `useCountUp` hook using `requestAnimationFrame`, a cubic ease-out curve (`1 - Math.pow(1-progress, 3)`), per-badge stagger `delay`, and a `hasAnimated` ref to prevent re-triggering. Use `useInView` from framer-motion to gate animation start. Apply `containerVariants` with `staggerChildren: 0.07` and `badgeVariants` (opacity 0→1, y 20→0, 0.5s easeOut) on the grid container. Each card also features a CSS 3D icon flip effect via `tb-icon-flip` class.

As a frontend developer, implement the LandingFeatures section from `LandingFeatures.jsx`. Render 6 `FeatureCard` components from the `features` array, each with a lucide-react icon (FileUp, Brain, AlertTriangle, GitCompare, Search, FileBarChart), a title, description, and a `useCase` string. Implement card-level hover state via `useState` that toggles a use-case detail panel visible with `AnimatePresence`. Use `useRef` and `useCallback` for focus/hover management. Apply framer-motion entry animations for staggered card appearance. The grid layout should be responsive (likely 2- or 3-column). Feature IDs are `feature_card_1` through `feature_card_6`.

As a frontend developer, implement the InteractiveBlueprintShowcase section from `InteractiveBlueprintShowcase.jsx`. Build a React Three Fiber `Canvas` scene with: a `BlueprintPlane` using a 1024×1024 canvas-generated dark blueprint texture (navy background `#1a2840`, minor grid at 32px, major grid at 128px, room rectangles and dashed reference lines); `PerspectiveCamera` and `OrbitControls` from `@react-three/drei`; 3 `CONFLICTS` markers (Missing Interface Details at [1.8,0.12,-0.6], Electrical Pathway Overlap at [-1.5,0.12,0.8], Fire Rating Discrepancy at [0.3,0.12,-1.4]) each with severity (High/Medium), keyword count, and stage progress. Use `Html` overlaid tooltips/panels for selected conflict detail. Manage selected conflict with `useState`, use `useMemo` for textures, `useCallback` for click events, and `useFrame` for continuous idle rotation or pulse animation. Layer framer-motion `AnimatePresence` outside Canvas for the conflict detail drawer with severity badge and keyword chips.

As a frontend developer, implement the HowItWorks section from `HowItWorks.jsx`. Render 4 `steps` (Upload, Analyze, Match, Review) each with a lucide-react icon (Upload, Sparkles, CheckCircle, ClipboardList), a colored `hiw-icon-wrap--*` class, a title, and description. Between steps render `HorizontalConnector` (desktop) and `VerticalConnector` (mobile) SVG components, each containing animated `motion.path` (strokeDasharray/strokeDashoffset path draw) and `motion.polygon` arrow using `connectorVariants` and `arrowVariants`. Use `useRef` + `useInView` from framer-motion to trigger `containerVariants` (staggerChildren 0.18) and `stepVariants` (opacity/y, 0.5s cubic ease) when section scrolls into view.

As a frontend developer, implement the Testimonials section from `Testimonials.jsx`. Render 3 `TestimonialCard` components (Sarah Chen / SC / tm-avatar-1, Marcus Rivera / MR / tm-avatar-2, Elena Kowalski / EK / tm-avatar-3) each showing a `StarRating` (5 ★ spans), an animated `motion.p` quote (color transitions between `#1A202C` focused and `#718096` unfocused), and an avatar with a `motion.div` name underline that `scaleX` animates 0→1 when focused. Implement a carousel/slider with `useRef` on `trackRef` and `containerRef`, `cardWidth` state measured on resize, `useAnimation` controls for track translation, `activeIndex` state, auto-play via `useRef` interval cleared on hover (`isPaused` state), and manual prev/next dot navigation. Card gap is 16px (`CARD_GAP`).

As a frontend developer, implement the LandingPricing section from `LandingPricing.jsx`. Render 3 pricing tiers (Starter $49/$39, Professional $129/$99 — popular, Enterprise — contact sales) from the `tiers` array. Implement a monthly/annual billing toggle via `useState` that animates price swap with `AnimatePresence`. Each `PricingCard` uses `cardVariants` with custom delay `(i * 0.15)` for staggered entry. Feature lists animate in with `featureContainerVariants`. Each feature row uses a custom `CheckIcon` component: a `motion.svg` with `motion.path` checkmark that animates `pathLength` 0→1 with a per-item `delay` prop. The Professional tier renders a 'Most Popular' badge. CTA buttons link to `/Signup` (outline and primary styles) or `/Landing` (Enterprise).

As a frontend developer, implement the LandingFAQ section from `LandingFAQ.jsx`. Render 6 `AccordionItem` components from `faqData` (faq1–faq6 covering AI extraction, integrations, file formats, security, analysis speed, and API access). Each item uses `useState` for `openId` with a single-open accordion pattern via an `onToggle` callback. Open items expand their answer with `AnimatePresence` + `motion.div` height animation. A `ChevronIcon` component uses `motion.svg` with `animate={{ rotate: isOpen ? 180 : 0 }}` spring transition (stiffness 200, damping 20). Alternate items receive `fq-item-alt` class for visual banding.

As a frontend developer, implement the LandingCTA section from `LandingCTA.jsx`. Build a full-width CTA section with a parallax background layer (`lc-parallax-bg`) using a CSS `--scroll` custom property offset, an SVG grid pattern (`lc-grid-lines`) with horizontal/vertical lines, dashed rectangles, and circles. Implement an email input with `useState` for `email` and `showSuggestions`; compute `localPart`, `hasAt`, `afterAt` to filter `domainSuggestions` (@gmail.com, @outlook.com, @company.com, @yahoo.com); display filtered suggestions dropdown with `AnimatePresence`; handle `handleSuggestionClick`, `handleEmailChange`, and `handleBlur` (150ms timeout). Use `useInView` with `once: true, margin: '-80px'` to gate section entrance. Animate headline with `headlineVariants` (y 30→0, 0.6s), subtitle with `subVariants` (delay 0.15), email row with `emailVariants` (delay 0.3), and CTA buttons with `btnStagger` custom delay (i * 0.12 starting at 0.45). Include a `Mail` lucide icon in the input.

As a frontend developer, implement the Footer section from `Footer.jsx`. Build 4 `linkColumns` (Product, Company, Resources, Legal) each with 3 anchor links pointing to `/Landing`. Render 3 `SocialIcon` components (LinkedIn, GitHub, Twitter/X) as `motion.a` elements that use `hoveredIcon` and `setHoveredIcon` state to drive individual hover scale/opacity and dim sibling icons (`isOtherHovered` logic). The footer logo section mirrors the Navbar blueprint SVG mark with `nb-logo-text` styling. Include a newsletter or copyright bottom bar. Use `AnimatePresence` for any hover tooltip labels. Note: this component may already exist from a prior page — reuse or extend as needed.

As a frontend developer, implement the Navbar section for the Login page. This component is shared with the Landing page (task d32a0e14-8f41-4d70-a497-bc3f715ff2d8) and may already exist. It uses framer-motion for animated SVG logo path drawing (blueprintPathD and accentPathD with strokeDashoffset animation over 1.2s), scroll-aware state via useEffect/window.scrollY toggling nb-scrolled class, mobile drawer with AnimatePresence slide-in from x:'100%' using spring physics (stiffness 320, damping 32), hamburger toggle with body overflow lock, CTA ripple effect using AnimatePresence scale animation, and navLinks array covering Landing/Dashboard/Analysis/Results/Rules/Uploads/ScopeGaps/Settings routes.

As a frontend developer, implement the Navbar section for the Signup page. This component is shared with Landing and Login pages — reuse the existing Navbar component if already built. The Navbar uses useState for isOpen (mobile menu toggle) and scrolled (scroll-triggered background), and ctaHover for CTA ripple effect. useEffect hooks manage scroll listener (window.scrollY > 10 threshold) and body overflow lock when mobile menu is open. The logo features two animated SVG paths (blueprintPathD and accentPathD) drawn via framer-motion strokeDashoffset animation over 1.2s with 0.3s delay on accent path. Desktop nav renders navLinks array (Landing, Dashboard, Analysis, Results, Rules, Uploads, ScopeGaps, Settings). Desktop actions include nb-btn-signin and nb-btn-signup anchors plus a motion.a CTA with ripple animation. AnimatePresence controls mobile drawer visibility. Styles from Navbar.css.

As a backend developer, implement the FastAPI POST /api/v1/analyze-blueprint endpoint with full production logic: (1) accept multipart/form-data PDF upload with project_id and drawing_name params, (2) use PyMuPDF (fitz) to stream raw bytes via fitz.open(stream=pdf_bytes, filetype='pdf') and extract all text callouts per page using page.get_text('text'), (3) query Supabase 'interface_risk_rules' table for keyword arrays and default_severity, (4) cross-match extracted text against keywords — flag conflict when any rule accumulates 2+ keyword matches, (5) auto-insert each conflict into Supabase 'scope_gaps' table with status='Open' and matched default_severity, (6) return JSON with conflicts_found count. Add PyMuPDF to requirements.txt. This task is the backend counterpart to UploadZone, AnalysisProgress, ConflictDetail, and ConflictSummary frontend sections. CORS middleware must allow frontend origin. Depends on Supabase schema being initialized.

As a backend developer, implement FastAPI CRUD endpoints for the 'interface_risk_rules' table to support the Rules page frontend sections (RulesKeywordManagement, RulesTemplateLibrary, RulesSeverityLevels, RulesAdvancedOptions): GET /api/v1/rules (list all rules with optional filters by category/status), POST /api/v1/rules (create new rule with name, keywords array, default_severity, template, category), PUT /api/v1/rules/{id} (update rule fields), DELETE /api/v1/rules/{id} (soft or hard delete). All endpoints interact with Supabase via the Python supabase client. Input validation via Pydantic models (RuleCreate, RuleUpdate). Return standardized JSON response envelopes. Note: RulesKeywordManagement, RulesTemplateLibrary, RulesSeverityLevels frontend tasks will need to be wired to these endpoints when integrating.

As a backend developer, implement FastAPI endpoints for the 'scope_gaps' table to support the ScopeGaps page frontend sections (GapsList, FilterBar, StatusUpdateBar, DetailModal): GET /api/v1/scope-gaps (list with optional query params: status, severity, project_id, date_from, date_to, search), GET /api/v1/scope-gaps/{id} (detail with matched rule join), PUT /api/v1/scope-gaps/{id} (update status, severity, assignee, notes), DELETE /api/v1/scope-gaps/{id}. Implement Pydantic models (ScopeGapUpdate). Support bulk status update via POST /api/v1/scope-gaps/bulk-update accepting an array of ids and status/severity/assignee fields (required by StatusUpdateBar). Return paginated responses with total_count for FilterBar pagination support. Note: GapsList, StatusUpdateBar, and FilterBar frontend tasks need to integrate with these endpoints.

As a backend developer, implement FastAPI endpoints to support the UploadsHistory and DashboardRecentUploads frontend sections: GET /api/v1/uploads (paginated list with filters: status, date range, search by filename; returns id, filename, file_size, status, upload_date, conflicts_count, project_id), GET /api/v1/uploads/{id} (single upload detail including analysis phases and conflict summary), DELETE /api/v1/uploads/{id}, POST /api/v1/uploads/{id}/reanalyze (re-trigger analysis pipeline for an existing upload). Store upload metadata in a new 'uploads' Supabase table (id, project_id, filename, file_size, status: pending/analyzing/complete/error, uploaded_at, conflicts_count). Note: UploadsHistory (Uploads page), DashboardRecentUploads, and AnalysisProgress frontend tasks need integration with these endpoints.

As a backend developer, implement FastAPI endpoints to persist user/system settings from the Settings page sections (SettingsProfile, SettingsSystemConfig, SettingsSeverities, SettingsNotifications, SettingsDataRetention, SettingsDangerZone): GET /api/v1/settings (returns all user and system config fields), PUT /api/v1/settings/profile (update fullName, email, role, bio, avatar, notificationPreferences), PUT /api/v1/settings/system (update pdfTimeout, maxFileSize, sensitivity, autoFlag), PUT /api/v1/settings/severities (update severity level thresholds and colors array), PUT /api/v1/settings/notifications (update notification config array), POST /api/v1/settings/danger/reset-defaults (reset system config to defaults), POST /api/v1/settings/danger/clear-history (purge upload/analysis history), POST /api/v1/settings/danger/revoke-tokens (invalidate API tokens), DELETE /api/v1/settings/danger/deactivate-account. Store settings in a Supabase 'user_settings' table keyed by user_id. All destructive endpoints require a confirmation token in the request body.

As a backend developer, harden the FastAPI CORS and security middleware configuration for production readiness: (1) Update CORSMiddleware allow_origins to read from CORS_ORIGINS env var (comma-separated list) instead of wildcard '*', falling back to '*' only in development mode. (2) Add request size validation middleware that rejects uploads exceeding MAX_UPLOAD_SIZE_MB env var (default 50MB) with HTTP 413 before PyMuPDF processing. (3) Add a file type validation check (validate Content-Type: application/pdf and magic bytes %PDF-) in the analyze-blueprint endpoint before processing. (4) Add rate limiting via slowapi (fastapi-limiter or slowapi) on the /api/v1/analyze-blueprint endpoint to prevent abuse (10 requests/minute per IP). (5) Add structured JSON error responses with error_code, message, and detail fields for all HTTPException handlers. Update requirements.txt with slowapi.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a Three.js WebGL canvas (canvasRef via useRef) with an OrthographicCamera and a blueprint grid scene: 28 vertical and 16 horizontal LineBasicMaterial lines at opacity 0.07 using color 0x2A4365, plus architectural accent shapes (L-brackets, dimension lines with tick marks, cross-hatch rectangles, cross-section detail polygons) rendered as THREE.Line objects at opacity 0.13. A ResizeObserver handles responsive canvas resizing by updating camera frustum left/right/top/bottom. The renderer uses alpha:true and antialias:true. Cleanup disposes the renderer and ResizeObserver on unmount.

As a frontend developer, implement the LoginForm section for the Login page. The form uses useState hooks for: email, password, showPassword (toggle via EyeIcon/EyeOffIcon SVG components), rememberMe checkbox, isLoading, errors object, and successState. Inline SVG icon components include MailIcon, LockIcon, EyeIcon, EyeOffIcon, CheckCircleIcon, BlueprintIcon (replicating the navbar logo paths), GoogleIcon (multi-path colored SVG for Google OAuth), and GithubIcon (filled SVG). The form includes floating label inputs with lf- prefixed CSS classes, password visibility toggle button, remember me checkbox, forgot password link, primary submit button with loading state, OAuth divider with Google and GitHub buttons, and a sign-up redirect link. Client-side validation sets errors state before submission.

As a frontend developer, implement the LoginFooter section for the Login page. This is a minimal footer component (distinct from the full site Footer used on Landing) that renders a nav element with aria-label='Footer navigation' containing a ul of legalLinks (Terms of Service /Terms, Privacy Policy /Privacy, Support /Support) separated by lf-separator li elements with '·' characters. Below the nav is a copyright paragraph using new Date().getFullYear() with an lf-brand span for 'instructSite'. Uses lf- prefixed CSS classes (lf-root, lf-inner, lf-links, lf-link, lf-separator, lf-copyright, lf-brand).

As a frontend developer, implement the SignupForm section for the Signup page. The component is a 4-step wizard controlled by useState step (0–3) with STEPS array labels: Email, Password, Details, Verify. Fields state tracks email, password, confirmPassword, fullName, company, role, and terms checkbox. touched state drives per-field error visibility via handleBlur. getPasswordStrength() computes a score 0–4 from length, case mix, digits, and special chars, returning label ('Weak'/'Fair'/'Good'/'Strong') and CSS class (sf-sl--weak/fair/good/strong). getBarClass() maps bar index to score class for 4 visual strength bars. validateEmail() uses regex. step0Valid gates email step; step1Valid gates password/confirmPassword; step2Valid gates fullName/company/role/terms. showPassword and showConfirm toggles control Eye/EyeOff lucide icons on password inputs. ROLES dropdown contains 8 architect/engineering roles. submitting state manages async submit. Icons used: Mail, Lock, Eye, EyeOff, User, Building2, Briefcase, CheckCircle, AlertCircle, ArrowLeft, Send from lucide-react. Styles from SignupForm.css.

As a frontend developer, implement the SignupBenefits aside section for the Signup page. This is a static informational panel with no state. Renders a blueprint grid underlay div (sb-grid-bg) and two decorative accent circles (sb-accent-circle--1, sb-accent-circle--2). The sb-header contains an eyebrow label 'Why instructSite', h2 title, and subtitle paragraph. sb-cards maps over a 4-item benefits array — each card renders a lucide icon (Zap/emerald, BrainCircuit/blue, AlertTriangle/orange, SearchX/crimson) inside a color-variant sb-icon-wrap, plus sb-card-title with color variant class and sb-card-desc. A stats section renders 3 progress-bar items (Processing time <5s/92%/emerald, Accuracy rate 99.1%/99%/blue, File size support 50MB/75%/orange) with inline width styles and color variant classes. A ShieldCheck icon appears in a trust badge. Fully static, no hooks or API calls. Styles from SignupBenefits.css.

As a frontend developer, implement the DashboardNavbar section for the Dashboard page. This reuses the shared Navbar component (may already exist from Landing/Login/Signup pages). The component uses useState for isOpen (mobile menu), scrolled (scroll detection), and ctaHover states. It includes: animated SVG logo with framer-motion strokeDashoffset draw animation for blueprintPathD and accentPathD paths (1.2s easeInOut, 0.3s delay on accent), useEffect scroll listener setting 'nb-scrolled' class at scrollY>10, body overflow lock when mobile menu opens, desktop nav links array (Landing/Dashboard/Analysis/Results/Rules/Uploads/ScopeGaps/Settings), Sign In/Sign Up buttons, and a CTA with ripple animation. References Navbar.css styles with nb-root, nb-inner, nb-logo-wrap, nb-nav, nb-actions class namespace.

As a frontend developer, implement the Navbar section for the Home page. This component may already exist from previous pages (Login, Signup, Landing). It uses framer-motion for animated SVG logo path draw (blueprintPathD, accentPathD with strokeDashoffset animation over 1.2s), useState for isOpen/scrolled/ctaHover, useEffect for scroll listener (nb-scrolled class at scrollY>10) and body overflow lock when mobile drawer open. Desktop nav renders 8 navLinks (Landing, Dashboard, Analysis, Results, Rules, Uploads, ScopeGaps, Settings). CTA button uses motion.a with AnimatePresence ripple effect (scale 0→18, opacity 0.6→0). Mobile hamburger animates 3 .nb-ham-line spans into X via CSS transforms. Mobile drawer uses spring animation (stiffness:320, damping:32) sliding from x:'100%'. Responsive breakpoint at 1024px hides hamburger and shows desktop nav/actions.

As a backend developer, implement FastAPI export endpoints to support the ExportOptions frontend section on the Results page: GET /api/v1/exports/pdf?project_id={id}&include_pdfs=bool&include_recommendations=bool&include_keyword_map=bool&include_scope_gaps=bool&include_metadata=bool (generates and streams a PDF report using reportlab or weasyprint), GET /api/v1/exports/csv?project_id={id} (streams a CSV of conflicts with columns: id, rule_name, severity, status, keywords, matched_text, detected_at). Both endpoints should set appropriate Content-Disposition headers for file download. Add reportlab or weasyprint to requirements.txt if used. Note: ExportOptions frontend task (id: 67e9e9b0) needs to call these endpoints in handlePdfExport and handleCsvExport.

As a backend developer, implement FastAPI endpoints to power the Dashboard frontend sections (DashboardMetrics, DashboardAnalysisOverview, DashboardConflictSummary, DashboardHeader): GET /api/v1/dashboard/metrics (returns totalAnalyses, pendingReviews, resolvedConflictsRate, avgProcessingTime computed from Supabase aggregates), GET /api/v1/dashboard/analysis-overview?range=7d|30d|90d|all (returns completed/in_progress/failed/queued counts for donut chart), GET /api/v1/dashboard/conflict-summary (returns top conflicts by frequency with severity distribution, matched rules count, last seen drawing references), GET /api/v1/dashboard/filters (returns counts per filter tab: all, pending, conflicts, resolved, in_progress). All queries use Supabase PostgREST aggregate functions. Cache-friendly with ETag or Cache-Control headers for dashboard polling.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. The component uses useState for mobileOpen, expandedItems ({conflicts: false, uploads: false, rules: false}), and profileOpen states. It renders grouped navSections (Main, Analysis, Configuration) with lucide-react icons: LayoutDashboard, AlertTriangle, Upload, BookOpen, Settings. Each nav item supports badge counts (conflict=12, upload=3, rule=47) with type-specific badge variants, and expandable subItems via toggleExpanded(id) accordion pattern using ChevronRight rotation. A mobile hamburger button toggles mobileOpen with ds-mobile-trigger/ds-open classes. A profile section at the bottom renders a dropdown (profileDropdownItems) with User, Bell, HelpCircle, LogOut icons, toggled via toggleProfile with e.stopPropagation(). The sidebar uses ds-root, ds-mobil CSS namespace from DashboardSidebar.css.

As a frontend developer, implement the DashboardFooter section for the Dashboard page. This reuses/adapts the shared Footer component (may already exist from Landing page). Uses useState for email (string) and subscribed (boolean) for a newsletter subscription form with handleSubscribe(e) handler that sets subscribed=true on non-empty email. Renders 3 link columns: Product (Dashboard/Analysis/Uploads/Results/Scope Gaps), Company (Home/Landing/Login/Sign Up/Settings), Resources (Rules Manager/API Documentation/Blueprint Guide/Conflict Glossary/Release Notes). Includes animated SVG logo using blueprintPathD and accentPathD constants. Social icons: GitHubIcon, TwitterIcon, LinkedInIcon as inline SVG components using df-social-icon class. Bottom bar shows copyright and legal links. References DashboardFooter.css with df- class namespace.

As a frontend developer, implement the HomeHero section for the Home page. Uses @react-three/fiber Canvas with Suspense fallback containing a full 3D blueprint scene: BlueprintFloor (rotating group via useFrame at 0.08 rad/s), BlueprintWall meshes (boxGeometry with emissive materials), ConflictMarker spheres with pulsating animation (scale 1→1.4→1 loop), and DimensionLine components using BufferGeometry. OrbitControls, Grid, and Environment from @react-three/drei are included. Background is animated gradient (hh-gradient-sweep keyframe over 6s). Parallax layers: hh-parallax-bg (blueprint grid, speed -0.3x scroll) and hh-parallax-mid (4 blurred shapes with hh-float-1/hh-float-2 keyframe animations). CTA group has RippleButton primary (hh-ripple-anim) and glass secondary button. hh-headline-accent has animated underline (scaleX 0→1 after 0.8s delay). Stats row shows 3 metrics. Scroll indicator with animated hh-scroll-wheel. Canvas has scan line animation (hh-scan keyframe). Responsive: full-height 100vh hero, canvas height scales from 50vh→60vh. Mobile CTAs stack vertically.

As a frontend developer, implement the HomeTrustBadges section for the Home page. Uses framer-motion useInView (once:true, margin:'-80px') to trigger 8 BadgeCard components staggered at 70ms intervals. Each BadgeCard features a 3D CSS flip animation via framer-motion rotateY (0→180deg) with preserve-3d, front face showing Lucide icon (BarChart3, ShieldCheck, Zap, Users, Award, Building2, Code2, Globe) and back face showing backLabel text on --primary background. Custom useCountUp hook uses requestAnimationFrame with cubic easeOut (1-Math.pow(1-progress,3)) for animated stat counting on 6 numeric badges (10K+, 256-bit, 50+, 200+, 5K+ etc). Parallax: htb-parallax-bg at -0.3x scroll speed, htb-parallax-mid at -0.6x. Blueprint corner decorations (htb-blueprint-corner--tl/tr/bl/br). Responsive grid: 2 cols mobile → 3 cols tablet (768px) → 4 cols desktop (1024px). Divider gradient at bottom.

As a frontend developer, implement the HomeFeatures section for the Home page. Renders 6 FeatureCard components (AI Text Extraction/PyMuPDF, Keyword Matching/Supabase, Rule-Based Detection/interface_risk_rules, Real-Time Flagging, Scope Gap Auto-Injection/scope_gaps table, Conflict Resolution Guidance). Each FeatureCard uses framer-motion useInView (once:true, margin:'-60px') with staggered entrance (opacity 0→1, y 40→0, delay index*0.08s). Cards alternate layout: even rows hf-card--alt-bg, odd rows hf-card--reversed (flex-direction row-reverse at 768px+). MagneticIcon sub-component tracks mouse position via onMouseMove/onMouseLeave, computing dx/dy from element center, clamping to MAX_PULL=18px, and animating icon position with spring (stiffness:280, damping:22, mass:0.6). Accent bar animates width 0%→100% on hover via framer-motion. Card title color transitions primary→accent on hover. Two parallax blob layers (bg -0.3x, mid -0.5x). Responsive: cards stack column mobile, row desktop.

As a frontend developer, implement the HomeBlueprintExplorer section for the Home page. Full interactive 3D blueprint viewer using @react-three/fiber Canvas with OrbitControls. makeBlueprintTexture() generates a 512x512 canvas texture with fine grid (32px, rgba(59,89,152,0.25)), major grid (128px), and architectural room lines drawn in ctx. 4 CONFLICT_MARKERS with positions, severity (high/medium/low), title, rule reference (interface_risk_rules), keywords array, and suggestion text. useState tracks activeConflict, isDragging, uploadedFile, analysisStatus ('idle'|'analyzing'|'complete'). File upload via hidden input and drag-drop zone (hbe-dropzone with hbe-dropzone--active state). Conflict markers are clickable 3D objects triggering hbe-detail-card overlay showing severity badge (hbe-detail-card-badge--high/medium/low), keywords as tags, and resolution suggestion with left-border accent. Status bar (hbe-status-bar) shows pulsing dot with analysis state text. Filename pill at bottom. Callout bar shows zoom/pan/click instructions. Responsive: canvas min-height 320px→480px→70vh.

As a frontend developer, implement the HomeAnalysisFlow section for the Home page. Renders 4 StepCard components interleaved with 3 connector arrows. Steps: Upload PDF (UploadCloud), Extract Text (FileText/PyMuPDF), Cross-Match Keywords (ListChecks/interface_risk_rules), Flag Conflicts (AlertTriangle/scope_gaps). Each StepCard uses framer-motion animate with isInView (once:true) for entrance (opacity 0→1, y 28→0, delay index*0.2s). Custom useCountUp hook animates step numbers 1-4 with cubic easeOut. Icon wrapper animates scale 0.7→1 with additional 0.55s delay. HorizArrow component uses SVG with stroke-dasharray animation (strokeDashoffset 60→0) triggered by isInView with index*0.2+0.4s delay. Mobile: vertical layout with vert arrow SVGs; Desktop (768px+): horizontal flex row with horiz arrow SVGs. CTA button links to analysis workflow. Two parallax decorator layers (bg grid -0.3x, mid blobs -0.5x).

As a frontend developer, implement the HomeConflictVisualization section for the Home page. Features an interactive SVG blueprint stage (hcv-blueprint-svg, viewBox 800x450) rendered by BlueprintSVG component with defs patterns (bp-grid-sm 20px, bp-grid-lg 100px) and architectural room lines. 5 conflict markers (hcv-marker-wrap) positioned via percentage x/y on the blueprint, each with pulsing rings (hcv-pulse-ring, hcv-pulse-ring--delay1/delay2 animations at 2s) and a clickable dot. useState activeConflict tracks selected marker. AnimatePresence wraps hcv-detail-card with opacity/scale/y entrance animation; card shows rule name, severity badge (hcv-severity-badge--high/medium/low with colored dot), keywords section (hcv-keyword-tag chips), resolution text, and CTA button. Close button clears activeConflict. Desktop: detail card overlays blueprint top-right (300px wide); Mobile: card appends below blueprint, hcv-mobile-list shows all conflicts as list items. Legend strip with high/medium/low dots. Hint text with MousePointer icon.

As a frontend developer, implement the HomeUseCases section for the Home page. Renders 4 use case cards for personas: Architect Firms (Building2, 'Reduce scope gaps by up to 80%'), Project Managers (BarChart2, 'Cut rework costs by 60%'), Quality Assurance Teams (ShieldCheck, '100% rule coverage'), Admin Teams (Settings2, 'Real-time rule updates'). Uses framer-motion containerVariants (staggerChildren:0.12) and cardVariants (opacity 0→1, scale 0.92→1, y 24→0) triggered by useInView. Each card has huc-accent-bar (absolute left border with accentStart→accentEnd gradient per card), huc-icon-wrap transitioning color on hover, huc-card-title color transition to accent on hover. Benefit chip uses huc-benefit with custom benefitBg/benefitColor per card. Persona tag in uppercase. Responsive grid: 1 col → 2 col (640px) → 4 col (1024px). Two parallax decorator layers (bg at -0.3x, mid shapes at -0.5x).

As a frontend developer, implement the HomePricing section for the Home page. Renders 3 pricing cards: Starter ($99/mo, 8 features, hp-cta-btn--primary), Pro ($499/mo, hp-card--pro with border-top --primary, margin-top:-20px elevated, hp-popular-badge 'Most Popular', hp-cta-btn--primary), Enterprise (Custom price, hp-card--enterprise, hp-cta-btn--enterprise orange). Uses framer-motion cardVariants with custom(i) delay (i*0.12s, scale 0.9→1, y 24→0) and useInView. FeatureItem sub-component with whileHover scale:1.03. Feature list uses hp-feature-icon--check (accent green) and hp-feature-icon--x (muted gray) with hp-feature-text--disabled strikethrough for excluded features. hp-plan-name color varies by variant (muted/primary/highlight). hp-price-row shows currency + amount or hp-price-custom 'Custom'. Footer note with ShieldCheck icon. Responsive: cards stack column mobile → row desktop (768px) with flex-1 equal width.

As a frontend developer, implement the HomeTestimonials section for the Home page. Renders 4 testimonial cards (Sarah Chen/Meridian Design Group, James Okafor/Nexus Infrastructure, Elena Vasquez/Stratosphere AEC, David Park/Pinnacle Studio) in a responsive grid. Each card uses framer-motion useInView with staggered cardDelay (index*0.15s). AnimatedStars sub-component renders 5 Star icons (Lucide, fill:#ED8936) with spring animation (stiffness:400, damping:18) staggered at cardDelay+0.4+i*0.1s. Avatar rendered as ht-avatar-fallback div with initials and per-person avatarColor background (--primary, --accent, --primary_light, --highlight). Quote styled with ht-quote border-left accent. Author info shows name, title, company in accent green. Company logo chip (ht-company-logo) with Building2 icon. ht-dot-nav below for mobile pagination hint with ht-dot-active scaled dot. Responsive grid: 1 col → 2 col (768px) → 3 col (1024px).

As a frontend developer, implement the HomeFAQ section for the Home page. Renders 6 accordion FAQ items (How AI works/PyMuPDF pipeline, File formats/50MB PDF limit, Data security/256-bit AES TLS 1.3 ISO27001, Customize rules/Supabase interface_risk_rules, Processing time/<5s, API access/REST endpoints). Uses useState activeId to track open item. Each faq-item gets faq-item--active class when open, triggering border-color rgba(56,161,105,0.3) and box-shadow. faq-question-btn uses framer-motion to animate chevron rotation (0→180deg) via motion.svg or CSS transform on faq-chevron. AnimatePresence wraps faq-answer with height animation (initial height:0, animate height:'auto') using framer-motion layout. faq-answer-inner has ::before pseudo-element divider. Bottom CTA links to contact. Responsive: max-width 800px centered, padding scales 48px→64px→80px. Focus-visible outline on question button for accessibility.

As a frontend developer, implement the HomeCTA section for the Home page. Features animated gradient background (hca-bg-gradient, linear-gradient 135deg primary→primary_light, background-size:200%, hca-gradient-pulse keyframe 3s). Blueprint grid overlay and 4 blurred accent shapes. Blueprint corner accents (hca-corner--tl/tr/bl/br, 80px, opacity 0.3→0.4 at 1024px). RippleButton component tracks click position, creates ripple objects {id, x, y}, animates motion.span from width/height 0 to 320px with opacity 0.6→0 over 0.65s. MagneticBtn component tracks mouse delta from element center, computes strength factor, animates button position with spring (stiffness:200, damping:20). Headline uses em tag for accent color #68D391 with animated underline. Social proof strip shows 3 hca-proof-item entries (no credit card, 2-min setup, cancel anytime) with green checkmark icons. hca-label-dot pulses with hca-dot-pulse animation. Responsive: buttons stack column mobile → row desktop (768px), headline scales 28px→42px→52px.

As a frontend developer, implement the Footer section for the Home page. This component may already exist from Landing page (task a1b36675-045d-4c33-9c9c-b9c46d9e7f4e). ftr-accent-stripe (3px gradient top border: accent→primary_light→secondary). Blueprint SVG grid overlay (ftr-bp-bg, opacity 0.07). 4 link columns (Product, Company, Resources, Legal) using ftr-col-links with ftr-link-item wrappers; each link has ftr-link-underline (motion.div, initial width:0, hover width:'100%', background:#ED8936). 4 social icons (GitHub, Twitter/X, LinkedIn, YouTube) as ftr-social-icon with SVG paths. Newsletter section with floating label input (ftr-float-label transitions top/font-size on focus or non-empty value), subscribe button (ftr-subscribe-btn, --highlight background), and ftr-subscribed-msg success state. ftr-status pill with ftr-status-dot blinking animation. Bottom bar: copyright + bottom link items with animated underlines + status pill. Responsive: brand/columns/newsletter stack column mobile → row desktop (768px); columns grid 2→4 col.

As a frontend developer, implement the Navbar section for the Upload page. This component may already exist from the Home page (task 143a0495-a452-4e0a-92dc-9f29bbbb6bea). It uses useState for isOpen (mobile menu), scrolled (scroll detection), and ctaHover (CTA ripple). useEffect attaches a passive scroll listener and manages body overflow lock on mobile open. Renders an animated SVG logo with two motion.path elements using strokeDashoffset draw animation (blueprintPathD and accentPathD, totalPathLength=200, 1.2s easeInOut). Includes a desktop nav ul rendering navLinks (Landing, Dashboard, Analysis, Results, Rules, Uploads, ScopeGaps, Settings), desktop Sign In/Sign Up anchors, and a CTA with ripple via motion.a. AnimatePresence wraps the mobile drawer. Imports Navbar.css.

As a frontend developer, implement the Navbar section for the Uploads page. This component (likely reusable from prior pages) includes: animated SVG logo with motion.path stroke-dashoffset draw animation (blueprintPathD + accentPathD, 200 total path length), scroll-aware state via useEffect/window.scrollY toggling nb-scrolled class, mobile hamburger menu with AnimatePresence-driven drawer and body overflow lock, desktop nav links mapping navLinks array to /Landing /Dashboard /Analysis /Results /Rules /Uploads /ScopeGaps /Settings, Sign In/Sign Up anchor buttons, and a CTA button with ripple effect. Uses framer-motion, useState, useEffect. Check if Navbar.jsx already exists from prior pages before rebuilding.

As a frontend developer, implement the Navbar section for the Rules page. This component is shared across pages — reuse or extend the existing Navbar from Landing/Dashboard/Uploads. It features: animated SVG logo with two `motion.path` elements using `strokeDashoffset` draw animation (blueprintPathD and accentPathD, totalPathLength=200, 1.2s easeInOut with 0.3s delay on accent); `useState` hooks for `isOpen`, `scrolled`, and `ctaHover`; `useEffect` scroll listener adding `nb-scrolled` class at 10px threshold; `useEffect` body overflow lock when mobile menu open; desktop `navLinks` array mapping 8 routes including the active Rules route; Sign In / Sign Up anchors; CTA ripple button via `motion.a`; and mobile hamburger with `AnimatePresence` drawer.

As a frontend developer, implement the Navbar section for the Settings page. This component is shared across pages (previously implemented for Landing, Uploads, Rules, etc.) and may already exist. It uses framer-motion for animated SVG logo path drawing (blueprintPathD and accentPathD with strokeDashoffset animation over 1.2s), scroll-aware state via useEffect/window.scrollY toggling nb-scrolled class, mobile drawer with AnimatePresence slide-in from x:'100%' using spring physics (stiffness 320, damping 32), hamburger toggle with body overflow lock, CTA ripple effect using AnimatePresence scale animation, and navLinks array covering Landing/Dashboard/Analysis/Results/Rules/Uploads/ScopeGaps/Settings routes.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. The component uses useState for activeFilter ('all') and now (new Date()), with a useEffect setInterval ticking every 1000ms to update the live clock display. It renders: a breadcrumb nav (Home > Dashboard > Overview) using Home, LayoutDashboard, ChevronRight lucide icons; a greeting block with 'Welcome back, Admin' and a live datetime display using formatDate() and formatTime() helpers (en-US locale with weekday/seconds); a system status dot; a filters array (all=142, pending=23, conflicts=9, resolved=110, in_progress=14) rendered as tab-style buttons with dh-filter-badge variants (--warning, --danger, --success); and action buttons including RefreshCw icon button and an Upload button. References DashboardHeader.css with dh-root, dh-inner, dh-breadcrumb, dh-top-row, dh-greeting-block, dh-filter-badge class namespace.

As a frontend developer, implement the DashboardMetrics section for the Dashboard page. Renders 4 KPICard components from kpiData array: Total Analyses (1,284 / green / FileSearch icon), Pending Reviews (47 / red / Clock icon), Resolved Conflicts (94.2% / blue / CheckCircle2 icon), Avg Processing Time (3.8s / orange / Zap icon). Each KPICard renders: a colored left strip (dm-card-strip--{variant}), header row with label and icon in dm-icon-wrap--{variant} container, value+unit row, a custom inline SVG sparkline built from sparkHeights array (12 data points) with bar heights normalized to maxHeight, trend indicator with TrendArrowUp/TrendArrowDown SVG components colored by trendType (up-good=green, down-bad=red), and a footer description. References DashboardMetrics.css with dm-card, dm-card-strip, dm-icon-wrap, dm-card-value, dm-sparklin class namespace. All data is static/hardcoded.

As a frontend developer, implement the DashboardAnalysisOverview section for the Dashboard page. The component uses useState for activeRange ('Last 30 Days') and hoveredKey (null), and useState/useRef for a mounted animation flag reset on range change via useEffect with 60-80ms timeouts. STATUS_DATA provides 4 time-range datasets (Last 7 Days, Last 30 Days, Last 90 Days, All Time) each with completed/in_progress/failed/queued counts and colors. An SVG donut chart (RADIUS=82, CX=110, CY=110) is built using buildSegments() which computes strokeDasharray/strokeDashoffset/offset from CIRCUMFERENCE=2πR for each segment. Hovering a segment sets hoveredKey to highlight it and show a center tooltip with count/label. A TIME_RANGES tab selector switches datasets and resets mount animation. A legend list mirrors segment colors and labels. An ExportIcon SVG button is present. References DashboardAnalysisOverview.css with dao- class namespace.

As a frontend developer, implement the DashboardRecentUploads section for the Dashboard page. The component uses useState for searchQuery, sortField ('date'), sortDir ('desc'), and currentPage (1), with useMemo for filtered/sorted/paginated results from ALL_UPLOADS (12 static records). Features: a Search input with Search lucide icon filtering by filename; an ArrowUpDown sort toggle cycling sortField (name/date/size/conflicts) and sortDir; a paginated table (PAGE_SIZE=5) with ChevronLeft/ChevronRight pagination controls; StatusBadge sub-component rendering dru-status--completed/inprogress/failed with a dot indicator; ConflictsBadge sub-component with dru-conflicts--none/low/high coloring; ActionButtons rendering Eye+Download buttons for Completed rows or a RefreshCw retry button for Failed rows; an Upload button in the header. References DashboardRecentUploads.css with dru- class namespace from lucide-react icons: FileText, Search, Upload, Eye, Download, RefreshCw, ChevronLeft, ChevronRight, ArrowUpDown.

As a frontend developer, implement the DashboardConflictSummary section for the Dashboard page. Renders 8 static conflict records with fields: id, keyword, category, severity (high/medium/low), frequency, matchedRules, lastSeen, resolution. Computes maxFrequency for proportional horizontal frequency bar widths. Displays severityStats counts (high=3, medium=3, low=2) in a summary header strip. Each conflict row renders: severity badge with color-coded dot, keyword label, category tag, frequency bar (width = frequency/maxFrequency * 100%), matchedRules count, lastSeen drawing reference, and resolution hint text. Uses custom inline SVG icons: AlertIcon (triangle warning) and ShieldIcon. Severity color coding: high=#E53E3E, medium=#ED8936, low=#38A169. References DashboardConflictSummary.css with dcs- class namespace. All data is static/hardcoded.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Uses useState for an activeToast state showing/hiding contextual notification toasts. Renders a quickActions array of 6 action cards: New Analysis (PlusCircleIcon, href /Analysis), Review Conflicts (AlertTriangleIcon, href /ScopeGaps), Configure Rules (ShieldIcon, href /Rules), Settings (SettingsIcon, href /Settings), Help (HelpCircleIcon, href /Landing), and a featured Launch action (RocketIcon). Each card has a label, description, icon (custom inline SVGs: PlusCircleIcon, ShieldIcon, AlertTriangleIcon, SettingsIcon, HelpCircleIcon, RocketIcon), and an ArrowRightIcon (12x12 inline SVG). Clicking some cards triggers a toast notification rendered with XIcon dismiss button. References DashboardQuickActions.css with dqa- class namespace. Note: ArrowRightIcon uses inline style stroke-width via JSX attribute stroke-width (kebab-case, to be corrected to strokeWidth).

As a frontend developer, implement the UploadHero section for the Upload page. This is a static presentational section with no state hooks. Renders a blueprint SVG icon (uh-blueprint-svg, viewBox 0 0 40 40) composed of three paths: uh-bp-lines (floor plan outline), uh-bp-accent (measurement marks), and a uh-bp-dot circle at cx=20 cy=20 r=2.5. Displays an eyebrow badge ('AI-Powered Analysis'), an h1 headline with an accented span ('Architectural'), and a subheadline paragraph. Renders a stats row mapping the stats array [{value:'<5', unit:'s', label:'Avg. Process Time'}, {value:'50', unit:'MB', label:'Max File Size'}, {value:'99', unit:'%', label:'Accuracy Rate'}] and a steps row mapping steps [{num:'1',text:'Upload PDF'}, ...] with React.Fragment arrow separators between steps. Imports UploadHero.css.

As a frontend developer, implement the UploadZone section for the Upload page. Uses useState for dragActive, file, error, uploading, uploaded, and progress. Uses useRef for the hidden file input and useCallback for the drag/drop handlers. Defines constants ACCEPTED_EXTENSIONS=['.pdf'], MAX_SIZE_MB=50, MAX_SIZE_BYTES, and CONSTRAINTS array. Includes helper formatBytes function. Renders five inline SVG icon components: UploadIcon (cloud upload arrow), CheckIcon (green checkmark), ErrorIcon (red circle with exclamation), SuccessIcon (large green checkmark), and DocumentIcon (document with lines). The drop zone toggles dragActive class on dragenter/dragleave, validates file type and size on drop and input change, simulates upload progress with setInterval incrementing progress state, and transitions through idle → uploading → uploaded states. Displays error messages, file metadata (name via formatBytes size), and a CONSTRAINTS list with CheckIcon per item. Imports UploadZone.css.

As a frontend developer, implement the UploadProgress section for the Upload page. Uses useState for progress (0–100) and cancelled, and useRef for the interval handle. A useEffect drives a setInterval that increments progress at variable speeds per stage: 1.2 increment below 20%, 0.6 in the 20–80% processing stage, and slower in the 80–100% analyzing stage, clearing on completion or cancellation. Defines STAGES array with three entries (uploading range [0,20], processing [20,80], analyzing [80,100]), each containing key, label, desc, range, icon JSX (SVG), and doneIcon JSX (checkmark SVG). Uses getStageIndex(pct) to determine the active stage and formatTime(seconds) to display estimated time remaining. Renders a demo file header (DEMO_FILE_NAME='architectural-floor-plan-v3.pdf', DEMO_FILE_SIZE='12.4 MB'), a segmented progress bar, stage step indicators with active/done state styling, and a Cancel button that sets cancelled=true and clears the interval. Imports UploadProgress.css.

As a frontend developer, implement the UploadGuidance section for the Upload page. Uses useState to track the open accordion item ID. Defines accordionItems array with four entries: 'what-analyzed' (PyMuPDF text extraction, keyword matching chips), 'how-long' (5s avg, note about 50MB), 'file-formats' (PDF only, selectable text required, note about OCR), and 'data-security' (TLS encryption, Supabase RLS, securityList array of 4 bullet strings). Includes three inline SVG icon components: ChevronDownIcon (polyline 6 9 12 15 18 9), InfoIcon (circle with i lines), and HelpCircleIcon. Each accordion item renders a numbered header button that toggles open state, an animated collapse panel with content text, optional chips (accent vs default styling), optional note with InfoIcon, and optional securityList ul. Imports UploadGuidance.css.

As a frontend developer, implement the UploadPreview section for the Upload page. Contains a Three.js/R3F Canvas scene with a BlueprintPage component that uses useRef for groupRef, useFrame for idle float animation (groupRef.rotation.y = Math.sin(t*0.4)*0.12, rotation.x = Math.sin(t*0.3)*0.04-0.05, position.y = Math.sin(t*0.6)*0.04), and useState for hovered. Builds blueprint line geometry using Float32Array of 22 point pairs (outer rect, floor plan silhouette, dimension marks) via THREE.BufferGeometry with BufferAttribute. Renders a boxGeometry paper base (color #EBF4FF), a transparent planeGeometry tint overlay (color #2A4365, opacity 0.08), lineSegments with lineBasicMaterial, three accent circleGeometry dot markers (colors #38A169 and #ED8936), a corner fold mesh (planeGeometry rotated PI/4, color #CBD5E0, DoubleSide), and a PDF label strip mesh. Scene includes OrbitControls and ambient/directional lighting. Outside the canvas renders FILE_DATA metadata card (name, pageCount, uploadTimestamp, fileSize, status, statusSub). Imports @react-three/fiber Canvas and useFrame, @react-three/drei OrbitControls, and THREE. Imports UploadPreview.css.

As a frontend developer, implement the UploadResults section for the Upload page. Contains a Three.js/R3F Canvas scene with a BlueprintPlane component that uses useRef for meshRef and lineGroupRef, and useFrame for subtle animation (meshRef.rotation.x = -0.72 + Math.sin(elapsedTime*0.2)*0.02, lineGroupRef.rotation.y = Math.sin(elapsedTime*0.15)*0.04). Builds grid lines programmatically via two nested loops (i from -4 to 4) creating horizontal and vertical THREE.Vector3 line pairs with a semi-transparent lineBasicMaterial (color #2A4365, opacity 0.35). Defines ANALYSIS_RESULT object (fileName, timestamp, conflictsFound=7, scopeGaps=4, analysisTime='3.8s') and CONFLICT_MARKERS array of 7 items with id, x/y percentage positions, label, and color class (ur-marker-red or ur-marker-orange). Defines METRICS array with 3 entries (conflicts, gaps, time) each containing key, label, value, unit, sub, barWidth, cardClass, and iconPath. Renders conflict markers as absolutely positioned elements over the 3D canvas, a metrics card grid, and an analysis summary header. Uses @react-three/drei Grid component alongside OrbitControls. Imports UploadResults.css.

As a frontend developer, implement the Footer section for the Upload page. This component may already exist from the Home page (task 4efc7423-f0ef-463c-8555-441fe4cadce0). Renders a ftr-root footer with a ftr-accent-strip, ftr-bg-grid aria-hidden decorative div, and ftr-inner container. Inside ftr-grid: a brand column with an SVG logo (blueprintPath + accentPath), ftr-logo-name with 'instruct{Site}' span, brand tagline paragraph, and ftr-socials with LinkedIn and other social anchor buttons containing inline SVG icons. Maps the columns array (Product, Company, Legal — each with title and links array) to ftr-col elements with nav link lists. Renders a ftr-bottom bar with copyright text and legal inline links. Imports Footer.css.

As a frontend developer, implement the Navbar section for the Analysis page. This component (may already exist from Upload page) uses useState for isOpen (mobile menu) and scrolled (scroll detection), and useEffect for scroll listener and body overflow lock. Features animated SVG logo with two motion.path elements using strokeDashoffset draw animation (duration 1.2s, delay 0.3s for accent path). Includes desktop nav rendering navLinks array (8 links including Analysis active state), Sign In/Sign Up buttons, and a CTA button with ripple effect using framer-motion. Mobile hamburger menu with AnimatePresence for slide-in overlay. Import from '../styles/Navbar.css'.

As a frontend developer, implement the UploadsHero section for the Uploads page. Renders a metrics row of four stat cards (Total Uploads: 24, Analysed: 19, Conflicts Found: 47, In Progress: 5) each with variant class modifiers (uh-metric--blue/green/red/orange), MetricIcon SVG component rendering inline path data, sublabel with conditional uh-sublabel--warn/neutral classes, and a BlueprintIcon SVG with sheet outline, corner fold, blueprint lines, and accent circle. Also mounts a BlueprintThreeDecor component using Three.js WebGLRenderer with alpha:true creating a decorative rotating blueprint plane — uses useRef for mount target and frameRef for animation loop, cleans up renderer and cancelAnimationFrame on unmount. Imports THREE from 'three'.

As a frontend developer, implement the UploadZone section for the Uploads page. Features a drag-and-drop PDF upload area with dragActive boolean state toggling visual highlight, file useState holding selected File object, error string state for validation messages, uploading and uploaded booleans for async flow. Validates against ACCEPTED_TYPES (['application/pdf']), MAX_SIZE_BYTES (50MB), and shows inline ErrorIcon SVG on rejection. On valid file selection renders DocumentIcon with file name and formatBytes(file.size) helper. On upload success transitions to a SuccessIcon checkmark view. Renders constraint chips from CONSTRAINTS array (PDF only, 50MB max, Architectural drawings) with emoji icons. Also renders SUPPORTED_FORMATS badge. Includes UploadIcon, CheckIcon, ErrorIcon, SuccessIcon, DocumentIcon as local SVG components. Uses useRef for hidden file input and useCallback for drag handlers.

As a frontend developer, implement the UploadsHistory section for the Uploads page. Renders a paginated table/list of ALL_UPLOADS (12 mock entries) with ITEMS_PER_PAGE=6 and pagination controls using ChevronLeft/ChevronRight from lucide-react. Each row shows FileText icon, file name, type badge, uploadDateRelative, size, status chip (complete/analyzing/error with color variants), and conflict count. Includes a FILTERS tab bar (All Files, Complete, Analyzing, Error) using filter key state to slice the visible list. Row actions include Eye (view), RotateCcw (re-analyze), Trash2 (delete) icon buttons from lucide-react. Empty state renders FolderOpen icon with message. Filter and pagination state managed via useState. Imports Filter, ChevronLeft, ChevronRight, FileText, Eye, RotateCcw, Trash2, FolderOpen from lucide-react.

As a frontend developer, implement the AnalysisProgress section for the Uploads page. Renders INITIAL_UPLOADS (2 items) as UploadCard components. Each UploadCard has expanded boolean state toggled via ChevronDown button to show phase details. Uses a useRef tickRef for a setInterval that simulates live progress: increments active phase pct by random 1-4 per tick, transitions phase status from active→complete when pct hits 100, then activates the next pending phase. Recalculates overallPct from completed phases and active phase progress. Renders three phases per card (Text Extraction, Rule Matching, Conflict Detection) each with phaseIcon() helper returning CheckCircle/Loader/Clock from lucide-react based on status, and a progress bar. Stats panel shows textBlocks, rulesChecked, matchesFound. Header includes RefreshCw button and last-updated timestamp via useEffect Date polling. Cleans up interval on unmount via tickRef.

As a frontend developer, implement the ConflictSummary section for the Uploads page. Renders a stats row of four cards from the stats array (Total Conflicts: 24, Critical: 7, Warnings: 11, Resolved: 6) each with a lucide-react icon (AlertTriangle, AlertCircle, CheckCircle), modifier CSS class (cs-stat--total/critical/warning/resolved), trend string and trendType up/down indicator. Below the stats, renders a conflicts list from the conflicts array (3 items: CF-001 MEP Routing Overlap, CF-002 Structural Frame Spec Missing, CF-003 Fire Rating Callout Discrepancy) each with severity badge (critical/warning), typeLabel badge (Keyword Mismatch/Template Conflict/Scope Gap), rule reference string, and icon component. Has an expanded useState toggling additional conflict rows via ChevronDown button. Header section includes AlertTriangle icon, title/subtitle, View Rules link to /Rules, and Review Scope Gaps CTA link to /ScopeGaps with ArrowRight icon.

As a frontend developer, implement the QuickActions section for the Uploads page. Renders three action cards from the actions array: Conflict Review (href /ScopeGaps, red accent #E53E3E, badge '3 Open', stats: 3 Open Conflicts / 12 Resolved), Manage Rules (href /Rules, deep blue #2A4365, no badge, stats: 24 Active Rules / 8 Templates), Configure Upload Settings (href /Settings, emerald #38A169, no badge, stats: 50MB Max File Size / <5s Avg. Parse Time). Each card renders inline SVG icon in a colored icon wrapper with iconBg/iconHoverBg CSS vars, title, desc paragraph, stats row, and a CTA anchor button with dynamic btnBg/btnHover colors. Badge rendered conditionally when badge:true. Icons are inline JSX SVG elements defined in the actions array. Pure presentational component — no state hooks.

As a frontend developer, implement the Footer section for the Uploads page. Renders four link columns (Product, Company, Support, Legal) from the linkColumns array each with title and links array of label/href pairs covering all app routes. Social links row renders GitHub, Twitter, LinkedIn, YouTube SVG icon buttons. Includes newsletter email subscription input with useState for email value and submit handler. Renders animated SVG logo (same blueprint path as Navbar), brand tagline, copyright line with dynamic year. Check if Footer.jsx already exists from prior pages (Analysis, Results, ScopeGaps all have Footer) before rebuilding — reuse if available.

As a frontend developer, implement the RulesHero section from `RulesHero.jsx`. Render a static hero with: a breadcrumb nav linking Dashboard → Rules Management using an inline SVG chevron; a header row with a title group (`rh-page-label` containing an animated `rh-page-label-dot` pulse, H1 with highlighted span) and a `rh-status-badge` with an `rh-status-pulse` animated dot and 'Rules Engine Active' text; a subtitle paragraph describing the rules configuration module; and a `rh-stats-strip` grid rendering 4 stat items from the `stats` array — each with an inline SVG icon (clipboard, tag, layout, warning triangle paths), a numeric value (48 active rules, 312 keywords, 14 templates, 3 pending conflicts), and a label. Icon color classes: `rh-stat-icon--blue`, `--green`, `--orange`, `--red`.

As a frontend developer, implement the RulesIntroduction section from `RulesIntroduction.jsx`. Build a React Three Fiber `Canvas` scene alongside a feature/flow panel. The 3D scene uses `useFrame` for animation and `THREE` geometry for a background visualization. Render 4 `features` cards (Keyword Matching, Template Rules, Severity Assignment, Conflict Detection) each with a colored `ri-feature-icon-wrap--*` class (blue, green, orange, red) and an inline SVG icon. Render a `flowRows` 2×3 grid of flow step nodes — each node shows a label and icon path, with `ri-flow-step--accent` (Keyword Match) and `ri-flow-step--red` (Flag Conflict) highlight variants; null entries in the row arrays render SVG arrow connectors between nodes. Use `useRef` and `useEffect` for any scroll-triggered or mount-time animations on the feature cards.

As a frontend developer, implement the RulesKeywordManagement section from `RulesKeywordManagement.jsx`. This is a complex data management UI built on a `KEYWORDS_DATA` array of 10+ keyword objects (id, term, description, ruleType, matchedRule, conflictCount, lastEdited, status). Implement: a search bar with lucide `Search` icon filtering via `useMemo` on term/description/ruleType; an Add Keyword button (lucide `Plus`) and Import button (lucide `Upload`); a sortable data table with `ChevronUp`/`ChevronDown` sort icons and `useState` for `sortField` and `sortDir`; per-row action menus using lucide `MoreVertical` with `Edit2`, `Trash2`, `Copy` options; status badges using `CheckCircle2` (active) and `XCircle` (inactive); a `ruleType` color chip; and a slide-in `AddKeywordModal` / `EditKeywordModal` built with `AnimatePresence` containing controlled inputs for term, description, ruleType (select), and status toggle. Use `useState` for `keywords` array, `searchQuery`, `sortConfig`, `selectedId`, `modalType`, and `modalOpen`.

As a frontend developer, implement the RulesTemplateLibrary section from `RulesTemplateLibrary.jsx`. Build a template management UI on a `TEMPLATES` array of 5+ objects (id, name, description, keywords array, status, isConflict bool, resolution, lastModified, matchCount, category). Implement: a grid/list view toggle using lucide `LayoutGrid` and `List` icons with `useState` for `viewMode`; a search bar (lucide `Search`) filtering via `useMemo` on name/description/category; category filter chips (Structural, MEP, Life Safety, Doors & Hardware, etc.) with `useState` for `activeCategory`; template cards showing keyword chips (lucide `Tag`), a conflict/non-conflict badge (lucide `ShieldAlert` vs `BookOpen`), match count, last modified date, and action buttons (`Edit2`, `Trash2`, `Eye`); an `Eye` preview drawer with `AnimatePresence` slide-in showing full resolution text and keyword list (lucide `ChevronRight` bullet items); and a `Plus` New Template button opening a create modal with fields for name, description, category select, keywords input (add/remove chips), isConflict toggle, and resolution textarea. Use `useState` for `templates`, `selectedTemplate`, `previewOpen`, `modalOpen`.

As a frontend developer, implement the RulesConflictDefinition section from `RulesConflictDefinition.jsx`. Build a visual conflict detection explainer with two sub-panels. First panel: a vertical flow diagram rendering `flowSteps` (6 nodes: PDF Upload → Text Extraction → Rule Keyword Query → Cross-Match decision diamond → Conflict Flagged / Rule Passes outcomes) using `nodeTypeClass` map (`rcd-flow-node--input`, `--process`, `--check`, `--conflict`, `--pass`) and `nodeIcons` map; the `hasBranch: true` check node renders two branch connectors to the conflict and pass outcome nodes side by side. Second panel: 3 `exampleScenarios` cards (Fire Egress Rule — conflict, MEP Clearance Rule — conflict, Structural Load Path — pass) each showing: rule text, keywords array with matched keywords highlighted, `matchCount` vs `threshold` fraction, a severity badge (High/Medium/null), and a resolution string. Use `useState` for `activeScenario` to highlight the selected example card. Import lucide `AlertTriangle`, `GitBranch`, `Settings2`, `CheckCircle2`, `XCircle` for node and badge icons.

As a frontend developer, implement the RulesSeverityLevels section from `RulesSeverityLevels.jsx`. Build an editable severity level configuration table on `INITIAL_LEVELS` (Critical #E53E3E, High #3B5998, Medium #ED8936, Low #38A169). Render: a table with columns for severity name, `SeverityBadge` component (colored dot + name, BADGE_COLORS bg/text map), `ColorSwatch` component (color circle with hover tooltip showing hex, hex text), description, `AssignmentRuleTag` component (⚡ auto-assign icon or ✋ manual icon + rule text), autoAssign boolean, and Edit/Delete action buttons. Implement an `EditModal` component with `useState` for a `form` object (name, color string, description, assignmentRule, autoAssign bool); the color field renders an `<input type='color'>` alongside a text hex input; `isNew` flag toggles modal title between Add and Edit. Manage `INITIAL_LEVELS` in component `useState`, support add new level (opens modal with empty form), edit existing (opens modal pre-filled), delete (removes by id), and save (updates levels array and closes modal).

As a frontend developer, implement the RulesAdvancedOptions section from `RulesAdvancedOptions.jsx`. Build a 4-card advanced configuration panel using `cardDefs` (Priority Order, Enable/Disable Toggles, Regex Patterns, Scope Gap Auto-Assignment). Each card is expandable via `useState` for `expandedCard`. Card contents: (1) Priority Order — drag-to-reorder list of `priorityItemsInitial` (6 items with `rao-tag--critical/high/medium/low` severity tags) implemented with mouse/touch drag using `useState` for `priorityItems` and drag index tracking; (2) Rule Toggles — 4 toggle items from `toggleDefsInitial` (Structural, MEP, Fire Safety, Accessibility) each with `enabled` boolean, a tooltip string, and an animated toggle switch `<button>` updating `toggles` state array; (3) Regex Patterns — display 3 patterns from `regexPatternsInitial` in monospace chips with delete (×) buttons, and an add-pattern input with `useState` for `newPattern` and `regexPatterns`; (4) Scope Gap — radio-group of 4 `scopeGapOptions` (Auto-Assign, Queue for Review, Batch Commit, Notify & Auto-Assign) with `useState` for `selectedScopeGap`. Status pills on card headers (`rao-pill--warning` for regex) update dynamically from state.

As a frontend developer, implement the Footer section for the Rules page from `Footer.jsx`. This footer variant differs slightly from the Landing footer — it uses 3 `linkColumns` (Product: Dashboard/Analysis/Results/Upload Drawing, Docs: API Reference/Rules Engine/Scope Gaps/Changelog, Company: About Us/Contact/Status/Settings) and 3 `socialLinks` (LinkedIn, GitHub, Twitter/X with 15×15 SVG icons). Includes a newsletter subscription form with `useState` for `emailFocused`, `emailValue`, and `subscribed`; a floating label pattern (`labelActive = emailFocused || emailValue.length > 0`); and a `handleSubscribe` function setting `subscribed` state. Note: the Footer component may already exist from a previous page — reuse or extend with this page's link column content.

As a frontend developer, implement the SettingsSidebar section for the Settings page. Uses useState for activeId (default 'profile') and mobileOpen (default false). Renders menuGroups array with 4 groups (Account, Analysis, Preferences, Advanced) each containing items with lucide-react icons: User, AlertTriangle, SlidersHorizontal, Bell, Database, Trash2. Each item renders as an anchor tag with ss-menu-link class conditionally adding ss-active when activeId matches and ss-danger for the danger-zone item. Mobile toggle header with ss-hamburger button animates ss-ham-line spans and toggles ss-nav-open on the nav panel. handleNavClick sets activeId and closes mobile menu.

As a frontend developer, implement the SettingsHeader section for the Settings page. Uses useState for query string and useMemo to compute filteredSections by filtering SETTINGS_SECTIONS array (6 entries: Profile, Severity Levels, System Config, Notifications, Data Retention, Danger Zone) against query.trim().toLowerCase() matching label or desc fields. Renders breadcrumb nav (Dashboard / Settings), h1 title, description paragraph, a Search input (lucide-react Search icon) with controlled value/onChange, a HelpCircle icon link, and a conditional search results dropdown. handleTagClick uses document.getElementById(anchor).scrollIntoView({behavior:'smooth', block:'start'}) then clears query state.

As a frontend developer, implement the SettingsProfile section for the Settings page. Uses useState hooks for: firstName ('Alex'), lastName ('Chen'), email ('alex.chen@instructsite.io'), role ('Lead Architect'), bio, avatar drag-drop state via useRef and useCallback. Includes inline SVG icon components: IconUser, IconMail, IconBriefcase, IconAlertCircle, IconCheck, IconSave, IconUpload, IconEdit2, IconCheckCircle. The section renders a profile avatar upload area with drag-drop, controlled text inputs for name/email/role with floating labels, a bio textarea, notification preference checkboxes mapped from notificationOptions array (4 items: new_analysis, scope_gaps, conflict_flags, weekly_digest), and a save button with success state feedback. All inputs use sp- prefixed CSS classes.

As a frontend developer, implement the SettingsSeverities section for the Settings page. Uses useState for severities (INITIAL_SEVERITIES array of 4 items: low/medium/high/critical with threshold, color, minThreshold, maxThreshold), activeRow (null), and saved (false). COLOR_OPTIONS array provides 6 hex color swatches. Each severity row renders: level badge with ssv-badge-- class, description text, a range input for threshold bounded by minThreshold/maxThreshold, a color swatch picker that updates the severity color on click (CheckIcon overlay for selected), and inline edit of label. AlertIcon, SaveIcon, CheckIcon, InfoIcon are inline SVG components. Save button sets saved true then resets via setTimeout. activeRow tracks which row is expanded for color picker display.

As a frontend developer, implement the SettingsSystemConfig section for the Settings page. Uses useState for pdfTimeout (30), maxFileSize (50), sensitivity (65), autoFlag (true) with DEFAULTS object for comparison. isDeviated() compares current vs default values to conditionally render DeviatedBadge and ChangedNote inline SVG components. getSensitivityLabel() returns Low/Medium/High string. getSensitivityMeterLevel() maps blockIdx to colored meter segments. Renders two range inputs (pdfTimeout 5-120s, sensitivity 0-100) with dynamic linear-gradient background fill using CSS custom property interpolation. maxFileSize uses a number input with fileSizeOver warning when >50. autoFlag renders a toggle switch. handleReset() restores all four DEFAULTS values. pdfTimeoutBg and sensitivityBg compute inline style strings with var(--secondary) when deviated.

As a frontend developer, implement the SettingsNotifications section for the Settings page. Uses useState for notifications (initialNotifications array of 4 items: analysis_complete, conflict_flagged, dashboard_update, weekly_digest each with enabled, frequency, recipients, and type-specific fields), expanded object (analysis_complete and conflict_flagged default true), and saved boolean. Functions: toggleEnabled(id), toggleExpanded(id), updateField(id, field, value), toggleSeverity(id, sev). NotificationIcon component renders FileSearch/AlertTriangle/LayoutDashboard/Mail lucide icons by type with sn-item-icon--{type} class. SEVERITY_LEVELS array (critical/high/medium/low) renders as checkbox toggles for conflict_flagged item. FREQUENCY_OPTIONS (immediate/hourly/daily/weekly) renders as select. Expanded rows show recipients textarea, includeSummary/includeConflicts/includeMetrics checkboxes, threshold input. Save button with Check icon shows saved feedback via setTimeout.

As a frontend developer, implement the SettingsDataRetention section for the Settings page. Uses useState for selectedDuration (90), saved, showExportToast, showArchiveToast. DURATIONS array (30/90/180/365/Forever) renders as pill-style toggle buttons. dataTypes array (5 items: analysis_records 2.4GB/1248 records, scope_gaps 840MB/387 reports, system_logs 1.1GB/54320 entries, pdf_uploads 18.7GB/214 files, rule_snapshots 156MB/92 snapshots expiring) renders as cards with lucide-react icons (FileBarChart2, AlertTriangle, Activity, FileText, Database), size/count/lastAccessed metadata, and status badges (sdr-badge-active/archived/expiring). Storage usage bar: STORAGE_USED_BYTES 23.2GB of 50GB (46%). handleExport/handleArchive trigger toast notifications via setTimeout. handleSave shows saved state. Download and Archive buttons use lucide-react Download/Archive icons.

As a frontend developer, implement the SettingsDangerZone section for the Settings page. Uses useState and useCallback. DANGER_ACTIONS array contains 4 actions: reset_defaults (Reversible/warn badge, confirmWord 'RESET'), clear_history (Irreversible/danger, confirmWord 'CLEAR'), revoke_tokens (Irreversible/danger, confirmWord 'REVOKE'), deactivate_account (Permanent/danger). Each action card renders lucide-react icons (RotateCcw, Trash2, Key, UserX), badge variants (warn/danger), description, consequences list, and action button. Clicking opens a confirmation modal with: modalTitle, modalSubtitle, ShieldAlert icon, consequences ul, a text input requiring the user to type the exact confirmWord before the confirm button activates, X close button. AlertTriangle and CheckCircle icons used for modal states. All destructive interactions are gated behind typed confirmation. sdz- CSS prefix throughout.

As a frontend developer, implement the Footer section for the Settings page. This component is shared across pages (previously implemented for Landing, ScopeGaps, Uploads, Rules) and may already exist. Uses useState for emailFocused and emailValue for the newsletter floating-label input. Renders linkColumns array (4 columns: Platform/Tools/Support/Account) with ftr-col-link items, socialLinks array (LinkedIn/GitHub/Twitter) as ftr-social-icon anchor tags with inline SVG icons, a newsletter email input with ftr-float-label animation on focus/value, ftr-subscribe-btn, ftr-accent-stripe gradient top border, ftr-bp-bg blueprint SVG overlay, ftr-status pill with animated ftr-status-dot, and ftr-bottom copyright bar with legal links. Responsive layout shifts from stacked mobile to row-based tablet/desktop via media queries.

As a frontend developer, implement the UploadActions section for the Upload page. This is a static presentational section with no state hooks. Renders a ua-root section containing a ua-inner div with: a ua-divider horizontal rule, a 'Next Steps' ua-label paragraph, and a ua-actions div with three navigation anchors — a primary CTA anchor to /Results ('View Results Page' with a ua-btn-primary-arrow '→' span), a secondary anchor to /Upload ('↺ Upload Another' with ua-btn-secondary-icon span), and a tertiary anchor to /Dashboard ('← Return to Dashboard' with ua-btn-tertiary-icon span). Below the actions renders a ua-status-hint div containing a ua-status-pill span with a ua-status-dot animated indicator and the text 'Analysis complete — results saved to your project'. Imports UploadActions.css.

As a frontend developer, implement the AnalysisHero section for the Analysis page. Renders a static hero with decorative background layers (ah-bg-grid, ah-bg-accent, ah-bg-accent-2) and an ah-content container. Displays a breadcrumb nav linking to /Dashboard. Renders a horizontal workflow stepper from the workflowSteps array (4 steps: upload=done, extract=done, analysis=active, scope=pending), each with an inline SVG icon, step name, meta description, and a status badge using badgeClass map (ah-step-badge--done, ah-step-badge--active, ah-step-badge--pending). No state hooks; purely presentational. Import from '../styles/AnalysisHero.css'.

As a frontend developer, implement the AnalysisUpload section for the Analysis page. Uses useState for isDragOver and files array (seeded with two demo files: 'Site-Plan-Block-A.pdf' at STATUS_COMPLETE and 'Electrical-Layout-Rev2.pdf' at STATUS_PROCESSING), and useRef for fileInputRef and nextId counter. Implements addFiles via useCallback mapping File objects to {id, name, size, status: STATUS_PENDING}. Drag-and-drop zone with onDragOver/onDragLeave/onDrop handlers. Hidden file input triggered by FolderOpen button. FileItem sub-component renders lucide FileText icon, file name, formatBytes size, status badge (au-badge-complete/processing/pending), StatusIcon switcher (CheckCircle/Loader/Clock), and X remove button; STATUS_PROCESSING items render an au-file-progress animated bar. RecentFiles list renders 3 static entries. ArrowRight CTA button. Import from '../styles/AnalysisUpload.css', lucide-react icons.

As a frontend developer, implement the AnalysisProgress section for the Analysis page. Renders two UploadCard components from INITIAL_UPLOADS array (up-001 at 72% overall, up-002 at 38%). Each UploadCard uses useState for expanded (accordion toggle) and data (live progress), plus useRef for tickRef interval. A useEffect tick fires every ~800ms incrementing active phase pct by 1-4%, transitioning status from active→complete and promoting next pending phase to active, recalculating overallPct as average of phase pcts. ChevronDown rotates on expanded. Phase rows render phaseIcon switcher (CheckCircle/Loader/Clock from lucide), a progress bar, and eta string. Stats panel shows textBlocks, rulesChecked, matchesFound, conflicts. RefreshCw button resets data to initial. STAGE_DEFINITIONS array defines 4 stages (extraction, rulematching, conflict, injection). Import from '../styles/AnalysisProgress.css', lucide-react.

As a frontend developer, implement the AnalysisConflicts section for the Analysis page. Uses useState for search query, severity filter, status filter, and expandedId (accordion row). useMemo filters CONFLICTS_DATA (7 entries: CONF-0041 through CONF-0047) by search text matching description/rule/location/keywords and by severity/status dropdowns. Each conflict row renders a severity icon (AlertTriangle for critical/high, AlertCircle for medium, Info for low, CheckCircle for resolved) with color-coded CSS classes, conflict id, rule badge, ruleType tag, location, keywords chips, and ChevronDown chevron. Expanded row reveals matchedText blockquote, detectedAt timestamp, and suggestion panel. Search input uses lucide Search icon. Filter dropdowns for severity (all/critical/high/medium/low) and status (all/open/review/resolved). Import from '../styles/AnalysisConflicts.css', lucide-react.

As a frontend developer, implement the AnalysisDetails section for the Analysis page. Uses useState for selectedId (defaults to 'CF-001') and activeTab ('overview'|'rule'|'resolution'). Renders a left sidebar list of 3 conflicts (CF-001 Structural Load Path Mismatch high, CF-002 Fire Rating Scope Conflict high, CF-003 MEP Coordination Conflict medium) with severity color indicators and ChevronRight active marker. Right panel shows selected conflict detail: header with AlertTriangle/CheckCircle severity icon, title, rule label, severity badge, status badge (Open/Under Review), and action buttons (Copy with lucide Copy, Download with Download, Flag with Flag, RotateCcw with RotateCcw). Tab bar switches between Overview (keywords Tag chips + snippet blockquote with FileText icon + Shield note), Rule (ruleTemplate + ruleDescription with Lightbulb icon), and Resolution (resolution text with MessageSquare icon) panels. Meta row shows page and date. Import from '../styles/AnalysisDetails.css', lucide-react.

As a frontend developer, implement the AnalysisBlueprint section for the Analysis page. Uses @react-three/fiber Canvas with OrbitControls and Html from @react-three/drei, plus THREE.js directly. 3D scene contains: BlueprintFloor (planeGeometry 7x5, meshStandardMaterial #1a2744), BlueprintGrid (lineSegments from BufferGeometry with 0.5-unit grid lines at opacity 0.35), WallSegment components computing direction/length via THREE.Vector3 subtraction with BoxGeometry walls, and ConflictMarker components at CONFLICTS positions (5 entries: C-001 critical, C-002 warning, C-003 warning, C-004 critical, C-005 resolved) rendering animated sphere meshes with Html tooltip overlays. Uses useState for activeConflict and viewMode (3d|flat). useRef for canvas container. useCallback for conflict selection. Flat mode renders 2d SVG overlay with pos2d percentage positions and conflict pins. Sidebar panel lists all CONFLICTS with severity badges. Suspense wraps Canvas. Import from '../styles/AnalysisBlueprint.css', @react-three/fiber, @react-three/drei, three.

As a frontend developer, implement the AnalysisActions section for the Analysis page. Uses useState for dropdownOpen, dialogOpen, dialogType (null|'discard'|'archive'), and toast (null|string). useRef for dropdownRef (click-outside detection) and toastTimer. useEffect adds mousedown listener when dropdownOpen=true to close dropdown on outside click. Two secondary action buttons (Share, Download PDF) each with inline SVG icons rendered from secondaryActions array. Dropdown trigger button toggles dropdownOpen; renders dropdownItems array (Duplicate Analysis, Archive Analysis, separator <hr>, Discard Analysis with danger=true styling). Clicking 'archive' or 'discard' sets dialogType and opens modal dialog. dialogConfig object maps types to {title, body, confirmLabel}. handleExportReport and handleMarkComplete call showToast() which sets toast string and auto-clears after 3000ms via setTimeout. Dialog has overlay backdrop, confirm/cancel buttons. Toast notification animates in/out. Import from '../styles/AnalysisActions.css'.

As a frontend developer, implement the AnalysisRelated section for the Analysis page. Purely static/presentational component with no state hooks. Renders an ar-root section with ar-inner container. Header contains ar-eyebrow span with ar-eyebrow-dot, h2 'Continue Your Workflow', and subtitle paragraph. ar-grid maps over relatedItems array (4 items) rendering anchor tags with colorClass variants: ar-card--green (/Results), ar-card--blue (/Rules), ar-card--orange (/ScopeGaps), ar-card--red (/Uploads). Each card has ar-icon-wrap with inline SVG, ar-card-body with ar-card-label and ar-card-desc, and ar-card-footer with ar-card-tag span and ar-card-arrow SVG chevron. Import from '../styles/AnalysisRelated.css'.

As a frontend developer, implement the Footer section for the Analysis page. This component (may already exist from Home and Upload pages) uses useState for email input and subscribed boolean. Renders a dark footer with logo mark, tagline, and newsletter signup form with controlled input and handleSubscribe toggling subscribed state. linkColumns array (4 columns: Product, Company, Support, Legal) each with 3-4 anchor links rendered as grid columns. socialLinks array (GitHub, Twitter, LinkedIn, YouTube) renders SVG icon buttons. Bottom bar shows copyright text and legal links. Import from '../styles/Footer.css'.

As a frontend developer, implement the Navbar section for the Results page. This component reuses the Navbar from Analysis/Upload pages — check if it already exists before creating. The JSX uses framer-motion AnimatePresence for the mobile drawer, a scroll-driven `nb-scrolled` class toggled via `useState(scrolled)` and a `useEffect` scroll listener, animated SVG logo paths (blueprintPathD, accentPathD) drawn via strokeDashoffset motion, a `ctaHover` state for the CTA ripple effect, and `document.body.style.overflow` lock when mobile menu is open. Nav links include Landing, Dashboard, Analysis, Results, Rules, Uploads, ScopeGaps, Settings. Includes Sign In / Sign Up desktop buttons and a motion-animated CTA. Responsive hamburger menu with AnimatePresence exit animations.

As a frontend developer, implement the RulesActionBar section from `RulesActionBar.jsx`. Build a sticky bottom action bar with: a pending changes summary displaying the `pendingChanges` array (4 items) with a `ClockIcon` and count badge; a Reset to Defaults button with `ResetIcon` that opens a `ConfirmModal` (type='reset') on click; a Save Changes button with `SaveIcon` that transitions through three states — idle → saving (renders spinning `SpinnerIcon` animation, button disabled) → saved (renders `SaveIcon` with success styling) — managed via `useState` for `saveState` ('idle' | 'saving' | 'saved') and `useCallback` for `handleSave` with a simulated async delay; and a `ConfirmModal` component rendered via `useState` for `modalType` ('save' | 'reset' | null) with overlay click-to-dismiss, a `ShieldIcon` (save) or `AlertIcon` (reset) header, confirmation description text, and the `pendingChanges` list rendered only on save confirmation. All icon components (SaveIcon, ResetIcon, ClockIcon, SpinnerIcon, ShieldIcon, AlertIcon) are defined as inline SVG functional components.

As a frontend developer, implement the ResultsHeader section for the Results page. The JSX uses Three.js (not react-three-fiber) directly via `useRef` and `useEffect` to mount a WebGLRenderer with an OrthographicCamera onto a div. It renders a blueprint grid of THREE.Line objects spaced 40px apart, an accent rectangle outline in blue (0x3B5998), and green partition lines (0x38A169) representing room divisions. A `frameRef` handles the animation loop and a `rendererRef` tracks cleanup. Static analysisData object provides: title 'Tower Block A — Structural & MEP Drawing Set', filename, uploadDate 'May 16 2026', processingTime '3.2s', totalConflicts 14, status 'Analysis Complete'. These values are displayed alongside the Three.js canvas accent. Responsive via CSS media queries.

As a frontend developer, implement the ConflictsSummary section for the Results page. The JSX renders 4 stat cards (Total Conflicts: 47, High Severity: 14, Open Items: 29, Resolved: 18) each with a ThreeBadge sub-component that mounts a Three.js WebGLRenderer with a PerspectiveCamera and an IcosahedronGeometry(0.8, 0) rendered in wireframe using the card's color. Each card has a `sparkData` array (7 values) rendered as an inline SVG sparkline, a trend label (e.g. '+12%', '-5%'), a direction indicator ('up'/'down'), SVG icons, colorVar and bgTint CSS variables, and a `modifier` class (e.g. `cs-card--secondary`). Uses `useRef` and `useEffect` for Three.js lifecycle with a `let animId` RAF loop and proper cleanup. Responsive grid layout via CSS.

As a frontend developer, implement the ConflictsList section for the Results page. The JSX defines an ALL_CONFLICTS array of 10+ conflict objects (CONF-0041 through CONF-0054+) each with id, ruleName, keywords array, severity ('critical'/'high'/'medium'/'low'), status ('Open'/'In Review'/'Resolved'), detectedAt time, and detectedDate. Uses `useState` for activeFilter, searchQuery, sortKey, and selectedIds (Set). Uses `useMemo` to derive filteredConflicts from the full list based on active severity filter and search string match against ruleName and keywords. Renders a filter bar with severity pill buttons, a search input, and a sort dropdown. Each row shows the conflict ID badge, ruleName, keyword chips, severity dot, status badge, and a select checkbox. Clicking a row updates a selectedConflict state passed up or to ConflictDetail. Includes pagination or virtual scroll for long lists. Full responsive CSS with mobile card stacking.

As a frontend developer, implement the ExportOptions section for the Results page. The JSX imports lucide-react icons (FileText, Download, Share2, Eye, Copy, Check, ChevronRight, Loader). State: `toggles` object initialized from `toggleOptions` array defaults (5 toggles: includePdfs=true, includeRecommendations=true, includeKeywordMap=false, includeScopeGaps=true, includeMetadata=false), `copied` boolean, `pdfLoading` boolean, `csvLoading` boolean, `toast` string. `enabledCount` derived by counting truthy toggles. `handleCopy` uses `navigator.clipboard.writeText(SHARE_URL)` with a 2s `copied` reset and 2.8s toast. `handlePdfExport` sets pdfLoading for 1800ms then shows toast. `handleCsvExport` sets csvLoading for 1200ms then shows toast. Renders: section header with Download icon and label, 5 toggle rows each with a custom ToggleSwitch (checkbox + styled track/thumb spans), PDF export button with Loader spinner during loading, CSV export button with loading state, and a copy-link row with Check/Copy icon swap. Toast notification with auto-dismiss. Responsive layout.

As a frontend developer, implement the Footer section for the Results page. This component reuses the Footer from previous pages (Home, Upload, Analysis) — verify if it already exists before creating. The JSX uses framer-motion and AnimatePresence. It renders 4 link columns: Platform (Home, Dashboard, Analysis, Results), Tools (Upload Drawings, Uploads History, Scope Gaps, Rules Engine), Account (Login, Sign Up, Settings), Legal (Privacy Policy, Terms of Service, Cookie Policy). Social icons for LinkedIn, GitHub, Twitter rendered as inline SVG with fill='currentColor'. A `SocialIcon` sub-component accepts `hoveredIcon` and `setHoveredIcon` props for hover state management via `useState`. Animated entrance using framer-motion variants. Responsive grid layout collapsing to single column on mobile via CSS media queries.

As a frontend developer, implement the Navbar section for the ScopeGaps page using the existing Navbar.jsx component. The component uses useState for isOpen/scrolled/ctaHover state, useEffect for scroll listener (setScrolled on window.scrollY > 10) and body overflow lock when mobile menu opens. Renders an animated SVG logo using framer-motion strokeDashoffset draw animation (blueprintPathD + accentPathD, duration 1.2s). Desktop nav renders navLinks array including the ScopeGaps link. Includes nb-btn-signin, nb-btn-signup, and a CTA ripple button. Note: this component likely already exists from previous pages (Analysis, Results) — reuse if available, wire into ScopeGaps page layout.

As a frontend developer, implement the ConflictDetail section for the Results page. The JSX uses `@react-three/fiber` Canvas with OrbitControls from `@react-three/drei` and a `useFrame` hook inside a child mesh component for the 3D conflict visualization. Wrapped in React `Suspense`. Contains a `conflicts` array of 3 detailed objects (CF-001 Fire Egress Clearance, CF-002 Mechanical Clearance, CF-003 Occupant Load Discrepancy) each with: id, rule_name, rule_description, matched_keywords array, extracted_text_snippet (page + text), resolution_steps array (4 items), and linked_scope_gap (id, title, status, severity). Uses `useState` for activeConflictId and a `useRef`/`useEffect` for canvas sizing. Renders: rule name header, description paragraph, matched keyword chips, extracted text snippet block with page reference, numbered resolution steps list, and linked scope gap card with severity badge. Tab or accordion switching between conflicts. Full responsive layout.

As a frontend developer, implement the ActionPanel section for the Results page. The JSX manages: `selectAll` boolean, `selectedCount` number (set to TOTAL_CONFLICTS=14 when selectAll toggled), `severityOpen` and `assignOpen` dropdown states, `mobileExpanded` accordion state, `toast` string and `toastExit` boolean for notification dismissal with a `toastTimer` ref. Uses `useRef` for `severityRef` and `assignRef` for click-outside detection via `useEffect`. Renders a bulk-action toolbar with: a Select All checkbox, severity reclassify dropdown (critical/high/medium/low with colored dots), assign-to dropdown listing 4 team members (Alex Rivera/AR, Sam Chen/SC, Jordan Mills/JM, Taylor Brooks/TB with roles), a download report button, and a 'Run AI Fix' bolt-icon button. On mobile, collapses into an expandable panel via `mobileExpanded`. Toast appears on action completion with exit animation via `toastExit`. Custom SVG icon components: CheckIcon, ChevronIcon, ShieldIcon, UserIcon, DownloadIcon, BoltIcon.

As a frontend developer, implement the ScopeGapsHeader section for the ScopeGaps page. Renders a breadcrumb nav (Dashboard → Analysis → Scope Gaps) with aria-current='page' on the active crumb. Displays a header row with an sgh-icon-badge containing the inline FlagIcon SVG (crimson #E53E3E stroke with orange accent circle). Renders three statPills — '14 Open' (sgh-stat-pill--open), '6 In Review' (sgh-stat-pill--review), '23 Resolved' (sgh-stat-pill--resolved) — as a summary strip. Includes ExportIcon and UploadIcon SVG action buttons in the header row for exporting and uploading. Uses sgh-root, sgh-inner, sgh-header-row, sgh-title-block class structure from ScopeGapsHeader.css.

As a frontend developer, implement the FilterBar section for the ScopeGaps page. Uses useState for activeStatuses[], activeSeverities[], dateFrom, dateTo, and searchQuery. Renders a keyword search input with lucide-react Search and X icons. Status toggle pills (Open/In Progress/Resolved) use useCallback toggleStatus to add/remove from activeStatuses array with CSS classes fb-pill--open, fb-pill--in-progress, fb-pill--resolved. Severity toggle pills (Low/Medium/High/Critical) mirror the same pattern with fb-pill--low through fb-pill--critical. Date range inputs for dateFrom/dateTo. Active filter tags are computed from all active filters and rendered as dismissible chips with individual onRemove handlers. clearAll() resets all state. hasFilters boolean controls visibility of the clear button.

As a frontend developer, implement the Footer section for the ScopeGaps page using the existing Footer.jsx component. Renders four linkColumns (Platform, Tools, Support, Account) each with labeled anchor links. socialLinks array renders LinkedIn, GitHub, and Twitter SVG icons. Uses useState for emailFocused and emailValue to manage a newsletter email input with focus styling. Note: this Footer component likely already exists from previous pages (Upload, Analysis, Results) — reuse if available and wire into ScopeGaps page layout. Uses Footer.css.

As a frontend developer, implement the GapsList section for the ScopeGaps page. Renders a mock dataset of 5+ scopeGaps objects each with id, keywords[], description, location, status (escalated/open/in-review), severity (critical/high/medium), notes, fullNotes, and assignee. Uses useState for expanded row tracking. Each gap card shows: lucide-react MapPin for location, FileText for sheet reference, AlertTriangle/CheckCircle/Clock icons keyed to severity/status. Keywords render as inline chips. ArrowUpRight icon triggers expand to show fullNotes. Assignee badge renders initials avatar or 'Unassigned' state. Cards use GapsList.css with severity-coded left border accents (critical/high/medium/low color classes).

As a frontend developer, implement the DetailModal section for the ScopeGaps page. Uses @react-three/fiber Canvas and @react-three/drei OrbitControls with React Suspense for a 3D blueprint visualization of the conflict location. Renders GAP_DATA object containing: id, title, status, severity, createdAt, callouts[] (each with text/source/page), matchedRules[] (each with id/name/desc/severity), keywords[] (each with text and type: conflict/matched/partial), and resolutions[]. Uses useState for activeTab (callouts/rules/keywords/resolutions), useRef and useEffect for modal focus trap and escape key dismiss. Keywords render color-coded chips by type. Matched rules list shows severity badges. Resolution options are rendered as actionable cards. Uses DetailModal.css with a modal overlay, scrollable content panel, and tab navigation bar.

As a frontend developer, implement the StatusUpdateBar section for the ScopeGaps page. Uses useState for selectedStatus, selectedAssignee, selectedSeverity, notes, selectionCount (mocked at 3), showSuccess, and isVisible. Renders TEAM_MEMBERS dropdown (Unassigned/Sarah Chen/Marcus Obi/Priya Nair/David Kowalski/Lena Fischer). STATUS_OPTIONS select with dot indicator classes (sub-status-dot-open/progress/resolved). SEVERITY_LEVELS rendered as toggle button group with classes sub-sev-critical/high/medium/low. Notes textarea. handleUpdate() triggers setShowSuccess(true) then auto-hides after timeout, guarded by empty-field check. CheckCircleIcon SVG animates in on success. XIcon dismisses the bar setting isVisible false. Uses StatusUpdateBar.css sticky bottom bar layout. Inline UpdateIcon SVG on the submit button.