function doGet(e) {
var html = buildHtml();
return HtmlService.createHtmlOutput(html)
.setTitle("Digital Skills Academy")
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
.addMetaTag('viewport', 'width=device-width, initial-scale=1');
}
function buildHtml() {
return `
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Digital Skills Academy</title>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
font-family: 'Segoe UI', system-ui, sans-serif;
line-height: 1.6;
}
.hero {
background: linear-gradient(135deg, #0d6efd, #6f42c1);
color: #fff;
padding: 90px 20px;
}
.hero h1 {
font-weight: 700;
}
.section {
padding: 70px 20px;
}
.badge-skill {
background: #e7f1ff;
color: #0d6efd;
}
.card:hover {
transform: translateY(-6px);
transition: .3s;
}
.icon {
font-size: 36px;
color: #0d6efd;
}
.cta {
background: linear-gradient(135deg, #198754, #0d6efd);
color: #fff;
padding: 70px 20px;
}
footer {
background: #f8f9fa;
padding: 30px 20px;
font-size: 14px;
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand fw-bold" href="#">Digital Skills Academy</a>
</div>
</nav>
<!-- HERO -->
<section class="hero text-center">
<div class="container">
<h1 class="display-5 mb-3">Upgrade Skill Digitalmu untuk Masa Depan</h1>
<p class="lead mb-4">
Belajar skill digital yang relevan industri, berbasis praktik & portofolio.
</p>
<a href="#program" class="btn btn-light btn-lg me-2">Lihat Program</a>
<a href="#daftar" class="btn btn-outline-light btn-lg">Daftar Sekarang</a>
</div>
</section>
<!-- TENTANG -->
<section class="section">
<div class="container text-center">
<h2 class="fw-bold mb-4">Tentang Lembaga</h2>
<p class="col-md-10 mx-auto">
Digital Skills Academy adalah lembaga kursus dan pelatihan yang fokus pada
pengembangan <strong>digital skills</strong>, kesiapan kerja, dan sertifikasi
berbasis kebutuhan industri modern.
</p>
<span class="badge badge-skill m-1">Digital Skills</span>
<span class="badge badge-skill m-1">Siap Kerja</span>
<span class="badge badge-skill m-1">Sertifikasi Industri</span>
</div>
</section>
<!-- PROGRAM -->
<section id="program" class="section bg-light">
<div class="container">
<h2 class="fw-bold text-center mb-5">Program Kursus</h2>
<div class="row g-4">
${programCard("Web Development", "Belajar membuat website modern & aplikatif.")}
${programCard("Digital Marketing", "Strategi pemasaran digital berbasis data.")}
${programCard("UI / UX Design", "Desain produk digital yang user-friendly.")}
${programCard("Data Analysis", "Olah & analisis data untuk kebutuhan bisnis.")}
${programCard("Content Creator", "Produksi konten kreatif & personal branding.")}
</div>
</div>
</section>
<!-- KEUNGGULAN -->
<section class="section">
<div class="container">
<h2 class="fw-bold text-center mb-5">Keunggulan Kami</h2>
<div class="row text-center g-4">
${feature("👨🏫", "Mentor Berpengalaman Industri")}
${feature("📚", "Kurikulum Sesuai Dunia Kerja")}
${feature("📜", "Sertifikat Kompetensi")}
${feature("💻", "Belajar Online & Offline")}
${feature("🧩", "Project & Portofolio Nyata")}
</div>
</div>
</section>
<!-- TESTIMONI -->
<section class="section bg-light">
<div class="container">
<h2 class="fw-bold text-center mb-5">Apa Kata Alumni</h2>
<div class="row g-4">
${testimoni("Materinya praktis dan langsung kepakai di dunia kerja.", "Andi", "Web Developer")}
${testimoni("Mentor ramah dan berbasis industri nyata.", "Siti", "Digital Marketer")}
${testimoni("Saya langsung dapat portofolio setelah lulus.", "Budi", "Freelancer")}
</div>
</div>
</section>
<!-- ALUR -->
<section class="section">
<div class="container text-center">
<h2 class="fw-bold mb-4">Alur Belajar</h2>
<div class="row g-4">
${step("1", "Daftar")}
${step("2", "Belajar")}
${step("3", "Praktik & Project")}
${step("4", "Sertifikat")}
${step("5", "Siap Kerja / Freelancer")}
</div>
</div>
</section>
<!-- CTA -->
<section id="daftar" class="cta text-center">
<div class="container">
<h2 class="fw-bold mb-3">Siap Upgrade Skill Digitalmu?</h2>
<p class="mb-4">Gabung sekarang dan siapkan masa depan kariermu</p>
<a href="#" class="btn btn-light btn-lg me-2">Daftar Sekarang</a>
<a href="https://wa.me/628xxxxxxxxx" class="btn btn-outline-light btn-lg">
Hubungi Kami (WhatsApp)
</a>
</div>
</section>
<!-- FOOTER -->
<footer class="text-center">
<div class="container">
<p>
Digital Skills Academy<br>
Email: info@digitalskills.id | WhatsApp: 08xxxxxxxx
</p>
<p class="mb-0">
© ${new Date().getFullYear()} Digital Skills Academy. All rights reserved.
</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
`;
}
/* ==== COMPONENT FUNCTIONS ==== */
function programCard(title, desc) {
return `
<div class="col-md-4">
<div class="card h-100 shadow-sm">
<div class="card-body">
<h5 class="card-title fw-bold">${title}</h5>
<p class="card-text">${desc}</p>
<a href="#" class="btn btn-primary btn-sm">Detail / Daftar</a>
</div>
</div>
</div>`;
}
function feature(icon, text) {
return `
<div class="col-md-4">
<div class="icon mb-2">${icon}</div>
<p class="fw-semibold">${text}</p>
</div>`;
}
function testimoni(text, name, role) {
return `
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<p>“${text}”</p>
<strong>${name}</strong><br>
<small>${role}</small>
</div>
</div>
</div>`;
}
function step(no, text) {
return `
<div class="col-md">
<div class="card">
<div class="card-body">
<h4 class="fw-bold">${no}</h4>
<p>${text}</p>
</div>
</div>
</div>`;
}
Tidak ada komentar:
Posting Komentar