{"id":21922,"date":"2026-04-12T09:56:57","date_gmt":"2026-04-12T01:56:57","guid":{"rendered":"https:\/\/believeindustry.company\/?page_id=21922"},"modified":"2026-06-18T09:01:27","modified_gmt":"2026-06-18T01:01:27","slug":"pembinaan-dan-struktur-keluli","status":"publish","type":"page","link":"https:\/\/believeindustry.company\/ms\/construction-and-steel-structure\/","title":{"rendered":"Pembinaan dan Struktur Keluli"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nConstruction & Steel Structure \u2013 All Products | Believe Industry<\/title>\r\n<meta name=\"description\" content=\"Browse all Construction & Steel Structure roll forming machines including purlin machines, deck machines, tile machines, and custom profile systems. All machines are custom-built to your specifications.\">\r\n<style>\r\n\/* ============================================\r\n Design System \u2014 Clean Minimal (Matching Site Style)\r\n ============================================ *\/\r\n:root {\r\n --orange: #E8720C;\r\n --orange-lt: #f97316;\r\n --gray-50: #f9fafb;\r\n --gray-100: #f3f4f6;\r\n --gray-200: #e5e7eb;\r\n --gray-300: #d1d5db;\r\n --gray-400: #9ca3af;\r\n --gray-500: #6b7280;\r\n --gray-600: #4b5563;\r\n --gray-700: #374151;\r\n --gray-800: #1f2937;\r\n --gray-900: #111827;\r\n --font-head: 'Segoe UI', system-ui, -apple-system, sans-serif;\r\n --font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;\r\n --radius-sm: 8px;\r\n --radius-md: 12px;\r\n --radius-lg: 16px;\r\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);\r\n --shadow-md: 0 4px 12px rgba(0,0,0,0.07);\r\n --shadow-lg: 0 10px 30px rgba(0,0,0,0.10);\r\n --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);\r\n}\r\n\r\n\/* ============================================\r\n Reset & Base\r\n ============================================ *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\nbody {\r\n font-family: var(--font-body);\r\n color: var(--gray-800);\r\n background: #fff;\r\n line-height: 1.6;\r\n -webkit-font-smoothing: antialiased;\r\n}\r\n\r\na { color: inherit; text-decoration: none; }\r\nimg { max-width: 100%; display: block; }\r\n\r\n\/* ============================================\r\n Hero Section \u2014 Clean & Minimal\r\n ============================================ *\/\r\n.cat-hero {\r\n background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);\r\n padding: 72px 24px 56px;\r\n text-align: center;\r\n border-bottom: 3px solid var(--orange);\r\n}\r\n\r\n.cat-hero__tag {\r\n display: inline-block;\r\n font-size: 11px;\r\n font-weight: 700;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n color: var(--orange);\r\n background: rgba(232,114,12,0.08);\r\n border: 1px solid rgba(232,114,12,0.18);\r\n padding: 5px 16px;\r\n border-radius: 100px;\r\n margin-bottom: 20px;\r\n}\r\n\r\n.cat-hero__title {\r\n font-family: var(--font-head);\r\n font-size: clamp(28px, 4.5vw, 42px);\r\n font-weight: 800;\r\n color: var(--gray-900);\r\n line-height: 1.15;\r\n margin-bottom: 16px;\r\n letter-spacing: -0.02em;\r\n}\r\n\r\n.cat-hero__desc {\r\n font-size: 15px;\r\n color: var(--gray-500);\r\n line-height: 1.75;\r\n max-width: 560px;\r\n margin: 0 auto 32px;\r\n}\r\n\r\n.cat-hero__btns {\r\n display: flex;\r\n gap: 12px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.cat-hero__btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n padding: 11px 28px;\r\n border-radius: 100px;\r\n border: 1.5px solid var(--gray-300);\r\n color: var(--gray-700);\r\n background: #fff;\r\n transition: var(--transition);\r\n cursor: pointer;\r\n}\r\n.cat-hero__btn:hover {\r\n border-color: var(--gray-400);\r\n background: var(--gray-50);\r\n box-shadow: var(--shadow-sm);\r\n}\r\n.cat-hero__btn--primary {\r\n background: var(--orange);\r\n color: #fff;\r\n border-color: var(--orange);\r\n}\r\n.cat-hero__btn--primary:hover {\r\n background: var(--orange-lt);\r\n border-color: var(--orange-lt);\r\n box-shadow: 0 4px 16px rgba(232,114,12,0.25);\r\n}\r\n\r\n\/* ============================================\r\n Section (Product Grid Area)\r\n ============================================ *\/\r\n.cat-section {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 48px 24px 64px;\r\n}\r\n\r\n.cat-section__header {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n margin-bottom: 32px;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n}\r\n\r\n.cat-section__count {\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--gray-500);\r\n letter-spacing: 0.02em;\r\n}\r\n.cat-section__count em {\r\n font-style: normal;\r\n color: var(--gray-900);\r\n font-weight: 800;\r\n}\r\n\r\n\/* ============================================\r\n Search Bar \u2014 Clean Style\r\n ============================================ *\/\r\n.cat-search {\r\n margin-bottom: 40px;\r\n position: relative;\r\n}\r\n\r\n.cat-search__inner {\r\n display: flex;\r\n align-items: stretch;\r\n border: 1.5px solid var(--gray-200);\r\n border-radius: var(--radius-sm);\r\n background: #fff;\r\n transition: border-color 0.22s, box-shadow 0.22s;\r\n}\r\n.cat-search__inner:focus-within {\r\n border-color: var(--orange);\r\n box-shadow: 0 0 0 3px rgba(232,114,12,0.1), var(--shadow-sm);\r\n}\r\n\r\n.cat-search__icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 48px;\r\n min-width: 48px;\r\n background: var(--gray-50);\r\n border-right: 1px solid var(--gray-200);\r\n border-radius: var(--radius-sm) 0 0 var(--radius-sm);\r\n}\r\n.cat-search__icon svg { opacity: 0.4; }\r\n\r\n.cat-search__input {\r\n flex: 1;\r\n border: none;\r\n outline: none;\r\n font-family: var(--font-body);\r\n font-size: 14px;\r\n font-weight: 500;\r\n color: var(--gray-800);\r\n padding: 12px 14px;\r\n background: transparent;\r\n}\r\n.cat-search__input::placeholder {\r\n color: var(--gray-400);\r\n font-weight: 400;\r\n}\r\n\r\n.cat-search__clear {\r\n display: none;\r\n align-items: center;\r\n justify-content: center;\r\n width: 40px;\r\n min-width: 40px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n color: var(--gray-400);\r\n font-size: 18px;\r\n transition: color 0.2s;\r\n}\r\n.cat-search__clear:hover { color: var(--orange); }\r\n.cat-search__clear.visible { display: flex; }\r\n\r\n.cat-search__match {\r\n font-size: 12px;\r\n color: var(--gray-500);\r\n margin-top: 10px;\r\n min-height: 18px;\r\n font-weight: 500;\r\n}\r\n.cat-search__match em {\r\n font-style: normal;\r\n color: var(--orange);\r\n font-weight: 700;\r\n}\r\n\r\n\/* ============================================\r\n Product Grid\r\n ============================================ *\/\r\n.cat-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\r\n gap: 24px;\r\n}\r\n\r\n\/* ============================================\r\n Product Card\r\n ============================================ *\/\r\n.cat-card {\r\n background: #fff;\r\n border: 1px solid var(--gray-200);\r\n border-radius: var(--radius-md);\r\n overflow: hidden;\r\n transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.cat-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-lg);\r\n border-color: var(--gray-300);\r\n}\r\n\r\n.cat-card__img {\r\n width: 100%;\r\n height: 220px;\r\n object-fit: cover;\r\n display: block;\r\n background: var(--gray-100);\r\n}\r\n\r\n.cat-card__img-placeholder {\r\n width: 100%;\r\n height: 220px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: linear-gradient(135deg, var(--gray-100), var(--gray-200));\r\n color: var(--gray-400);\r\n font-size: 36px;\r\n font-weight: 800;\r\n font-family: var(--font-head);\r\n}\r\n\r\n.cat-card__body {\r\n padding: 24px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n}\r\n\r\n.cat-card__badge {\r\n display: inline-block;\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n color: var(--gray-600);\r\n background: var(--gray-100);\r\n border-radius: 100px;\r\n padding: 3px 10px;\r\n margin-bottom: 12px;\r\n align-self: flex-start;\r\n}\r\n\r\n.cat-card__title {\r\n font-family: var(--font-head);\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--gray-900);\r\n line-height: 1.35;\r\n margin-bottom: 10px;\r\n transition: color 0.2s;\r\n}\r\n.cat-card:hover .cat-card__title {\r\n color: var(--orange);\r\n}\r\n\r\n.cat-card__excerpt {\r\n font-size: 13px;\r\n color: var(--gray-500);\r\n line-height: 1.7;\r\n margin-bottom: 20px;\r\n flex: 1;\r\n}\r\n\r\n.cat-card__link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: var(--orange);\r\n transition: gap 0.2s;\r\n}\r\n.cat-card__link:hover {\r\n gap: 10px;\r\n}\r\n.cat-card__link svg {\r\n transition: transform 0.2s;\r\n}\r\n.cat-card__link:hover svg {\r\n transform: translateX(3px);\r\n}\r\n\r\n\/* Highlight match *\/\r\n.cat-card__title mark,\r\n.cat-card__excerpt mark {\r\n background: rgba(232,114,12,0.15);\r\n color: var(--orange);\r\n border-radius: 2px;\r\n padding: 0 2px;\r\n}\r\n\r\n\/* Empty state *\/\r\n.cat-grid__empty {\r\n display: none;\r\n grid-column: 1 \/ -1;\r\n text-align: center;\r\n padding: 80px 20px;\r\n border: 1px solid var(--gray-200);\r\n border-radius: var(--radius-md);\r\n background: var(--gray-50);\r\n}\r\n.cat-grid__empty.visible { display: block; }\r\n.cat-grid__empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.25; }\r\n.cat-grid__empty-title {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--gray-700);\r\n margin-bottom: 8px;\r\n}\r\n.cat-grid__empty-desc {\r\n font-size: 14px;\r\n color: var(--gray-400);\r\n line-height: 1.7;\r\n}\r\n\r\n\/* ============================================\r\n Loading Skeleton\r\n ============================================ *\/\r\n.cat-skeleton {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));\r\n gap: 24px;\r\n}\r\n.cat-skeleton__card {\r\n background: #fff;\r\n border: 1px solid var(--gray-200);\r\n border-radius: var(--radius-md);\r\n overflow: hidden;\r\n}\r\n.cat-skeleton__img {\r\n width: 100%;\r\n height: 220px;\r\n background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.4s infinite;\r\n}\r\n.cat-skeleton__body {\r\n padding: 24px;\r\n}\r\n.cat-skeleton__line {\r\n height: 12px;\r\n border-radius: 6px;\r\n background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);\r\n background-size: 200% 100%;\r\n animation: shimmer 1.4s infinite;\r\n margin-bottom: 10px;\r\n}\r\n.cat-skeleton__line--short { width: 60%; }\r\n.cat-skeleton__line--long { width: 100%; }\r\n\r\n@keyframes shimmer {\r\n 0% { background-position: 200% 0; }\r\n 100% { background-position: -200% 0; }\r\n}\r\n\r\n\/* Loading badge *\/\r\n.cat-loading-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: var(--gray-500);\r\n}\r\n.cat-loading-badge .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--orange);\r\n animation: pulse 1s infinite;\r\n}\r\n@keyframes pulse {\r\n 0%, 100% { opacity: 0.3; }\r\n 50% { opacity: 1; }\r\n}\r\n\r\n\/* Error state *\/\r\n.cat-error {\r\n display: none;\r\n grid-column: 1 \/ -1;\r\n text-align: center;\r\n padding: 60px 20px;\r\n border: 1px solid var(--gray-200);\r\n border-radius: var(--radius-md);\r\n background: var(--gray-50);\r\n}\r\n.cat-error.visible { display: block; }\r\n.cat-error__icon { font-size: 40px; margin-bottom: 16px; opacity: 0.3; }\r\n.cat-error__title {\r\n font-size: 17px;\r\n font-weight: 700;\r\n color: var(--gray-700);\r\n margin-bottom: 8px;\r\n}\r\n.cat-error__desc {\r\n font-size: 14px;\r\n color: var(--gray-400);\r\n line-height: 1.7;\r\n margin-bottom: 16px;\r\n}\r\n.cat-error__retry {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n color: #fff;\r\n background: var(--orange);\r\n border: 1.5px solid var(--orange);\r\n padding: 9px 24px;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n}\r\n.cat-error__retry:hover {\r\n background: var(--orange-lt);\r\n border-color: var(--orange-lt);\r\n}\r\n\r\n\/* ============================================\r\n CTA Section\r\n ============================================ *\/\r\n.cat-cta {\r\n max-width: 800px;\r\n margin: 64px auto 0;\r\n text-align: center;\r\n background: var(--gray-50);\r\n border: 1px solid var(--gray-200);\r\n border-radius: var(--radius-lg);\r\n padding: 48px 32px;\r\n}\r\n\r\n.cat-cta__title {\r\n font-family: var(--font-head);\r\n font-size: 22px;\r\n font-weight: 800;\r\n color: var(--gray-900);\r\n margin-bottom: 12px;\r\n}\r\n\r\n.cat-cta__desc {\r\n font-size: 14px;\r\n color: var(--gray-500);\r\n line-height: 1.75;\r\n margin-bottom: 28px;\r\n max-width: 480px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.cat-cta__btns {\r\n display: flex;\r\n gap: 12px;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.cat-cta__btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 14px;\r\n font-weight: 600;\r\n padding: 11px 28px;\r\n border-radius: 100px;\r\n transition: var(--transition);\r\n cursor: pointer;\r\n}\r\n.cat-cta__btn--outline {\r\n border: 1.5px solid var(--gray-300);\r\n color: var(--gray-700);\r\n background: #fff;\r\n}\r\n.cat-cta__btn--outline:hover {\r\n border-color: var(--gray-400);\r\n box-shadow: var(--shadow-sm);\r\n}\r\n.cat-cta__btn--primary {\r\n background: var(--orange);\r\n color: #fff;\r\n border: 1.5px solid var(--orange);\r\n}\r\n.cat-cta__btn--primary:hover {\r\n background: var(--orange-lt);\r\n border-color: var(--orange-lt);\r\n box-shadow: 0 4px 16px rgba(232,114,12,0.25);\r\n}\r\n\r\n\/* ============================================\r\n Responsive\r\n ============================================ *\/\r\n@media (max-width: 768px) {\r\n .cat-hero { padding: 48px 16px 40px; }\r\n .cat-section { padding: 32px 16px 48px; }\r\n .cat-grid, .cat-skeleton {\r\n grid-template-columns: 1fr;\r\n gap: 16px;\r\n }\r\n .cat-card__img, .cat-card__img-placeholder, .cat-skeleton__img { height: 180px; }\r\n .cat-hero__btns { flex-direction: column; align-items: center; }\r\n .cat-cta { padding: 32px 20px; }\r\n .cat-cta__btns { flex-direction: column; align-items: center; }\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ============================================\r\n Hero Section\r\n ============================================ -->\r\n<section class=\"cat-hero\">\r\n <div class=\"cat-hero__tag\">Product Catalog<\/div>\r\n <h1 class=\"cat-hero__title\">Construction & Steel Structure<\/h1>\r\n <p class=\"cat-hero__desc\">\r\n Explore our full range of roll forming machines for construction and steel structure applications \u2014 including purlin, deck, tile, and custom profile systems. All machines are custom-built to your profile drawings and production requirements.\r\n <\/p>\r\n <div class=\"cat-hero__btns\">\r\n <a href=\"https:\/\/believeindustry.company\/contact\/\" class=\"cat-hero__btn cat-hero__btn--outline\">About Us<\/a>\r\n <a href=\"https:\/\/believeindustry.company\/contact\/\" class=\"cat-hero__btn cat-hero__btn--primary\">Email Us<\/a>\r\n <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================\r\n Product Section\r\n ============================================ -->\r\n<section class=\"cat-section\">\r\n\r\n <div class=\"cat-section__header\">\r\n <div><\/div>\r\n <span class=\"cat-section__count\" id=\"catCount\">\r\n <span class=\"cat-loading-badge\"><span class=\"dot\"><\/span> Loading products...<\/span>\r\n <\/span>\r\n <\/div>\r\n\r\n <!-- Search Bar -->\r\n <div class=\"cat-search\">\r\n <div class=\"cat-search__inner\">\r\n <div class=\"cat-search__icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#666\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M16 16l5 5\"\/><\/svg>\r\n <\/div>\r\n <input\r\n type=\"text\"\r\n class=\"cat-search__input\"\r\n id=\"catSearchInput\"\r\n placeholder=\"Search machines... e.g. purlin, deck, tile, roof...\"\r\n autocomplete=\"off\"\r\n spellcheck=\"false\"\r\n disabled\r\n >\r\n <button class=\"cat-search__clear\" id=\"catSearchClear\" type=\"button\" aria-label=\"Clear search\">×<\/button>\r\n <\/div>\r\n <div class=\"cat-search__match\" id=\"catSearchMatch\"><\/div>\r\n <\/div>\r\n\r\n <!-- Loading skeleton -->\r\n <div class=\"cat-skeleton\" id=\"catSkeleton\">\r\n <div class=\"cat-skeleton__card\">\r\n <div class=\"cat-skeleton__img\"><\/div>\r\n <div class=\"cat-skeleton__body\">\r\n <div class=\"cat-skeleton__line cat-skeleton__line--short\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--long\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--long\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--short\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat-skeleton__card\">\r\n <div class=\"cat-skeleton__img\"><\/div>\r\n <div class=\"cat-skeleton__body\">\r\n <div class=\"cat-skeleton__line cat-skeleton__line--short\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--long\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--long\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--short\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"cat-skeleton__card\">\r\n <div class=\"cat-skeleton__img\"><\/div>\r\n <div class=\"cat-skeleton__body\">\r\n <div class=\"cat-skeleton__line cat-skeleton__line--short\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--long\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--long\"><\/div>\r\n <div class=\"cat-skeleton__line cat-skeleton__line--short\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Product grid (populated dynamically) -->\r\n <div class=\"cat-grid\" id=\"catGrid\" style=\"display:none;\">\r\n\r\n <!-- Empty state -->\r\n <div class=\"cat-grid__empty\" id=\"catGridEmpty\">\r\n <div class=\"cat-grid__empty-icon\">⌕<\/div>\r\n <div class=\"cat-grid__empty-title\">No Machines Found<\/div>\r\n <div class=\"cat-grid__empty-desc\">Try a different keyword. Search covers machine names and descriptions.<\/div>\r\n <\/div>\r\n\r\n <!-- Error state -->\r\n <div class=\"cat-error\" id=\"catError\">\r\n <div class=\"cat-error__icon\">⚠<\/div>\r\n <div class=\"cat-error__title\">Failed to Load Products<\/div>\r\n <div class=\"cat-error__desc\">There was a problem fetching the latest products. Please check your connection and try again.<\/div>\r\n <button class=\"cat-error__retry\" id=\"catRetry\" type=\"button\">Retry<\/button>\r\n <\/div>\r\n <\/div><!-- \/cat-grid -->\r\n\r\n <!-- CTA -->\r\n <div class=\"cat-cta\">\r\n <h2 class=\"cat-cta__title\">Can't Find The Machine You Need?<\/h2>\r\n <p class=\"cat-cta__desc\">All our machines are custom-built to your profile drawings and production requirements. Contact our engineering team today to discuss your project and get a tailored solution.<\/p>\r\n <div class=\"cat-cta__btns\">\r\n <a href=\"https:\/\/believeindustry.company\/contact\/\" class=\"cat-cta__btn cat-cta__btn--outline\">About Us<\/a>\r\n <a href=\"https:\/\/believeindustry.company\/contact\/\" class=\"cat-cta__btn cat-cta__btn--primary\">Email Us<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\n\/* ============================================\r\n Dynamic Product Loader\r\n Fetches latest products from WordPress REST API\r\n ============================================ *\/\r\n(function () {\r\n 'use strict';\r\n\r\n \/* ===== Configuration ===== *\/\r\n var TAG_SLUG = 'construction-and-steel-structure';\r\n var API_BASE = 'https:\/\/believeindustry.company\/wp-json\/wp\/v2';\r\n\r\n \/* ===== DOM References ===== *\/\r\n var skeleton = document.getElementById('catSkeleton');\r\n var grid = document.getElementById('catGrid');\r\n var countEl = document.getElementById('catCount');\r\n var errorEl = document.getElementById('catError');\r\n var retryBtn = document.getElementById('catRetry');\r\n var emptyEl = document.getElementById('catGridEmpty');\r\n var input = document.getElementById('catSearchInput');\r\n var clearBtn = document.getElementById('catSearchClear');\r\n var matchEl = document.getElementById('catSearchMatch');\r\n\r\n var products = [];\r\n var total = 0;\r\n\r\n \/* ===== Utility Functions ===== *\/\r\n\r\n \/* Debounce *\/\r\n function debounce(fn, ms) {\r\n var timer;\r\n return function () {\r\n clearTimeout(timer);\r\n timer = setTimeout(fn, ms);\r\n };\r\n }\r\n\r\n \/* Strip HTML tags *\/\r\n function stripHtml(html) {\r\n var tmp = document.createElement('div');\r\n tmp.innerHTML = html;\r\n return (tmp.textContent || '').trim();\r\n }\r\n\r\n \/* Truncate text *\/\r\n function truncate(text, max) {\r\n if (text.length <= max) return text;\r\n return text.slice(0, max).replace(\/\\s+\\S*$\/, '') + '...';\r\n }\r\n\r\n \/* Extract a badge\/category label from title *\/\r\n function getBadge(title) {\r\n var t = title.toLowerCase();\r\n if (t.indexOf('purlin') !== -1 && t.indexOf('c\/z') !== -1) return 'C\/Z Purlin';\r\n if (t.indexOf('purlin') !== -1 && t.indexOf('c ') !== -1) return 'C Purlin';\r\n if (t.indexOf('purlin') !== -1 && t.indexOf('z ') !== -1) return 'Z Purlin';\r\n if (t.indexOf('purlin') !== -1) return 'Purlin';\r\n if (t.indexOf('deck') !== -1) return 'Deck';\r\n if (t.indexOf('tile') !== -1) return 'Tile';\r\n if (t.indexOf('roof') !== -1 && t.indexOf('sheet') !== -1) return 'Roof Sheet';\r\n if (t.indexOf('roof') !== -1) return 'Roof';\r\n if (t.indexOf('standing seam') !== -1) return 'Standing Seam';\r\n if (t.indexOf('ibr') !== -1) return 'IBR Sheet';\r\n if (t.indexOf('corrugated') !== -1) return 'Corrugated';\r\n if (t.indexOf('box profile') !== -1) return 'Box Profile';\r\n if (t.indexOf('glazed') !== -1) return 'Glazed Tile';\r\n if (t.indexOf('monterey') !== -1) return 'Monterey';\r\n if (t.indexOf('double layer') !== -1) return 'Double Layer';\r\n if (t.indexOf('b deck') !== -1) return 'B Deck';\r\n if (t.indexOf('klip') !== -1) return 'Klip-Lok';\r\n if (t.indexOf('ag panel') !== -1) return 'AG Panel';\r\n if (t.indexOf('bemo') !== -1) return 'Bemo Sheet';\r\n if (t.indexOf('widespan') !== -1) return 'Widespan';\r\n if (t.indexOf('stud') !== -1) return 'Stud & Track';\r\n if (t.indexOf('ceiling') !== -1) return 'Ceiling Channel';\r\n if (t.indexOf('ridge') !== -1) return 'Ridge Cap';\r\n if (t.indexOf('steel') !== -1) return 'Steel Profile';\r\n return 'Machine';\r\n }\r\n\r\n \/* Fetch with timeout *\/\r\n function fetchJSON(url, timeoutMs) {\r\n return new Promise(function (resolve, reject) {\r\n var controller = new AbortController();\r\n var timer = setTimeout(function () {\r\n controller.abort();\r\n reject(new Error('Request timeout'));\r\n }, timeoutMs || 10000);\r\n\r\n fetch(url, { signal: controller.signal })\r\n .then(function (res) {\r\n clearTimeout(timer);\r\n if (!res.ok) throw new Error('HTTP ' + res.status);\r\n return res.json();\r\n })\r\n .then(function (data) {\r\n clearTimeout(timer);\r\n resolve(data);\r\n })\r\n .catch(function (err) {\r\n clearTimeout(timer);\r\n reject(err);\r\n });\r\n });\r\n }\r\n\r\n \/* ===== Main Loading Logic ===== *\/\r\n\r\n function showSkeleton() {\r\n skeleton.style.display = '';\r\n grid.style.display = 'none';\r\n countEl.innerHTML = '<span class=\"cat-loading-badge\"><span class=\"dot\"><\/span> Loading products...<\/span>';\r\n input.disabled = true;\r\n }\r\n\r\n function hideSkeleton() {\r\n skeleton.style.display = 'none';\r\n grid.style.display = '';\r\n input.disabled = false;\r\n }\r\n\r\n function showError(msg) {\r\n hideSkeleton();\r\n errorEl.classList.add('visible');\r\n countEl.innerHTML = '<em style=\"color:#ef4444;\">Error<\/em>';\r\n }\r\n\r\n \/* Step 1: Get tag ID by slug *\/\r\n function getTagId() {\r\n return fetchJSON(API_BASE + '\/tags?slug=' + TAG_SLUG).then(function (tags) {\r\n if (!tags || tags.length === 0) throw new Error('Tag not found: ' + TAG_SLUG);\r\n return tags[0].id;\r\n });\r\n }\r\n\r\n \/* Step 2: Get all posts with that tag *\/\r\n function getPosts(tagId) {\r\n return fetchJSON(\r\n API_BASE + '\/posts?tags=' + tagId +\r\n '&per_page=100&_fields=id,title,link,excerpt,featured_media'\r\n ).then(function (posts) {\r\n if (!posts || posts.length === 0) throw new Error('No posts found');\r\n return posts;\r\n });\r\n }\r\n\r\n \/* Step 3: Batch get featured media URLs *\/\r\n function getMediaUrls(posts) {\r\n var mediaIds = posts\r\n .map(function (p) { return p.featured_media; })\r\n .filter(function (id) { return id && id > 0; });\r\n\r\n if (mediaIds.length === 0) {\r\n return Promise.resolve({});\r\n }\r\n\r\n return fetchJSON(\r\n API_BASE + '\/media?include=' + mediaIds.join(',') +\r\n '&per_page=100&_fields=id,source_url'\r\n ).then(function (media) {\r\n var map = {};\r\n media.forEach(function (m) { map[m.id] = m.source_url; });\r\n return map;\r\n }).catch(function () {\r\n return {};\r\n });\r\n }\r\n\r\n \/* Step 4: Render cards *\/\r\n function renderCards(posts, mediaMap) {\r\n var html = '';\r\n\r\n var errorHtml = errorEl.outerHTML;\r\n var emptyHtml = emptyEl.outerHTML;\r\n\r\n posts.forEach(function (post) {\r\n var title = stripHtml(post.title.rendered || '');\r\n var excerpt = stripHtml(post.excerpt.rendered || '');\r\n var link = post.link || '#';\r\n var imgUrl = mediaMap[post.featured_media] || '';\r\n var badge = getBadge(title);\r\n\r\n excerpt = truncate(excerpt, 200);\r\n\r\n var imgHtml = imgUrl\r\n ? '<img decoding=\"async\" class=\"cat-card__img\" src=\"' + imgUrl + '\" alt=\"' + escapeAttr(title) + '\" loading=\"lazy\">'\r\n : '<div class=\"cat-card__img-placeholder\">' + escapeHtml(title.charAt(0) || '?') + '<\/div>';\r\n\r\n html += '' +\r\n '<div class=\"cat-card\">' +\r\n imgHtml +\r\n '<div class=\"cat-card__body\">' +\r\n '<span class=\"cat-card__badge\">' + escapeHtml(badge) + '<\/span>' +\r\n '<h3 class=\"cat-card__title\">' + escapeHtml(title) + '<\/h3>' +\r\n '<p class=\"cat-card__excerpt\">' + escapeHtml(excerpt) + '<\/p>' +\r\n '<a href=\"' + link + '\" class=\"cat-card__link\">' +\r\n 'View Details' +\r\n '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M5 12h14M13 6l6 6-6 6\"\/><\/svg>' +\r\n '<\/a>' +\r\n '<\/div>' +\r\n '<\/div>';\r\n });\r\n\r\n html += emptyHtml;\r\n html += errorHtml;\r\n\r\n grid.innerHTML = html;\r\n\r\n errorEl = document.getElementById('catError');\r\n emptyEl = document.getElementById('catGridEmpty');\r\n }\r\n\r\n function escapeHtml(str) {\r\n var div = document.createElement('div');\r\n div.textContent = str;\r\n return div.innerHTML;\r\n }\r\n\r\n function escapeAttr(str) {\r\n return escapeHtml(str).replace(\/\"\/g, '"');\r\n }\r\n\r\n \/* Step 5: Update count + init search *\/\r\n function finalize(posts) {\r\n total = posts.length;\r\n countEl.innerHTML = '<em>' + total + '<\/em>  Machines Available';\r\n\r\n initSearch();\r\n }\r\n\r\n \/* ===== Search Logic ===== *\/\r\n function initSearch() {\r\n var cards = grid.querySelectorAll('.cat-card');\r\n if (!cards.length) return;\r\n\r\n function highlightText(node, keyword) {\r\n if (!keyword || !node) return;\r\n var text = node.textContent;\r\n var idx = text.toLowerCase().indexOf(keyword.toLowerCase());\r\n if (idx === -1) return;\r\n var before = text.slice(0, idx);\r\n var match = text.slice(idx, idx + keyword.length);\r\n var after = text.slice(idx + keyword.length);\r\n node.innerHTML = '';\r\n node.appendChild(document.createTextNode(before));\r\n var mark = document.createElement('mark');\r\n mark.textContent = match;\r\n node.appendChild(mark);\r\n node.appendChild(document.createTextNode(after));\r\n }\r\n\r\n function clearHighlights() {\r\n grid.querySelectorAll('mark').forEach(function (m) {\r\n m.outerHTML = m.textContent;\r\n });\r\n }\r\n\r\n function doSearch() {\r\n var keyword = input.value.trim();\r\n var kw = keyword.toLowerCase();\r\n var visible = 0;\r\n\r\n clearBtn.classList.toggle('visible', keyword.length > 0);\r\n\r\n if (!kw) {\r\n cards.forEach(function (c) { c.style.display = ''; });\r\n clearHighlights();\r\n matchEl.innerHTML = '';\r\n emptyEl.classList.remove('visible');\r\n countEl.querySelector('em').textContent = total;\r\n return;\r\n }\r\n\r\n cards.forEach(function (card) {\r\n var title = card.querySelector('.cat-card__title');\r\n var excerpt = card.querySelector('.cat-card__excerpt');\r\n var badge = card.querySelector('.cat-card__badge');\r\n\r\n var hay = [\r\n title ? title.textContent : '',\r\n excerpt ? stripHtml(excerpt.innerHTML) : '',\r\n badge ? badge.textContent : ''\r\n ].join(' ').toLowerCase();\r\n\r\n if (hay.indexOf(kw) !== -1) {\r\n card.style.display = '';\r\n visible++;\r\n clearHighlights();\r\n if (title) highlightText(title, keyword);\r\n if (excerpt) highlightText(excerpt, keyword);\r\n } else {\r\n card.style.display = 'none';\r\n }\r\n });\r\n\r\n countEl.querySelector('em').textContent = visible;\r\n\r\n if (visible === 0) {\r\n matchEl.innerHTML = '<em>0<\/em>  MATCHES \u2014 Try another keyword';\r\n emptyEl.classList.add('visible');\r\n } else if (visible === total) {\r\n matchEl.innerHTML = '<em>' + visible + '<\/em>  MATCHES \u2014 All machines';\r\n } else {\r\n matchEl.innerHTML = '<em>' + visible + '<\/em>  MATCHES found';\r\n }\r\n\r\n if (visible > 0) emptyEl.classList.remove('visible');\r\n }\r\n\r\n var newInput = input.cloneNode(true);\r\n input.parentNode.replaceChild(newInput, input);\r\n input = newInput;\r\n\r\n input.addEventListener('input', debounce(doSearch, 160));\r\n\r\n clearBtn.addEventListener('click', function () {\r\n input.value = '';\r\n doSearch();\r\n input.focus();\r\n });\r\n\r\n document.addEventListener('keydown', function (e) {\r\n if (e.key === '\/' && document.activeElement !== input) {\r\n e.preventDefault();\r\n input.focus();\r\n }\r\n if (e.key === 'Escape' && document.activeElement === input) {\r\n input.blur();\r\n if (input.value) { input.value = ''; doSearch(); }\r\n }\r\n });\r\n }\r\n\r\n \/* ===== Main Load Function ===== *\/\r\n function loadProducts() {\r\n showSkeleton();\r\n errorEl.classList.remove('visible');\r\n emptyEl.classList.remove('visible');\r\n\r\n getTagId()\r\n .then(function (tagId) {\r\n return getPosts(tagId);\r\n })\r\n .then(function (posts) {\r\n return getMediaUrls(posts).then(function (mediaMap) {\r\n return { posts: posts, mediaMap: mediaMap };\r\n });\r\n })\r\n .then(function (result) {\r\n renderCards(result.posts, result.mediaMap);\r\n hideSkeleton();\r\n finalize(result.posts);\r\n })\r\n .catch(function (err) {\r\n console.error('[Construction & Steel Structure] Load error:', err.message);\r\n showError();\r\n });\r\n }\r\n\r\n \/* Retry button *\/\r\n if (retryBtn) {\r\n retryBtn.addEventListener('click', loadProducts);\r\n }\r\n\r\n \/* Init on page load *\/\r\n loadProducts();\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-ea984a2 e-flex e-con-boxed e-con e-parent\" data-id=\"ea984a2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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>Construction & Steel Structure \u2013 All Products | Believe Industry Product Catalog Construction & Steel Structure Explore our full range of roll forming machines for construction and steel structure applications \u2014 including purlin, deck, tile, and custom profile systems. All machines are custom-built to your profile drawings and production requirements. About Us Email Us Loading […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_wpcom_ai_launchpad_about_page":false,"_wpcom_ai_launchpad_gallery_page":false,"_wpcom_ai_launchpad_contact_page":false,"_wpcom_ai_launchpad_events_page":false,"_wpcom_ai_launchpad_video_page":false,"_wpcom_ai_launchpad_portfolio_piece":false,"footnotes":"","big_sky_generated":false},"tags":[],"class_list":["post-21922","page","type-page","status-publish","hentry"],"blocksy_meta":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P9K5n8-5HA","jetpack_likes_enabled":false,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages\/21922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/comments?post=21922"}],"version-history":[{"count":34,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages\/21922\/revisions"}],"predecessor-version":[{"id":23136,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/pages\/21922\/revisions\/23136"}],"wp:attachment":[{"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/media?parent=21922"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/believeindustry.company\/ms\/wp-json\/wp\/v2\/tags?post=21922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}