Wedding Invitations (Bodas) — Sections and Examples

import { useEffect, useState } from "react";
// @ts-ignore
import { Splide, SplideSlide } from "@splidejs/react-splide";
import Header from "./Header";
import Presentation from "./Presentation";
import Ceremony from "./Ceremony";
import Reception from "./Reception";
import Itinerary from "./Itinerary";
import Gallery from "./Gallery";
import Gifts from "./Gifts";
import DressCode from "./DressCode";
import GodParents from "./GodParents";
import Confirm from "./Confirm";
import AudioControl from "./AudioControl";
import { motion } from "framer-motion";
import "@splidejs/react-splide/css";

export default function Main() {
  const [open, setOpen] = useState(false);

  // Auto-dismiss modal after 4 seconds, then mount the invitation
  useEffect(() => {
    setTimeout(() => {
      setOpen(true);
    }, 4000);
  }, []);

  return (
    <div className="max-w-3xl m-auto bg-[url('/img/bodas/diana-ernesto/background-main.jpg')] bg-cover bg-center shadow-large">
      {open && (
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 1 }}
        >
          <Splide
            aria-label="Diana & Ernesto"
            options={{
              rewind: true,
              direction: "ttb",   // vertical top-to-bottom sliding
              height: "100svh",   // each slide fills the full screen height
              wheel: true,        // supports mouse-wheel navigation
              releaseWheel: true,
              type: "loop",
              waitForTransition: true,
              arrows: false,
              classes: {
                page: "splide__pagination__page custom-class-page",
              },
            }}
          >
            <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 outside the slider so it persists across all slides */}
          <AudioControl />
        </motion.div>
      )}
    </div>
  );
}