Skip to content

Development #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vyngochi merged 2 commits into from
Aug 21, 2026
Merged

Development #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5dd1075
feat: scaffold LMS portal components and landing pages with dynamic n…
vyngochi Aug 21, 2026
fa4ae35
Merge pull request #95 from bee-wise/feat/update-lms
vyngochi Aug 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion apps/lms/app/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import type { Metadata } from "next";
import { LmsHeader } from "@/features/portal/components/LmsHeader";
import { LmsHeroSection } from "@/features/portal/components/LmsHeroSection";
import { DualRoleFeatureGrid } from "@/features/portal/components/DualRoleFeatureGrid";
import { LmsAIFeaturesSection } from "@/features/portal/components/LmsAIFeaturesSection";
import { ClassActivationShowcase } from "@/features/portal/components/ConsultantShowcase";
import { FaqAndCtaSection } from "@/features/portal/components/FaqAndCtaSection";

export const metadata: Metadata = {
title: "BeeWise LMS — Hệ Thống Quản Lý Học Tập Thông Minh",
title: "BeeWise LMS | Hệ Thống Quản Lý Học Tập Thông Minh",
description:
"Không gian làm việc và học tập của Gia sư và Học viên. Số hóa lịch trình, lưu trữ tài liệu và tối ưu hóa hiệu quả dạy & học trên BeeWise LMS.",
};
Expand All @@ -17,6 +18,7 @@ export default function LmsHomePage() {
<LmsHeader />
<LmsHeroSection />
<DualRoleFeatureGrid />
<LmsAIFeaturesSection />
<ClassActivationShowcase />
<FaqAndCtaSection />
</main>
Expand Down
2 changes: 1 addition & 1 deletion apps/lms/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { googleSans, nunito } from "@workspace/core/configs/fonts";
import { TooltipProvider } from "@workspace/ui/components/ui/tooltip";

export const metadata: Metadata = {
title: "BeeWise LMS — Hệ Thống Quản Lý Học Tập Thông Minh",
title: "BeeWise LMS | Hệ Thống Quản Lý Học Tập Thông Minh",
};

export default function RootLayout({
Expand Down
299 changes: 60 additions & 239 deletions apps/lms/features/portal/components/ConsultantShowcase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,251 +1,72 @@
"use client";

import { useRef } from "react";
import { motion, useInView } from "motion/react";
import {
Lightning,
GraduationCap,
ChalkboardTeacher,
CheckCircle,
ArrowsClockwise,
ShieldCheck,
CalendarCheck,
BookOpen,
} from "@phosphor-icons/react";

const ease = [0.22, 1, 0.36, 1] as const;

/* ───────────────────────────────────────────
Activation Flow Mockup Widget
─────────────────────────────────────────── */

function ActivationFlowWidget() {
return (
<div className="bg-white rounded-2xl p-4 shadow-lg shadow-[#0c0c0b]/10 border border-[#0c0c0b]/6 max-w-sm">
{/* System message header */}
<div className="flex items-center gap-2 mb-3">
<div className="w-7 h-7 rounded-full bg-[#280f91] flex items-center justify-center">
<ArrowsClockwise size={13} weight="bold" className="text-white" />
</div>
<div>
<p className="text-[10px] font-bold text-[#280f91]">
Hệ thống BeeWise
</p>
<p className="text-[8px] text-[#0c0c0b]/40">
Kích hoạt tự động · Vừa xong
</p>
</div>
</div>

{/* Activation details */}
<div className="bg-[#280f91]/5 rounded-xl p-3 mb-3">
<p className="text-[11px] text-[#0c0c0b] leading-relaxed mb-2">
<strong>Yêu cầu kích hoạt lớp học mới</strong>
</p>
<div className="flex flex-col gap-1.5 text-[9px] text-[#0c0c0b]/60">
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#0c0c0b]/70">Học viên:</span>
<span>Nguyễn Văn Minh</span>
</div>
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#0c0c0b]/70">Gia sư:</span>
<span>Trần Thị Hương</span>
</div>
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#0c0c0b]/70">Môn học:</span>
<span>Theo thỏa thuận</span>
</div>
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#0c0c0b]/70">Lịch học:</span>
<span>T3, T5 · 14:00 - 15:30</span>
</div>
<div className="flex items-center gap-1.5">
<span className="font-semibold text-[#0c0c0b]/70">Đơn giá:</span>
<span className="font-bold text-[#280f91]">220,000₫/buổi</span>
</div>
</div>
</div>

{/* Activation steps */}
<div className="flex flex-col gap-2 mb-3">
{[
{ label: "Xác nhận thông tin lớp học", done: true },
{ label: "Thiết lập lịch trình tự động", done: true },
{ label: "Cấp quyền truy cập LMS", done: true },
].map((step) => (
<div key={step.label} className="flex items-center gap-2">
<CheckCircle
size={14}
weight="fill"
className="text-[#447353] shrink-0"
/>
<span className="text-[10px] font-medium text-[#0c0c0b]/70">
{step.label}
</span>
</div>
))}
</div>

{/* Status footer */}
<div className="flex items-center gap-1.5 pt-2 border-t border-[#0c0c0b]/6">
<ShieldCheck size={11} weight="fill" className="text-[#447353]" />
<p className="text-[8px] text-[#447353] font-semibold">
Lớp học đã kích hoạt — Cả hai bên có thể truy cập LMS ngay
</p>
</div>
</div>
);
}

/* ───────────────────────────────────────────
Main Component
─────────────────────────────────────────── */
const steps = [
{ title: "Kết nối", body: "Học viên tìm gia sư phù hợp trên BeeWise." },
{
title: "Thống nhất lớp học",
body: "Hai bên trao đổi lịch học, học phí và mục tiêu.",
},
{
title: "BeeWise kích hoạt LMS",
body: "Tư vấn viên xác nhận và hệ thống mở không gian lớp học.",
},
{
title: "Cùng theo dõi tiến độ",
body: "Lịch, tài liệu và trạng thái lớp luôn được cập nhật.",
},
] as const;

export function ClassActivationShowcase() {
const ref = useRef(null);
const inView = useInView(ref, { once: true, margin: "-80px" });

return (
<section
id="activation"
className="py-20 lg:py-28 bg-[#280f91] overflow-hidden relative"
id="how-it-works"
className="scroll-mt-20 bg-[#f1eef8] py-20 sm:py-24 lg:py-28"
>
{/* Dot grid pattern overlay */}
<div
className="absolute inset-0 opacity-[0.05]"
style={{
backgroundImage:
"radial-gradient(circle, #ffffff 1px, transparent 1px)",
backgroundSize: "32px 32px",
}}
/>
<div className="hidden md:block absolute bottom-0 left-1/2 -translate-x-1/2 w-[500px] h-[200px] bg-[#ffc500]/8 blur-[100px]" />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div
ref={ref}
className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center"
>
{/* Left: Content */}
<motion.div
initial={{ opacity: 0, y: 28 }}
animate={inView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, ease }}
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="max-w-2xl">
<p className="text-sm font-extrabold text-[#280f91]">
BeeWise vận hành lớp học cùng bạn
</p>
<h2
className="mt-4 text-3xl font-extrabold tracking-[-0.035em] text-primary sm:text-4xl lg:text-5xl"
style={{ fontFamily: "var(--font-nunito-family)" }}
>
<h2
className="text-3xl md:text-4xl lg:text-[44px] leading-tight tracking-tight text-white mb-5"
style={{ fontFamily: "var(--font-nunito-family)", fontWeight: 800 }}
>
Consultant Xác Nhận,{" "}
<span className="text-[#ffc500]">Hệ Thống Kích Hoạt</span>
</h2>
<p className="text-white/65 text-base leading-relaxed mb-8 max-w-[480px]">
Khi học viên và gia sư thống nhất trong Chat Room, Consultant
xác nhận kết nối thành công. Hệ thống tự động tạo lớp học,
thiết lập lịch trình và cấp quyền LMS cho cả hai bên.
</p>

{/* Activation flow steps */}
<div className="flex flex-col gap-4 mb-8">
{[
{
icon: GraduationCap,
step: "Trao đổi trong Chat Room",
desc: "Học viên, gia sư và Consultant cùng thảo luận về nhu cầu, lịch học, học phí và hình thức học.",
},
{
icon: ChalkboardTeacher,
step: "Consultant xác nhận kết nối",
desc: "Khi hai bên đồng ý, Consultant xác nhận và hệ thống tạo hợp đồng lớp học.",
},
{
icon: Lightning,
step: "LMS tự động mở quyền",
desc: "Lịch học, kho tài liệu và quản lý học phí sẵn sàng cho cả gia sư và học viên.",
},
].map((item, i) => {
const Icon = item.icon;
return (
<motion.div
key={item.step}
initial={{ opacity: 0, x: -20 }}
animate={inView ? { opacity: 1, x: 0 } : {}}
transition={{
duration: 0.5,
delay: 0.15 + i * 0.08,
ease,
}}
className="flex items-start gap-3"
>
<div className="w-9 h-9 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
<Icon
size={18}
weight="fill"
className="text-[#ffc500]"
/>
</div>
<div>
<p
className="text-sm font-bold text-white mb-0.5"
style={{ fontFamily: "var(--font-nunito-family)" }}
>
{item.step}
</p>
<p className="text-xs text-white/55 leading-relaxed">
{item.desc}
</p>
</div>
</motion.div>
);
})}
</div>

{/* Automation highlight */}
<motion.div
initial={{ opacity: 0, y: 12 }}
animate={inView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.4, ease }}
className="inline-flex items-center gap-3 bg-white/8 rounded-xl px-4 py-2.5 border border-white/10"
Kích hoạt <span className="text-[#ffc500]">SuperLMS</span> dễ dàng
khi tham gia BeeWise
</h2>
<p className="mt-5 text-base leading-7 text-[#37333d]/65">
Quy trình rõ ràng giúp gia sư và học viên bắt đầu nhanh.
</p>
</div>
<ol className="mt-14 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
{steps.map((step, index) => (
<li
key={step.title}
className="rounded-2xl bg-white p-6 shadow-[0_12px_36px_rgba(40,15,145,0.06)]"
>
<p className="text-[11px] font-semibold text-white/80">
Consultant đồng hành toàn bộ quy trình — từ kết nối đến kích hoạt lớp học
<span className="text-sm font-extrabold text-[#280f91]/45">
0{index + 1}
</span>
<h3
className="mt-8 text-lg font-extrabold text-[#17141b]"
style={{ fontFamily: "var(--font-nunito-family)" }}
>
{step.title}
</h3>
<p className="mt-3 text-sm leading-6 text-[#37333d]/65">
{step.body}
</p>
</motion.div>
</motion.div>

{/* Right: Activation Flow Widget */}
<motion.div
initial={{ opacity: 0, x: 28 }}
animate={inView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.7, delay: 0.15, ease }}
className="flex justify-center lg:justify-end"
</li>
))}
</ol>
<div className="mt-8 flex flex-col justify-between gap-5 rounded-2xl bg-[#280f91] px-6 py-6 text-white sm:flex-row sm:items-center sm:px-8">
<p className="max-w-2xl text-sm font-semibold leading-6 text-white/82 sm:text-base">
Mỗi khi gặp khó khăn, tư vấn viên BeeWise luôn đồng hành cùng bạn
</p>
<a
href="#faq"
className="whitespace-nowrap text-sm font-extrabold text-[#ffc500] underline decoration-[#ffc500]/35 underline-offset-4 hover:decoration-[#ffc500]"
>
<div className="relative">
<ActivationFlowWidget />

{/* Floating accent */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={inView ? { opacity: 1, scale: 1 } : {}}
transition={{ delay: 0.6, duration: 0.4 }}
className="absolute -top-4 -left-4 bg-[#ffc500] rounded-full px-3 py-1.5 shadow-lg"
>
<div className="flex items-center gap-1.5">
<Lightning
size={11}
weight="fill"
className="text-[#0c0c0b]"
/>
<span
className="text-[9px] font-bold text-[#0c0c0b]"
style={{ fontFamily: "var(--font-nunito-family)" }}
>
Kích hoạt tự động
</span>
</div>
</motion.div>
</div>
</motion.div>
Tìm hiểu thêm
</a>
</div>
</div>
</section>
Expand Down
Loading
Loading