From 79ca5d49b620ca5d43ffe221778f3632a62ee289 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Sun, 24 May 2026 00:11:33 +0300
Subject: [PATCH] feat: add responsive styling for hero AI illustration and
 clean up hero section layout and progress bar component

---
 .../templates/services/yapay-zeka.blade.php   | 39 ++++++++++++++-----
 1 file changed, 30 insertions(+), 9 deletions(-)

diff --git a/resources/views/templates/services/yapay-zeka.blade.php b/resources/views/templates/services/yapay-zeka.blade.php
index c7147e5..1663e5e 100644
--- a/resources/views/templates/services/yapay-zeka.blade.php
+++ b/resources/views/templates/services/yapay-zeka.blade.php
@@ -186,6 +186,33 @@
     .matrix-table tbody tr:hover {
         background-color: #fcfcfc;
     }
+
+    /* Hero AI Illustration Custom Styling */
+    .hero-ai-illustration {
+        height: auto !important;
+        transition: all 0.3s ease-in-out;
+    }
+    @media (min-width: 1400px) {
+        .hero-ai-illustration {
+            min-width: 1000px !important;
+            max-width: 1000px !important;
+            margin-left: -200px !important;
+        }
+    }
+    @media (min-width: 1200px) and (max-width: 1399.98px) {
+        .hero-ai-illustration {
+            min-width: 900px !important;
+            max-width: 900px !important;
+            margin-left: -150px !important;
+        }
+    }
+    @media (min-width: 992px) and (max-width: 1199.98px) {
+        .hero-ai-illustration {
+            min-width: 800px !important;
+            max-width: 800px !important;
+            margin-left: -100px !important;
+        }
+    }
 </style>
 @endpush
 
@@ -197,7 +224,7 @@
 
 {{-- Hero Section --}}
 <section class="wrapper !bg-[#ffffff]">
-    <div class="container-card">
+    <div class="">
         <div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 !mt-2 !mb-5 [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,.5)] xxl:!rounded-[.8rem] rounded-0" data-image-src="{{ asset('assets/img/photos/bg22.png') }}" style="background-image: url('{{ asset('assets/img/photos/bg22.png') }}');">
             <div class="card-body py-[4.5rem] px-0">
                 <div class="container">
@@ -209,7 +236,7 @@
                         </div>
                         <!--/column -->
                         <div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[50px] max-w-full">
-                            <img class="max-w-full h-auto !mb-[-8rem]" src="{{ asset('assets/img/illustrations/yapay-zeka-truncgil.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-[-8rem] hero-ai-illustration" src="{{ asset('assets/img/illustrations/yapay-zeka-truncgil.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;">
                         </div>
                         <!--/column -->
                     </div>
@@ -392,13 +419,7 @@
         
         <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute !text-center xl:block lg:block md:block max-sm:!hidden" style="bottom: 10%; left: -10%;">
           <div class="card-body p-6">
-            <div class="progressbar semi-circle fuchsia !relative !mb-3 !m-[0_auto_1rem] !w-[8.5rem] !h-[4.25rem]" data-value="99" style="position: relative;">
-              <svg viewBox="0 0 100 50" style="display: block; width: 100%;">
-                <path d="M 50,50 m -47,0 a 47,47 0 1 1 94,0" stroke="#eee" stroke-width="6" fill-opacity="0"></path>
-                <path d="M 50,50 m -47,0 a 47,47 0 1 1 94,0" stroke="#e31e24" stroke-width="6" fill-opacity="0" style="stroke-dasharray: 147.708, 147.708; stroke-dashoffset: 1.47708;"></path>
-              </svg>
-              <div class="progressbar-text" style="position: absolute; left: 50%; top: auto; padding: 0px; margin: 0px; transform: translate(-50%, 0px); color: #e31e24; bottom: 0px; font-weight: bold;">%99</div>
-            </div>
+            <div class="progressbar semi-circle fuchsia !relative !mb-3 !m-[0_auto_1rem] !w-[8.5rem] !h-[4.25rem]" data-value="99"></div>
             <h4 class="!mb-0">{!! t('Maliyet Azaltma') !!}</h4>
             <p class="!text-[0.75rem] text-muted !mb-0">{!! t('LoRA ve Sıkıştırma ile') !!}</p>
           </div>