diff --git a/apps/sale/app/(guest)/page.tsx b/apps/sale/app/(guest)/page.tsx
index 8f1e25c..0c2e82e 100644
--- a/apps/sale/app/(guest)/page.tsx
+++ b/apps/sale/app/(guest)/page.tsx
@@ -1,16 +1,17 @@
 import type { Metadata } from "next";
-import { Header } from '@workspace/ui/components/layout/Header';
-import { Footer } from '@workspace/ui/components/layout/Footer';
-import { HeroSection } from '@/features/landing/components/HeroSection';
-import { PainPointSection } from '@/features/landing/components/PainPointSection';
-import { PosterSection } from '@/features/landing/components/PosterSection';
-import { SolutionSection } from '@/features/landing/components/SolutionSection';
-import { HowItWorksSection } from '@/features/landing/components/HowItWorksSection';
-import { TutorSection } from '@/features/landing/components/TutorSection';
-import { TutorCarouselSection } from '@/features/landing/components/TutorCarouselSection';
-import { FaqSection } from '@/features/landing/components/FaqSection';
-import { TutorPainpointSection } from '@/features/landing/components/TutorPainpointSection';
-import { TutorGuideTrust } from '@/features/tutor-guide/components/TutorGuideTrust';
+import { Header } from "@workspace/ui/components/layout/Header";
+import { Footer } from "@workspace/ui/components/layout/Footer";
+import { HeroSection } from "@/features/landing/components/HeroSection";
+import { AIFeaturesSection } from "@/features/landing/components/AIFeaturesSection";
+import { VideoIntroSection } from "@/features/landing/components/VideoIntroSection";
+import { FeatureShowcaseSection } from "@/features/landing/components/FeatureShowcaseSection";
+import { HowItWorksSection } from "@/features/landing/components/HowItWorksSection";
+import { TutorSection } from "@/features/landing/components/TutorSection";
+import { TutorCarouselSection } from "@/features/landing/components/TutorCarouselSection";
+import { FeedbackSection } from "@/features/landing/components/FeedbackSection";
+import { FaqSection } from "@/features/landing/components/FaqSection";
+
+import { TutorGuideTrust } from "@/features/tutor-guide/components/TutorGuideTrust";
 
 export const metadata: Metadata = {
   title: "Cộng Đồng Gia Sư - Tìm Gia Sư Phù Hợp Nhanh Chóng Với AI",
@@ -49,19 +50,17 @@ export default function LandingPage() {
       <Header />
       <main id="main-content">
         <HeroSection />
-        <PosterSection />
-        <PainPointSection />
-        <TutorPainpointSection />
-        <SolutionSection />
+        <VideoIntroSection />
+        <AIFeaturesSection />
+        <FeatureShowcaseSection />
         <TutorGuideTrust />
         <HowItWorksSection />
         <TutorCarouselSection />
         <TutorSection />
+        <FeedbackSection />
         <FaqSection />
       </main>
       <Footer />
     </>
   );
 }
-
-
diff --git a/apps/sale/features/landing/components/AIFeaturesSection.tsx b/apps/sale/features/landing/components/AIFeaturesSection.tsx
new file mode 100644
index 0000000..699b387
--- /dev/null
+++ b/apps/sale/features/landing/components/AIFeaturesSection.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import {
+  Sparkle,
+  MicrophoneStage,
+  BookOpen,
+  Brain,
+  ArrowRight,
+} from "@phosphor-icons/react";
+
+const AI_POINTS = [
+  {
+    icon: Sparkle,
+    label: "Tìm kiếm gia sư bằng AI",
+    bgIcon: "bg-purple-500/20 text-purple-300",
+  },
+  {
+    icon: Brain,
+    label: "Gợi ý gia sư phù hợp với bạn",
+    bgIcon: "bg-cyan-500/20 text-cyan-300",
+  },
+];
+
+export function AIFeaturesSection() {
+  return (
+    <section
+      id="ai-features"
+      aria-labelledby="ai-features-headline"
+      className="py-12 sm:py-16 lg:py-20 bg-background relative overflow-hidden"
+    >
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Dark Container Box (Udemy / Modern AI Card Style) */}
+        <div className="relative rounded-[2rem] sm:rounded-[2.5rem] bg-[#1c1d25] p-6 sm:p-10 lg:p-12 xl:p-14 overflow-hidden border border-white/10 shadow-2xl">
+          {/* Subtle Ambient Light Gradients */}
+          <div className="pointer-events-none absolute -top-24 -left-24 w-96 h-96 rounded-full bg-primary/30 blur-[100px]" />
+          <div className="pointer-events-none absolute -bottom-24 -right-24 w-96 h-96 rounded-full bg-purple-600/20 blur-[100px]" />
+
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 xl:gap-12 items-center relative z-10">
+            {/* Left Column: Headline, Description, 2x2 Feature Bullets & CTA */}
+            <div className="lg:col-span-5 flex flex-col justify-center space-y-6 sm:space-y-8">
+              <div className="space-y-4">
+                <h2
+                  id="ai-features-headline"
+                  className="text-2xl sm:text-4xl xl:text-[2.65rem] font-black text-white leading-[1.2] font-nunito tracking-tight"
+                >
+                  Nâng cao chất lượng học tập cùng{" "}
+                  <span className="text-accent">BeeWise AI</span>
+                </h2>
+
+                <p className="text-slate-300/85 text-sm sm:text-base leading-relaxed max-w-xl">
+                  BeeWise tối ưu hóa việc học tập qua nhiều công cụ AI, giúp bạn
+                  kết nối đúng người, chuẩn bị kỹ càng và học hiệu quả hơn.
+                </p>
+              </div>
+
+              {/* 2x2 Features Bullets */}
+              <div className="grid grid-cols-1  gap-4 pt-1">
+                {AI_POINTS.map((item, idx) => {
+                  const Icon = item.icon;
+                  return (
+                    <div key={idx} className="flex items-center gap-3">
+                      <div
+                        className={`w-7 h-7 sm:w-8 sm:h-8 rounded-full flex items-center justify-center shrink-0 ${item.bgIcon}`}
+                      >
+                        <Icon size={16} weight="fill" />
+                      </div>
+                      <span className="text-white/90 text-sm sm:text-[15px] font-medium leading-snug">
+                        {item.label}
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* CTA Button */}
+              <div className="pt-2">
+                <Link
+                  href="/tutors?mode=ai"
+                  className="inline-flex items-center justify-center gap-2 bg-white text-[#1c1d25] hover:bg-slate-100 active:scale-[0.98] font-bold text-sm sm:text-base px-7 py-3 rounded-xl transition-all duration-200 shadow-lg shadow-black/20"
+                >
+                  <span>Trải nghiệm ngay</span>
+                  <ArrowRight size={18} weight="bold" />
+                </Link>
+              </div>
+            </div>
+
+            {/* Right Column: AI Visual Artwork / Collage Image (Larger, No Border, Crisp Quality) */}
+            <div className="lg:col-span-7 flex items-center justify-center">
+              <div className="relative w-full flex items-center justify-center">
+                <Image
+                  src="/images/Banner/AIBanner.png"
+                  alt="BeeWise AI Features"
+                  width={1400}
+                  height={1000}
+                  unoptimized
+                  sizes="(max-width: 1024px) 100vw, 65vw"
+                  className="w-full h-auto object-contain select-none"
+                  priority
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/landing/components/FeatureShowcaseSection.tsx b/apps/sale/features/landing/components/FeatureShowcaseSection.tsx
new file mode 100644
index 0000000..886a951
--- /dev/null
+++ b/apps/sale/features/landing/components/FeatureShowcaseSection.tsx
@@ -0,0 +1,411 @@
+"use client";
+
+import Image from "next/image";
+import {
+  Sparkle,
+  ShieldCheck,
+  ChatCircleDots,
+  CalendarCheck,
+  CheckCircle,
+  MagnifyingGlass,
+  PaperPlaneTilt,
+  Clock,
+  Star,
+  Check,
+  FileText,
+  VideoCamera,
+} from "@phosphor-icons/react";
+
+interface ShowcaseItem {
+  id: string;
+  tag: string;
+  tagColor: string;
+  title: string;
+  subtitle: string;
+  description: string;
+  benefits: string[];
+  icon: React.ElementType;
+  iconColor: string;
+  accentBg: string;
+  mockupTitle: string;
+  renderMockup: () => React.ReactNode;
+}
+
+const SHOWCASE_ITEMS: ShowcaseItem[] = [
+  {
+    id: "ai-search",
+    tag: "Beewise AI",
+    tagColor: "bg-purple-500/10 text-purple-600 border-purple-200",
+    title: "AI Gợi Ý Gia Sư Phù Hợp",
+    subtitle: "Tìm đúng gia sư cho từng mục tiêu học tập",
+    description:
+      "Thay vì phải đăng bài trên các trang mạng xã hội, hệ thống AI của BeeWise phân tích sâu nhu cầu học tập, trình độ hiện tại, khu vực và ngân sách để đề xuất những gia sư tối ưu nhất.",
+    benefits: [
+      "Kết nối nhanh chóng chỉ sau 30 giây",
+      "Độ tương thích mục tiêu lên đến 98%",
+      "Gợi ý dựa trên đánh giá thực tế của học viên",
+    ],
+    icon: Sparkle,
+    iconColor: "text-purple-600",
+    accentBg: "from-purple-500/10 via-indigo-500/5 to-transparent",
+    mockupTitle: "Tìm kiếm bằng AI",
+    renderMockup: () => (
+      <div className="w-full p-2 sm:p-4 flex items-center justify-center">
+        <Image
+          src="https://res.cloudinary.com/xcrm6ykz/image/upload/v1787132165/%E1%BA%A2nh_ch%E1%BB%A5p_m%C3%A0n_h%C3%ACnh_2026-08-19_163746.png"
+          alt="Tìm kiếm gia sư bằng AI"
+          width={1200}
+          height={800}
+          unoptimized
+          className="w-full h-auto object-contain rounded-xl shadow-xs"
+        />
+      </div>
+    ),
+  },
+  {
+    id: "verified-tutor",
+    tag: "Đã kiểm duyệt",
+    tagColor: "bg-emerald-500/10 text-emerald-600 border-emerald-200",
+    title: "Gia Sư Được Xác Thực",
+    subtitle: "Hồ sơ minh bạch, uy tín tuyệt đối",
+    description:
+      "Mọi gia sư trên BeeWise đều phải hoàn thành quy trình xác thực đa tầng gồm kiểm tra thông tin, bằng cấp chuyên môn, chứng chỉ quốc tế và phỏng vấn trực tiếp trước khi nhận lớp.",
+    benefits: [
+      "100% hồ sơ được kiểm duyệt thực tế",
+      "Bằng cấp, chứng chỉ rõ ràng, công khai",
+      "Đánh giá chân thực từ học viên đã học",
+    ],
+    icon: ShieldCheck,
+    iconColor: "text-emerald-600",
+    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>
+    ),
+  },
+  {
+    id: "live-chat",
+    tag: "Tương tác trực tiếp",
+    tagColor: "bg-amber-500/10 text-amber-600 border-amber-200",
+    title: "Phòng Chat Hỗ Trợ",
+    subtitle: "Trao đổi bảo mật",
+    description:
+      "Hệ thống phòng chat trực tiếp giúp phụ huynh, học viên và gia sư dễ dàng trao đổi mục tiêu học tập, gửi bài tập và tài liệu học tập ngay trên nền tảng mà không lo rò rỉ thông tin cá nhân.",
+    benefits: [
+      "Trao đổi trực tiếp, phản hồi nhanh chóng",
+      "Gửi tài liệu, đề thi và hình ảnh bài tập tiện lợi",
+      "Bảo mật thông tin cá nhân tối đa",
+    ],
+    icon: ChatCircleDots,
+    iconColor: "text-amber-600",
+    accentBg: "from-amber-500/10 via-orange-500/5 to-transparent",
+    mockupTitle: "Phòng chat • Gia sư & Học viên",
+    renderMockup: () => (
+      <div className="w-full flex flex-col gap-3 p-5 sm:p-7">
+        {/* Chat Message 1 (Learner) */}
+        <div className="flex items-end gap-2.5 justify-end">
+          <div className="max-w-[82%] px-4 py-2.5 rounded-2xl rounded-br-xs bg-primary text-primary-foreground text-xs sm:text-sm leading-relaxed shadow-xs">
+            Em chào cô Mai Linh ạ! Em muốn tìm gia sư kèm môn Toán 12 vào tối
+            Thứ 3 và Thứ 6.
+          </div>
+        </div>
+
+        {/* Chat Message 2 (Tutor) */}
+        <div className="flex items-end gap-2.5">
+          <div className="w-8 h-8 rounded-full bg-accent/30 text-primary font-bold text-xs flex items-center justify-center shrink-0 border border-border">
+            ML
+          </div>
+          <div className="max-w-[82%] px-4 py-2.5 rounded-2xl rounded-bl-xs bg-white border border-border text-foreground text-xs sm:text-sm leading-relaxed shadow-xs">
+            Chào em nhé! Lịch tối T3 và T6 cô đang trống. Em muốn tập trung vào
+            phần Hàm số hay Hình học trước để cô chuẩn bị giáo án? 📚
+          </div>
+        </div>
+
+        {/* Chat Input Bar */}
+        <div className="flex items-center gap-2 mt-2 px-3.5 py-2.5 rounded-xl bg-white border border-border shadow-xs">
+          <span className="text-xs text-foreground/45 flex-1">
+            Nhập tin nhắn trao đổi...
+          </span>
+          <button
+            type="button"
+            className="w-7 h-7 rounded-lg bg-primary flex items-center justify-center text-white shrink-0 hover:bg-primary/90 transition-colors"
+          >
+            <PaperPlaneTilt size={14} weight="fill" />
+          </button>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "schedule-management",
+    tag: "Linh hoạt",
+    tagColor: "bg-blue-500/10 text-blue-600 border-blue-200",
+    title: "Lịch Học & Nhắc Nhở Tự Động",
+    subtitle: "Chủ động thời gian, không bỏ lỡ buổi học",
+    description:
+      "Dễ dàng xem trước lịch rảnh của gia sư trong tuần, đăng ký buổi học thử và nhận thông báo nhắc nhở tự động trước mỗi ca dạy để việc học luôn đúng lộ trình.",
+    benefits: [
+      "Xem lịch trống theo thời gian thực",
+      "Thông báo nhắc nhở trước mỗi buổi học",
+      "Linh hoạt điều chỉnh lịch học khi cần",
+    ],
+    icon: CalendarCheck,
+    iconColor: "text-blue-600",
+    accentBg: "from-blue-500/10 via-indigo-500/5 to-transparent",
+    mockupTitle: "Thời khóa biểu • Lịch học tuần này",
+    renderMockup: () => (
+      <div className="w-full flex flex-col gap-3.5 p-5 sm:p-7">
+        {/* Upcoming class card */}
+        <div className="p-4 rounded-2xl bg-white border border-border shadow-xs flex flex-col gap-2.5">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold text-foreground flex items-center gap-1.5">
+              <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+              Buổi học sắp diễn ra
+            </span>
+            <span className="px-2.5 py-0.5 rounded-full bg-emerald-50 text-emerald-600 font-bold text-[11px]">
+              Tối nay
+            </span>
+          </div>
+
+          <div className="flex items-center justify-between pt-1">
+            <div>
+              <p className="text-sm font-bold text-foreground">
+                Toán 12 • Luyện Đề Số 4
+              </p>
+              <div className="flex items-center gap-2 text-xs text-foreground/65 mt-0.5">
+                <Clock size={14} className="text-primary" />
+                <span>19:30 - 21:00 • Với Thầy Hoàng Nam</span>
+              </div>
+            </div>
+            <span className="px-3 py-1 rounded-xl bg-primary/10 text-primary font-bold text-xs">
+              Vào lớp
+            </span>
+          </div>
+        </div>
+
+        {/* Weekly Slot Grid */}
+        <div className="grid grid-cols-4 gap-2 pt-1">
+          {[
+            { day: "Thứ 2", time: "19:00", active: false, label: "Trống" },
+            { day: "Thứ 4", time: "19:30", active: true, label: "Đã đặt" },
+            { day: "Thứ 6", time: "19:30", active: true, label: "Đã đặt" },
+            { day: "Chủ nhật", time: "09:00", active: false, label: "Trống" },
+          ].map((slot, i) => (
+            <div
+              key={i}
+              className={`p-2.5 rounded-xl text-center border transition-all ${
+                slot.active
+                  ? "bg-primary text-primary-foreground border-primary font-bold shadow-xs"
+                  : "bg-white text-foreground/70 border-border hover:border-primary/40"
+              }`}
+            >
+              <div className="text-[11px] uppercase opacity-90">{slot.day}</div>
+              <div className="text-xs font-bold mt-0.5">{slot.time}</div>
+              <div
+                className={`text-[10px] mt-1 font-semibold ${
+                  slot.active ? "text-accent" : "text-foreground/45"
+                }`}
+              >
+                {slot.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+  },
+];
+
+export function FeatureShowcaseSection() {
+  return (
+    <section
+      className="bg-background py-16 sm:py-24 relative overflow-hidden"
+      id="features-showcase"
+      aria-labelledby="features-showcase-headline"
+    >
+      {/* Background ambient glow */}
+      <div className="pointer-events-none absolute top-1/4 -left-20 w-96 h-96 bg-primary/5 rounded-full blur-3xl" />
+      <div className="pointer-events-none absolute bottom-1/4 -right-20 w-96 h-96 bg-accent/10 rounded-full blur-3xl" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Section Header */}
+        <div className="text-center mb-16 sm:mb-24 flex flex-col items-center gap-3">
+          <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold">
+            Trải nghiệm nền tảng
+          </span>
+
+          <h2
+            id="features-showcase-headline"
+            className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-primary leading-tight font-nunito"
+          >
+            BeeWise cung cấp các tính năng giúp bạn <br />
+            <span className="text-accent">kết nối & học tập</span>
+          </h2>
+
+          <p className="text-foreground/65 text-base sm:text-lg max-w-2xl leading-relaxed">
+            Thiết kế trực quan, dễ thao tác và đồng bộ - giúp phụ huynh, học
+            viên và gia sư kết nối an toàn, minh bạch và hiệu quả nhất.
+          </p>
+        </div>
+
+        {/* Zigzag Showcase Rows */}
+        <div className="space-y-16 sm:space-y-24 lg:space-y-28">
+          {SHOWCASE_ITEMS.map((item, index) => {
+            const Icon = item.icon;
+            const isEven = index % 2 === 1; // Reverse order for zigzag
+
+            return (
+              <div
+                key={item.id}
+                className="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-14 items-center"
+              >
+                {/* Content Side (5 cols) */}
+                <div
+                  className={`lg:col-span-5 flex flex-col justify-center space-y-4 sm:space-y-5 ${
+                    isEven ? "lg:order-2" : "lg:order-1"
+                  }`}
+                >
+                  <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold border w-fit">
+                    <Icon size={16} weight="fill" className={item.iconColor} />
+                    <span className={item.tagColor}>{item.tag}</span>
+                  </div>
+
+                  <div className="space-y-2">
+                    <h3 className="text-2xl sm:text-3xl lg:text-[2rem] font-black text-foreground uppercase font-nunito leading-tight tracking-tight">
+                      {item.title}
+                    </h3>
+                    <p className="text-sm sm:text-base font-bold text-primary font-nunito">
+                      {item.subtitle}
+                    </p>
+                  </div>
+
+                  <p className="text-sm sm:text-[15px] text-foreground/70 leading-relaxed">
+                    {item.description}
+                  </p>
+
+                  {/* Bullet Benefits */}
+                  <div className="space-y-2.5 pt-2">
+                    {item.benefits.map((benefit, i) => (
+                      <div key={i} className="flex items-center gap-2.5">
+                        <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center text-primary shrink-0">
+                          <Check size={12} weight="bold" />
+                        </div>
+                        <span className="text-xs sm:text-sm font-semibold text-foreground/80">
+                          {benefit}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Mockup Image / Visual Window Side (7 cols - Focus on Image) */}
+                <div
+                  className={`lg:col-span-7 ${
+                    isEven ? "lg:order-1" : "lg:order-2"
+                  }`}
+                >
+                  <div className="group rounded-3xl sm:rounded-[2.5rem] bg-card border border-border/80 p-2 sm:p-3 shadow-md hover:shadow-2xl hover:border-primary/20 transition-all duration-500 overflow-hidden">
+                    <div
+                      className={`rounded-2xl sm:rounded-[2rem] border border-border/70 overflow-hidden bg-gradient-to-b ${item.accentBg}`}
+                    >
+                      {/* Window Controls Header */}
+                      <div className="flex items-center justify-between px-4 py-3 border-b border-border/50 bg-white/75 backdrop-blur-xs">
+                        <div className="flex items-center gap-1.5">
+                          <span className="w-2.5 h-2.5 rounded-full bg-red-400/80" />
+                          <span className="w-2.5 h-2.5 rounded-full bg-amber-400/80" />
+                          <span className="w-2.5 h-2.5 rounded-full bg-emerald-400/80" />
+                        </div>
+                        <span className="text-[11px] font-medium text-foreground/45 font-mono truncate max-w-[200px] sm:max-w-none">
+                          {item.mockupTitle}
+                        </span>
+                      </div>
+
+                      {/* Mockup Body Content */}
+                      <div className="min-h-[240px] sm:min-h-[280px] flex items-center justify-center">
+                        {item.renderMockup()}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/landing/components/FeedbackSection.tsx b/apps/sale/features/landing/components/FeedbackSection.tsx
new file mode 100644
index 0000000..27b12c2
--- /dev/null
+++ b/apps/sale/features/landing/components/FeedbackSection.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import Image from "next/image";
+import { Star, ChatCircle } from "@phosphor-icons/react";
+
+interface FeedbackItem {
+  id: string;
+  name: string;
+  role: string;
+  subject: string;
+  avatar: string;
+  rating: number;
+  comment: string;
+}
+
+const FEEDBACK_LIST: FeedbackItem[] = [
+  {
+    id: "1",
+    name: "Chị Thu Hà",
+    role: "Phụ huynh",
+    subject: "Toán lớp 9 ôn thi vào 10",
+    avatar:
+      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&auto=format&fit=crop&q=80",
+    rating: 5,
+    comment:
+      "Nhờ tìm gia sư qua AI mà bé nhà mình tìm được cô giáo rất hợp tính. Sau 2 tháng điểm kiểm tra môn Toán tăng từ 6.5 lên 8.5!",
+  },
+  {
+    id: "2",
+    name: "Minh Quân",
+    role: "Học viên",
+    subject: "Luyện thi IELTS 7.0",
+    avatar:
+      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150&auto=format&fit=crop&q=80",
+    rating: 5,
+    comment:
+      "Tính năng AI tóm tắt bài học cực kỳ tiện, học xong có ngay tài liệu ôn lại. Thầy giáo nhiệt tình và hướng dẫn phát âm rất chuẩn.",
+  },
+  {
+    id: "3",
+    name: "Anh Hoàng Nam",
+    role: "Phụ huynh",
+    subject: "Tiếng Anh lớp 6",
+    avatar:
+      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80",
+    rating: 5,
+    comment:
+      "Giao diện dễ dùng, chỉ mất chưa đầy 1 phút là hệ thống gợi ý đúng gia sư gần nhà. Hồ sơ gia sư minh bạch nên gia đình rất yên tâm.",
+  },
+  {
+    id: "4",
+    name: "Thảo Vy",
+    role: "Học viên",
+    subject: "Hóa học lớp 11",
+    avatar:
+      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150&auto=format&fit=crop&q=80",
+    rating: 5,
+    comment:
+      "Trước đây mình sợ môn Hóa lắm, nhờ chị gia sư kiên nhẫn giảng lại từ gốc mà giờ mình tự tin làm hết các bài tập nâng cao trên lớp.",
+  },
+];
+
+export function FeedbackSection() {
+  return (
+    <section
+      className="bg-background py-16 sm:py-24 relative overflow-hidden"
+      id="feedback"
+      aria-labelledby="feedback-headline"
+    >
+      {/* Decorative background glows */}
+      <div className="pointer-events-none absolute top-1/2 left-0 w-80 h-80 bg-primary/5 rounded-full blur-3xl -translate-y-1/2 -translate-x-1/2" />
+      <div className="pointer-events-none absolute top-1/2 right-0 w-80 h-80 bg-accent/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Header */}
+        <div className="text-center mb-12 sm:mb-16 flex flex-col items-center gap-3">
+          <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold">
+            <ChatCircle size={16} weight="fill" />
+            Đánh giá từ người dùng
+          </span>
+
+          <h2
+            id="feedback-headline"
+            className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-foreground leading-tight font-nunito"
+          >
+            Học viên & Phụ huynh{" "}
+            <span className="text-primary">nói gì về BeeWise?</span>
+          </h2>
+
+          <p className="text-foreground/65 text-base sm:text-lg max-w-2xl leading-relaxed">
+            Những trải nghiệm thực tế từ cộng đồng học viên và phụ huynh đã tin
+            tưởng đồng hành cùng BeeWise.
+          </p>
+        </div>
+
+        {/* 4 Cards in 1 Row on Desktop */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {FEEDBACK_LIST.map((item) => (
+            <div
+              key={item.id}
+              className="flex flex-col justify-between p-6 rounded-3xl bg-card border border-border/80 shadow-sm hover:shadow-xl hover:border-primary/20 hover:-translate-y-1.5 transition-all duration-300 group relative"
+            >
+              {/* Rating stars */}
+              <div className="flex flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1 text-accent">
+                    {Array.from({ length: item.rating }).map((_, i) => (
+                      <Star key={i} size={16} weight="fill" />
+                    ))}
+                  </div>
+                  <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-primary/10 text-primary">
+                    {item.role}
+                  </span>
+                </div>
+
+                {/* Feedback content in quotes */}
+                <p className="text-foreground/80 text-sm sm:text-[15px] leading-relaxed italic">
+                  &ldquo;{item.comment}&rdquo;
+                </p>
+              </div>
+
+              {/* User info */}
+              <div className="flex items-center gap-3.5 pt-6 mt-4 border-t border-border/60">
+                <div className="relative w-11 h-11 rounded-full overflow-hidden shrink-0 border-2 border-primary/20 group-hover:border-primary transition-colors">
+                  <Image
+                    src={item.avatar}
+                    alt={item.name}
+                    fill
+                    unoptimized
+                    sizes="44px"
+                    className="object-cover"
+                  />
+                </div>
+                <div className="min-w-0">
+                  <h3 className="text-sm font-bold text-foreground truncate font-nunito">
+                    {item.name}
+                  </h3>
+                  <p className="text-xs text-foreground/55 truncate mt-0.5 font-medium">
+                    {item.subject}
+                  </p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/landing/components/HeroVisual.tsx b/apps/sale/features/landing/components/HeroVisual.tsx
deleted file mode 100644
index 85cfd89..0000000
--- a/apps/sale/features/landing/components/HeroVisual.tsx
+++ /dev/null
@@ -1,339 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { motion } from "motion/react";
-import {
-  BookOpenIcon,
-  PencilSimpleIcon,
-  MathOperationsIcon,
-  BrainIcon,
-  StarIcon,
-  GraduationCapIcon,
-  ChartLineUpIcon,
-  LightbulbIcon,
-  FlaskIcon,
-  MusicNotesIcon,
-} from "@phosphor-icons/react";
-
-const FLOATING_ICONS = [
-  {
-    Icon: BookOpenIcon,
-    top: "20%",
-    left: "15%",
-    size: 28,
-    delay: 0,
-    duration: 5.2,
-    amplitude: 10,
-    color: "#FFC500",
-    bg: "rgba(255,197,0,0.15)",
-    rotate: -12,
-  },
-  {
-    Icon: PencilSimpleIcon,
-    top: "18%",
-    left: "82%",
-    size: 22,
-    delay: 0.8,
-    duration: 4.8,
-    amplitude: 8,
-    color: "#FADC76",
-    bg: "rgba(250,220,118,0.15)",
-    rotate: 18,
-  },
-  {
-    Icon: StarIcon,
-    top: "10%",
-    left: "40%",
-    size: 18,
-    delay: 1.4,
-    duration: 6.1,
-    amplitude: 12,
-    color: "#FFC500",
-    bg: "rgba(255,197,0,0.12)",
-    rotate: 0,
-    weight: "fill" as const,
-  },
-  {
-    Icon: MathOperationsIcon,
-    top: "38%",
-    left: "4%",
-    size: 24,
-    delay: 0.5,
-    duration: 5.5,
-    amplitude: 9,
-    color: "#CFE1FA",
-    bg: "rgba(207,225,250,0.12)",
-    rotate: 6,
-  },
-  {
-    Icon: FlaskIcon,
-    top: "45%",
-    left: "87%",
-    size: 22,
-    delay: 1.1,
-    duration: 4.6,
-    amplitude: 11,
-    color: "#FADC76",
-    bg: "rgba(250,220,118,0.12)",
-    rotate: -8,
-  },
-  {
-    Icon: BrainIcon,
-    top: "32%",
-    left: "78%",
-    size: 26,
-    delay: 2.0,
-    duration: 5.9,
-    amplitude: 10,
-    color: "#CFE1FA",
-    bg: "rgba(207,225,250,0.15)",
-    rotate: 10,
-  },
-  {
-    Icon: GraduationCapIcon,
-    top: "72%",
-    left: "8%",
-    size: 30,
-    delay: 0.3,
-    duration: 5.0,
-    amplitude: 8,
-    color: "#FFC500",
-    bg: "rgba(255,197,0,0.15)",
-    rotate: -6,
-    weight: "fill" as const,
-  },
-  {
-    Icon: ChartLineUpIcon,
-    top: "78%",
-    left: "82%",
-    size: 22,
-    delay: 1.7,
-    duration: 6.3,
-    amplitude: 13,
-    color: "#FADC76",
-    bg: "rgba(250,220,118,0.12)",
-    rotate: 14,
-  },
-  {
-    Icon: LightbulbIcon,
-    top: "60%",
-    left: "3%",
-    size: 20,
-    delay: 2.5,
-    duration: 4.9,
-    amplitude: 7,
-    color: "#CFE1FA",
-    bg: "rgba(207,225,250,0.10)",
-    rotate: -4,
-  },
-  {
-    Icon: MusicNotesIcon,
-    top: "65%",
-    left: "88%",
-    size: 20,
-    delay: 1.9,
-    duration: 5.7,
-    amplitude: 9,
-    color: "#FFC500",
-    bg: "rgba(255,197,0,0.10)",
-    rotate: 20,
-  },
-];
-
-function HexGrid() {
-  return (
-    <svg
-      aria-hidden="true"
-      className="absolute inset-0 w-full h-full opacity-[0.07]"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <defs>
-        <pattern
-          id="hex-pattern-hero"
-          x="0"
-          y="0"
-          width="60"
-          height="52"
-          patternUnits="userSpaceOnUse"
-        >
-          <polygon
-            points="15,0 45,0 60,26 45,52 15,52 0,26"
-            fill="none"
-            stroke="#CFE1FA"
-            strokeWidth="1"
-          />
-          <polygon
-            points="45,26 75,26 90,52 75,78 45,78 30,52"
-            fill="none"
-            stroke="#CFE1FA"
-            strokeWidth="1"
-          />
-        </pattern>
-      </defs>
-      <rect width="100%" height="100%" fill="url(#hex-pattern-hero)" />
-    </svg>
-  );
-}
-
-function StatBadge({
-  value,
-  label,
-  delay,
-  className,
-}: {
-  value: string;
-  label: string;
-  delay: number;
-  className?: string;
-}) {
-  return (
-    <motion.div
-      initial={{ opacity: 0, scale: 0.85, y: 8 }}
-      animate={{ opacity: 1, scale: 1, y: 0 }}
-      transition={{ duration: 0.5, delay, ease: [0.22, 1, 0.36, 1] }}
-      className={`absolute z-30 flex items-center gap-2.5 rounded-2xl px-4 py-2.5
-        border border-white/15 shadow-lg shadow-primary/20 ${className}`}
-      style={{
-        background: "rgba(28, 10, 100, 0.55)",
-        backdropFilter: "blur(14px)",
-        WebkitBackdropFilter: "blur(14px)",
-      }}
-    >
-      <span
-        className="text-xl leading-none text-[#FFC500]"
-        style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
-      >
-        {value}
-      </span>
-      <span className="text-xs text-white/75 leading-tight max-w-[80px]">
-        {label}
-      </span>
-    </motion.div>
-  );
-}
-
-export function HeroVisual() {
-  return (
-    <motion.div
-      initial={{ opacity: 0, x: 40 }}
-      animate={{ opacity: 1, x: 0 }}
-      transition={{ duration: 0.7, delay: 0.25, ease: [0.22, 1, 0.36, 1] }}
-      className="relative w-full flex items-end justify-center select-none"
-      style={{ minHeight: "480px" }}
-      aria-hidden="true"
-    >
-      <div
-        className="absolute inset-x-0 bottom-0 rounded-3xl overflow-hidden"
-        style={{
-          top: "8%",
-          background:
-            "linear-gradient(145deg, #160860 0%, #280F91 45%, #3a18b5 75%, #160860 100%)",
-        }}
-      >
-        <HexGrid />
-
-        <div
-          className="absolute inset-0 pointer-events-none"
-          style={{
-            background:
-              "radial-gradient(ellipse 55% 45% at 15% 90%, rgba(255,197,0,0.22) 0%, transparent 65%)," +
-              "radial-gradient(ellipse 35% 35% at 90% 10%, rgba(207,225,250,0.10) 0%, transparent 60%)",
-          }}
-        />
-
-        {[340, 240, 140].map((d, i) => (
-          <div
-            key={d}
-            className="absolute rounded-full pointer-events-none"
-            style={{
-              width: d,
-              height: d,
-              border: `1px solid rgba(255,197,0,${0.06 - i * 0.015})`,
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-            }}
-          />
-        ))}
-      </div>
-
-      {FLOATING_ICONS.map(
-        (
-          {
-            Icon,
-            top,
-            left,
-            size,
-            delay,
-            duration,
-            amplitude,
-            color,
-            bg,
-            rotate,
-            weight,
-          },
-          i,
-        ) => (
-          <motion.div
-            key={i}
-            className="absolute z-10 flex items-center justify-center rounded-xl"
-            style={{
-              top,
-              left,
-              width: size + 20,
-              height: size + 20,
-              background: bg,
-              border: "1px solid rgba(255,255,255,0.08)",
-              rotate: `${rotate}deg`,
-            }}
-            animate={{ y: [0, -amplitude, 0, amplitude * 0.55, 0] }}
-            transition={{
-              duration,
-              delay,
-              repeat: Infinity,
-              ease: "easeInOut",
-              repeatType: "loop",
-            }}
-          >
-            <Icon
-              size={size}
-              weight={weight ?? "duotone"}
-              color={color}
-              aria-hidden="true"
-            />
-          </motion.div>
-        ),
-      )}
-
-      <motion.div
-        className="relative z-20"
-        style={{ width: "85%", maxWidth: "480px" }}
-        initial={{ opacity: 0, y: 24 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ duration: 0.7, delay: 0.45, ease: [0.22, 1, 0.36, 1] }}
-      >
-        <Image
-          src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561335/beewise/1.png"
-          alt="Sinh viên dùng BeeWise tìm gia sư phù hợp"
-          width={400}
-          height={600}
-          className="w-full h-auto object-contain drop-shadow-2xl"
-          priority
-        />
-      </motion.div>
-
-      <StatBadge
-        value="500+"
-        label="Gia sư đã xác thực"
-        delay={0.75}
-        className="bottom-[10%] left-20 -translate-x-1/4"
-      />
-      <StatBadge
-        value="4.9★"
-        label="Đánh giá trung bình"
-        delay={0.9}
-        className="top-[5%] right-15 translate-x-1/4"
-      />
-    </motion.div>
-  );
-}
diff --git a/apps/sale/features/landing/components/HowItWorksSection.tsx b/apps/sale/features/landing/components/HowItWorksSection.tsx
index b15bccf..6b5fe59 100644
--- a/apps/sale/features/landing/components/HowItWorksSection.tsx
+++ b/apps/sale/features/landing/components/HowItWorksSection.tsx
@@ -111,7 +111,7 @@ export function HowItWorksSection() {
                 <h3
                   className="text-lg text-foreground"
                   style={{
-                    fontFamily: "var(--font-nunito-family)",
+                    fontFamily: "var(--font-google-sans)",
                     fontWeight: 700,
                   }}
                 >
diff --git a/apps/sale/features/landing/components/PainPointSection.tsx b/apps/sale/features/landing/components/PainPointSection.tsx
deleted file mode 100644
index 0a32512..0000000
--- a/apps/sale/features/landing/components/PainPointSection.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useRef } from "react";
-import { gsap } from "gsap";
-import { useGSAP } from "@gsap/react";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-
-import {
-  Clock,
-  ShieldWarning,
-  ChatCircleDots,
-  MagnifyingGlass,
-} from "@phosphor-icons/react";
-import { PAIN_POINTS } from "../data/landing.data";
-
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(ScrollTrigger, useGSAP);
-}
-
-const ICON_MAP = {
-  Clock,
-  ShieldWarning,
-  ChatCircleDots,
-  MagnifyingGlass,
-} as const;
-
-type IconKey = keyof typeof ICON_MAP;
-
-export function PainPointSection() {
-  const containerRef = useRef<HTMLElement>(null);
-
-  useGSAP(
-    () => {
-      const bubbles = gsap.utils.toArray(".painpoint-bubble");
-
-      gsap.set(bubbles, { scale: 0, autoAlpha: 0, transformOrigin: "50% 50%" });
-
-      ScrollTrigger.create({
-        trigger: containerRef.current,
-        start: "top 75%",
-        onEnter: () => {
-          bubbles.forEach((bubble, i) => {
-            const delay = i * 0.15 + gsap.utils.random(-0.05, 0.05);
-
-            gsap.to(bubble as Element, {
-              scale: 1,
-              autoAlpha: 1,
-              duration: 0.6,
-              ease: "back.out(1.5)",
-              delay: delay,
-            });
-          });
-        },
-        once: true,
-      });
-    },
-    { scope: containerRef },
-  );
-
-  return (
-    <section
-      ref={containerRef}
-      className="relative bg-background sm:py-28 overflow-hidden h-fit md:min-h-[500px] flex items-center"
-      id="pain-points"
-      aria-labelledby="pain-headline"
-    >
-      <div className="">
-        <Image
-          src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561318/beewise/Painpoint-1.svg"
-          alt="Painpoints Background"
-          fill
-          sizes="100vw"
-          className="hidden sm:block object-cover lg:object-right opacity-30 lg:opacity-100"
-          priority
-        />
-      </div>
-
-      <div className="relative z-10 max-w-7xl mx-auto w-full sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-          <div className="hidden lg:block"></div>
-
-          {/* Cột phải (Bubbles) - Dàn 2 cột 2 dòng căn đều */}
-          <div className="hidden sm:grid grid-cols-2 gap-8 w-full h-[600px] place-content-center">
-            {PAIN_POINTS.map((point) => {
-              const Icon = ICON_MAP[point.icon as IconKey];
-              return (
-                <div
-                  key={point.id}
-                  className="painpoint-bubble p-5 rounded-3xl bg-card/85 backdrop-blur-xl border border-border shadow-2xl flex gap-4 max-w-[320px] place-self-center"
-                >
-                  <div className="shrink-0 w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center">
-                    <Icon size={24} weight="duotone" className="text-primary" />
-                  </div>
-                  <p className="text-sm text-foreground/85 leading-relaxed font-medium">
-                    {point.text}
-                  </p>
-                </div>
-              );
-            })}
-          </div>
-
-          {/* Mobile version - Only Image */}
-          <div className="block sm:hidden relative z-10 w-full mt-0">
-            <Image
-              src="/images/Banner/Paintpoint-2.png"
-              alt="Painpoints Mobile"
-              width={800}
-              height={1200}
-              className="w-full h-auto object-cover"
-              priority
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/apps/sale/features/landing/components/PosterSection.tsx b/apps/sale/features/landing/components/PosterSection.tsx
deleted file mode 100644
index 68d4c55..0000000
--- a/apps/sale/features/landing/components/PosterSection.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-"use client";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-
-export function PosterSection() {
-  const router = useRouter();
-  return (
-    <section
-      className="relative w-full lg:h-[110vh] lg:min-h-[500px] overflow-hidden cursor-pointer flex flex-col"
-      onClick={() => router.push("/login")}
-    >
-      {/* Desktop version */}
-      <div className="hidden sm:block absolute inset-0">
-        <Image
-          src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783571337/Banner-1_uob9l0.png"
-          alt="BeeWise Highlights"
-          fill
-          sizes="100vw"
-          className="object-cover object-center"
-          priority
-        />
-      </div>
-      {/* Mobile version */}
-      <div className="block sm:hidden relative w-full leading-0">
-        <Image
-          src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561296/beewise/Banner-2.png"
-          alt="BeeWise Highlights Mobile"
-          width={800}
-          height={1200}
-          className="w-full h-auto object-contain"
-          priority
-        />
-      </div>
-    </section>
-  );
-}
diff --git a/apps/sale/features/landing/components/SolutionMotion.tsx b/apps/sale/features/landing/components/SolutionMotion.tsx
deleted file mode 100644
index 073746b..0000000
--- a/apps/sale/features/landing/components/SolutionMotion.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-"use client";
-
-import { useRef, useEffect, useState } from "react";
-import { useReducedMotion } from "motion/react";
-import { motion } from "motion/react";
-
-type SolutionMotionProps = {
-  children: React.ReactNode;
-  index: number;
-};
-
-export function SolutionMotion({ children, index }: SolutionMotionProps) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
-  const shouldReduceMotion = useReducedMotion();
-
-  useEffect(() => {
-    const el = ref.current;
-    if (!el || shouldReduceMotion) {
-      setVisible(true);
-      return;
-    }
-
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 },
-    );
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [shouldReduceMotion]);
-
-  return (
-    <motion.div
-      ref={ref}
-      initial={{ opacity: 0, y: 20 }}
-      animate={visible ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
-      transition={{
-        duration: 0.5,
-        delay: index * 0.08,
-        ease: [0.22, 1, 0.36, 1],
-      }}
-      className="h-full"
-    >
-      {children}
-    </motion.div>
-  );
-}
diff --git a/apps/sale/features/landing/components/SolutionSection.tsx b/apps/sale/features/landing/components/SolutionSection.tsx
deleted file mode 100644
index 81d9478..0000000
--- a/apps/sale/features/landing/components/SolutionSection.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { SOLUTION_FEATURES } from "../data/landing.data";
-import { SolutionMotion } from "./SolutionMotion";
-import { HeroVisual } from "./HeroVisual";
-
-const CELL_STYLES: Record<string, string> = {
-  primary: "bg-primary text-primary-foreground col-span-1 sm:col-span-2",
-  accent: "bg-accent text-primary",
-};
-
-export function SolutionSection() {
-  return (
-    <section
-      className="bg-background sm:py-24"
-      id="solutions"
-      aria-labelledby="solution-headline"
-    >
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-          {/* Cột trái (Sticky) - Chỉ hiển thị trên Desktop */}
-          <div className="hidden lg:flex flex-col max-w-xl sticky top-32 justify-center w-full">
-            <div
-              className="w-full max-w-[420px] mx-auto origin-top"
-              style={{ transform: "scale(0.95)" }}
-            >
-              <HeroVisual />
-            </div>
-          </div>
-
-          {/* Cột phải (Danh sách tính năng) */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 auto-rows-[minmax(200px,auto)]">
-            {SOLUTION_FEATURES.map((feature, index) => (
-              <SolutionMotion key={feature.id} index={index}>
-                <div
-                  className={`rounded-2xl p-7 flex flex-col justify-between h-full ${CELL_STYLES[feature.variant]}`}
-                >
-                  <div className="flex flex-col gap-3">
-                    <h3
-                      className="leading-tight uppercase text-[1.05rem]"
-                      style={{
-                        fontFamily: "var(--font-google-sans)",
-                        fontWeight: 700,
-                      }}
-                    >
-                      {feature.title}
-                    </h3>
-                    <p className="text-sm leading-relaxed opacity-80">
-                      {feature.description}
-                    </p>
-                  </div>
-                </div>
-              </SolutionMotion>
-            ))}
-
-            {/* HeroVisual hiển thị trên Mobile/Tablet ở cuối danh sách tính năng */}
-            <div className="lg:hidden sm:col-span-2 mt-8 flex justify-center w-full">
-              <div
-                className="w-full max-w-[400px] mx-auto origin-top"
-                style={{ transform: "scale(0.9)" }}
-              >
-                <HeroVisual />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/apps/sale/features/landing/components/TutorPainpointSection.tsx b/apps/sale/features/landing/components/TutorPainpointSection.tsx
deleted file mode 100644
index 301d5eb..0000000
--- a/apps/sale/features/landing/components/TutorPainpointSection.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-"use client";
-
-import Image from "next/image";
-import { useRef } from "react";
-import { gsap } from "gsap";
-import { useGSAP } from "@gsap/react";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-
-import {
-  MagnifyingGlass,
-  ShieldWarning,
-  Star,
-  Certificate,
-} from "@phosphor-icons/react";
-import { TUTOR_PAIN_POINTS } from "../data/landing.data";
-
-if (typeof window !== "undefined") {
-  gsap.registerPlugin(ScrollTrigger, useGSAP);
-}
-
-const ICON_MAP = {
-  MagnifyingGlass,
-  ShieldWarning,
-  Star,
-  Certificate,
-} as const;
-
-type IconKey = keyof typeof ICON_MAP;
-
-export function TutorPainpointSection() {
-  const containerRef = useRef<HTMLElement>(null);
-
-  useGSAP(
-    () => {
-      const bubbles = gsap.utils.toArray(".tutor-painpoint-bubble");
-
-      gsap.set(bubbles, { autoAlpha: 0, y: 30 });
-
-      ScrollTrigger.create({
-        trigger: containerRef.current,
-        start: "top 75%",
-        onEnter: () => {
-          gsap.to(bubbles, {
-            y: 0,
-            autoAlpha: 1,
-            duration: 0.8,
-            ease: "power2.out",
-            stagger: 0.15,
-          });
-        },
-        once: true,
-      });
-    },
-    { scope: containerRef },
-  );
-
-  return (
-    <section
-      ref={containerRef}
-      className="relative bg-[#f8f9fc] pb-4 sm:py-28 overflow-hidden h-fit md:min-h-[500px] flex items-center"
-      id="tutor-pain-points"
-      aria-labelledby="tutor-pain-headline"
-    >
-      {/* Desktop Background */}
-      <div className="">
-        <Image
-          src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783561324/beewise/Paintpoint-2.svg"
-          alt="Tutor Painpoints Background"
-          fill
-          sizes="100vw"
-          className="hidden sm:block object-cover lg:object-left opacity-30 lg:opacity-100"
-          priority
-        />
-      </div>
-
-      <div className="relative z-10 max-w-7xl mx-auto w-full sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-          {/* Cột trái (Bubbles) - Dàn 2 cột 2 dòng căn đều */}
-          <div className="hidden sm:grid grid-cols-2 gap-8 w-full h-[600px] place-content-center">
-            {TUTOR_PAIN_POINTS.map((point) => {
-              const Icon = ICON_MAP[point.icon as IconKey];
-              return (
-                <div
-                  key={point.id}
-                  className="tutor-painpoint-bubble p-5 rounded-3xl bg-card/90 backdrop-blur-xl border border-border shadow-xl flex gap-4 max-w-[320px] place-self-center hover:border-secondary/20 hover:shadow-2xl transition-all duration-300"
-                >
-                  <div className="shrink-0 w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center">
-                    <Icon size={24} weight="duotone" className="text-accent" />
-                  </div>
-                  <p className="text-sm text-foreground/85 leading-relaxed font-medium">
-                    {point.text}
-                  </p>
-                </div>
-              );
-            })}
-          </div>
-
-          <div className="hidden lg:block"></div>
-
-          {/* Mobile version - Only Image */}
-          <div className="block sm:hidden relative z-10 w-full mt-0">
-            <Image
-              src="/images/Banner/Painpoint-3.png"
-              alt="Tutor Painpoints Mobile"
-              width={800}
-              height={1200}
-              className="w-full h-auto object-cover"
-              priority
-            />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
diff --git a/apps/sale/features/landing/components/VideoIntroSection.tsx b/apps/sale/features/landing/components/VideoIntroSection.tsx
new file mode 100644
index 0000000..c8473d7
--- /dev/null
+++ b/apps/sale/features/landing/components/VideoIntroSection.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import {
+  PlayCircle,
+  CheckCircle,
+  Student,
+  ChalkboardTeacher,
+  Handshake,
+} from "@phosphor-icons/react";
+import Image from "next/image";
+
+export function VideoIntroSection() {
+  return (
+    <section className="py-16 lg:py-24 bg-background relative overflow-hidden">
+      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-accent/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3 pointer-events-none" />
+      <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-primary/5 rounded-full blur-3xl translate-y-1/3 -translate-x-1/3 pointer-events-none" />
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-16">
+          {/* Text Content */}
+          <div className="flex-1 text-center lg:text-left space-y-8">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-bold mx-auto lg:mx-0">
+              Khám phá BeeWise
+            </div>
+
+            <h2 className="text-3xl sm:text-4xl lg:text-[2.75rem] font-black text-primary leading-[1.2] font-nunito uppercase">
+              Nền tảng <span className="text-accent">2 trong 1</span>
+            </h2>
+
+            <p className="text-foreground/70 text-base sm:text-lg max-w-2xl mx-auto lg:mx-0 leading-relaxed">
+              BeeWise là nền tảng kết nối trực tiếp học viên với những gia sư
+              chất lượng, giúp quá trình học tập và giảng dạy dễ dàng hơn bao
+              giờ hết.
+            </p>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2">
+              {[
+                {
+                  icon: Student,
+                  title: "Học viên hài lòng",
+                  desc: "Nhiều đánh giá tốt",
+                },
+                {
+                  icon: ChalkboardTeacher,
+                  title: "Gia sư chuyên nghiệp",
+                  desc: "Đã qua kiểm duyệt",
+                },
+                {
+                  icon: Handshake,
+                  title: "Kết nối nhanh chóng",
+                  desc: "Beewise AI",
+                },
+                {
+                  icon: CheckCircle,
+                  title: "An toàn & Minh bạch",
+                  desc: "Đánh giá từ học viên",
+                },
+              ].map((item, idx) => (
+                <div
+                  key={idx}
+                  className="flex items-start gap-4 p-4 rounded-3xl bg-card border border-border shadow-sm hover:shadow-md transition-all hover:-translate-y-1"
+                >
+                  <div className="w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center shrink-0 text-primary">
+                    <item.icon size={26} weight="fill" />
+                  </div>
+                  <div className="text-left">
+                    <h4 className="font-bold font-google-sans text-foreground text-base">
+                      {item.title}
+                    </h4>
+                    <p className="text-sm text-foreground/60 mt-0.5">
+                      {item.desc}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex-1 w-full max-w-2xl lg:max-w-none mx-auto">
+            <div className="relative aspect-[4/3] sm:aspect-video lg:aspect-[4/3] rounded-[2.5rem] overflow-hidden bg-muted shadow-2xl shadow-primary/10 group cursor-pointer border-[10px] border-card">
+              <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-accent/10">
+                <Image
+                  src="https://res.cloudinary.com/dqevxj2k6/image/upload/v1783571337/Banner-1_uob9l0.png"
+                  alt="Video thumbnail"
+                  fill
+                  className="object-cover opacity-60 group-hover:scale-105 transition-transform duration-700 ease-out"
+                />
+              </div>
+
+              <div className="absolute inset-0 bg-black/10 group-hover:bg-black/20 transition-colors duration-300" />
+
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div className="relative group-hover:scale-110 transition-transform duration-300 ease-out">
+                  <div className="absolute inset-0 bg-white rounded-full animate-ping opacity-40 duration-1000" />
+                  <div className="w-20 h-20 sm:w-24 sm:h-24 bg-white/95 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl relative z-10">
+                    <PlayCircle
+                      size={48}
+                      weight="fill"
+                      className="text-primary ml-1 sm:ml-2 sm:w-[56px] sm:h-[56px]"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              {/* Cute floating badge */}
+              <div className="absolute bottom-6 left-6 bg-white/95 backdrop-blur-sm px-5 py-2.5 rounded-2xl font-bold text-sm shadow-xl flex items-center gap-2.5 transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-out text-foreground">
+                <span className="relative flex h-3 w-3">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+                </span>
+                Xem giới thiệu nền tảng
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/sale/features/tutor-guide/components/TutorGuideTrust.tsx b/apps/sale/features/tutor-guide/components/TutorGuideTrust.tsx
index b4dd500..512c50f 100644
--- a/apps/sale/features/tutor-guide/components/TutorGuideTrust.tsx
+++ b/apps/sale/features/tutor-guide/components/TutorGuideTrust.tsx
@@ -1,100 +1,142 @@
+"use client";
+
 import Image from "next/image";
 import {
-  CalendarCheckIcon,
-  ChatCircleTextIcon,
-  ArrowsCounterClockwiseIcon,
-  BellIcon,
-  LockIcon,
-} from "@phosphor-icons/react/dist/ssr";
+  CalendarCheck,
+  ChatCircleText,
+  ArrowsCounterClockwise,
+  Bell,
+  Lock,
+  Headset,
+  ShieldCheck,
+} from "@phosphor-icons/react";
 
-const TRUST_ITEMS = [
+const TRUST_FEATURES = [
   {
     id: "schedule",
-    icon: CalendarCheckIcon,
-    label: "Theo dõi lịch học rõ ràng",
+    icon: CalendarCheck,
+    title: "Theo dõi lịch học rõ ràng",
+    desc: "Cập nhật thời khóa biểu theo thời gian thực, dễ dàng quản lý ca học và buổi dạy trong tuần.",
+    color: "text-blue-600 bg-blue-500/10 border-blue-200",
   },
   {
     id: "history",
-    icon: ChatCircleTextIcon,
-    label: "Quản lý lịch sử trao đổi",
+    icon: ChatCircleText,
+    title: "Quản lý lịch sử trao đổi",
+    desc: "Toàn bộ thông tin bài học, tài liệu và tiến độ đều được lưu trữ tập trung, tiện tra cứu.",
+    color: "text-purple-600 bg-purple-500/10 border-purple-200",
   },
   {
     id: "reconcile",
-    icon: ArrowsCounterClockwiseIcon,
-    label: "Đối soát thông tin minh bạch",
+    icon: ArrowsCounterClockwise,
+    title: "Đối soát thông tin minh bạch",
+    desc: "Hệ thống ghi nhận số buổi dạy chuẩn xác, đảm bảo quyền lợi tài chính công bằng cho cả hai bên.",
+    color: "text-emerald-600 bg-emerald-500/10 border-emerald-200",
+  },
+  {
+    id: "notify",
+    icon: Bell,
+    title: "Nhắc lịch & Thông báo tự động",
+    desc: "Gửi thông báo nhắc nhở trước giờ học qua hệ thống giúp bạn không bao giờ bỏ lỡ buổi học.",
+    color: "text-amber-600 bg-amber-500/10 border-amber-200",
+  },
+  {
+    id: "data",
+    icon: Lock,
+    title: "Lưu trữ dữ liệu an toàn",
+    desc: "Mọi thông tin cá nhân và liên lạc đều được mã hóa bảo mật, chống rò rỉ dữ liệu.",
+    color: "text-teal-600 bg-teal-500/10 border-teal-200",
+  },
+  {
+    id: "support",
+    icon: Headset,
+    title: "Cố vấn hỗ trợ xuyên suốt",
+    desc: "Đội ngũ BeeWise luôn sẵn sàng đồng hành, giải đáp thắc mắc và hỗ trợ trong mọi tình huống.",
+    color: "text-rose-600 bg-rose-500/10 border-rose-200",
   },
-  { id: "notify", icon: BellIcon, label: "Nhắc lịch và thông báo tự động" },
-  { id: "data", icon: LockIcon, label: "Lưu trữ dữ liệu an toàn" },
 ];
 
 export function TutorGuideTrust() {
   return (
     <section
-      className="py-20 sm:py-24 bg-gradient-to-b from-muted/50 to-background"
+      className="py-16 sm:py-24 bg-background relative overflow-hidden"
       aria-labelledby="trust-heading"
+      id="trust-section"
     >
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-          {/* Content left */}
-          <div className="flex flex-col gap-8">
-            <div className="flex flex-col gap-4">
-              <h2
-                id="trust-heading"
-                className="tracking-tight leading-tight text-foreground"
-                style={{
-                  fontFamily: "var(--font-nunito-family)",
-                  fontWeight: 800,
-                  fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
-                }}
-              >
-                An tâm khi đồng hành{" "}
-                <span className="text-accent">cùng BeeWise</span>
-              </h2>
-              <p className="text-foreground/60 leading-relaxed max-w-[48ch]">
-                BeeWise xây dựng quy trình quản lý minh bạch để bảo vệ quyền lợi
-                của cả gia sư và học viên.
-              </p>
-            </div>
+      {/* Ambient background glows */}
+      <div className="pointer-events-none absolute top-1/2 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl -translate-y-1/2" />
+      <div className="pointer-events-none absolute top-1/2 right-1/4 w-96 h-96 bg-accent/10 rounded-full blur-3xl -translate-y-1/2" />
 
-            {/* 2-col tag grid — not a bullet list */}
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              {TRUST_ITEMS.map((item) => {
-                const Icon = item.icon;
-                return (
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        {/* Section Header */}
+        <div className="text-center mb-12 sm:mb-16 flex flex-col items-center gap-3">
+          <span className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary/10 text-primary text-sm font-bold">
+            Minh bạch & An tâm
+          </span>
+
+          <h2
+            id="trust-heading"
+            className="text-3xl sm:text-4xl lg:text-[2.6rem] font-black uppercase text-primary leading-tight font-nunito"
+          >
+            An tâm khi đồng hành{" "}
+            <span className="text-accent">cùng BeeWise</span>
+          </h2>
+
+          <p className="text-foreground/65 text-base sm:text-lg max-w-2xl leading-relaxed">
+            BeeWise xây dựng quy trình quản lý minh bạch để bảo vệ tối đa quyền
+            lợi và tạo dựng niềm tin vững chắc cho cả gia sư và học viên.
+          </p>
+        </div>
+
+        {/* 6 Cards Grid (3 cols on desktop, 2 cols on tablet, 1 col on mobile) */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {TRUST_FEATURES.map((item) => {
+            const Icon = item.icon;
+            return (
+              <div
+                key={item.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 flex flex-col justify-between"
+              >
+                <div className="flex items-start gap-4">
                   <div
-                    key={item.id}
-                    className="flex items-center gap-3 rounded-2xl border border-border bg-card p-4 shadow-sm hover:border-secondary/25 hover:shadow-md transition-all duration-200"
+                    className={`w-12 h-12 rounded-2xl flex items-center justify-center shrink-0 transition-transform duration-300 group-hover:scale-110 ${item.color}`}
                   >
-                    <div
-                      className="shrink-0 w-9 h-9 rounded-xl flex items-center justify-center"
-                      style={{ background: "rgba(255,197,0,0.15)" }}
-                    >
-                      <Icon
-                        size={18}
-                        className="text-accent"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <span className="text-sm text-foreground/75 leading-snug font-medium">
-                      {item.label}
-                    </span>
+                    <Icon size={24} weight="fill" />
+                  </div>
+                  <div className="space-y-1.5 min-w-0">
+                    <h3 className="font-google-sans text-base sm:text-lg text-foreground leading-snug">
+                      {item.title}
+                    </h3>
+                    <p className="text-xs sm:text-sm text-foreground/65 leading-relaxed">
+                      {item.desc}
+                    </p>
                   </div>
-                );
-              })}
-            </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {/* Bottom cute banner with sticker illustration */}
+        <div className="mt-12 p-6 sm:p-8 rounded-3xl bg-gradient-to-r from-primary/10 via-accent/15 to-primary/10 border border-primary/15 flex flex-col sm:flex-row items-center justify-between gap-6">
+          <div className="space-y-2 text-center sm:text-left">
+            <h4 className="text-lg sm:text-xl font-bold text-foreground font-nunito">
+              Bạn cần hỗ trợ thêm thông tin hoặc tư vấn lớp học?
+            </h4>
+            <p className="text-sm text-foreground/70">
+              Đội ngũ cố vấn BeeWise luôn sẵn sàng giải đáp 24/7 mọi thắc mắc
+              của bạn.
+            </p>
           </div>
 
-          {/* Right: Honey potion sticker */}
-          <div className="hidden lg:flex items-center justify-center">
-            <div className="relative">
-              <Image
-                src="/images/Sticker/E3-1.PNG"
-                alt="Bình mật ong BeeWise - An tâm với quy trình minh bạch"
-                width={260}
-                height={280}
-                className="object-contain drop-shadow-xl"
-              />
-            </div>
+          <div className="flex items-center gap-4 shrink-0">
+            <Image
+              src="/images/Sticker/E3-1.PNG"
+              alt="BeeWise Sticker"
+              width={80}
+              height={70}
+              className="object-contain drop-shadow-md"
+            />
           </div>
         </div>
       </div>
diff --git a/apps/sale/public/images/Banner/AIBanner.png b/apps/sale/public/images/Banner/AIBanner.png
new file mode 100644
index 0000000..5232cbd
Binary files /dev/null and b/apps/sale/public/images/Banner/AIBanner.png differ
diff --git a/packages/core/configs/fonts.ts b/packages/core/configs/fonts.ts
index d55a91d..bf72571 100644
--- a/packages/core/configs/fonts.ts
+++ b/packages/core/configs/fonts.ts
@@ -13,6 +13,8 @@ export const googleSans = localFont({
       style: "italic",
     },
   ],
+  display: "swap",
+  preload: false,
   variable: "--font-google-sans",
 });
 
@@ -29,5 +31,7 @@ export const nunito = localFont({
       style: "italic",
     },
   ],
+  display: "swap",
+  preload: false,
   variable: "--font-nunito-family",
 });
diff --git a/packages/core/configs/navbar.ts b/packages/core/configs/navbar.ts
index 76985d6..90e9dfd 100644
--- a/packages/core/configs/navbar.ts
+++ b/packages/core/configs/navbar.ts
@@ -103,7 +103,6 @@ export function resolveNavbarState({
 
 const guestMenu: NavbarItem[] = [
   { label: "Gia sư", href: "/tutors" },
-  { label: "Cách hoạt động", href: "/#how-it-works" },
   { label: "Trở thành gia sư", href: "/tutor-guide" },
   { label: "Về chúng tôi", href: "/about-us" },
 ];
diff --git a/packages/ui/components/StrokeText.tsx b/packages/ui/components/StrokeText.tsx
new file mode 100644
index 0000000..a3d497a
--- /dev/null
+++ b/packages/ui/components/StrokeText.tsx
@@ -0,0 +1,339 @@
+"use client";
+
+import {
+  CSSProperties,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { gsap } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(ScrollTrigger);
+}
+
+export type StrokeTextTrigger = "mount" | "hover" | "scroll" | "loop";
+export type StrokeTextFillMode = "wipe" | "fade" | "none";
+
+export interface StrokeTextProps {
+  text?: string;
+  strokeColor?: string;
+  fillColor?: string;
+  strokeWidth?: number;
+  drawDuration?: number;
+  fillDelay?: number;
+  stagger?: number;
+  ease?: string;
+  trigger?: StrokeTextTrigger;
+  fillMode?: StrokeTextFillMode;
+  fontSize?: number;
+  fontWeight?: number | string;
+  letterSpacing?: number;
+  reverse?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+interface StrokeTextBox {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const DEFAULT_TEXT = "Beewise 2026";
+
+const StrokeText = ({
+  text = DEFAULT_TEXT,
+  strokeColor = "#A78BFA",
+  fillColor = "#F8FAFC",
+  strokeWidth = 1.4,
+  drawDuration = 1.6,
+  fillDelay = 0.2,
+  stagger = 0.05,
+  ease = "power2.out",
+  trigger = "mount",
+  fillMode = "wipe",
+  fontSize = 128,
+  fontWeight = 800,
+  letterSpacing = -4,
+  reverse = false,
+  className = "",
+  style = {},
+}: StrokeTextProps) => {
+  const rootRef = useRef<HTMLSpanElement | null>(null);
+  const strokeTextRef = useRef<SVGTextElement | null>(null);
+  const wipeRectRef = useRef<SVGRectElement | null>(null);
+
+  const [box, setBox] = useState<StrokeTextBox | null>(null);
+
+  const rawId = useId();
+  const wipeId = `stroke-text-wipe-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+
+  const characters = useMemo(() => Array.from(String(text ?? "")), [text]);
+
+  const dash = Math.max(fontSize * 7, 200);
+
+  const fontStyle = useMemo<CSSProperties>(
+    () => ({
+      fontSize: `${fontSize}px`,
+      fontWeight,
+      letterSpacing: `${letterSpacing}px`,
+    }),
+    [fontSize, fontWeight, letterSpacing],
+  );
+
+  useLayoutEffect(() => {
+    const node = strokeTextRef.current;
+    if (!node) return undefined;
+
+    let cancelled = false;
+
+    const measure = () => {
+      if (cancelled || !strokeTextRef.current) return;
+      let bbox: DOMRect | undefined;
+      try {
+        bbox = strokeTextRef.current.getBBox();
+      } catch {
+        return;
+      }
+      if (!bbox || !bbox.width) return;
+
+      const pad = Math.max(Number(strokeWidth) || 1, fontSize * 0.1);
+      const next = {
+        x: bbox.x - pad,
+        y: bbox.y - pad,
+        width: bbox.width + pad * 2,
+        height: bbox.height + pad * 2,
+      };
+
+      setBox((prev) =>
+        prev &&
+        Math.abs(prev.x - next.x) < 0.5 &&
+        Math.abs(prev.width - next.width) < 0.5 &&
+        Math.abs(prev.y - next.y) < 0.5
+          ? prev
+          : next,
+      );
+    };
+
+    measure();
+    if (typeof document !== "undefined" && document.fonts?.ready) {
+      document.fonts.ready.then(measure).catch(() => {});
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [characters, fontSize, fontWeight, letterSpacing, strokeWidth]);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (typeof window === "undefined" || !root || !box) return undefined;
+
+    const strokes = gsap.utils.toArray(
+      root.querySelectorAll("[data-stroke-char]"),
+    );
+    const fills = gsap.utils.toArray(root.querySelectorAll("[data-fill-char]"));
+    const wipe = wipeRectRef.current;
+    if (!strokes.length) return undefined;
+
+    const fillEnabled = fillMode !== "none";
+    const useWipe = fillEnabled && fillMode === "wipe";
+    const fillDuration = Math.max(0.4, drawDuration * 0.5);
+    const staggerConfig: number | gsap.StaggerVars = reverse
+      ? { each: stagger, from: "end" as const }
+      : stagger;
+    const targets = [...strokes, ...fills, wipe].filter(Boolean);
+
+    const setStart = () => {
+      gsap.killTweensOf(targets);
+      gsap.set(strokes, { strokeDasharray: dash, strokeDashoffset: dash });
+      gsap.set(fills, { opacity: useWipe ? 1 : 0 });
+      if (wipe) gsap.set(wipe, { attr: { width: 0 } });
+    };
+
+    const setEnd = () => {
+      gsap.killTweensOf(targets);
+      gsap.set(strokes, { strokeDasharray: dash, strokeDashoffset: 0 });
+      gsap.set(fills, { opacity: fillEnabled ? 1 : 0 });
+      if (wipe)
+        gsap.set(wipe, { attr: { width: fillEnabled ? box.width : 0 } });
+    };
+
+    const prefersReducedMotion = window.matchMedia?.(
+      "(prefers-reduced-motion: reduce)",
+    ).matches;
+    if (prefersReducedMotion) {
+      setEnd();
+      return () => gsap.killTweensOf(targets);
+    }
+
+    const build = () => {
+      setStart();
+      const tl = gsap.timeline({
+        paused: true,
+        repeat: trigger === "loop" ? -1 : 0,
+        repeatDelay: trigger === "loop" ? 0.9 : 0,
+        defaults: { overwrite: "auto" },
+      });
+
+      tl.to(
+        strokes,
+        {
+          strokeDashoffset: 0,
+          duration: drawDuration,
+          ease,
+          stagger: staggerConfig,
+        },
+        0,
+      );
+
+      if (useWipe && wipe) {
+        tl.to(
+          wipe,
+          {
+            attr: { width: box.width },
+            duration: fillDuration,
+            ease: "power2.inOut",
+          },
+          drawDuration + fillDelay,
+        );
+      } else if (fillEnabled) {
+        tl.to(
+          fills,
+          {
+            opacity: 1,
+            duration: fillDuration,
+            ease: "power2.out",
+            stagger: staggerConfig,
+          },
+          drawDuration + fillDelay,
+        );
+      }
+
+      return tl;
+    };
+
+    let timeline: gsap.core.Timeline | null = null;
+    let scrollTrigger: ReturnType<typeof ScrollTrigger.create> | null = null;
+    let removeHover: (() => void) | null = null;
+
+    if (trigger === "hover") {
+      setEnd();
+      const play = () => {
+        timeline?.kill();
+        timeline = build();
+        timeline.play(0);
+      };
+      root.addEventListener("pointerenter", play);
+      removeHover = () => root.removeEventListener("pointerenter", play);
+    } else {
+      timeline = build();
+      if (trigger === "scroll") {
+        scrollTrigger = ScrollTrigger.create({
+          trigger: root,
+          start: "top 82%",
+          once: true,
+          onEnter: () => timeline?.play(0),
+        });
+      } else {
+        timeline.play(0);
+      }
+    }
+
+    return () => {
+      removeHover?.();
+      scrollTrigger?.kill();
+      timeline?.kill();
+      gsap.killTweensOf(targets);
+    };
+  }, [
+    box,
+    dash,
+    drawDuration,
+    fillDelay,
+    stagger,
+    ease,
+    trigger,
+    fillMode,
+    reverse,
+  ]);
+
+  const viewBox = box
+    ? `${box.x} ${box.y} ${box.width} ${box.height}`
+    : `0 ${-fontSize} 600 ${fontSize * 1.3}`;
+
+  return (
+    <span
+      ref={rootRef}
+      className={`block w-full leading-[0] ${trigger === "hover" ? "cursor-pointer" : ""} ${className}`.trim()}
+      style={style}
+      role="img"
+      aria-label={String(text ?? "")}
+    >
+      <svg
+        className="block w-full"
+        style={{ height: `${Math.round(fontSize * 1.3)}px` }}
+        viewBox={viewBox}
+        preserveAspectRatio="xMidYMid meet"
+        aria-hidden="true"
+      >
+        {fillMode === "wipe" && box && (
+          <defs>
+            <clipPath id={wipeId} clipPathUnits="userSpaceOnUse">
+              <rect
+                ref={wipeRectRef}
+                x={box.x}
+                y={box.y}
+                width="0"
+                height={box.height}
+              />
+            </clipPath>
+          </defs>
+        )}
+
+        <text
+          ref={strokeTextRef}
+          className="select-none"
+          x="0"
+          y="0"
+          fill="none"
+          stroke={strokeColor}
+          strokeWidth={strokeWidth}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          style={fontStyle}
+        >
+          {characters.map((char, index) => (
+            <tspan data-stroke-char key={`s-${index}`}>
+              {char}
+            </tspan>
+          ))}
+        </text>
+
+        <text
+          className="select-none"
+          x="0"
+          y="0"
+          fill={fillColor}
+          stroke="none"
+          style={fontStyle}
+          clipPath={fillMode === "wipe" && box ? `url(#${wipeId})` : undefined}
+        >
+          {characters.map((char, index) => (
+            <tspan data-fill-char key={`f-${index}`}>
+              {char}
+            </tspan>
+          ))}
+        </text>
+      </svg>
+    </span>
+  );
+};
+
+export default StrokeText;