FAQ section with CTA button
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>FAQ Component</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">
<link rel="stylesheet" href="./styles.css">
<style type="text/tailwindcss">@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
.faq-icon-cross {
position: relative;
width: 24px;
height: 24px;
}
.faq-icon-cross::before,
.faq-icon-cross::after {
content: '';
position: absolute;
background-color: white;
transition: transform 0.3s ease;
}
.faq-icon-cross::before {
top: 11px;
left: 6px;
width: 12px;
height: 2px;
}
.faq-icon-cross::after {
top: 6px;
left: 11px;
width: 2px;
height: 12px;
}</style><script src="https://cdn.tailwindcss.com"></script><script>tailwind.config = {
important: '#app-root',
theme: {
extend: {
colors: {
'brand-primary': 'rgb(6, 64, 53)',
'brand-highlight': 'rgb(167, 229, 99)',
'neutral-surface': 'rgb(240, 244, 243)',
'text-primary': 'rgb(6, 64, 53)',
'text-secondary': 'rgb(82, 82, 82)',
},
fontFamily: {
'primary': ['Poppins', 'sans-serif'],
'secondary': ['Instrument Sans', 'sans-serif'],
},
borderRadius: {
'faq': '15px',
}
}
}
}</script></head>
<body id="app-root" class="bg-white font-secondary antialiased">
<main><div class="w-full flex justify-center py-20 px-4 md:px-10 lg:px-20">
<div class="max-w-[1200px] w-full grid grid-cols-1 lg:grid-cols-[416px_1fr] gap-12 items-start">
<!-- Left Column: Text & Contact Card -->
<div class="flex flex-col gap-12">
<!-- Top Text -->
<div class="space-y-6">
<h2 class="font-primary text-[40px] leading-[44px] font-medium text-brand-primary tracking-[-2px] capitalize">
Frequently asked questions
</h2>
<p class="text-lg leading-[27px] text-text-secondary">
Find answers to common questions about AI-powered content creation, campaign automation, and analytics tools.
</p>
</div>
<!-- Contact Block -->
<div class="bg-neutral-surface p-5 rounded-faq flex flex-col gap-6 items-start">
<div class="w-6 h-6">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.333 23.333" class="w-full h-full fill-brand-primary">
<path d="M 21 0 L 2.333 0 C 1.049 0.005 0.01 1.049 0.012 2.333 L 0 23.333 L 4.667 18.667 L 21 18.667 C 22.287 18.663 23.33 17.62 23.333 16.333 L 23.333 2.333 C 23.329 1.046 22.287 0.004 21 0 Z M 18.667 14 L 4.667 14 L 4.667 11.667 L 18.667 11.667 Z M 18.667 10.5 L 4.667 10.5 L 4.667 8.167 L 18.667 8.167 Z M 18.667 7 L 4.667 7 L 4.667 4.667 L 18.667 4.667 Z"></path>
</svg>
</div>
<div class="space-y-5">
<h4 class="font-primary text-3xl leading-[33px] font-medium text-brand-primary tracking-[-1.5px] capitalize">
Got more questions ?
</h4>
<p class="text-lg leading-[27px] text-text-secondary">
Find answers to common questions about AI-powered content creation, campaign automation, and analytics tools.
</p>
</div>
<a href="./contact" class="bg-brand-highlight text-brand-primary px-6 py-[15px] rounded-[36px] font-semibold text-sm hover:opacity-90 transition-opacity">
Contact us
</a>
</div>
</div>
<!-- Right Column: FAQ Accordion -->
<div class="flex flex-col gap-[10px]" data-component="faq-accordion">
<!-- FAQ Item 1 -->
<div class="bg-neutral-surface rounded-faq px-[25px] py-[25px] cursor-pointer group" data-faq-item="">
<div class="flex items-center justify-between gap-4">
<h5 class="text-lg font-medium text-brand-primary">What types of content can be generated?</h5>
<div class="w-6 h-6 bg-brand-primary rounded-sm flex items-center justify-center faq-icon-cross"></div>
</div>
</div>
<!-- FAQ Item 2 -->
<div class="bg-neutral-surface rounded-faq px-[25px] py-[25px] cursor-pointer group" data-faq-item="">
<div class="flex items-center justify-between gap-4">
<h5 class="text-lg font-medium text-brand-primary">Do I need design or video editing skills?</h5>
<div class="w-6 h-6 bg-brand-primary rounded-sm flex items-center justify-center faq-icon-cross"></div>
</div>
</div>
<!-- FAQ Item 3 -->
<div class="bg-neutral-surface rounded-faq px-[25px] py-[25px] cursor-pointer group" data-faq-item="">
<div class="flex items-center justify-between gap-4">
<h5 class="text-lg font-medium text-brand-primary">Can I automate my marketing campaigns?</h5>
<div class="w-6 h-6 bg-brand-primary rounded-sm flex items-center justify-center faq-icon-cross"></div>
</div>
</div>
<!-- FAQ Item 4 -->
<div class="bg-neutral-surface rounded-faq px-[25px] py-[25px] cursor-pointer group" data-faq-item="">
<div class="flex items-center justify-between gap-4">
<h5 class="text-lg font-medium text-brand-primary">How does analytics work?</h5>
<div class="w-6 h-6 bg-brand-primary rounded-sm flex items-center justify-center faq-icon-cross"></div>
</div>
</div>
<!-- FAQ Item 5 -->
<div class="bg-neutral-surface rounded-faq px-[25px] py-[25px] cursor-pointer group" data-faq-item="">
<div class="flex items-center justify-between gap-4">
<h5 class="text-lg font-medium text-brand-primary">Is my data secure?</h5>
<div class="w-6 h-6 bg-brand-primary rounded-sm flex items-center justify-center faq-icon-cross"></div>
</div>
</div>
<!-- FAQ Item 6 -->
<div class="bg-neutral-surface rounded-faq px-[25px] py-[25px] cursor-pointer group" data-faq-item="">
<div class="flex items-center justify-between gap-4">
<h5 class="text-lg font-medium text-brand-primary">Do I need design or video editing skills?</h5>
<div class="w-6 h-6 bg-brand-primary rounded-sm flex items-center justify-center faq-icon-cross"></div>
</div>
</div>
<!-- FAQ Item 7 -->
<div class="bg-neutral-surface rounded-faq px-[25px] py-[25px] cursor-pointer group" data-faq-item="">
<div class="flex items-center justify-between gap-4">
<h5 class="text-lg font-medium text-brand-primary">Can I customize the AI-generated content?</h5>
<div class="w-6 h-6 bg-brand-primary rounded-sm flex items-center justify-center faq-icon-cross"></div>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const faqItems = document.querySelectorAll('[data-faq-item]');
faqItems.forEach(item => {
item.addEventListener('click', () => {
// Logic for expanding can go here if content fragments were provided.
// For now, it matches the "Close" state visual from the prompt.
console.log('FAQ item clicked');
});
});
});
</script></main>
</body></html>
change the textual content
Created by: LandingHero
