diff --git a/assets/css/src/hero.css b/assets/css/src/hero.css
new file mode 100644
index 0000000..ac7e4ce
--- /dev/null
+++ b/assets/css/src/hero.css
@@ -0,0 +1,27 @@
+.hero {
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+}
+
+.hero__text {
+  padding: 2.5rem;
+}
+
+.hero__text h2 {
+  font-size: var(--font-size-h1);
+  width: 100%;
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.hero__text h3 {
+  color: var(--color-salmon);
+}
+
+.hero__text p:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+
+.hero__text p:first-of-type {
+  margin-top: 2rem;
+}
diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css
index d7a69af..4b33e99 100644
--- a/assets/css/src/nav.css
+++ b/assets/css/src/nav.css
@@ -10,6 +10,7 @@
 .main-nav .logo {
   font-weight: normal;
   transition: opacity 0.2s ease-in-out;
+  font-size: var(--font-size-h2);
 }
 
 .main-nav .logo > * {
diff --git a/assets/css/src/text.css b/assets/css/src/text.css
index 893201d..f75306d 100644
--- a/assets/css/src/text.css
+++ b/assets/css/src/text.css
@@ -12,3 +12,21 @@ body {
   font-family: "Joker";
   font-size: var(--font-size-body);
 }
+
+h1,
+.h1 {
+  font-size: var(--font-size-h1);
+  font-weight: normal;
+}
+
+h2,
+.h2 {
+  font-size: var(--font-size-h2);
+  font-weight: normal;
+}
+
+h3,
+.h3 {
+  font-size: var(--font-size-h3);
+  font-weight: normal;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 585b7ec..d4d6dbd 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -3,4 +3,5 @@
 @import url("src/text.css");
 @import url("src/generic.css");
 @import url("src/nav.css");
+@import url("src/hero.css");
 @import url("src/calendar-strip.css");
diff --git a/assets/images/loader.svg b/assets/images/loader.svg
new file mode 100644
index 0000000..3d86131
--- /dev/null
+++ b/assets/images/loader.svg
@@ -0,0 +1,20 @@
+ <!-- Loader by Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL  -->
+<svg alt="loading" width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="#fff" offset="100%"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
+                <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/>
+            </path>
+            <circle fill="#fff" cx="36" cy="18" r="1">
+                <animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/>
+            </circle>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/site/blueprints/site.yml b/site/blueprints/site.yml
index 6115f68..f45e095 100644
--- a/site/blueprints/site.yml
+++ b/site/blueprints/site.yml
@@ -66,6 +66,8 @@ tabs:
             image:
               ratio: 4/3
               cover: true
+            when:
+              heroMode: custom
       - width: 1/1
         fields:
           separator2:
diff --git a/site/config/config.php b/site/config/config.php
index 12d73cd..1e84170 100644
--- a/site/config/config.php
+++ b/site/config/config.php
@@ -2,6 +2,33 @@
 
 return [
   'debug' => true,
+  'thumbs' => [
+      'quality' => 80,
+      'presets' => [
+          'default' => [
+              'width' => 1024, 'format' => 'webp'
+          ],
+          'full' => 2048, 'format' => 'webp'
+      ],
+      'srcsets' => [
+          'default' => [
+              '200w'  => ['width' => 400],
+              '400w'  => ['width' => 800],
+              '800w'  => ['width' => 1600],
+              '1024w' => ['width' => 2048],
+              '1440w' => ['width' => 2880],
+              '2048w' => ['width' => 4096]
+          ],
+          'webp' => [
+              '200w'  => ['width' => 400, 'format' => 'webp'],
+              '400w'  => ['width' => 800, 'format' => 'webp'],
+              '800w'  => ['width' => 1600, 'format' => 'webp'],
+              '1024w' => ['width' => 2048, 'format' => 'webp'],
+              '1440w' => ['width' => 2880, 'format' => 'webp'],
+              '2048w' => ['width' => 4096, 'format' => 'webp']
+          ]
+      ],
+  ],
   'panel' => [
     'css' => 'assets/css/panel.css'
   ],
diff --git a/site/snippets/blocks/hero-heading.php b/site/snippets/blocks/hero-heading.php
new file mode 100644
index 0000000..f4ff4bd
--- /dev/null
+++ b/site/snippets/blocks/hero-heading.php
@@ -0,0 +1,2 @@
+<?php /** @var \Kirby\Cms\Block $block */ ?>
+<<?= $level = $block->level()->or('h2') ?>><?= $block->text() ?></<?= $level ?>>
\ No newline at end of file
diff --git a/site/snippets/blocks/hero-text.php b/site/snippets/blocks/hero-text.php
new file mode 100644
index 0000000..738c4ae
--- /dev/null
+++ b/site/snippets/blocks/hero-text.php
@@ -0,0 +1,2 @@
+<?php /** @var \Kirby\Cms\Block $block */ ?>
+<?= $block->text();
\ No newline at end of file
diff --git a/site/snippets/picture.php b/site/snippets/picture.php
new file mode 100644
index 0000000..a64c023
--- /dev/null
+++ b/site/snippets/picture.php
@@ -0,0 +1,31 @@
+<?php
+
+$sizes = '(min-width: 1200px) 25vw, (min-width: 900px) 33vw, (min-width: 600px) 50vw, 100vw';
+$alt = method_exists($file, 'alt') ? $file->alt() : 'Fragment de carte de la France';
+$crop = $crop ?? false;
+
+$webPSrcset = $crop === 'banner' ? $file->crop(1600, 800)->srcset('webp') : $file->srcset('webp');
+$srcset = $crop === 'banner' ? $file->crop(1600, 800)->srcset() : $file->srcset();
+$src = $crop === 'banner' ? $file->crop(1600, 800)->url() : $file->url();
+$width = $crop === 'banner' ? $file->crop(1600, 800)->width() : $file->resize(1800)->width();
+$height = $crop === 'banner' ? $file->crop(1600, 800)->height() : $file->resize(1800)->height();
+
+?>
+
+
+
+<picture>
+    
+    <source srcset="<?= $webPSrcset ?>"
+        sizes="<?= $sizes ?>" type="image/webp">
+    <img 
+        src="<?= $src ?>"
+        srcset="<?= $srcset ?>"
+        sizes="<?= $sizes ?>"
+        width="<?= $width ?>"
+        height="<?= $height ?>"
+        alt="<?= $alt?>"
+        loading="lazy"
+    >
+    <?= svg('assets/images/loader.svg') ?>
+</picture>
\ No newline at end of file
diff --git a/site/templates/home.php b/site/templates/home.php
index 2e8757d..dbc3078 100644
--- a/site/templates/home.php
+++ b/site/templates/home.php
@@ -1,3 +1,11 @@
 <?php snippet('header') ?>
+<div class="hero">
+  <div class="hero__text">
+    <?= $site->heroText()->toBlocks() ?>
+  </div>
+  <div class="hero__image">
+    <?php snippet('picture', ['file' => $site->heroImage()->toFile()]) ?>
+  </div>
+</div>
 <?php snippet('calendar-strip') ?>
 <?php snippet('footer') ?>
\ No newline at end of file