Premium
0
42
Learnova
Learnova is a productivity-first SaaS template for modern work, team workspaces, and high-performance operational dashboards.
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learnova | Tailwind CSS Productivity Workspace Template</title>
<meta name="description" content="Learnova is a productivity-first Tailwind CSS SaaS template for modern work, team workspaces, and high-performance operational dashboards.">
<meta name="keywords" content="Learnova, Tailwind CSS template, HTML website template, SaaS landing page, productivity workspace, team dashboard, responsive business design">
<meta name="author" content="Let's templates">
<link rel="canonical" href="">
<meta property="og:type" content="product">
<meta property="og:site_name" content="Let's templates">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="">
<meta property="og:title" content="Learnova | Tailwind CSS Productivity Workspace Template">
<meta property="og:description" content="A productivity-first Tailwind CSS SaaS template for modern work, team workspaces, and high-performance operational dashboards.">
<meta property="og:image" content="">
<meta property="og:image:alt" content="Learnova template preview">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="">
<meta name="twitter:title" content="Learnova | Tailwind CSS Productivity Workspace Template">
<meta name="twitter:description" content="A productivity-first Tailwind CSS SaaS template for modern work, team workspaces, and high-performance operational dashboards.">
<meta name="twitter:image" content="">
<meta name="twitter:image:alt" content="Learnova template preview">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.highlight-pill {
background-color: #facc15;
color: #000;
padding: 0.1em 0.3em;
border-radius: 0.5em;
display: inline-block;
transform: rotate(-2deg);
}
.ui-float-card {
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}
</style>
</head>
<body class="bg-white text-gray-900 overflow-x-hidden">
<!-- block:start navbar -->
<header id="header" class="bg-[#1a1a1a] text-white py-6">
<div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
<div class="flex items-center gap-2">
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-black">
<i class="fa-solid fa-layer-group"></i>
</div>
<span class="text-2xl font-bold tracking-tight">Learnova</span>
</div>
<nav class="hidden lg:flex items-center gap-10 text-sm font-medium text-gray-300">
<a href="#" class="hover:text-white transition-colors">Home</a>
<a href="#" class="hover:text-white transition-colors">Features</a>
<a href="#" class="hover:text-white transition-colors">Templates</a>
<a href="#" class="hover:text-white transition-colors">Pricing</a>
</nav>
<div class="flex items-center gap-4">
<a href="#" class="hidden sm:block text-sm font-semibold border border-white/20 px-6 py-3 rounded-xl hover:bg-white/5 transition-all">Sign Up</a>
<a href="#" class="bg-white text-black px-6 py-3 rounded-xl text-sm font-bold hover:bg-gray-200 transition-all">Sign Up</a>
</div>
</div>
</header>
<!-- block:end navbar -->
<main>
<!-- block:start hero -->
<section id="hero" class="bg-[#1a1a1a] text-white pt-16 pb-32 px-6 overflow-hidden">
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<div class="space-y-10">
<h1 class="text-6xl md:text-8xl font-bold tracking-tight leading-[1.1]">
The <span class="highlight-pill px-4">Evolution</span> of <br/> Work Starts Here
</h1>
<p class="text-xl text-gray-400 max-w-lg leading-relaxed font-medium">
Learnova is a productivity-first ecosystem that provides everything your team needs to scale. Join thousands of innovators who redefined their output in minutes.
</p>
<div class="pt-4">
<button class="bg-[#facc15] text-black px-10 py-5 rounded-2xl font-black text-lg hover:bg-yellow-500 transition-all shadow-xl shadow-yellow-900/20">
Get Started
</button>
</div>
</div>
<div class="relative">
<!-- UI Mockup Group -->
<div class="relative z-10 space-y-6">
<!-- Top Floating Elements -->
<div class="flex gap-6 justify-end">
<div class="bg-white rounded-2xl p-6 w-56 text-black ui-float-card transform -rotate-3">
<div class="bg-blue-100 text-blue-600 text-[10px] font-bold px-3 py-1 rounded-full w-fit mb-4">New Leads</div>
<div class="text-3xl font-black mb-1">3,729</div>
<div class="text-xs text-gray-400 font-bold">70.0% Increase</div>
</div>
<div class="bg-white rounded-2xl p-6 w-48 text-black ui-float-card transform rotate-6">
<div class="flex items-end gap-1 h-20 mb-2">
<div class="w-full bg-yellow-400 h-[30%] rounded"></div>
<div class="w-full bg-yellow-400 h-[60%] rounded"></div>
<div class="w-full bg-orange-500 h-[90%] rounded"></div>
<div class="w-full bg-yellow-400 h-[40%] rounded"></div>
</div>
<div class="flex justify-between text-[8px] font-bold text-gray-300">
<span>JUL</span><span>AUG</span><span>SEP</span><span>OCT</span>
</div>
</div>
</div>
<!-- Main Form Mockup -->
<div class="bg-white rounded-3xl p-10 text-black ui-float-card max-w-md ml-auto relative">
<div class="space-y-6">
<div class="space-y-2">
<label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Full Name</label>
<div class="w-full border border-gray-200 rounded-xl p-4 text-sm font-medium text-gray-400 italic">Ex: alex rivera</div>
</div>
<div class="space-y-2">
<label class="text-[10px] font-black uppercase tracking-widest text-gray-400">Email Address</label>
<div class="w-full border border-gray-200 rounded-xl p-4 text-sm font-medium text-gray-400 italic">alex@learnova.com</div>
</div>
<button class="w-full bg-blue-600 text-white py-5 rounded-2xl font-black text-sm">Submit Now</button>
</div>
<!-- Overlaid Stats -->
<div class="absolute -left-16 top-1/4 space-y-4">
<div class="bg-blue-100/90 backdrop-blur p-4 rounded-2xl flex items-center gap-4 border border-white shadow-xl">
<div class="w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white text-[10px]">
<i class="fa-solid fa-check"></i>
</div>
<div>
<div class="text-[10px] text-blue-800 font-bold">Income</div>
<div class="text-sm font-black">$14,220</div>
</div>
<div class="text-blue-600 ml-4"><i class="fa-solid fa-chart-line"></i></div>
</div>
<div class="bg-white p-4 rounded-2xl flex items-center gap-4 border border-white shadow-xl translate-x-4">
<div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-[10px]">
<i class="fa-solid fa-check"></i>
</div>
<div>
<div class="text-[10px] text-gray-400 font-bold">Expense</div>
<div class="text-sm font-black">$10,810</div>
</div>
<div class="text-gray-200 ml-4"><i class="fa-solid fa-chart-line"></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end hero -->
<!-- block:start demo -->
<section id="demo" class="py-24 px-6 bg-gray-50">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16 space-y-4">
<div class="inline-block px-4 py-1.5 rounded-full bg-white border border-gray-200 text-[10px] font-black uppercase tracking-widest text-gray-400">Platform Preview</div>
<h2 class="text-4xl md:text-5xl font-bold tracking-tight">The <span class="highlight-pill text-black">Interface</span> of Tomorrow</h2>
<p class="text-gray-500 max-w-2xl mx-auto font-medium">See how Learnova unifies your entire operational lifecycle in one high-performance command center.</p>
</div>
<div class="relative max-w-5xl mx-auto">
<!-- Product Mockup -->
<div class="bg-[#1a1a1a] rounded-[2.5rem] p-4 shadow-2xl overflow-hidden border-8 border-white">
<div class="bg-white rounded-2xl overflow-hidden border border-gray-100 flex h-[500px]">
<!-- Mockup Sidebar -->
<div class="w-20 md:w-64 border-r border-gray-50 flex flex-col p-6 hidden md:flex">
<div class="flex items-center gap-2 mb-12">
<div class="w-8 h-8 bg-black rounded-full"></div>
<span class="font-bold">Learnova</span>
</div>
<div class="space-y-4 flex-grow">
<div class="h-8 bg-gray-50 rounded-xl"></div>
<div class="h-8 bg-gray-50 rounded-xl"></div>
<div class="h-8 bg-gray-50 rounded-xl"></div>
</div>
<div class="h-12 bg-gray-100 rounded-xl"></div>
</div>
<!-- Mockup Content -->
<div class="flex-1 p-8 bg-white flex flex-col gap-6">
<div class="flex justify-between items-center">
<div class="h-10 w-48 bg-gray-50 rounded-xl"></div>
<div class="flex gap-4">
<div class="w-10 h-10 rounded-full bg-gray-100"></div>
<div class="w-10 h-10 rounded-full bg-gray-100"></div>
</div>
</div>
<div class="grid grid-cols-3 gap-6">
<div class="h-32 bg-blue-50 rounded-2xl border border-blue-100"></div>
<div class="h-32 bg-yellow-50 rounded-2xl border border-yellow-100"></div>
<div class="h-32 bg-gray-50 rounded-2xl"></div>
</div>
<div class="flex-grow bg-gray-50 rounded-2xl border border-dashed border-gray-200 flex items-center justify-center">
<span class="text-[10px] font-black text-gray-300 uppercase tracking-widest">Real-time collaboration node</span>
</div>
</div>
</div>
</div>
<!-- CTA Button -->
<div class="absolute -bottom-10 left-1/2 -translate-x-1/2">
<button class="bg-blue-600 text-white px-12 py-5 rounded-2xl font-black text-lg hover:bg-blue-700 transition-all shadow-xl shadow-blue-600/30">
Request Live Demo
</button>
</div>
</div>
</div>
</section>
<!-- block:end demo -->
<!-- block:start stats -->
<section id="stats" class="py-24 px-6 bg-white">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-16">
<div class="space-y-12 lg:w-1/2">
<h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight">
Experience the system <br/> the world loves.
</h2>
<div class="flex items-center gap-24">
<div>
<div class="text-7xl font-black tracking-tighter">3X</div>
<p class="text-sm text-gray-400 font-bold mt-2 leading-tight">Faster than any <br/> other platform</p>
</div>
<div>
<div class="text-7xl font-black tracking-tighter">-40%</div>
<p class="text-sm text-gray-400 font-bold mt-2 leading-tight">Operational cost <br/> reduction</p>
</div>
</div>
</div>
<div class="lg:w-1/2 space-y-10">
<div class="flex -space-x-4 overflow-hidden mb-8">
<img class="inline-block h-16 w-16 rounded-full ring-4 ring-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" alt="">
<img class="inline-block h-16 w-16 rounded-full ring-4 ring-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-3.jpg" alt="">
<img class="inline-block h-16 w-16 rounded-full ring-4 ring-white" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-4.jpg" alt="">
</div>
<p class="text-gray-500 text-lg leading-relaxed font-medium">
Learnova is a comprehensive workspace that delivers everything you need to grow your business. Thousands of teams rely on our infrastructure to build complex projects in minutes, not months.
</p>
</div>
</div>
</div>
</section>
<!-- block:end stats -->
<section id="extended" class="bg-white">
<!-- block:start clients -->
<div class="py-20 border-y border-gray-100 overflow-hidden">
<div class="max-w-7xl mx-auto px-6">
<p class="text-center text-[10px] font-black uppercase tracking-[0.3em] text-gray-300 mb-12">The industry standard for innovators</p>
<div class="flex flex-wrap justify-center items-center gap-16 md:gap-24 opacity-30 grayscale contrast-125">
<i class="fa-brands fa-shopify text-4xl"></i>
<i class="fa-brands fa-spotify text-4xl"></i>
<i class="fa-brands fa-stripe text-4xl"></i>
<i class="fa-brands fa-slack text-4xl"></i>
<i class="fa-brands fa-discord text-4xl"></i>
</div>
</div>
</div>
<!-- block:end clients -->
<!-- block:start features -->
<div id="features" class="py-32 px-6">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="space-y-6">
<div class="w-12 h-12 bg-[#1a1a1a] text-white rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-bolt"></i>
</div>
<h3 class="text-xl font-bold">Infinite Velocity</h3>
<p class="text-gray-500 text-sm leading-relaxed">Scale your team's output with zero friction. Our architecture is built for rapid iteration and high-frequency growth.</p>
</div>
<div class="space-y-6">
<div class="w-12 h-12 bg-blue-600 text-white rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-shield-halved"></i>
</div>
<h3 class="text-xl font-bold">Enterprise Trust</h3>
<p class="text-gray-500 text-sm leading-relaxed">Bank-grade security protocols integrated at every level. Your data remains encrypted, isolated, and completely private.</p>
</div>
<div class="space-y-6">
<div class="w-12 h-12 bg-yellow-400 text-black rounded-2xl flex items-center justify-center">
<i class="fa-solid fa-robot"></i>
</div>
<h3 class="text-xl font-bold">Neural Insights</h3>
<p class="text-gray-500 text-sm leading-relaxed">Leverage advanced machine learning to identify bottlenecks before they impact your delivery timelines.</p>
</div>
</div>
</div>
<!-- block:end features -->
<!-- block:start pricing -->
<div id="pricing" class="py-32 bg-[#1a1a1a] text-white rounded-[4rem] mx-6">
<div class="max-w-7xl mx-auto px-6">
<div class="text-center mb-20 space-y-4">
<h2 class="text-4xl md:text-6xl font-bold">Simple, Bold <span class="highlight-pill text-black">Pricing</span></h2>
<p class="text-gray-400 max-w-lg mx-auto">No complex tiers. No hidden fees. Just pure scalability.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<div class="bg-white/5 border border-white/10 p-12 rounded-[3rem] space-y-10">
<div>
<div class="text-xs font-black uppercase tracking-widest text-gray-400 mb-2">Startup Foundations</div>
<div class="text-5xl font-black">$0<span class="text-lg font-bold text-white/30 italic">/forever</span></div>
</div>
<ul class="space-y-4 text-sm font-medium text-gray-400">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-yellow-400"></i> Up to 5 team members</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-yellow-400"></i> Standard workspace templates</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-yellow-400"></i> Community support</li>
</ul>
<button class="w-full py-5 rounded-2xl border border-white/20 font-black hover:bg-white/5 transition-all">Get Started Free</button>
</div>
<div class="bg-blue-600 p-12 rounded-[3rem] space-y-10 shadow-2xl shadow-blue-600/20 relative overflow-hidden group">
<div class="absolute -top-10 -right-10 opacity-10 group-hover:scale-110 transition-transform duration-700">
<i class="fa-solid fa-bolt text-[12rem]"></i>
</div>
<div class="relative z-10">
<div class="text-xs font-black uppercase tracking-widest text-blue-200 mb-2">Unlimited Evolution</div>
<div class="text-5xl font-black">$29<span class="text-lg font-bold text-blue-300 italic">/seat</span></div>
</div>
<ul class="space-y-4 text-sm font-medium text-blue-100 relative z-10">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-yellow-400"></i> Infinite workspace nodes</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-yellow-400"></i> AI-powered strategic auditing</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-yellow-400"></i> Priority 24/7 success team</li>
</ul>
<button class="w-full py-5 rounded-2xl bg-white text-blue-600 font-black hover:bg-gray-100 transition-all relative z-10">Level Up Now</button>
</div>
</div>
</div>
</div>
<!-- block:end pricing -->
<!-- block:start reviews -->
<div id="reviews" class="py-32 px-6">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
<div class="space-y-8">
<div class="inline-block px-3 py-1 rounded-full bg-blue-50 text-blue-600 text-xs font-black uppercase tracking-widest">Global Praise</div>
<h2 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight italic">"The most aggressive <span class="not-italic text-blue-600 underline decoration-yellow-400 decoration-4">productivity boost</span> we've ever deployed."</h2>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" class="w-12 h-12 rounded-full border-2 border-gray-100" alt="Avatar">
<div>
<div class="font-bold">Elena Vance</div>
<div class="text-xs font-black text-gray-300 uppercase tracking-widest">Director, Lumon Corp</div>
</div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-gray-50 p-8 rounded-3xl space-y-4 transform hover:-translate-y-2 transition-transform">
<div class="flex gap-1 text-yellow-400 text-xs">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-xs font-bold text-gray-500 leading-relaxed italic">"It just works. No bloat, no friction, just results."</p>
</div>
<div class="bg-blue-50 p-8 rounded-3xl space-y-4 translate-y-8 transform hover:-translate-y-2 transition-transform">
<div class="flex gap-1 text-blue-500 text-xs">
<i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
</div>
<p class="text-xs font-bold text-blue-700 leading-relaxed italic">"Our operational costs dropped by 40% in two months."</p>
</div>
</div>
</div>
</div>
</div>
<!-- block:end reviews -->
<!-- block:start about -->
<div id="about" class="py-32 px-6">
<div class="max-w-7xl mx-auto space-y-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="space-y-8">
<div class="text-xs font-black uppercase tracking-[0.3em] text-blue-600">Our Origin</div>
<h2 class="text-4xl md:text-6xl font-bold tracking-tight">Built by <span class="highlight-pill text-black">Creators</span> for the future.</h2>
<p class="text-gray-500 text-lg font-medium leading-relaxed">We started in a small studio with one goal: to remove every ounce of friction from the creative process. Today, Learnova powers the world's most ambitious teams.</p>
</div>
<div class="flex flex-col gap-4">
<div class="flex items-center gap-4">
<div class="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center text-2xl"><i class="fa-solid fa-earth-americas"></i></div>
<div>
<div class="text-xl font-bold">Remote-First</div>
<p class="text-sm text-gray-400">Operating across 14 time zones.</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-16 h-16 rounded-2xl bg-gray-100 flex items-center justify-center text-2xl"><i class="fa-solid fa-heart"></i></div>
<div>
<div class="text-xl font-bold">100% Independent</div>
<p class="text-sm text-gray-400">Guided only by our users.</p>
</div>
</div>
</div>
</div>
<!-- Gallery Marquee -->
<div class="relative overflow-hidden py-10">
<div class="flex gap-6 animate-marquee whitespace-nowrap">
<div class="w-72 h-96 rounded-[2.5rem] overflow-hidden flex-shrink-0 border-4 border-gray-50 shadow-lg">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_1a3492a9f5_b4eacc53e921b4ee.png" alt="modern minimalist creative office space with natural lighting and plants, professional photography" />
</div>
<div class="w-72 h-96 rounded-[2.5rem] overflow-hidden flex-shrink-0 border-4 border-gray-50 shadow-lg translate-y-10">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_3068cc5c6d_d88e128c684c35ac.png" alt="team of diverse young professionals collaborating in a bright high-tech workspace, candid photograph" />
</div>
<div class="w-72 h-96 rounded-[2.5rem] overflow-hidden flex-shrink-0 border-4 border-gray-50 shadow-lg">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_04e6ed57ed_9877e29e9731f3cd.png" alt="close up of a designer workstation with a high-end laptop and creative tools, aesthetic workspace" />
</div>
<div class="w-72 h-96 rounded-[2.5rem] overflow-hidden flex-shrink-0 border-4 border-gray-50 shadow-lg translate-y-10">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_46050d004c_f9b4b104ac782ba1.png" alt="minimalist lounge area in a tech startup office with cozy furniture and bright windows" />
</div>
<div class="w-72 h-96 rounded-[2.5rem] overflow-hidden flex-shrink-0 border-4 border-gray-50 shadow-lg">
<img class="w-full h-full object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_e332dc11ba_f6fba336acc8efc6.png" alt="architectural shot of a modern glass office building exterior at dusk, cinematic lighting" />
</div>
</div>
</div>
</div>
</div>
<!-- block:end about -->
<!-- block:start contact -->
<div id="contact" class="py-32 px-6">
<div class="max-w-3xl mx-auto bg-gray-900 rounded-[3rem] p-12 md:p-20 text-white text-center space-y-10 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-400 via-blue-600 to-yellow-400"></div>
<div class="space-y-4 relative z-10">
<h2 class="text-4xl md:text-5xl font-bold">Ready to <span class="highlight-pill text-black">Evolve</span>?</h2>
<p class="text-gray-400 font-medium">Join 20k+ teams already building the future.</p>
</div>
<form class="space-y-4 relative z-10">
<div class="flex flex-col md:flex-row gap-4">
<input type="text" placeholder="Team Name" class="flex-grow bg-white/10 border border-white/10 rounded-2xl px-6 py-4 text-sm font-bold focus:outline-none focus:border-yellow-400 transition-colors">
<button class="bg-[#facc15] text-black px-10 py-4 rounded-2xl font-black text-sm hover:bg-yellow-500 transition-all">Get Started</button>
</div>
<p class="text-[10px] text-gray-500 font-bold uppercase tracking-widest">No credit card required • Instant setup</p>
</form>
</div>
</div>
<!-- block:end contact -->
</section>
</main>
<style>
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.animate-marquee {
display: flex;
width: fit-content;
animation: marquee 30s linear infinite;
}
.animate-marquee:hover {
animation-play-state: paused;
}
</style>
<!-- block:start footer -->
<footer id="footer" class="py-20 bg-gray-50 border-t border-gray-100 px-6">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-8">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-black rounded-full flex items-center justify-center text-white">
<i class="fa-solid fa-layer-group"></i>
</div>
<span class="text-xl font-bold tracking-tight">Learnova</span>
</div>
<div class="flex gap-10 text-sm font-bold text-gray-400">
<a href="#" class="hover:text-black transition-colors">Twitter</a>
<a href="#" class="hover:text-black transition-colors">LinkedIn</a>
<a href="#" class="hover:text-black transition-colors">Dribbble</a>
</div>
<p class="text-xs font-bold text-gray-300 uppercase tracking-widest">© 2024 Learnova Inc.</p>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages. Renews automatically, cancel anytime.
€20
/ 3 months
or €60 / year
Get Unlimited Access
