v1.2 - added react router
This commit is contained in:
Zaldimmar
parent
c83ff25a36
commit
b0fba52c0e
28 changed files with 4318 additions and 993 deletions
477
src/pages/Home.tsx
Normal file
477
src/pages/Home.tsx
Normal file
|
|
@ -0,0 +1,477 @@
|
|||
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 }) => (
|
||||
<svg className={className} width="72.867699mm" height="48.568241mm" viewBox="0 0 72.867699 48.568241" id="svg1" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs id="defs1" />
|
||||
<g id="layer1" transform="translate(-70.490069,-117.83965)">
|
||||
<g id="g2-5" transform="matrix(0.71532587,0,0,0.71532587,-173.91758,237.73112)" style={{ display: "inline" }}>
|
||||
<path style={{ color: "#000000", display: "inline", fill: "#ffffff", stroke: "none", strokeWidth: 2.284, strokeMiterlimit: 4, strokeDasharray: "none", strokeOpacity: 1}} d="m 355.91146,-123.11955 c 3.13369,-1.59928 7.04147,-4.49077 10.29591,-6.33595 3.25443,-1.84519 6.30899,-3.58417 9.61426,-4.20523 2.65302,-0.4889 6.37319,-0.18817 9.07211,0.58357 2.69896,0.77175 5.57299,2.70484 7.16593,3.40762 1.59295,0.70275 2.24655,0.19006 2.82855,-0.77494 0.582,-0.96504 2.81839,-6.05064 3.84362,-8.9293 1.02519,-2.87864 2.26409,-5.72337 4.14553,-7.76121 1.88144,-2.03782 2.31893,-2.07776 4.06202,-3.15865 1.74307,-1.08086 10.24244,-3.71628 14.53403,-5.61581 4.29158,-1.89953 8.11957,-3.58996 12.24067,-5.48028 4.12109,-1.89033 6.08861,-2.79441 7.30709,-3.29554 0.273,0.73801 -0.2034,3.06663 -1.16031,5.22317 -0.95691,2.15654 -2.9569,5.04357 -4.86279,7.26365 -1.90589,2.22009 -4.28775,4.10342 -6.82223,5.66812 -2.53448,1.56467 -4.53981,2.45823 -7.60439,3.71266 -3.06457,1.25446 -11.88915,4.7102 -14.64698,7.12005 -2.75786,2.40984 -4.18313,6.63212 -3.64772,7.60115 0.5354,0.96902 2.51391,-1.48598 3.81084,-2.34867 1.29694,-0.8627 1.95172,-1.05814 3.14897,-1.09198 1.17765,-0.0172 2.77532,0.40067 3.29849,0.63293 1.48441,0.659 3.97438,2.00122 3.54176,3.36038 -0.16368,0.51434 -0.19462,0.56904 -3.05611,1.25841 -2.86151,0.68935 -3.48508,1.29579 -3.81533,3.74861 -0.22097,1.47094 -1.44719,3.88743 -3.13317,5.28015 -1.68596,1.39274 -4.55099,2.93627 -8.41717,3.35482 -3.86617,0.41855 -6.17544,3.97192 -6.93256,5.37259 -0.75713,1.40064 -2.66104,5.90506 -2.99685,6.15238 -0.3358,0.24732 -2.76998,-0.36582 -3.79458,-0.82517 -1.02463,-0.45935 -2.612,-1.39111 -3.63624,-2.16132 -1.02425,-0.7702 -3.457,-2.975 -3.0018,-3.64018 0.45519,-0.66516 1.56543,-1.35445 2.73515,-2.12254 1.16972,-0.76811 3.86984,-2.33631 5.3456,-3.59002 1.47576,-1.25372 2.7334,-2.47754 3.4042,-3.48323 0.67079,-1.00567 0.9358,-2.14286 -0.28206,-2.7388 -1.21786,-0.59597 -1.84092,-0.39835 -4.4486,0.0225 -2.60769,0.42097 -4.8218,1.10142 -8.46858,1.9005 -3.64678,0.79905 -7.82786,2.49393 -10.97221,3.07304 -3.14439,0.5791 -4.3363,0.83756 -8.5197,0.95691 -4.1834,0.11935 -7.15938,-0.35864 -8.95468,-0.91763 -1.7953,-0.55899 -2.64147,-1.55556 -2.60415,-2.17667 3.90737,-1.58574 7.9469,-3.2841 11.38348,-5.04009 z" id="path1887-1-3-7-7-6-0-1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const InstagramIcon = ({ id = "ig-gradient" }) => (
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 ig-icon" style={{ "--ig-fill": `url(#${id})` }}>
|
||||
<defs>
|
||||
<linearGradient id={id} x1="0%" y1="100%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stopColor="#FEDA75" />
|
||||
<stop offset="25%" stopColor="#FA7E1E" />
|
||||
<stop offset="50%" stopColor="#D62976" />
|
||||
<stop offset="75%" stopColor="#962FBF" />
|
||||
<stop offset="100%" stopColor="#4F5BD5" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const FacebookIcon = () => (
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 fb-icon" fill="currentColor">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const DiscordIcon = () => (
|
||||
<svg viewBox="0 0 24 24" className="w-6 h-6 ds-icon" fill="currentColor">
|
||||
<path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057c.001.022.015.04.033.05a19.81 19.81 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
{/* 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 }) {
|
||||
return (
|
||||
<>
|
||||
{text.split("").map((char, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="float-anim"
|
||||
style={{ animationDelay: `${-i * step}s` }}
|
||||
>
|
||||
{char === " " ? "\u00A0" : char}
|
||||
</span>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
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 => ({
|
||||
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 ─────────────────────────────────────────────── */}
|
||||
<section id="hero" className="relative min-h-screen flex flex-col items-center justify-center text-center overflow-hidden pt-20" style={{ background: "linear-gradient(135deg, #042f3a 0%, #004552 40%, #004c52 70%, #0e7a5a 100%)", opacity: 1 }}>
|
||||
{/* Floating doves */}
|
||||
<div className="absolute top-20 right-16 opacity-30 float-anim"><DoveSVG className="w-20 h-16"/></div>
|
||||
<div className="absolute top-32 right-36 opacity-20 float-anim" style={{ animationDelay: "1s" }}><DoveSVG className="w-10 h-8"/></div>
|
||||
<div className="absolute bottom-32 left-16 opacity-25 float-anim" style={{ animationDelay: "2s" }}><DoveSVG className="w-16 h-12"/></div>
|
||||
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-6">
|
||||
<h1 className="text-5xl md:text-7xl font-900 text-white leading-tight mb-4" style={{ fontFamily: "Poppins,sans-serif" }}>
|
||||
Next Generation<br />
|
||||
<span className="grad-hero-text">
|
||||
<WaveText text="of Unity" step={0.1} />
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-white/70 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed" style={{ fontFamily: "League Spartan,sans-serif" }}>
|
||||
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.
|
||||
</p>
|
||||
<p className="text-white/90 text-lg md:text-xl max-w-2xl mx-auto leading-relaxed mb-10" style={{ fontFamily: "League Spartan,sans-serif", fontWeight: "bold"}}>
|
||||
We are the future of the Unity Movement.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-4 justify-center">
|
||||
<a href="https://www.instagram.com/nextgenerationunity" className="px-8 py-4 rounded-full text-white font-700 text-lg transition-all duration-300 hover:scale-105 hover:shadow-xl shadow-lg" style={{ background: "linear-gradient(135deg, #008fa8, #88b668)", fontFamily: "Poppins,sans-serif" }}>
|
||||
Follow Us on Instagram
|
||||
</a>
|
||||
<a href="#events" className="px-8 py-4 rounded-full font-700 text-lg transition-all duration-300 hover:scale-105" style={{ border: "2px solid rgba(92, 231, 255,0.6)", color: "#5ce7ff", fontFamily: "Poppins,sans-serif" }}>
|
||||
Attend a Retreat
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* #About ─────────────────────────────────────── */}
|
||||
<section id="about" className="py-24 px-6" style={{ background: "#f0fcfd" }}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]">A Ministry Designed For<br />Young Adults</h2>
|
||||
<p className="mt-4 text-[#0a5260]/70 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||
NGU exists to connect young adults across Unity ministries and create spaces for authentic spiritual exploration, community, and conscious living.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ 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) => (
|
||||
<div key={card.title} className="p-8 rounded-2xl transition-all duration-300 hover:-translate-y-1 hover:shadow-xl" style={{ background: "white", border: "1px solid rgba(19,139,160,0.15)" }}>
|
||||
<div className="text-4xl mb-4">{card.icon}</div>
|
||||
<h3 className="font-700 text-xl text-[#073d4a] mb-3">{card.title}</h3>
|
||||
<p className="text-[#0a5260]/70 leading-relaxed text-sm">{card.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{/* #Events ─────────────────────────────────────────────── */}
|
||||
<section id="events" className="py-24 overflow-hidden" style={{ background: "#eef9fb" }}>
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]">
|
||||
{isPast ? "Past Events" : "Upcoming Events"}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Carousel — full-bleed so neighbors can peek in from the screen edges */}
|
||||
<div className="relative mb-6">
|
||||
{/* Masked viewport: everything outside the fade gradient is invisible */}
|
||||
<div
|
||||
className="overflow-hidden"
|
||||
style={{ maskImage: EDGE_FADE, WebkitMaskImage: EDGE_FADE }}
|
||||
>
|
||||
{/* Sliding track */}
|
||||
<div
|
||||
className="flex items-stretch transition-transform duration-500 ease-out"
|
||||
style={{
|
||||
transform: `translateX(calc(50% - ${index + 0.5} * ${SLIDE}))`,
|
||||
}}
|
||||
>
|
||||
{EVENTS.map((ev, i) => {
|
||||
const active = i === index;
|
||||
const past = ev.status === "past";
|
||||
const color = ev.color || TEAL;
|
||||
return (
|
||||
<div
|
||||
key={ev.id}
|
||||
className="shrink-0"
|
||||
style={{
|
||||
width: SLIDE,
|
||||
padding: `0 calc(${GAP} / 2)`,
|
||||
cursor: active ? "default" : "pointer",
|
||||
}}
|
||||
onClick={() => !active && setIndex(i)}
|
||||
aria-hidden={!active}
|
||||
>
|
||||
<div
|
||||
className="rounded-3xl text-black overflow-hidden shadow-2xl h-full"
|
||||
style={{
|
||||
border: `1px solid ${color}`,
|
||||
background: ev.gradient,
|
||||
filter: past ? "saturate(0.75)" : "none",
|
||||
pointerEvents: active ? "auto" : "none",
|
||||
}}
|
||||
>
|
||||
<div className="p-10">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 mb-4">
|
||||
<div className="md:col-span-2">
|
||||
<img
|
||||
src={nguLogo_WhiteBG}
|
||||
alt="Next Generation of Unity"
|
||||
className="h-15 w-auto mb-6"
|
||||
/>
|
||||
<h3 className="text-4xl font-900">{ev.title}</h3>
|
||||
{ev.theme && (
|
||||
<p className="text-2xl font-300 font-bold">"{ev.theme}"</p>
|
||||
)}
|
||||
<p className="text-2xl">{ev.date}</p>
|
||||
<p className="text-2xl">{ev.location}</p>
|
||||
</div>
|
||||
<div className="md:col-span-1 flex justify-end items-start">
|
||||
{ev.image && (
|
||||
<img src={ev.image} alt={ev.title} className="h-60" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{ev.desc_a && <p className="mb-2 leading-relaxed">{ev.desc_a}</p>}
|
||||
{ev.desc_b && <p className="leading-relaxed">{ev.desc_b}</p>}
|
||||
|
||||
{ev.links.length > 0 ? (
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 mt-8">
|
||||
{ev.links.map(item => (
|
||||
<a
|
||||
key={item.label}
|
||||
href={item.link}
|
||||
className="py-2.5 px-3 rounded-xl font-700 transition-all duration-200 hover:scale-105 text-center"
|
||||
style={{ border: `1px solid ${color}` }}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
past ? (
|
||||
<p className="mt-8 text-center font-600" style={{ color:TEAL }}>
|
||||
This event has concluded, thank you to everyone who joined us!
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
<p className="mt-8 text-center font-600" style={{ color:TEAL }}>
|
||||
Registration has not opened yet, follow our instagram for more details.
|
||||
</p>
|
||||
<a href="https://instagram.com/nextgenerationunity" target="_blank" rel="noopener noreferrer" className="ig-link mt-4 w-fit mx-auto flex items-center justify-center gap-3 py-3 px-4 rounded-xl font-700 transition-all duration-200 hover:scale-[1.02]" style={{ border: `1px solid ${color}`, color }}>
|
||||
<InstagramIcon id={`ig-${ev.id}`} />
|
||||
@nextgenerationunity
|
||||
</a>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrows — outside the masked element so they never fade */}
|
||||
<button
|
||||
onClick={prev}
|
||||
disabled={index === 0}
|
||||
aria-label="Previous event"
|
||||
className="absolute left-2 md:left-6 top-1/2 -translate-y-1/2 z-10 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-700 shadow-lg transition-all duration-200 hover:scale-110 disabled:hover:scale-100"
|
||||
style={arrowStyle(index > 0)}
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
onClick={next}
|
||||
disabled={index === EVENTS.length - 1}
|
||||
aria-label="Next event"
|
||||
className="absolute right-2 md:right-6 top-1/2 -translate-y-1/2 z-10 h-12 w-12 rounded-full flex items-center justify-center text-2xl font-700 shadow-lg transition-all duration-200 hover:scale-110 disabled:hover:scale-100"
|
||||
style={arrowStyle(index < EVENTS.length - 1)}
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="max-w-6xl mx-auto px-6">
|
||||
{/* Dot indicators */}
|
||||
<div className="flex justify-center gap-2 mb-10">
|
||||
{EVENTS.map((e, i) => (
|
||||
<button
|
||||
key={e.id}
|
||||
onClick={() => setIndex(i)}
|
||||
aria-label={`Go to ${e.title}`}
|
||||
className="h-2.5 rounded-full transition-all duration-200"
|
||||
style={{
|
||||
width: i === index ? "1.5rem" : "0.625rem",
|
||||
background: i === index ? currentColor : "#b8c6c9",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-[#138ba0] font-600 text-sm">
|
||||
· More events coming soon, stay connected for announcements ·
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{/* #Connect -------------------------------------------- */}
|
||||
<section id="connect" className="py-24 px-6" style={{ background: "white" }}>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]" style={{ fontFamily: "Poppins,sans-serif" }}>
|
||||
Ready to Connect?
|
||||
</h2>
|
||||
<p className="mt-4 text-[#0a5260]/70 max-w-xl mx-auto text-xl" style={{ fontFamily: "League Spartan,sans-serif" }}>Find your place in the NGU community</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-3xl mx-auto">
|
||||
{[
|
||||
{ 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 => (
|
||||
<a key={item.label} href={item.link} className="flex items-center gap-5 p-6 rounded-2xl text-left transition-all duration-300 hover:-translate-y-1 hover:shadow-xl group" style={{ background: "#073d4a", border: "1px solid rgba(45,200,224,0.2)" }}>
|
||||
<div>
|
||||
<p className="text-white font-700 mb-1" style={{ fontFamily: "Poppins,sans-serif" }}>{item.label}</p>
|
||||
<p className="text-white/80 leading-snug" style={{ fontFamily: "League Spartan,sans-serif" }}>{item.desc}</p>
|
||||
</div>
|
||||
{/* Arrow */}
|
||||
<svg className="w-5 h-5 text-[#10d48a] ml-auto flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd"/>
|
||||
</svg>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-10 text-center">
|
||||
<div className="inline-flex flex-wrap justify-center gap-4">
|
||||
<a
|
||||
href="https://ngu.churchcenter.com/calendar?view=gallery"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 px-8 py-4 rounded-full text-white font-700 text-lg transition-all duration-300 hover:scale-105"
|
||||
style={{ background: "linear-gradient(135deg, #138ba0, #10d48a)", fontFamily: "Outfit,sans-serif" }}
|
||||
>
|
||||
📅 View NGU Calendar
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
<polyline points="15 3 21 3 21 9" />
|
||||
<line x1="10" y1="14" x2="21" y2="3" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button
|
||||
onClick={() => setShowCalendar(!showCalendar)}
|
||||
className="inline-flex items-center gap-2 px-8 py-4 rounded-full font-700 text-lg transition-all duration-300 hover:scale-105"
|
||||
style={{ border: "2px solid #138ba0", color: "#138ba0", background: "transparent", fontFamily: "Outfit,sans-serif" }}
|
||||
>
|
||||
{showCalendar ? "▲ Hide Calendar" : "▼ Show Calendar Here"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showCalendar && (
|
||||
<div className="mt-8 mx-auto max-w-4xl rounded-2xl shadow-lg p-6" style={{ border: "2px solid #138ba0" }}>
|
||||
<iframe
|
||||
src="https://ngu.churchcenter.com/calendar?embed=true&view=month"
|
||||
title="NGU Calendar"
|
||||
className="w-full planning-center-calender-embed"
|
||||
style={{ height: "700px", border: "none" }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue