{"id":8,"date":"2026-10-12T10:41:25","date_gmt":"2026-10-12T02:41:25","guid":{"rendered":"https:\/\/libohive.com\/?page_id=8"},"modified":"2026-10-12T11:03:01","modified_gmt":"2026-10-12T03:03:01","slug":"home","status":"publish","type":"page","link":"https:\/\/libohive.com\/","title":{"rendered":"HOME"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n\/* Fix input putih *\/\n.libo-input,\n.libo-input:focus,\n.libo-input:active,\ninput.libo-input[type=\"text\"] {\n  background: transparent !important;\n  background-color: transparent !important;\n  color: #E8EEF9 !important;\n  border: none !important;\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n.libo-input::placeholder {\n  color: rgba(232, 238, 249, 0.4) !important;\n}\n<\/style>\n\n<!-- HERO SECTION -->\n<section class=\"libo-hero\">\n  <div class=\"libo-hero-bg\"><\/div>\n  \n  <div class=\"libo-hero-content\">\n    <!-- Libo Orb -->\n    <div class=\"libo-orb\" id=\"liboOrb\">\n      <svg viewBox=\"0 0 200 200\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n        <defs>\n          <radialGradient id=\"orbGlow\" cx=\"50%\" cy=\"50%\" r=\"50%\">\n            <stop offset=\"0%\" stop-color=\"#2D7FF9\" stop-opacity=\"0.4\"><\/stop>\n            <stop offset=\"100%\" stop-color=\"#2D7FF9\" stop-opacity=\"0\"><\/stop>\n          <\/radialGradient>\n        <\/defs>\n        \n        <!-- Outer glow -->\n        <circle cx=\"100\" cy=\"100\" r=\"90\" fill=\"url(#orbGlow)\" class=\"orb-glow\"><\/circle>\n        \n        <!-- Outer sphere -->\n        <circle cx=\"100\" cy=\"100\" r=\"75\" fill=\"none\" stroke=\"#2D7FF9\" stroke-width=\"1.5\" opacity=\"0.6\"><\/circle>\n        <circle cx=\"100\" cy=\"100\" r=\"65\" fill=\"none\" stroke=\"#2D7FF9\" stroke-width=\"1\" opacity=\"0.3\"><\/circle>\n        \n        <!-- Hexagon lattice -->\n        <g class=\"orb-hexagons\" stroke=\"#2D7FF9\" stroke-width=\"0.8\" fill=\"none\" opacity=\"0.5\">\n          <polygon points=\"100,50 143,75 143,125 100,150 57,125 57,75\"><\/polygon>\n          <polygon points=\"100,65 130,82 130,118 100,135 70,118 70,82\"><\/polygon>\n          <polygon points=\"100,80 118,90 118,110 100,120 82,110 82,90\"><\/polygon>\n        <\/g>\n        \n        <!-- Gold center node -->\n        <circle cx=\"100\" cy=\"100\" r=\"10\" fill=\"#C9A227\" class=\"orb-core\"><\/circle>\n        <circle cx=\"100\" cy=\"100\" r=\"5\" fill=\"#E8EEF9\" opacity=\"0.8\"><\/circle>\n      <\/svg>\n    <\/div>\n    \n    <!-- Greeting -->\n    <h1 class=\"libo-greeting\">\n      <span class=\"libo-line\" id=\"line1\">Welcome. I am Libo.<\/span>\n      <span class=\"libo-line libo-sub\" id=\"line2\">Tell me your problem.<\/span>\n    <\/h1>\n    \n    <!-- Input box -->\n    <div class=\"libo-input-wrapper\">\n      <input type=\"text\" class=\"libo-input\" placeholder=\"Type here...\" id=\"liboInput\">\n      <button class=\"libo-send\" aria-label=\"Send\">\n        <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n          <path d=\"M5 12h14M12 5l7 7-7 7\"><\/path>\n        <\/svg>\n      <\/button>\n    <\/div>\n    \n    <!-- Suggestion chips -->\n    <div class=\"libo-chips\">\n      <button class=\"libo-chip\">Payment collection is slow<\/button>\n      <button class=\"libo-chip\">Too much manual work<\/button>\n      <button class=\"libo-chip\">Systems are scattered<\/button>\n      <button class=\"libo-chip\">Idea for an app, don&#8217;t know where to start<\/button>\n    <\/div>\n  <\/div>\n  \n  <!-- Scroll indicator -->\n  <div class=\"libo-scroll\">\n    <span>Scroll<\/span>\n    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n      <path d=\"M12 5v14M19 12l-7 7-7-7\"><\/path>\n    <\/svg>\n  <\/div>\n<\/section>\n\n<style>\n\/* HERO SECTION *\/\n.libo-hero {\n  position: relative;\n  min-height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #0A0F1C;\n  overflow: hidden;\n  font-family: 'Sora', 'Inter', sans-serif;\n  padding: 40px 20px;\n}\n\n\/* Grid background *\/\n.libo-hero-bg {\n  position: absolute;\n  inset: 0;\n  background-image: \n    linear-gradient(rgba(45, 127, 249, 0.05) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(45, 127, 249, 0.05) 1px, transparent 1px);\n  background-size: 50px 50px;\n  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);\n  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);\n}\n\n.libo-hero-content {\n  position: relative;\n  z-index: 2;\n  text-align: center;\n  max-width: 700px;\n  width: 100%;\n}\n\n\/* LIBO ORB *\/\n.libo-orb {\n  width: 200px;\n  height: 200px;\n  margin: 0 auto 40px;\n  animation: orbFloat 6s ease-in-out infinite;\n  filter: drop-shadow(0 0 30px rgba(45, 127, 249, 0.5));\n}\n\n.libo-orb svg {\n  width: 100%;\n  height: 100%;\n}\n\n.orb-glow {\n  animation: glowPulse 3s ease-in-out infinite;\n}\n\n.orb-core {\n  animation: corePulse 2s ease-in-out infinite;\n  filter: drop-shadow(0 0 8px #C9A227);\n}\n\n.orb-hexagons {\n  animation: rotateHex 30s linear infinite;\n  transform-origin: 100px 100px;\n}\n\n@keyframes orbFloat {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-10px); }\n}\n\n@keyframes glowPulse {\n  0%, 100% { opacity: 0.6; }\n  50% { opacity: 1; }\n}\n\n@keyframes corePulse {\n  0%, 100% { r: 10; opacity: 1; }\n  50% { r: 12; opacity: 0.9; }\n}\n\n@keyframes rotateHex {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n\/* GREETING *\/\n.libo-greeting {\n  color: #E8EEF9;\n  font-size: clamp(1.5rem, 4vw, 2.2rem);\n  font-weight: 600;\n  line-height: 1.4;\n  margin: 0 0 30px;\n}\n\n.libo-line {\n  display: block;\n  opacity: 0;\n  transform: translateY(10px);\n  animation: fadeUp 0.6s ease forwards;\n}\n\n#line1 { animation-delay: 0.3s; }\n#line2 { animation-delay: 0.8s; }\n\n.libo-sub {\n  font-size: 0.7em;\n  font-weight: 400;\n  color: #2D7FF9;\n  margin-top: 8px;\n}\n\n@keyframes fadeUp {\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\/* Fix input putih *\/\n.libo-input,\n.libo-input:focus,\n.libo-input:active,\ninput.libo-input[type=\"text\"] {\n  background: transparent !important;\n  background-color: transparent !important;\n  color: #E8EEF9 !important;\n  border: none !important;\n  box-shadow: none !important;\n  outline: none !important;\n}\n\n.libo-input::placeholder {\n  color: rgba(232, 238, 249, 0.4) !important;\n}\n}\n\n\/* INPUT *\/\n.libo-input-wrapper {\n  display: flex;\n  align-items: center;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(45, 127, 249, 0.3);\n  border-radius: 12px;\n  padding: 4px 4px 4px 20px;\n  margin: 0 auto 24px;\n  max-width: 560px;\n  transition: border-color 0.3s, box-shadow 0.3s;\n}\n\n.libo-input-wrapper:focus-within {\n  border-color: #2D7FF9;\n  box-shadow: 0 0 0 3px rgba(45, 127, 249, 0.15);\n}\n\n.libo-input {\n  flex: 1;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: #E8EEF9;\n  font-size: 1rem;\n  font-family: inherit;\n  padding: 14px 0;\n}\n\n.libo-input::placeholder {\n  color: rgba(232, 238, 249, 0.4);\n}\n\n.libo-send {\n  background: #2D7FF9;\n  border: none;\n  border-radius: 8px;\n  width: 44px;\n  height: 44px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: white;\n  cursor: pointer;\n  transition: background 0.3s, transform 0.2s;\n}\n\n.libo-send:hover {\n  background: #4A90FF;\n  transform: scale(1.05);\n}\n\n\/* CHIPS *\/\n.libo-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  justify-content: center;\n  max-width: 620px;\n  margin: 0 auto;\n  opacity: 0;\n  animation: fadeUp 0.6s ease forwards;\n  animation-delay: 1.3s;\n}\n\n.libo-chip {\n  background: rgba(45, 127, 249, 0.1);\n  border: 1px solid rgba(45, 127, 249, 0.3);\n  color: #E8EEF9;\n  padding: 8px 16px;\n  border-radius: 20px;\n  font-size: 0.85rem;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.3s;\n}\n\n.libo-chip:hover {\n  background: rgba(45, 127, 249, 0.25);\n  border-color: #2D7FF9;\n  transform: translateY(-2px);\n}\n\n\/* SCROLL *\/\n.libo-scroll {\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  color: rgba(232, 238, 249, 0.4);\n  font-size: 0.75rem;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  animation: scrollBounce 2s ease-in-out infinite;\n}\n\n@keyframes scrollBounce {\n  0%, 100% { transform: translateX(-50%) translateY(0); }\n  50% { transform: translateX(-50%) translateY(8px); }\n}\n\n\/* MOBILE *\/\n@media (max-width: 640px) {\n  .libo-orb { width: 150px; height: 150px; margin-bottom: 30px; }\n  .libo-input-wrapper { padding-left: 16px; }\n  .libo-chip { font-size: 0.78rem; padding: 6px 12px; }\n}\n<\/style>\n\n<script>\n\/\/ Typing effect untuk greeting\ndocument.addEventListener('DOMContentLoaded', function() {\n  const input = document.getElementById('liboInput');\n  const chips = document.querySelectorAll('.libo-chip');\n  \n  \/\/ Chip click \u2192 isi input\n  chips.forEach(chip => {\n    chip.addEventListener('click', function() {\n      input.value = this.textContent;\n      input.focus();\n    });\n  });\n  \n  \/\/ Enter \u2192 mock reply\n  input.addEventListener('keypress', function(e) {\n    if (e.key === 'Enter' && this.value.trim() !== '') {\n      console.log('User asked:', this.value);\n      \/\/ Nanti sambung ke Libo backend\n      this.value = '';\n    }\n  });\n});\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome. I am Libo. Tell me your problem. Payment collection is slow Too much manual work Systems are scattered Idea for an app, don&#8217;t know where to start Scroll<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":true,"_kad_post_footer":true,"_kad_post_classname":"","footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/libohive.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/libohive.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/libohive.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/libohive.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/libohive.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":6,"href":"https:\/\/libohive.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":18,"href":"https:\/\/libohive.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/18"}],"wp:attachment":[{"href":"https:\/\/libohive.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}