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

11
resources/views/index.blade.php Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>KulakPOS</title>
@vite('resources/js/app.jsx')
</head>
<body>
<div id="app"></div>
</body>
</html>

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>

349
resources/views/web/index.blade.php
View File

@@ -1,195 +1,216 @@
@extends('layouts.web.master')
@section('title')
{{ __(env('APP_NAME')) }}
Kulakpos Modern
@endsection
@section('main_content')
<section class="home-banner-section" style="background-image: url('{{ asset($page_data['slider_bg_img'] ?? 'assets/web/images/banner/banner1.png') }}');">
<div class="container">
<div class="row align-items-center pb-5 py-lg-5">
<div class="col-lg-6 order-2 order-lg-1 mt-5 mt-lg-0">
<div class="banner-content">
<h1>
{{ $page_data['headings']['slider_title'] ?? '' }}
<span
data-typer-targets='{"targets": [
@foreach ($page_data['headings']['silder_shop_text'] ?? [] as $key => $shop)
"{{ $shop }}"@if (!$loop->last),@endif @endforeach
]}'>
</span>
</h1>
<p>
{{ $page_data['headings']['slider_description'] ?? '' }}
</p>
<div class="demo-btn-group mb-3">
<a href="{{ url($page_data['headings']['slider_btn1_link'] ?? '') }}"
class="custom-btn custom-primary-btn">
{{ $page_data['headings']['slider_btn1'] ?? '' }}<i class="fas fa-arrow-right ms-1"></i>
</a>
<style>
.home-modern { font-family: system-ui; }
<a href="" class="mt-1 video-button d-flex align-items-center gap-2"
data-bs-toggle="modal" data-bs-target="#watch-video-modal">
<span class="play-button"></span>
<span class="text-white ms-3">{{ $page_data['headings']['slider_btn2'] ?? '' }}</span>
</a>
/* HERO */
.hero { padding:140px 20px 100px; text-align:center; position:relative; }
.hero h1 { font-size:48px; font-weight:800; }
.hero p { color:#64748b; }
</div>
/* BUTTON */
.btn-main { background:#0d9488; color:#fff; padding:14px 30px; border-radius:10px; font-weight:bold; }
.btn-outline { border:2px solid #ddd; padding:14px 30px; border-radius:10px; }
<div class="banner-scan">
<img src="{{ asset($page_data['scanner_image'] ?? 'assets/images/icons/img-upload.png') }}"
alt="" />
<p>
{{ $page_data['headings']['slider_scanner_text'] ?? '' }}
</p>
</div>
/* SECTION */
.section { padding:100px 20px; }
.section-dark { background:#0f172a; color:white; }
<div class="play-store mt-3">
<a href="{{ $page_data['headings']['footer_apple_app_link'] ?? '' }}" target="_blank">
<img src="{{ asset($page_data['footer_apple_app_image'] ?? 'assets/images/icons/img-upload.png') }}"
alt="image" />
</a>
<a href="{{ $page_data['headings']['footer_google_play_app_link'] ?? '' }}" target="_blank">
<img src="{{ asset($page_data['footer_google_app_image'] ?? 'assets/images/icons/img-upload.png') }}"
alt="image" />
</a>
</div>
</div>
</div>
<div class="col-lg-6 order-1 order-lg-2">
<div class="banner-img text-center">
<img src="{{ asset($page_data['slider_image'] ?? 'assets/images/icons/img-upload.png') }}"
alt="banner-img" class=" move-image" />
</div>
</div>
</div>
</div>
</section>
/* GRID */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
<div class="modal modal-custom-design" id="watch-video-modal" data-bs-backdrop="static" data-bs-keyboard="false"
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<iframe width="100%" height="400px" src="{{ $page_data['headings']['slider_btn2_link'] ?? '' }}"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
/* CARD */
.card { border:1px solid #eee; border-radius:16px; padding:20px; transition:.3s; }
.card:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,.08); }
/* INDUSTRY ACTIVE */
.industry-active { border:2px solid #0d9488; background:#f0fdfa; }
/* CTA */
.cta { background:#0d9488; color:white; text-align:center; padding:80px 20px; }
</style>
<div class="home-modern">
{{-- ================= HERO ================= --}}
<section class="hero">
<span style="background:#fee2e2;color:#dc2626;padding:8px 16px;border-radius:999px;font-weight:bold;">
Mitra Digital #1 untuk UMKM
</span>
<h1 class="mt-3">
Sistem Kasir Pintar <br>
<span style="color:#0d9488;">AI Assistance</span>
</h1>
<p class="mt-3">
Kendalikan penjualan, stok, dan laporan dalam satu dashboard.
</p>
<div class="mt-4">
<a href="#" class="btn-main">Coba Gratis</a>
<a href="#" class="btn-outline">Demo</a>
</div>
{{-- Feature Code Start --}}
</section>
@include('web.components.feature')
{{-- ================= AI ================= --}}
<section id="ai" class="section section-dark">
{{-- Interface Code Start --}}
<div class="grid-2">
<section class="slick-slider-section bg-pos">
<div class="container">
<div class="section-title text-center">
<h2>{{ $page_data['headings']['interface_title'] ?? '' }}</h2>
<p class="max-w-600 mx-auto section-description">
{{ $page_data['headings']['interface_description'] ?? '' }}
</p>
</div>
<div class="row app-slide">
@foreach ($interfaces as $interface)
<div class="image d-flex align-items-center justify-content-center p-2">
<img src="{{ asset($interface->image) }}" alt="phone" />
</div>
@endforeach
</div>
<div>
<h2 style="color:#14b8a6;font-weight:800;">AI Assistant</h2>
<p class="mt-3">Analisis otomatis bisnis Anda.</p>
<ul class="mt-4">
<li>✔ Analisis Omset</li>
<li>✔ Laba Rugi</li>
<li>✔ Prediksi Stok</li>
</ul>
</div>
</section>
{{-- Watch demo Code Start --}}
<section class="watch-demo-section watch-demo-two bg-FFFFFF">
<div class="container">
<div class="section-title text-center">
<h2>{{ $page_data['headings']['watch_title'] ?? '' }}</h2>
<p class="section-description">
{{ $page_data['headings']['watch_description'] ?? '' }}
</p>
</div>
<div class="video-wrapper shadow">
<img src="{{ asset($page_data['watch_image'] ?? 'assets/images/icons/img-upload.png') }}" alt="watch" />
<a class="play-btn" data-bs-toggle="modal" data-bs-target="#play-video-modal"><i class="fa fa-play"
aria-hidden="true"></i></a>
</div>
<div class="card">
<strong>AI Dashboard</strong>
<h3 class="mt-3">Rp 24.500.000</h3>
</div>
</section>
<div class="modal modal-custom-design" id="play-video-modal" data-bs-backdrop="static" data-bs-keyboard="false"
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header border-0 pb-0">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<iframe width="100%" height="400px" src="{{ $page_data['headings']['watch_btn_link'] ?? '' }}"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
{{-- Pricing-Plan-section demo Code Start --}}
@include('web.components.plan')
</section>
{{-- Testimonial Section Start --}}
<section class="customer-section bg-pos">
<div class="container mb-4">
<div class="section-title text-center">
<h2>{{ $page_data['headings']['testimonial_title'] ?? '' }}</h2>
</div>
{{-- ================= FITUR ================= --}}
<section id="fitur" class="section">
<div class="customer-slider-section">
<div class="row">
@foreach ($testimonials as $testimonial)
<div>
<div class="customer-card">
<img src="{{ asset($testimonial->client_image) }}" alt="" />
<p>{{ $testimonial->text }}</p>
<div class="w-100 pt-3 d-flex align-items-center flex-column border-top">
<h5 class="m-0">{{ $testimonial->client_name }}</h5>
<small>{{ $testimonial->work_at }}</small>
<ul class="d-flex align-items-center justify-content-center gap-2">
@for ($i = 0; $i < 5; $i++)
<li><i class="fa fa-star" aria-hidden="true"></i></li>
@endfor
</ul>
</div>
</div>
</div>
@endforeach
</div>
<h2 style="text-align:center;font-weight:800;">Fitur Lengkap</h2>
<div class="grid-4 mt-5">
<div class="card">Sales Management</div>
<div class="card">Purchase</div>
<div class="card">Inventory</div>
<div class="card">Multi Branch</div>
<div class="card">Pricing</div>
<div class="card">Warehouse</div>
<div class="card">3rd Party</div>
<div class="card">AI Assistant</div>
</div>
</section>
{{-- ================= PERANGKAT ================= --}}
<section id="perangkat" class="section" style="background:#f8fafc;">
<h2 style="text-align:center;font-weight:800;">Multi Platform</h2>
<div class="grid-3 mt-5">
<div class="card">Laptop & PC</div>
<div class="card">Tablet</div>
<div class="card">Smartphone</div>
</div>
</section>
{{-- ================= SOLUSI ================= --}}
<section id="solusi" class="section">
<div class="grid-2">
<div id="industry-list">
<div class="card industry-item industry-active" data-id="1">F&B</div>
<div class="card industry-item" data-id="2">Retail</div>
<div class="card industry-item" data-id="3">Cafe</div>
</div>
<div>
<h3 id="industry-title">F&B</h3>
<div id="industry-items" class="mt-3">
<span class="badge">Restaurant</span>
<span class="badge">Cafe</span>
</div>
</div>
</section>
{{-- Blogs Section Code Start --}}
</div>
<section class="blogs-section ">
<div class="container">
<div class="section-title d-flex align-items-center justify-content-between flex-wrap">
<h2>{{ $page_data['headings']['blog_title'] ?? '' }}</h2>
<a href="{{ url($page_data['headings']['blog_view_all_btn_link'] ?? '') }}"
class="custom-btn custom-outline-btn bg-white">
{{ $page_data['headings']['blog_view_all_btn_text'] ?? '' }}<i class="fas fa-arrow-right ms-1"></i>
</a>
</div>
</section>
{{-- ================= HARGA ================= --}}
<section id="harga" class="section" style="background:#f8fafc;">
<h2 style="text-align:center;font-weight:800;">Harga</h2>
<div class="grid-3 mt-5">
<div class="card">
<h4>Basic</h4>
<h3>Rp 50k</h3>
</div>
@include('web.components.blog')
</section>
@include('web.components.signup')
@endsection
<div class="card" style="background:#0d9488;color:white;">
<h4>Pro</h4>
<h3>Rp 100k</h3>
</div>
<div class="card">
<h4>Enterprise</h4>
<h3>Custom</h3>
</div>
</div>
</section>
{{-- ================= CTA ================= --}}
<section class="cta">
<h2>Siap Naik Kelas?</h2>
<p>Mulai sekarang bersama Kulakpos</p>
</section>
</div>
{{-- ================= JS INTERACTIVE ================= --}}
<script>
const industries = {
1: { title: "F&B", items: ["Restaurant","Cafe","Warung"] },
2: { title: "Retail", items: ["Minimarket","Toko"] },
3: { title: "Cafe", items: ["Coffee Shop","Bakery"] },
};
document.querySelectorAll('.industry-item').forEach(el=>{
el.addEventListener('click', function(){
document.querySelectorAll('.industry-item').forEach(i=>i.classList.remove('industry-active'));
this.classList.add('industry-active');
const id = this.dataset.id;
const data = industries[id];
document.getElementById('industry-title').innerText = data.title;
let html = '';
data.items.forEach(i=>{
html += `<span class="badge">${i}</span>`;
});
document.getElementById('industry-items').innerHTML = html;
});
});
</script>
@endsection