perubahan UI web + fix menu navigasi di page coba gratis
Some checks failed
Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 8s
Some checks failed
Gitea Actions Demo / Explore-Gitea-Actions (push) Failing after 8s
This commit is contained in:
triagungbiantoro
@@ -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
|
||||
Reference in New Issue
Block a user