truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add responsive styling for hero AI illustration and clean up hero section layout and progress bar component

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-24 00:11:33 +03:00
parent 5bf876d135
commit 79ca5d49b6
1 changed files with 30 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/services/yapay-zeka.blade.php
+30 -9
View File
@@ -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>