forked from hunter-pc/hunter-pc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtest3.html
194 lines (187 loc) · 11.3 KB
/
test3.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
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/673dde104304e3196ae5abfc/1id4qms6b';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>電獵者電腦 - 專業電腦維修與IT解決方案</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body class="font-sans">
<!-- 頭部區域 -->
<header class="bg-gray-800 text-white">
<nav class="container mx-auto px-6 py-3 flex justify-between items-center">
<a href="index.html" class="text-2xl font-bold">電獵者電腦</a>
<div class="hidden md:flex items-center space-x-4">
<a href="index.html" class="hover:text-gray-300">首頁</a>
<a href="about.html" class="hover:text-gray-300">理念</a>
<a href="service.html" class="hover:text-gray-300">服務</a>
<a href="price.html" class="hover:text-gray-300">產品</a>
<a href="contact.html" class="hover:text-gray-300">聯絡</a>
</div>
<div class="quote_btn-container">
<a href="tel:+886989136652" class="text-white bg-blue-500 px-4 py-2 rounded hover:bg-blue-600 transition duration-300">
<i class="fas fa-phone mr-2"></i>Call : +886989-136-652
</a>
</div>
</nav>
</header>
<!-- 英雄區域 -->
<section class="bg-gray-100 py-20">
<div class="container mx-auto px-6">
<div class="flex flex-wrap items-center">
<div class="w-full md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl font-bold mb-4">快速 & 安全 愛鄉土的守護者</h1>
<p class="text-xl mb-8">你有電腦問題嗎？我們能夠為您解決疑難雜症，小到 LINE 備份，大到防範駭客，15年以上服務經驗，各樣難題，迎刃而解。</p>
<div class="space-x-4">
<a href="#" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300">閱讀更多</a>
<a href="#" class="bg-gray-800 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition duration-300">聯絡我們</a>
</div>
</div>
<div class="w-full md:w-1/2">
<img src="images/slider-img.png" alt="電獵者電腦服務" class="mx-auto">
</div>
</div>
</div>
</section>
<!-- 服務區域 -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-10">服務一覽</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<img src="images/s1.png" alt="到府收送" class="w-16 h-16 mb-4">
<h3 class="text-xl font-semibold mb-2">到府收送</h3>
<p class="mb-4">電腦有問題? 沒關係，無論是三更半夜，或是打雷下雨，電獵者風雨無阻，為您服務！</p>
<a href="#" class="text-blue-500 hover:underline">閱讀更多</a>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<img src="images/s2.png" alt="遠端支援" class="w-16 h-16 mb-4">
<h3 class="text-xl font-semibold mb-2">遠端支援</h3>
<p class="mb-4">設定怎麼都搞不好？沒關係，交給電獵者，遠端微調您的設定，抓出作怪的臭蟲！</p>
<a href="#" class="text-blue-500 hover:underline">閱讀更多</a>
</div>
<div class="bg-gray-100 p-6 rounded-lg shadow-md">
<img src="images/s3.png" alt="更換系統" class="w-16 h-16 mb-4">
<h3 class="text-xl font-semibold mb-2">更換系統</h3>
<p class="mb-4">無論您是 Windows 或是 Linux，若不敷使用，換個系統又何妨呢？我們精心為您推薦最優質的作業系統。</p>
<a href="#" class="text-blue-500 hover:underline">閱讀更多</a>
</div>
<!-- 其他服務項目可以按照相同的模式添加 -->
</div>
</div>
</section>
<!-- 關於我們 -->
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<div class="flex flex-wrap items-center">
<div class="w-full md:w-1/2 mb-10 md:mb-0">
<h2 class="text-3xl font-bold mb-6">關於我們</h2>
<p class="text-lg mb-6">
我們是凝聚光的力量！照耀黑暗的電獵者，獵食一切搞怪做壞的病毒與非法入侵窺探隱私的行為，檢測是否有不良軟體，窺伺隱私，或以家長監護之名義，行窺探之實，抓包這些道貌岸然的舉動與行為，我們遵行法律，但屆滿18歲已經是成年人，尚有許許多多被監控者而不自知，這限縮了你該有的自由，與本該屬於你的寬廣天空，我們幫您找回一點點蔚藍。如果您懷疑是否有不良軟體或裝置，請與我們聯絡！
</p>
<a href="#" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300">閱讀更多</a>
</div>
<div class="w-full md:w-1/2">
<img src="images/about-img.png" alt="關於電獵者電腦" class="mx-auto">
</div>
</div>
</div>
</section>
<!-- 價格區域 -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-10">電腦軟硬體維修價目表</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-100 p-6 rounded-lg shadow-md text-center">
<h3 class="text-2xl font-bold mb-4">$ 49</h3>
<h4 class="text-xl font-semibold mb-4">Startup</h4>
<ul class="mb-6 text-left">
<li class="mb-2"><i class="fas fa-check text-green-500 mr-2"></i>2GB RAM</li>
<li class="mb-2"><i class="fas fa-check text-green-500 mr-2"></i>20GB SSD Cloud Storage</li>
<li class="mb-2"><i class="fas fa-check text-green-500 mr-2"></i>Weekly Backups</li>
<li class="mb-2"><i class="fas fa-check text-green-500 mr-2"></i>DDoS Protection</li>
<li class="mb-2"><i class="fas fa-check text-green-500 mr-2"></i>Full Root Access</li>
<li class="mb-2"><i class="fas fa-check text-green-500 mr-2"></i>24/7/365 Tech Support</li>
</ul>
<a href="#" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300">查看詳情</a>
</div>
<!-- 其他價格方案可以按照相同的模式添加 -->
</div>
</div>
</section>
<!-- 客戶評價 -->
<section class="py-20 bg-gray-100">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-10">懇請您評價電獵者</h2>
<p class="text-center mb-10">------ 我們必定會 【虛心接受並改進】 ------</p>
<div class="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow-md">
<div class="flex items-center mb-6">
<img src="images/client.jpg" alt="客戶照片" class="w-16 h-16 rounded-full mr-4">
<div>
<h4 class="text-xl font-semibold">我是sAMPLE</h4>
<p class="text-gray-600">電獵者讓我感覺又年輕了20歲，考試都考100分呢。</p>
</div>
</div>
<p class="text-gray-700">
電腦問題無論解決與否，我都已經不在乎了，能看見年輕人努力的態度，就像星星照亮夜空一般，收費合理，服務周到，親切，敏捷快速，毫無保留的道出電腦的問題點，這正是我需要的！無形之中也上了一課。
</p>
</div>
</div>
</section>
<!-- 聯絡我們 -->
<section class="py-20 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-10">留下您寶貴的建言</h2>
<form class="max-w-lg mx-auto">
<div class="mb-6">
<input type="text" placeholder="您的姓名" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
</div>
<div class="mb-6">
<input type="email" placeholder="您的電子郵件" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
</div>
<div class="mb-6">
<input type="tel" placeholder="您的電話號碼" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500">
</div>
<div class="mb-6">
<textarea placeholder="您的留言" rows="5" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:border-blue-500"></textarea>
</div>
<button type="submit" class="w-full bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300">送出</button>
</form>
</div>
</section>
<!-- 頁腳 -->
<footer class="bg-gray-800 text-white py-10">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-lg font-semibold mb-4">聯絡資訊</h3>
<p>獵者來無影去無蹤</p>
<p>電話: +886 989136652</p>
<p>Email: demo@gmail.com</p>
</div>
<div>
<h3 class="text-lg font-semibold mb-4">常用連結</h3>
<ul class="space-y-2">
<li><a href="#" class="hover:text-gray-300">賽門鐵克</a></li>
<li><a href="about.html" class="hover:text-gray-300">關於我們</a></li>
<li><a href="service.html" class="hover:text-gray-300">服務</a></li>
<li><a href="price.html" class="hover:text-gray-300">價格</a></li>
<li><a href="contact.html" class="hover:text-gray-300">聯絡我們</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibol