v1.1 - added navigation

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ngu-web-app",
+  "name": "figma-make-app",
   "private": true,
   "version": "1.0.0",
   "type": "module",
@@ -13,7 +13,8 @@
     "@fontsource/montserrat": "^5.3.0",
     "@fontsource/poppins": "^5.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.18.4"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.0",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.2.4(react@19.2.4)
+      react-router-dom:
+        specifier: ^7.18.4
+        version: 7.18.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.0.0
@@ -340,6 +343,10 @@ packages:
       babel-plugin-react-compiler:
         optional: true
 
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -471,6 +478,23 @@ packages:
     peerDependencies:
       react: ^19.2.4
 
+  react-router-dom@7.18.4:
+    resolution: {integrity: sha512-yrfmJHIpDG7taCpqKjT1G5B6q3O2K+RN8/fgNf0lTjCwiPbQ0ei6vXX9ZjQR+7ld8Tr7Z5xmyMnZ8YJrphWQUw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+
+  react-router@7.18.4:
+    resolution: {integrity: sha512-PUPQcMhMGRAslLcvtlPz/kmzBEWPhLdgLFrL7pLNepBL6dX0lWj4WD2cUYVgYCuT3jxvghYFg81cDTj44DhetQ==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react@19.2.4:
     resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
@@ -483,6 +507,9 @@ packages:
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -767,6 +794,8 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-rc.7
       vite: 8.0.5(@types/node@22.19.17)(jiti@2.6.1)
 
+  cookie@1.1.1: {}
+
   csstype@3.2.3: {}
 
   detect-libc@2.1.2: {}
@@ -868,6 +897,20 @@ snapshots:
       react: 19.2.4
       scheduler: 0.27.0
 
+  react-router-dom@7.18.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-router: 7.18.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
+  react-router@7.18.4(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.4
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.4(react@19.2.4)
+
   react@19.2.4: {}
 
   rolldown@1.0.0-rc.12:
@@ -893,6 +936,8 @@ snapshots:
 
   scheduler@0.27.0: {}
 
+  set-cookie-parser@2.7.2: {}
+
   source-map-js@1.2.1: {}
 
   tailwindcss@4.2.2: {}

src/App.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import nguLogo from "@/NGU_Logo.svg";
 import fallLogo from "@/Fall Logo.svg";
 import nguLogo_WhiteBG from "@/NGU_Logo_WhiteBG.svg";
@@ -15,13 +15,10 @@ const DoveSVG = ({ className = "" }: { className?: string }) => (
   </svg>
 );
 
-const InstagramIcon = () => (
+const InstagramIcon = ({ id = "ig-gradient" }) => (
-  <svg
+  <svg viewBox="0 0 24 24" className="w-6 h-6 ig-icon" style={{ "--ig-fill": `url(#${id})` }}>
-    viewBox="0 0 24 24"
-    className="w-6 h-6 ig-icon"
-  >
     <defs>
-      <linearGradient id="ig-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
+      <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" />
@@ -52,11 +49,22 @@ const Social_Links = [
   { label: "Discord",   href: "https://discord.com/invite/AtngzpqaX5",    Icon: DiscordIcon },
 ]
 
-const Nav_Links = [
+const PAGE_LINKS = [
-  { label: "About", href: "#about"},
+  { label: "Home", tab: "main" },
-  { label: "Events",  href: "#events"},
+  { label: "Other", tab: "other" },
-  { label: "Connect",   href: "#connect"},
+  { label: "Resources", tab: "resources" },
-]
+];
+ 
+
+const PAGE_SECTIONS = {
+  main: [
+    { label: "#About", href: "#about" },
+    { label: "#Events", href: "#events" },
+    { label: "#Connect", href: "#connect" },
+  ],
+  other: [],
+  resources: [],
+};
 
 const Footer_Links = [
   { label: "Privacy Policy", href: "#"},
@@ -64,6 +72,99 @@ const Footer_Links = [
   { 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 (
@@ -81,51 +182,219 @@ function WaveText({ text, baseDelay = 0, step = 0.1 }) {
   );
 }
 
+
+
 export default function App() {
+  {/* NAV functions*/}
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const [activeTab, setActiveTab] = useState("main");
+  const [activeSection, setActiveSection] = useState(null);
+  const sections = PAGE_SECTIONS[activeTab] ?? [];
+  const activePage = PAGE_LINKS.find((p) => p.tab === activeTab);
 
+  const goToPage = (tab) => {
+    setActiveTab(tab);
+    setActiveSection(null);
+    setMobileMenuOpen(false);
+    window.scrollTo({ top: 0 });
+  };
+ 
+  // Highlight the section currently in view, so the second tier
+  // visibly tracks position within the page.
+  useEffect(() => {
+    if (sections.length === 0) return;
+ 
+    const targets = sections
+      .map((s) => document.querySelector(s.href))
+      .filter(Boolean);
+    if (targets.length === 0) return;
+ 
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
+        if (visible) setActiveSection(`#${visible.target.id}`);
+      },
+      { rootMargin: "-120px 0px -60% 0px", threshold: 0 }
+    );
+ 
+    targets.forEach((t) => observer.observe(t));
+    return () => observer.disconnect();
+  }, [activeTab]);
+
+  {/* 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 (
     <div className="min-h-screen overflow-x-hidden">
 
       {/* ── NAV ─────────────────────────────────────────────── */}
-      <nav className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-6 py-4 backdrop-blur-md" style={{ background: "rgba(0, 69, 82,0.92)", borderBottom: "1px solid rgba(45,200,224,0.15)" }}>
+      <header className="fixed top-0 left-0 right-0 z-50 backdrop-blur-md">
-        <div className="flex items-center">
-          <a href="/" aria-label="Next Generation of Unity home" className="inline-block">
-            <img src={nguLogo} alt="Next Generation of Unity" className="h-10 w-auto" />
-          </a>
-        </div>
  
-        {/* Desktop links */}
+        {/* Tier 1 — site navigation */}
-        <div className="hidden md:flex items-center gap-8">
+        <nav
-          {Nav_Links.map((link) => (
+          className="flex items-center justify-between px-6 py-4"
-            <a key={link.label} href={link.href} className="text-white/90 hover:text-[#aac992] text-sm font-600 transition-colors duration-200">
+          aria-label="Site"
-              {link.label}
+          style={{ background: "rgba(0, 69, 82,0.92)" }}
+        >
+          <div className="flex items-center gap-8">
+            <a href="/" aria-label="Next Generation of Unity home" className="inline-block">
+              <img src={nguLogo} alt="Next Generation of Unity" className="h-10 w-auto" />
             </a>
-          ))}
-          <a href="https://ngu.churchcenter.com/giving" className="px-5 py-2 rounded-full text-sm font-700 text-white transition-all duration-200 hover:scale-105 font-bold leading-relaxed" style={{ background: "linear-gradient(135deg, #008fa8, #88b668)" }}>
-            Give
-          </a>
-        </div>
  
-        {/* Mobile menu btn */}
+            <div className="hidden md:flex items-center gap-6">
-        <button className="md:hidden text-white p-2" onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
+              {PAGE_LINKS.map((page) => (
-          <div className="w-6 h-0.5 bg-white mb-1.5 transition-all"/>
+                <button
-          <div className="w-6 h-0.5 bg-white mb-1.5"/>
+                  key={page.tab}
-          <div className="w-6 h-0.5 bg-white"/>
+                  onClick={() => goToPage(page.tab)}
-        </button>
+                  aria-current={activeTab === page.tab ? "page" : undefined}
-      </nav>
+                  className={`text-base pb-1 transition-colors duration-200 border-b-2 ${
+                    activeTab === page.tab
+                      ? "text-white font-bold border-[#aac992]"
+                      : "text-white/75 hover:text-white font-bold border-transparent"
+                  }`}
+                >
+                  {page.label}
+                </button>
+              ))}
+            </div>
+          </div>
+ 
+          <div className="flex items-center gap-8">
+            <a
+              href="https://ngu.churchcenter.com/giving"
+              className="hidden md:inline-block px-5 py-2 rounded-full text-sm text-white transition-all duration-200 hover:scale-105 font-bold leading-relaxed"
+              style={{ background: "linear-gradient(135deg, #008fa8, #88b668)" }}
+            >
+              Give
+            </a>
+ 
+            <button
+              className="md:hidden text-white p-2"
+              aria-label="Open menu"
+              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            >
+              <div className="w-6 h-0.5 bg-white mb-1.5 transition-all" />
+              <div className="w-6 h-0.5 bg-white mb-1.5" />
+              <div className="w-6 h-0.5 bg-white" />
+            </button>
+          </div>
+        </nav>
+ 
+        {/* Tier 2 — sections of the current page */}
+        {sections.length > 0 && (
+          <nav
+            className="hidden md:flex items-center justify-end gap-6 px-6 py-2"
+            aria-label={`On this page: ${activePage?.label}`}
+            style={{
+              background: "rgba(0, 47, 57, 0.92)",
+              borderBottom: "1px solid rgba(45,200,224,0.15)",
+            }}
+          >
+            {/* Anchors the row to its parent page */}
+            <span className="mr-auto text-xs text-white/50">
+              {activePage?.label} 
+            </span>
+ 
+            {sections.map((section) => (
+              <a
+                key={section.href}
+                href={section.href}
+                aria-current={activeSection === section.href ? "location" : undefined}
+                className={`text-sm transition-colors duration-200 ${
+                  activeSection === section.href
+                    ? "text-[#aac992]"
+                    : "text-white/70 hover:text-[#aac992]"
+                }`}
+              >
+                {section.label}
+              </a>
+            ))}
+          </nav>
+        )}
+      </header>
+ 
+      {/* Keeps page content clear of the fixed header */}
+      <div aria-hidden className={sections.length > 0 ? "h-[6.75rem]" : "h-[4.5rem]"} />
  
       {/* Mobile menu */}
       {mobileMenuOpen && (
-        <div className="fixed inset-0 z-40 flex flex-col items-center justify-center" style={{ background: "rgba(7,61,74,0.97)" }}>
+        <div
-          <button className="absolute top-5 right-6 text-white text-3xl font-300" onClick={() => setMobileMenuOpen(false)}>×</button>
+          className="fixed inset-0 z-40 flex flex-col items-center justify-center overflow-y-auto py-16"
-          {Nav_Links.map((link) => (
+          style={{ background: "rgba(7,61,74,0.97)" }}
-            <a key={link.label} href={link.href} className="text-white text-2xl font-700 py-3 hover:text-[#10d48a] transition-colors" onClick={() => setMobileMenuOpen(false)}>
+        >
-              {link.label}
+          <button
-            </a>
+            className="absolute top-5 right-6 text-white text-3xl"
-          ))}
+            aria-label="Close menu"
-          <a href="https://ngu.churchcenter.com/giving" className="mt-6 px-8 py-3 rounded-full text-white text-lg font-700 font-bold" style={{ background: "linear-gradient(135deg, #138ba0, #10d48a)" }} onClick={() => setMobileMenuOpen(false)}>
+            onClick={() => setMobileMenuOpen(false)}
+          >
+            ×
+          </button>
+ 
+          <div className="w-64">
+            {PAGE_LINKS.map((page) => {
+              const pageSections = PAGE_SECTIONS[page.tab] ?? [];
+              const isActive = activeTab === page.tab;
+ 
+              return (
+                <div key={page.tab}>
+                  <button
+                    onClick={() => goToPage(page.tab)}
+                    aria-current={isActive ? "page" : undefined}
+                    className={`block w-full text-left text-2xl font-bold py-3 transition-colors ${
+                      isActive ? "text-[#aac992]" : "text-white hover:text-[#10d48a]"
+                    }`}
+                  >
+                    {page.label}
+                  </button>
+ 
+                  {/* Sections nest under the page they belong to */}
+                  {isActive && pageSections.length > 0 && (
+                    <div
+                      className="ml-3 pl-4 mb-2 flex flex-col"
+                      style={{ borderLeft: "1px solid rgba(45,200,224,0.35)" }}
+                    >
+                      {pageSections.map((section) => (
+                        <a
+                          key={section.href}
+                          href={section.href}
+                          className="text-white/80 text-lg py-2 hover:text-[#10d48a] transition-colors"
+                          onClick={() => setMobileMenuOpen(false)}
+                        >
+                          {section.label}
+                        </a>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+ 
+          <a
+            href="https://ngu.churchcenter.com/giving"
+            className="mt-6 px-8 py-3 rounded-full text-white text-lg font-bold"
+            style={{ background: "linear-gradient(135deg, #138ba0, #10d48a)" }}
+            onClick={() => setMobileMenuOpen(false)}
+          >
             Give
           </a>
         </div>
@@ -164,7 +433,7 @@ export default function App() {
           </div>
         </section>
 
-      {/* ── ABOUT/INFO ─────────────────────────────────────── */}
+      {/* #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">
@@ -189,51 +458,162 @@ export default function App() {
           </div>
         </div>
       </section>
-      {/* ── EVENTS ─────────────────────────────────────────────── */}
+      {/* #Events ─────────────────────────────────────────────── */}
-      <section id="events" className="py-24 px-6" style={{ background: "#eef9fb" }}>
+      <section id="events" className="py-24 overflow-hidden" style={{ background: "#eef9fb" }}>
-        <div className="max-w-6xl mx-auto">
+      <div className="max-w-6xl mx-auto px-6">
-          <div className="text-center mb-16">
+        <div className="text-center mb-16">
-            <h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]">
+          <h2 className="mt-4 text-4xl md:text-5xl font-800 text-[#138ba0]">
-              Upcoming Events
+            {isPast ? "Past Events" : "Upcoming Events"}
-            </h2>
+          </h2>
-          </div>
-
-          {/* Featured event card */}
-          <div className="rounded-3xl text-black overflow-hidden shadow-2xl max-w-3xl mx-auto mb-10" style={{  border: "1px solid #b89421", background: "linear-gradient(150deg, rgba(178, 150, 42, 0.45), rgba(230, 200, 120, 0.15) 65%, rgba(255, 255, 255, 0.28))" }}>
-            <div className="p-10">
-              <div className="grid grid-cols-2 mb-4">
-                <div className="">
-                  <img src={nguLogo_WhiteBG} alt="Next Generation of Unity" className="h-15 w-auto mb-6" />
-                  <h3 className="text-4xl md:text-4xl font-900">Fall Retreat 2026</h3>
-                  <p className="text-2xl font-300 font-bold">"Consciousness Creates"</p>
-                  <p className="text-2xl">November 12-15th, 2026</p>
-                  <p className="text-2xl">Unity Village, MO</p>
-                </div>
-                <div className="flex justify-end">
-                  <img src={fallLogo} alt="Next Generation of Unity" className="h-60" />
-                </div>
-              </div>
-              <p className="mb-2 leading-relaxed">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 your highest self.</p>
-              <p className="mb-8 leading-relaxed">Registration starting at $150, and $75 loding cost.</p>
-
-              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-                {[
-                { label: "Register Now!", link:"https://ngu.churchcenter.com/registrations/events/3761999"},
-                { label: "Small Group Leader Application", link:"https://ngu.churchcenter.com/people/forms/1285944"},
-                { label: "Scholarship Application", link:"https://ngu.churchcenter.com/people/forms/1261992"},
-                ].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 #b89421" }}>
-                    {item.label}
-                  </a>
-                ))}
-              </div>
-            </div>
-          </div>
-
-          <p className="text-center text-[#138ba0] font-600 text-sm">· More events coming soon, stay connected for announcements ·</p>
         </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 / SOCIALS ─────────────────────────────────── */}
+      {/* #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">
@@ -263,17 +643,48 @@ export default function App() {
             ))}
           </div>
 
-          
           <div className="mt-10 text-center">
-            <a href="https://ngu.churchcenter.com/calendar?view=gallery" 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" }}>
+            <div className="inline-flex flex-wrap justify-center gap-4">
-              📅 View NGU Calendar
+              <a
-            </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>
 
       {/* ── FOOTER ─ Using #042f3a for BG ───────────────────────────────────── */}
-      <footer className="py-16 px-6" style={{ background: "linear-gradient(135deg, #042f3a 0%, #073d4a 100%)" }}>
+      <footer className="py-16 px-6" style={{ background: "rgba(0, 47, 58, 0.92)" }}>
         <div className="max-w-6xl mx-auto">
           <div className="flex flex-col md:flex-row items-center justify-between gap-8 mb-12">
             <div className="flex items-center gap-4">
@@ -281,9 +692,9 @@ export default function App() {
             </div>
 
             <div className="flex gap-4">
-              {Social_Links.map(({ label, href, Icon}) => (
+              {Social_Links.map(({label, href, Icon}) => (
-                <a key={label} href={href} className="w-10 h-10 rounded-full flex items-center justify-center text-white/70 transition-colors" style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.15)" }}>
+                <a key={label} href={href} className="footer-icons w-10 h-10 rounded-full flex items-center justify-center text-white/70 transition-colors" style={{ background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.15)" }}>
-                  <Icon />
+                   {label == "Instagram" ? (<InstagramIcon id={`ig-footer`} />) : (<Icon />)}
                 </a>
               ))}
             </div>

src/index.css

@@ -65,6 +65,7 @@ h1, h2, h3, h4, h5, h6 {
 
 
 .ig-icon { fill: currentColor; transition: fill 200ms ease; }
-.ig-icon:hover { fill: url(#ig-gradient); }
+.ig-link:hover .ig-icon { fill: var(--ig-fill); }
+.footer-icons:hover .ig-icon { fill: var(--ig-fill); }
 .fb-icon:hover { fill: #0862f7; }
-.ds-icon:hover { fill: #5661ea; }
+.ds-icon:hover { fill: #5865f1; }