faqs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FAQ Section</title>
    <style>
        .faq-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            padding: 40px 20px;
        }

        .faq-header h2 {
            font-size: 32px;
            margin: 0 0 16px;
        }

        .faq-header p {
            font-size: 16px;
            color: #555;
            line-height: 1.6;
        }

        .faq-header .tag {
            display: inline-block;
            background: #f3f0ff;
            color: #6c4ad0;
            padding: 6px 12px;
            font-size: 14px;
            border-radius: 999px;
            margin-bottom: 12px;
        }

        .faq-item {
            border-bottom: 1px solid #ddd;
            padding: 16px 0;
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
        }

        .faq-question span {
            transition: transform 0.3s ease;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.3s ease;
            color: #555;
            font-size: 14px;
            line-height: 1.5;
            margin-top: 8px;
        }

        .faq-item.active .faq-answer {
            max-height: 200px;
            opacity: 1;
        }

        .faq-item.active .faq-question span {
            transform: rotate(45deg);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .faq-container {
                grid-template-columns: 1fr;
            }

            .faq-header h2 {
                font-size: 24px;
            }
        }
    </style>
</head>

<body>
    <div class="faq-container">
        <!-- Left side (FAQ Intro) -->
        <div class="faq-header">
            <div class="tag">💡 FAQs</div>
            <h2>Questions? We’ve got answers.</h2>
            <p>
                Everything you need to know about the product and billing.
                Can’t find the answer you’re looking for? Please contact
                support@staticflow.io.
            </p>
        </div>

        <!-- Right side (FAQ Accordion) -->
        <div class="faq-list">
            <div class="faq-item">
                <div class="faq-question">
                    How will I get the templates? <span>+</span>
                </div>
                <div class="faq-answer">
                    Instantly via Canva link — just click, edit, and start using.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question">
                    Do I need Canva Pro? <span>+</span>
                </div>
                <div class="faq-answer">
                    No. All templates work perfectly with Canva Free.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question">
                    Are these templates proven? <span>+</span>
                </div>
                <div class="faq-answer">
                    Yes — every design is based on ads that delivered results for fast-growing brands.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question">
                    Can I reuse them? <span>+</span>
                </div>
                <div class="faq-answer">
                    Absolutely. Edit and reuse for unlimited products and campaigns.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question">
                    Will this work for my niche? <span>+</span>
                </div>
                <div class="faq-answer">
                    Yes — whether you sell fashion, beauty, home, or digital products, these frameworks adapt to any
                    niche.
                </div>
            </div>

            <div class="faq-item">
                <div class="faq-question">
                    What if I’m not happy? <span>+</span>
                </div>
                <div class="faq-answer">
                    We offer a 7-day money-back guarantee. No risk, no hassle.
                </div>
            </div>
        </div>
    </div>

    <script>
        const faqItems = document.querySelectorAll(".faq-item");

        faqItems.forEach(item => {
            item.querySelector(".faq-question").addEventListener("click", () => {
                item.classList.toggle("active");
            });
        });
    </script>
</body>

</html>