\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n
VTDI \u2014 Events<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700&family=DM+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n :root {\r\n --blue: #0056a8;\r\n --blue-dark: #003d7a;\r\n --blue-soft: #eef4fb;\r\n --green: #01a65c;\r\n --green-dark: #007a42;\r\n --green-soft: #e6f6ef;\r\n --brand-gradient: linear-gradient(135deg, #0056a8 0%, #01a65c 100%);\r\n --brand-gradient-soft: linear-gradient(135deg, #e6f0fb 0%, #e6f6ef 100%);\r\n --white: #ffffff;\r\n --off-white: #f5f8fc;\r\n --text: #1b2a41;\r\n --text-muted: #6b7a90;\r\n --border: rgba(0, 86, 168, 0.10);\r\n --shadow-soft: 0 4px 24px rgba(0, 86, 168, 0.08);\r\n --shadow-hover: 0 16px 48px rgba(0, 86, 168, 0.18);\r\n --radius-xl: 24px;\r\n --radius-lg: 20px;\r\n --radius-md: 14px;\r\n --transition: all 0.28s ease;\r\n }\r\n\r\n *, *::before, *::after {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n\r\n body {\r\n font-family: 'DM Sans', sans-serif;\r\n background: var(--off-white);\r\n color: var(--text);\r\n overflow-x: hidden;\r\n }\r\n\r\n .hero {\r\n position: relative;\r\n background: linear-gradient(135deg, #003d7a 0%, #0056a8 55%, #01a65c 140%);\r\n overflow: hidden;\r\n padding: 90px 40px 80px;\r\n text-align: center;\r\n }\r\n\r\n .hero::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n radial-gradient(ellipse 70% 60% at 15% 50%, rgba(1, 166, 92, 0.18) 0%, transparent 60%),\r\n radial-gradient(ellipse 60% 80% at 85% 30%, rgba(0, 86, 168, 0.35) 0%, transparent 60%);\r\n }\r\n\r\n .hero::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background-image: repeating-linear-gradient(\r\n -55deg,\r\n transparent,\r\n transparent 30px,\r\n rgba(255,255,255,0.025) 30px,\r\n rgba(255,255,255,0.025) 31px\r\n );\r\n }\r\n\r\n .hero-inner {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 920px;\r\n margin: 0 auto;\r\n }\r\n\r\n .hero-eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: rgba(1, 166, 92, 0.15);\r\n border: 1px solid rgba(1, 166, 92, 0.35);\r\n color: #01e07b;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n padding: 7px 18px;\r\n border-radius: 40px;\r\n margin-bottom: 28px;\r\n }\r\n\r\n .hero-eyebrow::before {\r\n content: '';\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: #01e07b;\r\n animation: pulse-dot 1.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulse-dot {\r\n 0%, 100% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n 50% {\r\n opacity: 0.45;\r\n transform: scale(0.72);\r\n }\r\n }\r\n\r\n .hero h1 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: clamp(46px, 7vw, 88px);\r\n font-weight: 900;\r\n color: #fff;\r\n line-height: 1;\r\n letter-spacing: -1px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .hero h1 span {\r\n color: var(--green);\r\n font-style: italic;\r\n }\r\n\r\n .hero-sub {\r\n font-size: 16px;\r\n color: rgba(255, 255, 255, 0.76);\r\n max-width: 620px;\r\n margin: 0 auto 34px;\r\n line-height: 1.8;\r\n font-weight: 300;\r\n }\r\n\r\n .toolbar {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n gap: 16px;\r\n align-items: center;\r\n max-width: 920px;\r\n margin: 0 auto;\r\n }\r\n\r\n .search-wrap {\r\n position: relative;\r\n }\r\n\r\n .search-input {\r\n width: 100%;\r\n min-height: 52px;\r\n border-radius: 999px;\r\n border: 1.5px solid rgba(255,255,255,0.18);\r\n background: rgba(255,255,255,0.10);\r\n backdrop-filter: blur(10px);\r\n color: #fff;\r\n padding: 0 18px 0 48px;\r\n font-size: 14px;\r\n outline: none;\r\n transition: var(--transition);\r\n }\r\n\r\n .search-input::placeholder {\r\n color: rgba(255,255,255,0.7);\r\n }\r\n\r\n .search-input:focus {\r\n border-color: rgba(1, 166, 92, 0.7);\r\n box-shadow: 0 0 0 4px rgba(1, 166, 92, 0.16);\r\n }\r\n\r\n .search-icon {\r\n position: absolute;\r\n top: 50%;\r\n left: 18px;\r\n transform: translateY(-50%);\r\n width: 18px;\r\n height: 18px;\r\n opacity: 0.9;\r\n pointer-events: none;\r\n }\r\n\r\n .filter-row {\r\n display: flex;\r\n gap: 10px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .filter-btn {\r\n padding: 10px 22px;\r\n border-radius: 30px;\r\n border: 1.5px solid rgba(255,255,255,0.25);\r\n background: transparent;\r\n color: rgba(255,255,255,0.78);\r\n font-family: 'DM Sans', sans-serif;\r\n font-size: 13px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n }\r\n\r\n .filter-btn:hover,\r\n .filter-btn.active {\r\n background: var(--green);\r\n border-color: var(--green);\r\n color: #fff;\r\n transform: translateY(-1px);\r\n }\r\n\r\n .page-body {\r\n max-width: 1180px;\r\n margin: 0 auto;\r\n padding: 60px 24px 100px;\r\n }\r\n\r\n .section-heading {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .section-heading-label {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 28px;\r\n font-weight: 700;\r\n color: var(--blue);\r\n }\r\n\r\n .section-heading-line {\r\n flex: 1;\r\n height: 1.5px;\r\n background: linear-gradient(90deg, var(--border) 0%, transparent 100%);\r\n }\r\n\r\n .section-heading-tag {\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--green);\r\n background: var(--green-soft);\r\n border: 1px solid rgba(1, 166, 92, 0.18);\r\n padding: 5px 12px;\r\n border-radius: 999px;\r\n }\r\n\r\n .results-strip {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n margin-bottom: 28px;\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n border-radius: 18px;\r\n padding: 14px 18px;\r\n box-shadow: var(--shadow-soft);\r\n }\r\n\r\n .results-copy {\r\n font-size: 13px;\r\n color: var(--text-muted);\r\n }\r\n\r\n .results-copy strong {\r\n color: var(--blue);\r\n }\r\n\r\n .results-chip {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n border-radius: 999px;\r\n background: var(--brand-gradient-soft);\r\n color: var(--blue);\r\n padding: 9px 14px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n border: 1px solid rgba(0, 86, 168, 0.08);\r\n }\r\n\r\n .events-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\r\n gap: 28px;\r\n }\r\n\r\n .event-card {\r\n background: var(--white);\r\n border-radius: var(--radius-lg);\r\n overflow: hidden;\r\n border: 1px solid var(--border);\r\n box-shadow: var(--shadow-soft);\r\n transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.35s ease;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n .event-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: var(--shadow-hover);\r\n }\r\n\r\n .event-card.hidden {\r\n display: none;\r\n }\r\n\r\n .card-status {\r\n position: absolute;\r\n top: 16px;\r\n right: 16px;\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n padding: 6px 12px;\r\n border-radius: 20px;\r\n z-index: 3;\r\n }\r\n\r\n .card-status.upcoming {\r\n background: var(--green);\r\n color: #fff;\r\n }\r\n\r\n .card-status.past {\r\n background: rgba(107, 122, 144, 0.12);\r\n color: var(--text-muted);\r\n border: 1px solid rgba(107, 122, 144, 0.18);\r\n }\r\n\r\n .card-poster {\r\n position: relative;\r\n height: 220px;\r\n overflow: hidden;\r\n background: var(--blue-soft);\r\n }\r\n\r\n .card-poster img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.5s ease;\r\n display: block;\r\n }\r\n\r\n .event-card:hover .card-poster img {\r\n transform: scale(1.05);\r\n }\r\n\r\n .card-poster-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top, rgba(0, 61, 122, 0.88) 0%, rgba(0, 86, 168, 0.26) 48%, transparent 78%);\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n display: flex;\r\n align-items: flex-end;\r\n justify-content: center;\r\n padding-bottom: 20px;\r\n }\r\n\r\n .event-card:hover .card-poster-overlay {\r\n opacity: 1;\r\n }\r\n\r\n .card-poster-cta {\r\n background: var(--white);\r\n color: var(--blue);\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n padding: 8px 20px;\r\n border-radius: 30px;\r\n }\r\n\r\n .card-body {\r\n padding: 24px 26px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n\r\n .card-category {\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n color: var(--green);\r\n margin-bottom: 10px;\r\n }\r\n\r\n .card-title {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 20px;\r\n font-weight: 700;\r\n color: var(--blue-dark);\r\n line-height: 1.3;\r\n margin-bottom: 14px;\r\n }\r\n\r\n .card-meta {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .card-meta-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 13px;\r\n color: var(--text-muted);\r\n line-height: 1.5;\r\n }\r\n\r\n .meta-icon {\r\n width: 16px;\r\n height: 16px;\r\n color: var(--green);\r\n flex-shrink: 0;\r\n }\r\n\r\n .card-excerpt {\r\n font-size: 13.5px;\r\n line-height: 1.7;\r\n color: #4a5c74;\r\n margin-bottom: 20px;\r\n flex: 1;\r\n }\r\n\r\n .info-panel {\r\n display: grid;\r\n gap: 10px;\r\n margin-top: auto;\r\n padding-top: 2px;\r\n }\r\n\r\n .info-chip {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 10px;\r\n background: var(--blue-soft);\r\n border: 1px solid rgba(0, 86, 168, 0.12);\r\n border-radius: 12px;\r\n padding: 12px 14px;\r\n font-size: 12.8px;\r\n line-height: 1.6;\r\n color: var(--blue-dark);\r\n }\r\n\r\n .info-chip strong {\r\n color: var(--blue);\r\n min-width: 88px;\r\n font-weight: 700;\r\n }\r\n\r\n .info-chip span {\r\n color: var(--text-muted);\r\n flex: 1;\r\n }\r\n\r\n .event-card-featured {\r\n grid-column: 1 \/ -1;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n border-radius: var(--radius-xl);\r\n overflow: hidden;\r\n min-height: 400px;\r\n }\r\n\r\n .event-card-featured .card-poster {\r\n height: 100%;\r\n min-height: 280px;\r\n }\r\n\r\n .event-card-featured .card-body {\r\n padding: 40px;\r\n justify-content: center;\r\n }\r\n\r\n .event-card-featured .card-title {\r\n font-size: 28px;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .event-card-featured .card-excerpt {\r\n font-size: 14.5px;\r\n }\r\n\r\n .featured-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n background: var(--brand-gradient);\r\n color: #fff;\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n padding: 6px 14px;\r\n border-radius: 999px;\r\n margin-bottom: 14px;\r\n width: fit-content;\r\n }\r\n\r\n .key-details {\r\n background: var(--off-white);\r\n border-radius: 12px;\r\n padding: 16px 20px;\r\n margin-bottom: 22px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n border: 1px solid rgba(0, 86, 168, 0.06);\r\n }\r\n\r\n .key-detail-row {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 10px;\r\n font-size: 13px;\r\n }\r\n\r\n .key-detail-row strong {\r\n color: var(--blue);\r\n min-width: 120px;\r\n }\r\n\r\n .key-detail-row span {\r\n color: var(--text-muted);\r\n line-height: 1.5;\r\n }\r\n\r\n .contact-row {\r\n display: flex;\r\n gap: 12px;\r\n margin-top: 12px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .contact-pill {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: var(--green-soft);\r\n color: var(--green-dark);\r\n border: 1px solid rgba(1, 166, 92, 0.18);\r\n padding: 10px 14px;\r\n border-radius: 999px;\r\n font-size: 12.5px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n transition: var(--transition);\r\n }\r\n\r\n .contact-pill:hover {\r\n background: var(--brand-gradient);\r\n color: #fff;\r\n border-color: transparent;\r\n }\r\n\r\n .empty-state {\r\n display: none;\r\n margin-top: 10px;\r\n background: var(--white);\r\n border: 1px solid var(--border);\r\n border-radius: 22px;\r\n padding: 40px 24px;\r\n box-shadow: var(--shadow-soft);\r\n text-align: center;\r\n }\r\n\r\n .empty-state.show {\r\n display: block;\r\n }\r\n\r\n .empty-state h3 {\r\n font-family: 'Playfair Display', serif;\r\n font-size: 26px;\r\n color: var(--blue);\r\n margin-bottom: 10px;\r\n }\r\n\r\n .empty-state p {\r\n max-width: 520px;\r\n margin: 0 auto;\r\n font-size: 14px;\r\n line-height: 1.7;\r\n color: var(--text-muted);\r\n }\r\n\r\n .fade-in {\r\n animation: fadeUp 0.45s ease;\r\n }\r\n\r\n @keyframes fadeUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(12px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n\r\n @media (max-width: 900px) {\r\n .toolbar {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n @media (max-width: 700px) {\r\n .hero {\r\n padding: 70px 20px 60px;\r\n }\r\n\r\n .page-body {\r\n padding: 45px 16px 80px;\r\n }\r\n\r\n .section-heading {\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n }\r\n\r\n .section-heading-line {\r\n display: none;\r\n }\r\n\r\n .events-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .event-card-featured {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .event-card-featured .card-body {\r\n padding: 26px 22px;\r\n }\r\n\r\n .info-panel,\r\n .contact-row {\r\n flex-direction: column;\r\n }\r\n\r\n .results-strip {\r\n padding: 14px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"hero\">\r\n <div class=\"hero-inner\">\r\n <div class=\"hero-eyebrow\">VTDI Events & Experiences<\/div>\r\n <h1>Discover <span>Events<\/span><\/h1>\r\n <p class=\"hero-sub\">\r\n Explore film showcases, campus activities, workshops, and featured VTDI experiences.\r\n <\/p>\r\n\r\n <div class=\"toolbar\">\r\n \r\n\r\n <div class=\"filter-row\" id=\"filterButtons\">\r\n <button class=\"filter-btn active\" type=\"button\" data-filter=\"all\" onclick=\"setEventFilter('all', this)\">All Events<\/button>\r\n <button class=\"filter-btn\" type=\"button\" data-filter=\"upcoming\" onclick=\"setEventFilter('upcoming', this)\">Upcoming<\/button>\r\n <button class=\"filter-btn\" type=\"button\" data-filter=\"past\" onclick=\"setEventFilter('past', this)\">Past<\/button>\r\n <button class=\"filter-btn\" type=\"button\" data-filter=\"featured\" onclick=\"setEventFilter('featured', this)\">Featured<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"page-body\">\r\n <div class=\"section-heading\">\r\n <div class=\"section-heading-label\">Events Directory<\/div>\r\n <div class=\"section-heading-line\"><\/div>\r\n <div class=\"section-heading-tag\">Interactive View<\/div>\r\n <\/div>\r\n\r\n <div class=\"results-strip fade-in\">\r\n <div class=\"results-copy\" id=\"resultsText\">Showing <strong>all events<\/strong>.<\/div>\r\n <div class=\"results-chip\" id=\"resultsCount\">1 events<\/div>\r\n <\/div>\r\n\r\n <div class=\"events-grid\" id=\"eventsGrid\">\r\n <article class=\"event-card event-card-featured fade-in\" data-type=\"featured upcoming\" data-category=\"symposium\" data-title=\"Film Festival\" data-location=\"VTDI Campus, Kingston\" data-keywords=\"Film Festival\">\r\n <div class=\"card-status upcoming\">Upcoming<\/div>\r\n <div class=\"card-poster\">\r\n <img decoding=\"async\" src=\"https:\/\/vtdi.edu.jm\/wp-content\/uploads\/2026\/04\/VTDI-Film-Festival-scaled.jpg\" alt=\"Featured Event Poster\">\r\n <div class=\"card-poster-overlay\">\r\n <div class=\"card-poster-cta\">View Details<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"featured-badge\">Featured Event<\/div>\r\n <div class=\"card-category\">Film Festival<\/div>\r\n <h2 class=\"card-title\">VTDI Film Festival<\/h2>\r\n\r\n <div class=\"key-details\">\r\n <div class=\"key-detail-row\">\r\n <strong>Date:<\/strong>\r\n <span>April 15, 2026<\/span>\r\n <\/div>\r\n <div class=\"key-detail-row\">\r\n <strong>Venue:<\/strong>\r\n <span>VTDI Campus, Kingston<\/span>\r\n <\/div>\r\n <div class=\"key-detail-row\">\r\n <strong>Focus:<\/strong>\r\n <span>Showcasing student creativity in film and digital media while highlighting the impact of technical and vocational training on innovation and workforce development.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- <p class=\"card-excerpt\">\r\n Join educators, professionals, students, and stakeholders for a dynamic exchange of ideas centered on technical and vocational education and training in Jamaica and beyond. -->\r\n <\/p>\r\n\r\n <div class=\"info-panel\">\r\n <div class=\"info-chip\">\r\n <strong>Programme<\/strong>\r\n <span>Student film screenings, creator spotlights, and interactive discussions connecting training, storytelling, and real-world media production.<\/span>\r\n <\/div>\r\n <div class=\"info-chip\">\r\n <strong>Audience<\/strong>\r\n <span>Students, educators, creative professionals, industry partners, and supporters of technical and vocational education and emerging media talent.<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-row\">\r\n <!-- <a href=\"#\" class=\"contact-pill\">General Enquiries<\/a>\r\n <a href=\"#\" class=\"contact-pill\">Register Interest<\/a> -->\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n<!--\r\n <article class=\"event-card fade-in\" data-type=\"upcoming\" data-category=\"workshop\" data-title=\"Digital Skills for the Modern Workforce\" data-location=\"VTDI Lecture Theatre\" data-keywords=\"technology career readiness digital skills workforce training lecture theatre\">\r\n <div class=\"card-status upcoming\">Upcoming<\/div>\r\n <div class=\"card-poster\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1200&q=80\" alt=\"Digital Skills Event Poster\">\r\n <div class=\"card-poster-overlay\">\r\n <div class=\"card-poster-cta\">View Event<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"card-category\">Workshop<\/div>\r\n <h3 class=\"card-title\">Digital Skills for the Modern Workforce<\/h3>\r\n\r\n <div class=\"card-meta\">\r\n <div class=\"card-meta-item\">\r\n <svg class=\"meta-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>April 12, 2026<\/span>\r\n <\/div>\r\n <div class=\"card-meta-item\">\r\n <svg class=\"meta-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\r\n <span>VTDI Lecture Theatre<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"card-excerpt\">\r\n A practical session focused on workplace technology trends, digital efficiency, and career readiness.\r\n <\/p>\r\n\r\n <div class=\"info-panel\">\r\n <div class=\"info-chip\">\r\n <strong>Overview<\/strong>\r\n <span>This event shares practical details, focus areas, and the type of experience participants can expect.<\/span>\r\n <\/div>\r\n <div class=\"info-chip\">\r\n <strong>Ideal For<\/strong>\r\n <span>Students, staff, partners, and visitors looking for useful event information at a glance.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"event-card fade-in\" data-type=\"upcoming\" data-category=\"conference\" data-title=\"Industry Partnerships and Skills Development Forum\" data-location=\"Main Auditorium\" data-keywords=\"industry partnerships certification workforce needs employers education forum auditorium\">\r\n <div class=\"card-status upcoming\">Upcoming<\/div>\r\n <div class=\"card-poster\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1200&q=80\" alt=\"Industry Forum Poster\">\r\n <div class=\"card-poster-overlay\">\r\n <div class=\"card-poster-cta\">View Event<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"card-category\">Conference<\/div>\r\n <h3 class=\"card-title\">Industry Partnerships and Skills Development Forum<\/h3>\r\n\r\n <div class=\"card-meta\">\r\n <div class=\"card-meta-item\">\r\n <svg class=\"meta-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>May 03, 2026<\/span>\r\n <\/div>\r\n <div class=\"card-meta-item\">\r\n <svg class=\"meta-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\r\n <span>Main Auditorium<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"card-excerpt\">\r\n Bringing together industry leaders and educators to discuss collaboration, certification, and workforce needs.\r\n <\/p>\r\n\r\n <div class=\"info-panel\">\r\n <div class=\"info-chip\">\r\n <strong>Overview<\/strong>\r\n <span>This event shares practical details, focus areas, and the type of experience participants can expect.<\/span>\r\n <\/div>\r\n <div class=\"info-chip\">\r\n <strong>Ideal For<\/strong>\r\n <span>Students, staff, partners, and visitors looking for useful event information at a glance.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n\r\n <article class=\"event-card fade-in\" data-type=\"past\" data-category=\"campus event\" data-title=\"Student Innovation Showcase\" data-location=\"Innovation Hub\" data-keywords=\"student projects prototypes showcase technical disciplines gallery campus innovation hub\">\r\n <div class=\"card-status past\">Past<\/div>\r\n <div class=\"card-poster\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1200&q=80\" alt=\"Student Innovation Showcase Poster\">\r\n <div class=\"card-poster-overlay\">\r\n <div class=\"card-poster-cta\">View Event<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <div class=\"card-category\">Campus Event<\/div>\r\n <h3 class=\"card-title\">Student Innovation Showcase<\/h3>\r\n\r\n <div class=\"card-meta\">\r\n <div class=\"card-meta-item\">\r\n <svg class=\"meta-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"><\/rect><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line><\/svg>\r\n <span>January 18, 2026<\/span>\r\n <\/div>\r\n <div class=\"card-meta-item\">\r\n <svg class=\"meta-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z\"><\/path><circle cx=\"12\" cy=\"10\" r=\"3\"><\/circle><\/svg>\r\n <span>Innovation Hub<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <p class=\"card-excerpt\">\r\n A showcase of student-led projects, prototypes, and creative solutions across technical disciplines.\r\n <\/p>\r\n\r\n <div class=\"info-panel\">\r\n <div class=\"info-chip\">\r\n <strong>Overview<\/strong>\r\n <span>This event shares practical details, focus areas, and the type of experience participants can expect.<\/span>\r\n <\/div>\r\n <div class=\"info-chip\">\r\n <strong>Ideal For<\/strong>\r\n <span>Students, staff, partners, and visitors looking for useful event information at a glance.<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"empty-state\" id=\"emptyState\">\r\n <h3>No events matched your filter<\/h3>\r\n <p>Try another category or clear the search. The page will spring back to life once the filter and keyword match an event.<\/p>\r\n <\/div>\r\n <\/div>\r\n-->\r\n <script>\r\n let activeFilter = 'all';\r\n\r\n function getEventElements() {\r\n return {\r\n filterButtons: document.querySelectorAll('.filter-btn'),\r\n cards: document.querySelectorAll('.event-card'),\r\n resultsText: document.getElementById('resultsText'),\r\n resultsCount: document.getElementById('resultsCount'),\r\n emptyState: document.getElementById('emptyState')\r\n };\r\n }\r\n\r\n function matchesFilter(card) {\r\n if (activeFilter === 'all') return true;\r\n return (card.dataset.type || '').split(' ').includes(activeFilter);\r\n }\r\n\r\n function updateSummary(visibleCount) {\r\n const { resultsText, resultsCount } = getEventElements();\r\n const filterLabels = {\r\n all: 'all events',\r\n upcoming: 'upcoming events',\r\n past: 'past events',\r\n featured: 'featured events'\r\n };\r\n\r\n const baseLabel = filterLabels[activeFilter] || 'events';\r\n if (resultsText) {\r\n resultsText.innerHTML = `Showing <strong>${baseLabel}<\/strong>.`;\r\n }\r\n if (resultsCount) {\r\n resultsCount.textContent = `${visibleCount} event${visibleCount === 1 ? '' : 's'}`;\r\n }\r\n }\r\n\r\n function filterEvents() {\r\n const { cards, emptyState } = getEventElements();\r\n let visibleCount = 0;\r\n\r\n cards.forEach((card) => {\r\n const show = matchesFilter(card);\r\n card.classList.toggle('hidden', !show);\r\n\r\n if (show) {\r\n visibleCount += 1;\r\n card.classList.remove('fade-in');\r\n void card.offsetWidth;\r\n card.classList.add('fade-in');\r\n }\r\n });\r\n\r\n if (emptyState) {\r\n emptyState.classList.toggle('show', visibleCount === 0);\r\n }\r\n\r\n updateSummary(visibleCount);\r\n }\r\n\r\n function setEventFilter(filter, clickedButton) {\r\n activeFilter = filter;\r\n const { filterButtons } = getEventElements();\r\n\r\n filterButtons.forEach((btn) => btn.classList.remove('active'));\r\n if (clickedButton) {\r\n clickedButton.classList.add('active');\r\n } else {\r\n const matchedButton = document.querySelector(`.filter-btn[data-filter=\"${filter}\"]`);\r\n if (matchedButton) matchedButton.classList.add('active');\r\n }\r\n\r\n filterEvents();\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', function () {\r\n const { filterButtons } = getEventElements();\r\n filterButtons.forEach((button) => {\r\n button.addEventListener('click', function () {\r\n setEventFilter(button.dataset.filter, button);\r\n });\r\n });\r\n\r\n filterEvents();\r\n });\r\n <\\\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>VTDI \u2014 Events VTDI Events & Experiences Discover Events Explore film showcases, campus activities, workshops, and featured VTDI experiences. All […]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"footnotes":""},"class_list":["post-4049","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=\/wp\/v2\/pages\/4049","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4049"}],"version-history":[{"count":58,"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=\/wp\/v2\/pages\/4049\/revisions"}],"predecessor-version":[{"id":5130,"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=\/wp\/v2\/pages\/4049\/revisions\/5130"}],"wp:attachment":[{"href":"https:\/\/vtdi.edu.jm\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4049"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Notice: ob_end_flush(): Failed to send buffer of zlib output compression (1) in E:\Sites\VTDI\www3.vtdi.edu.jm\wp-includes\functions.php on line 5481
Notice: ob_end_flush(): Failed to send buffer of zlib output compression (1) in E:\Sites\VTDI\www3.vtdi.edu.jm\wp-includes\functions.php on line 5481