{"id":20411,"date":"2025-12-26T15:35:30","date_gmt":"2025-12-26T10:05:30","guid":{"rendered":"https:\/\/demo.vleafy.com\/ibc2\/?page_id=20411"},"modified":"2025-12-29T07:53:44","modified_gmt":"2025-12-29T02:23:44","slug":"planning-and-preparation","status":"publish","type":"page","link":"https:\/\/demo.vleafy.com\/ibc2\/planning-and-preparation\/","title":{"rendered":"Planning and Preparation"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"20411\" class=\"elementor elementor-20411\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc3d979 e-flex e-con-boxed e-con e-parent \" data-id=\"bc3d979\" data-element_type=\"container\">\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-980b69a elementor-widget elementor-widget-heading\" data-id=\"980b69a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Planning &amp; Preparation<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t<div class=\"elementor-element elementor-element-ba1cf42 e-flex e-con-boxed e-con e-parent \" data-id=\"ba1cf42\" data-element_type=\"container\">\t\t\t<div class=\"e-con-inner\">\r\n\t\t\t\t<div class=\"elementor-element elementor-element-9aee839 elementor-widget elementor-widget-html\" data-id=\"9aee839\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n.event-timeline-section {\r\n    padding: 60px 20px;\r\n    background: #0b0b1c;\r\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n}\r\n\r\n.event-timeline-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n}\r\n\r\n.event-timeline-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 30px;\r\n}\r\n\r\n.event-timeline-item {\r\n    background: linear-gradient(180deg, #35244a 0%, #17112b 100%);\r\n    border-radius: 20px;\r\n    border: 1px solid rgba(138, 53, 255, 0.2);\r\n    padding: 30px;\r\n    transition: all 0.3s ease;\r\n    position: relative;\r\n    overflow: hidden;\r\n}\r\n\r\n.event-timeline-item::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0 0 auto 0;\r\n    height: 3px;\r\n    background: linear-gradient(118deg, #8a35ff 0%, #f2295b 100%);\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n}\r\n\r\n.event-timeline-item:hover {\r\n    border-color: rgba(138, 53, 255, 0.4);\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 10px 30px rgba(138, 53, 255, 0.2);\r\n}\r\n\r\n.event-timeline-item:hover::before {\r\n    opacity: 1;\r\n}\r\n\r\n.event-header {\r\n    display: flex;\r\n    flex-wrap: wrap;\r\n    align-items: center;\r\n    gap: 20px;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.event-date {\r\n    padding: 10px 18px;\r\n    background: rgba(138, 53, 255, 0.15);\r\n    border-radius: 30px;\r\n    color: #FF69B4;\r\n    font-size: 0.95rem;\r\n    font-weight: 600;\r\n    border: 1px solid rgba(138, 53, 255, 0.3);\r\n}\r\n\r\n.event-date::before {\r\n    content: '\ud83d\udcc5';\r\n    margin-right: 6px;\r\n}\r\n\r\n.event-title {\r\n    font-size: 1.5rem;\r\n    color: #fff;\r\n    font-weight: 600;\r\n    flex: 1;\r\n}\r\n\r\n.event-carousel-wrapper {\r\n    position: relative;\r\n}\r\n\r\n.event-carousel {\r\n    display: flex;\r\n    gap: 15px;\r\n    overflow-x: hidden;\r\n    scroll-behavior: smooth;\r\n    padding: 10px 0;\r\n}\r\n\r\n.event-photo {\r\n    width: 280px;\r\n    height: 200px;\r\n    border-radius: 12px;\r\n    overflow: hidden;\r\n    cursor: pointer;\r\n    border: 2px solid rgba(138, 53, 255, 0.2);\r\n    transition: 0.3s;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.event-photo:hover {\r\n    transform: scale(1.05);\r\n    border-color: rgba(138, 53, 255, 0.6);\r\n}\r\n\r\n.event-photo img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n}\r\n\r\n.event-nav-button {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    background: linear-gradient(118deg, #8a35ff, #f2295b);\r\n    border: none;\r\n    color: #fff;\r\n    font-size: 1.2rem;\r\n    cursor: pointer;\r\n    z-index: 2;\r\n}\r\n\r\n.event-nav-button.prev { left: -15px; }\r\n.event-nav-button.next { right: -15px; }\r\n\r\n\/* Lightbox *\/\r\n.event-lightbox {\r\n    display: none;\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(0,0,0,0.95);\r\n    z-index: 9999;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.event-lightbox.active { display: flex; }\r\n\r\n.event-lightbox-content {\r\n    position: relative;\r\n    max-width: 90vw;\r\n    max-height: 90vh;\r\n}\r\n\r\n.event-lightbox img {\r\n    max-width: 100%;\r\n    max-height: 90vh;\r\n}\r\n\r\n.event-lightbox-close,\r\n.event-lightbox-nav {\r\n    position: absolute;\r\n    background: linear-gradient(118deg, #8a35ff, #f2295b);\r\n    border: none;\r\n    color: #fff;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n}\r\n\r\n.event-lightbox-close {\r\n    top: -50px;\r\n    right: 0;\r\n    width: 40px;\r\n    height: 40px;\r\n    font-size: 1.5rem;\r\n}\r\n\r\n.event-lightbox-nav {\r\n    top: 50%;\r\n    width: 50px;\r\n    height: 50px;\r\n    font-size: 1.5rem;\r\n    transform: translateY(-50%);\r\n}\r\n\r\n.event-lightbox-nav.prev { left: -70px; }\r\n.event-lightbox-nav.next { right: -70px; }\r\n<\/style>\r\n\r\n\r\n\r\n<section class=\"event-timeline-section\">\r\n    <div class=\"event-timeline-container\">\r\n        <div class=\"event-timeline-list\" id=\"eventTimelineList\"><\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n<div class=\"event-lightbox\" id=\"eventLightbox\">\r\n    <div class=\"event-lightbox-content\">\r\n        <button class=\"event-lightbox-close\" id=\"lightboxClose\">\u00d7<\/button>\r\n        <button class=\"event-lightbox-nav prev\" id=\"lightboxPrev\">\u2039<\/button>\r\n        <img decoding=\"async\" id=\"lightboxImage\" src=\"\" alt=\"\">\r\n        <button class=\"event-lightbox-nav next\" id=\"lightboxNext\">\u203a<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n\r\n<script>\r\nconst eventData = [\r\n    {\r\n        date: \"07 Oct 2025\",\r\n        title: \"Title\",\r\n        photos: [\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.48.57-PM.jpeg\",\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.49.07-PM.jpeg\",\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.49.08-PM.jpeg\",\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.48.52-PM-1.jpeg\"\r\n        ]\r\n    },\r\n    {\r\n        date: \"08 Oct 2025\",\r\n        title: \"Title\",\r\n        photos: [\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.48.57-PM.jpeg\",\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.49.07-PM.jpeg\",\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.49.08-PM.jpeg\",\r\n            \"https:\/\/demo.vleafy.com\/ibc2\/wp-content\/uploads\/2025\/10\/WhatsApp-Image-2025-10-07-at-6.48.52-PM-1.jpeg\"\r\n        ]\r\n    }\r\n];\r\n\r\nconst timeline = document.getElementById(\"eventTimelineList\");\r\nlet currentPhotos = [];\r\nlet currentIndex = 0;\r\n\r\nfunction renderEvents() {\r\n    timeline.innerHTML = \"\";\r\n\r\n    eventData.forEach((event, i) => {\r\n        const div = document.createElement(\"div\");\r\n        div.className = \"event-timeline-item\";\r\n        div.innerHTML = `\r\n            <div class=\"event-header\">\r\n                <div class=\"event-date\">${event.date}<\/div>\r\n                <div class=\"event-title\">${event.title}<\/div>\r\n            <\/div>\r\n            <div class=\"event-carousel-wrapper\">\r\n                <button class=\"event-nav-button prev\" data-i=\"${i}\">\u2039<\/button>\r\n                <div class=\"event-carousel\" id=\"carousel-${i}\">\r\n                    ${event.photos.map((p, j) => `\r\n                        <div class=\"event-photo\" data-i=\"${i}\" data-j=\"${j}\">\r\n                            <img decoding=\"async\" src=\"${p}\" alt=\"\">\r\n                        <\/div>`).join(\"\")}\r\n                <\/div>\r\n                <button class=\"event-nav-button next\" data-i=\"${i}\">\u203a<\/button>\r\n            <\/div>`;\r\n        timeline.appendChild(div);\r\n    });\r\n\r\n    document.querySelectorAll(\".event-nav-button\").forEach(btn => {\r\n        btn.onclick = () => {\r\n            const c = document.getElementById(`carousel-${btn.dataset.i}`);\r\n            c.scrollBy({ left: btn.classList.contains(\"next\") ? 300 : -300, behavior: \"smooth\" });\r\n        };\r\n    });\r\n\r\n    document.querySelectorAll(\".event-photo\").forEach(p => {\r\n        p.onclick = () => openLightbox(p.dataset.i, p.dataset.j);\r\n    });\r\n}\r\n\r\nfunction openLightbox(i, j) {\r\n    currentPhotos = eventData[i].photos;\r\n    currentIndex = +j;\r\n    updateLightbox();\r\n    document.getElementById(\"eventLightbox\").classList.add(\"active\");\r\n    document.body.style.overflow = \"hidden\";\r\n}\r\n\r\nfunction closeLightbox() {\r\n    document.getElementById(\"eventLightbox\").classList.remove(\"active\");\r\n    document.body.style.overflow = \"\";\r\n}\r\n\r\nfunction updateLightbox() {\r\n    document.getElementById(\"lightboxImage\").src = currentPhotos[currentIndex];\r\n}\r\n\r\ndocument.getElementById(\"lightboxClose\").onclick = closeLightbox;\r\ndocument.getElementById(\"lightboxPrev\").onclick = () => {\r\n    currentIndex = (currentIndex - 1 + currentPhotos.length) % currentPhotos.length;\r\n    updateLightbox();\r\n};\r\ndocument.getElementById(\"lightboxNext\").onclick = () => {\r\n    currentIndex = (currentIndex + 1) % currentPhotos.length;\r\n    updateLightbox();\r\n};\r\n\r\nrenderEvents();\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\r\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Planning &#038; Preparation \u00d7 \u2039 \u203a<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-20411","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/20411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/comments?post=20411"}],"version-history":[{"count":0,"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/pages\/20411\/revisions"}],"wp:attachment":[{"href":"https:\/\/demo.vleafy.com\/ibc2\/wp-json\/wp\/v2\/media?parent=20411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}