Ümit Tunç
173 lines
7.5 KiB
PHP
173 lines
7.5 KiB
PHP
@extends('layouts.site')
|
|
|
|
@section('content')
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-36 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-60 lg:pb-60 md:pb-60 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="post-header">
|
|
@if($production->client_name)
|
|
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
|
|
<span>{{ $production->translate('client_name') }}</span>
|
|
</div>
|
|
@endif
|
|
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ $production->translate('title') }}</h1>
|
|
@if($production->production_date)
|
|
<p class="lead !leading-[1.65] text-[.9rem] font-medium text-[#60697b]">
|
|
<i class="uil uil-calendar-alt before:content-['\e9ba'] !mr-1"></i>
|
|
{{ $production->production_date->format('d.m.Y') }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<article class="!mt-[-12.5rem]">
|
|
{{-- Cover Image --}}
|
|
@if($production->cover_image_url)
|
|
<figure class="!rounded-[.4rem] !mb-8 xl:!mb-[3.5rem] lg:!mb-[3.5rem] md:!mb-[3.5rem] overflow-hidden shadow-lg">
|
|
<img class="!rounded-[.4rem] w-full" src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}">
|
|
</figure>
|
|
@endif
|
|
|
|
{{-- Content & Meta --}}
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-10/12 xl:!ml-[8.33333333%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-4">{{ __('music_productions.project_details') }}</h2>
|
|
<div class="flex flex-wrap mx-0">
|
|
{{-- Content column --}}
|
|
<div class="xl:w-9/12 lg:w-9/12 md:w-9/12 w-full flex-[0_0_auto] max-w-full">
|
|
<div class="music-production-content prose max-w-none">
|
|
{!! $production->translate('content') !!}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Sidebar - Date & Client --}}
|
|
<div class="xl:w-2/12 lg:w-2/12 md:w-2/12 w-full flex-[0_0_auto] max-w-full !ml-auto">
|
|
<ul class="pl-0 list-none">
|
|
@if($production->production_date)
|
|
<li>
|
|
<h5 class="!mb-1">{!! t('Tarih') !!}</h5>
|
|
<p>{{ $production->production_date->format('d M Y') }}</p>
|
|
</li>
|
|
@endif
|
|
@if($production->client_name)
|
|
<li>
|
|
<h5 class="!mb-1">{!! t('Müşteri') !!}</h5>
|
|
<p>{{ $production->translate('client_name') }}</p>
|
|
</li>
|
|
@endif
|
|
@if($production->spotify_url)
|
|
<li>
|
|
<h5 class="!mb-1">Spotify</h5>
|
|
<p>
|
|
<a href="{{ $production->spotify_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-primary !rounded-[50rem]">
|
|
{{ __('music_productions.spotify_listen_on_spotify') }}
|
|
</a>
|
|
</p>
|
|
</li>
|
|
@endif
|
|
</ul>
|
|
<a href="{{ route('music-productions.index') }}" class="more hover">
|
|
<i class="uil uil-arrow-left before:content-['\e949'] !mr-1"></i>
|
|
{{ __('music_productions.back_to_list') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Gallery --}}
|
|
@php
|
|
$gallery = $production->gallery;
|
|
@endphp
|
|
@if(!empty($gallery) && is_array($gallery) && count($gallery) > 0)
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[25px]">
|
|
@foreach($gallery as $galleryImage)
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
|
|
<a href="{{ asset('storage/' . $galleryImage) }}" data-glightbox data-gallery="music-production-gallery">
|
|
<img class="transition-all duration-[0.35s] ease-in-out group-hover:scale-105 !rounded-[.4rem] w-full" src="{{ asset('storage/' . $galleryImage) }}" alt="{{ $production->translate('title') }}">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Post Navigation (Prev / Next) --}}
|
|
<div class="wrapper !bg-[#ffffff]">
|
|
<div class="container py-10">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-15px] xl:!mt-0 lg:!mt-0 md:!mt-0">
|
|
<div class="xl:w-8/12 lg:w-8/12 md:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full self-center text-center xl:text-left lg:text-left md:text-left navigation">
|
|
@if($prev)
|
|
<a href="{{ route('music-productions.show', $prev->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 !mr-[.25rem] hover:translate-y-[-0.15rem]">
|
|
<i class="uil uil-arrow-left before:content-['\e949']"></i> {{ __('music_productions.prev') }}
|
|
</a>
|
|
@endif
|
|
@if($next)
|
|
<a href="{{ route('music-productions.show', $next->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-end hover:translate-y-[-0.15rem] !mb-0">
|
|
{{ __('music_productions.next') }} <i class="uil uil-arrow-right before:content-['\e94c']"></i>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
<aside class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full max-md:!mt-[15px] sidebar text-center xl:text-right lg:text-right md:text-right">
|
|
<a href="{{ route('music-productions.index') }}" class="btn btn-soft-primary !rounded-[50rem] btn-icon btn-icon-start hover:translate-y-[-0.15rem] !mb-0">
|
|
<i class="uil uil-apps before:content-['\e93e']"></i> {{ __('music_productions.back_to_list') }}
|
|
</a>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* Content styling */
|
|
.music-production-content p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
.music-production-content img {
|
|
border-radius: 0.4rem;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.music-production-content h2,
|
|
.music-production-content h3,
|
|
.music-production-content h4 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Gallery hover effect */
|
|
.cursor-dark figure {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
.cursor-dark:hover figure {
|
|
box-shadow: 0 0.5rem 2rem rgba(30,34,40,0.12);
|
|
}
|
|
|
|
/* Entrance animation */
|
|
article {
|
|
animation: fadeIn 0.8s ease forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</style>
|
|
@endpush
|
|
@endsection
|