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 invitation relies on a set of image assets (hero backgrounds, portrait photos, gallery shots, venue photos, and a homepage preview thumbnail) stored under public/. Because the platform is a Next.js static export, all files in public/ are copied verbatim to the build output and served at the root URL. Planning your asset structure before you start building keeps the invitation directory clean and makes future updates easy to locate.

​
Image Assets

​
Directory convention

Store all images for an invitation under public/img/[category]/[name]/: 
public/
└── img/
    ├── quinces/
    │   └── daniela/
    │       ├── background-main.jpg
    │       ├── fifteen-girl.jpg
    │       ├── header-01.png
    │       ├── header-02.png
    │       ├── header-03.png
    │       ├── church.jpg
    │       ├── salon.jpg
    │       ├── gallery-01.jpg
    │       ├── gallery-02.jpg
    │       ├── gallery-03.jpg
    │       └── preview.jpg
    ├── bodas/
    │   └── maria-pedro/
    └── bautizos/
        └── mateo/

​
Common file names

FilePurpose
background-main.jpgRepeating or full-bleed background of the Main wrapper.
header.jpg / fifteen-girl.jpgPortrait photo used in the Header section.
header-01.png, header-02.png, header-03.pngDecorative PNG overlays / frames positioned on top of the portrait.
church.jpgVenue thumbnail shown inside the Ceremony Avatar.
salon.jpgVenue thumbnail shown inside the Reception Avatar.
gallery-01.jpg … gallery-N.jpgPhoto gallery images shown in the Gallery section.
preview.jpgPortrait-oriented thumbnail used on the homepage showcase card.
logo.pngSchool or organisation logo (used in escolar invitations).
mask.pngCustom SVG/PNG shape mask applied over the portrait photo.

​
Usage in components

Reference images by their public path. For next/image, use the fill prop for full-coverage backgrounds and always let the globally configured unoptimized flag handle the rest: 
import Image from "next/image";

// Full-coverage background image
<div className="relative w-full h-64">
  <Image
    src="/img/quinces/daniela/gallery-01.jpg"
    alt="Daniela — galería de fotos"
    fill
    className="object-cover"
  />
</div>

// Fixed-size portrait
<Image
  src="/img/quinces/daniela/fifteen-girl.jpg"
  alt="Daniela"
  width={240}
  height={240}
  className="rounded-full"
/>
For backgrounds applied as CSS background-image, use the Tailwind arbitrary-value syntax directly in className — no <Image> component needed: 
<div
  className="bg-[url('/img/quinces/daniela/background-main.jpg')] bg-cover bg-center bg-fixed"
  style={{ height: "100svh" }}
/>

​
Video Assets

Some invitations use short .mp4 clips as atmospheric video backgrounds. Store video files alongside the image assets in the same public/img/[category]/[name]/ directory (or in a dedicated public/media/ directory for audio/video). Use a plain HTML <video> element for autoplay muted loop — no third-party player required: 
"use client";

export default function VideoBackground() {
  return (
    <video
      autoPlay
      muted
      loop
      playsInline
      className="absolute inset-0 w-full h-full object-cover"
    >
      <source src="/img/quinces/[name]/background.mp4" type="video/mp4" />
    </video>
  );
}
Key attributes:
  • autoPlay — starts playback immediately (requires muted to work on iOS).
  • muted — required for autoplay in all modern browsers.
  • playsInline — prevents fullscreen takeover on iOS Safari.
  • loop — keeps the video looping seamlessly.

​
Font Assets

Shared decorative fonts live in public/fonts/. They are available to every invitation and loaded on-demand using next/font/local. See the Fonts & Styling guide for the full loading pattern and a complete list of available typefaces. 
public/
└── fonts/
    ├── Blacksword.otf
    ├── BrittanySignature.ttf
    ├── Cheeky.ttf
    ├── Chomsky.otf
    ├── HARRYP__.TTF
    ├── HarryPotter-ov4z.ttf
    ├── HighriseFont.otf
    ├── Machinery.otf
    ├── Olondona.otf
    ├── Rumble.otf
    ├── VerveAlternate.ttf
    ├── adelia.ttf
    ├── candlescript.otf
    └── mexican_city.otf
To add a new font, drop the file into public/fonts/ and register it in the invitation’s Fonts.ts using next/font/local.

​
Asset Sizing Recommendations

Following these guidelines keeps the invitation fast on mobile data connections without sacrificing visual quality.
Asset typeRecommended dimensionsFormatQuality
Background / hero image (landscape)1920 × 1080 pxJPEG80%
Background / hero image (portrait)1080 × 1920 pxJPEG80%
Gallery images800 × 800 to 1200 × 900 pxJPEG80%
Portrait / avatar photo600 × 600 pxJPEG85%
Decorative PNG overlays / frames600 × 600 pxPNG (transparent)Lossless
Homepage preview thumbnail400 × 700 pxJPEG85%
Video backgroundMax 5 MB, H.264/AVC, 720pMP4—
Background audioMax 4 MB, 128 kbpsMP3—
All files placed in public/ are served at the root URL without any path prefix. For example, public/img/quinces/daniela/gallery-01.jpg is accessible at /img/quinces/daniela/gallery-01.jpg in both development and the static export. Never reference public/ in your src paths — omit the public/ prefix entirely.
.avif and .webp are both supported by Next.js and modern browsers, but .avif decoding can be noticeably slow on older mid-range Android and iOS devices — decoding a single 1920 × 1080 .avif file can block the main thread for several hundred milliseconds on a 2018-era device. For background images and gallery photos, prefer .jpg. Reserve .webp for secondary thumbnails where the size saving justifies the slightly higher decode cost, and avoid .avif for any image that needs to appear on first paint.

Build docs developers (and LLMs) love

Get started for freeTalk to us