refactor: token layout names
This commit is contained in:
Raul Lugo
@@ -10,18 +10,18 @@ export function DetailsSection({ content }: { content: InvitePageContent["detail
|
||||
return (
|
||||
<section id="details" className="bg-wedding-ivory">
|
||||
<WeddingContainer className="py-wedding-section">
|
||||
<div className="grid gap-10 wedding-layout:grid-cols-2 wedding-layout:items-center">
|
||||
<div className="grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
|
||||
<SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
|
||||
<div className="relative aspect-video overflow-hidden"><Image src="/images/details_main.png" alt="Luttelforster Muhle venue" fill className="object-cover" sizes="(min-width: 900px) 55vw, 90vw" /></div>
|
||||
</div>
|
||||
<div className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-phone:grid-cols-3 wedding-phone:divide-x wedding-phone:divide-y-0 wedding-phone:border-y-0">
|
||||
{content.facts.map((fact, index) => <article className="py-7 wedding-phone:px-6 wedding-phone:py-0" key={fact.label}><p className="wedding-section-label">0{index + 1} · {fact.label}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{fact.value}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{fact.description}</p></article>)}
|
||||
<div className="mt-14 grid divide-y divide-wedding-line border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:divide-x wedding-md:divide-y-0 wedding-md:border-y-0">
|
||||
{content.facts.map((fact, index) => <article className="py-7 wedding-md:px-6 wedding-md:py-0" key={fact.label}><p className="wedding-section-label">0{index + 1} · {fact.label}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{fact.value}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{fact.description}</p></article>)}
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 wedding-phone:grid-cols-2">
|
||||
<div className="mt-16 grid gap-8 wedding-md:grid-cols-2">
|
||||
{content.expectations.map((item, index) => <article key={item.label}><div className="relative aspect-video overflow-hidden"><Image src={expectationImages[index]} alt={item.label} fill className="object-cover" sizes="(min-width: 600px) 45vw, 90vw" /></div><h3 className="mt-5 font-wedding-display text-wedding-medium">{item.label}</h3><p className="mt-2 font-wedding-ui text-wedding-body">{item.value}</p><p className="mt-1 font-wedding-ui text-sm">{item.description}</p></article>)}
|
||||
</div>
|
||||
<div className="mt-16 bg-wedding-cream p-8 wedding-phone:p-12"><p className="wedding-section-label">{content.dressCode.label}</p><h3 className="mt-4 font-wedding-display text-wedding-section">{content.dressCode.value}</h3><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{content.dressCode.description}</p></div>
|
||||
<div className="mt-16 grid gap-8 wedding-phone:grid-cols-2 wedding-layout:grid-cols-5">
|
||||
<div className="mt-16 bg-wedding-cream p-8 wedding-md:p-12"><p className="wedding-section-label">{content.dressCode.label}</p><h3 className="mt-4 font-wedding-display text-wedding-section">{content.dressCode.value}</h3><p className="mt-4 max-w-xl font-wedding-ui text-wedding-body leading-wedding-body">{content.dressCode.description}</p></div>
|
||||
<div className="mt-16 grid gap-8 wedding-md:grid-cols-2 wedding-lg:grid-cols-5">
|
||||
{content.policies.map((policy) => <article className="border-l border-wedding-line pl-5" key={policy.title}><h3 className="font-wedding-display text-wedding-medium">{policy.title}</h3><p className="mt-3 font-wedding-ui text-sm leading-wedding-body">{policy.description}</p></article>)}
|
||||
</div>
|
||||
</WeddingContainer>
|
||||
|
||||
@@ -9,10 +9,10 @@ export function FaqSection({ content }: { content: InvitePageContent["faq"] }) {
|
||||
<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">
|
||||
<div className="mt-14 grid gap-x-12 wedding-lg: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">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
@@ -13,13 +13,13 @@ export function FeatureSplit({
|
||||
reverse?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div className="grid wedding-layout:grid-cols-2">
|
||||
<div className="grid wedding-lg:grid-cols-2">
|
||||
<div
|
||||
className={`flex items-center bg-wedding-ivory px-wedding-gutter-mobile py-wedding-section wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop ${reverse ? "wedding-layout:order-2" : ""}`}
|
||||
className={`flex items-center bg-wedding-ivory px-wedding-gutter-mobile py-wedding-section wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop ${reverse ? "wedding-lg:order-2" : ""}`}
|
||||
>
|
||||
<div className="mx-auto w-full max-w-md">{children}</div>
|
||||
</div>
|
||||
<div className={`relative min-h-96 ${reverse ? "wedding-layout:order-1" : ""}`}>
|
||||
<div className={`relative min-h-96 ${reverse ? "wedding-lg:order-1" : ""}`}>
|
||||
<Image className="object-cover" src={image} alt={alt} fill sizes="(min-width: 900px) 60vw, 100vw" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export function HeartQuote({ quote }: { quote: string }) {
|
||||
return (
|
||||
<blockquote className="bg-wedding-cream px-wedding-gutter-mobile py-12 text-center wedding-phone:px-wedding-gutter-phone">
|
||||
<blockquote className="bg-wedding-cream px-wedding-gutter-mobile py-12 text-center wedding-md:px-wedding-gutter-phone">
|
||||
<p className="font-wedding-display text-wedding-medium italic leading-wedding-display text-wedding-terracotta">
|
||||
“{quote}”
|
||||
</p>
|
||||
|
||||
@@ -7,12 +7,12 @@ import type { InvitePageContent } from "@/lib/i18n/invite-page/content"
|
||||
export function HeroSection({ content }: { content: InvitePageContent["hero"] }) {
|
||||
return (
|
||||
<section id="top" className="relative isolate flex min-h-screen items-end overflow-hidden bg-wedding-ink text-wedding-white">
|
||||
<Image className="object-cover wedding-layout:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
||||
<Image className="hidden object-cover wedding-layout:block" src="/images/hero_desktop.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
||||
<Image className="object-cover wedding-lg:hidden" src="/images/hero_mobile.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
||||
<Image className="hidden object-cover wedding-lg:block" src="/images/hero_desktop.png" alt="Nicole and Raul" fill priority sizes="100vw" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-wedding-ink/75 via-wedding-ink/30 to-transparent" />
|
||||
<div className="absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-wedding-ink/65 to-transparent" />
|
||||
<SiteHeader />
|
||||
<div className="relative z-10 w-full px-wedding-gutter-mobile pb-16 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop wedding-layout:pb-24">
|
||||
<div className="relative z-10 w-full px-wedding-gutter-mobile pb-16 wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop wedding-lg:pb-24">
|
||||
<p className="font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label">{content.eyebrow}</p>
|
||||
<h1 className="wedding-display-heading mt-6 max-w-5xl text-wedding-hero leading-none text-wedding-white">
|
||||
{content.title}
|
||||
|
||||
@@ -12,7 +12,7 @@ export function IntroductionSection({ content }: { content: InvitePageContent["i
|
||||
<section id="introduction" className="bg-wedding-ivory py-wedding-section">
|
||||
<WeddingContainer>
|
||||
<Monogram />
|
||||
<div className="mt-10 grid gap-10 wedding-layout:grid-cols-2 wedding-layout:items-center">
|
||||
<div className="mt-10 grid gap-10 wedding-lg:grid-cols-2 wedding-lg:items-center">
|
||||
<div>
|
||||
<h2 className="wedding-display-heading text-wedding-page text-wedding-ink">{content.heading}</h2>
|
||||
<div className="mt-7 w-12 border-t-2 border-wedding-terracotta" />
|
||||
@@ -23,10 +23,10 @@ export function IntroductionSection({ content }: { content: InvitePageContent["i
|
||||
<Image src="/images/schedule.png" alt="A candlelit wedding reception" fill className="object-cover" sizes="(min-width: 900px) 40vw, 90vw" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-14 grid border-y border-wedding-line wedding-phone:grid-cols-3 wedding-phone:border-y-0">
|
||||
<div className="mt-14 grid border-y border-wedding-line wedding-md:grid-cols-3 wedding-md:border-y-0">
|
||||
{content.facts.map((fact, index) => {
|
||||
const Icon = icons[index]
|
||||
return <div className={`flex gap-4 px-0 py-7 wedding-phone:px-6 wedding-phone:py-0 ${index < content.facts.length - 1 ? "wedding-phone:border-r wedding-phone:border-wedding-line" : ""}`} key={fact.label}>
|
||||
return <div className={`flex gap-4 px-0 py-7 wedding-md:px-6 wedding-md:py-0 ${index < content.facts.length - 1 ? "wedding-md:border-r wedding-md:border-wedding-line" : ""}`} key={fact.label}>
|
||||
<Icon className="mt-1 size-5 text-wedding-terracotta" aria-hidden="true" />
|
||||
<div><p className="wedding-section-label">{fact.label}</p><p className="mt-2 font-wedding-display text-wedding-medium">{fact.value}</p>{fact.description ? <p className="mt-1 font-wedding-ui text-sm">{fact.description}</p> : null}</div>
|
||||
</div>
|
||||
|
||||
@@ -100,7 +100,7 @@ export function PhotoUpload({
|
||||
|
||||
return (
|
||||
<section className="border-t border-wedding-line pt-10">
|
||||
<div className="grid gap-4 wedding-layout:grid-cols-3">
|
||||
<div className="grid gap-4 wedding-lg:grid-cols-3">
|
||||
<p className="wedding-section-label">04</p>
|
||||
<div>
|
||||
<h2 className="font-wedding-display text-wedding-medium">{labels.title}</h2>
|
||||
@@ -109,7 +109,7 @@ export function PhotoUpload({
|
||||
<p className="font-wedding-ui text-sm">{labels.requirements}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 wedding-layout:ml-60">
|
||||
<div className="mt-6 wedding-lg:ml-60">
|
||||
{filename ? (
|
||||
<p className="bg-wedding-cream px-4 py-3 font-wedding-ui text-sm text-wedding-ink">
|
||||
{labels.current.replace("{filename}", filename)}
|
||||
@@ -121,7 +121,7 @@ export function PhotoUpload({
|
||||
{labels.disabled}
|
||||
</p>
|
||||
) : (
|
||||
<div className="mt-4 flex flex-col gap-4 wedding-phone:flex-row wedding-phone:items-end">
|
||||
<div className="mt-4 flex flex-col gap-4 wedding-md:flex-row wedding-md:items-end">
|
||||
<label className="flex-1 font-wedding-ui text-sm">
|
||||
<span>{labels.choose}</span>
|
||||
<input
|
||||
|
||||
@@ -16,14 +16,14 @@ export function RsvpGuestFields({
|
||||
return (
|
||||
<section className="border-t border-wedding-line pt-10">
|
||||
{members.map((member, index) => (
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled} key={member.id}>
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-lg:grid-cols-3" disabled={disabled} key={member.id}>
|
||||
<legend className="sr-only">{member.name}</legend>
|
||||
<p className="wedding-section-label">0{index + 1}</p>
|
||||
<div><h3 className="font-wedding-display text-wedding-medium">{member.name}</h3><p className="mt-2 font-wedding-ui text-sm">{dictionary.form.attending}</p></div>
|
||||
<div className="grid gap-6 wedding-phone:grid-cols-2">
|
||||
<div className="grid gap-6 wedding-md:grid-cols-2">
|
||||
<div className="flex gap-3"><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="yes" defaultChecked={member.attending === true} required />{dictionary.form.yes}</label><label className="flex flex-1 cursor-pointer items-center justify-center border border-wedding-line p-3 font-wedding-display text-lg"><input className="sr-only" type="radio" name={`attending-${member.id}`} value="no" defaultChecked={member.attending === false} required />{dictionary.form.no}</label></div>
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.form.mealPreference}</span><select name={`meal-${member.id}`} defaultValue={member.meal_preference ?? ""} className="mt-2 w-full border border-wedding-line bg-wedding-ivory p-3"><option value="">{dictionary.form.mealPlaceholder}</option>{mealOptions.map((meal) => <option key={meal} value={meal}>{dictionary.meals[meal]}</option>)}</select></label>
|
||||
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.dietaryRestrictions}</span><input name={`dietary-${member.id}`} defaultValue={member.dietary_restrictions ?? ""} placeholder={dictionary.form.noRestrictions} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.dietaryRestrictions}</span><input name={`dietary-${member.id}`} defaultValue={member.dietary_restrictions ?? ""} placeholder={dictionary.form.noRestrictions} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
))}
|
||||
|
||||
@@ -23,7 +23,7 @@ export function RsvpSection(props: {
|
||||
return (
|
||||
<section id="rsvp" className="bg-wedding-ivory py-wedding-section">
|
||||
<WeddingContainer wide>
|
||||
<div className="grid gap-14 wedding-layout:grid-cols-2">
|
||||
<div className="grid gap-14 wedding-lg:grid-cols-2">
|
||||
<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>{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>
|
||||
|
||||
@@ -19,13 +19,13 @@ export function RsvpToastFields({
|
||||
const [enabled, setEnabled] = useState(Boolean(toastRequest))
|
||||
|
||||
return (
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled}>
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-lg:grid-cols-3" disabled={disabled}>
|
||||
<legend className="sr-only">{dictionary.interactions.toastTitle}</legend>
|
||||
<p className="wedding-section-label">03</p>
|
||||
<div><h3 className="font-wedding-display text-wedding-medium">{dictionary.interactions.toastTitle}</h3><p className="mt-2 font-wedding-ui text-sm leading-wedding-body">{dictionary.interactions.toastDescription}</p></div>
|
||||
<div>
|
||||
<label className="flex items-center gap-3 font-wedding-ui text-sm"><input type="checkbox" name="wantsToast" checked={enabled} onChange={(event) => setEnabled(event.target.checked)} />{dictionary.interactions.wantsToast}</label>
|
||||
<div className="mt-6 grid gap-6 wedding-phone:grid-cols-2">
|
||||
<div className="mt-6 grid gap-6 wedding-md:grid-cols-2">
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.interactions.speakerName}</span><input name="toastSpeakerName" disabled={!enabled} defaultValue={toastRequest?.speaker_name ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.interactions.estimatedMinutes}</span><input name="toastEstimatedMinutes" type="number" min="1" disabled={!enabled} defaultValue={toastRequest?.estimated_minutes ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3 disabled:opacity-50" /></label>
|
||||
</div>
|
||||
|
||||
@@ -15,16 +15,16 @@ export function RsvpTravelFields({
|
||||
disabled: boolean
|
||||
}) {
|
||||
return (
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-layout:grid-cols-3" disabled={disabled}>
|
||||
<fieldset className="grid gap-6 border-b border-wedding-line py-10 wedding-lg:grid-cols-3" disabled={disabled}>
|
||||
<legend className="sr-only">{dictionary.sections.travel}</legend>
|
||||
<p className="wedding-section-label">02</p>
|
||||
<div><h3 className="font-wedding-display text-wedding-medium">{dictionary.sections.travel}</h3></div>
|
||||
<div className="grid gap-6 wedding-phone:grid-cols-2">
|
||||
<div className="grid gap-6 wedding-md:grid-cols-2">
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.form.arrivalDate}</span><input type="date" name="arrivalDate" defaultValue={dateValue(response?.arrival_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<label className="font-wedding-ui text-sm"><span>{dictionary.form.departureDate}</span><input type="date" name="departureDate" defaultValue={dateValue(response?.departure_date)} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.stayLocation}</span><input name="stayLocation" defaultValue={response?.stay_location ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<div className="wedding-phone:col-span-2"><p className="font-wedding-ui text-sm">{dictionary.form.needsTransportHelp}</p><div className="mt-3 flex gap-6 font-wedding-ui text-sm"><label><input type="radio" name="needsTransportHelp" value="yes" defaultChecked={response?.needs_transport_help === true} /> {dictionary.form.yes}</label><label><input type="radio" name="needsTransportHelp" value="no" defaultChecked={response?.needs_transport_help === false} /> {dictionary.form.no}</label></div></div>
|
||||
<label className="font-wedding-ui text-sm wedding-phone:col-span-2"><span>{dictionary.form.messageToCouple}</span><textarea name="messageToCouple" defaultValue={response?.message_to_couple ?? ""} rows={4} className="mt-2 w-full border border-wedding-line bg-transparent p-3" /></label>
|
||||
<label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.stayLocation}</span><input name="stayLocation" defaultValue={response?.stay_location ?? ""} className="mt-2 w-full border-b border-wedding-line bg-transparent p-3" /></label>
|
||||
<div className="wedding-md:col-span-2"><p className="font-wedding-ui text-sm">{dictionary.form.needsTransportHelp}</p><div className="mt-3 flex gap-6 font-wedding-ui text-sm"><label><input type="radio" name="needsTransportHelp" value="yes" defaultChecked={response?.needs_transport_help === true} /> {dictionary.form.yes}</label><label><input type="radio" name="needsTransportHelp" value="no" defaultChecked={response?.needs_transport_help === false} /> {dictionary.form.no}</label></div></div>
|
||||
<label className="font-wedding-ui text-sm wedding-md:col-span-2"><span>{dictionary.form.messageToCouple}</span><textarea name="messageToCouple" defaultValue={response?.message_to_couple ?? ""} rows={4} className="mt-2 w-full border border-wedding-line bg-transparent p-3" /></label>
|
||||
</div>
|
||||
</fieldset>
|
||||
)
|
||||
|
||||
@@ -13,8 +13,8 @@ export function ScheduleSection({ content }: { content: InvitePageContent["sched
|
||||
</FeatureSplit>
|
||||
<WeddingContainer className="py-wedding-section">
|
||||
<p className="wedding-section-label">{content.label}</p>
|
||||
<div className="mt-10 grid gap-8 wedding-phone:grid-cols-2 wedding-layout:grid-cols-6">
|
||||
{content.timeline.map((item) => <article className="border-l border-wedding-line pl-5 wedding-layout:border-l-0 wedding-layout:border-t wedding-layout:pt-6 wedding-layout:pl-0" key={item.time}><span className="-ml-7 block size-3 rounded-full bg-wedding-terracotta wedding-layout:-mt-8 wedding-layout:ml-0" /><p className="mt-4 wedding-section-label">{item.time}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{item.title}</h3><p className="mt-4 font-wedding-ui text-sm leading-wedding-body">{item.description}</p></article>)}
|
||||
<div className="mt-10 grid gap-8 wedding-md:grid-cols-2 wedding-lg:grid-cols-6">
|
||||
{content.timeline.map((item) => <article className="border-l border-wedding-line pl-5 wedding-lg:border-l-0 wedding-lg:border-t wedding-lg:pt-6 wedding-lg:pl-0" key={item.time}><span className="-ml-7 block size-3 rounded-full bg-wedding-terracotta wedding-lg:-mt-8 wedding-lg:ml-0" /><p className="mt-4 wedding-section-label">{item.time}</p><h3 className="mt-3 font-wedding-display text-wedding-medium">{item.title}</h3><p className="mt-4 font-wedding-ui text-sm leading-wedding-body">{item.description}</p></article>)}
|
||||
</div>
|
||||
</WeddingContainer>
|
||||
<HeartQuote quote={content.quote} />
|
||||
|
||||
@@ -13,12 +13,12 @@ const links = [
|
||||
|
||||
export function SiteHeader() {
|
||||
return (
|
||||
<header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop">
|
||||
<header className="absolute inset-x-0 top-0 z-20 px-wedding-gutter-mobile py-6 wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop">
|
||||
<div className="flex items-center justify-between">
|
||||
<Link href="#top" aria-label="Back to top">
|
||||
<Monogram light />
|
||||
</Link>
|
||||
<nav aria-label="Invitation sections" className="hidden wedding-layout:block">
|
||||
<nav aria-label="Invitation sections" className="hidden wedding-lg:block">
|
||||
<ul className="flex items-center gap-6">
|
||||
{links.map(([label, href]) => (
|
||||
<li key={href}>
|
||||
@@ -29,7 +29,7 @@ export function SiteHeader() {
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
<details className="group relative wedding-layout:hidden">
|
||||
<details className="group relative wedding-lg:hidden">
|
||||
<summary className="cursor-pointer list-none font-wedding-ui text-wedding-label font-medium uppercase tracking-wedding-label text-wedding-white">
|
||||
Menu <span aria-hidden="true">☰</span>
|
||||
</summary>
|
||||
|
||||
@@ -24,10 +24,10 @@ export function StorySection({ content }: { content: InvitePageContent["story"]
|
||||
</FeatureSplit>
|
||||
<WeddingContainer className="py-wedding-section">
|
||||
<p className="wedding-section-label">Our journey</p>
|
||||
<div className="mt-12 grid gap-10 wedding-layout:grid-cols-3">
|
||||
<div className="mt-12 grid gap-10 wedding-lg:grid-cols-3">
|
||||
{content.timeline.map((item, index) => (
|
||||
<article className="border-l border-wedding-line pl-6 wedding-layout:border-l-0 wedding-layout:pl-0" key={item.year}>
|
||||
<div className="mb-5 flex items-center gap-4 wedding-layout:flex-col wedding-layout:items-start">
|
||||
<article className="border-l border-wedding-line pl-6 wedding-lg:border-l-0 wedding-lg:pl-0" key={item.year}>
|
||||
<div className="mb-5 flex items-center gap-4 wedding-lg:flex-col wedding-lg:items-start">
|
||||
<span className="size-3 rounded-full bg-wedding-terracotta" />
|
||||
<p className="wedding-section-label">{item.year}</p>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@ export function WeddingContainer({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"mx-auto w-full px-wedding-gutter-mobile wedding-phone:px-wedding-gutter-phone wedding-layout:px-wedding-gutter-desktop",
|
||||
"mx-auto w-full px-wedding-gutter-mobile wedding-md:px-wedding-gutter-phone wedding-lg:px-wedding-gutter-desktop",
|
||||
wide ? "max-w-wedding-content" : "max-w-6xl",
|
||||
className,
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user