-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpricing.html
192 lines (170 loc) · 5.94 KB
/
pricing.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
<!DOCTYPE html>
<html lang="en">
<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="stylesheet" href="scss/all.css">
<title>Document</title>
<script src="https://kit.fontawesome.com/92d27cddf1.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<script src="all.js"></script>
</head>
<body>
<div class="home-container">
<header class="pricing-header">
<img class="header-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/banner.svg"
alt="">
<div class="navbar sub-container">
<a href="./index.html">
<img class="navbar-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/logo.png"
alt="">
</a>
<a href="" class="navbar-btn">
費用方案
</a>
</div>
<div class="header-text">
<img class="header-img-sm"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/banner_sm.svg"
alt="">
<h1 class="header-title big-em">
計費方式說明
</h1>
<p>聊天機器人幫你實現增粉、轉單、客服等目標</p>
</div>
</header>
<section class="plan">
<h2 class="plan-title section-title">
彈性選擇，提供您選擇最適合的方案
</h2>
<img class="ball-img4"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball03.svg"></img>
<div class="plan-btn-list">
<button href="#" class="plan-btn" value="10000"> 10000位</button>
<button href="#" class="plan-btn" value="15000"> 15000位</button>
<button href="#" class="plan-btn" value="20000"v> 20000位</button>
<button href="#" class="plan-btn" value="25000"> 25000位</button>
<button href="#" class="plan-btn" value=">25000"> >25000位 </button>
</div>
<div class="plan-spec">
<div class="plan-spec-card">
<h3 class="plan-spec-card-title">
基本版
</h3>
<div class="plan-spec-card-body">
<p>
提供中小企業最必要的功能
<br>
完整建立分眾以達到精準的行銷自動化
</p>
<div class="pricing-box">
<div class="popularity">
訂閱用戶數
<br>
<span>
<em class="primary">10000</em> 位
</span>
</div>
<i class="fa-solid fa-equals"></i>
<div class="price">
<span>試算每個月的費用</span>
<br>
<span>
<em>600</em> <i>TWD</i>
</span>
</div>
</div>
<ul>
<li>支援 Messenger / Instagram 或 LINE 渠道</li>
<li>10 個進階套件</li>
<li>可設定 50 種分眾標籤</li>
<li>客服人機轉接</li>
</ul>
<a href="#" class="plan-btn">
立即體驗
</a>
</div>
</div>
<div class="plan-spec-card">
<h3 class="plan-spec-card-title">
標準版
</h3>
<div class="plan-spec-card-body">
<p>
建立企業流量池，全通路數據整合與交換
<br>
高可靠性服務
</p>
<div class="pricing-box">
<div class="popularity">
訂閱用戶數
<br>
<em class="primary">10000</em> 位
</div>
<i class="fa-solid fa-equals"></i>
<div class="price">
<span>試算每個月的費用</span>
<br>
<span>
<em>1600</em> <i>TWD</i>
</span>
</div>
</div>
<ul>
<li>支援 Messenger / Instagram 或 LINE 渠道</li>
<li>20 個進階套件</li>
<li>可設定 500 種分眾標籤</li>
<li>客服人機轉接+自動指派專員處理</li>
</ul>
<a href="#" class="plan-btn">
立即體驗
</a>
</div>
</div>
</div>
</section>
<section class="faq">
<h2 class="faq-title section-title">
常見問題
</h2>
<ul class="faq-list">
<li class="faq-card">
<h3 class="title">
<span>我要怎麼變更方案？</span>
<i class="fa-solid fa-plus"></i>
</h3>
<p class="content">
請聯絡您的業務專員修改訂閱方案，我們將為您進行變更流程。
</p>
</li>
<li class="faq-card">
<h3 class="title">
<span>如果我沒有LINE官方帳號怎麼辦？</span>
<i class="fa-solid fa-plus"></i>
</h3>
<p class="content">
沒關係的，只要您是我們任何一個方案的夥伴，我們的專員可以協助辦理哦！
</p>
</li>
<li class="faq-card">
<h3 class="title">
<span>非上班日有客服支援嗎？</span>
<i class="fa-solid fa-plus"></i>
</h3>
<p class="content">
當然哦！我們錢都收了，不會拋棄你的！ 請您直接來我們公司，我們假日也都在辦公室。
</p>
</li>
</ul>
</section>
<footer>
© 2022 chatTalker. All Rights Reserved.
</footer>
</body>
</div>
</html>