Hugging Face's logo

Spaces:
LauraMDB
/
mongodb-mastery-hub
Running

App Files Community
mongodb-mastery-hub
File size: 10,291 Bytes 
7d6fdce
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MongoMaster Academy | MongoDB Courses</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="components/course-card.js"></script>
</head>
<body class="bg-gray-50">
    <custom-navbar></custom-navbar>

    <main class="container mx-auto px-4 py-12">
        <!-- Hero Section -->
        <section class="mb-16 text-center">
            <h1 class="text-5xl font-bold text-gray-800 mb-6">Master MongoDB with Expert-Led Training</h1>
            <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
                Join our live, instructor-led courses and take your MongoDB skills to the next level. From beginners to advanced administrators, we've got you covered.
            </p>
            <div class="flex justify-center gap-4">
                <a href="#upcoming-courses" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">
                    Browse Courses
                </a>
                <a href="#" class="border border-gray-300 hover:bg-gray-100 text-gray-700 px-6 py-3 rounded-lg font-medium transition-colors">
                    <span class="flex items-center gap-2">
                        <i data-feather="play-circle"></i> Watch Demo
                    </span>
                </a>
            </div>
        </section>

        <!-- Courses Section -->
        <section id="upcoming-courses" class="mb-20">
            <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Upcoming Courses</h2>
            
            <!-- Month Selector -->
            <div class="flex justify-center mb-8">
                <div class="inline-flex rounded-md shadow-sm" role="group">
                    <button type="button" class="month-btn active px-4 py-2 text-sm font-medium rounded-l-lg border border-gray-300 bg-gray-100 text-gray-700">
                        November 2025
                    </button>
                    <button type="button" class="month-btn px-4 py-2 text-sm font-medium border-t border-b border-gray-300 hover:bg-gray-50 text-gray-700">
                        December 2025
                    </button>
                    <button type="button" class="month-btn px-4 py-2 text-sm font-medium rounded-r-lg border border-gray-300 hover:bg-gray-50 text-gray-700">
                        January 2026
                    </button>
                </div>
            </div>

            <!-- Month Sections -->
            <div id="november-2025" class="month-section">
                <h3 class="text-2xl font-semibold text-gray-800 mb-6">November 2025</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <custom-course-card 
                        title="OFA400: Atlas Admin" 
                        date="Nov 25th 2025" 
                        time="03:00PM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/ofa400-atlas-admin?courseId=c0caf703-35d5-4a9d-a561-5db9cb7d40ee"
                    ></custom-course-card>
                    <custom-course-card 
                        title="OFA500: Atlas API" 
                        date="Nov 26th 2025" 
                        time="03:00PM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/ofa500-atlas-api?courseId=4e805e95-4818-4b11-8dcb-7d77a9bfb016"
                    ></custom-course-card>
                    <custom-course-card 
                        title="DEV400: MongoDB Developer Extension" 
                        date="Nov 27th 2025" 
                        time="03:00PM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/dev400-mongodb-developer-extension?courseId=f9a7be49-8f08-48c6-8b17-227ac788fd68"
                    ></custom-course-card>
                </div>
            </div>

            <div id="december-2025" class="month-section hidden">
                <h3 class="text-2xl font-semibold text-gray-800 mb-6">December 2025</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <custom-course-card 
                        title="OA620: Ops Manager Sizing, Installation and Config" 
                        date="Dec 1st 2025" 
                        time="08:00AM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/oa620-ops-manager-sizing-installation-and-config?courseId=c715808d-b230-4b5a-a171-84f5abbd250c"
                    ></custom-course-card>
                    <custom-course-card 
                        title="OA630: Self-Hosted Security" 
                        date="Dec 1st 2025" 
                        time="09:00AM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/oa630-self-hosted-security?courseId=a336fdd2-efe3-41cf-84b6-e27848f03ada"
                    ></custom-course-card>
                    <custom-course-card 
                        title="OFS400: Ops Manager Admin" 
                        date="Dec 2nd 2025" 
                        time="08:00AM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/ofs400-ops-manager-admin?courseId=38daf3f4-d881-4d33-bab4-27b131bff43c"
                    ></custom-course-card>
                </div>
            </div>

            <div id="january-2026" class="month-section hidden">
                <h3 class="text-2xl font-semibold text-gray-800 mb-6">January 2026</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    <custom-course-card 
                        title="DEV400: MongoDB Developer Extension" 
                        date="Jan 5th 2026" 
                        time="01:00AM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/dev400-mongodb-developer-extension?courseId=97e2974f-4f6c-452c-975a-416cced4f9b7"
                    ></custom-course-card>
                    <custom-course-card 
                        title="OFS400: Ops Manager Admin" 
                        date="Jan 16th 2026" 
                        time="09:00AM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/ofs400-ops-manager-admin?courseId=4b6ebd08-ea9a-4eba-95be-2fd830dfdfb7"
                    ></custom-course-card>
                    <custom-course-card 
                        title="OFS400: Ops Manager Admin" 
                        date="Jan 16th 2026" 
                        time="03:00PM (UTC+00:00)" 
                        location="Online" 
                        link="https://learn.mongodb.com/courses/ofs400-ops-manager-admin?courseId=9f731561-f871-48f5-8924-d5b1e6227aab"
                    ></custom-course-card>
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">Why Learn With Us</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                    <div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="users" class="text-green-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Expert Instructors</h3>
                    <p class="text-gray-600">Learn from MongoDB-certified instructors with real-world experience.</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                    <div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="clock" class="text-blue-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Flexible Scheduling</h3>
                    <p class="text-gray-600">Multiple time slots available to fit your schedule.</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow">
                    <div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="award" class="text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-800 mb-2">Certification</h3>
                    <p class="text-gray-600">Earn certificates to validate your MongoDB expertise.</p>
                </div>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script>
        feather.replace();
        
        // Month selector functionality
        document.querySelectorAll('.month-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.month-btn').forEach(b => b.classList.remove('active', 'bg-gray-100'));
                btn.classList.add('active', 'bg-gray-100');
                
                document.querySelectorAll('.month-section').forEach(section => {
                    section.classList.add('hidden');
                });
                
                const monthId = btn.textContent.trim().toLowerCase().replace(' ', '-');
                document.getElementById(monthId).classList.remove('hidden');
            });
        });
    </script>
</body>
</html>