Hero section with glowing CTA button in center
Category: Heroes
Below is the component for your context <!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Hero Section - Lead Academy</title>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
@apply antialiased;
}
}
.bg-rays-gradient {
background: radial-gradient(100% 100% at 0% 0%, rgb(209, 209, 209) 0%, rgb(246, 251, 255) 100%);
}
.ray-gradient {
background: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgb(255, 255, 255) 83.93%, rgba(255, 255, 255, 0) 100%);
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': '#774be5',
'brand-dark': '#0e1c29',
'neutral-background': '#ffffff',
'text-primary': '#0e1c29',
'text-secondary': '#323d68',
},
fontFamily: {
'primary': ['Plus Jakarta Sans', 'sans-serif'],
'secondary': ['Inter', 'sans-serif'],
},
boxShadow: {
'logo-outer': 'inset 0 -3px 0 2px rgba(141, 194, 235, 0.25), 0 30px 30px -3.5px rgba(16, 49, 77, 0.09)',
'logo-inner': '0 30px 30px -4px rgba(16, 49, 77, 0.06)',
'cta-purple': 'inset 0 1px 2px 0 rgb(192, 176, 232), 0 30px 30px -3.5px rgba(99, 69, 173, 0.15)',
'cta-dark': 'inset 0 1px 2px 0 rgb(184, 193, 230), 0 30px 30px -3.5px rgba(46, 64, 128, 0.15)',
'widget': '0 15px 30px 0 rgba(94, 120, 143, 0.35)',
}
}
},
plugins: [],
}</script></head>
<body id="app-root" class="bg-white overflow-x-hidden">
<main><section id="hero" class="relative w-full flex flex-col items-center justify-center pt-40 pb-24 px-10 overflow-hidden font-secondary">
<!-- Background Rays -->
<div class="absolute inset-0 bg-rays-gradient opacity-75 overflow-hidden -z-10 h-[1650px] top-0 pointer-events-none">
<div class="absolute top-[-209px] left-[215px] w-[591px] h-[1269px] ray-gradient skew-x-[45deg] opacity-100"></div>
<div class="absolute top-[-209px] left-[-313px] w-[582px] h-[1269px] ray-gradient skew-x-[45deg] opacity-100"></div>
<div class="absolute top-[-209px] left-[291px] w-[441px] h-[1269px] ray-gradient skew-x-[45deg] opacity-100"></div>
<div class="absolute top-[-209px] left-[420px] w-[683px] h-[1269px] ray-gradient skew-x-[45deg] opacity-60"></div>
<div class="absolute top-[-209px] left-[533px] w-[426px] h-[1269px] ray-gradient skew-x-[45deg] opacity-75"></div>
</div>
<div class="max-w-[1200px] w-full flex flex-col items-center gap-8 relative z-10">
<!-- Heading Area -->
<div id="heading" class="flex flex-col items-center text-center gap-6 max-w-[1000px]">
<!-- Logo Container -->
<div class="w-24 h-24 p-[10px] bg-[#f6fbff] rounded-2xl shadow-logo-outer flex items-center justify-center">
<div class="w-[76px] h-[76px] p-4 bg-brand-dark rounded-[10px] shadow-logo-inner flex items-center justify-center">
<img src="https://framerusercontent.com/images/Vw4SxE2qkEuKYpt0YYdU2kV6Irg.png?width=64&height=64" alt="logo" class="w-11 h-11 object-contain">
</div>
</div>
<!-- Text Content -->
<div class="flex flex-col items-center gap-6">
<h1 class="font-primary text-[72px] leading-[1.2] tracking-[-0.72px] text-brand-dark font-normal">
Automate. Engage. Convert. Powered by AI.
</h1>
<p class="text-brand-dark text-base leading-6 font-normal max-w-[640px]">
Your journey to AI-powered marketing starts here
</p>
</div>
<!-- CTAs -->
<div class="flex flex-wrap justify-center gap-4 z-20">
<a href="#" class="flex items-center gap-2 px-6 py-3 bg-brand-primary rounded-[10px] shadow-cta-purple text-white font-medium text-sm transition-transform hover:scale-105 active:scale-95">
<span>Get Started</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 fill-current">
<path d="M221.66,133.66l-72,72A8,8,0,0,1,136,200V136H40a8,8,0,0,1,0-16h96V56a8,8,0,0,1,13.66-5.66l72,72A8,8,0,0,1,221.66,133.66Z"></path>
</svg>
</a>
<a href="#features" class="flex items-center gap-2 px-6 py-3 bg-gradient-to-br from-[#0e1c29] to-[#323d68] rounded-[10px] shadow-cta-dark text-white font-medium text-sm transition-transform hover:scale-105 active:scale-95">
<span>Learn More</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-5 h-5 fill-current">
<path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path>
</svg>
</a>
</div>
</div>
<!-- Dashboard Preview -->
<div id="dashboard" class="relative w-[1200px] h-fit mt-10 rounded-xl overflow-visible">
<img src="https://framerusercontent.com/images/Qs4fMRAik4VFOt3fiZeT875RV4.png?width=2808&height=2390" alt="dashboard" class="w-full h-auto rounded-xl shadow-2xl">
<!-- Floating Widgets/Tooltips -->
<div class="absolute bottom-[-10%] right-[70px] w-72 h-auto shadow-widget rounded-2xl overflow-hidden z-20">
<img src="https://framerusercontent.com/images/HU1xYAz9CpTh4bEIQeS0VwORY.png?width=826&height=732" alt="stats widget" class="w-full h-auto">
</div>
<!-- Performance Tags -->
<div class="absolute top-[38%] left-[184px] bg-brand-primary text-white text-sm px-4 py-1 rounded shadow-lg flex items-center justify-center -translate-y-1/2">
50,567
<div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-3 h-3 bg-brand-primary rotate-45 rounded-sm"></div>
</div>
<div class="absolute top-[34%] left-[548px] bg-brand-primary text-white text-sm px-4 py-1 rounded shadow-lg flex items-center justify-center -translate-y-1/2">
70,867
<div class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-3 h-3 bg-brand-primary rotate-45 rounded-sm"></div>
</div>
</div>
<!-- Social Proof Section -->
<div class="w-full mt-24 flex flex-col items-center gap-8">
<div class="flex items-center w-full gap-4 opacity-50">
<div class="flex-1 h-[2px] bg-brand-dark/10 rounded-full"></div>
<p class="text-text-primary text-base font-normal whitespace-nowrap">Adopted by renowned, trusted, and leading enterprises</p>
<div class="flex-1 h-[2px] bg-brand-dark/10 rounded-full"></div>
</div>
<div class="flex flex-wrap justify-center items-center gap-[54px] opacity-90 transition-opacity hover:opacity-100">
<img src="https://framerusercontent.com/images/YUxV3rqZ7Wvh1h97M9ho3OJO0.svg?width=75&height=17" alt="partner logo" class="h-[30px] w-auto opacity-70 grayscale hover:grayscale-0 transition-all cursor-pointer">
<img src="https://framerusercontent.com/images/EboQqPMe8PvYShxr0q82nHBVaec.svg?width=45&height=14" alt="partner logo" class="h-[30px] w-auto opacity-70 grayscale hover:grayscale-0 transition-all cursor-pointer">
<img src="https://framerusercontent.com/images/bn15sRZOZ1zNW6U4lKel1VE9eA.svg?width=58&height=19" alt="partner logo" class="h-[30px] w-auto opacity-70 grayscale hover:grayscale-0 transition-all cursor-pointer">
<img src="https://framerusercontent.com/images/iDUtqN0QXPf3CrA1JgKCl01lasg.svg?width=57&height=18" alt="partner logo" class="h-[30px] w-auto opacity-70 grayscale hover:grayscale-0 transition-all cursor-pointer">
<img src="https://framerusercontent.com/images/vICkLbycO96hE8662eq2BfqKXs.svg?width=69&height=24" alt="partner logo" class="h-[30px] w-auto opacity-70 grayscale hover:grayscale-0 transition-all cursor-pointer">
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Optional: Add simple scroll interactions or hover effects if needed
});
</script></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Intersection Observer for appearance animations if needed
});
</script>
</body></html>
change the content
Created by: LandingHero
![\"logo\"](\"https://framerusercontent.com/images/Vw4SxE2qkEuKYpt0YYdU2kV6Irg.png?width=64&height=64\")
\n ![\"dashboard\"](\"https://framerusercontent.com/images/Qs4fMRAik4VFOt3fiZeT875RV4.png?width=2808&height=2390\")
\n \n \n ![\"stats](\"https://framerusercontent.com/images/HU1xYAz9CpTh4bEIQeS0VwORY.png?width=826&height=732\")
\n ![\"partner](\"https://framerusercontent.com/images/YUxV3rqZ7Wvh1h97M9ho3OJO0.svg?width=75&height=17\")
\n ![\"partner](\"https://framerusercontent.com/images/EboQqPMe8PvYShxr0q82nHBVaec.svg?width=45&height=14\")
\n ![\"partner](\"https://framerusercontent.com/images/bn15sRZOZ1zNW6U4lKel1VE9eA.svg?width=58&height=19\")
\n ![\"partner](\"https://framerusercontent.com/images/iDUtqN0QXPf3CrA1JgKCl01lasg.svg?width=57&height=18\")
\n ![\"partner](\"https://framerusercontent.com/images/vICkLbycO96hE8662eq2BfqKXs.svg?width=69&height=24\")
\n