72 lines
3.5 KiB
PHP
72 lines
3.5 KiB
PHP
@extends('layouts.layout')
|
|
|
|
@push('head')
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
|
|
|
<style>
|
|
{!! Vite::content('resources/scss/home.scss') !!}
|
|
{!! Vite::content('resources/scss/animate.scss') !!}
|
|
</style>
|
|
{{-- @vite(['resources/scss/animate.scss']) --}}
|
|
|
|
@endpush
|
|
|
|
@section('app')
|
|
|
|
|
|
<section class="hero">
|
|
<div class="hero__slider">
|
|
@foreach ($hero as $slider)
|
|
<div class="movie-slide"{{-- data-bg="{{ $slider['backdrop'] }}" --}} >
|
|
<img style="object-fit: cover; object-position: center; z-index:-1;position:absolute; width: 100%; height:100%; pointer-events: none;" alt="{{ __($slider['title']) }} image" class="lazy" data-src="{{ $slider['backdrop'] }}" width="780" height="439" src="data:image/svg+xml,%3Csvg width='780' height='439' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='780' height='439' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
|
|
<div class="movie-slide__content">
|
|
<h2 class="movie-name" data-animation="fadeInUp" data-delay=".2s">{{ __($slider['title']) }}</h2>
|
|
<ul class="movie-meta justify-content-lg-start justify-content-center" data-animation="fadeInUp" data-delay=".4s">
|
|
@if($slider['vote_average'] && $slider['vote_average'] != 0)
|
|
<li><i class="color--glod">
|
|
<svg class="si">
|
|
<use href="#si-star-fill"></use>
|
|
</svg>
|
|
</i> <span>({{$slider['vote_average'] ?? 'NA'}})</span></li>
|
|
@endif
|
|
@foreach($slider['genres'] as $genre)
|
|
<li><span>{{ $genre['name'] }}</span></li>
|
|
@endforeach
|
|
</ul>
|
|
<p data-animation="fadeInUp" data-delay=".7s">{{ __($slider['overview']) }}</p>
|
|
<div class="btn-area justify-content-lg-start justify-content-center align-items-center mt-lg-5 mt-sm-3 mt-2" data-animation="fadeInLeft" data-delay="1s">
|
|
<a class="video-btn justify-content-lg-start justify-content-center" href="{{ route('movie', ['slug' => $slider['slug'], 'id' => $slider['id']]) }}">
|
|
<div class="icon">
|
|
<svg class="si">
|
|
<use href="#si-play"></use>
|
|
</svg>
|
|
</div>
|
|
<span>@lang('Watch')</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@include('sections.featured', ['items' => $trending_movies, 'title' => 'Featured'])
|
|
|
|
<div class="sections">
|
|
@include('sections.single', ['item' => $trending_movies[6]])
|
|
@include('sections.items', ['items' => $popular_movies, 'title' => 'Popular Movies'])
|
|
@include('sections.single', ['item' => $trending_movies[3]])
|
|
@include('sections.top', ['col1_title' => 'Top Movies', 'col1_items' => collect($trending_movies)->take(4), 'col2_title' => 'Top Series', 'col2_items' => collect($trending_shows)->take(4), 'item' => $trending_movies[2]])
|
|
@include('sections.trailers')
|
|
@include('sections.single', ['item' => $trending_movies[5]])
|
|
|
|
</div>
|
|
|
|
|
|
@endsection
|
|
|
|
|
|
@section('footer')
|
|
{{-- <script type="module" src="{{ asset('js/vendor/slick.min.js') }}"></script> --}}
|
|
<script defer src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
@vite(['resources/js/home.js'])
|
|
@endsection
|