Ümit Tunç
352 lines
13 KiB
PHP
352 lines
13 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('content')
|
||
|
||
@php
|
||
$partners = $page->data['partners'] ?? [];
|
||
@endphp
|
||
|
||
<style>
|
||
.partners-section {
|
||
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 35%);
|
||
overflow-x: clip;
|
||
}
|
||
|
||
.partners-showcase-bg {
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
height: auto;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
.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-showcase {
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
.partners-showcase__collage {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 540px;
|
||
min-height: 300px;
|
||
margin: 0 auto;
|
||
}
|
||
@media (min-width: 992px) {
|
||
.partners-showcase__collage {
|
||
min-height: 340px;
|
||
max-width: none;
|
||
margin: 0;
|
||
}
|
||
}
|
||
.partners-showcase__item {
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0.25rem;
|
||
text-decoration: none;
|
||
transition: transform 0.3s ease, filter 0.3s ease;
|
||
}
|
||
.partners-showcase__item:hover {
|
||
transform: scale(1.08) !important;
|
||
z-index: 2;
|
||
}
|
||
.partners-showcase__item img {
|
||
max-width: 100%;
|
||
width: auto;
|
||
height: auto;
|
||
object-fit: contain;
|
||
filter: grayscale(12%);
|
||
opacity: 0.92;
|
||
transition: filter 0.25s ease, opacity 0.25s ease;
|
||
}
|
||
.partners-showcase__item:hover img {
|
||
filter: grayscale(0%);
|
||
opacity: 1;
|
||
}
|
||
.partners-showcase__item--0 {
|
||
top: 0;
|
||
left: 0;
|
||
width: 44%;
|
||
transform: rotate(-2deg);
|
||
}
|
||
.partners-showcase__item--0 img { max-height: 76px; }
|
||
.partners-showcase__item--1 {
|
||
top: 4%;
|
||
right: 0;
|
||
width: 46%;
|
||
transform: rotate(3deg);
|
||
}
|
||
.partners-showcase__item--1 img { max-height: 84px; }
|
||
.partners-showcase__item--2 {
|
||
top: 36%;
|
||
left: 18%;
|
||
width: 52%;
|
||
transform: rotate(-1deg);
|
||
}
|
||
.partners-showcase__item--2 img { max-height: 96px; }
|
||
.partners-showcase__item--3 {
|
||
bottom: 2%;
|
||
left: 2%;
|
||
width: 42%;
|
||
transform: rotate(2deg);
|
||
}
|
||
.partners-showcase__item--3 img { max-height: 72px; }
|
||
.partners-showcase__item--4 {
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 40%;
|
||
transform: rotate(-3deg);
|
||
}
|
||
.partners-showcase__item--4 img { max-height: 80px; }
|
||
@media (max-width: 767.98px) {
|
||
.partners-showcase__collage {
|
||
min-height: 260px;
|
||
max-width: 360px;
|
||
}
|
||
.partners-showcase__item--0 img,
|
||
.partners-showcase__item--1 img,
|
||
.partners-showcase__item--2 img,
|
||
.partners-showcase__item--3 img,
|
||
.partners-showcase__item--4 img {
|
||
max-height: 64px;
|
||
}
|
||
.partners-showcase__item--2 img {
|
||
max-height: 72px;
|
||
}
|
||
}
|
||
.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>
|
||
@endif
|
||
@endforeach
|
||
</div>
|
||
@else
|
||
<div class="pb-12">
|
||
<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 || !empty($partners))
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center overflow-x-clip">
|
||
@if(!empty($partners))
|
||
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] min-w-0 xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[30px] max-w-full !relative overflow-hidden">
|
||
<div class="absolute partners-showcase-bg">
|
||
<img class="w-full opacity-40" src="{{ asset('assets/img/photos/blurry.png') }}" alt="" loading="lazy">
|
||
</div>
|
||
<div class="partners-showcase relative z-[1]">
|
||
<div class="partners-showcase__collage">
|
||
@foreach(array_slice(array_filter($partners, fn ($p) => !empty($p['logo'])), 0, 5) as $index => $featured)
|
||
@php
|
||
$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
|
||
@if(!empty($featured['url']))
|
||
<a href="{{ $featured['url'] }}" target="_blank" rel="nofollow noopener" class="partners-showcase__item partners-showcase__item--{{ $index }}" title="{{ $featuredName }}">
|
||
@else
|
||
<div class="partners-showcase__item partners-showcase__item--{{ $index }}">
|
||
@endif
|
||
<img
|
||
src="{{ asset('storage/' . $featured['logo']) }}"
|
||
alt="{{ $featuredName }}"
|
||
loading="lazy"
|
||
>
|
||
@if(!empty($featured['url']))
|
||
</a>
|
||
@else
|
||
</div>
|
||
@endif
|
||
@endforeach
|
||
</div>
|
||
</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>
|
||
|
||
@endsection
|