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

refactor: simplify header structure and enhance app development hero section styles for improved responsiveness and visual consistency

Browse Source
This commit is contained in:
Ümit Tunç
2026-05-22 08:09:31 +03:00
parent 08c1e28427
commit 752876fed9
2 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/partials/header-app-development.blade.php
+1 -1
View File
@@ -1,5 +1,5 @@
{{-- Uygulama Geliştirme sayfası (demo29): center-nav transparent position-absolute navbar-light caret-none --}}
<header class="relative wrapper">
<header>
<nav class="navbar navbar-expand-lg center-nav transparent position-absolute navbar-light caret-none">
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
<div class="navbar-brand w-full">
resources/views/templates/services/app-development.blade.php
+40 -7
View File
@@ -96,6 +96,20 @@
flex-shrink: 0;
}
/* Header — masaüstünde şeffaf, hero arka planı üstten başlasın */
body:has(.app-dev-hero) > header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1030;
background: transparent !important;
}
body:has(.app-dev-hero) > header .navbar.transparent:not(.fixed):not(.navbar-clone) {
background: transparent !important;
box-shadow: none !important;
}
/* Hero — metin üstte, görsel altta */
.app-dev-hero .app-dev-hero-text {
position: relative;
@@ -105,23 +119,23 @@
position: relative;
z-index: 2;
width: 100%;
max-width: 42rem;
max-width: 32rem;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 768px) {
.app-dev-hero .app-dev-hero-image {
max-width: 48rem;
max-width: 36rem;
}
}
@media (min-width: 1200px) {
.app-dev-hero .app-dev-hero-image {
max-width: 56rem;
max-width: 42rem;
}
}
@media (min-width: 1400px) {
.app-dev-hero .app-dev-hero-image {
max-width: 62rem;
max-width: 46rem;
}
}
.app-dev-hero .app-dev-hero-image img {
@@ -129,6 +143,25 @@
max-width: 100%;
height: auto;
}
.app-dev-hero > .container {
padding-bottom: 0 !important;
}
.app-dev-hero .divider {
margin-bottom: -2.5rem;
}
@media (min-width: 992px) {
.app-dev-hero .divider {
margin-bottom: -3.5rem;
}
}
.app-dev-features-start {
padding-top: 3rem !important;
}
@media (min-width: 992px) {
.app-dev-features-start {
padding-top: 4rem !important;
}
}
</style>
@endpush
@@ -290,7 +323,7 @@
{{-- Hero --}}
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [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,.6)] app-dev-hero" data-image-src="{{ asset('assets/img/photos/bg23.webp') }}" style="background-image: url('{{ asset('assets/img/photos/bg23.webp') }}');">
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-6 xl:pb-8">
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-0">
<div class="flex flex-col mx-0 !mt-[-50px] items-center text-center">
<div class="w-full xl:w-10/12 lg:w-10/12 xxl:w-8/12 flex-[0_0_auto] max-w-full !relative !mt-[50px] app-dev-hero-text" data-cues="slideInDown" data-group="page-title" data-delay="700">
<img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 !absolute hidden xl:block lg:block" data-cue="fadeIn" data-delay="3000" style="top: -12%; left: 4%" alt="" loading="lazy">
@@ -302,7 +335,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>
<div class="app-dev-hero-image !mt-8 xl:!mt-10 lg:!mt-10 md:!mt-10 !mb-[-4rem] xl:!mb-[-6rem] lg:!mb-[-5rem]" data-cues="slideInDown" data-delay="600">
<div class="app-dev-hero-image !mt-6 xl:!mt-8 lg:!mt-8 md:!mt-8 !mb-[-4rem] xl:!mb-[-5rem] lg:!mb-[-4.5rem]" data-cues="slideInDown" data-delay="600">
<figure class="m-0 p-0">
<x-front.page-hero-image
:hero="$pageHero"
@@ -325,7 +358,7 @@
{{-- 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="container app-dev-features-start 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">