Ajout de l'illustration sur la page d'accueil

i18n/en/code.json

@@ -111,5 +111,9 @@
   "carousel.goToSlide": {
     "message": "Go to slide {index}",
     "description": "Go to slide button aria-label"
+  },
+  "homepage.illustrationCredit": {
+    "message": "Illustration by {artistLink}",
+    "description": "The credit for the homepage illustration"
   }
 }

src/pages/index.module.css

@@ -5,10 +5,61 @@
   overflow: hidden;
 }
 
+.heroContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 3rem;
+}
+
+.heroContent {
+  flex: 1;
+  text-align: left;
+  min-width: 0;
+}
+
+.heroIllustration {
+  flex: 0 0 auto;
+  max-width: 400px;
+  animation: heroAnimation 1s ease-out forwards;
+}
+
+.heroIllustration img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.illustrationCredit {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.illustrationCredit a {
+  color: black;
+  text-decoration: none;
+}
+
+.illustrationCredit a:hover {
+  text-decoration: underline;
+}
+
+@keyframes heroAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-20px) rotate(-5deg);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) rotate(0deg);
+  }
+}
+
 .buttons {
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   flex-wrap: wrap;
   gap: 1rem;
 }
@@ -33,4 +84,22 @@
   .heroBanner {
     padding: 2rem;
   }
+
+  .heroContainer {
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .heroContent {
+    text-align: center;
+  }
+
+  .heroIllustration {
+    order: -1;
+    max-width: 300px;
+  }
+
+  .buttons {
+    justify-content: center;
+  }
 }

src/pages/index.tsx

@@ -15,6 +15,8 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
+        <div className={styles.heroContainer}>
+          <div className={styles.heroContent}>
             <Heading as="h1" className="hero__title">
               {siteConfig.title}
             </Heading>
@@ -46,6 +48,31 @@ function HomepageHeader() {
               </Link>
             </div>
           </div>
+          <div className={styles.heroIllustration}>
+            <img
+              src="/img/illustration_vache.png"
+              alt="TellServ Tech Blog Illustration"
+            />
+            <div className={styles.illustrationCredit}>
+              <Translate
+                id="homepage.illustrationCredit"
+                description="The credit for the homepage illustration"
+                values={{
+                  artistLink: (
+                    <a
+                      href="https://vassile.fr"
+                      target="_blank"
+                      rel="noopener noreferrer">
+                      Vassile
+                    </a>
+                  ),
+                }}>
+                {'Illustration par {artistLink}'}
+              </Translate>
+            </div>
+          </div>
+        </div>
+      </div>
     </header>
   );
 }