Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/gus-16710/invitations/llms.txt

Use this file to discover all available pages before exploring further.

Every digital invitation in the platform is composed of a set of self-contained React components, each responsible for a single screen of content. Because every section occupies exactly 100svh, users experience a full-screen slide show when they swipe or scroll through the invitation. Adding, removing, or reordering sections is as simple as changing the import list and the slide order inside Main.tsx.

​
Available Section Components

Header

Full-screen hero with an animated name, portrait photo, and event date. Typically the first slide the guest sees.

Presentation

Opening slide that displays the couple’s or honoree’s name alongside the event type (Boda, XV Años, etc.).

Ceremony

Church or ceremony venue with full address, time, and an optional Google Maps deep link for navigation.

Reception

Reception venue slide with start time, address, and map link — usually placed right after the Ceremony slide.

Itinerary

Ordered timeline of all event activities with timestamps. Each item is animated in sequence using staggered Framer Motion children.

GodParents

Carousel of padrinos and madrinas, each entry showing the sponsorship role (Anillos, Velación, Lazo, etc.) and the sponsors’ names.

DressCode

Dress code slide with gender-specific instructions and inline SVG attire icons. Supports formal, semi-formal, or custom themes.

Gallery

Interactive masonry photo grid backed by react-photo-album. Tapping any photo opens a full-screen lightbox via yet-another-react-lightbox.

Gifts

Mesa de regalos slide linking to Amazon, Liverpool, and Sears registries, plus a modal for bank transfer details with one-tap clipboard copy.

Confirm

RSVP section with a WhatsApp deep link and optional phone-call button so guests can confirm attendance in one tap.

AudioControl

Floating music toggle button that auto-plays background audio on mount. Sits outside the slide stack so it persists across all sections.

​
Composition Root: Main.tsx

Main.tsx is the single file that assembles every section into a viewable invitation. It is a "use client" component that wraps all sections inside a Splide vertical slider (direction: "ttb"), so each section is a SplideSlide that snaps to the full viewport height. AudioControl is rendered outside the slider so the music toggle floats over every slide. On first render, Main.tsx shows a brief swipe-hint modal (ModalInstructions) for four seconds before fading in the slider. 
// src/app/bodas/diana-ernesto/components/Main.tsx (excerpt)
import { Splide, SplideSlide } from "@splidejs/react-splide";
import Header       from "./Header";
import Presentation from "./Presentation";
import Ceremony     from "./Ceremony";
import Reception    from "./Reception";
import GodParents   from "./GodParents";
import DressCode    from "./DressCode";
import Itinerary    from "./Itinerary";
import Gallery      from "./Gallery";
import Gifts        from "./Gifts";
import Confirm      from "./Confirm";
import AudioControl from "./AudioControl";
import "@splidejs/react-splide/css";

export default function Main() {
  return (
    <div className="max-w-3xl m-auto bg-cover bg-center shadow-large">
      <Splide
        aria-label="Diana & Ernesto"
        options={{
          rewind: true,
          direction: "ttb",   // vertical slide direction
          height: "100svh",
          wheel: true,
          releaseWheel: true,
          type: "loop",
          waitForTransition: true,
          arrows: false,
        }}
      >
        <SplideSlide><Header /></SplideSlide>
        <SplideSlide><Presentation /></SplideSlide>
        <SplideSlide><Ceremony /></SplideSlide>
        <SplideSlide><Reception /></SplideSlide>
        <SplideSlide><GodParents /></SplideSlide>
        <SplideSlide><DressCode /></SplideSlide>
        <SplideSlide><Itinerary /></SplideSlide>
        <SplideSlide><Gallery /></SplideSlide>
        <SplideSlide><Gifts /></SplideSlide>
        <SplideSlide><Confirm /></SplideSlide>
      </Splide>

      {/* AudioControl floats above all slides */}
      <AudioControl />
    </div>
  );
}
Each SplideSlide contains exactly one section component. The section component itself is responsible for the height: "100svh" style, so no additional sizing is needed on the slide wrapper.

​
Adding a New Section

1

Create the component file

Create src/app/<event-type>/<slug>/components/MySection.tsx. Set style={{ height: "100svh" }} on the root <section> tag and import the shared Animations.ts variants for entrance effects.
2

Import it in Main.tsx

Add the import at the top of Main.tsx alongside the other section imports.
3

Add a SplideSlide

Insert <SplideSlide><MySection /></SplideSlide> at the desired position in the slider. Splide preserves the DOM order as the slide sequence.
Keep each section component self-contained — avoid lifting state up to Main.tsx. Sections communicate with the outside world (WhatsApp, Maps, clipboard) via browser APIs called directly from onClick handlers.

Build docs developers (and LLMs) love

Get started for freeTalk to us