From 996806b680ecbc4c5e0029c4d60709ea9c6a76c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20R=C3=A9millard?= <christian.remillard@gmail.com>
Date: Fri, 16 Feb 2024 15:35:44 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Renommage=20et=20am=C3=A9lioration=20du?=
 =?UTF-8?q?=20Jumbotron=20(anciennement=20Hero)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/base/_button.scss     | 36 +++++++++++++++-----
 src/assets/scss/base/_typography.scss |  3 ++
 src/assets/scss/globals.scss          |  1 +
 src/components/Hero.astro             | 47 ---------------------------
 src/components/Jumbotron.astro        | 38 ++++++++++++++++++++++
 src/pages/index.astro                 | 17 ++++++++--
 6 files changed, 85 insertions(+), 57 deletions(-)
 create mode 100644 src/assets/scss/base/_typography.scss
 delete mode 100644 src/components/Hero.astro
 create mode 100644 src/components/Jumbotron.astro

diff --git a/src/assets/scss/base/_button.scss b/src/assets/scss/base/_button.scss
index b205d4a..d535fea 100644
--- a/src/assets/scss/base/_button.scss
+++ b/src/assets/scss/base/_button.scss
@@ -3,20 +3,36 @@
 // | -------------------------------------------------------------
 
 .button {
-  display: inline-block;
-  padding: 0.75rem 1rem;
-  font-weight: bold;
   text-decoration: none;
   text-align: center;
   color: var(--neutral-900);
-  background-color: var(--primary-100);
-  border: 3px solid var(--primary-100);
-  border-radius: 3px;
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
+  display: flex;
+  align-items: center;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  position: relative;
+  padding: 12px 30px;
+  margin: 0.3125rem 1px;
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.42857;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: 45px;
+  outline: 0;
+  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: box-shadow, transform;
 
   &:hover,
   &:focus {
-    text-decoration: underline;
+    text-decoration: none;
     background-color: var(--primary-200);
     border-color: var(--primary-200);
   }
@@ -25,6 +41,10 @@
     color: var(--neutral-900);
   }
 
+  &.primary {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  }
+
   &.color-secondary {
     background-color: var(--secondary-100);
     border-color: (var(--secondary-100));
diff --git a/src/assets/scss/base/_typography.scss b/src/assets/scss/base/_typography.scss
new file mode 100644
index 0000000..8e6edfd
--- /dev/null
+++ b/src/assets/scss/base/_typography.scss
@@ -0,0 +1,3 @@
+.text-primary {
+  color: var(--primary-200) !important;
+}
diff --git a/src/assets/scss/globals.scss b/src/assets/scss/globals.scss
index b15c208..ac130c9 100644
--- a/src/assets/scss/globals.scss
+++ b/src/assets/scss/globals.scss
@@ -5,6 +5,7 @@
 @use 'base/reset';
 @use 'base/root';
 @use 'base/font';
+@use 'base/typography';
 @use 'base/list';
 @use 'base/container';
 @use 'base/breakpoint';
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
deleted file mode 100644
index 39fca5f..0000000
--- a/src/components/Hero.astro
+++ /dev/null
@@ -1,47 +0,0 @@
----
-import { Icon } from 'astro-icon/components'
-
-const { src = '/astronaut-hero-img.webp' } = Astro.props
----
-
-<section class="hero my-24">
-  <div class="container">
-    <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
-      <div class="flex flex-col items-center gap-8 md:items-start">
-        <h1 class="text-center text-6xl md:text-left lg:text-8xl">
-          <slot />
-        </h1>
-        <div class="flex flex-col gap-3 min-[500px]:flex-row">
-          <a class="button has-icon" href="https://github.com/markteekman/accessible-astro-starter">
-            <Icon name="ion:star-outline" />
-            Star on GitHub
-          </a>
-          <a
-            class="button has-icon color-secondary"
-            href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md"
-          >
-            <Icon name="ion:bookmark-outline" />
-            Read the Docs
-          </a>
-        </div>
-      </div>
-      <img class="hidden lg:block" src={src} alt="" decoding="async" />
-    </div>
-  </div>
-</section>
-
-<style lang="scss" is:global>
-  .text-gradient {
-    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-500));
-    background-clip: border-box;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-
-  .darkmode .text-gradient {
-    background: linear-gradient(315deg, var(--primary-200) 25%, var(--secondary-400));
-    background-clip: border-box;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-  }
-</style>
diff --git a/src/components/Jumbotron.astro b/src/components/Jumbotron.astro
new file mode 100644
index 0000000..ca5a883
--- /dev/null
+++ b/src/components/Jumbotron.astro
@@ -0,0 +1,38 @@
+---
+import { Icon } from 'astro-icon/components'
+
+const { imageSrc = 'https://picsum.photos/400/500', imageAlt = '', header, subHeader } = Astro.props
+---
+
+<section class="jumbotron my-24">
+  <div class="container">
+    <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
+      <div class="flex flex-col items-center gap-8 md:items-start">
+        <h1>
+          {header}
+        </h1>
+        {subHeader && <p>{subHeader}</p>}
+        <div class="flex flex-col gap-3 min-[500px]:flex-row"><slot /></div>
+      </div>
+      <img class="hidden lg:block" src={imageSrc} alt={imageAlt} decoding="async" width="500" height="400" />
+    </div>
+  </div>
+</section>
+
+<style lang="scss" is:global>
+  .jumbotron {
+    background-color: var(--primary-300);
+    background-image: radial-gradient(var(--primary-200), transparent);
+    color: #fff;
+    margin-bottom: 2rem;
+    border-radius: 0 !important;
+
+    .button {
+      color: #fff;
+
+      &.primary {
+        background-color: #fff;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d785d32..9b68f94 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,13 +1,26 @@
 ---
 import DefaultLayout from '../layouts/DefaultLayout.astro'
-import Hero from '../components/Hero.astro'
+import Jumbotron from '../components/Jumbotron.astro'
 import Feature from '../components/Feature.astro'
 import Counter from '../components/Counter.astro'
 import ContentMedia from '../components/ContentMedia.astro'
+import { Icon } from 'astro-icon/components'
 ---
 
 <DefaultLayout title="Home">
-  <Hero><span class="text-gradient">Super</span> Starter for Astro</Hero>
+  <Jumbotron
+    header="Super service!"
+    subHeader="Avec une amorce alléchante. Et des détails croustillants. Et encore d'autres choses super exitantes."
+    imageSrc="https://picsum.photos/400/500"
+  >
+    <a class="button primary text-primary has-icon" href="/obtenir">
+      <Icon name="ion:bookmark-outline" />
+      Obtenir
+    </a>
+    <a class="button" href="https://github.com/markteekman/accessible-astro-starter/blob/main/README.md">
+      Read the Docs
+    </a>
+  </Jumbotron>
   <section class="my-64">
     <div class="container">
       <h2 class="mb-16 text-6xl">Features</h2>