add movie page backgrond image

resources/views/movie.blade.php

@@ -7,6 +7,29 @@
 @section('head')
 <style>
     /* {!! Vite::content('resources/scss/player.scss') !!} */
+    picture:after {
+        position: absolute;
+        content: "";
+        top: 0;
+        left: 0;
+        bottom: -6px;
+        width: 100%;
+        /* height: 100%; */
+        box-shadow: inset 1px 0 105px 105px #0d0d31;
+        background: linear-gradient(to bottom, #0d0d3105, #0d0d31);
+        background-color: #0d0d3188;
+        position: absolute;
+    }
+    picture > img {
+        /* filter: blur(1px); */
+        object-fit: cover;
+        object-position: top;
+        height: 100%;
+        width: 100%;
+        position: absolute;
+        top: 0;
+
+    }
 </style>
 @endsection
 
@@ -14,12 +37,20 @@
 {{-- {!! getMovieMarkupData($movie) !!} --}}
 {{-- @endsection --}}
 @section('app')
-<section class="inner-hero bg_img dark--overlay lazy" data-bg="{{asset('images/breadcrumb.webp')}}" style="background-image: data:image/svg+xml,%3Csvg width='1920' height='500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1920' height='500' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
+<section class="inner-hero bg_img dark--overlay lazy">
+    <picture style="position: absolute; width:100%;  top:0; min-height:720px">
+        @if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
+        <source type="image/webp" data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w">
+        @endif
+        <img  @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}" @endif width="100%" height="720" class="lazy" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
+    </picture>
     <div class="container position-relative">
         <div class="row">
             <div class="col-lg-12">
                 <h1 class="text-center ">{{ str($movie['title'])->apa() }}</h1>
+                @if($movie['tagline'])
                 <p class="text-center" style="font-style:italic; font-size:1.3rem">"{{ $movie['tagline'] }}"</p>
+                @endif
                 <ul class="page-breadcrumb d-flex justify-content-center">
                     <li><a href="{{route('home')}}" class="">Home</a></li>
                     <li><a href="{{route('movies')}}" class="">Movies</a></li>
@@ -30,18 +61,10 @@
     </div>
 </section>
 
-<div class="pt-80 pb-80">
+<div class="pt-80 pb-80 position-relative">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12">
-         {{--       <div class="main-video cover" style="position: relative;width:100%">
-                    <picture>
-                        @if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
-                        <source type="image/webp" data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w">
-                        @endif
-                        <img  @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}" @endif width="1280" height="720" class="lazy" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
-                    </picture>
-                </div>  --}}
                         <div class="movie-content">
                             <div class="movie-content-inner d-sm-flex justify-content-between align-items-center flex-wrap">
                                 <div class="movie-content-left">
@@ -93,6 +116,8 @@
                                             <div class="col-lg-6">
                                                 <h4 class="mb-3">Details</h4>
                                                 <p>{{ $movie['overview'] }}</p>
+                                                <ul class="movie-details-list mt-3">
+
                                                     <li>
                                                         <span class="caption">Genres:&nbsp</span>
                                                         <span class="value">
@@ -109,6 +134,7 @@
                                                             @endforeach
                                                         </span>
                                                     </li>
+                                                </ul>
                                             </div>
                                             <div class="col-lg-6 mt-lg-0 mt-4">
                                                 <h4 class="mb-3">Cast & Crew</h4>
@@ -153,7 +179,7 @@
                 </div>
             </div>
 
-<section class="movie-section pb-80">
+            <section class="movie-section pb-80 position-relative">
                 <div class="container">
                     <div class="row">
                         <div class="col-xl-12">