Page errors on the Our Books page have been corrected.
This commit is contained in:
Muhammet Güler
@@ -12,28 +12,11 @@
|
|||||||
{{-- Hero Section --}}
|
{{-- Hero Section --}}
|
||||||
@include('templates.books.sections.hero')
|
@include('templates.books.sections.hero')
|
||||||
|
|
||||||
{{-- Content Section --}}
|
{{-- Features Section (Book Showcase) --}}
|
||||||
<section class="wrapper !bg-[#ffffff] relative border-0 upper-end before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-0 before:border-solid before:right-0">
|
@include('templates.books.sections.features')
|
||||||
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
|
|
||||||
|
|
||||||
{{-- Section Title --}}
|
|
||||||
<div class="flex flex-wrap mx-[-15px] !mb-12">
|
|
||||||
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
||||||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">{{ t('Yayınlarımız') }}</h2>
|
|
||||||
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-0">{{ t('Eğitim ve bilim alanında hazırladığımız kitaplarımızı keşfedin.') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Categories Removed --}}
|
{{-- Contact Section --}}
|
||||||
|
@include('templates.books.sections.contact')
|
||||||
{{-- Book List --}}
|
|
||||||
@include('templates.books.sections.book-list')
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{{-- CTA Footer --}}
|
|
||||||
@include('templates.books.sections.footer')
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -36,7 +36,7 @@ Yapay zeka ve derin öğrenmenin temellerini atıp ileriye taşıyabileceğiniz
|
|||||||
'Optik Kağıt Tanıma Projesi',
|
'Optik Kağıt Tanıma Projesi',
|
||||||
'Mnist Veri Seti Oluşturma Projesi'
|
'Mnist Veri Seti Oluşturma Projesi'
|
||||||
],
|
],
|
||||||
'image' => '/assets/img/photos/tensorflow-book-real.jpg',
|
'image' => 'assets/img/photos/tensorflow-book-real.jpg',
|
||||||
'year' => 'Yapay Zeka',
|
'year' => 'Yapay Zeka',
|
||||||
'isbn' => '9786052118566',
|
'isbn' => '9786052118566',
|
||||||
'pages' => '160',
|
'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',
|
'Alan Adı ve Barındırma',
|
||||||
'Klasör Erişim İzinleri'
|
'Klasör Erişim İzinleri'
|
||||||
],
|
],
|
||||||
'image' => '/assets/img/photos/php-eticaret-book.jpg',
|
'image' => 'assets/img/photos/php-eticaret-book.jpg',
|
||||||
'year' => 'E-Ticaret',
|
'year' => 'E-Ticaret',
|
||||||
'isbn' => '978-605-5201-333',
|
'isbn' => '978-605-5201-333',
|
||||||
'pages' => '440',
|
'pages' => '440',
|
||||||
@@ -116,7 +116,7 @@ Kendi haberlerinizi hazırlayacağınız, kliplerinizi çekeceğiniz, kitapları
|
|||||||
'Crawl ve Roll Yazılar',
|
'Crawl ve Roll Yazılar',
|
||||||
'Color Correction'
|
'Color Correction'
|
||||||
],
|
],
|
||||||
'image' => '/assets/img/photos/adobe-premiere-book.jpg',
|
'image' => 'assets/img/photos/adobe-premiere-book.jpg',
|
||||||
'year' => 'Video Montaj',
|
'year' => 'Video Montaj',
|
||||||
'isbn' => '978-605-5201-456',
|
'isbn' => '978-605-5201-456',
|
||||||
'pages' => '312',
|
'pages' => '312',
|
||||||
@@ -128,38 +128,61 @@ Kendi haberlerinizi hazırlayacağınız, kliplerinizi çekeceğiniz, kitapları
|
|||||||
|
|
||||||
@foreach($books as $book)
|
@foreach($books as $book)
|
||||||
<div class="w-full flex-[0_0_auto] px-[15px] mt-[40px]">
|
<div class="w-full flex-[0_0_auto] px-[15px] mt-[40px]">
|
||||||
<div class="card shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full overflow-hidden group">
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full overflow-hidden group hover:!shadow-[0_0.5rem_2rem_rgba(30,34,40,0.15)] transition-all duration-300">
|
||||||
<div class="flex flex-wrap md:flex-nowrap h-full">
|
<div class="flex flex-wrap md:flex-nowrap h-full">
|
||||||
|
|
||||||
{{-- Book Image (Left Side) --}}
|
{{-- Book Image (Left Side) --}}
|
||||||
<div class="md:w-4/12 lg:w-3/12 w-full shrink-0 relative bg-gray-100 flex items-center justify-center">
|
<div class="md:w-4/12 lg:w-3/12 w-full shrink-0 relative bg-gray-50 flex items-center justify-center border-r border-gray-100">
|
||||||
<figure class="h-full w-full !m-0 overflow-hidden flex items-center justify-center p-4">
|
<figure class="h-full w-full !m-0 overflow-hidden flex items-center justify-center p-6">
|
||||||
<img class="max-h-[400px] w-auto object-contain shadow-lg transform group-hover:scale-105 transition-all duration-500" src="{{ $book['image'] }}" alt="{{ $book['title'] }}">
|
<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') }}';">
|
||||||
</figure>
|
</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">
|
||||||
|
{{ $book['year'] }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Book Content (Right Side) --}}
|
{{-- Book Content (Right Side) --}}
|
||||||
<div class="md:w-8/12 lg:w-9/12 w-full flex flex-col justify-center p-8 lg:p-12">
|
<div class="md:w-8/12 lg:w-9/12 w-full flex flex-col p-6 lg:p-10">
|
||||||
<div class="post-header mb-4">
|
<div class="post-header mb-2">
|
||||||
<div class="inline-flex mb-3 uppercase tracking-wider text-xs font-bold text-[#e31e24] bg-red-50 px-3 py-1 rounded-full">
|
<div class="flex items-center justify-between mb-2">
|
||||||
{{ $book['year'] }}
|
<div class="text-xs text-gray-400 font-mono bg-gray-100 px-2 py-1 rounded">
|
||||||
|
ISBN: {{ $book['isbn'] }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="float-right text-xs text-gray-400 font-mono">
|
<h2 class="post-title h2 !mb-1 !text-[1.6rem] font-bold text-[#343f52]">
|
||||||
{{ $book['isbn'] }}
|
|
||||||
</div>
|
|
||||||
<h2 class="post-title h2 !mb-2 !text-[1.7rem] font-bold text-[#343f52]">
|
|
||||||
<a href="#" class="hover:text-[#e31e24] transition-colors">{{ $book['title'] }}</a>
|
<a href="#" class="hover:text-[#e31e24] transition-colors">{{ $book['title'] }}</a>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="text-[#60697b] text-lg mb-4 italic">
|
<div class="text-[#60697b] text-base mb-4 font-medium">
|
||||||
{{ $book['author'] }}
|
<i class="uil uil-pen text-[#e31e24] mr-1"></i> {{ $book['author'] }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content mb-6">
|
{{-- Attributes --}}
|
||||||
|
<div class="flex flex-wrap gap-4 text-xs text-gray-500 mb-5 border-y border-gray-100 py-3">
|
||||||
|
@if(isset($book['pages']) && $book['pages'] != '-')
|
||||||
|
<div class="flex items-center gap-2" title="{{ t('Sayfa Sayısı') }}">
|
||||||
|
<i class="uil uil-file-alt text-[#e31e24] text-base"></i>
|
||||||
|
<span>{{ $book['pages'] }} {{ t('Sayfa') }}</span>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
@if(isset($book['dimensions']) && $book['dimensions'] != '-')
|
||||||
|
<div class="flex items-center gap-2" title="{{ t('Boyutlar') }}">
|
||||||
|
<i class="uil uil-ruler text-[#e31e24] text-base"></i>
|
||||||
|
<span>{{ $book['dimensions'] }}</span>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="content mb-6 flex-grow">
|
||||||
<div x-data="{ expanded: false }" class="relative">
|
<div x-data="{ expanded: false }" class="relative">
|
||||||
<div class="transition-all duration-500 overflow-hidden"
|
<div class="transition-all duration-500 overflow-hidden"
|
||||||
:style="expanded ? 'max-height: 1000px' : 'max-height: 120px'">
|
:style="expanded ? 'max-height: 2000px' : 'max-height: 90px'">
|
||||||
<p class="text-[#60697b] leading-relaxed mb-4 whitespace-pre-line">{!! $book['full_description'] ?: $book['description'] !!}</p>
|
<p class="text-[#60697b] leading-relaxed mb-0 whitespace-pre-line text-[0.95rem]">{!! $book['full_description'] ?: $book['description'] !!}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- Fade Overlay --}}
|
{{-- Fade Overlay --}}
|
||||||
@@ -168,55 +191,40 @@ Kendi haberlerinizi hazırlayacağınız, kliplerinizi çekeceğiniz, kitapları
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button @click="expanded = !expanded"
|
<button @click="expanded = !expanded"
|
||||||
class="text-[#e31e24] font-semibold text-sm hover:underline mt-2 focus:outline-none flex items-center gap-1">
|
class="text-[#e31e24] font-bold text-xs hover:underline mt-2 focus:outline-none flex items-center gap-1 uppercase tracking-wider">
|
||||||
<span x-text="expanded ? '{{ t('Daha Az Göster') }}' : '{{ t('Devamını Oku') }}'"></span>
|
<span x-text="expanded ? '{{ t('Daha Az Göster') }}' : '{{ t('Devamını Oku') }}'"></span>
|
||||||
<i class="uil" :class="expanded ? 'uil-angle-up' : 'uil-angle-down'"></i>
|
<i class="uil" :class="expanded ? 'uil-angle-up' : 'uil-angle-down'"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
{{-- Attributes --}}
|
|
||||||
<div class="flex gap-6 text-sm text-gray-500 mb-4 border-b border-gray-100 pb-4">
|
|
||||||
@if(isset($book['pages']) && $book['pages'] != '-')
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i class="uil uil-file-alt text-[#e31e24]"></i>
|
|
||||||
<span>{{ $book['pages'] }} Sayfa</span>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
@if(isset($book['dimensions']) && $book['dimensions'] != '-')
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<i class="uil uil-ruler text-[#e31e24]"></i>
|
|
||||||
<span>{{ $book['dimensions'] }}</span>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Topics List (Accordion style or simple list) --}}
|
{{-- Topics List --}}
|
||||||
@if(!empty($book['topics']))
|
@if(!empty($book['topics']))
|
||||||
<div class="topics mt-4">
|
<div class="topics mt-auto pt-4 border-t border-gray-100">
|
||||||
<h4 class="text-sm font-bold text-[#343f52] mb-2 uppercase">{{ t('İçindekiler / Konu Başlıkları') }}</h4>
|
<h4 class="text-xs font-bold text-[#343f52] mb-3 uppercase tracking-wide opacity-70">{{ t('Konu Başlıkları') }}</h4>
|
||||||
<div class="flex flex-wrap gap-2">
|
<div class="flex flex-wrap gap-2">
|
||||||
@foreach(array_slice($book['topics'], 0, 8) as $topic)
|
@foreach(array_slice($book['topics'], 0, 8) as $topic)
|
||||||
<span class="text-xs bg-gray-100 text-gray-600 px-2 py-1 rounded hover:bg-gray-200 transition-colors">{{ $topic }}</span>
|
<span class="text-[0.65rem] bg-gray-50 text-gray-600 px-2 py-1 rounded border border-gray-100 hover:bg-[#e31e24] hover:text-white hover:border-[#e31e24] transition-colors cursor-default">{{ $topic }}</span>
|
||||||
@endforeach
|
@endforeach
|
||||||
@if(count($book['topics']) > 8)
|
@if(count($book['topics']) > 8)
|
||||||
<span class="text-xs text-[#e31e24] px-2 py-1 font-medium">+{{ count($book['topics']) - 8 }} {{ t('daha') }}...</span>
|
<span class="text-[0.65rem] text-[#e31e24] px-2 py-1 font-bold">+{{ count($book['topics']) - 8 }} {{ t('daha') }}</span>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
<div class="meta flex flex-wrap items-center justify-end gap-3 mt-6">
|
||||||
|
@if(isset($book['google_play_link']))
|
||||||
|
<a href="{{ $book['google_play_link'] }}" target="_blank" class="inline-flex items-center gap-3 px-5 py-3 bg-black text-white rounded-md hover:bg-gray-800 transition-all hover:translate-y-[-2px] hover:shadow-lg group-hover:bg-[#e31e24]">
|
||||||
|
<i class="uil uil-google-play text-2xl"></i>
|
||||||
|
<div class="flex flex-col leading-none">
|
||||||
|
<span class="text-[0.6rem] uppercase tracking-wider text-white/70 mb-1">Google Play'de</span>
|
||||||
|
<span class="text-sm font-bold">E-Kitap Olarak İncele</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="meta flex flex-wrap items-center justify-end gap-4 mt-auto pt-6">
|
|
||||||
@if(isset($book['google_play_link']))
|
|
||||||
<a href="{{ $book['google_play_link'] }}" target="_blank" class="inline-flex items-center gap-2 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors">
|
|
||||||
<i class="uil uil-google-play text-xl"></i>
|
|
||||||
<div class="flex flex-col leading-tight">
|
|
||||||
<span class="text-[0.6rem] uppercase tracking-wider text-gray-400">Google Play'de</span>
|
|
||||||
<span class="text-sm font-bold">E-Kitap Olarak İncele</span>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
@endif
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,44 @@
|
|||||||
|
<section class="wrapper bg-[rgba(255,255,255)] opacity-100">
|
||||||
|
<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>
|
||||||
|
</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%]">
|
||||||
|
<h2 class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase text-gradient gradient-1 !mb-3">{{ t('İletişim') }}</h2>
|
||||||
|
<h3 class="xl:!text-[1.9rem] !text-[calc(1.315rem_+_0.78vw)] font-semibold !leading-[1.25] !tracking-[normal] !mb-8">{{ t('Sorularınız için bizimle iletişime geçin.') }}</h3>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 255.84" data-inject-url="{{ asset('assets/img/icons/solid/pin.svg') }}" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-duo text-[#e31e24] !mt-1 !mr-4"><path class="fill-secondary" d="M10.67 255.84a10.68 10.68 0 01-7.54-18.23l86.08-86a10.67 10.67 0 1115.08 15.1l-86.08 86a10.61 10.61 0 01-7.54 3.13z"></path><path class="fill-primary" d="M250.54 80.72L175.12 5.29a19.12 19.12 0 00-26.4 0L138.3 15.71a27.18 27.18 0 00-6.61 27.93A11.25 11.25 0 01129 55.21L98.38 85.79a13.3 13.3 0 01-9.38 3.9H76.46a29.11 29.11 0 00-20.73 8.59l-5.06 5.06a18.66 18.66 0 000 26.4l75.42 75.42a18.64 18.64 0 0026.4 0l5.06-5.07a29.12 29.12 0 008.59-20.73v-12.5a13.43 13.43 0 013.91-9.42l30.57-30.58a11.24 11.24 0 0111.57-2.74 27.14 27.14 0 0027.92-6.6l10.42-10.42a18.65 18.65 0 000-26.38z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="!mb-0">{{ t('Adres') }}</h5>
|
||||||
|
<address class=" not-italic !leading-[inherit] !mb-4">{{ t(setting('contact_address', 'Adres bilgisi yakında')) }}</address>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.01 256" data-inject-url="{{ asset('assets/img/icons/solid/rotary.svg') }}" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-duo text-[#e31e24] !mt-1 !mr-4"><path class="fill-secondary" d="M128 106.67a128.15 128.15 0 00-128 128A21.36 21.36 0 0021.34 256h213.32A21.36 21.36 0 00256 234.67c0-70.57-57.42-128-128-128zM128 224a42.67 42.67 0 1142.67-42.67A42.71 42.71 0 01128 224z"></path><path class="fill-primary" d="M33.45 117.34a22.89 22.89 0 01-12.56-3.69 50.7 50.7 0 01-6.61-5.12A43.84 43.84 0 01.74 68.3C5.45 43.31 33.27 27.06 53.8 17A169.32 169.32 0 01128 0c34.77 0 69.86 10.62 96.26 29.14 11.95 8.4 26.22 20.11 30.4 36.41a44 44 0 01-12.93 43 49.9 49.9 0 01-6.49 5 23.84 23.84 0 01-26.87-.76L171.1 86.18c-8.32-5.94-11.64-16.42-8.08-25.52.19-.53.41-1 .64-1.56a113 113 0 00-71.33 0l.67 1.54c3.57 9.1.22 19.6-8.08 25.52l-37.3 26.61a24.15 24.15 0 01-14.14 4.57z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="!mb-0">{{ t('Telefon') }}</h5>
|
||||||
|
<p>{{ t(setting('contact_phone', 'Telefon bilgisi yakında')) }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row">
|
||||||
|
<div>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 202.66" data-inject-url="{{ asset('assets/img/icons/solid/emails.svg') }}" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] solid-duo text-[#e31e24] !mt-1 !mr-4"><path class="fill-primary" d="M192 0H21.33A21.36 21.36 0 000 21.33v96a21.36 21.36 0 0021.33 21.33H192a21.36 21.36 0 0021.33-21.33v-96A21.36 21.36 0 00192 0zm0 48l-73.6 37.12A25.12 25.12 0 01106.67 88a24.39 24.39 0 01-11.84-3L21.34 48V30.08l80.85 40.75a9.64 9.64 0 008.85.11l81-40.86z"></path><path class="fill-secondary" d="M234.67 64v53.33A42.72 42.72 0 01192 160H42.67v21.33A21.36 21.36 0 0064 202.66h170.67A21.36 21.36 0 00256 181.33v-96A21.36 21.36 0 00234.67 64z"></path></svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h5 class="!mb-0">{{ t('E-mail') }}</h5>
|
||||||
|
<p class="!mb-0"><a href="mailto:{{ t(setting('contact_email', 'E-mail bilgisi yakında')) }}" class="!text-[#60697b] hover:!text-[#60697b]">{{ t(setting('contact_email', 'E-mail bilgisi yakında')) }}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--/column -->
|
||||||
|
</div>
|
||||||
|
<!-- /.row -->
|
||||||
|
</div>
|
||||||
|
<!-- /.container -->
|
||||||
|
</section>
|
||||||
@@ -0,0 +1,165 @@
|
|||||||
|
<section class="wrapper !bg-[#ffffff]">
|
||||||
|
<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">
|
||||||
|
|
||||||
|
@php
|
||||||
|
// Mapping specific styles for the zigzag layout loop
|
||||||
|
$styles = [
|
||||||
|
'leaf' => [
|
||||||
|
'class_suffix' => 'leaf',
|
||||||
|
'main_color' => '#7cb798',
|
||||||
|
'bg_color' => '#e7f2ec',
|
||||||
|
'shape_color' => '#f0eaf6',
|
||||||
|
'shape_class' => 'bg-line leaf',
|
||||||
|
'btn_class' => 'btn-soft-leaf',
|
||||||
|
],
|
||||||
|
'aqua' => [
|
||||||
|
'class_suffix' => 'aqua',
|
||||||
|
'main_color' => '#54a8c7',
|
||||||
|
'bg_color' => '#e0eff5',
|
||||||
|
'shape_color' => '#fae6e7',
|
||||||
|
'shape_class' => 'bg-line aqua',
|
||||||
|
'btn_class' => 'btn-soft-aqua',
|
||||||
|
],
|
||||||
|
'purple' => [ // Adding more for variety if needed, falling back to leaf/aqua
|
||||||
|
'class_suffix' => 'purple',
|
||||||
|
'main_color' => '#9d7ad2',
|
||||||
|
'bg_color' => '#f2eef9',
|
||||||
|
'shape_color' => '#eaddf0',
|
||||||
|
'shape_class' => 'bg-line purple',
|
||||||
|
'btn_class' => 'btn-soft-purple',
|
||||||
|
]
|
||||||
|
];
|
||||||
|
|
||||||
|
$books = [
|
||||||
|
[
|
||||||
|
'id' => 1,
|
||||||
|
'title' => 'TENSORFLOW İLE DERİN ÖĞRENME',
|
||||||
|
'author' => 'Ümit Tunç / İ. Halil Sanduvaç',
|
||||||
|
'description' => 'Sıkı durun, sizinle derin bir yolculuğa çıkacağız. Bu yolculukta şoförümüz siz, muavininiz biz olacağız. Yapay zeka ve derin öğrenme hususundaki örneklerle belirlediğimiz bu kaynak ile hem bu işin matematiğini, hem de tasarım aşamasına kadar olan aşamaları göreceksiniz.',
|
||||||
|
'full_description' => 'Yapay zeka ve derin öğrenme hususundaki örneklerle belirlediğimiz bu kaynak ile hem bu işin matematiğini, hem de tasarım aşamasına kadar olan aşamaları göreceksiniz. Günlük hayatta kullanılan canlı örneklerle ilham verebileceğini düşündüğümüz çalışmaları sizlerin huzuruna büyük bir özveriyle sunmanın gururunu yaşıyoruz.',
|
||||||
|
'topics' => [
|
||||||
|
'Yapay Zeka & Derin Öğrenme',
|
||||||
|
'Yapay Nöronlar & Katmanlar',
|
||||||
|
'Konvolüsyonel Sinir Ağları',
|
||||||
|
'Görüntü İşleme & HaarCascade',
|
||||||
|
'Makine Öğrenmesi & Tensorflow',
|
||||||
|
'OpenCV & Nesne Tanıma',
|
||||||
|
'Veri Artırma & Setleri',
|
||||||
|
'GANs ve Projeler'
|
||||||
|
],
|
||||||
|
'image' => 'assets/img/photos/tensorflow-book-real.jpg',
|
||||||
|
// 'google_play_link' => '...' // Link removed
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 2,
|
||||||
|
'title' => 'PHP İLE E-TİCARET KAPILARI',
|
||||||
|
'author' => 'Ümit Tunç',
|
||||||
|
'description' => 'Günümüz dünyasında gittikçe büyüyen sektörlerden biri olan sanal mağazacılık, birden bire toplumlarda yeni yeni öğretiler, kavramlar meydana getirmiştir. Kendinizi bu yeniliklere adapte edebilmek için çeşitli kavramlar öğrenilmelidir.',
|
||||||
|
'full_description' => 'Ezber bozacak metotlar içeren bu kitap size farklı bir bakış açısıyla e-ticaret yazılımını öğretebileceği gibi; bir projenin geliştirilebilirliği bakımından çeşitli örnekler de sunacak. Sözü ve kodu fazla uzatmadan kestirme bir yol izleyen kitap; hedef pazarı gittikçe büyüyen bu sektörün kapılarını da size ardına kadar açacaktır.',
|
||||||
|
'topics' => [
|
||||||
|
'Az Kod Çok İş & Kobetik',
|
||||||
|
'MySQL Fonksiyonları & SP',
|
||||||
|
'Web Tasarımı & Şablonlar',
|
||||||
|
'Üyelik & Kriptolama',
|
||||||
|
'Sepet & Sipariş İşlemleri',
|
||||||
|
'3D Secure & Güvenlik',
|
||||||
|
'SSL & SEO',
|
||||||
|
'Yönetim Paneli Geliştirme'
|
||||||
|
],
|
||||||
|
'image' => 'assets/img/photos/php-eticaret-book.jpg',
|
||||||
|
'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'
|
||||||
|
],
|
||||||
|
[
|
||||||
|
'id' => 3,
|
||||||
|
'title' => 'ADOBE PREMIERE PRO CC',
|
||||||
|
'author' => 'Ümit Tunç',
|
||||||
|
'description' => 'Video editörlüğü hangi açıdan bakılırsa bakılsın bir kişinin mutlaka alaka duyması gerekli olan bir konu. Günümüz dünyasında değişen medya anlayışıyla artık haberler çok uzun yazılardan ziyade görsellerle zenginleştiriliyor.',
|
||||||
|
'full_description' => 'Kendi haberlerinizi hazırlayacağınız, kliplerinizi çekeceğiniz, kitaplarınızı seslendirip görüntülü ortamlara dönüştüreceğiniz harika bir kaynak. Sayısal ses ve sayısal video alanında kurgu ve montaj tekniklerinin eğitim videoları ile desteklenerek anlatıldığı bu kitap, mutlaka kütüphanenizin ön raflarında bulunması gereklidir.',
|
||||||
|
'topics' => [
|
||||||
|
'Görüntü Stabilize Etmek',
|
||||||
|
'Adobe Audition & Ses Montajı',
|
||||||
|
'Kurgu ve Montaj Estetiği',
|
||||||
|
'Greenbox & Bluebox',
|
||||||
|
'Haber ve Film Montajı',
|
||||||
|
'Animasyon & Geçiş Efektleri',
|
||||||
|
'Timeline & Keyframe',
|
||||||
|
'Render & Formatlar'
|
||||||
|
],
|
||||||
|
'image' => 'assets/img/photos/adobe-premiere-book.jpg',
|
||||||
|
'google_play_link' => 'https://play.google.com/store/books/details/%C3%9Cmit_Tun%C3%A7_ADOBE_PREMIERE_PRO_CC?id=it1TDwAAQBAJ'
|
||||||
|
]
|
||||||
|
];
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
@foreach($books as $index => $book)
|
||||||
|
@php
|
||||||
|
// Alternate styles
|
||||||
|
$styleKey = ($index % 2 == 0) ? 'leaf' : 'aqua';
|
||||||
|
$style = $styles[$styleKey];
|
||||||
|
$reverse = ($index % 2 != 0);
|
||||||
|
|
||||||
|
// Split topics into 2 columns
|
||||||
|
$topicChunks = array_chunk($book['topics'], ceil(count($book['topics']) / 2));
|
||||||
|
@endphp
|
||||||
|
|
||||||
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] {{ $loop->last ? '' : '!mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]' }} items-center">
|
||||||
|
|
||||||
|
{{-- Image Column --}}
|
||||||
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] !relative {{ $reverse ? 'xl:!order-2 lg:!order-2' : '' }}">
|
||||||
|
|
||||||
|
{{-- Decorative Shapes --}}
|
||||||
|
@if(!$reverse)
|
||||||
|
<div class="shape {{ $style['shape_class'] }} !rounded-[50%] rellax !w-[7rem] !h-[7rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -2rem; right: -0.6rem;"></div>
|
||||||
|
<div class="shape !rounded-[50%] rellax !w-[7rem] !h-[7rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: -2rem; left: -0.4rem; background-color: {{ $style['shape_color'] }};"></div>
|
||||||
|
@else
|
||||||
|
<div class="shape {{ $style['shape_class'] }} !rounded-[50%] rellax !w-[7rem] !h-[7rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="top: -2rem; left: -0.6rem;"></div>
|
||||||
|
<div class="shape !rounded-[50%] rellax !w-[7rem] !h-[7rem] !absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: -2rem; right: -0.4rem; background-color: {{ $style['shape_color'] }};"></div>
|
||||||
|
@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'] }}">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<!--/column -->
|
||||||
|
|
||||||
|
{{-- Content Column --}}
|
||||||
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full !mt-[50px] {{ $reverse ? 'xl:!order-1 lg:!order-1' : '' }}">
|
||||||
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-2">{{ $book['title'] }}</h3>
|
||||||
|
<div class="text-[#e31e24] font-medium mb-4 uppercase tracking-wide text-sm">{{ $book['author'] }}</div>
|
||||||
|
|
||||||
|
<p class="!mb-5 text-gray-600 leading-relaxed">{{ $book['full_description'] }}</p>
|
||||||
|
|
||||||
|
<div class="flex flex-wrap mx-[-15px] !mt-[-15px]">
|
||||||
|
@foreach($topicChunks as $chunk)
|
||||||
|
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[15px]">
|
||||||
|
<ul class="pl-0 list-none bullet-bg bullet-{{ $style['class_suffix'] }} !mb-0">
|
||||||
|
@foreach($chunk as $liIndex => $topic)
|
||||||
|
<li class="{{ $liIndex > 0 ? '!mt-3' : '' }} relative !pl-6">
|
||||||
|
<span>
|
||||||
|
<i class="uil uil-check !w-4 !h-4 text-[0.8rem] leading-none !tracking-[normal] text-center table absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']" style="color: {{ $style['main_color'] }}; background-color: {{ $style['bg_color'] }};"></i>
|
||||||
|
</span>
|
||||||
|
<span class="text-sm text-gray-700">{{ $topic }}</span>
|
||||||
|
</li>
|
||||||
|
@endforeach
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
<!--/.row -->
|
||||||
|
|
||||||
|
<div class="flex items-center gap-3 mt-8">
|
||||||
|
@if(isset($book['google_play_link']))
|
||||||
|
<a href="{{ $book['google_play_link'] }}" target="_blank" class="btn !rounded-[50rem] !mb-0 !mr-0 hover:translate-y-[-2px] transition-transform" style="background-color: {{ $style['bg_color'] }}; color: {{ $style['main_color'] }};">
|
||||||
|
{{ t('İncele & Satın Al') }}
|
||||||
|
</a>
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--/column -->
|
||||||
|
</div>
|
||||||
|
<!--/.row -->
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
@@ -1,37 +1,15 @@
|
|||||||
<section class="wrapper relative overflow-hidden text-white" style="background: linear-gradient(120deg, #8b5cf6 0%, #d946ef 50%, #f97316 100%) !important;">
|
<section class="wrapper" style="background-color: #1e293b;">
|
||||||
|
<div class="container pt-10 pb-10 xl:pt-14 lg:pt-14 md:pt-14 xl:pb-12 lg:pb-12 md:pb-12 text-center">
|
||||||
{{-- Moving Shapes Overlay --}}
|
<div class="row">
|
||||||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
<div class="col-md-10 col-lg-8 col-xl-7 col-xxl-6 mx-auto">
|
||||||
<div class="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] bg-white/10 rounded-full blur-[80px] mix-blend-overlay animate-pulse duration-[8s]"></div>
|
<h1 class="display-1 !mb-3 !text-[2.5rem] font-bold tracking-tight" style="color: #ffffff;">{!! t('Kitaplarımız') !!}</h1>
|
||||||
<div class="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] bg-blue-500/20 rounded-full blur-[100px] mix-blend-overlay"></div>
|
<p class="lead !text-[1.1rem] !leading-[1.6] font-medium mb-0 max-w-2xl mx-auto" style="color: #cbd5e1;">
|
||||||
</div>
|
{!! t('Geleceği şekillendiren teknolojileri, uzman kalemlerden derinlemesine öğrenin.') !!}
|
||||||
|
</p>
|
||||||
{{-- Pattern --}}
|
</div>
|
||||||
<div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(rgba(255,255,255,0.8) 1.5px, transparent 1.5px); background-size: 40px 40px;"></div>
|
<!-- /column -->
|
||||||
|
</div>
|
||||||
<div class="container relative z-10 pt-32 pb-40 xl:pt-48 lg:pt-44 md:pt-40 xl:pb-[10rem] lg:pb-[10rem] md:pb-[10rem] !text-center">
|
<!-- /.row -->
|
||||||
<div class="flex flex-col items-center justify-center animate-fade-in-up">
|
|
||||||
|
|
||||||
{{-- Badge --}}
|
|
||||||
<div class="mb-8">
|
|
||||||
<span class="inline-flex items-center gap-2 px-6 py-2 rounded-full bg-white/20 border border-white/30 backdrop-blur-md text-xs font-bold tracking-[0.2em] uppercase text-white shadow-xl hover:bg-white/30 transition-colors">
|
|
||||||
<i class="uil uil-star"></i> {{ t('Koleksiyon') }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- Main Title --}}
|
|
||||||
<h1 class="display-1 !text-[4rem] md:!text-[6rem] font-black text-white leading-none mb-6 tracking-tight drop-shadow-lg">
|
|
||||||
{{ t('Kitaplarımız') }}
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
{{-- Divider --}}
|
|
||||||
<div class="w-24 h-2 bg-white rounded-full mb-8 shadow-sm opacity-90"></div>
|
|
||||||
|
|
||||||
{{-- Subtitle --}}
|
|
||||||
<p class="text-xl md:text-2xl text-white font-medium max-w-3xl mx-auto leading-relaxed drop-shadow-md">
|
|
||||||
{{ t('Gökkuşağı tadında bir bilgi yolculuğuna hazır olun.') }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- /.container -->
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
Reference in New Issue
Block a user