{"id":12,"date":"2026-09-19T09:10:28","date_gmt":"2026-09-19T09:10:28","guid":{"rendered":"https:\/\/growthandbe.com\/?page_id=12"},"modified":"2026-09-19T09:21:05","modified_gmt":"2026-09-19T09:21:05","slug":"coming-soon","status":"publish","type":"page","link":"https:\/\/growthandbe.com\/","title":{"rendered":"coming soon"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38d73ab e-con-full e-flex e-con e-parent\" data-id=\"38d73ab\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c0cfac4 elementor-widget elementor-widget-html\" data-id=\"c0cfac4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- KODE ELEMEN HTML KHUSUS ELEMENTOR WORDPRESS (GROWTH & BE) -->\r\n<!-- Copy & Paste seluruh kode ini langsung ke dalam Widget \"HTML\" di Elementor -->\r\n\r\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<style>\r\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');\r\n  \r\n  \/* Reset Elementor Container Padding & Margins 100% Full-Bleed Edge-to-Edge *\/\r\n  .elementor-section, \r\n  .elementor-container, \r\n  .elementor-column,\r\n  .elementor-widget,\r\n  .elementor-widget-html, \r\n  .elementor-widget-container {\r\n    padding: 0 !important;\r\n    margin: 0 !important;\r\n    max-width: 100% !important;\r\n    width: 100% !important;\r\n  }\r\n\r\n  .gnb-coming-soon-wrapper {\r\n    font-family: 'Plus Jakarta Sans', sans-serif !important;\r\n    background-color: #365ADA !important;\r\n    color: #FFFFFF !important;\r\n    position: fixed !important;\r\n    top: 0 !important;\r\n    left: 0 !important;\r\n    right: 0 !important;\r\n    bottom: 0 !important;\r\n    width: 100vw !important;\r\n    height: 100vh !important;\r\n    z-index: 99999 !important;\r\n    display: flex !important;\r\n    flex-direction: column !important;\r\n    justify-content: space-between !important;\r\n    overflow: hidden !important;\r\n    user-select: none !important;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n  }\r\n\r\n  .gnb-speech-gold {\r\n    background: #FCB837 !important;\r\n    color: #0F172A !important;\r\n    border-radius: 28px !important;\r\n  }\r\n  \r\n  .gnb-speech-aqua {\r\n    background: #51C8FB !important;\r\n    color: #FFFFFF !important;\r\n    border-radius: 28px !important;\r\n  }\r\n\r\n  \/* Force SVG\/Image sizes to prevent giant enlargement in Elementor *\/\r\n  .gnb-logo-img {\r\n    height: 56px !important;\r\n    width: auto !important;\r\n    max-height: 56px !important;\r\n    display: block !important;\r\n    margin: 0 auto !important;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"gnb-coming-soon-wrapper\">\r\n\r\n  <!-- INTERACTIVE CANVAS BACKGROUND -->\r\n  <canvas id=\"antiGravityCanvasGnb\" style=\"position: absolute; top:0; left:0; width:100%; height:100%; z-index:1; pointer-events:auto; cursor:grab;\"><\/canvas>\r\n\r\n  <!-- NAVBAR HEADER (CENTERED LOGO) -->\r\n  <header style=\"position: relative; z-index: 10; max-width: 1280px; width: 100%; margin: 0 auto; padding: 32px 24px; display: flex; align-items: center; justify-content: center; pointer-events: none;\">\r\n    <div style=\"pointer-events: auto; text-align: center;\">\r\n      <img decoding=\"async\" src=\"https:\/\/growthandbe.com\/wp-content\/uploads\/2026\/09\/logo-web.png\" alt=\"Growth&Be Logo\" class=\"gnb-logo-img\" \/>\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <!-- MAIN HERO CONTENT -->\r\n  <main style=\"position: relative; z-index: 10; max-width: 896px; width: 100%; margin: auto; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;\">\r\n\r\n    <!-- COMING SOON BADGE -->\r\n    <div style=\"margin-bottom: 24px; pointer-events: auto;\">\r\n      <div class=\"inline-flex items-center space-x-2 px-5 py-2 rounded-full bg-white\/10 backdrop-blur-md border border-white\/20 text-xs font-black tracking-widest text-[#FCB837] uppercase\">\r\n        <span class=\"w-2.5 h-2.5 rounded-full bg-[#FCB837] animate-ping\"><\/span>\r\n        <span>COMING SOON<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- HERO SLOGAN RIBBON BANNER -->\r\n    <div style=\"margin-bottom: 32px; pointer-events: auto;\">\r\n      <div class=\"inline-block px-7 py-3 rounded-full bg-[#FCB837] text-[#0F172A] font-black text-xs sm:text-base tracking-widest uppercase shadow-2xl shadow-[#FCB837]\/30 transform -rotate-2 hover:rotate-0 transition-transform\">\r\n        KNOW YOURSELF. FIND YOUR WAY.\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- MAIN HEADLINE -->\r\n    <h1 class=\"text-5xl sm:text-7xl md:text-8xl font-black tracking-tight leading-[1.05] mb-8\" style=\"pointer-events: auto; color: #FFFFFF;\">\r\n      Tumbuh Berani,<br>\r\n      <span style=\"color: #FCB837;\">Be Yourself.<\/span>\r\n    <\/h1>\r\n\r\n    <p class=\"text-xl sm:text-2xl text-blue-100 max-w-2xl mb-10 leading-relaxed font-semibold\" style=\"pointer-events: auto;\">\r\n      Platform edukasi & pengembangan diri berbasis ilmu psikologi terstruktur untuk membantumu menemukan versi terbaik dirimu.\r\n    <\/p>\r\n\r\n    <!-- BRAND SPEECH BUBBLE STICKERS -->\r\n    <div class=\"flex flex-wrap justify-center gap-4 mb-4\" style=\"pointer-events: auto;\">\r\n      <div class=\"gnb-speech-gold px-6 py-3 font-black text-sm sm:text-base shadow-xl transform -rotate-3 hover:scale-110 transition-transform cursor-pointer\">\r\n        \ud83d\udcac \"temukan versi terbaikmu\"\r\n      <\/div>\r\n      <div class=\"gnb-speech-aqua px-6 py-3 font-black text-sm sm:text-base shadow-xl transform rotate-3 hover:scale-110 transition-transform cursor-pointer\">\r\n        \ud83d\udc99 \"tumbuh berani, be yourself\"\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/main>\r\n\r\n  <!-- FOOTER -->\r\n  <footer style=\"position: relative; z-index: 10; max-width: 1280px; width: 100%; margin: 0 auto; padding: 32px 24px; border-top: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #BFDBFE; pointer-events: none;\">\r\n    <div style=\"pointer-events: auto; font-weight: 500; text-align: center;\">\r\n      &copy; 2026 <span style=\"font-weight: 700; color: #FFFFFF;\">Growth&Be<\/span>. All Rights Reserved.\r\n    <\/div>\r\n  <\/footer>\r\n\r\n<\/div>\r\n\r\n<!-- INTERACTIVE RIBBON PHYSICS SCRIPT FOR ELEMENTOR -->\r\n<script>\r\n(function() {\r\n  const canvas = document.getElementById('antiGravityCanvasGnb');\r\n  if (!canvas) return;\r\n  const ctx = canvas.getContext('2d');\r\n\r\n  let w, h;\r\n  function resize() {\r\n    w = canvas.width = window.innerWidth;\r\n    h = canvas.height = window.innerHeight;\r\n    initRibbons();\r\n  }\r\n\r\n  const mouse = { x: -1000, y: -1000, isDown: false };\r\n\r\n  window.addEventListener('mousemove', function(e) {\r\n    const rect = canvas.getBoundingClientRect();\r\n    mouse.x = e.clientX - rect.left;\r\n    mouse.y = e.clientY - rect.top;\r\n  });\r\n\r\n  window.addEventListener('mouseleave', function() {\r\n    mouse.x = -1000;\r\n    mouse.y = -1000;\r\n  });\r\n\r\n  window.addEventListener('mousedown', function() { mouse.isDown = true; });\r\n  window.addEventListener('mouseup', function() { mouse.isDown = false; });\r\n\r\n  window.addEventListener('touchmove', function(e) {\r\n    if (e.touches.length > 0) {\r\n      const rect = canvas.getBoundingClientRect();\r\n      mouse.x = e.touches[0].clientX - rect.left;\r\n      mouse.y = e.touches[0].clientY - rect.top;\r\n    }\r\n  });\r\n\r\n  class RibbonLine {\r\n    constructor(color, width, getYPointFunc) {\r\n      this.color = color;\r\n      this.width = width;\r\n      this.getYPointFunc = getYPointFunc;\r\n      this.nodes = [];\r\n      this.numNodes = 50;\r\n      this.initNodes();\r\n    }\r\n\r\n    initNodes() {\r\n      this.nodes = [];\r\n      const spacing = (w + 300) \/ (this.numNodes - 1);\r\n      for (let i = 0; i < this.numNodes; i++) {\r\n        const x = -150 + i * spacing;\r\n        const baseY = this.getYPointFunc(x, w, h);\r\n        this.nodes.push({\r\n          x: x,\r\n          y: baseY,\r\n          baseY: baseY,\r\n          vx: 0,\r\n          vy: 0,\r\n          originalX: x\r\n        });\r\n      }\r\n    }\r\n\r\n    update() {\r\n      for (let i = 0; i < this.nodes.length; i++) {\r\n        const node = this.nodes[i];\r\n        const targetY = node.baseY;\r\n\r\n        const dx = node.x - mouse.x;\r\n        const dy = node.y - mouse.y;\r\n        const dist = Math.sqrt(dx * dx + dy * dy);\r\n        const maxDist = 220;\r\n\r\n        if (dist < maxDist) {\r\n          const force = (1 - dist \/ maxDist) * (mouse.isDown ? 120 : 70);\r\n          const angle = Math.atan2(dy, dx);\r\n          node.vx += Math.cos(angle) * force * 0.18;\r\n          node.vy += Math.sin(angle) * force * 0.18;\r\n        }\r\n\r\n        const springK = 0.05;\r\n        const damping = 0.80;\r\n\r\n        const ax = (node.originalX - node.x) * springK;\r\n        const ay = (targetY - node.y) * springK;\r\n\r\n        node.vx += ax;\r\n        node.vy += ay;\r\n\r\n        node.vx *= damping;\r\n        node.vy *= damping;\r\n\r\n        node.x += node.vx;\r\n        node.y += node.vy;\r\n      }\r\n    }\r\n\r\n    draw() {\r\n      ctx.beginPath();\r\n      ctx.lineWidth = this.width;\r\n      ctx.strokeStyle = this.color;\r\n      ctx.shadowColor = 'transparent';\r\n      ctx.shadowBlur = 0;\r\n\r\n      ctx.moveTo(this.nodes[0].x, this.nodes[0].y);\r\n      for (let i = 1; i < this.nodes.length - 1; i++) {\r\n        const xc = (this.nodes[i].x + this.nodes[i + 1].x) \/ 2;\r\n        const yc = (this.nodes[i].y + this.nodes[i + 1].y) \/ 2;\r\n        ctx.quadraticCurveTo(this.nodes[i].x, this.nodes[i].y, xc, yc);\r\n      }\r\n      ctx.stroke();\r\n    }\r\n  }\r\n\r\n  let ribbons = [];\r\n\r\n  function initRibbons() {\r\n    ribbons = [\r\n      \/\/ Brand Purple Ribbon Curve (#7047EB)\r\n      new RibbonLine('#7047EB', 24, function(x, w, h) {\r\n        return h * 0.5 + Math.sin((x \/ w) * Math.PI * 1.5) * (h * 0.25);\r\n      }),\r\n      \/\/ Sky Aqua Secondary Ribbon Curve (#51C8FB)\r\n      new RibbonLine('#51C8FB', 14, function(x, w, h) {\r\n        return h * 0.65 + Math.cos((x \/ w) * Math.PI * 1.8) * (h * 0.22);\r\n      })\r\n    ];\r\n  }\r\n\r\n  window.addEventListener('resize', resize);\r\n  setTimeout(resize, 300);\r\n\r\n  function render() {\r\n    ctx.clearRect(0, 0, w, h);\r\n    for (let i = 0; i < ribbons.length; i++) {\r\n      ribbons[i].update();\r\n      ribbons[i].draw();\r\n    }\r\n    requestAnimationFrame(render);\r\n  }\r\n  render();\r\n})();\r\n<\/script>\r\n\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>COMING SOON KNOW YOURSELF. FIND YOUR WAY. Tumbuh Berani, Be Yourself. Platform edukasi &#038; pengembangan diri berbasis ilmu psikologi terstruktur untuk membantumu menemukan versi terbaik dirimu. \ud83d\udcac &#8220;temukan versi terbaikmu&#8221; \ud83d\udc99 &#8220;tumbuh berani, be yourself&#8221; &copy; 2026 Growth&#038;Be. All Rights Reserved.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/growthandbe.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/growthandbe.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/growthandbe.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/growthandbe.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/growthandbe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":4,"href":"https:\/\/growthandbe.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/growthandbe.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/growthandbe.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}