{"id":81,"date":"2026-09-08T03:22:55","date_gmt":"2026-09-08T03:22:55","guid":{"rendered":"https:\/\/tapakuji.com\/sabda\/hubungi-kami\/"},"modified":"2026-09-18T09:17:00","modified_gmt":"2026-09-18T09:17:00","slug":"hubungi-kami","status":"publish","type":"page","link":"https:\/\/tapakuji.com\/sabda\/hubungi-kami\/","title":{"rendered":"Hubungi Kami"},"content":{"rendered":"\n<style>\n.sabda-contact{\n  --green:#0b3d35;\n  --sage:#78978e;\n  --cream:#f7f5ef;\n  --red:#b3262d;\n  --gold:#d8b15a;\n  --text:#1d2724;\n  --muted:#697571;\n  font-family:Arial,Helvetica,sans-serif;\n  color:var(--text);\n  overflow:hidden;\n}\n.sabda-contact *{box-sizing:border-box}\n.sabda-contact h1,.sabda-contact h2,\n.sabda-contact h3,.sabda-contact p{margin-top:0}\n\n.sc-container{\n  width:min(1180px,calc(100% - 48px));\n  margin:auto;\n}\n.sc-section{padding:100px 0}\n\n.sc-eyebrow{\n  display:flex;\n  align-items:center;\n  gap:12px;\n  text-transform:uppercase;\n  letter-spacing:3px;\n  font-size:12px;\n  font-weight:800;\n  margin-bottom:20px;\n}\n.sc-eyebrow:before{\n  content:\"\";\n  width:38px;\n  height:3px;\n  background:var(--red);\n}\n.sc-title{\n  font-size:clamp(38px,5vw,64px);\n  line-height:1.04;\n  letter-spacing:-2px;\n  margin-bottom:25px;\n}\n.sc-text{\n  color:var(--muted);\n  font-size:17px;\n  line-height:1.85;\n}\n\n\/* HERO *\/\n\n.sc-hero{\n  min-height:580px;\n  display:flex;\n  align-items:center;\n  color:#fff;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(5,38,32,.97),\n      rgba(5,38,32,.72),\n      rgba(5,38,32,.38)\n    ),\n    linear-gradient(135deg,#0b3d35,#78978e);\n}\n.sc-hero-content{max-width:900px}\n.sc-hero .sc-eyebrow{color:#f2dca4}\n.sc-hero .sc-eyebrow:before{background:var(--gold)}\n\n.sc-hero h1{\n  font-size:clamp(54px,8vw,100px);\n  line-height:.9;\n  letter-spacing:-4px;\n  text-transform:uppercase;\n  margin-bottom:30px;\n}\n.sc-hero p{\n  max-width:720px;\n  color:rgba(255,255,255,.82);\n  font-size:18px;\n  line-height:1.8;\n}\n\n\/* INTRO *\/\n\n.sc-intro{background:var(--cream)}\n\n.sc-intro-grid{\n  display:grid;\n  grid-template-columns:.65fr 1.35fr;\n  gap:80px;\n}\n.sc-big-number{\n  font-size:150px;\n  line-height:.8;\n  font-weight:900;\n  color:rgba(11,61,53,.08);\n}\n\n\/* CONTACT *\/\n\n.sc-contact-area{background:#fff}\n\n.sc-contact-grid{\n  display:grid;\n  grid-template-columns:.85fr 1.15fr;\n  gap:80px;\n  align-items:start;\n}\n\n\/* INFO *\/\n\n.sc-info h2{\n  font-size:clamp(36px,5vw,58px);\n  line-height:1.05;\n  letter-spacing:-2px;\n  margin-bottom:25px;\n}\n.sc-info > p{\n  color:var(--muted);\n  line-height:1.8;\n  margin-bottom:40px;\n}\n\n.sc-info-item{\n  padding:25px 0;\n  border-top:1px solid #e1e6e3;\n}\n.sc-info-item small{\n  display:block;\n  color:var(--red);\n  font-size:10px;\n  font-weight:900;\n  letter-spacing:2px;\n  text-transform:uppercase;\n  margin-bottom:10px;\n}\n.sc-info-item strong{\n  display:block;\n  font-size:17px;\n  line-height:1.6;\n}\n\n\/* FORM *\/\n\n.sc-form{\n  background:var(--cream);\n  padding:50px;\n}\n\n.sc-form-header{\n  margin-bottom:35px;\n}\n.sc-form-header h3{\n  font-size:30px;\n  letter-spacing:-1px;\n  margin-bottom:12px;\n}\n.sc-form-header p{\n  color:var(--muted);\n  line-height:1.7;\n  font-size:14px;\n}\n\n.sc-row{\n  display:grid;\n  grid-template-columns:1fr 1fr;\n  gap:18px;\n}\n\n.sc-field{\n  margin-bottom:18px;\n}\n.sc-field label{\n  display:block;\n  font-size:11px;\n  font-weight:800;\n  letter-spacing:1px;\n  text-transform:uppercase;\n  margin-bottom:9px;\n}\n.sc-field input,\n.sc-field select,\n.sc-field textarea{\n  width:100%;\n  border:1px solid #d6ddd9;\n  background:#fff;\n  padding:15px;\n  font-family:inherit;\n  font-size:14px;\n  color:var(--text);\n  outline:none;\n}\n.sc-field input:focus,\n.sc-field select:focus,\n.sc-field textarea:focus{\n  border-color:var(--green);\n}\n.sc-field textarea{\n  min-height:145px;\n  resize:vertical;\n}\n\n.sc-submit{\n  border:0;\n  background:var(--red);\n  color:#fff;\n  padding:17px 27px;\n  font-weight:800;\n  font-size:11px;\n  letter-spacing:1px;\n  cursor:pointer;\n  transition:.25s;\n}\n.sc-submit:hover{\n  transform:translateY(-2px);\n}\n\n\/* IMPORTANT MESSAGE *\/\n\n.sc-note{\n  background:var(--green);\n  color:#fff;\n}\n\n.sc-note-grid{\n  display:grid;\n  grid-template-columns:1.15fr .85fr;\n  gap:80px;\n  align-items:center;\n}\n\n.sc-note .sc-eyebrow{\n  color:#f2dca4;\n}\n.sc-note .sc-eyebrow:before{\n  background:var(--gold);\n}\n.sc-note .sc-text{\n  color:rgba(255,255,255,.75);\n}\n\n.sc-note-box{\n  border-left:1px solid rgba(255,255,255,.3);\n  padding-left:50px;\n}\n.sc-note-box strong{\n  display:block;\n  color:#f2d78f;\n  font-size:30px;\n  line-height:1.3;\n  margin-bottom:15px;\n}\n.sc-note-box span{\n  color:rgba(255,255,255,.72);\n  line-height:1.7;\n}\n\n\/* CTA *\/\n\n.sc-bottom{\n  background:var(--sage);\n  color:#fff;\n  padding:95px 0;\n  text-align:center;\n}\n.sc-bottom-inner{\n  max-width:900px;\n  margin:auto;\n}\n.sc-bottom small{\n  color:#fff1c4;\n  font-size:11px;\n  font-weight:900;\n  letter-spacing:3px;\n}\n.sc-bottom h2{\n  font-size:clamp(42px,6vw,76px);\n  line-height:1;\n  letter-spacing:-3px;\n  margin:28px 0 20px;\n}\n.sc-bottom p{\n  max-width:650px;\n  margin:auto;\n  color:rgba(255,255,255,.78);\n  line-height:1.8;\n}\n\n\/* RESPONSIVE *\/\n\n@media(max-width:900px){\n  .sc-intro-grid,\n  .sc-contact-grid,\n  .sc-note-grid{\n    grid-template-columns:1fr;\n    gap:45px;\n  }\n  .sc-note-box{\n    border-left:0;\n    border-top:1px solid rgba(255,255,255,.3);\n    padding:40px 0 0;\n  }\n}\n\n@media(max-width:650px){\n  .sc-row{grid-template-columns:1fr}\n  .sc-form{padding:35px 25px}\n}\n\n@media(max-width:600px){\n  .sc-container{\n    width:min(100% - 30px,1180px);\n  }\n  .sc-section{padding:70px 0}\n  .sc-hero{min-height:500px}\n  .sc-hero h1{letter-spacing:-2.5px}\n  .sc-bottom{padding:70px 20px}\n}\n<\/style>\n\n\n<div class=\"sabda-contact\">\n\n<!-- HERO -->\n<section class=\"sc-hero\">\n  <div class=\"sc-container\">\n\n    <div class=\"sc-hero-content\">\n\n      <div class=\"sc-eyebrow\">\n        Hubungi Kami\n      <\/div>\n\n      <h1>\n        Bersama Membangunkan Sabak Bernam\n      <\/h1>\n\n      <p>\n        Hubungi SABDA untuk pertanyaan berkaitan pembangunan,\n        projek, pelaburan, kerjasama, pertanian, media dan\n        inisiatif strategik.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n\n<!-- INTRO -->\n<section class=\"sc-section sc-intro\">\n\n  <div class=\"sc-container sc-intro-grid\">\n\n    <div>\n\n      <div class=\"sc-big-number\">\n        01\n      <\/div>\n\n      <div class=\"sc-eyebrow\">\n        Hubungi SABDA\n      <\/div>\n\n    <\/div>\n\n\n    <div>\n\n      <h2 class=\"sc-title\">\n        Ada Pertanyaan atau Cadangan?\n      <\/h2>\n\n      <p class=\"sc-text\">\n        SABDA mengalu-alukan pertanyaan daripada masyarakat,\n        organisasi, pemain industri dan pihak berkepentingan\n        berkaitan pembangunan di Sabak Bernam.\n      <\/p>\n\n      <p class=\"sc-text\">\n        Pilih kategori pertanyaan yang berkaitan supaya\n        maklumat anda dapat disalurkan kepada pihak yang sesuai.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- CONTACT -->\n<section class=\"sc-section sc-contact-area\">\n\n  <div class=\"sc-container sc-contact-grid\">\n\n    <!-- LEFT -->\n    <div class=\"sc-info\">\n\n      <div class=\"sc-eyebrow\">\n        Maklumat Perhubungan\n      <\/div>\n\n      <h2>\n        Mari Berhubung.\n      <\/h2>\n\n      <p>\n        Maklumat perhubungan rasmi boleh dimasukkan di\n        bahagian ini selepas mendapat pengesahan pihak SABDA.\n      <\/p>\n\n\n      <div class=\"sc-info-item\">\n\n        <small>\n          Alamat\n        <\/small>\n\n        <strong>\n          Maklumat alamat rasmi akan dikemas kini.\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"sc-info-item\">\n\n        <small>\n          E-mel\n        <\/small>\n\n        <strong>\n          Maklumat e-mel rasmi akan dikemas kini.\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"sc-info-item\">\n\n        <small>\n          Telefon\n        <\/small>\n\n        <strong>\n          Maklumat telefon rasmi akan dikemas kini.\n        <\/strong>\n\n      <\/div>\n\n\n      <div class=\"sc-info-item\">\n\n        <small>\n          Waktu Operasi\n        <\/small>\n\n        <strong>\n          Maklumat waktu operasi akan dikemas kini.\n        <\/strong>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- RIGHT \/ FORM -->\n    <div class=\"sc-form\">\n\n      <div class=\"sc-form-header\">\n\n        <h3>\n          Hantar Pertanyaan\n        <\/h3>\n\n        <p>\n          Lengkapkan maklumat di bawah untuk menghubungi SABDA.\n        <\/p>\n\n      <\/div>\n\n\n      <!--\n      NOTA:\n      Form ini ialah reka bentuk sahaja.\n      Kita akan sambungkan dengan FormLayer\/Pagelayer\n      selepas semua page siap.\n      -->\n\n      <div class=\"sc-row\">\n\n        <div class=\"sc-field\">\n\n          <label>\n            Nama\n          <\/label>\n\n          <input\n            type=\"text\"\n            placeholder=\"Nama penuh\">\n\n        <\/div>\n\n\n        <div class=\"sc-field\">\n\n          <label>\n            E-mel\n          <\/label>\n\n          <input\n            type=\"email\"\n            placeholder=\"Alamat e-mel\">\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"sc-row\">\n\n        <div class=\"sc-field\">\n\n          <label>\n            No. Telefon\n          <\/label>\n\n          <input\n            type=\"tel\"\n            placeholder=\"No. telefon\">\n\n        <\/div>\n\n\n        <div class=\"sc-field\">\n\n          <label>\n            Organisasi\n          <\/label>\n\n          <input\n            type=\"text\"\n            placeholder=\"Nama organisasi\">\n\n        <\/div>\n\n      <\/div>\n\n\n      <div class=\"sc-field\">\n\n        <label>\n          Jenis Pertanyaan\n        <\/label>\n\n        <select>\n\n          <option>\n            Pilih kategori\n          <\/option>\n\n          <option>\n            Pertanyaan Umum\n          <\/option>\n\n          <option>\n            Pelaburan\n          <\/option>\n\n          <option>\n            Projek &#038; Inisiatif\n          <\/option>\n\n          <option>\n            Pertanian\n          <\/option>\n\n          <option>\n            Media\n          <\/option>\n\n          <option>\n            Kerjasama\n          <\/option>\n\n          <option>\n            Lain-lain\n          <\/option>\n\n        <\/select>\n\n      <\/div>\n\n\n      <div class=\"sc-field\">\n\n        <label>\n          Mesej\n        <\/label>\n\n        <textarea\n          placeholder=\"Tulis pertanyaan anda di sini\"><\/textarea>\n\n      <\/div>\n\n\n      <button\n        class=\"sc-submit\"\n        type=\"button\">\n        HANTAR PERTANYAAN\n      <\/button>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- NOTICE -->\n<section class=\"sc-section sc-note\">\n\n  <div class=\"sc-container sc-note-grid\">\n\n    <div>\n\n      <div class=\"sc-eyebrow\">\n        Kerjasama &#038; Pembangunan\n      <\/div>\n\n      <h2 class=\"sc-title\">\n        Meneroka Peluang Bersama SABDA.\n      <\/h2>\n\n      <p class=\"sc-text\">\n        SABDA merangkumi pelbagai sektor pembangunan termasuk\n        pertanian, perikanan, ekonomi biru, pertanian pintar,\n        inovasi, pelancongan, biodiversiti dan pembangunan komuniti.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"sc-note-box\">\n\n      <strong>\n        Pelaburan.<br>\n        Kerjasama.<br>\n        Inovasi.<br>\n        Komuniti.\n      <\/strong>\n\n      <span>\n        Bersama membentuk ekosistem pembangunan\n        Sabak Bernam yang mampan.\n      <\/span>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<!-- END -->\n<section class=\"sc-bottom\">\n\n  <div class=\"sc-container\">\n\n    <div class=\"sc-bottom-inner\">\n\n      <small>\n        SABAK BERNAM DEVELOPMENT AREA\n      <\/small>\n\n      <h2>\n        Membina Masa Hadapan Bersama.\n      <\/h2>\n\n      <p>\n        Membina ekosistem ekonomi mampan di mana\n        masyarakat, alam semula jadi dan industri\n        berkembang maju bersama.\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hubungi Kami Bersama Membangunkan Sabak Bernam Hubungi SABDA untuk pertanyaan berkaitan pembangunan, projek, pelaburan, kerjasama, pertanian, media dan inisiatif strategik. 01 Hubungi SABDA Ada [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-81","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/pages\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":2,"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/pages\/81\/revisions"}],"predecessor-version":[{"id":118,"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/pages\/81\/revisions\/118"}],"wp:attachment":[{"href":"https:\/\/tapakuji.com\/sabda\/wp-json\/wp\/v2\/media?parent=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}