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,35 +15,62 @@ function HomepageHeader() {
   return (
     <header className={clsx('hero hero--primary', styles.heroBanner)}>
       <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">
-          <Translate
-            id="homepage.tagline"
-            description="The homepage tagline">
-            Recherches et réflexions sur les défis techniques
-          </Translate>
-        </p>
-        <div className={styles.buttons}>
-          <Link
-            className="button button--secondary button--lg"
-            to="/docs/projets-openclassrooms">
-            <Translate
-              id="homepage.discoverDocs"
-              description="The homepage button to discover the documentation">
-              Découvrir la documentation
-            </Translate>
-          </Link>
-          <Link
-            className="button button--secondary button--lg margin-left--md"
-            to="/blog">
-            <Translate
-              id="homepage.readBlog"
-              description="The homepage button to read the blog">
-              Lire le blog
-            </Translate>
-          </Link>
+        <div className={styles.heroContainer}>
+          <div className={styles.heroContent}>
+            <Heading as="h1" className="hero__title">
+              {siteConfig.title}
+            </Heading>
+            <p className="hero__subtitle">
+              <Translate
+                id="homepage.tagline"
+                description="The homepage tagline">
+                Recherches et réflexions sur les défis techniques
+              </Translate>
+            </p>
+            <div className={styles.buttons}>
+              <Link
+                className="button button--secondary button--lg"
+                to="/docs/projets-openclassrooms">
+                <Translate
+                  id="homepage.discoverDocs"
+                  description="The homepage button to discover the documentation">
+                  Découvrir la documentation
+                </Translate>
+              </Link>
+              <Link
+                className="button button--secondary button--lg margin-left--md"
+                to="/blog">
+                <Translate
+                  id="homepage.readBlog"
+                  description="The homepage button to read the blog">
+                  Lire le blog
+                </Translate>
+              </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>