{"id":107,"date":"2026-07-27T10:10:43","date_gmt":"2026-07-27T10:10:43","guid":{"rendered":"https:\/\/anbsmarttech.co.th\/?page_id=107"},"modified":"2026-07-27T10:10:43","modified_gmt":"2026-07-27T10:10:43","slug":"features","status":"publish","type":"page","link":"https:\/\/anbsmarttech.co.th\/?page_id=107","title":{"rendered":"Features"},"content":{"rendered":"<p><section id=\"anb-intro-1\" class=\"anb-section anb-intro anb-bg-canvas anb-intro--centre anb-intro--pad-default anb-intro--shape-soft-blob\" style=\"--anb-intro-body-max:var(--anb-container-narrow);\" data-anb=\"intro\"><span class=\"anb-intro__shape anb-intro__shape--soft-blob\" aria-hidden=\"true\"><\/span><div class=\"anb-container anb-intro__inner\"><h2 class=\"anb-intro__headline anb-ink-accent anb-reveal\">Every section is a decision you only make once.<\/h2><p class=\"anb-intro__sub anb-reveal\">Set your tokens, pick your sections, hand it over.<\/p><div class=\"anb-intro__body anb-reveal\"><p>Design tokens are declared once and inherited everywhere \u2014 so a colour change in the admin panel reaches the hero, the cards, the footer and the block editor in the same breath. Sections stay <a href=\"#library\">independently overridable<\/a> when a page genuinely needs to differ.<\/p>\n<\/div><p class=\"anb-intro__cta anb-reveal\"><a class=\"anb-btn anb-btn--solid anb-btn--default\" href=\"https:\/\/www.anbsmarttech.com\"><span>Explore the section library<\/span><\/a><\/p><\/div><\/section><\/p>\n\n\n<p><section id=\"anb-icons-1\" class=\"anb-section anb-icons anb-bg-canvas anb-icons--align-centre\" style=\"--anb-cols:4;--anb-icon-size:110px;\" data-anb=\"icons\"><div class=\"anb-container\"><header class=\"anb-sec-head anb-sec-head--centre  anb-reveal\"><h2 class=\"anb-sec-head__title anb-ink-ink\">Everything included, nothing bolted on<\/h2><div class=\"anb-sec-head__intro\"><p>The pieces a corporate site needs, built into the theme rather than assembled from eight plugins.<\/p>\n<\/div><\/header><ul class=\"anb-icons__grid\" role=\"list\"><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:0ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#7bcf9c;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M24 6 6 15l18 9 18-9-18-9Z\" \/><path d=\"M6 24l18 9 18-9\" \/><path d=\"M6 33l18 9 18-9\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">Four-layer layouts<\/h3><p class=\"anb-icons__text\">Page template, menu context, section pattern and FSE part each control their own concern.<\/p><\/li><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:70ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#2f80ed;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M24 6a18 18 0 1 0 0 36c2.5 0 4-2 4-4 0-1.2-.5-2-1.3-2.8-.8-.8-1.2-1.6-1.2-2.7 0-2 1.7-3.5 3.7-3.5H33a9 9 0 0 0 9-9C42 12.7 34 6 24 6Z\" \/><circle cx=\"15\" cy=\"21\" r=\"2.4\" \/><circle cx=\"22\" cy=\"14\" r=\"2.4\" \/><circle cx=\"31\" cy=\"16\" r=\"2.4\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">Real design tokens<\/h3><p class=\"anb-icons__text\">One token set drives theme.json, the block editor and every stylesheet at once.<\/p><\/li><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:140ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#9b7bea;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M26 4 10 27h12l-2 17 18-23H26l2-17Z\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">Vite + Tailwind v4<\/h3><p class=\"anb-icons__text\">Hot module reload in development, a hashed manifest build in production.<\/p><\/li><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:210ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#f2b134;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 14h20M36 14h4M8 24h6M22 24h18M8 34h16M32 34h8\" \/><circle cx=\"32\" cy=\"14\" r=\"4\" \/><circle cx=\"18\" cy=\"24\" r=\"4\" \/><circle cx=\"28\" cy=\"34\" r=\"4\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">GUI for everything<\/h3><p class=\"anb-icons__text\">Each section exposes plain-language controls under AnB Corporate Setup.<\/p><\/li><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:280ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#ef5da8;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"24\" cy=\"10\" r=\"4\" \/><path d=\"M10 18h28\" \/><path d=\"M24 18v12\" \/><path d=\"m24 30-6 12M24 30l6 12\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">Accessible by default<\/h3><p class=\"anb-icons__text\">Real landmarks, focus-visible parity and reduced-motion handling in every section.<\/p><\/li><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:350ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#f2711c;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M8 34a18 18 0 1 1 32 0\" \/><path d=\"m24 34 10-11\" \/><circle cx=\"24\" cy=\"34\" r=\"2.6\" \/><path d=\"M8 34h6M34 34h6\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">Light on the wire<\/h3><p class=\"anb-icons__text\">No jQuery, no framework runtime, no render-blocking third-party fonts.<\/p><\/li><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:420ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#56ccf2;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M24 5 8 11v13c0 11 7 17.5 16 19 9-1.5 16-8 16-19V11L24 5Z\" \/><path d=\"m17 24 5 5 10-10\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">Hardened output<\/h3><p class=\"anb-icons__text\">Every field sanitised on save and escaped again on render. No exceptions.<\/p><\/li><li class=\"anb-icons__item anb-reveal\" style=\"--anb-reveal-delay:490ms\"><span class=\"anb-icons__glyph\" style=\"--anb-icon-color:#5b6ef5;--anb-icon-size:110px;\" aria-hidden=\"true\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewbox=\"0 0 48 48\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"24\" cy=\"24\" r=\"18\" \/><path d=\"M6 24h36\" \/><path d=\"M24 6c5 5.5 7.5 11.5 7.5 18S29 36.5 24 42c-5-5.5-7.5-11.5-7.5-18S19 11.5 24 6Z\" \/><\/svg>\n<\/span><h3 class=\"anb-icons__title\">Translation ready<\/h3><p class=\"anb-icons__text\">Full text-domain coverage with a POT file generated from the same source.<\/p><\/li><\/ul><\/div><\/section><\/p>\n\n\n<p><section id=\"anb-split-1\" class=\"anb-section anb-split anb-bg-canvas anb-split--media-left anb-split--valign-centre anb-split--stack-media-first anb-split--shadow-float anb-split--frame-app anb-split--glow\" style=\"--anb-split-cols:50fr 50fr;--anb-media-tilt:0deg;--anb-panel:#7429a5;\" data-anb=\"split\"><div class=\"anb-container anb-split__grid\"><div class=\"anb-split__media anb-reveal anb-reveal--from-side\"><span class=\"anb-split__glow\" aria-hidden=\"true\"><\/span><div class=\"anb-frame anb-frame--app\"><div class=\"anb-frame__chrome\" aria-hidden=\"true\"><span class=\"anb-frame__dot\"><\/span><span class=\"anb-frame__dot\"><\/span><span class=\"anb-frame__dot\"><\/span><\/div><div class=\"anb-frame__body\"><img decoding=\"async\" loading=\"lazy\" class=\"anb-split__img\" src=\"https:\/\/anbsmarttech.co.th\/wp-content\/themes\/anb-studio-pro\/assets\/images\/screen-setup-panel.svg\" alt=\"The AnB Corporate Setup panel with a live section preview\" \/><\/div><div class=\"anb-frame__footer\" aria-hidden=\"true\"><span class=\"anb-frame__pill anb-frame__pill--blue\"><\/span><span class=\"anb-frame__pill anb-frame__pill--accent\"><\/span><\/div><\/div><\/div><div class=\"anb-split__copy anb-reveal\"><h3 class=\"anb-split__heading\">See the whole page before you write a line of CSS<\/h3><div class=\"anb-split__body\"><p>The setup panel previews your token changes against a live section, so the decision you make in the admin is the decision your visitors see. No round-trip through a staging build.<\/p>\n<\/div><p class=\"anb-split__cta\"><a class=\"anb-btn anb-btn--text anb-btn--default\" href=\"#setup\"><span>Open the setup panel<\/span><span class=\"anb-btn__arrow\" aria-hidden=\"true\">&rarr;<\/span><\/a><\/p><\/div><\/div><\/section><\/p>\n\n\n<p><section id=\"anb-split-2\" class=\"anb-section anb-split anb-bg-canvas anb-split--media-right anb-split--valign-centre anb-split--stack-copy-first anb-split--shadow-float anb-split--frame-app anb-split--glow anb-split--wash\" style=\"--anb-split-cols:60fr 40fr;--anb-media-tilt:0deg;--anb-panel:#7429a5;\" data-anb=\"split\"><span class=\"anb-split__wash\" aria-hidden=\"true\"><\/span><div class=\"anb-container anb-split__grid\"><div class=\"anb-split__media anb-reveal anb-reveal--from-side\"><span class=\"anb-split__glow\" aria-hidden=\"true\"><\/span><div class=\"anb-frame anb-frame--app\"><div class=\"anb-frame__chrome\" aria-hidden=\"true\"><span class=\"anb-frame__dot\"><\/span><span class=\"anb-frame__dot\"><\/span><span class=\"anb-frame__dot\"><\/span><\/div><div class=\"anb-frame__body\"><img decoding=\"async\" loading=\"lazy\" class=\"anb-split__img\" src=\"https:\/\/anbsmarttech.co.th\/wp-content\/themes\/anb-studio-pro\/assets\/images\/screen-section-builder.svg\" alt=\"Section composer showing nested layout rows\" \/><\/div><div class=\"anb-frame__footer\" aria-hidden=\"true\"><span class=\"anb-frame__pill anb-frame__pill--blue\"><\/span><span class=\"anb-frame__pill anb-frame__pill--accent\"><\/span><\/div><\/div><\/div><div class=\"anb-split__copy anb-reveal\"><h3 class=\"anb-split__heading\">Compose sections without touching a template file<\/h3><div class=\"anb-split__body\"><p>Reorder, duplicate and restyle sections from one screen. Anything you change is stored as sanitised options and rendered by the same PHP that powers the block patterns.<\/p>\n<\/div><\/div><\/div><\/section><\/p>\n\n\n<p><section id=\"anb-spotlight-1\" class=\"anb-section anb-spotlight anb-bg-canvas anb-spotlight--copy-left anb-spotlight--glow\" style=\"--anb-split-cols:42fr 58fr;--anb-cluster-aspect:4 \/ 3;\" data-anb=\"spotlight\"><div class=\"anb-container\"><header class=\"anb-sec-head anb-sec-head--centre anb-sec-head--chapter anb-reveal\"><h2 class=\"anb-sec-head__title anb-ink-accent\">Depth where it earns its keep<\/h2><p class=\"anb-sec-head__sub\">Layered clusters instead of one flat screenshot.<\/p><div class=\"anb-sec-head__intro\"><p>The spotlight section composes several small cards into one scene, so a feature can be shown from three angles at once without demanding a bespoke illustration.<\/p>\n<\/div><\/header><div class=\"anb-spotlight__split\"><div class=\"anb-spotlight__copy anb-reveal anb-reveal--from-side\"><h3 class=\"anb-spotlight__heading\">Built for the story, not just the screenshot<\/h3><div class=\"anb-spotlight__body\"><p>Position each item by percentage, set its z-index, give it a rotation. Below 992px the whole cluster degrades to a clean vertical stack \u2014 overlapping cards never survive a narrow viewport, so the theme stops pretending they do.<\/p>\n<\/div><p class=\"anb-spotlight__cta\"><a class=\"anb-btn anb-btn--solid anb-btn--default\" href=\"#spec-10\"><span>Read the section spec<\/span><\/a><\/p><\/div><div class=\"anb-cluster\" role=\"group\" aria-label=\"Feature spotlight composition\"><span class=\"anb-cluster__glow\" aria-hidden=\"true\"><\/span><div class=\"anb-cluster__item anb-cluster__item--media anb-reveal\" style=\"--x:0%;--y:0%;--w:78%;--z:1;--rot:0deg;--anb-reveal-delay:0ms;\"><div class=\"anb-cluster__media\"><img decoding=\"async\" loading=\"lazy\" class=\"anb-cluster__img\" src=\"https:\/\/anbsmarttech.co.th\/wp-content\/themes\/anb-studio-pro\/assets\/images\/spotlight-media.svg\" alt=\"Product walkthrough still\" \/><button type=\"button\" class=\"anb-play anb-play--md\"><span class=\"anb-play__glyph\" aria-hidden=\"true\"><\/span><span class=\"screen-reader-text\">Play the feature video<\/span><\/button><\/div><\/div><div class=\"anb-cluster__item anb-cluster__item--card anb-reveal\" style=\"--x:58%;--y:4%;--w:42%;--z:2;--rot:0deg;--anb-reveal-delay:110ms;\"><article class=\"anb-acard\"><img decoding=\"async\" loading=\"lazy\" class=\"anb-acard__thumb\" src=\"https:\/\/anbsmarttech.co.th\/wp-content\/themes\/anb-studio-pro\/assets\/images\/article-thumb.svg\" \/><div class=\"anb-acard__body\"><h4 class=\"anb-acard__title\">Design tokens<\/h4><p class=\"anb-acard__meta\">Guide \u00b7 6 min read<\/p><p class=\"anb-acard__excerpt\">How one token set keeps thirteen sections visually honest.<\/p><span class=\"anb-btn anb-btn--text anb-btn--sm\"><span>Read<\/span><span class=\"anb-btn__arrow\" aria-hidden=\"true\">&rarr;<\/span><\/span><\/div><\/article><\/div><div class=\"anb-cluster__item anb-cluster__item--quote anb-reveal\" style=\"--x:46%;--y:54%;--w:46%;--z:3;--rot:0deg;--anb-reveal-delay:220ms;\"><blockquote class=\"anb-quote\"><span class=\"anb-quote__glyph\" aria-hidden=\"true\">&ldquo;<\/span><p class=\"anb-quote__text\">We replaced four plugins and a child theme with one section library.<\/p><cite class=\"anb-quote__cite\">Priya N. \u2014 Head of Digital<\/cite><\/blockquote><\/div><\/div><\/div><\/div><\/section><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/template-full-width.php","meta":{"_anb_layout":"","_anb_container":"","_anb_spacing":"","_anb_header_part":"","_anb_footer_part":"","_anb_menu_location":"","_anb_palette_variant":"","_anb_hide_title":true,"footnotes":""},"anb_showcase_type":[],"class_list":["post-107","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=\/wp\/v2\/pages\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=107"}],"version-history":[{"count":0,"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=\/wp\/v2\/pages\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=107"}],"wp:term":[{"taxonomy":"anb_showcase_type","embeddable":true,"href":"https:\/\/anbsmarttech.co.th\/index.php?rest_route=%2Fwp%2Fv2%2Fanb_showcase_type&post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}