High Converting Page (HCP) – Single Dynamic, Mobile-Optimized Page
The High-Converting Page (HCP) is the core landing page delivered in the Loren AI™ Basic Package.
It is designed to be visually compelling, mobile-first, fast to deploy, and engineered to maximize conversions using AI-driven CTAs and trust elements.
This page outlines the design standards, content structure, interactions, and technical requirements for building or updating the HCP.
Use the following prompt and modify as needed for particular HCP:
Visual Design
- – Full viewport height hero
- – Gradient background: dark blue → teal
- – Background hero image with 40% opacity overlay
- – Animated neural wave effects (2 layers, staggered delays)
- – Glass-morphism elements (blur, frosted panels)
- – Fully responsive, mobile-first layout
Content Structure
1. Brand Logo (Top Center)
- – Sparkles icon in a gradient rounded square
- – Text: "Loren AI" with metallic gradient effect
- – Horizontal flex layout
2. Main Headline
- – Text: "Scale Your Business with AI Voice Agents and Automation"
- – "Voice Agents" highlighted in teal
- – Responsive font sizes: 2xl (mobile) → 6xl (desktop)
- – White, bold, tight line-height
3. Subheadline
- – Short description of 24/7 AI capabilities
- – Light gray text
- – Smaller font, max-width for readability
4. Call-to-Action Buttons
Primary Button: "Book a Demo"
- – Teal background
- – Phone icon
- – Smooth scroll to #book-demo
- – Hover: glow shadow + rotating icon
Secondary Button: "View Pricing"
- – Ghost style
- – White border
- – Hover: white background fill
- – Links to /pricing
5. Trust Indicators
- – Label: "TRUSTED BY" (uppercase)
- – Industry badges:
- • Med Spas
- • Real Estate
- • Legal
- • Home Services
- – Badges styled as glass-morphism pills
- – Wrap on mobile, horizontal layout on desktop
6. Floating AI Widget (Bottom-Right)
- – Fixed floating bubble with avatar
- – Continuous float animation
- – Tooltip: "Try AI Voice Live"
- – Opens ConversationalAI modal on click
- – Scales on hover
7. Scarcity Banner (Bottom)
- – Fixed at bottom of hero
- – Teal background with backdrop blur
- – Urgency message: limited demo spots
- – Full width with padding
Interactions
- – Smooth scroll to booking section
- – AI widget triggers ConversationalAI modal
- – Hover animations on all buttons
- – Fade-in entrance animation
Technical Requirements
- – React + TypeScript
- – i18next for translations
- – Lucide icons: Phone, Sparkles, ArrowRight, Play, Bot, MessageCircle
- – TailwindCSS (with custom classes)
- – Import hero background image from assets
- – Integrate ConversationalAI with ElevenLabs agent ID
Animations
- – Neural wave keyframe animation
- – Fade-in on load
- – Floating animation for AI widget
- – Icon transform animations on button hover