Skip to content

Commit dfb5bec

Browse files
maitamdevmaitamdev
committed
Add extension download page
1 parent a147060 commit dfb5bec

1 file changed

Lines changed: 140 additions & 0 deletions

File tree

‎app/extension/page.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
import { Download, Chrome, CheckCircle, AlertCircle } from 'lucide-react'
5+
import Header from '../components/Header'
6+
import Footer from '../components/Footer'
7+
import Link from 'next/link'
8+
9+
export default function ExtensionPage() {
10+
return (
11+
<div className="min-h-screen flex flex-col bg-[#0a0f1a]">
12+
<Header />
13+
14+
<main className="flex-1 pt-20">
15+
<section className="py-20 px-4">
16+
<div className="max-w-4xl mx-auto">
17+
<motion.div
18+
initial={{ opacity: 0, y: 20 }}
19+
animate={{ opacity: 1, y: 0 }}
20+
className="text-center mb-12"
21+
>
22+
<Chrome className="w-20 h-20 text-blue-400 mx-auto mb-6" />
23+
<h1 className="text-4xl md:text-5xl font-bold mb-4">
24+
ANTISCAM Browser Extension
25+
</h1>
26+
<p className="text-xl text-gray-400">
27+
Bảo vệ bạn khỏi lừa đảo khi lướt web
28+
</p>
29+
</motion.div>
30+
31+
{/* Features */}
32+
<motion.div
33+
initial={{ opacity: 0, y: 20 }}
34+
animate={{ opacity: 1, y: 0 }}
35+
transition={{ delay: 0.2 }}
36+
className="bg-[#111827] rounded-2xl p-8 border border-gray-800 mb-8"
37+
>
38+
<h2 className="text-2xl font-bold mb-6">Tính năng</h2>
39+
<div className="grid md:grid-cols-2 gap-4">
40+
{[
41+
'Quét URL tự động khi truy cập trang mới',
42+
'Kiểm tra hình ảnh trên website',
43+
'Cảnh báo real-time với notifications',
44+
'Báo cáo website lừa đảo',
45+
'Kiểm tra form không an toàn',
46+
'Context menu - click phải để quét nhanh',
47+
].map((feature, index) => (
48+
<div key={index} className="flex items-center gap-3">
49+
<CheckCircle className="w-5 h-5 text-green-400 flex-shrink-0" />
50+
<span className="text-gray-300">{feature}</span>
51+
</div>
52+
))}
53+
</div>
54+
</motion.div>
55+
56+
{/* Download Section */}
57+
<motion.div
58+
initial={{ opacity: 0, y: 20 }}
59+
animate={{ opacity: 1, y: 0 }}
60+
transition={{ delay: 0.3 }}
61+
className="bg-gradient-to-r from-blue-600/20 to-cyan-600/20 rounded-2xl p-8 border border-blue-500/30 mb-8"
62+
>
63+
<h2 className="text-2xl font-bold mb-4">Cài đặt Extension</h2>
64+
65+
<div className="space-y-4">
66+
<div className="bg-[#111827] rounded-xl p-6">
67+
<h3 className="font-semibold mb-3 flex items-center gap-2">
68+
<Chrome className="w-5 h-5" />
69+
Chrome / Edge / Brave
70+
</h3>
71+
<ol className="list-decimal list-inside space-y-2 text-gray-400 mb-4">
72+
<li>Download file extension bên dưới</li>
73+
<li>Giải nén file ZIP</li>
74+
<li>Mở <code className="bg-gray-800 px-2 py-1 rounded">chrome://extensions/</code></li>
75+
<li>Bật "Developer mode" (góc trên bên phải)</li>
76+
<li>Click "Load unpacked" và chọn folder đã giải nén</li>
77+
</ol>
78+
79+
<a
80+
href="https://github.com/maitamdev/Anti-Scam/raw/main/antiscam-extension.zip"
81+
className="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition-colors"
82+
>
83+
<Download className="w-5 h-5" />
84+
Download Extension
85+
</a>
86+
</div>
87+
88+
<div className="bg-yellow-500/10 border border-yellow-500/30 rounded-xl p-4 flex gap-3">
89+
<AlertCircle className="w-5 h-5 text-yellow-400 flex-shrink-0 mt-0.5" />
90+
<div className="text-sm text-gray-300">
91+
<strong className="text-yellow-400">Lưu ý:</strong> Extension đang trong quá trình review để xuất bản lên Chrome Web Store.
92+
Hiện tại bạn cần cài đặt thủ công ở chế độ Developer.
93+
</div>
94+
</div>
95+
</div>
96+
</motion.div>
97+
98+
{/* Installation Guide */}
99+
<motion.div
100+
initial={{ opacity: 0, y: 20 }}
101+
animate={{ opacity: 1, y: 0 }}
102+
transition={{ delay: 0.4 }}
103+
className="bg-[#111827] rounded-2xl p-8 border border-gray-800"
104+
>
105+
<h2 className="text-2xl font-bold mb-4">Video hướng dẫn</h2>
106+
<p className="text-gray-400 mb-4">
107+
Xem video chi tiết cách cài đặt và sử dụng extension:
108+
</p>
109+
<div className="aspect-video bg-gray-800 rounded-xl flex items-center justify-center">
110+
<p className="text-gray-500">Video sẽ được cập nhật sớm</p>
111+
</div>
112+
</motion.div>
113+
114+
{/* Source Code */}
115+
<motion.div
116+
initial={{ opacity: 0, y: 20 }}
117+
animate={{ opacity: 1, y: 0 }}
118+
transition={{ delay: 0.5 }}
119+
className="text-center mt-8"
120+
>
121+
<p className="text-gray-400 mb-4">
122+
Extension là mã nguồn mở, bạn có thể xem code tại:
123+
</p>
124+
<a
125+
href="https://github.com/maitamdev/Anti-Scam/tree/main/extension"
126+
target="_blank"
127+
rel="noopener noreferrer"
128+
className="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300"
129+
>
130+
GitHub Repository →
131+
</a>
132+
</motion.div>
133+
</div>
134+
</section>
135+
</main>
136+
137+
<Footer />
138+
</div>
139+
)
140+
}

0 commit comments

Comments
 (0)