{"id":17948,"date":"2025-09-03T02:51:55","date_gmt":"2025-09-03T02:51:55","guid":{"rendered":"https:\/\/hucle-consulting.com\/?page_id=17948"},"modified":"2025-09-03T09:01:17","modified_gmt":"2025-09-03T09:01:17","slug":"hsoft","status":"publish","type":"page","link":"https:\/\/hucle-consulting.com\/?page_id=17948","title":{"rendered":"HSOFT"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Hsoft Hero Section<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n 'primary': '#0214a5',\n 'secondary': '#f2cc00',\n 'accent': '#fff701'\n }\n }\n }\n }\n <\/script>\n <style>\n \/* Reset khusus untuk Elementor *\/\n .elementor-widget-html {\n overflow: visible !important;\n }\n \n .elementor-html-container {\n overflow: visible !important;\n }\n \n \/* Container utama *\/\n .hero-wrapper {\n width: 100% !important;\n max-width: 100% !important;\n margin: 0 !important;\n padding: 0 !important;\n box-sizing: border-box;\n overflow: visible !important;\n position: relative;\n display: block;\n clear: both;\n height: auto !important;\n min-height: auto !important;\n }\n \n \/* Section styling *\/\n .hero-section {\n width: 100%;\n position: relative;\n background: white;\n padding: 60px 20px;\n box-sizing: border-box;\n overflow: hidden; \/* Hanya section ini yang overflow hidden *\/\n }\n \n \/* Background elements dengan posisi yang lebih aman *\/\n .bg-element-1 {\n position: absolute;\n top: -200px;\n right: -200px;\n width: 400px;\n height: 400px;\n background: linear-gradient(135deg, rgba(2, 20, 165, 0.05) 0%, rgba(242, 204, 0, 0.05) 100%);\n border-radius: 50%;\n pointer-events: none;\n z-index: 1;\n }\n \n .bg-element-2 {\n position: absolute;\n bottom: -200px;\n left: -200px;\n width: 320px;\n height: 320px;\n background: linear-gradient(45deg, rgba(255, 247, 1, 0.1) 0%, rgba(2, 20, 165, 0.05) 100%);\n border-radius: 50%;\n pointer-events: none;\n z-index: 1;\n }\n \n \/* Content wrapper *\/\n .content-wrapper {\n max-width: 1280px;\n margin: 0 auto;\n position: relative;\n z-index: 10;\n }\n \n \/* Grid responsif yang lebih stabil *\/\n .hero-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 32px;\n align-items: center;\n }\n \n @media (min-width: 1024px) {\n .hero-grid {\n grid-template-columns: 1fr 1fr;\n gap: 64px;\n }\n }\n \n \/* Floating elements dengan posisi yang lebih aman *\/\n .floating-element {\n position: absolute;\n z-index: 5;\n }\n \n .floating-check {\n top: -16px;\n right: -16px;\n background: #f2cc00;\n color: #0214a5;\n padding: 12px;\n border-radius: 50%;\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n animation: bounce 2s infinite;\n }\n \n .floating-user {\n bottom: -16px;\n left: -16px;\n background: white;\n border: 2px solid #0214a5;\n padding: 12px;\n border-radius: 50%;\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n }\n \n @keyframes bounce {\n 0%, 20%, 53%, 80%, 100% {\n transform: translate3d(0,0,0);\n }\n 40%, 43% {\n transform: translate3d(0,-8px,0);\n }\n 70% {\n transform: translate3d(0,-4px,0);\n }\n 90% {\n transform: translate3d(0,-2px,0);\n }\n }\n \n \/* Visual card styling *\/\n .dashboard-card {\n background: linear-gradient(135deg, #0214a5 0%, #1e40af 100%);\n border-radius: 24px;\n padding: 32px;\n box-shadow: 0 25px 50px rgba(2, 20, 165, 0.25);\n transform: rotate(3deg);\n transition: transform 0.5s ease;\n position: relative;\n }\n \n .dashboard-card:hover {\n transform: rotate(0deg);\n }\n \n .dashboard-inner {\n background: white;\n border-radius: 16px;\n padding: 24px;\n }\n \n \/* Responsive text sizing *\/\n .hero-title {\n font-size: 2.5rem;\n line-height: 1.1;\n font-weight: 700;\n color: #111827;\n margin-bottom: 24px;\n }\n \n .hero-subtitle {\n font-size: 1.5rem;\n line-height: 1.2;\n font-weight: 300;\n color: #6b7280;\n margin-top: 8px;\n }\n \n @media (min-width: 768px) {\n .hero-title {\n font-size: 4rem;\n }\n .hero-subtitle {\n font-size: 2.5rem;\n }\n }\n \n @media (min-width: 1024px) {\n .hero-title {\n font-size: 4.5rem;\n }\n .hero-subtitle {\n font-size: 3rem;\n }\n }\n \n \/* Button styling *\/\n .btn-primary {\n background: #0214a5;\n color: white;\n font-weight: 600;\n padding: 12px 24px;\n border-radius: 12px;\n font-size: 1rem;\n transition: all 0.3s ease;\n border: none;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n text-decoration: none;\n }\n \n .btn-secondary {\n background: transparent;\n color: #6b7280;\n font-weight: 600;\n padding: 12px 24px;\n border-radius: 12px;\n font-size: 1rem;\n transition: all 0.3s ease;\n border: 2px solid #d1d5db;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n text-decoration: none;\n }\n \n @media (min-width: 640px) {\n .btn-primary, .btn-secondary {\n width: auto;\n padding: 16px 32px;\n font-size: 1.125rem;\n }\n }\n \n .btn-primary:hover {\n background: #1e3a8a;\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(2, 20, 165, 0.25);\n }\n \n .btn-secondary:hover {\n border-color: #0214a5;\n color: #0214a5;\n }\n \n \/* Stats styling *\/\n .stats-grid {\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n margin-bottom: 40px;\n }\n \n @media (min-width: 768px) {\n .stats-grid {\n gap: 32px;\n }\n }\n \n .stat-item {\n text-align: center;\n }\n \n .stat-number {\n font-size: 1.5rem;\n font-weight: 700;\n color: #0214a5;\n }\n \n @media (min-width: 768px) {\n .stat-number {\n font-size: 1.875rem;\n }\n }\n \n .stat-label {\n font-size: 0.75rem;\n color: #6b7280;\n }\n \n @media (min-width: 768px) {\n .stat-label {\n font-size: 0.875rem;\n }\n }\n \n \/* Badge styling *\/\n .badge {\n display: inline-flex;\n align-items: center;\n background: rgba(2, 20, 165, 0.1);\n color: #0214a5;\n padding: 8px 16px;\n border-radius: 9999px;\n font-size: 0.875rem;\n font-weight: 500;\n margin-bottom: 24px;\n }\n \n \/* Description text *\/\n .description {\n font-size: 1.125rem;\n color: #6b7280;\n line-height: 1.6;\n margin-bottom: 32px;\n max-width: 36rem;\n }\n \n @media (min-width: 768px) {\n .description {\n font-size: 1.25rem;\n }\n }\n \n \/* Button container *\/\n .button-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n \n @media (min-width: 640px) {\n .button-container {\n flex-direction: row;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"hero-wrapper\">\n <section class=\"hero-section\">\n <!-- Background Elements -->\n <div class=\"bg-element-1\"><\/div>\n <div class=\"bg-element-2\"><\/div>\n \n <div class=\"content-wrapper\">\n <div class=\"hero-grid\">\n <!-- Left Content -->\n <div>\n <div class=\"badge\">\n <svg class=\"w-4 h-4 mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n Software HRIS Full Customize\n <\/div>\n \n <h1 class=\"hero-title\">\n <img decoding=\"async\" style=\"width:300px !important\" src=\"https:\/\/hucle-consulting.com\/wp-content\/uploads\/2025\/09\/logo.png\" alt=\"Hero Title\" \/>\n\n <div class=\"hero-subtitle\">\n HRIS yang Fleksibel, Sesuai dengan Kebutuhan Perusahaan Anda\n <\/div>\n <\/h1>\n \n <p class=\"description\">\n Setiap perusahaan memiliki cara kerja dan tantangan yang berbeda. Itulah mengapa software HRIS kami dirancang untuk dapat dicustomize sepenuhnya, menyesuaikan dengan proses bisnis dan budaya kerja perusahaan Anda.\n\ud83d\udc49 Saatnya upgrade cara kerja HR Anda!\n <\/p>\n \n <!-- Stats -->\n <div class=\"stats-grid\">\n <div class=\"stat-item\">\n <div class=\"stat-number\">100+<\/div>\n <div class=\"stat-label\">Perusahaan<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">10K+<\/div>\n <div class=\"stat-label\">Karyawan<\/div>\n <\/div>\n <div class=\"stat-item\">\n <div class=\"stat-number\">99%<\/div>\n <div class=\"stat-label\">Kepuasan Klien<\/div>\n <\/div>\n <\/div>\n \n <div class=\"button-container\">\n <a href=\"#\" class=\"btn-primary\">\n Mulai Gratis Sekarang\n <\/a>\n <a href=\"https:\/\/www.youtube.com\/watch?v=-0Ybn2YyM_k\" class=\"btn-secondary\">\n <svg class=\"w-5 h-5 mr-2\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n Tonton Demo\n<\/a>\n\n <\/div>\n <\/div>\n \n <!-- Right Visual -->\n <div style=\"position: relative;\">\n <div class=\"dashboard-card\">\n <div class=\"dashboard-inner\">\n <!-- Dashboard Preview -->\n <div style=\"display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;\">\n <h3 style=\"font-weight: 700; color: #1f2937; font-size: 0.875rem;\">Dashboard HRIS<\/h3>\n <div style=\"display: flex; gap: 4px;\">\n <div style=\"width: 12px; height: 12px; background: #f87171; border-radius: 50%;\"><\/div>\n <div style=\"width: 12px; height: 12px; background: #fbbf24; border-radius: 50%;\"><\/div>\n <div style=\"width: 12px; height: 12px; background: #34d399; border-radius: 50%;\"><\/div>\n <\/div>\n <\/div>\n \n <!-- Mock Chart -->\n <div style=\"background: #f9fafb; border-radius: 8px; padding: 16px; margin-bottom: 16px;\">\n <div style=\"display: flex; justify-content: space-between; align-items: flex-end; height: 96px; gap: 8px;\">\n <div style=\"background: #0214a5; width: 32px; height: 64px; border-radius: 4px 4px 0 0;\"><\/div>\n <div style=\"background: #f2cc00; width: 32px; height: 80px; border-radius: 4px 4px 0 0;\"><\/div>\n <div style=\"background: #0214a5; width: 32px; height: 48px; border-radius: 4px 4px 0 0;\"><\/div>\n <div style=\"background: #fff701; width: 32px; height: 72px; border-radius: 4px 4px 0 0;\"><\/div>\n <div style=\"background: #0214a5; width: 32px; height: 56px; border-radius: 4px 4px 0 0;\"><\/div>\n <\/div>\n <div style=\"font-size: 0.75rem; color: #6b7280; margin-top: 8px;\">Produktivitas Karyawan<\/div>\n <\/div>\n \n <!-- Mock Cards -->\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px;\">\n <div style=\"background: rgba(2, 20, 165, 0.1); padding: 12px; border-radius: 8px;\">\n <div style=\"font-size: 1.5rem; font-weight: 700; color: #0214a5;\">2048<\/div>\n <div style=\"font-size: 0.75rem; color: #6b7280;\">Total Karyawan<\/div>\n <\/div>\n <div style=\"background: rgba(242, 204, 0, 0.2); padding: 12px; border-radius: 8px;\">\n <div style=\"font-size: 1.5rem; font-weight: 700; color: #0214a5;\">96%<\/div>\n <div style=\"font-size: 0.75rem; color: #6b7280;\">Kehadiran<\/div>\n <\/div>\n <\/div>\n \n <!-- Mock List -->\n <div style=\"display: flex; flex-direction: column; gap: 8px;\">\n <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px; background: #f9fafb; border-radius: 8px;\">\n <div style=\"width: 32px; height: 32px; background: #0214a5; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; font-weight: 600;\">ML<\/div>\n <div style=\"flex: 1;\">\n <div style=\"font-size: 0.875rem; font-weight: 500; color: #111827;\">Moelyono<\/div>\n <div style=\"font-size: 0.75rem; color: #6b7280;\">Software Engineer<\/div>\n <\/div>\n <div style=\"width: 8px; height: 8px; background: #34d399; border-radius: 50%;\"><\/div>\n <\/div>\n <div style=\"display: flex; align-items: center; gap: 12px; padding: 8px; background: #f9fafb; border-radius: 8px;\">\n <div style=\"width: 32px; height: 32px; background: #f2cc00; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #0214a5; font-size: 0.75rem; font-weight: 600;\">EM<\/div>\n <div style=\"flex: 1;\">\n <div style=\"font-size: 0.875rem; font-weight: 500; color: #111827;\">Emil Mulyadi<\/div>\n <div style=\"font-size: 0.75rem; color: #6b7280;\">HR Manager<\/div>\n <\/div>\n <div style=\"width: 8px; height: 8px; background: #34d399; border-radius: 50%;\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Floating Elements -->\n <div class=\"floating-element floating-check\">\n <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n \n <div class=\"floating-element floating-user\">\n <svg class=\"w-6 h-6\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n <\/div>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"no-position elementor-element elementor-element-f77565c e-flex e-con-boxed e-con e-parent\" data-id=\"f77565c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-491d628 gsap-move-no rs-tween_max_btn-no elementor-widget elementor-widget-html\" data-id=\"491d628\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Tambahkan ke Custom CSS Elementor -->\n<style>\n .hsoft-features * {\n box-sizing: border-box;\n }\n .hsoft-features {\n --primary: #0214a5;\n --secondary: #f2cc00;\n --accent: #fff701;\n }\n \n \/* Feature card hover effects *\/\n .hsoft-features .feature-card {\n transition: all 0.3s ease;\n }\n .hsoft-features .feature-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 40px rgba(2, 20, 165, 0.15);\n }\n \n \/* Color utilities *\/\n .hsoft-features .bg-primary { background-color: var(--primary) !important; }\n .hsoft-features .bg-secondary { background-color: var(--secondary) !important; }\n .hsoft-features .text-primary { color: var(--primary) !important; }\n .hsoft-features .border-primary { border-color: var(--primary) !important; }\n .hsoft-features .border-secondary { border-color: var(--secondary) !important; }\n<\/style>\n\n<!-- Features Section - Paste ini ke HTML Widget Elementor -->\n<section class=\"hsoft-features\" style=\"padding: 48px 16px; background: white; width: 100%; clear: both; display: block; position: relative;\">\n <div style=\"max-width: 1152px; margin: 0 auto;\">\n <div style=\"text-align: center; margin-bottom: 64px;\">\n <h2 style=\"font-size: clamp(24px, 5vw, 36px); font-weight: bold; color: var(--primary); margin-bottom: 16px; line-height: 1.2;\">\n Fitur Unggulan Hsoft\n <\/h2>\n <p style=\"font-size: clamp(16px, 2.5vw, 20px); color: #4b5563; max-width: 768px; margin: 0 auto; line-height: 1.6;\">\n 8 modul terintegrasi untuk mengelola seluruh aspek manajemen SDM perusahaan Anda\n <\/p>\n <\/div>\n\n <div style=\"display: grid; grid-template-columns: 1fr; gap: 24px;\">\n \n <!-- Feature 1: Manpower Planning -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--primary); color: white; padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n Manpower Planning\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Memudahkan manajemen dalam mengendalikan jumlah SDM dengan perencanaan yang tepat dan analisis kebutuhan tenaga kerja.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Feature 2: Onboarding -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--secondary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--secondary); color: var(--primary); padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M18 3a1 1 0 00-1.196-.98l-10 2A1 1 0 006 5v9.114A4.369 4.369 0 005 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V7.82l8-1.6v5.894A4.37 4.37 0 0015 12c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2V3z\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n Onboarding\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Memudahkan dalam mengelola kontrak kerja dan proses orientasi karyawan baru dengan sistem yang terintegrasi.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Feature 3: Employment -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--primary); color: white; padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n Employment\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Pengelolaan kehadiran multi shift, ijin-cuti online, produktivitas SDM, efektivitas lembur, kecelakaan kerja dan turnover karyawan.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Feature 4: Payroll -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--secondary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--secondary); color: var(--primary); padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n Payroll\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Mengelola gaji bulanan, mingguan, harian dan borongan serta memantau perbandingan gaji SDM dari periode ke periode.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Feature 5: Performance Management -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--primary); color: white; padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n Performance Management\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Memantau kinerja SDM berbasis KPI & budaya organisasi, mengelola talent untuk pemberian reward & punishment.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Feature 6: Career Management -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--secondary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--secondary); color: var(--primary); padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n Career Management\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Memantau tingkat kompetensi SDM serta menentukan rekomendasi pengembangan karir yang tepat.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Feature 7: People Development -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--primary); color: white; padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n People Development\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Memudahkan manajemen dalam melakukan mutasi, promosi, dan demosi karyawan dengan proses yang terstruktur.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Feature 8: Termination -->\n <div class=\"feature-card\" style=\"background: white; padding: 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--secondary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"background: var(--secondary); color: var(--primary); padding: 12px; border-radius: 8px; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M9 2a1 1 0 000 2h2a1 1 0 100-2H9z\" clip-rule=\"evenodd\"\/>\n <path fill-rule=\"evenodd\" d=\"M10 5a2 2 0 00-2 2v6a2 2 0 104 0V7a2 2 0 00-2-2zM8 7a2 2 0 012-2h.01a2 2 0 010 4H10a2 2 0 01-2-2z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 8px; line-height: 1.3;\">\n Termination\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.5; margin: 0;\">\n Memudahkan dalam pengelolaan proses resign, habis kontrak, dan PHK dengan dokumentasi yang lengkap.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<!-- Media Query untuk layout 2 kolom di tablet\/desktop -->\n<style>\n@media (min-width: 768px) {\n .hsoft-features > div > div:last-child {\n grid-template-columns: 1fr 1fr !important;\n gap: 32px !important;\n }\n .hsoft-features {\n padding: 80px 24px !important;\n }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"no-position elementor-element elementor-element-9e7a23c e-flex e-con-boxed e-con e-parent\" data-id=\"9e7a23c\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d869943 elementor-widget__width-inherit gsap-move-no rs-tween_max_btn-no elementor-widget elementor-widget-html\" data-id=\"d869943\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Tambahkan ke Custom CSS Elementor -->\n<style>\n .hsoft-benefits-cards * {\n box-sizing: border-box;\n }\n .hsoft-benefits-cards {\n --primary: #0214a5;\n --secondary: #f2cc00;\n --accent: #fff701;\n }\n \n \/* Benefit card hover effects *\/\n .hsoft-benefits-cards .benefit-card {\n transition: all 0.3s ease;\n }\n .hsoft-benefits-cards .benefit-card:hover {\n transform: translateY(-5px);\n box-shadow: 0 20px 40px rgba(2, 20, 165, 0.15);\n }\n \n \/* Color utilities *\/\n .hsoft-benefits-cards .bg-primary { background-color: var(--primary) !important; }\n .hsoft-benefits-cards .bg-secondary { background-color: var(--secondary) !important; }\n .hsoft-benefits-cards .text-primary { color: var(--primary) !important; }\n .hsoft-benefits-cards .border-primary { border-color: var(--primary) !important; }\n .hsoft-benefits-cards .border-secondary { border-color: var(--secondary) !important; }\n<\/style>\n\n<!-- Benefits Section - Paste ini ke HTML Widget Elementor -->\n<section class=\"hsoft-benefits-cards\" style=\"background-color: #f3f4f6; padding: 48px 16px; width: 100%; clear: both; display: block; position: relative;\">\n <div style=\"max-width: 1152px; margin: 0 auto;\">\n <div style=\"text-align: center; margin-bottom: 64px;\">\n <h2 style=\"font-size: clamp(24px, 5vw, 36px); font-weight: bold; color: var(--primary); margin-bottom: 16px; line-height: 1.2;\">\n Mengapa Memilih Hsoft?\n <\/h2>\n <p style=\"font-size: clamp(16px, 2.5vw, 20px); color: #4b5563; line-height: 1.6;\">\n Solusi terpadu yang mengoptimalkan seluruh proses manajemen SDM\n <\/p>\n <\/div>\n\n <div style=\"display: grid; grid-template-columns: 1fr; gap: 24px;\">\n \n <!-- Benefit 1: Fleksibel & Dapat Disesuaikan -->\n <div class=\"benefit-card\" style=\"background: white; padding: 32px 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"font-size: 32px; margin-right: 16px; flex-shrink: 0; line-height: 1;\">\ud83d\udd27<\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 12px; line-height: 1.3;\">\n Fleksibel & Dapat Disesuaikan\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.6; margin: 0;\">\n Setiap perusahaan unik \u2014 sistem kami bisa diatur sesuai alur kerja, kebijakan, dan kebutuhan spesifik Anda.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Benefit 2: Laporan & Analitik Cerdas -->\n <div class=\"benefit-card\" style=\"background: white; padding: 32px 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--secondary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"font-size: 32px; margin-right: 16px; flex-shrink: 0; line-height: 1;\">\ud83d\udcca<\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 12px; line-height: 1.3;\">\n Laporan & Analitik Cerdas\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.6; margin: 0;\">\n Pantau kinerja, absensi, hingga biaya SDM dalam laporan real-time untuk pengambilan keputusan yang lebih cepat.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Benefit 3: Akses Dimana Saja -->\n <div class=\"benefit-card\" style=\"background: white; padding: 32px 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"font-size: 32px; margin-right: 16px; flex-shrink: 0; line-height: 1;\">\ud83c\udf10<\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 12px; line-height: 1.3;\">\n Akses Dimana Saja\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.6; margin: 0;\">\n Berbasis cloud, bisa diakses kapan saja dan di perangkat apa saja \u2014 mendukung remote & hybrid working.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Benefit 4: Compliance & Legal Ready -->\n <div class=\"benefit-card\" style=\"background: white; padding: 32px 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--secondary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"font-size: 32px; margin-right: 16px; flex-shrink: 0; line-height: 1;\">\ud83d\udd12<\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 12px; line-height: 1.3;\">\n Compliance & Legal Ready\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.6; margin: 0;\">\n Dilengkapi fitur yang mendukung kepatuhan terhadap regulasi ketenagakerjaan dan perpajakan di Indonesia.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Benefit 5: Pemantauan KPI Terintegrasi -->\n <div class=\"benefit-card\" style=\"background: white; padding: 32px 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"font-size: 32px; margin-right: 16px; flex-shrink: 0; line-height: 1;\">\ud83c\udfaf<\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 12px; line-height: 1.3;\">\n Pemantauan KPI Terintegrasi\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.6; margin: 0;\">\n Pantau dan kelola KPI karyawan secara real-time, mempermudah evaluasi kinerja, dan memastikan setiap individu berkontribusi secara maksimal terhadap tujuan perusahaan.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Benefit 6: Penilaian Sikap 360 Derajat -->\n <div class=\"benefit-card\" style=\"background: white; padding: 32px 24px; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--secondary);\">\n <div style=\"display: flex; align-items: flex-start;\">\n <div style=\"font-size: 32px; margin-right: 16px; flex-shrink: 0; line-height: 1;\">\ud83d\udd04<\/div>\n <div style=\"flex: 1;\">\n <h3 style=\"font-size: clamp(16px, 2.5vw, 20px); font-weight: bold; color: var(--primary); margin-bottom: 12px; line-height: 1.3;\">\n Penilaian Sikap 360 Derajat\n <\/h3>\n <p style=\"font-size: clamp(14px, 2vw, 16px); color: #4b5563; line-height: 1.6; margin: 0;\">\n Dapatkan feedback komprehensif dari atasan, rekan sejawat, dan bawahan untuk penilaian kinerja yang lebih holistik, mendukung pengembangan karyawan yang berkesinambungan.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <\/div>\n <\/div>\n<\/section>\n\n<!-- Media Query untuk layout 2-3 kolom di tablet\/desktop -->\n<style>\n@media (min-width: 768px) {\n .hsoft-benefits-cards > div > div:last-child {\n grid-template-columns: 1fr 1fr !important;\n gap: 32px !important;\n }\n .hsoft-benefits-cards {\n padding: 80px 24px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .hsoft-benefits-cards > div > div:last-child {\n grid-template-columns: 1fr 1fr 1fr !important;\n }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"no-position elementor-element elementor-element-2f6db9a e-flex e-con-boxed e-con e-parent\" data-id=\"2f6db9a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-860ed93 gsap-move-no rs-tween_max_btn-no elementor-widget elementor-widget-html\" data-id=\"860ed93\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Tambahkan ke Custom CSS Elementor -->\n<style>\n .hsoft-cta * {\n box-sizing: border-box;\n }\n .hsoft-cta {\n --primary: #0214a5;\n --secondary: #f2cc00;\n --accent: #fff701;\n }\n \/* Tailwind-like utilities untuk kompatibilitas *\/\n .hsoft-cta .bg-primary { background-color: var(--primary) !important; }\n .hsoft-cta .bg-secondary { background-color: var(--secondary) !important; }\n .hsoft-cta .text-primary { color: var(--primary) !important; }\n .hsoft-cta .border-primary { border-color: var(--primary) !important; }\n .hsoft-cta .hover\\:bg-blue-800:hover { background-color: #1e40af !important; }\n .hsoft-cta .hover\\:border-primary:hover { border-color: var(--primary) !important; }\n .hsoft-cta .hover\\:text-primary:hover { color: var(--primary) !important; }\n .hsoft-cta .hover\\:scale-105:hover { transform: scale(1.05) !important; }\n .hsoft-cta .hover\\:rotate-0:hover { transform: rotate(0deg) !important; }\n .hsoft-cta .-rotate-3 { transform: rotate(-3deg) !important; }\n .hsoft-cta .animate-bounce { animation: bounce 1s infinite !important; }\n \n @keyframes bounce {\n 0%, 20%, 53%, 80%, 100% { transform: translateY(0); }\n 40%, 43% { transform: translateY(-30px); }\n 70% { transform: translateY(-15px); }\n 90% { transform: translateY(-4px); }\n }\n<\/style>\n\n<!-- CTA Section - Paste ini ke HTML Widget Elementor -->\n<section class=\"hsoft-cta\" style=\"background: white; padding: 48px 16px; position: relative; overflow: visible; width: 100%; clear: both;\">\n <!-- Background Elements -->\n <div style=\"position: absolute; top: 0; left: 0; width: 384px; height: 384px; background: linear-gradient(135deg, rgba(242, 204, 0, 0.1), rgba(2, 20, 165, 0.05)); border-radius: 50%; transform: translate(-192px, -192px);\"><\/div>\n <div style=\"position: absolute; bottom: 0; right: 0; width: 320px; height: 320px; background: linear-gradient(315deg, rgba(255, 247, 1, 0.1), rgba(242, 204, 0, 0.05)); border-radius: 50%; transform: translate(160px, 160px);\"><\/div>\n \n <div style=\"max-width: 100%; margin: 0 auto; position: relative;\">\n <div class=\"main-grid\" style=\"display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;\">\n <!-- Left Content -->\n <div class=\"content-left\" style=\"text-align: left;\">\n <div style=\"display: inline-flex; align-items: center; background: rgba(242, 204, 0, 0.2); color: var(--primary); padding: 8px 16px; border-radius: 9999px; font-size: 14px; font-weight: 500; margin-bottom: 24px;\">\n <svg style=\"width: 16px; height: 16px; margin-right: 8px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n Mulai Transformasi Digital HR Anda\n <\/div>\n \n <h2 style=\"font-size: clamp(24px, 5vw, 48px); font-weight: bold; color: #111827; margin-bottom: 24px; line-height: 1.2;\">\n Siap Mengoptimalkan \n <span style=\"color: var(--primary);\">Manajemen SDM<\/span> Anda?\n <\/h2>\n \n <p style=\"font-size: clamp(16px, 2.5vw, 20px); color: #4b5563; margin-bottom: 32px; line-height: 1.6; max-width: 600px;\">\n Bergabunglah dengan ribuan perusahaan yang telah mempercayai Hsoft untuk mengelola SDM mereka dengan lebih efisien dan modern.\n <\/p>\n \n <!-- Benefits List -->\n <div style=\"margin-bottom: 40px;\">\n <div style=\"display: flex; align-items: center; margin-bottom: 16px; color: #374151;\">\n <div style=\"background: rgba(2, 20, 165, 0.1); padding: 8px; border-radius: 50%; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 20px; height: 20px; color: var(--primary);\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n <span style=\"font-size: clamp(14px, 2vw, 16px); font-weight: 500;\">Dapatkan bantuan kapan saja dari tim profesional kami<\/span>\n <\/div>\n <div style=\"display: flex; align-items: center; margin-bottom: 16px; color: #374151;\">\n <div style=\"background: rgba(242, 204, 0, 0.2); padding: 8px; border-radius: 50%; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 20px; height: 20px; color: var(--primary);\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n <span style=\"font-size: clamp(14px, 2vw, 16px); font-weight: 500;\">Pengaturan Otomatis \u2013 Sistem siap digunakan tanpa perlu konfigurasi rumit<\/span>\n <\/div>\n <div style=\"display: flex; align-items: center; margin-bottom: 16px; color: #374151;\">\n <div style=\"background: rgba(2, 20, 165, 0.1); padding: 8px; border-radius: 50%; margin-right: 16px; flex-shrink: 0;\">\n <svg style=\"width: 20px; height: 20px; color: var(--primary);\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n <span style=\"font-size: clamp(14px, 2vw, 16px); font-weight: 500;\">Peningkatan Berkelanjutan - Fitur-fitur terbaru untuk mendukung pertumbuhan bisnis Anda<\/span>\n <\/div>\n <\/div>\n \n <div style=\"display: flex; flex-wrap: wrap; gap: 16px;\">\n <button class=\"bg-primary hover:bg-blue-800\" style=\"background: var(--primary); color: white; font-weight: 600; padding: 12px 24px; border-radius: 12px; font-size: 16px; border: none; cursor: pointer; transition: all 0.3s; min-width: 200px;\">\n \n <\/button>\n <button class=\"hover:border-primary hover:text-primary\" style=\"border: 2px solid #d1d5db; background: transparent; color: #374151; font-weight: 600; padding: 12px 24px; border-radius: 12px; font-size: 16px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; min-width: 200px;\">\n <svg style=\"width: 20px; height: 20px; margin-right: 8px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z\"\/>\n <\/svg>\n Hubungi Sales\n <\/button>\n <\/div>\n <\/div>\n \n <!-- Right Visual -->\n <div class=\"content-right\" style=\"position: relative;\">\n <div class=\"-rotate-3 hover:rotate-0\" style=\"background: linear-gradient(135deg, var(--primary), #1e40af); border-radius: 24px; padding: 24px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transform: rotate(-3deg); transition: transform 0.5s;\">\n <div style=\"background: white; border-radius: 16px; padding: 24px;\">\n <!-- Success Metrics -->\n <div style=\"text-align: center; margin-bottom: 24px;\">\n <h3 style=\"font-weight: bold; color: #1f2937; margin-bottom: 16px; font-size: 16px;\">Hasil yang Telah Dicapai<\/h3>\n <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 16px;\">\n <div style=\"background: rgba(2, 20, 165, 0.1); padding: 16px; border-radius: 8px;\">\n <div style=\"font-size: 24px; font-weight: bold; color: var(--primary);\">1000+<\/div>\n <div style=\"font-size: 12px; color: #6b7280;\">Jumlah karyawan<\/div>\n <\/div>\n <div style=\"background: rgba(242, 204, 0, 0.2); padding: 16px; border-radius: 8px;\">\n <div style=\"font-size: 24px; font-weight: bold; color: var(--primary);\">85%<\/div>\n <div style=\"font-size: 12px; color: #6b7280;\">Efisiensi<\/div>\n <\/div>\n <\/div>\n <\/div>\n \n <!-- Client Testimonial Preview -->\n <div style=\"background: #f9fafb; border-radius: 8px; padding: 16px; margin-bottom: 16px;\">\n <div style=\"display: flex; align-items: center; margin-bottom: 12px;\">\n <div style=\"width: 40px; height: 40px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; font-weight: bold; flex-shrink: 0;\">\n <img decoding=\"async\" src=\"https:\/\/hucle-consulting.com\/wp-content\/uploads\/2025\/05\/marifood.png\" alt=\"Image\" style=\"width: 80%; height: 80%; object-fit: contain;\" \/>\n<\/div>\n <div style=\"margin-left: 12px;\">\n <div style=\"font-weight: 500; font-size: 14px;\">PT Marimas Putera Kencana<\/div>\n <div style=\"font-size: 12px; color: #6b7280;\">Manufacturing<\/div>\n <\/div>\n <\/div>\n <p style=\"font-size: 14px; color: #6b7280; font-style: italic; margin-bottom: 8px;\">\"Memudahkan proses payroll dan tertelusur. Memudahkan karyawan untuk permohonan pengajuan ijin\/dina (menggantikan administrasi manual) dimanapun berada. Atasan mudah mengakses permohonan ijin\/dinas personil yang ada dibawah koordinasinya. Dapat dilakukan dimanapun. Memudahkan karyawan untuk memonitor presensi kehadiran. Data karyawan cukup detail dan dapat diakses oleh karyawan sehingga memudahkan karyawan untuk ikut memonitor, memgkoreksi & mengajukan perubahan (pengkinian data). Bisa cepat melihat sisa cuti kary, HUT kary, total karya\u00a0aktif,\u00a0resign\"<\/p>\n <div style=\"display: flex;\">\n <svg style=\"width: 16px; height: 16px; color: #fbbf24;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/>\n <\/svg>\n <svg style=\"width: 16px; height: 16px; color: #fbbf24;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/>\n <\/svg>\n <svg style=\"width: 16px; height: 16px; color: #fbbf24;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/>\n <\/svg>\n <svg style=\"width: 16px; height: 16px; color: #fbbf24;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/>\n <\/svg>\n <svg style=\"width: 16px; height: 16px; color: #fbbf24;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\/>\n <\/svg>\n <\/div>\n <\/div>\n \n \n \n <!-- Floating Elements -->\n <div class=\"animate-bounce\" style=\"position: absolute; top: -16px; left: -16px; background: var(--secondary); color: var(--primary); padding: 12px; border-radius: 50%; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\">\n <svg style=\"width: 24px; height: 24px;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z\"\/>\n <\/svg>\n <\/div>\n \n <div style=\"position: absolute; bottom: -16px; right: -16px; background: white; border: 2px solid var(--secondary); padding: 12px; border-radius: 50%; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\">\n <svg style=\"width: 24px; height: 24px; color: var(--primary);\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"\/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- Responsive Media Queries -->\n<style>\n \/* Mobile First - Default (sudah ada di atas) *\/\n .hsoft-cta .main-grid {\n grid-template-columns: 1fr;\n gap: 32px;\n }\n \n \/* Tablet *\/\n @media (min-width: 768px) {\n .hsoft-cta .main-grid {\n grid-template-columns: 1fr;\n gap: 40px;\n }\n \n .hsoft-cta button {\n min-width: auto;\n }\n }\n \n \/* Desktop *\/\n @media (min-width: 1024px) {\n .hsoft-cta .main-grid {\n grid-template-columns: 1fr 1fr !important;\n gap: 64px !important;\n align-items: center;\n }\n \n .hsoft-cta .content-left {\n padding-right: 24px;\n }\n \n .hsoft-cta .content-right {\n padding-left: 24px;\n }\n \n .hsoft-cta button {\n min-width: auto !important;\n }\n }\n \n \/* Large Desktop *\/\n @media (min-width: 1280px) {\n .hsoft-cta .main-grid {\n gap: 80px !important;\n }\n \n .hsoft-cta .content-left {\n padding-right: 40px;\n }\n \n .hsoft-cta .content-right {\n padding-left: 40px;\n }\n }\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"no-position elementor-element elementor-element-d4f5db5 e-flex e-con-boxed e-con e-parent\" data-id=\"d4f5db5\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a6396e5 gsap-move-no rs-tween_max_btn-no elementor-widget elementor-widget-spacer\" data-id=\"a6396e5\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Hsoft Hero Section Software HRIS Full Customize HRIS yang Fleksibel, Sesuai dengan Kebutuhan Perusahaan Anda Setiap perusahaan memiliki cara kerja dan tantangan yang berbeda. Itulah mengapa software HRIS kami dirancang untuk dapat dicustomize sepenuhnya, menyesuaikan dengan proses bisnis dan budaya kerja perusahaan Anda. \ud83d\udc49 Saatnya upgrade cara kerja HR Anda! 100+ Perusahaan 10K+ Karyawan 99%…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17948","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=\/wp\/v2\/pages\/17948","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17948"}],"version-history":[{"count":184,"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=\/wp\/v2\/pages\/17948\/revisions"}],"predecessor-version":[{"id":18155,"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=\/wp\/v2\/pages\/17948\/revisions\/18155"}],"wp:attachment":[{"href":"https:\/\/hucle-consulting.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}