Meet Your Expert Instructors
Belajar langsung dari praktisi AI dan pendidik berpengalaman yang telah mengimplementasikan AI dalam dunia pendidikan
2026-03-08 20:03
Diff
<!doctype html>
<html lang="id" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title data-content-id="meta.title">AI in Education - Ruangguru Bootcamp Academy</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<meta name="robots" content="noindex, follow" />
<style>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
background: white;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: #f0f4ff;
z-index: 1000;
padding: 0;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 8px 16px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-brand img {
width: 244.44px;
height: 44px;
}
.nav-menu {
display: flex;
align-items: center;
gap: 32px;
}
.nav-menu a {
color: #374151;
font-size: 14px;
font-weight: 400;
text-decoration: none;
transition: color 0.3s ease;
}
.nav-menu a:hover {
color: #0068fe;
}
.nav-cta {
background: #0068fe;
color: #f8fafc;
padding: 12px 32px;
border-radius: 6px;
text-decoration: none;
font-size: 13.34px;
font-weight: 700;
line-height: 20px;
transition: all 0.3s ease;
}
.nav-cta:hover {
background: #0056d6;
transform: translateY(-2px);
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
cursor: pointer;
padding: 4px;
}
.hamburger {
width: 25px;
height: 3px;
background: #374151;
margin: 3px 0;
transition: 0.3s;
border-radius: 2px;
}
.mobile-menu-toggle.active .hamburger:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-toggle.active .hamburger:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
.mobile-menu-toggle {
display: none;
background: none;
border: none;
font-size: 24px;
color: #374151;
cursor: pointer;
}
/* Hero Section */
.hero-section {
min-height: 100vh;
background: linear-gradient(180deg, #eff6ff 0%, white 100%);
position: relative;
display: flex;
align-items: center;
padding: 120px 0 80px;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.hero-section.visible {
opacity: 1;
transform: translateY(0);
}
.hero-background {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background: #d684ff;
opacity: 0.2;
border-radius: 50%;
filter: blur(200px);
z-index: 0;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 1;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.8s ease-out 0.2s,
transform 0.8s ease-out 0.2s;
}
.hero-content.visible {
opacity: 1;
transform: translateY(0);
}
.hero-text {
display: flex;
flex-direction: column;
gap: 27px;
}
.hero-badge {
display: inline-flex;
align-items: center;
padding: 8px 17px;
border-radius: 9999px;
border: 1px solid #bfdbfe;
width: fit-content;
}
.hero-badge span {
color: #0e6afe;
font-size: 14px;
font-weight: 700;
line-height: 16px;
}
.hero-title {
color: #020817;
font-size: 40px;
font-weight: 700;
line-height: 60px;
word-wrap: break-word;
}
.hero-description {
color: #333333;
font-size: 20px;
line-height: 30px;
}
.hero-description .highlight {
font-weight: 700;
}
.hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.btn-primary {
background: #0068fe;
color: #f8fafc;
padding: 12px 32px;
border-radius: 6px;
text-decoration: none;
font-size: 13.34px;
font-weight: 700;
line-height: 20px;
text-align: center;
transition: all 0.3s ease;
border: none;
cursor: pointer;
width: fit-content;
}
.btn-primary:hover {
background: #0056d6;
transform: translateY(-2px);
}
.btn-secondary {
background: white;
color: #020817;
padding: 12px 32px;
border: 1px solid #e2e8f0;
border-radius: 6px;
text-decoration: none;
font-size: 13.23px;
font-weight: 700;
line-height: 20px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-secondary:hover {
background: #f8fafc;
transform: translateY(-2px);
}
/* Certificate button engaging pulse/glow effect */
.certificate-section .btn-secondary {
position: relative;
overflow: visible;
background: linear-gradient(135deg, #1ac3f4 0%, #7c73f6 100%);
color: white;
border: none;
box-shadow:
0 0 0 0 rgba(26, 195, 244, 0.7),
0 8px 25px rgba(26, 195, 244, 0.3);
animation:
pulse-glow 2s ease-in-out infinite,
gentle-float 4s ease-in-out infinite;
transform: translateY(0);
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.certificate-section .btn-secondary::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
background: linear-gradient(135deg, #1ac3f4, #7c73f6);
border-radius: 9px;
z-index: -1;
filter: blur(15px);
opacity: 0.6;
animation: pulse-border 2s ease-in-out infinite;
}
.certificate-section .btn-secondary:hover {
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
transform: translateY(-3px) scale(1.05);
box-shadow:
0 0 0 8px rgba(26, 195, 244, 0.2),
0 12px 35px rgba(26, 195, 244, 0.4);
animation:
pulse-glow-intense 1.8s ease-in-out infinite,
gentle-float 4s ease-in-out infinite;
}
/* Keyframe animations for clean pulse effects */
@keyframes pulse-glow {
0%,
100% {
box-shadow:
0 0 0 0 rgba(26, 195, 244, 0.7),
0 8px 25px rgba(26, 195, 244, 0.3);
}
50% {
box-shadow:
0 0 0 12px rgba(26, 195, 244, 0),
0 12px 35px rgba(26, 195, 244, 0.5);
}
}
@keyframes pulse-glow-intense {
0%,
100% {
box-shadow:
0 0 0 8px rgba(26, 195, 244, 0.2),
0 12px 35px rgba(26, 195, 244, 0.4);
}
50% {
box-shadow:
0 0 0 16px rgba(26, 195, 244, 0),
0 16px 45px rgba(26, 195, 244, 0.6);
}
}
@keyframes gentle-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
@keyframes pulse-border {
0%,
100% {
opacity: 0.6;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.03);
}
}
.hero-image {
width: 100%;
max-width: 500px;
height: 375px;
background: linear-gradient(151deg, #dbeafe 0%, #f8ecfe 100%);
border-radius: 16px;
overflow: hidden;
position: relative;
box-shadow: 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
}
.hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-stats {
position: absolute;
bottom: 16px;
left: 16px;
right: 16px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(2px);
border-radius: 12px;
padding: 15px 21px;
box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.stat-item {
text-align: center;
}
.stat-number {
color: #1ac3f4;
font-size: 20px;
font-weight: 700;
line-height: 30px;
}
.stat-label {
color: #2c313a;
font-size: 14px;
font-weight: 600;
line-height: 24px;
}
/* Detail Program Section */
.detail-program-section {
padding: 80px 0;
background: white;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.detail-program-section.visible {
opacity: 1;
transform: translateY(0);
}
.detail-program-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.detail-program-bg .bg-blur-1 {
position: absolute;
width: 720px;
height: 360px;
left: -200px;
top: 70%;
background: #1ac3f4;
opacity: 0.4;
border-radius: 50%;
filter: blur(240px);
}
.detail-program-bg .bg-blur-2 {
position: absolute;
width: 960px;
height: 480px;
right: -200px;
top: 40%;
background: #2196f3;
opacity: 0.3;
border-radius: 50%;
filter: blur(240px);
}
.detail-program-bg .bg-blur-3 {
position: absolute;
width: 960px;
height: 480px;
left: -150px;
top: 10%;
background: #2196f3;
opacity: 0.3;
border-radius: 50%;
filter: blur(240px);
}
.section-title {
text-align: center;
color: #2c313a;
font-size: 32px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
line-height: 40px;
margin-bottom: 32px;
}
.program-info {
background: linear-gradient(25deg, rgba(26, 195, 244, 0.1) 0%, rgba(13, 92, 241, 0.1) 49%, rgba(116, 113, 250, 0.1) 100%);
border-radius: 12px;
padding: 20px;
margin-bottom: 32px;
backdrop-filter: blur(50px);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
position: relative;
z-index: 1;
}
.program-info-item {
display: flex;
align-items: flex-start;
gap: 8px;
padding-right: 16px;
border-right: 1px solid #dadfea;
}
.program-info-item:last-child {
border-right: none;
}
.program-info-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 2px;
}
.program-info-content h4 {
color: #2c313a;
font-size: 14px;
font-weight: 400;
line-height: 22px;
margin-bottom: 4px;
}
.program-info-content p {
color: #2c313a;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.course-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
position: relative;
z-index: 1;
}
.course-card {
background: white;
border-radius: 12px;
padding: 16px;
box-shadow: 0px 8px 16px rgba(39, 163, 154, 0.12);
transition: all 0.3s ease;
border: 1px solid #e2e8f0;
height: fit-content;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.course-card.visible {
opacity: 1;
transform: translateY(0);
}
.course-card:hover {
transform: translateY(-4px);
box-shadow: 0px 12px 24px rgba(39, 163, 154, 0.18);
border-color: #1ac3f4;
}
.course-card.expanded {
background: #f8fafc;
border-color: #1ac3f4;
box-shadow: 0px 12px 24px rgba(39, 163, 154, 0.18);
}
.course-header {
display: flex;
align-items: center;
gap: 16px;
}
.course-number {
width: 32px;
height: 32px;
background: linear-gradient(45deg, #1ac3f4 0%, #0d5cf1 25%, #7471fa 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
font-weight: 600;
flex-shrink: 0;
}
.course-title {
flex: 1;
color: #2c313a;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.course-toggle {
width: 32px;
height: 32px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 50%;
cursor: pointer;
color: #64748b;
font-size: 16px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.course-toggle:hover {
background: #1ac3f4;
color: white;
border-color: #a9ecff;
transform: scale(1.1);
}
.course-toggle.expanded:hover {
background: #a6e1f1;
color: white;
transform: scale(1.1);
}
.course-toggle img {
width: 16px;
height: 16px;
transition: all 0.3s ease;
transform: rotate(180deg);
}
.course-toggle.expanded img {
transform: rotate(0deg);
}
.course-description {
color: #2c313a;
font-size: 16px;
font-weight: 400;
line-height: 24px;
margin-top: 16px;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
display: none;
animation: fadeInDown 0.3s ease;
}
.course-description.show {
display: block;
}
/* Instructor Section */
.instructor-section {
padding-top: 60px;
background: linear-gradient(135deg, #f8fafc 0%, #e1f5fe 50%, #f3e5f5 100%);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.instructor-section.visible {
opacity: 1;
transform: translateY(0);
}
.instructor-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(26, 195, 244, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(164, 198, 254, 0.05) 0%, transparent 50%);
pointer-events: none;
}
.instructor-content {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 1;
}
.instructor-title {
color: #2c313a;
font-size: 32px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-weight: 800;
line-height: 40px;
margin-bottom: 16px;
}
.instructor-subtitle {
color: #6b7280;
font-size: 18px;
font-weight: 400;
line-height: 28px;
max-width: 600px;
margin: 0 auto;
}
.instructor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 20px;
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 1;
margin-bottom: 60px;
}
.instructor-card {
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 20px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.instructor-card.visible {
opacity: 1;
transform: translateY(0);
}
.instructor-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #1ac3f4 0%, #7c73f6 50%, #f093fb 100%);
transform: scaleX(0);
transition: transform 0.4s ease;
}
.instructor-card:hover::before {
transform: scaleX(1);
}
.instructor-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(26, 195, 244, 0.2);
background: rgba(255, 255, 255, 0.95);
}
.instructor-header {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
align-items: center;
font-size: 1rem;
}
.instructor-role {
color: #949494;
font-weight: 600;
font-size: 14px;
}
.instructor-avatar {
width: 70px;
height: 70px;
border-radius: 16px;
object-fit: cover;
border: 3px solid transparent;
background:
linear-gradient(45deg, #1ac3f4, #7c73f6) padding-box,
linear-gradient(45deg, #1ac3f4, #7c73f6) border-box;
flex-shrink: 0;
}
.instructor-info {
flex: 1;
min-width: 0;
}
.instructor-name {
color: #2c313a;
font-size: 18px;
font-weight: 700;
line-height: 24px;
margin-bottom: 4px;
}
.instructor-title-role {
color: #7c73f6;
font-size: 13px;
font-weight: 600;
line-height: 18px;
margin-bottom: 0;
letter-spacing: 0.5px;
}
.instructor-bio {
color: #6b7280;
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-bottom: 16px;
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 3;
overflow: hidden;
}
.instructor-expertise {
position: relative;
}
.expertise-banner {
background: linear-gradient(90deg, rgba(26, 195, 244, 0.1) 0%, rgba(124, 115, 246, 0.1) 100%);
border: 1px solid rgba(26, 195, 244, 0.2);
border-radius: 12px;
padding: 8px 12px;
position: relative;
overflow: hidden;
}
.expertise-banner::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.expertise-content {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.expertise-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
flex: 1;
}
.expertise-tag {
background: rgba(255, 255, 255, 0.8);
color: #1ac3f4;
padding: 2px 8px;
border-radius: 6px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
border: 1px solid rgba(26, 195, 244, 0.3);
}
.expertise-count {
color: #7c73f6;
font-size: 11px;
font-weight: 600;
margin-left: 8px;
white-space: nowrap;
}
/* Certificate Section */
.certificate-section {
padding: 48px 0;
background: white;
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.certificate-section.visible {
opacity: 1;
transform: translateY(0);
}
.certificate-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.certificate-text h2 {
color: #2c313a;
font-size: 36px;
font-weight: 700;
line-height: 54px;
margin-bottom: 24px;
}
.certificate-text h2 .highlight {
color: #1ac3f4;
}
.certificate-image {
position: relative;
}
.certificate-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 266px;
height: 188px;
background: linear-gradient(140deg, #495ccb 0%, #61aeff 72%, #69fedc 100%);
border-radius: 8.89px;
filter: blur(37.05px);
z-index: 0;
}
.certificate-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.certificate-name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #f69c5d;
font-size: 15.83px;
font-weight: 700;
text-align: center;
background: rgba(0, 0, 0, 0.8);
padding: 8px 16px;
border-radius: 4px;
}
/* Testimonials Section */
.testimonials-section {
padding: 60px 0;
background: white;
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.testimonials-section.visible {
opacity: 1;
transform: translateY(0);
}
.testimonials-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.testimonials-title {
color: #020817;
font-size: 28.95px;
font-weight: 700;
line-height: 36px;
}
.testimonials-subtitle {
color: #4b5563;
font-size: 15px;
font-weight: 400;
line-height: 24px;
}
.testimonials-nav {
display: flex;
gap: 8px;
}
.nav-btn {
width: 40px;
height: 40px;
background: white;
border: 1px solid #e2e8f0;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 18px;
color: #020817;
}
.nav-btn:hover {
background: #f8fafc;
transform: translateY(-2px);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
.testimonial-card {
background: white;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 25px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
gap: 12px;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.testimonial-card.visible {
opacity: 1;
transform: translateY(0);
}
.stars {
color: gold;
}
.author-name {
font-weight: bold;
}
.testimonial-author {
display: flex;
gap: 12px;
align-items: center;
}
.testimonial-author img {
width: 40px;
height: 40px;
border-radius: 100px;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
}
.testimonial-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.testimonial-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ffdbb8;
object-fit: cover;
}
.testimonial-info h4 {
color: #020817;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
.testimonial-info p {
color: #6b7280;
font-size: 11.25px;
font-weight: 400;
line-height: 16px;
}
.testimonial-rating {
display: flex;
gap: 2px;
margin-bottom: 12px;
}
.star {
width: 16px;
height: 16px;
background: #ffca28;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.testimonial-text {
color: #4b5563;
font-size: 15px;
font-weight: 400;
line-height: 24px;
flex-grow: 1;
}
/* FAQ Section */
.faq-section {
padding: 80px 0;
background: white;
position: relative;
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.faq-section.visible {
opacity: 1;
transform: translateY(0);
}
.faq-bg {
position: absolute;
top: 50%;
left: -20%;
width: 820px;
height: 410px;
background: linear-gradient(180deg, #d084ff 0%, #8ccdff 100%);
opacity: 0.2;
border-radius: 50%;
filter: blur(150px);
z-index: 0;
}
.faq-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
position: relative;
z-index: 1;
align-items: start;
}
.faq-text {
display: flex;
flex-direction: column;
gap: 20px;
}
.faq-text .hero-badge {
margin-bottom: 0;
}
.faq-title {
color: #333333;
font-size: 23.62px;
font-weight: 700;
line-height: 32px;
}
.faq-description {
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
.faq-list {
background: white;
border-radius: 12px;
padding: 24px;
display: flex;
flex-direction: column;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}
.faq-item {
border-bottom: 1px solid #e5e7eb;
padding: 20px 0;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.faq-item.visible {
opacity: 1;
transform: translateY(0);
}
.faq-item:hover {
background: rgba(96, 165, 250, 0.05);
border-radius: 8px;
padding: 20px 16px;
}
.faq-item:last-child {
border-bottom: none;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
color: #1f2937;
font-size: 16px;
font-weight: 600;
line-height: 24px;
user-select: none;
}
.faq-question span {
flex: 1;
margin-right: 16px;
}
.faq-toggle {
width: 20px;
height: 20px;
background: #f3f4f6;
border: none;
border-radius: 50%;
cursor: pointer;
color: #6b7280;
font-size: 16px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faq-toggle:hover {
background: #e5e7eb;
color: #374151;
}
.faq-toggle.expanded {
background: #dbeafe;
color: #2563eb;
}
.faq-toggle img {
width: 12px;
height: 12px;
transition: all 0.3s ease;
transform: rotate(180deg);
}
.faq-toggle.expanded img {
transform: rotate(360deg);
}
.faq-answer {
color: #6b7280;
font-size: 15px;
font-weight: 400;
line-height: 24px;
margin-top: 16px;
padding-left: 0;
display: none;
opacity: 0;
transition: all 0.3s ease;
}
.faq-answer.show {
display: block;
opacity: 1;
animation: fadeInDown 0.3s ease;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Footer */
.footer {
background: #111827;
color: white;
padding: 64px 0 24px;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 40px;
margin-bottom: 64px;
}
.footer-brand img {
width: 244.44px;
height: 44px;
margin-bottom: 16px;
}
.footer-description {
color: #9ca3af;
font-size: 15px;
font-weight: 400;
line-height: 24px;
margin-bottom: 16px;
}
.footer-social {
display: flex;
gap: 16px;
}
.social-icon {
width: 40px;
height: 40px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: background-color 0.3s ease;
}
.social-icon:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.footer-section h3 {
color: white;
font-size: 17px;
font-weight: 700;
line-height: 28px;
margin-bottom: 16px;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-links a {
color: #9ca3af;
font-size: 15px;
font-weight: 400;
line-height: 24px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: white;
}
.footer-bottom {
border-top: 1px solid #1f2937;
padding-top: 25px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copyright {
color: #9ca3af;
font-size: 13px;
font-weight: 400;
line-height: 20px;
}
.footer-legal {
display: flex;
gap: 24px;
}
.footer-legal a {
color: #9ca3af;
font-size: 13px;
font-weight: 400;
line-height: 20px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-legal a:hover {
color: white;
}
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.instructor-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 800px;
}
.course-grid {
grid-template-columns: 1fr;
}
.certificate-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.faq-content {
grid-template-columns: 1fr;
gap: 40px;
}
.faq-text {
text-align: center;
align-items: center;
}
.faq-list {
padding: 20px;
}
.faq-item {
padding: 16px 0;
}
.faq-item:hover {
padding: 16px 12px;
}
.faq-question {
font-size: 15px;
}
.faq-answer {
font-size: 14px;
margin-top: 12px;
}
}
@media (max-width: 768px) {
.container {
padding: 0 16px;
}
.nav-menu {
display: none;
}
.mobile-menu-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 64px;
left: -100%;
width: 100%;
height: calc(100vh - 64px);
background: #f0f4ff;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 20px;
padding-top: 50px;
transition: left 0.3s ease;
z-index: 999;
}
.nav-menu.active {
left: 0;
display: flex;
}
.hero-section {
padding: 100px 0 60px;
min-height: auto;
}
.hero-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.hero-title {
font-size: 32px;
line-height: 48px;
}
.hero-description {
font-size: 18px;
line-height: 28px;
}
.hero-buttons {
justify-content: center;
}
.hero-image {
max-width: 100%;
height: 280px;
margin: 0 auto;
}
.instructor-grid {
grid-template-columns: 1fr;
gap: 20px;
max-width: 400px;
}
.instructor-card {
max-width: none;
padding: 20px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.section-title {
font-size: 28px;
line-height: 36px;
}
.program-info {
grid-template-columns: 1fr;
gap: 16px;
}
.program-info-item {
border-right: none;
border-bottom: 1px solid #dadfea;
padding-bottom: 16px;
margin-bottom: 16px;
}
.program-info-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.course-grid {
grid-template-columns: 1fr;
}
.certificate-text h2 {
font-size: 28px;
line-height: 40px;
}
.testimonials-section {
padding: 60px 0;
}
.testimonials-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.testimonials-title {
font-size: 24px;
line-height: 32px;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.testimonial-card {
height: auto;
padding: 20px;
}
.btn-primary,
.btn-secondary {
width: 100%;
padding: 14px 20px;
}
.footer-content {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
.footer-legal {
justify-content: center;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 28px;
line-height: 40px;
}
.hero-description {
font-size: 16px;
line-height: 26px;
}
.hero-buttons {
flex-direction: column;
gap: 12px;
}
.hero-image {
height: 240px;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.stat-number {
font-size: 18px;
}
.stat-label {
font-size: 12px;
}
.section-title {
font-size: 24px;
line-height: 32px;
}
.certificate-text h2 {
font-size: 24px;
line-height: 32px;
}
.testimonials-title {
font-size: 22px;
line-height: 30px;
}
.faq-title {
font-size: 20px;
line-height: 28px;
}
}
/* Add animation classes */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
.slide-in-left {
opacity: 0;
transform: translateX(-50px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.slide-in-left.visible {
opacity: 1;
transform: translateX(0);
}
.slide-in-right {
opacity: 0;
transform: translateX(50px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.slide-in-right.visible {
opacity: 1;
transform: translateX(0);
}
.scale-in {
opacity: 0;
transform: scale(0.9);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.scale-in.visible {
opacity: 1;
transform: scale(1);
}
/* Add animation classes to sections */
.hero-section {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.hero-section.visible {
opacity: 1;
transform: translateY(0);
}
.detail-program-section {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.detail-program-section.visible {
opacity: 1;
transform: translateY(0);
}
.instructor-section {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.instructor-section.visible {
opacity: 1;
transform: translateY(0);
}
.certificate-section {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.certificate-section.visible {
opacity: 1;
transform: translateY(0);
}
.testimonials-section {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.testimonials-section.visible {
opacity: 1;
transform: translateY(0);
}
.faq-section {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s ease-out,
transform 0.8s ease-out;
}
.faq-section.visible {
opacity: 1;
transform: translateY(0);
}
/* Add animation classes to elements */
.hero-content {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.8s ease-out 0.2s,
transform 0.8s ease-out 0.2s;
}
.hero-content.visible {
opacity: 1;
transform: translateY(0);
}
.course-card {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.course-card.visible {
opacity: 1;
transform: translateY(0);
}
.instructor-card {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.instructor-card.visible {
opacity: 1;
transform: translateY(0);
}
.testimonial-card {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.testimonial-card.visible {
opacity: 1;
transform: translateY(0);
}
.faq-item {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.faq-item.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-brand">
<img src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/rea/ai-for-everyone/education/assets/LogoBlack-BIVMCUjj.svg" alt="" data-content-id="navigation.brand" />
</div>
<div class="nav-menu" data-content-id="navigation.menu">
<!-- Navigation menu will be populated dynamically by ContentManager -->
</div>
<a href="#" class="nav-cta" data-content-id="navigation.cta">Join Community</a>
<button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-section">
<div class="hero-background"></div>
<div class="container">
<div class="hero-content">
<div class="hero-text">
<div class="hero-badge">
<span data-content-id="hero.badge"></span>
</div>
<h1 class="hero-title" data-content-id="hero.title"></h1>
<div class="hero-description" data-content-id="hero.description"></div>
<div class="hero-buttons">
<a href="#" class="btn-primary" data-content-id="hero.buttons.primary">Mulai Sekarang</a>
<a href="#" class="btn-secondary" data-content-id="hero.buttons.secondary">Lihat Demo</a>
</div>
</div>
<div class="hero-image">
<img src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/rea/ai-for-everyone/education/assets/Hero-DdYS_-8Q.png" alt="AI Education Bootcamp" />
<div class="hero-stats">
<div class="stats-grid" data-content-id="hero.stats">
<!-- Stats will be populated dynamically by ContentManager -->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Detail Program Section -->
<section id="detail-program" class="detail-program-section">
<div class="detail-program-bg">
<div class="bg-blur-1"></div>
<div class="bg-blur-2"></div>
<div class="bg-blur-3"></div>
</div>
<div class="container">
<h2 class="section-title" data-content-id="program.title"></h2>
<div class="program-info" data-content-id="program.info">
<!-- Program info will be populated dynamically by ContentManager -->
</div>
<div class="course-grid" data-content-id="program.courses">
<!-- Course cards will be populated dynamically by ContentManager -->
</div>
</div>
</section>
<!-- Instructor Section -->
<section class="instructor-section">
<div class="container">
<div class="instructor-content">
<h2 class="instructor-title" data-content-id="instructors.title">Meet Your Expert Instructors</h2>
<p class="instructor-subtitle" data-content-id="instructors.subtitle">
Belajar langsung dari praktisi AI dan pendidik berpengalaman yang telah mengimplementasikan AI dalam dunia pendidikan
</p>
</div>
<div class="instructor-grid" data-content-id="instructors.team">
<!-- Instructor cards will be populated dynamically by ContentManager -->
</div>
</div>
</section>
<!-- Certificate Section -->
<section class="certificate-section">
<div class="container">
<div class="certificate-content">
<div class="certificate-text">
<h2 data-content-id="certificate.title">
Get an
<span class="highlight">Industry-Recognized AI Education Certificate</span>
</h2>
<button class="btn-secondary" data-content-id="certificate.button">Get Certificate Now</button>
</div>
<div class="certificate-image">
<div class="certificate-card">
<img src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/rea/ai-for-everyone/education/assets/Sertifikat-CZVDnuFV.png" alt="Certificate" />
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="testimonials-section">
<div class="container">
<div class="testimonials-header">
<div>
<h2 class="testimonials-title" data-content-id="testimonials.title">Testimonial</h2>
<p class="testimonials-subtitle">Pengalaman para pendidik yang telah mengikuti program kami</p>
</div>
<div class="testimonials-nav">
<button class="nav-btn">‹</button>
<button class="nav-btn">›</button>
</div>
</div>
<div class="testimonials-grid" data-content-id="testimonials.reviews">
<!-- Testimonial cards will be populated dynamically by ContentManager -->
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="faq-section">
<div class="faq-bg"></div>
<div class="container">
<div class="faq-content">
<div class="faq-text">
<div class="hero-badge">
<span>FAQ</span>
</div>
<h2 class="faq-title" data-content-id="faq.title">Butuh informasi lebih lanjut?</h2>
<p class="faq-description" data-content-id="faq.description">Tim kami siap membantu menjawab semua pertanyaan Anda tentang program kami</p>
<button class="btn-primary" data-content-id="faq.button">Hubungi Kami</button>
</div>
<div class="faq-list" data-content-id="faq.questions">
<!-- FAQ items will be populated dynamically by ContentManager -->
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content" data-content-id="footer">
<div class="footer-brand">
<img src="https://cdn-web-2.ruangguru.com/landing-page-web/public/staticpages/www.ruangguru.com/rea/ai-for-everyone/education/assets/LogoWhite-BHlN14dd.svg" alt="" data-content-id="footer.brand" />
<p class="footer-description" data-content-id="footer.description"></p>
<div class="footer-social" data-content-id="footer.social">
<!-- Social icons will be populated dynamically by ContentManager -->
</div>
</div>
<div class="footer-section" data-content-id="footer.sections[0]">
<h3 data-content-id="footer.sections[0].title"></h3>
<div class="footer-links" data-content-id="footer.sections[0].links">
<!-- Program links will be populated dynamically by ContentManager -->
</div>
</div>
<div class="footer-section" data-content-id="footer.sections[1]">
<h3 data-content-id="footer.sections[1].title"></h3>
<div class="footer-links" data-content-id="footer.sections[1].links">
<!-- Company links will be populated dynamically by ContentManager -->
</div>
</div>
</div>
<div class="footer-bottom">
<p class="footer-copyright" data-content-id="footer.legal.copyright"></p>
<div class="footer-legal" data-content-id="footer.legal.links">
<!-- Legal links will be populated dynamically by ContentManager -->
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
function toggleMobileMenu() {
const mobileToggle = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');
mobileToggle.classList.toggle('active');
navMenu.classList.toggle('active');
}
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-menu a').forEach(link => {
link.addEventListener('click', function () {
const mobileToggle = document.querySelector('.mobile-menu-toggle');
const navMenu = document.querySelector('.nav-menu');
mobileToggle.classList.remove('active');
navMenu.classList.remove('active');
});
});
function toggleCourse(button) {
const card = button.closest('.course-card');
const description = card.querySelector('.course-description');
const isExpanded = description.classList.contains('show');
// Close all other course items
document.querySelectorAll('.course-card').forEach(courseCard => {
if (courseCard !== card) {
const otherDescription = courseCard.querySelector('.course-description');
const otherToggle = courseCard.querySelector('.course-toggle');
otherDescription.classList.remove('show');
otherToggle.classList.remove('expanded');
courseCard.classList.remove('expanded');
}
});
// Toggle current item
if (isExpanded) {
description.classList.remove('show');
button.classList.remove('expanded');
card.classList.remove('expanded');
} else {
description.classList.add('show');
button.classList.add('expanded');
card.classList.add('expanded');
}
}
function toggleFaq(item) {
const answer = item.querySelector('.faq-answer');
const toggle = item.querySelector('.faq-toggle');
const isExpanded = answer.classList.contains('show');
// Close all other FAQ items
document.querySelectorAll('.faq-item').forEach(faqItem => {
if (faqItem !== item) {
const otherAnswer = faqItem.querySelector('.faq-answer');
const otherToggle = faqItem.querySelector('.faq-toggle');
otherAnswer.classList.remove('show');
otherToggle.classList.remove('expanded');
}
});
// Toggle current item
if (isExpanded) {
answer.classList.remove('show');
toggle.classList.remove('expanded');
} else {
answer.classList.add('show');
toggle.classList.add('expanded');
}
}
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const navHeight = document.querySelector('.navbar').offsetHeight;
const targetPosition = target.offsetTop - navHeight;
window.scrollTo({
top: targetPosition,
behavior: 'smooth',
});
}
});
});
// Auto-expand first course on load
// Content Management System
class ContentManager {
constructor() {
this.content = null;
this.init();
}
async init() {
await this.loadContent();
this.populateContent();
}
async loadContent() {
try {
const response = await fetch('./content.json');
this.content = await response.json();
} catch (error) {
console.error('Failed to load content:', error);
}
}
populateContent() {
if (!this.content) return;
// Update all elements with data-content-id attributes
const elements = document.querySelectorAll('[data-content-id]');
elements.forEach(element => {
const contentPath = element.getAttribute('data-content-id');
const value = this.getNestedValue(this.content, contentPath);
if (value !== undefined) {
this.updateElement(element, value, contentPath);
}
});
}
getNestedValue(obj, path) {
return path.split('.').reduce((current, key) => current && current[key], obj);
}
updateElement(element, value, contentPath) {
const tagName = element.tagName.toLowerCase();
// Handle special cases
if (contentPath === 'navigation.menu') {
this.populateNavMenu(element, value);
} else if (contentPath === 'hero.stats') {
this.populateHeroStats(element, value);
} else if (contentPath === 'program.info') {
this.populateProgramInfo(element, value);
} else if (contentPath === 'program.courses') {
this.populateCourses(element, value);
} else if (contentPath === 'instructors.team') {
this.populateInstructors(element, value);
} else if (contentPath === 'testimonials.reviews') {
this.populateTestimonials(element, value);
} else if (contentPath === 'faq.questions') {
this.populateFAQ(element, value);
} else if (contentPath === 'footer') {
this.populateFooter(element, value);
} else if (tagName === 'img' && contentPath.includes('brand')) {
element.alt = value;
} else {
// Handle regular text content
element.innerHTML = value;
}
}
populateNavMenu(element, menuItems) {
element.innerHTML = menuItems.map(item => `<a href="${item.href}">${item.label}</a>`).join('');
}
populateHeroStats(element, stats) {
element.innerHTML = stats
.map(
stat => `
<div class="stat-item">
<div class="stat-number">${stat.number}</div>
<div class="stat-label">${stat.label}</div>
</div>
`
)
.join('');
}
populateProgramInfo(element, infoItems) {
const iconMap = {
calendar: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z" stroke="#2C313A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`,
clock: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="10" stroke="#2C313A" stroke-width="2"/>
<polyline points="12,6 12,12 16,14" stroke="#2C313A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`,
duration: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 6V12L16 14" stroke="#2C313A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="12" cy="12" r="10" stroke="#2C313A" stroke-width="2"/>
</svg>`,
sessions: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="#2C313A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<polyline points="14,2 14,8 20,8" stroke="#2C313A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`,
};
element.innerHTML = infoItems
.map(
item => `
<div class="program-info-item">
<div class="program-info-icon">${iconMap[item.icon] || ''}</div>
<div class="program-info-content">
<p><b>${item.label}</b></p>
<p>${item.value}</p>
</div>
</div>
`
)
.join('');
}
populateCourses(element, courses) {
element.innerHTML = courses
.map(
(course, index) => `
<div class="course-card ${index === 0 ? 'expanded' : ''}">
<div class="course-header">
<div class="course-number">${course.number}</div>
<div class="course-title">${course.title}</div>
<button class="course-toggle" onclick="toggleCourse(this)">
<img src="assets/Chevron.svg" alt="toggle" />
</button>
</div>
<div class="course-description">${course.description}</div>
</div>
`
)
.join('');
}
populateInstructors(element, instructors) {
element.innerHTML = instructors
.map(
instructor => `
<div class="instructor-card">
<div class="instructor-header">
<img
src="${instructor.avatar}"
alt="${instructor.name}"
class="instructor-avatar"
/>
<div class="instructor-info">
<h3 class="instructor-name">${instructor.name}</h3>
<p class="instructor-role">${instructor.role}</p>
</div>
</div>
<p class="instructor-bio">${instructor.bio}</p>
<div class="instructor-expertise">
<div class="expertise-banner">
<div class="expertise-content">
<div class="expertise-tags">
${instructor.expertise.map(tag => `<span class="expertise-tag">${tag}</span>`).join('')}
</div>
<span class="expertise-count">+${instructor.expertise.length}</span>
</div>
</div>
</div>
</div>
`
)
.join('');
}
populateTestimonials(element, testimonials) {
element.innerHTML = testimonials
.map(
testimonial => `
<div class="testimonial-card">
<div class="testimonial-header">
<img src="${testimonial.avatar}" alt="${testimonial.name}" class="testimonial-avatar" />
<div class="testimonial-info">
<h3>${testimonial.name}</h3>
<p>${testimonial.role}</p>
</div>
</div>
<div class="testimonial-rating">
${Array(testimonial.rating).fill('<div class="star"></div>').join('')}
</div>
<div class="testimonial-text">${testimonial.text}</div>
</div>
`
)
.join('');
}
populateFAQ(element, questions) {
element.innerHTML = questions
.map(
faq => `
<div class="faq-item" onclick="toggleFaq(this)" role="button" tabindex="0">
<div class="faq-question">
<span>${faq.question}</span>
<button class="faq-toggle" aria-label="Toggle answer">
<img src="assets/Chevron.svg" alt="toggle" />
</button>
</div>
<div class="faq-answer">${faq.answer}</div>
</div>
`
)
.join('');
}
populateFooter(element, footerData) {
// Update brand and description
const brandImg = element.querySelector('img');
if (brandImg) brandImg.alt = footerData.brand;
const description = element.querySelector('.footer-description');
if (description) description.innerHTML = footerData.description;
// Update social icons
const socialContainer = element.querySelector('.footer-social');
if (socialContainer && footerData.social) {
socialContainer.innerHTML = footerData.social.map(social => `<a href="#" class="social-icon">${social.icon}</a>`).join('');
}
// Update footer sections
const sections = element.querySelectorAll('.footer-section');
sections.forEach((section, index) => {
if (footerData.sections && footerData.sections[index]) {
const h3 = section.querySelector('h3');
const links = section.querySelector('.footer-links');
if (h3) h3.textContent = footerData.sections[index].title;
if (links && footerData.sections[index].links) {
links.innerHTML = footerData.sections[index].links.map(link => `<a href="${link.href}">${link.label}</a>`).join('');
}
}
});
// Update legal section
const copyright = element.querySelector('.footer-copyright');
if (copyright) copyright.textContent = footerData.legal.copyright;
const legalLinks = element.querySelector('.footer-legal');
if (legalLinks && footerData.legal.links) {
legalLinks.innerHTML = footerData.legal.links.map(link => `<a href="${link.href}">${link.label}</a>`).join('');
}
}
// Method to reload content (useful for development)
async reloadContent() {
await this.loadContent();
this.populateContent();
}
}
// Initialize content management
const contentManager = new ContentManager();
// Make it globally available for debugging
window.contentManager = contentManager;
document.addEventListener('DOMContentLoaded', function () {
const firstCourse = document.querySelector('.course-card');
if (firstCourse) {
const toggle = firstCourse.querySelector('.course-toggle');
toggleCourse(toggle);
}
});
// Add scroll animation functionality
function handleScrollAnimation() {
const sections = document.querySelectorAll('section');
const elements = document.querySelectorAll('.course-card, .instructor-card, .testimonial-card, .faq-item, .hero-content');
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.1,
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, observerOptions);
sections.forEach(section => {
observer.observe(section);
});
elements.forEach(element => {
observer.observe(element);
});
}
// Initialize scroll animations when DOM is loaded
document.addEventListener('DOMContentLoaded', function () {
handleScrollAnimation();
// Re-run animation check on scroll
window.addEventListener('scroll', () => {
handleScrollAnimation();
});
});
</script>
</body>
</html>