mingle/mingle-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add: 할인 혜택 섹션 추가 (추천인 20% + 다회권 최대 30%)

Browse Source 
- 서비스 페이지: 추가 옵션 요금 섹션 내 할인 혜택 카드 2개 추가
  - 추천인 할인 (신규+추천인 모두 20%)
  - 다회권 할인 (3회 20%, 5회 25%, 7회 30%)
- 메인페이지 CTA: "다회 이용 시 최대 30% 할인" 배너 링크 추가
- CSS: 할인 카드, 테이블, 반응형, 다크모드 스타일
- en/ja/zh 4개 언어 모두 적용

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
68893236+KINDNICK@users.noreply.github.com 2026-03-08 23:58:13 +09:00
parent 335cf30621
commit a5651819e1
10 changed files with 555 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
css/main.css
View File

@ -1038,6 +1038,40 @@
transform: translateY(-3px);
}
.cta-discount-banner {
margin: var(--spacing-lg) auto var(--spacing-xl);
max-width: 480px;
}
.cta-discount-banner a {
display: inline-block;
padding: 10px 28px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 136, 0, 0.5);
border-radius: 30px;
color: #fff;
font-size: var(--font-base);
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
}
.cta-discount-banner a:hover {
background: rgba(255, 136, 0, 0.2);
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 136, 0, 0.3);
}
.cta-discount-banner a i {
margin-right: 6px;
color: var(--primary-color);
}
.cta-discount-banner a strong {
color: var(--primary-color);
}
.contact-info-quick {
display: grid;
grid-template-columns: repeat(2, 1fr);

234
css/services.css
View File

@ -637,6 +637,176 @@
line-height: 1.5;
}
/* ========================================
할인 혜택 섹션
======================================== */
.discount-section {
margin-bottom: var(--spacing-2xl);
}
.discount-section > h3 {
font-size: var(--font-xl);
color: var(--text-primary);
text-align: center;
margin-bottom: var(--spacing-sm);
}
.discount-section > h3 i {
color: var(--primary-color);
margin-right: 8px;
}
.discount-scope {
text-align: center;
font-size: var(--font-sm);
color: var(--text-tertiary);
margin-bottom: var(--spacing-xl);
}
.discount-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xl);
}
.discount-card {
background: var(--bg-white);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.discount-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.discount-card-header {
padding: var(--spacing-lg) var(--spacing-xl);
display: flex;
align-items: center;
gap: 12px;
position: relative;
}
.discount-card-header.referral {
background: linear-gradient(135deg, #ff8800 0%, #ffaa33 100%);
color: #fff;
}
.discount-card-header.multipass {
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
color: #fff;
}
.discount-icon {
font-size: 1.4rem;
}
.discount-card-header h4 {
font-size: var(--font-lg);
font-weight: 700;
margin: 0;
color: #fff;
}
.discount-badge {
margin-left: auto;
background: rgba(255, 255, 255, 0.25);
padding: 4px 12px;
border-radius: 20px;
font-size: var(--font-xs);
font-weight: 600;
white-space: nowrap;
}
.discount-card-body {
padding: var(--spacing-xl);
}
.discount-highlight {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md) var(--spacing-lg);
background: var(--bg-light);
border-radius: var(--border-radius-sm);
}
.discount-rate {
font-size: 2rem;
font-weight: 800;
color: var(--primary-color);
line-height: 1;
}
.discount-label {
font-size: var(--font-base);
color: var(--text-primary);
font-weight: 600;
}
.discount-details {
list-style: none;
padding: 0;
margin: 0;
}
.discount-details li {
position: relative;
padding: 6px 0 6px 20px;
font-size: var(--font-sm);
color: var(--text-secondary);
line-height: 1.6;
}
.discount-details li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--primary-color);
font-weight: 700;
}
/* 다회권 테이블 */
.discount-table-wrap {
margin-bottom: var(--spacing-lg);
}
.discount-table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
.discount-table th {
background: var(--bg-light);
padding: 10px 16px;
font-size: var(--font-sm);
font-weight: 600;
color: var(--text-secondary);
border-bottom: 2px solid var(--border-color);
}
.discount-table td {
padding: 12px 16px;
font-size: var(--font-base);
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
}
.discount-table .highlight-row td {
background: rgba(108, 92, 231, 0.08);
font-weight: 600;
}
.discount-table .highlight-row td:last-child {
color: #6c5ce7;
font-size: 1.1em;
}
/* 이용 안내사항 */
.usage-notes {
background-color: var(--bg-white);
@ -1008,7 +1178,24 @@
.notes-grid {
grid-template-columns: 1fr;
}
.discount-cards {
grid-template-columns: 1fr;
}
.discount-highlight {
flex-direction: column;
text-align: center;
}
.discount-card-header {
flex-wrap: wrap;
}
.discount-badge {
margin-left: 0;
}
.package-header {
flex-direction: column;
align-items: flex-start;
@ -2430,6 +2617,51 @@
color: var(--dark-text-tertiary);
}
/* 할인 혜택 섹션 */
[data-theme="dark"] .discount-card {
background: var(--dark-surface);
border: 1px solid var(--glass-border);
}
[data-theme="dark"] .discount-card-body {
color: var(--dark-text-primary);
}
[data-theme="dark"] .discount-highlight {
background: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .discount-label {
color: var(--dark-text-primary);
}
[data-theme="dark"] .discount-details li {
color: var(--dark-text-secondary);
}
[data-theme="dark"] .discount-section > h3 {
color: var(--dark-text-primary);
}
[data-theme="dark"] .discount-scope {
color: var(--dark-text-tertiary);
}
[data-theme="dark"] .discount-table th {
background: rgba(255, 255, 255, 0.06);
color: var(--dark-text-secondary);
border-color: var(--glass-border);
}
[data-theme="dark"] .discount-table td {
color: var(--dark-text-primary);
border-color: var(--glass-border);
}
[data-theme="dark"] .discount-table .highlight-row td {
background: rgba(108, 92, 231, 0.15);
}
/* 이용 안내사항 */
[data-theme="dark"] .usage-notes {
background: var(--dark-surface);

4
en/index.html
View File

@ -975,6 +975,10 @@
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg" data-i18n="index.cta.btnNaver">Naver Booking</a>
</div>
<div class="cta-discount-banner reveal" data-reveal="up" data-delay="350">
<a href="/en/services#discount" data-i18n-html="index.cta.discountBanner"><i class="fa-solid fa-tags"></i> Save up to <strong>30% off</strong> with multi-session passes! Learn more →</a>
</div>
<div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
<div class="info-quick-item">
<span class="info-quick-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>

68
en/services.html
View File

@ -611,6 +611,74 @@ Ownership can be assigned to Mingle Studio or the client</p>
</div>
</div>
<!-- Discount Benefits -->
<div class="discount-section" id="discount">
<h3 data-i18n="services.discount.title"><i class="fa-solid fa-tags" aria-hidden="true"></i> Discount Benefits</h3>
<p class="discount-scope" data-i18n="services.discount.scope">* Applies to Streamingle Service (4-hour package) only / VAT excluded / Additional costs for backgrounds, avatar setup, props, etc. not included</p>
<div class="discount-cards">
<!-- Referral Discount -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header referral">
<span class="discount-icon"><i class="fa-solid fa-user-group" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.referralTitle">Referral Discount</h4>
<span class="discount-badge" data-i18n="services.discount.referralBadge">For New Customers</span>
</div>
<div class="discount-card-body">
<div class="discount-highlight">
<span class="discount-rate">20%</span>
<span class="discount-label" data-i18n="services.discount.referralBoth">Discount for both referrer &amp; new customer</span>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.referralDesc1">Tell us who referred you when making your first booking</li>
<li data-i18n="services.discount.referralDesc2">Both the referrer and new customer receive a 20% discount coupon</li>
<li data-i18n="services.discount.referralDesc3">No limit on referral count — coupons accumulate</li>
</ul>
</div>
</div>
<!-- Multi-Pass Discount -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header multipass">
<span class="discount-icon"><i class="fa-solid fa-ticket" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.multiTitle">Multi-Pass Discount</h4>
<span class="discount-badge" data-i18n="services.discount.multiBadge">Up to 30% Off</span>
</div>
<div class="discount-card-body">
<div class="discount-table-wrap">
<table class="discount-table">
<thead>
<tr>
<th data-i18n="services.discount.multiColPass">Pass</th>
<th data-i18n="services.discount.multiColRate">Discount</th>
</tr>
</thead>
<tbody>
<tr>
<td data-i18n="services.discount.multi3">3-Session Pass</td>
<td><strong>20%</strong></td>
</tr>
<tr>
<td data-i18n="services.discount.multi5">5-Session Pass</td>
<td><strong>25%</strong></td>
</tr>
<tr class="highlight-row">
<td data-i18n="services.discount.multi7">7-Session Pass</td>
<td><strong>30%</strong></td>
</tr>
</tbody>
</table>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.multiDesc1">Discount applied with prepayment (must be used within 3 months)</li>
<li data-i18n="services.discount.multiDesc2">Pre-scheduling your dates helps with smooth coordination</li>
<li data-i18n="services.discount.multiDesc3">If undecided, please consult at least 2 weeks in advance</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 이용 안내사항 -->
<div class="usage-notes">
<h3 data-i18n="services.usage.title">Usage Guidelines</h3>

4
index.html
View File

@ -983,6 +983,10 @@
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg" data-i18n="index.cta.btnNaver">네이버 예약</a>
</div>
<div class="cta-discount-banner reveal" data-reveal="up" data-delay="350">
<a href="/services#discount" data-i18n-html="index.cta.discountBanner"><i class="fa-solid fa-tags"></i> 다회 이용 시 <strong>최대 30% 할인!</strong> 자세히 보기 →</a>
</div>
<div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
<div class="info-quick-item">
<span class="info-quick-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>

4
ja/index.html
View File

@ -975,6 +975,10 @@
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg" data-i18n="index.cta.btnNaver">Naver予約</a>
</div>
<div class="cta-discount-banner reveal" data-reveal="up" data-delay="350">
<a href="/ja/services#discount" data-i18n-html="index.cta.discountBanner"><i class="fa-solid fa-tags"></i> 複数回利用で<strong>最大30%割引！</strong> 詳しく見る →</a>
</div>
<div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
<div class="info-quick-item">
<span class="info-quick-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>

68
ja/services.html
View File

@ -611,6 +611,74 @@ Mingle Studioまたは依頼者帰属を選択可能です</p>
</div>
</div>
<!-- 割引特典 -->
<div class="discount-section" id="discount">
<h3 data-i18n="services.discount.title"><i class="fa-solid fa-tags" aria-hidden="true"></i> 割引特典</h3>
<p class="discount-scope" data-i18n="services.discount.scope">※ ストリミングルサービス（4時間パッケージ）に限る / VAT別途 / 背景・アバターセッティング・プロップ費用等の追加費用は除外</p>
<div class="discount-cards">
<!-- 紹介割引 -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header referral">
<span class="discount-icon"><i class="fa-solid fa-user-group" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.referralTitle">紹介割引</h4>
<span class="discount-badge" data-i18n="services.discount.referralBadge">新規のお客様対象</span>
</div>
<div class="discount-card-body">
<div class="discount-highlight">
<span class="discount-rate">20%</span>
<span class="discount-label" data-i18n="services.discount.referralBoth">紹介者＆新規のお客様 両方に割引</span>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.referralDesc1">新規のお客様は初回予約時に紹介者をお知らせください</li>
<li data-i18n="services.discount.referralDesc2">紹介者と新規のお客様の両方に20%割引クーポンを進呈</li>
<li data-i18n="services.discount.referralDesc3">紹介回数の制限なく累積可能</li>
</ul>
</div>
</div>
<!-- 回数券割引 -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header multipass">
<span class="discount-icon"><i class="fa-solid fa-ticket" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.multiTitle">回数券割引</h4>
<span class="discount-badge" data-i18n="services.discount.multiBadge">最大30%割引</span>
</div>
<div class="discount-card-body">
<div class="discount-table-wrap">
<table class="discount-table">
<thead>
<tr>
<th data-i18n="services.discount.multiColPass">回数券</th>
<th data-i18n="services.discount.multiColRate">割引率</th>
</tr>
</thead>
<tbody>
<tr>
<td data-i18n="services.discount.multi3">3回券</td>
<td><strong>20%</strong></td>
</tr>
<tr>
<td data-i18n="services.discount.multi5">5回券</td>
<td><strong>25%</strong></td>
</tr>
<tr class="highlight-row">
<td data-i18n="services.discount.multi7">7回券</td>
<td><strong>30%</strong></td>
</tr>
</tbody>
</table>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.multiDesc1">前払い時に割引適用（3ヶ月以内に消化）</li>
<li data-i18n="services.discount.multiDesc2">事前に予約日を決めるとスケジュール調整がスムーズです</li>
<li data-i18n="services.discount.multiDesc3">未定の場合は最低2週間前にご相談ください</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 이용 안내사항 -->
<div class="usage-notes">
<h3 data-i18n="services.usage.title">ご利用案内</h3>

68
services.html
View File

@ -604,6 +604,74 @@
</div>
</div>
<!-- 할인 혜택 -->
<div class="discount-section" id="discount">
<h3 data-i18n="services.discount.title"><i class="fa-solid fa-tags" aria-hidden="true"></i> 할인 혜택</h3>
<p class="discount-scope" data-i18n="services.discount.scope">* 스트리밍글 서비스(4시간 패키지)에 한함 / VAT 별도 / 배경·아바타세팅·프랍비용 등 추가비용 제외</p>
<div class="discount-cards">
<!-- 추천인 할인 -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header referral">
<span class="discount-icon"><i class="fa-solid fa-user-group" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.referralTitle">추천인 할인</h4>
<span class="discount-badge" data-i18n="services.discount.referralBadge">신규 고객 대상</span>
</div>
<div class="discount-card-body">
<div class="discount-highlight">
<span class="discount-rate">20%</span>
<span class="discount-label" data-i18n="services.discount.referralBoth">추천인 & 신규고객 모두 할인</span>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.referralDesc1">신규고객 첫 예약 시 추천인을 알려주세요</li>
<li data-i18n="services.discount.referralDesc2">추천인과 신규고객 모두 20% 할인 쿠폰 지급</li>
<li data-i18n="services.discount.referralDesc3">추천 횟수 제한 없이 누적 가능</li>
</ul>
</div>
</div>
<!-- 다회권 할인 -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header multipass">
<span class="discount-icon"><i class="fa-solid fa-ticket" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.multiTitle">다회권 할인</h4>
<span class="discount-badge" data-i18n="services.discount.multiBadge">최대 30% 할인</span>
</div>
<div class="discount-card-body">
<div class="discount-table-wrap">
<table class="discount-table">
<thead>
<tr>
<th data-i18n="services.discount.multiColPass">이용권</th>
<th data-i18n="services.discount.multiColRate">할인율</th>
</tr>
</thead>
<tbody>
<tr>
<td data-i18n="services.discount.multi3">3회권</td>
<td><strong>20%</strong></td>
</tr>
<tr>
<td data-i18n="services.discount.multi5">5회권</td>
<td><strong>25%</strong></td>
</tr>
<tr class="highlight-row">
<td data-i18n="services.discount.multi7">7회권</td>
<td><strong>30%</strong></td>
</tr>
</tbody>
</table>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.multiDesc1">선결제 시 할인 적용 (3개월 이내 소진)</li>
<li data-i18n="services.discount.multiDesc2">예약일자를 미리 정하면 스케줄 조정이 원활합니다</li>
<li data-i18n="services.discount.multiDesc3">미정 시 최소 2주 전 협의를 통해 일정 확정</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 이용 안내사항 -->
<div class="usage-notes">
<h3 data-i18n="services.usage.title">이용 안내사항</h3>

4
zh/index.html
View File

@ -975,6 +975,10 @@
<a href="https://m.booking.naver.com/booking/10/bizes/1468174/items/6949481" target="_blank" class="btn btn-outline btn-lg" data-i18n="index.cta.btnNaver">Naver预约</a>
</div>
<div class="cta-discount-banner reveal" data-reveal="up" data-delay="350">
<a href="/zh/services#discount" data-i18n-html="index.cta.discountBanner"><i class="fa-solid fa-tags"></i> 多次使用<strong>最高享30%折扣！</strong> 了解详情 →</a>
</div>
<div class="contact-info-quick reveal" data-reveal="up" data-delay="400">
<div class="info-quick-item">
<span class="info-quick-icon"><i class="fa-solid fa-envelope" aria-hidden="true"></i></span>

68
zh/services.html
View File

@ -611,6 +611,74 @@
</div>
</div>
<!-- 优惠活动 -->
<div class="discount-section" id="discount">
<h3 data-i18n="services.discount.title"><i class="fa-solid fa-tags" aria-hidden="true"></i> 优惠活动</h3>
<p class="discount-scope" data-i18n="services.discount.scope">※ 仅适用于Streamingle服务（4小时套餐）/ 不含增值税 / 不包含背景、虚拟形象设置、道具费用等额外费用</p>
<div class="discount-cards">
<!-- 推荐优惠 -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header referral">
<span class="discount-icon"><i class="fa-solid fa-user-group" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.referralTitle">推荐优惠</h4>
<span class="discount-badge" data-i18n="services.discount.referralBadge">新客户专享</span>
</div>
<div class="discount-card-body">
<div class="discount-highlight">
<span class="discount-rate">20%</span>
<span class="discount-label" data-i18n="services.discount.referralBoth">推荐人和新客户均可享受折扣</span>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.referralDesc1">新客户首次预约时请告知推荐人信息</li>
<li data-i18n="services.discount.referralDesc2">推荐人和新客户均可获得20%折扣券</li>
<li data-i18n="services.discount.referralDesc3">推荐次数无上限，优惠券可累积</li>
</ul>
</div>
</div>
<!-- 多次卡优惠 -->
<div class="discount-card reveal" data-reveal="up">
<div class="discount-card-header multipass">
<span class="discount-icon"><i class="fa-solid fa-ticket" aria-hidden="true"></i></span>
<h4 data-i18n="services.discount.multiTitle">多次卡优惠</h4>
<span class="discount-badge" data-i18n="services.discount.multiBadge">最高30%折扣</span>
</div>
<div class="discount-card-body">
<div class="discount-table-wrap">
<table class="discount-table">
<thead>
<tr>
<th data-i18n="services.discount.multiColPass">次卡</th>
<th data-i18n="services.discount.multiColRate">折扣率</th>
</tr>
</thead>
<tbody>
<tr>
<td data-i18n="services.discount.multi3">3次卡</td>
<td><strong>20%</strong></td>
</tr>
<tr>
<td data-i18n="services.discount.multi5">5次卡</td>
<td><strong>25%</strong></td>
</tr>
<tr class="highlight-row">
<td data-i18n="services.discount.multi7">7次卡</td>
<td><strong>30%</strong></td>
</tr>
</tbody>
</table>
</div>
<ul class="discount-details">
<li data-i18n="services.discount.multiDesc1">预付款时享受折扣（需在3个月内使用完毕）</li>
<li data-i18n="services.discount.multiDesc2">提前确定预约日期有助于顺利安排日程</li>
<li data-i18n="services.discount.multiDesc3">如未确定，请至少提前2周协商</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 이용 안내사항 -->
<div class="usage-notes">
<h3 data-i18n="services.usage.title">使用须知</h3>