{"id":2,"date":"2023-11-02T07:13:20","date_gmt":"2023-11-02T07:13:20","guid":{"rendered":"https:\/\/evolvetech.biz.vn\/?page_id=2"},"modified":"2026-04-24T12:36:15","modified_gmt":"2026-04-24T04:36:15","slug":"services","status":"publish","type":"page","link":"https:\/\/evolvetech.biz.vn\/index.php\/services\/","title":{"rendered":"SERVICES"},"content":{"rendered":"\n<style>\n    \/* --- CUSTOM WOW ANIMATIONS FOR SERVICES PAGE --- *\/\n    \n    \/* Global Animation Container *\/\n    .anim-container {\n        position: relative;\n        width: 100%;\n        height: 250px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: #050505;\n        border-radius: 8px;\n        box-shadow: inset 0 0 30px rgba(0,0,0,0.9);\n        overflow: hidden;\n        perspective: 800px;\n    }\n\n    \/* 1. Dashboard Bar Chart Animation *\/\n    .bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 120px; }\n    .bar { width: 20px; background: var(--accent); border-radius: 4px 4px 0 0; box-shadow: 0 0 15px var(--accent-glow); animation: barGraph 1.5s ease-in-out infinite alternate; transform-origin: bottom; }\n    .bar:nth-child(1) { animation-delay: 0.1s; height: 30%; }\n    .bar:nth-child(2) { animation-delay: 0.4s; height: 80%; background: var(--terminal-amber); box-shadow: 0 0 15px rgba(255,183,3,0.4); }\n    .bar:nth-child(3) { animation-delay: 0.2s; height: 50%; }\n    .bar:nth-child(4) { animation-delay: 0.7s; height: 100%; }\n    .bar:nth-child(5) { animation-delay: 0.3s; height: 40%; background: var(--terminal-amber); box-shadow: 0 0 15px rgba(255,183,3,0.4); }\n    @keyframes barGraph { 0% { transform: scaleY(0.6); } 100% { transform: scaleY(1.1); } }\n\n    \/* 2. CRM Network Hub Animation *\/\n    .network-hub { position: relative; width: 160px; height: 160px; }\n    .center-node { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 30px var(--accent); z-index: 2; animation: pulseCore 2s infinite; }\n    .orbit-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px dashed rgba(255, 183, 3, 0.3); border-radius: 50%; animation: spinPath 10s linear infinite; }\n    .orbit-node { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; background: var(--terminal-amber); border-radius: 50%; box-shadow: 0 0 15px var(--terminal-amber); }\n    .orbit-node:nth-child(2) { top: auto; bottom: -8px; }\n    .orbit-node:nth-child(3) { top: 50%; left: -8px; transform: translateY(-50%); }\n    .orbit-node:nth-child(4) { top: 50%; left: auto; right: -8px; transform: translateY(-50%); }\n    @keyframes spinPath { 100% { transform: rotate(360deg); } }\n    @keyframes pulseCore { 0% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0.6); } 70% { box-shadow: 0 0 0 25px rgba(255, 122, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 122, 0, 0); } }\n\n    \/* 3. Tax Scanner Animation *\/\n    .ledger-grid { display: flex; flex-direction: column; gap: 15px; width: 85%; position: relative; }\n    .ledger-row { height: 10px; background: #1a1a1a; border-radius: 5px; overflow: hidden; position: relative; width: 100%; }\n    .ledger-row:nth-child(2) { width: 80%; }\n    .ledger-row:nth-child(3) { width: 95%; }\n    .ledger-row:nth-child(4) { width: 60%; }\n    .ledger-row::after { content: ''; position: absolute; top: 0; left: -100%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, var(--terminal-amber), transparent); animation: scanData 2s linear infinite; }\n    .ledger-row:nth-child(even)::after { animation-delay: 0.5s; background: linear-gradient(90deg, transparent, var(--accent), transparent); }\n    .scanner-line { position: absolute; top: 0; left: -5%; width: 110%; height: 3px; background: var(--accent); box-shadow: 0 0 20px var(--accent); animation: verticalScan 3s ease-in-out infinite alternate; z-index: 5; }\n    @keyframes scanData { 100% { left: 200%; } }\n    @keyframes verticalScan { 0% { top: -10px; } 100% { top: calc(100% + 10px); } }\n\n    \/* 4. Game Engine 3D Core Animation *\/\n    .game-core { position: relative; width: 90px; height: 90px; transform-style: preserve-3d; animation: rotateCore 8s linear infinite; }\n    .cube-face { position: absolute; width: 100%; height: 100%; border: 2px solid var(--accent); background: rgba(255, 122, 0, 0.15); box-shadow: inset 0 0 20px rgba(255, 122, 0, 0.4); display: flex; align-items: center; justify-content: center; }\n    .cube-face::after { content: ''; width: 40%; height: 40%; border: 1px dashed var(--terminal-amber); border-radius: 50%; animation: pulseCore 2s infinite alternate; }\n    .front  { transform: translateZ(45px); }\n    .back   { transform: rotateY(180deg) translateZ(45px); }\n    .right  { transform: rotateY(90deg) translateZ(45px); }\n    .left   { transform: rotateY(-90deg) translateZ(45px); }\n    .top    { transform: rotateX(90deg) translateZ(45px); }\n    .bottom { transform: rotateX(-90deg) translateZ(45px); }\n    @keyframes rotateCore { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } }\n<\/style>\n\n<div class=\"monolith-container\">\n\n    <section class=\"hero-wireframe\" style=\"min-height: 40vh;\">\n        <div class=\"hero-content\" style=\"max-width: 900px; padding: 40px;\">\n            <h1 style=\"font-size: 3rem; background: linear-gradient(90deg, #ffb703, #ff7a00); -webkit-background-clip: text; -webkit-text-fill-color: transparent;\">Solutions Portfolio<\/h1>\n            <p style=\"font-size: 1.1rem; color: var(--text-secondary);\">Purpose-built applications designed to automate workflows, ensure compliance, and scale your daily operations seamlessly.<\/p>\n        <\/div>\n    <\/section>\n\n    <section style=\"padding-top: 50px;\">\n        <div style=\"display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--surface-color); border: 1px solid var(--border-color); padding: 40px; position: relative;\">\n            <div style=\"flex: 1; min-width: 300px;\">\n                <div style=\"color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 10px;\">MODULE 01<\/div>\n                <h2 style=\"border: none; padding: 0; text-shadow: none;\">Business Automation Hubs<\/h2>\n                <p style=\"color: var(--text-secondary); font-size: 1.1rem;\">Say goodbye to manual spreadsheets. We build customized, digital ledgers that automatically track your daily operations, ensuring your records are always accurate and saving you hours of administrative work.<\/p>\n                <ul style=\"color: var(--text-primary); font-family: var(--font-mono); font-size: 0.9rem; line-height: 2; margin-top: 20px; list-style-type: square; padding-left: 20px;\">\n                    <li>Automated Data Entry &#038; Syncing<\/li>\n                    <li>Real-time Financial Dashboards<\/li>\n                    <li>Secure Cloud Storage<\/li>\n                <\/ul>\n            <\/div>\n            <div style=\"flex: 1; min-width: 300px; padding: 20px;\">\n                <div class=\"anim-container\">\n                    <div class=\"bar-chart\">\n                        <div class=\"bar\"><\/div>\n                        <div class=\"bar\"><\/div>\n                        <div class=\"bar\"><\/div>\n                        <div class=\"bar\"><\/div>\n                        <div class=\"bar\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section style=\"padding-top: 20px;\">\n         <div style=\"display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--surface-color); border: 1px solid var(--border-color); padding: 40px; position: relative; flex-direction: row-reverse;\">\n            <div style=\"flex: 1; min-width: 300px;\">\n                <div style=\"color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 10px;\">MODULE 02<\/div>\n                <h2 style=\"border: none; padding: 0; text-shadow: none;\">Internal Management Systems<\/h2>\n                <p style=\"color: var(--text-secondary); font-size: 1.1rem;\">Manage your team, track customer interactions, and handle billing all from one unified dashboard. We create intuitive CRMs tailored exactly to how your specific business actually runs.<\/p>\n                <ul style=\"color: var(--text-primary); font-family: var(--font-mono); font-size: 0.9rem; line-height: 2; margin-top: 20px; list-style-type: square; padding-left: 20px;\">\n                    <li>Staff &#038; Client Portals<\/li>\n                    <li>Automated Invoicing &#038; Tuition Tracking<\/li>\n                    <li>Role-based Security Access<\/li>\n                <\/ul>\n            <\/div>\n            <div style=\"flex: 1; min-width: 300px; padding: 20px;\">\n                <div class=\"anim-container\">\n                    <div class=\"network-hub\">\n                        <div class=\"center-node\"><\/div>\n                        <div class=\"orbit-path\">\n                            <div class=\"orbit-node\"><\/div>\n                            <div class=\"orbit-node\"><\/div>\n                            <div class=\"orbit-node\"><\/div>\n                            <div class=\"orbit-node\"><\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section style=\"padding-top: 20px;\">\n        <div style=\"display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--surface-color); border: 1px solid var(--border-color); padding: 40px; position: relative;\">\n            <div style=\"flex: 1; min-width: 300px;\">\n                <div style=\"color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 10px;\">MODULE 03<\/div>\n                <h2 style=\"border: none; padding: 0; text-shadow: none;\">Tax &#038; Compliance Dashboards<\/h2>\n                <p style=\"color: var(--text-secondary); font-size: 1.1rem;\">With shifting regulations and the push toward digitized systems, manual tracking is a massive liability. We build seamless, tax-ready asset bridges that automatically organize your data, making end-of-year reporting effortless for business households.<\/p>\n                <ul style=\"color: var(--text-primary); font-family: var(--font-mono); font-size: 0.9rem; line-height: 2; margin-top: 20px; list-style-type: square; padding-left: 20px;\">\n                    <li>Digital Tax Ledger Integration<\/li>\n                    <li>Audit-Ready Formatting<\/li>\n                    <li>Automated Compliance Workflows<\/li>\n                <\/ul>\n            <\/div>\n            <div style=\"flex: 1; min-width: 300px; padding: 20px;\">\n                <div class=\"anim-container\">\n                    <div class=\"ledger-grid\">\n                        <div class=\"scanner-line\"><\/div>\n                        <div class=\"ledger-row\"><\/div>\n                        <div class=\"ledger-row\"><\/div>\n                        <div class=\"ledger-row\"><\/div>\n                        <div class=\"ledger-row\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section style=\"padding-top: 20px;\">\n         <div style=\"display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: var(--surface-color); border: 1px solid var(--border-color); padding: 40px; position: relative; flex-direction: row-reverse;\">\n            <div style=\"flex: 1; min-width: 300px;\">\n                <div style=\"color: var(--accent); font-family: var(--font-mono); font-size: 0.9rem; margin-bottom: 10px;\">MODULE 04<\/div>\n                <h2 style=\"border: none; padding: 0; text-shadow: none;\">Mobile Game Development<\/h2>\n                <p style=\"color: var(--text-secondary); font-size: 1.1rem;\">Captivate audiences and build brand loyalty through interactive entertainment. We design and develop high-performance, cross-platform mobile games with engaging mechanics, stunning visuals, and seamless monetization strategies.<\/p>\n                <ul style=\"color: var(--text-primary); font-family: var(--font-mono); font-size: 0.9rem; line-height: 2; margin-top: 20px; list-style-type: square; padding-left: 20px;\">\n                    <li>iOS &#038; Android Native Deployment<\/li>\n                    <li>Gamification &#038; Brand Engagement<\/li>\n                    <li>In-App Purchases &#038; Ad Integration<\/li>\n                <\/ul>\n            <\/div>\n            <div style=\"flex: 1; min-width: 300px; padding: 20px;\">\n                <div class=\"anim-container\">\n                    <div class=\"game-core\">\n                        <div class=\"cube-face front\"><\/div>\n                        <div class=\"cube-face back\"><\/div>\n                        <div class=\"cube-face right\"><\/div>\n                        <div class=\"cube-face left\"><\/div>\n                        <div class=\"cube-face top\"><\/div>\n                        <div class=\"cube-face bottom\"><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <section style=\"text-align: center; padding-bottom: 80px; padding-top: 50px;\">\n        <h2 style=\"border: none; text-shadow: none; margin-bottom: 30px;\">Ready to Upgrade Your Infrastructure?<\/h2>\n        <a href=\"\/index.php\/contact\/\" style=\"display: inline-block; background: transparent; color: var(--accent); border: 2px solid var(--accent); padding: 15px 35px; text-decoration: none; font-family: var(--font-mono); font-weight: bold; text-transform: uppercase; transition: all 0.3s;\" onmouseover=\"this.style.background='var(--accent)'; this.style.color='#000';\" onmouseout=\"this.style.background='transparent'; this.style.color='var(--accent)';\">Initialize Your Project<\/a>\n    <\/section>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Solutions Portfolio Purpose-built applications designed to automate workflows, ensure compliance, and scale your daily operations seamlessly. MODULE 01 Business Automation Hubs Say goodbye to manual spreadsheets. We build customized, digital ledgers that automatically track your daily operations, ensuring your records are always accurate and saving you hours of administrative work. Automated Data Entry &#038; Syncing &#8230; <a title=\"SERVICES\" class=\"read-more\" href=\"https:\/\/evolvetech.biz.vn\/index.php\/services\/\" aria-label=\"Read more about SERVICES\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":6,"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":172,"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/172"}],"wp:attachment":[{"href":"https:\/\/evolvetech.biz.vn\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}