Feature section with moving images
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>Content Generation Component</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=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 {
@apply antialiased;
}
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(6, 64, 53)',
'brand-accent': 'rgb(231, 249, 211)',
'text-primary': 'rgb(6, 64, 53)',
'text-secondary': 'rgb(82, 82, 82)',
'neutral-background': 'rgb(255, 255, 255)',
},
fontFamily: {
'primary': ['Poppins', 'sans-serif'],
'secondary': ['Instrument Sans', 'sans-serif'],
},
letterSpacing: {
'tightest': '-0.05em',
}
}
}
}</script></head>
<body id="app-root" class="bg-neutral-background overflow-x-hidden">
<main><div class="flex items-center justify-center min-vh-100 py-20 px-10">
<div class="flex flex-row items-center justify-center gap-[90px] max-w-[1200px] w-full">
<!-- Left Interaction/Illustration -->
<div class="flex-none w-[430px] h-[408px]" data-animate="">
<img src="https://framerusercontent.com/images/opU4u9tpFihLry6OpmKv0EfPk.png?width=864&height=820" alt="mockup" class="w-full h-full object-cover" loading="lazy" decoding="auto">
</div>
<!-- Right Content Area -->
<div class="flex-1 max-w-[400px] flex flex-col justify-center items-start gap-[30px]" data-animate="">
<!-- Text Heading Group -->
<div class="flex flex-col gap-5 items-start">
<!-- Badge -->
<div class="bg-brand-accent px-3 py-2 rounded-[30px] flex items-center justify-center">
<span class="text-brand-primary font-secondary font-semibold text-[14px] leading-[1.2] capitalize">
Content Generation
</span>
</div>
<!-- Main Title -->
<h3 class="text-brand-primary font-primary font-medium text-[35px] leading-[38.5px] tracking-tightest capitalize">
Turn briefs Into Powerful Content with top tier AI
</h3>
<!-- Subheading -->
<p class="text-text-secondary font-secondary font-normal text-[16px] leading-[24px]">
Spend less time managing marketing, more time improving you product.
</p>
</div>
<!-- Features List -->
<div class="flex flex-col gap-[15px] w-full">
<!-- List Item 1 -->
<div class="flex items-center gap-[10px] w-full">
<div class="flex-none w-[19px] h-[19px] text-brand-primary">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<h5 class="flex-1 text-brand-primary font-secondary font-medium text-[18px] leading-[19.8px]">
Authenticity That Converts
</h5>
</div>
<!-- List Item 2 -->
<div class="flex items-center gap-[10px] w-full">
<div class="flex-none w-[19px] h-[19px] text-brand-primary">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<h5 class="flex-1 text-brand-primary font-secondary font-medium text-[18px] leading-[19.8px]">
Content at Scale
</h5>
</div>
<!-- List Item 3 -->
<div class="flex items-center gap-[10px] w-full">
<div class="flex-none w-[19px] h-[19px] text-brand-primary">
<svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<h5 class="flex-1 text-brand-primary font-secondary font-medium text-[18px] leading-[19.8px]">
Stronger Brand Trust
</h5>
</div>
</div>
</div>
</div>
</div></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('opacity-100', 'translate-y-0');
entry.target.classList.remove('opacity-0', 'translate-y-10');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('[data-animate]').forEach(el => {
el.classList.add('transition-all', 'duration-1000', 'ease-out', 'opacity-0', 'translate-y-10');
observer.observe(el);
});
});
</script>
</body></html>
change the textual content and images
Created by: LandingHero
![\"mockup\"](\"https://framerusercontent.com/images/opU4u9tpFihLry6OpmKv0EfPk.png?width=864&height=820\")
\n