{"id":811,"date":"2026-06-21T16:54:17","date_gmt":"2026-06-21T16:54:17","guid":{"rendered":"https:\/\/halawanitechplus.com\/?page_id=811"},"modified":"2026-06-21T16:54:17","modified_gmt":"2026-06-21T16:54:17","slug":"build-your-own-pc","status":"publish","type":"page","link":"https:\/\/halawanitechplus.com\/ar\/build-your-own-pc\/","title":{"rendered":"\u0627\u0628\u0646\u064a \u062c\u0647\u0627\u0632 \u0627\u0644\u0643\u0645\u0628\u064a\u0648\u062a\u0631 \u0627\u0644\u062e\u0627\u0635 \u0628\u0643"},"content":{"rendered":"\n<div id=\"htplus-byopc\">\n<style>\n#htplus-byopc{\n  --gold:#FFC700; --gold-soft:#E8B84B; --gold-deep:#9C7A1F;\n  --charcoal:#16140C; --panel:#1f1c12; --panel-2:#262213;\n  --line:#3a3422; --text:#f5f1e6; --muted:#bdb290;\n  --radius:14px;\n  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;\n  color:var(--text); background:var(--charcoal);\n  max-width:1080px; margin:0 auto; padding:0 0 40px;\n  -webkit-font-smoothing:antialiased;\n}\n#htplus-byopc *{box-sizing:border-box;}\n#htplus-byopc .hero{padding:48px 28px 30px; border-bottom:1px solid var(--line);}\n#htplus-byopc .eyebrow{\n  font-size:12px; letter-spacing:.18em; text-transform:uppercase;\n  color:var(--gold); font-weight:700; margin:0 0 14px;\n}\n#htplus-byopc h1{\n  font-size:clamp(30px,5vw,52px); line-height:1.04; margin:0 0 14px;\n  font-weight:800; letter-spacing:-.02em;\n}\n#htplus-byopc h1 .accent{color:var(--gold);}\n#htplus-byopc .lede{font-size:16px; color:var(--muted); max-width:60ch; margin:0; line-height:1.55;}\n#htplus-byopc .verified{\n  display:inline-flex; align-items:center; gap:9px; margin-top:20px;\n  background:rgba(255,199,0,.08); border:1px solid var(--gold-deep);\n  color:var(--gold-soft); font-size:13px; font-weight:600;\n  padding:9px 15px; border-radius:999px;\n}\n#htplus-byopc .verified svg{flex-shrink:0;}\n\n#htplus-byopc .layout{display:grid; grid-template-columns:1fr 340px; gap:0; align-items:start;}\n@media (max-width:860px){ #htplus-byopc .layout{grid-template-columns:1fr;} }\n\n#htplus-byopc .builder{padding:28px;}\n#htplus-byopc .row{\n  display:grid; grid-template-columns:130px 1fr auto; gap:16px; align-items:center;\n  padding:16px 0; border-bottom:1px solid var(--line);\n}\n@media (max-width:520px){\n  #htplus-byopc .row{grid-template-columns:1fr; gap:8px;}\n  #htplus-byopc .row .price{justify-self:start;}\n}\n#htplus-byopc .cat{\n  font-size:12px; letter-spacing:.1em; text-transform:uppercase;\n  color:var(--muted); font-weight:700; display:flex; align-items:center; gap:9px;\n}\n#htplus-byopc .cat svg{color:var(--gold-soft);}\n#htplus-byopc select{\n  width:100%; appearance:none; -webkit-appearance:none;\n  background:var(--panel-2)\n    url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFC700' stroke-width='2.5'><path d='M6 9l6 6 6-6'\/><\/svg>\")\n    no-repeat right 14px center;\n  border:1px solid var(--line); color:var(--text);\n  font-size:15px; font-family:inherit; font-weight:500;\n  padding:12px 40px 12px 14px; border-radius:10px; cursor:pointer;\n  transition:border-color .15s ease;\n}\n#htplus-byopc select:hover{border-color:var(--gold-deep);}\n#htplus-byopc select:focus{outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);}\n#htplus-byopc .price{font-variant-numeric:tabular-nums; font-weight:600; color:var(--text); min-width:74px; text-align:right; font-size:15px;}\n#htplus-byopc .price .cur{color:var(--muted); font-size:12px; font-weight:600;}\n\n\/* Summary panel *\/\n#htplus-byopc .summary{\n  position:sticky; top:16px; margin:28px 28px 28px 0;\n  background:linear-gradient(180deg,var(--panel),var(--panel-2));\n  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;\n}\n@media (max-width:860px){ #htplus-byopc .summary{margin:0 28px 28px; position:static;} }\n#htplus-byopc .summary-head{padding:20px 22px 16px; border-bottom:1px solid var(--line);}\n#htplus-byopc .summary-head h2{margin:0; font-size:15px; letter-spacing:.04em; text-transform:uppercase; color:var(--gold);}\n#htplus-byopc .summary-list{padding:14px 22px; display:flex; flex-direction:column; gap:10px;}\n#htplus-byopc .sl-row{display:flex; justify-content:space-between; gap:12px; font-size:13px;}\n#htplus-byopc .sl-row .label{color:var(--muted);}\n#htplus-byopc .sl-row .val{color:var(--text); text-align:right; font-variant-numeric:tabular-nums;}\n#htplus-byopc .total{\n  padding:18px 22px; border-top:1px solid var(--line);\n  display:flex; justify-content:space-between; align-items:baseline;\n}\n#htplus-byopc .total .t-label{font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700;}\n#htplus-byopc .total .t-val{font-size:30px; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums;}\n#htplus-byopc .total .t-val .cur{font-size:15px; color:var(--gold-soft); font-weight:700;}\n#htplus-byopc .cta{\n  display:block; width:calc(100% - 44px); margin:0 22px 14px; text-align:center;\n  background:var(--gold); color:var(--charcoal); border:none;\n  font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.01em;\n  padding:15px; border-radius:10px; cursor:pointer; transition:transform .1s ease, background .15s ease;\n}\n#htplus-byopc .cta:hover{background:var(--gold-soft);}\n#htplus-byopc .cta:active{transform:translateY(1px);}\n#htplus-byopc .fineprint{padding:0 22px 20px; font-size:11.5px; color:var(--muted); line-height:1.5;}\n#htplus-byopc .reset{\n  background:none; border:none; color:var(--muted); font-family:inherit;\n  font-size:12px; text-decoration:underline; cursor:pointer; padding:0 0 18px 22px;\n}\n#htplus-byopc .reset:hover{color:var(--gold-soft);}\n<\/style>\n\n<div class=\"hero\">\n  <p class=\"eyebrow\">Halawani Tech Plus \u00b7 Custom Builds<\/p>\n  <h1>Build a PC that&#8217;s <span class=\"accent\">actually yours.<\/span><\/h1>\n  <p class=\"lede\">Pick your parts, watch the price update live, and send it straight to checkout. Assembled, cable-managed, and stress-tested in our Beit Hanina workshop.<\/p>\n  <span class=\"verified\">\n    <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg>\n    Every build is hand-checked by our techs before it ships\n  <\/span>\n<\/div>\n\n<div class=\"layout\">\n  <div class=\"builder\" id=\"builder\"><!-- rows injected --><\/div>\n\n  <aside class=\"summary\">\n    <div class=\"summary-head\"><h2>Your build<\/h2><\/div>\n    <div class=\"summary-list\" id=\"summaryList\"><\/div>\n    <div class=\"total\">\n      <span class=\"t-label\">Total<\/span>\n      <span class=\"t-val\"><span id=\"totalVal\">0<\/span> <span class=\"cur\">\u20aa<\/span><\/span>\n    <\/div>\n    <button class=\"cta\" id=\"checkoutBtn\">Add build to cart<\/button>\n    <button class=\"reset\" id=\"resetBtn\">Reset choices<\/button>\n    <p class=\"fineprint\">Prices are estimates for placeholder parts. Final pricing is confirmed by our team, who verify compatibility before assembly. Swap in live inventory anytime.<\/p>\n  <\/aside>\n<\/div>\n\n<script>\n(function(){\n  \/\/ PLACEHOLDER DATA \u2014 swap names\/prices for live inventory later.\n  \/\/ Single flat pool: customer freely picks one option per category.\n  var CATALOG = [\n    { key:'case', label:'Case', icon:'M4 4h16v16H4z M8 4v16',\n      options:[\n        ['NZXT H5 Flow \u2014 Black', 380],\n        ['Lian Li Lancool 216 \u2014 White', 460],\n        ['Fractal North \u2014 Charcoal\/Wood', 590],\n        ['Corsair 4000D Airflow', 420]\n      ]},\n    { key:'cpu', label:'Processor', icon:'M9 9h6v6H9z M4 9h2 M4 13h2 M18 9h2 M18 13h2 M9 4v2 M13 4v2 M9 18v2 M13 18v2',\n      options:[\n        ['AMD Ryzen 5 7600', 1050],\n        ['AMD Ryzen 7 7800X3D', 1850],\n        ['Intel Core i5-14600K', 1400],\n        ['Intel Core i7-14700K', 1950]\n      ]},\n    { key:'mobo', label:'Motherboard', icon:'M3 3h18v18H3z M7 7h4v4H7z M15 7h2 M15 11h2 M7 15h10',\n      options:[\n        ['B650 Tomahawk (AM5)', 720],\n        ['X670E Steel Legend', 1100],\n        ['B760 Gaming Plus (LGA1700)', 640],\n        ['Z790 Aorus Elite', 1050]\n      ]},\n    { key:'gpu', label:'Graphics', icon:'M2 5h20v12H2z M6 17v3 M14 17v3 M7 9h6 M17 9h.01',\n      options:[\n        ['RTX 4060 8GB', 1250],\n        ['RTX 4070 Super 12GB', 2350],\n        ['RTX 4080 Super 16GB', 4200],\n        ['Radeon RX 7800 XT 16GB', 2150]\n      ]},\n    { key:'ram', label:'Memory', icon:'M3 8h18v8H3z M6 16v2 M10 16v2 M14 16v2 M18 16v2',\n      options:[\n        ['16GB DDR5-6000 (2\u00d78)', 320],\n        ['32GB DDR5-6000 (2\u00d716)', 540],\n        ['64GB DDR5-6000 (2\u00d732)', 980]\n      ]},\n    { key:'storage', label:'Storage', icon:'M4 4h16v16H4z M8 8h.01 M12 8h4',\n      options:[\n        ['1TB NVMe Gen4 SSD', 290],\n        ['2TB NVMe Gen4 SSD', 520],\n        ['2TB NVMe + 2TB HDD', 690]\n      ]},\n    { key:'psu', label:'Power Supply', icon:'M5 5h14v14H5z M9 9l6 6 M15 9l-6 6',\n      options:[\n        ['650W 80+ Gold', 300],\n        ['750W 80+ Gold', 380],\n        ['850W 80+ Gold Modular', 480]\n      ]},\n    { key:'cooler', label:'Cooling', icon:'M12 3v18 M3 12h18 M6 6l12 12 M18 6L6 18',\n      options:[\n        ['Air \u2014 Peerless Assassin 120', 180],\n        ['240mm AIO Liquid', 360],\n        ['360mm AIO Liquid', 520]\n      ]}\n  ];\n\n  var CUR = '\u20aa';\n  var builder = document.getElementById('builder');\n  var summaryList = document.getElementById('summaryList');\n  var totalVal = document.getElementById('totalVal');\n  var state = {};\n\n  function icon(path){\n    return '<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"'+path+'\"\/><\/svg>';\n  }\n\n  CATALOG.forEach(function(cat){\n    state[cat.key] = 0; \/\/ default first option selected\n    var row = document.createElement('div');\n    row.className = 'row';\n    var opts = cat.options.map(function(o,i){\n      return '<option value=\"'+i+'\">'+o[0]+'<\/option>';\n    }).join('');\n    row.innerHTML =\n      '<div class=\"cat\">'+icon(cat.icon)+cat.label+'<\/div>'+\n      '<select data-key=\"'+cat.key+'\" aria-label=\"'+cat.label+'\">'+opts+'<\/select>'+\n      '<div class=\"price\" id=\"price-'+cat.key+'\"><\/div>';\n    builder.appendChild(row);\n  });\n\n  function fmt(n){ return n.toLocaleString('en-US'); }\n\n  function render(){\n    var total = 0;\n    var lines = [];\n    CATALOG.forEach(function(cat){\n      var opt = cat.options[state[cat.key]];\n      total += opt[1];\n      document.getElementById('price-'+cat.key).innerHTML = fmt(opt[1])+' <span class=\"cur\">'+CUR+'<\/span>';\n      lines.push('<div class=\"sl-row\"><span class=\"label\">'+cat.label+'<\/span><span class=\"val\">'+opt[0]+'<\/span><\/div>');\n    });\n    summaryList.innerHTML = lines.join('');\n    totalVal.textContent = fmt(total);\n    return total;\n  }\n\n  builder.addEventListener('change', function(e){\n    if(e.target.tagName === 'SELECT'){\n      state[e.target.getAttribute('data-key')] = parseInt(e.target.value,10);\n      render();\n    }\n  });\n\n  document.getElementById('resetBtn').addEventListener('click', function(){\n    CATALOG.forEach(function(cat){ state[cat.key]=0; });\n    builder.querySelectorAll('select').forEach(function(s){ s.value = 0; });\n    render();\n  });\n\n  document.getElementById('checkoutBtn').addEventListener('click', function(){\n    var total = 0; var spec = [];\n    CATALOG.forEach(function(cat){\n      var opt = cat.options[state[cat.key]];\n      total += opt[1];\n      spec.push(cat.label+': '+opt[0]);\n    });\n    \/\/ On the live site this hands the build to WooCommerce checkout.\n    \/\/ The spec + total travel as a custom line item \/ order note.\n    var msg = 'Custom PC build\\n\\n'+spec.join('\\n')+'\\n\\nEstimated total: '+fmt(total)+' '+CUR+\n              '\\n\\n(Demo: on the live site this adds the build to your cart and continues to checkout.)';\n    alert(msg);\n  });\n\n  render();\n})();\n<\/script>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Halawani Tech Plus \u00b7 Custom Builds Build a PC that&#8217;s actually yours. Pick your parts, watch the price update live, and send it straight to checkout. Assembled, cable-managed, and stress-tested in our Beit Hanina workshop. Every build is hand-checked by our techs before it ships Your build Total 0 \u20aa Add build to cart Reset [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"nf_dc_page":"","footnotes":""},"class_list":["post-811","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/pages\/811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/comments?post=811"}],"version-history":[{"count":2,"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/pages\/811\/revisions"}],"predecessor-version":[{"id":813,"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/pages\/811\/revisions\/813"}],"wp:attachment":[{"href":"https:\/\/halawanitechplus.com\/ar\/wp-json\/wp\/v2\/media?parent=811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}