FAQ section with images
Category: FAQ
<section class="lg:py-32 pt-24 pb-24">
<div class="lg:px-8 max-w-7xl mr-auto ml-auto pr-6 pl-6 relative">
<!-- Header -->
<section class="relative">
<div class="md:mb-16 grid md:grid-cols-12 mb-16 gap-x-6 gap-y-6 items-end">
<!-- Left: Meta + Title + Subtitle -->
<div class="md:col-span-8 space-y-4">
<!-- Eyebrow: Number + Label -->
<div
class="inline-flex text-[13px] [animation:fadeSlideIn_0.8s_ease-out_0.1s_both] animate-on-scroll font-medium gap-x-2 gap-y-2 items-center">
<span class="tabular-nums text-[20px] leading-none text-blue-300/80">03</span>
<span class="text-blue-300/40">/</span>
<span class="uppercase text-[11px] tracking-widest text-blue-200/90">FAQ</span>
</div>
<!-- Title -->
<h2
class="sm:text-5xl lg:text-6xl [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll text-4xl font-light text-white tracking-tight">
Answers to your most common questions</h2>
<!-- Subtitle -->
<p
class="sm:text-base [animation:fadeSlideIn_0.8s_ease-out_0.3s_both] animate-on-scroll text-sm text-zinc-400 max-w-2xl">
Everything you need to know to get started, manage your account, and get support quickly.</p>
<!-- CTA (shown on mobile too) -->
<div class="sm:hidden pt-2">
<a href="#"
class="inline-flex h-11 items-center rounded-full bg-white text-neutral-900 px-5 text-[15px] font-medium shadow-sm ring-1 ring-white/10 hover:bg-white/90">
View all changelogs
</a>
</div>
</div>
<!-- Right: Primary / Secondary CTAs -->
<div
class="md:col-span-4 flex md:justify-end [animation:fadeSlideIn_0.8s_ease-out_0.4s_both] animate-on-scroll">
<div class="hidden sm:flex items-center gap-3">
<a href="#"
class="inline-flex items-center text-[15px] hover:bg-white/90 font-medium text-neutral-900 bg-white h-11 ring-white/10 ring-1 rounded-full pr-5 pl-5 shadow-sm">Visit
help center</a>
<a href="#"
class="inline-flex items-center text-[15px] hover:bg-white/5 font-medium text-white h-11 rounded-full ring-white/15 ring-1 pr-5 pl-5">Contact
support</a>
</div>
</div>
</div>
</section>
<!-- FAQ Layout -->
<div
class="grid md:grid-cols-12 [animation:fadeSlideIn_0.8s_ease-out_0.2s_both] animate-on-scroll gap-x-6 gap-y-6 items-stretch">
<!-- Left: FAQ list -->
<div class="md:col-span-7">
<div class="divide-y divide-white/10">
<!-- Row 1 -->
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.5s_both] animate-on-scroll pt-6 pb-6">
<div class="text-[11px] uppercase font-medium text-neutral-500/80 tracking-wide">
General
</div>
<button class="faq-toggle group mt-2 flex items-center justify-between w-full text-left" data-faq="faq-1">
<h3 class="text-white text-2xl sm:text-3xl font-light tracking-tight">
How do I get started with your platform?
</h3>
<span class="ml-4 inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 p-2 group-hover:bg-white/10 transition-all duration-300 faq-arrow text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-50 w-[20px] h-[20px] transition-transform duration-300">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</span>
</button>
<div class="faq-answer overflow-hidden transition-all duration-300" style="max-height: 0; opacity: 0;"
data-answer="faq-1">
<div class="pt-4 pb-2 px-4 mt-3 bg-white/5 rounded-lg backdrop-blur-sm border border-white/10">
<p class="text-white/70 text-base leading-relaxed">
Getting started is simple! Sign up for a free account, explore our intuitive dashboard, and follow our
step-by-step onboarding guide. You can launch your first project in just a few minutes, and our
support team is always available to help you along the way.
</p>
</div>
</div>
</div>
<!-- Row 2 -->
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.6s_both] animate-on-scroll pt-6 pb-6">
<div class="text-[11px] uppercase font-medium text-neutral-500/80 tracking-wide">
Pricing
</div>
<button class="faq-toggle group mt-2 flex items-center justify-between w-full text-left" data-faq="faq-2">
<h3 class="text-white text-2xl sm:text-3xl font-light tracking-tight">
What are your pricing plans and features?
</h3>
<span class="ml-4 inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 p-2 group-hover:bg-white/10 transition-all duration-300 faq-arrow text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-neutral-50 w-[20px] h-[20px] transition-transform duration-300">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</span>
</button>
<div class="faq-answer overflow-hidden transition-all duration-300" style="max-height: 0; opacity: 0;"
data-answer="faq-2">
<div class="pt-4 pb-2 px-4 mt-3 bg-white/5 rounded-lg backdrop-blur-sm border border-white/10">
<p class="text-white/70 text-base leading-relaxed">
We offer flexible pricing plans to suit businesses of all sizes. Our Starter plan includes essential
features, Pro adds advanced analytics and priority support, and Enterprise provides custom solutions
with dedicated account management. All plans include unlimited projects, real-time collaboration, and
24/7 customer support.
</p>
</div>
</div>
</div>
<!-- Row 3 -->
<div class="[animation:fadeSlideIn_0.8s_ease-out_0.7s_both] animate-on-scroll pt-6 pb-6">
<div class="text-[11px] uppercase font-medium text-neutral-500/80 tracking-wide">
Support
</div>
<button class="faq-toggle group mt-2 flex items-center justify-between w-full text-left" data-faq="faq-3">
<h3 class="text-white text-2xl sm:text-3xl font-light tracking-tight">
How can I contact customer support?
</h3>
<span class="ml-4 inline-flex items-center justify-center rounded-full border border-white/10 bg-white/5 p-2 group-hover:bg-white/10 transition-all duration-300 faq-arrow text-blue-300">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-[20px] h-[20px] text-neutral-50 transition-transform duration-300">
<path d="M7 7h10v10" class=""></path>
<path d="M7 17 17 7" class=""></path>
</svg>
</span>
</button>
<div class="faq-answer overflow-hidden transition-all duration-300" style="max-height: 0; opacity: 0;"
data-answer="faq-3">
<div class="pt-4 pb-2 px-4 mt-3 bg-white/5 rounded-lg backdrop-blur-sm border border-white/10">
<p class="text-white/70 text-base leading-relaxed">
Our support team is available 24/7 via live chat, email at support@funo.studio, or through our help
center. Premium and Enterprise customers also have access to phone support and dedicated account
managers. We typically respond within 2 hours during business hours.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Right: Visual preview -->
<div class="md:col-span-5 [animation:fadeSlideIn_0.8s_ease-out_0.8s_both] animate-on-scroll">
<div class="relative overflow-hidden rounded-3xl border border-white/10 bg-white/[0.03] ring-1 ring-white/10">
<div class="absolute inset-0" style="background:
radial-gradient(90% 80% at 100% 0%, rgba(16,185,129,0.18) 0%, rgba(0,0,0,0) 60%),
linear-gradient(120deg, rgba(16,185,129,0.08) 0%, rgba(0,0,0,0) 40%);
mix-blend: screen;"></div>
<div class="relative z-10" style="aspect-ratio: 16 / 10;">
<div class="relative flex-1 h-full">
<img src="https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1600&auto=format&fit=crop" alt="FAQ preview" class="w-full h-full object-cover" style="filter: saturate(0.9) contrast(1.05);">
</div>
</div>
<div class="pointer-events-none absolute inset-0 rounded-3xl ring-1 ring-inset ring-white/10"></div>
</div>
</div>
<script>
(function() {
const toggles = document.querySelectorAll('.faq-toggle');
toggles.forEach(toggle => {
toggle.addEventListener('click', function() {
const faqId = this.getAttribute('data-faq');
const answer = document.querySelector(`[data-answer="${faqId}"]`);
const arrow = this.querySelector('.faq-arrow svg');
const isOpen = answer.style.maxHeight && answer.style.maxHeight !== '0px';
// Close all other FAQs
document.querySelectorAll('.faq-answer').forEach(a => {
if (a !== answer) {
a.style.maxHeight = '0';
a.style.opacity = '0';
}
});
document.querySelectorAll('.faq-arrow svg').forEach(arr => {
if (arr !== arrow) {
arr.style.transform = 'rotate(0deg)';
}
});
// Toggle current FAQ
if (isOpen) {
answer.style.maxHeight = '0';
answer.style.opacity = '0';
arrow.style.transform = 'rotate(0deg)';
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
answer.style.opacity = '1';
arrow.style.transform = 'rotate(90deg)';
}
});
});
})();
</script>
</div>
<!-- Mobile CTA -->
<div class="mt-8 sm:hidden">
<a href="#"
class="inline-flex h-11 items-center rounded-full bg-white/5 px-5 text-[15px] font-medium shadow-sm ring-1 ring-white/10 hover:bg-white/10 w-full justify-center text-blue-300">
View all FAQs
</a>
</div>
<script class="">
(function () {
const section = document.currentScript && document.currentScript.parentElement ? document.currentScript.parentElement : document.querySelector('[data-element-id="aura-emh6dltixdxmqargf"]');
if (!section) return;
const img = section.querySelector('#faqPreviewImage');
const previews = {
'getting-started': 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=1600&auto=format&fit=crop',
'pricing': 'https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?q=80&w=1600&auto=format&fit=crop',
'support': 'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?q=80&w=1600&auto=format&fit=crop'
};
section.querySelectorAll('[data-preview]').forEach(link => {
link.addEventListener('mouseenter', () => {
const key = link.getAttribute('data-preview');
if (previews[key]) img.src = previews[key];
});
link.addEventListener('focus', () => {
const key = link.getAttribute('data-preview');
if (previews[key]) img.src = previews[key];
});
});
})();
</script>
</div>
</section>
create a canvas to display a faq component. we want the faq component to be centered and the space around it to be flexible empty.
reproduce this faq component
Created by: LandingHero
