Landing Page Template
A modern landing page with hero section, features grid, call-to-action, and footer. Perfect for product launches and marketing sites.
Template Features
Hero section with CTAs
Real navbar component
Feature cards grid
Testimonials with callouts
Responsive footer
Mobile-first design
Live Preview
Landing Page Preview - Fully Interactive
Build Amazing Products Faster
The modern UI framework that helps you create beautiful, responsive web applications with ease.
No credit card required
Free forever
Why Choose Us
Everything you need to build modern web applications
Lightning Fast
Optimized for performance with minimal bundle size.
Fully Responsive
Mobile-first design that looks perfect on any device.
Customizable
Easily customize to match your brand identity.
"This framework saved us weeks of development time. Highly recommended!"
- Sarah Johnson, CEO
"Beautiful components and excellent documentation. A joy to work with."
- Mike Chen, Developer
Ready to Get Started?
Join thousands of developers building amazing products.
Full Template Code
Copy this complete HTML to use the landing page template. Customize the content, images, and colors to match your brand.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Product - Build Amazing Things</title>
<link rel="stylesheet" href="path/to/focus-ui.css">
</head>
<body>
<!-- Navigation -->
<nav class="focus-navbar focus-navbar-light">
<div class="focus-navbar-brand">
<a href="#" class="focus-text-bold focus-text-lg">MyProduct</a>
</div>
<div class="focus-navbar-nav">
<a href="#features" class="focus-nav-link">Features</a>
<a href="#pricing" class="focus-nav-link">Pricing</a>
<a href="#about" class="focus-nav-link">About</a>
<a href="#contact" class="focus-nav-link">Contact</a>
<button class="focus-btn focus-btn-primary">Sign Up</button>
</div>
</nav>
<!-- Hero Section -->
<section class="focus-py-5" style="background: linear-gradient(135deg, rgba(var(--focus-color-primary-rgb), 0.1), rgba(var(--focus-color-info-rgb), 0.1)); min-height: 500px;">
<div class="focus-container">
<div class="focus-row focus-row-align-center" style="min-height: 400px;">
<div class="focus-col-12 focus-col-lg-6">
<h1 class="focus-text-5xl focus-text-bold focus-mb-4">
Build Amazing Products Faster
</h1>
<p class="focus-text-xl focus-text-secondary focus-mb-4">
The modern UI framework that helps you create beautiful, responsive web applications with ease.
Ship faster, build better.
</p>
<div class="focus-flex focus-gap-3">
<button class="focus-btn focus-btn-primary focus-btn-lg">
<i class="fa fa-rocket"></i> Get Started Free
</button>
<button class="focus-btn focus-btn-secondary focus-btn-lg">
<i class="fa fa-play-circle"></i> Watch Demo
</button>
</div>
</div>
<div class="focus-col-12 focus-col-lg-6 focus-text-center">
<div class="focus-card" style="padding: 3rem;">
<i class="fa fa-code focus-text-primary" style="font-size: 8rem;"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="focus-py-5">
<div class="focus-container">
<div class="focus-text-center focus-mb-5">
<h2 class="focus-text-4xl focus-text-bold focus-mb-3">Why Choose Us</h2>
<p class="focus-text-xl focus-text-secondary">Everything you need to build modern web applications</p>
</div>
<div class="focus-row">
<div class="focus-col-12 focus-col-md-6 focus-col-lg-4">
<div class="focus-card focus-mb-4">
<div class="focus-card-body focus-text-center">
<i class="fa fa-bolt focus-text-primary focus-mb-3" style="font-size: 3rem;"></i>
<h3 class="focus-card-title focus-mb-3">Lightning Fast</h3>
<p class="focus-text-secondary">
Optimized for performance with minimal bundle size and lightning-fast load times.
</p>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-4">
<div class="focus-card focus-mb-4">
<div class="focus-card-body focus-text-center">
<i class="fa fa-mobile-alt focus-text-primary focus-mb-3" style="font-size: 3rem;"></i>
<h3 class="focus-card-title focus-mb-3">Fully Responsive</h3>
<p class="focus-text-secondary">
Mobile-first design that looks perfect on any device, from phones to desktops.
</p>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-4">
<div class="focus-card focus-mb-4">
<div class="focus-card-body focus-text-center">
<i class="fa fa-paint-brush focus-text-primary focus-mb-3" style="font-size: 3rem;"></i>
<h3 class="focus-card-title focus-mb-3">Customizable</h3>
<p class="focus-text-secondary">
Easily customize colors, spacing, and components to match your brand.
</p>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-4">
<div class="focus-card focus-mb-4">
<div class="focus-card-body focus-text-center">
<i class="fa fa-puzzle-piece focus-text-primary focus-mb-3" style="font-size: 3rem;"></i>
<h3 class="focus-card-title focus-mb-3">Rich Components</h3>
<p class="focus-text-secondary">
Comprehensive library of pre-built components ready to use out of the box.
</p>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-4">
<div class="focus-card focus-mb-4">
<div class="focus-card-body focus-text-center">
<i class="fa fa-shield-alt focus-text-primary focus-mb-3" style="font-size: 3rem;"></i>
<h3 class="focus-card-title focus-mb-3">Accessible</h3>
<p class="focus-text-secondary">
Built with accessibility in mind, following WCAG guidelines and best practices.
</p>
</div>
</div>
</div>
<div class="focus-col-12 focus-col-md-6 focus-col-lg-4">
<div class="focus-card focus-mb-4">
<div class="focus-card-body focus-text-center">
<i class="fa fa-book focus-text-primary focus-mb-3" style="font-size: 3rem;"></i>
<h3 class="focus-card-title focus-mb-3">Well Documented</h3>
<p class="focus-text-secondary">
Comprehensive documentation with examples to get you started quickly.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="focus-py-5" style="background: var(--focus-color-primary); color: white;">
<div class="focus-container focus-text-center">
<h2 class="focus-text-4xl focus-text-bold focus-mb-3">Ready to Get Started?</h2>
<p class="focus-text-xl focus-mb-4">
Join thousands of developers building amazing products with our framework.
</p>
<div class="focus-flex focus-justify-center focus-gap-3">
<button class="focus-btn focus-btn-light focus-btn-lg">
<i class="fa fa-rocket"></i> Start Free Trial
</button>
<button class="focus-btn focus-btn-outline focus-btn-lg" style="border-color: white; color: white;">
<i class="fa fa-phone"></i> Contact Sales
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="focus-py-4" style="background: var(--focus-color-bg-light); border-top: 1px solid var(--focus-color-border);">
<div class="focus-container">
<div class="focus-row">
<div class="focus-col-12 focus-col-md-4 focus-mb-4">
<h4 class="focus-text-bold focus-mb-3">MyProduct</h4>
<p class="focus-text-secondary">Building the future of web development, one component at a time.</p>
</div>
<div class="focus-col-12 focus-col-md-4 focus-mb-4">
<h4 class="focus-text-bold focus-mb-3">Product</h4>
<ul class="focus-list-unstyled">
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Features</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Pricing</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Documentation</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Changelog</a></li>
</ul>
</div>
<div class="focus-col-12 focus-col-md-4 focus-mb-4">
<h4 class="focus-text-bold focus-mb-3">Company</h4>
<ul class="focus-list-unstyled">
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">About</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Blog</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Contact</a></li>
<li class="focus-mb-2"><a href="#" class="focus-text-secondary">Privacy</a></li>
</ul>
</div>
</div>
<div class="focus-divider focus-my-4"></div>
<div class="focus-text-center focus-text-secondary">
<p>© 2026 MyProduct. All rights reserved.</p>
</div>
</div>
</footer>
<script src="path/to/focus-ui.js"></script>
</body>
</html>Customization Tips
Hero Customization
Adjust hero background gradients using CSS variables like --focus-color-primary-rgb and --focus-color-info-rgb for custom brand colors.
Button Variants
Change CTA button styles with classes like .focus-btn-primary, .focus-btn-lg, or .focus-btn-outline to match your design.
Feature Grid
Add or remove feature cards as needed. Use .focus-col-lg-3 for 4 columns or .focus-col-lg-6 for 2 columns per row.
Navigation
Modify navbar links and footer structure to match your site. The navbar uses .focus-navbar-light or .focus-navbar-dark variants.