F a Q Section - Copy this React, Tailwind Component to your project

{/* Redesigned FAQ Section without plus sign and extra space */} <section className="bg [#F9F6F3] py 20"> <div className="max w 4xl mx auto px 6 md:px 12 rounded 2xl shadow xl bg white border border [#D1604B]/40"> <h2 className="text 4xl font extrabold mb 12 text center text [#A44C3D] drop shadow md font serif"> {text.faq} </h2> <Accordion type="single" collapsible className="space y 6"> {[ { value: "item 1", question: text.faq1Question, answer: text.faq1Answer, }, { value: "item 2", question: text.faq2Question, answer: text.faq2Answer, }, { value: "item 3", question: text.faq3Question, answer: text.faq3Answer, }, ].map(({ value, question, answer }) => ( <AccordionItem key={value} value={value} className="border border [#E2725B] rounded xl bg white shadow sm hover:shadow lg transition shadow duration 300" > <AccordionTrigger className="text xl px 8 py 5 text [#7B3B2C] font semibold hover:text [#B85746] transition colors duration 300"> {question} </AccordionTrigger> <AccordionContent className="text [#5C4430] px 8 pb 6 leading relaxed font medium"> {answer} </AccordionContent> </AccordionItem> ))} </Accordion> </div> </section> BUILD THIS IN BETTER FORM TERRA COTTA THEME