From fdf1a89a771f4de6d76fb340cb78010d6cdac8e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20Munsch?= <jeremy.munsch@ldc.fr>
Date: Fri, 28 Jun 2024 11:30:21 +0200
Subject: [PATCH] card club home a11y + mobile inscription

---
 .../sass/club/partials/_card-club-home.scss   |   3 +-
 resources/views/club/pages/home.blade.php     | 107 +++++++++++-------
 2 files changed, 66 insertions(+), 44 deletions(-)

diff --git a/resources/sass/club/partials/_card-club-home.scss b/resources/sass/club/partials/_card-club-home.scss
index 61280cf1..a14d0e49 100644
--- a/resources/sass/club/partials/_card-club-home.scss
+++ b/resources/sass/club/partials/_card-club-home.scss
@@ -2,6 +2,7 @@
     position: relative;
     width: 17.062rem;
     height: 25.687rem;
+    flex-shrink: 0;
 
     .card-img-top {
         width: 100%;
@@ -24,7 +25,7 @@
             top: 1rem;
             right: .5rem;
             padding: .1rem .3rem;
-            background-color: $color-hex-dark-rose;
+            background-color: #{shade-color($color-hex-dark-rose, 22%)};
             color: $color-hex-light;
             font-family: BourtonBase, sans-serif;
             text-transform: uppercase;
diff --git a/resources/views/club/pages/home.blade.php b/resources/views/club/pages/home.blade.php
index 4195de6d..111b1591 100644
--- a/resources/views/club/pages/home.blade.php
+++ b/resources/views/club/pages/home.blade.php
@@ -6,54 +6,75 @@
 @section('page-class', 'home')
 
 @section('content')
-    <section class="row">
+    {{-- TITLE AND HOME CLUB CARDS --}}
+    <section class="row mb-5">
         <div class="col-12 text-center">
             <h1 class="text-uppercase f-bourton-base">{{ __('Profitez du club des gaulois') }}</h1>
             <p>{{ __('Entrez dans le Club des Gaulois pour bénéficier des avantages réservés aux membres : bons de réduction, jeux concours, départ\'aimants, activités !') }}
             </p>
         </div>
-        <div class="col-12 d-flex flex-wrap">
-            @include('club.partials.card-club-home', [
-                'outterClass' => 'm-3',
-                'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
-                'line1' => __('Économiser'),
-                'line1Class' => 'fs-3',
-                'line2' => __('Dès aujourd’hui'),
-                'line2Class' => 'fs-4',
-                'content' => __('Spécial étudiant, Spécial famille, Spécial membre'),
-                'promoAmount' => 770,
-            ])
-            @include('club.partials.card-club-home', [
-                'outterClass' => 'm-3',
-                'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
-                'line1' => __('La communauté'),
-                'line1Class' => 'fs-4',
-                'line2' => __('départ’aimants'),
-                'line2Class' => 'fs-3',
-                'content' => __('Bourse aux échanges, Fonds de carte, Messages'),
-                'contentClass' => 'text-bg-quint',
-                'membersAmount' => 113290,
-            ])
-            @include('club.partials.card-club-home', [
-                'outterClass' => 'm-3',
-                'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
-                'line1' => __('Des jeux'),
-                'line1Class' => 'fs-3',
-                'line2' => __('pour toute la famille'),
-                'line2Class' => 'fs-4',
-                'content' => __('Jeux à imprimer, Activités créatives, jeux vidéos...'),
-                'contentClass' => 'text-bg-warning',
-            ])
-            @include('club.partials.card-club-home', [
-                'outterClass' => 'm-3',
-                'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
-                'line1' => __('Gagner des cadeaux'),
-                'line1Class' => 'fs-3',
-                'line2' => __('grâce à la quête'),
-                'line2Class' => 'fs-4',
-                'content' => __('Peluche, Chaussette, Set couverts, stylos Le Gaulois...'),
-                'contentClass' => 'text-bg-danger',
-            ])
+        <div class="col-12">
+            <div class="d-flex justify-content-md-center flex-md-wrap overflow-x-scroll">
+                @include('club.partials.card-club-home', [
+                    'outterClass' => 'm-3',
+                    'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
+                    'line1' => __('Économiser'),
+                    'line1Class' => 'fs-3',
+                    'line2' => __('Dès aujourd’hui'),
+                    'line2Class' => 'fs-4',
+                    'content' => __('Spécial étudiant, Spécial famille, Spécial membre'),
+                    'promoAmount' => 770,
+                ])
+                @include('club.partials.card-club-home', [
+                    'outterClass' => 'm-3',
+                    'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
+                    'line1' => __('La communauté'),
+                    'line1Class' => 'fs-4',
+                    'line2' => __('départ’aimants'),
+                    'line2Class' => 'fs-3',
+                    'content' => __('Bourse aux échanges, Fonds de carte, Messages'),
+                    'contentClass' => 'text-bg-quint',
+                    'membersAmount' => 113290,
+                ])
+                @include('club.partials.card-club-home', [
+                    'outterClass' => 'm-3',
+                    'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
+                    'line1' => __('Des jeux'),
+                    'line1Class' => 'fs-3',
+                    'line2' => __('pour toute la famille'),
+                    'line2Class' => 'fs-4',
+                    'content' => __('Jeux à imprimer, Activités créatives, jeux vidéos...'),
+                    'contentClass' => 'text-bg-warning',
+                ])
+                @include('club.partials.card-club-home', [
+                    'outterClass' => 'm-3',
+                    'picture' => Vite::asset('resources/assets/images/placeholders/club/homecards/wood.png'),
+                    'line1' => __('Gagner des cadeaux'),
+                    'line1Class' => 'fs-3',
+                    'line2' => __('grâce à la quête'),
+                    'line2Class' => 'fs-4',
+                    'content' => __('Peluche, Chaussette, Set couverts, stylos Le Gaulois...'),
+                    'contentClass' => 'text-bg-danger',
+                ])
+            </div>
+        </div>
+    </section>
+
+    {{-- MOBILE INSCRIPTION --}}
+    {{-- @guest('club') --}}
+    <section class="row d-sm-none mb-3">
+        <div class="col d-flex flex-column align-items-center">
+            <a class="btn btn-secondary btn-lg flex-shrink-1 mb-3" href="#FIXME:register"
+                title="{{ __('Aller sur la page :pagename', [
+                    'pagename' => __('Inscription'),
+                ]) }}">{{ __('Je m\'inscris') }}</a>
+            <a class="link-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover" href="#FIXME:login"
+                title="{{ __('Aller sur la page :pagename', [
+                    'pagename' => __('Connexion'),
+                ]) }}">{{ __('J\'ai déjà un compte') }}</a>
+        </div>
+    </section>
+    {{-- @endguest --}}
         </div>
     </section>
 @endsection