style: restore jumbotron gray background for hero section; test: add E2E validation

Author: rogeriopradoj

assets/stylesheets/index.css

@@ -18,6 +18,13 @@ body {
   padding-bottom: 70px;
 }
 
+.jumbotron {
+  background-color: #f5f5f5;
+  border-radius: 1rem;
+  padding: 2.5rem 1rem;
+  margin-bottom: 2rem;
+}
+
 .version {
   font-family: monospace;
   padding: 0.5rem 1rem;

dev/index.html

@@ -64,7 +64,7 @@
       </div>
     </nav>
 
-    <div class="py-5 text-center">
+    <div class="py-5 text-center jumbotron">
       <h1>
         <span class="cadeoleo-baby-1"></span>
         Cadê o Léo!

dev/index_en.html

@@ -64,7 +64,7 @@
       </div>
     </nav>
 
-    <div class="py-5 text-center">
+    <div class="py-5 text-center jumbotron">
       <h1>
         <span class="cadeoleo-baby-1"></span>
         Where's Leo!

test/e2e/version-style.spec.js

@@ -14,4 +14,11 @@ test.describe('Version span style', () => {
     const bgColor = await leoVersion.evaluate(el => getComputedStyle(el).backgroundColor);
     expect(bgColor).toBe('rgb(238, 238, 238)'); // #eee
   });
+
+  test('jumbotron should have gray background', async ({ page, baseURL }) => {
+    await page.goto(baseURL + '/');
+    const jumbotron = await page.locator('.jumbotron').first();
+    const bgColor = await jumbotron.evaluate(el => getComputedStyle(el).backgroundColor);
+    expect(bgColor).toBe('rgb(245, 245, 245)'); // #f5f5f5
+  });
 });