Add overlay on css, adapt shelves, fix bienvenue mail on laravel 9 methods

app/Http/Controllers/Shop/CategoryController.php

@@ -64,7 +64,7 @@ class CategoryController extends Controller
             ]),
             'tags' => TagGroups::getWithTagsAndCountOffers($category_id),
         ];
-        // dump($data);
+        dump($data);
         return view('Shop.Shelves.shelve', $data);
     }
 

app/Mail/Bienvenue.php

@@ -4,10 +4,12 @@ namespace App\Mail;
 
 use App\Models\Core\Mail\MailTemplate;
 use App\Repositories\Core\DateTime;
+use App\Repositories\Shop\Customers;
 use Illuminate\Bus\Queueable;
+use Illuminate\Mail\Mailables\Address;
+use Illuminate\Mail\Mailables\Envelope;
 use Illuminate\Queue\SerializesModels;
 use Spatie\MailTemplates\TemplateMailable;
-use App\Repositories\Shop\Customers;
 
 
 class Bienvenue extends TemplateMailable
@@ -29,8 +31,6 @@ class Bienvenue extends TemplateMailable
         $this->user = $user;
         $this->male = $user->gender == 1;
         $this->subject = $subject;
-        $this->from[] = ['address' => 'boutique@jardinenvie.com','name' => 'Boutique JardinEnVie'];
-        $this->reply_to = ['address' => 'boutique@jardinenvie.com','name' => 'Boutique JardinEnVie'];
     }
 
     public static function getDataByUser($user_id)
@@ -48,11 +48,11 @@ class Bienvenue extends TemplateMailable
         return Customers::get($id);
     }
 
-    public function build()
+    public function envelope()
     {
-        $data = ['user' => $this->user];
-        $template = $this->getTemplate();
-        return $this->view($template, $data);
+        return new Envelope(
+            from: new Address('boutique@jardinenvie.com', 'Jardin\'en\'Vie'),
+            subject: $this->subject,
+        );
     }
-
 }

build/css/site.css

@@ -235,6 +235,77 @@ a.nav-link {
 	width: 192px;
 }
 
+
+.content {
+	position: relative;
+	width: 100%;
+	max-width: 400px;
+	margin: auto;
+	overflow: hidden
+}
+
+.content .content-overlay {
+	background: rgba(0, 0, 0, 0.7);
+	position: absolute;
+	height: 99%;
+	width: 100%;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	opacity: 0;
+	-webkit-transition: all 0.4s ease-in-out 0s;
+	-moz-transition: all 0.4s ease-in-out 0s;
+	transition: all 0.4s ease-in-out 0s
+}
+
+.content:hover .content-overlay {
+	opacity: 1
+}
+
+.content-image {
+	width: 100%
+}
+
+.content-details {
+	position: absolute;
+	text-align: center;
+	padding-left: 1em;
+	padding-right: 1em;
+	width: 100%;
+	top: 50%;
+	left: 50%;
+	opacity: 0;
+	-webkit-transform: translate(-50%, -50%);
+	-moz-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	-webkit-transition: all 0.3s ease-in-out 0s;
+	-moz-transition: all 0.3s ease-in-out 0s;
+	transition: all 0.3s ease-in-out 0s;
+	-ms-transform: translate(-50%, -50%);
+	-o-transform: translate(-50%, -50%);
+}
+
+.content:hover .content-details {
+	top: 50%;
+	left: 50%;
+	opacity: 1
+}
+
+.content-details h3 {
+	color: #fff;
+	font-weight: 500;
+	letter-spacing: 0.15em;
+	margin-bottom: 0.5em;
+	text-transform: uppercase
+}
+
+.content-details p {
+	color: #fff;
+	font-size: 0.8em
+}
+
+
 @font-face {
     font-family: 'noto_sanscondensed';
     src: url('/fonts/notosans-condensed/notosans-condensed-webfont.eot');

build/css/txt.css

@@ -0,0 +1 @@
+@import url(https://fonts.googleapis.com/css?family=Raleway);body{background: #f9f9f9;font-size: 16px;font-family: 'Raleway', sans-serif}.container{margin-top: 200px}.title{color: #1a1a1a;text-align: center;margin-bottom: 10px}.content{position: relative;width: 90%;max-width: 400px;margin: auto;overflow: hidden}.content .content-overlay{background: rgba(0,0,0,0.7);position: absolute;height: 99%;width: 100%;left: 0;top: 0;bottom: 0;right: 0;opacity: 0;-webkit-transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;transition: all 0.4s ease-in-out 0s}.content:hover .content-overlay{opacity: 1}.content-image{width: 100%}img{box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.1);border-radius: 5px}.content-details{position: absolute;text-align: center;padding-left: 1em;padding-right: 1em;width: 100%;top: 50%;left: 50%;opacity: 0;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s}.content:hover .content-details{top: 50%;left: 50%;opacity: 1}.content-details h3{color: #fff;font-weight: 500;letter-spacing: 0.15em;margin-bottom: 0.5em;text-transform: uppercase}.content-details p{color: #fff;font-size: 0.8em}.fadeIn-bottom{top: 80%}

resources/views/Shop/Articles/partials/article.blade.php

@@ -1,6 +1,15 @@
 <a href="{{ route('Shop.Articles.show', ['id' => $article['id'] ?? false ]) }}" class="green-dark">
 	<div class="card">
-		<img src="{{ App\Repositories\Shop\Articles::getPreviewSrc($article['image'] ?? false) }}" class="card-img-top" alt="{{ $product_name }}">
+		<div class="content">
+			<a href="#">
+				<div class="content-overlay"></div>
+				<img class="content-image card-img-top" src="{{ App\Repositories\Shop\Articles::getPreviewSrc($article['image'] ?? false) }}" alt="{{ $product_name }}">
+				<div class="content-details fadeIn-bottom">
+					<h3 class="content-title d-none">Geysers Valley Hotel</h3>
+					<p class="content-text">{{ $article['description'] }}</p>
+				</div>
+			</a>
+		</div>
 		<div class="card-body p-2 pb-1">
 			<div class="row card-title">
 				<div class="col-12 green">

resources/views/Shop/layout/layout.blade.php

@@ -27,7 +27,7 @@
 		<main>
             @include("Shop.layout.partials.header")
 			<div class="content-wrapper">
-				<section class="content">
+				<section>
 					<div class="container-fluid p-0">
 						@yield('content')
 					</div>