REMOVE unnecessary whitespace in footer template

includes/init.php

@@ -72,6 +72,8 @@ function carhop_enqueue_scripts()
 
 	wp_enqueue_script('gsap-js', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js', array(), false, true);
 	wp_enqueue_script('gsap-st', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js', array('gsap-js'), false, true);
+	wp_enqueue_script('gsap-split-text', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js', array('gsap-js'), false, true);
+
 }
 add_action('wp_enqueue_scripts', 'carhop_enqueue_scripts');
 

resources/css/app.css

@@ -79,6 +79,7 @@
 @import './pages/single-actualites.css';
 @import './pages/page-formulaire-de-depot.css';
 @import './pages/archive-fonds-archives.css';
+@import './pages/home.css';
 
 /* ########### BLOCKS ############ */
 @import './blocks/blocks-spacing.css';

resources/css/blocks/sitemap.css

@@ -1,4 +1,12 @@
 .sitemap {
+  a:hover {
+    filter: none !important;
+  }
+  a[target='_blank']:after,
+  a[target='_blank']:after {
+    content: none;
+    display: hidden;
+  }
   h1.sitemap__title,
   h2,
   h3 {
@@ -14,23 +22,68 @@
     @apply font-normal uppercase tracking-widest text-4xl;
   }
 
+  ul,
+  li {
+    @apply !list-none;
+  }
+
   ul {
     @apply mt-12 grid md:grid-cols-2 lg:grid-cols-3 gap-12;
     li {
-      @apply list-none text-center;
+      @apply list-none;
+      /* @apply text-center; */
       a {
-        @apply flex flex-col items-center justify-center underline underline-offset-4;
+        @apply flex flex-col justify-center no-underline hover:underline underline-offset-4;
+        /* @apply items-center; */
       }
     }
   }
 
+  .item-catalogue a,
+  .has-page-icon a,
+  .menu-item__submenu-toggle {
+    @apply flex flex-col justify-center gap-3 font-medium tracking-wide text-xl;
+    @apply items-start;
+  }
+  .menu-item__submenu-toggle {
+    @apply items-center;
+  }
+
+  .item-catalogue,
+  .has-page-icon {
+    a img,
+    .menu-item__submenu-toggle img {
+      transition: transform 0.4s ease-out;
+    }
+
+    a:hover img {
+      transform: scale(1.3);
+    }
+    &:hover {
+      .menu-item__submenu-toggle img {
+        transform: scale(1.3);
+      }
+    }
+  }
+
+  .sub-menu {
+    @apply !mt-4 block;
+    .menu-item__icon-img,
+    .page_icon,
+    .page_subtitle {
+      @apply hidden;
+    }
+    .menu-item__title {
+      @apply pb-0 !mb-0;
+    }
+  }
   .website-menu-list {
     @apply mb-32;
   }
 }
 
 .sitemap__inner {
-  @apply container;
+  @apply container px-0;
 }
 
 .sitemap__title {

resources/css/pages/home.css

@@ -0,0 +1,12 @@
+body.home {
+  h1 {
+    @screen lg {
+      font-size: 3.4rem !important;
+    }
+    @screen 2xl {
+      font-size: 3.8rem !important;
+    }
+    line-height: 1.2;
+    @apply max-w-screen-lg mx-auto;
+  }
+}

resources/js/animation/animations.js

@@ -0,0 +1,38 @@
+const tl = gsap.timeline({
+  defaults: {
+    duration: 1,
+    y: -14,
+    opacity: 0,
+    ease: 'power4.out',
+  },
+});
+
+function pageHeaderAnimationInit() {
+  const contentElements = document.querySelectorAll(
+    '.page-header .page-header__content *',
+  );
+  const cover = document.querySelector('.page-header__image');
+
+  if (contentElements.length > 0) {
+    tl.from(contentElements, {}, '<');
+  }
+  if (cover) {
+    tl.from(cover, { delay: 0.2 }, '<');
+  }
+}
+
+function chapterSectionAnimationInit() {
+  const contentElements = document.querySelectorAll(
+    '.wp-block-carhop-blocks-chapter-section .chapter-section__content *',
+  );
+  const cover = document.querySelector('.chapter-section__cover');
+
+  if (contentElements.length > 0) {
+    tl.from(contentElements, {}, '<');
+  }
+  if (cover) {
+    tl.from(cover, { delay: 0.2 }, '<');
+  }
+}
+
+export { pageHeaderAnimationInit, chapterSectionAnimationInit };

resources/js/app.ts

@@ -7,6 +7,11 @@ import { searchBarInit } from './search-bar';
 import singlesInit from './singles/singles';
 import archivesInit from './archives/archives';
 import handleCiteButton from './singles/cite-button';
+import titlesInit from './titles';
+import {
+  pageHeaderAnimationInit,
+  chapterSectionAnimationInit,
+} from './animation/animations';
 
 window.addEventListener('load', function () {
   menuInit();
@@ -18,4 +23,7 @@ window.addEventListener('load', function () {
   singlesInit();
   archivesInit();
   handleCiteButton();
+  titlesInit();
+  pageHeaderAnimationInit();
+  chapterSectionAnimationInit();
 });

resources/js/archives/archives.ts

@@ -142,10 +142,12 @@ export default function archivesInit() {
   }
   handleFilterPostsBy();
 
+  if (postGridToolbarActions) {
     postGridToolbarActions.addEventListener('click', (e) => {
       e.preventDefault();
     });
   }
+}
 
 function updatePostCount(count: number) {
   const postCount = document.querySelector('.post-count__count');

resources/js/search-bar.ts

@@ -14,10 +14,10 @@ export default class SearchBar {
   constructor(options: SearchBarOptions = {}) {
     this.searchBar = document.querySelector('#search-module') as HTMLDivElement;
     this.searchButtons = document.querySelectorAll(
-      '.tools-container .search-button'
+      '.tools-container .search-button',
     ) as NodeListOf<HTMLButtonElement>; // Il y a 2 boutons de recherche (1 mobile; 1 desktop)
     this.searchInput = document.querySelector(
-      '.search-module__search-form__input'
+      '.search-module__search-form__input',
     ) as HTMLInputElement;
 
     this.init();
@@ -33,7 +33,7 @@ export default class SearchBar {
 
     // Ajouter les event listeners
     this.searchButtons.forEach((button) =>
-      button.addEventListener('click', (event) => this.toggle(event))
+      button.addEventListener('click', (event) => this.toggle(event)),
     );
     this.searchBar.addEventListener('transitionend', this.handleTransitionEnd.bind(this));
     document.addEventListener('keydown', this.handleKeyDown.bind(this));
@@ -58,7 +58,10 @@ export default class SearchBar {
 
   public open(): void {
     if (!this.searchBar) return;
-
+    const submenus = document.querySelectorAll('#primary-menu .sub-menu-open');
+    submenus.forEach((submenu) => {
+      submenu.classList.remove('sub-menu-open');
+    });
     this.searchBar.removeAttribute('closed');
     this.searchBar.setAttribute('opened', '');
     this.isOpen = true;
@@ -100,6 +103,10 @@ export default class SearchBar {
     this.searchBar.addEventListener('animationend', handleAnimationEnd);
   }
 
+  public closeSubmenus(): void {
+    if (!this.searchBar) return;
+  }
+
   private handleTransitionEnd(): void {
     this.updateAriaHidden();
   }
@@ -124,7 +131,7 @@ export default class SearchBar {
     // Vérifier si le clic est en dehors de la barre de recherche ET des boutons
     const isClickOutsideSearchBar = !this.searchBar.contains(target);
     const isClickOnButton = Array.from(this.searchButtons || []).some((button) =>
-      button.contains(target)
+      button.contains(target),
     );
 
     if (isClickOutsideSearchBar && !isClickOnButton) {
@@ -151,7 +158,10 @@ export default class SearchBar {
 
     // Note: Les event listeners anonymes ne peuvent pas être supprimés facilement
     // Dans un vrai projet, il faudrait stocker les références des fonctions
-    this.searchBar.removeEventListener('transitionend', this.handleTransitionEnd.bind(this));
+    this.searchBar.removeEventListener(
+      'transitionend',
+      this.handleTransitionEnd.bind(this),
+    );
     document.removeEventListener('keydown', this.handleKeyDown.bind(this));
     document.removeEventListener('click', this.handleClickOutside.bind(this));
     window.removeEventListener('scroll', this.handleScroll.bind(this));

resources/js/titles.js

@@ -0,0 +1,15 @@
+// GSAP Text Animations
+
+export default function titlesInit() {
+  const homeTitle = document.querySelector('body.home h1');
+  let split = SplitText.create(homeTitle, { type: 'words, lines' });
+
+  // now animate the characters in a staggered fashion
+  gsap.from(split.lines, {
+    duration: 2,
+    y: 40, // animate from 100px below
+    autoAlpha: 0, // fade in from opacity: 0 and visibility: hidden
+    stagger: 0.2, // 0.05 seconds between each
+    ease: 'power4.out',
+  });
+}

template-parts/footer.php

@@ -66,7 +66,6 @@
 	<li class="belfius">
 		<h3 class="section-title">Compte bancaire</h3>
 		<p>Belfius <br/>IBAN BE86 7995 2072 9950 <br/>BIC GKCCBEBB</p>
-
 	</li>
 	<li class="socials">
 		<?php echo carhop_display_social_links(); ?>