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>

lib/i18n/invite-page/de.ts

@@ -190,10 +190,12 @@ export const de: InvitePageContent = {
   },
   rsvp: {
     eyebrow: "RSVP",
-    heading: "Wir freuen uns, mit euch zu feiern.",
-    paragraph: "Bitte gebt uns bis",
+    heading_singular: "Wir freuen uns, mit dir zu feiern.",
+    heading_plural: "Wir freuen uns, mit euch zu feiern.",
+    paragraph: "Bitte Bescheid geben bis",
     deadline: "15. Mai 2027",
-    helper: "Wir hoffen, ihr seid dabei!",
+    helper_singular: "Wir hoffen, du bist dabei!",
+    helper_plural: "Wir hoffen, ihr seid dabei!",
     faqLink: "Fragen? Zu den FAQ",
   },
 };

lib/i18n/invite-page/en.ts

@@ -190,10 +190,12 @@ export const en: InvitePageContent = {
   },
   rsvp: {
     eyebrow: "RSVP",
-    heading: "We can't wait to celebrate with you.",
+    heading_singular: "We can't wait to celebrate with you.",
+    heading_plural: "We can't wait to celebrate with you.",
     paragraph: "Please let us know if you'll be joining us by",
     deadline: "May 15, 2027",
-    helper: "We hope you can make it!",
+    helper_singular: "We hope you can make it!",
+    helper_plural: "We hope you can make it!",
     faqLink: "Questions? Visit our FAQ",
   },
 };

lib/i18n/invite-page/es.ts

@@ -188,10 +188,12 @@ export const es: InvitePageContent = {
   },
   rsvp: {
     eyebrow: "CONFIRMACION",
-    heading: "Estamos deseando celebrar contigo.",
-    paragraph: "Confirma tu asistencia antes del",
+    heading_singular: "Estamos deseando celebrar contigo.",
+    heading_plural: "Estamos deseando celebrar con ustedes.",
+    paragraph: "Confirma asistencia antes del",
     deadline: "15 de mayo de 2027",
-    helper: "Esperamos que puedas venir!",
+    helper_singular: "Esperamos que puedas venir!",
+    helper_plural: "Esperamos que puedan venir!",
     faqLink: "Preguntas? Visita las FAQ",
   },
 };

lib/i18n/invite-page/pl.ts

@@ -185,10 +185,12 @@ export const pl: InvitePageContent = {
   },
   rsvp: {
     eyebrow: "RSVP",
-    heading: "Nie mozemy sie doczekac, by swietowac z Wami.",
+    heading_singular: "Nie mozemy sie doczekac, by swietowac z Wami.",
+    heading_plural: "Nie mozemy sie doczekac, by swietowac z Wami.",
     paragraph: "Dajcie nam znac do",
     deadline: "15 maja 2027",
-    helper: "Mamy nadzieje, ze bedziecie z nami!",
+    helper_singular: "Mamy nadzieje, ze bedziecie z nami!",
+    helper_plural: "Mamy nadzieje, ze bedziecie z nami!",
     faqLink: "Pytania? Zobacz FAQ",
   },
 };

lib/i18n/invite-page/types.ts

@@ -77,10 +77,12 @@ export interface InvitePageContent {
   };
   rsvp: {
     eyebrow: string;
-    heading: string;
+    heading_singular: string;
+    heading_plural: string;
     paragraph: string;
     deadline: string;
-    helper: string;
+    helper_singular: string;
+    helper_plural: string;
     faqLink: string;
   };
 }