feat: initial draft and components creation

components/invite/schedule-section.tsx

@@ -0,0 +1,23 @@
+import { FeatureSplit } from "@/components/invite/feature-split"
+import { HeartQuote } from "@/components/invite/heart-quote"
+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 ScheduleSection({ content }: { content: InvitePageContent["schedule"] }) {
+  return (
+    <section id="schedule" className="bg-wedding-ivory">
+      <FeatureSplit image="/images/schedule.png" alt="Wedding dinner celebration" reverse>
+        <SectionHeading eyebrow={content.eyebrow} heading={content.heading} description={content.introduction} />
+        <p className="mt-7 font-wedding-display text-wedding-medium italic text-wedding-terracotta">Nicole & Raul</p>
+      </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>
+      </WeddingContainer>
+      <HeartQuote quote={content.quote} />
+    </section>
+  )
+}