EverAfter AI Customer Portal Hero

Overview

This EverAfter AI landing page is a high-conversion SaaS hero template designed to showcase B2B product interfaces with high-impact visual flair. It features a sophisticated dark-mode aesthetic, a glowing product carousel, and a structured customer social proof section, making it an excellent reference for companies needing to communicate complex software value propositions through a clean, modern UI.

Design System

• Color Palette & Visual Hierarchy: The design uses a deep eggplant/dark purple background (#1a0b3b) to create a premium feel. High-contrast accent colors include a vibrant violet-blue for primary actions and soft pink/gold radial gradients (box-shadow: rgb(255, 122, 186)) that create a 'glow' effect around the product UI container.
• Typography: The system utilizes a mix of bold, high-contrast serif/display fonts for headings (emphasizing keywords like "Powered by AI") and clean sans-serif (Poppins/Inter) for readability in body copy and the navigation menu. A distinct handwritten font style is used for interface annotations to add a human touch.
• Page Structure: The flow begins with a split-screen hero (copy on left, media on right), followed by a grayscale auto-scrolling logo marquee (splide). It transitions into a customer-led growth value section, a testimonial carousel with rich quote blocks, an interactive accordion-based feature reveal, and a final CTA with an embedded Calendly widget.
• Reusable Components:
  • The Glowing Carousel: A Splide.js implementation that pairs a product screenshot with a floating caption.
  • Interactive Accordion: Found in the "Reduce time-to-value" section, which swaps high-resolution product images (.new-acc-img) based on the active trigger.
  • Logo Marquee: A seamless, infinite horizontal loop for brand trust.
  • Scheduling Form: A conversion-optimized block that reveals a Calendly inline widget upon email submission.
• Implementation Clues: Built with Webflow, utilizing Splide.js for all slider mechanics and Finsweet Accordion for the feature reveals. The layout relies on a container-based grid system (class p-container) with utility classes for spacing (e.g., is--56 for font size).

Use Cases

• Who should clone this: Early to mid-stage SaaS companies, AI startups, and B2B service providers who want to elevate their brand perception beyond standard light-mode templates.
• Effective Remixes:
  • FinTech/Security: Swap the purple for a deep navy or forest green while keeping the neon glow effects to signify protection and tech-focus.
  • Portfolio Sites: Adapt the product carousel to showcase case studies and use the accordion section to list services with associated project visuals.
• Remix Directions:
  • Info Architecture: The testimonial cards are highly modular; they can be cloned as a standalone social proof section for any page.
  • Scheduling Block: Reuse the "Enter email to see demo" pattern to gate scheduling, which is a high-intent lead capture strategy.
• Clone Scope: Suitable for a full-page clone to maintain the unified dark-mode narrative, or a quick section clone of the interactive feature accordion (.new-acc-wrap) which provides a space-efficient way to explain complex features.