-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
358 lines (315 loc) · 12.3 KB
/
index.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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./scss/all.css">
<title>chatTalker</title>
</head>
<body>
<div class="home-container">
<img class="bg-img-lg"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/bg_home.svg"></img>
<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="./pricing.html" class="navbar-btn">
費用方案
</a>
</div>
<div class="jumbotron sub-container">
<div class="jumbotron-intro">
<h1 class="jumbotron-title">
ChatTalker 最全面的聊天機器人
</h1>
<h2 class="big-em">
你愛我像誰？
<br>
扮演什麼角色我都會
</h2>
<p class="jumbotron-wording">
Facebook、Instagram、LINE 聊天機器人解決方案
</p>
</div>
<div class="jumbotron-img">
<img src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/home.svg"
alt="">
</div>
<img class="bg-img-sm"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/bg_home_sm.svg"></img>
<img class="ball-img1"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball01.svg"></img>
</div>
<section class="platform sub-container">
<h2 class="platform-title section-title">三大平台，我來搞定</h2>
<ul class="platform-list">
<li class="platform-card">
<img class="platform-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/messenger.svg"
alt="">
<div class="platform-card-title">
<h3>Facebook Messenger</h3>
</div>
<div class="platform-card-text">
<p>
結合粉絲專頁，提高粉絲互動率
<br>
有效經營品牌社群
</p>
</div>
</li>
<li class="platform-card">
<img class="platform-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/line.svg"
alt="">
<div class="platform-card-title">
<h3>LINE 官方帳號</h3>
</div>
<div class="platform-card-text ">
<p>
融入日常生活，精準傳遞品牌資訊
<br>
打造個人化專屬服務
</p>
</div>
</li>
<li class="platform-card">
<img class="platform-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/instagram.svg"
alt="">
<div class="platform-card-title">
<h3>Instagram 商業帳號</h3>
</div>
<div class="platform-card-text">
<p>
貼近粉絲，提升品牌自然聲量
<br>
行銷、抽獎一站完成
</p>
</div>
</li>
</ul>
</section>
<section class="scenario sub-container">
<h2 class="scenario-title section-title ">
任何的角色，我都能給
</h2>
<p class="scenario-title-sub content-margin">
量身打造您想要的專屬服務，幫助您迅速判斷成效、並加快決策
</p>
<ul class="scenario-card-list sub-container">
<li class="scenario-card">
<img class="scenario-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ch01.svg"
alt="">
<div class="scenario-card-body">
<h3 class="scenario-card-title ">
活動主
</h3>
<p class="scenario-card-text ">
用戶數位足跡掌握在手
<br>
精準取得客戶輪廓，提供分析
</p>
</div>
</li>
<li class="scenario-card">
<img class="scenario-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ch02.svg"
alt="">
<div class="scenario-card-body">
<h3 class="scenario-card-title">
創作者
</h3>
<p class="scenario-card-text">
自由設計互動腳本
<br>
輕鬆整合各項數據
</p>
</div>
</li>
<li class="scenario-card">
<img class="scenario-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ch03.svg"
alt="">
<div class="scenario-card-body">
<h3 class="scenario-card-title">
企業品牌
</h3>
<p class="scenario-card-text">
多元資料整合，做出服務差異化
<br>
幫助企業加速決策
</p>
</div>
</li>
<li class="scenario-card">
<img class="scenario-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ch04.svg"
alt="">
<div class="scenario-card-body">
<h3 class="scenario-card-title ">
其他
</h3>
<p class="scenario-card-text">
創造更多可能...
</p>
</div>
</li>
<img class="ball-img2"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball02.svg"></img>
</ul>
</section>
<section class="feature sub-container">
<div class="feature-intro">
<h2 class="feature-intro-title section-title">快速了解客戶輪廓 <br> 建立品牌流量池</h2>
<p class="feature-intro-text">
深入用戶日常，成為用戶貼身好友
<br>
精準傳遞品牌資訊，打造個人化專屬服務
<br>
不知不覺深入用戶生活，成為用戶貼心的好朋朋:D
</p>
<a href="./pricing.html" class="price-btn">
費用方案
</a>
</div>
<ul class="feature-card-list">
<li class="feature-card">
<div class="feature-card-img-border">
<img class="feature-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/icon01.svg"
alt="">
</div>
<h3 class="feature-card-title">無敵轉換術</h3>
<p class="feature-card-text">
精準掌握客群來源 <br> 分析用戶轉化流程
</p>
</li>
<li class="feature-card">
<div class="feature-card-img-border">
<img class="feature-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/icon02.svg"
alt="">
</div>
<h3 class="feature-card-title">聊天機器人</h3>
<p class="feature-card-text">
66款聊天機器人模組 <br> 自由設計聊天流程
</p>
</li>
<li class="feature-card">
<div class="feature-card-img-border">
<img class="feature-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/icon03.svg"
alt="">
</div>
<h3 class="feature-card-title">一站式訊息中心</h3>
<p class="feature-card-text">
整合Messenger、LINE <br> 和IG三大平台訊息
</p>
</li>
<li class="feature-card">
<div class="feature-card-img-border">
<img class="feature-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/icon04.svg"
alt="">
</div>
<h3 class="feature-card-title">群發訊息</h3>
<p class="feature-card-text">
自由選定特定受眾 <br> 精準推送群發訊息
</p>
</li>
</ul>
</section>
<section class="testimonial sub-container">
<img class="ball-img3"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/ball03.svg">
</img>
<h2 class="section-title testimonial-title">好評如潮</h2>
<ul class="testimonial-card-list">
<li class="testimonial-card">
<img class="testimonial-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/user01.jpg" />
<p>
原來聊天機器人可以這麼有人性！團隊有完整的行銷計畫提供數位整合，讓我們公司的產品用更活潑的方式讓使用者認識。
</p>
<hr class="testimonial-card-hr">
<h3 class="testimonial-card-title">
清心寡慾設計公司
</h2>
<div class="testimonial-card-user">
<div>Lina 執行長</div>
<div class="testimonial-card-star">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
</li>
<li class="testimonial-card">
<img class="testimonial-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/user02.jpg" />
<p>
團隊很積極的協助行銷追蹤，針對機器人進行優化，讓我們一個月內提高10000個追蹤者，客戶體驗回饋很正面！
</p>
<hr class="testimonial-card-hr">
<h3 class="testimonial-card-title">
subwhat 行銷公司
</h2>
<div class="testimonial-card-user">
<div>Zoe 活動長</div>
<div class="testimonial-card-star">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
</li>
<li class="testimonial-card">
<img class="testimonial-card-img"
src="https://raw.githubusercontent.com/hexschool/webLayoutTraining1st/master/chatTalker_images/user03.jpg" />
<p>
經營了好久的IG，一直無法提升粉絲數，和團隊合作後，才知道可以用聊天機器人玩這麼豐富的行銷活動！太讚拉～
</p>
<hr class="testimonial-card-hr">
<h3 class="testimonial-card-title">油土伯</h2>
<div class="testimonial-card-user">
<div>HowBig</div>
<div class="testimonial-card-star">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
</div>
</li>
</ul>
</section>
<div class="footer">
<div class="footer-wrapper m0-a">
<h2 class="footer-title">
\ 美好用戶體驗，從對話開始 /
</h2>
<div class="footer-btn">
<a href="./pricing.html" class="price-btn m0-a">
費用方案
</a>
</div>
</div>
</div>
<footer>
© 2022 chatTalker. All Rights Reserved.
</footer>
</div>
</body>
</html>