feat: enhance partners section with new input fields, improved styling, and localization support for better user experience
This commit is contained in:
Ümit Tunç
@@ -18,6 +18,12 @@ class PartnersSection
|
|||||||
Repeater::make('data.partners')
|
Repeater::make('data.partners')
|
||||||
->label('Partnerler')
|
->label('Partnerler')
|
||||||
->schema([
|
->schema([
|
||||||
|
TextInput::make('name')
|
||||||
|
->label('Partner Adı')
|
||||||
|
->placeholder('Örn: Microsoft')
|
||||||
|
->maxLength(120)
|
||||||
|
->columnSpanFull(),
|
||||||
|
|
||||||
FileUpload::make('logo')
|
FileUpload::make('logo')
|
||||||
->label('Logo')
|
->label('Logo')
|
||||||
->image()
|
->image()
|
||||||
@@ -26,13 +32,14 @@ class PartnersSection
|
|||||||
->visibility('public')
|
->visibility('public')
|
||||||
->required()
|
->required()
|
||||||
->columnSpanFull(),
|
->columnSpanFull(),
|
||||||
|
|
||||||
TextInput::make('url')
|
TextInput::make('url')
|
||||||
->label('Website URL')
|
->label('Website URL')
|
||||||
->url()
|
->url()
|
||||||
->placeholder('https://example.com')
|
->placeholder('https://example.com')
|
||||||
->columnSpanFull(),
|
->columnSpanFull(),
|
||||||
])
|
])
|
||||||
|
->itemLabel(fn (array $state): ?string => $state['name'] ?? null)
|
||||||
->grid(4)
|
->grid(4)
|
||||||
->columnSpanFull()
|
->columnSpanFull()
|
||||||
->reorderableWithButtons()
|
->reorderableWithButtons()
|
||||||
|
|||||||
@@ -2,53 +2,252 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<section class="wrapper !bg-[#ffffff] wrapper-border">
|
@php
|
||||||
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
$partners = $page->data['partners'] ?? [];
|
||||||
<h2 class="text-center !mb-8 text-3xl font-bold uppercase">{!! t('ÇÖZÜM ORTAKLARIMIZ') !!}</h2>
|
@endphp
|
||||||
<div class="swiper-container clients !mb-0 relative z-10" data-margin="30" data-dots="false" data-loop="true" data-autoplay="true" data-autoplaytime="1" data-drag="false" data-speed="5000" data-items-xxl="7" data-items-xl="6" data-items-lg="5" data-items-md="4" data-items-xs="2">
|
|
||||||
<div class="swiper">
|
|
||||||
<div class="swiper-wrapper ticker">
|
|
||||||
@php
|
|
||||||
$partners = $page->data['partners'] ?? [];
|
|
||||||
@endphp
|
|
||||||
|
|
||||||
@foreach($partners as $partner)
|
|
||||||
@if(!empty($partner['logo']))
|
|
||||||
<div class="swiper-slide px-5">
|
|
||||||
@if(!empty($partner['url']))
|
|
||||||
<a href="{{ $partner['url'] }}" target="_blank" rel="nofollow" class="block">
|
|
||||||
@endif
|
|
||||||
<img class="!w-full !h-auto" src="{{ asset('storage/' . $partner['logo']) }}" alt="Partner" loading="lazy">
|
|
||||||
@if(!empty($partner['url']))
|
|
||||||
</a>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@endforeach
|
|
||||||
|
|
||||||
{{-- Fallback for design preview if no data exists --}}
|
|
||||||
@if(empty($partners))
|
|
||||||
<div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../../assets/img/brands/c1.webp" alt="image" loading="lazy"></div>
|
|
||||||
<div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../../assets/img/brands/c2.webp" alt="image" loading="lazy"></div>
|
|
||||||
<div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../../assets/img/brands/c3.webp" alt="image" loading="lazy"></div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.partners-section {
|
||||||
|
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 35%);
|
||||||
|
}
|
||||||
|
.partner-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
box-shadow: rgba(30, 34, 40, 0.02) 0 2px 1px, rgba(30, 34, 40, 0.02) 0 4px 2px, rgba(30, 34, 40, 0.02) 0 8px 4px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1.75rem 1.25rem 1.5rem;
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
|
||||||
|
}
|
||||||
|
.partner-card:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
border-color: #cbd5e1;
|
||||||
|
box-shadow: rgba(30, 34, 40, 0.04) 0 8px 16px, rgba(30, 34, 40, 0.06) 0 16px 32px;
|
||||||
|
}
|
||||||
|
.partner-card__logo-wrap {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 140px;
|
||||||
|
height: 72px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
}
|
||||||
|
.partner-card__logo-wrap img {
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 72px;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain;
|
||||||
|
filter: grayscale(20%);
|
||||||
|
opacity: 0.88;
|
||||||
|
transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
|
||||||
|
}
|
||||||
|
.partner-card:hover .partner-card__logo-wrap img {
|
||||||
|
filter: grayscale(0%);
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.04);
|
||||||
|
}
|
||||||
|
.partner-card__name {
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1e293b;
|
||||||
|
line-height: 1.35;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.partner-card__link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-top: 0.65rem;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--bs-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(4px);
|
||||||
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||||
|
}
|
||||||
|
.partner-card:hover .partner-card__link {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
.partners-empty {
|
||||||
|
padding: 3rem 2rem;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
border: 1px dashed #cbd5e1;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 420px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.partners-cta-card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 0.8rem;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
box-shadow: rgba(30, 34, 40, 0.02) 0 2px 1px, rgba(30, 34, 40, 0.02) 0 4px 2px, rgba(30, 34, 40, 0.02) 0 8px 4px, rgba(30, 34, 40, 0.02) 0 16px 8px, rgba(30, 34, 40, 0.03) 0 32px 16px;
|
||||||
|
}
|
||||||
|
.partners-stats-badge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.5rem 1rem;
|
||||||
|
border-radius: 9999px;
|
||||||
|
background: rgba(var(--bs-primary-rgb), 0.08);
|
||||||
|
color: var(--bs-primary);
|
||||||
|
font-size: 0.8125rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<section class="wrapper partners-section">
|
||||||
|
<div class="container pt-14 pb-6 xl:pt-20 xl:pb-8 lg:pt-20 lg:pb-8 md:pt-20 md:pb-8">
|
||||||
|
|
||||||
|
<div class="row text-center mb-10">
|
||||||
|
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
|
||||||
|
<h1 class="display-1 mb-3">{!! $page->title !!}</h1>
|
||||||
|
@if($page->excerpt)
|
||||||
|
<p class="lead fs-lg mb-0">{!! $page->excerpt !!}</p>
|
||||||
|
@else
|
||||||
|
<p class="lead fs-lg mb-0">{!! t('Güvenilir teknoloji ve iş ortaklarımızla birlikte daha güçlü çözümler sunuyoruz.') !!}</p>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
@if(!empty($partners))
|
||||||
|
<div class="flex flex-wrap mx-[-15px] row-cols-2 row-cols-md-4 row-cols-lg-5 xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !text-center justify-center pb-12 xl:pb-16 lg:pb-16 md:pb-16">
|
||||||
|
@foreach($partners as $partner)
|
||||||
|
@if(!empty($partner['logo']))
|
||||||
|
@php
|
||||||
|
$displayName = $partner['name'] ?? null;
|
||||||
|
if (!$displayName && !empty($partner['url'])) {
|
||||||
|
$host = parse_url($partner['url'], PHP_URL_HOST);
|
||||||
|
$displayName = $host ? preg_replace('/^www\./', '', $host) : null;
|
||||||
|
}
|
||||||
|
@endphp
|
||||||
|
<div class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[30px]">
|
||||||
|
@if(!empty($partner['url']))
|
||||||
|
<a href="{{ $partner['url'] }}" target="_blank" rel="nofollow noopener" class="block h-full no-underline text-inherit">
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<article class="partner-card">
|
||||||
|
<div class="partner-card__logo-wrap">
|
||||||
|
<img
|
||||||
|
src="{{ asset('storage/' . $partner['logo']) }}"
|
||||||
|
alt="{{ $displayName ?? t('Çözüm Ortağı') }}"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
@if($displayName)
|
||||||
|
<h4 class="partner-card__name">{!! e($displayName) !!}</h4>
|
||||||
|
@endif
|
||||||
|
@if(!empty($partner['url']))
|
||||||
|
<span class="partner-card__link">
|
||||||
|
{!! t('Web sitesini ziyaret et') !!}
|
||||||
|
<i class="uil uil-arrow-up-right before:content-['\e950']"></i>
|
||||||
|
</span>
|
||||||
|
@endif
|
||||||
|
</article>
|
||||||
|
|
||||||
|
@if(!empty($partner['url']))
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
</div>
|
</div>
|
||||||
<!--/.swiper-wrapper -->
|
@endif
|
||||||
</div>
|
@endforeach
|
||||||
<!-- /.swiper -->
|
</div>
|
||||||
</div>
|
@else
|
||||||
<!-- /.swiper-container -->
|
<div class="pb-12">
|
||||||
</div>
|
<div class="partners-empty">
|
||||||
|
<i class="uil uil-users-alt text-6xl text-slate-300 mb-4 d-block"></i>
|
||||||
|
<h3 class="h4 text-slate-500 mb-2">{!! t('Henüz çözüm ortağı eklenmemiş.') !!}</h3>
|
||||||
|
<p class="text-slate-400 mb-0">{!! t('Yönetim panelinden çözüm ortaklarınızı ekleyebilirsiniz.') !!}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
@if($page->content)
|
@if($page->content || !empty($partners))
|
||||||
<div class="container pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
|
||||||
<div class="prose max-w-none">
|
@if(!empty($partners))
|
||||||
{!! $page->content !!}
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full !relative">
|
||||||
</div>
|
<div class="absolute" style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:0; pointer-events: none;">
|
||||||
</div>
|
<img class="w-full opacity-40" src="{{ asset('assets/img/photos/blurry.png') }}" alt="" loading="lazy">
|
||||||
@endif
|
</div>
|
||||||
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] relative z-[1]">
|
||||||
|
@foreach(array_slice(array_filter($partners, fn ($p) => !empty($p['logo'])), 0, 4) as $index => $featured)
|
||||||
|
@php
|
||||||
|
$colClasses = match ($index) {
|
||||||
|
0 => 'md:w-6/12 lg:w-6/12 xl:w-5/12 w-full !self-end',
|
||||||
|
1 => 'xl:w-6/12 lg:w-6/12 md:w-6/12 w-full !self-end',
|
||||||
|
2 => 'md:w-6/12 lg:w-6/12 xl:w-5/12 xl:!ml-[8.33333333%]',
|
||||||
|
default => 'xl:w-6/12 lg:w-6/12 md:w-6/12 w-full !self-start',
|
||||||
|
};
|
||||||
|
$featuredName = $featured['name'] ?? null;
|
||||||
|
if (!$featuredName && !empty($featured['url'])) {
|
||||||
|
$host = parse_url($featured['url'], PHP_URL_HOST);
|
||||||
|
$featuredName = $host ? preg_replace('/^www\./', '', $host) : t('Çözüm Ortağı');
|
||||||
|
}
|
||||||
|
@endphp
|
||||||
|
<div class="flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] {{ $colClasses }}">
|
||||||
|
<div class="partners-cta-card">
|
||||||
|
<div class="card-body flex-[1_1_auto] p-[32px] xl:p-[40px] text-center">
|
||||||
|
<div class="partner-card__logo-wrap !mb-3 !max-w-[120px]">
|
||||||
|
<img
|
||||||
|
src="{{ asset('storage/' . $featured['logo']) }}"
|
||||||
|
alt="{{ $featuredName }}"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<h5 class="!mb-0 !text-[0.95rem] !font-bold text-[#1e293b]">{{ $featuredName }}</h5>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div class="flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full {{ !empty($partners) ? 'xl:w-5/12 lg:w-5/12 w-full' : 'w-full col-lg-8 mx-auto text-center' }}">
|
||||||
|
@if(!empty($partners))
|
||||||
|
<span class="partners-stats-badge">
|
||||||
|
<i class="uil uil-check-circle"></i>
|
||||||
|
{{ count(array_filter($partners, fn ($p) => !empty($p['logo']))) }}+ {!! t('güvenilir iş ortağı') !!}
|
||||||
|
</span>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<h2 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-4">
|
||||||
|
{!! t('Güçlü ekosistem, güçlü çözümler') !!}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
@if($page->content)
|
||||||
|
<div class="lead !text-[1.05rem] !leading-[1.65] !mb-6 prose max-w-none">
|
||||||
|
{!! $page->content !!}
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<p class="lead !text-[1.05rem] !leading-[1.65] !mb-6">
|
||||||
|
{!! t('Sektörün önde gelen markalarıyla stratejik iş birlikleri kurarak müşterilerimize en iyi teknoloji ve hizmet deneyimini sunuyoruz.') !!}
|
||||||
|
</p>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<a
|
||||||
|
href="{{ route('page.show', ['slug' => 'iletisim']) }}"
|
||||||
|
class="btn btn-lg btn-primary btn-icon btn-icon-end !rounded-[0.8rem]"
|
||||||
|
>
|
||||||
|
{!! t('İş birliği için iletişime geçin') !!}
|
||||||
|
<i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<!-- /section -->
|
|
||||||
|
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
Reference in New Issue
Block a user