From f72bb50f18a1db6ce9a8f62bc4a48084c157e75f Mon Sep 17 00:00:00 2001
From: Sebastien Hattry <sebastien.hattry@ldc.fr>
Date: Thu, 25 Nov 2021 10:21:36 +0100
Subject: [PATCH] category page integration

---
 public/css/app.css                  | 16 +++++++++++-
 resources/sass/_list.scss           | 21 +++++++++++++++-
 resources/views/categorie.blade.php | 38 ++++++++++++++++++++++++-----
 3 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index f872cb3..65e7ed2 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -5088,6 +5088,7 @@ input[type=text]{
   height:100%;
   -o-object-fit:cover;
      object-fit:cover;
+  max-width:none;
 }
 .product-card a,
 .gamme-card a{
@@ -5154,13 +5155,18 @@ input[type=text]{
   bottom:50px;
 }
 
+#list .wrapper > div:first-child{
+  padding-top:0;
+}
 #list .title{
   color:#fff;
   font-size:calc(18px * 3.25);
 }
 #list .is-flex{
-  justify-content:space-between;
+  -moz-column-gap:20px;
+       column-gap:20px;
   flex-wrap:wrap;
+  flex-direction:initial;
 }
 #list .section-header{
   margin-bottom:50px;
@@ -5306,6 +5312,14 @@ input[type=text]{
        object-fit:cover;
   }
 }
+@media (max-width: 1024px){
+  #list .section-header{
+    margin-bottom:80px;
+  }
+  #list .is-flex{
+    justify-content:center;
+  }
+}
 @media (max-width: 1200px){
   .posts-list{
     width:100%;
diff --git a/resources/sass/_list.scss b/resources/sass/_list.scss
index e9fe1f0..0443bb0 100644
--- a/resources/sass/_list.scss
+++ b/resources/sass/_list.scss
@@ -10,6 +10,7 @@
         width: 100%;
         height: 100%;
         object-fit: cover;
+        max-width: none;
     }
     a {
         top: 0;
@@ -79,13 +80,17 @@
 }
 
 #list {
+    .wrapper > div:first-child {
+        padding-top: 0;
+    }
     .title {
         color: $color-light;
         font-size: calc(#{$globalfont} * 3.25);
     }
     .is-flex {
-        justify-content: space-between;
+        column-gap: 20px;
         flex-wrap: wrap;
+        flex-direction: initial;
     }
     .section-header {
         margin-bottom: 50px;
@@ -293,6 +298,17 @@
     }
 }
 
+@media (max-width: 1024px) {
+    #list {
+        .section-header {
+            margin-bottom: 80px;
+        }
+        .is-flex {
+            justify-content: center;
+        }
+    }
+}
+
 @media (max-width: 1200px) {
     .posts-list {
         width: 100%;
@@ -305,6 +321,9 @@
 
 @media (max-width: 768px) {
     #list {
+        // .wrapper > div:not(:last-child) {
+        //     margin-bottom: 2rem;
+        // }
         .section-header {
             .content {
                 position: relative;
diff --git a/resources/views/categorie.blade.php b/resources/views/categorie.blade.php
index ad1a954..8324307 100644
--- a/resources/views/categorie.blade.php
+++ b/resources/views/categorie.blade.php
@@ -6,10 +6,27 @@
 
 <main>
     <section class="jumbotron">
-        <p class="maintitle ttu">Elaboré cuits
+        <p class="maintitle ttu animate__animated fadeIn animate__slow">Elaboré cuits
             <!-- <span class="title-icon"><img src="{{ asset('assets/images/') }}title-icon.png" alt="icone"></span> -->
         </p>
-        <img src="{{ asset('assets/images/cuit.jpg') }}" alt="">
+        <img class="img-zoom" src="{{ asset('assets/images/entete_sous_gammes.jpg') }}" alt="">
+        <div class="banner">
+            <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
+                <defs>
+                    <style>
+                        .cls-1 {
+                            fill: #ffffff;
+                        }
+
+                        .cls-2 {
+                            fill: transparent;
+                        }
+                    </style>
+                </defs>
+                <path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
+                <path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
+            </svg>
+        </div>
     </section>
 
     <section class="container">
@@ -20,16 +37,16 @@
                 </div>
                 <!-- <h1 class="align-center">Qui sommes-nous ?</h1> -->
 
-                <h1 class="align-center"><i class="mascotte"></i>Nos produits de la gammes</h1>
+                <h1 class="align-center animate__animated fadeInUp animate__slow"><i class="mascotte"></i>Nos produits de la gammes</h1>
             </div>
             <!-- <h2 class="align-center sectiontitle">Nos produits de la gammes</h2> -->
             <p class="align-center">Des produits incontournables, Authentiques et Innovants !</p>
         </div>
     </section>
 
-    <section id="list" class="container">
+    <section id="list">
         <div class="wrapper align-center">
-            <div class="is-green">
+            <div class="is-green container">
                 <header class="section-header p-rel">
                     <div class="content p-abs">
                         <h3 class="title ttu">Gamme family</h3>
@@ -56,9 +73,18 @@
                             <span>Découvrir</span>
                         </span>
                     </div>
+                    <div class="product-card align-center">
+                        <!-- <span class="label fresh"></span> -->
+                        <img src="{{ asset('assets/images/produit-samplebis.jpg') }}" alt="">
+                        <h3 class="product-card__title">Bouchées de Volaille</h3>
+                        <a href="{{ route('product') }}"></a>
+                        <span class="overlay">
+                            <span>Découvrir</span>
+                        </span>
+                    </div>
                 </div>
             </div>
-            <div class="is-pink">
+            <div class="is-pink container">
                 <header class="section-header p-rel">
                     <div class="content p-abs">
                         <h3 class="title ttu">Gamme Little Treats</h3>