Activities and Events - Quebec City

<!doctype html> <html lang="en-CA" class=""> <head><meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="referrer" content="origin-when-cross-origin"> <link rel="icon" type="image/png" href="https://www.plainsofabraham.ca/cpresources/6cfc8029/favicon.png?v=1742489196" > <link rel="icon" type="image/svg+xml" href="https://www.plainsofabraham.ca/cpresources/6cfc8029/favicon.svg?v=1742489196" > <script> const shoebox = { siteHandle: "en", cookieConsent: { necessary: Boolean(1), functional: Boolean(), statistics: Boolean(), marketing: Boolean(), } } window.shoebox = shoebox; </script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } (function (w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-P32BZZDS'); </script> <link rel="home" href="https://www.plainsofabraham.ca/"> <link rel="canonical" href="https://www.plainsofabraham.ca/activities-events"> <meta property="og:url" content="https://www.plainsofabraham.ca/activities-events"><meta name="twitter:url" content="https://www.plainsofabraham.ca/activities-events"><meta property="og:locale" content="en-CA"> <title>Activities and Events - Quebec City – Plains of Abraham</title> <meta name="description" content="Consult the calendar of activities and events at the Plains of Abraham in Quebec City. Discover cultural and historical programming for everyone."> <meta name="image" content="https://ccbnwebprod.blob.core.windows.net/website/Activités-et-événements/Champs-de-bataille/_1200x675_crop_center-center_none/1830/Capture-d’écran-2024-05-09-122341.jpg"> <meta name="twitter:card" content="summary_large_image"> <meta property="og:site_name" content="Plains of Abraham"> <meta property="og:type" content="website"> <meta property="og:title" content="Activities and Events - Quebec City"> <meta property="og:description" content="Consult the calendar of activities and events at the Plains of Abraham in Quebec City. Discover cultural and historical programming for everyone."> <meta property="og:image" content="https://ccbnwebprod.blob.core.windows.net/website/Activités-et-événements/Champs-de-bataille/_1200x630_crop_center-center_none/1830/Capture-d’écran-2024-05-09-122341.jpg"> <meta name="twitter:title" content="Activities and Events - Quebec City"> <meta name="twitter:description" content="Consult the calendar of activities and events at the Plains of Abraham in Quebec City. Discover cultural and historical programming for everyone."> <meta name="twitter:image" content="https://ccbnwebprod.blob.core.windows.net/website/Activités-et-événements/Champs-de-bataille/_1200x600_crop_center-center_none/1830/Capture-d’écran-2024-05-09-122341.jpg"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <link rel="alternate" href="https://www.plainesdabraham.ca/activites-evenements" hreflang="fr-ca"> <link rel="alternate" href="https://www.plainsofabraham.ca/activities-events" hreflang="en-ca"> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/www.plainsofabraham.ca\/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/www.plainsofabraham.ca\/activities-events","name":"Activities and Events"}}]}</script> <script type="module">!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))r(e);new MutationObserver((e=>{for(const o of e)if("childList"===o.type)for(const e of o.addedNodes)if("LINK"===e.tagName&&"modulepreload"===e.rel)r(e);else if(e.querySelectorAll)for(const o of e.querySelectorAll("link[rel=modulepreload]"))r(o)})).observe(document,{childList:!0,subtree:!0})}function r(e){if(e.ep)return;e.ep=!0;const r=function(e){const r={};return e.integrity&&(r.integrity=e.integrity),e.referrerpolicy&&(r.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?r.credentials="include":"anonymous"===e.crossorigin?r.credentials="omit":r.credentials="same-origin",r}(e);fetch(e.href,r)}}();</script> <script type="module" src="/dist/assets/app-de400cc6.js" crossorigin onload="e=new CustomEvent('vite-script-loaded', {detail:{path: 'resources/js/app.ts'}});document.dispatchEvent(e);"></script> <link href="/dist/assets/app-46c541a3.css" rel="stylesheet"> <link href="https://www.plainsofabraham.ca/cpresources/2a4d7dc4/css/formie-theme.css?v=1741046123" rel="stylesheet"></head> <body class="bg-beige-100" x-data :class="$store.megaMenu.open ? 'overflow-hidden' : ''"> <noscript ><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P32BZZDS" height="0" width="0" style="display:none;visibility:hidden" ></iframe ></noscript> <div class="flex min-h-dvh flex-col justify-between"> <div> <div class="sticky top-0 z-50" x-data="{activeId: null}" x-show="!$store.fullscreenMap.fullscreen"> <nav class="relative hidden border-b bg-beige-100 md:block"> <div class="mx-auto flex flex-wrap items-center justify-end p-3"> <ul class="flex flex-col gap-4 md:mt-0 md:flex-row md:items-center md:space-x-4"> <li> <a href="https://www.plainsofabraham.ca/blog" class="block hover:font-semibold" >Blog</a> </li> <li> <a href="https://www.plainsofabraham.ca/plains-abraham-map" class="block hover:font-semibold" >Interactive Map</a> </li> <li> <a href="https://www.plainsofabraham.ca/careers" class="block hover:font-semibold" >Career</a> </li> <li> <a href="https://www.plainsofabraham.ca/contact" class="block hover:font-semibold" >Contact</a> </li> <li> <div class="z-1 pointer-events-none relative" > <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" role="presentation" > <path d="M1.01563 8.82812C1.01562 9.85408 1.2177 10.87 1.61032 11.8178C2.00293 12.7657 2.5784 13.6269 3.30385 14.3524C4.02931 15.0779 4.89055 15.6533 5.83841 16.0459C6.78627 16.4385 7.80217 16.6406 8.82812 16.6406C9.85408 16.6406 10.87 16.4385 11.8178 16.0459C12.7657 15.6533 13.6269 15.0779 14.3524 14.3524C15.0779 13.6269 15.6533 12.7657 16.0459 11.8178C16.4385 10.87 16.6406 9.85408 16.6406 8.82812C16.6406 7.80217 16.4385 6.78627 16.0459 5.83841C15.6533 4.89055 15.0779 4.02931 14.3524 3.30385C13.6269 2.5784 12.7657 2.00293 11.8178 1.61032C10.87 1.2177 9.85408 1.01563 8.82812 1.01562C7.80217 1.01563 6.78627 1.2177 5.83841 1.61032C4.89055 2.00293 4.02931 2.5784 3.30385 3.30385C2.5784 4.02931 2.00293 4.89055 1.61032 5.83841C1.2177 6.78627 1.01562 7.80217 1.01563 8.82812Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.9836 18.9836L14.3516 14.3516" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div x-data="search" x-trap.noscroll="shown" data-url="https://www.plainsofabraham.ca/search/results" data-target="quick-search-desktop" class="z-30 mx-auto hidden max-w-3xl normal-case" :class="shown ? 'fixed inset-0 w-full px-3 pt-16 pb-12 !flex flex-col h-dvh' : 'relative !block'" > <div :class="shown ? 'fixed inset-0 w-full h-dvh bg-beige-100' : ''" class="z-10" @click="close()"></div> <form x-ref="form" class="relative z-20" action="https://www.plainsofabraham.ca/search"> <input x-ref="filterQuery" @keyup.escape="close" @click="open" @keyup.debounce.400ms="submit" @keyup.enter="$event.target.form.submit()" name="q" autocomplete="off" placeholder="Search for a location, activity, event, etc." class="font-semibold placeholder:truncate placeholder:font-normal placeholder:text-black/60 focus:border focus:border-b-0 focus:border-black focus:shadow-none focus:outline-0 focus:ring-0" :class="shown ? 'w-full bg-beige-300 border-b-0 py-4 pl-4 pr-10' : 'cursor-pointer opacity-0 absolute w-[22px] h-[22px]'" type="text" > <div x-show="shown" class="pointer-events-none absolute right-4 top-5 h-[20px] w-[20px] opacity-40" aria-hidden="true" > <svg class="size-4" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' > <path d="M1.01563 8.82812C1.01562 9.85408 1.2177 10.87 1.61032 11.8178C2.00293 12.7657 2.5784 13.6269 3.30385 14.3524C4.02931 15.0779 4.89055 15.6533 5.83841 16.0459C6.78627 16.4385 7.80217 16.6406 8.82812 16.6406C9.85408 16.6406 10.87 16.4385 11.8178 16.0459C12.7657 15.6533 13.6269 15.0779 14.3524 14.3524C15.0779 13.6269 15.6533 12.7657 16.0459 11.8178C16.4385 10.87 16.6406 9.85408 16.6406 8.82812C16.6406 7.80217 16.4385 6.78627 16.0459 5.83841C15.6533 4.89055 15.0779 4.02931 14.3524 3.30385C13.6269 2.5784 12.7657 2.00293 11.8178 1.61032C10.87 1.2177 9.85408 1.01563 8.82812 1.01562C7.80217 1.01563 6.78627 1.2177 5.83841 1.61032C4.89055 2.00293 4.02931 2.5784 3.30385 3.30385C2.5784 4.02931 2.00293 4.89055 1.61032 5.83841C1.2177 6.78627 1.01562 7.80217 1.01563 8.82812Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.9836 18.9836L14.3516 14.3516" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div x-show="shown" class="fixed right-3 top-3"> <a class="inline-flex cursor-pointer items-center justify-between font-semibold transition-all bg-black text-beige-100 hover:bg-black/70 px-2 py-2 gap-1 [&_.animate-arrow]:transition-transform [&:hover_.animate-arrow]:translate-x-1" @click="close" > <svg class="size-6" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' > <path d="M18 6 6 18"/><path d="m6 6 12 12"/> </svg> </a> </div> </form> <div x-show="!shown" class="pointer-events-none relative z-20 -mt-[22px] h-[22px] w-5" ></div> <div x-show="shown" class="z-20 max-h-[calc(100dvh-100px)] overflow-y-auto overscroll-contain border border-t-0 border-black bg-beige-100" > <div x-data="htmlGet" data-source="quick-search-desktop" class="max-w-4xl" @html-get-clear.window="clear" @html-get-load.window="load" > <div x-show="error" class="p-4 text-sm font-normal opacity-60">Search error. Try again later.</div> <div x-show="loading" class="p-4"><svg class="size-5 animate-spin" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' > <path d="M21 12a9 9 0 1 1-6.219-8.56"/> </svg> </div> <div x-ref="content" class="quick-search group p-4 transition-opacity" x-show="ready" ></div> </div> </div> </div> </li> <li> <a class="group flex items-center justify-between gap-2 rounded-full bg-black py-1 pl-2 pr-3 text-xs font-medium uppercase text-white" href="https://www.plainesdabraham.ca/activites-evenements" > <svg class="h-[18px] w-[18px] transition-all group-hover:translate-x-1" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' > <path d="M19.5849 9.95084C19.5856 11.2135 19.3375 12.4639 18.8549 13.6307C18.3724 14.7975 17.6647 15.8578 16.7723 16.7511C15.8799 17.6444 14.8203 18.3532 13.6541 18.837C12.4878 19.3208 11.2376 19.5702 9.97493 19.5708C7.4127 19.5283 4.97097 18.4755 3.18116 16.6415C1.39136 14.8075 0.398352 12.3409 0.418262 9.77834C0.420314 7.32896 1.38123 4.97772 3.09527 3.22801C4.80932 1.47829 7.14028 0.469166 9.5891 0.416677C9.72743 0.410843 9.86576 0.408343 10.0058 0.408343C11.2625 0.401526 12.5082 0.643428 13.6711 1.12012C14.834 1.5968 15.8911 2.29886 16.7815 3.18584C17.6719 4.07282 18.378 5.1272 18.8591 6.28824C19.3403 7.44929 19.5869 8.69405 19.5849 9.95084Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.58594 0.416748C4.58594 5.83341 4.58594 12.9001 9.58594 19.5667" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.4219 0.416748C15.4219 5.83341 15.4219 12.8976 10.4219 19.5642" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.98828 4.56982H17.9333" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M0.421875 9.56982H19.586" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.65234 14.5698H18.4023" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> </svg> fr</a> </li> </ul> </div> </nav> <nav class="relative border-b bg-beige-100" x-data="mainNav"> <div class="mx-auto flex w-full flex-wrap items-center justify-between p-4 py-2 md:p-0"> <a href="https://www.plainsofabraham.ca/" style="--nav-logo-width: 280px;" class="flex items-center md:hidden" > <img src="https://ccbnwebprod.blob.core.windows.net/website/Image-de-marque-logos-pictos-illustrations/Logos-Plaines/logo-mobile-en.png" class="block h-[40px] w-auto p-1 md:w-[var(--nav-logo-width)]" alt="Logo" > </a> <div id="mega-menu" x-ref="megaMenu" x-cloak class="absolute start-0 top-[var(--nav-height)] order-2 hidden h-[calc(100dvh_-_var(--nav-height))] w-full flex-col justify-between overflow-y-auto overscroll-contain bg-beige-100 md:static md:order-1 md:flex md:h-auto" > <ul class="mx-4 flex flex-col justify-between divide-y divide-black overflow-hidden overflow-y-auto transition-all motion-reduce:transition-none md:mx-0 md:flex md:w-full md:flex-row md:divide-y-0" > <li x-trap="activeId == 26285" class="items-center bg-beige-100 transition-colors first-of-type:justify-start last-of-type:justify-end md:flex md:justify-center md:first-of-type:pl-4 md:last-of-type:pr-4" > <button @click="activeId = activeId == 26285 ? null : 26285" class="overflow-hidden group z-20 flex w-full items-center gap-2 py-6 text-center text-base font-semibold transition-opacity hover:opacity-70 hover:outline-0 focus:outline-0 focus-visible:outline-none md:w-auto md:justify-between md:border-0 md:px-3 md:text-sm xl:text-base" :aria-expanded="activeId == 26285" > The Plains <svg class="pointer-events-none ms-1 h-2.5 w-2.5 transition-transform group-aria-expanded:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="presentation" > <path d="M10.125 3.36328L5.7484 7.73985C5.60936 7.87891 5.38394 7.87891 5.24491 7.73985L0.868304 3.36328" /> </svg> </button> <div class="start-0 top-0 z-10 w-full overflow-y-auto border-b border-beige-300 pb-3 transition-all md:absolute md:top-[var(--nav-height)] md:max-h-[calc(100dvh-var(--nav-height))] md:bg-beige-100 md:px-12 md:py-20 md:shadow-sm" @mouseover.outside.throttle.500ms="!('ontouchstart' in window) && (activeId = null)" x-show="activeId == 26285" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" > <div x-data="{activeId: null}" class="flex gap-20 md:px-3 md:py-4"> <ul class="-mt-3 w-full divide-black md:mt-0 md:w-1/2 md:max-w-[430px] md:divide-y" > <li> <a href="https://www.plainsofabraham.ca/about-us" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26804" @mouseover="activeId = 26804" @blur="activeId = null" >About us </a> </li> <li> <a href="https://www.plainsofabraham.ca/plan-your-visit" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26302" @mouseover="activeId = 26302" @blur="activeId = null" >Plan your visit </a> </li> <li> <a href="https://www.plainsofabraham.ca/locations-historical-monuments/plains-of-abraham-museum" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26293" @mouseover="activeId = 26293" @blur="activeId = null" >Plains of Abraham Museum </a> </li> <li> <a href="https://www.plainsofabraham.ca/locations-historical-monuments/edwin-belanger-bandstand" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26305" @mouseover="activeId = 26305" @blur="activeId = null" >Edwin-Bélanger Bandstand </a> </li> <li> <a href="https://www.plainsofabraham.ca/locations-historical-monuments/maison-smith-cafe" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26296" @mouseover="activeId = 26296" @blur="activeId = null" >Maison Smith Café </a> </li> <li> <a href="https://www.plainsofabraham.ca/plains-abraham-map" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26805" @mouseover="activeId = 26805" @blur="activeId = null" >Interactive Map </a> </li> <li> <a href="https://www.plainsofabraham.ca/parking" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 48693" @mouseover="activeId = 48693" @blur="activeId = null" >Parking </a> </li> </ul> <div class="relative hidden aspect-[8/6] max-h-[500px] w-1/2 grow md:block"> <ul> <li class="relative flex w-full justify-end" :class="activeId == 26804 ? 'visible' : 'invisible'" > <img x-show="activeId == 26804" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Accueil/home-image-hero_2024-09-10-174054_xstc.png" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26302 ? 'visible' : 'invisible'" > <img x-show="activeId == 26302" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/plaines_hiver_21.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26293 ? 'visible' : 'invisible'" > <img x-show="activeId == 26293" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Mus%C3%A9e-des-plaines-dAbraham/20211013_112649_v2-2.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26305 ? 'visible' : 'invisible'" > <img x-show="activeId == 26305" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/JSCHPphoto__KEB_MarcHervieux__img0004_2025-03-25-153741_wlmh_2025-03-26-144151_ttcu.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26296 ? 'visible' : 'invisible'" > <img x-show="activeId == 26296" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Caf%C3%A9-Maison-Smith/IMG_7422.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26805 ? 'visible' : 'invisible'" > <img x-show="activeId == 26805" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Les-Plaines/CCBN-7644_web.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 48693 ? 'visible' : 'invisible'" > <img x-show="activeId == 48693" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Terrasse-Grey/CCBN_TraditionHorticole_C04_Credit-MaximeGatinois-04100.jpg" > </li> </ul> </div> </div> </div> </li> <li x-trap="activeId == 26286" class="items-center bg-beige-100 transition-colors first-of-type:justify-start last-of-type:justify-end md:flex md:justify-center md:first-of-type:pl-4 md:last-of-type:pr-4" > <button @click="activeId = activeId == 26286 ? null : 26286" class="overflow-hidden group z-20 flex w-full items-center gap-2 py-6 text-center text-base font-semibold transition-opacity hover:opacity-70 hover:outline-0 focus:outline-0 focus-visible:outline-none md:w-auto md:justify-between md:border-0 md:px-3 md:text-sm xl:text-base" :aria-expanded="activeId == 26286" > Activities and Events <svg class="pointer-events-none ms-1 h-2.5 w-2.5 transition-transform group-aria-expanded:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="presentation" > <path d="M10.125 3.36328L5.7484 7.73985C5.60936 7.87891 5.38394 7.87891 5.24491 7.73985L0.868304 3.36328" /> </svg> </button> <div class="start-0 top-0 z-10 w-full overflow-y-auto border-b border-beige-300 pb-3 transition-all md:absolute md:top-[var(--nav-height)] md:max-h-[calc(100dvh-var(--nav-height))] md:bg-beige-100 md:px-12 md:py-20 md:shadow-sm" @mouseover.outside.throttle.500ms="!('ontouchstart' in window) && (activeId = null)" x-show="activeId == 26286" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" > <div x-data="{activeId: null}" class="flex gap-20 md:px-3 md:py-4"> <ul class="-mt-3 w-full divide-black md:mt-0 md:w-1/2 md:max-w-[430px] md:divide-y" > <li> <a href="https://www.plainsofabraham.ca/activities-events?category%5B%5D=exhibitions-and-interpretive-activities" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 51613" @mouseover="activeId = 51613" @blur="activeId = null" >Exhibitions and Interpretive Activities </a> </li> <li> <a href="https://www.plainsofabraham.ca/activities-events?category%5B%5D=events-and-shows" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 51614" @mouseover="activeId = 51614" @blur="activeId = null" >Events and Shows </a> </li> <li> <a href="https://www.plainsofabraham.ca/activities-events?category%5B%5D=sports-leisure" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 51615" @mouseover="activeId = 51615" @blur="activeId = null" >Sports and Leisure </a> </li> <li> <a href="https://www.plainsofabraham.ca/activities-events" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26308" @mouseover="activeId = 26308" @blur="activeId = null" >All Activities and Events </a> </li> </ul> <div class="relative hidden aspect-[8/6] max-h-[500px] w-1/2 grow md:block"> <ul> <li class="relative flex w-full justify-end" :class="activeId == 51613 ? 'visible' : 'invisible'" > <img x-show="activeId == 51613" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Mus%C3%A9e-des-plaines-dAbraham/Bus-dAbraham/180_CCBN_PARCS_Credits_AmyGagnon_9367.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 51614 ? 'visible' : 'invisible'" > <img x-show="activeId == 51614" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/JSCHPphoto__KEB_MarcHervieux__img0004_2025-03-25-153741_wlmh.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 51615 ? 'visible' : 'invisible'" > <img x-show="activeId == 51615" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Cachette-de-larchitecte/ChristianGomez-CCBN-0460_web.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26308 ? 'visible' : 'invisible'" > <img x-show="activeId == 26308" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Dernier-verre-du-condamn/KOOPE%CC%81_DernierVerreDuCondamne_03-11-2023-56.jpg" > </li> </ul> </div> </div> </div> </li> <li class="hidden items-center focus:outline-none focus-visible:outline-none md:block" > <div :class="$store.navLogo.shown ? 'w-[var(--nav-logo-width)]' : 'w-0'" class="transition-all duration-300 ease-in-out motion-reduce:transition-none" x-cloak > <a :class="$store.navLogo.shown ? 'opacity-100 translate-y-0 will-change-transform pointer-events-auto' : 'opacity-0 translate-y-3 will-change-auto pointer-events-none'" href="https://www.plainsofabraham.ca/" class="absolute left-[calc(50%-var(--nav-logo-half-width))] top-0 flex h-full items-center transition-all duration-500 ease-in-out motion-reduce:transition-none" > <img src="https://ccbnwebprod.blob.core.windows.net/website/Image-de-marque-logos-pictos-illustrations/Logos-Plaines/L_PLAINS_1-line_Black_RGB-1.png" class="hidden h-auto w-[var(--nav-logo-width)] lg:block" alt="Logo" > <img src="https://ccbnwebprod.blob.core.windows.net/website/Image-de-marque-logos-pictos-illustrations/Logos-Plaines/a.svg" class="hidden h-[40px] w-auto p-1 md:block md:w-[var(--nav-logo-width)] lg:hidden" alt="Logo" > </a> </div> </li> <li x-trap="activeId == 26287" class="items-center bg-beige-100 transition-colors first-of-type:justify-start last-of-type:justify-end md:flex md:justify-center md:first-of-type:pl-4 md:last-of-type:pr-4" > <button @click="activeId = activeId == 26287 ? null : 26287" class="overflow-hidden group z-20 flex w-full items-center gap-2 py-6 text-center text-base font-semibold transition-opacity hover:opacity-70 hover:outline-0 focus:outline-0 focus-visible:outline-none md:w-auto md:justify-between md:border-0 md:px-3 md:text-sm xl:text-base" :aria-expanded="activeId == 26287" > Group Visits <svg class="pointer-events-none ms-1 h-2.5 w-2.5 transition-transform group-aria-expanded:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="presentation" > <path d="M10.125 3.36328L5.7484 7.73985C5.60936 7.87891 5.38394 7.87891 5.24491 7.73985L0.868304 3.36328" /> </svg> </button> <div class="start-0 top-0 z-10 w-full overflow-y-auto border-b border-beige-300 pb-3 transition-all md:absolute md:top-[var(--nav-height)] md:max-h-[calc(100dvh-var(--nav-height))] md:bg-beige-100 md:px-12 md:py-20 md:shadow-sm" @mouseover.outside.throttle.500ms="!('ontouchstart' in window) && (activeId = null)" x-show="activeId == 26287" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" > <div x-data="{activeId: null}" class="flex gap-20 md:px-3 md:py-4"> <ul class="-mt-3 w-full divide-black md:mt-0 md:w-1/2 md:max-w-[430px] md:divide-y" > <li> <a href="https://www.plainsofabraham.ca/group-visits/elementary-schools" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26290" @mouseover="activeId = 26290" @blur="activeId = null" >Elementary Schools </a> </li> <li> <a href="https://www.plainsofabraham.ca/group-visits/high-schools" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26291" @mouseover="activeId = 26291" @blur="activeId = null" >High Schools - Grade 7 to 12 </a> </li> <li> <a href="https://www.plainsofabraham.ca/group-visits/groups-adults" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26288" @mouseover="activeId = 26288" @blur="activeId = null" >Adult Groups </a> </li> <li> <a href="https://www.plainsofabraham.ca/group-visits/group-visits-info" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26289" @mouseover="activeId = 26289" @blur="activeId = null" >General Information </a> </li> </ul> <div class="relative hidden aspect-[8/6] max-h-[500px] w-1/2 grow md:block"> <ul> <li class="relative flex w-full justify-end" :class="activeId == 26290 ? 'visible' : 'invisible'" > <img x-show="activeId == 26290" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/R%C3%A9servations-de-groupe/JSChP_CCBN_activit%C3%A9_scolaire_img8574_LR-2.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26291 ? 'visible' : 'invisible'" > <img x-show="activeId == 26291" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/R%C3%A9servations-de-groupe/JSChP_CCBN_activit%C3%A9_scolaire_img9047_LR.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26288 ? 'visible' : 'invisible'" > <img x-show="activeId == 26288" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Mus%C3%A9e-des-plaines-dAbraham/Batailles-1759-1760/C.Gomez_CCBN_0884.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26289 ? 'visible' : 'invisible'" > <img x-show="activeId == 26289" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/R%C3%A9servations-de-groupe/C.Gomez_CCBN_0703_2024-07-29-195721_jeff.jpg" > </li> </ul> </div> </div> </div> </li> <li x-trap="activeId == 26292" class="items-center bg-beige-100 transition-colors first-of-type:justify-start last-of-type:justify-end md:flex md:justify-center md:first-of-type:pl-4 md:last-of-type:pr-4" > <button @click="activeId = activeId == 26292 ? null : 26292" class="overflow-hidden group z-20 flex w-full items-center gap-2 py-6 text-center text-base font-semibold transition-opacity hover:opacity-70 hover:outline-0 focus:outline-0 focus-visible:outline-none md:w-auto md:justify-between md:border-0 md:px-3 md:text-sm xl:text-base" :aria-expanded="activeId == 26292" > History and Heritage <svg class="pointer-events-none ms-1 h-2.5 w-2.5 transition-transform group-aria-expanded:rotate-180" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 11 11" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" role="presentation" > <path d="M10.125 3.36328L5.7484 7.73985C5.60936 7.87891 5.38394 7.87891 5.24491 7.73985L0.868304 3.36328" /> </svg> </button> <div class="start-0 top-0 z-10 w-full overflow-y-auto border-b border-beige-300 pb-3 transition-all md:absolute md:top-[var(--nav-height)] md:max-h-[calc(100dvh-var(--nav-height))] md:bg-beige-100 md:px-12 md:py-20 md:shadow-sm" @mouseover.outside.throttle.500ms="!('ontouchstart' in window) && (activeId = null)" x-show="activeId == 26292" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" > <div x-data="{activeId: null}" class="flex gap-20 md:px-3 md:py-4"> <ul class="-mt-3 w-full divide-black md:mt-0 md:w-1/2 md:max-w-[430px] md:divide-y" > <li> <a href="https://www.plainsofabraham.ca/locations-historical-monuments" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26301" @mouseover="activeId = 26301" @blur="activeId = null" >Historical Buildings and Monuments </a> </li> <li> <a href="https://www.plainsofabraham.ca/history-and-heritage/history-of-the-park" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26294" @mouseover="activeId = 26294" @blur="activeId = null" >History of the Park </a> </li> <li> <a href="https://www.plainsofabraham.ca/history-and-heritage/natural-heritage" class="group flex items-center justify-between py-3 hover:font-semibold md:py-5 md:text-xl" @focus="activeId = 26300" @mouseover="activeId = 26300" @blur="activeId = null" >Natural Heritage </a> </li> </ul> <div class="relative hidden aspect-[8/6] max-h-[500px] w-1/2 grow md:block"> <ul> <li class="relative flex w-full justify-end" :class="activeId == 26301 ? 'visible' : 'invisible'" > <img x-show="activeId == 26301" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Tour-Martello-1/plaines_banquephotosautomne_JPEG79.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26294 ? 'visible' : 'invisible'" > <img x-show="activeId == 26294" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Les-Plaines/shotsae%CC%81riennes_plaines_automneJPEG_14_2024-09-10-174920_arod.jpg" > </li> <li class="relative flex w-full justify-end" :class="activeId == 26300 ? 'visible' : 'invisible'" > <img x-show="activeId == 26300" class="absolute right-0 top-0 max-h-[500px] w-full object-contain transition-all" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Jardin-Jeanne-dArc/jeannedarc_soir15_2024-07-22-142117_ntln.jpg" > </li> </ul> </div> </div> </div> </li> </ul> <div class="sticky bottom-0 left-0 w-full bg-beige-100 md:hidden"> <div class="mb-2 mt-4 px-4 py-2 md:hidden"> <ul class="flex flex-col space-y-4"> <li> <a href="https://www.plainsofabraham.ca/blog" class="block" >Blog</a> </li> <li> <a href="https://www.plainsofabraham.ca/plains-abraham-map" class="block" >Interactive Map</a> </li> <li> <a href="https://www.plainsofabraham.ca/careers" class="block" >Career</a> </li> <li> <a href="https://www.plainsofabraham.ca/contact" class="block" >Contact</a> </li> </ul> </div> <ul class="flex w-full items-center justify-between gap-4 space-x-4 border-t border-beige-300 px-4 py-4"> <div class="flex items-center justify-between gap-8"> </div> <div> <li> <a class="group flex items-center justify-between gap-2 rounded-full bg-black py-1 pl-2 pr-3 text-xs font-medium uppercase text-white" href="https://www.plainesdabraham.ca/activites-evenements" > <svg class="h-[18px] w-[18px] transition-all group-hover:translate-x-1" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' > <path d="M19.5849 9.95084C19.5856 11.2135 19.3375 12.4639 18.8549 13.6307C18.3724 14.7975 17.6647 15.8578 16.7723 16.7511C15.8799 17.6444 14.8203 18.3532 13.6541 18.837C12.4878 19.3208 11.2376 19.5702 9.97493 19.5708C7.4127 19.5283 4.97097 18.4755 3.18116 16.6415C1.39136 14.8075 0.398352 12.3409 0.418262 9.77834C0.420314 7.32896 1.38123 4.97772 3.09527 3.22801C4.80932 1.47829 7.14028 0.469166 9.5891 0.416677C9.72743 0.410843 9.86576 0.408343 10.0058 0.408343C11.2625 0.401526 12.5082 0.643428 13.6711 1.12012C14.834 1.5968 15.8911 2.29886 16.7815 3.18584C17.6719 4.07282 18.378 5.1272 18.8591 6.28824C19.3403 7.44929 19.5869 8.69405 19.5849 9.95084Z" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.58594 0.416748C4.58594 5.83341 4.58594 12.9001 9.58594 19.5667" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M10.4219 0.416748C15.4219 5.83341 15.4219 12.8976 10.4219 19.5642" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.98828 4.56982H17.9333" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M0.421875 9.56982H19.586" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1.65234 14.5698H18.4023" stroke="white" stroke-linecap="round" stroke-linejoin="round"/> </svg> fr</a> </li> </div> </ul> </div> </div> <div class="relative order-1 flex items-center gap-2 space-x-1 md:hidden md:space-x-2"> <div class="relative" x-transition:enter="transition motion-reduce:transition-none ease-in-out duration-300" x-transition:enter-start="opacity-0 translate-x-10" x-transition:enter-end="opacity-100 translate-x-0" x-transition:leave="transition motion-reduce:transition-none ease-in-out duration-200" x-transition:leave-start="opacity-100 translate-x-0" x-transition:leave-end="opacity-0 translate-x-6" x-show="$store.megaMenu.open" > <div class="z-1 pointer-events-none relative" > <svg class="size-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" role="presentation" > <path d="M1.01563 8.82812C1.01562 9.85408 1.2177 10.87 1.61032 11.8178C2.00293 12.7657 2.5784 13.6269 3.30385 14.3524C4.02931 15.0779 4.89055 15.6533 5.83841 16.0459C6.78627 16.4385 7.80217 16.6406 8.82812 16.6406C9.85408 16.6406 10.87 16.4385 11.8178 16.0459C12.7657 15.6533 13.6269 15.0779 14.3524 14.3524C15.0779 13.6269 15.6533 12.7657 16.0459 11.8178C16.4385 10.87 16.6406 9.85408 16.6406 8.82812C16.6406 7.80217 16.4385 6.78627 16.0459 5.83841C15.6533 4.89055 15.0779 4.02931 14.3524 3.30385C13.6269 2.5784 12.7657 2.00293 11.8178 1.61032C10.87 1.2177 9.85408 1.01563 8.82812 1.01562C7.80217 1.01563 6.78627 1.2177 5.83841 1.61032C4.89055 2.00293 4.02931 2.5784 3.30385 3.30385C2.5784 4.02931 2.00293 4.89055 1.61032 5.83841C1.2177 6.78627 1.01562 7.80217 1.01563 8.82812Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.9836 18.9836L14.3516 14.3516" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div x-data="search" x-trap.noscroll="shown" data-url="https://www.plainsofabraham.ca/search/results" data-target="quick-search-mobile" class="z-30 mx-auto hidden max-w-3xl normal-case" :class="shown ? 'fixed inset-0 w-full px-3 pt-16 pb-12 !flex flex-col h-dvh' : 'relative !block'" > <div :class="shown ? 'fixed inset-0 w-full h-dvh bg-beige-100' : ''" class="z-10" @click="close()"></div> <form x-ref="form" class="relative z-20" action="https://www.plainsofabraham.ca/search"> <input x-ref="filterQuery" @keyup.escape="close" @click="open" @keyup.debounce.400ms="submit" @keyup.enter="$event.target.form.submit()" name="q" autocomplete="off" placeholder="Search for a location, activity, event, etc." class="font-semibold placeholder:truncate placeholder:font-normal placeholder:text-black/60 focus:border focus:border-b-0 focus:border-black focus:shadow-none focus:outline-0 focus:ring-0" :class="shown ? 'w-full bg-beige-300 border-b-0 py-4 pl-4 pr-10' : 'cursor-pointer opacity-0 absolute w-[22px] h-[22px]'" type="text" > <div x-show="shown" class="pointer-events-none absolute right-4 top-5 h-[20px] w-[20px] opacity-40" aria-hidden="true" > <svg class="size-4" xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20' > <path d="M1.01563 8.82812C1.01562 9.85408 1.2177 10.87 1.61032 11.8178C2.00293 12.7657 2.5784 13.6269 3.30385 14.3524C4.02931 15.0779 4.89055 15.6533 5.83841 16.0459C6.78627 16.4385 7.80217 16.6406 8.82812 16.6406C9.85408 16.6406 10.87 16.4385 11.8178 16.0459C12.7657 15.6533 13.6269 15.0779 14.3524 14.3524C15.0779 13.6269 15.6533 12.7657 16.0459 11.8178C16.4385 10.87 16.6406 9.85408 16.6406 8.82812C16.6406 7.80217 16.4385 6.78627 16.0459 5.83841C15.6533 4.89055 15.0779 4.02931 14.3524 3.30385C13.6269 2.5784 12.7657 2.00293 11.8178 1.61032C10.87 1.2177 9.85408 1.01563 8.82812 1.01562C7.80217 1.01563 6.78627 1.2177 5.83841 1.61032C4.89055 2.00293 4.02931 2.5784 3.30385 3.30385C2.5784 4.02931 2.00293 4.89055 1.61032 5.83841C1.2177 6.78627 1.01562 7.80217 1.01563 8.82812Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18.9836 18.9836L14.3516 14.3516" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div x-show="shown" class="fixed right-3 top-3"> <a class="inline-flex cursor-pointer items-center justify-between font-semibold transition-all bg-black text-beige-100 hover:bg-black/70 px-2 py-2 gap-1 [&_.animate-arrow]:transition-transform [&:hover_.animate-arrow]:translate-x-1" @click="close" > <svg class="size-6" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' > <path d="M18 6 6 18"/><path d="m6 6 12 12"/> </svg> </a> </div> </form> <div x-show="!shown" class="pointer-events-none relative z-20 -mt-[22px] h-[22px] w-5" ></div> <div x-show="shown" class="z-20 max-h-[calc(100dvh-100px)] overflow-y-auto overscroll-contain border border-t-0 border-black bg-beige-100" > <div x-data="htmlGet" data-source="quick-search-mobile" class="max-w-4xl" @html-get-clear.window="clear" @html-get-load.window="load" > <div x-show="error" class="p-4 text-sm font-normal opacity-60">Search error. Try again later.</div> <div x-show="loading" class="p-4"><svg class="size-5 animate-spin" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' > <path d="M21 12a9 9 0 1 1-6.219-8.56"/> </svg> </div> <div x-ref="content" class="quick-search group p-4 transition-opacity" x-show="ready" ></div> </div> </div> </div> </div> <button @click="toggleNav" type="button" class="inline-flex size-10 items-center justify-center p-2 text-sm text-black focus:outline-none md:hidden" aria-controls="mega-menu" aria-expanded="false" > <span class="sr-only">Open main menu</span> <svg class="size-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14" > <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15" /> </svg> </button> </div> </div> </nav> </div> <div class="flex flex-col flex-wrap justify-between md:flex-row"> </div><article x-data="{width: window.innerWidth}" class="w-full" @resize.window="width = window.innerWidth"> <div class="spacing-x spacing-x-md overflow-x-hidden pt-20 "> <div class="motion-safe:animate-coming-in"> <h1 class="mb-10 text-5xl font-bold !leading-[1.1] md:mb-20 md:text-6xl lg:text-7xl">Activities and Events</h1> </div> </div> <div class="spacing-x spacing-x-md"> <template x-if="width >= 1024"> <form class="@container mb-20 mt-12" x-data="filter" data-target="event" data-url="https://www.plainsofabraham.ca/event/results" > <div x-data="filterPredefinedDates"> <select class="!bg-white-chevron hover:!bg-black-chevron h-[66px] w-full bg-black !bg-auto !bg-[right_20px_center] p-5 font-bold text-beige-100 transition hover:bg-accent-500 hover:text-black @4xl:hidden motion-reduce:transition-none" :class="isActive(null, null)? '' : '!bg-black-chevron !bg-accent-500 text-black'" @change="onSelectPreset($event.target.value)" @change.debounce.50ms="if ($event.target.value != 'specific_date') { submit() } else {$event.target.value = 'none'}" > <option value="none" :selected="isActive(null, null)">Select a date</option> <template x-if="isActive(selectedStartDate, selectedEndDate, false)"> <option :value="selectedStartDate + '|' + selectedEndDate" :selected="isActive(selectedStartDate, selectedEndDate, false)" x-text="getFormattedDate(selectedStartDate, 'en-CA') + (selectedStartDate != selectedEndDate? (' - ' + getFormattedDate(selectedEndDate, 'en-CA')) : '')" ></option> </template> <option value="2025-03-27|2025-03-27" :selected="isActive('2025-03-27', '2025-03-27')" > Today </option> <option value="2025-03-27|2025-03-30" :selected="isActive('2025-03-27', '2025-03-30')" > This week </option> <option value="2025-03-30|2025-04-05" :selected="isActive('2025-03-30', '2025-04-05')" > Next week </option> <option value="2025-04-01|2025-04-30" :selected="isActive('2025-04-01', '2025-04-30')" > Next month </option> <option value="specific_date">Specific dates</option> </select> <div class="hidden grid-cols-4 gap-[1px] text-beige-100 @4xl:grid"> <div class="relative flex cursor-pointer flex-row bg-black transition-colors hover:bg-accent-500 hover:text-black" :class="isActive(selectedStartDate, selectedEndDate, false)? '!bg-accent-500 text-black' : ''" > <div class="flex-1 p-5 pr-0" @click="onToggleDate(selectedStartDate, selectedEndDate, false)" @click.debounce.50ms="submit" > <span x-show="selectedStartDate == '2025-03-27' && selectedEndDate == '2025-03-27'"> <span class="hidden font-semibold @6xl:inline">Today:</span> <span class="font-bold" x-text="getFormattedDate('2025-03-27', 'en-CA')" ></span> </span> <span class="font-bold" x-show="selectedStartDate != '2025-03-27' || selectedEndDate != '2025-03-27'" x-text="getFormattedDate(selectedStartDate, 'en-CA') + (selectedStartDate != selectedEndDate? (' - ' + getFormattedDate(selectedEndDate, 'en-CA')) : '')" ></span> </div> <div class="flex h-full items-center p-5 transition-colors hover:bg-accent-600 hover:bg-opacity-30 hover:text-black" @click="showPicker()" > <svg class="size-3" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' > <path d="M10.125 3.36328L5.7484 7.73985C5.60936 7.87891 5.38394 7.87891 5.24491 7.73985L0.868304 3.36328" /> </svg> </div> <input x-ref="datepicker" type="date" class="absolute bottom-0 right-1 h-[1px] w-[1px] p-0 opacity-0 @4xl:left-[calc(25%_-_3rem)] @4xl:right-auto" data-language-code="en-CA" @change.debounce.50ms="submit" > </div> <div class="cursor-pointer bg-black p-5 font-semibold transition hover:bg-accent-500 hover:text-black motion-reduce:transition-none" @click="onToggleDate('2025-03-27', '2025-03-30')" @click.debounce.50ms="submit" :class="isActive('2025-03-27', '2025-03-30')? '!bg-accent-500 text-black' : ''" > This week </div> <div class="cursor-pointer bg-black p-5 font-semibold transition hover:bg-accent-500 hover:text-black motion-reduce:transition-none" @click="onToggleDate('2025-03-30', '2025-04-05')" @click.debounce.50ms="submit" :class="isActive('2025-03-30', '2025-04-05')? '!bg-accent-500 text-black' : ''" > Next week </div> <div class="cursor-pointer bg-black p-5 font-semibold transition hover:bg-accent-500 hover:text-black motion-reduce:transition-none" @click="onToggleDate('2025-04-01', '2025-04-30')" @click.debounce.50ms="submit" :class="isActive('2025-04-01', '2025-04-30')? '!bg-accent-500 text-black' : ''" > Next month </div> <template x-if="startDate != null && endDate != null && startDate != '' && endDate != ''"> <div class="hidden"> <input type="hidden" name="startDate" x-model="startDate"> <input type="hidden" name="endDate" x-model="endDate"> <input type="hidden" name="preset" x-model="preset"> </div> </template> </div> </div> </form> </template> </div> <div class="spacing-x spacing-x-md mb-20 grid grid-cols-4 gap-12"> <div class="col-span-4 lg:col-span-1"> <div x-data="{expanded: false}" class="max-lg:flex max-lg:flex-wrap max-lg:gap-[10px]"> <div class="max-lg:w-[calc(100%-34px-2.5rem)]"> <template x-if="width < 1024"> <form class="@container " x-data="filter" data-target="event" data-url="https://www.plainsofabraham.ca/event/results" > <div x-data="filterPredefinedDates"> <select class="!bg-white-chevron hover:!bg-black-chevron h-[66px] w-full bg-black !bg-auto !bg-[right_20px_center] p-5 font-bold text-beige-100 transition hover:bg-accent-500 hover:text-black @4xl:hidden motion-reduce:transition-none" :class="isActive(null, null)? '' : '!bg-black-chevron !bg-accent-500 text-black'" @change="onSelectPreset($event.target.value)" @change.debounce.50ms="if ($event.target.value != 'specific_date') { submit() } else {$event.target.value = 'none'}" > <option value="none" :selected="isActive(null, null)">Select a date</option> <template x-if="isActive(selectedStartDate, selectedEndDate, false)"> <option :value="selectedStartDate + '|' + selectedEndDate" :selected="isActive(selectedStartDate, selectedEndDate, false)" x-text="getFormattedDate(selectedStartDate, 'en-CA') + (selectedStartDate != selectedEndDate? (' - ' + getFormattedDate(selectedEndDate, 'en-CA')) : '')" ></option> </template> <option value="2025-03-27|2025-03-27" :selected="isActive('2025-03-27', '2025-03-27')" > Today </option> <option value="2025-03-27|2025-03-30" :selected="isActive('2025-03-27', '2025-03-30')" > This week </option> <option value="2025-03-30|2025-04-05" :selected="isActive('2025-03-30', '2025-04-05')" > Next week </option> <option value="2025-04-01|2025-04-30" :selected="isActive('2025-04-01', '2025-04-30')" > Next month </option> <option value="specific_date">Specific dates</option> </select> <div class="hidden grid-cols-4 gap-[1px] text-beige-100 @4xl:grid"> <div class="relative flex cursor-pointer flex-row bg-black transition-colors hover:bg-accent-500 hover:text-black" :class="isActive(selectedStartDate, selectedEndDate, false)? '!bg-accent-500 text-black' : ''" > <div class="flex-1 p-5 pr-0" @click="onToggleDate(selectedStartDate, selectedEndDate, false)" @click.debounce.50ms="submit" > <span x-show="selectedStartDate == '2025-03-27' && selectedEndDate == '2025-03-27'"> <span class="hidden font-semibold @6xl:inline">Today:</span> <span class="font-bold" x-text="getFormattedDate('2025-03-27', 'en-CA')" ></span> </span> <span class="font-bold" x-show="selectedStartDate != '2025-03-27' || selectedEndDate != '2025-03-27'" x-text="getFormattedDate(selectedStartDate, 'en-CA') + (selectedStartDate != selectedEndDate? (' - ' + getFormattedDate(selectedEndDate, 'en-CA')) : '')" ></span> </div> <div class="flex h-full items-center p-5 transition-colors hover:bg-accent-600 hover:bg-opacity-30 hover:text-black" @click="showPicker()" > <svg class="size-3" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' > <path d="M10.125 3.36328L5.7484 7.73985C5.60936 7.87891 5.38394 7.87891 5.24491 7.73985L0.868304 3.36328" /> </svg> </div> <input x-ref="datepicker" type="date" class="absolute bottom-0 right-1 h-[1px] w-[1px] p-0 opacity-0 @4xl:left-[calc(25%_-_3rem)] @4xl:right-auto" data-language-code="en-CA" @change.debounce.50ms="submit" > </div> <div class="cursor-pointer bg-black p-5 font-semibold transition hover:bg-accent-500 hover:text-black motion-reduce:transition-none" @click="onToggleDate('2025-03-27', '2025-03-30')" @click.debounce.50ms="submit" :class="isActive('2025-03-27', '2025-03-30')? '!bg-accent-500 text-black' : ''" > This week </div> <div class="cursor-pointer bg-black p-5 font-semibold transition hover:bg-accent-500 hover:text-black motion-reduce:transition-none" @click="onToggleDate('2025-03-30', '2025-04-05')" @click.debounce.50ms="submit" :class="isActive('2025-03-30', '2025-04-05')? '!bg-accent-500 text-black' : ''" > Next week </div> <div class="cursor-pointer bg-black p-5 font-semibold transition hover:bg-accent-500 hover:text-black motion-reduce:transition-none" @click="onToggleDate('2025-04-01', '2025-04-30')" @click.debounce.50ms="submit" :class="isActive('2025-04-01', '2025-04-30')? '!bg-accent-500 text-black' : ''" > Next month </div> <template x-if="startDate != null && endDate != null && startDate != '' && endDate != ''"> <div class="hidden"> <input type="hidden" name="startDate" x-model="startDate"> <input type="hidden" name="endDate" x-model="endDate"> <input type="hidden" name="preset" x-model="preset"> </div> </template> </div> </div> </form> </template> </div> <div class="max-w-[calc(24px_+_2.5rem)] border border-black p-5 transition motion-reduce:transition-none lg:hidden" @click="expanded = !expanded" :class="expanded? 'bg-black text-beige-100 [&_*]:stroke-current': ''" > <svg class="size-6" xmlns='http://www.w3.org/2000/svg' width='24' height='25' viewBox='0 0 24 25' fill='none' > <g clip-path="url(#clip0_6922_1718)"> <path d="M2.25 1.25H21.75C21.75 1.25 23.25 1.25 23.25 2.75V22.25C23.25 22.25 23.25 23.75 21.75 23.75H2.25C2.25 23.75 0.75 23.75 0.75 22.25V2.75C0.75 2.75 0.75 1.25 2.25 1.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M13 16.25H18.75" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M5.25 16.25H8" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M13 16.25C13 16.7445 12.8534 17.2278 12.5787 17.6389C12.304 18.05 11.9135 18.3705 11.4567 18.5597C10.9999 18.7489 10.4972 18.7984 10.0123 18.702C9.52732 18.6055 9.08187 18.3674 8.73223 18.0178C8.3826 17.6681 8.1445 17.2227 8.04804 16.7377C7.95157 16.2528 8.00108 15.7501 8.1903 15.2933C8.37952 14.8365 8.69995 14.446 9.11108 14.1713C9.5222 13.8966 10.0055 13.75 10.5 13.75C11.163 13.75 11.7989 14.0134 12.2678 14.4822C12.7366 14.9511 13 15.587 13 16.25Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14 8.75H5.25" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M19 8.75C19 8.25555 18.8534 7.7722 18.5787 7.36108C18.304 6.94995 17.9135 6.62952 17.4567 6.4403C16.9999 6.25108 16.4972 6.20157 16.0123 6.29804C15.5273 6.3945 15.0819 6.6326 14.7322 6.98223C14.3826 7.33187 14.1445 7.77732 14.048 8.26228C13.9516 8.74723 14.0011 9.2499 14.1903 9.70671C14.3795 10.1635 14.7 10.554 15.1111 10.8287C15.5222 11.1034 16.0055 11.25 16.5 11.25C17.163 11.25 17.7989 10.9866 18.2678 10.5178C18.7366 10.0489 19 9.41304 19 8.75Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </g> <defs> <clipPath id="clip0_6922_1718"> <rect width="24" height="24" fill="white" transform="translate(0 0.5)"/> </clipPath> </defs> </svg> </div> <div class="w-full "> <div x-show="expanded" class="overflow-hidden transition-all max-lg:px-4 lg:!block max-lg:border max-lg:border-black" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-3" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-in duration-100" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-3" > <form class="border-y py-7 border-y" x-data="filter" data-target="event" data-url="https://www.plainsofabraham.ca/event/results" > <div class="mb-5 text-lg font-medium lg:mb-7">Types of activities</div> <div class="flex flex-col gap-5 lg:gap-6" x-data="{selectedCategories: []}" > <label class="flex cursor-pointer gap-2"> <input type="checkbox" id="all" @change="selectedCategories = []" @change.debounce.50ms="submit" class="checked:bg-white-checkmark size-6 rounded-full border border-black bg-beige-300 transition-colors checked:bg-black checked:bg-auto checked:bg-center focus:ring-transparent" :checked="selectedCategories.length === 0" > <span class="font-medium">All</span> </label> <label class="flex cursor-pointer gap-2" for="events-and-shows"> <input type="checkbox" id="events-and-shows" name="category[]" value="events-and-shows" @change="submit" class="checked:bg-white-checkmark size-6 rounded-full border border-black bg-beige-300 transition-colors checked:bg-black checked:bg-auto checked:bg-center focus:ring-transparent" x-model="selectedCategories" > <span class="font-medium">Events and Shows</span> </label> <label class="flex cursor-pointer gap-2" for="exhibitions-and-interpretive-activities"> <input type="checkbox" id="exhibitions-and-interpretive-activities" name="category[]" value="exhibitions-and-interpretive-activities" @change="submit" class="checked:bg-white-checkmark size-6 rounded-full border border-black bg-beige-300 transition-colors checked:bg-black checked:bg-auto checked:bg-center focus:ring-transparent" x-model="selectedCategories" > <span class="font-medium">Exhibitions and Interpretive Activities</span> </label> <label class="flex cursor-pointer gap-2" for="nature"> <input type="checkbox" id="nature" name="category[]" value="nature" @change="submit" class="checked:bg-white-checkmark size-6 rounded-full border border-black bg-beige-300 transition-colors checked:bg-black checked:bg-auto checked:bg-center focus:ring-transparent" x-model="selectedCategories" > <span class="font-medium">Nature</span> </label> <label class="flex cursor-pointer gap-2" for="sports-leisure"> <input type="checkbox" id="sports-leisure" name="category[]" value="sports-leisure" @change="submit" class="checked:bg-white-checkmark size-6 rounded-full border border-black bg-beige-300 transition-colors checked:bg-black checked:bg-auto checked:bg-center focus:ring-transparent" x-model="selectedCategories" > <span class="font-medium">Sports and Leisure</span> </label> </div> </form> <form class="border-y py-7 border-t-0" x-data="filter" data-target="event" data-url="https://www.plainsofabraham.ca/event/results" > <div class="flex flex-col gap-5 lg:gap-6" x-data="{checked: false, changed: false}" > <label class="flex cursor-pointer items-center justify-between gap-2"> <div class="text-lg font-medium">Free activities</div> <div class="group flex h-6 w-11 items-center justify-between gap-2 rounded-full border border-black bg-beige-300 py-1 pl-1 pr-3 text-xs font-medium text-white transition" :class="[(checked? 'bg-black' : '')]" @mouseleave="changed = false" > <div class="h-[18px] w-[18px] rounded-full bg-black transition-all" :class="[(checked? 'translate-x-4 !bg-beige-300' : ''), (!changed && checked? 'group-hover:translate-x-3': ''), (!changed && !checked? 'group-hover:translate-x-1' : '')]" ></div> <input type="checkbox" class="hidden" name="free" value="1" x-model="checked" @change="submit" @click="changed = true" > </div> </label> </div> </form> <form class="border-y py-7 border-y-0" x-data="filter" data-target="event" data-url="https://www.plainsofabraham.ca/event/results" > <div class="flex flex-row flex-wrap gap-2" x-data="{selectedTags: []}" > <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('art')? 'bg-black text-white' : '')]" > Art <input type="checkbox" class="hidden" name="eventTag[]" value="art" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('conference')? 'bg-black text-white' : '')]" > Conference <input type="checkbox" class="hidden" name="eventTag[]" value="conference" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('edwin-belanger-bandstand')? 'bg-black text-white' : '')]" > Edwin-Bélanger Bandstand <input type="checkbox" class="hidden" name="eventTag[]" value="edwin-belanger-bandstand" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('escape-games')? 'bg-black text-white' : '')]" > Escape games <input type="checkbox" class="hidden" name="eventTag[]" value="escape-games" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('automne')? 'bg-black text-white' : '')]" > Fall <input type="checkbox" class="hidden" name="eventTag[]" value="automne" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('family-fun')? 'bg-black text-white' : '')]" > Family Fun <input type="checkbox" class="hidden" name="eventTag[]" value="family-fun" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('halloween')? 'bg-black text-white' : '')]" > Halloween <input type="checkbox" class="hidden" name="eventTag[]" value="halloween" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('indoor-activity')? 'bg-black text-white' : '')]" > Indoor Activity <input type="checkbox" class="hidden" name="eventTag[]" value="indoor-activity" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('march-break')? 'bg-black text-white' : '')]" > March Break <input type="checkbox" class="hidden" name="eventTag[]" value="march-break" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('outdoor-activity')? 'bg-black text-white' : '')]" > Outdoor Activity <input type="checkbox" class="hidden" name="eventTag[]" value="outdoor-activity" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('spring')? 'bg-black text-white' : '')]" > Spring <input type="checkbox" class="hidden" name="eventTag[]" value="spring" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('summer')? 'bg-black text-white' : '')]" > Summer <input type="checkbox" class="hidden" name="eventTag[]" value="summer" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('treasure-hunts')? 'bg-black text-white' : '')]" > Treasure hunts <input type="checkbox" class="hidden" name="eventTag[]" value="treasure-hunts" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('activité-virtuelle')? 'bg-black text-white' : '')]" > Virtual activity <input type="checkbox" class="hidden" name="eventTag[]" value="activité-virtuelle" x-model="selectedTags" @change="submit" > </label> <label class="cursor-pointer border border-black px-3 py-1 transition" :class="[(selectedTags.includes('winter')? 'bg-black text-white' : '')]" > Winter <input type="checkbox" class="hidden" name="eventTag[]" value="winter" x-model="selectedTags" @change="submit" > </label> </div> </form> </div> </div> </div> </div> <div x-data="htmlGet({ready: true})" data-source="event" class="col-span-4 lg:col-span-3" @html-get-load.window="load" > <div x-show="error" class="p-4 text-sm font-normal opacity-60"> Unable to retrieve events and activities </div> <div x-show="loading" class="flex flex-col items-center justify-center gap-8 px-12 py-20"> <svg class="size-10 animate-spin" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' > <path d="M21 12a9 9 0 1 1-6.219-8.56"/> </svg> <div class="text-xl font-bold">Loading events and activities</div> </div> <div x-ref="content" class="transition-opacity" x-show="ready" > <div class="col-span-4 lg:col-span-3"> <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3"> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/sugar-season" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Sugar\u0020Season\u0020by\u0020Smith\u0020Caf\u00E9' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> March 29-30, April 5-6, and April 12-13 <div class="shrink-0 text-right"> <span class="text-base font-semibold"></span> </div> </span> <span class="block truncate pt-3.5"> Maison Smith Café </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Sugar Season by Smith Café </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Cabane-%C3%A0-sucre-Smith-Caf%C3%A9/IMG_6832.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/quebec-1775-1776-the-last-siege" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Qu\u00E9bec\u00201775\u002D1776\u003A\u0020The\u0020Last\u0020Siege\u0020\u002D\u0020Conference' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> April 10 <div class="shrink-0 text-right"> <span class="text-base font-semibold">$12.25</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Québec 1775-1776: The Last Siege - Conference </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="F.H. Wellington (1860). Défense de Québec face à une attaque américaine, 1775. Wikimedia Commons" src="https://ccbnwebprod.blob.core.windows.net/website/Histoire/Occupation-civile-et-militaire/Invasion-1775/Image3.png" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/loveu2" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'LOVEU2' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> June 19 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> LOVEU2 </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/LOVEU2/IMG_0695.JPG" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/tennessee-whiskey" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Tennessee\u0020Whiskey' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> June 21 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Tennessee Whiskey </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Tennessee-Whiskey/Tennessee-Whiskey-2023%C2%A9cvezphoto-378.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/chico-band" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Chico\u0020Band' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> June 26 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Chico Band </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Chico-Band/IMG_2728.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/christian-marc-gendron" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Christian\u0020Marc\u0020Gendron\u0020et\u0020Manon\u0020S\u00E9guin' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> June 28 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Christian Marc Gendron et Manon Séguin </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Christian-Marc-Gendron/CMGManon_2021_midrez-2-2_2025-03-25-200642_paop.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/andreanne-a-malette" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Andr\u00E9anne\u0020A.\u0020Malette' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 17 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Andréanne A. Malette </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="Image d'Andréanne A. Malette portant ses bras devant elle et couvrant une partie de son visage." src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Andr%C3%A9anne-A-Malette/Andreanne-A.Malette_creditCatherineDeslauriers-1-2_2025-03-11-171605_gqnr.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/marimba" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Marimba\u0020et\u0020le\u0020djemb\u00E9\u0020du\u0020tonnerre' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 19 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Marimba et le djembé du tonnerre </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Marimba/cid_550D8384-7775-4DD5-9CA8-CA2D171B7EE5_2025-03-11-201427_wfck.png" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/sabor-19" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Sabor\u002019' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 19 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Sabor 19 </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Sabor-19/IMG-20250129-WA0003.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/duo-phoenix" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Duo\u0020Phoenix' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 24 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Duo Phoenix </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Pehonix/DSC4041.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/guylaine-tanguay" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Guylaine\u0020Tanguay' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 24 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Guylaine Tanguay </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="Guylaine Tanguay" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Guylaine-Tanguay/cid_f_m6tnzjxr0-1.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/gentil-geant" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'L\u0027orgue\u0020du\u0020Gentil\u0020G\u00E9ant' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 26 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> L'orgue du Gentil Géant </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Gentil-G%C3%A9ant/Orgue-du-gentil-ge%CC%81ant-affiche3000_2025-03-11-194506_nfci.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/yvan-pedneault" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Yvan\u0020Pedneault' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 26 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Yvan Pedneault </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Yvan-Pedneault/Yvan_Pedneault_Queen_Photo_2025-03-12-200552_jnag.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/generation-crooners" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'G\u00E9n\u00E9ration\u0020Crooners' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 31 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Génération Crooners </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Generation-Crooners/Ge%CC%81ne%CC%81ration-Crooners3-1.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/lba-band" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'LBA\u0020Band' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 2 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> LBA Band </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/LBA-Band/Photo-promo-2023.png" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/coco-country-band" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Coco\u0020Country\u0020Band' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 7 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Coco Country Band </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Coco-Country-Band/CCB46539.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/arthur-l-aventurier" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Arthur\u0020l\u0027Aventurier' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 9 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Arthur l'Aventurier </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Arthur-Aventurier/Photo-Arthur-et-dromadaire_Maroc_1.2.18.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/new-world-men" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'New\u0020World\u0020Men' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 9 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> New World Men </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/New-World-Men/NWM-Moving-Pictures-Promo-NO-LOGO.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/mike-deway" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Mike\u0020DeWay' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 14 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Mike DeWay </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Mike-DeWay/MR6_4925-Modifier.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/kawandak" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Kawandak' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 16 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Kawandak </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Kawandak/Kawandak_2.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/stagiaire-monsieur-ben" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Le\u0020Stagiaire\u0020de\u0020Monsieur\u0020Ben' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 16 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Le Stagiaire de Monsieur Ben </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Stagiaire-de-M-Ben/IMG_0121.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/gabrielle-destroismaisons" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Gabrielle\u0020Destroismaisons' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 21 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Gabrielle Destroismaisons </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Gabrielle-Destroismaisons/GD3M-3-1.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/patrick-norman" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Patrick\u0020Norman\u0020and\u0020Nathalie\u0020Lord' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> August 23 <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Edwin-Bélanger Bandstand </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Patrick Norman and Nathalie Lord </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Lieux-et-points-dint%C3%A9r%C3%AAt/Kiosque-Edwin-B%C3%A9langer/Prog-2025/Patrick-Norman/IMG_1191-1.jpeg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/shoot-score" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Treasure\u0020hunt\u003A\u0020Shoot,\u0020Score\u0021' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> December 1st to March 31 <div class="shrink-0 text-right"> <span class="text-base font-semibold">$12.50</span> </div> </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl "> Treasure hunt: Shoot, Score! </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Et-lance-et-compte/CG1_0705.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/plains-of-abraham-trail" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Plains\u0020of\u0020Abraham\u0020Trail' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> Year-round Access <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Gilmour Hill </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Plains of Abraham Trail </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="Pedestrians and a cyclist on a path on a sunny autumn day" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/SENTIERS/49_sentierautomneCCBN_BR.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/nature-trail" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Nature\u0020Trail' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> Year-round Access <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Grey Terrace </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Nature Trail </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/SENTIERS/plaines_banquephotosautomne_JPEG26.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/quebec-1759" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Minecraft\u0020Virtual\u0020Landscape\u003A\u0020Plains\u0020of\u0020Abraham\u0020\u002D\u0020Qu\u00E9bec\u00201759' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> Year-round <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl "> Minecraft Virtual Landscape: Plains of Abraham - Québec 1759 </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Quebec-1759/Clochers-de-Qc.png" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/the-landscape-architect-and-the-hidden-treasure" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'The\u0020Landscape\u0020Architect\u0020and\u0020the\u0020Hidden\u0020Treasure' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> May 9 to September 21, 2025 <div class="shrink-0 text-right"> <span class="text-base font-semibold">$13.00</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> The Landscape Architect and the Hidden Treasure </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="Mother and daughter smiling while looking at a map, standing near a Martello tower in the Plains of Abraham park." src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Cachette-de-larchitecte/ChristianGomez-CCBN-0461_web.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/the-forgotten-ones" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'The\u0020Forgotten\u0020Ones' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> May 9 to September 21 <div class="shrink-0 text-right"> <span class="text-base font-semibold">$49</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> The Forgotten Ones </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Jeux-d%C3%A9vasion/IMG_1060.JPG" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/the-challenge-of-the-great-wars" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'The\u0020Challenge\u0020of\u0020the\u0020Great\u0020Wars' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> May 9 to September 21 <div class="shrink-0 text-right"> <span class="text-base font-semibold">$49</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> The Challenge of the Great Wars </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="Four people walking along a path in the Plains of Abraham park on a sunny day." src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Jeux-d%C3%A9vasion/ChristianGomez_CCBN-8044_web-2.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/attention" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Attention\u0021' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 1st to September 1 <div class="shrink-0 text-right"> <span class="text-base font-semibold !p-0 pr-1">Starting at</span> <span class="text-base font-semibold">$5.50</span> </div> </span> <span class="block truncate pt-3.5"> Martello Tower 1 </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Attention! </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/La-Tourmenteuse/ChristianGomez_CCBN-7100_web-2.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/battles-1759-1760" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Battles\u00201759\u002D1760' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> Year-round <div class="shrink-0 text-right"> <span class="text-base font-semibold !p-0 pr-1">Starting at</span> <span class="text-base font-semibold">$4.50</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Battles 1759-1760 </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="Les parents et leurs deux fillettes contemplent des uniformes en exposition. The parents and their two young daughters are admiring uniforms on display." src="https://ccbnwebprod.blob.core.windows.net/website/KOOPE_CCBN_MUSE%CC%81ES-09197-2.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/bus-guided-tour" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Bus\u0020guided\u0020tour' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> July 2 to September 1 <div class="shrink-0 text-right"> <span class="text-base font-semibold !p-0 pr-1">Starting at</span> <span class="text-base font-semibold">$4.25</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Bus guided tour </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Mus%C3%A9e-des-plaines-dAbraham/Bus-dAbraham/180_CCBN_PARCS_Credits_AmyGagnon_9365.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/cove-fields" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Homes\u0020of\u0020Cove\u0020Fields' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> September and October <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Homes of Cove Fields </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="View of the House of Cove Fields" src="https://ccbnwebprod.blob.core.windows.net/website/Activit%C3%A9s-et-%C3%A9v%C3%A9nements/Cove-Fields/JSCHP_CCNB_projetHabitationCovefields_img5689_LR.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/1759-from-the-warpath-to-the-plains-of-abraham" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': '1759\u003A\u0020From\u0020the\u0020Warpath\u0020to\u0020the\u0020Plains\u0020of\u0020Abraham' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> Virtual Exhibition <div class="shrink-0 text-right"> <span class="text-base font-semibold">Free</span> </div> </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl "> 1759: From the Warpath to the Plains of Abraham </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="" src="https://ccbnwebprod.blob.core.windows.net/website/Mus%C3%A9e-des-plaines-dAbraham/1759-exposition-virtuelle/2.3.2_maison_Entrepot_interieur.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> <div class="@container" x-data="{ tileColor: $store.tilesColors.getNextColor() }"> <a href="https://www.plainsofabraham.ca/activities-events/quebec-1775-blizzards-and-battle" class="group/tile flex h-full flex-col items-stretch justify-between overflow-hidden bg-beige-300 transition-colors hover:bg-[var(--bg-color)] group-[.block-theme-black-on-beige]:bg-beige-100 group-[.block-theme-black-on-beige]:hover:bg-[var(--bg-color)] @xs:h-[33rem] @lg:min-h-[14rem] @xl:h-auto @xl:flex-row" :style="{'--bg-color': 'var(--tile-color-' + tileColor + ')'}" @click="gtag('event', 'carrousel_tuile_clic', { 'item': 'Qu\u00E9bec\u00201775\u003A\u0020Blizzards\u0020and\u0020Battle' });" > <div class="flex flex-1 flex-col justify-between px-6 @xl:w-2/3"> <div> <span class="flex w-full items-baseline justify-between gap-2 border-b border-black pb-3 pt-5 font-semibold"> Until January 11, 2026 <div class="shrink-0 text-right"> <span class="text-base font-semibold !p-0 pr-1">Starting at</span> <span class="text-base font-semibold">$4.50</span> </div> </span> <span class="block truncate pt-3.5"> Plains of Abraham Museum </span> <span class="my-5 line-clamp-2 max-h-20 overflow-ellipsis text-2xl font-bold @xl:mb-4 sm:text-4xl mt-3.5 "> Québec 1775: Blizzards and Battle </span> </div> <span class="flex items-center justify-between gap-3 pb-5 font-medium"> Learn more <svg class="size-5" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23 23' stroke-width='2' fill='none' > <path d="M12.0391 5.03125L18.5078 11.5L12.0391 17.9687" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> <path d="M17.6094 11.5L4.49219 11.5" stroke="currentColor" stroke-linecap="square" stroke-linejoin="round"/> </svg> </span> </div> <div class="@xl:w-1/3 w-full shrink-0 h-[250px] overflow-hidden @xl:h-[240px]"> <img alt="Photo d'une dame en train de marcher dans une exposition aux murs et au sol blanc, des oeuvres sont exposées sur le mur devant elle et au sol. Photo of a woman walking through an exhibition with white walls and floor, with artworks displayed on the wall in front of her and on the floor." src="https://ccbnwebprod.blob.core.windows.net/website/JSCHP_CCNB_expo1775_premeir-_img6504.jpg" class="h-full w-full object-cover transition-transform duration-500 ease-in-out group-hover/tile:scale-105" > </div> </a> </div> </div> </div> </div> </div> </div> </article> </div> <div> <div class="spacing-x spacing-x-md flex w-full justify-end text-accent-500" x-data x-show="!$store.fullscreenMap.fullscreen" > <img src="https://ccbnwebprod.blob.core.windows.net/website/Image-de-marque-logos-pictos-illustrations/Illustrations/Flower-1.svg" alt=""> </div> <footer class="bg-accent-500 pt-12" x-data x-show="!$store.fullscreenMap.fullscreen"> <div class="grid grid-cols-4 md:grid-cols-8"> <div x-data="{shown: true}" x-intersect.once.margin.-100px="shown = true" :class="shown ? 'opacity-100' : 'opacity-50 translate-y-10'" class=" mx-auto block w-full transition duration-500 motion-reduce:transition-none not-prose col-span-4 md:col-span-8 " > <div data-type="form" class="" > <div> <div class="flex flex-col gap-4 sm:gap-8 lg:gap-12 lg:mx-8 mx-4 lg:py-20 py-12 border-y border-current"> <h2 class="text-2xl font-bold sm:text-5xl">Keep up with the latest news</h2> <div class="block-form-horizontal grid lg:grid-cols-8 grid-cols-1 gap-8"> <div class="prose col-span-3 max-w-md leading-tight"> <p>Subscribe to the Plains of Abraham newsletter to keep up to date on activities and news.</p> </div> <div class="col-span-5"> <div class="fui-i"><form id="fui-newsletter-armgob" class="fui-form fui-labels-above-input" method="post" enctype="multipart/form-data" accept-charset="utf-8" data-fui-form="{"formHashId":"fui-newsletter-armgob","formId":1457,"formHandle":"newsletter","registeredJs":[{"src":"https:\/\/www.plainsofabraham.ca\/cpresources\/2a4d7dc4\/js\/captchas\/duplicate.js?v=1741046123","module":"FormieDuplicateCaptcha","settings":{"formId":"fui-newsletter-armgob","sessionKey":"__DUP_14579","value":"67e5eb2206af03.32504891"}},{"src":"https:\/\/www.plainsofabraham.ca\/cpresources\/2a4d7dc4\/js\/captchas\/javascript.js?v=1741046123","module":"FormieJSCaptcha","settings":{"formId":"fui-newsletter-armgob","sessionKey":"__JSCHK_14579","value":"67e5eb22077708.93123992"}}],"settings":{"submitMethod":"ajax","submitActionMessage":"<p>We have received your subscription request. Please confirm your registration by e-mail. (Verify your spam folder)<\/p>","submitActionMessageTimeout":null,"submitActionMessagePosition":"bottom-form","submitActionFormHide":false,"submitAction":"message","submitActionTab":null,"errorMessage":"<p>An error has occurred. Please verify the information entered and try again.<\/p>","errorMessagePosition":"top-form","loadingIndicator":null,"loadingIndicatorText":null,"validationOnSubmit":true,"validationOnFocus":false,"scrollToTop":true,"hasMultiplePages":false,"pages":[{"id":9,"label":"Page 1","settings":{"submitButtonLabel":"Subscribe","backButtonLabel":"Back","showBackButton":false,"saveButtonLabel":"Save","showSaveButton":false,"saveButtonStyle":"link","buttonsPosition":"left","cssClasses":null,"containerAttributes":[],"inputAttributes":[],"enableNextButtonConditions":false,"nextButtonConditions":[],"enablePageConditions":false,"pageConditions":[],"enableJsEvents":false,"jsGtmEventOptions":[]}}],"themeConfig":{"loading":{"class":"fui-loading"},"errorMessage":{"class":"fui-error-message"},"disabled":{"class":"fui-disabled"},"tabError":{"class":"fui-tab-error"},"tabActive":{"class":"fui-tab-active"},"tabComplete":{"class":"fui-tab-complete"},"successMessage":{"class":"fui-success-message"},"alert":{"class":"fui-alert"},"alertError":{"class":"fui-alert fui-alert-error fui-alert-top-form","role":"alert","data-fui-alert":true,"data-fui-alert-error":true},"alertSuccess":{"class":"fui-alert fui-alert-success fui-alert-bottom-form","role":"alert","data-fui-alert":true,"data-fui-alert-success":true},"page":{"id":"fui-newsletter-armgob-p-9","class":"fui-page","data-index":"0","data-id":"9","data-fui-page":true},"progress":{"class":"fui-progress","data-fui-progress":true},"tab":{"class":"fui-tab"},"success":{"class":"fui-success"},"error":{"class":"fui-error-message"},"fieldContainerError":{"class":"fui-error"},"fieldInputError":{"class":"fui-error"},"fieldErrors":{"class":"fui-errors","data-field-error-messages":true},"fieldError":{"class":"fui-error-message","data-field-error-message":true}},"redirectUrl":"","currentPageId":9,"outputJsTheme":true,"enableUnloadWarning":true,"enableBackSubmission":true,"ajaxTimeout":10,"baseActionUrl":"https:\/\/www.plainsofabraham.ca\/index.php?p=actions","refreshTokenUrl":"https:\/\/www.plainsofabraham.ca\/index.php?p=actions\/formie\/forms\/refresh-tokens&form=FORM_PLACEHOLDER","scriptAttributes":[]}}" data-form-submit-method="ajax" data-form-submit-action="message"><craft-csrf-input></craft-csrf-input><input type="hidden" name="action" value="formie/submissions/submit"><input type="hidden" name="submitAction" value="submit"><input type="hidden" name="handle" value="newsletter"><input type="hidden" name="siteId" value="2"><div class="fui-form-container"><div id="fui-newsletter-armgob-p-9" class="fui-page" data-index="0" data-id="9" data-fui-page><div class="fui-page-container"><div class="fui-row fui-page-row" data-fui-field-count="2"><div class="fui-field fui-type-single-line-text fui-label-above-input fui-subfield-label-above-input fui-instructions-above-input fui-page-field" data-field-handle="name" data-field-type="single-line-text"><div class="fui-field-container"><label class="fui-label" for="fui-newsletter-armgob-fields-name" data-field-label>Name</label><div class="fui-input-wrapper"><input type="text" id="fui-newsletter-armgob-fields-name" class="fui-input" name="fields[name]" data-fui-id="newsletter-name"></div></div></div><div class="fui-field fui-type-email fui-label-above-input fui-subfield-label-above-input fui-instructions-above-input fui-field-required fui-page-field" data-field-handle="courriel" data-field-type="email" data-validation="required|email"><div class="fui-field-container"><label class="fui-label" for="fui-newsletter-armgob-fields-courriel" data-field-label>Email <span class="fui-required" aria-hidden="true">*</span></label><div class="fui-input-wrapper"><input type="email" id="fui-newsletter-armgob-fields-courriel" class="fui-input" name="fields[courriel]" value="" placeholder="Email address" autocomplete="email" required data-fui-id="newsletter-courriel" data-required-message="Required field"></div></div></div></div><div class="fui-row fui-page-row" data-fui-field-count="1"><div class="fui-field fui-type-agree fui-label-hidden fui-subfield-label-hidden fui-instructions-above-input fui-field-required fui-page-field" data-field-handle="consent" data-field-type="agree" data-validation="required"><fieldset class="fui-fieldset"><legend class="fui-legend" data-field-label data-fui-sr-only>Consent <span class="fui-required" aria-hidden="true">*</span></legend><div class="fui-input-wrapper"><input type="hidden" name="fields[consent]" value="" data-fui-input-type="agree"><div class="fui-checkbox"><input type="checkbox" id="fui-newsletter-armgob-fields-consent" class="fui-input fui-checkbox-input" name="fields[consent]" value="1" required data-fui-id="newsletter-consent" data-fui-input-type="agree" data-required-message="Consent is required to complete your subscription"><label class="fui-checkbox-label" for="fui-newsletter-armgob-fields-consent">I consent to receiving occasional email communications from the Plains of Abraham.</label></div></div></fieldset></div></div><div class="fui-row fui-page-row fui-row-empty" data-fui-field-count="0"><div class="fui-field fui-type-single-line-text fui-label-above-input fui-subfield-label-above-input fui-instructions-above-input fui-hidden fui-page-field" data-field-handle="langue" data-field-type="single-line-text"><div class="fui-field-container"><label class="fui-label" for="fui-newsletter-armgob-fields-langue" data-field-label>Langue</label><div class="fui-input-wrapper"><input type="text" id="fui-newsletter-armgob-fields-langue" class="fui-input" name="fields[langue]" data-fui-id="newsletter-langue"></div></div></div></div></div><div class="formie-duplicate-captcha-placeholder" data-duplicate-captcha-placeholder></div><div id="beesknees_14579_wrapper" style="display:none;"><label for="beesknees_14579">Leave this field blank</label><input type="text" id="beesknees_14579" name="beesknees" style="display:none;" /></div><div class="formie-jscaptcha-placeholder" data-jscaptcha-placeholder></div><div class="fui-btn-wrapper fui-btn-left"><button type="submit" class="fui-btn fui-submit" data-submit-action="submit">Subscribe</button></div></div></div></form></div> </div> </div> </div> </div> </div> </div> </div> <div class="w-full pt-6"> <ul class="spacing-x spacing-x-md mb-6 flex w-full flex-col flex-wrap justify-between gap-8 text-center font-medium md:flex-row md:items-center md:gap-4"> <li> <a href="https://www.plainsofabraham.ca/accessibility" class="text-lg font-semibold hover:underline">Accessibility</a> </li> <li> <a href="https://www.plainsofabraham.ca/notices-privacy-policies" class="text-lg font-semibold hover:underline">Notices</a> </li> <li> <a href="https://www.plainsofabraham.ca/media" class="text-lg font-semibold hover:underline">Media</a> </li> <li> <a href="https://www.plainsofabraham.ca/using-the-grounds" class="text-lg font-semibold hover:underline">Using the Grounds</a> </li> <li> <a href="https://www.canada.ca/en/national-battlefields-commission.html" class="text-lg font-semibold hover:underline">Institutional Site</a> </li> </ul> <img src="https://ccbnwebprod.blob.core.windows.net/website/Image-de-marque-logos-pictos-illustrations/Logos-Plaines/L_PLAINS_1-line_Black_RGB-1.png" alt="" class="spacing-x spacing-x-md mb-12 hidden w-full pt-32 lg:block" > <img src="https://ccbnwebprod.blob.core.windows.net/website/Image-de-marque-logos-pictos-illustrations/Logos-Plaines/L_PLAINS_1-line_Black_RGB-1.png" alt="" class="spacing-x spacing-x-md mb-12 hidden w-full pt-32 md:block lg:hidden" > <img src="https://ccbnwebprod.blob.core.windows.net/website/Image-de-marque-logos-pictos-illustrations/Logos-Plaines/logo-mobile-en.png" alt="" class="spacing-x spacing-x-md mb-4 w-full pt-20 md:hidden" > <div class="spacing-x spacing-x-md flex flex-col items-center justify-between gap-8 border-t border-black py-8 md:flex-row md:gap-0"> <div class="order-2 flex shrink-0 flex-col items-center gap-1 text-lg md:order-1 md:flex-row md:gap-3"> © Plains of Abraham . 2025 <div id="elc-cookie-footer-tab"> <button id="elc-footer-tab-link" class="text-sm opacity-90 transition-opacity hover:underline hover:opacity-100" > Cookie consent </button> </div> </div> <ul class="order-1 flex w-full flex-col flex-wrap items-center gap-4 font-medium md:order-2 md:flex-row md:items-center md:justify-end md:gap-8"> <li> <a href="https://www.facebook.com/plainsabraham/" class="text-lg font-semibold hover:underline">Facebook</a> </li> <li> <a href="https://www.instagram.com/plains_abraham/" class="text-lg font-semibold hover:underline">Instagram</a> </li> <li> <a href="https://www.youtube.com/channel/UCMIvORHmNKHkGGMxk6wvgHQ" class="text-lg font-semibold hover:underline">YouTube</a> </li> <li> <a href="https://twitter.com/plainsabraham" class="text-lg font-semibold hover:underline">X</a> </li> <li> <a href="https://www.linkedin.com/company/commission-des-champs-de-bataille-nationaux" class="text-lg font-semibold hover:underline">LinkedIn</a> </li> </ul> </div> </div> </footer> </div> </div><div x-data="htmlGet" data-init="load" data-source="cookie-consent" data-url="https://www.plainsofabraham.ca/cookie-consent-content"> <div x-ref="content" x-show="ready"></div> </div> <script type="text/javascript">window.FormieTranslations={"{attribute} cannot be blank.":"{attribute} cannot be blank.","{attribute} is not a valid email address.":"{attribute} is not a valid email address.","{attribute} is not a valid URL.":"{attribute} is not a valid URL.","{attribute} is not a valid number.":"{attribute} is not a valid number.","{attribute} is not a valid format.":"{attribute} is not a valid format.","{name} must match {value}.":"{name} must match {value}.","{attribute} must be between {min} and {max}.":"{attribute} must be between {min} and {max}.","{attribute} must be no less than {min}.":"{attribute} must be no less than {min}.","{attribute} must be no greater than {max}.":"{attribute} must be no greater than {max}.","{attribute} has an invalid value.":"{attribute} has an invalid value.","File {filename} must be smaller than {filesize} MB.":"File {filename} must be smaller than {filesize} MB.","File must be smaller than {filesize} MB.":"File must be smaller than {filesize} MB.","File must be larger than {filesize} MB.":"File must be larger than {filesize} MB.","Choose up to {files} files.":"Choose up to {files} files.","{startTag}{num}{endTag} character left":"{startTag}{num}{endTag} character left","{startTag}{num}{endTag} characters left":"{startTag}{num}{endTag} characters left","{startTag}{num}{endTag} word left":"{startTag}{num}{endTag} word left","{startTag}{num}{endTag} words left":"{startTag}{num}{endTag} words left","{attribute} must be no less than {min} characters.":"{attribute} must be no less than {min} characters.","{attribute} must be no greater than {max} characters.":"{attribute} must be no greater than {max} characters.","{attribute} must be no less than {min} words.":"{attribute} must be no less than {min} words.","{attribute} must be no greater than {max} words.":"{attribute} must be no greater than {max} words.","Unable to parse response `{e}`.":"Unable to parse response `{e}`.","Are you sure you want to leave?":"Are you sure you want to leave?","The request timed out.":"The request timed out.","The request encountered a network error. Please try again.":"The request encountered a network error. Please try again.","Invalid number":"Invalid number","Invalid country code":"Invalid country code","Too short":"Too short","Too long":"Too long","Missing Authorization ID for approval.":"Missing Authorization ID for approval.","Payment authorized. Finalize the form to complete payment.":"Payment authorized. Finalize the form to complete payment.","Unable to authorize payment. Please try again.":"Unable to authorize payment. Please try again.","Invalid amount.":"Invalid amount.","Invalid currency.":"Invalid currency.","Provide a value for “{label}” to proceed.":"Provide a value for “{label}” to proceed."};</script> <script> (function() { fetch('https://www.plainsofabraham.ca/index.php?p=actions/users/session-info', { headers: { 'Accept': 'application/json', } }).then(response => response.json()) .then(data => { document.querySelectorAll('craft-csrf-input') .forEach(element => { const input = document.createElement('input'); input.type = 'hidden'; input.name = data.csrfTokenName; input.value = data.csrfTokenValue; element.replaceWith(input); }); }); })(); </script> <script type="text/javascript" src="https://www.plainsofabraham.ca/cpresources/2a4d7dc4/js/formie.js?v=1741046123" defer></script> <script>window.Formie__JSCHK_14579="67e5eb22077708.93123992";</script></body>  </html>

CINXE.COM

Activities and Events - Quebec City – Plains of Abraham