Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SMK Pertiwi Ciasem - Unggul, Berkarakter & Berprestasi</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Alpine.js untuk Interaktivitas Ringan -->
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- Lucide Icons untuk Icon Modern -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
blue: '#1e3a8a', /* Dark Blue - Utama */
gold: '#d97706', /* Gold - Aksen */
teal: '#0d9488', /* Teal - Sekunder */
light: '#f3f4f6'
}
},
fontFamily: {
sans: ['Inter', 'sans-serif'],
}
}
}
}
</script>
<style>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #1e3a8a;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #111827;
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 antialiased" x-data="{ mobileMenuOpen: false, activeTab: 'sejarah' }">
<!-- HEADER / NAVIGATION -->
<header class="sticky top-0 z-50 bg-white/95 backdrop-blur-md shadow-md border-b border-slate-100 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo & School Name -->
<a href="#" class="flex items-center space-x-3 group">
<div class="w-12 h-12 bg-gradient-to-tr from-brand-blue to-brand-teal rounded-xl flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-brand-blue/20 group-hover:scale-105 transition-transform">
P
</div>
<div>
<span class="block text-lg font-extrabold text-brand-blue leading-tight tracking-tight group-hover:text-brand-teal transition-colors">SMK PERTIWI</span>
<span class="block text-xs font-semibold text-brand-gold tracking-widest uppercase">CIASEM</span>
</div>
</a>
<!-- Desktop Navigation -->
<nav class="hidden lg:flex space-x-1">
<a href="#hero" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-lg transition-all">Beranda</a>
<a href="#profil" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-lg transition-all">Profil</a>
<a href="#program" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-lg transition-all">Program Keahlian</a>
<a href="#fasilitas" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-lg transition-all">Fasilitas</a>
<a href="#spmb" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-lg transition-all flex items-center gap-1.5">
<span class="inline-block w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
SPMB 2026
</a>
<a href="#blog" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-lg transition-all">Blog</a>
<a href="#kontak" class="px-4 py-2 text-sm font-medium text-slate-700 hover:text-brand-blue hover:bg-slate-50 rounded-lg transition-all">Kontak</a>
</nav>
<!-- Action Button & Phone -->
<div class="hidden lg:flex items-center space-x-4">
<a href="tel:085624943613" class="text-sm font-bold text-slate-700 hover:text-brand-blue flex items-center gap-2">
<i data-lucide="phone" class="w-4 h-4 text-brand-gold"></i>
0856-2494-3613
</a>
<a href="#spmb" class="px-5 py-2.5 bg-brand-blue hover:bg-brand-teal text-white text-sm font-semibold rounded-xl shadow-md hover:shadow-lg transition-all transform hover:-translate-y-0.5">
Daftar Online 2026
</a>
</div>
<!-- Mobile Menu Button -->
<div class="lg:hidden flex items-center space-x-3">
<a href="tel:085624943613" class="p-2 text-slate-600 hover:text-brand-blue rounded-lg">
<i data-lucide="phone" class="w-5 h-5"></i>
</a>
<button @click="mobileMenuOpen = !mobileMenuOpen" class="p-2.5 rounded-xl text-slate-600 hover:bg-slate-100 hover:text-brand-blue transition-colors focus:outline-none">
<i data-lucide="menu" x-show="!mobileMenuOpen" class="w-6 h-6"></i>
<i data-lucide="x" x-show="mobileMenuOpen" class="w-6 h-6" style="display: none;"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Navigation Menu -->
<div x-show="mobileMenuOpen"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 -translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-4"
class="lg:hidden border-b border-slate-100 bg-white shadow-inner"
style="display: none;">
<div class="px-4 pt-2 pb-6 space-y-2">
<a href="#hero" @click="mobileMenuOpen = false" class="block px-4 py-3 text-base font-semibold rounded-xl text-slate-700 hover:bg-slate-50 hover:text-brand-blue transition-all">Beranda</a>
<a href="#profil" @click="mobileMenuOpen = false" class="block px-4 py-3 text-base font-semibold rounded-xl text-slate-700 hover:bg-slate-50 hover:text-brand-blue transition-all">Profil</a>
<a href="#program" @click="mobileMenuOpen = false" class="block px-4 py-3 text-base font-semibold rounded-xl text-slate-700 hover:bg-slate-50 hover:text-brand-blue transition-all">Program Keahlian</a>
<a href="#fasilitas" @click="mobileMenuOpen = false" class="block px-4 py-3 text-base font-semibold rounded-xl text-slate-700 hover:bg-slate-50 hover:text-brand-blue transition-all">Fasilitas</a>
<a href="#spmb" @click="mobileMenuOpen = false" class="block px-4 py-3 text-base font-semibold text-emerald-600 hover:bg-emerald-50 rounded-xl transition-all">SPMB 2026 (Pendaftaran)</a>
<a href="#blog" @click="mobileMenuOpen = false" class="block px-4 py-3 text-base font-semibold rounded-xl text-slate-700 hover:bg-slate-50 hover:text-brand-blue transition-all">Blog</a>
<a href="#kontak" @click="mobileMenuOpen = false" class="block px-4 py-3 text-base font-semibold rounded-xl text-slate-700 hover:bg-slate-50 hover:text-brand-blue transition-all">Kontak</a>
<div class="pt-4 border-t border-slate-100 flex flex-col space-y-3 px-4">
<a href="tel:085624943613" class="flex items-center gap-3 text-slate-700 font-bold hover:text-brand-blue">
<i data-lucide="phone" class="w-5 h-5 text-brand-gold"></i>
0856-2494-3613
</a>
<a href="#spmb" @click="mobileMenuOpen = false" class="w-full py-3 bg-brand-blue hover:bg-brand-teal text-white text-center font-bold rounded-xl shadow-md transition-all">
Daftar Sekarang
</a>
</div>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section id="hero" class="relative bg-gradient-to-br from-brand-blue via-slate-900 to-indigo-950 text-white overflow-hidden py-24 lg:py-36 min-h-[85vh] flex items-center">
<!-- Background Elements / Ornaments -->
<div class="absolute inset-0 opacity-15 mix-blend-overlay">
<div class="absolute top-10 left-1/4 w-96 h-96 bg-brand-teal rounded-full filter blur-3xl animate-pulse"></div>
<div class="absolute bottom-10 right-1/4 w-96 h-96 bg-brand-gold rounded-full filter blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
</div>
<div class="absolute inset-0 bg-[radial-gradient(#ffffff0a_1px,transparent_1px)] [background-size:24px_24px]"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 z-10">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
<!-- Hero Left / Content -->
<div class="lg:col-span-7 space-y-8 text-center lg:text-left">
<div class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-xs font-semibold tracking-wider text-brand-gold uppercase">
<span class="flex h-2.5 w-2.5 relative">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
</span>
Penerimaan Siswa Baru Tahun Ajaran 2026/2027
</div>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight">
Wujudkan Masa Depan Gemilang di <br>
<span class="bg-gradient-to-r from-brand-gold via-amber-300 to-yellow-400 bg-clip-text text-transparent">SMK Pertiwi Ciasem</span>
</h1>
<p class="text-lg text-slate-300 max-w-2xl mx-auto lg:mx-0 leading-relaxed font-light">
Membentuk generasi unggul yang kompeten, berkarakter mulia, inovatif, dan siap kerja maupun wirausaha di era global dengan kurikulum berbasis industri terbaru.
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start items-center">
<a href="#spmb" class="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-brand-gold to-amber-600 hover:from-amber-600 hover:to-brand-gold text-white font-bold rounded-xl shadow-lg hover:shadow-amber-500/25 transition-all transform hover:-translate-y-0.5 text-center flex items-center justify-center gap-2">
<i data-lucide="user-plus" class="w-5 h-5"></i>
Daftar SPMB 2026
</a>
<a href="#profil" class="w-full sm:w-auto px-8 py-4 bg-white/10 hover:bg-white/15 text-white font-semibold rounded-xl border border-white/20 hover:border-white/40 transition-all text-center flex items-center justify-center gap-2">
<i data-lucide="compass" class="w-5 h-5"></i>
Jelajahi Profil
</a>
</div>
<!-- Highlight Stats -->
<div class="grid grid-cols-3 gap-4 pt-6 border-t border-white/10 max-w-lg mx-auto lg:mx-0">
<div>
<span class="block text-3xl font-extrabold text-brand-gold">7+</span>
<span class="text-xs text-slate-300 tracking-wide uppercase">Keahlian</span>
</div>
<div>
<span class="block text-3xl font-extrabold text-brand-gold">100%</span>
<span class="text-xs text-slate-300 tracking-wide uppercase">Fasilitas AC</span>
</div>
<div>
<span class="block text-3xl font-extrabold text-brand-gold">1500+</span>
<span class="text-xs text-slate-300 tracking-wide uppercase">Alumni Sukses</span>
</div>
</div>
</div>
<!-- Hero Right / Visual Card Mockup -->
<div class="lg:col-span-5 relative mt-8 lg:mt-0">
<div class="relative mx-auto max-w-md bg-white/5 p-4 rounded-3xl border border-white/10 backdrop-blur-md shadow-2xl">
<!-- Custom Decorative Banner Image Representation -->
<div class="relative h-[340px] rounded-2xl overflow-hidden bg-gradient-to-br from-slate-800 to-brand-blue flex flex-col justify-between p-6">
<!-- Background pattern placeholder -->
<div class="absolute inset-0 bg-cover bg-center mix-blend-overlay opacity-40 transition-transform duration-500 hover:scale-105" style="background-image: url('https://images.unsplash.com/photo-1523050854058-8df90110c9f1?q=80&w=600&auto=format&fit=crop');"></div>
<div class="z-10 flex justify-between items-start">
<span class="bg-brand-blue/90 border border-white/10 px-3 py-1 rounded-full text-xs font-bold tracking-wider uppercase">
Kampus Pusat
</span>
<div class="w-10 h-10 bg-white/20 backdrop-blur-md rounded-full flex items-center justify-center">
<i data-lucide="graduation-cap" class="w-5 h-5 text-brand-gold"></i>
</div>
</div>
<div class="z-10 space-y-2">
<p class="text-xs text-brand-gold font-bold uppercase tracking-widest">AKREDITASI A</p>
<h3 class="text-2xl font-bold tracking-tight">Kreatif, Kompeten & Mandiri</h3>
<p class="text-xs text-slate-200">Bergabunglah bersama komunitas belajar terbaik dengan ekosistem digital terpadu.</p>
</div>
</div>
<!-- Mini Floating Info Cards -->
<div class="absolute -bottom-6 -left-6 bg-white text-slate-900 p-4 rounded-2xl shadow-xl border border-slate-100 flex items-center space-x-3 max-w-[200px] hidden sm:flex">
<div class="p-2.5 bg-indigo-50 text-indigo-600 rounded-xl">
<i data-lucide="award" class="w-6 h-6"></i>
</div>
<div>
<span class="block text-xs text-slate-500 font-medium uppercase">Prestasi</span>
<span class="block text-sm font-extrabold text-brand-blue">Juara Provinsi</span>
</div>
</div>
<div class="absolute -top-6 -right-6 bg-emerald-500 text-white p-4 rounded-2xl shadow-xl flex items-center space-x-3 max-w-[200px] hidden sm:flex">
<div class="p-2.5 bg-white/20 rounded-xl">
<i data-lucide="users" class="w-6 h-6"></i>
</div>
<div>
<span class="block text-xs text-emerald-100 font-medium uppercase">Mitra Industri</span>
<span class="block text-sm font-extrabold">50+ Industri</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PROFIL SEKOLAH (TAB SYSTEM) -->
<section id="profil" class="py-24 bg-white scroll-mt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<span class="text-brand-teal text-sm font-extrabold tracking-widest uppercase">Mengenal Lebih Dekat</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-brand-blue tracking-tight">Profil SMK Pertiwi Ciasem</h2>
<div class="w-20 h-1 bg-brand-gold mx-auto rounded-full"></div>
<p class="text-slate-600 font-light">
Menelusuri sejarah, memahami visi dan misi, menilik data pokok, serta mengenal struktur kepemimpinan sekolah kami.
</p>
</div>
<!-- Tab Buttons Container -->
<div class="flex flex-wrap justify-center gap-2 p-1.5 bg-slate-100/80 backdrop-blur rounded-2xl max-w-3xl mx-auto mb-12 shadow-inner">
<button @click="activeTab = 'sejarah'" :class="activeTab === 'sejarah' ? 'bg-brand-blue text-white shadow-md' : 'text-slate-600 hover:text-brand-blue hover:bg-slate-200'" class="flex-1 min-w-[150px] px-4 py-3 text-sm font-bold rounded-xl transition-all flex items-center justify-center gap-2">
<i data-lucide="history" class="w-4 h-4"></i>
Sejarah Singkat
</button>
<button @click="activeTab = 'visi-misi'" :class="activeTab === 'visi-misi' ? 'bg-brand-blue text-white shadow-md' : 'text-slate-600 hover:text-brand-blue hover:bg-slate-200'" class="flex-1 min-w-[150px] px-4 py-3 text-sm font-bold rounded-xl transition-all flex items-center justify-center gap-2">
<i data-lucide="target" class="w-4 h-4"></i>
Visi & Misi
</button>
<button @click="activeTab = 'data-sekolah'" :class="activeTab === 'data-sekolah' ? 'bg-brand-blue text-white shadow-md' : 'text-slate-600 hover:text-brand-blue hover:bg-slate-200'" class="flex-1 min-w-[150px] px-4 py-3 text-sm font-bold rounded-xl transition-all flex items-center justify-center gap-2">
<i data-lucide="database" class="w-4 h-4"></i>
Data Sekolah
</button>
<button @click="activeTab = 'struktur'" :class="activeTab === 'struktur' ? 'bg-brand-blue text-white shadow-md' : 'text-slate-600 hover:text-brand-blue hover:bg-slate-200'" class="flex-1 min-w-[150px] px-4 py-3 text-sm font-bold rounded-xl transition-all flex items-center justify-center gap-2">
<i data-lucide="network" class="w-4 h-4"></i>
Struktur Organisasi
</button>
</div>
<!-- Tab Contents -->
<div class="bg-white rounded-3xl border border-slate-100 shadow-xl shadow-slate-100/50 p-6 sm:p-10 transition-all duration-300">
<!-- 1. Sejarah Singkat Tab -->
<div x-show="activeTab === 'sejarah'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
<div class="lg:col-span-7 space-y-6">
<div class="inline-flex p-3 bg-indigo-50 text-brand-blue rounded-2xl">
<i data-lucide="book-open-check" class="w-6 h-6"></i>
</div>
<h3 class="text-2xl sm:text-3xl font-bold text-brand-blue">Satu Dekade Mengabdi Untuk Negeri</h3>
<p class="text-slate-600 leading-relaxed font-light">
SMK Pertiwi Ciasem didirikan dengan komitmen kuat untuk menghadirkan pendidikan kejuruan yang inklusif, berkualitas tinggi, dan relevan dengan dinamika industri di kawasan Subang dan sekitarnya. Terletak secara strategis di lingkungan Sukamandi, sekolah ini dirintis oleh para akademisi dan praktisi pendidikan yang visioner.
</p>
<p class="text-slate-600 leading-relaxed font-light">
Sejak awal berdiri, kami terus melengkapi sarana prasarana penunjang, meluncurkan program keahlian yang responsif terhadap tren teknologi, serta membina kemitraan strategis dengan berbagai dunia usaha dan dunia industri (DUDI) bereputasi nasional. Saat ini, SMK Pertiwi Ciasem bangga menjadi salah satu sekolah rujukan yang melahirkan SDM kompeten berdaya saing global.
</p>
</div>
<div class="lg:col-span-5">
<div class="relative rounded-2xl overflow-hidden shadow-lg aspect-video lg:aspect-square bg-slate-900">
<!-- Visual representation placeholder -->
<div class="absolute inset-0 bg-cover bg-center opacity-60" style="background-image: url('https://images.unsplash.com/photo-1541339907198-e08756dedf3f?q=80&w=600&auto=format&fit=crop');"></div>
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex items-end p-6">
<p class="text-sm font-medium text-white/90">Gedung Pembelajaran Terpadu & Laboratorium SMK Pertiwi Ciasem</p>
</div>
</div>
</div>
</div>
<!-- 2. Visi & Misi Tab -->
<div x-show="activeTab === 'visi-misi'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-10" style="display: none;">
<div class="bg-gradient-to-r from-slate-50 to-indigo-50/30 p-8 rounded-2xl border border-slate-100 text-center max-w-4xl mx-auto space-y-4">
<span class="text-xs text-brand-gold font-bold tracking-widest uppercase">VISI UTAMA</span>
<h4 class="text-2xl sm:text-3xl font-extrabold text-brand-blue italic leading-snug">
"Menjadi sekolah kejuruan unggulan yang menghasilkan lulusan berakhlak mulia, kompeten secara global, inovatif, dan mandiri pada tahun 2030."
</h4>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4 hover:border-brand-teal transition-colors">
<div class="w-12 h-12 bg-teal-50 text-brand-teal rounded-xl flex items-center justify-center">
<i data-lucide="shield-check" class="w-6 h-6"></i>
</div>
<h5 class="text-lg font-bold text-slate-800">1. Pembinaan Karakter</h5>
<p class="text-sm text-slate-600 font-light leading-relaxed">
Menyelenggarakan pembinaan keagamaan dan budi pekerti luhur guna mencetak lulusan dengan nilai etika kerja tinggi dan berkepribadian terpuji.
</p>
</div>
<div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4 hover:border-brand-blue transition-colors">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center">
<i data-lucide="cpu" class="w-6 h-6"></i>
</div>
<h5 class="text-lg font-bold text-slate-800">2. Kurikulum Adaptif</h5>
<p class="text-sm text-slate-600 font-light leading-relaxed">
Mengembangkan kurikulum yang responsif terhadap kemajuan sains, teknologi informasi, serta berorientasi penuh pada kebutuhan dunia kerja riil.
</p>
</div>
<div class="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4 hover:border-brand-gold transition-colors">
<div class="w-12 h-12 bg-amber-50 text-brand-gold rounded-xl flex items-center justify-center">
<i data-lucide="sparkles" class="w-6 h-6"></i>
</div>
<h5 class="text-lg font-bold text-slate-800">3. Inovasi & Kewirausahaan</h5>
<p class="text-sm text-slate-600 font-light leading-relaxed">
Memfasilitasi inkubasi bisnis serta inovasi kreatif berbasis kearifan lokal guna mempersiapkan lulusan tangguh yang siap berwirausaha mandiri.
</p>
</div>
</div>
</div>
<!-- 3. Data Sekolah Tab -->
<div x-show="activeTab === 'data-sekolah'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-8" style="display: none;">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-center">
<span class="block text-sm text-slate-500 font-semibold uppercase">Akreditasi</span>
<span class="block text-4xl font-extrabold text-brand-blue mt-2">Grade A</span>
<span class="block text-xs text-brand-gold font-medium mt-1">Sangat Memuaskan</span>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-center">
<span class="block text-sm text-slate-500 font-semibold uppercase">Nomor NPSN</span>
<span class="block text-4xl font-extrabold text-brand-blue mt-2">69984321</span>
<span class="block text-xs text-brand-gold font-medium mt-1">NPSN Resmi Kemdikbud</span>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-center">
<span class="block text-sm text-slate-500 font-semibold uppercase">Total Pendidik</span>
<span class="block text-4xl font-extrabold text-brand-blue mt-2">45+</span>
<span class="block text-xs text-brand-gold font-medium mt-1">Guru Bersertifikasi</span>
</div>
<div class="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-center">
<span class="block text-sm text-slate-500 font-semibold uppercase">Status Sekolah</span>
<span class="block text-4xl font-extrabold text-brand-blue mt-2">Swasta</span>
<span class="block text-xs text-brand-gold font-medium mt-1">Di bawah Yayasan Pertiwi</span>
</div>
</div>
<!-- Detail Data Table -->
<div class="overflow-x-auto rounded-2xl border border-slate-100 shadow-inner">
<table class="w-full text-left text-sm text-slate-600">
<thead class="bg-slate-100 text-slate-800 text-xs font-bold uppercase tracking-wider">
<tr>
<th class="px-6 py-4">Kategori Data</th>
<th class="px-6 py-4">Keterangan Resmi</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr>
<td class="px-6 py-4 font-bold text-slate-800">Nama Sekolah</td>
<td class="px-6 py-4">SMK Pertiwi Ciasem</td>
</tr>
<tr>
<td class="px-6 py-4 font-bold text-slate-800">Alamat Lengkap</td>
<td class="px-6 py-4">JL. Margamulya, Gg.10, Ciasem, Komplek BTN Sukamandi Segar, Ciasem Hilir, Kec. Ciasem, Kabupaten Subang, Jawa Barat 41256</td>
</tr>
<tr>
<td class="px-6 py-4 font-bold text-slate-800">Website Resmi</td>
<td class="px-6 py-4">
<a href="https://smk-pertiwisukamandi.sch.id/" target="_blank" rel="noopener" class="text-brand-blue hover:underline inline-flex items-center gap-1">
smk-pertiwisukamandi.sch.id
<i data-lucide="external-link" class="w-3.5 h-3.5"></i>
</a>
</td>
</tr>
<tr>
<td class="px-6 py-4 font-bold text-slate-800">Jenjang & Status</td>
<td class="px-6 py-4">SMK / Swasta (Kurikulum Merdeka Mandiri Berubah)</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 4. Struktur Organisasi Tab -->
<div x-show="activeTab === 'struktur'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4" x-transition:enter-end="opacity-100 translate-y-0" class="space-y-12" style="display: none;">
<div class="text-center max-w-xl mx-auto space-y-2">
<h4 class="text-xl font-bold text-slate-800">Bagan Struktur Kepemimpinan</h4>
<p class="text-xs text-slate-500 font-light">Sinergi kepemimpinan untuk mewujudkan manajemen institusi yang kredibel, akuntabel, dan transparan.</p>
</div>
<!-- Interactive Tree Organogram -->
<div class="flex flex-col items-center space-y-8">
<!-- Kepala Sekolah -->
<div class="flex flex-col items-center">
<div class="bg-gradient-to-r from-brand-blue to-indigo-900 text-white px-6 py-4 rounded-2xl shadow-md border border-brand-blue text-center w-64">
<span class="block text-xs text-brand-gold uppercase tracking-wider font-semibold">Kepala Sekolah</span>
<span class="block text-base font-extrabold mt-1">H. Supriatna, M.Pd.</span>
</div>
<div class="w-0.5 h-8 bg-slate-300"></div>
</div>
<!-- Hubungan Samping / Wakil Kepala Sekolah -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-4 relative w-full max-w-3xl">
<!-- Line Connector for Desktop -->
<div class="absolute top-0 left-1/4 right-1/4 h-0.5 bg-slate-300 hidden md:block"></div>
<!-- Wakasek Kurikulum -->
<div class="flex flex-col items-center relative">
<div class="absolute -top-4 left-1/2 w-0.5 h-4 bg-slate-300 hidden md:block"></div>
<div class="bg-white text-slate-800 px-5 py-3.5 rounded-xl border border-slate-200 shadow-sm text-center w-52 hover:border-brand-blue transition-all">
<span class="block text-[11px] text-slate-500 uppercase tracking-widest font-bold">Wakasek Kurikulum</span>
<span class="block text-sm font-bold text-slate-800 mt-1">Ahmad Yani, S.Kom.</span>
</div>
</div>
<!-- Wakasek Kesiswaan -->
<div class="flex flex-col items-center relative">
<div class="absolute -top-4 left-1/2 w-0.5 h-4 bg-slate-300 hidden md:block"></div>
<div class="bg-white text-slate-800 px-5 py-3.5 rounded-xl border border-slate-200 shadow-sm text-center w-52 hover:border-brand-blue transition-all">
<span class="block text-[11px] text-slate-500 uppercase tracking-widest font-bold">Wakasek Kesiswaan</span>
<span class="block text-sm font-bold text-slate-800 mt-1">Budi Setiadi, S.Pd.</span>
</div>
</div>
<!-- Wakasek Hubin -->
<div class="flex flex-col items-center relative">
<div class="absolute -top-4 left-1/2 w-0.5 h-4 bg-slate-300 hidden md:block"></div>
<div class="bg-white text-slate-800 px-5 py-3.5 rounded-xl border border-slate-200 shadow-sm text-center w-52 hover:border-brand-blue transition-all">
<span class="block text-[11px] text-slate-500 uppercase tracking-widest font-bold">Wakasek Hubungan Industri</span>
<span class="block text-sm font-bold text-slate-800 mt-1">Dra. Hj. Siti Mariah</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PROGRAM KEAHLIAN / JURUSAN -->
<section id="program" class="py-24 bg-slate-50 border-y border-slate-200/50 scroll-mt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<span class="text-brand-teal text-sm font-extrabold tracking-widest uppercase">Kompetensi Kejuruan</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-brand-blue tracking-tight">7 Program Keahlian Unggulan</h2>
<div class="w-20 h-1 bg-brand-gold mx-auto rounded-full"></div>
<p class="text-slate-600 font-light">
Kurikulum adaptif berbasis industri untuk mencetak teknolog, pebisnis, profesional hospitality, hingga kreator kreatif masa depan.
</p>
</div>
<!-- Jurusan Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 1. TJKT -->
<div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-md hover:shadow-xl transition-all hover:-translate-y-1.5 flex flex-col justify-between group">
<div class="space-y-5">
<div class="w-14 h-14 bg-blue-50 text-brand-blue rounded-2xl flex items-center justify-center group-hover:bg-brand-blue group-hover:text-white transition-colors duration-300">
<i data-lucide="network" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 group-hover:text-brand-blue transition-colors">Teknik Jaringan Komputer & Telekomunikasi</h3>
<p class="text-sm text-slate-500 font-light leading-relaxed">
Mempelajari instalasi jaringan, administrasi server, keamanan siber, pemrograman jaringan, cloud computing, serta konfigurasi router profesional.
</p>
</div>
<div class="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400 font-semibold uppercase tracking-wider">
<span>Peluang: Network Engineer</span>
<i data-lucide="arrow-right" class="w-4 h-4 text-brand-blue opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all"></i>
</div>
</div>
<!-- 2. TO -->
<div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-md hover:shadow-xl transition-all hover:-translate-y-1.5 flex flex-col justify-between group">
<div class="space-y-5">
<div class="w-14 h-14 bg-amber-50 text-brand-gold rounded-2xl flex items-center justify-center group-hover:bg-brand-gold group-hover:text-white transition-colors duration-300">
<i data-lucide="wrench" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 group-hover:text-brand-blue transition-colors">Teknik Otomotif</h3>
<p class="text-sm text-slate-500 font-light leading-relaxed">
Mempelajari perawatan & perbaikan mesin kendaraan, sistem kelistrikan otomotif, chasis, injeksi, motor listrik, dan manajemen bengkel moderen.
</p>
</div>
<div class="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400 font-semibold uppercase tracking-wider">
<span>Peluang: Teknisi / Maker</span>
<i data-lucide="arrow-right" class="w-4 h-4 text-brand-blue opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all"></i>
</div>
</div>
<!-- 3. MPBL -->
<div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-md hover:shadow-xl transition-all hover:-translate-y-1.5 flex flex-col justify-between group">
<div class="space-y-5">
<div class="w-14 h-14 bg-teal-50 text-brand-teal rounded-2xl flex items-center justify-center group-hover:bg-brand-teal group-hover:text-white transition-colors duration-300">
<i data-lucide="briefcase" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 group-hover:text-brand-blue transition-colors">Manajemen Perkantoran & Layanan Bisnis</h3>
<p class="text-sm text-slate-500 font-light leading-relaxed">
Menguasai administrasi perkantoran digital, pengelolaan dokumen, kearsipan awan, layanan komunikasi prima, keprotokolan, dan etika bisnis.
</p>
</div>
<div class="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400 font-semibold uppercase tracking-wider">
<span>Peluang: Administrator Office</span>
<i data-lucide="arrow-right" class="w-4 h-4 text-brand-blue opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all"></i>
</div>
</div>
<!-- 4. Pemasaran -->
<div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-md hover:shadow-xl transition-all hover:-translate-y-1.5 flex flex-col justify-between group">
<div class="space-y-5">
<div class="w-14 h-14 bg-rose-50 text-rose-600 rounded-2xl flex items-center justify-center group-hover:bg-rose-600 group-hover:text-white transition-colors duration-300">
<i data-lucide="trending-up" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 group-hover:text-brand-blue transition-colors">Pemasaran (Marketing)</h3>
<p class="text-sm text-slate-500 font-light leading-relaxed">
Menguasai strategi pemasaran ritel digital, manajemen penjualan ecommerce, konten marketing sosial media, riset pasar, dan negosiasi bisnis.
</p>
</div>
<div class="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400 font-semibold uppercase tracking-wider">
<span>Peluang: Digital Marketer</span>
<i data-lucide="arrow-right" class="w-4 h-4 text-brand-blue opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all"></i>
</div>
</div>
<!-- 5. Perhotelan -->
<div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-md hover:shadow-xl transition-all hover:-translate-y-1.5 flex flex-col justify-between group">
<div class="space-y-5">
<div class="w-14 h-14 bg-emerald-50 text-emerald-600 rounded-2xl flex items-center justify-center group-hover:bg-emerald-600 group-hover:text-white transition-colors duration-300">
<i data-lucide="hotel" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 group-hover:text-brand-blue transition-colors">Perhotelan (Hospitality)</h3>
<p class="text-sm text-slate-500 font-light leading-relaxed">
Mempelajari manajemen operasional hotel bintang, pelayanan resepsionis, tata graha (housekeeping), layanan makanan, minuman, dan event manajemen.
</p>
</div>
<div class="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400 font-semibold uppercase tracking-wider">
<span>Peluang: Hotelier / Event Staff</span>
<i data-lucide="arrow-right" class="w-4 h-4 text-brand-blue opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all"></i>
</div>
</div>
<!-- 6. DKV -->
<div class="bg-white rounded-3xl p-8 border border-slate-100 shadow-md hover:shadow-xl transition-all hover:-translate-y-1.5 flex flex-col justify-between group">
<div class="space-y-5">
<div class="w-14 h-14 bg-violet-50 text-violet-600 rounded-2xl flex items-center justify-center group-hover:bg-violet-600 group-hover:text-white transition-colors duration-300">
<i data-lucide="palette" class="w-7 h-7"></i>
</div>
<h3 class="text-xl font-bold text-slate-800 group-hover:text-brand-blue transition-colors">Desain Komunikasi Visual</h3>
<p class="text-sm text-slate-500 font-light leading-relaxed">
Menguasai desain grafis, ilustrasi digital, fotografi kreatif, videografi & video editing, animasi 2D/3D, dan branding periklanan moderen.
</p>
</div>
<div class="pt-6 mt-6 border-t border-slate-100 flex items-center justify-between text-xs text-slate-400 font-semibold uppercase tracking-wider">
<span>Peluang: Graphic Designer / Editor</span>
<i data-lucide="arrow-right" class="w-4 h-4 text-brand-blue opacity-0 group-hover:opacity-100 group-hover:translate-x-2 transition-all"></i>
</div>
</div>
<!-- 7. PPLG (Centered/Highlight) -->
<div class="bg-gradient-to-br from-brand-blue to-slate-900 text-white rounded-3xl p-8 shadow-lg hover:shadow-brand-blue/20 transition-all hover:-translate-y-1.5 flex flex-col justify-between md:col-span-2 lg:col-span-3 group">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-center">
<div class="lg:col-span-8 space-y-4">
<div class="w-14 h-14 bg-white/10 text-brand-gold rounded-2xl flex items-center justify-center group-hover:bg-brand-gold group-hover:text-white transition-colors duration-300">
<i data-lucide="gamepad-2" class="w-7 h-7"></i>
</div>
<h3 class="text-2xl font-bold text-white">Pengembangan Perangkat Lunak & GIM (PPLG)</h3>
<p class="text-sm text-slate-300 font-light leading-relaxed">
Program studi eksklusif untuk mempelajari rekayasa perangkat lunak, coding web & mobile, algoritma, basis data cloud, manajemen kecerdasan buatan (AI), serta perancangan dan *game development* interaktif dari konsep hingga perilisan.
</p>
</div>
<div class="lg:col-span-4 bg-white/5 rounded-2xl p-5 border border-white/10 space-y-3">
<span class="block text-xs text-brand-gold font-bold uppercase tracking-wider">Materi Utama:</span>
<ul class="space-y-2 text-xs text-slate-200">
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-gold"></i> Web & Mobile Apps</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-gold"></i> Game Engine & Asset</li>
<li class="flex items-center gap-2"><i data-lucide="check" class="w-4 h-4 text-brand-gold"></i> UI/UX Design System</li>
</ul>
</div>
</div>
<div class="pt-6 mt-6 border-t border-white/10 flex items-center justify-between text-xs text-brand-gold font-bold uppercase tracking-wider">
<span>Peluang Utama: Software Developer / Game Designer</span>
<i data-lucide="arrow-right" class="w-4 h-4 text-brand-gold opacity-100 group-hover:translate-x-2 transition-all"></i>
</div>
</div>
</div>
</div>
</section>
<!-- FASILITAS SEKOLAH -->
<section id="fasilitas" class="py-24 bg-white scroll-mt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<span class="text-brand-teal text-sm font-extrabold tracking-widest uppercase">Sarana & Prasarana</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-brand-blue tracking-tight">Fasilitas Kampus Lengkap</h2>
<div class="w-20 h-1 bg-brand-gold mx-auto rounded-full"></div>
<p class="text-slate-600 font-light">
Kenyamanan dan kelengkapan fasilitas belajar adalah prioritas demi mendukung peningkatan kompetensi motorik dan kognitif seluruh siswa.
</p>
</div>
<!-- Facilities Grid Layout -->
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- Fasilitas item 1 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="airplay" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Ruang Kelas AC</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Proses KBM sejuk dan kondusif</p>
</div>
<!-- Fasilitas item 2 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="monitor" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Lab Komputer</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Spesifikasi modern high-end</p>
</div>
<!-- Fasilitas item 3 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="building" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Mini Office</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Simulasi ruang kerja nyata</p>
</div>
<!-- Fasilitas item 4 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="video" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Studio DKV</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Foto, podcast, & multimedia</p>
</div>
<!-- Fasilitas item 5 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="cpu" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Workshop Otomotif</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Fasilitas praktek mesin modern</p>
</div>
<!-- Fasilitas item 6 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="chef-hat" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Lab Perhotelan</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Kamar simulasi & tata boga</p>
</div>
<!-- Fasilitas item 7 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="rocket" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Incubator Business</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Pendampingan usaha mandiri</p>
</div>
<!-- Fasilitas item 8 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="flag" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Lapangan Olahraga</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Futsal, basket, & voli</p>
</div>
<!-- Fasilitas item 9 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="landmark" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Gedung Event</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Aula serbaguna kapasitas besar</p>
</div>
<!-- Fasilitas item 10 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="shield-check" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Tempat Ibadah</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Masjid nyaman & asri</p>
</div>
<!-- Fasilitas item 11 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="coffee" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Kantin Higienis</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Kuliner sehat & bersih</p>
</div>
<!-- Fasilitas item 12 -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="wallet" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Bank Mini</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Praktek jasa keuangan perbankan</p>
</div>
<!-- Fasilitas item 13 (Parkir Area) -->
<div class="group bg-slate-50 hover:bg-brand-blue p-6 rounded-2xl border border-slate-100 shadow-sm text-center transition-all duration-300 hover:shadow-lg hover:-translate-y-1 col-span-2 md:col-span-3 lg:col-span-4">
<div class="w-12 h-12 bg-indigo-50 text-brand-blue rounded-xl flex items-center justify-center mx-auto mb-4 group-hover:bg-white/20 group-hover:text-white transition-colors">
<i data-lucide="car" class="w-6 h-6"></i>
</div>
<h4 class="text-base font-bold text-slate-800 group-hover:text-white transition-colors">Parkir Area Luas & Aman</h4>
<p class="text-xs text-slate-500 group-hover:text-slate-200 mt-1 font-light">Pengamanan CCTV & Satpam 24 Jam</p>
</div>
</div>
</div>
</section>
<!-- SPMB 2026 (Penerimaan Siswa Baru) -->
<section id="spmb" class="py-24 bg-gradient-to-br from-indigo-900 via-brand-blue to-slate-900 text-white scroll-mt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
<!-- SPMB Info Left -->
<div class="lg:col-span-5 space-y-6">
<div class="inline-flex items-center gap-1 px-3 py-1 bg-white/10 border border-white/20 rounded-full text-xs font-semibold text-brand-gold uppercase tracking-wider">
SPMB Online 2026
</div>
<h2 class="text-3xl sm:text-4xl font-extrabold tracking-tight leading-none">
Mulai Langkah Suksesmu Hari Ini!
</h2>
<p class="text-slate-300 font-light leading-relaxed">
Penerimaan Peserta Didik Baru (SPMB) Tahun Pelajaran 2026/2027 telah dibuka secara daring. Dapatkan pengalaman belajar industri terbaik melalui integrasi teknologi informasi kurikulum modern.
</p>
<!-- Steps of Registration -->
<div class="space-y-4 pt-4">
<div class="flex items-start gap-4">
<div class="w-8 h-8 rounded-full bg-brand-gold text-slate-900 font-bold flex items-center justify-center text-sm shrink-0">1</div>
<div>
<h4 class="text-sm font-bold text-white">Isi Formulir</h4>
<p class="text-xs text-slate-300">Lengkapi formulir pendaftaran daring di samping dengan data yang valid.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-8 h-8 rounded-full bg-brand-gold text-slate-900 font-bold flex items-center justify-center text-sm shrink-0">2</div>
<div>
<h4 class="text-sm font-bold text-white">Verifikasi Data</h4>
<p class="text-xs text-slate-300">Panitia akan melakukan verifikasi berkas dan menjadwalkan wawancara minat bakat.</p>
</div>
</div>
<div class="flex items-start gap-4">
<div class="w-8 h-8 rounded-full bg-brand-gold text-slate-900 font-bold flex items-center justify-center text-sm shrink-0">3</div>
<div>
<h4 class="text-sm font-bold text-white">Daftar Ulang</h4>
<p class="text-xs text-slate-300">Lakukan pendaftaran ulang secara berkas untuk klaim kursi belajar.</p>
</div>
</div>
</div>
</div>
<!-- SPMB Form Right -->
<div class="lg:col-span-7" x-data="{ successSubmit: false, userName: '' }">
<div class="bg-white text-slate-800 p-8 rounded-3xl shadow-xl border border-slate-100 max-w-2xl mx-auto" x-show="!successSubmit">
<h3 class="text-xl font-bold text-brand-blue mb-2 flex items-center gap-2">
<i data-lucide="file-text" class="w-5 h-5 text-brand-gold"></i>
Formulir Pra-Pendaftaran Online
</h3>
<p class="text-xs text-slate-500 mb-6">Isi formulir berikut dan panitia akan segera menghubungi Anda dalam waktu 1x24 jam.</p>
<form @submit.prevent="successSubmit = true; userName = $refs.fullName.value" class="space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-1">
<label class="text-xs font-semibold text-slate-700">Nama Lengkap Siswa *</label>
<input type="text" x-ref="fullName" required placeholder="Sesuai Ijazah" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue transition-colors text-sm">
</div>
<div class="space-y-1">
<label class="text-xs font-semibold text-slate-700">Asal Sekolah (SMP/MTs) *</label>
<input type="text" required placeholder="Nama SMP Asal" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue transition-colors text-sm">
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="space-y-1">
<label class="text-xs font-semibold text-slate-700">Nomor WhatsApp Siswa / Orang Tua *</label>
<input type="tel" required placeholder="Contoh: 0856xxxx" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue transition-colors text-sm">
</div>
<div class="space-y-1">
<label class="text-xs font-semibold text-slate-700">Pilihan Jurusan Utama *</label>
<select required class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue transition-colors text-sm bg-white">
<option value="">-- Pilih Jurusan --</option>
<option value="TJKT">Teknik Jaringan Komputer & Telekomunikasi</option>
<option value="TO">Teknik Otomotif</option>
<option value="MPBL">Manajemen Perkantoran & Layanan Bisnis</option>
<option value="Pemasaran">Pemasaran</option>
<option value="Perhotelan">Perhotelan</option>
<option value="DKV">Desain Komunikasi Visual</option>
<option value="PPLG">Pengembangan Perangkat Lunak & GIM</option>
</select>
</div>
</div>
<div class="space-y-1">
<label class="text-xs font-semibold text-slate-700">Alamat Tempat Tinggal</label>
<textarea rows="2" placeholder="Nama Jalan, RT/RW, Desa, Kecamatan" class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-brand-blue/20 focus:border-brand-blue transition-colors text-sm"></textarea>
</div>
<div class="flex items-center gap-2 py-2">
<input type="checkbox" required id="agree" class="w-4 h-4 text-brand-blue focus:ring-brand-blue rounded border-slate-300">
<label for="agree" class="text-xs text-slate-500 cursor-pointer">Saya menyetujui syarat & ketentuan pra-pendaftaran SMK Pertiwi Ciasem.</label>
</div>
<button type="submit" class="w-full py-3.5 bg-gradient-to-r from-brand-gold to-amber-600 hover:from-amber-600 hover:to-brand-gold text-white font-bold rounded-xl shadow-lg hover:shadow-amber-500/20 transition-all text-center">
Kirim Formulir Pendaftaran
</button>
</form>
</div>
<!-- Success Message Box -->
<div class="bg-white text-slate-800 p-8 rounded-3xl shadow-xl border border-emerald-100 max-w-2xl mx-auto text-center space-y-6" x-show="successSubmit" style="display: none;">
<div class="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-full flex items-center justify-center mx-auto shadow-inner">
<i data-lucide="check-circle" class="w-10 h-10"></i>
</div>
<div class="space-y-2">
<h3 class="text-2xl font-bold text-slate-900">Terima Kasih, <span x-text="userName" class="text-brand-blue"></span>!</h3>
<p class="text-sm text-slate-600 font-light leading-relaxed">
Berkas formulir pra-pendaftaran Anda telah tersimpan di sistem kami. Panitia SPMB SMK Pertiwi Ciasem 2026 akan segera menghubungi Anda via nomor WhatsApp yang didaftarkan untuk proses selanjutnya.
</p>
</div>
<div class="pt-4 border-t border-slate-100 flex flex-col sm:flex-row gap-4 justify-center">
<a href="https://wa.me/6285624943613?text=Halo%20Panitia%20SPMB%20SMK%20Pertiwi%20Ciasem%202026%2C%20saya%20sudah%20mengisi%20formulir%20pendaftaran." target="_blank" rel="noopener" class="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-xl text-sm flex items-center justify-center gap-2">
<i data-lucide="message-square" class="w-4 h-4"></i>
Konfirmasi via WhatsApp
</a>
<button @click="successSubmit = false" class="px-6 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold rounded-xl text-sm">
Kembali ke Formulir
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- BLOG SECTION (BERITA SEKOLAH) -->
<section id="blog" class="py-24 bg-white scroll-mt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<span class="text-brand-teal text-sm font-extrabold tracking-widest uppercase">Kabar Terbaru</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-brand-blue tracking-tight">Kanal Berita & Kegiatan</h2>
<div class="w-20 h-1 bg-brand-gold mx-auto rounded-full"></div>
<p class="text-slate-600 font-light">
Ketahui dinamika belajar-mengajar, liputan kegiatan luar sekolah, kompetisi berprestasi, dan inovasi ilmiah karya siswa kami.
</p>
</div>
<!-- Blog Grid Layout -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Blog Item 1 -->
<article class="bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-md hover:shadow-xl transition-all duration-300 group flex flex-col justify-between">
<div>
<!-- Blog image placeholder representation -->
<div class="relative h-52 bg-slate-900 overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500" style="background-image: url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=600&auto=format&fit=crop');"></div>
<span class="absolute top-4 left-4 bg-brand-blue/90 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">PRESTASI</span>
</div>
<div class="p-6 space-y-3">
<span class="text-xs text-slate-400 font-semibold inline-flex items-center gap-1.5">
<i data-lucide="calendar" class="w-3.5 h-3.5"></i>
June 25, 2026
</span>
<h3 class="text-lg font-bold text-slate-800 group-hover:text-brand-blue transition-colors leading-tight">
Tim PPLG SMK Pertiwi Ciasem Meraih Juara 1 Lomba Coding Nasional
</h3>
<p class="text-sm text-slate-500 font-light line-clamp-3">
Siswa berbakat dari program keahlian Pengembangan Perangkat Lunak & GIM (PPLG) memenangkan medali emas berkat proyek aplikasi kecerdasan buatan penunjang agrikultur lokal.
</p>
</div>
</div>
<div class="p-6 pt-0 border-t border-slate-50 mt-4">
<a href="#blog" class="text-xs font-bold text-brand-blue hover:text-brand-teal inline-flex items-center gap-1">
Baca Selengkapnya
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
</a>
</div>
</article>
<!-- Blog Item 2 -->
<article class="bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-md hover:shadow-xl transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-52 bg-slate-900 overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500" style="background-image: url('https://images.unsplash.com/photo-1540575467063-178a50c2df87?q=80&w=600&auto=format&fit=crop');"></div>
<span class="absolute top-4 left-4 bg-brand-blue/90 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">KEGIATAN</span>
</div>
<div class="p-6 space-y-3">
<span class="text-xs text-slate-400 font-semibold inline-flex items-center gap-1.5">
<i data-lucide="calendar" class="w-3.5 h-3.5"></i>
June 18, 2026
</span>
<h3 class="text-lg font-bold text-slate-800 group-hover:text-brand-blue transition-colors leading-tight">
Job Fair & Expo Industri 2026 Sukses Membuka Ratusan Loker Alumni
</h3>
<p class="text-sm text-slate-500 font-light line-clamp-3">
Bekerja sama dengan puluhan perusahaan manufaktur dan teknologi terkemuka di Jawa Barat, acara ini langsung memfasilitasi rekruitmen massal bagi para wisudawan.
</p>
</div>
</div>
<div class="p-6 pt-0 border-t border-slate-50 mt-4">
<a href="#blog" class="text-xs font-bold text-brand-blue hover:text-brand-teal inline-flex items-center gap-1">
Baca Selengkapnya
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
</a>
</div>
</article>
<!-- Blog Item 3 -->
<article class="bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-md hover:shadow-xl transition-all duration-300 group flex flex-col justify-between">
<div>
<div class="relative h-52 bg-slate-900 overflow-hidden">
<div class="absolute inset-0 bg-cover bg-center group-hover:scale-105 transition-transform duration-500" style="background-image: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=600&auto=format&fit=crop');"></div>
<span class="absolute top-4 left-4 bg-brand-blue/90 text-white text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wider">PENGUMUMAN</span>
</div>
<div class="p-6 space-y-3">
<span class="text-xs text-slate-400 font-semibold inline-flex items-center gap-1.5">
<i data-lucide="calendar" class="w-3.5 h-3.5"></i>
June 05, 2026
</span>
<h3 class="text-lg font-bold text-slate-800 group-hover:text-brand-blue transition-colors leading-tight">
Launching Program Kelas Industri & Inkubasi Bisnis Ritel Terpadu
</h3>
<p class="text-sm text-slate-500 font-light line-clamp-3">
SMK Pertiwi Ciasem meluncurkan fasilitas inkubator baru untuk mematangkan bisnis rintisan siswa di bidang perhotelan dan mini banking.
</p>
</div>
</div>
<div class="p-6 pt-0 border-t border-slate-50 mt-4">
<a href="#blog" class="text-xs font-bold text-brand-blue hover:text-brand-teal inline-flex items-center gap-1">
Baca Selengkapnya
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
</a>
</div>
</article>
</div>
</div>
</section>
<!-- KONTAK SEKOLAH & MAPS -->
<section id="kontak" class="py-24 bg-slate-50 border-t border-slate-200/60 scroll-mt-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-16 space-y-4">
<span class="text-brand-teal text-sm font-extrabold tracking-widest uppercase">Hubungi Kami</span>
<h2 class="text-3xl sm:text-4xl font-extrabold text-brand-blue tracking-tight">Informasi Kontak & Lokasi</h2>
<div class="w-20 h-1 bg-brand-gold mx-auto rounded-full"></div>
<p class="text-slate-600 font-light">
Kunjungi kampus kami secara langsung, kirimkan surat elektronik, atau sapa tim humas kami via WhatsApp.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
<!-- Kontak Kiri / Detail Info -->
<div class="lg:col-span-5 space-y-6">
<div class="bg-white p-8 rounded-3xl shadow-md border border-slate-100 space-y-6">
<h3 class="text-xl font-bold text-brand-blue">Sekretariat SMK Pertiwi</h3>
<p class="text-sm text-slate-500 leading-relaxed font-light">
Layanan informasi dan administrasi dibuka setiap hari Senin s/d Jum'at pukul 07:00 - 15:00 WIB, dan Sabtu pukul 07:00 - 12:00 WIB.
</p>
<div class="space-y-4 border-t border-slate-100 pt-6">
<!-- Alamat -->
<div class="flex items-start gap-3 text-slate-700">
<div class="p-2.5 bg-blue-50 text-brand-blue rounded-xl shrink-0">
<i data-lucide="map-pin" class="w-5 h-5"></i>
</div>
<div class="text-sm leading-relaxed">
<span class="block font-bold text-slate-800">Alamat Kampus:</span>
JL. Margamulya, Gg.10, Ciasem, Komplek BTN Sukamandi Segar, Ciasem Hilir, Kec. Ciasem, Kabupaten Subang, Jawa Barat 41256
</div>
</div>
<!-- Telepon / WA -->
<div class="flex items-start gap-3 text-slate-700">
<div class="p-2.5 bg-green-50 text-emerald-600 rounded-xl shrink-0">
<i data-lucide="phone-call" class="w-5 h-5"></i>
</div>
<div class="text-sm">
<span class="block font-bold text-slate-800">Telepon / WhatsApp:</span>
<a href="https://wa.me/6285624943613" target="_blank" rel="noopener" class="text-brand-blue hover:underline">
0856-2494-3613
</a>
</div>
</div>
<!-- Website -->
<div class="flex items-start gap-3 text-slate-700">
<div class="p-2.5 bg-amber-50 text-brand-gold rounded-xl shrink-0">
<i data-lucide="globe" class="w-5 h-5"></i>
</div>
<div class="text-sm">
<span class="block font-bold text-slate-800">Website Resmi:</span>
<a href="https://smk-pertiwisukamandi.sch.id/" target="_blank" rel="noopener" class="text-brand-blue hover:underline">
https://smk-pertiwisukamandi.sch.id/
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Kontak Kanan / Peta Lokasi -->
<div class="lg:col-span-7 bg-white p-4 rounded-3xl shadow-md border border-slate-100">
<div class="relative h-[400px] w-full rounded-2xl overflow-hidden bg-slate-200">
<!-- Google Maps Embed Iframe -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.7170889154784!2d107.67132921073866!3d-6.430379962852264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e694519961db6df%3A0xe6a8047065968d0d!2sSMK%20PERTIWI%20SUKAMANDI!5e0!3m2!1sid!2sid!4v1710000000000!5m2!1sid!2sid"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="absolute inset-0">
</iframe>
</div>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-slate-900 text-slate-400 py-16 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-12 gap-8 pb-12 border-b border-slate-800">
<!-- Branding -->
<div class="md:col-span-5 space-y-4">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 bg-brand-gold text-slate-900 rounded-lg flex items-center justify-center font-bold text-lg">P</div>
<div>
<span class="block text-base font-extrabold text-white leading-none">SMK PERTIWI</span>
<span class="block text-2xs font-semibold text-brand-gold tracking-widest uppercase">CIASEM</span>
</div>
</div>
<p class="text-sm font-light text-slate-400 leading-relaxed max-w-sm">
Lembaga Pendidikan Vokasi berkualitas yang mengedepankan pembinaan karakter, inovasi industri digital, dan pengasahan minat bakat secara mandiri.
</p>
</div>
<!-- Tautan Pintar -->
<div class="md:col-span-3 space-y-4">
<h4 class="text-sm font-bold text-white uppercase tracking-wider">Tautan Pintar</h4>
<ul class="space-y-2 text-sm font-light">
<li><a href="#hero" class="hover:text-brand-gold transition-colors">Beranda</a></li>
<li><a href="#profil" class="hover:text-brand-gold transition-colors">Profil Sekolah</a></li>
<li><a href="#program" class="hover:text-brand-gold transition-colors">Program Keahlian</a></li>
<li><a href="#fasilitas" class="hover:text-brand-gold transition-colors">Fasilitas Kampus</a></li>
<li><a href="#spmb" class="hover:text-brand-gold transition-colors">SPMB 2026</a></li>
</ul>
</div>
<!-- Medsos & Mitra -->
<div class="md:col-span-4 space-y-4">
<h4 class="text-sm font-bold text-white uppercase tracking-wider">Kanal Komunitas</h4>
<div class="flex space-x-3">
<a href="#" class="w-10 h-10 bg-white/5 hover:bg-brand-blue text-white rounded-lg flex items-center justify-center transition-colors">
<i data-lucide="facebook" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 bg-white/5 hover:bg-pink-600 text-white rounded-lg flex items-center justify-center transition-colors">
<i data-lucide="instagram" class="w-5 h-5"></i>
</a>
<a href="#" class="w-10 h-10 bg-white/5 hover:bg-red-600 text-white rounded-lg flex items-center justify-center transition-colors">
<i data-lucide="youtube" class="w-5 h-5"></i>
</a>
</div>
<div class="pt-2">
<span class="block text-xs font-semibold text-slate-500 uppercase">AKREDITASI INSTITUSI:</span>
<span class="inline-block mt-1 bg-white/10 text-white text-xs font-bold px-2.5 py-0.5 rounded">AKREDITASI A</span>
</div>
</div>
</div>
<!-- Copyright & Watermark -->
<div class="pt-8 text-center text-xs font-light text-slate-500 flex flex-col sm:flex-row items-center justify-between gap-4">
<p>© 2026 SMK Pertiwi Ciasem. Seluruh hak cipta dilindungi undang-undang.</p>
<p>Website Resmi: <a href="https://smk-pertiwisukamandi.sch.id/" target="_blank" rel="noopener" class="text-brand-gold hover:underline">smk-pertiwisukamandi.sch.id</a></p>
</div>
</div>
</footer>
<!-- Initialize Lucide Icons -->
<script>
lucide.createIcons();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
38
Requests
8
Domains
895KB
Transfer Size
2784KB
Content Size
906.0ms
Dom Content Loaded
1,220.0ms
First Paint
910.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...