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

refactor: update service cards to full-width mobile layout and apply light theme glass styling

Browse Source
This commit is contained in:
Ümit Tunç
2026-06-23 11:24:06 +03:00
parent 61480399b3
commit 6614d13be2
1 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/templates/home/services-cards.blade.php
+13 -16
View File
@@ -1,7 +1,7 @@
<section class="wrapper !bg-[#ffffff]">
<div class="container">
<div class="flex flex-wrap glass-card-row !mb-[4.5rem] !mt-[-9rem] xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<div class="w-full md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<a href="{{ route('page.show', ['slug' => 'yapay-zeka']) }}" class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#e668b3] text-fuchsia !mb-2 md:!mb-3"><path class="fill-primary" d="M152 0H29.33A29.32 29.32 0 000 29.33v165.33A29.32 29.32 0 0029.33 224h78.72l2.35-13.12a29.71 29.71 0 018.11-15.68l62.83-62.72V29.33A29.33 29.33 0 00152 0zM42.67 42.67h42.67a10.67 10.67 0 110 21.33H42.66a10.67 10.67 0 010-21.33zM96 149.33H42.67a10.67 10.67 0 110-21.33H96a10.67 10.67 0 110 21.33zm42.67-42.66h-96a10.67 10.67 0 010-21.34h96a10.67 10.67 0 110 21.34z"></path><path class="fill-secondary" d="M133.63 256a8 8 0 01-7.89-9.38l5.67-32.06a8 8 0 012.22-4.27l79.2-79.2c9.73-9.75 19.28-7.12 24.51-1.89l13.2 13.2a18.69 18.69 0 010 26.4l-79.2 79.2a7.83 7.83 0 01-4.27 2.22l-32 5.67a10.71 10.71 0 01-1.44.11zm32.05-13.65z"></path></svg>
@@ -13,7 +13,7 @@
<!--/.card -->
</div>
<!--/column -->
<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<div class="w-full md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<a href="{{ route('page.show', ['slug' => 'web-uygulamalari']) }}" class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#a07cc5] text-violet !mb-2 md:!mb-3"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
@@ -25,7 +25,7 @@
<!--/.card -->
</div>
<!--/column -->
<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<div class="w-full md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<a href="{{ route('music-productions.index') }}" class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#f78b77] text-orange !mb-2 md:!mb-3"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
@@ -37,7 +37,7 @@
<!--/.card -->
</div>
<!--/column -->
<div class="w-6/12 md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<div class="w-full md:w-6/12 lg:w-6/12 xl:w-3/12 flex-[0_0_auto] max-w-full glass-card-col">
<a href="{{ route('page.show', ['slug' => 'uygulama-gelistirme']) }}" class="card glass-card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] h-full flex flex-col">
<div class="card-body glass-card-body flex-[1_1_auto] flex flex-col">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-inject icon-svg !w-[1.8rem] !h-[1.8rem] md:!w-[2.2rem] md:!h-[2.2rem] solid-mono text-[#45c4a0] text-green !mb-2 md:!mb-3"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path></svg>
@@ -93,11 +93,10 @@
}
.glass-card {
position: relative !important;
border-radius: 16px !important;
border: none !important;
background: rgb(0 0 0 / 59%) !important;
background: rgba(255, 255, 255, 0.6) !important;
overflow: visible !important;
isolation: isolate;
transition: all 0.3s ease-in-out;
@@ -112,33 +111,31 @@
}
.glass-card svg {
filter: brightness(1.4);
transition: all 0.3s ease-in-out;
}
.glass-card h4 {
color: white;
color: #343f52;
transition: all 0.3s ease-in-out;
text-shadow: 0px 1px 10px #00000080;
}
.glass-card:hover h4 {
color: black;
color: white;
transition: all 0.3s ease-in-out;
text-shadow: none;
text-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}
.glass-card:hover svg {
filter: brightness(0.8);
filter: brightness(0) invert(1);
}
.glass-card p {
color: rgba(255, 255, 255, 0.85);
color: #60697b;
transition: all 0.3s ease-in-out;
}
.glass-card:hover p {
color: #60697b;
color: rgba(255, 255, 255, 0.9);
}
.glass-card::before {
@@ -178,8 +175,8 @@
.glass-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.6) !important;
box-shadow: 0 1rem 3rem rgba(30, 34, 40, 0.12) !important;
background: rgba(247, 108, 38, 0.85) !important;
box-shadow: 0 1rem 3rem rgba(247, 108, 38, 0.3) !important;
}
</style>