feat: update web development template icons to Material Symbols and enhance styling for improved visual consistency

resources/views/templates/services/web-development.blade.php

@@ -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%]">
+                        <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%]">
-                            <i class="uil {{ $cap['icon'] }}"></i>
+                            <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