import { useState, useEffect } from "react"; import nguLogo from "../assets/NGU_Logo.svg"; import fallLogo from "../assets/Fall Logo.svg"; import nguLogo_WhiteBG from "../assets/NGU_Logo_WhiteBG.svg"; {/* SVGs */} const DoveSVG = ({ className = "" }: { className?: string }) => ( ); const InstagramIcon = ({ id = "ig-gradient" }) => ( ); const FacebookIcon = () => ( ); const DiscordIcon = () => ( ); {/* Link Tables */} const Social_Links = [ { label: "Instagram", href: "https://www.instagram.com/nextgenerationunity/", Icon: InstagramIcon }, { label: "Facebook", href: "https://www.facebook.com/NextGenerationofUnity", Icon: FacebookIcon }, { label: "Discord", href: "https://discord.com/invite/AtngzpqaX5", Icon: DiscordIcon }, ] const Footer_Links = [ { label: "Privacy Policy", href: "#"}, { label: "Terms of Service", href: "#"}, { label: "Contact Us", href: "mailto:info@nextgenerationofunity.org"}, ] const EVENTS = [ { id: "spring-2025", title: "Spring Retreat 2026", theme: "Altering Intertia", date: "March/April 2026", location: "Unity Village, MO", image: fallLogo, // e.g. springLogo color: "#f1c2fe", gradient: "linear-gradient(150deg, rgba(240, 224, 254, 1), rgba(255, 255, 255, 0.28))", desc_a: "A weekend of connection, workshops, and community for young adults across the Unity movement.", desc_b: null, status: "past", links: [ ], }, { id: "fall-retreat-2026", title: "Fall Retreat 2026", theme: "Consciousness Creates", date: "November 12-15th, 2026", location: "Unity Village, MO", image: fallLogo, color: "#b89421", gradient: "linear-gradient(150deg, rgba(178, 150, 42, 0.45), rgba(230, 200, 120, 0.15) 65%, rgba(255, 255, 255, 0.28))", desc_a: "Join us for an exciting opportunity to connect with young adults from across the country through meaningful conversations, creative workshops, and shared artistic expression. All designed to shift your focus to your highest self.", desc_b: "Registration starting at $150, and $75 lodging cost.", status: "upcoming", links: [ { label: "Register Now!", link: "https://ngu.churchcenter.com/registrations/events/3761999" }, { label: "Scholarship Application", link: "https://ngu.churchcenter.com/people/forms/1261992" }, { label: "Volunteer", link: "https://ngu.churchcenter.com/people/forms/1176908" }, ], }, { id: "spring-recharge-2027", title: "Spring Recharge 2027", theme: "TBD", date: "March 6th, 2027", location: "Online", image: null, // e.g. eventLogo color: "#138ba0", gradient: null, desc_a: "One-day online event to reconnect in the spring.", desc_b: null, status: "upcoming", links: [ ], }, { id: "spring-service-2027", title: "Service Week 2027", theme: "Leadership & Service", date: "April 4-9th, 2027", location: "Unity Village, MO", image: null, // e.g. eventLogo color: "#138ba0", gradient: null, desc_a: "Join us at beautiful Unity Village for a week of leadership development and service projects.", desc_b: null, status: "upcoming", links: [ ], } ]; const START_INDEX = (() => { const i = EVENTS.findIndex(e => e.status === "upcoming"); return i === -1 ? EVENTS.length - 1 : i; })(); const TEAL = "#138ba0"; const CARD = "min(48rem, 90vw)"; // the card itself — your original max-w-3xl const GAP = "5rem"; // space between cards ← this is your knob const SLIDE = `calc(${CARD} + ${GAP})`; const HALF_SLIDE = `calc(${CARD} / 2)`; const FADE_DIST = "18rem"; const EDGE_FADE = `linear-gradient(to right, transparent calc(50% - (${HALF_SLIDE} + ${FADE_DIST})), black calc(50% - ${HALF_SLIDE}), black calc(50% + ${HALF_SLIDE}), transparent calc(50% + (${HALF_SLIDE} + ${FADE_DIST})))`; {/* Functions */} function WaveText({ text, baseDelay = 0, step = 0.1, }: { text: string; baseDelay?: number; step?: number; }) { return ( <> {text.split("").map((char, i) => ( {char === " " ? "\u00A0" : char} ))} ); } export default function Home() { {/* Other useState consts and Functions*/} const [showCalendar, setShowCalendar] = useState(false); const [index, setIndex] = useState(START_INDEX); const event = EVENTS[index]; const isPast = event.status === "past"; const currentColor = event.color || TEAL; const prev = () => setIndex(i => Math.max(0, i - 1)); const next = () => setIndex(i => Math.min(EVENTS.length - 1, i + 1)); const arrowStyle = (enabled: boolean) => ({ border: `1px solid ${TEAL}`, background: "rgba(255,255,255,0.6)", color: enabled ? TEAL : "#b8c6c9", cursor: enabled ? "pointer" : "default", opacity: enabled ? 1 : 0.4, }); {/* Start of Main Content*/} return ( <> {/* ── HERO/ABOUT ─────────────────────────────────────────────── */}
{/* Floating doves */}

Next Generation

A young-adult focused community ministy focused on supporting individuals in Unity Ministries from 18-40 years old. Rooted in spiritual growth, leadership development, and sacred service.

We are the future of the Unity Movement.

Follow Us on Instagram Attend a Retreat
{/* #About ─────────────────────────────────────── */}

A Ministry Designed For
Young Adults

NGU exists to connect young adults across Unity ministries and create spaces for authentic spiritual exploration, community, and conscious living.

{[ { title: "Spiritual Community", icon: "🕊️", desc: "We welcome all adults under 40 no matter where you are on your journey. Our community thrives on diversity of thought, background, and belief." }, { title: "Conscious Development", icon: "🌱", desc: "Through workshops, retreats, and gatherings, we cultivate minds and spirits ready to engage with life's deepest questions." }, { title: "Connected Network", icon: "🌐", desc: "NGU spans regions nationwide. From local chapter small group ministry to regional and national gatherings and retreats, you're never that far away from your people." }, ].map((card) => (
{card.icon}

{card.title}

{card.desc}

))}
{/* #Events ─────────────────────────────────────────────── */}

{isPast ? "Past Events" : "Upcoming Events"}

{/* Carousel — full-bleed so neighbors can peek in from the screen edges */}
{/* Masked viewport: everything outside the fade gradient is invisible */}
{/* Sliding track */}
{EVENTS.map((ev, i) => { const active = i === index; const past = ev.status === "past"; const color = ev.color || TEAL; return (
!active && setIndex(i)} aria-hidden={!active} >
Next Generation of Unity

{ev.title}

{ev.theme && (

"{ev.theme}"

)}

{ev.date}

{ev.location}

{ev.image && ( {ev.title} )}
{ev.desc_a &&

{ev.desc_a}

} {ev.desc_b &&

{ev.desc_b}

} {ev.links.length > 0 ? (
{ev.links.map(item => ( {item.label} ))}
) : ( past ? (

This event has concluded, thank you to everyone who joined us!

) : ( <>

Registration has not opened yet, follow our instagram for more details.

@nextgenerationunity ) )}
); })}
{/* Arrows — outside the masked element so they never fade */}
{/* Dot indicators */}
{EVENTS.map((e, i) => (

· More events coming soon, stay connected for announcements ·

{/* #Connect -------------------------------------------- */}

Ready to Connect?

Find your place in the NGU community

{[ { label: "Volunteer", desc: "Help create transformative experiences for young adults", link:"https://ngu.churchcenter.com/people/forms/1176908"}, { label: "Membership", desc: "Become an official member of the NGU community", link:"https://ngu.churchcenter.com/people/forms/1135816"}, { label: "Affiliation Form", desc: "Affiliate your ministry or spiritual organization with NGU", link:"https://ngu.churchcenter.com/people/forms/1135750"}, { label: "Speaker & Musician Directory", desc: "Join our network of speakers, musicians, and facilitators", link:"https://ngu.churchcenter.com/people/forms/1173181"}, ].map(item => (

{item.label}

{item.desc}

{/* Arrow */} ))}
📅 View NGU Calendar
{showCalendar && (