feat: plural wordings

components/invite/faq-section.tsx

@@ -9,7 +9,7 @@ export function FaqSection({ content }: { content: InvitePageContent["faq"] }) {
     <section id="faq" className="bg-wedding-ivory pt-wedding-section">
       <WeddingContainer>
         <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
-        <div className="mt-14 grid gap-x-12 wedding-lg:grid-cols-2">
+        <div className="mt-14 grid gap-x-12 max-w-3xl mx-auto">
           {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-md:flex-row wedding-md:items-center wedding-md:justify-between wedding-md:p-12">

components/invite/rsvp-section.tsx

@@ -20,11 +20,18 @@ export function RsvpSection(props: {
   error?: string
 }) {
   const message = props.closed ? props.dictionary.deadline.closed : props.submitted ? props.dictionary.form.submitted : props.error === "closed" ? props.dictionary.errors.closed : props.error ? props.dictionary.errors.generic : null
+  const isSingularPerson = props.detail.members.length === 1;
   return (
     <section id="rsvp" className="bg-wedding-ivory pt-wedding-section">
       <WeddingContainer wide>
         <div className="grid gap-14">
-          <div><p className="wedding-section-label">{props.content.eyebrow}</p><h2 className="wedding-display-heading mt-5 text-wedding-page">{props.content.heading}</h2><div className="mt-7 w-12 border-t-2 border-wedding-terracotta" /><p className="mt-7 font-wedding-ui text-wedding-body leading-wedding-body">{props.content.paragraph} <strong>{props.content.deadline}</strong>.</p><p className="mt-4 font-wedding-display text-wedding-medium italic text-wedding-terracotta">{props.content.helper}</p><Link className="mt-12 inline-block wedding-text-link" href="#faq">{props.content.faqLink} →</Link></div>
+          <div className="" >
+            <p className="wedding-section-label">{props.content.eyebrow}</p>
+            <h2 className="wedding-display-heading text-wedding-page mt-4" >{props.detail.invitation.display_name}</h2>
+            <h2 className="wedding-display-heading mt-5 text-wedding-medium">{isSingularPerson ? props.content.heading_singular : props.content.heading_plural}</h2>
+            <div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
+            <p className="mt-7 font-wedding-ui text-wedding-body leading-wedding-body">{props.content.paragraph} <strong>{props.content.deadline}</strong>.</p>
+            <p className="mt-4 font-wedding-display text-wedding-medium italic text-wedding-terracotta">{isSingularPerson ? props.content.helper_singular : props.content.helper_plural}</p><Link className="mt-12 inline-block wedding-text-link" href="#faq">{props.content.faqLink} →</Link></div>
           <div>{message ? <p aria-live="polite" className="border border-wedding-line bg-wedding-cream p-5 font-wedding-ui text-sm">{message}</p> : null}<RsvpForm {...props} /></div>
         </div>
       </WeddingContainer>