Optimize images to WebP and enable lazy loading. Add security headers (HSTS, CSP, etc) for A+ SSL score.

This commit is contained in:
Muhammet Güler
2026-02-17 10:30:36 +03:00
parent 7101f7878a
commit 477993ec83
743 changed files with 927 additions and 232 deletions
+11
View File
@@ -36,8 +36,19 @@ html {
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Force checkbox visibility */
input[type="checkbox"] {
appearance: auto !important;
-webkit-appearance: auto !important;
width: 1rem !important;
height: 1rem !important;
display: inline-block !important;
cursor: pointer;
}
+4 -4
View File
@@ -29,7 +29,7 @@
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b1.jpg');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b1.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
$authorName = $post->author ? $post->author->name : '';
@@ -42,7 +42,7 @@
@if($post->featured_image_url)
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
@@ -118,7 +118,7 @@
$categoryName = $post->category ? $post->category->name : '';
$categorySlug = $post->category ? $post->category->slug : '';
$publishedDate = $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b4.jpg');
$imageUrl = $post->featured_image ? asset('storage/' . $post->featured_image) : asset('assets/img/photos/b4.webp');
$blogUrl = route('blog.show', $post->slug);
$commentCount = $post->comments_count ?? 0;
@endphp
@@ -127,7 +127,7 @@
<div class="card">
<figure class="card-img-top overlay overlay-1 hover-scale group">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more') }}</h5>
+8 -8
View File
@@ -54,7 +54,7 @@
<div class="card">
@if($post->featured_image_url)
<figure class="card-img-top">
<img src="{{ $post->featured_image_url }}" alt="{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}">
<img loading="lazy" src="{{ $post->featured_image_url }}" alt="{{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}">
</figure>
@endif
<div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
@@ -112,9 +112,9 @@
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
@if($post->author->avatar)
<img class="rounded-[50%]" alt="image" src="{{ asset('storage/' . $post->author->avatar) }}">
<img loading="lazy" class="rounded-[50%]" alt="image" src="{{ asset('storage/' . $post->author->avatar) }}">
@else
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u5.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u5.webp') }}" loading="lazy">
@endif
</figure>
<div>
@@ -174,7 +174,7 @@
@php
$relatedTitle = method_exists($relatedPost, 'translate') ? $relatedPost->translate('title') : $relatedPost->title;
$relatedCategoryName = $relatedPost->category ? $relatedPost->category->name : '';
$relatedImageUrl = $relatedPost->featured_image ? asset('storage/' . $relatedPost->featured_image) : asset('assets/img/photos/b4.jpg');
$relatedImageUrl = $relatedPost->featured_image ? asset('storage/' . $relatedPost->featured_image) : asset('assets/img/photos/b4.webp');
$relatedUrl = route('blog.show', $relatedPost->slug);
$relatedDate = $relatedPost->published_at ? $relatedPost->published_at->format('d M Y') : $relatedPost->created_at->format('d M Y');
$relatedCommentCount = $relatedPost->comments_count ?? 0;
@@ -183,7 +183,7 @@
<article>
<figure class="overlay overlay-1 hover-scale group rounded !mb-5">
<a href="{{ $relatedUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $relatedImageUrl }}" alt="{{ $relatedTitle }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $relatedImageUrl }}" alt="{{ $relatedTitle }}" loading="lazy">
<span class="bg"></span>
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
@@ -243,7 +243,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u1.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u1.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
@@ -276,7 +276,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u3.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u3.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
@@ -309,7 +309,7 @@
<div class="comment-header xl:!flex lg:!flex md:!flex items-center !mb-[.5rem]">
<div class="flex items-center">
<figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u2.jpg') }}">
<img class="rounded-[50%]" alt="image" src="{{ asset('assets/img/avatars/u2.webp') }}" loading="lazy">
</figure>
<div>
<h6 class="m-0 !mb-[0.2rem]">
@@ -4,7 +4,7 @@
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-24 xl:pb-32 lg:pb-32 md:pb-32 !text-center !relative">
@if(!empty($data['background_image']))
<div class="absolute" style="top: -7%; left: 50%; transform: translateX(-50%);">
<img src="{{ asset($data['background_image']) }}" alt="background">
<img src="{{ asset($data['background_image']) }}" alt="background" loading="lazy">
</div>
@endif
@@ -12,7 +12,7 @@
<div class="lg:w-10/12 xl:w-9/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@if(!empty($data['icon']))
<div class="!mb-5">
<img class="m-[0_auto] !w-[4rem] !h-[4rem]" src="{{ asset($data['icon']) }}" alt="icon">
<img class="m-[0_auto] !w-[4rem] !h-[4rem]" src="{{ asset($data['icon']) }}" alt="icon" loading="lazy">
</div>
@endif
@@ -46,7 +46,7 @@
@if(!empty($data['cta_image']))
<div class="container !text-center !mt-10">
<img class="max-w-full h-auto !relative m-[0_auto]" style="z-index: 2;" src="{{ asset($data['cta_image']) }}" alt="cta">
<img class="max-w-full h-auto !relative m-[0_auto]" style="z-index: 2;" src="{{ asset($data['cta_image']) }}" alt="cta" loading="lazy">
</div>
@endif
</div>
@@ -29,7 +29,7 @@
<div class="flex flex-row">
@if(!empty($feature['icon']))
<div>
<img src="{{ asset($feature['icon']) }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="icon">
<img src="{{ asset($feature['icon']) }}" class="!w-[2.2rem] !h-[2.2rem] !mr-4" alt="icon" loading="lazy">
</div>
@endif
<div>
@@ -30,7 +30,7 @@
<a href="{{ $item['link'] ?? '#' }}">
<img class="!rounded-[0.8rem] !transition-all !duration-[0.3s] !ease-in-out group-hover:!scale-105"
src="{{ asset($item['image']) }}"
alt="{{ $item['title'] ?? '' }}">
alt="{{ $item['title'] ?? '' }}" loading="lazy">
</a>
</figure>
@if(!empty($item['category']))
@@ -4,7 +4,7 @@
<div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-24 xl:pb-32 lg:pb-32 md:pb-32 !text-center !relative">
@if(!empty($data['background_image']))
<div class="absolute" style="top: -12%; left: 50%; transform: translateX(-50%);" data-cue="fadeIn">
<img src="{{ asset($data['background_image']) }}" alt="background">
<img src="{{ asset($data['background_image']) }}" alt="background" loading="lazy">
</div>
@endif
@@ -44,7 +44,7 @@
@if(!empty($data['hero_image']))
<div class="!mt-10">
<img class="max-w-full h-auto !relative m-[0_auto]" src="{{ asset($data['hero_image']) }}" alt="hero">
<img class="max-w-full h-auto !relative m-[0_auto]" src="{{ asset($data['hero_image']) }}" alt="hero" loading="lazy">
</div>
@endif
</div>
@@ -8,7 +8,7 @@
<div class="{{ $data['column_class'] ?? 'md:w-6/12 lg:w-3/12' }} xl:w-3/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[35px] !px-[15px] max-w-full">
<div class="!mb-4">
@if(!empty($stat['icon']))
<img src="{{ asset($stat['icon']) }}" class="!w-[3rem] !h-[3rem] m-[0_auto] !mb-3" alt="icon">
<img src="{{ asset($stat['icon']) }}" class="!w-[3rem] !h-[3rem] m-[0_auto] !mb-3" alt="icon" loading="lazy">
@endif
@if(!empty($stat['number']))
@@ -31,7 +31,7 @@
<figure class="!mb-4">
<img class="!rounded-[50%] !w-[10rem] !h-[10rem] m-[0_auto] object-cover"
src="{{ asset($member['photo']) }}"
alt="{{ $member['name'] ?? '' }}">
alt="{{ $member['name'] ?? '' }}" loading="lazy">
</figure>
@endif
@@ -43,7 +43,7 @@
<div class="flex items-center">
@if(!empty($testimonial['avatar']))
<img class="!rounded-[50%] !w-12 !h-12 !mr-4" src="{{ asset($testimonial['avatar']) }}" alt="avatar">
<img class="!rounded-[50%] !w-12 !h-12 !mr-4" src="{{ asset($testimonial['avatar']) }}" alt="avatar" loading="lazy">
@endif
<div>
@if(!empty($testimonial['name']))
@@ -21,7 +21,7 @@
$excerpt = method_exists($blog, 'translate') ? $blog->translate('excerpt') : ($blog->excerpt ?? '');
$categoryName = $blog->category ? ($blog->category->name ?? '') : '';
$publishedDate = $blog->published_at ? $blog->published_at->format('d M Y') : '';
$imageUrl = $blog->featured_image ? asset('storage/' . $blog->featured_image) : asset('assets/img/photos/b4.jpg');
$imageUrl = $blog->featured_image ? asset('storage/' . $blog->featured_image) : asset('assets/img/photos/b4.webp');
$blogUrl = route('blog.show', $blog->slug);
$commentCount = $blog->comments_count ?? 0;
@endphp
@@ -30,7 +30,7 @@
<article>
<figure class="overlay overlay-1 hover-scale group rounded !mb-5">
<a href="{{ $blogUrl }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}">
<img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $imageUrl }}" alt="{{ $title }}" loading="lazy">
</a>
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">{{ __('blog.read_more', ['default' => 'Read More']) }}</h5>
+2 -2
View File
@@ -3,8 +3,8 @@
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Logo ve Açıklama -->
<div class="col-span-1 md:col-span-2">
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji" class="h-10 mb-4 dark:hidden">
<img src="{{ asset('logos/truncgil-yatay-dark.svg') }}" alt="Trunçgil Teknoloji" class="h-10 mb-4 hidden dark:block">
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji" class="h-10 mb-4 dark:hidden" loading="lazy">
<img src="{{ asset('logos/truncgil-yatay-dark.svg') }}" alt="Trunçgil Teknoloji" class="h-10 mb-4 hidden dark:block" loading="lazy">
<p class="text-gray-600 dark:text-gray-400 mt-4 max-w-md">
Trunçgil Teknoloji olarak, yenilikçi ve güvenilir teknoloji çözümleri sunuyoruz.
</p>
@@ -3,7 +3,7 @@
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
<div class="widget !text-[#cacaca]">
<img class="!mb-4" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image">
<img class="!mb-4" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image" loading="lazy">
<p class="!mb-4">© {{ date('Y') }} {{ t('Trunçgil Teknoloji') }}. <br class="hidden xl:block lg:block !text-[#cacaca]">{{ t('Tüm hakları saklıdır.') }}</p>
<?php $social_media = json_decode(setting('social_links'), true);
?>
@@ -29,8 +29,8 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<!-- Mobile Header -->
<div class="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
<div class="navbar-brand"><a href="/">
<img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image">
<img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image" loading="lazy">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image" loading="lazy">
</a></div>
<div class="navbar-other !ml-auto">
<ul class="navbar-nav flex-row items-center">
@@ -47,8 +47,8 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
<a class="transition-none hidden lg:!flex xl:!flex" href="/"><img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image"></a>
<a class="transition-none hidden lg:!flex xl:!flex" href="/"><img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image" loading="lazy">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image" loading="lazy"></a>
</div>
<div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
@@ -88,7 +88,7 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<!-- Logo on Left -->
<div class="navbar-brand">
<a href="/">
<img class="!h-[2.5rem]" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="Truncgil Teknoloji">
<img class="!h-[2.5rem]" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="Truncgil Teknoloji" loading="lazy">
</a>
</div>
@@ -55,9 +55,9 @@
<figure style="width: 183px; height: 103px;"
class="!rounded-[.4rem] lift overflow-hidden shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.57)] mx-auto block transition-transform duration-300 group-hover:-translate-y-1 hidden xl:block lg:block ">
@if($item->hero_image)
<img style="width: 183px; height: 103px;" class="!rounded-[.4rem] object-cover block" src="{{ \Storage::url($item->hero_image) }}" alt="{{ $item->translate('title') }}">
<img loading="lazy" style="width: 183px; height: 103px;" class="!rounded-[.4rem] object-cover block" src="{{ \Storage::url($item->hero_image) }}" alt="{{ $item->translate('title') }}">
@else
<img style="width: 183px; height: 103px;" class="!rounded-[.4rem] object-cover block" src="https://placehold.co/185x135?text={{ urlencode($item->translate('title')) }}" alt="{{ $item->translate('title') }}">
<img loading="lazy" style="width: 183px; height: 103px;" class="!rounded-[.4rem] object-cover block" src="https://placehold.co/185x135?text={{ urlencode($item->translate('title')) }}" alt="{{ $item->translate('title') }}">
@endif
</figure>
<span class="xl:!hidden lg:!hidden">{{ $item->translate('title') }}</span>
@@ -4,8 +4,8 @@
<!-- Logo -->
<div class="flex-shrink-0">
<a href="{{ route('home') }}" class="flex items-center">
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji" class="h-10 dark:hidden">
<img src="{{ asset('logos/truncgil-yatay-dark.svg') }}" alt="Trunçgil Teknoloji" class="h-10 hidden dark:block">
<img src="{{ asset('logos/truncgil-yatay.svg') }}" alt="Trunçgil Teknoloji" class="h-10 dark:hidden" loading="lazy">
<img src="{{ asset('logos/truncgil-yatay-dark.svg') }}" alt="Trunçgil Teknoloji" class="h-10 hidden dark:block" loading="lazy">
</a>
</div>
@@ -1,3 +1,4 @@
<div>
{{-- Sticky Header CSS --}}
<style>
/* Header'ı sticky yap */
@@ -58,4 +59,5 @@
<!-- Otomatik kaydetme aktif: Her 30 saniyede bir -->
</div>
@endif
</div>
@@ -30,7 +30,7 @@ use Illuminate\Support\Facades\Storage;
@section('content')
{{-- Hero Section --}}
@if(!empty($hero))
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.png') }}">
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}">
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-9">
<div class="flex flex-wrap mx-0 !mt-[-50px] items-center text-center lg:text-left xl:text-left">
<div class="xl:w-5/12 lg:w-5/12 xxl:w-4/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInDown" data-group="page-title" data-delay="700">
@@ -45,12 +45,12 @@ use Illuminate\Support\Facades\Storage;
<div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
@if(!empty($hero['app_store_link']))
<span class="inline-flex"><a href="{{ $hero['app_store_link'] }}" target="_blank" class="!mr-2 inline-block">
<img src="{{ asset('assets/img/photos/button-appstore.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="App Store">
<img src="{{ asset('assets/img/photos/button-appstore.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="App Store" loading="lazy">
</a></span>
@endif
@if(!empty($hero['google_play_link']))
<span class="inline-flex"><a href="{{ $hero['google_play_link'] }}" target="_blank" class="inline-block">
<img src="{{ asset('assets/img/photos/button-google-play.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="Google Play">
<img src="{{ asset('assets/img/photos/button-google-play.svg') }}" class="!h-[3rem] !rounded-[0.8rem]" alt="Google Play" loading="lazy">
</a></span>
@endif
</div>
@@ -59,10 +59,9 @@ use Illuminate\Support\Facades\Storage;
@if(!empty($hero['featured_image']))
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem] !mt-[50px] flex justify-center items-center" data-cues="slideInDown" data-delay="600" style="z-index:2;">
<figure class="m-0 p-0 w-full flex justify-center items-center">
<img
class="w-[95%] max-w-[850px] !h-auto xl:!max-h-[540px] lg:!max-h-[440px] object-contain drop-shadow-2xl rounded-xl"
<img class="w-[95%] max-w-[850px] !h-auto xl:!max-h-[540px] lg:!max-h-[440px] object-contain drop-shadow-2xl rounded-xl"
src="{{ Storage::url($hero['featured_image']) }}"
alt="{{ $product->translate('title') }}"
alt="{{ $product->translate('title') }}" loading="lazy"
>
</figure>
@@ -115,7 +114,7 @@ use Illuminate\Support\Facades\Storage;
: null;
@endphp
@if($iconUrl)
<img src="{{ $iconUrl }}" class="icon-svg solid text-[#343f52] text-navy" alt="{{ $feature['title'] ?? '' }}" style="width: 48px; height: 48px;">
<img src="{{ $iconUrl }}" class="icon-svg solid text-[#343f52] text-navy" alt="{{ $feature['title'] ?? '' }}" style="width: 48px; height: 48px;" loading="lazy">
@else
<div class="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
<span class="text-gray-400 text-xs">{{ substr($feature['icon'], 0, 2) }}</span>
@@ -162,7 +161,7 @@ use Illuminate\Support\Facades\Storage;
@if(!empty($howItWorks['download_image']))
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-[-2.5rem] lg:!mb-0 xl:!mb-0 !mt-[50px] xl:!mt-0 lg:!mt-0">
<figure class="mx-auto">
<img src="{{ Storage::url($howItWorks['download_image']) }}" alt="How It Works">
<img src="{{ Storage::url($howItWorks['download_image']) }}" alt="How It Works" loading="lazy">
</figure>
</div>
<!-- /column -->
@@ -216,7 +215,7 @@ use Illuminate\Support\Facades\Storage;
{{-- Video Section --}}
@if(!empty($video['youtube_video_id']))
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.png') }}">
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg23.webp') }}">
<div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-[7rem] lg:pb-[7rem] md:pb-[7rem] !relative" style="z-index: 2;">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-11/12 xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -242,7 +241,7 @@ use Illuminate\Support\Facades\Storage;
{{-- FAQ Section --}}
@if(!empty($faqs))
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg21.png') }}">
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="{{ !empty($hero['background_image']) ? asset($hero['background_image']) : asset('assets/img/photos/bg21.webp') }}">
<div class="overflow-hidden" style="z-index:1;">
<div class="divider divider-alt !text-[#fefefe] mx-[-0.5rem]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
@@ -22,7 +22,7 @@
@if($product->hero_image)
<figure class="!mb-[2rem] !rounded-[.4rem]">
<img class="!rounded-[.4rem] w-full" src="{{ Storage::url($product->hero_image) }}" alt="{{ $product->translate('title') }}">
<img loading="lazy" class="!rounded-[.4rem] w-full" src="{{ Storage::url($product->hero_image) }}" alt="{{ $product->translate('title') }}">
</figure>
@endif
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
<div class="widget !text-[#cacaca]">
<img class="!mb-4" src="../../assets/img/truncgil-yatay-dark.svg" alt="image">
<img class="!mb-4" src="../../assets/img/truncgil-yatay-dark.svg" alt="image" loading="lazy">
<p class="!mb-4">© {{ date('Y') }} {{ t('Trunçgil Teknoloji') }}. <br class="hidden xl:block lg:block !text-[#cacaca]">{{ t('Tüm hakları saklıdır.') }}</p>
<?php $social_media = json_decode(setting('social_links'), true);
?>
+5 -5
View File
@@ -29,8 +29,8 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<!-- Mobile Header -->
<div class="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
<div class="navbar-brand"><a href="/">
<img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image">
<img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image" loading="lazy">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image" loading="lazy">
</a></div>
<div class="navbar-other !ml-auto">
<ul class="navbar-nav flex-row items-center">
@@ -47,8 +47,8 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
<a class="transition-none hidden lg:!flex xl:!flex" href="/"><img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image"></a>
<a class="transition-none hidden lg:!flex xl:!flex" href="/"><img class="logo-dark" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="image" loading="lazy">
<img class="logo-light" src="{{ asset('assets/img/truncgil-yatay-dark.svg') }}" alt="image" loading="lazy"></a>
<div class="" style="position: relative; left:5px">
@include("components.custom.language-selector")
</div>
@@ -91,7 +91,7 @@ $isHomepage = $currentRoute === 'homepage' || $currentPath === '/' || request()-
<!-- Logo on Left -->
<div class="navbar-brand">
<a href="/">
<img class="!h-[2.5rem]" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="Truncgil Teknoloji">
<img class="!h-[2.5rem]" src="{{ asset('assets/img/truncgil-yatay.svg') }}" alt="Truncgil Teknoloji" loading="lazy">
</a>
</div>
+1 -1
View File
@@ -3,7 +3,7 @@
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
<a href="./">
<img src="assets/img/truncgil-yatay.svg" alt="image">
<img src="assets/img/truncgil-yatay.svg" alt="image" loading="lazy">
</a>
</div>
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
@@ -36,7 +36,7 @@ Yapay zeka ve derin öğrenmenin temellerini atıp ileriye taşıyabileceğiniz
'Optik Kağıt Tanıma Projesi',
'Mnist Veri Seti Oluşturma Projesi'
],
'image' => 'assets/img/photos/tensorflow-book-real.jpg',
'image' => 'assets/img/photos/tensorflow-book-real.webp',
'year' => 'Yapay Zeka',
'isbn' => '9786052118566',
'pages' => '160',
@@ -80,7 +80,7 @@ Kuruluşu doğru yapmak ve olası hataların önüne geçmek için bu videoyu se
'Alan Adı ve Barındırma',
'Klasör Erişim İzinleri'
],
'image' => 'assets/img/photos/php-eticaret-book.jpg',
'image' => 'assets/img/photos/php-eticaret-book.webp',
'year' => 'E-Ticaret',
'isbn' => '978-605-5201-333',
'pages' => '440',
@@ -116,7 +116,7 @@ Kendi haberlerinizi hazırlayacağınız, kliplerinizi çekeceğiniz, kitapları
'Crawl ve Roll Yazılar',
'Color Correction'
],
'image' => 'assets/img/photos/adobe-premiere-book.jpg',
'image' => 'assets/img/photos/adobe-premiere-book.webp',
'year' => 'Video Montaj',
'isbn' => '978-605-5201-456',
'pages' => '312',
@@ -137,7 +137,7 @@ Kendi haberlerinizi hazırlayacağınız, kliplerinizi çekeceğiniz, kitapları
<img class="max-h-[350px] w-auto object-contain shadow-md transform group-hover:scale-105 transition-all duration-500 rounded"
src="{{ asset($book['image']) }}"
alt="{{ $book['title'] }}"
onerror="this.onerror=null;this.src='{{ asset('assets/img/photos/bs1.jpg') }}';">
onerror="this.onerror=null;this.src='{{ asset('assets/img/photos/bs1.jpg') }}';" loading="lazy">
</figure>
<div class="absolute top-4 left-4">
<span class="inline-flex items-center justify-center px-3 py-1 rounded bg-[#e31e24] text-white text-[0.7rem] font-bold uppercase tracking-wider shadow-sm">
@@ -2,7 +2,7 @@
<div class="container pt-20 pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="flex flex-wrap mx-[-7.5px] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[7.5px] max-w-full">
<figure class="m-0 p-0"><img class="w-auto" src="{{ asset('assets/img/illustrations/3d3.png') }}" alt="image"></figure>
<figure class="m-0 p-0"><img class="w-auto" src="{{ asset('assets/img/illustrations/3d3.webp') }}" alt="image" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]">
@@ -47,7 +47,7 @@
'Veri Artırma & Setleri',
'GANs ve Projeler'
],
'image' => 'assets/img/photos/tensorflow-book-real.jpg',
'image' => 'assets/img/photos/tensorflow-book-real.webp',
'google_play_link' => 'https://play.google.com/store/books/details/%C3%9CM%C4%B0T_TUN%C3%87_TENSORFLOW_%C4%B0LE_DER%C4%B0N_%C3%96%C4%9ERENME?id=X8gqEAAAQBAJ'
],
[
@@ -66,7 +66,7 @@
'SSL & SEO',
'Yönetim Paneli Geliştirme'
],
'image' => 'assets/img/photos/php-eticaret-book.jpg',
'image' => 'assets/img/photos/php-eticaret-book.webp',
'google_play_link' => 'https://play.google.com/store/books/details/%C3%9Cmit_TUN%C3%87_PHP_%C4%B0LE_E_T%C4%B0CARET_KAPILARI?id=aPK3DwAAQBAJ'
],
[
@@ -85,7 +85,7 @@
'Timeline & Keyframe',
'Render & Formatlar'
],
'image' => 'assets/img/photos/adobe-premiere-book.jpg',
'image' => 'assets/img/photos/adobe-premiere-book.webp',
'google_play_link' => 'https://play.google.com/store/books/details/%C3%9Cmit_Tun%C3%A7_ADOBE_PREMIERE_PRO_CC?id=it1TDwAAQBAJ'
]
];
@@ -118,7 +118,7 @@
@endif
<figure class="!rounded-[.4rem] !mb-0 shadow-lg group overflow-hidden">
<img class="!rounded-[.4rem] w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-500" src="{{ asset($book['image']) }}" alt="{{ $book['title'] }}">
<img class="!rounded-[.4rem] w-full h-auto object-cover transform group-hover:scale-105 transition-transform duration-500" src="{{ asset($book['image']) }}" alt="{{ $book['title'] }}" loading="lazy">
</figure>
</div>
<!--/column -->
@@ -26,7 +26,7 @@
<div class="flex items-center justify-between mb-6">
@if(!empty($account['logo']))
<div class="bg-gray-50 flex items-center justify-center p-2 rounded-lg" style="width: 120px; height: 60px;">
<img src="{{ asset('storage/' . $account['logo']) }}" class="img-fluid" style="max-height: 100%; max-width: 100%;" alt="{{ $account['bank_name'] }}">
<img src="{{ asset('storage/' . $account['logo']) }}" class="img-fluid" style="max-height: 100%; max-width: 100%;" alt="{{ $account['bank_name'] }}" loading="lazy">
</div>
@else
<div class="bg-primary/10 text-primary w-16 h-16 rounded-lg flex items-center justify-center text-2xl">
@@ -88,7 +88,7 @@
<div class="absolute top-0 right-0 -mt-2 -mr-2 w-12 h-12 bg-primary/5 rounded-full blur-xl"></div>
<div class="absolute bottom-0 left-0 -mb-2 -ml-2 w-14 h-14 bg-blue-500/5 rounded-full blur-xl"></div>
<img src="{{ asset('storage/' . $logo['file']) }}" class="img-fluid relative z-10 drop-shadow-sm group-hover:scale-105 transition-transform duration-300" style="max-height: 80px;" alt="{{ $logo['label'] }}">
<img src="{{ asset('storage/' . $logo['file']) }}" class="img-fluid relative z-10 drop-shadow-sm group-hover:scale-105 transition-transform duration-300" style="max-height: 80px;" alt="{{ $logo['label'] }}" loading="lazy">
</div>
<h5 class="mb-1 font-bold text-dark">{!! t($logo['label']) !!}</h5>
</div>
@@ -2,23 +2,24 @@
@section('content')
<section class="wrapper bg-white py-14 xl:py-20 relative">
<section class="wrapper bg-white py-16 xl:py-20 relative">
<div class="container">
<!-- Header -->
<div class="row align-items-center mb-12">
<div class="col-lg-8 mx-auto text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-100 text-orange-600 text-sm font-bold mb-4">
<i class="uil uil-shield-check text-lg"></i>
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-50 text-blue-600 text-sm font-bold mb-6">
<i class="uil uil-shield-check text-xl"></i>
{!! t('256-Bit SSL Güvenli Ödeme') !!}
</div>
<h1 class="display-3 font-bold text-slate-800 mb-3">{!! $page->title !!}</h1>
<p class="lead text-slate-500 max-w-2xl mx-auto">{!! $page->excerpt ?? t('Kredi kartınızla hızlı, kolay ve güvenli ödeme yapın.') !!}</p>
<h1 class="display-3 font-bold text-slate-800 mb-4">{!! $page->title !!}</h1>
<p class="text-lg text-slate-500 max-w-2xl mx-auto">{!! $page->excerpt ?? t('Kredi kartınızla hızlı, kolay ve güvenli ödeme yapın.') !!}</p>
</div>
</div>
@if(session('success'))
<div class="row mb-8">
<div class="col-lg-8 mx-auto">
<div class="alert alert-success bg-green-100 text-green-700 border-green-200 rounded-xl p-4 flex items-center gap-3">
<div class="row mb-10">
<div class="col-lg-6 mx-auto">
<div class="alert alert-success bg-green-50 text-green-700 border-green-100 rounded-2xl p-5 flex items-start gap-4 shadow-sm">
<i class="uil uil-check-circle text-2xl"></i>
<div>
<h4 class="font-bold text-lg mb-1">{!! t('Ödeme Başarılı!') !!}</h4>
@@ -30,9 +31,9 @@
@endif
@if(session('error'))
<div class="row mb-8">
<div class="col-lg-8 mx-auto">
<div class="alert alert-danger bg-red-100 text-red-700 border-red-200 rounded-xl p-4 flex items-center gap-3">
<div class="row mb-10">
<div class="col-lg-6 mx-auto">
<div class="alert alert-danger bg-red-50 text-red-700 border-red-100 rounded-2xl p-5 flex items-start gap-4 shadow-sm">
<i class="uil uil-exclamation-triangle text-2xl"></i>
<div>
<h4 class="font-bold text-lg mb-1">{!! t('Ödeme Başarısız!') !!}</h4>
@@ -44,14 +45,14 @@
@endif
@if($errors->any())
<div class="row mb-8">
<div class="col-lg-8 mx-auto">
<div class="alert alert-danger p-4 rounded-xl border border-red-200 bg-red-50" style="background-color: #fef2f2 !important; border-color: #fecaca !important;">
<div class="flex items-center gap-3 mb-2" style="color: #dc2626 !important;">
<div class="row mb-10">
<div class="col-lg-6 mx-auto">
<div class="alert alert-danger p-5 rounded-2xl border border-red-100 bg-red-50 shadow-sm">
<div class="flex items-center gap-3 mb-3 text-red-700">
<i class="uil uil-exclamation-triangle text-2xl"></i>
<h4 class="font-bold text-lg mb-0" style="color: #dc2626 !important;">{!! t('Lütfen Bilgileri Kontrol Ediniz') !!}</h4>
<h4 class="font-bold text-lg mb-0">{!! t('Lütfen Bilgileri Kontrol Ediniz') !!}</h4>
</div>
<ul class="list-disc pl-10 mb-0 font-medium" style="color: #dc2626 !important;">
<ul class="list-disc pl-11 mb-0 font-medium text-red-600 space-y-1">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
@@ -62,11 +63,11 @@
@endif
<div class="row justify-content-center">
<div class="col-lg-10 col-xl-9">
<div class="col-lg-12 col-xl-10">
@if(isset($paytr_token))
<div class="card shadow-lg border-0 rounded-3xl overflow-hidden relative" style="min-height: 500px;">
<!-- Üst Turuncu Çizgi -->
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-orange-500 to-amber-500"></div>
<div class="card shadow-xl border-0 rounded-3xl overflow-hidden relative" style="min-height: 500px;">
<!-- Header Line -->
<div class="absolute top-0 left-0 w-full h-1.5 bg-gradient-to-r from-blue-500 to-blue-600"></div>
<div class="card-body p-4 bg-white">
<script src="https://www.paytr.com/js/iframeResizer.min.js"></script>
<iframe src="https://www.paytr.com/odeme/guvenli/{!! $paytr_token !!}" id="paytriframe" frameborder="0" scrolling="no" style="width: 100%;"></iframe>
@@ -74,125 +75,131 @@
</div>
</div>
@else
<div class="card shadow-lg border-0 rounded-3xl overflow-hidden relative">
<!-- Üst Turuncu Çizgi -->
<div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-orange-500 to-amber-500"></div>
<div class="max-w-xl mx-auto">
<!-- Tabs -->
<div class="flex justify-center mb-8">
<div class="bg-gray-100 p-1.5 rounded-full inline-flex">
<button type="button" class="px-8 py-3 rounded-full text-blue-700 bg-white shadow-sm font-bold text-sm transition-all">
{!! t('KART İLE ÖDEME') !!}
</button>
<a href="{{ url('banka-bilgilerimiz') }}" class="px-8 py-3 rounded-full text-gray-500 font-medium hover:text-gray-700 text-sm transition-colors flex items-center justify-center">
{!! t('DİĞER YÖNTEMLER') !!}
</a>
</div>
</div>
<div class="card-body p-0">
<div class="bg-white rounded-[2rem] shadow-2xl shadow-blue-900/5 border border-gray-100 overflow-hidden relative">
<!-- Top Line -->
<div class="absolute top-0 left-0 w-full h-1.5 bg-blue-600"></div>
<form action="{{ route('payment.process') }}" method="POST">
@csrf
<input type="hidden" name="payment_type" value="online">
<div class="row g-0">
<!-- Sol Taraf: Ödeme Formu -->
<div class="col-lg-7 p-8 md:p-10 bg-white">
<h3 class="h4 mb-6 text-slate-800 font-bold flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-sm">1</div>
{!! t('Kart Sahibi Bilgileri') !!}
</h3>
<div class="row g-4">
<div class="col-md-6">
<div class="mb-3">
<label for="name" class="form-label text-slate-700 font-bold mb-2">{!! t('Adınız') !!}</label>
<input type="text" name="name" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('name') border-red-500 @enderror" id="name" placeholder="{!! t('Adınızı Giriniz') !!}" value="{{ old('name') }}">
@error('name') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="surname" class="form-label text-slate-700 font-bold mb-2">{!! t('Soyadınız') !!}</label>
<input type="text" name="surname" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('surname') border-red-500 @enderror" id="surname" placeholder="{!! t('Soyadınızı Giriniz') !!}" value="{{ old('surname') }}">
@error('surname') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="email" class="form-label text-slate-700 font-bold mb-2">{!! t('E-Posta Adresi') !!}</label>
<input type="email" name="email" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('email') border-red-500 @enderror" id="email" placeholder="{!! t('E-Posta Adresinizi Giriniz') !!}" value="{{ old('email') }}">
@error('email') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="phone" class="form-label text-slate-700 font-bold mb-2">{!! t('Telefon Numarası') !!}</label>
<input type="tel" name="phone" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('phone') border-red-500 @enderror" id="phone" placeholder="{!! t('Telefon Numaranızı Giriniz') !!}" value="{{ old('phone') }}">
@error('phone') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
</div>
</div>
<div class="col-12">
<div class="mb-3">
<label for="address" class="form-label text-slate-700 font-bold mb-2">{!! t('Ödeme Açıklaması / Not') !!}</label>
<textarea name="address" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('address') border-red-500 @enderror" id="address" placeholder="{!! t('Varsa notunuzu buraya yazabilirsiniz...') !!}" style="height: 100px;">{{ old('address') }}</textarea>
@error('address') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
</div>
<div class="p-8 md:p-10">
<form action="{{ route('payment.process') }}" method="POST">
@csrf
<input type="hidden" name="payment_type" value="online">
<div class="space-y-6">
<!-- Name -->
<div class="relative group">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<i class="uil uil-user text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
</div>
<input type="text" name="name" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('Adınız') !!}" value="{{ old('name') }}" required>
</div>
<div class="mt-8 pt-6 border-t border-slate-100">
<div class="form-check">
<input class="form-check-input border-slate-300 checked:bg-orange-500 checked:border-orange-500 focus:ring-orange-200 @error('agreement') border-red-500 @enderror" type="checkbox" name="agreement" value="1" id="policyCheck" {{ old('agreement') ? 'checked' : '' }}>
<label class="form-check-label text-sm text-slate-500" for="policyCheck">
{!! t('<a href="#" class="text-orange-600 hover:text-orange-700 font-medium">Mesafeli Satış Sözleşmesi</a>\'ni okudum, onaylıyorum.') !!}
</label>
@error('agreement') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
@error('name') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
<!-- Surname -->
<div class="relative group">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<i class="uil uil-user text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
</div>
<input type="text" name="surname" value="{{ old('surname') }}" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('Soyadınız') !!}" required>
</div>
@error('surname') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
<!-- Email -->
<div class="relative group">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<i class="uil uil-envelope text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
</div>
<input type="email" name="email" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('E-Posta Adresi') !!}" value="{{ old('email') }}" required>
</div>
@error('email') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
<!-- Phone -->
<div class="relative group">
<div class="absolute inset-y-0 left-0 pl-5 flex items-center pointer-events-none">
<i class="uil uil-phone text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
</div>
<input type="tel" name="phone" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm" placeholder="{!! t('Telefon Numarası') !!}" value="{{ old('phone') }}" required>
</div>
@error('phone') <div class="text-red-500 text-xs ml-2 mt-1 font-medium">{{ $message }}</div> @enderror
<!-- Note -->
<div class="relative group">
<div class="absolute top-4 left-0 pl-5 flex pointer-events-none">
<i class="uil uil-comment-alt-notes text-gray-400 group-focus-within:text-blue-600 transition-colors text-xl"></i>
</div>
<textarea name="address" rows="3" class="block w-full pl-14 pr-5 py-4 bg-white border border-gray-200 rounded-xl text-gray-800 placeholder-gray-400 focus:outline-none focus:border-blue-500 focus:ring-4 focus:ring-blue-500/10 transition-all font-medium shadow-sm resize-none" placeholder="{!! t('Sipariş Notunuz (Opsiyonel)') !!}">{{ old('address') }}</textarea>
</div>
</div>
<!-- Agreement -->
<div class="mt-6 flex items-start gap-3">
<div class="flex items-center pt-0.5">
<input id="agreement" name="agreement" type="checkbox" value="1"
class="cursor-pointer"
style="appearance: auto !important; -webkit-appearance: auto !important; width: 20px; height: 20px; accent-color: #1e3a8a;"
{{ old('agreement') ? 'checked' : '' }} required>
</div>
<div class="ml-1 text-sm">
<label for="agreement" class="font-medium text-gray-700 select-none cursor-pointer">
<span class="text-blue-900 font-bold hover:underline" onclick="event.preventDefault(); document.getElementById('agreementModal').classList.remove('hidden');">
Mesafeli Satış Sözleşmesi
</span>'ni okudum, onaylıyorum.
</label>
@error('agreement') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
</div>
</div>
<!-- Sağ Taraf: Özet ve Tutar -->
<div class="col-lg-5 bg-slate-50 p-8 md:p-10 border-l border-slate-100 flex flex-col justify-between">
<div>
<h3 class="h4 mb-6 text-slate-800 font-bold flex items-center gap-2">
<div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm">2</div>
{!! t('Ödeme Tutarı') !!}
</h3>
<div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center mb-6">
<label class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">{!! t('TOPLAM TUTAR') !!}</label>
<div class="relative inline-block w-full">
<span class="absolute left-4 top-1/2 -translate-y-1/2 text-2xl font-bold text-orange-500"></span>
<input type="number" step="0.01" min="1" name="price" class="form-control border-0 bg-transparent text-center text-4xl font-bold text-slate-800 p-0 focus:ring-0 focus:shadow-none w-full @error('price') text-red-500 @enderror" placeholder="0.00" id="amount" value="{{ old('price') }}">
</div>
@error('price') <div class="text-red-600 text-xs mt-1 font-medium">{{ $message }}</div> @enderror
</div>
<div class="my-8 border-t border-gray-100"></div>
<div class="space-y-3 opacity-70">
<div class="flex items-center gap-3 text-sm text-slate-600">
<i class="uil uil-check-circle text-green-500 text-lg"></i>
<span>{!! t('Komisyonsuz İşlem') !!}</span>
</div>
<div class="flex items-center gap-3 text-sm text-slate-600">
<i class="uil uil-check-circle text-green-500 text-lg"></i>
<span>{!! t('3D Secure ile Maksimum Güvenlik') !!}</span>
</div>
</div>
</div>
<div class="mt-8">
<button type="submit" class="btn w-full rounded-xl py-3 px-6 text-white font-bold text-lg shadow-lg hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2" style="background-color: #dc2626 !important; color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.5);">
<i class="uil uil-padlock"></i>
<span>{!! t('ÖDEMEYİ TAMAMLA') !!}</span>
</button>
<div class="mt-6 flex justify-center gap-4 opacity-50 grayscale hover:grayscale-0 transition-all duration-300">
<i class="uil uil-master-card text-3xl"></i>
<i class="uil uil-visa text-3xl"></i>
<i class="uil uil-card-atm text-3xl"></i>
<!-- Total Amount Row -->
<div class="flex items-end justify-between mb-8 bg-blue-50/50 p-6 rounded-2xl border border-blue-50">
<div class="text-blue-900 font-bold text-lg mb-1">{!! t('Ödenecek Tutar') !!}</div>
<div class="text-right">
<div class="flex items-center justify-end gap-1">
<input type="number" step="0.01" min="1" name="price" class="bg-transparent border-none text-right font-black text-4xl text-blue-600 p-0 focus:ring-0 w-48 placeholder-blue-300 transition-all outline-none" placeholder="0.00" value="{{ old('price') }}" required>
<span class="font-bold text-blue-400 text-2xl mb-1">TL</span>
</div>
@error('price') <div class="text-red-500 text-xs mt-1 font-medium">{{ $message }}</div> @enderror
</div>
</div>
</div>
</form>
<!-- Submit Button -->
<button type="submit" class="w-full py-5 bg-orange-600 hover:bg-orange-700 text-white font-bold text-lg rounded-full shadow-xl shadow-orange-200/50 hover:shadow-orange-600/30 hover:-translate-y-1 active:translate-y-0 transition-all duration-300 flex items-center justify-center gap-3">
<span>{!! t('Ödemeyi Tamamla') !!}</span>
<i class="uil uil-arrow-right text-2xl"></i>
</button>
<div class="mt-6 text-center">
<div class="flex justify-center gap-2 opacity-30 grayscale hover:grayscale-0 transition-all duration-300">
<i class="uil uil-master-card text-2xl"></i>
<i class="uil uil-visa text-2xl"></i>
<i class="uil uil-card-atm text-2xl"></i>
</div>
</div>
</form>
</div>
</div>
</div>
@endif
@if($page->content)
<div class="mt-14 text-center">
<div class="prose max-w-3xl mx-auto text-slate-600">
<div class="mt-20 text-center">
<div class="prose max-w-3xl mx-auto text-slate-500">
{!! $page->content !!}
</div>
</div>
@@ -201,6 +208,63 @@
</div>
</div>
</div>
<!-- Agreement Modal (Top-Spaced) -->
<div id="agreementModal" class="fixed inset-0 hidden" style="z-index: 99999;" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<!-- Backdrop -->
<div class="absolute inset-0 bg-black/75 transition-opacity backdrop-blur-sm" aria-hidden="true" onclick="document.getElementById('agreementModal').classList.add('hidden')"></div>
<!-- Modal Dialog Layout -->
<div class="absolute inset-0 overflow-y-auto">
<!-- Changed from 'items-center' to 'items-start' and added 'pt-20' for top spacing -->
<div class="flex min-h-full items-start justify-center p-4 text-center pt-24 sm:pt-32">
<!-- Modal Panel -->
<div class="relative w-full max-w-xl transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all mb-10" style="background-color: #ffffff;">
<!-- Header -->
<div class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4">
<h3 class="text-lg font-bold leading-6 text-gray-900" id="modal-title">
{!! t('Mesafeli Satış Sözleşmesi') !!}
</h3>
<button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')" class="rounded-full p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none transition-colors">
<i class="uil uil-times text-2xl"></i>
</button>
</div>
<!-- Body -->
<div class="px-6 py-6">
<div class="text-sm text-gray-600 max-h-[60vh] overflow-y-auto space-y-4 pr-2 custom-scrollbar">
<p class="font-bold text-gray-900">MADDE 1 TARAFLAR</p>
<p>İşbu Sözleşme aşağıdaki taraflar arasında aşağıda belirtilen hüküm ve şartlar çerçevesinde imzalanmıştır.</p>
<p class="font-bold text-gray-900">MADDE 2 KONU</p>
<p>İşbu sözleşmenin konusu, ALICI'nın SATICI'ya ait internet sitesinden elektronik ortamda siparişini yaptığı aşağıda nitelikleri ve satış fiyatı belirtilen ürünün satışı ve teslimi ile ilgili olarak 6502 sayılı Tüketicinin Korunması Hakkında Kanun ve Mesafeli Sözleşmelere Dair Yönetmelik hükümleri gereğince tarafların hak ve yükümlülüklerinin saptanmasıdır.</p>
<p class="font-bold text-gray-900">MADDE 3 CAYMA HAKKI</p>
<p>ALICI; mal satışına ilişkin mesafeli sözleşmelerde, ürünün kendisine veya gösterdiği adresteki kişi/kuruluşa teslim tarihinden itibaren 14 (on dört) gün içerisinde hiçbir hukuki ve cezai sorumluluk üstlenmeksizin ve hiçbir gerekçe göstermeksizin malı reddederek sözleşmeden cayma hakkını kullanabilir.</p>
<p>...</p>
</div>
</div>
<!-- Footer -->
<div class="flex flex-col-reverse gap-3 border-t border-gray-100 bg-gray-50 px-6 py-4 sm:flex-row sm:justify-end">
<button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')"
class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto"
style="background-color: #dc2626 !important; color: #ffffff !important; border-radius: 9999px !important; transition: all 0.3s ease !important;">
{!! t('Kapat') !!}
</button>
<button type="button" onclick="document.getElementById('agreement').checked = true; document.getElementById('agreementModal').classList.add('hidden');"
class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto"
style="background-color: #16a34a !important; color: #ffffff !important; border-radius: 9999px !important; transition: all 0.3s ease !important;">
<i class="uil uil-check mr-2 text-lg"></i>
{!! t('Okudum, Onaylıyorum') !!}
</button>
</div>
</div>
</div>
</div>
</div>
</section>
@endsection
@@ -18,7 +18,7 @@
@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">
<img class="!w-full !h-auto" src="{{ asset('storage/' . $partner['logo']) }}" alt="Partner" loading="lazy">
@if(!empty($partner['url']))
</a>
@endif
@@ -28,9 +28,9 @@
{{-- 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.png" alt="image"></div>
<div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../../assets/img/brands/c2.png" alt="image"></div>
<div class="swiper-slide px-5"><img class="!w-full !h-auto" src="../../assets/img/brands/c3.png" alt="image"></div>
<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
</div>
@@ -3,12 +3,12 @@
@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') }}">
<section id="testimonials-hero" class="wrapper image-wrapper bg-image bg-overlay bg-overlay-500" data-image-src="{{ asset('assets/img/photos/bg1.webp') }}">
{{-- Inline style scoped to this ID --}}
<style>
#testimonials-hero.bg-image[data-image-src] {
background-image: url("{{ asset('assets/img/photos/bg1.jpg') }}");
background-image: url("{{ asset('assets/img/photos/bg1.webp') }}");
}
</style>
@@ -50,7 +50,7 @@
<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 }}">
<img src="{{ asset('storage/' . $testimonial->avatar) }}" class="!rounded-[50%] w-full h-full object-cover" alt="{{ $testimonial->name }}" loading="lazy">
</div>
@endif
<div class="info p-0">
@@ -9,7 +9,7 @@
<div class="swiper-slide" style="margin-right: 40px;">
<a href="{{ route('products.show', $product->slug) }}" class="block group relative">
<figure class="!rounded-[0.8rem] 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] transition-transform duration-300 group-hover:scale-105">
<img class="!rounded-[.8rem] h-[300px] w-auto object-cover" src="{{ asset('storage/' . $product->hero_image) }}" alt="{{ $product->translate('title') }}">
<img loading="lazy" class="!rounded-[.8rem] h-[300px] w-auto object-cover" src="{{ asset('storage/' . $product->hero_image) }}" alt="{{ $product->translate('title') }}">
</figure>
<!-- Tooltip -->
<div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 px-3 py-1 bg-black/80 backdrop-blur-sm text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-20">
@@ -29,7 +29,7 @@
<div class="swiper-slide" style="margin-left: 40px;">
<a href="{{ route('products.show', $product->slug) }}" class="block group relative">
<figure class="!rounded-[0.8rem] 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] transition-transform duration-300 group-hover:scale-105">
<img class="!rounded-[.8rem] h-[300px] w-auto object-cover" src="{{ asset('storage/' . $product->hero_image) }}" alt="{{ $product->translate('title') }}">
<img loading="lazy" class="!rounded-[.8rem] h-[300px] w-auto object-cover" src="{{ asset('storage/' . $product->hero_image) }}" alt="{{ $product->translate('title') }}">
</figure>
<!-- Tooltip -->
<div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 px-3 py-1 bg-black/80 backdrop-blur-sm text-white text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none whitespace-nowrap z-20">
@@ -2,7 +2,7 @@
<div class="container pt-20 pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full">
<figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d3.png" alt="image"></figure>
<figure class="m-0 p-0"><img class="w-auto" src="assets/img/illustrations/3d3.webp" alt="image" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] px-[7.5px] !mt-[50px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%]">
@@ -1,4 +1,4 @@
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.3)]" data-image-src="./assets/img/photos/bg16.png" style="background-image: url('./assets/img/photos/bg16.png');">
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.3)]" data-image-src="./assets/img/photos/bg16.webp" style="background-image: url('./assets/img/photos/bg16.webp');">
<div class="container pt-28 pb-36 xl:pt-32 lg:pt-32 md:pt-32 xl:pb-28 lg:pb-28 md:pb-28 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInDown" data-group="page-title" data-disabled="true">
@@ -9,14 +9,14 @@
</div>
<!--/column -->
<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:w-5/12 !mx-auto flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5 md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px]">
<img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem] xl:!mb-[-9rem]" src="{{ setting('home_hero', asset('assets/img/illustrations/3d11.png')) }}" data-cue="fadeIn" data-delay="300" alt="image" data-show="true" style="animation-name: fadeIn; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;">
<img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem] xl:!mb-[-9rem]" src="{{ setting('home_hero', asset('assets/img/illustrations/3d11.webp')) }}" data-cue="fadeIn" data-delay="300" alt="image" data-show="true" style="animation-name: fadeIn; animation-duration: 700ms; animation-timing-function: ease; animation-delay: 300ms; animation-direction: normal; animation-fill-mode: both;" loading="lazy">
</div>
<!--/column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="{{ asset('assets/img/photos/clouds.png') }}" alt="image"></figure>
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="{{ asset('assets/img/photos/clouds.webp') }}" alt="image" loading="lazy"></figure>
</section>
@@ -6,7 +6,7 @@
<div class="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]">
<div class="flex flex-wrap mx-[-15px]">
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/se1.jpg" alt="image"></figure>
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="assets/img/photos/se1.webp" alt="image" loading="lazy"></figure>
</div>
<!-- /column -->
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
@@ -29,7 +29,7 @@
<div class="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]">
<div class="flex flex-wrap mx-[-15px]">
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
<figure class="!rounded-[.4rem] !mb-6 xl:!mb-0 lg:!mb-0 md:!mb-0"><img class="!rounded-[.4rem]" src="assets/img/photos/se2.jpg" alt="image"></figure>
<figure class="!rounded-[.4rem] !mb-6 xl:!mb-0 lg:!mb-0 md:!mb-0"><img class="!rounded-[.4rem]" src="assets/img/photos/se2.webp" alt="image" loading="lazy"></figure>
</div>
<!-- /column -->
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
@@ -2,7 +2,7 @@
<div class="container pt-20 pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem] items-center">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mx-auto xl:!order-2 lg:!order-2 px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
<figure class="m-0 p-0"><img class="w-auto" src="{{ setting('home_solutions_image', asset('assets/img/illustrations/3d5.png')) }}" alt="image"></figure>
<figure class="m-0 p-0"><img class="w-auto" src="{{ setting('home_solutions_image', asset('assets/img/illustrations/3d5.webp')) }}" alt="image" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !mr-auto px-[7.5px] !mt-[50px] xl:!mt-0 lg:!mt-0">
@@ -12,7 +12,7 @@
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
<div class="lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto hidden xl:!flex lg:!flex xl:!px-[35px] lg:!px-[20px]">
<div class="img-mask mask-3"><img src="{{ setting('home_testimonials_image', asset('assets/img/photos/about28.jpg')) }}" alt="image"></div>
<div class="img-mask mask-3"><img src="{{ setting('home_testimonials_image', asset('assets/img/photos/about28.webp')) }}" alt="image" loading="lazy"></div>
</div>
<!--/column -->
<div class="lg:w-6/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto xl:!px-[35px] lg:!px-[20px]">
@@ -2,7 +2,7 @@
<div class="container pt-20 pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<div class="flex flex-wrap mx-[-7.5px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full px-[7.5px] !mt-[50px]">
<figure class="m-0 p-0"><img class="w-auto" src="{{ setting('home_why_choose_us_image', asset('assets/img/illustrations/3d8.png')) }}" alt="image"></figure>
<figure class="m-0 p-0"><img class="w-auto" src="{{ setting('home_why_choose_us_image', asset('assets/img/illustrations/3d8.webp')) }}" alt="image" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] max-w-full !ml-auto px-[7.5px] !mt-[50px]">
@@ -36,7 +36,7 @@
<div class="tab-pane fade show active" id="tab2-1" role="tabpanel">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se5.jpg" alt="image"></figure>
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se5.webp" alt="image" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -57,7 +57,7 @@
<div class="tab-pane fade" id="tab2-2" role="tabpanel">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full xl:!order-2 lg:!order-2">
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se6.jpg" alt="image"></figure>
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se6.webp" alt="image" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
@@ -78,7 +78,7 @@
<div class="tab-pane fade" id="tab2-3" role="tabpanel">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se7.jpg" alt="image"></figure>
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img class="!rounded-[.4rem]" src="assets/img/photos/se7.webp" alt="image" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
+2 -2
View File
@@ -6,7 +6,7 @@
@section('content')
<div class="grow shrink-0">
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../assets/img/photos/bg4.jpg" style="background-image: url(&quot;../assets/img/photos/bg4.jpg&quot;);">
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 !text-white bg-no-repeat bg-[center_center] bg-cover relative z-0 !bg-fixed before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.4)]" data-image-src="../assets/img/photos/bg4.webp" style="background-image: url(&quot;../assets/img/photos/bg4.jpg&quot;);">
<div class="container pt-28 pb-40 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem] !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -156,7 +156,7 @@
<!-- /.container -->
</section>
<!-- /section -->
<section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="../assets/img/map.png" style="background-image: url(&quot;../assets/img/map.png&quot;);">
<section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="../assets/img/map.webp" style="background-image: url(&quot;../assets/img/map.png&quot;);">
<div class="container pt-0 pb-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 xl:pb-32 lg:pb-32 md:pb-32">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
@@ -1,7 +1,7 @@
<nav data-module="nav" class="nav-w">
<div class="nav">
<div class="logo-banner-w">
<img class="logo-light" src="{{url("assets/img/truncgil-yatay.svg")}}" alt="image">
<img class="logo-light" src="{{url("assets/img/truncgil-yatay.svg")}}" alt="image" loading="lazy">
</div>
</div>
<div class="overflow-w">
@@ -18,7 +18,7 @@
<h3 class="font-c size-md _w-ch">{{t("Yapay Zeka Uygulamaları")}}</h3>
<div class="abs-img">
<div class="dual-img">
<img src="{{asset('assets/img/gsap/yapay-zeka.png')}}" loading="eager" alt="" class="dual-img-img">
<img src="{{asset('assets/img/gsap/yapay-zeka.webp')}}" loading="eager" alt="" class="dual-img-img">
</div>
</div>
@@ -30,7 +30,7 @@
<h3 class="font-c size-md _w-ch">{{t("Semantik Web")}}</h3>
<div class="abs-img">
<div class="dual-img">
<img src="{{asset('assets/img/gsap/semantik-web.png')}}" loading="eager" alt="" class="dual-img-img">
<img src="{{asset('assets/img/gsap/semantik-web.webp')}}" loading="eager" alt="" class="dual-img-img">
</div>
</div>
</div>
@@ -41,7 +41,7 @@
<h3 class="font-c size-md _w-ch">{{t("Parallax Web Sitesi")}}</h3>
<div class="abs-img">
<div class="dual-img">
<img src="{{asset('assets/img/gsap/parallax-web-site.png')}}" loading="eager" alt="" class="dual-img-img">
<img src="{{asset('assets/img/gsap/parallax-web-site.webp')}}" loading="eager" alt="" class="dual-img-img">
</div>
</div>
</div>
@@ -52,7 +52,7 @@
<h3 class="font-c size-md _w-ch">{{t("Nesnelerin İnterneti")}}</h3>
<div class="abs-img">
<div class="dual-img">
<img src="{{asset('assets/img/gsap/iot.png')}}" loading="eager" alt="" class="dual-img-img">
<img src="{{asset('assets/img/gsap/iot.webp')}}" loading="eager" alt="" class="dual-img-img">
</div>
</div>
</div>
@@ -63,7 +63,7 @@
<h3 class="font-c size-md _w-ch">Sequenced Motion</h3>
<div class="abs-img">
<div class="dual-img">
<img src="{{asset('assets/img/gsap/yapay-zeka.png')}}" loading="eager" alt="" class="dual-img-img">
<img src="{{asset('assets/img/gsap/yapay-zeka.webp')}}" loading="eager" alt="" class="dual-img-img">
</div>
</div>
</div>
@@ -74,7 +74,7 @@
<h3 class="font-c size-md _w-ch">FLEXIBLE LAYOUTS</h3>
<div class="abs-img">
<div class="dual-img">
<img src="{{asset('assets/img/gsap/yapay-zeka.png')}}" loading="eager" alt="" class="dual-img-img">
<img src="{{asset('assets/img/gsap/yapay-zeka.webp')}}" loading="eager" alt="" class="dual-img-img">
</div>
</div>
</div>
@@ -15,10 +15,10 @@
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
<div class="flex flex-wrap mx-[-15px] !mb-8">
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-10rem]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ $page->featured_image_url }}" alt="{{ t('neler-yapariz.image_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img loading="lazy" class="rounded-[0.4rem]" src="{{ $page->featured_image_url }}" alt="{{ t('neler-yapariz.image_alt') }}"></figure>
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="{{ asset('assets/img/photos/bg3.jpg') }}" style="background-image: url('{{ asset('assets/img/photos/bg3.jpg') }}');">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="{{ asset('assets/img/photos/bg3.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg3.webp') }}');">
<div class="card-body p-[2.25rem] xl:!p-[2.5rem]">
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-20px] !text-center">
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
@@ -59,25 +59,25 @@
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[20px] !mt-[40px] max-w-full xl:!order-2 lg:!order-2">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end !mt-[25px]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g1.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_1_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g1.webp') }}" alt="{{ t('neler-yapariz.gallery.image_1_alt') }}" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full !self-end !mt-[25px]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g2.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_2_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g2.webp') }}" alt="{{ t('neler-yapariz.gallery.image_2_alt') }}" loading="lazy"></figure>
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%] !mt-[25px]">
<figure class="rounded-[0.4rem] overflow-hidden aspect-video bg-gray-100">
<img
class="rounded-[0.4rem] object-cover w-full h-full"
src="{{ $content->cover ?? asset('assets/img/photos/g3.jpg') }}"
<img class="rounded-[0.4rem] object-cover w-full h-full"
src="{{ $content->cover ?? asset('assets/img/photos/g3.webp') }}"
alt="{{ t('neler-yapariz.gallery.image_3_alt') }}"
loading="lazy"
>
</figure>
</div>
<!--/column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start !mt-[25px]">
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g4.jpg') }}" alt="{{ t('neler-yapariz.gallery.image_4_alt') }}"></figure>
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="{{ asset('assets/img/photos/g4.webp') }}" alt="{{ t('neler-yapariz.gallery.image_4_alt') }}" loading="lazy"></figure>
</div>
<!--/column -->
</div>
@@ -3,8 +3,7 @@
'size' => 'md',
])
<img
{{
<img loading="lazy" {{
$attributes
->class([
'fi-avatar',