-
Notifications
You must be signed in to change notification settings - Fork 0
/
price.html
196 lines (192 loc) · 10.9 KB
/
price.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!DOCTYPE html>
<html lang="zh-Hant-tw">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>計費方式說明 | ChatTalker 最全面的聊天機器人</title>
<meta name="description" content="Facebook、Instagram、LINE 聊天機器人解決方案。">
<link rel="preconnect" href="https://cdnjs.cloudflare.com/">
<link rel="preconnect" href="https://cdn.jsdelivr.net/">
<!-- Style -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Noto+Sans+TC:wght@400;700&family=Wendy+One&display=swap" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
<link href="css/price.css" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="container d-flex justify-content-space-between align-items-center">
<a href="index.html" title="返回首頁">
<div class="img-vertical img-logo">
<img src="images/logo.png" alt="ChatTalker Logo">
</div>
</a>
<a class="btn btn-highlight btn-narrow" href="price.html">方案費用</a>
</div>
</nav>
<header>
<div class="container">
<div class="content-text">
<h1 class="text-title-xl text-bold mb-16">計費方式說明</h1>
<h2>聊天機器人幫你實現增粉、轉單、客服等目標</h2>
</div>
</div>
<div class="img-bg img-horizon">
<img class="d-screen-991" src="images/banner.svg" alt="聊天機器人幫你實現增粉、轉單、客服等目標示意插圖">
<img class="d-screen-991-none" src="images/banner_sm.svg" alt="聊天機器人幫你實現增粉、轉單、客服等目標示意插圖">
</div>
</header>
<main>
<section id="section-plan">
<div class="container">
<h3 class="text-title-lg text-bold text-center">彈性選擇,提供您選擇最適合的方案</h3>
</div>
<div class="content-scroll-x">
<div class="row-plan-btn text-nowrap">
<div class="btn-group">
<input type="radio" id="plan-01" name="plan" value="10000" class="invisible" checked>
<label for="plan-01" class="btn btn-price btn-outline-brand">10000位</label>
</div>
<div class="btn-group">
<input type="radio" id="plan-02" name="plan" value="15000" class="invisible">
<label for="plan-02" class="btn btn-price btn-outline-brand">15000位</label>
</div>
<div class="btn-group">
<input type="radio" id="plan-03" name="plan" value="20000" class="invisible">
<label for="plan-03" class="btn btn-price btn-outline-brand">20000位</label>
</div>
<div class="btn-group">
<input type="radio" id="plan-04" name="plan" value="25000" class="invisible">
<label for="plan-04" class="btn btn-price btn-outline-brand">25000位</label>
</div>
<div class="btn-group">
<input type="radio" id="plan-05" name="plan" value=">25000" class="invisible">
<label for="plan-05" class="btn btn-price btn-outline-brand">>25000位</label>
</div>
</div>
</div>
<div class="container">
<div class="row-plan-card">
<div class="card card-plan">
<h3 class="text-24 text-bold text-center my-16">基本版</h3>
<hr>
<div class="card-body">
<div class="text-center">
<p>提供中小企業最必要的功能 <br> 完整建立分眾以達到精準的行銷自動化</p>
<div class="d-flex align-items-center justify-content-center">
<div class="card card-plan-price bg-light shadow-none">
<small class="text-nowrap">訂閱用戶數</small>
<div class="text-brand">
<span class="text-user-count text-number">10000</span>
<small class="text-bold">位</small>
</div>
</div>
<span class="text-equal">=</span>
<div class="card card-plan-price bg-light shadow-none">
<small class="text-nowrap">試算每月的費用</small>
<div>
<span id="text-price-lite" class="text-number">600</span>
<small class="text-bold">TWD</small>
</div>
</div>
</div>
</div>
<ul class="list list-check mb-32">
<li>支援 Messenger / Instagram 或 LINE 渠道</li>
<li>10 個進階套件</li>
<li>可設定 50 種分眾標籤</li>
<li>客服人機轉接</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-brand">立即體驗</button>
</div>
</div>
</div>
<div class="card card-plan">
<h3 class="text-24 text-bold text-center my-16">標準版</h3>
<hr>
<div class="card-body">
<div class="text-center">
<p>建立企業流量池,全通路數據整合與交換 <br> 高可靠性服務</p>
<div class="d-flex align-items-center justify-content-center">
<div class="card card-plan-price bg-light shadow-none">
<small class="text-nowrap">訂閱用戶數</small>
<div class="text-brand">
<span class="text-user-count text-number">10000</span>
<small class="text-bold">位</small>
</div>
</div>
<span class="text-equal">=</span>
<div class="card card-plan-price bg-light shadow-none">
<small class="text-nowrap">試算每月的費用</small>
<div>
<span id="text-price-pro" class="text-number">1600</span>
<small class="text-bold">TWD</small>
</div>
</div>
</div>
</div>
<ul class="list list-check mb-32">
<li>支援多個 Messenger、Instagram 和 LINE 渠道</li>
<li>20 個進階及行銷互動套件</li>
<li>可設定 500 種分眾標籤</li>
<li>客服人機轉接+自動指派專員處理</li>
</ul>
<div class="text-center">
<button type="button" class="btn btn-brand">立即體驗</button>
</div>
</div>
</div>
</div>
<div class="bg-circle rellax"></div>
</div>
</section>
<section id="section-faq">
<h3 class="text-title-lg text-bold text-center">常見問題</h3>
<div class="container">
<div class="card card-faq">
<input type="checkbox" id="faq-01" name="faq" class="invisible" checked>
<label class="content-faq-title" for="faq-01">
<h4 class="text-title-mini">我要怎麼變更方案?</h4>
<div class="icon-plus"></div>
</label>
<div class="content-faq-desc" style="display: block;">
<p>請聯絡您的業務專員修改訂閱方案,我們將為您進行變更流程。</p>
</div>
</div>
<div class="card card-faq">
<input type="checkbox" id="faq-02" name="faq" class="invisible">
<label class="content-faq-title" for="faq-02">
<h4 class="text-title-mini">如果我沒有LINE官方帳號怎麼辦?</h4>
<div class="icon-plus"></div>
</label>
<div class="content-faq-desc">
<p>沒關係的,只要您是我們任何一個方案的夥伴,我們的專員可以協助辦理哦!</p>
</div>
</div>
<div class="card card-faq">
<input type="checkbox" id="faq-03" name="faq" class="invisible">
<label class="content-faq-title" for="faq-03">
<h4 class="text-title-mini">非上班日有客服支援嗎?</h4>
<div class="icon-plus"></div>
</label>
<div class="content-faq-desc">
<p>當然哦!我們錢都收了,不會拋棄你的! <br> 請您直接來我們公司,我們假日也都在辦公室。</p>
</div>
</div>
</div>
</section>
</main>
<footer class="text-center bg-light py-16">
© 2022 chatTalker. All Rights Reserved.
</footer>
<button type="button" id="btn-top" class="btn btn-brand round">Top</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<script src="js/all.js"></script>
<script src="js/price.js"></script>
</body>
</html>