From 4b7dad1fcd9cbd69684a6c7affb711a97d72f73f Mon Sep 17 00:00:00 2001
From: MaiTamDev <maitamit062005@gmail.com>
Date: Sat, 3 Jan 2026 00:37:12 +0700
Subject: [PATCH 1/2] Improve SafetyToolkit accessibility

---
 app/components/SafetyToolkit.tsx | 111 +++++++++++++++++++++++++++++++
 app/page.tsx                     |  30 +++++++++
 2 files changed, 141 insertions(+)
 create mode 100644 app/components/SafetyToolkit.tsx

diff --git a/app/components/SafetyToolkit.tsx b/app/components/SafetyToolkit.tsx
new file mode 100644
index 0000000..eaaaeab
--- /dev/null
+++ b/app/components/SafetyToolkit.tsx
@@ -0,0 +1,111 @@
+'use client'
+
+import { motion } from 'framer-motion'
+import { Bell, Download, Users, ScanSearch } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+import { useTranslation } from '../lib/i18n/LanguageContext'
+
+const cards = [
+  {
+    icon: ScanSearch,
+    action: '/scan',
+    color: 'from-blue-500/20 via-cyan-500/10 to-blue-600/20',
+    title: {
+      vi: 'Kiểm tra tức thì',
+      en: 'Instant check'
+    },
+    description: {
+      vi: 'Quét URL, hình ảnh hoặc tin nhắn đáng ngờ chỉ với một cú nhấp.',
+      en: 'Scan suspicious links, images, or messages in one tap.'
+    }
+  },
+  {
+    icon: Bell,
+    action: '/alerts',
+    color: 'from-amber-500/15 via-orange-500/10 to-amber-600/15',
+    title: {
+      vi: 'Cảnh báo nóng',
+      en: 'Live alerts'
+    },
+    description: {
+      vi: 'Cập nhật xu hướng lừa đảo mới nhất để tránh các chiêu trò mới.',
+      en: 'Stay ahead of emerging scam trends with fresh alerts.'
+    }
+  },
+  {
+    icon: Download,
+    action: '/extension',
+    color: 'from-emerald-500/15 via-green-500/10 to-emerald-600/15',
+    title: {
+      vi: 'Cài extension',
+      en: 'Install extension'
+    },
+    description: {
+      vi: 'Bảo vệ trình duyệt 24/7 với cảnh báo và kiểm tra tự động.',
+      en: 'Get always-on browser protection with automatic checks.'
+    }
+  },
+  {
+    icon: Users,
+    action: '/community',
+    color: 'from-indigo-500/15 via-purple-500/10 to-indigo-600/15',
+    title: {
+      vi: 'Cộng đồng hỗ trợ',
+      en: 'Community support'
+    },
+    description: {
+      vi: 'Học kinh nghiệm thực chiến từ cộng đồng và chuyên gia.',
+      en: 'Learn real-world tips from peers and experts.'
+    }
+  }
+]
+
+export default function SafetyToolkit() {
+  const router = useRouter()
+  const { language } = useTranslation()
+
+  return (
+    <div className="grid gap-4 sm:gap-6 md:grid-cols-2">
+      {cards.map((card, index) => {
+        const Icon = card.icon
+
+          return (
+            <motion.button
+              key={card.action}
+              onClick={() => router.push(card.action)}
+              type="button"
+              initial={{ opacity: 0, y: 12 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.05 }}
+              aria-label={language === 'vi' ? card.title.vi : card.title.en}
+              className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-5 text-left shadow-lg backdrop-blur-xl transition hover:-translate-y-1 hover:border-white/20"
+            >
+            <div className={`absolute inset-0 bg-gradient-to-br ${card.color} opacity-40`} />
+            <div className="relative flex items-start gap-4">
+              <div className="rounded-xl bg-white/10 p-3 text-white shadow-inner">
+                <Icon className="h-6 w-6" />
+              </div>
+              <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                  <span className="rounded-full bg-white/10 px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-cyan-200">
+                    {index + 1 < 10 ? `0${index + 1}` : index + 1}
+                  </span>
+                  <p className="text-sm font-semibold text-cyan-100">
+                    {language === 'vi' ? 'Bước tiếp theo' : 'Next step'}
+                  </p>
+                </div>
+                <h3 className="text-lg font-bold text-white">
+                  {language === 'vi' ? card.title.vi : card.title.en}
+                </h3>
+                <p className="text-sm text-gray-200">
+                  {language === 'vi' ? card.description.vi : card.description.en}
+                </p>
+              </div>
+            </div>
+          </motion.button>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/app/page.tsx b/app/page.tsx
index 54a05eb..ddda683 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,6 +24,7 @@ import FeatureShowcase from './components/FeatureShowcase'
 import TestimonialCarousel from './components/TestimonialCarousel'
 import ScamTypeCards from './components/ScamTypeCards'
 import TypewriterText from './components/TypewriterText'
+import SafetyToolkit from './components/SafetyToolkit'
 import { useRouter } from 'next/navigation'
 import { useTranslation } from './lib/i18n/LanguageContext'
 
@@ -573,6 +574,35 @@ export default function Home() {
           </div>
         </section>
 
+        {/* Safety Toolkit Section - NEW */}
+        <section className="py-12 sm:py-20 px-4">
+          <div className="max-w-6xl mx-auto">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between mb-8 sm:mb-12"
+            >
+              <div>
+                <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-2">
+                  {language === 'vi' ? 'Tăng tốc an toàn' : 'Accelerate your safety'}
+                </h2>
+                <p className="text-gray-400 max-w-2xl">
+                  {language === 'vi'
+                    ? 'Chọn bước tiếp theo để tận dụng tối đa bộ công cụ chống lừa đảo.'
+                    : 'Pick your next move to get the most from the anti-scam toolkit.'}
+                </p>
+              </div>
+              <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1 text-xs font-semibold text-cyan-200">
+                <Sparkles className="h-4 w-4" />
+                {language === 'vi' ? 'Đề xuất thông minh' : 'Smart recommendations'}
+              </div>
+            </motion.div>
+
+            <SafetyToolkit />
+          </div>
+        </section>
+
         {/* Testimonials Section - NEW */}
         <section className="py-12 sm:py-20 px-4">
           <div className="max-w-7xl mx-auto">

From cd6ce60aa7bd7bc59e478114942f8e4970d9f050 Mon Sep 17 00:00:00 2001
From: MaiTamDev <maitamit062005@gmail.com>
Date: Sat, 3 Jan 2026 00:46:26 +0700
Subject: [PATCH 2/2] Fix SafetyToolkit markup formatting

---
 app/components/SafetyToolkit.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/components/SafetyToolkit.tsx b/app/components/SafetyToolkit.tsx
index eaaaeab..e5a9f5c 100644
--- a/app/components/SafetyToolkit.tsx
+++ b/app/components/SafetyToolkit.tsx
@@ -69,18 +69,18 @@ export default function SafetyToolkit() {
       {cards.map((card, index) => {
         const Icon = card.icon
 
-          return (
-            <motion.button
-              key={card.action}
-              onClick={() => router.push(card.action)}
-              type="button"
-              initial={{ opacity: 0, y: 12 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ delay: index * 0.05 }}
-              aria-label={language === 'vi' ? card.title.vi : card.title.en}
-              className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-5 text-left shadow-lg backdrop-blur-xl transition hover:-translate-y-1 hover:border-white/20"
-            >
+        return (
+          <motion.button
+            key={card.action}
+            onClick={() => router.push(card.action)}
+            type="button"
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: index * 0.05 }}
+            aria-label={language === 'vi' ? card.title.vi : card.title.en}
+            className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 p-5 text-left shadow-lg backdrop-blur-xl transition hover:-translate-y-1 hover:border-white/20"
+          >
             <div className={`absolute inset-0 bg-gradient-to-br ${card.color} opacity-40`} />
             <div className="relative flex items-start gap-4">
               <div className="rounded-xl bg-white/10 p-3 text-white shadow-inner">