Code Studio: Landing Page - Digital Skills Tailwind

Buatkan prompt untuk membuat landing page modern responsive menggunakan tailwind. Website yang akan dibuat adalah lembaga pelatihan Digital Skills. Landing page terdiri dari header, hero, class, testimoni, footer dan cta untuk pendaftaran.

Buat 1 file index.html landing page modern dan responsive untuk website lembaga pelatihan Digital Skills Academy menggunakan TailwindCSS CDN.

Kriteria umum

Desain: clean, modern, banyak whitespace, terasa premium dan terpercaya
Mobile-first, responsive sampai desktop (gunakan container, grid, flex)
Gunakan komponen Tailwind (tanpa custom CSS kecuali minimal)
Tipografi jelas: heading tebal, body nyaman dibaca
Tambahkan micro-interactions: hover pada button/card, transisi halus
Pastikan aksesibilitas: kontras jelas, tombol punya focus state, aria-label pada icon

Struktur section (urut)

Header / Navbar

Logo teks “Digital Skills Academy”
Menu: Programs, Classes, Testimonials, Pricing (opsional), Contact
Button CTA “Daftar Sekarang”
Mobile: hamburger menu (gunakan JS kecil untuk toggle)

Hero

Headline kuat: “Upgrade Skill Digitalmu untuk Karier & Bisnis”
Subheadline 1–2 kalimat
CTA utama: “Daftar Sekarang”
CTA sekunder: “Lihat Kelas”
Tambahkan trust badges (misal: “5000+ alumni”, “Mentor praktisi”, “Sertifikat”)
Tambahkan ilustrasi/placeholder image (div gradient / svg sederhana)

Class / Programs

Judul: “Kelas Populer”
Grid card (min 6 kartu): UI/UX, Digital Marketing, Data Analytics, Web Dev, Content Creator, AI Productivity
Tiap card: level, durasi, output, badge “Best Seller” (sebagian)
Tambahkan filter kecil (tab): Beginner / Intermediate / Advanced (UI saja boleh)

Testimonials

Judul: “Apa kata Alumni”
3–6 testimoni card (nama, role, rating bintang, kutipan)
Tambahkan logo perusahaan kecil (opsional placeholder)

CTA Pendaftaran

Background gradient
Copy: “Mulai belajar hari ini. Batch berikutnya segera dibuka!”
Form singkat: Nama, Email, WhatsApp, Pilih Kelas, Tombol “Kirim Pendaftaran”
Beri teks privasi singkat

Footer

Kolom: Tentang, Program, Kontak, Sosial
Copyright
Link kebijakan

Warna & gaya

Gunakan palet modern: indigo/emerald + netral (misal slate)
Button rounded, shadow halus, card dengan border lembut

Output: berikan kode HTML lengkap + JS kecil untuk mobile menu. Jangan gunakan library eksternal selain Tailwind CDN.

Index.html

<!doctype html>

<head>

<title>Digital Skills Academy — Upgrade Skill Digitalmu</title>

</head>

Lewati ke konten utama

</a>

</svg>

</span>

<span>Digital Skills Academy</span>

</a>

Programs

</a>

Classes

</a>

Testimonials

</a>

Pricing

</a>

Contact

</a>

</nav>

<a href="#enroll"

class="hidden sm:inline-flex items-center justify-center rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Daftar Sekarang

</a>

<button id="mobileMenuButton"

type="button"

class="md:hidden inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white p-2 text-slate-700 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"

aria-label="Buka menu"

aria-controls="mobileMenu"

aria-expanded="false">

</svg>

</svg>

</button>

</div>

Programs

</a>

Classes

</a>

Testimonials

</a>

Pricing

</a>

Contact

</a>

</div>

<a href="#enroll"

class="mt-3 inline-flex w-full items-center justify-center rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Daftar Sekarang

</a>

</div>

</header>

</div>

<div>

Batch baru dibuka • Kuota terbatas

</p>

Upgrade Skill Digitalmu untuk

<span class="bg-gradient-to-r from-indigo-600 to-emerald-600 bg-clip-text text-transparent">Karier & Bisnis</span>

</h1>

Belajar lewat kelas praktis yang dirancang bersama mentor praktisi. Portofolio nyata, pembelajaran terstruktur, dan sertifikat untuk memperkuat profilmu.

</p>

<a href="#enroll"

class="inline-flex items-center justify-center rounded-xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Daftar Sekarang

</svg>

</a>

<a href="#classes"

class="inline-flex items-center justify-center rounded-xl border border-slate-200 bg-white px-5 py-3 text-sm font-semibold text-slate-900 shadow-sm transition hover:bg-slate-50 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Lihat Kelas

</a>

</div>

<p class="text-sm font-semibold text-slate-900">5000+ alumni</p>

<p class="mt-1 text-xs text-slate-600">Komunitas aktif & saling support</p>

</div>

<p class="text-sm font-semibold text-slate-900">Mentor praktisi</p>

<p class="mt-1 text-xs text-slate-600">Belajar dari pengalaman nyata</p>

</div>

<p class="text-sm font-semibold text-slate-900">Sertifikat</p>

<p class="mt-1 text-xs text-slate-600">Validasi skill untuk portofolio</p>

</div>

<div class="absolute inset-0 opacity-20" aria-hidden="true"

style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 22px 22px;"></div>

</div>

</div>

</div>

</div>

</div>

<p class="text-sm font-semibold text-slate-900">Belajar terstruktur, hasil terukur</p>

<p class="mt-1 text-sm text-slate-600">Kurasi materi, tugas portofolio, dan feedback mentor di setiap modul.</p>

</div>

<p class="text-xs text-slate-600">Rating alumni</p>

</div>

</section>

<div>

<h2 class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl">Kelas Populer</h2>

<p class="mt-2 text-slate-600">Pilih kelas sesuai tujuanmu—karier, freelance, atau mengembangkan bisnis.</p>

</div>

<button type="button" role="tab" aria-selected="true"

class="flex-1 sm:flex-none rounded-xl px-4 py-2 text-sm font-semibold text-white bg-indigo-600 shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Beginner

</button>

<button type="button" role="tab" aria-selected="false"

class="flex-1 sm:flex-none rounded-xl px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Intermediate

</button>

<button type="button" role="tab" aria-selected="false"

class="flex-1 sm:flex-none rounded-xl px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Advanced

</button>

</div>

<span class="h-2 w-2 rounded-full bg-indigo-600"></span> Beginner • 4 Minggu

</div>

Best Seller

</span>

</div>

<h3 class="mt-4 text-lg font-extrabold text-slate-900">UI/UX Design Fundamentals</h3>

<p class="mt-2 text-sm text-slate-600">Belajar riset pengguna, wireframe, dan desain UI yang rapi dan usable.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Output: 1 case study + prototype</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Tools: Figma, design system dasar</li>

</ul>

<span class="text-sm font-semibold text-slate-900">Mulai dari</span>

Ikuti Kelas

</a>

</div>

</article>

<span class="h-2 w-2 rounded-full bg-indigo-600"></span> Beginner • 5 Minggu

</div>

Best Seller

</span>

</div>

<h3 class="mt-4 text-lg font-extrabold text-slate-900">Digital Marketing</h3>

<p class="mt-2 text-sm text-slate-600">Strategi konten, iklan, dan funnel yang relevan untuk bisnis masa kini.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Output: campaign plan + content calendar</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Tools: Meta Ads, GA4 overview</li>

</ul>

<span class="text-sm font-semibold text-slate-900">Mulai dari</span>

Ikuti Kelas

</a>

</div>

</article>

<span class="h-2 w-2 rounded-full bg-indigo-600"></span> Beginner • 6 Minggu

</div>

Career Track

</span>

</div>

<h3 class="mt-4 text-lg font-extrabold text-slate-900">Data Analytics</h3>

<p class="mt-2 text-sm text-slate-600">Dari data mentah sampai insight: spreadsheet, visual, dan storytelling.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Output: dashboard + report ringkas</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Tools: Sheets/Excel, dasar BI</li>

</ul>

<span class="text-sm font-semibold text-slate-900">Mulai dari</span>

Ikuti Kelas

</a>

</div>

</article>

<span class="h-2 w-2 rounded-full bg-indigo-600"></span> Intermediate • 8 Minggu

</div>

Portfolio

</span>

</div>

<h3 class="mt-4 text-lg font-extrabold text-slate-900">Web Development</h3>

<p class="mt-2 text-sm text-slate-600">Bangun website dari nol: layout, komponen, dan deploy yang rapi.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Output: landing page + project deploy</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Tools: HTML, Tailwind, Git dasar</li>

</ul>

<span class="text-sm font-semibold text-slate-900">Mulai dari</span>

Ikuti Kelas

</a>

</div>

</article>

<span class="h-2 w-2 rounded-full bg-indigo-600"></span> Beginner • 4 Minggu

</div>

Creator

</span>

</div>

<h3 class="mt-4 text-lg font-extrabold text-slate-900">Content Creator</h3>

<p class="mt-2 text-sm text-slate-600">Bikin konten konsisten: ide, skrip, editing, dan optimasi distribusi.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Output: 10 konten siap posting</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Tools: CapCut workflow, CTA</li>

</ul>

<span class="text-sm font-semibold text-slate-900">Mulai dari</span>

Ikuti Kelas

</a>

</div>

</article>

<span class="h-2 w-2 rounded-full bg-indigo-600"></span> Beginner • 3 Minggu

</div>

Best Seller

</span>

</div>

<h3 class="mt-4 text-lg font-extrabold text-slate-900">AI Productivity</h3>

<p class="mt-2 text-sm text-slate-600">Gunakan AI untuk riset, ide, dan eksekusi kerja lebih cepat (responsible use).</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Output: template prompt + workflow</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Tools: AI tools dasar + automasi ringan</li>

</ul>

<span class="text-sm font-semibold text-slate-900">Mulai dari</span>

Ikuti Kelas

</a>

</div>

</article>

</div>

</section>

<h2 class="text-2xl font-extrabold tracking-tight text-slate-900 sm:text-3xl">Apa kata Alumni</h2>

<p class="mt-2 text-slate-600">Cerita nyata dari peserta yang sudah belajar dan mengaplikasikan skillnya.</p>

</div>

<div>

<figcaption class="text-sm font-extrabold text-slate-900">Nadia R.</figcaption>

<p class="text-xs text-slate-600">UI/UX Designer (Junior)</p>

</div>

</div>

</div>

“Materinya runtut banget. Aku jadi punya case study yang rapi dan lebih pede apply kerja.”

</blockquote>

</figure>

<div>

<p class="text-xs text-slate-600">Owner UMKM</p>

</div>

</div>

</div>

“Kelas Digital Marketing bikin aku ngerti funnel dan iklan. Penjualan naik karena kontennya lebih terarah.”

</blockquote>

</figure>

<div>

<figcaption class="text-sm font-extrabold text-slate-900">Kevin T.</figcaption>

<p class="text-xs text-slate-600">Data Analyst (Intern)</p>

</div>

</div>

</div>

“Praktiknya banyak. Dashboard pertamaku jadi bahan presentasi waktu interview.”

</blockquote>

</figure>

<div>

<figcaption class="text-sm font-extrabold text-slate-900">Sinta A.</figcaption>

<p class="text-xs text-slate-600">Freelance Creator</p>

</div>

</div>

</div>

“Aku jadi punya sistem bikin konten: ide → skrip → edit. Konsistensi posting jauh lebih mudah.”

</blockquote>

</figure>

<div>

<figcaption class="text-sm font-extrabold text-slate-900">Dimas P.</figcaption>

<p class="text-xs text-slate-600">Web Developer (Junior)</p>

</div>

</div>

</div>

“Dari nol sampai bisa deploy. Mentornya jelas dan feedbacknya cepat.”

</blockquote>

</figure>

<div>

<p class="text-xs text-slate-600">Operations Specialist</p>

</div>

</div>

</div>

“Kelas AI Productivity bikin kerjaanku jauh lebih cepat. Aku pakai workflow-nya tiap hari.”

</blockquote>

</figure>

</div>

</section>

<div>

<h2 class="text-xl font-extrabold text-slate-900 sm:text-2xl">Paket Belajar</h2>

<p class="mt-1 text-slate-600">Pilih paket sesuai kebutuhan. (Bagian ini opsional dan bisa kamu ganti detailnya.)</p>

</div>

<a href="#enroll"

Konsultasi Gratis

</a>

</div>

<p class="text-sm font-semibold text-slate-700">Starter</p>

<p class="mt-2 text-sm text-slate-600">Cocok untuk mulai dari nol.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Akses kelas 1 program</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Materi & rekaman</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Sertifikat</li>

</ul>

</div>

<p class="text-sm font-semibold text-indigo-700">Pro (Recommended)</p>

<p class="mt-2 text-sm text-slate-600">Untuk upgrade lebih cepat dengan mentor.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Akses 2 program</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Feedback tugas</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Review portofolio</li>

</ul>

</div>

<p class="text-sm font-semibold text-slate-700">Career</p>

<p class="mt-2 text-sm text-slate-600">Pendampingan untuk siap kerja.</p>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Akses semua program</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Mock interview</li>

<li class="flex gap-2"><span class="mt-1 h-2 w-2 rounded-full bg-emerald-500"></span> Career support</li>

</ul>

</div>

</section>

<div aria-hidden="true" class="absolute inset-0 opacity-20"

style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 22px 22px;"></div>

Mulai belajar hari ini. Batch berikutnya segera dibuka!

</h2>

Isi formulir singkat ini. Tim kami akan menghubungi via WhatsApp untuk info jadwal, kurikulum, dan promo batch.

</p>

<p class="text-sm font-semibold">✅ Kurikulum terstruktur</p>

<p class="mt-1 text-sm text-white/85">Step-by-step sampai jadi portofolio</p>

</div>

<p class="text-sm font-semibold">✅ Mentor & feedback</p>

<p class="mt-1 text-sm text-white/85">Review tugas dan arahan jelas</p>

</div>

<div>

<input id="name" name="name" type="text" required

class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30"

placeholder="Contoh: Andi Pratama" />

</div>

<div>

<label for="email" class="block text-sm font-semibold text-slate-900">Email</label>

<input id="email" name="email" type="email" required

class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30"

placeholder="andi@email.com" />

</div>

<div>

<label for="whatsapp" class="block text-sm font-semibold text-slate-900">WhatsApp</label>

<input id="whatsapp" name="whatsapp" type="tel" inputmode="tel" required

class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30"

placeholder="08xxxxxxxxxx" />

</div>

<div>

<label for="classSelect" class="block text-sm font-semibold text-slate-900">Pilih Kelas</label>

<select id="classSelect" name="classSelect" required

class="mt-2 w-full rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 shadow-sm outline-none transition focus:border-indigo-600 focus:ring-2 focus:ring-indigo-600/30">

<option value="" disabled selected>Pilih salah satu</option>

<option>UI/UX Design Fundamentals</option>

<option>Digital Marketing</option>

<option>Data Analytics</option>

<option>Web Development</option>

<option>Content Creator</option>

<option>AI Productivity</option>

</select>

</div>

<button type="submit"

class="mt-2 inline-flex items-center justify-center rounded-xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-800 hover:shadow focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-indigo-600">

Kirim Pendaftaran

</svg>

</button>

Dengan mengirim formulir, kamu setuju dihubungi oleh tim Digital Skills Academy. Kami tidak membagikan data pribadimu.

</p>

</div>

</form>

</div>

</section>

</main>

<div>

<p class="text-base font-extrabold text-slate-900">Digital Skills Academy</p>

Lembaga pelatihan digital untuk membantu kamu naik level: skill, portofolio, dan kepercayaan diri.

</p>

</div>

<div>

<p class="text-sm font-extrabold text-slate-900">Program</p>

<li><a class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded" href="#classes">UI/UX Design</a></li>

<li><a class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded" href="#classes">Digital Marketing</a></li>

<li><a class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded" href="#classes">Data Analytics</a></li>

<li><a class="hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded" href="#classes">Web Development</a></li>

</ul>

</div>

<div>

<p class="text-sm font-extrabold text-slate-900">Kontak</p>

<li><span class="font-semibold text-slate-900">Email:</span> hello@digitalskills.academy</li>

<li><span class="font-semibold text-slate-900">WhatsApp:</span> 08xx-xxxx-xxxx</li>

<li><span class="font-semibold text-slate-900">Alamat:</span> Indonesia</li>

</ul>

</div>

<div>

<p class="text-sm font-extrabold text-slate-900">Sosial</p>

</a>

</a>

</a>

</div>

<a href="#enroll"

class="inline-flex w-full items-center justify-center rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2">

Daftar Sekarang

</a>

</div>

<a href="#" class="text-slate-600 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Kebijakan Privasi</a>

<a href="#" class="text-slate-600 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 rounded">Syarat & Ketentuan</a>

</div>

</footer>

(function () {

const btn = document.getElementById('mobileMenuButton');

const menu = document.getElementById('mobileMenu');

const iconOpen = document.getElementById('iconOpen');

const iconClose = document.getElementById('iconClose');

function setMenu(open) {

menu.classList.toggle('hidden', !open);

iconOpen.classList.toggle('hidden', open);

iconClose.classList.toggle('hidden', !open);

btn.setAttribute('aria-expanded', open ? 'true' : 'false');

btn.setAttribute('aria-label', open ? 'Tutup menu' : 'Buka menu');

}

btn?.addEventListener('click', () => {

const isHidden = menu.classList.contains('hidden');

setMenu(isHidden);

});

// Close menu on link click (mobile)

menu?.querySelectorAll('a[href^="#"]').forEach((a) => {

a.addEventListener('click', () => setMenu(false));

});

// Escape to close

document.addEventListener('keydown', (e) => {

if (e.key === 'Escape') setMenu(false);

});

// Footer year

const yearEl = document.getElementById('year');

if (yearEl) yearEl.textContent = new Date().getFullYear();

})();

</script>

</body>

</html>

Code Studio

Minggu, 28 Desember 2025

Landing Page - Digital Skills Tailwind

Index.html

Tidak ada komentar:

Posting Komentar

Belajar React - Mobile Apps

Laporkan Penyalahgunaan