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

feat: add new platform icons for Android, iOS, Windows, macOS, Huawei, Meta Quest, and Web, along with updated styling for improved responsiveness and accessibility in the app development section

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-22 07:52:12 +03:00
parent 61cc5c8dda
commit 7e3700a2c2
8 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/services/app-development.blade.php
+43 -29
View File
@@ -44,7 +44,26 @@
line-height: 1;
}
/* Platform logoları — kutu/arkaplan yok */
/* Platform logoları — Wikimedia Commons kaynaklı, yetkinlikler üst şerit */
.app-dev-platform-strip img {
display: block;
width: auto;
height: 2.5rem;
max-width: 100%;
margin-left: auto;
margin-right: auto;
object-fit: contain;
}
@media (min-width: 768px) {
.app-dev-platform-strip img {
height: 3rem;
}
}
@media (min-width: 1200px) {
.app-dev-platform-strip img {
height: 3.25rem;
}
}
.app-dev-platforms {
display: flex;
flex-wrap: nowrap;
@@ -60,18 +79,6 @@
.app-dev-platforms::-webkit-scrollbar {
display: none;
}
@media (min-width: 576px) {
.app-dev-platforms {
gap: 1.25rem;
}
}
@media (min-width: 992px) {
.app-dev-platforms {
justify-content: flex-start;
flex-wrap: wrap;
overflow-x: visible;
}
}
.app-dev-platform-item {
display: inline-flex;
align-items: center;
@@ -88,12 +95,6 @@
object-fit: contain;
flex-shrink: 0;
}
@media (min-width: 576px) {
.app-dev-platform-icon {
width: 2.35rem;
height: 2.35rem;
}
}
</style>
@endpush
@@ -106,13 +107,13 @@
];
$platforms = [
['name' => 'Android', 'logo' => 'android.svg'],
['name' => 'iOS', 'logo' => 'ios.svg'],
['name' => 'Windows', 'logo' => 'windows.svg'],
['name' => 'macOS', 'logo' => 'macos.svg'],
['name' => 'Huawei AppGallery', 'logo' => 'huawei.svg'],
['name' => 'Meta Quest', 'logo' => 'meta-quest.svg'],
['name' => 'Web', 'logo' => 'web.svg'],
['name' => 'Android', 'logo' => 'android.png'],
['name' => 'iOS', 'logo' => 'ios.png'],
['name' => 'Windows', 'logo' => 'windows.png'],
['name' => 'macOS', 'logo' => 'macos.png'],
['name' => 'Huawei AppGallery', 'logo' => 'huawei.png'],
['name' => 'Meta Quest', 'logo' => 'meta-quest.png'],
['name' => 'Web', 'logo' => 'web.png'],
];
$features = [
@@ -266,9 +267,6 @@
<p class="lead !text-[1.2rem] !leading-[1.5] !font-normal !mb-7">
{!! t('Trunçgil Teknoloji olarak Android, iOS, Windows, macOS, Huawei AppGallery, Meta Quest ve web için uygulamalarınızı fikirden yayına kadar hayata geçiriyoruz.') !!}
</p>
<div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
<x-front.platform-badges :platforms="$platforms" />
</div>
</div>
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem] !mt-[50px]" data-cues="slideInDown" data-delay="600">
<figure class="m-0 p-0">
@@ -294,6 +292,22 @@
{{-- Features --}}
<section class="wrapper !bg-[#ffffff] app-dev-section">
<div class="container pt-32 xl:pt-40 lg:pt-40 md:pt-40 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
<div class="flex flex-wrap mx-[-15px] row-cols-4 row-cols-md-4 row-cols-lg-7 row-cols-xl-7 !mt-[-50px] !mb-10 xl:!mb-14 items-center justify-center app-dev-platform-strip">
@foreach($platforms as $platform)
<div class="w-1/4 xl:w-[14.2857142857%] lg:w-[14.2857142857%] md:w-1/4 flex-[0_0_auto] !px-[15px] !mt-[50px] max-w-full">
<img
class="md:!px-[0.75rem] lg:!px-0 xl:!px-[0.5rem] xxl:!px-[1.25rem]"
src="{{ asset('assets/img/platforms/' . $platform['logo']) }}"
alt="{{ t($platform['name']) }}"
width="128"
height="128"
loading="lazy"
decoding="async"
>
</div>
@endforeach
</div>
<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">
<img src="{{ asset('assets/img/svg/doodle3.svg') }}" class="!h-[3rem] absolute hidden xl:block lg:block" style="top: -45%; left: 23%" alt="" loading="lazy">