{"id":771,"date":"2025-06-19T14:02:05","date_gmt":"2025-06-19T14:02:05","guid":{"rendered":"https:\/\/bouyuen.com\/projects\/"},"modified":"2026-05-11T09:01:21","modified_gmt":"2026-05-11T09:01:21","slug":"projects","status":"publish","type":"page","link":"https:\/\/bouyuen.com\/en\/projects\/","title":{"rendered":"Projects"},"content":{"rendered":"
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\u5bf6\u6e90\u6848\u4f8b\u7cbe\u9078<\/title>\n<style>\n :root {\n --text-dark: #13233f;\n --text-soft: #6b7688;\n --text-white: #f8fbff;\n --gold: #c8a867;\n --gold-2: #d7bb84;\n --line: rgba(255, 255, 255, 0.16);\n --line-dark: rgba(19, 35, 63, 0.14);\n --radius-xl: 18px;\n --shadow-soft: 0 20px 45px rgba(7, 15, 30, 0.12);\n --shadow-lift: 0 26px 60px rgba(7, 15, 30, 0.18);\n --ease: 0.55s cubic-bezier(0.22, 1, 0.36, 1);\n }\n\n * { box-sizing: border-box; }\n\n .by-case-wrapper,\n .by-case-wrapper * {\n font-family: \"PingFang TC\", \"Microsoft JhengHei\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n }\n\n .by-case-wrapper {\n width: 100vw;\n position: relative;\n left: 50%;\n right: 50%;\n margin-left: -50vw;\n margin-right: -50vw;\n overflow-x: hidden;\n background: #0a1120;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n }\n\n .by-case-section {\n position: relative;\n padding: clamp(64px, 9vw, 120px) 5%;\n overflow: hidden;\n isolation: isolate;\n }\n\n .by-case-section[data-theme=\"dark\"] {\n background:\n radial-gradient(1200px 500px at 85% -10%, rgba(200, 168, 103, 0.18), rgba(200, 168, 103, 0) 58%),\n linear-gradient(165deg, #091221 0%, #0c1627 52%, #111f37 100%);\n color: var(--text-white);\n }\n\n .by-case-section[data-theme=\"warm\"] {\n background:\n radial-gradient(900px 480px at 12% 98%, rgba(200, 168, 103, 0.16), rgba(200, 168, 103, 0) 62%),\n linear-gradient(160deg, #f8f5f0 0%, #f3efe8 100%);\n color: var(--text-dark);\n }\n\n .by-case-section[data-theme=\"light\"] {\n background:\n radial-gradient(920px 460px at 90% 45%, rgba(19, 35, 63, 0.08), rgba(19, 35, 63, 0) 58%),\n linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);\n color: var(--text-dark);\n }\n\n .by-case-shell {\n max-width: 1380px;\n margin: 0 auto;\n position: relative;\n z-index: 2;\n }\n\n .by-watermark {\n position: absolute;\n right: -1.5%;\n top: 20px;\n font-size: clamp(120px, 22vw, 320px);\n line-height: 0.9;\n font-weight: 800;\n letter-spacing: -0.05em;\n opacity: 0.08;\n user-select: none;\n pointer-events: none;\n z-index: 1;\n }\n\n .by-case-section[data-theme=\"warm\"] .by-watermark {\n left: -1.5%;\n right: auto;\n opacity: 0.07;\n }\n\n .by-head {\n display: grid;\n grid-template-columns: 1.15fr 1fr;\n gap: 28px;\n align-items: end;\n margin-bottom: 44px;\n }\n\n .by-eyebrow {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n font-size: 12px;\n text-transform: uppercase;\n letter-spacing: 0.32em;\n color: var(--gold);\n font-weight: 700;\n margin-bottom: 14px;\n }\n\n .by-eyebrow::before {\n content: \"\";\n width: 28px;\n height: 1px;\n background: currentColor;\n opacity: 0.9;\n }\n\n .by-title {\n margin: 0;\n font-size: clamp(32px, 4vw, 50px);\n line-height: 1.15;\n letter-spacing: 0.01em;\n font-weight: 700;\n }\n\n .by-desc {\n margin: 0;\n font-size: 15px;\n line-height: 1.95;\n max-width: 560px;\n justify-self: end;\n padding-inline-start: 16px;\n border-inline-start: 2px solid var(--gold);\n color: color-mix(in srgb, currentColor 72%, transparent);\n }\n\n .by-case-section[data-theme=\"dark\"] .by-desc {\n color: rgba(233, 240, 251, 0.82);\n }\n\n .by-case-section[data-theme=\"warm\"] .by-desc,\n .by-case-section[data-theme=\"light\"] .by-desc {\n color: var(--text-soft);\n }\n\n .by-carousel {\n position: relative;\n margin-bottom: 34px;\n z-index: 2;\n }\n\n .by-track-viewport {\n overflow: hidden;\n padding: 8px 2px 30px;\n touch-action: pan-y;\n cursor: grab;\n }\n\n .by-track-viewport.is-dragging {\n cursor: grabbing;\n }\n\n .by-track {\n display: flex;\n gap: 26px;\n will-change: transform;\n transition: transform var(--ease);\n }\n\n .by-card {\n flex: 0 0 calc((100% - 52px) \/ 3);\n border-radius: var(--radius-xl);\n overflow: hidden;\n position: relative;\n background: rgba(255, 255, 255, 0.94);\n box-shadow: var(--shadow-soft);\n transition: transform var(--ease), box-shadow var(--ease);\n user-select: none;\n }\n\n .by-case-section[data-theme=\"dark\"] .by-card {\n background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));\n border: 1px solid var(--line);\n }\n\n .by-case-section[data-theme=\"warm\"] .by-card,\n .by-case-section[data-theme=\"light\"] .by-card {\n border: 1px solid var(--line-dark);\n }\n\n .by-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-lift);\n }\n\n .by-thumb {\n position: relative;\n height: 270px;\n overflow: hidden;\n }\n\n .by-thumb::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(10, 15, 25, 0.35), rgba(10, 15, 25, 0));\n opacity: 0.65;\n transition: opacity var(--ease);\n }\n\n .by-card:hover .by-thumb::after { opacity: 0.4; }\n\n .by-thumb img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);\n pointer-events: none;\n }\n\n .by-card:hover img { transform: scale(1.07); }\n\n .by-card-body { padding: 24px 22px 22px; }\n\n .by-card-title {\n margin: 0 0 9px;\n font-size: 21px;\n line-height: 1.3;\n letter-spacing: 0.01em;\n color: var(--text-dark);\n }\n\n .by-case-section[data-theme=\"dark\"] .by-card-title { color: #f4f8ff; }\n\n .by-meta {\n margin: 0;\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 13px;\n letter-spacing: 0.02em;\n color: #8792a4;\n }\n\n .by-meta::before {\n content: \"\";\n width: 14px;\n height: 1px;\n background: var(--gold);\n flex: 0 0 auto;\n }\n\n .by-controls {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n }\n\n .by-more {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-height: 48px;\n padding: 0 30px;\n border-radius: 999px;\n border: 1px solid var(--gold);\n color: var(--gold);\n text-decoration: none;\n font-size: 13px;\n letter-spacing: 0.24em;\n text-transform: uppercase;\n font-weight: 700;\n transition: all var(--ease);\n }\n\n .by-more:hover {\n background: var(--gold);\n color: #fff;\n transform: translateY(-2px);\n box-shadow: 0 10px 22px rgba(200, 168, 103, 0.28);\n }\n\n .by-nav {\n display: inline-flex;\n align-items: center;\n gap: 14px;\n }\n\n .by-btn {\n width: 58px;\n height: 58px;\n border-radius: 999px;\n border: 2px solid rgba(200, 168, 103, 0.9);\n background: rgba(11, 18, 32, 0.78);\n color: #f3d79f;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);\n box-shadow: 0 10px 26px rgba(8, 14, 24, 0.28);\n backdrop-filter: blur(3px);\n -webkit-backdrop-filter: blur(3px);\n }\n\n .by-btn svg {\n width: 24px;\n height: 24px;\n stroke: currentColor;\n stroke-width: 2.6;\n fill: none;\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: transform 0.28s ease;\n }\n\n .by-btn:hover {\n transform: translateY(-2px) scale(1.04);\n background: linear-gradient(135deg, #c8a867 0%, #d9be88 100%);\n border-color: #e2c892;\n color: #13233f;\n box-shadow: 0 14px 32px rgba(200, 168, 103, 0.35);\n }\n\n .by-btn:active { transform: translateY(0) scale(0.98); }\n .by-btn[data-prev]:hover svg { transform: translateX(-2px); }\n .by-btn[data-next]:hover svg { transform: translateX(2px); }\n\n .by-case-section[data-theme=\"warm\"] .by-btn,\n .by-case-section[data-theme=\"light\"] .by-btn {\n background: rgba(255, 255, 255, 0.88);\n color: #9a7a3f;\n border-color: rgba(200, 168, 103, 0.88);\n box-shadow: 0 10px 24px rgba(19, 35, 63, 0.14);\n }\n\n .by-btn:focus-visible,\n .by-more:focus-visible {\n outline: 3px solid rgba(232, 204, 145, 0.9);\n outline-offset: 3px;\n }\n\n \/* ===== \u4fee\u6b63\u7b2c\u4e00\u677f\u584a\u300c\u9910\u98f2\u5de5\u7a0b\u300d\u770b\u4e0d\u6e05 ===== *\/\n .by-case-section[data-theme=\"dark\"] .by-title {\n color: #f7fbff !important;\n text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;\n }\n\n .by-case-section[data-theme=\"dark\"] .by-eyebrow {\n color: #e0c38a !important;\n }\n\n .by-case-section[data-theme=\"dark\"] h2.by-title {\n color: #f7fbff !important;\n }\n\n @media (max-width: 1080px) {\n .by-head {\n grid-template-columns: 1fr;\n gap: 18px;\n }\n .by-desc {\n justify-self: start;\n max-width: 100%;\n }\n .by-card { flex: 0 0 calc((100% - 26px) \/ 2); }\n .by-watermark {\n font-size: clamp(92px, 18vw, 220px);\n top: 8px;\n }\n }\n\n @media (max-width: 768px) {\n .by-case-section { padding: 74px 5% 80px; }\n .by-track { gap: 0; }\n .by-card { flex: 0 0 100%; }\n .by-thumb { height: 230px; }\n\n .by-controls {\n flex-direction: column-reverse;\n align-items: stretch;\n }\n\n .by-more { width: 100%; }\n\n .by-nav {\n justify-content: center;\n gap: 12px;\n }\n\n .by-btn {\n width: 62px;\n height: 62px;\n }\n\n .by-btn svg {\n width: 26px;\n height: 26px;\n stroke-width: 2.8;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .by-track,\n .by-card,\n .by-thumb img,\n .by-btn,\n .by-more {\n transition: none !important;\n }\n }\n<\/style>\n<\/head>\n<body>\n\n<div class=\"by-case-wrapper\">\n\n <!-- Section 1: \u9910\u98f2\u5de5\u7a0b\uff086 \u5f35\uff09 -->\n <section class=\"by-case-section\" data-theme=\"dark\">\n <div class=\"by-watermark\">01<\/div>\n <div class=\"by-case-shell\">\n <header class=\"by-head\">\n <div>\n <span class=\"by-eyebrow\">F&B Projects<\/span>\n <h2 class=\"by-title\">Catering Engineering<\/h2>\n <\/div>\n <p class=\"by-desc\">We specialize in space planning and construction integration for restaurants, cafes, and bars. From circulation design and kitchen MEP systems to licensing requirements, we deliver efficient commercial spaces built for long-term operation.<\/p>\n <\/header>\n\n <div class=\"by-carousel\">\n <div class=\"by-track-viewport\" data-track-id=\"track-fb\">\n <div class=\"by-track\" id=\"track-fb\">\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1550989460-0adf9ea622e2?q=80&w=1200\" alt=\"\u7cbe\u54c1\u58fd\u53f8\u5e97\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Boutique Sushi Restaurant<\/h4><p class=\"by-meta\">Central \/ 1,500 sq ft<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555396273-367ea4eb4db5?q=80&w=1200\" alt=\"\u6587\u9752\u5496\u5561\u9928\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Lifestyle Cafe<\/h4><p class=\"by-meta\">Tsim Sha Tsui \/ Industrial Style Design<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1517248135467-4c7edcad34c4?q=80&w=1200\" alt=\"\u9ad8\u7d1a\u897f\u9910\u5ef3\u5de5\u7a0b\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Fine Dining Western Restaurant<\/h4><p class=\"by-meta\">Causeway Bay \/ Fire Safety and Ventilation Engineering<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1554118811-1e0d58224f24?q=80&w=1200\" alt=\"\u9023\u9396\u5feb\u9910\u5e97\u88dd\u4fee\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Fast Food Chain<\/h4><p class=\"by-meta\">Simultaneous Delivery Across Multiple Hong Kong Locations<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1414235077428-338989a2e8c0?q=80&w=1200\" alt=\"Fine dining \u9910\u5ef3\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Fine Dining<\/h4><p class=\"by-meta\">wanchai<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1521017432531-fbd92d768814?q=80&w=1200\" alt=\"\u9152\u5427\u7a7a\u9593\u5de5\u7a0b\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Boutique Bar<\/h4><p class=\"by-meta\">Central \/ Enhanced Nighttime Ambience<\/p><\/div>\n <\/article>\n <\/div>\n <\/div>\n\n <footer class=\"by-controls\">\n <a href=\"https:\/\/bouyuen.com\/en\/fb-projects\/\" class=\"by-more\">View More<\/a>\n <div class=\"by-nav\">\n <button class=\"by-btn\" data-prev=\"track-fb\" aria-label=\"\u4e0a\u4e00\u5f35\u6848\u4f8b\">\n <svg viewbox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n <\/button>\n <button class=\"by-btn\" data-next=\"track-fb\" aria-label=\"\u4e0b\u4e00\u5f35\u6848\u4f8b\">\n <svg viewbox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/button>\n <\/div>\n <\/footer>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Section 2: \u5bb6\u5c45\u8a2d\u8a08\uff086 \u5f35\uff09 -->\n <section class=\"by-case-section\" data-theme=\"warm\">\n <div class=\"by-watermark\">02<\/div>\n <div class=\"by-case-shell\">\n <header class=\"by-head\">\n <div>\n <span class=\"by-eyebrow\">Residential Design<\/span>\n <h2 class=\"by-title\">Home<\/h2>\n <\/div>\n <p class=\"by-desc\">From private homes to high-end apartments, we provide integrated design, construction, and detailing services that balance aesthetics and functionality, creating spaces that reflect each resident's lifestyle and taste.<\/p>\n <\/header>\n\n <div class=\"by-carousel\">\n <div class=\"by-track-viewport\" data-track-id=\"track-res\">\n <div class=\"by-track\" id=\"track-res\">\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600210492486-724fe5c67fb0?q=80&w=1200\" alt=\"\u8dd1\u99ac\u5730\u79c1\u5b85\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Happy Valley Private Residence<\/h4><p class=\"by-meta\">Modern Minimalist<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1618221195710-dd6b41faaea6?q=80&w=1200\" alt=\"\u897f\u8ca2\u7368\u7acb\u5225\u5885\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Sai Kung Detached Villa<\/h4><p class=\"by-meta\">Light-Luxury Whole-Home Customization<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584622650111-993a426fbf0a?q=80&w=1200\" alt=\"\u4e5d\u9f8d\u7ad9\u516c\u5bd3\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Kowloon Station Apartment<\/h4><p class=\"by-meta\">Japanese Wood Aesthetics<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600566753086-00f18fb6b3ea?q=80&w=1200\" alt=\"\u5c71\u666f\u8c6a\u5b85\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Mid-Levels Luxury Residence<\/h4><p class=\"by-meta\">Earth-Tone Palette \/ Open Kitchen<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1513694203232-719a280e022f?q=80&w=1200\" alt=\"\u89aa\u5b50\u5b85\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Family Shared Home<\/h4><p class=\"by-meta\">Enhanced Storage Functionality<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1600607687939-ce8a6c25118c?q=80&w=1200\" alt=\"\u4f98\u5bc2\u98a8\u4f4f\u5b85\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Wabi-Sabi Private Residence<\/h4><p class=\"by-meta\">Natural Light and Rich Material Layers<\/p><\/div>\n <\/article>\n <\/div>\n <\/div>\n\n <footer class=\"by-controls\">\n <a href=\"https:\/\/bouyuen.com\/en\/home-design\/\" class=\"by-more\">View More<\/a>\n <div class=\"by-nav\">\n <button class=\"by-btn\" data-prev=\"track-res\" aria-label=\"\u4e0a\u4e00\u5f35\u6848\u4f8b\">\n <svg viewbox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n <\/button>\n <button class=\"by-btn\" data-next=\"track-res\" aria-label=\"\u4e0b\u4e00\u5f35\u6848\u4f8b\">\n <svg viewbox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/button>\n <\/div>\n <\/footer>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Section 3: \u8fa6\u516c\u5ba4\u8a2d\u8a08\uff086 \u5f35\uff09 -->\n <section class=\"by-case-section\" data-theme=\"light\">\n <div class=\"by-watermark\">03<\/div>\n <div class=\"by-case-shell\">\n <header class=\"by-head\">\n <div>\n <span class=\"by-eyebrow\">Office Design<\/span>\n <h2 class=\"by-title\">Office Interior Design<\/h2>\n <\/div>\n <p class=\"by-desc\">Focused on workplace efficiency and brand identity, we create professional and scalable office environments through precise zoning, MEP integration, and meticulous detail management.<\/p>\n <\/header>\n\n <div class=\"by-carousel\">\n <div class=\"by-track-viewport\" data-track-id=\"track-office\">\n <div class=\"by-track\" id=\"track-office\">\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=1200\" alt=\"\u4e2d\u74b0\u91d1\u878d\u8fa6\u516c\u5ba4\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Central Financial Office<\/h4><p class=\"by-meta\">Open Collaborative Workspace<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1524758631624-e2822e304c36?q=80&w=1200\" alt=\"\u4e5d\u9f8d\u7063\u79d1\u6280\u7e3d\u90e8\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Kowloon Bay Tech Headquarters<\/h4><p class=\"by-meta\">Glass Meeting Room Modules<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1604328698692-f76ea9498e76?q=80&w=1200\" alt=\"\u884c\u653f\u5957\u623f\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Executive Suite Design<\/h4><p class=\"by-meta\">Personalized Business Space<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497215842964-222b430dc094?q=80&w=1200\" alt=\"\u5171\u4eab\u8fa6\u516c\u7a7a\u9593\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Co-Working Office Space<\/h4><p class=\"by-meta\">Multi-Functional Workstations<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1497366811353-6870744d04b2?q=80&w=1200\" alt=\"\u4f01\u696d\u524d\u53f0\u63a5\u5f85\u5340\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Corporate Reception & Brand Zone<\/h4><p class=\"by-meta\">Integrated Brand Feature Wall<\/p><\/div>\n <\/article>\n <article class=\"by-card\">\n <div class=\"by-thumb\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1577412647305-991150c7d163?q=80&w=1200\" alt=\"\u8463\u4e8b\u6703\u8b70\u5ba4\u8a2d\u8a08\" loading=\"lazy\"><\/div>\n <div class=\"by-card-body\"><h4 class=\"by-card-title\">Executive Boardroom Center<\/h4><p class=\"by-meta\">Acoustic and Lighting Optimization<\/p><\/div>\n <\/article>\n <\/div>\n <\/div>\n\n <footer class=\"by-controls\">\n <a href=\"https:\/\/bouyuen.com\/en\/office-design\/\" class=\"by-more\">View More<\/a>\n <div class=\"by-nav\">\n <button class=\"by-btn\" data-prev=\"track-office\" aria-label=\"\u4e0a\u4e00\u5f35\u6848\u4f8b\">\n <svg viewbox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"><\/polyline><\/svg>\n <\/button>\n <button class=\"by-btn\" data-next=\"track-office\" aria-label=\"\u4e0b\u4e00\u5f35\u6848\u4f8b\">\n <svg viewbox=\"0 0 24 24\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>\n <\/button>\n <\/div>\n <\/footer>\n <\/div>\n <\/div>\n <\/section>\n\n<\/div>\n\n<script>\n (function () {\n const states = {};\n const swipeState = {};\n const SWIPE_THRESHOLD = 42;\n\n function getMetrics(track) {\n const firstCard = track.querySelector(\".by-card\");\n if (!firstCard) return null;\n\n const cardWidth = firstCard.getBoundingClientRect().width;\n const styles = window.getComputedStyle(track);\n const gap = parseFloat(styles.columnGap || styles.gap || 0);\n const step = cardWidth + gap;\n\n const viewport = track.parentElement;\n const visible = Math.max(1, Math.floor((viewport.clientWidth + gap) \/ step));\n const max = Math.max(0, track.children.length - visible);\n\n return { step, max };\n }\n\n function applyTransform(trackId) {\n const track = document.getElementById(trackId);\n if (!track) return;\n\n const metrics = getMetrics(track);\n if (!metrics) return;\n\n if (states[trackId] > metrics.max) states[trackId] = metrics.max;\n if (states[trackId] < 0) states[trackId] = 0;\n\n track.style.transform = \"translateX(-\" + (states[trackId] * metrics.step) + \"px)\";\n }\n\n function move(trackId, dir) {\n const track = document.getElementById(trackId);\n if (!track) return;\n\n if (!(trackId in states)) states[trackId] = 0;\n\n const metrics = getMetrics(track);\n if (!metrics) return;\n\n states[trackId] += dir;\n if (states[trackId] < 0) states[trackId] = metrics.max;\n if (states[trackId] > metrics.max) states[trackId] = 0;\n\n track.style.transform = \"translateX(-\" + (states[trackId] * metrics.step) + \"px)\";\n }\n\n function setupSwipe(viewport) {\n const trackId = viewport.getAttribute(\"data-track-id\");\n if (!trackId) return;\n\n swipeState[trackId] = {\n startX: 0,\n startY: 0,\n deltaX: 0,\n isPointerDown: false\n };\n\n viewport.addEventListener(\"pointerdown\", function (e) {\n swipeState[trackId].isPointerDown = true;\n swipeState[trackId].startX = e.clientX;\n swipeState[trackId].startY = e.clientY;\n swipeState[trackId].deltaX = 0;\n viewport.classList.add(\"is-dragging\");\n });\n\n viewport.addEventListener(\"pointermove\", function (e) {\n if (!swipeState[trackId].isPointerDown) return;\n swipeState[trackId].deltaX = e.clientX - swipeState[trackId].startX;\n });\n\n function endSwipe(e) {\n if (!swipeState[trackId].isPointerDown) return;\n\n const dx = swipeState[trackId].deltaX;\n const dy = e.clientY - swipeState[trackId].startY;\n\n swipeState[trackId].isPointerDown = false;\n viewport.classList.remove(\"is-dragging\");\n\n if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy)) {\n if (dx < 0) move(trackId, 1);\n else move(trackId, -1);\n }\n\n swipeState[trackId].deltaX = 0;\n }\n\n viewport.addEventListener(\"pointerup\", endSwipe);\n viewport.addEventListener(\"pointercancel\", endSwipe);\n viewport.addEventListener(\"pointerleave\", function (e) {\n if (swipeState[trackId].isPointerDown) endSwipe(e);\n });\n }\n\n function reflowAll() {\n document.querySelectorAll(\".by-track\").forEach(track => {\n const id = track.id;\n if (!(id in states)) states[id] = 0;\n applyTransform(id);\n });\n }\n\n document.addEventListener(\"click\", function (e) {\n const prev = e.target.closest(\"[data-prev]\");\n const next = e.target.closest(\"[data-next]\");\n if (prev) move(prev.getAttribute(\"data-prev\"), -1);\n if (next) move(next.getAttribute(\"data-next\"), 1);\n });\n\n document.querySelectorAll(\".by-track-viewport[data-track-id]\").forEach(setupSwipe);\n\n window.addEventListener(\"resize\", reflowAll);\n window.addEventListener(\"load\", reflowAll);\n })();\n<\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u5bf6\u6e90\u6848\u4f8b\u7cbe\u9078 01 F&B Projects \u9910\u98f2\u5de5\u7a0b \u5c08\u6ce8\u9910\u5ef3\u3001\u5496\u5561\u9928\u8207\u9152\u5427\u4e4b\u7a7a\u9593\u898f\u5283\u53ca\u65bd\u5de5\u6574\u5408\uff0c […]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_joinchat":[],"footnotes":""},"class_list":["post-771","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"2523841739@qq.com","author_link":"https:\/\/bouyuen.com\/en\/author\/2523841739qq-com\/"},"uagb_comment_info":0,"uagb_excerpt":"\u5bf6\u6e90\u6848\u4f8b\u7cbe\u9078 01 F&B Projects \u9910\u98f2\u5de5\u7a0b \u5c08\u6ce8\u9910\u5ef3\u3001\u5496\u5561\u9928\u8207\u9152\u5427\u4e4b\u7a7a\u9593\u898f\u5283\u53ca\u65bd\u5de5\u6574\u5408\uff0c…","_links":{"self":[{"href":"https:\/\/bouyuen.com\/en\/wp-json\/wp\/v2\/pages\/771","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bouyuen.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bouyuen.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bouyuen.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bouyuen.com\/en\/wp-json\/wp\/v2\/comments?post=771"}],"version-history":[{"count":0,"href":"https:\/\/bouyuen.com\/en\/wp-json\/wp\/v2\/pages\/771\/revisions"}],"wp:attachment":[{"href":"https:\/\/bouyuen.com\/en\/wp-json\/wp\/v2\/media?parent=771"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}