FAQ

<section className="py-12 md:py-24 max-w-3xl mx-auto px-4 w-full">
  <div className="text-center mb-10">
    <h2 className="text-3xl font-bold tracking-tighter">Frequently Asked Questions</h2>
  </div>
  <div className="space-y-4">
    <details className="group rounded-lg border border-border p-4 bg-card [&_summary::-webkit-details-marker]:hidden" open>
      <summary className="flex cursor-pointer items-center justify-between font-semibold">
        <span>Is it compatible with Tailwind v4?</span>
        <span className="transition group-open:rotate-180 text-muted-foreground">
          <svg fill="none" height="24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
        </span>
      </summary>
      <p className="text-muted-foreground text-sm mt-4 leading-relaxed">Yes! All components are fully compatible with Tailwind CSS v4 out of the box.</p>
    </details>
    <details className="group rounded-lg border border-border p-4 bg-card [&_summary::-webkit-details-marker]:hidden">
      <summary className="flex cursor-pointer items-center justify-between font-semibold">
        <span>Do I need to install any heavy dependencies?</span>
        <span className="transition group-open:rotate-180 text-muted-foreground">
          <svg fill="none" height="24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
        </span>
      </summary>
      <p className="text-muted-foreground text-sm mt-4 leading-relaxed">No, ToolMate UI is a copy-paste library. You own the code completely.</p>
    </details>
  </div>
</section>

"use client";

import React, { useState } from "react";

interface FaqProps {
  className?: string;
  children?: React.ReactNode;
}

export default function Faq({
  className = "",
  children,
}: FaqProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <section className="py-12 md:py-24 max-w-3xl mx-auto px-4 w-full">
  <div className="text-center mb-10">
    <h2 className="text-3xl font-bold tracking-tighter">Frequently Asked Questions</h2>
  </div>
  <div className="space-y-4">
    <details className="group rounded-lg border border-border p-4 bg-card [&_summary::-webkit-details-marker]:hidden" open>
      <summary className="flex cursor-pointer items-center justify-between font-semibold">
        <span>Is it compatible with Tailwind v4?</span>
        <span className="transition group-open:rotate-180 text-muted-foreground">
          <svg fill="none" height="24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
        </span>
      </summary>
      <p className="text-muted-foreground text-sm mt-4 leading-relaxed">Yes! All components are fully compatible with Tailwind CSS v4 out of the box.</p>
    </details>
    <details className="group rounded-lg border border-border p-4 bg-card [&_summary::-webkit-details-marker]:hidden">
      <summary className="flex cursor-pointer items-center justify-between font-semibold">
        <span>Do I need to install any heavy dependencies?</span>
        <span className="transition group-open:rotate-180 text-muted-foreground">
          <svg fill="none" height="24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
        </span>
      </summary>
      <p className="text-muted-foreground text-sm mt-4 leading-relaxed">No, ToolMate UI is a copy-paste library. You own the code completely.</p>
    </details>
  </div>
</section>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedFaq() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <section className="py-12 md:py-24 max-w-3xl mx-auto px-4 w-full">
  <div className="text-center mb-10">
    <h2 className="text-3xl font-bold tracking-tighter">Frequently Asked Questions</h2>
  </div>
  <div className="space-y-4">
    <details className="group rounded-lg border border-border p-4 bg-card [&_summary::-webkit-details-marker]:hidden" open>
      <summary className="flex cursor-pointer items-center justify-between font-semibold">
        <span>Is it compatible with Tailwind v4?</span>
        <span className="transition group-open:rotate-180 text-muted-foreground">
          <svg fill="none" height="24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
        </span>
      </summary>
      <p className="text-muted-foreground text-sm mt-4 leading-relaxed">Yes! All components are fully compatible with Tailwind CSS v4 out of the box.</p>
    </details>
    <details className="group rounded-lg border border-border p-4 bg-card [&_summary::-webkit-details-marker]:hidden">
      <summary className="flex cursor-pointer items-center justify-between font-semibold">
        <span>Do I need to install any heavy dependencies?</span>
        <span className="transition group-open:rotate-180 text-muted-foreground">
          <svg fill="none" height="24" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
        </span>
      </summary>
      <p className="text-muted-foreground text-sm mt-4 leading-relaxed">No, ToolMate UI is a copy-paste library. You own the code completely.</p>
    </details>
  </div>
</section>
    </motion.div>
  );
}