</noscript> <script> function gaEvent(path, event) { if (typeof(gtag) == "function") { gtag('set', 'page_path', path); gtag('event', event); } } </script> <script> const lang = "zh_CHT"; document.addEventListener('alpine:init', () => { Alpine.data('navInit', () => ({ userLoggedIn: false, isProfileMenuVisible: false, isProfileMobileMenuVisible: false, isMobileMenuVisible: false, isMobileUniversityMegaVisible: false, toggleMobileMenu() { this.isProfileMenuVisible = false; this.isProfileMobileMenuVisible = false; this.isMobileMenuVisible = !this.isMobileMenuVisible; if (this.isMobileMenuVisible) { $("body").css("overflow", "hidden"); } else { $("body").css("overflow", "auto"); } console.log(this.isMobileMenuVisible); }, toggleProfileMobileMenu() { this.isMobileMenuVisible = false; this.isProfileMobileMenuVisible = !this.isProfileMobileMenuVisible; }, showProfileMenu() { this.isMobileMenuVisible = false; this.isProfileMenuVisible = true; }, hideProfileMenu() { this.isProfileMenuVisible = false }, toggleMobileUniversityMega() { this.isMobileUniversityMegaVisible = !this.isMobileUniversityMegaVisible; } })); }) </script> <nav class="w-full bg-white shadow-sm h-20 px-4 lg:px-16 flex flex-row items-center justify-between"> <a href="/"> <img class="w-auto h-10" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/logo/JCTH-icon.png" alt="TourHeart+ icon small"> </a> <a class="switch-lang-url text-primary-darker text-base font-medium leading-10 tracking-normal hover:text-primary" aria-current="page">EN</a> </nav> <div class="relative w-full bg-about bg-center bg-cover bg-no-repeat"> <div class="home-container flex flex-col items-center justify-center min-h-128 py-12"> <h1 class="font-jinxuanlatte text-4xl sm:text-4xl text-primary-dark leading-tight sm:leading-tight text-center mb-8 md:max-w-130 lg:max-w-3xl xl:max-w-200 reveal">心導遊+ × 心理健康及輔導中心</h1> <p class="text-2xl sm:text-3xl text-title-dark text-center md:max-w-130 lg:max-w-3xl xl:max-w-200 reveal">免費登記，成為會員<br>線上線下，伴你應對情緒挑戰</p> <div class="flex flex-col sm:flex-row items-center mt-4 sm:mt-8 space-y-4 sm:space-x-8 sm:space-y-0 reveal"> <a href="/cuhk/register" class="flex w-60 h-11 items-center justify-center rounded-full text-white text-base font-bold bg-start hover:bg-start-dark">立即註冊</a> <a href="/cuhk/login" class="flex w-60 h-11 items-center justify-center rounded-full text-white text-base font-bold bg-primary hover:bg-primary-dark" >會員登入</a> </div> </div> <img class="absolute lg:hidden w-full inset-x-0 -bottom-0 h-auto z-10 pointer-events-none" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/bottom-curve-mobile.svg" alt="banner background bottom curve"> <img class="absolute hidden lg:block w-full inset-x-0 bottom-0 h-auto z-10 pointer-events-none" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/bottom-curve.svg" alt="banner background bottom curve"> </div> <div class="home-container flex flex-col items-center pt-16 pb-12"> <p class="text-base reveal"><b>心導遊+ 聯同香港中文大學學生事務處心理健康及輔導中心</b>，為香港中文大學全日制本科生及研究生，推出全方位的心理健康支援服務，結合網上自助心理支援平台及實體心理輔導服務的混合模式，按學生的情緒困擾程度和需要，提供不同強度的支援，以應對生活和學習中的種種挑戰。</p> <img class="w-auto h-100 mx-auto reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/2a-register.webp" alt="Register"> </div> <div class="w-full bg-inbox-light py-16"> <div class="home-container space-y-8"> <div class="flex flex-col space-y-3"> <h3 class="flex flex-row items-end text-primary-darker font-jinxuanlatte leading-tight reveal"> <div class="text-8xl w-20 leading-none flex-shrink-0">1</div><div class="text-4xl mb-2">免費登記</div> </h3> <p class="ml-20 text-base text-primary-darker reveal">我們確保你的資料保密，同時亦保持數據安全規定和用途透明。</p> </div> <div class="flex flex-col space-y-3"> <h3 class="flex flex-row items-end text-primary-darker font-jinxuanlatte leading-tight reveal"> <div class="text-8xl w-20 leading-none flex-shrink-0">2</div><div class="text-4xl mb-2">進行心理健康評估</div> </h3> <p class="ml-20 text-base text-primary-darker reveal">完成研究驗證的評估工具，了解你的抑鬱症和焦慮症程度。</p> </div> <div class="flex flex-col space-y-3"> <h3 class="flex flex-row items-end text-primary-darker font-jinxuanlatte leading-tight reveal"> <div class="text-8xl w-20 leading-none flex-shrink-0">3</div><div class="text-4xl mb-2">開展從心出發之旅</div> </h3> <p class="ml-20 text-base text-primary-darker reveal">即時盡享按評估結果而推薦的內容。<br>隨時隨地找到提升心理健康資源、自助自療資源。</p> </div> <div class="flex flex-col space-y-3"> <h3 class="flex flex-row items-end text-primary-darker font-jinxuanlatte leading-tight reveal"> <div class="text-8xl w-20 leading-none flex-shrink-0">4</div><div class="text-4xl mb-2">結合實體心理輔導支援</div> </h3> <p class="ml-20 text-base text-primary-darker reveal">此服務由<b>香港中文大學學生事務處心理健康及輔導中心</b>提供，專為全日制本科生及研究生而設。該中心職員將跟進你的心理健康狀態，並根據你的需求提供實體專業一對一心理輔導服務。</p> <p class="ml-20 text-base text-primary-darker reveal">（此服務僅向同意授權心理健康及輔導中心收集並使用其個人資料以聯絡和提供心理健康支援的學生開放。）</p> </div> </div> </div> <div class="w-full relative flex flex-col items-stretch" id="wacc-features-section" > <div class="absolute inset-0 -z-1"> <div class="sticky h-screen inset-0 w-full "> <img class="absolute h-1/3 w-auto right-0 top-0 z-0" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/home-feature-background-orange.webp" alt="Orange ballon"> <img class="absolute h-1/3 w-auto left-0 bottom-0" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/home-feature-background-yellow.webp" alt="Yellow ballon"> <div class="home-container h-full hidden md:flex items-center justify-end"> <img class="feature-images h-auto reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-01-zh.png" alt="Feature 1 - chatbot"> <img class="feature-images h-auto hidden" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-07.png" alt="Feature 2 - wacc"> <img class="feature-images h-auto hidden" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-02-zh.png" alt="Feature 3 - courses"> <img class="feature-images h-auto hidden" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-03-zh.png" alt="Feature 4 - exercises"> <img class="feature-images h-auto hidden" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-04-zh.png" alt="Feature 5 - events"> <img class="feature-images h-auto hidden" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-05-zh.png" alt="Feature 6 - articles"> <img class="feature-images h-auto hidden" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-06-zh.webp" alt="Feature 7 - somewhere we share"> </div> </div> </div> <div class="home-container feature-card py-12 md:py-0 flex flex-col items-center md:items-start justify-center space-y-8"> <img class="w-3/4 h-auto mx-auto md:hidden reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-01-zh.png" alt="Feature 1 - chatbot"> <div class="md:w-1/2 xl:w-100 flex flex-col items-center md:items-start justify-center"> <h2 class="font-jinxuanlatte text-5xl leading-tight text-primary-darker mb-3 text-center md:text-left reveal">聊天機械人</h2> <p class="text-base text-primary-darker text-center md:text-left reveal">和虛擬夥伴阿本對話，探索情緒和人生中的種種挑戰。</p> </div> </div> <div class="home-container feature-card py-12 md:py-0 flex flex-col items-center md:items-start justify-center space-y-8"> <img class="w-3/4 h-auto mx-auto md:hidden reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-07.png" alt="Feature 2 - wacc"> <div class="md:w-1/2 xl:w-100 flex flex-col items-center md:items-start justify-center"> <h2 class="font-jinxuanlatte text-4xl leading-tight text-primary-darker mb-3 text-center md:text-left reveal">升級支援—<br>心理輔導服務（學生事務處心理健康及輔導中心）</h2> <p class="text-base text-primary-darker text-center md:text-left reveal">由心理學家提供輔導服務，協助全日制本科生及研究生應對在學習、生活或成長中所遇到的挑戰。</p> <p class="text-base text-primary-darker text-center md:text-left mt-4 reveal">學生事務處心理健康及輔導中心</p> <p class="text-base text-primary-darker text-center md:text-left mt-1 reveal">聯絡電話：<a class="tracking-normal hover:underline hover:text-primary" href="tel:39437208">3943 7208</a></p> <p class="text-base text-primary-darker text-center md:text-left mt-1 reveal">電郵：<a class="tracking-normal hover:underline hover:text-primary" href="mailto:wacc@cuhk.edu.hk">wacc@cuhk.edu.hk</a></p> <p class="text-base text-primary-darker text-center md:text-left mt-1 reveal">網頁：<a class="tracking-normal hover:underline hover:text-primary" href="https://wacc.osa.cuhk.edu.hk/">https://wacc.osa.cuhk.edu.hk/</a></p> <p class="text-base text-primary-darker text-center md:text-left mt-1 reveal">地址：香港中文大學龐萬倫學生中心2樓</p> <p class="text-base text-primary-darker text-center md:text-left mt-1 reveal">中大24小時情緒支援熱線：<a class="tracking-normal hover:underline hover:text-primary" href="tel:54002055">5400 2055</a></p> </div> </div> <div class="home-container feature-card py-12 md:py-0 flex flex-col items-center md:items-start justify-center space-y-8"> <img class="w-3/4 h-auto mx-auto md:hidden reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-02-zh.png" alt="Feature 3 - courses"> <div class="md:w-1/2 flex flex-col items-center md:items-start justify-center"> <h2 class="font-jinxuanlatte text-5xl leading-tight text-primary-darker mb-3 text-center md:text-left reveal">心理自療課程及指導</h2> <p class="text-base text-primary-darker text-center md:text-left reveal">受情緒困擾的會員，可進行由臨床心理學家講授的課程，內容以多媒體形式呈現，探索和了解自己的情緒。</p> </div> </div> <div class="home-container feature-card py-12 md:py-0 flex flex-col items-center md:items-start justify-center space-y-8"> <img class="w-3/4 h-auto mx-auto md:hidden reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-03-zh.png" alt="Feature 4 - exercises"> <div class="md:w-1/2 flex flex-col items-center md:items-start justify-center md:justify-start"> <h2 class="font-jinxuanlatte text-5xl leading-tight text-primary-darker mb-3 text-center md:text-left reveal">心理健康練習</h2> <p class="text-base text-primary-darker text-center md:text-left reveal">從與阿本的對話和課程中，你會找到多於100項練習，讓你將自我關懷變成習慣。</p> </div> </div> <div class="home-container feature-card py-12 md:py-0 flex flex-col items-center md:items-start justify-center space-y-8"> <img class="w-3/4 h-auto mx-auto md:hidden reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-04-zh.png" alt="Feature 5 - events"> <div class="md:w-1/2 flex flex-col items-center md:items-start justify-center md:justify-start"> <h2 class="font-jinxuanlatte text-5xl leading-tight text-primary-darker mb-3 text-center md:text-left reveal">活動</h2> <p class="text-base text-primary-darker text-center md:text-left reveal">參加由臨床心理學家帶領的「網上講座」、「靜觀共修」及「治療小組」活動，鞏固網上自助學習。</p> </div> </div> <div class="home-container feature-card py-12 md:py-0 flex flex-col items-center md:items-start justify-center space-y-8"> <img class="w-3/4 h-auto mx-auto md:hidden reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-05-zh.png" alt="Feature 6 - articles"> <div class="md:w-1/2 flex flex-col items-center md:items-start justify-center md:justify-start"> <h2 class="font-jinxuanlatte text-5xl leading-tight text-primary-darker mb-3 text-center md:text-left reveal">深度文章</h2> <p class="text-base text-primary-darker text-center md:text-left reveal">定期發表不同文章，用輕鬆貼地的角度，深入淺出講解心理學研究、概念和冷知識。</p> </div> </div> <div class="home-container feature-card py-12 md:py-0 flex flex-col items-center md:items-start justify-center space-y-8"> <img class="w-3/4 h-auto mx-auto md:hidden reveal" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/web-features-06-zh.webp" alt="Feature 7 - Somewhere we share"> <div class="md:w-1/2 flex flex-col items-center md:items-start justify-center md:justify-start"> <h2 class="font-jinxuanlatte text-5xl leading-tight text-primary-darker mb-3 text-center md:text-left hidden sm:block reveal">心<span class="tracking-tight">wher</span>e討論區</h2> <h2 class="font-jinxuanlatte text-5xl leading-tight text-primary-darker mb-3 text-center md:text-left sm:hidden reveal">心<span class="tracking-tight">wher</span>e<br>討論區</h2> <p class="text-base text-primary-darker text-center md:text-left reveal">我們相信，心理健康是日常事。這裡是一個分享和傾聽的空間。邀請你進來訴說經歷，聊關係、聊工作、聊心理健康、聊生活，尋找共鳴，共建支援網絡。立即下載手機<span class="tracking-tight">Ap</span>p，享用這個<span class="tracking-tight">Ap</span>p獨有的功能！</p> </div> </div> </div> <div class="w-full relative z-0 inset-x-0 h-screen bg-module-box flex pt-24 md:pt-16 flex-col items-center justify-between" id="valley-section" x-data=""> <div class="home-container flex flex-col items-center flex-shrink-0 pb-4"> <h3 class="sm:hidden font-jinxuanlatte text-4xl leading-tight text-primary-darker text-center max-w-128 reveal">讓我們陪伴你走進鍛鍊心理肌肉的高山低谷</h3> <h3 class="hidden sm:block font-jinxuanlatte text-4xl leading-tight text-primary-darker text-center reveal">讓我們陪伴你<br>走進鍛鍊心理肌肉的高山低谷</h3> <div> <a href="/cuhk/register" class="mt-12 px-10 h-11 flex flex-row items-center justify-center bg-start hover:bg-start-dark rounded-full text-white font-bold text-lg shadow-primary reveal" >立即登記</a> </div> </div> <div class="flex-grow w-full flex flex-col items-stretch justify-end overflow-hidden relative" id="valley-image-container"> <img id="valley-image" class="absolute inset-x-0 bottom-0 w-full h-auto" src="https://www.jcthplus.org/wp-content/themes/1.0/assets/images/home/4-valleys.webp" alt="Banner valleys"> </div> </div> <script> (function() { window.addEventListener('scroll', homeScrollFunction); windowResizeFunction(); let lastScrollTop = 0; let featureOffset = $("#wacc-features-section").offset().top; let cardHeight = $(window).height(); let cutoffTop = cardHeight * 1/2; let cardsOffset = []; $("#wacc-features-section .feature-card").each(function(index, element) { if (index == 0) { cardsOffset.push(featureOffset); } else { cardsOffset.push(featureOffset + (index - 1) * cardHeight + cutoffTop); } }); cardsOffset.push(featureOffset + (cardsOffset.length) * cardHeight); console.log(cardsOffset); let inFeatureSection = false; let isScrolling = false; let dir = "down"; let isChangingImage = false; function homeScrollFunction(e) { let scrollTop = document.body.scrollTop == 0 ? document.documentElement.scrollTop : document.body.scrollTop; if (scrollTop > lastScrollTop) { dir = "down"; } else if (scrollTop < lastScrollTop) { dir = "up"; } if (dir === "down") { for (let i = 1; i < cardsOffset.length - 1; i++) { if (scrollTop >= cardsOffset[i] && scrollTop < cardsOffset[i+1]) { if (!$("#wacc-features-section .feature-images").eq(i).is(":visible") && !isChangingImage) { isChangingImage = true; $("#wacc-features-section .feature-images").fadeOut(100); $("#wacc-features-section .feature-images").eq(i).delay(100).fadeIn(500, function() { isChangingImage = false; }); break; } } } } if (dir === "up") { for (let i = cardsOffset.length - 1; i > 0; i--) { if (scrollTop < cardsOffset[i] && scrollTop >= cardsOffset[i-1]) { if (!$("#wacc-features-section .feature-images").eq(i-1).is(":visible") && !isChangingImage) { isChangingImage = true; $("#wacc-features-section .feature-images").fadeOut(100); $("#wacc-features-section .feature-images").eq(i-1).delay(100).fadeIn(500, function() { isChangingImage = false; }); break; } } } } lastScrollTop = scrollTop; } function windowResizeFunction(e) { const img = document.getElementById("valley-image"); const container = document.getElementById("valley-image-container"); if ((container.offsetWidth / container.offsetHeight) > (1920 / 720)) { img.classList.remove("bottom-0"); img.classList.add("top-0"); } else { img.classList.remove("top-0"); img.classList.add("bottom-0"); } } $(window).resize(function () { let lastScrollTop = 0; let featureOffset = $("#wacc-features-section").offset().top; let cardHeight = $(window).height(); let cutoffTop = cardHeight * 1/2; windowResizeFunction(); }) function reveal() { const reveals = $(".reveal"); const windowHeight = window.innerHeight; for (let i = 0; i < reveals.length; i++) { let elementTop = reveals[i].getBoundingClientRect().top; let elementVisible = 30; if (elementTop < windowHeight - elementVisible) { reveals[i].classList.add("active"); } } } window.addEventListener("scroll", reveal); reveal(); })(); </script>