Meet Your Expert Instructors
Belajar langsung dari praktisi AI dan pendidik berpengalaman yang telah mengimplementasikan AI dalam dunia pendidikan
Belajar langsung dari praktisi AI dan pendidik berpengalaman yang telah mengimplementasikan AI dalam dunia pendidikan
<!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>