Grid cards feature section
Category: Features
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>Bento Section - Features</title>
<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=Poppins:wght@500&family=Instrument+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-dark': 'rgb(6, 64, 53)',
'brand-mute': 'rgb(82, 82, 82)',
'surface-grey': 'rgb(240, 244, 243)',
'brand-primary': 'rgb(6, 64, 53)',
'text-primary': 'rgb(6, 64, 53)',
'text-secondary': 'rgb(82, 82, 82)',
},
fontFamily: {
'display': ['Poppins', 'sans-serif'],
'body': ['Instrument Sans', 'sans-serif'],
},
borderRadius: {
'card': '15px',
'btn': '36px',
},
}
},
plugins: [],
}</script></head>
<body id="app-root" class="bg-white overflow-x-hidden">
<main><section class="w-full flex flex-col items-center py-[80px] px-4 font-body">
<div class="max-w-[1200px] w-full flex flex-col items-center gap-[74px]">
<!-- Top Content -->
<div class="w-full flex flex-col md:flex-row justify-between items-end gap-10 md:gap-[300px]">
<div class="flex-1 max-w-[410px]">
<h2 class="font-display text-[40px] leading-[44px] font-medium text-brand-dark tracking-[-2px] capitalize">
Your marketing department just activated autopilot
</h2>
</div>
<div class="flex-1 max-w-[410px] flex flex-col gap-5 items-start">
<p class="text-[18px] leading-[27px] text-brand-mute">
Spend less time managing marketing, more time improving you product.
</p>
<div class="flex gap-[10px]">
<a href="#" class="bg-brand-dark text-white font-semibold text-[14px] px-[25px] py-[15px] rounded-btn shadow-sm transition-transform hover:scale-105">
Join waitlist
</a>
<a href="#" class="bg-transparent border border-[rgba(6,64,53,0.1)] text-brand-dark font-semibold text-[14px] px-[25px] py-[15px] rounded-btn transition-colors hover:bg-surface-grey">
Learn more
</a>
</div>
</div>
</div>
<!-- Bento Grid -->
<div class="w-full grid grid-cols-1 md:grid-cols-12 gap-[10px] min-h-[529px]">
<!-- Card 1: Large Left Vertical -->
<div class="md:col-span-3 bg-surface-grey rounded-card p-5 flex flex-col gap-[10px] overflow-hidden">
<h5 class="text-[18px] font-medium text-brand-dark leading-[19.8px]">Analytics that matter</h5>
<p class="text-[14px] text-brand-mute leading-[21px]">Deploy your campagins and optimize them with top tier revolutionary AI technology</p>
<div class="mt-auto pt-5">
<img src="https://framerusercontent.com/images/6Dm3oMnWOWpVCUVthd1m7Lxgwk.png" alt="Analytics illustration" class="w-full h-auto object-cover rounded-md">
</div>
</div>
<!-- Right Side Parent Container (9/12) -->
<div class="md:col-span-9 flex flex-col gap-[10px]">
<!-- Top Row Right -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-[10px] flex-1">
<!-- Card 2: Small Social -->
<div class="md:col-span-4 bg-surface-grey rounded-card flex flex-col overflow-hidden">
<div class="flex-1">
<img src="https://framerusercontent.com/images/qoJPPRebYfnU9v2voODeoqu1Cg.png" alt="Social Media Integrations" class="w-full h-full object-cover">
</div>
<div class="p-[20px] flex flex-col gap-1">
<h5 class="text-[18px] font-medium text-brand-dark">Seamless Integrations</h5>
<p class="text-[14px] text-brand-mute">A solution that integrates to all your marketing channels</p>
</div>
</div>
<!-- Card 3: Wide Layout Mobile -->
<div class="md:col-span-8 bg-surface-grey rounded-card relative overflow-hidden p-5 flex flex-col">
<div class="z-10 max-w-[300px]">
<h5 class="text-[18px] font-medium text-brand-dark mb-1">Precise forecast</h5>
<p class="text-[14px] text-brand-mute">Get precise data previsions for all your campaigns to adapt your approach</p>
</div>
<div class="absolute inset-0 z-0">
<img src="https://framerusercontent.com/images/je53vKmhiAIXRS8u3Mjj4K44g.png" alt="Forecast Illustration" class="w-full h-full object-contain object-bottom translate-y-4">
</div>
</div>
</div>
<!-- Bottom Row Right -->
<div class="grid grid-cols-1 md:grid-cols-12 gap-[10px] flex-1">
<!-- Card 4: Wide People -->
<div class="md:col-span-8 rounded-card relative overflow-hidden flex flex-col items-center justify-center min-h-[259px]">
<img src="https://framerusercontent.com/images/mA8cq3QCmjhPTvqliCTbsSNe0E.png" alt="People using platform" class="absolute inset-0 w-full h-full object-cover">
<div class="relative z-10 text-center max-w-[300px] mt-auto pb-5">
<h5 class="text-[18px] font-medium text-brand-dark mb-1">Pixel Perfect Media</h5>
<p class="text-[14px] text-brand-mute">Generate engagement with generated user content for every kind of product</p>
</div>
</div>
<!-- Card 5: Small Tool Icons -->
<div class="md:col-span-4 bg-surface-grey rounded-card flex flex-col items-center text-center overflow-hidden">
<div class="p-[20px] flex flex-col gap-1">
<h5 class="text-[18px] font-medium text-brand-dark">One tool fits all</h5>
<p class="text-[14px] text-brand-mute">Don’t rely on on endless add-ons, plugins and extension.</p>
</div>
<div class="mt-auto w-full">
<img src="https://framerusercontent.com/images/aIKzCmy73GY0DHGVii0fIEr0VqE.png" alt="Tool icons" class="w-full h-auto object-contain">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Animation or interaction logic for the bento section could go here
});
</script></main>
</body></html>
change the textual content and images
Created by: LandingHero
![\"Analytics](\"https://framerusercontent.com/images/6Dm3oMnWOWpVCUVthd1m7Lxgwk.png\")
\n ![\"Social](\"https://framerusercontent.com/images/qoJPPRebYfnU9v2voODeoqu1Cg.png\")
\n ![\"Forecast](\"https://framerusercontent.com/images/je53vKmhiAIXRS8u3Mjj4K44g.png\")
\n ![\"People](\"https://framerusercontent.com/images/mA8cq3QCmjhPTvqliCTbsSNe0E.png\")
\n ![\"Tool](\"https://framerusercontent.com/images/aIKzCmy73GY0DHGVii0fIEr0VqE.png\")
\n