FAQ section with image on the left
Category: FAQ
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>CreatorFlow FAQ</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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.faq-accordion-item {
@apply transition-all duration-300 ease-in-out cursor-pointer;
}
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(255, 81, 0)',
'neutral-background': 'rgb(255, 255, 255)',
'neutral-surface': 'rgb(248, 247, 247)',
'text-primary': 'rgb(23, 23, 23)',
'text-secondary': 'rgb(33, 33, 33)',
'faq-open': 'rgb(23, 23, 23)',
'faq-border': 'rgb(217, 217, 217)',
},
fontFamily: {
'primary': ['Plus Jakarta Sans', 'sans-serif'],
},
letterSpacing: {
'tightest': '-1.5px',
}
}
}
}</script></head>
<body id="app-root" class="font-primary bg-white text-text-primary overflow-x-hidden">
<main><section class="flex flex-col lg:flex-row items-start justify-center gap-12 max-w-[1200px] mx-auto py-24 px-6 font-primary">
<!-- Left Column: Title and Description -->
<div class="flex-1 space-y-4">
<!-- FAQ Badge -->
<div class="inline-flex items-center gap-2 px-4 py-2 bg-white border border-dashed border-faq-border rounded-full w-fit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="w-2.5 h-2.5 fill-brand-primary rotate-[103deg]">
<path d="M240,128a15.79,15.79,0,0,1-10.5,15l-63.44,23.07L143,229.5a16,16,0,0,1-30,0L89.94,166.06,26.5,143a16,16,0,0,1,0-30L89.94,89.94,113,26.5a16,16,0,0,1,30,0l23.07,63.44L229.5,113A15.79,15.79,0,0,1,240,128Z"></path>
</svg>
<span class="text-xs font-semibold uppercase tracking-tight">FAQ</span>
</div>
<!-- Title -->
<h2 class="text-[48px] font-bold leading-[1.2] tracking-[-1.5px] text-text-primary max-w-[426px]">
Got Questions? We Got Answers
</h2>
<!-- Subtitle -->
<p class="text-lg font-medium text-text-secondary leading-[1.5] tracking-[-0.18px] max-w-[426px]">
Straightforward, no-fluff answers to help you feel confident about working with us.
</p>
</div>
<!-- Right Column: FAQ Accordion -->
<div class="flex-1 w-full space-y-3" id="faq-accordion">
<!-- Item 1 (Open by Default) -->
<div data-faq-item="" class="bg-faq-open text-white rounded-xl p-6 border border-dashed border-text-secondary transition-all duration-300">
<div class="flex items-center justify-between cursor-pointer" data-faq-trigger="">
<h6 class="text-[18px] font-medium tracking-[-1px]">What types of videos do you edit?</h6>
<div class="transition-transform duration-300" data-faq-icon="">
<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-6 h-6"><polyline points="18 15 12 9 6 15"></polyline></svg>
</div>
</div>
<div class="mt-3 overflow-hidden transition-all duration-300 max-h-40" data-faq-content="">
<p class="text-[16px] leading-[1.6] tracking-[-0.32px] text-white/90 max-w-[514px]">
We specialize in YouTube content — from tech reviews and vlogs to shorts, tutorials, podcasts, and cinematic storytelling. If it’s for YouTube, we’ve got it covered.
</p>
</div>
</div>
<!-- Item 2 (Closed) -->
<div data-faq-item="" class="bg-white text-text-primary rounded-xl p-6 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.02)] border border-dashed border-faq-border transition-all duration-300 group">
<div class="flex items-center justify-between cursor-pointer" data-faq-trigger="">
<h6 class="text-[18px] font-medium tracking-[-1px]">How fast is the delivery?</h6>
<div class="transition-transform duration-300 rotate-180" data-faq-icon="">
<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-6 h-6"><polyline points="18 15 12 9 6 15"></polyline></svg>
</div>
</div>
<div class="overflow-hidden transition-all duration-300 max-h-0" data-faq-content="">
<p class="mt-3 text-[16px] leading-[1.6] tracking-[-0.32px] text-text-secondary">
Typical turnaround time is 48-72 hours for standard videos. Larger projects might take slightly longer.
</p>
</div>
</div>
<!-- Item 3 (Closed) -->
<div data-faq-item="" class="bg-white text-text-primary rounded-xl p-6 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.02)] border border-dashed border-faq-border transition-all duration-300">
<div class="flex items-center justify-between cursor-pointer" data-faq-trigger="">
<h6 class="text-[18px] font-medium tracking-[-1px]">Can I request revisions?</h6>
<div class="transition-transform duration-300 rotate-180" data-faq-icon="">
<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-6 h-6"><polyline points="18 15 12 9 6 15"></polyline></svg>
</div>
</div>
<div class="overflow-hidden transition-all duration-300 max-h-0" data-faq-content="">
<p class="mt-3 text-[16px] leading-[1.6] tracking-[-0.32px] text-text-secondary">
Yes, we offer revisions to ensure the final product matches your vision perfectly.
</p>
</div>
</div>
<!-- Item 4 (Closed) -->
<div data-faq-item="" class="bg-white text-text-primary rounded-xl p-6 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.02)] border border-dashed border-faq-border transition-all duration-300">
<div class="flex items-center justify-between cursor-pointer" data-faq-trigger="">
<h6 class="text-[18px] font-medium tracking-[-1px]">Do I need to provide all the footage and assets?</h6>
<div class="transition-transform duration-300 rotate-180" data-faq-icon="">
<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-6 h-6"><polyline points="18 15 12 9 6 15"></polyline></svg>
</div>
</div>
<div class="overflow-hidden transition-all duration-300 max-h-0" data-faq-content="">
<p class="mt-3 text-[16px] leading-[1.6] tracking-[-0.32px] text-text-secondary">
Usually yes, but we can also source stock footage or music as needed.
</p>
</div>
</div>
<!-- Item 5 (Closed) -->
<div data-faq-item="" class="bg-white text-text-primary rounded-xl p-6 shadow-[5px_5px_15px_0px_rgba(0,0,0,0.02)] border border-dashed border-faq-border transition-all duration-300">
<div class="flex items-center justify-between cursor-pointer" data-faq-trigger="">
<h6 class="text-[18px] font-medium tracking-[-1px]">What if I’m not happy with the result?</h6>
<div class="transition-transform duration-300 rotate-180" data-faq-icon="">
<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-6 h-6"><polyline points="18 15 12 9 6 15"></polyline></svg>
</div>
</div>
<div class="overflow-hidden transition-all duration-300 max-h-0" data-faq-content="">
<p class="mt-3 text-[16px] leading-[1.6] tracking-[-0.32px] text-text-secondary">
Our satisfaction guarantee means we'll work with you until it's right.
</p>
</div>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', () => {
const items = document.querySelectorAll('[data-faq-item]');
items.forEach(item => {
const trigger = item.querySelector('[data-faq-trigger]');
const content = item.querySelector('[data-faq-content]');
const icon = item.querySelector('[data-faq-icon]');
trigger.addEventListener('click', () => {
const isOpen = item.classList.contains('bg-faq-open');
// Close all others
items.forEach(otherItem => {
otherItem.classList.remove('bg-faq-open', 'text-white');
otherItem.classList.add('bg-white', 'text-text-primary');
otherItem.querySelector('[data-faq-content]').style.maxHeight = '0px';
otherItem.querySelector('[data-faq-icon]').classList.add('rotate-180');
});
// If it wasn't open, open it
if (!isOpen) {
item.classList.add('bg-faq-open', 'text-white');
item.classList.remove('bg-white', 'text-text-primary');
content.style.maxHeight = '160px'; // Approx max height
icon.classList.remove('rotate-180');
}
});
});
});
</script></main>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Global interaction logic if needed
});
</script>
</body></html>
make the faq section and change the content
Created by: LandingHero
