how to make faq into accordion?

[dungai]

great template! thanks for the hard work on it.

is it possible to make faq into an accordion by modifying the faq widget somehow? maybe a boolean flag?

also on a sidenote, on mobile the dark mode background looks slightly blue which is great because its not just 0,0,0 rgb black like some sites. On my desktop though you cant see the blue at all. Does anyone else have that issue on desktop or is it my monitor?

thanks.

[JJRobertsSex30]

in /src/components/widgets add a new file AccordionFAQ.astro

---
// src/components/widgets/AccordionFAQ.astro
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';

export interface FAQ {
  question: string;
  answer: string;
  initiallyOpen?: boolean;
  id?: string;
}

export interface Props {
  title?: string;
  subtitle?: string;
  tagline?: string;
  items?: Array<FAQ>;
  id?: string;
  isDark?: boolean;
  classes?: {
    container?: string;
    headline?: string;
  };
  // bg?: string | unknown; // OLD - Incorrect type
  // The 'bg' prop itself is not explicitly defined here if we always expect
  // it to come from Astro.slots.render('bg') which correctly types it.
  // However, WidgetWrapper expects a 'bg' prop that can be string | undefined
  // when it receives slot content.
}

const {
  title = 'Frequently Asked Questions',
  subtitle = 'Find answers to common questions about this revolutionary approach.',
  tagline = 'Quick Answers',
  items = [
    { question: "Is jealousy just a natural part of loving someone?", answer: "No. While envy is natural, sexual jealousy stems from a sense of ownership, a concept this new approach helps you dismantle for more peaceful connections." },
    { question: "Does this new approach mean avoiding commitment?", answer: "Absolutely not. True commitment is redefined as a conscious choice based on mutual reward, honesty, and respect—stronger because it's freely chosen, not enforced.", initiallyOpen: false },
    { question: "Is this anti-marriage?", answer: "Not at all. Marriage becomes a valid *choice* within this framework, entered into consciously, honestly, and without societal pressure, understanding both its benefits and potential pitfalls." },
    { question: "How can relationships truly work without strict exclusivity?", answer: "The same way deep friendships thrive: through unwavering trust, open communication, profound respect, and ongoing mutual reward. Exclusivity becomes an *agreement*, not a prerequisite for love." },
  ],
  id,
  isDark = false,
  classes = {},
  // bg will be the content of the slot passed from the parent (index.astro)
  // Astro.slots.render('bg') returns string | undefined
} = Astro.props;

// Capture the rendered slot content for the bg prop
const backgroundSlotContent = await Astro.slots.render('bg');

---

<WidgetWrapper
  id={id ?? 'accordion-faq'}
  isDark={isDark}
  containerClass={`py-12 md:py-16 lg:py-20 ${classes?.container ?? ''}`}
  bg={backgroundSlotContent} {/* Pass the correctly typed slot content */}
>
  <Headline
    title={title}
    subtitle={subtitle}
    tagline={tagline}
    classes={{ container: `text-center mb-10 md:mb-14 ${classes?.headline ?? ''}`, title: 'text-3xl lg:text-4xl' }}
  />

  <div class="max-w-3xl mx-auto">
    {items && items.length > 0 && items.map((faq, index) => (
      <FAQItem
        question={faq.question}
        answer={faq.answer}
        initiallyOpen={faq.initiallyOpen || false}
        id={`faq-item-${faq.id ?? index}`}
      />
    ))}
  </div>

  <div class="text-center mt-10 md:mt-12">
    <a href="/full-faq" class="text-brand-orange hover:text-brand-orange-darker font-semibold hover:underline transition duration-150 ease-in-out">
      Have More Questions? Visit Our Full FAQ Page →
    </a>
  </div>
</WidgetWrapper>

=============================================================
Add this at the top of your index.astro

import AccordionFAQs from '~/components/widgets/AccordionFAQ.astro';



// === HOMEPAGE FAQ ITEMS ===
const homepageFAQItems = [
  { question: "Is jealousy truly natural in love?", answer: "While possessiveness feels common, this new approach helps you understand its roots and build trust beyond it, leading to more peaceful connections.", id: "hp-q1" },
  { question: "How does this differ from traditional relationship advice?", answer: "It moves beyond surface-level fixes to address the fundamental flawed designs in how society views relationships, offering a path to authentic freedom and choice.", id: "hp-q2" },
  { question: "Can this approach really lead to lasting happiness?", answer: "Yes, by building relationships on a foundation of honesty, mutual reward, and respect for individual freedom, you create a more resilient and genuinely fulfilling bond.", id: "hp-q3", initiallyOpen: false },
];

Further down in your layout section of your index.astro you can reference it like this

    {/* --- ACCORDION FAQ WIDGET --- */}
    <AccordionFAQs
      id="homepage-faqs"
      title="Quick Answers to Key Questions"
      subtitle="Get clarity on the core ideas of this transformative approach."
      tagline="Clarifications"
      items={homepageFAQItems}
      classes={{ container: 'py-16 md:py-20 bg-white dark:bg-slate-900' }}
    />

And that's it.