diff --git a/css/common.css b/css/common.css index 3eaa6b6..631c70c 100644 --- a/css/common.css +++ b/css/common.css @@ -1248,6 +1248,161 @@ body { } } +/* ======================================== + 플로팅 CTA (문의하기) 버튼 + ======================================== */ +.floating-cta { + position: fixed; + bottom: 30px; + left: 30px; + z-index: 9001; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 10px; +} + +.cta-main-btn { + width: 56px; + height: 56px; + border-radius: 50%; + border: none; + background: var(--gradient-main); + color: white; + font-size: 1.4rem; + cursor: pointer; + box-shadow: 0 4px 18px rgba(255, 136, 0, 0.4); + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.cta-main-btn:hover { + transform: scale(1.1); + box-shadow: 0 6px 24px rgba(255, 136, 0, 0.5); +} + +.cta-main-btn .cta-icon-close { + display: none; +} + +.floating-cta.active .cta-main-btn .cta-icon-open { + display: none; +} + +.floating-cta.active .cta-main-btn .cta-icon-close { + display: block; +} + +.floating-cta.active .cta-main-btn { + background: var(--text-secondary); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +/* 옵션 메뉴 */ +.cta-options { + display: flex; + flex-direction: column; + gap: 8px; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: all 0.25s ease; + pointer-events: none; +} + +.floating-cta.active .cta-options { + opacity: 1; + visibility: visible; + transform: translateY(0); + pointer-events: auto; +} + +.cta-option { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 16px; + border-radius: 28px; + text-decoration: none; + font-size: 0.88rem; + font-weight: 600; + white-space: nowrap; + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15); + transition: all 0.2s ease; + color: white; +} + +.cta-option:hover { + transform: translateX(4px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); +} + +.cta-option i, +.cta-option svg { + font-size: 1rem; + flex-shrink: 0; +} + +.cta-option svg { + width: 18px; + height: 18px; + fill: white; +} + +/* 카카오톡 */ +.cta-kakao { + background: #FEE500; + color: #3C1E1E; +} + +.cta-kakao svg { + fill: #3C1E1E; +} + +.cta-kakao:hover { + background: #f5dc00; +} + +/* 전화 */ +.cta-phone { + background: #10b981; +} + +.cta-phone:hover { + background: #059669; +} + +/* 문의 페이지 */ +.cta-contact { + background: var(--primary-color); +} + +.cta-contact:hover { + background: var(--primary-hover); +} + +/* 모바일 반응형 */ +@media (max-width: 768px) { + .floating-cta { + bottom: 20px; + left: 20px; + } + + .cta-main-btn { + width: 50px; + height: 50px; + font-size: 1.2rem; + } + + .cta-option { + padding: 8px 14px; + font-size: 0.82rem; + } +} + /* ======================================== 접근성 ======================================== */ @@ -1507,6 +1662,15 @@ body { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); } +/* 다크 모드 플로팅 CTA */ +[data-theme="dark"] .cta-main-btn { + box-shadow: 0 4px 18px rgba(255, 136, 0, 0.3); +} + +[data-theme="dark"] .cta-option { + box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35); +} + [data-theme="dark"] .bg-light { background: var(--dark-bg); } diff --git a/i18n/en.json b/i18n/en.json index 19427a2..bc9de66 100644 --- a/i18n/en.json +++ b/i18n/en.json @@ -34,7 +34,11 @@ "skipToContent": "Skip to content", "videoLoading": "Loading video...", "videoError": "Unable to load video", - "imageError": "Unable to load image" + "imageError": "Unable to load image", + "floatingCTA": "Contact Us", + "floatingKakao": "KakaoTalk Chat", + "floatingPhone": "Call Us", + "floatingContact": "Contact Page" }, "index": { "meta": { @@ -131,7 +135,8 @@ "title": "New to Motion Capture?", "desc": "No worries if it's your first time. We've organized frequently asked questions from booking to filming.", "btnFaq": "View FAQ", - "btnContact": "1:1 Inquiry" + "btnContact": "1:1 Inquiry", + "btnOnline": "Online Inquiry Page" }, "cta": { "label": "Get Started", @@ -142,8 +147,8 @@ "infoReservation": "Reservations", "infoBusiness": "Business", "infoDiscord": "Discord", - "infoDirections": "Directions", - "infoAddress": "236 Jubuto-ro, Bupyeong-gu, Incheon Techno Valley" + "infoKakao": "KakaoTalk", + "infoKakaoDesc": "Open Chat Consultation" }, "popup": { "title": "Pricing Update Notice", diff --git a/i18n/ja.json b/i18n/ja.json index cd9d7d7..eda449a 100644 --- a/i18n/ja.json +++ b/i18n/ja.json @@ -34,7 +34,11 @@ "skipToContent": "本文へスキップ", "videoLoading": "動画を読み込み中...", "videoError": "動画を読み込めません", - "imageError": "画像を読み込めません" + "imageError": "画像を読み込めません", + "floatingCTA": "お問い合わせ", + "floatingKakao": "KakaoTalkチャット", + "floatingPhone": "電話でお問い合わせ", + "floatingContact": "お問い合わせページ" }, "index": { "meta": { @@ -131,7 +135,8 @@ "title": "初めてで不安ですか？", "desc": "モーションキャプチャーが初めてでも大丈夫です。予約から撮影までよくある質問をまとめました。", "btnFaq": "よくある質問を見る", - "btnContact": "1:1お問い合わせ" + "btnContact": "1:1お問い合わせ", + "btnOnline": "オンラインお問い合わせページ" }, "cta": { "label": "Get Started", @@ -142,8 +147,8 @@ "infoReservation": "ご予約", "infoBusiness": "ビジネス", "infoDiscord": "Discord", - "infoDirections": "アクセス", - "infoAddress": "仁川市富平区主夫吐路236、仁川テクノバレー" + "infoKakao": "KakaoTalk", + "infoKakaoDesc": "オープンチャットで相談" }, "popup": { "title": "料金プラン変更のお知らせ", diff --git a/i18n/ko.json b/i18n/ko.json index 87a6817..eb3bbdd 100644 --- a/i18n/ko.json +++ b/i18n/ko.json @@ -34,7 +34,11 @@ "skipToContent": "본문 바로가기", "videoLoading": "비디오 로딩 중...", "videoError": "비디오를 로드할 수 없습니다", - "imageError": "이미지를 불러올 수 없습니다" + "imageError": "이미지를 불러올 수 없습니다", + "floatingCTA": "문의하기", + "floatingKakao": "카카오톡 상담", + "floatingPhone": "전화 문의", + "floatingContact": "문의 페이지" }, "index": { "meta": { @@ -131,7 +135,8 @@ "title": "처음이라 막막하신가요?", "desc": "모션캡쳐가 처음이어도 괜찮습니다. 예약부터 촬영까지 자주 묻는 질문을 정리했어요.", "btnFaq": "자주 묻는 질문 보기", - "btnContact": "1:1 문의하기" + "btnContact": "1:1 문의하기", + "btnOnline": "온라인 문의하기" }, "cta": { "label": "Get Started", @@ -142,8 +147,8 @@ "infoReservation": "예약 문의", "infoBusiness": "비즈니스", "infoDiscord": "Discord", - "infoDirections": "오시는 길", - "infoAddress": "인천 부평구 주부토로 236, 인천테크노밸리" + "infoKakao": "카카오톡", + "infoKakaoDesc": "오픈채팅 상담하기" }, "popup": { "title": "요금제 변경 안내", diff --git a/i18n/zh.json b/i18n/zh.json index 05cdf71..c5f65ed 100644 --- a/i18n/zh.json +++ b/i18n/zh.json @@ -34,7 +34,11 @@ "skipToContent": "跳转到正文", "videoLoading": "视频加载中...", "videoError": "无法加载视频", - "imageError": "无法加载图片" + "imageError": "无法加载图片", + "floatingCTA": "咨询", + "floatingKakao": "KakaoTalk咨询", + "floatingPhone": "电话咨询", + "floatingContact": "咨询页面" }, "index": { "meta": { @@ -131,7 +135,8 @@ "title": "第一次不知道怎么做？", "desc": "即使是第一次接触动作捕捉也没关系。我们整理了从预约到拍摄的常见问题。", "btnFaq": "查看常见问题", - "btnContact": "1:1 咨询" + "btnContact": "1:1 咨询", + "btnOnline": "在线咨询页面" }, "cta": { "label": "Get Started", @@ -142,8 +147,8 @@ "infoReservation": "预约咨询", "infoBusiness": "商务合作", "infoDiscord": "Discord", - "infoDirections": "交通指南", - "infoAddress": "仁川市富平区主夫吐路236，仁川科技谷" + "infoKakao": "KakaoTalk", + "infoKakaoDesc": "开放聊天咨询" }, "popup": { "title": "价格调整通知", diff --git a/index.html b/index.html index 4832902..3d76cf5 100644 --- a/index.html +++ b/index.html @@ -179,6 +179,7 @@ + @@ -828,12 +829,146 @@
자주 묻는 질문 보기 - 1:1 문의하기 + 온라인 문의하기
+ +
+
+
+

온라인 문의

+

아래 양식을 작성하시면 빠르게 답변 드리겠습니다

+
+ +
+
+
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +

※ 주민등록번호, 계좌번호 등 민감한 개인정보를 입력하지 마세요.

+
+ +
+ + 개인정보 처리방침 보기 +
+ +
+
    +
  • 수집 목적: 문의 접수 및 답변
    • +
  • 수집 항목: 이름, 이메일, 전화번호, 문의 내용
    • +
  • 보유 기간: 7일 후 자동 파기
    • +
+
+ +
+ + +
+
+
+
+
+ + + + +
@@ -871,10 +1006,10 @@
- +
- 오시는 길 - 인천 부평구 주부토로 236, 인천테크노밸리 + 카카오톡 + 오픈채팅 상담하기
@@ -959,6 +1094,7 @@ + diff --git a/js/common.js b/js/common.js index 696ee8b..27a85b8 100644 --- a/js/common.js +++ b/js/common.js @@ -28,6 +28,7 @@ document.addEventListener('DOMContentLoaded', async function() { initLazyLoading(); initRevealAnimations(); createFloatingSNS(); + createFloatingCTA(); hidePageLoading(); // 컴포넌트 로드 후 스크롤 위치 보정 if (window.scrollY > 0 && !window.location.hash) { @@ -385,6 +386,55 @@ function createFloatingSNS() { document.body.appendChild(snsContainer); } +// ======================================== +// 플로팅 CTA (문의하기) 버튼 +// ======================================== +function createFloatingCTA() { + if (document.querySelector('.floating-cta')) return; + // contact 페이지에서는 표시하지 않음 + if (window.location.pathname.includes('contact')) return; + + var _t = function(key, fallback) { + return (window.i18n && window.i18n.t) ? window.i18n.t(key, fallback) : fallback; + }; + + var cta = document.createElement('div'); + cta.className = 'floating-cta'; + cta.innerHTML = + '
' + + '' + + '' + + '' + _t('common.floatingKakao', '카카오톡 상담') + '' + + '' + + '' + + '' + + '' + _t('common.floatingPhone', '전화 문의') + '' + + '' + + '' + + '' + + '' + _t('common.floatingContact', '문의 페이지') + '' + + '' + + '
' + + ''; + + document.body.appendChild(cta); + + var mainBtn = cta.querySelector('.cta-main-btn'); + mainBtn.addEventListener('click', function() { + cta.classList.toggle('active'); + }); + + // 외부 클릭 시 닫기 + document.addEventListener('click', function(e) { + if (!cta.contains(e.target)) { + cta.classList.remove('active'); + } + }); +} + // ======================================== // 다크모드 토글 // ========================================