feat: initial draft and components creation

components/invite/faq-section.tsx

@@ -0,0 +1,22 @@
+import Link from "next/link"
+
+import { SectionHeading } from "@/components/invite/section-heading"
+import { WeddingContainer } from "@/components/invite/wedding-container"
+import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
+
+export function FaqSection({ content }: { content: InvitePageContent["faq"] }) {
+  return (
+    <section id="faq" className="bg-wedding-ivory py-wedding-section">
+      <WeddingContainer>
+        <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
+        <div className="mt-14 grid gap-x-12 wedding-layout:grid-cols-2">
+          {content.questions.map((item) => <details className="group border-b border-wedding-line py-6" key={item.question}><summary className="flex cursor-pointer list-none items-start justify-between gap-6 font-wedding-display text-wedding-medium"><span>{item.question}</span><span className="font-wedding-ui text-wedding-label text-wedding-terracotta transition-transform group-open:rotate-45">+</span></summary><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{item.answer}</p></details>)}
+        </div>
+        <aside className="mt-16 flex flex-col gap-5 bg-wedding-cream p-8 wedding-phone:flex-row wedding-phone:items-center wedding-phone:justify-between wedding-phone:p-12">
+          <div><h3 className="font-wedding-display text-wedding-medium">{content.contact.heading}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{content.contact.description}</p></div>
+          <Link className="wedding-text-link" href="mailto:hello@example.com">{content.contact.action} →</Link>
+        </aside>
+      </WeddingContainer>
+    </section>
+  )
+}