subhajit.pal/sls
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

subhajit_changes_06_07 #7

Merged
subhajit.pal merged 3 commits from subhajit_changes_06_07 into main 2026-07-14 10:58:27 +00:00
Conversation 0 Commits 3 Files Changed 9 +374 -200
8 changed files with 374 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a128b47308 - Show all commits

2
app/Http/Controllers/AdminController.php
View File

@ -51,7 +51,7 @@ public function storeApp(Request $request)
'name' => 'required|string|max:255', 'name' => 'required|string|max:255',
'url' => 'required|url|max:255', 'url' => 'required|url|max:255',
'icon_svg' => 'nullable|string', 'icon_svg' => 'nullable|string',
'logo' => 'nullable|image|mimes:jpeg,png,jpg,gif,svg,webp|max:2048', 'logo' => 'nullable|file|mimes:jpg,jpeg,png,webp,svg|max:2048',
'color' => 'nullable|string|max:20', 'color' => 'nullable|string|max:20',
'desc' => 'nullable|string', 'desc' => 'nullable|string',
'tag' => 'nullable|string|max:255', 'tag' => 'nullable|string|max:255',

BIN
public/Screenshot_3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 101 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
public/Screenshot_4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 KiB

After

Width:  |  Height:  |  Size: 45 KiB

BIN
public/image (6).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

BIN
public/sg-cart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
public/uploads/logos/1784015190_6a55e9565ba2d.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

15
resources/views/admin/dashboard.blade.php
View File

@ -554,6 +554,19 @@
</section> </section>
<!-- Alert messages in dashboard --> <!-- Alert messages in dashboard -->
@if($errors->any())
<div class="alert alert-danger" style="margin-bottom: 24px;">
<span class="alert-icon">⚠️</span>
<div>
<ul style="margin: 0; padding-left: 16px; font-size: 0.85rem; line-height: 1.5; list-style-type: disc;">
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
</div>
@endif
@if(session('error')) @if(session('error'))
<div class="alert alert-danger" style="margin-bottom: 24px;"> <div class="alert alert-danger" style="margin-bottom: 24px;">
<span class="alert-icon">⚠️</span> <span class="alert-icon">⚠️</span>
@ -604,7 +617,7 @@
</div> </div>
<div style="margin-bottom: 12px;"> <div style="margin-bottom: 12px;">
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Upload Service Logo (Optional - Image will override preset SVG)</label> <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Upload Service Logo (Optional - Image will override preset SVG)</label>
<input type="file" name="logo" accept="image/*" class="form-input" style="width:100%; padding:8px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;"> <input type="file" name="logo" accept=".jpg,.jpeg,.png,.webp,.svg" class="form-input" style="width:100%; padding:8px; background:rgba(255,255,255,0.03); border:1px solid var(--card-border); border-radius:8px; color:white;">
</div> </div>
<div style="margin-bottom: 16px;"> <div style="margin-bottom: 16px;">
<label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service Description</label> <label style="display:block; font-size:0.75rem; color:var(--text-muted); margin-bottom:6px; font-weight:500;">Service Description</label>

505
resources/views/dashboard.blade.php
View File

@ -64,70 +64,281 @@
z-index: -1; z-index: -1;
} }
/* Navigation Bar */ /* Top Profile-Integrated Navigation Bar */
.navbar { .navbar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 5%; padding: 12px 5%;
background: rgba(17, 24, 39, 0.4); background: rgba(17, 24, 39, 0.45);
border-bottom: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border);
backdrop-filter: blur(12px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(16px);
z-index: 100; z-index: 100;
position: sticky;
top: 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15);
} }
.nav-logo { .nav-profile {
font-family: 'Outfit', sans-serif;
font-size: 1.5rem;
font-weight: 800;
background: linear-gradient(135deg, #a5b4fc 0%, #38bdf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: flex;
align-items: center;
gap: 8px;
}
.nav-logo svg {
width: 24px;
height: 24px;
fill: #38bdf8;
}
.nav-user {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
} }
.logout-link { .nav-profile-avatar img {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid var(--accent-primary);
object-fit: cover;
}
.nav-profile-avatar-fallback {
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 700;
color: white;
box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}
.nav-profile-details {
display: flex;
flex-direction: column;
justify-content: center;
}
.nav-profile-welcome {
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
font-weight: 700;
color: white;
line-height: 1.2;
}
.nav-profile-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
color: var(--text-muted); color: var(--text-muted);
text-decoration: none; margin-top: 2px;
font-size: 0.85rem; }
font-weight: 500;
.meta-dot {
color: rgba(255, 255, 255, 0.15);
}
.nav-badge {
display: inline-flex;
align-items: center;
padding: 1px 6px;
border-radius: 4px;
font-weight: 700;
font-size: 0.65rem;
background-color: rgba(79, 70, 229, 0.15);
color: #a5b4fc;
border: 1px solid rgba(79, 70, 229, 0.3);
text-transform: uppercase;
letter-spacing: 0.3px;
}
.nav-badge.sso {
background-color: rgba(16, 185, 129, 0.15);
color: #34d399;
border-color: rgba(16, 185, 129, 0.3);
}
/* Top Header Actions */
.nav-actions {
display: flex;
align-items: center;
gap: 12px;
}
.nav-action-btn {
font-family: 'Outfit', sans-serif;
font-size: 0.8rem;
font-weight: 700;
padding: 8px 16px; padding: 8px 16px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--card-border); text-decoration: none;
transition: all 0.25s ease; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
letter-spacing: 0.3px;
text-transform: uppercase;
} }
.logout-link:hover { .nav-action-btn.admin {
color: #ef4444; color: #38bdf8;
border-color: rgba(239, 68, 68, 0.2); background: rgba(56, 189, 248, 0.08);
background-color: rgba(239, 68, 68, 0.05); border: 1.5px solid rgba(56, 189, 248, 0.25);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.1);
} }
/* Dashboard Wrapper */ .nav-action-btn.admin:hover {
color: #ffffff;
background: #0284c7;
border-color: #0284c7;
box-shadow: 0 0 15px rgba(56, 189, 248, 0.45);
transform: translateY(-1px);
}
.nav-action-btn.logout {
color: #ffffff;
background: #ef4444;
border: 1.5px solid #ef4444;
box-shadow: 0 0 12px rgba(239, 68, 68, 0.2);
}
.nav-action-btn.logout:hover {
color: #ffffff;
background: #dc2626;
border-color: #dc2626;
box-shadow: 0 0 18px rgba(239, 68, 68, 0.45);
transform: translateY(-1px);
}
/* Dashboard Wrapper - Centered & Spaced */
.dashboard-container { .dashboard-container {
flex: 1; flex: 1;
padding: 40px 5%; padding: 32px 5%;
max-width: 1200px; max-width: 960px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
z-index: 10; z-index: 10;
} }
/* Services Section - Centered & Grid Layout */
.services-container {
width: 100%;
max-width: 960px;
margin: 0 auto;
margin-top: 10px; /* Reduced space between profile card and services */
}
.section-title {
font-family: 'Outfit', sans-serif;
font-size: 1.1rem; /* Slightly smaller size to save space */
font-weight: 700;
margin-bottom: 12px; /* Reduced margin */
display: flex;
align-items: center;
gap: 8px;
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--card-border), transparent);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Clean compact grid columns */
gap: 20px; /* Uniform spacing */
}
/* Service Cards - Minimal Box Centered Design */
.service-card-glass {
background: transparent;
border: none;
padding: 8px;
cursor: pointer;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
text-decoration: none;
}
/* Prioritized Service Logo/Icon Wrapper - 90px x 90px with defined border */
.service-logo-wrapper {
width: 90px;
height: 90px;
border-radius: 22px; /* Rounded edge shape */
display: flex;
align-items: center;
justify-content: center;
background: rgba(17, 24, 39, 0.4); /* Dark semitransparent background */
border: 1.5px solid rgba(255, 255, 255, 0.08); /* Distinct visible border */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 12px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
color: var(--service-color);
opacity: 0.95;
overflow: hidden;
position: relative;
}
.service-logo-wrapper svg {
width: 38px; /* Balanced icon size inside 90px box */
height: 38px;
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card-glass:hover .service-logo-wrapper {
transform: translateY(-4px); /* Moves only the box slightly up */
background: rgba(255, 255, 255, 0.05);
border-color: var(--service-color);
opacity: 1;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.3),
0 0 20px color-mix(in srgb, var(--service-color) 45%, transparent);
}
.service-card-glass:hover .service-logo-wrapper svg {
transform: scale(1.05);
}
/* Uploaded Service Logo - Fitted fully inside the rounded 90px box */
.service-logo-img {
width: 100%;
height: 100%;
object-fit: cover; /* Cover/fully fill the box like a profile image */
padding: 0; /* Zero padding to fill the box completely */
border-radius: inherit; /* inherit round corner shape from wrapper */
filter: grayscale(10%) brightness(0.95);
opacity: 0.95;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.service-card-glass:hover .service-logo-img {
filter: grayscale(0%) brightness(1);
opacity: 1;
transform: scale(1.05);
}
/* Centered Uppercase Labels */
.service-title {
font-family: 'Outfit', sans-serif;
font-size: 0.72rem; /* Clean text scale */
font-weight: 700;
color: rgba(255, 255, 255, 0.65); /* Faint gray */
margin-top: 4px;
margin-bottom: 0;
letter-spacing: 0.5px;
transition: color 0.3s ease;
text-transform: uppercase;
text-align: center;
}
.service-card-glass:hover .service-title {
color: #ffffff;
}
.service-subtitle {
display: none;
}
/* Profile Banner Widget */ /* Profile Banner Widget */
.profile-card { .profile-card {
background-color: var(--card-bg); background-color: var(--card-bg);
@ -247,92 +458,7 @@
box-shadow: 0 0 10px var(--success-color); box-shadow: 0 0 10px var(--success-color);
} }
/* Services Grid */
.section-title {
font-family: 'Outfit', sans-serif;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--card-border), transparent);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
}
/* Service Cards - Small */
.service-card-small {
background-color: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
padding: 16px;
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
gap: 14px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(8px);
}
.service-card-small:hover {
transform: translateY(-3px);
border-color: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.service-icon-wrapper-small {
width: 44px;
height: 44px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transition: transform 0.3s ease;
}
.service-card-small:hover .service-icon-wrapper-small {
transform: scale(1.08);
}
.service-icon-wrapper-small svg {
width: 24px;
height: 24px;
}
.service-info-small {
display: flex;
flex-direction: column;
gap: 2px;
}
.service-name-small {
font-family: 'Outfit', sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--text-main);
margin: 0;
}
.service-tag-small {
font-size: 0.7rem;
color: var(--text-muted);
align-self: flex-start;
}
/* Fullscreen SSO Modal Overlay */ /* Fullscreen SSO Modal Overlay */
.sso-modal { .sso-modal {
@ -434,43 +560,58 @@
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.profile-card { .nav-profile-meta {
flex-direction: column; display: none; /* Hide email & badges on mobile to keep header clean */
align-items: flex-start;
padding: 24px;
} }
.nav-user { .navbar {
margin-top: 10px; padding: 10px 16px;
width: 100%; }
display: flex; .nav-profile-welcome {
justify-content: flex-start; font-size: 0.85rem;
}
.nav-profile-avatar img, .nav-profile-avatar-fallback {
width: 32px;
height: 32px;
font-size: 0.8rem;
}
.nav-actions {
gap: 8px;
}
.nav-action-btn {
padding: 6px 12px;
font-size: 0.7rem;
}
.dashboard-container {
padding: 24px 16px;
}
.services-grid {
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
gap: 10px;
} }
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Main Container --> <!-- Top Navigation Bar -->
<main class="dashboard-container"> <header class="navbar">
<!-- Left: User Profile Section -->
<!-- User Welcome / Profile Card --> <div class="nav-profile">
<section class="profile-card"> <div class="nav-profile-avatar">
<div class="profile-info">
<div class="profile-avatar-container">
@if($user->avatar) @if($user->avatar)
<img src="{{ $user->avatar }}" alt="{{ $user->name }}" class="profile-avatar"> <img src="{{ $user->avatar }}" alt="{{ $user->name }}">
@else @else
<div class="profile-avatar-fallback"> <div class="nav-profile-avatar-fallback">
{{ strtoupper(substr($user->name, 0, 1)) }} {{ strtoupper(substr($user->name, 0, 1)) }}
</div> </div>
@endif @endif
</div> </div>
<div class="profile-details"> <div class="nav-profile-details">
<h1>Welcome, {{ $user->name }}</h1> <div class="nav-profile-welcome">Welcome, {{ $user->name }}</div>
<div class="profile-email"> <div class="nav-profile-meta">
<span>{{ $user->email }}</span> <span class="nav-profile-email">{{ $user->email }}</span>
&bull; <span class="meta-dot">&bull;</span>
<span class="badge badge-user"> <span class="nav-badge">
@if($user->isAdmin()) @if($user->isAdmin())
Admin Admin
@elseif($user->roles->isNotEmpty()) @elseif($user->roles->isNotEmpty())
@ -480,59 +621,79 @@
@endif @endif
</span> </span>
@if($user->microsoft_id) @if($user->microsoft_id)
<span class="badge badge-sso">Microsoft Linked</span> <span class="meta-dot">&bull;</span>
<span class="nav-badge sso">Microsoft Linked</span>
@endif @endif
</div> </div>
</div> </div>
</div> </div>
<div class="nav-user"> <!-- Right: Actions -->
<div class="nav-actions">
@if($user->role === 'admin') @if($user->role === 'admin')
<a href="{{ route('admin.dashboard') }}" class="logout-link" style="color: var(--info-color); border-color: rgba(6, 182, 212, 0.2); background-color: rgba(6, 182, 212, 0.05); margin-right: 10px;"> <a href="{{ route('admin.dashboard') }}" class="nav-action-btn admin" title="Admin Panel">
Admin Panel Admin
</a> </a>
@endif @endif
<form action="{{ route('logout') }}" method="POST" id="logout-form" style="display: none;"> <form action="{{ route('logout') }}" method="POST" id="logout-form" style="display: none;">
@csrf @csrf
</form> </form>
<a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="logout-link"> <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="nav-action-btn logout">
Sign Out Sign Out
</a> </a>
</div> </div>
</section> </header>
<!-- Services Section --> <!-- Main Container -->
<section> <main class="dashboard-container">
<!-- Services Section with Grid Design -->
<section class="services-container">
<h2 class="section-title">Authorized Corporate Services</h2> <h2 class="section-title">Authorized Corporate Services</h2>
<div class="services-grid"> <div class="services-grid">
@foreach($services as $service) @foreach($services as $service)
<div class="service-card-small" onclick="launchSSO('{{ $service['name'] }}', '{{ route('sso.launch', $service['id']) }}')" style="border-left: 4px solid {{ $service['color'] }}"> <div class="service-card-glass" onclick="launchSSO('{{ $service['name'] }}', '{{ route('sso.launch', $service['id']) }}')" style="--service-color: {{ $service['color'] ?? '#4f46e5' }}">
<div class="service-icon-wrapper-small" style="background-color: rgba({{ hexdec(substr($service['color'] ?? '#4f46e5', 1, 2)) }}, {{ hexdec(substr($service['color'] ?? '#4f46e5', 3, 2)) }}, {{ hexdec(substr($service['color'] ?? '#4f46e5', 5, 2)) }}, 0.08)"> <!-- Logo Highlight Wrapper -->
<div class="service-logo-wrapper">
@if($service['logo']) @if($service['logo'])
<img src="{{ asset($service['logo']) }}" alt="{{ $service['name'] }}" style="width: 32px; height: 32px; object-fit: contain; border-radius: 6px;"> <img src="{{ asset($service['logo']) }}" alt="{{ $service['name'] }}" class="service-logo-img">
@elseif($service['icon_svg'] === 'outlook') @elseif($service['icon_svg'] === 'outlook' || (empty($service['icon_svg']) && (str_contains(strtolower($service['name']), 'outlook') || str_contains(strtolower($service['name']), 'mail'))))
<svg viewBox="0 0 24 24" fill="{{ $service['color'] }}"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,19H5V8H19V19M19,6H5V5H19V6M17,12H12V17H17V12Z" /> <rect x="2" y="4" width="20" height="16" rx="3" />
<path d="M22 7l-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
<path d="M12 13v5" />
</svg> </svg>
@elseif($service['icon_svg'] === 'teams') @elseif($service['icon_svg'] === 'teams' || (empty($service['icon_svg']) && (str_contains(strtolower($service['name']), 'teams') || str_contains(strtolower($service['name']), 'microsoft'))))
<svg viewBox="0 0 24 24" fill="{{ $service['color'] }}"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M12.5,9A2.5,2.5 0 0,1 15,11.5A2.5,2.5 0 0,1 12.5,14A2.5,2.5 0 0,1 10,11.5A2.5,2.5 0 0,1 12.5,9M12.5,15.5C14.71,15.5 18.5,16.5 18.5,18.5V20H6.5V18.5C6.5,16.5 10.29,15.5 12.5,15.5M6,8A2,2 0 0,1 8,10A2,2 0 0,1 6,12A2,2 0 0,1 4,10A2,2 0 0,1 6,8M6,13.5C7.43,13.5 10,14.07 10,15.25V17H2V15.25C2,14.07 4.57,13.5 6,13.5M12.5,3A2,2 0 0,1 14.5,5A2,2 0 0,1 12.5,7A2,2 0 0,1 10.5,5A2,2 0 0,1 12.5,3M12.5,20V22H19V20H12.5Z" /> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg> </svg>
@elseif($service['icon_svg'] === 'keka') @elseif($service['icon_svg'] === 'keka' || (empty($service['icon_svg']) && str_contains(strtolower($service['name']), 'keka')))
<svg viewBox="0 0 24 24" fill="{{ $service['color'] }}"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H7c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.04-.42 1.99-1.07 2.75z"/> <path d="M6 3v18" />
<path d="M17 5L8 12l9 7" />
<circle cx="17" cy="5" r="2" fill="currentColor" />
<circle cx="17" cy="19" r="2" fill="currentColor" />
<circle cx="8" cy="12" r="2" fill="currentColor" />
</svg> </svg>
@elseif(str_starts_with($service['icon_svg'] ?? '', '<svg')) @elseif($service['icon_svg'] && str_starts_with($service['icon_svg'], '<svg'))
{!! $service['icon_svg'] !!} {!! $service['icon_svg'] !!}
@elseif($service['icon_svg'])
<div class="service-logo-fallback" style="background: linear-gradient(135deg, var(--service-color) 20%, rgba(255,255,255,0.05) 100%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800; color: white;">
{{ strtoupper(substr($service['icon_svg'], 0, 2)) }}
</div>
@else @else
<img src="{{ asset('images/default_logo.png') }}" alt="Default Logo" style="width: 32px; height: 32px; object-fit: contain; border-radius: 6px;"> <div class="service-logo-fallback" style="background: linear-gradient(135deg, var(--service-color) 20%, rgba(255,255,255,0.05) 100%); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 800; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.2);">
{{ strtoupper(substr($service['name'], 0, 1)) }}
</div>
@endif @endif
</div> </div>
<div class="service-info-small">
<h3 class="service-name-small">{{ $service['name'] }}</h3> <!-- Service Name below the logo -->
<span class="service-tag-small">{{ $service['tag'] }}</span> <h3 class="service-title">{{ strtoupper($service['name']) }}</h3>
</div>
</div> </div>
@endforeach @endforeach
</div> </div>