> ## Documentation Index > Fetch the complete documentation index at: https://docs.kleap.co/llms.txt > Use this file to discover all available pages before exploring further. # Landing Page > Create a high-converting landing page Create a marketing landing page that converts visitors into customers. ## What We're Building A conversion-focused landing page with: * Hero section with clear value proposition * Features/benefits section * Social proof (testimonials) * Pricing table * FAQ section * Call-to-action sections * Email signup form ## Step 1: Hero Section ### The Hook ``` Create a hero section with: - Bold headline that states the main benefit (not features) - Subheadline that expands on the value - Primary CTA button (most important action) - Secondary CTA or link (less commitment option) - Hero image or product screenshot - Optional: trust badges or social proof ``` ### Example Headlines Good headlines focus on benefits: | ❌ Feature-focused | ✅ Benefit-focused | | -------------------------- | --------------------------------- | | "AI-Powered Platform" | "Launch Your App 10x Faster" | | "Team Collaboration Tool" | "Never Miss a Deadline Again" | | "Email Marketing Software" | "Turn Subscribers into Customers" | ### Hero Styling ``` Style the hero section: - Large, readable headline (text-5xl or bigger) - Gradient or bold background - CTA buttons with strong contrast - Subtle animation on the image/screenshot - Responsive for mobile (stack vertically) ``` ## Step 2: Social Proof Bar ``` Add a social proof section below the hero: - Logos of companies using your product, OR - "Trusted by X,000 users", OR - Star rating with review count - Keep it subtle, not overwhelming ``` ## Step 3: Features/Benefits Section ``` Create a features section with: - Section headline: "Everything you need to [achieve goal]" - 3-4 feature cards in a grid - Each card: icon, title, brief description - Focus on benefits, not just features - Optional: screenshot or illustration for each ``` ### Feature Card Example ``` Feature: Automated Reports Benefit: "Save 5 hours every week with reports that write themselves" ``` ## Step 4: How It Works ``` Add a "How It Works" section: - 3 simple steps - Each step: number, title, description - Visual flow (arrows or timeline) - Ends with CTA button ``` Example: 1. Sign up in 30 seconds 2. Connect your data 3. Get insights automatically ## Step 5: Testimonials ``` Create a testimonials section: - Section headline: "What Our Customers Say" - 3 testimonial cards - Each shows: quote, name, company/role, photo - Optional: company logo - Consider a carousel for more testimonials ``` ### Getting Testimonials If you don't have real testimonials yet: * Use placeholder content * Add real ones as you get them * Ask early users for feedback ## Step 6: Pricing Section ``` Create a pricing section with: - 2-3 pricing tiers in cards - Highlight the recommended tier - Each shows: plan name, price, features list, CTA - Monthly/annual toggle if applicable - Money-back guarantee badge ``` ### Pricing Psychology * Put recommended plan in the middle * Use the decoy effect (make middle tier best value) * List specific features, not vague benefits * End with FAQ about pricing ## Step 7: FAQ Section ``` Add an FAQ section with: - Accordion-style Q&A - 5-8 common questions - Address objections and concerns - Include pricing, security, support questions - Add "Still have questions? Contact us" at the bottom ``` ### Common FAQs to Include * How does pricing work? * Is there a free trial? * How is my data secured? * Can I cancel anytime? * Do you offer refunds? * How do I get support? ## Step 8: Final CTA Section ``` Add a final CTA section before the footer: - Compelling headline: "Ready to [achieve benefit]?" - Brief reinforcing text - Primary CTA button (same as hero) - Trust element (guarantee, testimonial snippet) ``` ## Step 9: Email Capture ``` Add an email signup form: - Can be in hero, floating bar, or dedicated section - Simple: just email input + button - Clear value proposition ("Get weekly tips") - Collect emails with Kleap Forms (KleapForm) ``` ### Form Implementation ``` Make the email form functional: - Validate email format - Check for duplicate submissions - Save submissions with Kleap Forms (they land in your dashboard) - Show success message - Get an email notification on each signup ``` ## Step 10: Footer ``` Create a footer with: - Company logo - Navigation links - Legal links (Privacy, Terms) - Social media links - Copyright notice - Optional: newsletter signup ``` ## Step 11: Polish ### Mobile Optimization ``` Ensure mobile-first design: - Readable text sizes on mobile - Stacked layouts - Full-width CTAs - Easy tap targets - Fast loading ``` ### Performance ``` Optimize for speed: - Compress and lazy load images - Minimize JavaScript - Use Astro's image handling (or ``) - Target <3 second load time ``` ### SEO ``` Add SEO elements: - Compelling meta title and description - Open Graph tags for social sharing - Structured data for rich snippets - Fast loading (affects rankings) ``` ## Conversion Tips Don't confuse visitors with multiple competing actions. Ask for minimal information. Email-only signups convert better. Use testimonials, logos, guarantees, and security badges. Limited-time offers or scarcity can increase conversions. Test different headlines, CTAs, and layouts to improve. ## Launch Checklist * [ ] Hero communicates clear value * [ ] CTAs are prominent and consistent * [ ] Social proof is visible * [ ] Pricing is clear * [ ] FAQ addresses concerns * [ ] Mobile looks great * [ ] Page loads fast * [ ] Forms work correctly * [ ] Analytics tracking added Optimize your landing page for search engines