Website

Project Overview: We are building a premium, high-performance landing page for an authorised financial advisor marketplace. The platform facilitates credential verification and manages escrow rails for client-advisor sessions. The front-end must communicate institutional trust, technical precision, and modern financial elegance. 1. Design System & Aesthetics The developer must strictly adhere to the following design tokens: Color Palette: Backgrounds: Deep Ink and Navy for high-contrast trust sections; Cream for clean reading areas. Accents: Gradients of Gold for primary call-to-actions (CTAs) and active UI states; Green for success/verification states. (Exact color codes will be provided upon hiring). Typography (Google Fonts): Primary/Body: DM Sans (Clean, modern readability). Headings: Cormorant Garamond (Institutional, serif authority). Data/Technical: IBM Plex Mono (Used strictly for financial figures, stats, and metadata labels). UI Components: Buttons must feature a pill-shape border-radius with hover states that lift the element slightly upward and expand the drop shadow. Glassmorphism effects (blurred backgrounds) on the fixed navigation bar and the Trust Ledger card. 2. Core Animations & Interactions Do not use heavy, bloated animation libraries. The interactions must be lightweight and CSS-driven: Scroll Reveals: Use a vanilla JavaScript Intersection Observer to gently fade in and slide elements upward as they enter the viewport. The Trust Ledger Hero Graphic: This is the visual centerpiece. It requires an SVG animation where a glowing gold node travels along a dashed path between a Client, Escrow, and Verified Advisor. Micro-interactions: Pulse animations on "live" status dots and hover states that slightly shift icon positions horizontally inside link text. 3. Required Page Structure The single-page architecture must follow this exact flow: Fixed Navigation: Blur-backed nav with anchor links and dual CTAs for logging in and finding an advisor. Hero Section: Dark gradient background featuring the main value proposition, dynamic platform stats, and the animated Trust Ledger graphic. Trust Strip: A horizontal band displaying the nine regulatory bodies. Three Paths (For You): A three-column card grid segmenting the user journey into Clients, Advisors, and Startups or SMEs. Platform Features: A dark six-cell grid outlining the technical backend (Pre-Flight Vault, Escrow Gateway, Regulatory Cross-Check). Escrow Demo: A split-layout section visually demonstrating how funds are held and released post-session. Trust-Velocity: A four-column tier layout showing how commission rates drop as advisors build trust. Pricing: Clean pricing cards, with the Prestige Partner tier highlighted and slightly scaled up visually. Footer: Institutional footer containing legal disclaimers regarding payment processing compliance and regulatory framing. 4. Technical Constraints Responsiveness: The layout must break down flawlessly for mobile devices. Grids (like the Three Paths and Features) must collapse from three columns to one column on mobile screens. Performance: Code must be raw HTML, CSS, and vanilla JavaScript. Keep it lightweight and fast.