File: /home/workzeni/stream-flix.workzenix.com/resources/views/website/pages/home/index.blade.php
@extends('website.index')
@section('title', 'StreamFlix')
@section('body')
<!-- Hero Carousel -->
<section class="hero-section">
<div id="heroCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
<!-- Carousel Indicators -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
@php
function formatDuration($minutes)
{
if (!$minutes) {
return '';
}
if (!is_numeric($minutes)) {
return $minutes;
}
$h = floor($minutes / 60);
$m = $minutes % 60;
return "{$h}h {$m}m";
}
@endphp
@foreach ($heroBanner as $index => $movie)
<!-- Slide -->
<div class="carousel-item {{ $index === 0 ? 'active' : '' }}" data-movie-id="{{ $loop->iteration }}">
<div class="hero-slide"
style="background-image: url('{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}')">
<div class="hero-overlay"></div>
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-6">
<div class="hero-content">
<h1 class="hero-title">{{ $movie->name }}</h1>
<div class="hero-meta mb-3">
<span class="badge bg-secondary-accent me-2">
{{ \Carbon\Carbon::parse($movie->year)->format('Y') }}
</span>
<span style="color: var(--text-muted);">
{{ formatDuration($movie->duration) }}
</span>
@if ($movie->rating)
<span class="badge bg-warning text-dark ms-2">{{ $movie->rating }}
IMDb</span>
@endif
</div>
<div class="hero-actions">
<a class="btn btn-accent btn-lg me-3"
href="{{ route('watch', ['code' => $movie->code, 'slug' => $movie->slug]) }}">
<i class="bi bi-play-fill me-2"></i>Play
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endforeach
</div>
<!-- Carousel Controls -->
<button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Main Content -->
<main class="main-content">
<div class="container-fluid px-4">
<!-- Google Ad Banner 1 -->
<div class="google-ad-slot" id="ad-banner-1">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6712105148259741"
crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed"
data-ad-client="ca-pub-6712105148259741" data-ad-slot="1781730423"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- Popular Movies Section -->
<section class="content-section">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="section-title">Popular Movies</h2>
<a href="#" class="text-accent text-decoration-none">View All</a>
</div>
<!-- Mobile Horizontal Scroll -->
<div class="d-md-none">
<div class="horizontal-scroll">
<div class="movie-cards-horizontal">
@foreach ($popularMovies as $movie)
<!-- Movie Card 1 -->
<div class="movie-card">
<a href="{{ route('watch', ['code' => $movie->code, 'slug' => $movie->slug]) }}">
<div class="movie-poster">
<img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}"
alt="{{ $movie->name }}" loading="lazy">
<div class="movie-overlay">
<div class="play-icon">
<i class="bi bi-play-fill"></i>
</div>
</div>
<div class="language-badges">
<span class="language-badge">{{ $movie->language->name }}</span>
</div>
<div class="rating-badge">
<i class="bi bi-star-fill"></i> 8.0
</div>
</div>
<div class="movie-info">
<h5 class="movie-card-title">{{ $movie->name }}</h5>
<div class="movie-meta">
<span class="badge bg-secondary-accent me-1">{{ $movie->year }}</span>
<span>{{ formatDuration($movie->duration) }}</span>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
<!-- Desktop Grid -->
<div class="d-none d-md-block">
<div class="row g-3">
@foreach ($popularMovies as $movie)
<!-- Movie Card 1 -->
<div class="col-6 col-md-4 col-lg-2">
<a class="movie-card" href="{{ route('watch', ['code' => $movie->code, 'slug' => $movie->slug]) }}">
<div class="movie-poster">
<img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}"
alt="{{ $movie->name }}" loading="lazy">
<div class="movie-overlay">
<div class="play-icon">
<i class="bi bi-play-fill"></i>
</div>
</div>
<div class="language-badges">
<span class="language-badge">{{ $movie->language->name }}</span>
</div>
<div class="rating-badge">
<i class="bi bi-star-fill"></i> 8.0
</div>
</div>
<div class="movie-info">
<h5 class="movie-card-title">{{ $movie->name }}</h5>
<div class="movie-meta">
<span class="badge bg-secondary-accent me-1">{{ $movie->year }}</span>
<span>{{ formatDuration($movie->duration) }}</span>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</section>
<!-- New Releases Section -->
<section class="content-section">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="section-title">New Releases</h2>
<a href="category.html?category=latest" class="text-accent text-decoration-none">View All</a>
</div>
<!-- Mobile Horizontal Scroll -->
<div class="d-md-none">
<div class="horizontal-scroll">
<div class="movie-cards-horizontal">
@foreach ($newMovies as $movie)
<!-- Movie Card 1 -->
<div class="movie-card">
<a href="{{ route('watch', ['code' => $movie->code, 'slug' => $movie->slug]) }}">
<div class="movie-poster">
<img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}"
alt="{{ $movie->name }}" loading="lazy">
<div class="movie-overlay">
<div class="play-icon">
<i class="bi bi-play-fill"></i>
</div>
</div>
<div class="language-badges">
<span class="language-badge">{{ $movie->language->name }}</span>
</div>
<div class="rating-badge">
<i class="bi bi-star-fill"></i> 8.0
</div>
</div>
<div class="movie-info">
<h5 class="movie-card-title">{{ $movie->name }}</h5>
<div class="movie-meta">
<span class="badge bg-secondary-accent me-1">{{ $movie->year }}</span>
<span>{{ formatDuration($movie->duration) }}</span>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
<!-- Desktop Grid -->
<div class="d-none d-md-block">
<div class="row g-3">
@foreach ($newMovies as $movie)
<!-- Movie Card 1 -->
<div class="col-6 col-md-4 col-lg-2">
<a class="movie-card" href="{{ route('watch', ['code' => $movie->code, 'slug' => $movie->slug]) }}">
<div class="movie-poster">
<img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}"
alt="{{ $movie->name }}" loading="lazy">
<div class="movie-overlay">
<div class="play-icon">
<i class="bi bi-play-fill"></i>
</div>
</div>
<div class="language-badges">
<span class="language-badge">{{ $movie->language->name }}</span>
</div>
<div class="rating-badge">
<i class="bi bi-star-fill"></i> 8.0
</div>
</div>
<div class="movie-info">
<h5 class="movie-card-title">{{ $movie->name }}</h5>
<div class="movie-meta">
<span class="badge bg-secondary-accent me-1">{{ $movie->year }}</span>
<span>{{ formatDuration($movie->duration) }}</span>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</section>
<!-- Google Ad Banner 2 -->
<div class="google-ad-slot" id="ad-banner-2">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6712105148259741"
crossorigin="anonymous"></script>
<ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed"
data-ad-client="ca-pub-6712105148259741" data-ad-slot="5529403740"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- all Movies Section -->
<section class="content-section">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2 class="section-title">Movies Point</h2>
<a href="category.html?category=action" class="text-accent text-decoration-none">View All</a>
</div>
<!-- Mobile Horizontal Scroll -->
<div class="d-md-none">
<div class="horizontal-scroll">
<div class="movie-cards-horizontal">
@foreach ($movies as $movie)
<!-- Movie Card 1 -->
<div class="movie-card">
<a href="{{ route('watch', ['code' => $movie->code, 'slug' => $movie->slug]) }}">
<div class="movie-poster">
<img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}"
alt="{{ $movie->name }}" loading="lazy">
<div class="movie-overlay">
<div class="play-icon">
<i class="bi bi-play-fill"></i>
</div>
</div>
<div class="language-badges">
<span class="language-badge">{{ $movie->language->name }}</span>
</div>
<div class="rating-badge">
<i class="bi bi-star-fill"></i> 8.0
</div>
</div>
<div class="movie-info">
<h5 class="movie-card-title">{{ $movie->name }}</h5>
<div class="movie-meta">
<span class="badge bg-secondary-accent me-1">{{ $movie->year }}</span>
<span>{{ formatDuration($movie->duration) }}</span>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</div>
<!-- Desktop Grid -->
<div class="d-none d-md-block">
<div class="row g-3">
@foreach ($movies as $movie)
<!-- Movie Card 1 -->
<div class="col-6 col-md-4 col-lg-2">
<a class="movie-card" href="{{ route('watch', ['code' => $movie->code, 'slug' => $movie->slug]) }}">
<div class="movie-poster">
<img src="{{ asset('uploads/thumbnail/' . $movie->thumbnail_image) }}"
alt="{{ $movie->name }}" loading="lazy">
<div class="movie-overlay">
<div class="play-icon">
<i class="bi bi-play-fill"></i>
</div>
</div>
<div class="language-badges">
<span class="language-badge">{{ $movie->language->name }}</span>
</div>
<div class="rating-badge">
<i class="bi bi-star-fill"></i> 8.0
</div>
</div>
<div class="movie-info">
<h5 class="movie-card-title">{{ $movie->name }}</h5>
<div class="movie-meta">
<span class="badge bg-secondary-accent me-1">{{ $movie->year }}</span>
<span>{{ formatDuration($movie->duration) }}</span>
</div>
</div>
</a>
</div>
@endforeach
</div>
</div>
</section>
</div>
</main>
@endsection