diff --git a/apps/lms/app/(home)/page.tsx b/apps/lms/app/(home)/page.tsx
index 1885778..4df5e77 100644
--- a/apps/lms/app/(home)/page.tsx
+++ b/apps/lms/app/(home)/page.tsx
@@ -2,11 +2,12 @@ import type { Metadata } from "next";
 import { LmsHeader } from "@/features/portal/components/LmsHeader";
 import { LmsHeroSection } from "@/features/portal/components/LmsHeroSection";
 import { DualRoleFeatureGrid } from "@/features/portal/components/DualRoleFeatureGrid";
+import { LmsAIFeaturesSection } from "@/features/portal/components/LmsAIFeaturesSection";
 import { ClassActivationShowcase } from "@/features/portal/components/ConsultantShowcase";
 import { FaqAndCtaSection } from "@/features/portal/components/FaqAndCtaSection";
 
 export const metadata: Metadata = {
-  title: "BeeWise LMS — Hệ Thống Quản Lý Học Tập Thông Minh",
+  title: "BeeWise LMS | Hệ Thống Quản Lý Học Tập Thông Minh",
   description:
     "Không gian làm việc và học tập của Gia sư và Học viên. Số hóa lịch trình, lưu trữ tài liệu và tối ưu hóa hiệu quả dạy & học trên BeeWise LMS.",
 };
@@ -17,6 +18,7 @@ export default function LmsHomePage() {
       <LmsHeader />
       <LmsHeroSection />
       <DualRoleFeatureGrid />
+      <LmsAIFeaturesSection />
       <ClassActivationShowcase />
       <FaqAndCtaSection />
     </main>
diff --git a/apps/lms/app/layout.tsx b/apps/lms/app/layout.tsx
index 01d9d7e..3e16022 100644
--- a/apps/lms/app/layout.tsx
+++ b/apps/lms/app/layout.tsx
@@ -5,7 +5,7 @@ import { googleSans, nunito } from "@workspace/core/configs/fonts";
 import { TooltipProvider } from "@workspace/ui/components/ui/tooltip";
 
 export const metadata: Metadata = {
-  title: "BeeWise LMS — Hệ Thống Quản Lý Học Tập Thông Minh",
+  title: "BeeWise LMS | Hệ Thống Quản Lý Học Tập Thông Minh",
 };
 
 export default function RootLayout({
diff --git a/apps/lms/features/portal/components/ConsultantShowcase.tsx b/apps/lms/features/portal/components/ConsultantShowcase.tsx
index 7d09ed1..8cab32e 100644
--- a/apps/lms/features/portal/components/ConsultantShowcase.tsx
+++ b/apps/lms/features/portal/components/ConsultantShowcase.tsx
@@ -1,251 +1,72 @@
-"use client";
-
-import { useRef } from "react";
-import { motion, useInView } from "motion/react";
-import {
-  Lightning,
-  GraduationCap,
-  ChalkboardTeacher,
-  CheckCircle,
-  ArrowsClockwise,
-  ShieldCheck,
-  CalendarCheck,
-  BookOpen,
-} from "@phosphor-icons/react";
-
-const ease = [0.22, 1, 0.36, 1] as const;
-
-/* ───────────────────────────────────────────
-   Activation Flow Mockup Widget
-   ─────────────────────────────────────────── */
-
-function ActivationFlowWidget() {
-  return (
-    <div className="bg-white rounded-2xl p-4 shadow-lg shadow-[#0c0c0b]/10 border border-[#0c0c0b]/6 max-w-sm">
-      {/* System message header */}
-      <div className="flex items-center gap-2 mb-3">
-        <div className="w-7 h-7 rounded-full bg-[#280f91] flex items-center justify-center">
-          <ArrowsClockwise size={13} weight="bold" className="text-white" />
-        </div>
-        <div>
-          <p className="text-[10px] font-bold text-[#280f91]">
-            Hệ thống BeeWise
-          </p>
-          <p className="text-[8px] text-[#0c0c0b]/40">
-            Kích hoạt tự động · Vừa xong
-          </p>
-        </div>
-      </div>
-
-      {/* Activation details */}
-      <div className="bg-[#280f91]/5 rounded-xl p-3 mb-3">
-        <p className="text-[11px] text-[#0c0c0b] leading-relaxed mb-2">
-          <strong>Yêu cầu kích hoạt lớp học mới</strong>
-        </p>
-        <div className="flex flex-col gap-1.5 text-[9px] text-[#0c0c0b]/60">
-          <div className="flex items-center gap-1.5">
-            <span className="font-semibold text-[#0c0c0b]/70">Học viên:</span>
-            <span>Nguyễn Văn Minh</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <span className="font-semibold text-[#0c0c0b]/70">Gia sư:</span>
-            <span>Trần Thị Hương</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <span className="font-semibold text-[#0c0c0b]/70">Môn học:</span>
-            <span>Theo thỏa thuận</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <span className="font-semibold text-[#0c0c0b]/70">Lịch học:</span>
-            <span>T3, T5 · 14:00 - 15:30</span>
-          </div>
-          <div className="flex items-center gap-1.5">
-            <span className="font-semibold text-[#0c0c0b]/70">Đơn giá:</span>
-            <span className="font-bold text-[#280f91]">220,000₫/buổi</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Activation steps */}
-      <div className="flex flex-col gap-2 mb-3">
-        {[
-          { label: "Xác nhận thông tin lớp học", done: true },
-          { label: "Thiết lập lịch trình tự động", done: true },
-          { label: "Cấp quyền truy cập LMS", done: true },
-        ].map((step) => (
-          <div key={step.label} className="flex items-center gap-2">
-            <CheckCircle
-              size={14}
-              weight="fill"
-              className="text-[#447353] shrink-0"
-            />
-            <span className="text-[10px] font-medium text-[#0c0c0b]/70">
-              {step.label}
-            </span>
-          </div>
-        ))}
-      </div>
-
-      {/* Status footer */}
-      <div className="flex items-center gap-1.5 pt-2 border-t border-[#0c0c0b]/6">
-        <ShieldCheck size={11} weight="fill" className="text-[#447353]" />
-        <p className="text-[8px] text-[#447353] font-semibold">
-          Lớp học đã kích hoạt — Cả hai bên có thể truy cập LMS ngay
-        </p>
-      </div>
-    </div>
-  );
-}
-
-/* ───────────────────────────────────────────
-   Main Component
-   ─────────────────────────────────────────── */
+const steps = [
+  { title: "Kết nối", body: "Học viên tìm gia sư phù hợp trên BeeWise." },
+  {
+    title: "Thống nhất lớp học",
+    body: "Hai bên trao đổi lịch học, học phí và mục tiêu.",
+  },
+  {
+    title: "BeeWise kích hoạt LMS",
+    body: "Tư vấn viên xác nhận và hệ thống mở không gian lớp học.",
+  },
+  {
+    title: "Cùng theo dõi tiến độ",
+    body: "Lịch, tài liệu và trạng thái lớp luôn được cập nhật.",
+  },
+] as const;
 
 export function ClassActivationShowcase() {
-  const ref = useRef(null);
-  const inView = useInView(ref, { once: true, margin: "-80px" });
-
   return (
     <section
-      id="activation"
-      className="py-20 lg:py-28 bg-[#280f91] overflow-hidden relative"
+      id="how-it-works"
+      className="scroll-mt-20 bg-[#f1eef8] py-20 sm:py-24 lg:py-28"
     >
-      {/* Dot grid pattern overlay */}
-      <div
-        className="absolute inset-0 opacity-[0.05]"
-        style={{
-          backgroundImage:
-            "radial-gradient(circle, #ffffff 1px, transparent 1px)",
-          backgroundSize: "32px 32px",
-        }}
-      />
-      <div className="hidden md:block absolute bottom-0 left-1/2 -translate-x-1/2 w-[500px] h-[200px] bg-[#ffc500]/8 blur-[100px]" />
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <div
-          ref={ref}
-          className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center"
-        >
-          {/* Left: Content */}
-          <motion.div
-            initial={{ opacity: 0, y: 28 }}
-            animate={inView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, ease }}
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="max-w-2xl">
+          <p className="text-sm font-extrabold text-[#280f91]">
+            BeeWise vận hành lớp học cùng bạn
+          </p>
+          <h2
+            className="mt-4 text-3xl font-extrabold tracking-[-0.035em] text-primary sm:text-4xl lg:text-5xl"
+            style={{ fontFamily: "var(--font-nunito-family)" }}
           >
-            <h2
-              className="text-3xl md:text-4xl lg:text-[44px] leading-tight tracking-tight text-white mb-5"
-              style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
-            >
-              Consultant Xác Nhận,{" "}
-              <span className="text-[#ffc500]">Hệ Thống Kích Hoạt</span>
-            </h2>
-            <p className="text-white/65 text-base leading-relaxed mb-8 max-w-[480px]">
-              Khi học viên và gia sư thống nhất trong Chat Room, Consultant
-              xác nhận kết nối thành công. Hệ thống tự động tạo lớp học,
-              thiết lập lịch trình và cấp quyền LMS cho cả hai bên.
-            </p>
-
-            {/* Activation flow steps */}
-            <div className="flex flex-col gap-4 mb-8">
-              {[
-                {
-                  icon: GraduationCap,
-                  step: "Trao đổi trong Chat Room",
-                  desc: "Học viên, gia sư và Consultant cùng thảo luận về nhu cầu, lịch học, học phí và hình thức học.",
-                },
-                {
-                  icon: ChalkboardTeacher,
-                  step: "Consultant xác nhận kết nối",
-                  desc: "Khi hai bên đồng ý, Consultant xác nhận và hệ thống tạo hợp đồng lớp học.",
-                },
-                {
-                  icon: Lightning,
-                  step: "LMS tự động mở quyền",
-                  desc: "Lịch học, kho tài liệu và quản lý học phí sẵn sàng cho cả gia sư và học viên.",
-                },
-              ].map((item, i) => {
-                const Icon = item.icon;
-                return (
-                  <motion.div
-                    key={item.step}
-                    initial={{ opacity: 0, x: -20 }}
-                    animate={inView ? { opacity: 1, x: 0 } : {}}
-                    transition={{
-                      duration: 0.5,
-                      delay: 0.15 + i * 0.08,
-                      ease,
-                    }}
-                    className="flex items-start gap-3"
-                  >
-                    <div className="w-9 h-9 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
-                      <Icon
-                        size={18}
-                        weight="fill"
-                        className="text-[#ffc500]"
-                      />
-                    </div>
-                    <div>
-                      <p
-                        className="text-sm font-bold text-white mb-0.5"
-                        style={{ fontFamily: "var(--font-nunito-family)" }}
-                      >
-                        {item.step}
-                      </p>
-                      <p className="text-xs text-white/55 leading-relaxed">
-                        {item.desc}
-                      </p>
-                    </div>
-                  </motion.div>
-                );
-              })}
-            </div>
-
-            {/* Automation highlight */}
-            <motion.div
-              initial={{ opacity: 0, y: 12 }}
-              animate={inView ? { opacity: 1, y: 0 } : {}}
-              transition={{ duration: 0.5, delay: 0.4, ease }}
-              className="inline-flex items-center gap-3 bg-white/8 rounded-xl px-4 py-2.5 border border-white/10"
+            Kích hoạt <span className="text-[#ffc500]">SuperLMS</span> dễ dàng
+            khi tham gia BeeWise
+          </h2>
+          <p className="mt-5 text-base leading-7 text-[#37333d]/65">
+            Quy trình rõ ràng giúp gia sư và học viên bắt đầu nhanh.
+          </p>
+        </div>
+        <ol className="mt-14 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {steps.map((step, index) => (
+            <li
+              key={step.title}
+              className="rounded-2xl bg-white p-6 shadow-[0_12px_36px_rgba(40,15,145,0.06)]"
             >
-              <p className="text-[11px] font-semibold text-white/80">
-                Consultant đồng hành toàn bộ quy trình — từ kết nối đến kích hoạt lớp học
+              <span className="text-sm font-extrabold text-[#280f91]/45">
+                0{index + 1}
+              </span>
+              <h3
+                className="mt-8 text-lg font-extrabold text-[#17141b]"
+                style={{ fontFamily: "var(--font-nunito-family)" }}
+              >
+                {step.title}
+              </h3>
+              <p className="mt-3 text-sm leading-6 text-[#37333d]/65">
+                {step.body}
               </p>
-            </motion.div>
-          </motion.div>
-
-          {/* Right: Activation Flow Widget */}
-          <motion.div
-            initial={{ opacity: 0, x: 28 }}
-            animate={inView ? { opacity: 1, x: 0 } : {}}
-            transition={{ duration: 0.7, delay: 0.15, ease }}
-            className="flex justify-center lg:justify-end"
+            </li>
+          ))}
+        </ol>
+        <div className="mt-8 flex flex-col justify-between gap-5 rounded-2xl bg-[#280f91] px-6 py-6 text-white sm:flex-row sm:items-center sm:px-8">
+          <p className="max-w-2xl text-sm font-semibold leading-6 text-white/82 sm:text-base">
+            Mỗi khi gặp khó khăn, tư vấn viên BeeWise luôn đồng hành cùng bạn
+          </p>
+          <a
+            href="#faq"
+            className="whitespace-nowrap text-sm font-extrabold text-[#ffc500] underline decoration-[#ffc500]/35 underline-offset-4 hover:decoration-[#ffc500]"
           >
-            <div className="relative">
-              <ActivationFlowWidget />
-
-              {/* Floating accent */}
-              <motion.div
-                initial={{ opacity: 0, scale: 0.8 }}
-                animate={inView ? { opacity: 1, scale: 1 } : {}}
-                transition={{ delay: 0.6, duration: 0.4 }}
-                className="absolute -top-4 -left-4 bg-[#ffc500] rounded-full px-3 py-1.5 shadow-lg"
-              >
-                <div className="flex items-center gap-1.5">
-                  <Lightning
-                    size={11}
-                    weight="fill"
-                    className="text-[#0c0c0b]"
-                  />
-                  <span
-                    className="text-[9px] font-bold text-[#0c0c0b]"
-                    style={{ fontFamily: "var(--font-nunito-family)" }}
-                  >
-                    Kích hoạt tự động
-                  </span>
-                </div>
-              </motion.div>
-            </div>
-          </motion.div>
+            Tìm hiểu thêm
+          </a>
         </div>
       </div>
     </section>
diff --git a/apps/lms/features/portal/components/DualRoleFeatureGrid.tsx b/apps/lms/features/portal/components/DualRoleFeatureGrid.tsx
index 94d1986..3cd11bf 100644
--- a/apps/lms/features/portal/components/DualRoleFeatureGrid.tsx
+++ b/apps/lms/features/portal/components/DualRoleFeatureGrid.tsx
@@ -1,561 +1,130 @@
-"use client";
+import Image from "next/image";
+import { BrowserFrame, SchedulePreview } from "./PortalProductVisuals";
 
-import { useState, useRef } from "react";
-import { motion, AnimatePresence, useInView } from "motion/react";
-import {
-  GraduationCap,
-  ChalkboardTeacher,
-  CalendarBlank,
-  FolderOpen,
-  CurrencyDollar,
-  ChatTeardropDots,
-  UploadSimple,
-  Trash,
-  PencilSimple,
-  CheckCircle,
-  Clock,
-  FilePdf,
-  FileDoc,
-  Robot,
-  Eye,
-  EyeSlash,
-} from "@phosphor-icons/react";
-
-const ease = [0.22, 1, 0.36, 1] as const;
-
-type TabKey = "student" | "tutor";
-
-/* ───────────────────────────────────────────
-   Card Content Sub-Components
-   ─────────────────────────────────────────── */
-
-// Student Cards
-function StudentScheduleCard() {
-  return (
-    <div className="flex flex-col gap-3">
-      <p className="text-xs font-semibold text-[#0c0c0b]/50 mb-1">
-        Lịch tuần này
-      </p>
-      {[
-        {
-          subject: "Ielts Writing",
-          time: "14:00 - 15:30",
-          status: "upcoming" as const,
-        },
-        {
-          subject: "Ielts Speaking",
-          time: "09:00 - 10:30",
-          status: "completed" as const,
-        },
-        {
-          subject: "Ielts Reading",
-          time: "16:00 - 17:00",
-          status: "upcoming" as const,
-        },
-      ].map((s) => (
-        <div
-          key={s.subject}
-          className="flex items-center justify-between bg-[#F8FAFC] rounded-lg px-3 py-2.5"
-        >
-          <div className="flex items-center gap-2">
-            {s.status === "upcoming" ? (
-              <Clock size={13} weight="fill" className="text-[#ffc500]" />
-            ) : (
-              <CheckCircle size={13} weight="fill" className="text-[#447353]" />
-            )}
-            <div>
-              <p className="text-[11px] font-semibold text-[#0c0c0b]">
-                {s.subject}
-              </p>
-              <p className="text-[9px] text-[#0c0c0b]/40">{s.time}</p>
-            </div>
-          </div>
-          <span
-            className={`text-[8px] font-bold px-2 py-0.5 rounded-full ${
-              s.status === "upcoming"
-                ? "text-[#ffc500] bg-[#ffc500]/15"
-                : "text-[#447353] bg-[#447353]/12"
-            }`}
-          >
-            {s.status === "upcoming" ? "Sắp diễn ra" : "Đã hoàn thành"}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function StudentDocumentsCard() {
-  return (
-    <div className="flex flex-col gap-3">
-      <p className="text-xs font-semibold text-[#0c0c0b]/50 mb-1">
-        Tài liệu mới nhất
-      </p>
-      {[
-        {
-          name: "Chương 5 - Bài tập.pdf",
-          icon: FilePdf,
-          by: "Gia sư Nguyễn Văn A",
-        },
-        {
-          name: "Slide Lý Thuyết.docx",
-          icon: FileDoc,
-          by: "Gia sư Trần Thị B",
-        },
-        { name: "Tóm tắt buổi học #28", icon: Robot, by: "Hệ thống BeeWise" },
-      ].map((doc) => {
-        const Icon = doc.icon;
-        return (
-          <div
-            key={doc.name}
-            className="flex items-center gap-3 bg-[#F8FAFC] rounded-lg px-3 py-2.5"
-          >
-            <div className="w-8 h-8 rounded-lg bg-[#280f91]/8 flex items-center justify-center shrink-0">
-              <Icon size={15} weight="fill" className="text-[#280f91]" />
-            </div>
-            <div className="min-w-0 flex-1">
-              <p className="text-[11px] font-semibold text-[#0c0c0b] truncate">
-                {doc.name}
-              </p>
-              <p className="text-[9px] text-[#0c0c0b]/40">{doc.by}</p>
-            </div>
-            <span className="text-[8px] font-medium text-[#280f91] bg-[#280f91]/8 px-2 py-0.5 rounded-full shrink-0">
-              Chỉ đọc
-            </span>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function StudentBillingCard() {
-  return (
-    <div className="flex flex-col gap-3">
-      <p className="text-xs font-semibold text-[#0c0c0b]/50 mb-1">
-        Học phí tháng này
-      </p>
-      <div className="bg-[#F8FAFC] rounded-lg overflow-hidden">
-        <div className="grid grid-cols-3 gap-0 text-[9px] font-bold text-[#0c0c0b]/50 px-3 py-2 border-b border-[#0c0c0b]/6">
-          <span>Lớp học</span>
-          <span className="text-center">Buổi</span>
-          <span className="text-right">Trạng thái</span>
-        </div>
-        {[
-          { subject: "Lớp A", sessions: 8, status: "Đã thanh toán" },
-          { subject: "Lớp B", sessions: 6, status: "Đã thanh toán" },
-          { subject: "Lớp C", sessions: 4, status: "Chờ xác nhận" },
-        ].map((row) => (
-          <div
-            key={row.subject}
-            className="grid grid-cols-3 gap-0 text-[10px] px-3 py-2 border-b border-[#0c0c0b]/4 last:border-b-0"
-          >
-            <span className="font-semibold text-[#0c0c0b]">{row.subject}</span>
-            <span className="text-center text-[#0c0c0b]/60">
-              {row.sessions}
-            </span>
-            <span
-              className={`text-right font-bold ${row.status === "Đã thanh toán" ? "text-[#447353]" : "text-[#ffc500]"}`}
-            >
-              {row.status}
-            </span>
-          </div>
-        ))}
-      </div>
-      <div className="flex items-center justify-between px-3 py-2 bg-[#280f91]/5 rounded-lg">
-        <span className="text-[10px] font-bold text-[#0c0c0b]">
-          Tổng buổi học
-        </span>
-        <span
-          className="text-sm font-bold text-[#280f91]"
-          style={{ fontFamily: "var(--font-nunito-family)" }}
-        >
-          18 buổi
-        </span>
-      </div>
-      <p className="text-[8px] text-[#0c0c0b]/40 text-center">
-        Học phí được hiển thị chi tiết trong hệ thống
-      </p>
-    </div>
-  );
-}
-
-// Tutor Cards
-function TutorMultiRoomCard() {
-  return (
-    <div className="flex flex-col gap-3">
-      <p className="text-xs font-semibold text-[#0c0c0b]/50 mb-1">
-        Lớp học đang hoạt động
-      </p>
-      {[
-        {
-          name: "Nguyễn Văn Minh",
-          subject: "Lớp A",
-          status: "live" as const,
-          unread: 3,
-        },
-        {
-          name: "Trần Thị Hoa",
-          subject: "Lớp B",
-          status: "live" as const,
-          unread: 1,
-        },
-        {
-          name: "Lê Hoàng Nam",
-          subject: "Lớp C",
-          status: "idle" as const,
-          unread: 0,
-        },
-      ].map((room) => (
-        <div
-          key={room.name}
-          className="flex items-center justify-between bg-[#F8FAFC] rounded-lg px-3 py-2.5"
-        >
-          <div className="flex items-center gap-2.5">
-            <div className="relative">
-              <div className="w-8 h-8 rounded-full bg-[#280f91]/10 flex items-center justify-center">
-                <span className="text-[10px] font-bold text-[#280f91]">
-                  {room.name.charAt(0)}
-                </span>
-              </div>
-              {room.status === "live" && (
-                <div className="absolute -bottom-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#447353] border-2 border-white" />
-              )}
-            </div>
-            <div>
-              <p className="text-[11px] font-semibold text-[#0c0c0b]">
-                {room.name}
-              </p>
-              <p className="text-[9px] text-[#0c0c0b]/40">{room.subject}</p>
-            </div>
-          </div>
-          <div className="flex items-center gap-2">
-            {room.unread > 0 && (
-              <span className="min-w-[18px] h-[18px] rounded-full bg-[#ffc500] flex items-center justify-center text-[8px] font-bold text-[#0c0c0b]">
-                {room.unread}
-              </span>
-            )}
-            <ChatTeardropDots
-              size={14}
-              weight="fill"
-              className="text-[#280f91]/40"
-            />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function TutorDocumentsCard() {
-  return (
-    <div className="flex flex-col gap-3">
-      <p className="text-xs font-semibold text-[#0c0c0b]/50 mb-1">
-        Quản lý tài liệu
-      </p>
-      {[
-        { name: "Bài tập buổi 6.pdf", action: "upload" as const },
-        { name: "Slide bài giảng.docx", action: "edit" as const },
-        { name: "Tóm tắt buổi #25.pdf", action: "delete" as const },
-      ].map((doc) => (
-        <div
-          key={doc.name}
-          className="flex items-center justify-between bg-[#F8FAFC] rounded-lg px-3 py-2.5"
-        >
-          <div className="flex items-center gap-2.5">
-            <div className="w-8 h-8 rounded-lg bg-[#280f91]/8 flex items-center justify-center shrink-0">
-              <FilePdf size={15} weight="fill" className="text-[#280f91]" />
-            </div>
-            <p className="text-[11px] font-semibold text-[#0c0c0b] truncate max-w-[140px]">
-              {doc.name}
-            </p>
-          </div>
-          <div className="flex items-center gap-1">
-            {doc.action === "upload" && (
-              <div className="w-6 h-6 rounded-md bg-[#280f91]/10 flex items-center justify-center hover:bg-[#280f91]/20 transition-colors cursor-pointer">
-                <UploadSimple
-                  size={11}
-                  weight="bold"
-                  className="text-[#280f91]"
-                />
-              </div>
-            )}
-            {doc.action === "edit" && (
-              <div className="w-6 h-6 rounded-md bg-[#ffc500]/15 flex items-center justify-center hover:bg-[#ffc500]/30 transition-colors cursor-pointer">
-                <PencilSimple
-                  size={11}
-                  weight="bold"
-                  className="text-[#0c0c0b]"
-                />
-              </div>
-            )}
-            {doc.action === "delete" && (
-              <div className="w-6 h-6 rounded-md bg-red-100 flex items-center justify-center hover:bg-red-200 transition-colors cursor-pointer">
-                <Trash size={11} weight="bold" className="text-red-500" />
-              </div>
-            )}
-          </div>
-        </div>
-      ))}
-      <button className="flex items-center justify-center gap-1.5 w-full py-2 rounded-lg border-2 border-dashed border-[#280f91]/15 text-[10px] font-semibold text-[#280f91]/60 hover:border-[#280f91]/30 hover:text-[#280f91] transition-all">
-        <UploadSimple size={12} weight="bold" />
-        Tải lên tài liệu mới
-      </button>
-    </div>
-  );
-}
-
-function TutorIncomeCard() {
-  return (
-    <div className="flex flex-col gap-3">
-      <p className="text-xs font-semibold text-[#0c0c0b]/50 mb-1">
-        Thu nhập thực nhận — Tháng này
-      </p>
-      <div className="bg-[#F8FAFC] rounded-lg overflow-hidden">
-        <div className="grid grid-cols-3 gap-0 text-[9px] font-bold text-[#0c0c0b]/50 px-3 py-2 border-b border-[#0c0c0b]/6">
-          <span>Học viên</span>
-          <span className="text-center">Buổi</span>
-          <span className="text-right">Trạng thái</span>
-        </div>
-        {[
-          { name: "Nguyễn Văn Minh", sessions: 8, status: "Đã thanh toán" },
-          { name: "Trần Thị Hoa", sessions: 6, status: "Đã thanh toán" },
-          { name: "Lê Hoàng Nam", sessions: 4, status: "Chờ đối soát" },
-        ].map((row) => (
-          <div
-            key={row.name}
-            className="grid grid-cols-3 gap-0 text-[10px] px-3 py-2 border-b border-[#0c0c0b]/4 last:border-b-0"
-          >
-            <span className="font-semibold text-[#0c0c0b]">{row.name}</span>
-            <span className="text-center text-[#0c0c0b]/60">
-              {row.sessions}
-            </span>
-            <span
-              className={`text-right font-bold ${row.status === "Đã thanh toán" ? "text-[#447353]" : "text-[#ffc500]"}`}
-            >
-              {row.status}
-            </span>
-          </div>
-        ))}
-      </div>
-      <div className="flex items-center justify-between px-3 py-2 bg-[#447353]/8 rounded-lg">
-        <span className="text-[10px] font-bold text-[#0c0c0b]">
-          Tổng buổi đã dạy
-        </span>
-        <span
-          className="text-sm font-bold text-[#447353]"
-          style={{ fontFamily: "var(--font-nunito-family)" }}
-        >
-          18 buổi
-        </span>
-      </div>
-      <div className="flex items-center gap-1.5 justify-center">
-        <EyeSlash size={11} className="text-[#0c0c0b]/30" />
-        <p className="text-[8px] text-[#0c0c0b]/40">
-          Thu nhập chi tiết được hiển thị trong hệ thống
-        </p>
-      </div>
-    </div>
-  );
-}
-
-/* ───────────────────────────────────────────
-   Tab Card Data
-   ─────────────────────────────────────────── */
-
-interface FeatureCard {
-  icon: typeof CalendarBlank;
-  title: string;
-  desc: string;
-  content: React.ReactNode;
-}
-
-const STUDENT_CARDS: FeatureCard[] = [
+const learnerBenefits = [
   {
-    icon: CalendarBlank,
-    title: "Quản Lý Lịch Học",
-    desc: "Xem lịch trình, trạng thái buổi học và đếm ngược thời gian.",
-    content: <StudentScheduleCard />,
+    title: "Quản lý lịch học",
+    body: "Theo dõi buổi học sắp tới và toàn bộ lịch trong tuần.",
   },
   {
-    icon: FolderOpen,
-    title: "Kho Tài Liệu Tập Trung",
-    desc: "Truy cập tài liệu do gia sư chia sẻ theo từng lớp học.",
-    content: <StudentDocumentsCard />,
+    title: "Quản lý tài liệu",
+    body: "Tài liệu được tải lên và bài tập tạo sinh từ AI giúp học viên học hiệu quả hơn.",
   },
   {
-    icon: CurrencyDollar,
-    title: "Theo Dõi Học Phí",
-    desc: "Xem số buổi học và trạng thái thanh toán theo từng lớp.",
-    content: <StudentBillingCard />,
+    title: "Theo dõi tiến độ học tập",
+    body: "Biết được số buổi đã hoàn thành và những nội dung đang tiếp tục học.",
   },
-];
+] as const;
 
-const TUTOR_CARDS: FeatureCard[] = [
+const tutorBenefits = [
   {
-    icon: ChatTeardropDots,
-    title: "Quản Lý Lớp Học Đa Nhiệm",
-    desc: "Điều phối nhiều lớp học cùng lúc trong không gian làm việc.",
-    content: <TutorMultiRoomCard />,
+    title: "Quản lý nhiều học viên",
+    body: "Quản lý thông tin, lịch học và tài liệu của tất cả học viên.",
   },
   {
-    icon: FolderOpen,
-    title: "Kho Tài Liệu Toàn Quyền",
-    desc: "Tải lên, chỉnh sửa và quản lý tài liệu riêng cho từng lớp.",
-    content: <TutorDocumentsCard />,
+    title: "Tạo bài tập và tóm tắt buổi học qua Beewise AI",
+    body: "Tự động tạo bài tập và tóm tắt buổi học với sự hỗ trợ của AI",
   },
   {
-    icon: CurrencyDollar,
-    title: "Theo Dõi Thu Nhập",
-    desc: "Xem số buổi đã dạy và trạng thái thanh toán từ học viên.",
-    content: <TutorIncomeCard />,
+    title: "Theo dõi tiến độ",
+    body: "Tiến độ và học phí được quản lý và theo dõi dễ dàng",
   },
-];
+] as const;
 
-/* ───────────────────────────────────────────
-   Main Component
-   ─────────────────────────────────────────── */
+function BenefitList({
+  items,
+}: {
+  items: readonly { title: string; body: string }[];
+}) {
+  return (
+    <div className="mt-9 space-y-7">
+      {items.map((item, index) => (
+        <div key={item.title} className="grid grid-cols-[32px_1fr] gap-4">
+          <span className="pt-0.5 text-sm font-extrabold text-[#280f91]/45">
+            0{index + 1}
+          </span>
+          <div>
+            <h3
+              className="text-lg font-extrabold text-primary"
+              style={{ fontFamily: "var(--font-nunito-family)" }}
+            >
+              {item.title}
+            </h3>
+            <p className="mt-2 max-w-[560px] text-sm leading-6 text-[#37333d]/65 sm:text-base">
+              {item.body}
+            </p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
 
 export function DualRoleFeatureGrid() {
-  const [activeTab, setActiveTab] = useState<TabKey>("student");
-  const ref = useRef(null);
-  const inView = useInView(ref, { once: true, margin: "-80px" });
-
-  const cards = activeTab === "student" ? STUDENT_CARDS : TUTOR_CARDS;
-
   return (
-    <section id="features" className="py-20 lg:py-28 bg-white">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Section header */}
-        <motion.div
-          ref={ref}
-          initial={{ opacity: 0, y: 24 }}
-          animate={inView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.55, ease }}
-          className="text-center max-w-2xl mx-auto mb-12"
-        >
+    <section className="bg-[#fbfaf7] py-20 sm:py-24 lg:py-32">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto mb-16 max-w-3xl text-center lg:mb-24">
+          <p className="text-sm font-extrabold text-[#280f91]">
+            LMS dành cho gia sư và học viên
+          </p>
           <h2
-            className="text-3xl md:text-4xl lg:text-[44px] leading-tight tracking-tight text-[#0c0c0b] mb-4"
-            style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
+            className="mt-4 text-3xl font-extrabold tracking-[-0.035em] text-primary sm:text-4xl lg:text-5xl"
+            style={{ fontFamily: "var(--font-nunito-family)" }}
           >
-            <span className="text-[#280f91]">Mang lại giá trị riêng cho</span>
-            <br />
-            Gia Sư và Học Viên <br />
+            <span className="text-accent">Beewise LMS</span> có gì nổi bật
           </h2>
-          <p className="text-[#0c0c0b]/60 text-base leading-relaxed">
-            Mỗi vai trò có không gian riêng — được thiết kế cho đúng công việc
-            cần làm sau khi kết nối thành công.
+          <p className="mx-auto mt-5 max-w-2xl text-base leading-7 text-[#37333d]/65">
+            BeeWise LMS có đủ mọi thứ bạn cần để quản lý lớp học của mình.
           </p>
-        </motion.div>
-
-        {/* Tab toggle */}
-        <motion.div
-          initial={{ opacity: 0, y: 16 }}
-          animate={inView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.5, delay: 0.1, ease }}
-          className="flex items-center justify-center mb-10"
+        </div>
+        <div
+          id="learner"
+          className="grid scroll-mt-24 grid-cols-1 items-center gap-10 lg:grid-cols-[1.08fr_0.92fr] lg:gap-16"
         >
-          <div className="relative inline-flex items-center bg-[#F8FAFC] rounded-xl p-1 border border-[#0c0c0b]/6">
-            {(
-              [
-                {
-                  key: "student" as TabKey,
-                  label: "Góc Nhìn Học Viên",
-                  icon: GraduationCap,
-                },
-                {
-                  key: "tutor" as TabKey,
-                  label: "Không Gian Gia Sư",
-                  icon: ChalkboardTeacher,
-                },
-              ] as const
-            ).map((tab) => {
-              const Icon = tab.icon;
-              const isActive = activeTab === tab.key;
-              return (
-                <button
-                  key={tab.key}
-                  onClick={() => setActiveTab(tab.key)}
-                  className={`relative z-10 inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-semibold transition-colors duration-200 ${
-                    isActive
-                      ? "text-white"
-                      : "text-[#0c0c0b]/60 hover:text-[#0c0c0b]"
-                  }`}
-                >
-                  {isActive && (
-                    <motion.div
-                      layoutId="tab-indicator"
-                      className="absolute inset-0 bg-[#280f91] rounded-lg shadow-lg shadow-[#280f91]/25"
-                      transition={{
-                        type: "spring",
-                        stiffness: 400,
-                        damping: 30,
-                      }}
-                    />
-                  )}
-                  <span className="relative z-10 flex items-center gap-2">
-                    <Icon size={16} weight="fill" />
-                    {tab.label}
-                  </span>
-                </button>
-              );
-            })}
+          <SchedulePreview />
+          <div>
+            <p className="text-sm font-extrabold text-[#280f91]">
+              Không gian học viên
+            </p>
+            <h2
+              className="mt-4 text-3xl font-extrabold tracking-[-0.03em] text-primary sm:text-4xl"
+              style={{ fontFamily: "var(--font-nunito-family)" }}
+            >
+              Tính năng dành cho học viên
+            </h2>
+            <BenefitList items={learnerBenefits} />
           </div>
-        </motion.div>
-
-        {/* Feature cards grid */}
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={activeTab}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            exit={{ opacity: 0, y: -12 }}
-            transition={{ duration: 0.35, ease }}
-            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5"
+        </div>
+        <div
+          id="tutor"
+          className="mt-24 grid scroll-mt-24 grid-cols-1 items-center gap-10 sm:mt-32 lg:grid-cols-[0.92fr_1.08fr] lg:gap-16"
+        >
+          <div className="order-2 lg:order-1">
+            <p className="text-sm font-extrabold text-[#280f91]">
+              Không gian gia sư
+            </p>
+            <h2
+              className="mt-4 text-3xl font-extrabold tracking-[-0.03em] text-primary sm:text-4xl"
+              style={{ fontFamily: "var(--font-nunito-family)" }}
+            >
+              Tính năng dành cho gia sư
+            </h2>
+            <BenefitList items={tutorBenefits} />
+          </div>
+          <BrowserFrame
+            title="Quản lý lịch dạy"
+            className="order-1 overflow-hidden rounded-[24px] border border-[#280f91]/12 bg-white shadow-[0_28px_80px_rgba(40,15,145,0.13)] lg:order-2"
           >
-            {cards.map((card, i) => {
-              const Icon = card.icon;
-              return (
-                <motion.div
-                  key={card.title}
-                  initial={{ opacity: 0, y: 24 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.4, delay: i * 0.08, ease }}
-                  whileHover={{
-                    y: -4,
-                    transition: { duration: 0.25 },
-                  }}
-                  className="group rounded-2xl p-5 bg-white/95 md:bg-white/60 md:backdrop-blur-md border border-[#280f91]/8 shadow-sm hover:shadow-xl hover:shadow-[#280f91]/8 transition-shadow duration-300"
-                >
-                  {/* Card header */}
-                  <div className="flex items-center gap-3 mb-4">
-                    <div className="w-10 h-10 rounded-xl bg-[#280f91]/8 flex items-center justify-center group-hover:bg-[#280f91] transition-colors duration-250">
-                      <Icon
-                        size={20}
-                        weight="fill"
-                        className="text-[#280f91] group-hover:text-white transition-colors duration-250"
-                      />
-                    </div>
-                    <div>
-                      <h3
-                        className="text-sm font-bold text-[#0c0c0b]"
-                        style={{ fontFamily: "var(--font-nunito-family)" }}
-                      >
-                        {card.title}
-                      </h3>
-                      <p className="text-[10px] text-[#0c0c0b]/50 leading-snug">
-                        {card.desc}
-                      </p>
-                    </div>
-                  </div>
-
-                  {/* Card content */}
-                  <div className="mt-2">{card.content}</div>
-                </motion.div>
-              );
-            })}
-          </motion.div>
-        </AnimatePresence>
+            <Image
+              src="https://res.cloudinary.com/xcrm6ykz/image/upload/v1787298588/%E1%BA%A2nh_ch%E1%BB%A5p_m%C3%A0n_h%C3%ACnh_2026-08-21_145143.png"
+              alt="Không gian gia sư"
+              width={1200}
+              height={800}
+              className="h-auto w-full object-cover"
+            />
+          </BrowserFrame>
+        </div>
       </div>
     </section>
   );
diff --git a/apps/lms/features/portal/components/FaqAndCtaSection.tsx b/apps/lms/features/portal/components/FaqAndCtaSection.tsx
index 41d2037..5092757 100644
--- a/apps/lms/features/portal/components/FaqAndCtaSection.tsx
+++ b/apps/lms/features/portal/components/FaqAndCtaSection.tsx
@@ -1,252 +1,172 @@
 "use client";
 
-import { useState, useRef } from "react";
-import { motion, AnimatePresence, useInView } from "motion/react";
-import Link from "next/link";
+import { useState } from "react";
 import Image from "next/image";
-import { CaretDown, ArrowRight, Sparkle } from "@phosphor-icons/react";
-
-const ease = [0.22, 1, 0.36, 1] as const;
-
-/* ───────────────────────────────────────────
-   FAQ Data
-   ─────────────────────────────────────────── */
+import Link from "next/link";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { CaretDown } from "@phosphor-icons/react";
 
 const FAQ_ITEMS = [
   {
-    q: "BeeWise LMS dành cho ai?",
-    a: "BeeWise LMS dành cho học viên và gia sư đã kết nối thành công qua BeeWise. Học viên theo dõi lịch học, tài liệu và học phí. Gia sư quản lý lớp, tài liệu giảng dạy và thu nhập.",
-  },
-  {
-    q: "Làm thế nào để bắt đầu sử dụng hệ thống?",
-    a: "Học viên: Tìm gia sư trên trang chủ BeeWise → kết nối qua Chat Room có Consultant hỗ trợ → sau khi xác nhận học, hệ thống tự động cấp quyền LMS. Gia sư: Đăng ký hồ sơ → hoàn thành phỏng vấn → được duyệt → mở quyền LMS.",
-  },
-  {
-    q: "Học phí được quản lý như thế nào?",
-    a: "Học phí được thống nhất giữa học viên và gia sư trong Chat Room với sự hỗ trợ của Consultant. Sau khi xác nhận, hệ thống tự động ghi nhận và hiển thị trạng thái thanh toán rõ ràng trên LMS.",
+    question: "BeeWise LMS dành cho ai?",
+    answer:
+      "LMS dành cho học viên và gia sư đã kết nối thành công qua BeeWise. Mỗi vai trò có một không gian riêng phù hợp với công việc cần thực hiện.",
   },
   {
-    q: "Gia sư có thể quản lý nhiều lớp cùng lúc không?",
-    a: "Có. Không gian gia sư hỗ trợ quản lý nhiều lớp đồng thời — theo dõi từng học viên, quản lý tài liệu riêng từng lớp và xem tổng thu nhập.",
+    question: "Làm thế nào để bắt đầu sử dụng?",
+    answer:
+      "Sau khi gia sư và học viên thống nhất lớp học, Consultant xác nhận kết nối. Hệ thống sẽ tạo lớp và cấp quyền LMS cho cả hai bên.",
   },
   {
-    q: "Dữ liệu của tôi có được bảo mật không?",
-    a: "Thông tin cá nhân, tài liệu học tập và lịch sử giao dịch đều được bảo mật. Hệ thống sử dụng kết nối mã hóa và tuân thủ các tiêu chuẩn bảo mật.",
+    question: "Tài liệu và tiến độ được quản lý như thế nào?",
+    answer:
+      "Tài liệu được lưu theo từng lớp và buổi học. Lịch sử buổi học, trạng thái hoàn thành và thông tin liên quan được cập nhật trong cùng một không gian.",
   },
   {
-    q: "Lớp học được kích hoạt như thế nào?",
-    a: "Khi học viên và gia sư đồng ý học trong Chat Room, Consultant xác nhận kết nối. Hệ thống tạo hợp đồng lớp học, thiết lập lịch trình và cấp quyền LMS — không cần thao tác thủ công từ người dùng.",
+    question: "Thông tin lớp học có được bảo mật không?",
+    answer:
+      "BeeWise giới hạn quyền truy cập theo vai trò và theo lớp. Chỉ những người tham gia được cấp quyền mới có thể xem nội dung liên quan.",
   },
-];
+] as const;
 
-/* ───────────────────────────────────────────
-   Accordion Item
-   ─────────────────────────────────────────── */
-
-function AccordionItem({
-  item,
-  isOpen,
-  onToggle,
-}: {
-  item: (typeof FAQ_ITEMS)[number];
-  isOpen: boolean;
-  onToggle: () => void;
-}) {
+function FaqSection() {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+  const reduceMotion = useReducedMotion();
   return (
-    <div className="border-b border-[#0c0c0b]/8 last:border-b-0">
-      <button
-        onClick={onToggle}
-        className="w-full flex items-center justify-between py-5 px-1 text-left group"
-      >
-        <span
-          className="text-sm md:text-base font-bold text-[#0c0c0b] pr-4 group-hover:text-[#280f91] transition-colors duration-200"
-          style={{ fontFamily: "var(--font-nunito-family)" }}
-        >
-          {item.q}
-        </span>
-        <motion.div
-          animate={{ rotate: isOpen ? 180 : 0 }}
-          transition={{ duration: 0.25, ease }}
-          className="shrink-0"
-        >
-          <CaretDown
-            size={18}
-            weight="bold"
-            className={`transition-colors duration-200 ${
-              isOpen ? "text-[#280f91]" : "text-[#0c0c0b]/30"
-            }`}
-          />
-        </motion.div>
-      </button>
-      <AnimatePresence initial={false}>
-        {isOpen && (
-          <motion.div
-            initial={{ height: 0, opacity: 0 }}
-            animate={{ height: "auto", opacity: 1 }}
-            exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: 0.3, ease }}
-            className="overflow-hidden"
-            style={{ willChange: "height, opacity" }}
+    <section
+      id="faq"
+      className="scroll-mt-20 bg-[#f1eef8] py-20 sm:py-24 lg:py-28"
+    >
+      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-10 px-4 sm:px-6 lg:grid-cols-[0.75fr_1.25fr] lg:gap-20 lg:px-8">
+        <div>
+          <p className="text-sm font-extrabold text-[#280f91]">
+            Câu hỏi thường gặp
+          </p>
+          <h2
+            className="mt-4 text-3xl font-extrabold tracking-[-0.035em] text-[#17141b] sm:text-4xl"
+            style={{ fontFamily: "var(--font-nunito-family)" }}
           >
-            <p className="text-sm text-[#0c0c0b]/60 leading-relaxed pb-5 px-1 max-w-[640px]">
-              {item.a}
-            </p>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+            Bạn còn thắc mắc?
+          </h2>
+          <p className="mt-5 text-base leading-7 text-[#37333d]/65">
+            Thông tin ngắn gọn về quyền truy cập, vận hành lớp học và dữ liệu
+            trên LMS.
+          </p>
+        </div>
+        <div className="overflow-hidden rounded-2xl bg-white px-5 sm:px-7">
+          {FAQ_ITEMS.map((item, index) => {
+            const isOpen = openIndex === index;
+            return (
+              <div
+                key={item.question}
+                className="border-b border-[#280f91]/9 last:border-0"
+              >
+                <button
+                  type="button"
+                  onClick={() => setOpenIndex(isOpen ? null : index)}
+                  className="flex w-full items-center justify-between gap-4 py-6 text-left"
+                  aria-expanded={isOpen}
+                >
+                  <span className="font-extrabold text-[#17141b]">
+                    {item.question}
+                  </span>
+                  <motion.span
+                    animate={{ rotate: isOpen ? 180 : 0 }}
+                    transition={{ duration: reduceMotion ? 0 : 0.2 }}
+                    className="shrink-0 text-[#280f91]"
+                  >
+                    <CaretDown size={18} weight="bold" />
+                  </motion.span>
+                </button>
+                <AnimatePresence initial={false}>
+                  {isOpen && (
+                    <motion.div
+                      initial={reduceMotion ? false : { height: 0, opacity: 0 }}
+                      animate={{ height: "auto", opacity: 1 }}
+                      exit={
+                        reduceMotion ? undefined : { height: 0, opacity: 0 }
+                      }
+                      className="overflow-hidden"
+                    >
+                      <p className="max-w-2xl pb-6 text-sm leading-6 text-[#37333d]/65 sm:text-base sm:leading-7">
+                        {item.answer}
+                      </p>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
   );
 }
 
-/* ───────────────────────────────────────────
-   Main Component
-   ─────────────────────────────────────────── */
-
-export function FaqAndCtaSection() {
-  const [openIdx, setOpenIdx] = useState<number | null>(0);
-  const faqRef = useRef(null);
-  const ctaRef = useRef(null);
-  const faqInView = useInView(faqRef, { once: true, margin: "-60px" });
-  const ctaInView = useInView(ctaRef, { once: true, margin: "-60px" });
-
+function FinalCta() {
   return (
-    <>
-      {/* ─── FAQ Section ─── */}
-      <section className="py-20 lg:py-28 bg-[#F8FAFC]">
-        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
-          <motion.div
-            ref={faqRef}
-            initial={{ opacity: 0, y: 24 }}
-            animate={faqInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.55, ease }}
-            className="text-center mb-12"
+    <section className="bg-[#fbfaf7] py-16 sm:py-20">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="relative overflow-hidden rounded-[28px] bg-[#280f91] px-6 py-12 text-center sm:px-12 sm:py-16">
+          <h2
+            className="mx-auto max-w-3xl text-3xl font-extrabold tracking-[-0.035em] text-white sm:text-4xl lg:text-5xl"
+            style={{ fontFamily: "var(--font-nunito-family)" }}
           >
-            <h2
-              className="text-3xl md:text-4xl leading-tight tracking-tight text-[#0c0c0b] mb-3"
-              style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
-            >
-              Câu hỏi <span className="text-[#280f91]">thường gặp</span>
-            </h2>
-            <p className="text-[#0c0c0b]/60 text-base">
-              Những câu hỏi phổ biến về cách hoạt động của BeeWise LMS.
-            </p>
-          </motion.div>
-
-          <motion.div
-            initial={{ opacity: 0, y: 16 }}
-            animate={faqInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.5, delay: 0.1, ease }}
-            className="bg-white rounded-2xl border border-[#0c0c0b]/6 px-5 md:px-7 shadow-sm"
+            Dạy và học ngay tại BeeWise LMS
+          </h2>
+          <p className="mx-auto mt-5 max-w-xl text-base leading-7 text-white/72">
+            Đăng nhập để xem lịch học, tài liệu và tiến độ lớp của bạn trên
+            BeeWise LMS.
+          </p>
+          <Link
+            href="/login"
+            className="mt-8 inline-flex h-12 items-center justify-center whitespace-nowrap rounded-xl bg-[#ffc500] px-7 text-sm font-extrabold text-[#201a00] transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-[#280f91]"
           >
-            {FAQ_ITEMS.map((item, i) => (
-              <AccordionItem
-                key={i}
-                item={item}
-                isOpen={openIdx === i}
-                onToggle={() => setOpenIdx(openIdx === i ? null : i)}
-              />
-            ))}
-          </motion.div>
+            Đăng nhập LMS
+          </Link>
         </div>
-      </section>
-
-      {/* ─── Bottom CTA Banner ─── */}
-      <section className="py-16 lg:py-24 bg-[#280f91] relative overflow-hidden">
-        {/* Decorative blurs */}
-        <div className="hidden md:block absolute top-0 left-1/4 w-48 h-48 rounded-full bg-[#ffc500]/10 blur-[80px]" />
-        <div className="hidden md:block absolute bottom-0 right-1/4 w-64 h-64 rounded-full bg-[#cfe1fa]/8 blur-[100px]" />
-
-        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-          <motion.div
-            ref={ctaRef}
-            initial={{ opacity: 0, y: 24 }}
-            animate={ctaInView ? { opacity: 1, y: 0 } : {}}
-            transition={{ duration: 0.6, ease }}
-            className="text-center"
-          >
-            <h2
-              className="text-3xl md:text-4xl lg:text-5xl leading-tight tracking-tight text-white mb-5"
-              style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
-            >
-              Bắt Đầu Quản Lý Lớp Học
-            </h2>
-            <p className="text-white/60 text-base leading-relaxed mb-10 max-w-lg mx-auto">
-              Đăng nhập để theo dõi lịch học, tài liệu và tiến độ lớp học của
-              bạn.
-            </p>
+      </div>
+    </section>
+  );
+}
 
-            {/* Pulse-animated CTA button */}
-            <motion.div
-              animate={{
-                boxShadow: [
-                  "0 0 0 0 rgba(255, 197, 0, 0.4)",
-                  "0 0 0 12px rgba(255, 197, 0, 0)",
-                  "0 0 0 0 rgba(255, 197, 0, 0)",
-                ],
-              }}
-              transition={{
-                duration: 2,
-                repeat: Infinity,
-                ease: "easeInOut",
-              }}
-              className="inline-block rounded-xl"
-            >
-              <Link
-                href="/login"
-                className="inline-flex h-14 items-center justify-center gap-2.5 rounded-xl bg-[#ffc500] px-10 text-base font-bold text-[#0c0c0b] hover:bg-[#ffcc1a] active:scale-[0.97] transition-all duration-200 shadow-xl shadow-[#ffc500]/30"
-                style={{ fontFamily: "var(--font-nunito-family)" }}
-              >
-                Bắt Đầu Ngay
-              </Link>
-            </motion.div>
-          </motion.div>
+function Footer() {
+  return (
+    <footer className="border-t border-[#280f91]/8 bg-[#fbfaf7] py-8">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-4 sm:flex-row sm:px-6 lg:px-8">
+        <div className="flex items-center gap-3">
+          <span className="relative size-8 overflow-hidden rounded-lg bg-[#280f91]/8">
+            <Image
+              src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561272/beewise/beewise-logo-nobackground.png"
+              alt=""
+              fill
+              sizes="32px"
+              className="object-contain p-1"
+            />
+          </span>
+          <p className="text-xs text-[#37333d]/50">
+            © {new Date().getFullYear()} BeeWise Education
+          </p>
         </div>
-      </section>
-
-      {/* ─── Minimal Footer ─── */}
-      <footer className="bg-white border-t border-[#0c0c0b]/6 py-8">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
-            {/* Left: brand */}
-            <div className="flex items-center gap-2.5">
-              <div className="relative w-7 h-7 rounded-lg bg-[#280f91] flex items-center justify-center overflow-hidden shrink-0">
-                <Image
-                  src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561272/beewise/beewise-logo-nobackground.png"
-                  alt="BeeWise"
-                  fill
-                  sizes="28px"
-                  className="object-contain p-0.5"
-                />
-              </div>
-              <span className="text-[#0c0c0b]/40 text-xs">
-                &copy; {new Date().getFullYear()} BeeWise Education
-              </span>
-            </div>
-
-            {/* Right: system status */}
-            <div className="flex items-center gap-4">
-              <div className="flex items-center gap-1.5">
-                <div className="w-1.5 h-1.5 rounded-full bg-[#447353] animate-pulse" />
-                <p className="text-[#0c0c0b]/40 text-xs">
-                  Hệ thống hoạt động bình thường
-                </p>
-              </div>
-              <a
-                href="#"
-                className="text-xs text-[#0c0c0b]/40 hover:text-[#280f91] transition-colors"
-              >
-                Điều khoản
-              </a>
-              <a
-                href="#"
-                className="text-xs text-[#0c0c0b]/40 hover:text-[#280f91] transition-colors"
-              >
-                Bảo mật
-              </a>
-            </div>
-          </div>
+        <div className="flex gap-5 text-xs font-semibold text-[#37333d]/55">
+          <a href="#" className="hover:text-[#280f91]">
+            Điều khoản
+          </a>
+          <a href="#" className="hover:text-[#280f91]">
+            Bảo mật
+          </a>
         </div>
-      </footer>
+      </div>
+    </footer>
+  );
+}
+
+export function FaqAndCtaSection() {
+  return (
+    <>
+      <FaqSection />
+      <FinalCta />
+      <Footer />
     </>
   );
 }
diff --git a/apps/lms/features/portal/components/LmsAIFeaturesSection.tsx b/apps/lms/features/portal/components/LmsAIFeaturesSection.tsx
new file mode 100644
index 0000000..dbd54a6
--- /dev/null
+++ b/apps/lms/features/portal/components/LmsAIFeaturesSection.tsx
@@ -0,0 +1,97 @@
+import Link from "next/link";
+
+const AI_CAPABILITIES = [
+  {
+    title: "Tóm tắt nội dung bài học",
+    description: "Chắt lọc khái niệm, công thức và kiến thức cần nhớ từ nội dung buổi học.",
+  },
+  {
+    title: "Tạo quiz ôn tập tự động",
+    description: "Sinh câu hỏi trắc nghiệm, đáp án và giải thích bám sát phần vừa học.",
+  },
+] as const;
+
+function SummaryPreview() {
+  return (
+    <div className="rounded-2xl border border-white/12 bg-white p-4 shadow-[0_22px_60px_rgba(0,0,0,0.22)] sm:p-5">
+      <div className="flex items-center justify-between border-b border-[#280f91]/8 pb-3">
+        <p className="text-xs font-extrabold text-[#280f91] sm:text-sm">Tóm tắt lý thuyết</p>
+        <span className="rounded-md bg-[#447353]/10 px-2 py-1 text-[8px] font-bold text-[#447353] sm:text-[10px]">Đã hoàn thành</span>
+      </div>
+      <div className="pt-4">
+        <h3 className="text-sm font-extrabold text-[#17141b] sm:text-base">Hệ phương trình bậc nhất hai ẩn</h3>
+        <p className="mt-2 text-[9px] leading-4 text-[#37333d]/62 sm:text-[11px] sm:leading-5">Bài học trình bày dạng tổng quát và hai phương pháp giải cơ bản.</p>
+        <div className="mt-4 rounded-xl border border-[#cfe1fa] bg-[#cfe1fa]/25 p-3">
+          <p className="text-[9px] font-extrabold text-[#280f91] sm:text-[11px]">Phương pháp thế</p>
+          <p className="mt-1 text-[8px] leading-4 text-[#37333d]/60 sm:text-[10px]">Rút một ẩn từ phương trình đầu và thay vào phương trình còn lại.</p>
+        </div>
+        <div className="mt-2 rounded-xl border border-[#cfe1fa] bg-[#cfe1fa]/25 p-3">
+          <p className="text-[9px] font-extrabold text-[#280f91] sm:text-[11px]">Phương pháp cộng đại số</p>
+          <p className="mt-1 text-[8px] leading-4 text-[#37333d]/60 sm:text-[10px]">Biến đổi hệ số để loại một ẩn và tìm nghiệm của hệ.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function QuizPreview() {
+  const options = [
+    { label: "A", value: "(1, 2)", state: "default" },
+    { label: "B", value: "(2, 1)", state: "correct" },
+    { label: "C", value: "(3, 0)", state: "default" },
+    { label: "D", value: "(0, 3)", state: "default" },
+  ] as const;
+
+  return (
+    <div className="rounded-2xl border border-white/12 bg-white p-4 shadow-[0_22px_60px_rgba(0,0,0,0.24)] sm:p-5">
+      <div className="flex items-center justify-between border-b border-[#280f91]/8 pb-3">
+        <p className="text-xs font-extrabold text-[#280f91] sm:text-sm">Quiz ôn tập</p>
+        <span className="rounded-md bg-[#280f91]/8 px-2 py-1 text-[8px] font-bold text-[#280f91] sm:text-[10px]">5 câu hỏi</span>
+      </div>
+      <div className="pt-4">
+        <p className="text-[9px] font-bold leading-4 text-[#17141b] sm:text-[11px] sm:leading-5"><span className="text-[#280f91]">Câu 1.</span> Hệ phương trình x + y = 3 và 2x - y = 3 có nghiệm là:</p>
+        <div className="mt-4 grid grid-cols-2 gap-2">
+          {options.map((option) => <div key={option.label} className={`flex items-center gap-2 rounded-lg border p-2 text-[8px] font-semibold sm:text-[10px] ${option.state === "correct" ? "border-[#447353] bg-[#447353]/10 text-[#447353]" : "border-[#280f91]/10 text-[#37333d]/65"}`}><span className="grid size-5 shrink-0 place-items-center rounded-full border border-current text-[7px] font-extrabold">{option.label}</span>{option.value}</div>)}
+        </div>
+        <div className="mt-4 rounded-xl border border-[#447353]/20 bg-[#447353]/8 p-3">
+          <p className="text-[9px] font-extrabold text-[#447353] sm:text-[11px]">Đáp án chính xác</p>
+          <p className="mt-1 text-[8px] leading-4 text-[#37333d]/62 sm:text-[10px]">Cộng hai phương trình được 3x = 6, suy ra x = 2 và y = 1.</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AiProductVisual() {
+  return (
+    <div className="relative min-h-[430px] sm:min-h-[500px]">
+      <div className="absolute inset-0 rounded-[28px] bg-[linear-gradient(135deg,rgba(40,15,145,0.08),rgba(207,225,250,0.7))]" />
+      <div className="absolute left-0 top-0 w-[72%] sm:w-[68%]"><SummaryPreview /></div>
+      <div className="absolute bottom-0 right-0 w-[74%] sm:w-[70%]"><QuizPreview /></div>
+      <div className="absolute right-3 top-4 rounded-xl border border-[#280f91]/10 bg-[#280f91] px-3 py-2 shadow-sm sm:right-6">
+        <p className="text-[9px] font-bold text-white sm:text-[11px]">Tạo từ nội dung buổi học</p>
+      </div>
+    </div>
+  );
+}
+
+export function LmsAIFeaturesSection() {
+  return (
+    <section aria-labelledby="lms-ai-headline" className="bg-[#fbfaf7] px-4 pb-20 sm:px-6 sm:pb-24 lg:px-8 lg:pb-32">
+      <div className="mx-auto max-w-7xl overflow-hidden rounded-[28px] border border-[#280f91]/10 bg-[#eaf2ff] p-6 shadow-[0_24px_70px_rgba(40,15,145,0.10)] sm:rounded-[36px] sm:p-10 lg:p-12 xl:p-14">
+        <div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-12 lg:gap-14">
+          <div className="lg:col-span-5">
+            <p className="text-sm font-extrabold text-[#280f91]">BeeWise AI trong LMS</p>
+            <h2 id="lms-ai-headline" className="mt-4 text-3xl font-extrabold leading-[1.12] tracking-[-0.035em] text-[#280f91] sm:text-4xl lg:text-[44px]" style={{ fontFamily: "var(--font-nunito-family)" }}>Biến mỗi buổi học thành tài liệu ôn tập.</h2>
+            <p className="mt-5 max-w-xl text-sm leading-6 text-[#37333d]/68 sm:text-base sm:leading-7">Sau buổi học, BeeWise AI hỗ trợ gia sư tổng hợp nội dung và chuẩn bị bài luyện tập để học viên ôn lại ngay khi kiến thức còn mới.</p>
+            <div className="mt-8 space-y-6">
+              {AI_CAPABILITIES.map((item, index) => <div key={item.title} className="grid grid-cols-[28px_1fr] gap-3"><span className="pt-0.5 text-xs font-extrabold text-[#280f91]/55">0{index + 1}</span><div><h3 className="text-sm font-extrabold text-[#17141b] sm:text-base">{item.title}</h3><p className="mt-1 text-sm leading-6 text-[#37333d]/60">{item.description}</p></div></div>)}
+            </div>
+            <Link href="/login" className="mt-9 inline-flex h-12 items-center justify-center whitespace-nowrap rounded-xl bg-[#280f91] px-6 text-sm font-extrabold text-white transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#280f91] focus-visible:ring-offset-2 focus-visible:ring-offset-[#eaf2ff]">Khám phá BeeWise AI</Link>
+          </div>
+          <div className="lg:col-span-7"><AiProductVisual /></div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/lms/features/portal/components/LmsHeader.tsx b/apps/lms/features/portal/components/LmsHeader.tsx
index 50498c5..c9b9cb2 100644
--- a/apps/lms/features/portal/components/LmsHeader.tsx
+++ b/apps/lms/features/portal/components/LmsHeader.tsx
@@ -1,146 +1,110 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import Link from "next/link";
+import { useState } from "react";
 import Image from "next/image";
-import { motion, AnimatePresence } from "motion/react";
+import Link from "next/link";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { List, X } from "@phosphor-icons/react";
 
 const NAV_LINKS = [
-  { label: "Giới thiệu", href: "#features" },
-  { label: "Tính năng lớp học", href: "#activation" },
-];
+  { label: "Dành cho học viên", href: "#learner" },
+  { label: "Dành cho gia sư", href: "#tutor" },
+  { label: "Cách hoạt động", href: "#how-it-works" },
+  { label: "Câu hỏi thường gặp", href: "#faq" },
+] as const;
 
 export function LmsHeader() {
-  const [scrolled, setScrolled] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
-
-  useEffect(() => {
-    const onScroll = () => setScrolled(window.scrollY > 40);
-    onScroll();
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => window.removeEventListener("scroll", onScroll);
-  }, []);
-
-  // Close mobile menu on resize to desktop
-  useEffect(() => {
-    const onResize = () => {
-      if (window.innerWidth >= 1024) setMenuOpen(false);
-    };
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, []);
+  const reduceMotion = useReducedMotion();
 
   return (
-    <header
-      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
-        scrolled
-          ? "bg-white/85 backdrop-blur-xl shadow-lg shadow-[#280f91]/6 border-b border-[#280f91]/8"
-          : "bg-white/0"
-      }`}
-    >
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="h-16 flex items-center justify-between gap-4">
-          {/* Logo + LMS Hub tag */}
-          <Link href="/" className="flex items-center gap-2.5 shrink-0">
-            <div className="relative w-9 h-9 rounded-xl bg-[#280f91]/10 flex items-center justify-center overflow-hidden shrink-0">
-              <Image
-                src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561272/beewise/beewise-logo-nobackground.png"
-                alt="BeeWise Logo"
-                fill
-                sizes="36px"
-                className="object-contain p-1"
-                priority
-              />
-            </div>
-            <div className="flex items-center gap-2">
-              <span
-                className="text-[#280f91] text-sm leading-none uppercase hidden sm:block"
-                style={{
-                  fontFamily: "var(--font-nunito-family)",
-                  fontWeight: 800,
-                }}
-              >
-                BeeWise
-              </span>
-              <span className="hidden sm:inline-flex items-center h-5 px-2 rounded-md bg-[#280f91]/8 text-[#280f91] text-[10px] font-bold tracking-wide">
-                LMS
-              </span>
-            </div>
-          </Link>
-
-          {/* Center nav links */}
-          <nav className="hidden lg:flex items-center gap-1">
-            {NAV_LINKS.map((link) => (
-              <a
-                key={link.label}
-                href={link.href}
-                className="px-3 py-1.5 text-sm font-medium text-[#0c0c0b]/60 hover:text-[#280f91] hover:bg-[#280f91]/5 rounded-lg transition-all duration-200"
-              >
-                {link.label}
-              </a>
-            ))}
-          </nav>
+    <header className="fixed inset-x-0 top-0 z-50 border-b border-[#280f91]/8 bg-[#fbfaf7]/92 backdrop-blur-xl">
+      <div className="mx-auto flex h-[72px] max-w-7xl items-center justify-between gap-6 px-4 sm:px-6 lg:px-8">
+        <Link
+          href="/"
+          className="flex shrink-0 items-center gap-3"
+          aria-label="BeeWise LMS, trang chủ"
+        >
+          <span className="relative size-10 overflow-hidden rounded-xl bg-[#280f91]/8">
+            <Image
+              src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561272/beewise/beewise-logo-nobackground.png"
+              alt=""
+              fill
+              priority
+              sizes="40px"
+              className="object-contain p-1"
+            />
+          </span>
+          <span
+            className="text-base font-extrabold text-[#280f91]"
+            style={{ fontFamily: "var(--font-nunito-family)" }}
+          >
+            BeeWise <span className="font-semibold text-[#0c0c0b]/45">LMS</span>
+          </span>
+        </Link>
 
-          {/* Right: dual-action CTA hub */}
-          <div className="flex items-center gap-2.5">
-            <Link
-              href="/login"
-              className="hidden md:inline-flex h-9 items-center justify-center rounded-xl bg-[#ffc500] px-5 text-sm font-bold text-primary hover:bg-[#ffcc1a] active:scale-[0.97] transition-all duration-200 shadow-sm shadow-[#ffc500]/30"
-              style={{ fontFamily: "var(--font-nunito-family)" }}
+        <nav
+          className="hidden items-center gap-7 lg:flex"
+          aria-label="Điều hướng chính"
+        >
+          {NAV_LINKS.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              className="text-sm uppercase font-black text-primary transition-colors hover:text-accent"
             >
-              Đăng Nhập Hệ Thống
-            </Link>
+              {link.label}
+            </a>
+          ))}
+        </nav>
 
-            {/* Mobile hamburger */}
-            <button
-              className="lg:hidden p-2 text-[#0c0c0b]/60 hover:text-[#280f91] transition-colors rounded-lg hover:bg-[#280f91]/5"
-              onClick={() => setMenuOpen(!menuOpen)}
-              aria-label={menuOpen ? "Đóng menu" : "Mở menu"}
-            >
-              {menuOpen ? (
-                <X size={22} weight="bold" />
-              ) : (
-                <List size={22} weight="bold" />
-              )}
-            </button>
-          </div>
+        <div className="flex items-center gap-2">
+          <Link
+            href="/login"
+            className="inline-flex h-10 items-center justify-center whitespace-nowrap rounded-xl bg-[#ffc500] px-4 text-sm font-extrabold text-[#201a00] transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#280f91] focus-visible:ring-offset-2 sm:px-5"
+          >
+            Đăng nhập
+          </Link>
+          <button
+            type="button"
+            onClick={() => setMenuOpen((value) => !value)}
+            className="grid size-10 place-items-center rounded-xl text-[#280f91] transition-colors hover:bg-[#280f91]/7 lg:hidden"
+            aria-expanded={menuOpen}
+            aria-controls="mobile-navigation"
+            aria-label={menuOpen ? "Đóng menu" : "Mở menu"}
+          >
+            {menuOpen ? (
+              <X size={22} weight="bold" />
+            ) : (
+              <List size={22} weight="bold" />
+            )}
+          </button>
         </div>
       </div>
 
-      {/* Mobile drawer */}
-      <AnimatePresence>
+      <AnimatePresence initial={false}>
         {menuOpen && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
-            className="lg:hidden overflow-hidden border-t border-[#280f91]/8 bg-white"
-            style={{ willChange: "height, opacity" }}
+          <motion.nav
+            id="mobile-navigation"
+            initial={reduceMotion ? false : { height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={reduceMotion ? undefined : { height: 0, opacity: 0 }}
+            className="overflow-hidden border-t border-[#280f91]/8 bg-[#fbfaf7] lg:hidden"
+            aria-label="Điều hướng trên di động"
           >
-            <div className="px-4 py-4 flex flex-col gap-1">
+            <div className="mx-auto flex max-w-7xl flex-col gap-1 px-4 py-4 sm:px-6">
               {NAV_LINKS.map((link) => (
                 <a
-                  key={link.label}
+                  key={link.href}
                   href={link.href}
                   onClick={() => setMenuOpen(false)}
-                  className="text-sm font-semibold text-[#0c0c0b]/70 hover:text-[#280f91] hover:bg-[#280f91]/5 py-2.5 px-3 rounded-lg transition-all"
+                  className="rounded-lg px-3 py-3 text-sm font-semibold text-[#29272f]/75 hover:bg-[#280f91]/6 hover:text-[#280f91]"
                 >
                   {link.label}
                 </a>
               ))}
-              <div className="mt-3 pt-3 border-t border-[#0c0c0b]/8 flex flex-col gap-2.5">
-                <Link
-                  href="/login"
-                  className="inline-flex h-10 items-center justify-center rounded-xl bg-[#ffc500] px-5 text-sm font-bold text-[#0c0c0b]"
-                  style={{ fontFamily: "var(--font-nunito-family)" }}
-                >
-                  Đăng Nhập Hệ Thống
-                </Link>
-              </div>
             </div>
-          </motion.div>
+          </motion.nav>
         )}
       </AnimatePresence>
     </header>
diff --git a/apps/lms/features/portal/components/LmsHeroSection.tsx b/apps/lms/features/portal/components/LmsHeroSection.tsx
index d513552..b8dc4fc 100644
--- a/apps/lms/features/portal/components/LmsHeroSection.tsx
+++ b/apps/lms/features/portal/components/LmsHeroSection.tsx
@@ -1,301 +1,47 @@
-"use client";
-
-import { motion } from "motion/react";
-import Link from "next/link";
-import {
-  GraduationCap,
-  ChalkboardTeacher,
-  CalendarCheck,
-  Lock,
-  Clock,
-  ShieldCheck,
-} from "@phosphor-icons/react";
-
-const ease = [0.22, 1, 0.36, 1] as const;
-
-/* ───────────────────────────────────────────
-   Mini Mockup Sub-Components (right column)
-   ─────────────────────────────────────────── */
-
-function ScheduleGrid() {
-  const days = ["T2", "T3", "T4", "T5", "T6", "T7"];
-  const slots = [
-    { day: 0, row: 0, label: "Ielts Reading", color: "#280f91", text: "white" },
-    {
-      day: 2,
-      row: 0,
-      label: "Toeic Listening",
-      color: "#ffc500",
-      text: "#0c0c0b",
-    },
-    { day: 4, row: 0, label: "Toán cao cấp", color: "#447353", text: "white" },
-    {
-      day: 1,
-      row: 1,
-      label: "Xác xuất thống kê",
-      color: "#280f91",
-      text: "white",
-    },
-    {
-      day: 3,
-      row: 1,
-      label: "Hóa học hữu cơ",
-      color: "#ffc500",
-      text: "#0c0c0b",
-    },
-    {
-      day: 5,
-      row: 1,
-      label: "Tiếng anh giao tiếp",
-      color: "#280f91",
-      text: "white",
-    },
-  ];
-
-  return (
-    <div className="bg-white rounded-2xl p-4 shadow-lg shadow-[#280f91]/8 border border-[#0c0c0b]/6">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-3">
-        <p
-          className="text-xs font-bold text-[#0c0c0b]"
-          style={{ fontFamily: "var(--font-nunito-family)" }}
-        >
-          Lịch Học Tuần Này
-        </p>
-        <span className="text-[9px] font-medium text-[#0c0c0b]/40">
-          Tuần 28
-        </span>
-      </div>
-      {/* Day headers */}
-      <div className="grid grid-cols-6 gap-1 mb-2">
-        {days.map((d) => (
-          <div
-            key={d}
-            className="text-center text-[9px] font-semibold text-[#0c0c0b]/40"
-          >
-            {d}
-          </div>
-        ))}
-      </div>
-      {/* Slot grid */}
-      {[0, 1].map((row) => (
-        <div key={row} className="grid grid-cols-6 gap-1 mb-1">
-          {Array.from({ length: 6 }).map((_, col) => {
-            const slot = slots.find((s) => s.day === col && s.row === row);
-            return (
-              <div
-                key={col}
-                className="h-8 rounded-lg flex items-center justify-center text-[8px] font-bold transition-all duration-200"
-                style={
-                  slot
-                    ? { backgroundColor: slot.color, color: slot.text }
-                    : { backgroundColor: "#f0f4ff" }
-                }
-              >
-                {slot?.label || ""}
-              </div>
-            );
-          })}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function SessionCard() {
-  return (
-    <div className="bg-white rounded-2xl p-4 shadow-lg shadow-[#280f91]/8 border border-[#0c0c0b]/6">
-      <div className="flex items-center gap-2 mb-3">
-        <div className="w-7 h-7 rounded-lg bg-[#280f91] flex items-center justify-center">
-          <Lock size={13} weight="fill" className="text-white" />
-        </div>
-        <div>
-          <p className="text-[10px] font-bold text-[#0c0c0b]">
-            Buổi Học Hôm Nay
-          </p>
-          <p className="text-[9px] text-[#0c0c0b]/40">
-            Theo dõi tiến độ lớp học
-          </p>
-        </div>
-      </div>
-      {/* Session items */}
-      <div className="flex flex-col gap-1.5">
-        <div className="flex items-center justify-between bg-[#280f91]/5 rounded-lg px-3 py-2">
-          <div className="flex items-center gap-2">
-            <div className="w-1.5 h-1.5 rounded-full bg-[#ffc500] animate-pulse" />
-            <span className="text-[9px] font-semibold text-[#0c0c0b]">
-              Lớp A — 14:00
-            </span>
-          </div>
-          <span className="text-[8px] font-bold text-[#ffc500] bg-[#ffc500]/15 px-2 py-0.5 rounded-full">
-            Sắp diễn ra
-          </span>
-        </div>
-        <div className="flex items-center justify-between bg-[#447353]/5 rounded-lg px-3 py-2">
-          <div className="flex items-center gap-2">
-            <div className="w-1.5 h-1.5 rounded-full bg-[#447353]" />
-            <span className="text-[9px] font-semibold text-[#0c0c0b]">
-              Lớp B — 09:00
-            </span>
-          </div>
-          <span className="text-[8px] font-bold text-[#447353] bg-[#447353]/15 px-2 py-0.5 rounded-full">
-            Đã hoàn thành
-          </span>
-        </div>
-        <div className="flex items-center justify-between bg-[#447353]/5 rounded-lg px-3 py-2">
-          <div className="flex items-center gap-2">
-            <div className="w-1.5 h-1.5 rounded-full bg-[#447353]" />
-            <span className="text-[9px] font-semibold text-[#0c0c0b]">
-              Lớp C — 07:30
-            </span>
-          </div>
-          <span className="text-[8px] font-bold text-[#447353] bg-[#447353]/15 px-2 py-0.5 rounded-full">
-            Đã hoàn thành
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-/* ───────────────────────────────────────────
-   Main Hero Section
-   ─────────────────────────────────────────── */
+import { DashboardPreview } from "./PortalProductVisuals";
 
 export function LmsHeroSection() {
   return (
-    <section className="min-h-[100dvh] flex items-center pt-20 pb-12 overflow-hidden bg-[#F8FAFC] relative">
-      {/* Background accents */}
-      <div className="absolute top-0 right-0 w-[55%] h-full bg-gradient-to-bl from-[#280f91]/4 via-[#cfe1fa]/10 to-transparent -z-0 rounded-bl-[120px]" />
-      <div className="hidden md:block absolute bottom-24 left-8 w-40 h-40 rounded-full bg-[#ffc500]/15 blur-[60px]" />
-      <div className="hidden md:block absolute top-40 right-16 w-56 h-56 rounded-full bg-[#280f91]/8 blur-[80px]" />
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full relative z-10">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-          {/* Left Column: Content */}
-          <motion.div
-            initial={{ opacity: 0, x: -32 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.7, ease }}
+    <section className="relative min-h-[100dvh] overflow-hidden bg-[#fbfaf7] pb-16 pt-28 lg:pb-24 lg:pt-32">
+      <div
+        className="absolute inset-x-0 top-[48%] h-[52%] bg-[#eeeaf9]"
+        aria-hidden="true"
+      />
+      <div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mx-auto max-w-5xl text-center h-screen">
+          <p className="text-sm font-extrabold text-[#280f91]">
+            Nền tảng quản lý lớp học BeeWise
+          </p>
+          <h1
+            className="mt-5 text-[42px] font-extrabold leading-[1.02] tracking-[-0.05em] text-[#17141b] sm:text-6xl lg:text-[72px]"
+            style={{ fontFamily: "var(--font-nunito-family)" }}
           >
-            {/* Role pills */}
-            <div className="flex items-center gap-2 mb-6 flex-wrap">
-              <span className="inline-flex items-center gap-1.5 h-7 px-3 rounded-full bg-[#280f91]/8 text-[#280f91] text-xs font-bold">
-                <GraduationCap size={13} weight="fill" />
-                Học Viên
-              </span>
-              <span className="inline-flex items-center gap-1.5 h-7 px-3 rounded-full bg-[#ffc500]/15 text-[#0c0c0b] text-xs font-bold">
-                <ChalkboardTeacher size={13} weight="fill" />
-                Gia Sư
-              </span>
-            </div>
-
-            <h1
-              className="text-[25px] sm:text-4xl  leading-[1.1] tracking-tight text-[#0c0c0b] mb-5"
-              style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
+            <span className="block text-primary">Quản lý lớp học</span>
+            <span className="mt-1 block text-accent sm:mt-2">
+              cùng BeeWise LMS.
+            </span>
+          </h1>
+          <p className="mx-auto mt-6 max-w-2xl text-base leading-7 text-[#37333d]/68 sm:text-lg">
+            Lịch học, tài liệu, tin nhắn và tiến độ được đồng bộ trong một không
+            gian dành cho cả gia sư và học viên.
+          </p>
+          <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
+            <a
+              href="#learner"
+              className="inline-flex h-12 items-center justify-center whitespace-nowrap rounded-xl bg-[#280f91] px-6 text-sm font-bold text-white transition-transform hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#280f91] focus-visible:ring-offset-2"
             >
-              Quản Lý Lớp Học Sau Kết Nối
-              <br />
-              Cùng <span className="text-accent">BeeWise LMS</span>
-            </h1>
-
-            <p className="text-base md:text-lg text-[#0c0c0b]/60 leading-relaxed max-w-[520px] mb-8">
-              Không gian dành riêng cho gia sư và học viên đã kết nối thành
-              công. Theo dõi lịch học, quản lý tài liệu, kiểm soát học phí — tất
-              cả trong một hệ thống.
-            </p>
-
-            {/* CTA Buttons */}
-            <div className="flex flex-col sm:flex-row gap-3 mb-10">
-              <Link
-                href="/login"
-                className="inline-flex h-12 items-center justify-center gap-2 rounded-xl bg-[#ffc500] px-7 text-sm font-bold text-primary hover:bg-[#ffcc1a] active:scale-[0.97] transition-all duration-200 shadow-lg shadow-[#ffc500]/30"
-                style={{ fontFamily: "var(--font-nunito-family)" }}
-              >
-                Bắt Đầu Ngay
-              </Link>
-            </div>
-
-            {/* Glassmorphism Stat Cards — within BeeWise scope */}
-            <div className="flex items-center gap-4 flex-wrap">
-              {[
-                {
-                  icon: Clock,
-                  value: "1 tài khoản",
-                  label: "Dùng chung toàn hệ thống",
-                },
-                {
-                  icon: CalendarCheck,
-                  value: "Tự động",
-                  label: "Kích hoạt lớp học",
-                },
-                {
-                  icon: ShieldCheck,
-                  value: "Consultant",
-                  label: "Đồng hành & hỗ trợ",
-                },
-              ].map((stat) => {
-                const Icon = stat.icon;
-                return (
-                  <motion.div
-                    key={stat.label}
-                    initial={{ opacity: 0, y: 16 }}
-                    animate={{ opacity: 1, y: 0 }}
-                    transition={{ duration: 0.5, delay: 0.4, ease }}
-                    className="flex items-center gap-3 px-4 py-3 rounded-xl bg-white/95 md:bg-white/60 md:backdrop-blur-md border border-[#280f91]/8 shadow-sm"
-                  >
-                    <Icon
-                      size={18}
-                      weight="fill"
-                      className="text-[#280f91] shrink-0"
-                    />
-                    <div>
-                      <p
-                        className="text-sm font-bold text-[#0c0c0b] leading-none"
-                        style={{ fontFamily: "var(--font-nunito-family)" }}
-                      >
-                        {stat.value}
-                      </p>
-                      <p className="text-[10px] text-[#0c0c0b]/50 mt-0.5">
-                        {stat.label}
-                      </p>
-                    </div>
-                  </motion.div>
-                );
-              })}
-            </div>
-          </motion.div>
-
-          {/* Right Column: Mockup UI */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95, x: 32 }}
-            animate={{ opacity: 1, scale: 1, x: 0 }}
-            transition={{ duration: 0.8, delay: 0.15, ease }}
-            className="relative"
-          >
-            <div className="flex flex-col gap-4">
-              <ScheduleGrid />
-              <SessionCard />
-            </div>
-
-            {/* Top-right verified badge */}
-            <motion.div
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ delay: 0.7, duration: 0.4 }}
-              className="absolute -top-3 -right-2 bg-[#447353] text-white rounded-full px-3 py-1.5 shadow-lg"
+              Trải nghiệm cho học viên
+            </a>
+            <a
+              href="#tutor"
+              className="inline-flex h-12 items-center justify-center whitespace-nowrap rounded-xl border border-[#280f91]/22 bg-white px-6 text-sm font-bold text-[#280f91] transition-colors hover:bg-[#280f91]/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#280f91] focus-visible:ring-offset-2"
             >
-              <div className="flex items-center gap-1.5">
-                <ShieldCheck size={12} weight="fill" />
-                <span
-                  className="text-[9px] font-bold"
-                  style={{ fontFamily: "var(--font-nunito-family)" }}
-                >
-                  Hệ thống xác thực
-                </span>
-              </div>
-            </motion.div>
-          </motion.div>
+              Công cụ dành cho gia sư
+            </a>
+          </div>
+        </div>
+        <div className="mx-auto mt-12 max-w-6xl lg:mt-14">
+          <DashboardPreview />
         </div>
       </div>
     </section>
diff --git a/apps/lms/features/portal/components/PortalProductVisuals.tsx b/apps/lms/features/portal/components/PortalProductVisuals.tsx
new file mode 100644
index 0000000..7ba23be
--- /dev/null
+++ b/apps/lms/features/portal/components/PortalProductVisuals.tsx
@@ -0,0 +1,190 @@
+import Image from "next/image";
+
+type BrowserFrameProps = {
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function BrowserFrame({
+  title,
+  children,
+  className = "",
+}: BrowserFrameProps) {
+  return (
+    <div
+      className={`overflow-hidden rounded-[24px] border border-[#280f91]/12 bg-white shadow-[0_28px_80px_rgba(40,15,145,0.13)] ${className}`}
+    >
+      <div className="flex h-11 items-center gap-2 border-b border-[#280f91]/8 px-4">
+        <span className="size-2 rounded-full bg-[#280f91]/14" />
+        <span className="size-2 rounded-full bg-[#280f91]/14" />
+        <span className="size-2 rounded-full bg-[#ffc500]" />
+        <span className="ml-2 text-[10px] font-bold text-[#37333d]/45 sm:text-xs">
+          {title}
+        </span>
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export function DashboardPreview({ className }: { className?: string }) {
+  return (
+    <BrowserFrame title="Tổng quan gia sư" className={className}>
+      <div className="relative w-full overflow-hidden bg-[#f7f8fc]">
+        <Image
+          src="https://res.cloudinary.com/xcrm6ykz/image/upload/v1787303094/%E1%BA%A2nh_ch%E1%BB%A5p_m%C3%A0n_h%C3%ACnh_2026-08-21_160717.png"
+          alt="Tổng quan gia sư"
+          width={1920}
+          height={1080}
+          className="h-auto w-full object-cover"
+          priority
+        />
+      </div>
+    </BrowserFrame>
+  );
+}
+
+export function SchedulePreview({ className }: { className?: string }) {
+  const days = ["T2", "T3", "T4", "T5", "T6", "T7"];
+  return (
+    <BrowserFrame title="Lịch dạy" className={className}>
+      <div className="bg-[#f7f8fc] p-4 sm:p-6">
+        <div className="flex items-end justify-between">
+          <div>
+            <h3 className="text-base font-extrabold text-[#17141b] sm:text-xl">
+              Lịch học của bạn
+            </h3>
+            <p className="mt-1 text-[9px] text-[#37333d]/50 sm:text-xs">
+              Theo dõi toàn bộ buổi học trong tuần
+            </p>
+          </div>
+          <span className="rounded-lg bg-white px-3 py-2 text-[9px] font-bold text-[#280f91] sm:text-xs">
+            Tháng 8
+          </span>
+        </div>
+        <div className="mt-5 grid grid-cols-6 gap-1.5 sm:gap-2">
+          {days.map((day) => (
+            <p
+              key={day}
+              className="text-center text-[8px] font-bold text-[#37333d]/45 sm:text-[10px]"
+            >
+              {day}
+            </p>
+          ))}
+        </div>
+        <div className="mt-2 grid min-h-[270px] grid-cols-6 gap-1.5 sm:gap-2">
+          {days.map((day, index) => (
+            <div key={day} className="rounded-lg bg-white p-1.5 sm:p-2">
+              {index === 1 && (
+                <div className="mt-8 rounded-md bg-[#280f91] p-1.5 text-[7px] font-bold text-white sm:text-[9px]">
+                  IELTS Writing
+                  <br />
+                  14:00
+                </div>
+              )}
+              {index === 3 && (
+                <div className="mt-20 rounded-md bg-[#ffc500] p-1.5 text-[7px] font-bold text-[#201a00] sm:text-[9px]">
+                  Toán 10
+                  <br />
+                  18:00
+                </div>
+              )}
+              {index === 5 && (
+                <div className="mt-3 rounded-md bg-[#e7eefb] p-1.5 text-[7px] font-bold text-[#280f91] sm:text-[9px]">
+                  Vật lý 11
+                  <br />
+                  09:00
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </BrowserFrame>
+  );
+}
+
+export function MaterialsPreview({ className }: { className?: string }) {
+  const rows = [
+    ["Nguyễn Minh Anh", "IELTS", "Đã xuất bản"],
+    ["Trần Hoàng Nam", "Toán 10", "Bản nháp"],
+    ["Lê Gia Hân", "Vật lý 11", "Chưa tạo"],
+  ];
+  return (
+    <BrowserFrame title="Quản lý tài liệu" className={className}>
+      <div className="bg-[#f7f8fc] p-4 sm:p-6">
+        <h3 className="text-base font-extrabold text-[#280f91] sm:text-xl">
+          Tài liệu theo buổi học
+        </h3>
+        <p className="mt-1 text-[9px] text-[#37333d]/50 sm:text-xs">
+          Bài giảng và bài tập được lưu theo từng học viên
+        </p>
+        <div className="mt-5 overflow-hidden rounded-xl bg-white">
+          <div className="grid grid-cols-[1.2fr_0.8fr_0.8fr] bg-[#f1f2f6] px-3 py-3 text-[8px] font-bold text-[#37333d]/45 sm:text-[10px]">
+            <span>Học viên</span>
+            <span>Môn học</span>
+            <span>Trạng thái</span>
+          </div>
+          {rows.map(([student, subject, status], index) => (
+            <div
+              key={student}
+              className="grid grid-cols-[1.2fr_0.8fr_0.8fr] items-center border-t border-[#280f91]/7 px-3 py-4 text-[8px] sm:text-[10px]"
+            >
+              <span className="font-bold text-[#17141b]">{student}</span>
+              <span className="text-[#37333d]/60">{subject}</span>
+              <span
+                className={`w-fit rounded-md px-2 py-1 font-bold ${index === 0 ? "bg-[#447353]/10 text-[#447353]" : index === 1 ? "bg-[#ffc500]/20 text-[#7a5200]" : "bg-[#f1f2f6] text-[#37333d]/55"}`}
+              >
+                {status}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </BrowserFrame>
+  );
+}
+
+export function MessagesPreview({ className }: { className?: string }) {
+  return (
+    <BrowserFrame title="Tin nhắn lớp học" className={className}>
+      <div className="grid min-h-[320px] grid-cols-[0.42fr_0.58fr] bg-[#f7f8fc] p-3 sm:p-5">
+        <div className="rounded-l-xl border border-[#280f91]/8 bg-white p-3">
+          <p className="text-[10px] font-extrabold text-[#17141b] sm:text-sm">
+            Phòng trò chuyện
+          </p>
+          <div className="mt-4 space-y-2">
+            {["Minh Anh", "Hoàng Nam", "Gia Hân"].map((name, index) => (
+              <div
+                key={name}
+                className={`rounded-lg p-2 ${index === 0 ? "bg-[#eeeaf9]" : "bg-[#f7f8fc]"}`}
+              >
+                <p className="text-[8px] font-bold text-[#17141b] sm:text-[10px]">
+                  {name}
+                </p>
+                <p className="mt-1 truncate text-[7px] text-[#37333d]/45 sm:text-[9px]">
+                  Nội dung buổi học hôm nay...
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-col rounded-r-xl border-y border-r border-[#280f91]/8 bg-white p-3">
+          <p className="border-b border-[#280f91]/8 pb-3 text-[9px] font-extrabold text-[#17141b] sm:text-xs">
+            Nguyễn Minh Anh
+          </p>
+          <div className="flex-1 space-y-3 pt-5">
+            <div className="max-w-[80%] rounded-lg rounded-tl-none bg-[#f1f2f6] p-2 text-[7px] text-[#37333d]/65 sm:text-[9px]">
+              Em đã nhận được tài liệu rồi ạ.
+            </div>
+            <div className="ml-auto max-w-[80%] rounded-lg rounded-tr-none bg-[#280f91] p-2 text-[7px] text-white sm:text-[9px]">
+              Buổi sau mình sẽ chữa phần bài tập nhé.
+            </div>
+          </div>
+          <div className="h-8 rounded-lg border border-[#280f91]/10 bg-[#f7f8fc]" />
+        </div>
+      </div>
+    </BrowserFrame>
+  );
+}
diff --git a/apps/sale/features/about/components/AboutHero.tsx b/apps/sale/features/about/components/AboutHero.tsx
index b345b9f..2fcfcb7 100644
--- a/apps/sale/features/about/components/AboutHero.tsx
+++ b/apps/sale/features/about/components/AboutHero.tsx
@@ -1,78 +1,354 @@
-import Image from "next/image";
-import {
-  Sparkle,
-  Users,
-  ShieldCheck,
-  GraduationCap,
-} from "@phosphor-icons/react/dist/ssr";
+"use client";
+
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+
+// SVG Shapes – inline, no external images needed
+function PinwheelSVG({ className, id }: { className?: string; id?: string }) {
+  const uid = id ?? "pw";
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 120 120"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M60 60 C60 33 40 10 60 10 C80 10 60 33 60 60Z"
+        fill={`url(#${uid}1)`}
+      />
+      <path
+        d="M60 60 C87 60 110 40 110 60 C110 80 87 60 60 60Z"
+        fill={`url(#${uid}2)`}
+      />
+      <path
+        d="M60 60 C60 87 80 110 60 110 C40 110 60 87 60 60Z"
+        fill={`url(#${uid}3)`}
+      />
+      <path
+        d="M60 60 C33 60 10 80 10 60 C10 40 33 60 60 60Z"
+        fill={`url(#${uid}4)`}
+      />
+      <defs>
+        <linearGradient id={`${uid}1`} x1="0" y1="0" x2="1" y2="1">
+          <stop stopColor="#fbbf24" />
+          <stop offset="1" stopColor="#f59e0b" />
+        </linearGradient>
+        <linearGradient id={`${uid}2`} x1="0" y1="0" x2="1" y2="1">
+          <stop stopColor="#a78bfa" />
+          <stop offset="1" stopColor="#7c3aed" />
+        </linearGradient>
+        <linearGradient id={`${uid}3`} x1="0" y1="1" x2="1" y2="0">
+          <stop stopColor="#fbbf24" />
+          <stop offset="1" stopColor="#f59e0b" />
+        </linearGradient>
+        <linearGradient id={`${uid}4`} x1="1" y1="0" x2="0" y2="1">
+          <stop stopColor="#c4b5fd" />
+          <stop offset="1" stopColor="#8b5cf6" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+function LightningSVG({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 60 100"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M35 0L0 55H25L10 100L60 38H35L50 0Z" fill="#fbbf24" />
+    </svg>
+  );
+}
+
+function StarSVG({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 80 80"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M40 0 L43 37 L80 40 L43 43 L40 80 L37 43 L0 40 L37 37 Z"
+        fill="#fbbf24"
+      />
+    </svg>
+  );
+}
+
+function DotsSVG({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 60 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="10" cy="10" r="7" fill="white" fillOpacity="0.5" />
+      <circle cx="30" cy="10" r="7" fill="white" fillOpacity="0.5" />
+      <circle cx="50" cy="10" r="7" fill="white" fillOpacity="0.5" />
+    </svg>
+  );
+}
 
 export function AboutHero() {
+  const containerRef = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      const tl = gsap.timeline();
+
+      // 1) Inline pinwheel spins 2 full rotations, then the "ee" text appears
+      tl.from(".inline-pinwheel", {
+        scale: 0,
+        opacity: 0,
+        rotation: 0,
+        duration: 0.4,
+        ease: "back.out(2)",
+      })
+        .to(".inline-pinwheel", {
+          rotation: 720,
+          duration: 0.8,
+          ease: "power2.inOut",
+        })
+        // "B" appears first
+        .from(
+          ".hero-B",
+          { yPercent: 110, opacity: 0, duration: 0.6, ease: "power4.out" },
+          "<0.2",
+        )
+        // "ee" appears right after pinwheel finishes spinning
+        .from(
+          ".hero-ee",
+          { yPercent: 110, opacity: 0, duration: 0.6, ease: "power4.out" },
+          "-=0.1",
+        )
+        // inline pinwheel fades out AND collapses its width → no gap left
+        .to(
+          ".inline-pinwheel",
+          { scale: 0, opacity: 0, width: 0, duration: 0.3, ease: "power2.in" },
+          "<",
+        )
+        // Rest of the headline
+        .from(
+          [".hero-Wise", ".hero-2026"],
+          {
+            yPercent: 110,
+            opacity: 0,
+            duration: 0.7,
+            ease: "power4.out",
+            stagger: 0.12,
+          },
+          "-=0.2",
+        );
+
+      // 2) Sub-text
+      gsap.from(".hero-sub", {
+        opacity: 0,
+        y: 20,
+        duration: 0.7,
+        delay: 1.6,
+        ease: "power3.out",
+      });
+
+      // 3) Floating shapes entrance
+      gsap.from(".shape", {
+        scale: 0,
+        opacity: 0,
+        duration: 0.7,
+        ease: "back.out(1.7)",
+        stagger: 0.1,
+        delay: 0.5,
+      });
+
+      // 4) Infinite float loops — each shape unique
+      gsap.to(".shape-pinwheel", {
+        y: -18,
+        rotation: 20,
+        duration: 3.2,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+      });
+      gsap.to(".shape-lightning", {
+        y: 16,
+        rotation: -12,
+        duration: 2.6,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+        delay: 0.4,
+      });
+
+      gsap.to(".shape-star", {
+        y: 14,
+        rotation: 35,
+        duration: 2.4,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+        delay: 0.2,
+      });
+      gsap.to(".shape-dots", {
+        y: -8,
+        duration: 2.1,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+        delay: 0.7,
+      });
+      // Inline pinwheel continuous slow spin (once it's gone it doesn't matter)
+      gsap.to(".inline-pinwheel", {
+        rotation: "+=360",
+        duration: 4,
+        repeat: -1,
+        ease: "none",
+        delay: 1.5,
+      });
+
+      // 5) Cursor parallax
+      const handleMouseMove = (e: MouseEvent) => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const dx = (e.clientX - cx) / rect.width;
+        const dy = (e.clientY - cy) / rect.height;
+
+        gsap.to(".shape-pinwheel", {
+          x: dx * 22,
+          y: dy * 14,
+          duration: 0.6,
+          overwrite: "auto",
+        });
+        gsap.to(".shape-lightning", {
+          x: dx * -18,
+          y: dy * 20,
+          duration: 0.6,
+          overwrite: "auto",
+        });
+
+        gsap.to(".shape-star", {
+          x: dx * -12,
+          y: dy * 22,
+          duration: 0.6,
+          overwrite: "auto",
+        });
+        gsap.to(".shape-dots", {
+          x: dx * 14,
+          y: dy * -10,
+          duration: 0.6,
+          overwrite: "auto",
+        });
+      };
+
+      containerRef.current?.addEventListener("mousemove", handleMouseMove);
+      return () =>
+        containerRef.current?.removeEventListener("mousemove", handleMouseMove);
+    },
+    { scope: containerRef },
+  );
+
   return (
-    <section className="relative overflow-hidden bg-primary pt-24 pb-16 sm:pt-32 sm:pb-24">
-      {/* Decorative blobs */}
-      <div className="pointer-events-none absolute -top-40 -right-40 w-[600px] h-[600px] rounded-full bg-white/5 blur-3xl" />
-      <div className="pointer-events-none absolute -bottom-20 -left-20 w-96 h-96 rounded-full bg-accent/15 blur-3xl" />
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* Text */}
-          <div className="flex flex-col gap-6">
-            <span className="inline-flex self-start items-center gap-2 px-4 py-1.5 rounded-full bg-white/15 text-primary-foreground text-sm font-bold">
-              <Sparkle size={15} weight="fill" className="text-accent" />
-              Về BeeWise
-            </span>
-
-            <h1 className="font-nunito text-4xl sm:text-5xl lg:text-[3.2rem] font-black uppercase leading-tight text-primary-foreground">
-              Kết nối đúng người,{" "}
-              <br />
-              <span className="text-accent">đúng thời điểm</span>
-            </h1>
+    <section
+      ref={containerRef}
+      className="relative overflow-hidden bg-primary min-h-[92vh] lg:h-screen flex flex-col items-center justify-center"
+    >
+      {/* Ambient glow */}
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute top-1/3 left-1/4 w-[500px] h-[500px] rounded-full bg-accent/10 blur-[120px]" />
+        <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full bg-violet-500/10 blur-[100px]" />
+      </div>
+
+      <div className="relative z-10 w-full max-w-7xl mx-auto px-6 text-center">
+        {/* Big headline */}
+        <div className="relative py-10">
+          {/* ── Floating shapes ── */}
+
+          {/* Pinwheel – far left, vertically centered */}
+          <div
+            className="shape shape-pinwheel absolute pointer-events-none"
+            style={{
+              top: "50%",
+              left: "-2%",
+              transform: "translateY(-50%)",
+              width: "clamp(55px,6vw,88px)",
+            }}
+          >
+            <PinwheelSVG id="pw-outer" />
+          </div>
 
-            <p className="text-base sm:text-lg text-primary-foreground/75 leading-relaxed max-w-[52ch]">
-              BeeWise ra đời từ một câu hỏi đơn giản: tại sao tìm gia sư uy tín
-              lại khó đến vậy? Chúng tôi xây dựng nền tảng để việc học thêm trở
-              nên minh bạch, an toàn và hiệu quả hơn cho tất cả mọi người.
-            </p>
-
-            <div className="flex flex-wrap gap-4 pt-2">
-              {[
-                { icon: Users, label: "500+ Gia sư xác thực" },
-                { icon: GraduationCap, label: "2.000+ Học viên kết nối" },
-                { icon: ShieldCheck, label: "100% Hồ sơ được kiểm duyệt" },
-              ].map((stat) => {
-                const Icon = stat.icon;
-                return (
-                  <div
-                    key={stat.label}
-                    className="flex items-center gap-2.5 px-4 py-2.5 rounded-2xl bg-white/10 border border-white/15"
-                  >
-                    <Icon
-                      size={18}
-                      weight="fill"
-                      className="text-accent shrink-0"
-                    />
-                    <span className="text-sm font-bold text-primary-foreground">
-                      {stat.label}
-                    </span>
-                  </div>
-                );
-              })}
-            </div>
+          {/* Star – upper left */}
+          <div
+            className="shape shape-star absolute pointer-events-none"
+            style={{ top: "0%", left: "6%", width: "clamp(24px,3vw,44px)" }}
+          >
+            <StarSVG />
           </div>
 
-          {/* Sticker visual */}
-          <div className="hidden lg:flex items-center justify-center">
-            <div className="relative w-72 h-72">
-              <div className="absolute inset-0 rounded-full bg-accent/20 blur-2xl" />
-              <Image
-                src="/images/Sticker/E3-1.PNG"
-                alt="BeeWise mascot"
-                fill
-                className="object-contain relative z-10 drop-shadow-2xl"
-              />
-            </div>
+          {/* Dots – upper right */}
+          <div
+            className="shape shape-dots absolute pointer-events-none"
+            style={{ top: "5%", right: "4%", width: "clamp(36px,4.5vw,60px)" }}
+          >
+            <DotsSVG />
+          </div>
+
+          {/* Lightning – mid right */}
+          <div
+            className="shape shape-lightning absolute pointer-events-none"
+            style={{
+              top: "50%",
+              right: "-1%",
+              transform: "translateY(-50%)",
+              width: "clamp(26px,3.5vw,48px)",
+            }}
+          >
+            <LightningSVG />
+          </div>
+
+          {/* ── Headline ── */}
+          <div className="overflow-hidden">
+            <h1 className="font-nunito text-[14vw] sm:text-[12vw] lg:text-[11vw] xl:text-[9.5vw] font-black uppercase leading-none tracking-tighter inline-flex flex-wrap items-center justify-center gap-x-[0.03em]">
+              <span className="hero-B inline-block text-primary-foreground">
+                B
+              </span>
+
+              <span
+                className="inline-pinwheel inline-block"
+                style={{
+                  width: "0.55em",
+                  height: "0.9em",
+                  verticalAlign: "middle",
+                  marginBottom: "0.05em",
+                }}
+              >
+                <PinwheelSVG id="pw-inline" className="w-full h-full" />
+              </span>
+
+              <span className="hero-ee inline-block text-primary-foreground">
+                ee
+              </span>
+
+              <span className="hero-Wise inline-block text-accent">Wise</span>
+
+              <span className="inline-block" style={{ width: "0.25em" }} />
+
+              <span className="hero-2026 inline-block text-primary-foreground/90">
+                2026
+              </span>
+            </h1>
           </div>
         </div>
+
+        <p className="hero-sub mt-4 text-sm text-primary-foreground/50 tracking-widest uppercase">
+          Về BeeWise
+        </p>
       </div>
     </section>
   );
diff --git a/apps/sale/features/about/components/AboutMission.tsx b/apps/sale/features/about/components/AboutMission.tsx
index 649f94d..bb4e2da 100644
--- a/apps/sale/features/about/components/AboutMission.tsx
+++ b/apps/sale/features/about/components/AboutMission.tsx
@@ -1,3 +1,10 @@
+"use client";
+
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { Merienda } from "next/font/google";
 import {
   Eye,
   Rocket,
@@ -5,105 +12,374 @@ import {
   ShieldCheck,
   Handshake,
   Lightbulb,
-} from "@phosphor-icons/react/dist/ssr";
+  Sparkles,
+} from "lucide-react";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+const meriendaFont = Merienda({
+  subsets: ["vietnamese", "latin"],
+  weight: ["400", "700"],
+  display: "swap",
+});
+
+// ── Floating Decorative SVGs ────────────────────────────────────────────────
+
+function FloatingSparkle({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 40 40" fill="none">
+      <path
+        d="M20 0 L22 17.5 L40 20 L22 22.5 L20 40 L18 22.5 L0 20 L18 17.5 Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function FloatingRing({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 50 50" fill="none">
+      <circle
+        cx="25"
+        cy="25"
+        r="20"
+        stroke="currentColor"
+        strokeWidth="4"
+        strokeDasharray="6 6"
+      />
+    </svg>
+  );
+}
+
+// ── Mission & Values Data ───────────────────────────────────────────────────
 
 const MISSION_VALUES = [
   {
     id: "transparency",
+    num: "01",
     icon: Eye,
-    title: "Minh bạch",
-    desc: "Mọi thông tin về gia sư, học phí và quy trình đều được công khai rõ ràng. Không có chi phí ẩn, không có bất ngờ.",
-    color: "text-blue-600 bg-blue-500/10 border-blue-200",
+    title: "Minh Bạch",
+    quote: "Rõ ràng từ đầu, an tâm đồng hành.",
+    desc: "Mọi thông tin về năng lực gia sư, học phí và lộ trình đều được công khai và bảo chứng 100%.",
+    accentColor: "from-blue-500/20 to-cyan-500/5",
+    iconColor: "text-blue-600 bg-blue-500/10 border-blue-500/20",
+    themeHex: "#3b82f6",
   },
   {
     id: "quality",
+    num: "02",
     icon: ShieldCheck,
-    title: "Chất lượng",
-    desc: "Mỗi gia sư đều trải qua quy trình xác thực năng lực nghiêm ngặt trước khi được kết nối với học viên.",
-    color: "text-emerald-600 bg-emerald-500/10 border-emerald-200",
+    title: "Chất Lượng",
+    quote: "Xác thực tận tâm, kiểm duyệt nghiêm ngặt.",
+    desc: "Mỗi gia sư trên nền tảng đều trải qua quy trình đánh giá chuẩn mực để đảm bảo hiệu quả cho từng buổi học.",
+    accentColor: "from-emerald-500/20 to-teal-500/5",
+    iconColor: "text-emerald-600 bg-emerald-500/10 border-emerald-500/20",
+    themeHex: "#10b981",
   },
   {
     id: "trust",
+    num: "03",
     icon: Handshake,
-    title: "Tin tưởng",
-    desc: "Chúng tôi đứng ra làm cầu nối đáng tin cậy, bảo vệ quyền lợi bình đẳng cho cả gia sư lẫn học viên.",
-    color: "text-violet-600 bg-violet-500/10 border-violet-200",
+    title: "Tin Tưởng",
+    quote: "Cầu nối công bằng và vững chãi.",
+    desc: "Bảo vệ tối đa quyền lợi bình đẳng của cả người dạy lẫn người học với cơ chế kết nối an toàn và minh bạch.",
+    accentColor: "from-violet-500/20 to-purple-500/5",
+    iconColor: "text-violet-600 bg-violet-500/10 border-violet-500/20",
+    themeHex: "#8b5cf6",
   },
   {
     id: "impact",
+    num: "04",
     icon: Rocket,
-    title: "Tác động thực",
-    desc: "Mỗi lớp học kết nối đúng chỗ là một bước tiến trong hành trình học tập. Đó là lý do BeeWise tồn tại.",
-    color: "text-amber-600 bg-amber-500/10 border-amber-200",
+    title: "Tác Động Thực",
+    quote: "Mỗi bước tiến là một cột mốc.",
+    desc: "Chúng tôi đo lường thành công bằng sự tiến bộ thực chất và niềm đam mê học hỏi được thắp sáng của học viên.",
+    accentColor: "from-amber-500/20 to-orange-500/5",
+    iconColor: "text-amber-600 bg-amber-500/10 border-amber-500/20",
+    themeHex: "#f59e0b",
   },
   {
     id: "community",
+    num: "05",
     icon: Heart,
-    title: "Cộng đồng",
-    desc: "BeeWise không chỉ là nền tảng — đây là cộng đồng của những người học và người dạy có trách nhiệm.",
-    color: "text-rose-600 bg-rose-500/10 border-rose-200",
+    title: "Cộng Đồng",
+    quote: "Gắn kết vì một nền giáo dục sẻ chia.",
+    desc: "BeeWise không chỉ là nền tảng, mà là ngôi nhà chung của những người học tập có trách nhiệm và khát khao phát triển.",
+    accentColor: "from-rose-500/20 to-pink-500/5",
+    iconColor: "text-rose-600 bg-rose-500/10 border-rose-500/20",
+    themeHex: "#f43f5e",
   },
   {
     id: "innovation",
+    num: "06",
     icon: Lightbulb,
-    title: "Đổi mới",
-    desc: "Ứng dụng AI không phải để thay thế con người, mà để giúp mỗi người tìm được đúng người đồng hành.",
-    color: "text-teal-600 bg-teal-500/10 border-teal-200",
+    title: "Đổi Mới",
+    quote: "Công nghệ phụng sự con người.",
+    desc: "Ứng dụng AI thông minh để tối ưu hóa quá trình tìm kiếm, giúp bạn tìm được người đồng hành lý tưởng nhanh nhất.",
+    accentColor: "from-teal-500/20 to-cyan-500/5",
+    iconColor: "text-teal-600 bg-teal-500/10 border-teal-500/20",
+    themeHex: "#06b6d4",
   },
 ];
 
 export function AboutMission() {
+  const containerRef = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      // Refresh ScrollTrigger to ensure accurate trigger offsets
+      ScrollTrigger.refresh();
+
+      // 1. Mission Header Animations
+      gsap.from(".mission-badge", {
+        y: -20,
+        opacity: 0,
+        duration: 0.6,
+        ease: "power3.out",
+        scrollTrigger: {
+          trigger: ".mission-header",
+          start: "top 90%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      gsap.from(".mission-title", {
+        y: 30,
+        opacity: 0,
+        duration: 0.8,
+        ease: "power3.out",
+        delay: 0.1,
+        scrollTrigger: {
+          trigger: ".mission-header",
+          start: "top 90%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      gsap.from(".mission-quote-box", {
+        scale: 0.96,
+        opacity: 0,
+        y: 25,
+        duration: 0.8,
+        ease: "power3.out",
+        delay: 0.15,
+        scrollTrigger: {
+          trigger: ".mission-quote-box",
+          start: "top 90%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      // 2. Core Values Subtitle
+      gsap.from(".values-heading", {
+        y: 25,
+        opacity: 0,
+        duration: 0.7,
+        ease: "power3.out",
+        scrollTrigger: {
+          trigger: ".values-heading",
+          start: "top 90%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      // 3. Value Cards Stagger (robust trigger on the grid container)
+      gsap.from(".value-card", {
+        y: 40,
+        opacity: 0,
+        duration: 0.7,
+        ease: "power3.out",
+        stagger: 0.1,
+        clearProps: "transform,opacity",
+        scrollTrigger: {
+          trigger: ".values-grid",
+          start: "top 90%",
+          toggleActions: "play none none none",
+        },
+      });
+
+      // 4. Floating ambient SVGs
+      gsap.to(".mission-sparkle-1", {
+        rotation: 360,
+        y: -15,
+        duration: 6,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+      });
+
+      gsap.to(".mission-sparkle-2", {
+        rotation: -360,
+        y: 12,
+        duration: 5,
+        repeat: -1,
+        yoyo: true,
+        ease: "sine.inOut",
+      });
+
+      gsap.to(".mission-ring", {
+        rotation: 180,
+        duration: 16,
+        repeat: -1,
+        ease: "none",
+      });
+
+      // 5. Mouse parallax on subtle accents
+      const handleMouseMove = (e: MouseEvent) => {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+        const dx = (e.clientX - (rect.left + rect.width / 2)) / rect.width;
+        const dy = (e.clientY - (rect.top + rect.height / 2)) / rect.height;
+
+        gsap.to(".mission-sparkle-1", {
+          x: dx * 25,
+          y: dy * 20,
+          duration: 0.8,
+          overwrite: "auto",
+        });
+        gsap.to(".mission-sparkle-2", {
+          x: dx * -20,
+          y: dy * -15,
+          duration: 0.8,
+          overwrite: "auto",
+        });
+      };
+
+      containerRef.current?.addEventListener("mousemove", handleMouseMove);
+      return () =>
+        containerRef.current?.removeEventListener("mousemove", handleMouseMove);
+    },
+    { scope: containerRef },
+  );
+
   return (
-    <section className="py-16 sm:py-24 bg-background" id="about-mission">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Mission Statement */}
-        <div className="max-w-3xl mx-auto text-center mb-16 sm:mb-20">
-          <span className="inline-flex items-center px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold mb-4">
-            Sứ mệnh
-          </span>
-          <h2 className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-primary leading-tight font-nunito mb-6">
-            Chúng tôi muốn làm gì?
+    <section
+      ref={containerRef}
+      className="py-20 sm:py-28 bg-background relative overflow-hidden"
+      id="about-mission"
+    >
+      {/* Ambient background glow */}
+      <div className="pointer-events-none absolute inset-0 -z-10">
+        <div className="absolute top-1/4 left-1/2 -translate-x-1/2 w-[700px] h-[700px] rounded-full bg-accent/5 blur-[160px]" />
+        <div className="absolute bottom-10 left-10 w-[450px] h-[450px] rounded-full bg-primary/5 blur-[130px]" />
+      </div>
+
+      {/* Floating SVGs */}
+      <FloatingSparkle className="mission-sparkle-1 absolute top-20 right-12 w-8 h-8 text-accent/35 pointer-events-none" />
+      <FloatingSparkle className="mission-sparkle-2 absolute bottom-28 left-8 w-6 h-6 text-primary/25 pointer-events-none" />
+      <FloatingRing className="mission-ring absolute top-1/2 right-6 w-12 h-12 text-foreground/10 pointer-events-none" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Section Header */}
+        <div className="mission-header max-w-3xl mx-auto text-center mb-12 sm:mb-16">
+          <div className="mission-badge inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 text-primary text-xs sm:text-sm font-bold uppercase tracking-wider mb-4 border border-primary/15">
+            <Sparkles className="w-3.5 h-3.5 text-accent animate-pulse" />
+            Tầm Nhìn & Sứ Mệnh
+          </div>
+
+          <h2 className="mission-title text-4xl sm:text-5xl lg:text-[3.2rem] font-black uppercase text-primary leading-tight font-nunito tracking-tight">
+            Sứ mệnh của{" "}
+            <span className="text-accent relative inline-block">
+              BeeWise
+              <svg
+                className="absolute -bottom-2 left-0 w-full text-accent/40"
+                viewBox="0 0 100 8"
+                fill="none"
+                preserveAspectRatio="none"
+              >
+                <path
+                  d="M0 4 C 30 0, 70 8, 100 4"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                />
+              </svg>
+            </span>
           </h2>
-          <p className="text-foreground/65 text-base sm:text-xl leading-relaxed">
-            BeeWise hướng đến việc xây dựng một hệ sinh thái giáo dục minh bạch,
-            nơi mọi học viên đều có thể tìm được gia sư phù hợp và mọi gia sư
-            tâm huyết đều được ghi nhận xứng đáng — không phân biệt khu vực hay
-            điều kiện kinh tế.
+        </div>
+
+        {/* Featured Big Mission Statement Quote */}
+        <div className="mission-quote-box max-w-4xl mx-auto mb-20 p-8 sm:p-12 rounded-[2.5rem] bg-gradient-to-br from-card via-card to-card/60 border border-border/60 shadow-[0_20px_50px_rgba(0,0,0,0.05)] relative overflow-hidden text-center backdrop-blur-xl">
+          {/* Subtle Glow inside quote box */}
+          <div className="absolute -top-20 -right-20 w-52 h-52 bg-accent/10 rounded-full blur-3xl pointer-events-none" />
+          <div className="absolute -bottom-20 -left-20 w-52 h-52 bg-primary/10 rounded-full blur-3xl pointer-events-none" />
+
+          <p
+            className={`${meriendaFont.className} text-xl sm:text-2xl lg:text-3xl text-foreground/85 leading-relaxed sm:leading-loose font-normal tracking-wide`}
+          >
+            “BeeWise hướng đến việc xây dựng một hệ sinh thái giáo dục minh
+            bạch, nơi mọi học viên đều tìm được người thầy truyền cảm hứng, và
+            mọi gia sư tâm huyết đều được tôn vinh xứng đáng.”
           </p>
+
+          <div className="mt-6 flex items-center justify-center gap-3">
+            <div className="h-0.5 w-12 bg-accent/60 rounded-full" />
+            <span className="text-xs uppercase tracking-[0.25em] font-bold text-foreground/45 font-mono">
+              Cam kết từ BeeWise
+            </span>
+            <div className="h-0.5 w-12 bg-accent/60 rounded-full" />
+          </div>
         </div>
 
-        {/* Values Grid */}
-        <div>
-          <h3 className="text-center text-xl sm:text-2xl font-bold text-foreground/70 font-nunito mb-10">
-            Những giá trị cốt lõi
+        {/* Core Values Sub-headline */}
+        <div className="values-heading text-center mb-12">
+          <p className="font-mono text-xs uppercase tracking-[0.25em] text-primary/60 mb-2">
+            Nền tảng phát triển
+          </p>
+          <h3 className="text-2xl sm:text-3xl lg:text-4xl font-black uppercase text-foreground font-nunito tracking-tight">
+            Giá trị cốt lõi
           </h3>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
-            {MISSION_VALUES.map((v) => {
-              const Icon = v.icon;
-              return (
+        </div>
+
+        {/* 6 Core Value Cards Grid */}
+        <div className="values-grid grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {MISSION_VALUES.map((v) => {
+            const Icon = v.icon;
+            return (
+              <div
+                key={v.id}
+                className="value-card group relative p-8 rounded-3xl bg-card border border-border/60 shadow-sm hover:shadow-2xl hover:border-primary/25 hover:-translate-y-1.5 transition-all duration-300 overflow-hidden flex flex-col justify-between"
+              >
+                {/* Background Card Hover Aura */}
                 <div
-                  key={v.id}
-                  className="group p-6 rounded-3xl bg-card border border-border/80 shadow-xs hover:shadow-xl hover:border-primary/20 hover:-translate-y-1 transition-all duration-300"
-                >
-                  <div className="flex items-start gap-4">
+                  className={`absolute inset-0 bg-gradient-to-br ${v.accentColor} opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none`}
+                />
+
+                {/* Top: Icon + Number Badge */}
+                <div>
+                  <div className="flex items-center justify-between mb-6">
                     <div
-                      className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 ${v.color} transition-transform duration-300 group-hover:scale-110`}
+                      className={`w-14 h-14 rounded-2xl flex items-center justify-center shrink-0 ${v.iconColor} shadow-inner transition-transform duration-300 group-hover:scale-110 group-hover:rotate-3`}
                     >
-                      <Icon size={24} weight="fill" />
-                    </div>
-                    <div>
-                      <h4 className="font-bold text-lg text-foreground font-nunito leading-snug mb-1.5">
-                        {v.title}
-                      </h4>
-                      <p className="text-sm text-foreground/65 leading-relaxed">
-                        {v.desc}
-                      </p>
+                      <Icon className="w-7 h-7" />
                     </div>
+                    <span className="font-nunito font-black text-2xl text-foreground/15 group-hover:text-primary/30 transition-colors">
+                      {v.num}
+                    </span>
                   </div>
+
+                  {/* Title */}
+                  <h4 className="font-nunito font-black text-2xl text-foreground uppercase tracking-tight mb-2">
+                    {v.title}
+                  </h4>
+
+                  {/* Handwritten mini quote in Merienda */}
+                  <p
+                    className={` font-nunito text-base sm:text-lg text-foreground/75 leading-snug mb-4 font-normal`}
+                  >
+                    {v.quote}
+                  </p>
                 </div>
-              );
-            })}
-          </div>
+
+                {/* Description */}
+                <p className="text-sm font-google-sans text-foreground/60 leading-relaxed relative z-10 border-t border-border/40 pt-4">
+                  {v.desc}
+                </p>
+              </div>
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/apps/sale/features/about/components/AboutTeam.tsx b/apps/sale/features/about/components/AboutTeam.tsx
index 6dd133c..6a41839 100644
--- a/apps/sale/features/about/components/AboutTeam.tsx
+++ b/apps/sale/features/about/components/AboutTeam.tsx
@@ -1,125 +1,449 @@
+"use client";
+
+import { useRef } from "react";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
 import Image from "next/image";
-import { LinkedinLogo, GithubLogo } from "@phosphor-icons/react/dist/ssr";
+import { Merienda } from "next/font/google";
+
+gsap.registerPlugin(ScrollTrigger);
+
+// Google Font with Vietnamese cursive/handwriting support
+const meriendaFont = Merienda({
+  subsets: ["vietnamese", "latin"],
+  weight: "400",
+  display: "swap",
+});
+
+// ── Role specific & GSAP styled SVG Elements ───────────────────────────────
+
+function SparkleSVG({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 36 36"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18 0L19.8 13.2L36 18L19.8 22.8L18 36L16.2 22.8L0 18L16.2 13.2L18 0Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function FloatingHeartSVG({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+    </svg>
+  );
+}
+
+function CodeBracketSVG({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 40 40"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="3"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M14 12L6 20L14 28" />
+      <path d="M26 12L34 20L26 28" />
+      <path d="M22 8L18 32" strokeWidth="2.5" />
+    </svg>
+  );
+}
+
+function PaperPlaneSVG({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
+    </svg>
+  );
+}
+
+function LightningSVG({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M7 2v11h3v9l7-12h-4l4-8z" />
+    </svg>
+  );
+}
+
+function CloudSVG({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+      <path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" />
+    </svg>
+  );
+}
+
+function PinwheelSVG({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 120 120" fill="none">
+      <path d="M60 60 C60 33 40 10 60 10 C80 10 60 33 60 60Z" fill="#fbbf24" />
+      <path
+        d="M60 60 C87 60 110 40 110 60 C110 80 87 60 60 60Z"
+        fill="#a78bfa"
+      />
+      <path
+        d="M60 60 C60 87 80 110 60 110 C40 110 60 87 60 60Z"
+        fill="#f59e0b"
+      />
+      <path d="M60 60 C33 60 10 80 10 60 C10 40 33 60 60 60Z" fill="#8b5cf6" />
+    </svg>
+  );
+}
+
+// ── Team data ───────────────────────────────────────────────────────────────
 
-const TEAM_MEMBERS = [
+const TEAM = [
   {
-    id: "1",
-    name: "Nguyễn Văn A",
-    role: "Co-founder & Product Lead",
-    avatar: "VA",
-    avatarBg: "bg-primary",
-    bio: "Sinh viên ĐH FPT, đam mê EdTech và trải nghiệm người dùng. Chịu trách nhiệm về định hướng sản phẩm và trải nghiệm người dùng.",
-    linkedin: "#",
-    github: "#",
+    id: "tuyet-huong",
+    name: "Tuyết Hương",
+    role: "Founder Dự Án",
+    image: "https://res.cloudinary.com/xcrm6ykz/image/upload/v1787291884/1.png",
+    story:
+      "“Mình bắt đầu BeeWise từ một trăn trở rất đỗi tự nhiên: Tại sao việc tìm kiếm một người thầy tận tâm và phù hợp lại gian nan đến thế? Mình tin rằng, khi trao đi sự chân thành và giải pháp đủ tốt, việc học sẽ trở thành hành trình tràn đầy cảm hứng.”",
+    side: "left",
+    number: "01",
+    themeColor: "#f59e0b", // Amber
+    glowColor: "rgba(245, 158, 11, 0.18)",
+    badgeBg: "bg-amber-500/10 text-amber-600 border-amber-500/20",
+    iconElement: <PinwheelSVG className="w-12 h-12" />,
   },
   {
-    id: "2",
-    name: "Trần Thị B",
-    role: "Co-founder & Tech Lead",
-    avatar: "TB",
-    avatarBg: "bg-violet-600",
-    bio: "Fullstack developer với niềm đam mê xây dựng hệ thống mở rộng. Dẫn dắt kỹ thuật từ backend đến hạ tầng cloud.",
-    linkedin: "#",
-    github: "#",
+    id: "nhat-huy",
+    name: "Nhất Huy",
+    role: "Backend Engineer",
+    image: "https://res.cloudinary.com/xcrm6ykz/image/upload/v1787291883/2.png",
+    story:
+      "“Mỗi dòng mã và hệ cơ sở dữ liệu không đơn thuần là những thuật toán khô khan. Với mình, backend vững chãi chính là lời cam kết âm thầm cho mọi kết nối của học viên và gia sư được an toàn, liền mạch và tức thì.”",
+    side: "right",
+    number: "02",
+    themeColor: "#3b82f6", // Blue
+    glowColor: "rgba(59, 130, 246, 0.18)",
+    badgeBg: "bg-blue-500/10 text-blue-600 border-blue-500/20",
+    iconElement: <CodeBracketSVG className="w-10 h-10 text-blue-500" />,
   },
   {
-    id: "3",
-    name: "Lê Minh C",
-    role: "AI & Data Engineer",
-    avatar: "MC",
-    avatarBg: "bg-emerald-600",
-    bio: "Chuyên sâu về Machine Learning và xử lý ngôn ngữ tự nhiên. Xây dựng hệ thống gợi ý gia sư thông minh của BeeWise.",
-    linkedin: "#",
-    github: "#",
+    id: "phi-yen",
+    name: "Phi Yến",
+    role: "Marketing Specialist",
+    image: "https://res.cloudinary.com/xcrm6ykz/image/upload/v1787291884/3.png",
+    story:
+      "“Kể câu chuyện về giáo dục cần rất nhiều sự thấu cảm. Mình ở đây để lan tỏa những giá trị thật của BeeWise đến từng góc nhỏ nơi các bạn trẻ đang tìm kiếm cơ hội học tập và bứt phá giới hạn bản thân.”",
+    side: "left",
+    number: "03",
+    themeColor: "#ec4899", // Pink/Rose
+    glowColor: "rgba(236, 72, 153, 0.18)",
+    badgeBg: "bg-pink-500/10 text-pink-600 border-pink-500/20",
+    iconElement: <FloatingHeartSVG className="w-10 h-10 text-pink-500" />,
   },
   {
-    id: "4",
-    name: "Phạm Thu D",
-    role: "Design & Brand",
-    avatar: "TD",
-    avatarBg: "bg-rose-500",
-    bio: "UI/UX Designer với tư duy thiết kế lấy người dùng làm trung tâm. Đảm bảo mỗi màn hình đều đẹp, dễ dùng và có cảm xúc.",
-    linkedin: "#",
-    github: "#",
+    id: "chi-vy",
+    name: "Chí Vỹ",
+    role: "Frontend Engineer",
+    image: "https://res.cloudinary.com/xcrm6ykz/image/upload/v1787291887/4.png",
+    story:
+      "“Giao diện chính là nơi cảm xúc bắt đầu. Từng chuyển động mượt mà, từng điểm chạm tinh tế mà mình tỉ mỉ xây dựng đều hướng tới một mong muốn giản đơn: bạn sẽ luôn cảm thấy thoải mái và tự tin nhất khi đồng hành cùng BeeWise.”",
+    side: "right",
+    number: "04",
+    themeColor: "#8b5cf6", // Violet
+    glowColor: "rgba(139, 92, 246, 0.18)",
+    badgeBg: "bg-violet-500/10 text-violet-600 border-violet-500/20",
+    iconElement: <SparkleSVG className="w-10 h-10 text-violet-500" />,
   },
-];
+  {
+    id: "thien-nhan",
+    name: "Thiện Nhân",
+    role: "Backend Engineer",
+    image: "https://res.cloudinary.com/xcrm6ykz/image/upload/v1787291883/5.png",
+    story:
+      "“Sự ổn định và thông minh trong từng luồng nghiệp vụ là ưu tiên cao nhất của mình. Xây dựng logic chặt chẽ để bất kỳ ai, ở bất cứ đâu, cũng đều có thể chạm tới tri thức một cách thuận tiện và minh bạch nhất.”",
+    side: "left",
+    number: "05",
+    themeColor: "#10b981", // Emerald
+    glowColor: "rgba(16, 185, 129, 0.18)",
+    badgeBg: "bg-emerald-500/10 text-emerald-600 border-emerald-500/20",
+    iconElement: <PaperPlaneSVG className="w-10 h-10 text-emerald-500" />,
+  },
+  {
+    id: "minh-huan",
+    name: "Minh Huân",
+    role: "DevOps Engineer",
+    image: "https://res.cloudinary.com/xcrm6ykz/image/upload/v1787291883/6.png",
+    story:
+      "“Hệ thống tựa như một dòng chảy không ngừng nghỉ. Mình giữ cho từng server luôn sống khỏe, pipeline tự động và mượt mà, để nhịp cầu tri thức của BeeWise luôn thông suốt trong từng giây phút.”",
+    side: "right",
+    number: "06",
+    themeColor: "#06b6d4", // Cyan
+    glowColor: "rgba(6, 182, 212, 0.18)",
+    badgeBg: "bg-cyan-500/10 text-cyan-600 border-cyan-500/20",
+    iconElement: <CloudSVG className="w-10 h-10 text-cyan-500" />,
+  },
+] as const;
 
 export function AboutTeam() {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useGSAP(
+    () => {
+      TEAM.forEach((member) => {
+        const block = containerRef.current?.querySelector(
+          `#member-screen-${member.id}`,
+        );
+        if (!block) return;
+
+        const charImg = block.querySelector(".character-image");
+        const textContainer = block.querySelector(".character-text-box");
+        const storyElement = block.querySelector(".character-story-text");
+        const numberBg = block.querySelector(".character-number-bg");
+        const decorSvg = block.querySelector(".character-decor-svg");
+
+        const fromDirection = member.side === "left" ? -280 : 280;
+
+        // 1. Character enters from outside screen
+        gsap.from(charImg, {
+          x: fromDirection,
+          opacity: 0,
+          scale: 0.85,
+          duration: 1.2,
+          ease: "power3.out",
+          scrollTrigger: {
+            trigger: block,
+            start: "top 70%",
+            toggleActions: "play none none none",
+          },
+        });
+
+        // 2. Big background number subtle scale & fade
+        if (numberBg) {
+          gsap.from(numberBg, {
+            scale: 0.6,
+            opacity: 0,
+            duration: 1.4,
+            ease: "power2.out",
+            scrollTrigger: {
+              trigger: block,
+              start: "top 75%",
+              toggleActions: "play none none none",
+            },
+          });
+        }
+
+        // 3. Text container slides in from opposite direction
+        gsap.from(textContainer, {
+          x: -fromDirection * 0.5,
+          opacity: 0,
+          y: 30,
+          duration: 1,
+          ease: "power3.out",
+          delay: 0.2,
+          scrollTrigger: {
+            trigger: block,
+            start: "top 70%",
+            toggleActions: "play none none none",
+          },
+        });
+
+        // 4. Decor SVG floating animation
+        if (decorSvg) {
+          gsap.to(decorSvg, {
+            y: -20,
+            rotation: member.side === "left" ? 18 : -18,
+            duration: 2.8,
+            repeat: -1,
+            yoyo: true,
+            ease: "sine.inOut",
+          });
+        }
+
+        // 5. Typewriter handwritten text effect
+        const fullStory = storyElement?.getAttribute("data-story") ?? "";
+        if (storyElement && fullStory) {
+          storyElement.textContent = "";
+          let charIndex = 0;
+          let hasTyped = false;
+
+          ScrollTrigger.create({
+            trigger: block,
+            start: "top 65%",
+            onEnter: () => {
+              if (hasTyped) return;
+              hasTyped = true;
+              const typeInterval = setInterval(() => {
+                if (charIndex < fullStory.length) {
+                  storyElement.textContent = fullStory.slice(0, charIndex + 1);
+                  charIndex++;
+                } else {
+                  clearInterval(typeInterval);
+                }
+              }, 16);
+            },
+            once: true,
+          });
+        }
+      });
+    },
+    { scope: containerRef },
+  );
+
   return (
-    <section
-      className="py-16 sm:py-24 bg-muted/40 relative overflow-hidden"
+    <div
+      ref={containerRef}
+      className="relative bg-background overflow-hidden"
       id="about-team"
     >
-      {/* Ambient */}
-      <div className="pointer-events-none absolute top-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <div className="text-center mb-12 sm:mb-16 flex flex-col items-center gap-3">
-          <span className="inline-flex items-center px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold">
-            Đội ngũ sáng lập
+      {/* Intro Header */}
+      <div className="pt-24 pb-12 sm:pt-32 sm:pb-16 text-center max-w-4xl mx-auto px-4">
+        <span className="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-primary/10 text-primary font-bold text-sm tracking-wide mb-4">
+          <LightningSVG className="w-4 h-4 text-accent" />
+          Đội Ngũ Sáng Lập
+        </span>
+        <h2 className="font-nunito text-4xl sm:text-5xl lg:text-6xl font-black uppercase text-primary leading-tight tracking-tight">
+          Hành trình của những <br className="hidden sm:inline" />
+          <span className="text-accent relative inline-block">
+            người kiến tạo
+            <svg
+              className="absolute -bottom-2 left-0 w-full text-accent/40"
+              viewBox="0 0 100 8"
+              fill="none"
+              preserveAspectRatio="none"
+            >
+              <path
+                d="M0 4 C 30 0, 70 8, 100 4"
+                stroke="currentColor"
+                strokeWidth="3"
+                strokeLinecap="round"
+              />
+            </svg>
           </span>
-          <h2 className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-primary leading-tight font-nunito">
-            Những người xây dựng <span className="text-accent">BeeWise</span>
-          </h2>
-          <p className="text-foreground/65 text-base sm:text-lg max-w-xl leading-relaxed">
-            Một nhóm sinh viên FPT với cùng mục tiêu: làm cho việc học thêm trở
-            nên minh bạch và hiệu quả hơn.
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
-          {TEAM_MEMBERS.map((member) => (
-            <div
+        </h2>
+        <p className="mt-6 text-foreground/60 text-lg sm:text-xl leading-relaxed max-w-2xl mx-auto">
+          Mỗi thành viên là một câu chuyện, cùng chung một niềm tin bền bỉ về
+          một nền giáo dục minh bạch và tràn đầy cảm hứng.
+        </p>
+      </div>
+
+      {/* 6 Fullscreen Storytelling Blocks */}
+      <div className="flex flex-col">
+        {TEAM.map((member, index) => {
+          const isRight = member.side === "right";
+
+          return (
+            <section
               key={member.id}
-              className="group flex flex-col gap-5 p-6 rounded-3xl bg-card border border-border/80 shadow-xs hover:shadow-xl hover:border-primary/20 hover:-translate-y-1 transition-all duration-300"
+              id={`member-screen-${member.id}`}
+              className="min-h-[100dvh] flex items-center justify-center relative py-12 sm:py-20 px-4 sm:px-8 lg:px-16 overflow-hidden border-b border-border/20"
             >
-              {/* Avatar */}
-              <div className="flex items-center gap-4">
+              {/* Ambient Glow Background for character */}
+              <div
+                className="pointer-events-none absolute -z-10 rounded-full blur-[140px] opacity-70"
+                style={{
+                  backgroundColor: member.glowColor,
+                  width: "clamp(300px, 45vw, 650px)",
+                  height: "clamp(300px, 45vw, 650px)",
+                  top: "50%",
+                  left: isRight ? "70%" : "30%",
+                  transform: "translate(-50%, -50%)",
+                }}
+              />
+
+              {/* Huge Background Number */}
+              <div
+                className="character-number-bg pointer-events-none select-none absolute font-nunito font-black text-[22vw] leading-none text-foreground/[0.03] -z-10"
+                style={{
+                  top: "45%",
+                  left: isRight ? "10%" : "65%",
+                  transform: "translate(-50%, -50%)",
+                }}
+              >
+                {member.number}
+              </div>
+
+              {/* Main 2-Column Content Container */}
+              <div className="max-w-7xl w-full mx-auto grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-16 items-center">
+                {/* ── Character Visual Column (NO BORDER, BORDERLESS FREE FIGURE) ── */}
                 <div
-                  className={`w-14 h-14 rounded-2xl ${member.avatarBg} flex items-center justify-center text-white font-black text-base shrink-0 shadow-md`}
+                  className={`character-image lg:col-span-6 flex justify-center items-end relative ${
+                    isRight ? "lg:order-2" : "lg:order-1"
+                  }`}
                 >
-                  {member.avatar}
-                </div>
-                <div>
-                  <p className="font-bold text-base text-foreground font-nunito leading-tight">
-                    {member.name}
-                  </p>
-                  <p className="text-xs text-primary font-semibold mt-0.5">
-                    {member.role}
-                  </p>
+                  {/* Floating Themed Decorative Icon */}
+                  <div
+                    className={`character-decor-svg absolute z-20 pointer-events-none drop-shadow-xl ${
+                      isRight ? "-top-6 -left-6" : "-top-6 -right-6"
+                    }`}
+                  >
+                    {member.iconElement}
+                  </div>
+
+                  {/* Character Illustration without any border/card container */}
+                  <div className="relative w-full max-w-[340px] sm:max-w-[420px] md:max-w-[500px] lg:max-w-[560px] xl:max-w-[620px] aspect-[4/5] flex items-end justify-center">
+                    <Image
+                      src={member.image}
+                      alt={member.name}
+                      fill
+                      priority={index === 0}
+                      className="object-contain object-bottom drop-shadow-[0_20px_35px_rgba(0,0,0,0.15)] filter"
+                      sizes="(max-width: 640px) 340px, (max-width: 1024px) 480px, 620px"
+                    />
+                  </div>
                 </div>
-              </div>
 
-              {/* Bio */}
-              <p className="text-sm text-foreground/65 leading-relaxed flex-1">
-                {member.bio}
-              </p>
-
-              {/* Social links */}
-              <div className="flex items-center gap-3 pt-3 border-t border-border/60">
-                <a
-                  href={member.linkedin}
-                  className="flex items-center gap-1.5 text-xs text-foreground/55 hover:text-primary transition-colors font-medium"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <LinkedinLogo size={16} weight="fill" />
-                  LinkedIn
-                </a>
-                <a
-                  href={member.github}
-                  className="flex items-center gap-1.5 text-xs text-foreground/55 hover:text-foreground transition-colors font-medium"
-                  target="_blank"
-                  rel="noopener noreferrer"
+                {/* ── Story & Typography Column (HANDWRITING STYLE) ── */}
+                <div
+                  className={`character-text-box lg:col-span-6 flex flex-col gap-6 ${
+                    isRight
+                      ? "lg:order-1 lg:text-right lg:items-end"
+                      : "lg:order-2 lg:text-left lg:items-start"
+                  }`}
                 >
-                  <GithubLogo size={16} weight="fill" />
-                  GitHub
-                </a>
+                  {/* Role Badge */}
+                  <div className="inline-flex items-center gap-2">
+                    <span
+                      className={`px-4 py-1.5 rounded-full text-xs sm:text-sm font-bold uppercase tracking-wider border ${member.badgeBg}`}
+                    >
+                      {member.role}
+                    </span>
+                  </div>
+
+                  {/* Character Name */}
+                  <h3 className="font-nunito text-4xl sm:text-5xl lg:text-6xl font-black uppercase text-foreground tracking-tight leading-none">
+                    {member.name}
+                  </h3>
+
+                  {/* Decorative underline */}
+                  <div
+                    className="h-1.5 w-24 rounded-full"
+                    style={{ backgroundColor: member.themeColor }}
+                  />
+
+                  {/* Story Text in Vietnamese Handwriting Style (Merienda) */}
+                  <div className="mt-2 max-w-xl">
+                    <p
+                      data-story={member.story}
+                      className={`character-story-text ${meriendaFont.className} text-lg sm:text-xl lg:text-2xl leading-relaxed sm:leading-loose text-foreground/80 font-normal tracking-wide min-h-[100px] sm:min-h-[120px]`}
+                      style={{
+                        fontFamily: `${meriendaFont.style.fontFamily}, 'Merienda', cursive`,
+                      }}
+                    >
+                      {member.story}
+                    </p>
+                  </div>
+                </div>
               </div>
-            </div>
-          ))}
-        </div>
+            </section>
+          );
+        })}
       </div>
-    </section>
+    </div>
   );
 }
diff --git a/apps/sale/features/landing/components/FeatureShowcaseSection.tsx b/apps/sale/features/landing/components/FeatureShowcaseSection.tsx
index 886a951..e9fb6f9 100644
--- a/apps/sale/features/landing/components/FeatureShowcaseSection.tsx
+++ b/apps/sale/features/landing/components/FeatureShowcaseSection.tsx
@@ -80,80 +80,15 @@ const SHOWCASE_ITEMS: ShowcaseItem[] = [
     accentBg: "from-emerald-500/10 via-teal-500/5 to-transparent",
     mockupTitle: "Hồ sơ kiểm duyệt • Mã GS: BW-8892",
     renderMockup: () => (
-      <div className="w-full flex flex-col gap-4 p-5 sm:p-7">
-        {/* Tutor Profile Header Card */}
-        <div className="flex items-center gap-4 p-4 rounded-2xl bg-white border border-border shadow-xs">
-          <div className="relative shrink-0">
-            <div className="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center text-primary font-black text-lg">
-              QA
-            </div>
-            <div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-emerald-500 border-2 border-white flex items-center justify-center text-white">
-              <CheckCircle size={13} weight="fill" />
-            </div>
-          </div>
-          <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <h4 className="text-sm font-bold text-foreground truncate">
-                Lê Quỳnh Anh
-              </h4>
-              <span className="px-2 py-0.5 rounded-full bg-emerald-500 text-white text-[10px] font-bold">
-                VERIFIED
-              </span>
-            </div>
-            <p className="text-xs text-foreground/60 mt-0.5 truncate">
-              Thủ khoa ĐH Ngoại Thương • IELTS 8.0
-            </p>
-            <p className="text-[11px] text-emerald-600 font-semibold mt-1">
-              ✓ Đã qua phỏng vấn chuyên môn bởi BeeWise
-            </p>
-          </div>
-        </div>
-
-        {/* Verification Badges Grid */}
-        <div className="grid grid-cols-2 gap-2.5">
-          {[
-            {
-              label: "Căn cước công dân",
-              status: "Đã xác thực CCCD",
-              icon: CheckCircle,
-            },
-            {
-              label: "Bằng Cử nhân Xuất sắc",
-              status: "Đại học Ngoại Thương",
-              icon: FileText,
-            },
-            {
-              label: "Chứng chỉ Quốc tế",
-              status: "IELTS 8.0 (2024)",
-              icon: Star,
-            },
-            {
-              label: "Phỏng vấn giảng dạy",
-              status: "Đạt chuẩn sư phạm",
-              icon: VideoCamera,
-            },
-          ].map((item, i) => {
-            const ItemIcon = item.icon;
-            return (
-              <div
-                key={i}
-                className="flex items-start gap-2.5 p-3 rounded-xl bg-white border border-border/80 shadow-2xs"
-              >
-                <div className="w-6 h-6 rounded-lg bg-emerald-50 flex items-center justify-center text-emerald-600 shrink-0 mt-0.5">
-                  <ItemIcon size={14} weight="fill" />
-                </div>
-                <div className="min-w-0">
-                  <p className="text-xs font-bold text-foreground truncate">
-                    {item.label}
-                  </p>
-                  <p className="text-[11px] text-emerald-600 font-medium truncate mt-0.5">
-                    {item.status}
-                  </p>
-                </div>
-              </div>
-            );
-          })}
-        </div>
+      <div className="w-full p-2 sm:p-4 flex items-center justify-center">
+        <Image
+          src="https://res.cloudinary.com/xcrm6ykz/image/upload/v1787294807/%E1%BA%A2nh_ch%E1%BB%A5p_m%C3%A0n_h%C3%ACnh_2026-08-21_134908.png"
+          alt="Gia sư được xác thực hồ sơ"
+          width={1200}
+          height={800}
+          unoptimized
+          className="w-full h-auto object-contain rounded-xl shadow-xs"
+        />
       </div>
     ),
   },
diff --git a/packages/ui/components/layout/Header.tsx b/packages/ui/components/layout/Header.tsx
index 23b8695..8ed8b31 100644
--- a/packages/ui/components/layout/Header.tsx
+++ b/packages/ui/components/layout/Header.tsx
@@ -270,7 +270,7 @@ export function Header({
                   className={
                     action.variant === "primary"
                       ? "inline-flex h-8 items-center justify-center whitespace-nowrap rounded-full bg-accent px-4 text-xs font-bold text-accent-foreground transition-all duration-200 hover:bg-highlight active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
-                      : "hidden text-sm font-bold text-white/70 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent md:inline-flex"
+                      : "hidden text-sm font-google-sans font-bold text-white/70 transition-colors hover:text-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent md:inline-flex"
                   }
                 >
                   {action.label}