refactor: dynamicize structured data fields and integrate entrance animations on web development page

This commit is contained in:
Ümit Tunç
2026-05-23 23:34:43 +03:00
parent c2767f031a
commit 45c9fa24d0
2 changed files with 80 additions and 36 deletions
+34 -3
View File
@@ -57,9 +57,6 @@ abstract class StructuredData
return $node;
}
/**
* @return array<string, mixed>
*/
protected static function organizationNode(): array
{
$siteUrl = static::siteUrl();
@@ -81,6 +78,40 @@ abstract class StructuredData
];
}
$phone = setting('contact_phone');
if ($phone) {
$node['telephone'] = $phone;
}
$email = setting('contact_email');
if ($email) {
$node['email'] = $email;
}
$address = setting('contact_address');
if ($address) {
$node['address'] = [
'@type' => 'PostalAddress',
'streetAddress' => $address,
];
}
$socialLinks = setting('social_links');
if ($socialLinks) {
$links = is_string($socialLinks) ? json_decode($socialLinks, true) : $socialLinks;
if (is_array($links)) {
$sameAs = [];
foreach ($links as $platform => $url) {
if (!empty($url)) {
$sameAs[] = $url;
}
}
if (!empty($sameAs)) {
$node['sameAs'] = $sameAs;
}
}
}
return $node;
}
@@ -2,6 +2,27 @@
@php
$pageHero = $pageHero ?? \App\Support\PageTemplateHero::resolveForPage($page ?? null, 'services.web-development');
// Dynamicize social links
$socialLinks = setting('social_links');
$sameAs = [];
if ($socialLinks) {
$links = is_string($socialLinks) ? json_decode($socialLinks, true) : $socialLinks;
if (is_array($links)) {
foreach ($links as $platform => $url) {
if (!empty($url)) {
$sameAs[] = $url;
}
}
}
}
if (empty($sameAs)) {
$sameAs = [
"https://www.facebook.com/truncgil",
"https://www.instagram.com/truncgil",
"https://www.linkedin.com/company/truncgil-technology"
];
}
@endphp
@push('head')
@@ -19,18 +40,14 @@
{
"@@type": "ProfessionalService",
"@@id": "{{ url()->current() }}#organization",
"name": "Trunçgil Teknoloji",
"image": "{{ asset('assets/img/logo.png') }}",
"name": "{{ setting('site_name', 'Trunçgil Teknoloji') }}",
"image": "{{ setting('site_logo') ? (str_starts_with(setting('site_logo'), 'http') ? setting('site_logo') : asset('storage/' . ltrim(setting('site_logo'), '/'))) : asset('assets/img/logo.png') }}",
"url": "{{ url('/') }}",
"telephone": "+902244431620",
"telephone": "{{ setting('contact_phone', '+902244431620') }}",
"priceRange": "$$$",
"address": {
"@@type": "PostalAddress",
"streetAddress": "Ulutek Teknoloji Geliştirme Bölgesi, Görükle Kampüsü, No: 104",
"addressLocality": "Nilüfer",
"addressRegion": "Bursa",
"postalCode": "16059",
"addressCountry": "TR"
"streetAddress": "{{ setting('contact_address', 'Ulutek Teknoloji Geliştirme Bölgesi, Görükle Kampüsü, No: 104') }}"
},
"geo": {
"@@type": "GeoCoordinates",
@@ -49,11 +66,7 @@
"opens": "09:00",
"closes": "18:00"
},
"sameAs": [
"https://www.facebook.com/truncgil",
"https://www.instagram.com/truncgil",
"https://www.linkedin.com/company/truncgil-technology"
]
"sameAs": {!! json_encode($sameAs, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
},
{
"@@type": "Service",
@@ -920,7 +933,7 @@
<section class="wrapper !bg-[#ffffff] web-dev-section">
<div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="tech-header">
<img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" style="top: -45%; left: 23%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle4.svg') }}" class="h-8 absolute hidden xl:block lg:block floating-doodle" style="top: 6%; right: 2%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Teknoloji Ekosistemimiz') !!}</h2>
@@ -932,7 +945,7 @@
<div class="flex flex-wrap mx-[-15px] !mb-28">
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<ul class="nav nav-tabs tech-tabs-grid" role="tablist">
<ul class="nav nav-tabs tech-tabs-grid" role="tablist" data-cues="slideInUp" data-group="tech-tabs" data-interval="-200">
@foreach($techCategories as $key => $category)
<li class="nav-item !mb-[20px]" role="presentation">
<a class="nav-link !flex flex-row items-center {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#tab-tech-{{ $key }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" role="tab" {!! !$loop->first ? 'tabindex="-1"' : '' !!}>
@@ -951,7 +964,7 @@
<div class="tab-content mt-8">
@foreach($techCategories as $key => $category)
<div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-tech-{{ $key }}">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] justify-center" data-cues="slideInUp" data-group="tech-cards-{{ $key }}" data-interval="-200">
@foreach($technologies as $tech)
@if(in_array($tech['name'], $category['items']))
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
@@ -976,7 +989,7 @@
{{-- Capabilities Section --}}
<div id="neler-yapiyoruz" class="flex flex-wrap mx-[-15px] !text-center !mt-12">
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="cap-header">
<h2 class="!text-[0.8rem] !leading-[1.35] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3">{!! t('Neler Yapıyoruz?') !!}</h2>
<h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] !mb-12 lg:!px-5 xl:!px-0 xxl:!px-6">
{!! t('İhtiyaçlarınıza özel, yüksek performanslı') !!} <span class="text-gradient gradient-7">{!! t('dijital çözümler') !!}</span>
@@ -984,7 +997,7 @@
</div>
</div>
<div class="flex flex-wrap mx-[-15px] !mb-28">
<div class="flex flex-wrap mx-[-15px] !mb-28" data-cues="slideInUp" data-group="cap-cards" data-interval="-150">
@foreach($capabilities as $index => $cap)
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-6 max-w-full">
<div class="card h-full !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.06)] border-0 flex flex-col justify-between !rounded-[1.2rem] overflow-hidden">
@@ -1002,7 +1015,7 @@
{{-- How It Works --}}
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
<div class="md:w-10/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="process-header">
<img src="{{ asset('assets/img/svg/doodle5.svg') }}" class="!w-[5rem] absolute hidden xl:block lg:block floating-doodle" style="bottom: -60%; right: 10%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" style="top: -40%; left: -5%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#74788d] !mb-3 !leading-[1.35]">{!! t('Geliştirme Sürecimiz') !!}</h2>
@@ -1015,7 +1028,7 @@
<div class="flex flex-wrap mx-[-15px] lg:!mb-20 xl:!mb-[10rem]">
<div class="xxl:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !text-center items-center">
<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">
<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" data-cue="fadeIn" data-delay="300">
<figure class="mx-auto">
<picture>
<source srcset="{{ asset('assets/img/illustrations/i9.png') }}" type="image/webp">
@@ -1024,7 +1037,7 @@
</figure>
</div>
<div class="w-full xl:!hidden lg:!hidden !px-[15px] !mt-[50px]"></div>
<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 lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0">
<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 lg:!-order-1 xl:!-order-1 !mt-[50px] xl:!mt-0 lg:!mt-0" data-cues="slideInUp" data-group="process-steps-left" data-interval="-200">
@foreach(array_slice($processSteps, 0, 2) as $index => $step)
<div class="{{ $index === 0 ? '!mb-8' : '' }}">
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}</span>
@@ -1033,7 +1046,7 @@
</div>
@endforeach
</div>
<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 !mt-[50px] xl:!mt-0 lg:!mt-0">
<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 !mt-[50px] xl:!mt-0 lg:!mt-0" data-cues="slideInUp" data-group="process-steps-right" data-interval="-200" data-delay="300">
@foreach(array_slice($processSteps, 2, 2) as $index => $step)
<div class="{{ $index === 0 ? '!mb-8' : '' }}">
<span class="xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !leading-none !mb-3 font-medium text-gradient gradient-7">{{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}</span>
@@ -1053,7 +1066,7 @@
<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">
<div class="!relative !mb-12">
<div class="!relative !mb-12" data-cues="slideInUp" data-group="faq-header">
<img src="{{ asset('assets/img/svg/doodle7.svg') }}" class="h-7 absolute hidden xl:block lg:block floating-doodle" style="top: -90%; right: -3%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle8.svg') }}" class="!h-[4.5rem] absolute hidden xl:block lg:block floating-doodle" style="top: -20%; left: -12%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Sık Sorulan Sorular') !!}</h2>
@@ -1062,7 +1075,7 @@
</h3>
</div>
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mb-0" data-cues="slideInUp" data-group="faq-list-1" data-interval="-150">
<div id="accordion-web-dev-1" class="accordion-wrapper">
@foreach(array_slice($faqs, 0, 3) as $index => $faq)
<div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@@ -1080,7 +1093,7 @@
@endforeach
</div>
</div>
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInUp" data-group="faq-list-2" data-interval="-150" data-delay="300">
<div id="accordion-web-dev-2" class="accordion-wrapper">
@foreach(array_slice($faqs, 3, 3) as $index => $faq)
<div class="card accordion-item !mb-5 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
@@ -1108,7 +1121,7 @@
<section class="wrapper !bg-[#ffffff] web-dev-section">
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
<div class="md:w-11/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative" data-cues="slideInUp" data-group="why-header">
<img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block floating-doodle" style="top: -20%; right: -12%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle9.svg') }}" class="!h-[7rem] absolute hidden xl:block lg:block floating-doodle" style="bottom: 5%; left: -17%" alt="" loading="lazy">
<h2 class="!text-[0.8rem] uppercase !text-[#74788d] !mb-3 !text-center !leading-[1.35]">{!! t('Neden Trunçgil Teknoloji?') !!}</h2>
@@ -1119,7 +1132,7 @@
</div>
<div class="flex-wrap mx-[-15px] flex items-start !mb-32">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky" style="top: 8rem;" data-cue="slideInLeft">
<figure class="m-0 p-0">
<picture>
<source srcset="{{ asset('assets/img/illustrations/i17.png') }}" type="image/webp">
@@ -1127,7 +1140,7 @@
</picture>
</figure>
</div>
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto" data-cues="slideInUp" data-group="why-list" data-interval="-200" data-delay="300">
@foreach($whyChoose as $item)
<div class="flex flex-row !mb-8">
<div>
@@ -1146,7 +1159,7 @@
{{-- Testimonials --}}
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative">
<div class="md:w-11/12 lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center !relative" data-cues="slideInUp" data-group="test-header">
<img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block floating-doodle" style="top: 2%; left: 9%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle10.svg') }}" class="h-7 absolute hidden xl:block lg:block floating-doodle" style="top: -45%; left: -17%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle11.svg') }}" class="!h-[4rem] absolute hidden xl:block lg:block floating-doodle" style="top: -40%; right: -15%" alt="" loading="lazy">
@@ -1157,11 +1170,11 @@
</div>
</div>
<div class="itemgrid !mb-10">
<div class="itemgrid !mb-10" data-cues="slideInUp" data-group="test-cards" data-interval="-200">
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
@foreach($testimonials as $testimonial)
<div class="item md:w-6/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="card !shadow-none !rounded-[1.2rem] overflow-hidden" style="background-color: {{ $testimonial['bg'] }};">
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.05)] !rounded-[1.2rem] overflow-hidden" style="background-color: {{ $testimonial['bg'] }};">
<div class="card-body flex-[1_1_auto] !p-8 md:!p-10">
<blockquote class="!text-[0.875rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p class="!mb-4">{!! t($testimonial['quote']) !!}</p>
@@ -1194,7 +1207,7 @@
</div>
<div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-12 lg:pb-12 md:pb-12 text-center xl:text-left lg:text-left">
<div class="flex flex-wrap mx-0 !mt-[-50px] items-center">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]" data-cues="slideInUp" data-group="cta-text" data-delay="300">
<img src="{{ asset('assets/img/svg/doodle2.svg') }}" class="!h-[5rem] !absolute hidden xl:block lg:block floating-doodle" style="bottom: 36%; right: -25%" alt="" loading="lazy">
<img src="{{ asset('assets/img/svg/doodle6.svg') }}" class="!h-[4.5rem] !absolute hidden xl:block lg:block floating-doodle" style="top: -20%; left: -25%" alt="" loading="lazy">
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-semibold !leading-[1.2] xl:!text-[2rem] !mb-4">
@@ -1207,7 +1220,7 @@
<a href="{{ $contactUrl }}" class="btn btn-gradient gradient-7 !rounded-[0.8rem] !px-6 !text-white">{!! t('Projenizi Konuşalım') !!}</a>
</div>
</div>
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]">
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]" data-cue="slideInRight" data-delay="300">
<figure class="m-0 p-0">
<picture>
<source srcset="{{ asset('assets/img/illustrations/i12.png') }}" type="image/webp">