diff --git a/aimba.js b/aimba.js new file mode 100644 index 00000000..1548dc03 --- /dev/null +++ b/aimba.js @@ -0,0 +1,9 @@ +let path = require('path'); +let express = require('express'); +let router = express.Router(); + +router.get('/', (req, res) => { + res.sendFile(path.resolve(__dirname, 'dist/aimba.html')); +}); + +module.exports = router; diff --git a/public/img/fiddlehead_128.png b/public/img/fiddlehead_128.png deleted file mode 100644 index cea8f097..00000000 Binary files a/public/img/fiddlehead_128.png and /dev/null differ diff --git a/server.js b/server.js index 649417c5..c2dd14b0 100644 --- a/server.js +++ b/server.js @@ -15,6 +15,8 @@ app.use('/gomoku', require('./gomoku')); app.use('/cotuongpc1', require('./cotuongpc1')); +app.use('/aimba', require('./aimba')); + app.use((req, res) => { res.sendFile(path.resolve(__dirname, 'dist/main.html')); }); diff --git a/src/aimba/AiMBA.js b/src/aimba/AiMBA.js new file mode 100644 index 00000000..c114c257 --- /dev/null +++ b/src/aimba/AiMBA.js @@ -0,0 +1,37 @@ +import './common.less'; +import './AiMBA.less'; +import {TopBar} from './top-bar'; +import {Header} from './header'; +import {StudySystem} from './study-system'; +import {Resources} from './resources'; +import {Modules} from './modules'; +import {OurSolution} from './our-solution'; +import {CoreValues} from './core-values'; +import {Features} from './features'; +import {LearningStrategy} from './learning-strategy'; +import {TargetAudience} from './target-audience'; +import {Enrollment} from './enrollment'; +import {FrequentlyAskedQuestions} from './frequently-asked-questions'; +import {Footer} from './footer'; +import {BeingTrusted} from './being-trusted'; + +export let AiMBA = () => { + return ( +
+ +
+ + + + + + + + + + + +
+ ); +}; diff --git a/src/aimba/AiMBA.less b/src/aimba/AiMBA.less new file mode 100644 index 00000000..0e6cece2 --- /dev/null +++ b/src/aimba/AiMBA.less @@ -0,0 +1,2 @@ +.AiMBA { +} diff --git a/src/aimba/AiMba.js b/src/aimba/AiMba.js new file mode 100644 index 00000000..c114c257 --- /dev/null +++ b/src/aimba/AiMba.js @@ -0,0 +1,37 @@ +import './common.less'; +import './AiMBA.less'; +import {TopBar} from './top-bar'; +import {Header} from './header'; +import {StudySystem} from './study-system'; +import {Resources} from './resources'; +import {Modules} from './modules'; +import {OurSolution} from './our-solution'; +import {CoreValues} from './core-values'; +import {Features} from './features'; +import {LearningStrategy} from './learning-strategy'; +import {TargetAudience} from './target-audience'; +import {Enrollment} from './enrollment'; +import {FrequentlyAskedQuestions} from './frequently-asked-questions'; +import {Footer} from './footer'; +import {BeingTrusted} from './being-trusted'; + +export let AiMBA = () => { + return ( +
+ +
+ + + + + + + + + + + +
+ ); +}; diff --git a/src/aimba/AiMba.less b/src/aimba/AiMba.less new file mode 100644 index 00000000..0e6cece2 --- /dev/null +++ b/src/aimba/AiMba.less @@ -0,0 +1,2 @@ +.AiMBA { +} diff --git a/src/aimba/being-trusted/BeingTrusted.js b/src/aimba/being-trusted/BeingTrusted.js new file mode 100644 index 00000000..0cfb2549 --- /dev/null +++ b/src/aimba/being-trusted/BeingTrusted.js @@ -0,0 +1,54 @@ +import './BeingTrusted.less'; +import {Slider} from '../slider'; + +export let BeingTrusted = () => { + let feedbackData = [ + { + avatar: '1', + name: 'Anh Nguyễn Bảo An', + description: 'Chuyên gia phân tích tài chính', + feedback: 'Tôi từng cân nhắc học MBA nhưng chi phí, công sức và thời gian nghỉ việc hiện tại là rào cản quá lớn. Với AiMBA, chỉ sau vài giờ học tôi đã có thể áp dụng ngay kiến thức vào công việc và thấy kết quả rõ rệt trong hiệu suất đội nhóm, giúp 1 dự án marketing tối ưu 15% chi phí nhờ cách phân tích tình huống. Sếp tôi đã rất hài lòng.' + }, + { + avatar: '2', + name: 'Chị Trần Ngọc Lan', + description: 'Chuyên gia phân tích tài chính', + feedback: 'Điều tôi ấn tượng nhất ở AiMBA là mọi kiến thức MBA không còn nằm trong sách vở, mà được đặt thẳng vào những tình huống doanh nghiệp Việt Nam. Thay vì học SWOT hay BSC theo lý thuyết, tôi được thực hành trên case thực tế và thấy ngay cách áp dụng vào công việc. Đây là điểm khác biệt mà tôi rất thích.' + }, + { + avatar: '3', + name: 'Anh Nguyễn Quốc Anh', + description: 'Chuyên gia phân tích tài chính', + feedback: 'Tôi từng cân nhắc học MBA nhưng chi phí, công sức và thời gian nghỉ việc hiện tại là rào cản quá lớn. Với AiMBA, chỉ sau vài giờ học tôi đã có thể áp dụng ngay kiến thức vào công việc và thấy kết quả rõ rệt trong hiệu suất đội nhóm, giúp 1 dự án marketing tối ưu 15% chi phí nhờ cách phân tích tình huống. Sếp tôi đã rất hài lòng.' + }, + ]; + + return ( +
+
+

Được tin tưởng bởi hơn 1.024 chuyên gia/managers/CEOs

+
Truy cập mở đến kho tàng tri thức kinh doanh
+
+
+ ({ + id: `${name}, ${avatar}`, + render: () => ( +
+
+
+
+
+
{name}
+
{description}
+ +
+ ) + }))} + /> +
+
+ ); +}; diff --git a/src/aimba/being-trusted/BeingTrusted.less b/src/aimba/being-trusted/BeingTrusted.less new file mode 100644 index 00000000..b3c9c888 --- /dev/null +++ b/src/aimba/being-trusted/BeingTrusted.less @@ -0,0 +1,103 @@ +@import '../media.less'; + +.BeingTrusted { + padding: 40px 0; + + .heading { + margin: auto; + max-width: 1200px; + padding: 0 15px; + + .title { + font-size: 32px; + font-weight: 700; + text-align: center; + } + + .description { + margin-top: 13px; + font-size: 16px; + color: #474747; + text-align: center; + } + } + + .feedbacks { + margin: 23px auto 0; + max-width: 1290px; + + .Slider { + --slide-width: 369px; + --slide-height: 508px; + --slide-spacing: 30px; + --slide-padding: 60px; + margin: auto; + + .media-current-max(400px, { + --slide-width: 100%; + --slide-padding: 30px; + }); + + .media-current-between(401px, 600px, { + --slide-width: 100%; + --slide-spacing: 60px; + --slide-padding: 30px; + + .SliderSlideShow { + width: 100%; + max-width: calc(369px + 60px); + } + }); + + .media-current-between(900px, 1100px, { + width: 100%; + max-width: calc(2 * var(--slide-width) + var(--slide-spacing) + 2 * var(--slide-padding)); + }); + } + + .card { + padding: 28px 32px; + border-radius: 10px; + box-shadow: 0 0 20px 0 #00000040; + + .avatar { + display: flex; + justify-content: center; + align-items: center; + + .rounded-image { + width: 119px; + height: 119px; + border-radius: 100%; + overflow: hidden; + background: lightgrey; + } + } + + .name { + margin-top: 23px; + font-size: 17px; + font-weight: 700; + text-align: center; + } + + .description { + margin-top: 5px; + font-size: 15px; + color: #4E4D4D; + text-align: center; + } + + .feedback { + padding: 0 10px; + margin-top: 24px; + font-size: 15px; + line-height: 20px; + color: #4E4D4D; + height: 180px; + overflow: auto; + scrollbar-width: thin; + } + } + } +} diff --git a/src/aimba/being-trusted/index.js b/src/aimba/being-trusted/index.js new file mode 100644 index 00000000..e4e73942 --- /dev/null +++ b/src/aimba/being-trusted/index.js @@ -0,0 +1 @@ +export * from './BeingTrusted'; diff --git a/src/aimba/common.less b/src/aimba/common.less new file mode 100644 index 00000000..2724f86e --- /dev/null +++ b/src/aimba/common.less @@ -0,0 +1,48 @@ +* { + margin: 0; + padding: 0; + position: relative; + box-sizing: border-box; +} + +html { + font-family: Segoe UI, Arial; + font-size: 16px; + color: #1F1F1F; +} + +textarea, input, button, select { + font-family: inherit; + font-size: inherit; + color: inherit; + outline: none; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; + color: inherit; + cursor: default; + + &[href] { + cursor: pointer; + } +} + +button { + background: none; + border: none; + box-shadow: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + font-size: inherit; + padding: 0; + appearance: none; +} + +no-break { + display: inline-block; +} diff --git a/src/aimba/core-values/CoreValues.js b/src/aimba/core-values/CoreValues.js new file mode 100644 index 00000000..9f013d8c --- /dev/null +++ b/src/aimba/core-values/CoreValues.js @@ -0,0 +1,43 @@ +import {DocumentReport, GearChecklist, HandMoney, PersonGrowth, RobotSmile, StudentLaptop} from '../pictogram'; +import './CoreValues.less'; + +export let CoreValues = () => { + let data = [ + ['DocumentReport', 'Nắm vững hệ thống kiến thức nền tảng MBA chuẩn quốc tế: quản trị nhân sự, marketing, tài chính, chiến lược và vận hành.'], + ['PersonGrowth', 'Mài sắc tư duy quản lý – rèn luyện trực tiếp qua hàng trăm tình huống thực chiến,ứng dụng tạo hiệu quả công việc ngay.'], + ['GearChecklist', 'Khắc phục tình trạng gặp case khó khi áp dụng MBA vào thực tế khi mọi kiến thức đều được kết nối với tình huống thật.'], + ['StudentLaptop', 'Học tập linh hoạt theo tiến độ cá nhân, phát triển đúng năng lực mình cần mà không phải học dàn trải.'], + ['HandMoney', 'Học viên được trang bị kiến thức chuyên sâu về quản trị, từ tài chính, marketing đến vận hành, giúp hiểu rõ cách một doanh nghiệp hoạt động.'], + ['RobotSmile', 'Luôn có cố vấn AI thông minh hỗ trợ trong quá trình học tập và đồng hành công việc.'], + ]; + + let pictograms = { + DocumentReport, + PersonGrowth, + GearChecklist, + StudentLaptop, + HandMoney, + RobotSmile + }; + + return ( +
+

Giá trị nhận được khi đầu tư AiMBA

+
+
+
    + {data.map(([picName, text]) => { + let Pictogram = pictograms[picName]; + return ( +
  • +
    +
    +
    {text}
    +
    • + ); + })} +
+
+
+ ); +}; diff --git a/src/aimba/core-values/CoreValues.less b/src/aimba/core-values/CoreValues.less new file mode 100644 index 00000000..cf532a51 --- /dev/null +++ b/src/aimba/core-values/CoreValues.less @@ -0,0 +1,88 @@ +@import '../media.less'; + +.CoreValues { + background: #0F46A2; + padding: 48px 0 56px; + + > .title { + margin: auto; + max-width: 1170px; + padding: 0 15px; + font-size: 32px; + font-weight: 700; + text-align: center; + color: white; + } + + > .divider { + margin: 19px auto 0; + width: 105px; + height: 2px; + background: white; + } + + > .values { + margin: 39px auto 0; + max-width: 1170px; + padding: 0 15px; + + ul { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + + .media-current-max(600px, { + display: flex; + flex-direction: column; + }); + + li { + border-radius: 10px; + background: #0891D8; + padding: 24px 20px; + gap: 18px; + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + + .media-current-between(601px, 800px, { + flex-direction: column; + align-items: center; + }); + + .pictogram { + border-radius: 100%; + background: white; + display: flex; + justify-content: center; + align-items: center; + width: 80px; + height: 80px; + min-width: 80px; + min-height: 80px; + } + + .divider { + margin: 4px 0; + background: white; + height: 72px; + min-width: 1px; + max-width: 1px; + + .media-current-between(601px, 800px, { + height: 1px; + min-width: 72px; + max-width: 72px; + }); + } + + .text { + font-size: 17px; + line-height: 24px; + color: white; + } + } + } + } +} diff --git a/src/aimba/core-values/index.js b/src/aimba/core-values/index.js new file mode 100644 index 00000000..0a2456af --- /dev/null +++ b/src/aimba/core-values/index.js @@ -0,0 +1 @@ +export * from './CoreValues'; diff --git a/src/aimba/enrollment/Enrollment.js b/src/aimba/enrollment/Enrollment.js new file mode 100644 index 00000000..1e72c24d --- /dev/null +++ b/src/aimba/enrollment/Enrollment.js @@ -0,0 +1,74 @@ +import {CircleCheck, Gift} from '../icons'; +import './Enrollment.less'; + +export let Enrollment = () => { + const data = [ + 'Truy cập đầy đủ 1048+ case study', + '250+ khối lý thuyết được kiến giải chi tiết', + 'Kho tài nguyên: 50+ Brand Stories, 40+ Business Models', + '24+ phân tích sách kinh doanh nổi tiếng', + 'Cố vấn AI thông minh', + 'Chứng nhận hoàn thành cho từng module' + ]; + + return ( +
+
+
+

Gói ưu đãi đặc biệt

+
+
+
Còn: 1.490.000 VNĐ
+
Giá gốc: 9.500.000
+
+
+
    +
  • + + Đã bao gồm VAT +
    • +
  • + + Quyền truy cập 1 năm +
    • +
+
+
+
+
    + {data.map(text => ( +
  • + + {text} +
    • + ))} +
+
+
+
+
+

Chỉ từ 699.000 VNĐ

+

Dành cho 50 học viên đầu tiên!

+
+
+
Ưu đãi có hạn, đăng ký ngay để không bỏ lỡ
+
+ 14 Giờ + 24 Phút + 44 Giây +
+
+
+
+ + + + +
+ +
+
+
+
+ ); +}; diff --git a/src/aimba/enrollment/Enrollment.less b/src/aimba/enrollment/Enrollment.less new file mode 100644 index 00000000..c334eaef --- /dev/null +++ b/src/aimba/enrollment/Enrollment.less @@ -0,0 +1,293 @@ +@import '../media.less'; + +.Enrollment { + background: linear-gradient(to right, #122D6E, #166690); + + > .container { + margin: auto; + max-width: 1230px; + padding: 54px 30px; + gap: 36px; + display: grid; + grid-template-columns: 1.12fr 1fr; + align-items: center; + + .media-current-max(1100px, { + display: flex; + flex-direction: column; + align-items: center; + }); + + .details { + width: 100%; + max-width: 600px; + + .title { + font-size: 36px; + font-weight: 700; + text-transform: uppercase; + background-image: linear-gradient(to bottom, #FDE2A3, #FAA714); + background-clip: text; + -webkit-text-fill-color: transparent; + color: #FAA714; + text-align: center; + text-shadow: 0 4px 4px 0 #00000040; + } + + .pricing { + margin-top: 24px; + display: flex; + flex-direction: row; + align-items: center; + gap: 15px; + + .media-current-max(600px, { + flex-direction: column; + }); + + .price { + flex-grow: 1; + padding: 16px 40px; + border-radius: 8px; + background: linear-gradient(to bottom, #FEEBB8, #FAA714); + text-align: center; + + .sale-price { + font-size: 24px; + font-weight: 900; + color: #CC0C05; + } + + .original-price { + font-size: 24px; + font-weight: 500; + text-decoration: line-through; + } + } + + .tips { + color: white; + font-size: 17px; + font-weight: 700; + + ul { + display: flex; + flex-direction: column; + gap: 8px; + + li { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + + i { + display: block; + width: 7px; + height: 7px; + border-radius: 100%; + background: white; + } + } + } + } + } + + .checklist { + margin-top: 30px; + padding: 26px; + background: linear-gradient(to bottom, #1691DE, #1053C7); + border: 1px solid #FFFFFF57; + border-radius: 13px; + color: white; + font-size: 17px; + font-weight: 600; + + ul { + display: flex; + flex-direction: column; + gap: 14px; + + li { + display: flex; + flex-direction: row; + align-items: center; + gap: 16px; + } + } + } + } + + .form-box { + background: #F1F3F4; + border-radius: 13px; + padding: 28px 30px 25px; + width: 100%; + max-width: 600px; + + .headlines { + font-size: 25px; + font-weight: 700; + text-align: center; + display: flex; + flex-direction: column; + gap: 12px; + + strong { + font-weight: 900; + font-size: 32px; + color: #CB0B05; + } + + b { + font-weight: 900; + color: #CB0B05; + } + } + + .timing { + margin: 22px 20px 0; + padding: 11px; + border-radius: 10px; + border: 2px dashed #1E469E; + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + + .media-current-max(600px, { + margin: 22px 0 0; + }); + + .description { + color: #1E469E; + font-size: 17px; + font-weight: 700; + text-align: center; + } + + .countdown { + display: grid; + grid-template: + "hv mv sv" + "hu mu su" + / 1fr 1fr 1fr; + gap: 7px 19px; + align-items: center; + justify-content: center; + + .media-current-max(400px, { + gap: 7px 10px; + }); + + .hv { grid-area: hv; } + .hu { grid-area: hu; } + + .mv { grid-area: mv; } + .mu { grid-area: mu; } + + .sv { grid-area: sv; } + .su { grid-area: su; } + + b { + display: block; + width: 64px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + background: linear-gradient(to bottom, #1F50A4, #2669DD); + color: white; + font-size: 22px; + font-weight: 700; + border-radius: 5px; + align-self: center; + justify-self: center; + + .media-current-max(400px, { + width: 40px; + height: 30px; + font-size: 20px; + }); + } + + i { + display: block; + width: 100%; + font-style: normal; + font-size: 15px; + color: #595454; + text-align: center; + align-self: center; + justify-self: center; + + .media-current-max(400px, { + width: 40px; + }); + } + } + } + + form { + margin: 24px 20px 0; + display: flex; + flex-direction: column; + gap: 26px; + + .media-current-max(600px, { + margin: 24px 0 0; + }); + + .fields { + display: flex; + flex-direction: column; + gap: 14px; + } + + input { + display: block; + width: 100%; + height: 46px; + padding: 0 18px; + background: white; + border: 1px solid #DDD9D9; + border-radius: 4px; + + &::placeholder { + color: #595454; + } + + &:focus { + border-color: #2669DD; + outline: 3px solid #2669DD66; + + &::placeholder { + color: #ADAAAA; + } + } + } + + button { + display: block; + width: 100%; + min-height: 50px; + border-radius: 25px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + cursor: pointer; + background: linear-gradient(to bottom, #FAA714, #D37101); + font-size: 18px; + font-weight: 900; + color: white; + + &:focus { + outline: 3px solid #2669DD66; + } + } + } + } + } +} diff --git a/src/aimba/enrollment/index.js b/src/aimba/enrollment/index.js new file mode 100644 index 00000000..62947e3f --- /dev/null +++ b/src/aimba/enrollment/index.js @@ -0,0 +1 @@ +export * from './Enrollment'; diff --git a/src/aimba/features/Features.js b/src/aimba/features/Features.js new file mode 100644 index 00000000..b3b9ed8d --- /dev/null +++ b/src/aimba/features/Features.js @@ -0,0 +1,42 @@ +import {CircleFeatures, Logo} from '../pictogram'; +import './Features.less'; + +export let Features = () => { + let data = { + lt: ['Phương pháp thiết kế ngược', 'Bắt đầu từ 1048+ case study thực tế, đi ngược lại chắt lọc 250+ khối lý thuyết quan trọng nhất. Học để làm được ngay!'], + lm: ['Bản địa hóa cho thị trường Việt Nam', 'Từ "Nghệ thuật quan hệ", "Vượt qua tâm lý cả nể" đến "Quản trị doanh nghiệp gia đình" - giải quyết thách thức quản trị đặc thù Việt Nam.'], + lb: ['Cung cấp nội dung chất lượng Expert-Grade', 'Chất lượng cấp độ chuyên gia với các thử thách mô phỏng khắt khe, đòi hỏi tư duy thấu đáo toàn diện để tìm giải pháp tối ưu.'], + rt: ['Học tập thư giãn với tính năng Voice Reader', 'Công nghệ đọc tài liệu bằng giọng nói giúp bạn nghe bài học mọi lúc, mọi nơi tiện lợi, hiệu quả & thư giãn.'], + rm: ['Học trực tuyến linh hoạt theo nhu cầu', '15 module chuyên biệt, học theo tiến độ cá nhân. Không cần nghỉ làm, vẫn phát triển sự nghiệp.'], + rb: ['Trợ lý quản trị AI 24/7', 'Tận dụng các promt - template và câu hỏi thông minh để giải quyết vấn đề nhanh.'], + }; + + return ( +
+
+

Cách AiMBA giúp bạn bứt phá

+
+
+
+
+
+ + + +
+ {['lt', 'lm', 'lb', 'rt', 'rm', 'rb'].map(position => { + let [title, description] = data[position]; + return ( +
+
{title}
+
+
{description}
+
+
+ ); + })} +
+
+
+ ); +}; diff --git a/src/aimba/features/Features.less b/src/aimba/features/Features.less new file mode 100644 index 00000000..bba4f4b4 --- /dev/null +++ b/src/aimba/features/Features.less @@ -0,0 +1,185 @@ +@import '../media.less'; + +.Features { + padding: 60px 0 30px; + background: linear-gradient(to bottom, #EAF8FF, white 60%, white); + + > .heading { + max-width: 1170px; + padding: 0 15px; + margin: auto; + display: flex; + flex-direction: column; + align-items: center; + + .title { + font-size: 32px; + font-weight: 700; + text-align: center; + } + + .divider { + background: #008FD4; + height: 2px; + width: 105px; + margin-top: 21px; + } + } + + > .visualisation { + margin: auto; + max-width: 1170px; + padding: 60px 15px; + overflow: hidden; + + .grid { + display: grid; + grid-template: + "lt central rt" + "lm central rm" + "lb central rb" + / 1fr 1fr 1fr; + align-items: center; + justify-items: center; + gap: 60px 0; + + .media-current-max(1200px, { + gap: 40px 0; + }); + + .media-current-max(1000px, { + gap: 20px 0; + }); + + .media-current-max(800px, { + grid-template: + "lt rt" + "lm rm" + "lb rb" + / 1fr 1fr; + gap: 30px 15px; + }); + } + + .central { + grid-area: central; + display: grid; + grid-template-areas: "A"; + align-content: center; + + svg { + max-width: 110%; + grid-area: A; + align-self: center; + justify-self: center; + } + + .media-current-max(800px, { + display: none; + }); + } + + .card { + width: 300px; + overflow: hidden; + border-radius: 14px; + box-shadow: 0 16px 32px #0C0C0D1A; + height: 100%; + + .media-current-max(1200px, { + width: 250px; + }); + + .media-current-max(1000px, { + width: 200px; + }); + + .media-current-max(800px, { + width: 100%; + margin: 0 !important; + }); + + .title { + background: gray; + color: white; + font-size: 18px; + font-weight: 700; + padding: 6px 20px; + min-height: 60px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + } + + .description { + background: white; + padding: 13px 12px 18px; + color: #474747; + font-size: 15px; + text-align: justify; + + .content { + padding: 0 10px; + max-height: 150px; + overflow: auto; + scrollbar-width: thin; + } + } + + &.lt { + grid-area: lt; + margin-left: 70px; + } + + &.lm { + grid-area: lm; + margin-right: 20px; + } + + &.lb { + grid-area: lb; + margin-left: 70px; + } + + &.rt { + grid-area: rt; + margin-right: 70px; + } + + &.rm { + grid-area: rm; + margin-left: 20px; + } + + &.rb { + grid-area: rb; + margin-right: 70px; + } + + &.lt .title { + background: #3CC1D0; + } + + &.lm .title { + background: #3B97C8; + } + + &.lb .title { + background: #3B72C2; + } + + &.rt .title { + background: #4962BF; + } + + &.rm .title { + background: #6949B8; + } + + &.rb .title { + background: #A544C7; + } + } + } +} diff --git a/src/aimba/features/index.js b/src/aimba/features/index.js new file mode 100644 index 00000000..aa2363c3 --- /dev/null +++ b/src/aimba/features/index.js @@ -0,0 +1 @@ +export * from './Features'; diff --git a/src/aimba/footer/Footer.js b/src/aimba/footer/Footer.js new file mode 100644 index 00000000..a8202367 --- /dev/null +++ b/src/aimba/footer/Footer.js @@ -0,0 +1,78 @@ +import {Headset, Home, Clock, Envelop, PhoneCall} from '../icons'; +import {Logo} from '../pictogram'; +import './Footer.less'; + +export let Footer = () => { + return ( +
+
+ + + + + + + + + +
+
+
+
+
+ +
+ AiMBA - Agile & Immersive + + MBA level - Tranning +
+
+
+ AiMBA tiên phong định nghĩa lại phương pháp phát triển năng lực cho chuyên gia, nhà quản trị và đội nhóm thông qua một triết lý đào tạo khác biệt: kết nối tri thức nền tảng với thực tế thông qua các tình huống mô phỏng chân thực. +
+
+
+
Nhà phát triển ứng dụng đào tạo: Tacasoft
+
+
    +
  • + + Liên hệ hỗ trợ 24/7 +
    • +
  • + + Thứ 2-7, 8h30-17h30 +
    • +
  • + + gateway@bcanvas.vn +
    • +
  • + + 0948.088.586 +
    • +
+
+ +
+
+
+
+
+
+
+
    +
  • + + Trụ sở chính: Tầng 2 tòa A Chelsea Residences, 48 Trần Kim Xuyến, Yên Hòa, Hà Nội +
    • +
  • + + Chi nhánh: Vincom Đồng Khởi, Quận 1, TP. HCM +
    • +
+
+
+
+ ); +}; diff --git a/src/aimba/footer/Footer.less b/src/aimba/footer/Footer.less new file mode 100644 index 00000000..7937f487 --- /dev/null +++ b/src/aimba/footer/Footer.less @@ -0,0 +1,146 @@ +@import '../media.less'; + +.Footer { + .soft-edge { + overflow: hidden; + + svg { + display: block; + margin-bottom: -5px; + } + } + + .main-area { + color: white; + background: linear-gradient(to right, #1E469E, #1E469E 25%, #28A7DF); + + .media-current-max(1600px, { + padding-top: 20px; + }); + + .media-current-max(1600px, { + padding-top: 40px; + }); + + .media-current-max(800px, { + padding-top: 60px; + }); + + .container { + margin: auto; + max-width: 1170px; + padding: 0 15px 70px; + display: grid; + grid-template-columns: 6fr 4fr; + gap: 30px; + + .media-current-between(621px, 800px, { + grid-template-columns: 1fr 1fr; + }); + + .media-current-max(620px, { + grid-template-columns: 1fr; + max-width: 450px; + }); + } + + .about-us { + .brand { + display: flex; + flex-direction: row; + align-items: center; + gap: 11px; + + .slogan { + font-size: 16px; + font-weight: 700; + line-height: 140%; + } + } + + .mission { + margin-top: 19px; + font-size: 15px; + line-height: 25px; + text-align: justify; + max-width: 580px; + } + } + + .contact { + .headline { + font-size: 16px; + font-weight: 700; + } + + .info { + margin-top: 15px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + gap: 30px; + + ul { + display: flex; + flex-direction: column; + gap: 15px; + + li { + display: flex; + flex-direction: row; + align-items: center; + gap: 12px; + } + } + + .qrcode { + width: 82px; + height: 82px; + border: 1px solid white; + } + } + } + } + + .bottom-line { + color: white; + background: #0A328D; + + .container { + margin: auto; + max-width: 1170px; + padding: 12px 15px; + min-height: 44px; + display: flex; + flex-direction: column; + justify-content: center; + + .media-current-max(620px, { + max-width: 450px; + }); + } + + ul { + display: grid; + grid-template-columns: 6fr 4fr; + gap: 30px; + + .media-current-between(621px, 800px, { + grid-template-columns: 1fr 1fr; + }); + + .media-current-max(620px, { + grid-template-columns: 1fr; + gap: 10px; + }); + + li { + font-size: 14px; + display: flex; + flex-direction: row; + gap: 7px; + } + } + } +} diff --git a/src/aimba/footer/index.js b/src/aimba/footer/index.js new file mode 100644 index 00000000..ddcc5a9c --- /dev/null +++ b/src/aimba/footer/index.js @@ -0,0 +1 @@ +export * from './Footer'; diff --git a/src/aimba/frequently-asked-questions/FrequentlyAskedQuestions.js b/src/aimba/frequently-asked-questions/FrequentlyAskedQuestions.js new file mode 100644 index 00000000..9a3561b3 --- /dev/null +++ b/src/aimba/frequently-asked-questions/FrequentlyAskedQuestions.js @@ -0,0 +1,50 @@ +import './FrequentlyAskedQuestions.less'; +import {useState} from 'fiddlehead'; +import {Minus, Plus} from '../icons'; + +export let FrequentlyAskedQuestions = () => { + let data = [ + ['AiMBA khác gì với MBA truyền thống?', 'AiMBA tập trung vào tính ứng dụng thực tế với phương pháp thiết kế ngược, bắt đầu từ 640+ case study thực tế rồi đi ngược lại 170+ khối lý thuyết. Phù hợp với bối cảnh kinh doanh Việt Nam và linh hoạt theo thời gian học tập.'], + ['Tôi có thể học riêng lẻ từng module không?', 'AiMBA được thiết kế như một hệ sinh thái học tập toàn diện. Bạn sẽ nhận được trọn bộ 8 module để phát triển năng lực một cách hệ thống từ cơ bản đến nâng cao, đảm bảo tính liên kết và hiệu quả tối ưu.'], + ['640+ case study được phân bổ như thế nào trong các module?', 'Mỗi module có số lượng case study khác nhau tùy theo độ phức tạp: Module 1 (80+),Module 2 (100+), Module 3 (90+), Module 4 (70+), Module 5 (80+), Module 6 (85+), Module 7 (75+), Module 8 (60+). Tất cả đều dựa trên tình huống thực tế tại Việt Nam.'], + ['Có chứng chỉ sau khi hoàn thành không?', 'Có, bạn sẽ nhận được chứng nhận hoàn thành từ AiMBA sau khi hoàn thành các bài tập và đánh giá trong chương trình.'] + ]; + + let [expandedQuestions, setExpandedQuestions] = useState([data[0][0]]); + + let toggleExpanded = (question) => { + if (expandedQuestions.includes(question)) { + setExpandedQuestions(expandedQuestions.filter(q => q !== question)); + } else { + setExpandedQuestions([...expandedQuestions, question]); + } + }; + + return ( +
+
+

Câu hỏi thường gặp

+
+
    + {data.map(([question, answer]) => { + let expanded = expandedQuestions.includes(question); + return ( +
  • +
    toggleExpanded(question)}> +
    {question}
    +
    + {expanded ? : } +
    +
    +
    +
    {answer}
    +
    +
    • + ); + })} +
+
+
+
+ ); +}; diff --git a/src/aimba/frequently-asked-questions/FrequentlyAskedQuestions.less b/src/aimba/frequently-asked-questions/FrequentlyAskedQuestions.less new file mode 100644 index 00000000..7b623c34 --- /dev/null +++ b/src/aimba/frequently-asked-questions/FrequentlyAskedQuestions.less @@ -0,0 +1,75 @@ +.FrequentlyAskedQuestions { + padding: 71px 15px 37px; + + .container { + margin: auto; + max-width: 1170px; + } + + .title { + font-size: 32px; + font-weight: 700; + text-align: center; + } + + .content { + margin-top: 49px; + + ul { + display: flex; + flex-direction: column; + gap: 21px; + } + + li { + background: white; + border: 1px solid #E2E1E1; + border-radius: 5px; + overflow: hidden; + + .heading { + min-height: 62px; + padding: 0 25px; + gap: 25px; + display: flex; + flex-direction: row; + align-items: center; + cursor: pointer; + + .question { + flex-grow: 1; + font-size: 18px; + font-weight: 700; + } + + .indicator { + min-width: 24px; + } + } + + .body { + overflow: hidden; + + .answer { + padding: 12px 25px; + font-size: 16px; + line-height: 26px; + color: #4E4D4D; + } + } + + &.expanded { + .heading { + border-bottom: 1px solid #E2E1E1; + } + } + + &.collapsed { + .body { + height: 0; + visibility: hidden; + } + } + } + } +} diff --git a/src/aimba/frequently-asked-questions/index.js b/src/aimba/frequently-asked-questions/index.js new file mode 100644 index 00000000..a5d3473a --- /dev/null +++ b/src/aimba/frequently-asked-questions/index.js @@ -0,0 +1 @@ +export * from './FrequentlyAskedQuestions'; diff --git a/src/aimba/header/Header.js b/src/aimba/header/Header.js new file mode 100644 index 00000000..d3def6ea --- /dev/null +++ b/src/aimba/header/Header.js @@ -0,0 +1,71 @@ +import {SquareCheck} from '../icons'; +import './Header.less'; + +export let Header = () => { + return ( +
+
+
+
+
+
+
+ AiMBA +
+
+ Agile & Immersive MBA-level training +
+
+
+
+
Học MBA thực chiến với AI qua mô phỏng hàng nghìn tình huống thật.
+
+
+
    +
  • + + Cung cấp hệ thống kiến thức +
    • +
  • + + Mài sắc tư duy quản lý +
    • +
  • + + Kỹ năng và công cụ quản trị +
    • +
  • + + Trợ lý AI giải quyết nhanh công việc +
    • +
  • + + Năng lực quản trị chuẩn quốc tế +
    • +
+
+
+
+
+
+
+
+
+ 1048+ Case quản trị kinh điển +
+
+
+
+ 250+ Khối kiến thức +
+
+
+
+ 38+ Mô hình kinh doanh +
+
+
+
+
+ ); +}; diff --git a/src/aimba/header/Header.less b/src/aimba/header/Header.less new file mode 100644 index 00000000..97df8ca0 --- /dev/null +++ b/src/aimba/header/Header.less @@ -0,0 +1,194 @@ +@import '../media.less'; + +.Header { + .messages { + background: #1E4AA3; + + .container { + margin: auto; + max-width: 1230px; + padding: 0 30px; + min-height: 560px; + padding-bottom: 41px; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + } + + .overlay { + display: flex; + flex-direction: column; + gap: 20px; + color: white; + + .group { + max-width: 570px; + } + + .headline { + display: flex; + align-items: flex-start; + gap: 20px; + } + + .brand { + span { + display: inline-block; + height: 80px; + line-height: 70px; + padding: 0 0 10px; + font-size: 74px; + font-weight: 700; + background-image: linear-gradient(to bottom, #FFB81F, #FFE8A8); + background-clip: text; + -webkit-text-fill-color: transparent; + color: #FFB81F; + border-bottom: 2px solid white; + + .media-current-max(590px, { + font-size: 55px; + line-height: 100%; + height: auto; + }); + + .media-current-max(500px, { + font-size: 50px; + }); + + .media-current-max(410px, { + font-size: 40px; + }); + + .media-current-max(370px, { + font-size: 40px; + }); + } + } + + .slogan { + font-size: 34px; + font-weight: 700; + + .media-current-max(610px, { + font-size: 30px; + }); + + .media-current-max(520px, { + font-size: 24px; + }); + + .media-current-max(450px, { + font-size: 20px; + }); + + .media-current-max(370px, { + font-size: 18px; + }); + } + + .description { + font-size: 28px; + font-weight: 600; + } + + ul.checklist { + list-style: none; + display: grid; + grid-template-columns: 1.1fr 0.9fr; + grid-auto-rows: 1fr; + gap: 10px 40px; + + .media-current-max(500px, { + grid-template-columns: 1fr 1fr; + gap: 10px 20px; + }); + + .media-current-max(370px, { + grid-template-columns: 1fr; + grid-auto-rows: auto; + }); + + li { + display: flex; + flex-direction: row; + gap: 10px; + align-items: flex-start; + } + } + } + } + + .numbers { + background: #F6F6F6; + + .container { + margin: auto; + max-width: 1230px; + padding: 0 30px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 30px; + transform: translateY(-41px); + + .media-current-max(600px, { + gap: 15px; + max-width: 1200px; + padding: 0 15px; + }); + + .media-current-max(500px, { + display: flex; + flex-direction: column; + align-items: center; + }); + } + + .item { + min-height: 82px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: white; + box-shadow: 0 0 16px 0 #00000040; + border-radius: 6px; + padding: 10px; + + .media-current-max(1000px, { + justify-content: flex-start; + }); + + .media-current-max(500px, { + width: 100%; + max-width: 400px; + }); + + .content { + display: flex; + flex-direction: row; + align-items: center; + gap: 1em; + + .media-current-max(1000px, { + flex-direction: column; + justify-content: flex-start; + text-align: center; + }); + } + + b { + color: #28A8E0; + font-weight: 700; + font-size: 32px; + } + + span { + color: #1E459D; + font-weight: 700; + font-size: 20px; + display: inline-block; + } + } + } +} diff --git a/src/aimba/header/index.js b/src/aimba/header/index.js new file mode 100644 index 00000000..266dec8a --- /dev/null +++ b/src/aimba/header/index.js @@ -0,0 +1 @@ +export * from './Header'; diff --git a/src/aimba/icons/ArrowLeft.js b/src/aimba/icons/ArrowLeft.js new file mode 100644 index 00000000..7163242c --- /dev/null +++ b/src/aimba/icons/ArrowLeft.js @@ -0,0 +1,7 @@ +export let ArrowLeft = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/ArrowRight.js b/src/aimba/icons/ArrowRight.js new file mode 100644 index 00000000..f218b6f7 --- /dev/null +++ b/src/aimba/icons/ArrowRight.js @@ -0,0 +1,7 @@ +export let ArrowRight = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/ArrowTopRight.js b/src/aimba/icons/ArrowTopRight.js new file mode 100644 index 00000000..98b429cb --- /dev/null +++ b/src/aimba/icons/ArrowTopRight.js @@ -0,0 +1,8 @@ +export let ArrowTopRight = () => { + return ( + + + + + ); +}; diff --git a/src/aimba/icons/BachelorCap.js b/src/aimba/icons/BachelorCap.js new file mode 100644 index 00000000..3914d380 --- /dev/null +++ b/src/aimba/icons/BachelorCap.js @@ -0,0 +1,9 @@ +export let BachelorCap = () => { + return ( + + + + + + + ); +}; diff --git a/src/aimba/icons/BadgeCheck.js b/src/aimba/icons/BadgeCheck.js new file mode 100644 index 00000000..5011aa29 --- /dev/null +++ b/src/aimba/icons/BadgeCheck.js @@ -0,0 +1,20 @@ +export let BadgeCheck = () => { + return ( + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/aimba/icons/CircleCheck.js b/src/aimba/icons/CircleCheck.js new file mode 100644 index 00000000..0d4b06ce --- /dev/null +++ b/src/aimba/icons/CircleCheck.js @@ -0,0 +1,15 @@ +export let CircleCheck = () => { + return ( + + + + + + + + + + + + ); +}; diff --git a/src/aimba/icons/CircleCheckOutline.js b/src/aimba/icons/CircleCheckOutline.js new file mode 100644 index 00000000..134978f9 --- /dev/null +++ b/src/aimba/icons/CircleCheckOutline.js @@ -0,0 +1,19 @@ +export let CircleCheckOutline = () => { + return ( + + + + + + + + + + + + + + + + ); +}; diff --git a/src/aimba/icons/Clock.js b/src/aimba/icons/Clock.js new file mode 100644 index 00000000..5cb33ac3 --- /dev/null +++ b/src/aimba/icons/Clock.js @@ -0,0 +1,8 @@ +export let Clock = () => { + return ( + + + + + ); +}; diff --git a/src/aimba/icons/Envelop.js b/src/aimba/icons/Envelop.js new file mode 100644 index 00000000..b0005e15 --- /dev/null +++ b/src/aimba/icons/Envelop.js @@ -0,0 +1,9 @@ +export let Envelop = () => { + return ( + + + + + + ); +}; diff --git a/src/aimba/icons/FileChart.js b/src/aimba/icons/FileChart.js new file mode 100644 index 00000000..3f70eb20 --- /dev/null +++ b/src/aimba/icons/FileChart.js @@ -0,0 +1,17 @@ +export let FileChart = () => { + return ( + + + + + + + + + + + + + + ); +}; diff --git a/src/aimba/icons/Gift.js b/src/aimba/icons/Gift.js new file mode 100644 index 00000000..d2deb8aa --- /dev/null +++ b/src/aimba/icons/Gift.js @@ -0,0 +1,12 @@ +export let Gift = () => { + return ( + + + + + + + + + ); +}; diff --git a/src/aimba/icons/Headset.js b/src/aimba/icons/Headset.js new file mode 100644 index 00000000..a41cd8f0 --- /dev/null +++ b/src/aimba/icons/Headset.js @@ -0,0 +1,7 @@ +export let Headset = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/Home.js b/src/aimba/icons/Home.js new file mode 100644 index 00000000..e5f84c2a --- /dev/null +++ b/src/aimba/icons/Home.js @@ -0,0 +1,9 @@ +export let Home = () => { + return ( + + + + + + ); +}; diff --git a/src/aimba/icons/Minus.js b/src/aimba/icons/Minus.js new file mode 100644 index 00000000..826b55a7 --- /dev/null +++ b/src/aimba/icons/Minus.js @@ -0,0 +1,7 @@ +export let Minus = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/PeoplePlus.js b/src/aimba/icons/PeoplePlus.js new file mode 100644 index 00000000..b54e49fd --- /dev/null +++ b/src/aimba/icons/PeoplePlus.js @@ -0,0 +1,8 @@ +export let PeoplePlus = () => { + return ( + + + + + ); +}; diff --git a/src/aimba/icons/PhoneCall.js b/src/aimba/icons/PhoneCall.js new file mode 100644 index 00000000..9e84175f --- /dev/null +++ b/src/aimba/icons/PhoneCall.js @@ -0,0 +1,7 @@ +export let PhoneCall = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/Plus.js b/src/aimba/icons/Plus.js new file mode 100644 index 00000000..165e9ffe --- /dev/null +++ b/src/aimba/icons/Plus.js @@ -0,0 +1,8 @@ +export let Plus = () => { + return ( + + + + + ); +}; diff --git a/src/aimba/icons/SquareCheck.js b/src/aimba/icons/SquareCheck.js new file mode 100644 index 00000000..9e528245 --- /dev/null +++ b/src/aimba/icons/SquareCheck.js @@ -0,0 +1,8 @@ +export let SquareCheck = () => { + return ( + + + + + ); +}; diff --git a/src/aimba/icons/TriangleDown.js b/src/aimba/icons/TriangleDown.js new file mode 100644 index 00000000..f2800a97 --- /dev/null +++ b/src/aimba/icons/TriangleDown.js @@ -0,0 +1,7 @@ +export let TriangleDown = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/TriangleRight.js b/src/aimba/icons/TriangleRight.js new file mode 100644 index 00000000..001cb2fb --- /dev/null +++ b/src/aimba/icons/TriangleRight.js @@ -0,0 +1,7 @@ +export let TriangleRight = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/TriangleUp.js b/src/aimba/icons/TriangleUp.js new file mode 100644 index 00000000..4979b52e --- /dev/null +++ b/src/aimba/icons/TriangleUp.js @@ -0,0 +1,7 @@ +export let TriangleUp = () => { + return ( + + + + ); +}; diff --git a/src/aimba/icons/index.js b/src/aimba/icons/index.js new file mode 100644 index 00000000..6131db4c --- /dev/null +++ b/src/aimba/icons/index.js @@ -0,0 +1,21 @@ +export * from './ArrowLeft'; +export * from './ArrowRight'; +export * from './ArrowTopRight'; +export * from './SquareCheck'; +export * from './TriangleUp'; +export * from './TriangleDown'; +export * from './TriangleRight'; +export * from './BachelorCap'; +export * from './FileChart'; +export * from './PeoplePlus'; +export * from './BadgeCheck'; +export * from './CircleCheck'; +export * from './CircleCheckOutline'; +export * from './Gift'; +export * from './Minus'; +export * from './Plus'; +export * from './Home'; +export * from './Headset'; +export * from './Clock'; +export * from './Envelop'; +export * from './PhoneCall'; diff --git a/src/aimba/learning-strategy/LearningStrategy.js b/src/aimba/learning-strategy/LearningStrategy.js new file mode 100644 index 00000000..8377f9c3 --- /dev/null +++ b/src/aimba/learning-strategy/LearningStrategy.js @@ -0,0 +1,45 @@ +import './LearningStrategy.less'; + +export let LearningStrategy = () => { + let data = { + '01': ['Chọn module phù hợp với mục tiêu hiện tại', 'Lựa chọn từ 15 chương trình chuyên biệt theo vị trí và mục tiêu sự nghiệp của bạn'], + '02': ['Thực hành với các case study thực tế', 'Giải quyết các tình huống dựa trên 1048+ case study thực tế tại Việt Nam'], + '03': ['Học sâu qua kiến giải chi tiết từng phần', 'Mỗi mini-case là một bài tập tư duy sâu, được phân tích cách tiếp cận tối ưu, chỉ rõ “vì sao” và “làm thế nào”'], + '04': ['Tiến hành áp dụng ngay vào công việc', 'Ứng dụng kiến thức và kỹ năng đã học vào các tình huống thực tế tại công ty'] + }; + + return ( +
+
+ +
+
+
+
+

Cách thức học tập tại AiMBA

+
+ +
+
+
+
+
+
    + {['01', '02', '03', '04'].map((number) => { + const [title, description] = data[number]; + return ( +
  • +
    +
    {number}
    +
    {title}
    +
    +
    {description}
    +
    • + ); + })} +
+
+
+
+ ); +}; diff --git a/src/aimba/learning-strategy/LearningStrategy.less b/src/aimba/learning-strategy/LearningStrategy.less new file mode 100644 index 00000000..6d7b2e09 --- /dev/null +++ b/src/aimba/learning-strategy/LearningStrategy.less @@ -0,0 +1,151 @@ +@import '../media.less'; + +.LearningStrategy { + display: grid; + grid-template-columns: 1fr 1fr; + background: linear-gradient(to right, #10469E, #10469E 60%, #14A6DF); + + .media-current-max(1600px, { + grid-template-columns: 2fr 3fr; + }); + + .media-current-max(1400px, { + grid-template-columns: 1fr 2fr; + }); + + .media-current-max(1000px, { + display: flex; + flex-direction: column; + }); + + > .cover { + + } + + > .details { + padding: 60px 60px 66px; + + .media-current-max(450px, { + padding: 60px 30px 66px; + }); + + > .heading { + max-width: 826px; + + .content { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: flex-end; + color: white; + gap: 10px; + + .title { + font-size: 32px; + font-weight: 700; + } + + button { + padding: 0 20px; + min-width: 134px; + min-height: 40px; + border-radius: 20px; + border: 1px solid white; + font-size: 15px; + font-weight: 700; + white-space: nowrap; + cursor: pointer; + + .media-current-max(600px, { + min-width: 0; + }); + } + } + + .divider { + width: 105px; + height: 2px; + background: white; + margin-top: 17px; + } + } + + > .grid { + margin-top: 48px; + + ul { + display: grid; + grid-template: + "1fr 1fr" 1fr + "1fr 1fr" 1fr; + gap: 22px 25px; + max-width: 826px; + + .media-current-max(600px, { + grid-template: "."; + // max-width: 400px; + }); + + li { + padding: 14px 22px; + background: #FFFFFF26; + border: 1px solid #FFFDFD66; + border-radius: 14px; + + .media-current-max(600px, { + border-radius: 14px !important; + }); + + &.no-01 { + border-bottom-right-radius: 0; + } + + &.no-02 { + border-bottom-left-radius: 0; + } + + &.no-03 { + border-top-right-radius: 0; + } + + &.no-04 { + border-top-left-radius: 0; + } + + > .heading { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 15px; + + .number { + min-width: 48px; + min-height: 48px; + border-radius: 4px; + background: white; + color: #1273C2; + font-size: 24px; + font-weight: 700; + display: flex; + justify-content: center; + align-items: center; + } + + .title { + font-size: 19px; + font-weight: 700; + color: white; + } + } + + > .description { + margin-top: 12px; + font-size: 16px; + line-height: 22px; + color: white; + } + } + } + } + } +} diff --git a/src/aimba/learning-strategy/index.js b/src/aimba/learning-strategy/index.js new file mode 100644 index 00000000..abcef601 --- /dev/null +++ b/src/aimba/learning-strategy/index.js @@ -0,0 +1 @@ +export * from './LearningStrategy'; diff --git a/src/aimba/media.less b/src/aimba/media.less new file mode 100644 index 00000000..a3227162 --- /dev/null +++ b/src/aimba/media.less @@ -0,0 +1,19 @@ +.media-current(@query, @rules) { + @media @query { + & { + @rules(); + } + } +} + +.media-current-min(@min-width, @rules) { + .media-current(~'screen and (min-width: @{min-width})', @rules); +} + +.media-current-max(@max-width, @rules) { + .media-current(~'screen and (max-width: @{max-width})', @rules); +} + +.media-current-between(@min-width, @max-width, @rules) { + .media-current(~'screen and (min-width: @{min-width}) and (max-width: @{max-width})', @rules); +} diff --git a/src/aimba/modules/Modules.js b/src/aimba/modules/Modules.js new file mode 100644 index 00000000..3f238669 --- /dev/null +++ b/src/aimba/modules/Modules.js @@ -0,0 +1,54 @@ +import {Slider} from '../slider'; +import './Modules.less'; +import {TreeView} from './TreeView'; + +export let Modules = () => { + let roadmap = [ + ['Module 1 - Nền tảng kĩ năng chuyên nghiệp', 'Trang bị tư duy, tác phong chuyên nghiệp cùng các kỹ năng mềm cốt lõi như giao tiếp, giải quyết vấn đề và làm việc nhóm. Đây là bước đầu tư nền tảng để khai phá tiềm năng và tối đa hóa hiệu suất ngay từ những ngày đầu tiên.'], + ['Module 2 - Chuyên Gia Bán Hàng & Đàm Phán', 'Nâng tầm kỹ năng bán hàng và đàm phán lên đỉnh cao, đi sâu vào tâm lý khách hàng, chiến lược phức hợp và nghệ thuật xây dựng mối quan hệ bền vững để mang lại tăng trưởng doanh thu đột phá.'], + ['Module 3 - Đào tạo Chuyên gia Marketing', 'Làm chủ cuộc chơi marketing trong kỷ nguyên số, từ phân tích dữ liệu, sáng tạo nội dung, đến việc làm chủ các kênh digital để xây dựng một hình ảnh thương hiệu mạnh mẽ và thống lĩnh thị trường.'], + ['Module 4 - Quản trị Nhân sự Hiện đại', 'Cung cấp công cụ và phương pháp tiên tiến để thu hút, phát triển và giữ chân nhân tài, xây dựng một môi trường làm việc lý tưởng nơi mọi cá nhân có thể phát triển và cống hiến.'], + ['Module 5 - Quản trị Chuỗi Cung ứng & Logistics', 'Trang bị kiến thức toàn diện để quản lý hiệu quả mọi khâu trong chuỗi cung ứng, từ mua hàng, hoạch định, quản lý tồn kho, đến vận tải và logistics nhằm tạo lợi thế cạnh tranh bền vững.'], + ['Module 6 - Tài chính cho Nhà Quản lý', 'Trao quyền cho các nhà quản lý phi tài chính để tự tin đưa ra quyết định kinh doanh dựa trên sự am hiểu sâu sắc về báo cáo tài chính, ngân sách, dòng tiền và phân tích đầu tư.'], + ['Module 7 - Tài chính Chiến lược & Quản trị CFO', 'Trang bị tư duy của một Giám đốc Tài chính (CFO) chiến lược, học cách phân tích sâu sắc, mô hình hóa tài chính, quản trị rủi ro và định giá doanh nghiệp để dẫn dắt doanh nghiệp đến sự thịnh vượng.'], + ['Module 8 - Lãnh đạo & Quản lý đội nhóm Hiệu suất cao', 'Trở thành nhà lãnh đạo truyền cảm hứng, có khả năng xây dựng và dẫn dắt những đội nhóm vô địch. Chương trình này tập trung vào các kỹ năng lãnh đạo và quản lý thực chiến: từ huấn luyện, trao quyền, tạo động lực đến giải quyết xung đột và quản lý sự thay đổi ở cấp độ đội nhóm. Bạn sẽ học cách khơi dậy tiềm năng của từng cá nhân, thúc đẩy sự gắn kết và tạo ra một môi trường làm việc hiệu suất cao, nơi mọi người cùng hướng đến mục tiêu chung.'], + ['Module 9 - Quản trị dự án chuyên sâu & hiệu quả', 'Làm chủ nghệ thuật hoàn thành dự án phức tạp đúng hạn, trong ngân sách và vượt trên sự mong đợi thông qua các phương pháp quản lý tiên tiến từ Agile đến Waterfall.'], + ['Module 10 - Quản trị Hệ thống Kiểm soát & Đo lường Hiệu suất', 'Biến chiến lược thành hành động và kết quả có thể đo lường, đảm bảo mọi bộ phận và cá nhân đều đang đi đúng hướng để thực thi thành công các mục tiêu chiến lược của công ty.'], + ['Module 11 - Quản trị Rủi ro Doanh nghiệp', 'Xây dựng một khung quản trị rủi ro toàn diện (ERM) để nhận diện, phân tích, và ứng phó với các rủi ro, biến việc quản trị rủi ro thành một lợi thế cạnh tranh.'], + ['Module 12 - Pháp lý Kinh doanh cho Nhà Quản lý', 'Trang bị "tấm khiên" pháp lý cần thiết về hợp đồng, lao động, sở hữu trí tuệ... giúp nhà quản lý tự tin vận hành doanh nghiệp và giảm thiểu rủi ro pháp lý tại Việt Nam.'], + ['Module 13 - Hoạch định & Đổi mới Chiến lược', 'Dành cho các nhà lãnh đạo cấp cao, những người kiến tạo tương lai của doanh nghiệp.Chương trình này tập trung thuần túy vào tư duy chiến lược, các mô hình phân tích kinh điển và phương pháp đổi mới tiên tiến. Bạn sẽ học cách phân tích sâu sắc môi trường kinh doanh, xác định lợi thế cốt lõi, xây dựng các mô hình kinh doanh đột phá và dẫn dắt sự chuyển đổi chiến lược để đạt được thành công bền vững.'], + ['Module 14 - M&A và phân tích đầu tư', 'Cung cấp kiến thức chuyên sâu và công cụ thực tiễn để thực hiện toàn bộ quy trình M&A, từ xác định mục tiêu, định giá, đàm phán đến tích hợp sau sáp nhập.'], + ['Module 15 - AI & Tech 4.0 trong Quản trị Kinh doanh', 'Xây dựng tư duy chuyển đổi số và trang bị kiến thức nền tảng về Trí tuệ nhân tạo (AI) và tự động hóa. Người học sẽ khám phá các ứng dụng thực tế của AI, học cách phân tích quy trình và làm việc với dữ liệu để tìm ra cơ hội cải tiến. Khóa học cung cấp lộ trình để bắt đầu tự động hóa các tác vụ, ra quyết định dựa trên dữ liệu và dẫn dắt các sáng kiến công nghệ.'], + ]; + + return ( +
+
+
+
60–80 giờ học theo mỗi Module chuyên biệt của AiMBA
+
15 module tập trung giải quyết từng năng lực cụ thể, từ cơ bản đến nâng cao
+
+
+
+
+ +
+
+
+ ({ + id: background, + render: () =>
+ }))} + /> +
+
+
+ +
+
+
+ ); +}; diff --git a/src/aimba/modules/Modules.less b/src/aimba/modules/Modules.less new file mode 100644 index 00000000..fd32d9cb --- /dev/null +++ b/src/aimba/modules/Modules.less @@ -0,0 +1,102 @@ +@import '../media.less'; + +.Modules { + background: #003195; + padding: 82px 0 41px; + + > .heading { + .container { + margin: auto; + max-width: 1200px; + padding: 0 15px; + } + + .title { + color: white; + font-size: 36px; + font-weight: 700; + text-align: center; + } + + .description { + margin-top: 13px; + color: white; + font-size: 17px; + text-align: center; + } + } + + > .roadmap { + margin-top: 26px; + + .container { + margin: auto; + max-width: 1200px; + padding: 0 15px; + } + } + + > .videos { + margin-top: 60px; + + .Slider { + --slide-width: min(1100px, 90vw); + --slide-height: calc(var(--slide-width) / 110 * 62); + --slide-spacing: 60px; + --slide-padding: 60px; + max-width: calc(var(--slide-width) + 2 * var(--slide-padding)); + margin: auto; + color: white; + + .media-current-max(1220px, { + --slide-padding: 0; + max-width: var(--slide-width); + color: #474747; + }); + } + + .video-wrapper { + border-radius: 10px; + overflow: hidden; + position: absolute; + width: 100%; + height: 100%; + } + + img { + display: block; + position: absolute; + width: 100%; + height: 100%; + } + } + + > .actions { + margin-top: 38px; + + .container { + margin: auto; + max-width: 1200px; + padding: 0 15px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + button.signup { + min-height: 50px; + min-width: 270px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 25px; + background: linear-gradient(to bottom, #FAA714, #D37101); + font-weight: 900; + font-size: 18px; + color: white; + text-align: center; + cursor: pointer; + } + } +} diff --git a/src/aimba/modules/TreeView.js b/src/aimba/modules/TreeView.js new file mode 100644 index 00000000..e7a76b24 --- /dev/null +++ b/src/aimba/modules/TreeView.js @@ -0,0 +1,72 @@ +import {useRef, useState} from 'fiddlehead'; +import {TriangleDown, TriangleUp, Minus, Plus} from '../icons'; +import './TreeView.less'; + +export let TreeView = ({data}) => { + let [variableExpandedIndexes, setVariableExpandedIndexes] = useState([0, 1]); + let fixedExpandedIndexes = []; + let expandedIndexes = [...fixedExpandedIndexes, ...variableExpandedIndexes]; + + let cardsRef = useRef(null); + + let isSingleColumn = () => { + let style = getComputedStyle(cardsRef.current); + let columns = style.gridTemplateColumns.split(' '); + return columns.length === 1; + }; + + let toggleExpanded = (index) => { + if (fixedExpandedIndexes.includes(index)) { + return; + } + + let targetIndexes = isSingleColumn() ? [index] : ( + index % 2 === 0 ? [index, index + 1] : [index - 1, index] + ); + + setVariableExpandedIndexes((prevValue) => { + if (variableExpandedIndexes.includes(index)) { + return prevValue.filter(idx => !targetIndexes.includes(idx)); + } + + return targetIndexes; + }); + }; + + return ( +
+
+ +
+ +
+
+ {data.map(([title, description], index) => { + let expanded = expandedIndexes.includes(index); + return ( +
+
toggleExpanded(index)}> +
+
+ {title} +
+
+ {expanded ? : } +
+
+
+
+
+
+
+
+ {description} +
+
+
+ ); + })} +
+
+ ); +}; diff --git a/src/aimba/modules/TreeView.less b/src/aimba/modules/TreeView.less new file mode 100644 index 00000000..a0c5dc8c --- /dev/null +++ b/src/aimba/modules/TreeView.less @@ -0,0 +1,161 @@ +@import '../media.less'; + +.TreeView { + .media-current-max(600px, { + display: flex; + flex-direction: row; + gap: 30px; + padding-left: 15px; + }); + + .growth-path { + display: flex; + flex-direction: column; + align-items: center; + font-size: 7px; + color: white; + + .media-current-min(601px, { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + margin: auto; + }); + + .line { + flex-grow: 1; + background: white; + width: 1px; + } + } + + .cards { + padding: 40px 0; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px 98px; + + .media-current-max(1000px, { + gap: 16px 50px; + }); + + .media-current-max(600px, { + grid-template-columns: 1fr; + }); + } + + .card { + display: flex; + flex-direction: column; + + .heading { + .content { + background: #04A9FB; + color: white; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 25px; + padding: 12px 15px 12px 25px; + min-height: 70px; + cursor: pointer; + border-radius: 6px; + + .title { + font-size: 20px; + font-weight: 700; + } + + .indicator {} + } + + .pointer-wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + pointer-events: none; + + } + + .pointer { + background: #04A9FB; + width: 14px; + height: 14px; + border-radius: 7px; + position: absolute; + top: 0; + bottom: 0; + margin: auto; + } + } + + .body { + flex-grow: 1; + border-radius: 6px; + background: white; + overflow: hidden; + + .description { + color: #474747; + font-size: 15px; + padding: 15px 25px; + } + } + + &.collapsed { + .heading { + height: 100%; + + .content { + height: 100%; + } + } + + .body { + height: 0; + visibility: hidden; + } + } + + &.expanded { + .heading { + .content { + border-radius: 6px 6px 0 0; + } + } + + .body { + border-radius: 0 0 6px 6px; + } + } + + .media-current-min(1001px, { + &:nth-child(odd) .pointer { + right: -56px; + } + }); + + .media-current-between(601px, 1000px, { + &:nth-child(odd) .pointer { + right: -32px; + } + }); + + .media-current-min(601px, { + &:nth-child(even) .pointer { + display: none; + } + }); + + .media-current-max(600px, { + .pointer { + left: -40px; + } + }); + } +} diff --git a/src/aimba/modules/index.js b/src/aimba/modules/index.js new file mode 100644 index 00000000..d3b5387c --- /dev/null +++ b/src/aimba/modules/index.js @@ -0,0 +1 @@ +export * from './Modules'; diff --git a/src/aimba/our-solution/OurSolution.js b/src/aimba/our-solution/OurSolution.js new file mode 100644 index 00000000..14ea86a1 --- /dev/null +++ b/src/aimba/our-solution/OurSolution.js @@ -0,0 +1,96 @@ +import {CircleCheck, CircleCheckOutline, TriangleRight} from '../icons'; +import {Macbook} from '../pictogram'; +import {Slider} from '../slider'; +import './OurSolution.less'; + +export let OurSolution = () => { + return ( +
+
+
+
+

Tại sao nên chọn AiMBA?

+
+ Thực tế cho thấy, nhiều lãnh đạo thành công nhờ kinh nghiệm thực chiến, + va chạm thị trường, học hỏi từ sai lầm – chứ không phải chỉ nhờ bằng cấp. + Và đa số người có bằng MBA thành công thường vốn đã làm ở tập đoàn lớn và giỏi xử lý các tình huống thực tiễn. + MBA truyền thống là nền tảng, nhưng khi vào phòng họp, cái bạn cần lại là giải case thực tế: +
+
+
    +
  • + + Làm sao áp dụng SWOT khi đối thủ là doanh nghiệp gia đình với mạng lưới quan hệ phức tạp? +
    • +
  • + + Làm sao thuyết phục đội ngũ thay đổi khi văn hóa “cả nể” đang kìm hãm? +
    • +
  • + + Làm sao triển khai Design Thinking trong một tổ chức phân cấp cao, nơi mà nhân sự ngại đổi mới? +
    • +
+
+
+ + Và AIMBA - Hệ thống đào tạo mô phỏng MBA thực chiến tích hợp AI chính là giải pháp được TACA thiết kế để đồng hành cùng bạn. +
+
+
+ +
+
+
+
+
+

Phát triển năng lực quản trị chuẩn MBA theo cách linh hoạt, thực chiến và tối đa hóa ROI

+
+
+ ({ + id: background, + render: () => + }))} + > + {({slideShow, dotNavigation}) => ( + <> +
+ +
+ {slideShow()} +
+
+ {dotNavigation()} + + )} + +
+
+
+
    + {[ + 'Tăng thăng tiến khi học quản trị chuẩn MBA', + 'Sẵn kho tài liệu lớn, cung cấp các thông tin', + 'Không lo về chi phí khi học AiMBA', + 'Tiềm năng tăng thu nhập lâu dài', + 'Không cần nghỉ việc - Không lo mất lương - Không bỏ lỡ cơ hội', + 'Vừa học vừa tăng hiệu quả công việc' + ].map(text => ( +
  • + + {text} +
    • + ))} +
+
+
+ +
+
+
+
+
+
+ ); +}; diff --git a/src/aimba/our-solution/OurSolution.less b/src/aimba/our-solution/OurSolution.less new file mode 100644 index 00000000..b6ff851c --- /dev/null +++ b/src/aimba/our-solution/OurSolution.less @@ -0,0 +1,236 @@ +@import '../media.less'; + +.OurSolution { + margin-top: 65px; + + .why-us { + .container { + margin: auto; + max-width: 1170px; + padding: 0 15px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 30px; + + .media-current-max(800px, { + grid-template-columns: 1fr; + max-width: 600px; + }); + } + + .details { + .title { + font-size: 32px; + font-weight: 700; + } + + .description { + margin-top: 15px; + font-size: 16px; + line-height: 24px; + color: #474747; + } + + .questions { + margin-top: 22px; + font-size: 16px; + line-height: 24px; + color: #474747; + + ul { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 22px 26px; + + li:last-child:nth-child(odd) { + grid-column: 1 / 3; + } + + li { + display: flex; + flex-direction: row; + gap: 12px; + align-items: flex-start; + } + } + } + + .solution { + margin-top: 22px; + font-size: 18px; + line-height: 24px; + border: 1px solid #28A8E0; + border-left-width: 3px; + display: flex; + flex-direction: row; + align-items: center; + overflow: hidden; + + i { + display: block; + color: #28A8E0; + margin-left: -3px; + } + + span { + display: block; + padding: 10px 17px; + } + + } + } + + .photos { + .media-current-min(801px, { + display: flex; + flex-direction: row; + align-items: flex-end; + }); + + img { + display: block; + width: 100%; + max-width: 570px; + height: 450px; + background: #def; + } + } + } + + .your-needs { + margin-top: 23px; + padding: 65px 0 93px; + background: linear-gradient(to bottom, white, #EAF8FF); + + .container { + margin: auto; + max-width: 1200px; + padding: 0 15px; + } + + .title { + font-size: 32px; + font-weight: 700; + max-width: 960px; + + .media-current-max(1000px, { + text-align: center; + margin: auto; + max-width: 700px; + }); + } + + .content { + margin-top: 46px; + display: grid; + grid-template-columns: 1.11112fr 1fr; + + .media-current-max(1000px, { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 30px; + }); + } + + .photos { + .Slider { + --slide-width: 100%; + --slide-aspect: calc(448 / 292); + --slide-spacing: 0; + --slide-padding: 0; + margin: auto; + + .media-current-max(1000px, { + width: 100%; + max-width: 600px; + }); + + .macbook-simulator { + svg { + display: block; + } + + .macbook-screen { + position: absolute; + width: calc(100% * 448 / 600); + height: calc(100% * 292 / 345); + top: calc(100% * 17.823 / 345); + left: 0; + right: 0; + margin: auto; + } + } + + .SliderSlideShow { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + + img { + display: block; + position: absolute; + width: 100%; + height: 100%; + } + } + + .SliderDotNavigation { + margin-top: 28px; + } + } + } + + .details { + .checklist { + font-size: 17px; + font-weight: 600; + line-height: 24px; + color: #474747; + + ul { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 26px 30px; + + .media-current-max(1000px, { + grid-template-columns: 1fr; + max-width: 600px; + margin: auto; + }); + + li { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 10px; + } + } + } + + .actions { + margin: 37px auto 0; + + .media-current-max(1000px, { + max-width: 600px; + }); + + button { + margin: 0 34px; + border-radius: 6px; + background: linear-gradient(to right, #1E459D, #28A8E0); + font-size: 16px; + font-weight: 700; + color: white; + padding: 12px 24px; + min-width: 152px; + cursor: pointer; + } + } + } + } +} diff --git a/src/aimba/our-solution/index.js b/src/aimba/our-solution/index.js new file mode 100644 index 00000000..6e29240a --- /dev/null +++ b/src/aimba/our-solution/index.js @@ -0,0 +1 @@ +export * from './OurSolution'; diff --git a/src/aimba/pictogram/CircleFeatures.js b/src/aimba/pictogram/CircleFeatures.js new file mode 100644 index 00000000..6d76611b --- /dev/null +++ b/src/aimba/pictogram/CircleFeatures.js @@ -0,0 +1,241 @@ +export let CircleFeatures = ({children}) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {children} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/aimba/pictogram/DocumentReport.js b/src/aimba/pictogram/DocumentReport.js new file mode 100644 index 00000000..8fe03f19 --- /dev/null +++ b/src/aimba/pictogram/DocumentReport.js @@ -0,0 +1,13 @@ +export let DocumentReport = () => { + return ( + + + + + + + + + + ); +}; diff --git a/src/aimba/pictogram/GearChecklist.js b/src/aimba/pictogram/GearChecklist.js new file mode 100644 index 00000000..d80adbaf --- /dev/null +++ b/src/aimba/pictogram/GearChecklist.js @@ -0,0 +1,11 @@ +export let GearChecklist = () => { + return ( + + + + + + + + ); +}; diff --git a/src/aimba/pictogram/HandMoney.js b/src/aimba/pictogram/HandMoney.js new file mode 100644 index 00000000..9707fee8 --- /dev/null +++ b/src/aimba/pictogram/HandMoney.js @@ -0,0 +1,10 @@ +export let HandMoney = () => { + return ( + + + + + + + ); +}; diff --git a/src/aimba/pictogram/Logo.js b/src/aimba/pictogram/Logo.js new file mode 100644 index 00000000..5e4474d8 --- /dev/null +++ b/src/aimba/pictogram/Logo.js @@ -0,0 +1,27 @@ +export let Logo = ({ monochrome, x, y }) => { + let colorA1 = monochrome ?? '#28A8E0'; + let colorA2 = monochrome ?? '#0E72B0'; + let colorI = monochrome ?? '#0E72B0'; + let colorMBA = monochrome ?? '#1E459D'; + + return ( + + ); +}; diff --git a/src/aimba/pictogram/Macbook.js b/src/aimba/pictogram/Macbook.js new file mode 100644 index 00000000..8a1621bc --- /dev/null +++ b/src/aimba/pictogram/Macbook.js @@ -0,0 +1,91 @@ +export let Macbook = ({children}) => { + return ( + + + + + {/* */} + + + + + + + + + + {children} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/aimba/pictogram/PersonGrowth.js b/src/aimba/pictogram/PersonGrowth.js new file mode 100644 index 00000000..9da74f35 --- /dev/null +++ b/src/aimba/pictogram/PersonGrowth.js @@ -0,0 +1,13 @@ +export let PersonGrowth = () => { + return ( + + + + + + + + + + ); +}; diff --git a/src/aimba/pictogram/RobotSmile.js b/src/aimba/pictogram/RobotSmile.js new file mode 100644 index 00000000..089c75ac --- /dev/null +++ b/src/aimba/pictogram/RobotSmile.js @@ -0,0 +1,10 @@ +export let RobotSmile = () => { + return ( + + + + + + + ); +}; diff --git a/src/aimba/pictogram/StudentLaptop.js b/src/aimba/pictogram/StudentLaptop.js new file mode 100644 index 00000000..51e8d0ff --- /dev/null +++ b/src/aimba/pictogram/StudentLaptop.js @@ -0,0 +1,12 @@ +export let StudentLaptop = () => { + return ( + + + + + + + + + ); +}; diff --git a/src/aimba/pictogram/index.js b/src/aimba/pictogram/index.js new file mode 100644 index 00000000..3268b522 --- /dev/null +++ b/src/aimba/pictogram/index.js @@ -0,0 +1,9 @@ +export * from './Logo'; +export * from './Macbook'; +export * from './DocumentReport'; +export * from './GearChecklist'; +export * from './HandMoney'; +export * from './PersonGrowth'; +export * from './RobotSmile'; +export * from './StudentLaptop'; +export * from './CircleFeatures'; diff --git a/src/aimba/resources/Resources.js b/src/aimba/resources/Resources.js new file mode 100644 index 00000000..a8fcddaf --- /dev/null +++ b/src/aimba/resources/Resources.js @@ -0,0 +1,101 @@ +import {CircleCheck} from '../icons'; +import {Slider} from '../slider'; +import './Resources.less'; + +let data = [ + { + title: '50+ Brand Stories', + description: 'Câu chuyện thành công từ các thương hiệu toàn cầu và Việt Nam', + checklist: [ + 'Tesla và Kế Hoạch Tổng Thể Của Elon Musk', + 'Aldi: Sự Tối Giản Hóa Trong Bán Lẻ', + 'Casper và Cuộc Cách Mạng Ngành Nệm', + 'Vingroup: Tốc Độ Thần Kỳ và Khát Vọng', + 'MoMo: Chiến Thắng Cuộc Chiến Siêu Ứng Dụng' + ], + screenshots: ['#def', '#dfe', '#fde'], + layout: 'standard', + themeColor: '#EAF8FF' + }, + { + title: '38+ Business Models', + description: 'Mô hình kinh doanh đã được chứng minh thành công trong thực tiễn', + checklist: [ + 'Omnichannel Model - Mô hình Đa kênh Tích hợp', + 'Ecosystem Model - Mô hình Hệ sinh thái', + 'Auction/Bidding Model - Mô hình Đấu giá/Đấu thầu', + 'Managed Services Model - Mô hình Dịch vụ Quản lý', + 'Manufacturing Model - Mô hình Sản xuất' + ], + screenshots: ['#def', '#dfe', '#fde'], + layout: 'reserve', + themeColor: '#FAE8E8' + }, + { + title: '24+ Phân tích sách', + description: 'Luận giải chi tiết từ các cuốn sách kinh doanh nổi tiếng, được nhiều độc giả yêu thích', + checklist: [ + 'Luận giải cuốn sách Blue Ocean Strategy', + 'Luận giải cuốn sách Thinking in Bets', + 'Luận giải cuốn sách The Goal', + 'Luận giải cuốn sách Contagious', + 'Luận giải cuốn sách Positioning' + ], + screenshots: ['#def', '#dfe', '#fde'], + layout: 'standard', + themeColor: '#E8F7E6' + }, + { + title: 'Thêm 325+ tài nguyên hữu ích', + description: 'Framework, Principle, Methodology, Flashcard, mô hình và công cụ ứng dụng', + checklist: [ + 'Sơ đồ tư duy (Mind Mapping)', + 'Ma trận quản lý thời gian Eisenhower', + 'Sơ đồ hóa Quy trình Kinh doanh', + 'ESG Framework - Khung ESG', + 'Three Horizons Framework - Khung Ba Chân trời' + ], + screenshots: ['#def', '#dfe', '#fde'], + layout: 'reserve', + themeColor: '#F4E9F8' + } +]; + +export let Resources = () => { + return ( +
+
+
+

Kho tài nguyên lớn chất lượng

+
Truy cập mở đến kho tàng tri thức kinh doanh
+
+ {data.map(({title, description, checklist, screenshots, layout, themeColor}) => ( +
+
+

{title}

+
{description}
+
+
    + {checklist.map(content => ( +
  • + + {content} +
    • + ))} +
+
+
+
+ ({ + id: background, + render: () => + }))} + /> +
+
+ ))} +
+
+ ); +}; diff --git a/src/aimba/resources/Resources.less b/src/aimba/resources/Resources.less new file mode 100644 index 00000000..70526b21 --- /dev/null +++ b/src/aimba/resources/Resources.less @@ -0,0 +1,117 @@ +@import '../media.less'; + +.Resources { + padding-bottom: 104px; + + .container { + margin: auto; + max-width: 1230px; + padding: 0 30px; + } + + .heading { + .title { + font-size: 38px; + font-weight: 700; + text-align: center; + } + + .description { + margin-top: 10px; + color: #474747; + text-align: center; + } + } + + .catalogue { + margin-top: 43px; + display: flex; + flex-direction: row; + align-items: center; + gap: 30px; + padding: 25px 30px; + border-radius: 12px; + + &.layout-reserve { + flex-direction: row-reverse; + } + + .media-current-max(1000px, { + flex-direction: column; + + &.layout-reserve { + flex-direction: column; + } + }); + + .details { + width: 50%; + padding: 0 20px; + + .media-current-max(1000px, { + width: 100%; + max-width: 600px; + }); + + .media-current-max(500px, { + padding: 0; + }); + + .title { + font-size: 26px; + font-weight: 700; + } + + .description { + margin-top: 10px; + font-size: 18px; + color: #474747; + } + + .checklist { + margin-top: 15px; + + ul { + list-style: none; + + li { + font-size: 16px; + font-weight: 600; + padding: 10px 0; + display: flex; + flex-direction: row; + gap: 10px; + } + } + } + } + + .screenshots { + width: 50%; + + .media-current-max(1000px, { + width: 100%; + max-width: 600px; + }); + + .Slider { + --slide-width: 100%; + --slide-aspect: 1.5; + --slide-spacing: 0; + --slide-padding: 0; + width: var(--slide-width); + margin: auto; + outline: 3px solid #57C9FA99; + border-radius: 4px; + overflow: hidden; + } + + img { + display: block; + position: absolute; + width: 100%; + height: 100%; + } + } + } +} diff --git a/src/aimba/resources/index.js b/src/aimba/resources/index.js new file mode 100644 index 00000000..fc4384d7 --- /dev/null +++ b/src/aimba/resources/index.js @@ -0,0 +1 @@ +export * from './Resources'; diff --git a/src/aimba/slider/Slider.js b/src/aimba/slider/Slider.js new file mode 100644 index 00000000..41c8e228 --- /dev/null +++ b/src/aimba/slider/Slider.js @@ -0,0 +1,267 @@ +import {useEffect, useRef, useState} from 'fiddlehead'; +import {ArrowLeft, ArrowRight} from '../icons'; +import './Slider.less'; + +export let Slider = ({ + slideItems, + children = renderContent +}) => { + let scrollViewRef = useRef(null); + let dotNavigationRef = useRef(null); + let [scrollable, setScrollable] = useState(false); + let buffer = 2; + + let getSlidePadding = () => { + let style = getComputedStyle(scrollViewRef.current); + return parseFloat(style.paddingLeft); + }; + + let getScrollViewData = () => { + let {clientWidth, scrollLeft} = scrollViewRef.current; + let padX = getSlidePadding(); + let innerWidth = clientWidth - 2 * padX; + let start = padX + scrollLeft; + let end = start + innerWidth; + let midpoint = start + innerWidth / 2; + return { scrollLeft, innerWidth, start, end, midpoint }; + }; + + let isSlideActive = (slide) => { + if (slide == null) { + return false; + } + let {offsetLeft, offsetWidth} = slide; + let {innerWidth, start, end, midpoint} = getScrollViewData(); + if (innerWidth >= offsetWidth - buffer) { + return ( + offsetLeft >= start - buffer && + offsetLeft + offsetWidth <= end + buffer + ); + } + return ( + offsetLeft <= midpoint + buffer && + offsetLeft + offsetWidth >= end - buffer + || + offsetLeft <= start + buffer && + offsetLeft + offsetWidth >= midpoint - buffer + || + offsetLeft <= start + buffer && + offsetLeft + offsetWidth >= end - buffer + ); + }; + + let isSlideInView = (slide) => { + if (slide == null) { + return false; + } + let {offsetLeft, offsetWidth} = slide; + let {start, end} = getScrollViewData(); + return ( + offsetLeft + offsetWidth > start - buffer && + offsetLeft < end + buffer + ); + }; + + let refreshSlideFlags = () => { + for (let item of slideItems) { + let slide = getSlideById(item.id); + let active = isSlideActive(slide); + if (slide != null) { + slide.dataset.active = String(active); + slide.dataset.inView = String(isSlideInView(slide)); + } + let dot = getDotById(item.id); + if (dot != null) { + dot.dataset.active = String(active); + } + } + + if (scrollViewRef.current != null) { + let { scrollWidth, clientWidth } = scrollViewRef.current; + setScrollable(scrollWidth > clientWidth); + } + }; + + useEffect(() => { + refreshSlideFlags(); + }); + + useEffect(() => { + if (typeof ResizeObserver === 'undefined') { + return; + } + let scrollView = scrollViewRef.current; + if (scrollView == null) { + return; + } + let previousWidth = 0; + let previousHeight = 0; + let observer = new ResizeObserver(([ entry ]) => { + if (entry.contentRect) { + let {width, height} = entry.contentRect; + let widthChange = Math.abs(width - previousWidth); + let heightChange = Math.abs(height - previousHeight); + let threshold = 2; + if (widthChange > threshold || heightChange > threshold) { + refreshSlideFlags(); + previousWidth = width; + previousHeight = height; + } + } + }); + observer.observe(scrollView); + return () => { + observer.unobserve(scrollView); + }; + }, []); + + let [scrolling, setScrolling] = useState(false); + + let scrollingEndDebounceRef = useRef(null); + + let onScroll = () => { + setScrolling(true); + clearTimeout(scrollingEndDebounceRef.current); + scrollingEndDebounceRef.current = setTimeout(() => { + setScrolling(false); + }, 200); + }; + + let getSlideById = (slideId) => { + if (scrollViewRef.current == null) { + return null; + } + return scrollViewRef.current.querySelector(`.SliderSlide[data-id="${slideId}"]`); + }; + + let getDotById = (slideId) => { + if (dotNavigationRef.current == null) { + return null; + } + return dotNavigationRef.current.querySelector(`button[data-id="${slideId}"]`); + }; + + let findNextSlide = () => { + let activeSlideCount = 0; + for (let item of slideItems) { + let slide = getSlideById(item.id); + let active = isSlideActive(slide); + if (active) { + activeSlideCount++; + } else if (activeSlideCount > 0) { + return slide; + } + } + return getSlideById(slideItems[0]?.id); + }; + + let findPreviousSlide = () => { + let activeSlideCount = 0; + let pickedCount = 0; + let previousSlide = null; + for (let i = slideItems.length - 1; i >= 0; i--) { + let slide = getSlideById(slideItems[i].id); + let active = isSlideActive(slide); + if (active) { + activeSlideCount++; + } else if (pickedCount < activeSlideCount) { + previousSlide = slide; + pickedCount++; + } + } + if (previousSlide != null) { + return previousSlide; + } + return getSlideById(slideItems[slideItems.length - 1]?.id); + }; + + let scrollToSlide = (slide) => { + if (slide == null) { + return; + } + let scrollView = scrollViewRef.current; + scrollView.scrollTo({ + left: slide.offsetLeft - getSlidePadding(), + behavior: 'auto' + }); + }; + + let onBack = () => { + scrollToSlide(findPreviousSlide()); + }; + + let onNext = () => { + scrollToSlide(findNextSlide()); + }; + + let slideShow = () => ( +
+
+ {slideItems.map(item => { + let slide = getSlideById(item.id); + return ( +
+ {item.render()} +
+ ); + })} +
+
+ ); + + let backButton = () => ( + + ); + + let nextButton = () => ( + + ); + + let dotNavigation = () => ( +
+ {slideItems.map(item => ( + + ))} +
+ ); + + return ( +
+ {children({slideShow, backButton, nextButton, dotNavigation})} +
+ ); +}; + +let renderContent = ({slideShow, backButton, nextButton, dotNavigation}) => { + return ( + <> + {slideShow()} + {backButton()} + {nextButton()} + + ); +}; diff --git a/src/aimba/slider/Slider.less b/src/aimba/slider/Slider.less new file mode 100644 index 00000000..5524666e --- /dev/null +++ b/src/aimba/slider/Slider.less @@ -0,0 +1,105 @@ +.Slider { + position: relative; + + .SliderSlideShow { + margin: auto; + height: var(--slide-height); + padding-bottom: calc(100% / var(--slide-aspect)); + } + + .scroll-view { + position: absolute; + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + align-items: stretch; + flex-flow: row nowrap; + gap: var(--slide-spacing); + padding: 0 var(--slide-padding); + overflow-x: scroll; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + + -ms-overflow-style: none; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + + .SliderSlide { + flex: none; + scroll-snap-align: start; + scroll-margin: var(--slide-padding); + display: flex; + justify-content: center; + align-items: center; + width: var(--slide-width); + height: var(--slide-height); + } + + &[data-scrolling="false"] .SliderSlide[data-in-view="false"] { + opacity: 0; + } + + .SliderBackButton, + .SliderNextButton { + position: absolute; + top: 0; + bottom: 0; + margin: auto; + width: 60px; + height: 60px; + border-radius: 6px; + cursor: pointer; + } + + &[data-scrollable="false"] { + .SliderBackButton, + .SliderNextButton { + display: none; + } + } + + .SliderBackButton { + left: 0; + } + + .SliderNextButton { + right: 0; + } + + .SliderDotNavigation { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 0; + + button { + padding: 5px; + width: 20px; + height: 20px; + border-radius: 100%; + cursor: pointer; + + i { + display: block; + width: 10px; + height: 10px; + border-radius: 100%; + background: #BAB8B8; + } + + &:hover i { + background: #CDCACA; + } + + &[data-active="true"] i { + background: #848181; + } + } + } +} diff --git a/src/aimba/slider/index.js b/src/aimba/slider/index.js new file mode 100644 index 00000000..f48a8541 --- /dev/null +++ b/src/aimba/slider/index.js @@ -0,0 +1 @@ +export * from './Slider'; diff --git a/src/aimba/study-system/StudySystem.js b/src/aimba/study-system/StudySystem.js new file mode 100644 index 00000000..f70ed27e --- /dev/null +++ b/src/aimba/study-system/StudySystem.js @@ -0,0 +1,49 @@ +import {Slider} from '../slider'; +import './StudySystem.less'; + +export let StudySystem = () => { + return ( +
+
+
+

Hệ sinh thái học tập toàn diện

+
+
+ Không còn lý thuyết suông - Mọi kiến thức đều được kết nối với bối cảnh kinh doanh thật. + Tự mở rộng tình huống thực tế không giới hạn với case builder. +
+
+
+
+ ({ + id: background, + render: () => + }))} + /> +
+
+
+
+
    + {[ + ['1048+', 'Case Study', 'Tình huống thực tế'], + ['250+', 'Khối lý thuyết', 'Được chắt lọc cẩn thận'], + ['500+', 'Mini Quiz', 'Kiểm tra nắm chắc kiến thức'], + ['100+', 'Tips quản trị', 'Bí quyết tạo nên khác biệt'], + ['15', 'Module chuyên biệt', 'Từ cơ bản đến nâng cao'], + ['365', 'Ngày truy cập', 'Học linh hoạt theo lịch'] + ].map(([quantity, unit, description]) => ( +
  • +
    {quantity}
    +
    {unit}
    +
    {description}
    +
    • + ))} +
+
+
+
+
+ ); +}; diff --git a/src/aimba/study-system/StudySystem.less b/src/aimba/study-system/StudySystem.less new file mode 100644 index 00000000..b1d1ce23 --- /dev/null +++ b/src/aimba/study-system/StudySystem.less @@ -0,0 +1,123 @@ +@import '../media.less'; + +.StudySystem { + .heading { + background: #F6F6F6; + + .container { + max-width: 1200px; + padding: 0 15px; + margin: auto; + } + + .title { + font-weight: 700; + font-size: 38px; + text-align: center; + } + + .divider { + margin: 24px auto 38px; + background: #008FD4; + width: 105px; + height: 2px; + } + + .description { + font-weight: 700; + font-style: italic; + font-size: 24px; + text-align: center; + } + } + + .screenshots { + padding: 40px 0 150px; + background: #F6F6F6; + color: #474747; + + .Slider { + --slide-width: min(1170px, 100%); + --slide-aspect: 2.1; + --slide-spacing: 80px; + --slide-padding: 60px; + max-width: calc(var(--slide-width) + 2 * var(--slide-padding)); + margin: auto; + + .media-current-max(800px, { + --slide-padding: 0; + }); + } + + img { + display: block; + position: absolute; + width: 100%; + height: 100%; + } + } + + .numbers { + .container { + margin: auto; + max-width: 1460px; + padding: 0 20px; + } + + .content-bar { + background: #1E4AA3; + color: white; + border-radius: 14px; + transform: translateY(-72px); + } + + ul { + margin: auto; + max-width: 1260px; + min-height: 144px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: 30px; + padding: 30px; + list-style: none; + + .media-current-max(1000px, { + flex-wrap: wrap; + justify-content: center; + }); + + li { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + + .media-current-max(1000px, { + width: calc((100% - 2 * 30px) / 3); + }); + + .media-current-max(800px, { + width: calc((100% - 1 * 30px) / 2); + }); + + .quantity { + font-weight: 700; + font-size: 30px; + } + + .unit { + margin-block-start: 8px; + font-weight: 700; + font-size: 17px; + } + + .description { + margin-block-start: 4px; + font-size: 15px; + } + } + } + } +} diff --git a/src/aimba/study-system/index.js b/src/aimba/study-system/index.js new file mode 100644 index 00000000..e9230589 --- /dev/null +++ b/src/aimba/study-system/index.js @@ -0,0 +1 @@ +export * from './StudySystem'; diff --git a/src/aimba/target-audience/TargetAudience.js b/src/aimba/target-audience/TargetAudience.js new file mode 100644 index 00000000..7f5dd39a --- /dev/null +++ b/src/aimba/target-audience/TargetAudience.js @@ -0,0 +1,81 @@ +import {ArrowTopRight, BachelorCap, BadgeCheck, FileChart, PeoplePlus} from '../icons'; +import './TargetAudience.less'; + +export let TargetAudience = () => { + let icons = { + PeoplePlus, + FileChart, + BachelorCap + }; + + let audienceData = { + left: ['PeoplePlus', 'Học viên chuẩn bị học MBA', 'Trang bị nền tảng thực tiễn để học sâu và hiệu quả hơn.'], + central: ['FileChart', 'Học viên tìm kiếm giải pháp tinh gọn', 'Sở hữu năng lực quản trị ứng dụng ngay, không tốn nhiều thời gian và chi phí.'], + right: ['BachelorCap', 'Học viên đã tốt nghiệp MBA', 'Biến kiến thức học thuật thành năng lực thực chiến, phù hợp bối cảnh Việt Nam.'], + }; + + let certificateData = [ + 'Nhận Chứng nhận Hoàn thành AiMBA khẳng định học viên có tri thức & kĩ năng quản trị chuẩn quốc tế.', + 'Nắm vững những kiến thức chuyên sâu về quản trị kinh doanh ứng dụng tư duy quản trị số và công nghệ AI để xây dựng chiến lược kinh doanh phù hợp cho doanh nghiệp.', + 'Am hiểu và biết cách ứng dụng công nghệ AI vào các khía cạnh của quản trị kinh doanh nhằm phân tích, phát hiện, xây dựng giải pháp giải quyết các vấn đề quản trị.', + 'Nắm vững các kỹ năng cốt yếu, rèn luyện tư duy phân tích nhạy bén và am hiểu sâu sắc các xu hướng chuyển đổi số doanh nghiệp nhằm phân tích, phát hiện, xây dựng giải pháp kinh doanh đổi mới, bắt kịp các xu hướng mới.' + ]; + + return ( +
+
+

AiMBA được thiết kế đặc biệt dành cho

+
+
+
+
    + {['central', 'left', 'right'].map(position => { + let [iconName, title, description] = audienceData[position]; + let Icon = icons[iconName]; + return ( +
  • +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    + {title} +
    +
    + {description} +
    +
    • + )})} +
+
+
+
+

Chứng nhận - cam kết

+
+
+
    + {certificateData.map(statement => ( +
  • + + {statement} +
    • + ))} +
+
+
+ +
+
+
+
+
+ ); +}; diff --git a/src/aimba/target-audience/TargetAudience.less b/src/aimba/target-audience/TargetAudience.less new file mode 100644 index 00000000..2485e8e6 --- /dev/null +++ b/src/aimba/target-audience/TargetAudience.less @@ -0,0 +1,180 @@ +@import '../media.less'; + +.TargetAudience { + padding: 75px 0 35px; + background: linear-gradient(to bottom, #EAF8FF, white 654px, white); + + > .heading { + margin: auto; + max-width: 1200px; + padding: 0 15px; + + .title { + font-size: 32px; + font-weight: 700; + line-height: 42px; + text-align: center; + } + + .divider { + margin: 21px auto 0; + width: 105px; + height: 2px; + background: #008FD4; + } + } + + > .audience { + margin: auto; + max-width: 1230px; + padding: 0 30px; + + ul { + margin-top: 60px; + display: grid; + grid-template: "left central right" / 1fr 1fr 1fr; + gap: 30px; + + .media-current-max(800px, { + max-width: 500px; + margin-left: auto; + margin-right: auto; + grid-template: "central" "left" "right"; + }); + + li { + padding: 16px 16px 37px 32px; + border-radius: 14px; + box-shadow: 0 16px 32px #0C0C0D1A; + + .icons { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + .arrow-pie { + width: 47px; + height: 47px; + border-radius: 100%; + display: flex; + align-items: center; + justify-content: center; + } + } + + .title { + margin-top: 27px; + font-size: 21px; + font-weight: 700; + } + + .description { + margin-top: 15px; + font-size: 16px; + line-height: 25px; + } + + &.central { + grid-area: central; + } + + &.left { + grid-area: left; + } + + &.right { + grid-area: right; + } + + &.central { + background: linear-gradient(to right, #1E469E, #25A5DE); + color: white; + + .arrow-pie { + background: white; + color: #1F49A0; + } + } + + &.left, + &.right { + background: white; + + .arrow-pie { + background: #1F49A0; + color: white; + } + + .description { + color: #474747; + } + } + } + } + } + + > .certificate { + margin: 52px auto 0; + max-width: 1230px; + padding: 0 30px; + + .big-card { + margin: auto; + padding: 37px 70px 42px 48px; + border-radius: 15px; + background: linear-gradient(to right, #1E469E, #25A5DE); + box-shadow: 0 6px 10px #00000026; + color: white; + + .media-current-max(800px, { + max-width: 500px; + padding: 37px 30px 42px 30px; + }); + } + + + .title { + font-size: 32px; + font-weight: 700; + line-height: 42px; + text-align: center; + } + + .content { + margin-top: 39px; + display: grid; + grid-template-columns: 6fr 5fr; + gap: 36px; + + .media-current-max(800px, { + grid-template-columns: 1fr; + }); + + .details { + ul { + display: flex; + flex-direction: column; + gap: 17px; + + li { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 14px; + + span { + font-size: 15px; + line-height: 22px; + text-align: justify; + } + } + } + } + + .photos { + + } + } + } +} diff --git a/src/aimba/target-audience/index.js b/src/aimba/target-audience/index.js new file mode 100644 index 00000000..17142b7d --- /dev/null +++ b/src/aimba/target-audience/index.js @@ -0,0 +1 @@ +export * from './TargetAudience'; diff --git a/src/aimba/top-bar/TopBar.js b/src/aimba/top-bar/TopBar.js new file mode 100644 index 00000000..206966d3 --- /dev/null +++ b/src/aimba/top-bar/TopBar.js @@ -0,0 +1,27 @@ +import {Logo} from '../pictogram'; +import './TopBar.less'; + +export let TopBar = () => { + return ( +
+
+
+ +
+
+
+ Giá trị + Cách học + Hệ sinh thái + Module + Ưu đãi +
+
+ + +
+
+
+
+ ); +}; diff --git a/src/aimba/top-bar/TopBar.less b/src/aimba/top-bar/TopBar.less new file mode 100644 index 00000000..72c1f38b --- /dev/null +++ b/src/aimba/top-bar/TopBar.less @@ -0,0 +1,101 @@ +@import '../media.less'; + +.TopBar { + background: white; + + .container { + max-width: 1170px; + padding: 15px; + margin: auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 15px; + } + + .brand { + .Logo { + .media-current-max(600px, { + width: 100px; + }); + + .media-current-max(400px, { + width: 80px; + }); + } + } + + .nav { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + + .links { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 10px; + } + + .actions { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; + } + + a, button { + display: inline-flex; + justify-content: center; + align-items: center; + text-align: center; + padding: 6px 12px; + min-height: 40px; + border-radius: 6px; + cursor: pointer; + } + + a { + &:hover { + color: #1E469E; + } + } + + button { + min-width: 120px; + font-weight: 700; + } + + button.login { + color: #1E469E; + background: #E6F1FD; + } + + button.signup { + color: white; + background: linear-gradient(to right, #1E459D, #28A8E0); + } + + .media-current-max(1000px, { + .links { + display: none; + } + }); + + .media-current-max(600px, { + button { + min-width: auto; + min-height: 35px; + font-size: 12px; + } + }); + + .media-current-max(400px, { + button { + min-width: auto; + min-height: 30px; + font-size: 11px; + } + }); + } +} diff --git a/src/aimba/top-bar/index.js b/src/aimba/top-bar/index.js new file mode 100644 index 00000000..d19b2d50 --- /dev/null +++ b/src/aimba/top-bar/index.js @@ -0,0 +1 @@ +export * from './TopBar'; diff --git a/src/entries/aimba.js b/src/entries/aimba.js new file mode 100644 index 00000000..e1c4d582 --- /dev/null +++ b/src/entries/aimba.js @@ -0,0 +1,8 @@ +// title: AI MBA +// description: AI MBA +// themeColor: white + +import {render} from 'fiddlehead'; +import {AiMBA} from '../aimba/AiMBA'; + +render(, document.getElementById('root'));