feat: Renommage et amélioration du Jumbotron (anciennement Hero)

bibudem · Feb 16, 2024 · 996806b · 996806b
1 parent ff432d2
commit 996806b
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/src/components/Jumbotron.astro 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
@@ -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>