css footer settings + add footer background pictures

public/css/app.css

@@ -4796,12 +4796,26 @@ h3:not(.item__title, .product-card__title){
   align-items:center;
 }
 .footer-widgets .footer-widgets__content{
-  left:0;
+  left:20%;
   right:0;
 }
-.footer-widgets .footer-widgets__content:before{
-  content:url(/assets/images/picto-localisation.png?1ed74fd342d22cce12e6d3f1c232a901);
-  margin-right:10px;
+.footer-widgets .footer-widgets__content #picto-localisation{
+  position:absolute;
+  left:-30px;
+  width:25px;
+  height:34px;
+}
+.footer-widgets .footer-widgets__content #picto-localisation .cls-1{
+  fill:#131414;
+}
+.footer-widgets .footer-widgets__content #picto-localisation .cls-2{
+  fill:transparent;
+}
+.footer-widgets .footer-widgets__content.white-color p{
+  color:white;
+}
+.footer-widgets .footer-widgets__content.white-color #picto-localisation .cls-1{
+  fill:white;
 }
 .footer-widgets img{
   max-width:100%;
@@ -4820,6 +4834,11 @@ h3:not(.item__title, .product-card__title){
   text-decoration:none;
 }
 
+.banner.footer{
+  top:-1px;
+  transform:rotate(180deg);
+}
+
 @media screen and (min-width: 800px){
   .footer-content ul li{
     display:inline-block;
@@ -4845,7 +4864,20 @@ h3:not(.item__title, .product-card__title){
   }
   .footer-widgets .footer-widgets__content{
     text-align:center;
-    margin-top:50px;
+    left:50%;
+    transform:translateX(-50%);
+    bottom:20px;
+  }
+  .footer-widgets .footer-widgets__content #picto-localisation{
+    top:-40px;
+    left:50%;
+    transform:translateX(-50%);
+  }
+  .footer-widgets .footer-widgets__content.white-color p{
+    color:black;
+  }
+  .footer-widgets .footer-widgets__content.white-color #picto-localisation .cls-1{
+    fill:black;
   }
 
   .footer-content ul li{

resources/sass/_footer.scss

@@ -1,11 +1,30 @@
 .footer-widgets {
     align-items: center;
     .footer-widgets__content {
-        left: 0;
+        left: 20%;
         right: 0;
-        &:before {
-            content: url(~@/images/picto-localisation.png);
-            margin-right: 10px;
+        #picto-localisation {
+            position: absolute;
+            left: -30px;
+            width: 25px;
+            height: 34px;
+
+            .cls-1 {
+                fill: #131414;
+            }
+            .cls-2 {
+                fill: transparent;
+            }
+        }
+        &.white-color {
+            p {
+                color: white;
+            }
+            #picto-localisation {
+                .cls-1 {
+                    fill: white;
+                }
+            }
         }
     }
     img {
@@ -28,6 +47,11 @@
     }
 }
 
+.banner.footer {
+    top: -1px;
+    transform: rotate(180deg);
+}
+
 @media screen and (min-width: 800px) {
     .footer-content {
         ul {
@@ -56,7 +80,25 @@
         }
         .footer-widgets__content {
             text-align: center;
-            margin-top: 50px;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 20px;
+
+            #picto-localisation {
+                top: -40px;
+                left: 50%;
+                transform: translateX(-50%);
+            }
+            &.white-color {
+                p {
+                    color: black;
+                }
+                #picto-localisation {
+                    .cls-1 {
+                        fill: black;
+                    }
+                }
+            }
         }
     }
     .footer-content {

resources/views/layouts/app-footer.blade.php

@@ -1,6 +1,14 @@
 <footer>
     <div class="footer-widgets is-flex p-rel">
-        <div class="footer-widgets__content wrapper is-flex p-abs">
+        <div class="footer-widgets__content wrapper is-flex p-abs @if (Route::current()->getName() == 'food') white-color @endif">
+            <svg id="picto-localisation" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 34">
+                <path class="cls-1" d="M13,34H12L0,16V9A17.57,17.57,0,0,1,9,0h7a17.86,17.86,0,0,1,9,9v7Zm-.32-15.79c3.8-.16,5.87-2.45,5.88-6s-2.46-5.7-6-6C9.31,6,6,9.41,6.39,12.6,6.86,16.09,8.82,18.3,12.68,18.21Z" />
+                <path class="cls-2" d="M0,16,12,34H0Z" />
+                <path class="cls-2" d="M13,34,25,16V34Z" />
+                <path class="cls-2" d="M25,9a17.86,17.86,0,0,0-9-9h9Z" />
+                <path class="cls-2" d="M9,0A17.57,17.57,0,0,0,0,9V0Z" />
+                <path class="cls-2" d="M12.67,18.2c-3.85.1-5.81-2.11-6.28-5.6C6,9.41,9.31,6,12.56,6.25c3.54.31,6,2.4,6,6S16.48,18.05,12.67,18.2Z" />
+            </svg>
             <p>
                 DOUX FARMOR<br />
                 450 Route de Rosporden<br />
@@ -8,7 +16,45 @@
                 28000 QUIMPER, France
             </p>
         </div>
-        <img src="{{ asset('assets/images/footer.jpg') }}" alt="Suggestion de poulet frit" />
+        @switch (Route::current()->getName())
+        @case('wasup')
+        <img src="{{ asset('assets/images/footer_marque.jpg') }}" alt="Cuisiner en famille" />
+        @break
+        @case('product')
+        <img src="{{ asset('assets/images/footer_product.jpg') }}" alt="Poulet rôti" />
+        @break
+        @case('products')
+        <img src="{{ asset('assets/images/footer_products.jpg') }}" alt="Poulet rôti" />
+        @break
+        @case('gammes')
+        <img src="{{ asset('assets/images/footer_gammes.jpg') }}" alt="Grignottes de poulet" />
+        @break
+        @case('news')
+        <img src="{{ asset('assets/images/footer_news.jpg') }}" alt="Poulet rôti" />
+        @break
+        @case('food')
+        <img src="{{ asset('assets/images/footer_food.jpg') }}" alt="Cuisine de chef" />
+        @break
+        @default
+        <img src="{{ asset('assets/images/footer_home.jpg') }}" alt="Suggestion de poulet frit" />
+        @endswitch
+        <div class="banner footer">
+            <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>
     </div>
 
     <div class="container footer-content align-center">