From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 7 Apr 2025 18:24:23 +0000 (+0200)
Subject: wip #7442 @7:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=f1fce6f58198933833e47a4fa7a8c52e0ba8b4c3;p=psq.git

wip #7442 @7:00
---

diff --git a/resources/sass/_articles.scss b/resources/sass/_articles.scss
index 7a51b5d..60414e6 100644
--- a/resources/sass/_articles.scss
+++ b/resources/sass/_articles.scss
@@ -24,7 +24,6 @@
         }
 
         p {
-            margin-bottom: 1rem;
             font-family: "Avenir Next", sans-serif;
             font-size: 17px;
             line-height: 1.6;
diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss
index 7640291..1b9d6ce 100644
--- a/resources/sass/_colors.scss
+++ b/resources/sass/_colors.scss
@@ -92,8 +92,8 @@ $psq_pages: (
 @each $class, $color in $psq_pages {
     .#{$class} {
         h1 {
-            color: white;
-            background-color: $color;
+            @extend .bigtitle;
+            color: $blue;
         }
         .pill-box-auto > div {
             //background-color: rgba($color, 0.08) !important;
diff --git a/resources/sass/_covers.scss b/resources/sass/_covers.scss
index b3c52b9..5c009e4 100644
--- a/resources/sass/_covers.scss
+++ b/resources/sass/_covers.scss
@@ -24,10 +24,6 @@ div.cover {
         }
     }
 
-    img.cover-over {
-        position: absolute;
-    }
-
     .cover-title {
 
         width: fit-content;
@@ -45,7 +41,6 @@ div.cover {
         }
 
         p {
-            text-transform: uppercase;
             color: $psq_logo_blue;
             background-color: $psq_light_blue;
             text-align: center;
diff --git a/resources/sass/_headers.scss b/resources/sass/_headers.scss
index 7614180..9ccd0de 100644
--- a/resources/sass/_headers.scss
+++ b/resources/sass/_headers.scss
@@ -1,19 +1,6 @@
-
-h1 {
-    @extend .highlight-red;
-    text-transform: uppercase;
-    margin: auto auto 1rem;
-    text-align: center;
-    display: table;
-    font-size: x-large;
-    padding: 6px 8px 4px;
-
-}
-
 h2 {
     font-weight: 500;
     font-size: large;
-    text-transform: uppercase;
     color: $psq_blue;
 }
 
diff --git a/resources/sass/_home.scss b/resources/sass/_home.scss
new file mode 100644
index 0000000..fc9f12e
--- /dev/null
+++ b/resources/sass/_home.scss
@@ -0,0 +1,72 @@
+.psq-home {
+
+    &-banner {
+        padding: 64px 0;
+
+        .col2 {
+            padding: 0 0 0 64px;
+            gap: 23px 0
+        }
+    }
+
+    &-pdfimage {
+        height: 369px;
+        width: 252px;
+
+        img {
+            width: 100%;
+        }
+    }
+
+    &-edition-jour {
+        display: grid;
+        gap: 0 64px;
+        grid-template-columns: 387px 1fr;
+        grid-template-rows: 50% 50%;
+        width: 100%;
+        height: 557px;
+
+        .grid-1 {
+            grid-column: 2;
+            grid-row: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+            .date {
+                font-size: 20px;
+                font-weight: 600;
+            }
+        }
+
+        .cover {
+            grid-column: 1;
+            grid-row: 1 / 2;
+
+            img {
+                width: 100% !important;
+            }
+
+            &-title {
+                display: none;
+            }
+        }
+
+        .grid-2 {
+            grid-column: 2;
+            grid-row: 2;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            margin-top: auto;
+            padding-top: 32px;
+            @extend .dotted;
+            h2 {
+                @extend .mediumtitle;
+            }
+
+            a {
+                font-size: 16px;
+            }
+        }
+    }
+}
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 10345d8..6687b3b 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -15,6 +15,7 @@
 @import "blocks";
 @import "polls";
 @import "articles";
+@import "home";
 
 body {
     margin-bottom: 0 !important;
@@ -24,6 +25,10 @@ main {
         min-height: calc(100vh - 360px);
 }
 
+p,a,h1,h2,h3,h4,span,li,div {
+    color: $blue;
+}
+
 @media print {
     nav {
         display: none;
@@ -367,7 +372,46 @@ article {
     padding: 12px 30px;
 }
 
+.bigtitle {
+    font-size: 39px;
+    font-weight: 700;
+    @include media-breakpoint-up(lg) {
+        font-size: 61px;
+    }
+}
+
 .container {
     padding-right: 16px;
     padding-left: 16px;
 }
+
+.bigtitle {
+    font-size: 61px;
+    font-weight: bold;
+    line-height: 61px;
+}
+
+.mediumtitle {
+    font-size: 25px;
+    font-weight: 600;
+    line-height: 27px;
+    color: $blue;
+}
+
+.btnorange {
+    background-color: #D04D4B;
+    border-radius: 24px;
+    color: #ffffff !important;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 12px 34px;
+    width: max-content;
+}
+
+.text-decoration-underline {
+    text-decoration: underline;
+}
+
+.dotted {
+    border-top: 1px dotted $blue;
+}
diff --git a/resources/views/components/cover.blade.php b/resources/views/components/cover.blade.php
index 94996ad..f11adb7 100644
--- a/resources/views/components/cover.blade.php
+++ b/resources/views/components/cover.blade.php
@@ -1,10 +1,8 @@
 <div class="cover {{$class}}">
 
     <a href="{{$link}}" target="{{$target}}">
-        <img class="cover-bg" src="{{$file}}" alt="">
         <img class="cover-over" src="{{$pdf->coverUrl}}" alt="">
         <div class="cover-title">
-            <img src="{{asset('img/blue-pill.svg')}}" alt="">
             <p>{{$pdf->title}} - {{$pdf->created_at->format('d/m/Y')}}</p>
         </div>
     </a>
diff --git a/resources/views/home/index.blade.php b/resources/views/home/index.blade.php
index 15fef6d..7a51d7d 100644
--- a/resources/views/home/index.blade.php
+++ b/resources/views/home/index.blade.php
@@ -38,6 +38,41 @@
             </div>
         @endif
 
+        <div class="psq-home-banner">
+            <div class="row">
+                <div class="col-md-8">
+
+                    <div class="psq-home-edition-jour">
+                        <div class="grid-1">
+                            <h1 class="bigtitle">L'édition du jour</h1>
+                            <p class="date m-0">Lundi 17 septembre 2024</p>
+                            <a href="" class="btnorange">Lire le quotidien</a>
+                        </div>
+                        <x-cover :pdf="$last_pdf->first()" type="3">
+                        </x-cover>
+                        <div class="grid-2">
+                            <h2>Pas encore abonné ?</h2>
+                            <a href="">Découvrez notre offre d’abonnement.</a>
+                        </div>
+                    </div>
+                    {{--@foreach($last_pdf->first()->headlines ?? [] as $headline)
+
+                        <x-headline :headline="$headline" class="mt-3">
+                        </x-headline>
+
+                    @endforeach--}}
+
+                </div>
+                <div class="col-md-4 col2 d-flex flex-column">
+                    <h2 class="m-0">Découvrez gratuitement notre quotidien durant 1 mois</h2>
+                    <div class="psq-home-pdfimage">
+                        <img src="{{ $last_pdf->first()->coverUrl }}" alt="" />
+                    </div>
+                    <a href="" class="btnorange">Offre découverte</a>
+                </div>
+            </div>
+        </div>
+
         <h1>L'actualité du médicament à la une de notre quotidien</h1>
         <div class="row justify-content-center pt-3">
             <div class="col-md-4">
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index c739ba3..295a1e9 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -91,7 +91,7 @@
 
         @endif
 
-        <main class="py-2 pill-box-theme-{{$theme ?? 'logo-blue'}}">
+        <main class="pill-box-theme-{{$theme ?? 'logo-blue'}}">
             @yield('content')
         </main>