Development

apps/sale/app/(guest)/about-us/page.tsx

@@ -0,0 +1,48 @@
+import type { Metadata } from "next";
+import { Header } from "@workspace/ui/components/layout/Header";
+import { Footer } from "@workspace/ui/components/layout/Footer";
+import { AboutHero } from "@/features/about/components/AboutHero";
+import { AboutMission } from "@/features/about/components/AboutMission";
+import { AboutTeam } from "@/features/about/components/AboutTeam";
+import { AboutCta } from "@/features/about/components/AboutCta";
+import { SponsorSection } from "@/features/landing/components/SponsorSection";
+
+export const metadata: Metadata = {
+  title: "Về Chúng Tôi | BeeWise - Nền Tảng Kết Nối Gia Sư",
+  description:
+    "Tìm hiểu về BeeWise — đội ngũ sáng lập, sứ mệnh và giá trị cốt lõi của nền tảng kết nối gia sư và học viên thông minh nhất Việt Nam.",
+  keywords: [
+    "về BeeWise",
+    "đội ngũ BeeWise",
+    "sứ mệnh BeeWise",
+    "nền tảng gia sư",
+    "startup giáo dục",
+    "FPT University",
+  ],
+  openGraph: {
+    title: "Về Chúng Tôi | BeeWise",
+    description:
+      "Tìm hiểu về BeeWise — sứ mệnh kết nối gia sư và học viên minh bạch, chất lượng.",
+    type: "website",
+    locale: "vi_VN",
+    siteName: "BeeWise",
+  },
+};
+
+export default function AboutPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <Header />
+
+      <main id="main-content">
+        <AboutHero />
+        <AboutMission />
+        <AboutTeam />
+        <SponsorSection />
+        <AboutCta />
+      </main>
+
+      <Footer />
+    </div>
+  );
+}

apps/sale/app/(guest)/page.tsx

@@ -9,6 +9,7 @@ import { HowItWorksSection } from "@/features/landing/components/HowItWorksSecti
 import { TutorSection } from "@/features/landing/components/TutorSection";
 import { TutorCarouselSection } from "@/features/landing/components/TutorCarouselSection";
 import { FeedbackSection } from "@/features/landing/components/FeedbackSection";
+import { SponsorSection } from "@/features/landing/components/SponsorSection";
 import { FaqSection } from "@/features/landing/components/FaqSection";
 
 import { TutorGuideTrust } from "@/features/tutor-guide/components/TutorGuideTrust";
@@ -58,6 +59,7 @@ export default function LandingPage() {
         <TutorCarouselSection />
         <TutorSection />
         <FeedbackSection />
+        <SponsorSection />
         <FaqSection />
       </main>
       <Footer />

apps/sale/app/(guest)/tutor-guide/page.tsx

@@ -1,16 +1,16 @@
 import type { Metadata } from "next";
-import { Header } from '@workspace/ui/components/layout/Header';
-import { Footer } from '@workspace/ui/components/layout/Footer';
-import { TutorGuideHero } from '@/features/tutor-guide/components/TutorGuideHero';
-import { TutorGuidePainPoints } from '@/features/tutor-guide/components/TutorGuidePainPoints';
-import { TutorGuideFeatures } from '@/features/tutor-guide/components/TutorGuideFeatures';
-import { TutorGuideSteps } from '@/features/tutor-guide/components/TutorGuideSteps';
-import { TutorGuideFaq } from '@/features/tutor-guide/components/TutorGuideFaq';
-import { TutorGuideCta } from '@/features/tutor-guide/components/TutorGuideCta';
+import { Header } from "@workspace/ui/components/layout/Header";
+import { Footer } from "@workspace/ui/components/layout/Footer";
+import { TutorGuideHero } from "@/features/tutor-guide/components/TutorGuideHero";
+import { TutorGuidePainPoints } from "@/features/tutor-guide/components/TutorGuidePainPoints";
+import { TutorGuideFeatures } from "@/features/tutor-guide/components/TutorGuideFeatures";
+import { TutorGuideSteps } from "@/features/tutor-guide/components/TutorGuideSteps";
+import { TutorGuideFaq } from "@/features/tutor-guide/components/TutorGuideFaq";
+import { TutorGuideCta } from "@/features/tutor-guide/components/TutorGuideCta";
+import { TutorGuideFeedback } from "@/features/tutor-guide/components/TutorGuideFeedback";
 
 export const metadata: Metadata = {
-  title:
-    "Trở Thành Gia Sư BeeWise | Hồ Sơ Xác Thực, Kết Nối Minh Bạch",
+  title: "Trở Thành Gia Sư BeeWise | Hồ Sơ Xác Thực, Kết Nối Minh Bạch",
   description:
     "Tạo hồ sơ gia sư BeeWise miễn phí, xác thực năng lực và kết nối với học viên phù hợp. Cơ chế thu nhập rõ ràng, có đội ngũ hỗ trợ đồng hành.",
   keywords: [
@@ -33,18 +33,20 @@ export default function TutorGuidePage() {
       <main id="main-content">
         <TutorGuideHero />
 
+        <TutorGuideSteps />
+
         <TutorGuidePainPoints />
 
         <TutorGuideFeatures />
 
-        <TutorGuideSteps />
+        <TutorGuideFeedback />
 
-        <TutorGuideFaq />
         <TutorGuideCta />
+
+        <TutorGuideFaq />
       </main>
 
       <Footer />
     </div>
   );
 }
-

apps/sale/features/about/components/AboutCta.tsx

@@ -0,0 +1,48 @@
+import Link from "next/link";
+import { ArrowRight } from "@phosphor-icons/react/dist/ssr";
+
+export function AboutCta() {
+  return (
+    <section className="bg-background px-4 pb-20 sm:px-6 sm:pb-28 lg:px-8">
+      <div className="relative mx-auto max-w-7xl min-h-[360px] sm:min-h-[420px] overflow-hidden rounded-[2.5rem] bg-primary flex items-center">
+        {/* Background pattern */}
+        <div
+          className="pointer-events-none absolute inset-0 opacity-10"
+          style={{
+            backgroundImage: `radial-gradient(circle, rgba(255,197,0,0.5) 1px, transparent 1px)`,
+            backgroundSize: "28px 28px",
+          }}
+        />
+        <div className="pointer-events-none absolute top-0 right-0 w-96 h-96 bg-accent/20 rounded-full blur-3xl" />
+
+        <div className="relative z-10 flex flex-col items-center text-center gap-7 px-6 py-14 sm:px-12 sm:py-18 w-full">
+          <h2 className="font-nunito text-3xl sm:text-4xl lg:text-[2.8rem] font-black uppercase leading-tight text-primary-foreground max-w-[22ch]">
+            Bạn muốn trở thành một phần của{" "}
+            <span className="text-accent">BeeWise</span>?
+          </h2>
+          <p className="text-primary-foreground/75 text-base sm:text-lg max-w-[48ch] leading-relaxed">
+            Dù bạn là học viên đang tìm gia sư, hay một giáo viên muốn đưa chuyên
+            môn đến đúng người — BeeWise đang chờ bạn.
+          </p>
+          <div className="flex flex-wrap justify-center gap-4">
+            <Link
+              href="/tutors"
+              id="about-cta-find-tutor"
+              className="inline-flex min-h-13 items-center gap-2.5 rounded-full bg-accent px-7 text-base font-bold text-accent-foreground shadow-lg shadow-black/10 transition-transform duration-200 hover:-translate-y-0.5 active:translate-y-0"
+            >
+              Tìm gia sư ngay
+              <ArrowRight size={18} weight="bold" aria-hidden="true" />
+            </Link>
+            <Link
+              href="/tutor-guide"
+              id="about-cta-become-tutor"
+              className="inline-flex min-h-13 items-center gap-2.5 rounded-full bg-white/15 border border-white/25 px-7 text-base font-bold text-primary-foreground hover:bg-white/25 transition-all duration-200"
+            >
+              Đăng ký làm gia sư
+            </Link>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/sale/features/about/components/AboutHero.tsx

@@ -0,0 +1,79 @@
+import Image from "next/image";
+import {
+  Sparkle,
+  Users,
+  ShieldCheck,
+  GraduationCap,
+} from "@phosphor-icons/react/dist/ssr";
+
+export function AboutHero() {
+  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>
+
+            <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>
+          </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>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/sale/features/about/components/AboutMission.tsx

@@ -0,0 +1,111 @@
+import {
+  Eye,
+  Rocket,
+  Heart,
+  ShieldCheck,
+  Handshake,
+  Lightbulb,
+} from "@phosphor-icons/react/dist/ssr";
+
+const MISSION_VALUES = [
+  {
+    id: "transparency",
+    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",
+  },
+  {
+    id: "quality",
+    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",
+  },
+  {
+    id: "trust",
+    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",
+  },
+  {
+    id: "impact",
+    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",
+  },
+  {
+    id: "community",
+    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",
+  },
+  {
+    id: "innovation",
+    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",
+  },
+];
+
+export function AboutMission() {
+  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ì?
+          </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ế.
+          </p>
+        </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
+          </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
+                  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">
+                    <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`}
+                    >
+                      <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>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}