yanto/kulakpos_web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perubahan UI web + fix menu navigasi di page coba gratis
Some checks failed
Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 8s
Details

Browse Source
This commit is contained in:
triagungbiantoro
2026-03-29 13:02:50 +07:00
parent b1edd2e0f5
commit 0e4f3434a3
31 changed files with 3421 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/views/layouts/web/master.blade.php
View File

@@ -18,11 +18,7 @@
</head>
<body>
@if (request()->is('/'))
@include('layouts.web.partials.header')
@else
@include('layouts.web.partials.common_header')
@endif
@include('layouts.web.partials.header')
@yield('main_content')

2
resources/views/layouts/web/partials/css.blade.php
View File

@@ -1,3 +1,5 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="{{ asset(get_option('general')['favicon'] ?? 'assets/images/logo/favicon.png')}}">
<link rel="stylesheet" href="{{ asset('assets/web/css/bootstrap.min.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/web/css/swiper-bundle.min.css') }}" />

328
resources/views/layouts/web/partials/header.blade.php
View File

@@ -1,187 +1,163 @@
<header class="header-section home-header">
<nav class="navbar navbar-expand-lg p-0">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop"
aria-controls="staticBackdrop">
<i class="fa fa-bars" aria-hidden="true"></i>
<style>
/* New React-like Header */
.react-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-height: 80px;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 1050;
border-bottom: 1px solid #e2e8f0;
font-family: 'Inter', sans-serif;
}
.react-header .navbar-brand a { text-decoration: none; }
.rh-logo-icon {
width: 40px;
height: 40px;
background-color: #0d9488;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.rh-logo-icon svg { color: white; width: 24px; height: 24px; }
.rh-logo-text {
font-weight: 800;
font-size: 1.5rem;
line-height: 1;
color: #0f172a;
letter-spacing: -0.025em;
margin-left: 0.5rem;
}
.rh-logo-text span { color: #0d9488; }
.rh-link {
color: #475569 !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
transition: color 0.2s;
text-decoration: none;
padding: 0.5rem 1rem !important;
}
.rh-link:hover { color: #0d9488 !important; }
.rh-ai-link {
display: inline-flex;
align-items: center;
gap: 0.375rem;
color: #0d9488 !important;
background-color: #f0fdfa;
padding: 0.375rem 0.875rem !important;
border-radius: 9999px;
border: 1px solid #ccfbf1;
font-weight: 700 !important;
font-size: 0.875rem !important;
transition: color 0.2s;
text-decoration: none;
margin: 0 0.5rem;
}
.rh-ai-link:hover { color: #0f766e !important; }
.rh-ai-link svg { width: 16px; height: 16px; margin-bottom: 2px; }
.rh-login {
color: #475569 !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
transition: color 0.2s;
text-decoration: none;
margin-right: 1.25rem;
}
.rh-login:hover { color: #dc2626 !important; }
.rh-btn {
background-color: #0d9488 !important;
color: white !important;
padding: 0.625rem 1.25rem !important;
border-radius: 0.5rem;
font-weight: 600 !important;
font-size: 0.875rem !important;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
transition: all 0.2s;
text-decoration: none;
border: none;
}
.rh-btn:hover { background-color: #0f766e !important; }
.rh-btn svg { width: 16px; height: 16px; margin-bottom: 2px; }
body { padding-top: 80px; }
@media (max-width: 991px) {
.react-header .navbar-nav {
padding: 1.5rem 0;
gap: 0.75rem;
}
.react-header .d-lg-flex {
padding-bottom: 1.5rem;
}
.react-header {
background: #ffffff !important;
}
}
</style>
<div class="react-header">
<nav class="navbar navbar-expand-lg h-100" style="min-height:80px;">
<div class="container" style="max-width:80rem;">
<!-- Logo -->
<a class="navbar-brand d-flex align-items-center m-0 p-0" href="{{ route('home') }}">
<div class="rh-logo-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2v0a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12v0a2 2 0 0 1-2-2V7"/></svg>
</div>
<!-- Hide text on mobile using d-none d-sm-block -->
<span class="rh-logo-text d-none d-md-block">Kulak<span>pos</span></span>
</a>
<!-- Mobile Toggle -->
<button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#reactNavbar" aria-controls="reactNavbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars text-secondary" style="font-size:1.5rem;"></i>
</button>
<div class="d-flex align-items-center gap-2">
<div class="mobile-lang-container">
<div class="home-page-language-change">
<div class="dropdown">
<button class="language-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ asset('flags/' . languages()[app()->getLocale()]['flag'] . '.svg') }}" alt="" class="flag-icon me-2">
<span class="lang-name">
{{ languages()[app()->getLocale()]['name'] }}
</span>
</button>
<ul class="dropdown-menu dropdown-menu-scroll">
@foreach (languages() as $key => $language)
<li class="language-li">
<a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['lang' => $key]) }}">
<img src="{{ asset('flags/' . $language['flag'] . '.svg') }}" alt="" class="flag-icon me-2">
{{ $language['name'] }}
</a>
@if (app()->getLocale() == $key)
<i class="fas fa-check language-check"></i>
@endif
</li>
@endforeach
</ul>
</div>
</div>
</div>
<a href="{{ route('home') }}" class="header-logo"><img src="{{ asset($general->value['logo'] ?? 'assets/images/icons/upload-icon.svg') }}" alt="header-logo" /></a>
</div>
<!-- Mobile Menu -->
<div class="offcanvas offcanvas-start mobile-menu" data-bs-backdrop="static" tabindex="-1"
id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header home-offcanvas-header">
<a href="{{ route('home') }}" class="header-logo"><img
src="{{ asset($general->value['logo'] ?? 'assets/images/icons/upload-icon.svg') }}"
alt="header-logo" /></a>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
<div class="offcanvas-body">
<div class="accordion accordion-flush mb-30" id="sidebarMenuAccordion">
<div class="accordion-item">
<a href="{{ route('home') }}" class="accordion-button without-sub-menu"
type="button">{{ __('Home') }}</a>
</div>
<div class="accordion-item">
<a href="{{ route('about.index') }}" class="accordion-button without-sub-menu"
type="button">{{ __('About Us') }}</a>
</div>
<div class="accordion-item">
<a href="{{ route('plan.index') }}" class="accordion-button without-sub-menu"
type="button">{{ __('Pricing') }}</a>
</div>
<div class="accordion-item">
<a href="javascript:void(0);" class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#support-menu" aria-expanded="false"
aria-controls="support-menu">{{ __('Pages') }}</a>
<div id="support-menu" class="accordion-collapse collapse"
data-bs-parent="#sidebarMenuAccordion">
<ul class="accordion-body p-0">
<li>
<a href="{{ route('blogs.index') }}">{{ __('Blog') }}</a>
<p class="mb-0 arrow">></p>
</li>
<li>
<a href="{{ route('term.index') }}"> {{ __('Terms & Conditions') }} </a>
<p class="mb-0 arrow">></p>
</li>
<li>
<a href="{{ route('policy.index') }}"> {{ __('Privacy Policy') }} </a>
<p class="mb-0 arrow">></p>
</li>
</ul>
</div>
</div>
<div class="accordion-item">
<a href="{{ route('contact.index') }}" class="accordion-button without-sub-menu"
type="button">{{ __('Contact Us') }}</a>
</div>
<a href="{{ Route::has($page_data['headings']['header_btn_link']) ? route($page_data['headings']['header_btn_link']) : route('login') }}" class="get-app-btn login-btn ">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.48131 12.9012C4.30234 13.6032 1.21114 15.0366 3.09389 16.8304C4.01359 17.7065 5.03791 18.3332 6.32573 18.3332H13.6743C14.9621 18.3332 15.9864 17.7065 16.9061 16.8304C18.7888 15.0366 15.6977 13.6032 14.5187 12.9012C11.754 11.2549 8.24599 11.2549 5.48131 12.9012Z"
fill="white" />
<path
d="M13.75 5.4165C13.75 7.48757 12.0711 9.1665 10 9.1665C7.92893 9.1665 6.25 7.48757 6.25 5.4165C6.25 3.34544 7.92893 1.6665 10 1.6665C12.0711 1.6665 13.75 3.34544 13.75 5.4165Z"
fill="white" />
</svg>
{{ $page_data['headings']['header_btn_text'] ?? 'Login' }}
<!-- Menu Content -->
<div class="collapse navbar-collapse" id="reactNavbar">
<ul class="navbar-nav mx-auto align-items-center">
<li class="nav-item">
<a class="nav-link rh-link" href="{{ route('home') }}#fitur">Fitur POS</a>
</li>
<li class="nav-item">
<a class="nav-link rh-ai-link" href="{{ route('home') }}#ai">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>
AI Assistance
</a>
</div>
{{--
<a href="" data-bs-toggle="modal" data-bs-target="#signup-modal" class="get-app-btn ">
{{ $page_data['headings']['header_btn_text'] ?? '' }}
</a> --}}
</div>
</div>
<!-- Desktop Menu -->
<div class="collapse navbar-collapse">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="{{ route('home') }}" class="nav-link active"
aria-current="page">{{ __('Home') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page"
href="{{ route('about.index') }}">{{ __('About Us') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page"
href="{{ route('plan.index') }}">{{ __('Pricing') }}</a>
</li>
<li class="nav-item menu-dropdown">
<a class="nav-link" aria-current="page" href="javascript:void(0);">{{ __('Pages') }} <span
class="arrow">></span></a>
<ul class="dropdown-content">
<li>
<a class="dropdown-item"
href="{{ route('blogs.index') }}">{{ __('Blog') }}<span>></span></a>
</li>
<li>
<a class="dropdown-item"
href="{{ route('term.index') }}">{{ __('Terms & Conditions') }}
<span>></span></a>
</li>
<li>
<a class="dropdown-item"
href="{{ route('policy.index') }}">{{ __('Privacy Policy') }}<span>></span></a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page"
href="{{ route('contact.index') }}">{{ __('Contact Us') }}</a>
<a class="nav-link rh-link" href="{{ route('home') }}#perangkat">Perangkat</a>
</li>
<li class="nav-item">
<a class="nav-link rh-link" href="{{ route('home') }}#solusi">Solusi Industri</a>
</li>
<li class="nav-item">
<a class="nav-link rh-link" href="{{ route('plan.index') }}">Harga</a>
</li>
</ul>
<div class="home-page-language-change">
<div class="dropdown">
<button class="language-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="{{ asset('flags/' . languages()[app()->getLocale()]['flag'] . '.svg') }}" alt="" class="flag-icon me-2">{{ languages()[app()->getLocale()]['name'] }}
</button>
<ul class="dropdown-menu dropdown-menu-scroll">
@foreach (languages() as $key => $language)
<li class="language-li">
<a class="dropdown-item" href="{{ request()->fullUrlWithQuery(['lang' => $key]) }}">
<img src="{{ asset('flags/' . $language['flag'] . '.svg') }}" alt="" class="flag-icon me-2">
{{ $language['name'] }}
</a>
@if (app()->getLocale() == $key)
<i class="fas fa-check language-check"></i>
@endif
</li>
@endforeach
</ul>
</div>
<div class="d-flex align-items-center justify-content-center d-lg-flex mt-3 mt-lg-0">
<a href="{{ route('login') }}" class="rh-login">Masuk</a>
<a href="{{ route('plan.index') }}" class="rh-btn">
Coba Gratis
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</a>
</div>
<a href="{{ Route::has($page_data['headings']['header_btn_link']) ? route($page_data['headings']['header_btn_link']) : route('login') }}" class="get-app-btn">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M5.48131 12.9012C4.30234 13.6032 1.21114 15.0366 3.09389 16.8304C4.01359 17.7065 5.03791 18.3332 6.32573 18.3332H13.6743C14.9621 18.3332 15.9864 17.7065 16.9061 16.8304C18.7888 15.0366 15.6977 13.6032 14.5187 12.9012C11.754 11.2549 8.24599 11.2549 5.48131 12.9012Z"
fill="white" />
<path
d="M13.75 5.4165C13.75 7.48757 12.0711 9.1665 10 9.1665C7.92893 9.1665 6.25 7.48757 6.25 5.4165C6.25 3.34544 7.92893 1.6665 10 1.6665C12.0711 1.6665 13.75 3.34544 13.75 5.4165Z"
fill="white" />
</svg>
{{ $page_data['headings']['header_btn_text'] ?? 'Login' }}
</a>
</div>
</div>
</nav>
</header>
</div>