{"id":420,"date":"2026-05-06T13:16:49","date_gmt":"2026-05-06T13:16:49","guid":{"rendered":"https:\/\/mbti-dev.visibleone.dev\/home-page\/"},"modified":"2026-10-22T07:31:48","modified_gmt":"2026-10-22T07:31:48","slug":"home-page","status":"publish","type":"page","link":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/","title":{"rendered":"\u9996\u9801"},"content":{"rendered":"<!-- if content is short add short-content class name in wrapper  -->\n<section block-name=\"types-card\" class=\"container py-10 md:pb-[84px] md:pt-[60px] background-line-image short-content\">\n    <div class=\"pb-10 md:pb-[60px]\">\n    <div class=\"container-md text-center\">\n        <h1 class=\"heading1 text-primary pb-5\">\n            \u4e86\u89e3\u4f60\u7684\u6027\u683c\uff0e\u767c\u6398\u66f4\u591a\u53ef\u80fd        <\/h1>\n\n        <div class=\"flex flex-col gap-8\">\n            <div class=\"text-body-md text-dark [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal xl:max-w-[1100px] mx-auto\">\n                <p>\n                    <p>\u6bcf\u4f4d\u540c\u5b78\u5728\u9999\u6e2f\u79d1\u6280\u5927\u5b78\uff08HKUST\uff09\u7684\u65c5\u7a0b\u90fd\u8207\u773e\u4e0d\u540c\uff0c\u800c\u4e00\u5207\u90fd\u7531\u8a8d\u8b58\u81ea\u5df1\u958b\u59cb\u3002\u900f\u904e\u9019\u500b\u8da3\u5473\u6e2c\u8a66\uff0c\u63a2\u7d22\u4f60\u7684\u500b\u6027\u7279\u8cea\u3001\u8208\u8da3\u548c\u6f5b\u80fd\uff0c\u4e26\u89e3\u9396\u5c6c\u65bc\u4f60\u7684 HKUST \u6821\u5712\u9ad4\u9a57\uff01\u4f60\u5c07\u7372\u5f97\u5c08\u5c6c\u7684\u6821\u5712\u751f\u6d3b\u6982\u89bd\uff0c\u5305\u62ec\u9069\u5408\u4f60\u7684\u8ab2\u5916\u6d3b\u52d5\u3001\u5b78\u751f\u6d3b\u52d5\uff0c\u4ee5\u53ca\u6821\u5712\u71b1\u9580\u6253\u5361\u548c\u4f11\u9592\u597d\u53bb\u8655\u3002<\/p>\n<p>\u7acb\u5373\u958b\u59cb\u6e2c\u8a66\uff0c\u770b\u770b\u54ea\u7a2e HKUST \u6821\u5712\u751f\u6d3b\u6700\u9069\u5408\u4f60\uff01<\/p>\n                <\/p>\n            <\/div>\n                        <form data-start-test data-test-url=\"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/questions\/\" data-game-url=\"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/steps\/\" data-error-generic=\"Something went wrong. Please check your connection and try again.\" novalidate class=\"flex flex-col gap-8\">\n                <div class=\"w-full md:max-w-[500px] mx-auto\">\n                    <input type=\"email\" name=\"email\" required maxlength=\"100\" autocomplete=\"email\" placeholder=\"\u8f38\u5165\u60a8\u7684\u96fb\u90f5\u5730\u5740\"\n                    aria-label=\"Email address\" aria-describedby=\"start-test-error\"\n                    class=\"p-5 focus-visible:outline-none text-body-md border border-stroke rounded-lg w-full\" \/>\n                    <p id=\"start-test-error\" data-start-test-error role=\"alert\" hidden class=\"pt-1 text-body-sm text-dark-orange text-left\"><\/p>\n                <\/div>\n                <button type=\"submit\" disabled class=\"inline-block w-fit mx-auto px-8 py-3 bg-primary-yellow hover:bg-primary text-primary hover:text-white text-button-lg rounded-xl disabled:opacity-50 disabled:pointer-events-none\">\n                    \u958b\u59cb\u6e2c\u8a66                <\/button>\n            <\/form>\n                    <\/div>\n    <\/div>\n<\/div>    \n    <div class=\"types-viewport sm:mx-10 6xl:mx-[89px] overflow-hidden\">\n        <!-- desktop layout -->\n        <div class=\"types-card-container hidden xl:flex max-lg:items-start gap-4\">\n                        <div class=\"flex items-center gap-[26px] transition-all duration-500 group rounded-[20px] h-[330px] 2xl:h-[345px] 5xl:h-[380px]\" style=\"background-color: #F7E3FF;\">\n                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Global-Connector-1.png\" alt=\"\" class=\"aspect-[228\/320] mx-auto object-contain transition-transform duration-500 pointer-events-none\" \/>\n                                <div class=\"lg:pr-10 py-7 card-content flex-[0_1_65%] max-w-[65%]\">\n                    <div>\n                        <h4 class=\"heading4 text-dark\">\n                            \u5168\u7403\u9023\u7d50\u8005                        <\/h4>\n                        <p class=\"text-body-md text-dark pb-4\">\n                            \u793e\u4ea4\u3001\u652f\u6301\u3001\u4ee5\u4eba\u70ba\u672c                        <\/p>\n                        <div>\n                            <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                            <div class=\"pl-4\">\n                                <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal line-clamp-5 mb-4\">\n                                    <p>\u4f5c\u70ba\u4e00\u500b\u5168\u7403\u9023\u7d50\u8005\uff0c\u6211\u71b1\u8877\u65bc\u5f9e\u6bcf\u4e00\u6b21\u5c0d\u8a71\u4e2d\u5b78\u7fd2\uff0c\u4e26\u5275\u9020\u4e00\u500b\u8b93\u6bcf\u500b\u4eba\u90fd\u611f\u5230\u88ab\u770b\u898b\u3001\u88ab\u91cd\u8996\u7684\u7a7a\u9593\u3002\u5728\u9999\u6e2f\u79d1\u6280\u5927\u5b78\uff0c\u5468\u570d\u74b0\u7e5e\u8457\u4f86\u81ea\u4e16\u754c\u5404\u5730\u7684\u6d3b\u8e8d\u601d\u7dad\uff0c\u6211\u559c\u6b61\u5c07\u4e0d\u540c\u80cc\u666f\u7684\u4eba\u5011\u805a\u96c6\u5728\u4e00\u8d77\uff0c\u5f7c\u6b64\u9023\u7d50\u3001\u5b78\u7fd2\uff0c\u4e26\u4f5c\u70ba\u4e00\u500b\u5168\u7403\u793e\u7fa4\u5171\u540c\u6210\u9577\u3002<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-3\">\n                                                <div>\n                            <p class=\"text-body-sm text-dark !font-bold\">\n                                Srishti GANGULI                            <\/p>\n                            <p class=\"text-body-sm text-dark\">\n                                &#8211; \u7406\u5b78\u58eb\uff08\u751f\u7269\u79d1\u6280\uff09                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"flex items-center gap-[26px] transition-all duration-500 group rounded-[20px] h-[330px] 2xl:h-[345px] 5xl:h-[380px]\" style=\"background-color: #dbf7ff;\">\n                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Visionary-Leader.png\" alt=\"\" class=\"aspect-[228\/320] mx-auto object-contain transition-transform duration-500 pointer-events-none\" \/>\n                                <div class=\"lg:pr-10 py-7 card-content flex-[0_1_65%] max-w-[65%]\">\n                    <div>\n                        <h4 class=\"heading4 text-dark\">\n                            \u9060\u898b\u9818\u5c0e\u8005                        <\/h4>\n                        <p class=\"text-body-md text-dark pb-4\">\n                            \u6709\u689d\u7406\u3001\u5b88\u898f\u3001\u7cbe\u78ba                        <\/p>\n                        <div>\n                            <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                            <div class=\"pl-4\">\n                                <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal line-clamp-5 mb-4\">\n                                    <p>\u4f5c\u70ba\u4e00\u500b\u9060\u898b\u9818\u5c0e\u8005\uff0c\u6211\u61f7\u62b1\u8457\u4f7f\u547d\u611f\u3001\u7d00\u5f8b\u8207\u5949\u737b\u7cbe\u795e\uff0c\u81f4\u529b\u65bc\u5275\u9020\u6709\u610f\u7fa9\u7684\u5f71\u97ff\u3002\u9999\u6e2f\u79d1\u6280\u5927\u5b78\u70ba\u6211\u63d0\u4f9b\u4e86\u6a5f\u6703\uff0c\u8b93\u6211\u80fd\u5c07\u81ea\u5df1\u7684\u60f3\u6cd5\u3001\u62b1\u8ca0\u8207\u5718\u968a\u5408\u4f5c\uff0c\u8f49\u5316\u70ba\u8ab2\u5802\u5167\u5916\u7684\u6b63\u9762\u6210\u679c\uff0c\u4e26\u51dd\u805a\u773e\u4eba\u671d\u5171\u540c\u76ee\u6a19\u9081\u9032\u3002<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-3\">\n                                                <div>\n                            <p class=\"text-body-sm text-dark !font-bold\">\n                                Matthew PANG \u5f6d\u884d\u9716                            <\/p>\n                            <p class=\"text-body-sm text-dark\">\n                                &#8211; \u5de5\u5546\u7ba1\u7406\u5b78\u58eb\uff08\u5e02\u5834\u5b78\uff09                             <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"flex items-center gap-[26px] transition-all duration-500 group rounded-[20px] h-[330px] 2xl:h-[345px] 5xl:h-[380px]\" style=\"background-color: #fef8cb;\">\n                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Puzzle-Cracker-1.png\" alt=\"\" class=\"aspect-[228\/320] mx-auto object-contain transition-transform duration-500 pointer-events-none\" \/>\n                                <div class=\"lg:pr-10 py-7 card-content flex-[0_1_65%] max-w-[65%]\">\n                    <div>\n                        <h4 class=\"heading4 text-dark\">\n                            \u89e3\u8b0e\u9ad8\u624b                        <\/h4>\n                        <p class=\"text-body-md text-dark pb-4\">\n                            \u7406\u6027\u3001\u5206\u6790\u3001\u89e3\u6c7a\u554f\u984c                        <\/p>\n                        <div>\n                            <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                            <div class=\"pl-4\">\n                                <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal line-clamp-5 mb-4\">\n                                    <p>\u6211\u662f\u4e00\u500b\u89e3\u8b0e\u9ad8\u624b\u3002\u6211\u559c\u6b61\u89e3\u6c7a\u554f\u984c\uff0c\u4e0d\u53ea\u662f\u56e0\u70ba\u6211\u60f3\u5f97\u5230\u6b63\u78ba\u7b54\u6848\uff0c\u66f4\u662f\u56e0\u70ba\u6211\u771f\u5fc3\u4eab\u53d7\u62b5\u9054\u7b54\u6848\u7684\u904e\u7a0b\u3002\u89e3\u6c7a\u554f\u984c\u4e4b\u6240\u4ee5\u8b93\u6211\u8208\u596e\uff0c\u662f\u56e0\u70ba\u5b83\u8feb\u4f7f\u6211\u63db\u500b\u89d2\u5ea6\u601d\u8003\u3001\u91cd\u65b0\u6aa2\u8996\u65e2\u6709\u7684\u8a8d\u77e5\uff0c\u4e26\u53bb\u767c\u73fe\u90a3\u4e9b\u4e00\u958b\u59cb\u4e0d\u90a3\u9ebc\u660e\u986f\u7684\u9023\u7d50\u3002<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-3\">\n                                                <div>\n                            <p class=\"text-body-sm text-dark !font-bold\">\n                                Vimbai Norraine ZISENGWE                            <\/p>\n                            <p class=\"text-body-sm text-dark\">\n                                &#8211; \u5de5\u5b78\u58eb\uff08\u5316\u5b78\u5de5\u7a0b\u5b78\uff09                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"flex items-center gap-[26px] transition-all duration-500 group rounded-[20px] h-[330px] 2xl:h-[345px] 5xl:h-[380px]\" style=\"background-color: #d2f7e0;\">\n                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Innovtive-Creator.png\" alt=\"\" class=\"aspect-[228\/320] mx-auto object-contain transition-transform duration-500 pointer-events-none\" \/>\n                                <div class=\"lg:pr-10 py-7 card-content flex-[0_1_65%] max-w-[65%]\">\n                    <div>\n                        <h4 class=\"heading4 text-dark\">\n                            \u5275\u65b0\u5275\u9020\u8005                        <\/h4>\n                        <p class=\"text-body-md text-dark pb-4\">\n                            \u5bcc\u6709\u60f3\u50cf\u529b\u3001\u5be9\u7f8e\u3001\u771f\u5be6                        <\/p>\n                        <div>\n                            <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                            <div class=\"pl-4\">\n                                <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal line-clamp-5 mb-4\">\n                                    <p>\u4f5c\u70ba\u4e00\u500b\u5275\u65b0\u5275\u4f5c\u8005\uff0c\u6211\u559c\u6b61\u63a2\u7d22\u5404\u7a2e\u5404\u6a23\u7684\u4e8b\u7269\u3002\u5f9e\u6211\u5728\u570b\u5916\u7684\u4ea4\u6d41\u8207\u5be6\u7fd2\u7d93\u9a57\uff0c\u5230\u6211\u5728\u9999\u6e2f\u79d1\u6280\u5927\u5b78\u6240\u4fee\u7684\u5404\u7a2e\u8ab2\u7a0b\u3002\u6211\u559c\u6b61\u5728\u65c5\u884c\u4e2d\u5b78\u7fd2\u5404\u985e\u4eba\u6587\u8207\u793e\u6703\u79d1\u5b78\u7684\u4e3b\u984c\uff0c\u9019\u4e0d\u50c5\u62d3\u5c55\u4e86\u6211\u7684\u8996\u91ce\uff0c\u4e5f\u6fc0\u767c\u4e86\u6211\u7684\u5b78\u8853\u8208\u8da3\u3002<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-3\">\n                                                <div>\n                            <p class=\"text-body-sm text-dark !font-bold\">\n                                Yuyu FU  \u4f0f\u5809\u7389                            <\/p>\n                            <p class=\"text-body-sm text-dark\">\n                                &#8211; \u7406\u5b78\u58eb\uff08\u74b0\u7403\u4e2d\u570b\u7814\u7a76\uff09                             <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"flex items-center gap-[26px] transition-all duration-500 group rounded-[20px] h-[330px] 2xl:h-[345px] 5xl:h-[380px]\" style=\"background-color: #dbe9ff;\">\n                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Action-Hero-1.png\" alt=\"\" class=\"aspect-[228\/320] mx-auto object-contain transition-transform duration-500 pointer-events-none\" \/>\n                                <div class=\"lg:pr-10 py-7 card-content flex-[0_1_65%] max-w-[65%]\">\n                    <div>\n                        <h4 class=\"heading4 text-dark\">\n                            \u884c\u52d5\u82f1\u96c4                        <\/h4>\n                        <p class=\"text-body-md text-dark pb-4\">\n                            \u52d9\u5be6\u3001\u76ee\u6a19\u5c0e\u5411\u3001\u76f4\u7387                        <\/p>\n                        <div>\n                            <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                            <div class=\"pl-4\">\n                                <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal line-clamp-5 mb-4\">\n                                    <p>\u4f5c\u70ba\u4e00\u500b\u884c\u52d5\u82f1\u96c4\uff0c\u6211\u66f4\u76f8\u4fe1<strong>\u5be6\u6230\u51fa\u771f\u77e5<\/strong>\u3002\u8207\u5176\u7a7a\u8ac7\u7406\u8ad6\uff0c\u6211\u66f4\u9858\u610f\u76f4\u63a5\u52d5\u624b\u8a66\u3002\u5728\u79d1\u5927\uff0c\u9019\u9ede\u6700\u5177\u9ad4\u53cd\u6620\u5728\u6211\u7684\u8ab2\u7a0b\u9805\u76ee\u548c\u5be6\u7fd2\u7d93\u9a57\u88e1\uff0c\u6211\u6709\u6a5f\u6703\u628a\u6240\u5b78\u7528\u65bc\u5be6\u8e10\uff0c\u5b78\u4ee5\u81f4\u7528\uff0c\u908a\u6e2c\u908a\u4fee\uff0c\u628a\u8a08\u5283\u8b8a\u6210\u5be6\u969b\u6210\u679c<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-3\">\n                                                <div>\n                            <p class=\"text-body-sm text-dark !font-bold\">\n                                Rafael Nevan PRAYOGO                            <\/p>\n                            <p class=\"text-body-sm text-dark\">\n                                &#8211; \u7406\u5b78\u58eb\uff08\u6578\u64da\u79d1\u5b78\u8207\u6280\u8853\uff09                            <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                        <div class=\"flex items-center gap-[26px] transition-all duration-500 group rounded-[20px] h-[330px] 2xl:h-[345px] 5xl:h-[380px]\" style=\"background-color: #ffe4ce;\">\n                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Practical-Achiever.png\" alt=\"\" class=\"aspect-[228\/320] mx-auto object-contain transition-transform duration-500 pointer-events-none\" \/>\n                                <div class=\"lg:pr-10 py-7 card-content flex-[0_1_65%] max-w-[65%]\">\n                    <div>\n                        <h4 class=\"heading4 text-dark\">\n                            \u52d9\u5be6\u6210\u5c31\u8005                        <\/h4>\n                        <p class=\"text-body-md text-dark pb-4\">\n                            \u6709\u689d\u7406\u3001\u5b88\u898f\u3001\u7cbe\u78ba                        <\/p>\n                        <div>\n                            <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                            <div class=\"pl-4\">\n                                <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal line-clamp-5 mb-4\">\n                                    <p>\u4f5c\u70ba\u4e00\u500b\u52d9\u5be6\u6210\u5c31\u8005\uff0c\u9999\u6e2f\u79d1\u6280\u5927\u5b78\u4e0d\u50c5\u63d0\u4f9b\u8ab2\u5802\u77e5\u8b58\uff0c\u66f4\u900f\u904e\u5efa\u7acb\u9f90\u5927\u7684\u6821\u53cb\u7db2\u7d61\u3001\u5bc6\u96c6\u7684\u5be6\u7fd2\u5408\u4f5c\u8a08\u756b\uff0c\u4ee5\u53ca\u591a\u9805\u7522\u5b78\u5408\u4f5c\u9805\u76ee\uff0c\u70ba\u6211\u7684\u6210\u529f\u5960\u5b9a\u57fa\u790e\u3002\u5f9e\u6211\u8e0f\u5165\u6821\u5712\u7684\u7b2c\u4e00\u5929\u8d77\uff0c\u9019\u4e9b\u8cc7\u6e90\u5c31\u70ba\u6211\u63d0\u4f9b\u4e86\u5bf6\u8cb4\u7684\u5be6\u52d9\u7d93\u9a57\u3002<\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-3\">\n                                                <div>\n                            <p class=\"text-body-sm text-dark !font-bold\">\n                                Newt NGUYEN                            <\/p>\n                            <p class=\"text-body-sm text-dark\">\n                                &#8211; \u5de5\u79d1\u6280\u53ca\u7ba1\u7406\u5b78\u96d9\u5b78\u4f4d\u8ab2\u7a0b                             <\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n                    <\/div>\n\n        <!-- tablet and mobile layout -->\n        <div class=\"xl:hidden\">\n            <div class=\"swiper types-card-swiper\">\n                <div class=\"swiper-wrapper\">\n                                        <div class=\"swiper-slide !h-auto\">\n                        <div class=\"!h-full px-5 py-[18px] rounded-[20px] flex flex-col justify-between\" style=\"background-color: #F7E3FF;\">\n                            <div>\n                                                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Global-Connector-1.png\" alt=\"\" class=\"aspect-[280\/237] mx-auto object-contain\" \/>\n                                                                <div class=\"pt-7\">\n                                    <h4 class=\"heading4 text-dark text-center\">\n                                        \u5168\u7403\u9023\u7d50\u8005                                    <\/h4>\n                                    <p class=\"text-body-md text-dark text-center pb-4\">\n                                        \u793e\u4ea4\u3001\u652f\u6301\u3001\u4ee5\u4eba\u70ba\u672c                                    <\/p>\n                                    <div>\n                                        <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                                        <div class=\"pl-4\">\n                                            <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal pb-4\">\n                                                <p><p>\u4f5c\u70ba\u4e00\u500b\u5168\u7403\u9023\u7d50\u8005\uff0c\u6211\u71b1\u8877\u65bc\u5f9e\u6bcf\u4e00\u6b21\u5c0d\u8a71\u4e2d\u5b78\u7fd2\uff0c\u4e26\u5275\u9020\u4e00\u500b\u8b93\u6bcf\u500b\u4eba\u90fd\u611f\u5230\u88ab\u770b\u898b\u3001\u88ab\u91cd\u8996\u7684\u7a7a\u9593\u3002\u5728\u9999\u6e2f\u79d1\u6280\u5927\u5b78\uff0c\u5468\u570d\u74b0\u7e5e\u8457\u4f86\u81ea\u4e16\u754c\u5404\u5730\u7684\u6d3b\u8e8d\u601d\u7dad\uff0c\u6211\u559c\u6b61\u5c07\u4e0d\u540c\u80cc\u666f\u7684\u4eba\u5011\u805a\u96c6\u5728\u4e00\u8d77\uff0c\u5f7c\u6b64\u9023\u7d50\u3001\u5b78\u7fd2\uff0c\u4e26\u4f5c\u70ba\u4e00\u500b\u5168\u7403\u793e\u7fa4\u5171\u540c\u6210\u9577\u3002<\/p>\n<\/p>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-4\">\n                                                                <div>\n                                    <p class=\"text-body-sm text-dark !font-bold\">\n                                        Srishti GANGULI                                    <\/p>\n                                    <p class=\"text-body-sm text-dark\">\n                                        &#8211; \u7406\u5b78\u58eb\uff08\u751f\u7269\u79d1\u6280\uff09                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"swiper-slide !h-auto\">\n                        <div class=\"!h-full px-5 py-[18px] rounded-[20px] flex flex-col justify-between\" style=\"background-color: #dbf7ff;\">\n                            <div>\n                                                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Visionary-Leader.png\" alt=\"\" class=\"aspect-[280\/237] mx-auto object-contain\" \/>\n                                                                <div class=\"pt-7\">\n                                    <h4 class=\"heading4 text-dark text-center\">\n                                        \u9060\u898b\u9818\u5c0e\u8005                                    <\/h4>\n                                    <p class=\"text-body-md text-dark text-center pb-4\">\n                                        \u6709\u689d\u7406\u3001\u5b88\u898f\u3001\u7cbe\u78ba                                    <\/p>\n                                    <div>\n                                        <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                                        <div class=\"pl-4\">\n                                            <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal pb-4\">\n                                                <p><p>\u4f5c\u70ba\u4e00\u500b\u9060\u898b\u9818\u5c0e\u8005\uff0c\u6211\u61f7\u62b1\u8457\u4f7f\u547d\u611f\u3001\u7d00\u5f8b\u8207\u5949\u737b\u7cbe\u795e\uff0c\u81f4\u529b\u65bc\u5275\u9020\u6709\u610f\u7fa9\u7684\u5f71\u97ff\u3002\u9999\u6e2f\u79d1\u6280\u5927\u5b78\u70ba\u6211\u63d0\u4f9b\u4e86\u6a5f\u6703\uff0c\u8b93\u6211\u80fd\u5c07\u81ea\u5df1\u7684\u60f3\u6cd5\u3001\u62b1\u8ca0\u8207\u5718\u968a\u5408\u4f5c\uff0c\u8f49\u5316\u70ba\u8ab2\u5802\u5167\u5916\u7684\u6b63\u9762\u6210\u679c\uff0c\u4e26\u51dd\u805a\u773e\u4eba\u671d\u5171\u540c\u76ee\u6a19\u9081\u9032\u3002<\/p>\n<\/p>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-4\">\n                                                                <div>\n                                    <p class=\"text-body-sm text-dark !font-bold\">\n                                        Matthew PANG \u5f6d\u884d\u9716                                    <\/p>\n                                    <p class=\"text-body-sm text-dark\">\n                                        &#8211; \u5de5\u5546\u7ba1\u7406\u5b78\u58eb\uff08\u5e02\u5834\u5b78\uff09                                     <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"swiper-slide !h-auto\">\n                        <div class=\"!h-full px-5 py-[18px] rounded-[20px] flex flex-col justify-between\" style=\"background-color: #fef8cb;\">\n                            <div>\n                                                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Puzzle-Cracker-1.png\" alt=\"\" class=\"aspect-[280\/237] mx-auto object-contain\" \/>\n                                                                <div class=\"pt-7\">\n                                    <h4 class=\"heading4 text-dark text-center\">\n                                        \u89e3\u8b0e\u9ad8\u624b                                    <\/h4>\n                                    <p class=\"text-body-md text-dark text-center pb-4\">\n                                        \u7406\u6027\u3001\u5206\u6790\u3001\u89e3\u6c7a\u554f\u984c                                    <\/p>\n                                    <div>\n                                        <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                                        <div class=\"pl-4\">\n                                            <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal pb-4\">\n                                                <p><p>\u6211\u662f\u4e00\u500b\u89e3\u8b0e\u9ad8\u624b\u3002\u6211\u559c\u6b61\u89e3\u6c7a\u554f\u984c\uff0c\u4e0d\u53ea\u662f\u56e0\u70ba\u6211\u60f3\u5f97\u5230\u6b63\u78ba\u7b54\u6848\uff0c\u66f4\u662f\u56e0\u70ba\u6211\u771f\u5fc3\u4eab\u53d7\u62b5\u9054\u7b54\u6848\u7684\u904e\u7a0b\u3002\u89e3\u6c7a\u554f\u984c\u4e4b\u6240\u4ee5\u8b93\u6211\u8208\u596e\uff0c\u662f\u56e0\u70ba\u5b83\u8feb\u4f7f\u6211\u63db\u500b\u89d2\u5ea6\u601d\u8003\u3001\u91cd\u65b0\u6aa2\u8996\u65e2\u6709\u7684\u8a8d\u77e5\uff0c\u4e26\u53bb\u767c\u73fe\u90a3\u4e9b\u4e00\u958b\u59cb\u4e0d\u90a3\u9ebc\u660e\u986f\u7684\u9023\u7d50\u3002<\/p>\n<\/p>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-4\">\n                                                                <div>\n                                    <p class=\"text-body-sm text-dark !font-bold\">\n                                        Vimbai Norraine ZISENGWE                                    <\/p>\n                                    <p class=\"text-body-sm text-dark\">\n                                        &#8211; \u5de5\u5b78\u58eb\uff08\u5316\u5b78\u5de5\u7a0b\u5b78\uff09                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"swiper-slide !h-auto\">\n                        <div class=\"!h-full px-5 py-[18px] rounded-[20px] flex flex-col justify-between\" style=\"background-color: #d2f7e0;\">\n                            <div>\n                                                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Innovtive-Creator.png\" alt=\"\" class=\"aspect-[280\/237] mx-auto object-contain\" \/>\n                                                                <div class=\"pt-7\">\n                                    <h4 class=\"heading4 text-dark text-center\">\n                                        \u5275\u65b0\u5275\u9020\u8005                                    <\/h4>\n                                    <p class=\"text-body-md text-dark text-center pb-4\">\n                                        \u5bcc\u6709\u60f3\u50cf\u529b\u3001\u5be9\u7f8e\u3001\u771f\u5be6                                    <\/p>\n                                    <div>\n                                        <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                                        <div class=\"pl-4\">\n                                            <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal pb-4\">\n                                                <p><p>\u4f5c\u70ba\u4e00\u500b\u5275\u65b0\u5275\u4f5c\u8005\uff0c\u6211\u559c\u6b61\u63a2\u7d22\u5404\u7a2e\u5404\u6a23\u7684\u4e8b\u7269\u3002\u5f9e\u6211\u5728\u570b\u5916\u7684\u4ea4\u6d41\u8207\u5be6\u7fd2\u7d93\u9a57\uff0c\u5230\u6211\u5728\u9999\u6e2f\u79d1\u6280\u5927\u5b78\u6240\u4fee\u7684\u5404\u7a2e\u8ab2\u7a0b\u3002\u6211\u559c\u6b61\u5728\u65c5\u884c\u4e2d\u5b78\u7fd2\u5404\u985e\u4eba\u6587\u8207\u793e\u6703\u79d1\u5b78\u7684\u4e3b\u984c\uff0c\u9019\u4e0d\u50c5\u62d3\u5c55\u4e86\u6211\u7684\u8996\u91ce\uff0c\u4e5f\u6fc0\u767c\u4e86\u6211\u7684\u5b78\u8853\u8208\u8da3\u3002<\/p>\n<\/p>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-4\">\n                                                                <div>\n                                    <p class=\"text-body-sm text-dark !font-bold\">\n                                        Yuyu FU  \u4f0f\u5809\u7389                                    <\/p>\n                                    <p class=\"text-body-sm text-dark\">\n                                        &#8211; \u7406\u5b78\u58eb\uff08\u74b0\u7403\u4e2d\u570b\u7814\u7a76\uff09                                     <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"swiper-slide !h-auto\">\n                        <div class=\"!h-full px-5 py-[18px] rounded-[20px] flex flex-col justify-between\" style=\"background-color: #dbe9ff;\">\n                            <div>\n                                                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Action-Hero-1.png\" alt=\"\" class=\"aspect-[280\/237] mx-auto object-contain\" \/>\n                                                                <div class=\"pt-7\">\n                                    <h4 class=\"heading4 text-dark text-center\">\n                                        \u884c\u52d5\u82f1\u96c4                                    <\/h4>\n                                    <p class=\"text-body-md text-dark text-center pb-4\">\n                                        \u52d9\u5be6\u3001\u76ee\u6a19\u5c0e\u5411\u3001\u76f4\u7387                                    <\/p>\n                                    <div>\n                                        <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                                        <div class=\"pl-4\">\n                                            <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal pb-4\">\n                                                <p><p>\u4f5c\u70ba\u4e00\u500b\u884c\u52d5\u82f1\u96c4\uff0c\u6211\u66f4\u76f8\u4fe1<strong>\u5be6\u6230\u51fa\u771f\u77e5<\/strong>\u3002\u8207\u5176\u7a7a\u8ac7\u7406\u8ad6\uff0c\u6211\u66f4\u9858\u610f\u76f4\u63a5\u52d5\u624b\u8a66\u3002\u5728\u79d1\u5927\uff0c\u9019\u9ede\u6700\u5177\u9ad4\u53cd\u6620\u5728\u6211\u7684\u8ab2\u7a0b\u9805\u76ee\u548c\u5be6\u7fd2\u7d93\u9a57\u88e1\uff0c\u6211\u6709\u6a5f\u6703\u628a\u6240\u5b78\u7528\u65bc\u5be6\u8e10\uff0c\u5b78\u4ee5\u81f4\u7528\uff0c\u908a\u6e2c\u908a\u4fee\uff0c\u628a\u8a08\u5283\u8b8a\u6210\u5be6\u969b\u6210\u679c<\/p>\n<\/p>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-4\">\n                                                                <div>\n                                    <p class=\"text-body-sm text-dark !font-bold\">\n                                        Rafael Nevan PRAYOGO                                    <\/p>\n                                    <p class=\"text-body-sm text-dark\">\n                                        &#8211; \u7406\u5b78\u58eb\uff08\u6578\u64da\u79d1\u5b78\u8207\u6280\u8853\uff09                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                        <div class=\"swiper-slide !h-auto\">\n                        <div class=\"!h-full px-5 py-[18px] rounded-[20px] flex flex-col justify-between\" style=\"background-color: #ffe4ce;\">\n                            <div>\n                                                                <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/uploads\/2026\/09\/Practical-Achiever.png\" alt=\"\" class=\"aspect-[280\/237] mx-auto object-contain\" \/>\n                                                                <div class=\"pt-7\">\n                                    <h4 class=\"heading4 text-dark text-center\">\n                                        \u52d9\u5be6\u6210\u5c31\u8005                                    <\/h4>\n                                    <p class=\"text-body-md text-dark text-center pb-4\">\n                                        \u6709\u689d\u7406\u3001\u5b88\u898f\u3001\u7cbe\u78ba                                    <\/p>\n                                    <div>\n                                        <img decoding=\"async\" src=\"https:\/\/mbti-dev.visibleone.dev\/wp-content\/themes\/hkust-mbti\/public\/images\/uni-type\/quote.svg\" alt=\"\">\n                                        <div class=\"pl-4\">\n                                            <div class=\"text-body-md text-dark [&#038;_*]:italic [&#038;_*]:text-body-md [&#038;_*]:text-dark [&#038;_ul]:pl-4 [&#038;_ol]:pl-4 [&#038;_ul]:list-disc [&#038;_ol]:list-decimal pb-4\">\n                                                <p><p>\u4f5c\u70ba\u4e00\u500b\u52d9\u5be6\u6210\u5c31\u8005\uff0c\u9999\u6e2f\u79d1\u6280\u5927\u5b78\u4e0d\u50c5\u63d0\u4f9b\u8ab2\u5802\u77e5\u8b58\uff0c\u66f4\u900f\u904e\u5efa\u7acb\u9f90\u5927\u7684\u6821\u53cb\u7db2\u7d61\u3001\u5bc6\u96c6\u7684\u5be6\u7fd2\u5408\u4f5c\u8a08\u756b\uff0c\u4ee5\u53ca\u591a\u9805\u7522\u5b78\u5408\u4f5c\u9805\u76ee\uff0c\u70ba\u6211\u7684\u6210\u529f\u5960\u5b9a\u57fa\u790e\u3002\u5f9e\u6211\u8e0f\u5165\u6821\u5712\u7684\u7b2c\u4e00\u5929\u8d77\uff0c\u9019\u4e9b\u8cc7\u6e90\u5c31\u70ba\u6211\u63d0\u4f9b\u4e86\u5bf6\u8cb4\u7684\u5be6\u52d9\u7d93\u9a57\u3002<\/p>\n<\/p>\n                                            <\/div>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"flex items-center flex-cols md:flex-row gap-3 pl-4\">\n                                                                <div>\n                                    <p class=\"text-body-sm text-dark !font-bold\">\n                                        Newt NGUYEN                                    <\/p>\n                                    <p class=\"text-body-sm text-dark\">\n                                        &#8211; \u5de5\u79d1\u6280\u53ca\u7ba1\u7406\u5b78\u96d9\u5b78\u4f4d\u8ab2\u7a0b                                     <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <\/div>\n\n                <div class=\"flex items-center justify-center gap-4 pt-8\">\n                    <div class=\"types-button-prev w-8 h-8 flex items-center justify-center rounded-full bg-light-violet [&#038;.swiper-button-disabled]:opacity-30\">\n                        <svg class=\"rotate-180\" width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.286678 11.7235C0.455562 11.9005 0.684492 12 0.923182 12C1.16187 12 1.3908 11.9005 1.55969 11.7235L7 6.01221L1.55969 0.300954C1.47723 0.208052 1.37779 0.133539 1.2673 0.0818575C1.15681 0.0301764 1.03754 0.00238726 0.916604 0.000147159C0.795664 -0.00209294 0.675534 0.0212619 0.56338 0.0688192C0.451225 0.116376 0.349344 0.187161 0.263814 0.276951C0.178284 0.366741 0.110856 0.473697 0.0655551 0.591437C0.0202537 0.709177 -0.00199366 0.83529 0.00014019 0.962253C0.00227404 1.08922 0.0287452 1.21443 0.0779748 1.33042C0.127204 1.4464 0.198184 1.5508 0.286678 1.63736L4.45398 6.01221L0.286678 10.3871C0.118003 10.5644 0.0232606 10.8047 0.0232606 11.0553C0.0232606 11.3058 0.118003 11.5462 0.286678 11.7235Z\" fill=\"#1A237E\"\/>\n                        <\/svg>\n                    <\/div>\n                    <div class=\"swiper-pagination !static !w-auto [&#038;_.swiper-pagination-bullet]:w-2 [&#038;_.swiper-pagination-bullet]:h-[6px] [&#038;_.swiper-pagination-bullet]:bg-light-violet [&#038;_.swiper-pagination-bullet]:opacity-100 [&#038;_.swiper-pagination-bullet]:rounded-full [&#038;_.swiper-pagination-bullet-active]:!w-8 [&#038;_.swiper-pagination-bullet-active]:!bg-primary\"><\/div>\n                    <div class=\"types-button-next w-8 h-8 flex items-center justify-center rounded-full bg-light-violet [&#038;.swiper-button-disabled]:opacity-30\">\n                        <svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0.286678 11.7235C0.455562 11.9005 0.684492 12 0.923182 12C1.16187 12 1.3908 11.9005 1.55969 11.7235L7 6.01221L1.55969 0.300954C1.47723 0.208052 1.37779 0.133539 1.2673 0.0818575C1.15681 0.0301764 1.03754 0.00238726 0.916604 0.000147159C0.795664 -0.00209294 0.675534 0.0212619 0.56338 0.0688192C0.451225 0.116376 0.349344 0.187161 0.263814 0.276951C0.178284 0.366741 0.110856 0.473697 0.0655551 0.591437C0.0202537 0.709177 -0.00199366 0.83529 0.00014019 0.962253C0.00227404 1.08922 0.0287452 1.21443 0.0779748 1.33042C0.127204 1.4464 0.198184 1.5508 0.286678 1.63736L4.45398 6.01221L0.286678 10.3871C0.118003 10.5644 0.0232606 10.8047 0.0232606 11.0553C0.0232606 11.3058 0.118003 11.5462 0.286678 11.7235Z\" fill=\"#1A237E\"\/>\n                        <\/svg>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<div x-data=\"{ isGameConfirmOpen: false, gameOpen: false, testUrl: '', gameUrl: '' }\"\n    @start-test-completed.window=\"gameOpen = $event.detail.gameOpen; testUrl = $event.detail.testUrl; gameUrl = $event.detail.gameUrl; isGameConfirmOpen = true; $nextTick(function () { $refs.gameConfirmClose.focus({ preventScroll: true }); })\"\n    @keydown.escape.window=\"isGameConfirmOpen = false\"\n    x-cloak role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"game-confirm-title\"\n    class=\"fixed inset-0 w-full h-full bg-black\/50 z-50 flex items-center justify-center transition-all duration-300 ease-out\"\n    :class=\"isGameConfirmOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'\"\n    @click.self=\"isGameConfirmOpen = false\">\n    <div class=\"bg-white border-t-4 md:border-t-8 border-primary-yellow rounded-[16px] max-w-[89%] md:max-w-[661px] px-5 py-10 md:px-10 md:py-[60px] lg:py-20 relative\">\n        <button type=\"button\" x-ref=\"gameConfirmClose\" @click=\"isGameConfirmOpen = false\" aria-label=\"Close\" class=\"absolute right-3 top-3 md:right-5 md:top-7 xl:right-10 xl:top-10\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M24.4003 7.61363C24.2769 7.49003 24.1304 7.39196 23.9691 7.32505C23.8078 7.25815 23.6349 7.22371 23.4603 7.22371C23.2857 7.22371 23.1128 7.25815 22.9515 7.32505C22.7902 7.39196 22.6436 7.49003 22.5203 7.61363L16.0003 14.1203L9.4803 7.6003C9.35686 7.47686 9.21031 7.37894 9.04902 7.31213C8.88774 7.24532 8.71487 7.21094 8.5403 7.21094C8.36572 7.21094 8.19286 7.24532 8.03157 7.31213C7.87029 7.37894 7.72374 7.47686 7.6003 7.6003C7.47686 7.72374 7.37894 7.87029 7.31213 8.03157C7.24532 8.19286 7.21094 8.36572 7.21094 8.5403C7.21094 8.71487 7.24532 8.88774 7.31213 9.04902C7.37894 9.21031 7.47686 9.35686 7.6003 9.4803L14.1203 16.0003L7.6003 22.5203C7.47686 22.6437 7.37894 22.7903 7.31213 22.9516C7.24532 23.1129 7.21094 23.2857 7.21094 23.4603C7.21094 23.6349 7.24532 23.8077 7.31213 23.969C7.37894 24.1303 7.47686 24.2769 7.6003 24.4003C7.72374 24.5237 7.87029 24.6217 8.03157 24.6885C8.19286 24.7553 8.36572 24.7897 8.5403 24.7897C8.71487 24.7897 8.88774 24.7553 9.04902 24.6885C9.21031 24.6217 9.35686 24.5237 9.4803 24.4003L16.0003 17.8803L22.5203 24.4003C22.6437 24.5237 22.7903 24.6217 22.9516 24.6885C23.1129 24.7553 23.2857 24.7897 23.4603 24.7897C23.6349 24.7897 23.8077 24.7553 23.969 24.6885C24.1303 24.6217 24.2769 24.5237 24.4003 24.4003C24.5237 24.2769 24.6217 24.1303 24.6885 23.969C24.7553 23.8077 24.7897 23.6349 24.7897 23.4603C24.7897 23.2857 24.7553 23.1129 24.6885 22.9516C24.6217 22.7903 24.5237 22.6437 24.4003 22.5203L17.8803 16.0003L24.4003 9.4803C24.907 8.97363 24.907 8.1203 24.4003 7.61363Z\" fill=\"#27353C\"\/>\n            <\/svg>\n        <\/button>    \n        <div class=\"flex flex-col items-center gap-8\">\n            <div class=\"flex flex-col items-center gap-3\">\n                <h5 id=\"game-confirm-title\" class=\"heading5 text-dark\">\n                    \u6e96\u5099\u597d\u9032\u5165\u4f60\u7684\u4e0b\u4e00\u6bb5\u79d1\u5927\u5192\u96aa\u4e86\u55ce\uff1f                <\/h5>\n\n                <p x-show=\"gameOpen\" class=\"text-body-md text-dark text-center\">\n                     \u4f60\u5df2\u4f7f\u7528\u6b64\u96fb\u90f5\u5b8c\u6210 UNI-Type \u6027\u683c\u6e2c\u8a66\uff01\ud83c\udf89\n\n\u60f3\u518d\u6b21\u63a2\u7d22\u4f60\u7684\u6027\u683c\u985e\u578b\uff0c\u9084\u662f\u76f4\u63a5\u6311\u6230\u8cc7\u8a0a\u65e5\u4efb\u52d9\uff1f                <\/p>\n                <p x-show=\"!gameOpen\" class=\"text-body-md text-dark text-center\">\n                    You&#039;ve already taken the UNI-Type test with this email! Want to explore your personality all over again?                <\/p>\n            <\/div>\n\n            <div class=\"grid gap-4 w-full\" :class=\"gameOpen ? 'sm:grid-cols-2' : ''\">\n                <a :href=\"testUrl\" class=\"flex items-center justify-center gap-2 px-5 py-3 border border-primary hover:bg-primary text-body-md !font-bold text-primary hover:text-white rounded-lg\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"16\" viewBox=\"0 0 20 16\" fill=\"none\">\n                        <g clip-path=\"url(#clip0_14377_1069)\">\n                        <path d=\"M9.99999 1C9.74687 1 9.49687 1.04375 9.25937 1.12812L0.493743 4.29375C0.196868 4.40312 -7.27281e-06 4.68438 -7.27281e-06 5C-7.27281e-06 5.31563 0.196868 5.59688 0.493743 5.70625L2.30312 6.35938C1.79062 7.16563 1.49999 8.11875 1.49999 9.12187V10C1.49999 10.8875 1.16249 11.8031 0.803118 12.525C0.599993 12.9312 0.368743 13.3313 0.0999927 13.7C-7.27177e-06 13.8344 -0.0281323 14.0094 0.0281177 14.1687C0.0843677 14.3281 0.215618 14.4469 0.378118 14.4875L2.37812 14.9875C2.50937 15.0219 2.64999 14.9969 2.76562 14.925C2.88124 14.8531 2.96249 14.7344 2.98749 14.6C3.25624 13.2625 3.12187 12.0625 2.92187 11.2031C2.82187 10.7594 2.68749 10.3062 2.49999 9.89062V9.12187C2.49999 8.17812 2.81874 7.2875 3.37187 6.575C3.77499 6.09062 4.29687 5.7 4.90937 5.45937L9.81562 3.53125C10.0719 3.43125 10.3625 3.55625 10.4625 3.8125C10.5625 4.06875 10.4375 4.35938 10.1812 4.45937L5.27499 6.3875C4.88749 6.54062 4.54687 6.775 4.26874 7.0625L9.25624 8.8625C9.49374 8.94688 9.74374 8.99063 9.99687 8.99063C10.25 8.99063 10.5 8.94688 10.7375 8.8625L19.5062 5.70625C19.8031 5.6 20 5.31563 20 5C20 4.68438 19.8031 4.40312 19.5062 4.29375L10.7406 1.12812C10.5031 1.04375 10.2531 1 9.99999 1ZM3.99999 12.75C3.99999 13.8531 6.68749 15 9.99999 15C13.3125 15 16 13.8531 16 12.75L15.5219 8.20625L11.0781 9.8125C10.7312 9.9375 10.3656 10 9.99999 10C9.63437 10 9.26562 9.9375 8.92187 9.8125L4.47812 8.20625L3.99999 12.75Z\" fill=\"currentColor\"\/>\n                        <\/g>\n                        <defs>\n                        <clipPath id=\"clip0_14377_1069\">\n                        <rect width=\"20\" height=\"16\" fill=\"currentColor\"\/>\n                        <\/clipPath>\n                        <\/defs>\n                    <\/svg>\n                    \u91cd\u65b0\u9032\u884c UNI-Type \u6027\u683c\u6e2c\u8a66                <\/a>\n\n                <a x-show=\"gameOpen\" :href=\"gameUrl\" class=\"flex items-center justify-center gap-2 px-5 py-3 bg-primary-yellow hover:bg-primary text-body-md !font-bold text-primary hover:text-white rounded-lg text-center\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                        <path d=\"M18.8724 9.5852C18.0439 5.8395 16.797 3.84028 14.9474 3.29419C14.5586 3.18013 14.1553 3.12315 13.7501 3.12505C13.2146 3.12505 12.7482 3.25551 12.2548 3.3938C11.6603 3.56059 10.9849 3.75005 10.0001 3.75005C9.01536 3.75005 8.33957 3.56098 7.74387 3.39419C7.25012 3.25551 6.78411 3.12505 6.25012 3.12505C5.83114 3.12357 5.414 3.18037 5.01067 3.2938C3.17082 3.83755 1.92473 5.83598 1.08411 9.58286C0.180199 13.6149 0.625121 16.1606 2.33176 16.7512C2.5657 16.8337 2.81184 16.8762 3.05989 16.877C4.22903 16.877 5.16653 15.9032 5.80715 15.1059C6.53098 14.2036 7.37825 13.7457 10.0001 13.7457C12.3419 13.7457 13.3111 14.0633 14.1482 15.1059C14.6743 15.7614 15.1716 16.22 15.6677 16.5086C16.3275 16.8922 16.9868 16.9774 17.6271 16.7575C18.6357 16.4133 19.2138 15.5036 19.3458 14.0528C19.4462 12.9403 19.2915 11.479 18.8724 9.5852ZM8.12512 9.37505H6.87512V10.625C6.87512 10.7908 6.80927 10.9498 6.69206 11.067C6.57485 11.1842 6.41588 11.25 6.25012 11.25C6.08436 11.25 5.92539 11.1842 5.80818 11.067C5.69097 10.9498 5.62512 10.7908 5.62512 10.625V9.37505H4.37512C4.20936 9.37505 4.05039 9.3092 3.93318 9.19199C3.81597 9.07478 3.75012 8.91581 3.75012 8.75005C3.75012 8.58429 3.81597 8.42531 3.93318 8.3081C4.05039 8.19089 4.20936 8.12505 4.37512 8.12505H5.62512V6.87505C5.62512 6.70929 5.69097 6.55031 5.80818 6.4331C5.92539 6.31589 6.08436 6.25005 6.25012 6.25005C6.41588 6.25005 6.57485 6.31589 6.69206 6.4331C6.80927 6.55031 6.87512 6.70929 6.87512 6.87505V8.12505H8.12512C8.29088 8.12505 8.44985 8.19089 8.56706 8.3081C8.68427 8.42531 8.75012 8.58429 8.75012 8.75005C8.75012 8.91581 8.68427 9.07478 8.56706 9.19199C8.44985 9.3092 8.29088 9.37505 8.12512 9.37505ZM11.4064 9.5313C11.2519 9.5313 11.1008 9.48548 10.9723 9.39963C10.8439 9.31379 10.7437 9.19177 10.6846 9.04902C10.6255 8.90626 10.61 8.74918 10.6401 8.59763C10.6703 8.44608 10.7447 8.30688 10.8539 8.19762C10.9632 8.08836 11.1024 8.01395 11.254 7.98381C11.4055 7.95366 11.5626 7.96913 11.7053 8.02826C11.8481 8.0874 11.9701 8.18753 12.056 8.31601C12.1418 8.44448 12.1876 8.59553 12.1876 8.75005C12.1876 8.95725 12.1053 9.15596 11.9588 9.30247C11.8123 9.44899 11.6136 9.5313 11.4064 9.5313ZM13.1251 11.25C12.9705 11.25 12.8194 11.2042 12.6909 11.1182C12.5624 11.0323 12.4622 10.9102 12.4032 10.7673C12.3441 10.6244 12.3287 10.4673 12.359 10.3157C12.3893 10.1641 12.4639 10.0249 12.5734 9.91568C12.6828 9.8065 12.8222 9.73224 12.9739 9.70232C13.1256 9.6724 13.2827 9.68815 13.4254 9.74758C13.5682 9.80701 13.69 9.90745 13.7757 10.0362C13.8613 10.1649 13.9068 10.3161 13.9064 10.4707C13.9059 10.6776 13.8233 10.8758 13.6769 11.0219C13.5304 11.168 13.332 11.25 13.1251 11.25ZM13.1251 7.81255C12.9706 7.81255 12.8196 7.76673 12.6911 7.68088C12.5626 7.59504 12.4625 7.47302 12.4033 7.33027C12.3442 7.18751 12.3287 7.03043 12.3589 6.87888C12.389 6.72733 12.4634 6.58813 12.5727 6.47887C12.682 6.36961 12.8212 6.2952 12.9727 6.26506C13.1243 6.23491 13.2813 6.25038 13.4241 6.30951C13.5668 6.36865 13.6889 6.46878 13.7747 6.59726C13.8606 6.72573 13.9064 6.87678 13.9064 7.0313C13.9064 7.2385 13.8241 7.43721 13.6775 7.58372C13.531 7.73024 13.3323 7.81255 13.1251 7.81255ZM14.8439 9.5313C14.6894 9.5313 14.5383 9.48548 14.4098 9.39963C14.2814 9.31379 14.1812 9.19177 14.1221 9.04902C14.063 8.90626 14.0475 8.74918 14.0776 8.59763C14.1078 8.44608 14.1822 8.30688 14.2914 8.19762C14.4007 8.08836 14.5399 8.01395 14.6915 7.98381C14.843 7.95366 15.0001 7.96913 15.1428 8.02826C15.2856 8.0874 15.4076 8.18753 15.4935 8.31601C15.5793 8.44448 15.6251 8.59553 15.6251 8.75005C15.6251 8.95725 15.5428 9.15596 15.3963 9.30247C15.2498 9.44899 15.0511 9.5313 14.8439 9.5313Z\" fill=\"currentColor\"\/>\n                    <\/svg>\n                    \u7acb\u5373\u9032\u5165\u4efb\u52d9                <\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-420","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/pages\/420","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/comments?post=420"}],"version-history":[{"count":8,"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/pages\/420\/revisions"}],"predecessor-version":[{"id":1162,"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/pages\/420\/revisions\/1162"}],"wp:attachment":[{"href":"https:\/\/mbti-dev.visibleone.dev\/zh-hant\/wp-json\/wp\/v2\/media?parent=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}