614 lines
24 KiB
PHP
614 lines
24 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>SIPDAM - Sistem Penggajian Tenaga Kerja Lepas | PERUMDA Tirta Sanjiwani</title>
|
|
|
|
<!-- Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--green-dark: #1a5c2a;
|
|
--green-mid: #2d7a3e;
|
|
--green-main: #3a9e52;
|
|
--green-light: #e8f5eb;
|
|
--green-pale: #f2faf4;
|
|
--blue-water: #1e6fa8;
|
|
--blue-light: #e8f4fd;
|
|
--accent: #f0a500;
|
|
--text-dark: #1a2e1c;
|
|
--text-mid: #3d5c42;
|
|
--text-muted: #6b8c72;
|
|
--white: #ffffff;
|
|
--shadow-green: rgba(42, 120, 60, 0.15);
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
background: var(--green-pale);
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
color: var(--text-dark);
|
|
}
|
|
|
|
/* ── BACKGROUND ── */
|
|
.bg-wrapper {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
background: linear-gradient(160deg, #e8f5eb 0%, #f2faf4 40%, #e4f3f8 100%);
|
|
overflow: hidden;
|
|
}
|
|
.bg-wrapper::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -120px; right: -120px;
|
|
width: 600px; height: 600px;
|
|
background: radial-gradient(circle, rgba(42,120,60,0.12) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
.bg-wrapper::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -100px; left: -100px;
|
|
width: 500px; height: 500px;
|
|
background: radial-gradient(circle, rgba(30,111,168,0.1) 0%, transparent 70%);
|
|
border-radius: 50%;
|
|
}
|
|
.wave-svg {
|
|
position: absolute;
|
|
bottom: 0; left: 0; right: 0;
|
|
opacity: 0.15;
|
|
}
|
|
|
|
/* ── TOP BAR ── */
|
|
.topbar {
|
|
position: relative; z-index: 10;
|
|
background: var(--green-dark);
|
|
color: #fff;
|
|
padding: 8px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 13px;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.topbar-left { display: flex; gap: 24px; align-items: center; }
|
|
.topbar-left span { display: flex; align-items: center; gap: 6px; opacity: 0.9; }
|
|
.topbar-right { display: flex; gap: 12px; }
|
|
.topbar-right a {
|
|
color: rgba(255,255,255,0.8);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
padding: 4px 14px;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255,255,255,0.3);
|
|
transition: all 0.2s;
|
|
}
|
|
.topbar-right a:hover { background: rgba(255,255,255,0.15); color: #fff; }
|
|
.topbar-right a.btn-login {
|
|
background: var(--accent);
|
|
border-color: var(--accent);
|
|
color: var(--green-dark);
|
|
}
|
|
.topbar-right a.btn-login:hover { background: #e09600; }
|
|
|
|
/* ── NAVBAR ── */
|
|
.navbar {
|
|
position: relative; z-index: 10;
|
|
background: #fff;
|
|
padding: 16px 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
box-shadow: 0 2px 20px var(--shadow-green);
|
|
}
|
|
.logo-area { display: flex; align-items: center; gap: 16px; }
|
|
.logo-icon {
|
|
width: 64px; height: 64px;
|
|
background: linear-gradient(135deg, var(--green-dark), var(--blue-water));
|
|
border-radius: 16px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
box-shadow: 0 4px 16px var(--shadow-green);
|
|
flex-shrink: 0;
|
|
}
|
|
.logo-icon svg { width: 36px; height: 36px; }
|
|
.logo-text { line-height: 1.2; }
|
|
.logo-text .company-name {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: var(--green-dark);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.logo-text .company-sub {
|
|
font-size: 11px;
|
|
color: var(--blue-water);
|
|
font-weight: 600;
|
|
letter-spacing: 1.5px;
|
|
text-transform: uppercase;
|
|
margin-top: 2px;
|
|
}
|
|
.logo-text .company-region {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.system-badge {
|
|
display: flex; align-items: center; gap: 10px;
|
|
background: var(--green-light);
|
|
border: 1px solid rgba(42,120,60,0.2);
|
|
border-radius: 12px;
|
|
padding: 8px 16px;
|
|
}
|
|
.system-badge .badge-icon {
|
|
width: 36px; height: 36px;
|
|
background: var(--green-main);
|
|
border-radius: 8px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.system-badge .badge-icon svg { width: 20px; height: 20px; }
|
|
.system-badge .badge-name {
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--green-dark);
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.system-badge .badge-full {
|
|
font-size: 10px;
|
|
color: var(--text-muted);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* ── DIVIDER ── */
|
|
.nav-divider {
|
|
position: relative; z-index: 10;
|
|
background: var(--green-main);
|
|
height: 4px;
|
|
}
|
|
|
|
/* ── HERO ── */
|
|
.hero {
|
|
position: relative; z-index: 5;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 70px 40px 60px;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 60px;
|
|
align-items: center;
|
|
}
|
|
.hero-left { animation: fadeInUp 0.7s ease both; }
|
|
.hero-tag {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: var(--green-light);
|
|
border: 1px solid rgba(42,120,60,0.25);
|
|
border-radius: 20px;
|
|
padding: 6px 16px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--green-mid);
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.hero-tag .dot {
|
|
width: 7px; height: 7px;
|
|
background: var(--green-main);
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
.hero-title {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 46px;
|
|
font-weight: 700;
|
|
color: var(--green-dark);
|
|
line-height: 1.15;
|
|
margin-bottom: 20px;
|
|
}
|
|
.hero-title span { color: var(--green-main); }
|
|
.hero-desc {
|
|
font-size: 16px;
|
|
color: var(--text-mid);
|
|
line-height: 1.7;
|
|
margin-bottom: 36px;
|
|
max-width: 460px;
|
|
}
|
|
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
|
|
.btn-primary {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
|
|
color: #fff;
|
|
text-decoration: none;
|
|
padding: 14px 28px;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
box-shadow: 0 6px 20px rgba(42,120,60,0.35);
|
|
transition: all 0.25s;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 28px rgba(42,120,60,0.4);
|
|
}
|
|
.btn-secondary {
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
background: #fff;
|
|
color: var(--green-dark);
|
|
text-decoration: none;
|
|
padding: 14px 28px;
|
|
border-radius: 12px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
border: 2px solid var(--green-main);
|
|
transition: all 0.25s;
|
|
}
|
|
.btn-secondary:hover {
|
|
background: var(--green-light);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* ── HERO RIGHT: Stats Card ── */
|
|
.hero-right {
|
|
animation: fadeInUp 0.7s 0.2s ease both;
|
|
}
|
|
.stats-card {
|
|
background: #fff;
|
|
border-radius: 24px;
|
|
padding: 32px;
|
|
box-shadow: 0 8px 40px var(--shadow-green);
|
|
border: 1px solid rgba(42,120,60,0.1);
|
|
}
|
|
.stats-card-header {
|
|
display: flex; align-items: center; gap: 12px;
|
|
margin-bottom: 28px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid var(--green-light);
|
|
}
|
|
.stats-card-header .avatar {
|
|
width: 44px; height: 44px;
|
|
background: linear-gradient(135deg, var(--green-main), var(--blue-water));
|
|
border-radius: 12px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.stats-card-header .avatar svg { width: 24px; height: 24px; }
|
|
.stats-card-header h3 { font-size: 15px; font-weight: 700; color: var(--text-dark); }
|
|
.stats-card-header p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
|
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
|
|
.stat-item {
|
|
background: var(--green-pale);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
border: 1px solid rgba(42,120,60,0.08);
|
|
transition: transform 0.2s;
|
|
}
|
|
.stat-item:hover { transform: translateY(-2px); }
|
|
.stat-item .stat-icon {
|
|
width: 36px; height: 36px;
|
|
border-radius: 10px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.stat-item .stat-icon svg { width: 20px; height: 20px; }
|
|
.stat-item .stat-num { font-size: 26px; font-weight: 800; color: var(--green-dark); line-height: 1; }
|
|
.stat-item .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
|
|
.stat-item.blue .stat-icon { background: var(--blue-light); }
|
|
.stat-item.blue .stat-num { color: var(--blue-water); }
|
|
.stat-item.green .stat-icon { background: var(--green-light); }
|
|
.stat-item.amber .stat-icon { background: #fff8e6; }
|
|
.stat-item.amber .stat-num { color: #c47f00; }
|
|
.stat-item.teal .stat-icon { background: #e6f7f5; }
|
|
.stat-item.teal .stat-num { color: #1a7a6e; }
|
|
|
|
.status-bar {
|
|
background: var(--green-light);
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
display: flex; align-items: center; gap: 10px;
|
|
font-size: 13px;
|
|
color: var(--green-dark);
|
|
font-weight: 500;
|
|
}
|
|
.status-bar .dot-green {
|
|
width: 8px; height: 8px;
|
|
background: var(--green-main);
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── FEATURES ── */
|
|
.features {
|
|
position: relative; z-index: 5;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 40px 80px;
|
|
}
|
|
.features-title {
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
letter-spacing: 2px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 32px;
|
|
}
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
.feat-card {
|
|
background: #fff;
|
|
border-radius: 18px;
|
|
padding: 24px 20px;
|
|
text-align: center;
|
|
border: 1px solid rgba(42,120,60,0.1);
|
|
box-shadow: 0 2px 16px var(--shadow-green);
|
|
transition: all 0.25s;
|
|
cursor: default;
|
|
}
|
|
.feat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 28px var(--shadow-green);
|
|
border-color: rgba(42,120,60,0.25);
|
|
}
|
|
.feat-card .feat-icon {
|
|
width: 52px; height: 52px;
|
|
border-radius: 14px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
margin: 0 auto 14px;
|
|
}
|
|
.feat-card .feat-icon svg { width: 26px; height: 26px; }
|
|
.feat-card h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
|
|
.feat-card p { font-size: 12px; color: var(--text-muted); line-height: 1.6; }
|
|
|
|
/* ── FOOTER ── */
|
|
.footer {
|
|
position: relative; z-index: 5;
|
|
background: var(--green-dark);
|
|
color: rgba(255,255,255,0.7);
|
|
text-align: center;
|
|
padding: 20px 40px;
|
|
font-size: 13px;
|
|
}
|
|
.footer strong { color: #fff; }
|
|
|
|
/* ── ANIMATIONS ── */
|
|
@keyframes fadeInUp {
|
|
from { opacity: 0; transform: translateY(28px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; transform: scale(1); }
|
|
50% { opacity: 0.6; transform: scale(0.85); }
|
|
}
|
|
|
|
/* ── RESPONSIVE ── */
|
|
@media (max-width: 900px) {
|
|
.hero { grid-template-columns: 1fr; padding: 40px 24px; gap: 36px; }
|
|
.hero-title { font-size: 34px; }
|
|
.features-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.topbar { padding: 8px 20px; font-size: 12px; }
|
|
.navbar { padding: 14px 20px; }
|
|
.features { padding: 0 24px 60px; }
|
|
.logo-text .company-name { font-size: 15px; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.features-grid { grid-template-columns: 1fr; }
|
|
.topbar-left { display: none; }
|
|
.stats-grid { grid-template-columns: 1fr 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Background -->
|
|
<div class="bg-wrapper">
|
|
<svg class="wave-svg" viewBox="0 0 1440 180" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0,80 C240,140 480,20 720,80 C960,140 1200,20 1440,80 L1440,180 L0,180 Z" fill="#2d7a3e"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Top Bar -->
|
|
<div class="topbar">
|
|
<div class="topbar-left">
|
|
<span>
|
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
|
|
(0361) 943233
|
|
</span>
|
|
<span>
|
|
<svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
|
|
tekleperumda@gmail.com
|
|
</span>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Navbar -->
|
|
<nav class="navbar">
|
|
<div class="logo-area">
|
|
<!-- Logo Tetesan Air -->
|
|
<!-- Logo Tirta Sanjiwani -->
|
|
<div class="logo-icon" style="background:none; box-shadow:none; width:64px; height:64px; padding:0;">
|
|
<img src="{{ asset('images/logo tirta sanjiwani.png') }}"
|
|
alt="Logo Tirta Sanjiwani"
|
|
style="width:64px; height:64px; object-fit:contain;">
|
|
</div>
|
|
<div class="logo-text">
|
|
<div class="company-name">PERUMDA Air Minum</div>
|
|
<div class="company-sub">Tirta Sanjiwani</div>
|
|
<div class="company-region">Kabupaten Gianyar</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="system-badge" style="background:transparent; border:none; padding:4px 0;">
|
|
<img src="{{ asset('images/SIPDAM.png') }}"
|
|
alt="SIPDAM - Sistem Informasi Penggajian PDAM"
|
|
style="height:100px; width:auto; object-fit:contain; mix-blend-mode:multiply;"> -->
|
|
</div>
|
|
</nav>
|
|
<div class="nav-divider"></div>
|
|
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="hero-left">
|
|
<div class="hero-tag">
|
|
<span class="dot"></span>
|
|
Sistem Resmi PERUMDA Tirta Sanjiwani
|
|
</div>
|
|
<h1 class="hero-title">
|
|
Kelola <span>Tenaga Kerja Lepas</span> dengan Mudah & Efisien
|
|
</h1>
|
|
<p class="hero-desc">
|
|
Platform digital terintegrasi untuk pengelolaan data, kontrak, absensi, dan penggajian tenaga kerja lepas PERUMDA Air Minum Tirta Sanjiwani Kabupaten Gianyar.
|
|
</p>
|
|
<div class="hero-actions">
|
|
@if (Route::has('login'))
|
|
@auth
|
|
<a href="{{ url('/dashboard') }}" class="btn-primary">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
|
|
Buka Dashboard
|
|
</a>
|
|
@else
|
|
<a href="{{ route('login') }}" class="btn-primary">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M14 12H3"/></svg>
|
|
Masuk Sekarang
|
|
</a>
|
|
@if (Route::has('register'))
|
|
<a href="{{ route('register') }}" class="btn-secondary">
|
|
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
|
|
Daftar Akun
|
|
</a>
|
|
@endif
|
|
@endauth
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hero-right">
|
|
<div style="position:relative;">
|
|
<!-- Foto utama -->
|
|
<div style="
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
box-shadow: 0 16px 48px rgba(42,120,60,0.25);
|
|
aspect-ratio: 4/3;
|
|
background: #c8d8c8;
|
|
">
|
|
<img
|
|
src="{{ asset('images/hero-right.png') }}"
|
|
alt="Teknisi lapangan perbaikan pipa PDAM"
|
|
style="width:100%; height:100%; object-fit:cover;"
|
|
>
|
|
</div>
|
|
|
|
<!-- Badge floating kiri bawah -->
|
|
<div style="
|
|
position:absolute; bottom:-20px; left:-20px;
|
|
background:#fff;
|
|
border-radius: 16px;
|
|
padding: 14px 18px;
|
|
box-shadow: 0 8px 24px rgba(42,120,60,0.2);
|
|
display:flex; align-items:center; gap:12px;
|
|
border: 1px solid rgba(42,120,60,0.1);
|
|
">
|
|
<div style="
|
|
width:42px; height:42px;
|
|
background: linear-gradient(135deg,#2d7a3e,#1a5c2a);
|
|
border-radius:12px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
flex-shrink:0;
|
|
">
|
|
<svg width="22" height="22" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:18px; font-weight:800; color:#1a5c2a; line-height:1;">100%</div>
|
|
<div style="font-size:12px; color:#6b8c72; font-weight:500; margin-top:2px;">Data Terverifikasi</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Badge floating kanan atas -->
|
|
<div style="
|
|
position:absolute; top:-16px; right:-16px;
|
|
background:#fff;
|
|
border-radius: 16px;
|
|
padding: 12px 16px;
|
|
box-shadow: 0 8px 24px rgba(42,120,60,0.2);
|
|
display:flex; align-items:center; gap:10px;
|
|
border: 1px solid rgba(42,120,60,0.1);
|
|
">
|
|
<div style="
|
|
width:36px; height:36px;
|
|
background: #e8f5eb;
|
|
border-radius:10px;
|
|
display:flex; align-items:center; justify-content:center;
|
|
flex-shrink:0;
|
|
">
|
|
<svg width="20" height="20" fill="none" stroke="#2d7a3e" stroke-width="2" viewBox="0 0 24 24">
|
|
<path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-size:13px; font-weight:700; color:#1a5c2a;">Gaji Tepat Waktu</div>
|
|
<div style="font-size:11px; color:#6b8c72; font-weight:500;">Otomatis & Akurat</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Features -->
|
|
<section class="features">
|
|
<p class="features-title">Fitur Unggulan Sistem</p>
|
|
<div class="features-grid">
|
|
<div class="feat-card">
|
|
<div class="feat-icon" style="background:#e8f5eb">
|
|
<svg fill="none" stroke="#2d7a3e" stroke-width="2" viewBox="0 0 24 24"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
|
</div>
|
|
<h4>Data Pekerja</h4>
|
|
<p>Kelola data lengkap tenaga kerja lepas secara terpusat dan terstruktur</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon" style="background:#e8f4fd">
|
|
<svg fill="none" stroke="#1e6fa8" stroke-width="2" viewBox="0 0 24 24"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
|
|
</div>
|
|
<h4>Absensi Digital</h4>
|
|
<p>Pencatatan kehadiran harian yang akurat dan mudah dipantau</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon" style="background:#fff8e6">
|
|
<svg fill="none" stroke="#c47f00" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
|
|
</div>
|
|
<h4>Manajemen Pekerjaan</h4>
|
|
<p>Pemantauan penugasan dan pelaporan progres kerja teknisi secara berkala</p>
|
|
</div>
|
|
<div class="feat-card">
|
|
<div class="feat-icon" style="background:#e6f7f5">
|
|
<svg fill="none" stroke="#1a7a6e" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
</div>
|
|
<h4>Penggajian</h4>
|
|
<p>Perhitungan dan rekap gaji otomatis berdasarkan kehadiran</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<strong>PERUMDA Air Minum Tirta Sanjiwani</strong> · Kabupaten Gianyar, Bali |
|
|
SIPDAM © {{ date('Y') }} · Laravel v{{ Illuminate\Foundation\Application::VERSION }}
|
|
</footer>
|
|
|
|
</body>
|
|
</html> |