feat: update web development template icons to Material Symbols and enhance styling for improved visual consistency
This commit is contained in:
Ümit Tunç
@@ -119,7 +119,23 @@
|
||||
@endpush
|
||||
|
||||
@push('styles')
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=monitor,install_mobile,api,sync,view_in_ar,rocket_launch,code,hub,bolt,gpp_good,translate" />
|
||||
<style>
|
||||
.web-dev-section .material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined' !important;
|
||||
font-weight: normal !important;
|
||||
font-style: normal !important;
|
||||
line-height: 1 !important;
|
||||
letter-spacing: normal !important;
|
||||
text-transform: none !important;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
.web-dev-section .accordion-wrapper .card-header button.collapsed {
|
||||
color: #343f52 !important;
|
||||
}
|
||||
@@ -228,81 +244,11 @@
|
||||
.web-dev-illustration--cta {
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
/* Preloader Styling with Smooth Easing */
|
||||
.page-preloader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.8s cubic-bezier(0.77, 0, 0.175, 1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.page-preloader.fade-out {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
.preloader-content {
|
||||
text-align: center;
|
||||
}
|
||||
.spinner-dot-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.spinner-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #747ed1;
|
||||
border-radius: 50%;
|
||||
animation: preloader-bounce 1.4s infinite ease-in-out both;
|
||||
}
|
||||
.spinner-dot:nth-child(1) {
|
||||
animation-delay: -0.32s;
|
||||
}
|
||||
.spinner-dot:nth-child(2) {
|
||||
animation-delay: -0.16s;
|
||||
}
|
||||
@keyframes preloader-bounce {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(0);
|
||||
} 40% {
|
||||
transform: scale(1.0);
|
||||
}
|
||||
}
|
||||
.preloader-text {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
color: #74788d;
|
||||
letter-spacing: 0.05rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
|
||||
{{-- Easing Preloader --}}
|
||||
<div id="page-preloader" class="page-preloader">
|
||||
<div class="preloader-content">
|
||||
<div class="spinner-dot-container">
|
||||
<div class="spinner-dot"></div>
|
||||
<div class="spinner-dot"></div>
|
||||
<div class="spinner-dot"></div>
|
||||
</div>
|
||||
<div class="preloader-text">{!! t('Yükleniyor...') !!}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$featureBgColors = [
|
||||
'#f0f2fd', '#fbf1f4', '#fdf3e7', '#edf9f6',
|
||||
@@ -410,32 +356,32 @@
|
||||
|
||||
$capabilities = [
|
||||
[
|
||||
'icon' => 'uil-monitor',
|
||||
'icon' => 'monitor',
|
||||
'title' => 'Web Siteleri ve Web Uygulamaları',
|
||||
'description' => 'Göz alıcı kurumsal web sitelerinden karmaşık, dinamik portal ve yönetim sistemlerine kadar her boyuttaki ihtiyacınızı çözüyoruz.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-mobile-android',
|
||||
'icon' => 'install_mobile',
|
||||
'title' => 'PWA (Progressive Web Apps)',
|
||||
'description' => 'Web sitelerinizi, mobil cihazlarda yerleşik bir uygulama gibi çevrimdışı çalışabilen, hızlı ve bildirim gönderebilen uygulamalara dönüştürüyoruz.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-server',
|
||||
'icon' => 'api',
|
||||
'title' => 'Web Servisleri ve API Entegrasyonu',
|
||||
'description' => 'Uygulamalarınızın diğer sistemlerle pürüzsüz haberleşmesini sağlayan, yüksek performanslı RESTful ve GraphQL API altyapıları kuruyoruz.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-sync',
|
||||
'icon' => 'sync',
|
||||
'title' => 'Socket Servisleri (Real-time)',
|
||||
'description' => 'Anlık mesajlaşma, canlı veri akışları ve çok oyunculu yapılar için WebSocket ve anlık iletişim ağları inşa ediyoruz.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-cube',
|
||||
'icon' => 'view_in_ar',
|
||||
'title' => 'Three.js ve 3D Web',
|
||||
'description' => 'Tarayıcı tabanlı 3D ürün konfigüratörleri, zengin görselleştirme projeleri ve WebGL teknolojili büyüleyici dijital deneyimler geliştiriyoruz.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-rocket',
|
||||
'icon' => 'rocket_launch',
|
||||
'title' => 'Docker, Kubernetes ve CI/CD',
|
||||
'description' => 'Uygulamalarınızı modern konteyner mimarilerine taşıyor; Docker, Kubernetes ve otomatik CI/CD süreçleriyle kesintisiz canlıya alım altyapısı kuruyoruz.'
|
||||
]
|
||||
@@ -462,25 +408,25 @@
|
||||
|
||||
$whyChoose = [
|
||||
[
|
||||
'icon' => 'uil-brackets-curly',
|
||||
'icon' => 'code',
|
||||
'bg' => '#e9eaf8',
|
||||
'title' => 'Uçtan Uca Modern Teknoloji Yığınları',
|
||||
'description' => 'React, Vue, Node.js ve Django gibi teknolojilerdeki yetkinliğimizle, projenizin ihtiyacına en uygun araçları seçer, performans darboğazlarını engelleriz.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-cloud-database-alt',
|
||||
'icon' => 'hub',
|
||||
'bg' => '#e1f6f0',
|
||||
'title' => 'Mikroservisler ve Konteyner Gücü',
|
||||
'description' => 'Docker ve Kubernetes konusundaki derin mühendislik bilgimiz sayesinde projelerinizi yüksek trafik altında dahi kusursuz ölçeklenecek şekilde yapılandırırız.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-bolt',
|
||||
'icon' => 'bolt',
|
||||
'bg' => '#fef3e4',
|
||||
'title' => 'Üstün Performans ve SEO Dostu Arayüzler',
|
||||
'description' => 'Geliştirdiğimiz web uygulamaları hızlı sayfa yükleme sürelerine ve arama motorları için optimize edilmiş, premium kod kalitesine sahiptir.'
|
||||
],
|
||||
[
|
||||
'icon' => 'uil-shield-check',
|
||||
'icon' => 'gpp_good',
|
||||
'bg' => '#e0e9fa',
|
||||
'title' => 'OWASP Standardında Güvenlik',
|
||||
'description' => 'XSS, SQL Injection ve CSRF gibi web güvenlik tehditlerine karşı geliştirme aşamasından itibaren sıkı denetimler ve koruma katmanları uygularız.'
|
||||
@@ -634,8 +580,8 @@
|
||||
<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">
|
||||
<div class="card-body !p-8 md:!p-10 flex-[1_1_auto] flex flex-col">
|
||||
<div class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mb-4 xl:!text-[1.3rem] w-12 h-12 !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]">
|
||||
<i class="uil {{ $cap['icon'] }}"></i>
|
||||
<div class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mb-4 w-12 h-12 !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]">
|
||||
<span class="material-symbols-outlined !text-[1.8rem]" style="text-transform: none !important;">{{ $cap['icon'] }}</span>
|
||||
</div>
|
||||
<h4 class="!text-[1.15rem] !font-bold !mb-2">{!! t($cap['title']) !!}</h4>
|
||||
<p class="!text-[0.85rem] !mb-0 text-muted flex-1">{!! t($cap['description']) !!}</p>
|
||||
@@ -777,7 +723,7 @@
|
||||
<div class="flex flex-row !mb-8">
|
||||
<div>
|
||||
<div class="svg-bg svg-bg-lg !rounded-[0.8rem] !mr-5 flex items-center justify-center" style="background-color: {{ $item['bg'] }};">
|
||||
<i class="uil {{ $item['icon'] }} !text-[2rem] text-[#343f52]" aria-hidden="true"></i>
|
||||
<span class="material-symbols-outlined !text-[2.2rem] text-[#343f52]" style="text-transform: none !important;" aria-hidden="true">{{ $item['icon'] }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -864,24 +810,4 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const preloader = document.getElementById('page-preloader');
|
||||
if (preloader) {
|
||||
window.addEventListener('load', function() {
|
||||
setTimeout(function() {
|
||||
preloader.classList.add('fade-out');
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// Fallback in case load event already fired or is delayed
|
||||
setTimeout(function() {
|
||||
preloader.classList.add('fade-out');
|
||||
}, 2500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user