Muhammet Güler
101 lines
5.0 KiB
PHP
101 lines
5.0 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('content')
|
||
|
||
{{-- Unified Hero & Testimonials Section --}}
|
||
<section id="testimonials-hero" class="wrapper image-wrapper bg-image bg-overlay bg-overlay-500" data-image-src="{{ asset('assets/img/photos/bg1.jpg') }}">
|
||
|
||
{{-- Inline style scoped to this ID --}}
|
||
<style>
|
||
#testimonials-hero.bg-image[data-image-src] {
|
||
background-image: url("{{ asset('assets/img/photos/bg1.jpg') }}");
|
||
}
|
||
</style>
|
||
|
||
<div class="container pt-24 pb-24 xl:pt-32 xl:pb-32 lg:pt-32 lg:pb-32 md:pt-32 md:pb-32">
|
||
|
||
{{-- Hero Header --}}
|
||
<div class="row mb-12 text-center">
|
||
<div class="col-md-10 col-lg-8 col-xl-7 col-xxl-6 mx-auto">
|
||
<h1 class="display-1 !mb-4 !text-[3rem] font-bold tracking-tight text-white">{!! t('Müşteri Görüşleri') !!}</h1>
|
||
<p class="lead !text-[1.2rem] !leading-[1.6] font-medium mb-0 max-w-2xl mx-auto text-white opacity-90">
|
||
{!! t('Bizi müşterilerimizden dinleyin. Birlikte yazdığımız başarı hikayeleri.') !!}
|
||
</p>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
|
||
{{-- Testimonials Slider --}}
|
||
<div class="swiper-container dots-closer dots-light dots-light-75" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper">
|
||
@php
|
||
$testimonials = $page ? $page->testimonials()->where('is_active', true)->orderBy('sort_order')->get() : collect([]);
|
||
@endphp
|
||
|
||
@forelse($testimonials as $testimonial)
|
||
<div class="swiper-slide">
|
||
<div class="item-inner">
|
||
<div class="card border-0 h-full" style="background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 10px 30px rgba(0,0,0,0.05);">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(0,0,0,0.1)] five !mb-4" style="color: #fcc032;">
|
||
@for($i=0; $i<$testimonial->rating; $i++)
|
||
<i class="uil uil-star"></i>
|
||
@endfor
|
||
</span>
|
||
|
||
<blockquote class="!text-[1rem] !leading-[1.7] font-medium m-[0_0_1rem] !mb-0 text-[#1e293b]">
|
||
<p>“{!! $testimonial->content !!}”</p>
|
||
<div class="flex items-center text-left mt-6">
|
||
@if($testimonial->avatar)
|
||
<div class="avatar w-12 h-12 !mr-4">
|
||
<img src="{{ asset('storage/' . $testimonial->avatar) }}" class="!rounded-[50%] w-full h-full object-cover" alt="{{ $testimonial->name }}">
|
||
</div>
|
||
@endif
|
||
<div class="info p-0">
|
||
<h5 class="!mb-0 text-[#1e293b] !font-bold !text-[1.05rem]">{{ $testimonial->name }}</h5>
|
||
@if($testimonial->position)
|
||
<p class="!mb-0 !text-[0.85rem] text-[#1e293b] opacity-70">{{ $testimonial->position }}</p>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@empty
|
||
<div class="swiper-slide">
|
||
<div class="item-inner">
|
||
<div class="text-center text-white opacity-50">
|
||
<p>{{ t('Henüz bir müşteri görüşü eklenmemiş.') }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
<!--/.swiper-wrapper -->
|
||
</div>
|
||
<!-- /.swiper -->
|
||
</div>
|
||
<!-- /.swiper-container -->
|
||
|
||
</div>
|
||
</section>
|
||
{{-- /Unified Section --}}
|
||
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var bgImages = document.querySelectorAll('.bg-image[data-image-src]');
|
||
bgImages.forEach(function(elem) {
|
||
var src = elem.getAttribute('data-image-src');
|
||
elem.style.backgroundImage = 'url(' + src + ')';
|
||
});
|
||
});
|
||
</script>
|
||
@endpush
|