From 3ec9c51085b3fc0c41c787833e87489cde75b7cd Mon Sep 17 00:00:00 2001
From: bokhonglo <ngocungducanh2022@gmail.com>
Date: Sat, 9 May 2026 16:01:01 +0700
Subject: [PATCH] update about us

---
 src/app/user/about-us/page.tsx           | 178 ++++++++++++++++++-----
 src/components/ui/chat/ChatbotWidget.tsx |   2 +-
 2 files changed, 142 insertions(+), 38 deletions(-)

diff --git a/src/app/user/about-us/page.tsx b/src/app/user/about-us/page.tsx
index 07d1e5c..287e74e 100644
--- a/src/app/user/about-us/page.tsx
+++ b/src/app/user/about-us/page.tsx
@@ -24,15 +24,29 @@ export default function LandingPage() {
   ];
 
   const team = [
-    { name: "Trần Anh Đức", role: "Project Manager", desc: "Đẹp trai cao m8",avatar: "/images/teamdev/tad.jpeg" },
-    { name: "Đỗ Duy Khánh", role: "Backend Developer", desc: "Kì nhân dị sỹ",avatar: "/images/teamdev/ddk2.jpeg" },
-    { name: "Ngô Cung Đức Anh", role: "Frontend Developer", desc: "Cũng đẹp trai nhưng cao m7 thôi",avatar: "/images/teamdev/ncda.jpeg" },
+    {
+      name: "Trần Anh Đức",
+      role: "Project Manager",
+      desc: "Đẹp trai cao m8",
+      avatar: "/images/teamdev/tad.jpeg",
+    },
+    {
+      name: "Đỗ Duy Khánh",
+      role: "Backend Developer",
+      desc: "Kì nhân dị sỹ",
+      avatar: "/images/teamdev/ddk2.jpeg",
+    },
+    {
+      name: "Ngô Cung Đức Anh",
+      role: "Frontend Developer",
+      desc: "Cũng đẹp trai nhưng cao m7 thôi",
+      avatar: "/images/teamdev/ncda.jpeg",
+    },
   ];
 
   return (
     // Sử dụng tông màu Vàng cổ (Parchment) và Xanh rêu (Dark Slate Green)
     <div className="relative min-h-screen w-full text-[#2D3A3A] font-sans selection:bg-[#A88B4C] selection:text-white overflow-x-hidden">
-      
       {/* --- BACKGROUND IMAGE --- */}
       <div className="fixed inset-0 -z-20 pointer-events-none">
         <Image
@@ -52,17 +66,22 @@ export default function LandingPage() {
           <span className="text-[#A88B4C]">Geo</span>History
         </div>
         <nav className="flex gap-4 items-center">
-          <Link href="/auth/signin" className="text-sm font-semibold text-[#2D3A3A] hover:text-[#A88B4C] transition-colors">
+          <Link
+            href="/auth/signin"
+            className="text-sm font-semibold text-[#2D3A3A] hover:text-[#A88B4C] transition-colors"
+          >
             Đăng nhập
           </Link>
-          <Link href="/user" className="text-sm font-semibold px-4 py-2 bg-[#2D3A3A] text-[#FDFBF7] rounded-lg hover:bg-[#1a2323] transition-colors">
+          <Link
+            href="/user"
+            className="text-sm font-semibold px-4 py-2 bg-[#2D3A3A] text-[#FDFBF7] rounded-lg hover:bg-[#1a2323] transition-colors"
+          >
             Vào Hệ thống
           </Link>
         </nav>
       </header>
 
       <main className="max-w-6xl mx-auto px-6 pt-32 pb-24 flex flex-col gap-32 w-full relative">
-        
         {/* --- PHẦN 1: GIỚI THIỆU TỔNG QUAN --- */}
         <section className="min-h-[70vh] flex flex-col justify-center relative">
           <h1 className="text-5xl md:text-7xl font-black leading-tight tracking-tight mb-6">
@@ -73,17 +92,22 @@ export default function LandingPage() {
           </h1>
           <div className="max-w-3xl space-y-6 text-lg md:text-xl text-[#4A5555] leading-relaxed">
             <p>
-              Hệ thống thông tin địa lý (GIS) tiên phong trong việc trực quan hóa dữ liệu lịch sử. 
-              Nền tảng của chúng tôi cho phép hiển thị động các thông tin như biên giới quốc gia, 
-              diễn biến trận chiến và sự kiện theo đúng tiến trình thời gian.
+              Hệ thống thông tin địa lý (GIS) tiên phong trong việc trực quan
+              hóa dữ liệu lịch sử. Nền tảng của chúng tôi cho phép hiển thị động
+              các thông tin như biên giới quốc gia, diễn biến trận chiến và sự
+              kiện theo đúng tiến trình thời gian.
             </p>
             <p>
-              Đây là không gian tập trung tri thức được tinh lọc, nơi các chuyên gia, nhà sử học 
-              và giáo viên đóng góp dữ liệu tọa độ, vector, được hệ thống kiểm duyệt chặt chẽ trước khi xuất bản.
+              Đây là không gian tập trung tri thức được tinh lọc, nơi các chuyên
+              gia, nhà sử học và giáo viên đóng góp dữ liệu tọa độ, vector, được
+              hệ thống kiểm duyệt chặt chẽ trước khi xuất bản.
             </p>
           </div>
           <div className="mt-10 flex gap-4">
-            <Link href="#mission" className="px-8 py-4 bg-[#A88B4C] text-white font-bold rounded-xl shadow-lg shadow-[#A88B4C]/20 hover:bg-[#8e743c]">
+            <Link
+              href="#mission"
+              className="px-8 py-4 bg-[#A88B4C] text-white font-bold rounded-xl shadow-lg shadow-[#A88B4C]/20 hover:bg-[#8e743c]"
+            >
               Khám phá sứ mệnh
             </Link>
           </div>
@@ -92,28 +116,41 @@ export default function LandingPage() {
         {/* --- PHẦN 2: SỨ MỆNH & CHỨC NĂNG --- */}
         <section id="mission" className="scroll-mt-24 relative">
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-16 items-center">
-            
             {/* Sứ mệnh */}
             <div>
               <div className="inline-block px-3 py-1 bg-[#A88B4C]/10 text-[#A88B4C] font-bold text-sm tracking-widest uppercase rounded-full mb-4 border border-[#A88B4C]/20">
                 Sứ mệnh của chúng tôi
               </div>
-              <h2 className="text-3xl md:text-4xl font-bold mb-6">Định hình lại cách học Lịch sử</h2>
+              <h2 className="text-3xl md:text-4xl font-bold mb-6">
+                Định hình lại cách học Lịch sử
+              </h2>
               <div className="space-y-6 text-[#4A5555]">
                 <div>
                   <h3 className="text-xl font-bold text-[#2D3A3A] mb-2 flex items-center gap-2">
-                    <span className="w-8 h-8 rounded-full bg-[#A88B4C]/20 flex items-center justify-center text-[#A88B4C]">1</span>
+                    <span className="w-8 h-8 rounded-full bg-[#A88B4C]/20 flex items-center justify-center text-[#A88B4C]">
+                      1
+                    </span>
                     Giải quyết rào cản giáo dục
                   </h3>
-                  <p>Khắc phục sự nhàm chán và khó tiếp cận của phương pháp học lịch sử truyền thống bằng cách biến dữ liệu chữ viết thành hình ảnh không gian, thời gian trực quan.</p>
+                  <p>
+                    Khắc phục sự nhàm chán và khó tiếp cận của phương pháp học
+                    lịch sử truyền thống bằng cách biến dữ liệu chữ viết thành
+                    hình ảnh không gian, thời gian trực quan.
+                  </p>
                 </div>
                 <div className="w-full h-px bg-[#A88B4C]/20"></div>
                 <div>
                   <h3 className="text-xl font-bold text-[#2D3A3A] mb-2 flex items-center gap-2">
-                    <span className="w-8 h-8 rounded-full bg-[#A88B4C]/20 flex items-center justify-center text-[#A88B4C]">2</span>
+                    <span className="w-8 h-8 rounded-full bg-[#A88B4C]/20 flex items-center justify-center text-[#A88B4C]">
+                      2
+                    </span>
                     Tập trung hóa tri thức
                   </h3>
-                  <p>Xây dựng một kho dữ liệu lịch sử thống nhất, chuẩn xác, phục vụ đa dạng đối tượng từ chính phủ, chuyên gia nghiên cứu đến học sinh, sinh viên và cộng đồng.</p>
+                  <p>
+                    Xây dựng một kho dữ liệu lịch sử thống nhất, chuẩn xác, phục
+                    vụ đa dạng đối tượng từ chính phủ, chuyên gia nghiên cứu đến
+                    học sinh, sinh viên và cộng đồng.
+                  </p>
                 </div>
               </div>
             </div>
@@ -123,19 +160,25 @@ export default function LandingPage() {
               <div className="inline-block px-3 py-1 bg-[#2D3A3A]/10 text-[#2D3A3A] font-bold text-sm tracking-widest uppercase rounded-full mb-4 border border-[#2D3A3A]/20">
                 Tính năng cốt lõi
               </div>
-              <h2 className="text-3xl md:text-4xl font-bold mb-6">Công nghệ hội tụ</h2>
+              <h2 className="text-3xl md:text-4xl font-bold mb-6">
+                Công nghệ hội tụ
+              </h2>
               <div className="flex flex-col gap-4">
                 {features.map((feat, idx) => (
-                  <div 
-                    key={idx} 
+                  <div
+                    key={idx}
                     className="flex gap-4 items-start p-5 hover:bg-[#A88B4C]/10 rounded-2xl group"
                   >
                     <div className="text-3xl bg-transparent w-14 h-14 rounded-xl flex items-center justify-center shrink-0">
                       {feat.icon}
                     </div>
                     <div>
-                      <h4 className="font-bold text-[#2D3A3A] text-lg mb-1">{feat.title}</h4>
-                      <p className="text-sm text-[#4A5555] leading-relaxed">{feat.desc}</p>
+                      <h4 className="font-bold text-[#2D3A3A] text-lg mb-1">
+                        {feat.title}
+                      </h4>
+                      <p className="text-sm text-[#4A5555] leading-relaxed">
+                        {feat.desc}
+                      </p>
                     </div>
                   </div>
                 ))}
@@ -150,47 +193,108 @@ export default function LandingPage() {
             <div className="inline-block px-3 py-1 bg-[#A88B4C]/10 text-[#A88B4C] font-bold text-sm tracking-widest uppercase rounded-full mb-4 border border-[#A88B4C]/20">
               Về chúng tôi
             </div>
-            <h2 className="text-3xl md:text-4xl font-bold mb-4">Đội ngũ phát triển</h2>
-            <p className="text-[#4A5555]">Những con người đam mê lịch sử và công nghệ chung tay xây dựng cỗ máy thời gian kỹ thuật số.</p>
+            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+              Đội ngũ phát triển
+            </h2>
+            <p className="text-[#4A5555]">
+              Những con người đam mê lịch sử và công nghệ chung tay xây dựng cỗ
+              máy thời gian kỹ thuật số.
+            </p>
           </div>
-          
+
           <div className="flex mx-auto justify-center gap-12 flex-wrap">
             {team.map((member, i) => (
               <div key={i} className="p-6 text-center min-w-[264px]">
-                <div className="w-24 h-24 mx-auto bg-gradient-to-tr from-[#A88B4C]/20 to-[#2D3A3A]/20 rounded-full mb-4 flex items-center justify-center">
+                <div className="w-24 aspect-square mx-auto bg-gradient-to-tr from-[#A88B4C]/20 to-[#2D3A3A]/20 rounded-full mb-4 flex items-center justify-center overflow-hidden">
                   <Image
                     src={member.avatar}
                     alt={member.name}
                     width={96}
                     height={96}
-                    className="rounded-full object-cover object-center"
+                    className="w-full h-full object-cover object-center rounded-full"
                   />
                 </div>
-                <h3 className="font-bold text-lg text-[#2D3A3A]">{member.name}</h3>
-                <p className="text-xs font-bold text-[#A88B4C] uppercase tracking-wider my-2">{member.role}</p>
+                <h3 className="font-bold text-lg text-[#2D3A3A]">
+                  {member.name}
+                </h3>
+                <p className="text-xs font-bold text-[#A88B4C] uppercase tracking-wider my-2">
+                  {member.role}
+                </p>
                 <p className="text-sm text-[#4A5555]">{member.desc}</p>
               </div>
             ))}
           </div>
         </section>
-
       </main>
 
+      {/* --- PHẦN 4: GÓP Ý & LIÊN HỆ --- */}
+      <section className="relative mt-8 mb-16 w-full">
+        <div className="flex flex-col lg:flex-row justify-between gap-10 border rounded-2xl p-8 bg-[#FDFBF7]/80 backdrop-blur-sm border-[#A88B4C]/20">
+          {/* Box Text */}
+          <div className="lg:w-1/4 text-center lg:text-left flex flex-col justify-center">
+            <h2 className="text-2xl font-bold text-gray-900 mb-3">
+              Góp ý cho chúng tôi!
+            </h2>
+            <p className="text-sm text-gray-500 leading-relaxed">
+              Đăng ký nhận tin tức mới nhất hoặc để lại ý kiến đóng góp giúp hệ
+              thống hoàn thiện hơn.
+            </p>
+          </div>
+
+          {/* Box Form Nhập Liệu (Dòng trên - Dòng dưới) */}
+          <div className="flex-1 w-full max-w-3xl flex flex-col gap-4">
+            <input
+              type="email"
+              placeholder="Email của bạn..."
+              className="w-full px-5 py-3.5 text-gray-700 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:bg-white focus:border-[#FFDE00] focus:ring-4 focus:ring-[#FFDE00]/20 transition-all text-sm placeholder:text-gray-400"
+            />
+            <textarea
+              placeholder="Nội dung góp ý của bạn..."
+              rows={3}
+              className="w-full px-5 py-3.5 text-gray-700 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:bg-white focus:border-[#FFDE00] focus:ring-4 focus:ring-[#FFDE00]/20 transition-all text-sm placeholder:text-gray-400 resize-none"
+            ></textarea>
+            <div className="flex justify-end">
+              <button className="bg-[#FFDE00] hover:bg-[#F0D100] text-black font-bold uppercase tracking-wide px-8 py-3.5 rounded-xl transition-colors text-sm shadow-sm">
+                Gửi Góp Ý
+              </button>
+            </div>
+          </div>
+
+          {/* Box Socials */}
+          <div className="lg:w-auto flex flex-col items-center lg:items-start pl-0 lg:pl-8 border-t lg:border-t-0 lg:border-l border-gray-100 pt-8 lg:pt-0 justify-center">
+            <h3 className="text-lg font-bold text-gray-900 mb-5">Follow us</h3>
+            <div className="flex gap-4">
+              <a
+                href="https://www.youtube.com/@BlackCatStudio-mw2sq"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="w-12 h-12 rounded-full bg-[#FF0000] flex items-center justify-center text-white hover:opacity-90 hover:-translate-y-1 transition-all shadow-lg group"
+              >
+                <svg className="w-6 h-6 fill-current" viewBox="0 0 24 24">
+                  <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* FOOTER */}
-      <footer className="border-t border-[#A88B4C]/20 bg-[#2D3A3A] text-white py-12 text-center w-full mt-auto">
+      <footer className="border-t border-[#A88B4C]/20 bg-[#2D3A3A] text-white py-12 text-center w-full mt-auto rounded-2xl">
         <div className="max-w-6xl mx-auto px-6 flex flex-col items-center">
           <div className="text-2xl font-bold tracking-widest uppercase mb-4">
             <span className="text-[#A88B4C]">Geo</span>History
           </div>
           <p className="text-gray-400 text-sm mb-4 max-w-md">
-            Bách khoa toàn thư bản đồ số lịch sử. Kết nối quá khứ, thấu hiểu hiện tại, kiến tạo tương lai.
+            Bách khoa toàn thư bản đồ số lịch sử. Kết nối quá khứ, thấu hiểu
+            hiện tại, kiến tạo tương lai.
           </p>
           <div className="text-xs text-gray-500">
-            &copy; {new Date().getFullYear()} GeoHistory Project. All rights reserved.
+            &copy; {new Date().getFullYear()} GeoHistory Project. All rights
+            reserved.
           </div>
         </div>
       </footer>
-
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/ui/chat/ChatbotWidget.tsx b/src/components/ui/chat/ChatbotWidget.tsx
index 33d860c..dbcf402 100644
--- a/src/components/ui/chat/ChatbotWidget.tsx
+++ b/src/components/ui/chat/ChatbotWidget.tsx
@@ -88,7 +88,7 @@ export default function ChatbotWidget({
   };
 
   return (
-    <div className="fixed bottom-6 right-6 z-50">
+    <div className="fixed bottom-8 right-8 z-50">
       {!isOpen && (
         <button
           onClick={() => setIsOpen(true)}