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.

The Invitaciones Digitales repository follows the Next.js App Router convention, with all application code under src/ and all static assets under public/. Each event category maps to a top-level route folder inside src/app/, and every individual invitation is a self-contained sub-directory within its category. Configuration files (next.config.js, tailwind.config.ts, tsconfig.json) live at the project root alongside package.json.

​
Top-Level Directory Tree

invitations/
├── src/
│   ├── app/
│   │   ├── bautizos/        # Baptism invitations (has layout.tsx + page.tsx)
│   │   ├── bodas/           # Wedding invitations (has layout.tsx + page.tsx)
│   │   ├── escolar/         # School graduation invitations (individual routes only)
│   │   ├── escolar-2026/    # 2026 school graduations (individual routes only)
│   │   ├── festejos/        # General celebration invitations (individual routes only)
│   │   ├── quinces/         # Quinceañera invitations (has layout.tsx + page.tsx)
│   │   ├── globals.css
│   │   ├── layout.tsx       # Root layout with Providers & SmoothScroll
│   │   ├── page.tsx         # Landing/homepage
│   │   └── provider.tsx
│   └── components/
│       └── SmoothScroll.tsx
├── public/
│   ├── fonts/               # Custom decorative fonts (.otf, .ttf)
│   ├── img/                 # Per-invitation image assets
│   │   ├── bautizos/
│   │   ├── bodas/
│   │   ├── escolar/
│   │   ├── escolar-2026/
│   │   ├── festejos/
│   │   └── quinces/
│   └── media/               # Shared audio tracks (.mp3)
├── next.config.js
├── tailwind.config.ts
├── tsconfig.json
└── package.json

​
Root layout (src/app/layout.tsx)

The root layout wraps every page in the application with two providers:
  • <Providers> — Initializes NextUI’s NextUIProvider, which supplies theme context and accessible component behavior to the entire component tree.
  • <SmoothScroll> — Wraps children with the Lenis smooth-scroll library, giving every page a fluid, eased scroll experience. Lenis is instantiated in src/components/SmoothScroll.tsx.
The root <html> element sets lang="es" (all content is in Spanish) and enables native CSS scroll-snapping with scrollSnapType: "y mandatory".

​
Category-level routes

Some category directories include a layout.tsx and page.tsx at the category level (bautizos, bodas, quinces), while others (escolar, escolar-2026, festejos) contain only individual invitation sub-directories with no category-level index page. Every category directory holds one sub-directory per individual invitation.

​
Per-Invitation Structure

Every individual invitation is a fully self-contained directory. Using src/app/quinces/daniela/ as a representative example: 
src/app/quinces/daniela/
├── components/
│   ├── Animations.ts    # Framer Motion animation variants
│   ├── AudioControl.tsx # Background music toggle button
│   ├── Ceremony.tsx     # Ceremony venue & time section
│   ├── Confirm.tsx      # RSVP / attendance confirmation section
│   ├── FloatingButton.tsx # Floating WhatsApp / scroll-to-top button
│   ├── Fonts.ts         # next/font configurations for this invitation
│   ├── Gallery.tsx      # Photo gallery (react-photo-album + lightbox)
│   ├── Gifts.tsx        # Gift registry / mesa de regalos section
│   ├── GodParents.tsx   # Godparent listing section
│   ├── Header.tsx       # Full-screen hero / opening section
│   ├── Main.tsx         # Root component — composes all sections
│   ├── NextJsImage.tsx  # next/image wrapper for react-photo-album
│   ├── Presentation.tsx # Animated name/date presentation section
│   └── Reception.tsx    # Reception venue & details section
├── layout.tsx           # Invitation-level layout (metadata, fonts)
├── page.tsx             # Entry point — renders <Main />
└── styles.css           # Per-invitation CSS overrides & custom variables

​
Key files explained

page.tsx

The Next.js page entry point. It imports and renders the <Main /> component, keeping the route file minimal and delegating all composition to the component layer.

Main.tsx

The root composition component. It imports every section component and renders them in the correct visual order, typically: Header → Presentation → Ceremony → Reception → GodParents → Gallery → Gifts → Confirm.

Animations.ts

A plain TypeScript module that exports Framer Motion Variants objects (e.g., fadeInUp, staggerChildren). All section components import from this file to keep animation logic centralized and consistent.

Fonts.ts

Calls next/font/local or next/font/google to configure the decorative typefaces used in this specific invitation. Font objects are exported and applied as className props in the section components.

styles.css

Per-invitation CSS that overrides Tailwind defaults or sets custom CSS variables (colors, gradients, spacing) unique to this invitation’s visual theme.

layout.tsx

The invitation-level Next.js layout. Sets per-invitation <Metadata> (title, Open Graph image, description) so each invitation has its own social-preview card when shared on WhatsApp or iMessage.

​
Path Alias

The project defines a single TypeScript path alias in tsconfig.json: 
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}
This means any file can import from src/ using the @/ prefix instead of fragile relative paths. For example: 
// Instead of:
import SmoothScroll from "../../../components/SmoothScroll";

// You can write:
import SmoothScroll from "@/components/SmoothScroll";
The alias is recognized by both the TypeScript compiler and Next.js’s webpack/turbopack bundler.

​
Asset Conventions

All static assets are served from the public/ directory and referenced with absolute paths beginning with /.

​
Per-invitation images

Images for each invitation follow this convention: 
public/img/[category]/[name]/
For example, all photos for the daniela quinceañera live in: 
public/img/quinces/daniela/
Inside that folder you will typically find hero images, gallery photos, and any background textures specific to that invitation. File names are referenced directly inside the invitation’s component files.

​
Background music

Audio tracks shared across invitations are stored in: 
public/media/
Individual invitation components reference these tracks by their absolute path (e.g., /media/a_thousand_years.mp3) and play them through an AudioControl toggle button.

​
Shared fonts

Custom decorative fonts (.otf, .ttf) that are used across multiple invitations are stored in: 
public/fonts/
These are loaded via next/font/local in each invitation’s Fonts.ts file, which constructs the proper FontFace configuration pointing to the /fonts/ path.
The escolar-2026 directory provides a dedicated namespace for upcoming 2026 academic-year graduation ceremonies. New school invitations for 2026 should be added under src/app/escolar-2026/[school-name]/ and their assets placed in public/img/escolar-2026/[school-name]/ following the same conventions as the current escolar category.

Build docs developers (and LLMs) love

Get started for freeTalk to us