AI MBA landing

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;

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'));
 });

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 (
+        <div class="AiMBA">
+            <TopBar />
+            <Header />
+            <StudySystem />
+            <Resources />
+            <Modules />
+            <OurSolution />
+            <CoreValues />
+            <Features />
+            <LearningStrategy />
+            <TargetAudience />
+            <BeingTrusted />
+            <Enrollment />
+            <FrequentlyAskedQuestions />
+            <Footer />
+        </div>
+    );
+};

src/aimba/AiMBA.less

@@ -0,0 +1,2 @@
+.AiMBA {
+}

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 (
+        <div class="AiMBA">
+            <TopBar />
+            <Header />
+            <StudySystem />
+            <Resources />
+            <Modules />
+            <OurSolution />
+            <CoreValues />
+            <Features />
+            <LearningStrategy />
+            <TargetAudience />
+            <BeingTrusted />
+            <Enrollment />
+            <FrequentlyAskedQuestions />
+            <Footer />
+        </div>
+    );
+};

src/aimba/AiMba.less

@@ -0,0 +1,2 @@
+.AiMBA {
+}

src/aimba/being-trusted/BeingTrusted.js

@@ -0,0 +1,96 @@
+import './BeingTrusted.less';
+import {Slider} from '../slider';
+
+export let BeingTrusted = () => {
+    let feedbackData = [
+        {
+            avatar: '1',
+            name: '1 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: '2 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: '3 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.'
+        },
+        {
+            avatar: '4',
+            name: '4 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: '5',
+            name: '5 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: '6',
+            name: '6 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: '7',
+            name: '7 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: '8',
+            name: '8 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: '9',
+            name: '9 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: '10',
+            name: '10 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.'
+        },
+
+    ];
+
+    return (
+        <section class="BeingTrusted">
+            <div class="heading">
+                <h2 class="title">Được tin tưởng bởi hơn 1.024 chuyên gia/managers/CEOs</h2>
+                <div class="description">Truy cập mở đến kho tàng tri thức kinh doanh</div>
+            </div>
+            <div class="feedbacks">
+                <Slider
+                    slideItems={feedbackData.map(({avatar, name, description, feedback}) => ({
+                        id: `${name}, ${avatar}`,
+                        render: () => (
+                            <div class="card">
+                                <div class="avatar">
+                                    <div class="rounded-image">
+                                    </div>
+                                </div>
+                                <div class="name">{name}</div>
+                                <div class="description">{description}</div>
+                                <div class="feedback">{feedback}</div>
+                            </div>
+                        )
+                    }))}
+                />
+            </div>
+        </section>
+    );
+};

src/aimba/being-trusted/BeingTrusted.less

@@ -0,0 +1,77 @@
+.BeingTrusted {
+    padding: 40px 0;
+
+    .heading {
+        margin: auto;
+        max-width: 1170px;
+
+        .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: 488px;
+            --slide-spacing: 30px;
+            --slide-padding: 60px;
+        }
+
+        .card {
+            padding: 28px 42px;
+            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 {
+                margin-top: 24px;
+                font-size: 15px;
+                line-height: 20px;
+                color: #4E4D4D;
+                height: 160px;
+                overflow: auto;
+                scrollbar-width: thin;
+            }
+        }
+    }
+}

src/aimba/being-trusted/index.js

@@ -0,0 +1 @@
+export * from './BeingTrusted';

src/aimba/common.less

@@ -0,0 +1,44 @@
+* {
+    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;
+}

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 (
+        <section class="CoreValues">
+            <h2 class="title">Giá trị nhận được khi đầu tư AiMBA</h2>
+            <div class="divider" />
+            <div class="values">
+                <ul>
+                    {data.map(([picName, text]) => {
+                        let Pictogram = pictograms[picName];
+                        return (
+                            <li key={text}>
+                                <div class="pictogram"><Pictogram /></div>
+                                <div class="divider" />
+                                <div class="text">{text}</div>
+                            </li>
+                        );
+                    })}
+                </ul>
+            </div>
+        </section>
+    );
+};