truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Music Productions module with CRUD resources and frontend views

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-20 22:15:04 +03:00
parent e232d25fc8
commit f35632ee0d
15 changed files with 1210 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/front/music-productions/index.blade.php
+174
View File
@@ -0,0 +1,174 @@
@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-40 lg:!pb-40 md:!pb-40 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-7/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ __('music_productions.meta-index-title') }}</h1>
<p class="lead lg:!px-[1.25rem] xl:!px-[1.25rem] xxl:!px-[2rem] !leading-[1.65] text-[0.9rem] font-medium">{{ __('music_productions.meta-index-description') }}</p>
</div>
</div>
</div>
</section>
<section class="wrapper !bg-[#ffffff]">
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
@if($productions->count() > 0)
<div class="projects-masonry !mt-[-10rem] xl:!mt-[-12rem] lg:!mt-[-12rem] md:!mt-[-10rem] !mb-10">
<div class="flex flex-wrap mx-[-20px] xl:mx-[-25px] lg:mx-[-25px] !mt-[-2rem] xl:!mt-[-2.5rem] lg:!mt-[-2.5rem]">
@php
$accentColors = [
['border' => '#54a8c7', 'text' => '#54a8c7', 'tooltip' => 'itooltip-aqua'],
['border' => '#747ed1', 'text' => '#747ed1', 'tooltip' => 'itooltip-purple'],
['border' => '#fab758', 'text' => '#fab758', 'tooltip' => 'itooltip-yellow'],
['border' => '#e2626b', 'text' => '#e2626b', 'tooltip' => 'itooltip-red'],
['border' => '#f78b77', 'text' => '#f78b77', 'tooltip' => 'itooltip-orange'],
['border' => '#7cb798', 'text' => '#7cb798', 'tooltip' => 'itooltip-leaf'],
['border' => '#d16b86', 'text' => '#d16b86', 'tooltip' => 'itooltip-pink'],
['border' => '#45c4a0', 'text' => '#45c4a0', 'tooltip' => 'itooltip-green'],
['border' => '#a07cc5', 'text' => '#a07cc5', 'tooltip' => 'itooltip-violet'],
];
@endphp
@foreach($productions as $index => $production)
@php
$color = $accentColors[$index % count($accentColors)];
@endphp
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] transition-all duration-300 hover:!shadow-[0_0.5rem_2.5rem_rgba(30,34,40,0.12)] hover:translate-y-[-0.15rem]">
<figure class="card-img-top overflow-hidden rounded-t group {{ $color['tooltip'] }}" title='<h5 class="!mb-0">{!! t("Detayları Görüntüle") !!}</h5>'>
<a href="{{ route('music-productions.show', $production->slug) }}">
@if($production->cover_image)
<img class="transition-all duration-[0.35s] ease-in-out group-hover:scale-105" src="{{ asset('storage/' . $production->cover_image) }}" alt="{{ $production->translate('title') }}">
@else
<div class="bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center" style="height: 250px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-16 h-16 text-gray-400">
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>
</div>
@endif
</a>
</figure>
<div class="card-body p-7">
<div class="post-header">
@if($production->client_name)
<div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line 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 !mb-2" style="color: {{ $color['text'] }}; --tw-before-bg: {{ $color['border'] }}; before:bg-[{{ $color['border'] }}];">
<span style="color: {{ $color['text'] }}">{{ $production->translate('client_name') }}</span>
</div>
@endif
@if($production->production_date)
<div class="text-[0.65rem] text-[#aab0bc] !mb-1">
{{ $production->production_date->format('d.m.Y') }}
</div>
@endif
<h3 class="!mb-0">
<a href="{{ route('music-productions.show', $production->slug) }}" class="hover:text-[{{ $color['text'] }}] transition-colors duration-200">
{{ $production->translate('title') }}
</a>
</h3>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
{{-- Pagination --}}
@if($productions->hasPages())
<div class="flex justify-center !mt-8">
<nav class="pagination-wrapper">
{{ $productions->links() }}
</nav>
</div>
@endif
@else
<div class="!mt-[-8rem] !mb-10 text-center">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !p-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-16 h-16 text-gray-300 mx-auto !mb-4">
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>
<p class="text-[#aab0bc] text-lg">{{ __('music_productions.empty') }}</p>
</div>
</div>
@endif
</div>
</section>
@push('styles')
<style>
/* Accent line color for category labels */
.text-line::before {
background-color: currentColor !important;
}
/* Custom pagination styling */
.pagination-wrapper .pagination {
display: flex;
gap: 0.35rem;
list-style: none;
padding: 0;
margin: 0;
}
.pagination-wrapper .pagination li {
display: inline-flex;
}
.pagination-wrapper .pagination li a,
.pagination-wrapper .pagination li span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.75rem;
border-radius: 50rem;
font-size: 0.85rem;
font-weight: 600;
color: #60697b;
background: #f6f7f9;
border: 1px solid #e9ecef;
transition: all 0.2s ease;
text-decoration: none;
}
.pagination-wrapper .pagination li a:hover {
background: #e31e24;
border-color: #e31e24;
color: #fff;
transform: translateY(-0.1rem);
box-shadow: 0 0.25rem 0.75rem rgba(227,30,36,0.25);
}
.pagination-wrapper .pagination li.active span,
.pagination-wrapper .pagination li span[aria-current="page"] {
background: #e31e24;
border-color: #e31e24;
color: #fff;
}
.pagination-wrapper .pagination li.disabled span {
opacity: 0.5;
cursor: not-allowed;
}
/* Masonry item entrance animation */
.project.item {
animation: fadeInUp 0.6s ease forwards;
opacity: 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@for($i = 0; $i < 9; $i++)
.project.item:nth-child({{ $i + 1 }}) {
animation-delay: {{ $i * 0.1 }}s;
}
@endfor
</style>
@endpush
@endsection
resources/views/front/music-productions/show.blade.php
+162
View File
@@ -0,0 +1,162 @@
@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)
<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="{{ asset('storage/' . $production->cover_image) }}" 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
</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
resources/views/templates/home/services-cards.blade.php
+1 -1
View File
@@ -33,7 +33,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-mono text-[#f78b77] text-orange !mb-3"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
<h4>{!! t('Müzik Prodüksiyon') !!}</h4>
<p class="!mb-2 flex-1 min-h-[4.5rem]">{!! t('Müzik prodüksiyonu, film müzikleri, kurumsal müzik çalışmaları ve benzeri alanlarda hizmet veriyoruz.') !!}</p>
<a href="#" class="more hover !text-[#f78b77] focus:!text-[#f78b77] hover:!text-[#f78b77]">{!! t('Daha fazla bilgi edin') !!}</a>
<a href="{{ route('music-productions.index') }}" class="more hover !text-[#f78b77] focus:!text-[#f78b77] hover:!text-[#f78b77]">{!! t('Daha fazla bilgi edin') !!}</a>
</div>
<!--/.card-body -->
</div>