Website development

**Development Brief: TrustFinc Landing Page** **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.