nova-web

As a frontend developer, implement the LandingHero section. Render a staggered kinetic headline using HEADLINE_WORDS array with containerVariants (staggerChildren:0.08, delayChildren:0.3) and alternating wordVariantLeft/wordVariantRight (spring stiffness:120, damping:14, x:±40). The word 'Regulations' renders with accent styling. Include fadeUpVariant (opacity 0→1, y:24, duration 0.6) for subtitle and CTA buttons. Integrate a @react-three/fiber Canvas with a RegulationSphere component: IcosahedronGeometry at args [1.6,1] for inner glowing solid (color #1A73E8, emissiveIntensity:0.15, opacity:0.12) and args [1.9,1] wireframe outer shell (opacity:0.18), plus EdgesGeometry via useMemo. useFrame drives continuous rotation (y: t*0.15 + scrollProgress*0.5, x: sin(t*0.1)*0.2 + scrollProgress*0.3) on meshRef, wireRef, edgesRef. Import LandingHero.css and THREE from three.

As a frontend developer, implement the LandingTrustBadges section. Render 6 badge cards from the badges array: shield (99.5% Answer Accuracy), zap (<2s Response Time), users (500+ Internal Users), lock (SOC 2 Compliance Certified), check (10K+ Queries Resolved Daily), clock (99.9% Platform Uptime). Each badge uses a BadgeIcon switch component rendering inline SVGs. Use useScroll with target sectionRef and offset ['start end','end start'] for scrollYProgress. Apply useTransform for bgParallax ([60,-60]) and midParallax ([40,-40]) on decorative layers. Per-badge translateX offsets via useTransform with stagger (80+i*30) for scroll-driven slide-in. badgeOpacity useTransform [0,0.2,0.8,1]→[0,1,1,...]. Track activeDot state via carouselRef scroll. Import LandingTrustBadges.css.

As a frontend developer, implement the LandingRegulationMap section — the most complex section on the page. Render a @react-three/fiber Canvas with OrbitControls and Line from @react-three/drei. CATEGORIES array has 5+ items (employment, data-privacy, health-safety, financial, anti-corruption), each with id, label, color, summary, and qas array (3 Q&A pairs each). Each category is a 3D node in the canvas; useFrame drives animation. useState manages selected category and expanded Q&A. AnimatePresence handles panel transitions for the detail panel showing category summary and qas. useMemo and useCallback optimize node position calculation and click handlers. useRef tracks canvas container. Import LandingRegulationMap.css. This is a 3D interactive knowledge graph — the centerpiece feature of the landing page.

As a frontend developer, implement the LandingFeatures section. Render 4 feature cards from FEATURES array: Instant Answers, Comprehensive Coverage, Always Updated, Team-Wide Access — each with title, description, subFeatures array (3 items), and inline SVG icon. Use containerVariants (staggerChildren:0.12) and cardVariants (opacity 0→1, y:20, duration 0.5 easeOut) triggered by useInView. Apply iconVariants (rotateY 90→0, opacity 0→1) for icon reveal animation on card entry. Each subFeature renders as a checklist item. Import LandingFeatures.css.

As a frontend developer, implement the LandingHowItWorks section. Render 4 StepCard components from STEPS array (Access Dashboard, Explore Categories, Ask Your Question, Get Accurate Answers) each with number, lucide-react icon (LayoutDashboard, Layers, MessageCircleQuestion, Sparkles), headline, and description. Each StepCard uses useRef + useInView (once:true, margin:'-80px') and useTransform for parallaxOffset ([0,1]→[0,-30-index*10]). StepCard animates opacity 0→1, y:40→0, duration:0.6, delay:index*0.15. hiw-step-number has scale pulse animation (1→1.1→1, 2.5s repeat). hiw-step-ring has scale+opacity ripple (scale 1→1.5, opacity 0.3→0, 2s repeat). useIsMobile hook listens for window resize with 768px breakpoint. useScroll on section container drives scrollYProgress. Import LandingHowItWorks.css and lucide-react icons.

As a frontend developer, implement the LandingUseCases section. Render 4 use case cards from USE_CASES array: New Team Member Onboarding (id: onboarding), Compliance Verification (id: compliance), Policy Lookup (id: policy), Audit Preparation (id: audit). Each card has iconClass (uc-card-icon--{id}), inline SVG icon, title, description, and outcome string. Use useMotionValue and useSpring for 3D tilt card effect on mouse move. useCallback wraps mouse event handlers. motion.div wraps each card with useTransform deriving rotateX/rotateY from motion values for perspective tilt. Import LandingUseCases.css.

As a frontend developer, implement the LandingTestimonials section. Render 4 TestimonialCard components from testimonials array: Sarah Kim (Compliance Lead), James Mitchell (Operations Manager), Anika Patel (Legal Analyst), David Rodriguez (Team Lead Onboarding). Each TestimonialCard uses useRef + useInView (once:true, margin:'-40px') for scroll-triggered reveal (opacity 0→1, y:30→0, delay:index*0.1). StarsRow renders 5 StarIcon SVGs with individual starVariants (opacity 0→1, scale 0.3→1, y:8→0, delay i*0.08). Avatar wrapper has lt-avatar-glow with rotate:360 animation (duration:8). AnimatePresence manages active card transitions. useAnimation controls for coordinated reveal sequence. Import LandingTestimonials.css.

As a frontend developer, implement the LandingFAQ section. Render 7 accordion items from FAQ_DATA array covering: answer accuracy, follow-up questions, data security, Regulation Map explanation, mobile access, response speed, and login permissions. useState tracks the open/expanded item index. AnimatePresence handles accordion panel enter/exit transitions. Each FAQ item has question, answer, and optional link/linkText fields — items with links (e.g. '/Chatbot' with 'Try the chatbot', 'Start a conversation', 'Test response speed'; '/Landing' with 'Explore the map') render an anchor inside the expanded panel. motion.div on the answer panel animates height from 0 with overflow hidden. Import LandingFAQ.css.

As a frontend developer, implement the LandingCTA section. useState manages isHovered and particleBurst (incremented on each hover start to re-trigger particle animation key). useMemo generates particles array (length:10) with angle, distance (80-200px), size (4-10px), and delay per particle. handleHoverStart/handleHoverEnd via useCallback. Render lc-bg-layer with lc-bg-gradient, lc-blob-1/2/3. Render lc-mid-layer with 3 lc-accent-ring elements. motion.div lc-shimmer with backgroundPosition animation ('0% 0%'→'200% 0%', duration:4, repeat:Infinity linear). CTA headline 'Get Instant Answers to Rules & Regulations' with lc-headline-accent span, whileInView reveal (opacity 0→1, y:30, duration:0.7). Box shadow animates between glowShadowA and glowShadowB on hover. Particle burst renders 10 divs positioned via x/y offsets on hover. Import LandingCTA.css.

As a frontend developer, implement the Footer section. Render 4 link columns from linkColumns array: Product (Regulation Map, Chatbot Assistant, Q&A Database, Quick Search), Company (About Us, Our Team, Careers, Blog), Legal (Privacy Policy, Terms of Service, Cookie Policy, Compliance), Support (Help Center, Documentation, Contact Us, Status Page). FooterLink component uses useState for hovered state and renders motion.div ftr-link-underline with scaleX 0→1 on hover (duration:0.25 easeOut). SocialIcon wraps children with whileHover rotate:15 + scale:1.1 (spring stiffness:300, damping:15). useScroll drives blob1Y (scrollY * -0.2) and blob2Y (scrollY * -0.15) for ftr-blob--primary and ftr-blob--secondary parallax. showScrollTop state triggers via scrollY.on('change') when v>300; handleScrollTop calls window.scrollTo({top:0,behavior:'smooth'}). Newsletter form with email state and handleNewsletterSubmit. AnimatePresence for scroll-top button. Import Footer.css. Note: may already exist from another page.

As a frontend developer, implement the Navbar section for the Chatbot page. This component is shared with the Landing page (already implemented as task 13cb1949-2eb1-4139-93c5-1416009811d1) — verify the existing Navbar component works correctly on the Chatbot page with CURRENT_PAGE set to 'Chatbot' so the active nav link highlights correctly. The Navbar uses framer-motion for animated SVG logo path draw (logoContainerVariants, pathDrawVariant), magnetic hover effect on nav links via useMotionValue/useSpring (magneticX), scroll-based nb-scrolled class via useEffect, AnimatePresence for mobile menu open/close with height animation, and a hamburger with 3-line to X transform. Confirm the 'Chatbot' nav link shows the nb-active state and nb-underline scaleX animation.

As an AI Engineer, integrate GPT 5.4 (or latest available OpenAI model) into the FastAPI backend. Implement an AIService class that wraps the OpenAI client, handles prompt construction using the company brochure context, manages conversation history/context window, and returns structured responses. Include system prompt engineering for rules and regulations Q&A domain, retry logic, and token usage tracking. Store OpenAI API key in environment variables.

As a Data Engineer, implement a data ingestion pipeline that parses the company brochure (PDF or text), extracts rules and regulations content, chunks the content into semantically meaningful segments, and stores them in the database. Implement a script (scripts/ingest_brochure.py) that can be run via CLI or triggered on startup. Structure the data as regulation categories with associated Q&A pairs. Include Alembic migration for the regulations and categories tables.

As a Backend Developer, implement FastAPI endpoints for conversation session management: POST /api/sessions (create new session, returns session_token), GET /api/sessions/{session_token}/messages (fetch conversation history), DELETE /api/sessions/{session_token} (clear conversation). Store session token in HTTP-only cookie or return in response body for frontend storage. Note: ChatbotSidebar (be431ae3) and ChatbotConversation (7f98e965) frontend tasks depend on these endpoints for displaying past conversations.

As a frontend developer, implement the ChatbotHero section (prefix: ch2-) for the Chatbot page. The section renders decorative background blobs (ch2-bg-shape--1, ch2-bg-shape--2), a two-column layout with a text block and a stats block. The text block contains: an 'Assistant Online' badge with a pulsing ch2-badge-dot, a framer-motion animated h1 with ch2-headline-emphasis span, a subheadline and description paragraph (each with opacity/y fade-up on mount with staggered delays 0.08/0.16/0.24), and a ch2-chips row mapping over CHIPS array (icon + label, delay 0.32). The stats block (visible tablet+) maps over STATS array rendering ch2-stat items with staggered motion animations. Content references real metrics: 500+ Regulations, <1s Response Time, 99% Accuracy. CHIPS include Instant Answers, Rules & Regulations, Smart Search, Internal Access Only.

As a frontend developer, implement the ChatbotSidebar section (prefix: csb-) for the Chatbot page. Uses useState for mobileOpen (toggles mobile aside visibility), activeCategory (nullable string for category filter), and activeConv (defaults to 'c1'). Renders a mobile toggle button with hamburger SVG and AnimatePresence-driven slide-in panel. Desktop layout shows two sections: (1) CATEGORIES array (6 items: Workplace Safety, HR Policies, Compliance & Legal, Data & Privacy, Finance Rules, IT Security — each with id, label, emoji icon, count) rendered as csb-category-item buttons with active highlight when activeCategory matches; (2) CONVERSATIONS array (7 items with id, initials avatar, title, preview, time, active flag) rendered as csb-conv-item buttons with csb-conv-item--active class when activeConv matches. Each conversation item uses framer-motion itemVariants with custom stagger delay. Clicking a conversation sets activeConv state.

As a frontend developer, implement the Footer section for the Chatbot page. This component is shared with the Landing page (already implemented as task c6396cc8-e8ed-4a70-8cc9-414286cfa004) — verify the existing Footer component renders correctly on the Chatbot page. The Footer uses framer-motion useScroll/useTransform for parallax blobs (blob1Y at -0.2x scroll, blob2Y at -0.15x scroll), AnimatePresence for the fixed scroll-to-top button (appears when scrollY > 300, spring animation), FooterLink sub-component with per-link hover state and animated scaleX underline, SocialIcon sub-component with whileHover rotate+scale spring, newsletter form with controlled email input and handleNewsletterSubmit, and a 3-column ftr-grid layout (brand + 4-column link group + newsletter). Link columns cover Product, Company, Legal, Support with real labels referencing nova-web pages.

As a Backend Developer, implement the FastAPI endpoint POST /api/chat that accepts a user query and conversation history, forwards the request to GPT model, and returns an AI-generated answer. Include request/response Pydantic models (ChatRequest, ChatResponse), error handling, and response streaming support. Also implement GET /api/categories to return the list of regulation categories with metadata. Note: ChatbotConversation (7f98e965) and ChatbotSidebar (be431ae3) frontend tasks depend on this API.

As a Backend Developer, implement FastAPI endpoints: GET /api/categories (list all regulation categories with id, name, slug, icon, description, regulation_count), GET /api/categories/{slug} (single category detail with associated regulations and Q&A pairs), GET /api/regulations/search?q=query (full-text search across regulations). These endpoints support the LandingRegulationMap 3D visualization and ChatbotSidebar category browsing. Note: LandingRegulationMap (a54f2bce) and ChatbotSidebar (be431ae3) depend on this API.

As a frontend developer, implement the ChatbotConversation section for the Chatbot page. Uses useState for messages (initialised with INITIAL_MESSAGES array of 5 messages — bot greeting, user/bot exchange on remote work reimbursements, user/bot exchange on compliance incident reporting), inputValue string, isTyping boolean, and suggestionsVisible boolean. useRef for messagesEndRef (auto-scroll) and textareaRef (auto-resize). useEffect scrolls to bottom on messages change. handleSend: appends user message, sets isTyping true, uses setTimeout to simulate bot response picked randomly from BOT_RESPONSES array (4 entries), then appends bot message and clears isTyping. Textarea handles Enter-to-send (Shift+Enter for newline) and auto-resizes via scrollHeight. SUGGESTIONS array (4 chips: vacation policy, data retention, equipment request, code of conduct) renders as clickable suggestion chips that populate the input. Messages render with role-based styling (bot vs user bubbles), AnimatePresence for mount animations, and a typing indicator (3 animated dots) when isTyping is true. Copy-to-clipboard button on bot messages. Framer-motion used for message mount (opacity/y) and suggestion chip animations.

As a Tech Lead, verify end-to-end integration between the LandingRegulationMap 3D visualization frontend (a54f2bce) and the GET /api/categories backend API. Ensure: category nodes in the 3D canvas are populated from live API data; hovering a node shows the real summary from the database; clicking a node opens the detail panel with real Q&A pairs from GET /api/categories/{slug}; the transition from a regulation node click routes correctly to the Chatbot page (user flow: Landing: Click Regulation Node → Chatbot: Open Interface).

As a Tech Lead, verify end-to-end integration between the Chatbot page frontend (ChatbotConversation, ChatbotSidebar) and the backend chat/session/categories APIs. Ensure: user message sends to POST /api/chat and AI response renders correctly in the conversation thread; typing indicator shows during API call; conversation session persists across page refresh via session token; sidebar categories load from GET /api/categories; conversation history loads from GET /api/sessions/{token}/messages. Verify error states (API timeout, 500 errors) are handled gracefully in the UI.