So many stuphs

content/collections/pages/home.md

@@ -5,7 +5,51 @@ title: Home
 template: home
 author: 5a7338bf-56d2-42b5-8ad0-7459a1fd8152
 updated_by: cf207a21-df92-4f9c-b7c7-897476d8f464
-updated_at: 1768582791
+updated_at: 1768920692
+incentives:
+  -
+    id: mki632jb
+    title: 'La passion'
+    photo: photos/281778626_4931888353605870_7813049969954003479_n.jpg
+    type: new_set
+    enabled: true
+    description: "Un événement ouvert à tous, préparé avec soin par des passionnés de l'arcade et leurs partenaires."
+  -
+    id: mki663w4
+    title: 'Jouez !'
+    description: "Plus de 150 bornes d'arcade, flippers et consoles jouables. Asseyez-vous, appuyez sur Start et jouez."
+    photo: photos/281793708_4931882706939768_4324019732770432906_n.jpg
+    type: new_set
+    enabled: true
+faqs:
+  -
+    id: mki6e5k9
+    question: 'Comment venir en voiture ?'
+    reponse: 'La Halle des Expositions est accessible en voiture, avec un immense parking gratuit.'
+    type: new_set
+    enabled: true
+  -
+    id: mki6evuc
+    question: 'Comment covoiturer ?'
+    reponse: 'Trouvez des membres de la communauté prêts a covoiturer sur les section dédiée de notre Discord ou de notre Forum'
+    type: new_set
+    enabled: true
+  -
+    id: mkmpp638
+    question: "C'est quoi les stuffs ?"
+    reponse: 'Yes, plein de stuffs prévus, tkt.'
+    type: new_set
+    enabled: true
+photos:
+  - photos/281778626_4931888353605870_7813049969954003479_n.jpg
+  - photos/281793708_4931882706939768_4324019732770432906_n.jpg
+  - photos/284832953_4931927650268607_8739260868128483435_n.jpg
+  - photos/285062150_4931910786936960_5968892299195866434_n.jpg
+  - photos/285075253_4931885803606125_1155924220656654592_n.jpg
+  - photos/285087203_4931892853605420_3487044591746673023_n.jpg
+  - photos/285087963_4931900290271343_5781674078948662898_n.jpg
+  - photos/285129975_4931884353606270_9099815639564787952_n.jpg
+  - photos/285133824_4931922866935752_1400404880920508743_n.jpg
 content:
   -
     type: paragraph

content/globals/hfs.yaml

@@ -1,3 +1,7 @@
-title: hfs
+title: HFS
 data:
-  logo: logo_black.svg
+  logo: logo_black_no_logo_v2.svg
+  date_start: '2026-05-29'
+  date_end: '2026-05-31'
+  place: 'Halle des Expositions, Evreux'
+  lien_billetterie: 'https://www.billetweb.fr/hfs-summer-2026'

public/assets/.meta/logo2.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 1078
+last_modified: 1768916584
+width: '1697'
+height: '1870'
+mime_type: image/svg+xml
+duration: null

public/assets/.meta/logo_black_no_logo_v2.svg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 44375
+last_modified: 1768916437
+width: '1388.712891'
+height: '475.344849'
+mime_type: image/svg+xml
+duration: null

public/assets/js/main.js

@@ -0,0 +1,88 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Video fixed BG
+  const reelEl = document.getElementById('reel');
+  if (!reelEl) return;
+
+  const video = reelEl.tagName.toLowerCase() === 'video' ? reelEl : reelEl.querySelector('video');
+  if (!video) return;
+
+  function tryPlay() {
+    const playPromise = video.play();
+    if (playPromise !== undefined) {
+      playPromise.catch(() => {
+        // Autoplay bloqué : passer en muet et retenter
+        video.muted = true;
+        video.play().catch(() => {});
+      });
+    }
+  }
+
+  function handleVisibility(visible) {
+      console.log('Visibility changed, playing:', visible);
+    if (visible) {
+        // make visible the video element
+        video.style.visibility = 'visible';
+        tryPlay();
+    }
+    else {
+        video.style.visibility = 'hidden';
+        video.pause();
+    }
+  }
+
+  if ('IntersectionObserver' in window) {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        handleVisibility(entry.intersectionRatio >= 0.01);
+      });
+    }, { threshold: [0, 0.01, 1] });
+    observer.observe(reelEl);
+  } else {
+    // Fallback simple : vérification sur scroll/resize
+    let ticking = false;
+    const check = () => {
+      ticking = false;
+      const rect = reelEl.getBoundingClientRect();
+      const vh = window.innerHeight || document.documentElement.clientHeight;
+        // Visible si une partie quelconque est dans la fenêtre
+        const visible = rect.bottom > 0 && rect.top < vh;
+        handleVisibility(visible);
+    };
+    const onScroll = () => {
+      if (!ticking) {
+        ticking = true;
+        requestAnimationFrame(check);
+      }
+    };
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll);
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) video.pause();
+  });
+
+  // Cursor tracking
+    //track the cursor position and set CSS variables --cursor-x and --cursor-y on the body element
+    let x = 0;
+    let y = 0;
+    document.addEventListener('mousemove', (e) => {
+        x = Math.round(((e.clientX / window.innerWidth) * 2 - 1) * 10000) / 10000;
+        y = Math.round(((e.clientY / window.innerHeight) * 2 - 1) * 10000) / 10000;
+    });
+
+    let lastUpdate = 0;
+    const FRAME_INTERVAL = 1000 / 60;
+    const updateTwist = (timestamp) => {
+        if (!timestamp) timestamp = performance.now();
+        if (timestamp - lastUpdate >= FRAME_INTERVAL) {
+            document.body.style.setProperty('--cursor-x', x);
+            document.body.style.setProperty('--cursor-y', y);
+            lastUpdate = timestamp;
+        }
+        requestAnimationFrame(updateTwist);
+    }
+    updateTwist();
+
+});

public/assets/logo2.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 1697 1870" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/"
+     style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g>
+        <path d="M848.439,125c245.079,107.6 485.699,246.522 701.423,404.967c29.355,266.045 29.355,543.888 0,809.933c-215.724,158.445 -456.343,297.367 -701.423,404.967c-245.079,-107.6 -485.699,-246.522 -701.423,-404.967c-29.355,-266.045 -29.355,-543.888 -0,-809.933c215.724,-158.445 456.343,-297.367 701.423,-404.967Z" style="fill:none;stroke:#ffd600;stroke-width:250px;"/>
+        <path d="M973.439,1409.335l-0,335.531c-0,68.989 -56.011,125 -125,125c-68.989,-0 -125,-56.011 -125,-125l0,-335.531c39.913,10.504 81.808,16.098 125,16.098c43.192,0 85.087,-5.595 125,-16.098Z" style="fill:#ffd600"/>
+        <circle cx="848.439" cy="934.933" r="349.33" style="fill:#ffd600"/>
+</g>
+</svg>

public/assets/photos/.meta/281778626_4931888353605870_7813049969954003479_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 260582
+last_modified: 1768903789
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/281793708_4931882706939768_4324019732770432906_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 216710
+last_modified: 1768903790
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/284832953_4931927650268607_8739260868128483435_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 264086
+last_modified: 1768903791
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/285062150_4931910786936960_5968892299195866434_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 212186
+last_modified: 1768903792
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/285075253_4931885803606125_1155924220656654592_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 200136
+last_modified: 1768903792
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/285087203_4931892853605420_3487044591746673023_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 93981
+last_modified: 1768903793
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/285087963_4931900290271343_5781674078948662898_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 170545
+last_modified: 1768903794
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/285129975_4931884353606270_9099815639564787952_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 269447
+last_modified: 1768903795
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/assets/photos/.meta/285133824_4931922866935752_1400404880920508743_n.jpg.yaml

@@ -0,0 +1,7 @@
+data: {  }
+size: 399965
+last_modified: 1768903795
+width: 2048
+height: 1365
+mime_type: image/jpeg
+duration: null

public/css/site.css

@@ -1,14 +1,140 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
 
-/*Bulma variables override*/
+/*Bulma variables override and hacks*/
 :root{
     --bulma-primary-h: 50deg;
     --bulma-primary-l: 50%;
+    --bulma-scheme-h: 0;
+    --bulma-scheme-s: 0%;
+    --bulma-scheme-l: 6%;
+    --bulma-body-line-height: 1;
+    --bulma-black-h: 0;
+    --bulma-black-s: 0%;
+    --bulma-black-l: 6%;
 }
+.has-text-weight-bold {
+    font-weight: 600 !important;
+}
+.has-text-weight-bolder {
+    font-weight: 1000 !important;
+}
+html{
+    scroll-behavior: smooth;
+    scrollbar-color: var(--bulma-background) var(--bulma-primary);
+}
+body{
+    --cursor-x:0;
+    --cursor-y:0;
+}
+#nav{
+    --bulma-navbar-item-img-max-height: 2.5rem;
+}
+#hero{
+    justify-content:center;
+}
+#hero .hero-body{
+    flex-direction: column;flex-grow:0;
+}
+/* -----------------------------------------------*/
 
 /*Custom classes*/
-video{
+#nav{
+    background: transparent;
+    mix-blend-mode: difference;
+}
+
+#hero::before{
+    background:url('/assets/pattern.svg');
+    content:'';
+    position:absolute;
+    top:-100px;
+    left:-100px;
+    width:calc(100% + 200px);
+    height:calc(100% + 200px);
+    opacity:0.04;
+}
+
+#reel{
     width:100%;
+    height:100vh;
+    position: relative;
+    background: none;
+}
+video{
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height:100vh;
+    width:100%;
+    object-fit: cover;
+    z-index:-20;
+}
+.squircle{
+    border-radius: 50%;
+    corner-shape: squircle;
+    aspect-ratio: 1;
+}
+#gallery{
+    position:relative;
+}
+.photo{
+    background: var(--bulma-white);
+    padding:1rem;
+    cursor:pointer;
+}
+.photo.full{
+    position:absolute;
+    top:0;
+    height:100vh;
+    padding:2rem;
+}
+/*#tournaments*/
+.tournament-block{
+    display:grid;
+    place-items: center;
+    transition: transform 0.3s ease-out;
+}
+.tournament-block img{
+    transition: transform 0.3s ease-out;
+}
+.tournament-block:hover img{
+    transform: scale(1.2);
+}
+.tournament-block:hover{
+    transform: scale(0.9);
+}
+
+/*Twist animation*/
+.twist{
+    /* 3D transform pivot on Y axis*/
+    /*transition: transform ease-out;*/
+    transform-style: preserve-3d;
+    transform-origin: center center -100px;
+    transform: translateZ(-500px) rotateY(calc(20deg * var(--cursor-x))) rotateX(calc(-10deg * var(--cursor-y)));
+    /*perspective: 1000px;*/
+    /*perspective-origin: center;*/
+}
+.twist.middle{
+    transform: translateZ(0px) rotateY(calc(20deg * var(--cursor-x))) rotateX(calc(-10deg * var(--cursor-y)));
+}
+.twist-fore{
+    transform: translateZ(-100px);
+}
+/*.twist::after{*/
+/*    content: '';*/
+/*    position: absolute;*/
+/*    top: 50%;*/
+/*    left: 50%;*/
+/*    background: red;*/
+/*    height:20px;*/
+/*    width:20px;*/
+/*    pointer-events: none;*/
+/*    transform: translateZ(200px);*/
+/*}*/
+.twist-fore{
+    transform: translateZ(200px);
 }
 
 /*View transition experiments*/

resources/blueprints/collections/pages/page.yaml

@@ -4,6 +4,8 @@ tabs:
     display: Main
     sections:
       -
+        display: Hero
+        instructions: 'Logo et texte accueil'
         fields:
           -
             handle: title
@@ -12,6 +14,25 @@ tabs:
               required: true
               validate:
                 - required
+          -
+            handle: template
+            field:
+              type: template
+              display: Template
+              localizable: true
+      -
+        display: 'Main Video'
+        instructions: "Video loop d'introduction"
+        fields:
+          -
+            handle: video
+            field:
+              type: video
+              display: video
+      -
+        display: 'Main text'
+        instructions: "Gros texte d'accueil"
+        fields:
           -
             handle: content
             field:
@@ -19,11 +40,52 @@ tabs:
               type: bard
               display: content
       -
-            handle: template
+        display: Incentives
+        instructions: "Petits blocs de features de l'event"
+        fields:
+          -
+            handle: incentives
             field:
-              type: template
-              display: Template
-              localizable: true
+              type: replicator
+              display: incentives
+              sets:
+                new_set_group:
+                  display: 'New Set Group'
+                  sets:
+                    new_set:
+                      display: 'New Set'
+                      fields:
+                        -
+                          import: event_incentives
+      -
+        display: FAQ
+        fields:
+          -
+            handle: faqs
+            field:
+              type: replicator
+              display: FAQs
+              sets:
+                new_set_group:
+                  display: 'New Set Group'
+                  sets:
+                    new_set:
+                      display: 'New Set'
+                      fields:
+                        -
+                          import: faq
+      -
+        display: Gallery
+        instructions: 'Les images cools des précédents summers'
+        fields:
+          -
+            handle: photos
+            field:
+              mode: grid
+              container: assets
+              type: assets
+              display: Photos
+              folder: photos
   sidebar:
     display: Sidebar
     sections:

resources/blueprints/globals/hfs.yaml

@@ -3,6 +3,7 @@ tabs:
     display: Main
     sections:
       -
+        display: Brand
         fields:
           -
             handle: logo
@@ -11,3 +12,29 @@ tabs:
               container: assets
               type: assets
               display: Logo
+      -
+        display: Summer
+        fields:
+          -
+            handle: date_start
+            field:
+              type: date
+              display: 'Date Start'
+          -
+            handle: date_end
+            field:
+              type: date
+              display: 'Date End'
+          -
+            handle: place
+            field:
+              type: text
+              display: Place
+      -
+        display: BIlletterie
+        fields:
+          -
+            handle: lien_billetterie
+            field:
+              type: link
+              display: 'Lien billetterie'

resources/fieldsets/event_incentives.yaml

@@ -0,0 +1,25 @@
+title: 'Event incentives'
+fields:
+  -
+    handle: title
+    field:
+      type: text
+      display: Title
+      instructions: "Feature de l'event. Ex: Tournois internationaux !"
+      width: 50
+  -
+    handle: description
+    field:
+      type: textarea
+      display: description
+      instructions: "Dites en plus sur la feature. Ex: Un événement ouvert à tous, préparé avec soin par des passionnés de l'arcade et leurs partenaires."
+      width: 50
+  -
+    handle: photo
+    field:
+      max_files: 1
+      min_files: 1
+      container: assets
+      type: assets
+      display: photo
+      folder: photos

resources/fieldsets/faq.yaml

@@ -0,0 +1,14 @@
+title: FAQ
+fields:
+  -
+    handle: question
+    field:
+      type: text
+      display: Question
+      instructions: 'Genre : comment on vient en train ?'
+  -
+    handle: reponse
+    field:
+      type: markdown
+      display: Reponse
+      instructions: 'Réponse a la question'

resources/views/_incentiveblock.antlers.html

@@ -0,0 +1,5 @@
+<div class="column">
+    <img src="{{ glide:photo preset='thumbnail' }}" alt="{{ icon:alt }}">
+    <h3>{{ title }}</h3>
+    <p>{{ description }}</p>
+</div>

resources/views/_photoblock.antlers.html

@@ -0,0 +1,6 @@
+<div class="cell">
+    {{? $angle = rand(-30,30); ?}}
+    <img src="{{ glide:url preset="thumbnail" }}" alt="{{ alt }}" class="photo"
+    style="transform: rotate({{ $angle }}deg);">
+{{#     <img src="{{ glide:url }}" alt="{{ alt }}" class="photo full"> #}}
+</div>

resources/views/_tournamentblock.antlers.html

@@ -1,9 +1,10 @@
+<div class="column">
     <a href="{{ url }}"
-   style="background-image: url('{{ backdrop }}');"
-   class="column"
+       style="background-image: url('{{ glide:backdrop preset='thumbnail' blur="10" gam="0" bri="25" con="0"}}');background-size: cover; background-position: center;"
+       class="squircle tournament-block"
     >
-    <span>{{ title }}</span>
-    <span>{{ date }}</span>
-    <img src="
-                {{ glide:logo preset='thumbnail' }}" alt="title">
+        {{#     <span>{{ title }}</span> #}}
+        {{#     <span>{{ date }}</span> #}}
+        <img src="{{ glide:logo preset='logo' }}" alt="title">
     </a>
+</div>

resources/views/home.antlers.html

@@ -1,12 +1,16 @@
-<section class="section hero is-primary is-fullheight">
-    <div class="hero-body">
-        <img src="{{ hfs:logo }}" alt="HFS SUMMER JAM" class=""/>
+<section id="hero" class="section hero is-primary is-fullheight">
+    <div class="hero-body twist has-text-centered">
+        <img src="{{ hfs:logo }}" alt="HFS SUMMER"/>
+        <p class="title twist-fore">
+            {{ hfs:date_start }} - {{ hfs:date_end }}
+        </p>
+        <p class="subtitle twist-fore">{{ hfs:place }}</p>
     </div>
 </section>
 
 <section id="reel">
     <video autoplay loop muted playsinline>
-        <source src="https://fr.getsamplefiles.com/download/mp4/sample-5.mp4" type="video/mp4">
+        <source src="assets/video/reel.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
 </section>
@@ -17,7 +21,18 @@
     </span>
 </section>
 
-<section class="section" id="tournaments">
+<section class="section" id="incentive">
+    <h2>Incentive</h2>
+    <div class="fixed-grid has-3-cols">
+        <div class="grid">
+            {{ incentives }}
+            {{ partial:_incentiveblock  }}
+            {{ /incentives }}
+        </div>
+    </div>
+</section>
+
+<section class="section has-background-primary has-text-black" id="tournaments">
     <h2>Tournaments</h2>
     <h3>Stier</h3>
     <div class="fixed-grid has-3-cols">
@@ -56,25 +71,50 @@
     </div>
 </section>
 
-<section class="section" id="about">About</section>
-<section class="section" id="gallery">Gallery</section>
-<section class="section" id="questions">FAQ</section>
+
+<section class="section" id="gallery">
+    <h2>Gallery</h2>
+    <div class="grid is-col-min-9">
+        {{ photos }}
+        {{  partial:_photoblock  }}
+        {{ /photos }}
+    </div>
+</section>
+
+
+<section class="section" id="faq">
+    <h2>FAQ</h2>
+    <div class="grid">
+        {{ faqs sort="order asc" }}
+        <div class="cell block">
+            <h3 class="is-size-3 block">{{ question }}</h3>
+            <p class="block">{{ reponse }}</p>
+        </div>
+        {{ /faqs }}
+    </div>
+</section>
+
 <section class="section" id="tickets">
     <h2>Tickets</h2>
+    <div class="grid">
     {{ collection:prices sort="order asc" }}
-        <div>
-            <h3>{{ title }}</h3>
-            <p>{{ price }}</p>
-            <a href="" class="button is-primary">Buy Ticket</a>
+        <div class="cell block">
+            <h3 class="is-size-3 block">{{ title }}</h3>
+            <p class="block">{{ price }}</p>
+            <a href="{{ hfs:lien_billetterie }}" class="button is-primary" target="_blank">Buy Ticket</a>
         </div>
     {{ /collection:prices }}
+    </div>
 </section>
 
 <section class="section" id="sponsors">
     <h2>Sponsors</h2>
+    <div class="grid">
     {{ collection:sponsors sort="order asc" }}
-        <span>
+    <div class="cell">
         <img src="{{ glide:logo preset='logo' }}" alt="{{ logo:alt }}">
-        </span>
+    </div>
     {{ /collection:sponsors }}
+
+    </div>
 </section>

resources/views/layout.antlers.html

@@ -12,16 +12,27 @@
         <title>{{ title ?? site:name }}</title>
     </head>
     <body>
-{{#         <nav> #}}
+        <nav id="nav" class="navbar is-primaryt is-fixed-top p-5" role="navigation" aria-label="main navigation">
+            <div class="navbar-brand">
+                <a class="navbar-item squircle" href="/">
+                    <img src="/assets/logo2.svg" style="height:5rem;"/>
+                </a>
+            </div>
+            <div class="navbar-end">
+                <a class="navbar-item button is-rounded has-text-primary" href="{{ hfs:lien_billetterie }}" target="_blank">
+                    Billetterie
+                </a>
+            </div>
 {{#             {{ nav:collection:pages include_home="true" }} #}}
 {{#             <a href="{{ url }}">{{ title }}</a> #}}
 {{#             {{ /nav:collection:pages  }} #}}
-{{#         </nav> #}}
+        </nav>
 
-        <div>
+{{#         <div> #}}
             {{ template_content }}
-        </div>
+{{#         </div> #}}
 
         <footer>Footer</footer>
     </body>
+    <script src="/assets/js/main.js"></script>
 </html>