https://www.youtube.com/watch?v=NfWg75AAKlA

https://dindik.jatimprov.go.id/news-detail/1136/keberhasilan-program-double-track-dampingi-sekolah-hingga-peroleh-legalitas-produk

Panduan Deploy

Panduan Deployment: Landing Page Magang DT

Double Track Internship Program — Dinas Pendidikan Provinsi Jawa Timur & ITS Surabaya

Dokumen ini berisi panduan langkah-demi-langkah untuk melakukan kompilasi (build) dan penyebaran (deployment) berkas single-file React App.jsx ke berbagai platform cloud hosting modern secara gratis dan efisien.

🛠️ Prasyarat Teknis (Prerequisites)

Sebelum memulai, pastikan Anda telah menginstal beberapa alat pendukung berikut di komputer lokal Anda:

Node.js (Versi minimal 18.x LTS) & npm (atau yarn / pnpm).
Git (untuk version control dan integrasi CI/CD).
Akun di salah satu platform hosting (Vercel, Netlify, atau GitHub).

💻 Langkah 1: Setup Proyek Lokal (Vite + Tailwind)

Sistem landing page ini menggunakan React 18+, Tailwind CSS, dan Lucide Icons. Ikuti langkah berikut untuk membuat repositori lokal:

Inisialisasi Proyek React dengan Vite:

npm create vite@latest magang-dt -- --template react
cd magang-dt

Instalasi Dependencies Utama:

npm install lucide-react
npm install -D tailwindcss postcss autoprefixer

Inisialisasi Konfigurasi Tailwind:
```
npx tailwindcss init -p
```

Konfigurasi Tailwind CSS (tailwind.config.js): Sesuaikan bagian content agar dapat membaca kelas Tailwind di berkas React:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 12s linear infinite',
        'marquee': 'marquee 25s linear infinite',
      },
      keyframes: {
        marquee: {
          '0%': { transform: 'translateX(0%)' },
          '100%': { transform: 'translateX(-50%)' },
        }
      }
    },
  },
  plugins: [],
}

Hubungkan Tailwind ke CSS Utama (src/index.css): Ganti seluruh isi berkas src/index.css dengan baris berikut:

@tailwindcss base;
@tailwindcss components;
@tailwindcss utilities;

html {
  scroll-behavior: smooth;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

Salin Kode Utama: Ganti isi berkas src/App.jsx dengan seluruh kode React yang telah diperbarui sebelumnya.
Uji Coba di Server Lokal:
```
npm run dev
```
Buka http://localhost:5173 di browser Anda untuk memastikan landing page berjalan dengan sempurna.

🚀 Langkah 2: Opsi Deployment

Opsi A: Deploy ke Vercel (Tercepat & Sangat Direkomendasikan)

Vercel adalah platform terbaik untuk aplikasi berbasis Vite karena prosesnya yang instan dan memiliki sistem optimasi CDN otomatis.

Hubungkan proyek lokal Anda ke repositori GitHub, GitLab, atau Bitbucket.
Masuk ke Vercel Dashboard.
Klik tombol "Add New" > "Project".
Impor repositori GitHub proyek magang-dt Anda.
Pada bagian Framework Preset, pilih Vite.
Klik "Deploy". Proyek Anda akan aktif dalam waktu kurang dari 1 menit!

Opsi B: Deploy ke Netlify

Netlify sangat andal untuk mendistribusikan situs web statis (Single Page Application) dengan konfigurasi minimal.

Pastikan proyek Anda telah diunggah ke GitHub.
Masuk ke Netlify Dashboard.
Klik "Add new site" > "Import an existing project".
Pilih penyedia Git Anda (misal: GitHub) dan pilih repositori magang-dt.
Atur parameter build berikut:
- Build command: npm run build
- Publish directory: dist
Klik "Deploy site".

⚠️ Catatan Penting untuk React Router (jika digunakan nanti): Agar rute URL tidak menghasilkan error 404 saat halaman di-refresh, buat berkas bernama _redirects di dalam folder public/ dengan isi:
/* /index.html   200

Opsi C: Deploy ke GitHub Pages

Jika Anda ingin memanfaatkan hosting gratis langsung dari repositori GitHub organisasi Anda:

Instal package GitHub Pages di proyek Anda:
```
npm install gh-pages --save-dev
```
Tambahkan properti homepage di berkas package.json:
```
"homepage": "https://username_github.github.io/nama-repositori",
```
(Ganti username_github dan nama-repositori sesuai akun & repositori Anda).

Tambahkan skrip build & deploy pada bagian scripts di package.json:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d dist",
  ...
}

Jalankan perintah deploy:
```
npm run deploy
```

🌐 Langkah 3: Integrasi Domain Custom (`plusk.online`)

Jika Anda ingin mengarahkan landing page ini ke subdomain atau domain utama seperti https://plusk.online/ atau https://magang.plusk.online/:

Melalui Vercel / Netlify (Sangat Mudah):

Masuk ke pengaturan proyek di dashboard Vercel/Netlify Anda.
Pilih menu "Domains" / "Domain Management".
Masukkan domain/subdomain baru Anda (misal: magang.plusk.online).
Sistem akan meminta Anda untuk menambahkan konfigurasi DNS pada DNS Zone provider domain Anda:
- Untuk Subdomain: Buat record CNAME baru yang mengarah ke alamat host server hosting (contoh CNAME target Vercel: cname.vercel-dns.com).
- Untuk Domain Utama: Tambahkan record A yang mengarah ke IP Server Vercel/Netlify.

Melalui Server Mandiri (cPanel / VPS):

Jika Anda ingin melakukan build mandiri dan meletakkannya di hosting konvensional:

Jalankan proses kompilasi lokal:
```
npm run build
```
Perintah di atas akan menghasilkan folder bernama /dist yang berisi kode HTML, CSS, dan JS yang telah dikompresi secara maksimal (production-ready).
Kompres seluruh file di dalam folder /dist tersebut menjadi format .zip.
Unggah berkas .zip tersebut ke File Manager cPanel Anda pada direktori target (biasanya public_html atau direktori subdomain terkait).
Ekstrak berkas tersebut dan pastikan berkas index.html berada tepat di root direktori domain Anda.

🔒 Langkah 4: SSL & Security Checklist

HTTPS (SSL): Pastikan sertifikat SSL (Let's Encrypt / Cloudflare SSL) dalam kondisi aktif demi keamanan pertukaran data siswa. Jika menggunakan Vercel atau Netlify, SSL sudah terpasang secara otomatis dan gratis.
API Endpoint Security: Jika sistem ini nantinya dikoneksikan ke basis data eksternal (API SIAPkerja / Double Track), simpan seluruh kredensial API Key di dalam berkas .env dan jangan pernah mengunggah berkas .env tersebut ke repositori publik GitHub.

Kode

import React, { useState, useEffect } from 'react';

import {

Briefcase,

Users,

Building,

Award,

CheckCircle,

ChevronRight,

ChevronDown,

ChevronUp,

Shield,

BookOpen,

Compass,

Target,

MessageSquare,

ArrowRight,

Smartphone,

Search,

ClipboardList,

Tv,

TrendingUp,

FileCheck,

ChevronLeft,

UserCheck,

Globe,

MapPin,

ExternalLink,

Zap,

Star,

Sparkles,

Info,

Layers,

GraduationCap

} from 'lucide-react';

// HIGH FIDELITY INLINE SVG LOGO SMA DOUBLE TRACK

function DoubleTrackLogo({ className = "w-10 h-10" }) {

return (

{/* Blue main crescent wave */}

<path

d="M12 42 C 16 75, 48 83, 85 62 C 54 78, 22 68, 17 47 Z"

fill="#005BFF"

{/* Yellow support crescent wave */}

<path

d="M11 48 C 11 84, 38 94, 65 92 C 38 88, 22 78, 17 58 Z"

fill="#FFC928"

{/* Colorful sun/burst petals representing diverse skills */}

{/* 1. Purple Petal */}

{/* 2. Teal/Cyan Petal */}

{/* 3. Pink/Red Petal */}

{/* 4. Orange Petal */}

{/* 5. Green Petal */}

</svg>

);

}

// INLINE SVG LOGO DINAS PENDIDIKAN JAWA TIMUR

function LogoDispendikJatim({ className = "w-8 h-8" }) {

return (

</svg>

);

}

// INLINE SVG LOGO ITS

function LogoITS({ className = "w-8 h-8" }) {

return (

{/* Gear teeth */}

{[0, 45, 90, 135, 180, 225, 270, 315].map((angle, i) => (

<rect

key={i}

x="45"

y="2"

width="10"

height="12"

fill="#00C2FF"

transform={`rotate(${angle} 50 50)`}

rx="2"

))}

{/* Stylized flame / flower petals */}

</svg>

);

}

export default function App() {

const [activeTab, setActiveTab] = useState('beranda');

const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

const [activeStep, setActiveStep] = useState(0);

const [counts, setCounts] = useState({ participants: 0, partners: 0, satisfaction: 0, provinces: 0 });

const [faqOpen, setFaqOpen] = useState({});

const [currentTestimonial, setCurrentTestimonial] = useState(0);

const [simulatedFilter, setSimulatedFilter] = useState('Semua');

const [searchQuery, setSearchQuery] = useState('');

// Counter stats animation

useEffect(() => {

const duration = 2000;

const steps = 50;

const stepTime = duration / steps;

let step = 0;

const timer = setInterval(() => {

step++;

setCounts({

participants: Math.min(Math.floor((5000 / steps) * step), 5000),

partners: Math.min(Math.floor((1000 / steps) * step), 1000),

satisfaction: Math.min(Math.floor((95 / steps) * step), 95),

provinces: Math.min(Math.floor((34 / steps) * step), 34)

});

if (step >= steps) {

clearInterval(timer);

}

}, stepTime);

return () => clearInterval(timer);

}, []);

const toggleFaq = (index) => {

setFaqOpen(prev => ({ ...prev, [index]: !prev[index] }));

};

const stepsData = [

{

title: "Pendaftaran SIAPkerja",

desc: "Lakukan registrasi profil lengkap di ekosistem platform resmi Kementerian Ketenagakerjaan.",

icon: <UserCheck className="w-6 h-6" />,

detail: "Pastikan kelengkapan berkas CV, sertifikat kompetensi Double Track Jawa Timur, serta data portofolio terunggah dengan sempurna."

{

title: "Cari & Pilih Lowongan",

desc: "Temukan ratusan opsi posisi magang terbaik yang sesuai dengan spesialisasi keahlianmu.",

icon: <Search className="w-6 h-6" />,

detail: "Sistem filter pintar kami membantu mencocokkan minatmu dengan kebutuhan industri digital masa kini secara presisi."

{

title: "Seleksi & Interview",

desc: "Ikuti proses assessment kompetensi dasar serta wawancara langsung bersama tim HR mitra.",

icon: <ClipboardList className="w-6 h-6" />,

detail: "Dapatkan tips persiapan wawancara eksklusif dari mentor internal Magang DT agar kamu lebih percaya diri."

{

title: "Pelaksanaan Magang",

desc: "Mulai petualangan karir nyatamu di industri dengan pendampingan mentor profesional harian.",

icon: <Tv className="w-6 h-6" />,

detail: "Kerjakan proyek nyata yang berdampak langsung pada operasional perusahaan mitra selama durasi pemagangan."

{

title: "Evaluasi & Sertifikasi",

desc: "Penilaian kinerja berkala serta penerimaan Sertifikat Resmi kompetensi Double Track.",

icon: <Award className="w-6 h-6" />,

detail: "Sertifikat digital terverifikasi Dinas Pendidikan & ITS yang siap mendongkrak reputasi profesionalmu di pasar kerja global."

{

title: "Karir & Pengembangan",

desc: "Peluang rekrutmen langsung (pensiun magang) atau penyaluran ke jaringan korporasi utama.",

icon: <TrendingUp className="w-6 h-6" />,

detail: "Alumni Magang DT mendapatkan prioritas utama dalam bursa kerja ekosistem mitra nasional kami."

}

];

const lowonganMock = [

{ id: 1, title: 'Frontend Developer Intern', comp: 'BUMN Tech Division', category: 'IT & Software', loc: 'Surabaya (Hybrid)', logo: '⚡' },

{ id: 2, title: 'Digital Marketing Specialist', comp: 'Astra Digital Network', category: 'Marketing', loc: 'Malang (On-site)', logo: '🚗' },

{ id: 3, title: 'UI/UX Product Designer', comp: 'Telkom Indonesia', category: 'Design', loc: 'Bandung (Remote)', logo: '📞' },

{ id: 4, title: 'Data Analytics Associate', comp: 'Bank Mandiri Tech', category: 'Data Science', loc: 'Jakarta (On-site)', logo: '🏦' },

{ id: 5, title: 'Cyber Security Analyst', comp: 'Pertamina Digital', category: 'IT & Software', loc: 'Gresik (Hybrid)', logo: '🔥' },

{ id: 6, title: 'Content Creator Strategist', comp: 'Indosat Ooredoo Hutchison', category: 'Marketing', loc: 'Remote', logo: '📱' },

];

const testimonials = [

{

quote: "Magang DT mengubah cara pandang saya tentang dunia kerja. Berbekal keterampilan praktis dari SMA Double Track, saya langsung dihadapkan pada project scale-up nyata bersama senior developer yang sangat suportif.",

role: "Alumni Double Track & Now Fullstack Dev di Telkom",

avatar: "👨‍💻",

rating: 5,

badge: "Alumni Sukses"

{

quote: "Kualitas lulusan SMA Double Track di program Magang DT sangat memuaskan. Mereka memiliki kesiapan kerja yang matang, bermental tangguh, dan menguasai hard-skill digital mumpuni.",

role: "VP of People & Talent di Astra Digital Network",

avatar: "👩‍💼",

rating: 5,

badge: "HR Recruiter"

{

quote: "Kerja sama Dinas Pendidikan Jatim dan ITS menghasilkan modul magang yang sangat presisi. Peserta dibekali keahlian adaptif yang langsung siap pakai di industri modern.",

role: "Tenaga Ahli ITS & Supervisor Akademik Magang DT",

avatar: "👨‍🏫",

rating: 5,

badge: "Mentor Akademis"

}

];

const filteredJobs = lowonganMock.filter(job => {

const matchesFilter = simulatedFilter === 'Semua' || job.category === simulatedFilter;

const matchesSearch = job.title.toLowerCase().includes(searchQuery.toLowerCase()) || job.comp.toLowerCase().includes(searchQuery.toLowerCase());

return matchesFilter && matchesSearch;

});

return (

// BRANDING COLOR REWRITE: Using elegant modern light backdrop with clean corporate styling and rich shadows

{/* SOFT COMPLEMENTARY PASTEL BACKGROUND GLOWS FOR BRIGHT THEME */}

{/* Soft Modern Grid Pattern for Light Mode */}

</div>

{/* FLOATING LIGHT GLASSMORPHISM NAVBAR */}

{/* Logo Section - High Fidelity Integration */}

<div>

<div className="text-[10px] font-black tracking-widest text-[#FF8A00]">SMA DOUBLE TRACK</div>

MAGANG DT <span className="text-[9px] bg-[#005BFF]/10 text-[#005BFF] px-1.5 py-0.2 rounded-full border border-[#005BFF]/20">JATIM</span>

</div>

{/* Desktop Navigation - Darker Slate for High Contrast on Light Background */}

<a href="#beranda" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Beranda</a>

<a href="#tentang" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Tentang</a>

<a href="#keunggulan" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Keunggulan</a>

<a href="#alur" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Alur Magang</a>

<a href="#mitra" className="text-slate-600 hover:text-[#005BFF] font-bold text-sm transition-colors duration-200">Mitra</a>

</div>

{/* Action Buttons & Partner Logos */}

<span className="text-[9px] uppercase tracking-wider text-slate-500 font-bold block text-right">Diselenggarakan<br/>Oleh Jatim & ITS</span>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-5 py-2.5 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] text-white font-bold text-sm shadow-[0_4px_20px_rgba(0,91,255,0.25)] hover:shadow-[0_4px_25px_rgba(0,194,255,0.4)] hover:-translate-y-0.5 transition-all duration-200"

DAFTAR SEKARANG

</a>

</div>

{/* Mobile Menu Button */}

<button

onClick={() => setMobileMenuOpen(!mobileMenuOpen)}

className="lg:hidden p-2 text-slate-600 hover:text-slate-900 transition-colors duration-200"

aria-label="Toggle Menu"

</div>

</button>

</nav>

{/* Mobile Dropdown Menu */}

{mobileMenuOpen && (

<a onClick={() => setMobileMenuOpen(false)} href="#beranda" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Beranda</a>

<a onClick={() => setMobileMenuOpen(false)} href="#tentang" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Tentang</a>

<a onClick={() => setMobileMenuOpen(false)} href="#keunggulan" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Keunggulan</a>

<a onClick={() => setMobileMenuOpen(false)} href="#alur" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Alur Magang</a>

<a onClick={() => setMobileMenuOpen(false)} href="#mitra" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">Mitra</a>

<a onClick={() => setMobileMenuOpen(false)} href="#faq" className="text-slate-700 hover:text-[#005BFF] py-2 border-b border-slate-100 font-bold text-base">FAQ</a>

<span>Diselenggarakan oleh:</span>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="w-full text-center py-3 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] text-white font-bold text-sm shadow-lg hover:shadow-cyan-500/30"

DAFTAR SEKARANG

</a>

</div>

)}

</header>

{/* HERO SECTION */}

{/* Hero Left Content */}

{/* Organized by Badges - Showcasing official authority with the logo colors */}

<span>Dispendik Jatim</span>

</div>

<span>ITS Surabaya</span>

</div>

<span>Official Program</span>

</div>

MAGANG <span className="text-transparent bg-clip-text bg-gradient-to-r from-[#005BFF] via-[#00C2FF] to-[#FF8A00] drop-shadow-[0_2px_15px_rgba(0,194,255,0.15)]">DT</span>

</h1>

</div>

Program Pemagangan Nasional Berbasis Keterampilan Digital SMA Double Track

</h2>

“Dari Pendidikan → Pengalaman Nyata → Karir Gemilang”

</p>

Menghubungkan siswa dan alumni SMA Double Track dengan dunia industri secara nyata. Dapatkan pelatihan keterampilan mutakhir, pendampingan mentor andal, serta sertifikasi resmi dari Dinas Pendidikan Jatim & ITS.

</p>

</div>

{/* CTA Buttons */}

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="w-full sm:w-auto px-8 py-4 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] text-white font-black text-sm tracking-wide shadow-[0_6px_25px_rgba(0,91,255,0.25)] hover:shadow-[0_6px_30px_rgba(0,194,255,0.45)] hover:-translate-y-0.5 transition-all duration-200 flex items-center justify-center gap-2 group"

<span>DAFTAR SEKARANG</span>

</a>

href="#dashboard"

className="w-full sm:w-auto px-8 py-4 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-bold text-sm tracking-wide transition-all duration-200 flex items-center justify-center gap-2 shadow-sm"

<span>LIHAT LOWONGAN</span>

</a>

</div>

{/* Statistics Dashboard - Clean Bright Styled Counter */}

<div className="text-2xl sm:text-3xl font-black text-slate-900">{counts.participants.toLocaleString()}+</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Peserta Aktif</div>

</div>

<div className="text-2xl sm:text-3xl font-black text-[#005BFF]">{counts.partners.toLocaleString()}+</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Mitra Bisnis</div>

</div>

<div className="text-2xl sm:text-3xl font-black text-[#8BC34A]">{counts.satisfaction}%</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Puas Karir</div>

</div>

<div className="text-2xl sm:text-3xl font-black text-[#FF8A00]">{counts.provinces}</div>

<div className="text-xs text-slate-500 font-bold uppercase tracking-wide">Provinsi</div>

</div>

{/* Hero Right Content (Futuristic Light Dashboard Mockup) */}

{/* Fake Browser Chrome Top Bar */}

</div>

portal.magangdt.siapkerja.go.id

</div>

</div>

{/* Simulated Live Portal Content */}

{/* Search Bar Simulation */}

<span className="text-xs font-bold uppercase tracking-wider text-slate-700">Pusat Lowongan Magang DT</span>

Live Database

</span>

</div>

<input

type="text"

value={searchQuery}

onChange={(e) => setSearchQuery(e.target.value)}

placeholder="Cari lowongan magang..."

className="w-full text-xs bg-slate-50 border border-slate-200 rounded-lg pl-10 pr-4 py-3 text-slate-800 placeholder-slate-450 focus:outline-none focus:border-[#005BFF] transition-colors"

</div>

{/* Categories */}

{['Semua', 'IT & Software', 'Marketing', 'Design', 'Data Science'].map((cat) => (

<button

key={cat}

onClick={() => setSimulatedFilter(cat)}

className={`px-3 py-1.5 rounded-lg text-xs font-bold transition-all duration-200 ${

simulatedFilter === cat

? 'bg-[#005BFF] text-white shadow-[0_4px_12px_rgba(0,91,255,0.25)]'

: 'bg-slate-100 text-slate-600 hover:text-slate-900 hover:bg-slate-200/60'

}`}

{cat}

</button>

))}

</div>

{/* Simulated Job Cards list - Light Mode styling */}

{filteredJobs.length > 0 ? (

filteredJobs.map((job) => (

<div>

<h4 className="text-xs font-black text-slate-800 group-hover:text-[#005BFF] transition-colors">{job.title}</h4>

<span className="text-[9px] bg-[#005BFF]/10 text-[#005BFF] px-1.5 py-0.5 rounded font-semibold">{job.category}</span>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-3 py-1.5 bg-[#005BFF]/10 text-[#005BFF] text-[10px] font-bold rounded hover:bg-[#005BFF] hover:text-white transition-colors flex items-center gap-1 shadow-sm"

Lamar <ExternalLink className="w-3 h-3" />

</a>

</div>

))

) : (

Tidak menemukan lowongan yang cocok dengan kata kunci.

</div>

)}

</div>

{/* Floating Micro UI Widgets - Bright & Colored */}

<div className="text-xs font-black text-[#005BFF]">⚡ Skill Meningkat</div>

<div className="text-[9px] text-slate-500 font-semibold">Modul Praktis ITS</div>

</div>

<div className="text-xs font-black text-purple-700">💼 Pengalaman Nyata</div>

<div className="text-[9px] text-slate-500 font-semibold">Proyek Mitra Industri</div>

</div>

<div className="text-xs font-black text-[#FF8A00]">🚀 Karir Cemerlang</div>

<div className="text-[9px] text-slate-500 font-semibold">Sertifikasi & Kerja</div>

</div>

</section>

{/* SECTION APA ITU MAGANG DT */}

<h2 className="text-xs font-bold tracking-widest text-[#005BFF] uppercase">KOLABORASI DIGITAL JAWA TIMUR</h2>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Apa Itu MAGANG DT?</h3>

MAGANG DT adalah program pemagangan nasional berbasis keterampilan digital yang dikembangkan secara integratif oleh tim ahli SMA Double Track Jawa Timur bekerja sama dengan platform SIAPkerja dan ITS Surabaya.

</p>

</div>

{/* Card 1 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Platform Resmi Pemagangan</h4>

Diintegrasikan langsung dengan SIAPkerja untuk menjamin kredibilitas hukum, kemudahan administrasi, serta ketaatan regulasi.

</p>

</div>

{/* Card 2 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Pusat Lowongan Terpadu</h4>

Akses satu pintu menuju ratusan lowongan kerja magang berkualitas tinggi dari korporasi terkemuka dan startup nasional.

</p>

</div>

{/* Card 3 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Kurikulum Terapan</h4>

Pembekalan kompetensi intensif dirancang langsung oleh akademisi ITS guna menyelaraskan keterampilan siswa dengan kebutuhan riil industri.

</p>

</div>

{/* Card 4 */}

</div>

<h4 className="text-lg font-bold text-slate-900 mb-2">Ekosistem Karir Berkelanjutan</h4>

Membantu penyusunan portofolio, prioritas bursa kerja khusus, hingga peluang rekrutmen langsung pasca program selesai.

</p>

</div>

{/* Semi isometric design infographic preview with light branding colors */}

<h4 className="text-2xl font-black text-slate-900">Hub Utama Transformasi Pendidikan Ke Karir Nyata</h4>

Siswa dan alumni SMA Double Track tidak lagi kesulitan beradaptasi dengan dunia industri asli. Melalui program kolaboratif ini, seluruh proses peningkatan kapasitas keterampilan, seleksi kualifikasi, penugasan proyek, hingga kepatuhan hukum ditangani dalam ekosistem digital yang andal dan transparan.

</p>

<span>Sistem monitoring tugas (task tracker) terintegrasi untuk memantau kemajuan magang siswa secara real-time.</span>

</div>

<span>Sistem penilaian berskala industri (KPI based evaluation) yang divalidasi oleh ITS.</span>

</div>

{/* Visual hologram infographic container - REPLACED WITH HIGH-FIDELITY USER IMAGE */}

{/* Decorative subtle glows around image */}

{/* Frame Browser UI Bar */}

</div>

<span className="text-[10px] font-black text-slate-400 tracking-wider uppercase">Magang DT Engine</span>

</div>

{/* Core Engine Screenshot Loader */}

<img

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNMrL1pOOqyPk1PNN4dYudEPStb5VMnegVmA6voXKxBZiCBffWy7aCv8YHdjxOKfYBOutkRw3Wjzg8xoiumVlvuwEVSqGrqtXOA7-jCJSHQOpxgR5UeZjHsX-OkqoI7-_DleedDPGKO0mFQgFzknAEHwlsowmw6lwMvsKnbfG-HxlMnl43XqWkhlB3LV82/s642/Screenshot_409.png"

alt="Magang DT Core Engine"

className="w-full h-auto object-cover rounded-2xl group-hover:scale-[1.015] transition-transform duration-500 ease-out"

onError={(e) => {

// Fallback visual standard if remote hotlinking has blocks

e.target.onerror = null;

e.target.src = "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=500&q=80";

}}

{/* Glassmorphic Overlay Panel at the bottom of Image */}

<div>

<p className="text-xs font-black text-slate-800 leading-none">Core Engine DT</p>

<p className="text-[9px] text-slate-500 font-bold mt-1">Terintegrasi SIAPkerja & ITS</p>

</div>

AKTIF

</span>

</div>

</section>

{/* SECTION TUJUAN MAGANG DT */}

{/* Quote & Description Column */}

<span className="text-xs font-bold text-[#FF8A00] uppercase tracking-widest block">TUJUAN UTAMA</span>

“Butuh pengalaman untuk kerja, tapi butuh kerja untuk mendapatkan pengalaman.”

</blockquote>

Sebuah tantangan transisi karir bagi pemuda Indonesia yang kini diselesaikan secara revolusioner oleh Magang DT. Kami bertekad menyajikan jalur persiapan karir tercepat melalui kualifikasi kurikulum berorientasi masa depan yang didukung penuh oleh Dinas Pendidikan Jawa Timur.

</p>

INFORMASI KREDIBILITAS

</div>

Setiap materi kurikulum diselaraskan langsung dengan SKKNI (Standar Kompetensi Kerja Nasional Indonesia) dan kebutuhan khusus dari mitra industri strategis SMA Double Track.

</p>

</div>

{/* Benefits Grid Column */}

<h4 className="text-base font-bold text-slate-900">Pengalaman Industri Nyata</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Melibatkan diri langsung dalam rantai operasional industri sesungguhnya untuk membangun cara kerja profesional yang taktis.</p>

</div>

<h4 className="text-base font-bold text-slate-900">Pelatihan Kompetensi Terarah</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Peningkatan kecakapan operasional berbasis modul praktis terkini di bidang IT, media, administrasi, kreatif, dan teknologi.</p>

</div>

<h4 className="text-base font-bold text-slate-900">Mentoring Profesional</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Sesi review tatap muka berkala dengan praktisi berpengalaman untuk mengasah kemampuan pemecahan masalah secara terukur.</p>

</div>

<h4 className="text-base font-bold text-slate-900">Sertifikat Resmi Double Track</h4>

<p className="text-xs text-slate-500 leading-relaxed font-medium">Sertifikat resmi dari Dinas Pendidikan Jatim dan ITS yang bernilai tinggi dan diakui luas oleh ratusan korporasi mitra.</p>

</div>

</section>

{/* SECTION 5 KEUNGGULAN MAGANG DT */}

<span className="text-xs font-bold text-[#FF8A00] tracking-widest uppercase block">MENGAPA KAMI BERBEDA?</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">5 Keunggulan MAGANG DT</h3>

Menghadirkan perlindungan hukum, standardisasi akademis ITS, serta percepatan masa depan karir secara lebih baik dibandingkan program pemagangan konvensional lainnya.

</p>

</div>

{/* Keunggulan 1 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-[#005BFF] transition-colors">1. LEGAL DAN DILINDUNGI REKOR RESMI KEMNAKER</h4>

Setiap keikutsertaan peserta dijamin penuh oleh regulasi hukum pemagangan ketenagakerjaan nasional. Proses yang aman, transparan, dan terstruktur bagi keselamatan serta kenyamanan belajar peserta.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-blue-500/10 text-[#005BFF] shrink-0 border border-blue-500/20">Terlindungi</span>

</div>

{/* Keunggulan 2 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-cyan-600 transition-colors">2. KURIKULUM BERBASIS KOMPETENSI RIIL & DIUJI ITS</h4>

Materi dan program pembelajaran dirancang oleh pakar teknologi startup bersama akademisi Institut Teknologi Sepuluh Nopember (ITS) untuk memastikan keselarasan penuh dengan kebutuhan industri masa kini.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-cyan-500/10 text-cyan-700 shrink-0 border border-cyan-500/20">Tervalidasi</span>

</div>

{/* Keunggulan 3 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-[#FF8A00] transition-colors">3. AKSES PERUSAHAAN BESAR & MITRA BUMN</h4>

Akses jalur khusus tanpa hambatan birokrasi berbelit untuk melamar kerja magang pada jajaran institusi BUMN, korporasi terkemuka, dan agensi kreatif di seluruh Indonesia.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-[#FFC928]/10 text-amber-700 shrink-0 border border-[#FFC928]/30">Prioritas</span>

</div>

{/* Keunggulan 4 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-purple-600 transition-colors">4. MENTORSHIP PROFESIONAL DAN BERKALA</h4>

Setiap peserta mendapatkan arahan langsung melalui sesi bimbingan mingguan (coaching) guna memantau perkembangan, memperbaiki kendala kerja, dan melesatkan kapasitas profesional.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-purple-500/10 text-purple-700 shrink-0 border border-purple-500/20">Terbimbing</span>

</div>

{/* Keunggulan 5 */}

</div>

<div>

<h4 className="text-lg font-black text-slate-900 group-hover:text-[#8BC34A] transition-colors">5. SERTIFIKAT RESMI DINAS PENDIDIKAN JATIM & ITS</h4>

Sertifikat resmi kelulusan bertanda tangan pimpinan lembaga pendidikan tinggi dan daerah, menjamin portofolio digital yang valid di tingkat nasional maupun global.

</p>

</div>

<span className="text-xs font-bold px-3 py-1 rounded-full bg-emerald-500/10 text-[#8BC34A] shrink-0 border border-emerald-500/20">Kredibel</span>

</div>

</section>

{/* SECTION ALUR EKOSISTEM MAGANG DT */}

<span className="text-xs font-bold text-[#FF8A00] tracking-widest uppercase block">ALUR PEMAGANGAN DIGITAL</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Alur Ekosistem MAGANG DT</h3>

Peta jalan transisi karir yang dirancang secara transparan dan sistematis untuk mengantarkan siswa SMA Double Track menuju industri kerja nyata.

</p>

</div>

{/* Interactive Steps Display */}

{/* Step Selector List */}

{stepsData.map((step, idx) => (

<button

key={idx}

onClick={() => setActiveStep(idx)}

className={`w-full text-left p-4 rounded-xl border transition-all duration-200 flex items-center gap-4 ${

activeStep === idx

? 'bg-gradient-to-r from-[#005BFF]/5 to-cyan-500/5 border-[#00C2FF] text-[#005BFF] shadow-lg'

: 'bg-white border-slate-200 text-slate-500 hover:text-slate-800 hover:border-slate-350'

}`}

<div className={`p-2.5 rounded-lg border transition-colors ${

activeStep === idx

? 'bg-[#005BFF] text-white border-[#005BFF]'

: 'bg-slate-50 text-slate-400 border-slate-200'

}`}>

{step.icon}

</div>

<span className="text-[10px] uppercase font-bold text-slate-400 block">Langkah 0{idx + 1}</span>

<span className="text-sm font-bold block text-slate-800">{step.title}</span>

</div>

</button>

))}

</div>

{/* Active Step Details Panel */}

Fase Aktif Seleksi

</span>

<span className="text-xs text-slate-500 font-bold">Langkah ke-{activeStep + 1} dari 6</span>

</div>

<h4 className="text-3xl font-black text-slate-900">{stepsData[activeStep].title}</h4>

{stepsData[activeStep].desc}

</p>

</div>

Detail Pelaksanaan & Output

</h5>

{stepsData[activeStep].detail}

</p>

</div>

{/* Ecosystem circular visualization */}

<div className="text-[10px] uppercase tracking-wider text-slate-400 font-bold">Ekosistem Berkelanjutan</div>

<div className="text-xs text-[#005BFF] font-bold italic">“Pengalaman → Karir → Berbagi → Tumbuh Bersama”</div>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-5 py-2.5 bg-gradient-to-r from-[#005BFF] to-[#00C2FF] hover:from-cyan-500 hover:to-blue-600 text-white font-bold text-xs rounded-xl shadow-md transition-all"

Daftar Magang Sekarang

</a>

</div>

</section>

{/* SECTION SIAPA YANG BISA MENGIKUTI & PERSYARATAN */}

{/* Row: Target Audience Cards */}

<span className="text-xs font-bold text-[#005BFF] uppercase tracking-widest block">SIAPA YANG BISA MENGIKUTI?</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Target Peserta Magang DT</h3>

Program ini didesain inklusif untuk membuka peluang seluas-luasnya bagi siswa dan alumni berbakat dari berbagai daerah.

</p>

</div>

{/* Fresh Graduate Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-[#005BFF] transition-colors">Fresh Graduate</h4>

Lulusan baru SMA/SMK/MA sederajat, khususnya alumni program Double Track Jatim yang ingin melangkah ke dunia industri.

</p>

</div>

{/* Mahasiswa Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-[#005BFF] transition-colors">Mahasiswa</h4>

Siswa didik aktif tingkat akhir yang memerlukan konversi mata pelajaran wajib berbasis magang kerja nyata bersertifikat.

</p>

</div>

{/* Career Switcher Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-amber-600 transition-colors">Career Switcher</h4>

Alumni yang ingin beralih arah dan meningkatkan keahlian baru di bidang startup digital, kreatif, maupun teknologi modern.

</p>

</div>

{/* Pencari Kerja Umum Card */}

<h4 className="text-base font-black text-slate-900 group-hover:text-purple-600 transition-colors">Pencari Kerja Umum</h4>

Pemuda berkewarganegaraan Indonesia yang membutuhkan portofolio solid untuk meningkatkan daya saing di bursa karir nasional.

</p>

</div>

{/* Row: Requirements Checklist & Steps */}

{/* Checklist Requirements */}

<span className="text-xs font-bold text-[#005BFF] uppercase tracking-widest block">PERSYARATAN UMUM</span>

<h4 className="text-2xl sm:text-3xl font-black text-slate-900">Apakah Anda Memenuhi Syarat?</h4>

Kualifikasi dirancang sederhana guna membuka akses selebar mungkin bagi kemajuan keterampilan talenta muda.

</p>

<span className="text-sm font-bold text-slate-700">Warga Negara Indonesia (WNI)</span>

</div>

<span className="text-sm font-bold text-slate-700">Berusia minimal 16 tahun pada saat mendaftar</span>

</div>

<span className="text-sm font-bold text-slate-700">Memiliki akun resmi di platform SIAPkerja Kemnaker</span>

</div>

<span className="text-sm font-bold text-slate-700">Sehat jasmani dan rohani demi kelancaran program</span>

</div>

<span className="text-sm font-bold text-slate-700">Berkomitmen menyelesaikan seluruh rangkaian program magang</span>

</div>

{/* Quick Registration Steps */}

<span className="text-xs font-bold text-[#FF8A00] uppercase tracking-widest block">CARA MENDAFTAR</span>

<h4 className="text-2xl sm:text-3xl font-black text-slate-900">3 Langkah Mudah Bergabung</h4>

Proses registrasi dilakukan sepenuhnya secara online secara cepat, efisien, dan otomatis.

</p>

</div>

<div>

<h5 className="text-base font-bold text-slate-900">Buat Akun SIAPkerja</h5>

Registrasikan data identitas pribadimu di siapkerja.kemnaker.go.id lalu pastikan verifikasi email profil berhasil tuntas.

</p>

</div>

</div>

<div>

<h5 className="text-base font-bold text-slate-900">Cari Lowongan Magang DT</h5>

Masuk ke halaman direktori pencarian lowongan, filter kategori magang digital Double Track yang kamu gemari.

</p>

</div>

</div>

<div>

<h5 className="text-base font-bold text-slate-900">Lamar & Pantau Posisi</h5>

Klik tombol lamar pada posisi pilihanmu lalu pantau dashboard secara berkala untuk panggilan tes wawancara.

</p>

</div>

</section>

{/* SECTION MANFAAT MENGIKUTI */}

<span className="text-xs font-bold text-[#FF8A00] tracking-widest uppercase block">APA YANG ANDA DAPATKAN?</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Manfaat Mengikuti Magang DT</h3>

Setiap partisipan mendapatkan hak istimewa yang berfokus pada percepatan kompetensi dan peningkatan nilai tawar karir profesional.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Pengalaman Kerja Profesional</h4>

Rasakan atmosfer sesungguhnya bekerja di korporasi nasional, pahami etos kerja profesional secara komprehensif.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Peningkatan Keterampilan Industri</h4>

Asah kemampuan teknismu menggunakan perangkat dan alur kerja standar industri terkini dibimbing oleh praktisi ahli.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Networking Profesional</h4>

Bangun jejaring pertemanan bernilai tinggi bersama para pemimpin bisnis, kolega seprofesi, dan mentor berpengalaman.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Sertifikat Nasional Dinas Pendidikan & ITS</h4>

Sertifikat kredibel yang disahkan oleh akademisi ITS dan Dinas Pendidikan Jawa Timur sebagai portofolio orisinal.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Peluang Direkrut Perusahaan</h4>

Kesempatan emas menunjukkan bakat terbaik untuk langsung direkrut sebagai karyawan tetap setelah masa pemagangan usai.

</p>

</div>

<h4 className="text-base font-bold text-slate-900">Portofolio Kerja Unggulan</h4>

Isi lembar portofolio atau CV Anda dengan kontribusi proyek riil berskala nasional untuk menaikkan reputasi karir.

</p>

</div>

</section>

{/* SECTION MITRA PERUSAHAAN */}

<span className="text-xs font-bold text-[#005BFF] tracking-widest uppercase block">KORPORASI & BUMN MITRA</span>

<h3 className="text-2xl sm:text-3xl font-black text-slate-900">Telah Dipercaya Oleh 1000+ Mitra Bisnis</h3>

<p className="text-xs sm:text-sm text-slate-500 font-semibold">Jaringan penempatan magang kami tersebar di berbagai sektor industri strategis tanah air.</p>

</div>

{/* Simulated Infinite Auto Scroll Carousel - Colored styled items */}

🇮🇩 <span className="text-sm">BUMN Tech Division</span>

</div>

📞 <span className="text-sm">Telkom Indonesia</span>

</div>

🏦 <span className="text-sm">Bank Mandiri</span>

</div>

🔥 <span className="text-sm">Pertamina Digital</span>

</div>

🚗 <span className="text-sm">Astra Internasional</span>

</div>

🏦 <span className="text-sm">BRI Tech Hub</span>

</div>

</section>

{/* SECTION TESTIMONI */}

<span className="text-xs font-bold text-[#005BFF] tracking-widest uppercase block">KATA ALUMNI & HR</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900">Kisah Sukses Pengalaman Magang DT</h3>

Ulasan jujur dari alumni berprestasi, perwakilan human resource perusahaan mitra, serta mentor profesional.

</p>

</div>

{testimonials[currentTestimonial].badge}

</span>

</div>

{testimonials[currentTestimonial].quote}

</p>

{testimonials[currentTestimonial].avatar}

</span>

<div>

<h4 className="text-base font-black text-slate-900">{testimonials[currentTestimonial].name}</h4>

<p className="text-xs text-slate-500 font-bold">{testimonials[currentTestimonial].role}</p>

</div>

{[...Array(testimonials[currentTestimonial].rating)].map((_, i) => (

))}

</div>

{/* Testimonial Nav Arrows */}

<button

onClick={() => setCurrentTestimonial(prev => prev === 0 ? testimonials.length - 1 : prev - 1)}

className="p-1.5 rounded-lg bg-slate-50 border border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100"

</button>

<button

onClick={() => setCurrentTestimonial(prev => prev === testimonials.length - 1 ? 0 : prev + 1)}

className="p-1.5 rounded-lg bg-slate-50 border border-slate-200 text-slate-500 hover:text-slate-900 hover:bg-slate-100"

</button>

</div>

</section>

{/* SECTION FAQ */}

{/* FAQ Left Column */}

<span className="text-xs font-bold text-[#FF8A00] uppercase tracking-widest block">PERTANYAAN UMUM</span>

<h3 className="text-3xl sm:text-4xl font-black text-slate-900 leading-tight">Frequently Asked Questions (FAQ)</h3>

Kami merangkum sejumlah jawaban cepat atas pertanyaan populer yang sering diajukan oleh calon peserta program Magang DT.

</p>

<div>

<h4 className="text-xs font-black text-slate-800">Ada kendala teknis?</h4>

<p className="text-[11px] text-slate-500 mt-1 font-semibold">Tim Helpdesk Double Track siap melayani konsultasi interaktif harian.</p>

</div>

{/* FAQ Accordion List Column */}

{[

{

q: "Apa itu program MAGANG DT?",

a: "MAGANG DT adalah program kerja magang bersertifikat resmi berskala nasional yang dikembangkan khusus oleh tim SMA Double Track Jawa Timur bekerja sama dengan platform SIAPkerja Kemnaker RI dan diuji oleh Institut Teknologi Sepuluh Nopember (ITS)."

{

q: "Apakah pendaftaran program ini dikenakan biaya?",

a: "Sama sekali tidak. Seluruh tahapan registrasi, pelatihan kompetensi pendukung, pembekalan mentor, hingga penempatan magang bersifat 100% gratis tanpa dipungut biaya apapun."

{

q: "Berapa lama durasi pelaksanaan magang?",

a: "Durasi pemagangan bervariasi bergantung pada kebutuhan dan program dari masing-masing perusahaan mitra, umumnya berlangsung selama 3 hingga 6 bulan."

{

q: "Apakah peserta akan mendapatkan sertifikasi resmi?",

a: "Ya. Setiap peserta yang menyelesaikan program dengan kriteria baik akan mendapatkan Sertifikat Kompetensi Kerja Resmi yang dikeluarkan bersama oleh SMA Double Track, Dinas Pendidikan Jawa Timur, dan ITS."

{

q: "Bagaimana cara melakukan registrasi?",

a: "Cukup kunjungi tautan pendaftaran di portal resmi plusk.online untuk mengisi form kesiapan kerja, lalu pastikan Anda melengkapi akun profil di portal SIAPkerja Kemnaker."

}

].map((item, idx) => (

<div

key={idx}

className="bg-slate-50/80 border border-slate-200 rounded-xl overflow-hidden transition-all duration-300 hover:bg-slate-50"

<button

onClick={() => toggleFaq(idx)}

className="w-full p-5 text-left flex items-center justify-between gap-4 font-bold text-sm sm:text-base text-slate-800 hover:text-[#005BFF] transition-colors"

{faqOpen[idx] ? <ChevronUp className="w-5 h-5 text-[#005BFF] shrink-0" /> : <ChevronDown className="w-5 h-5 text-slate-400 shrink-0" />}

</button>

{faqOpen[idx] && (

{item.a}

</div>

)}

</div>

))}

</div>

</section>

{/* FUTURISTIC BRIGHT NEON FOOTER */}

{/* Glow Effects in Footer reflecting DT sun colors */}

{/* Main Footer Big Call to Action (CTA) */}

<span className="text-xs font-bold tracking-widest text-[#005BFF] uppercase block">DARI JAWA TIMUR UNTUK INDONESIA</span>

MAGANG HARI INI, SUKSES UNTUK NEGERI!

</h3>

Persiapkan masa depan karir digital Anda secara nyata di bawah bimbingan akademisi dan industri terbaik nasional.

</p>

</div>

href="https://www.plusk.online/"

target="_blank"

rel="noopener noreferrer"

className="px-8 py-4 rounded-xl bg-gradient-to-r from-[#005BFF] to-[#00C2FF] hover:from-cyan-500 hover:to-blue-600 text-white font-black text-sm sm:text-base shadow-[0_6px_25px_rgba(0,194,255,0.25)] hover:shadow-[0_6px_30px_rgba(0,194,255,0.45)] transition-all duration-200 flex items-center gap-2 group"

<span>DAFTAR & BANGUN KARIRMU SEKARANG!</span>

</a>

{/* URL Link and QR display simulation */}

www.plusk.online

</a>

</div>

Pendaftaran Online Dibuka Secara Nasional

</div>

{/* Quick Micro Icons inside big CTA */}

<span className="text-xs sm:text-sm font-bold text-slate-700 block">💼 Pengalaman Nyata</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">⚡ Skill Meningkat</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">👨‍🏫 Mentor Profesional</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">🏅 Sertifikat Resmi</span>

</div>

<span className="text-xs sm:text-sm font-bold text-slate-700 block">🚀 Karir Cemerlang</span>

</div>

{/* Bottom Footer Details */}

{/* Logo and Info */}

<div>

<div className="text-xs font-bold tracking-widest text-[#FF8A00]">SMA DOUBLE TRACK</div>

<div className="text-sm font-black text-slate-900 tracking-tight -mt-1">MAGANG DT</div>

</div>

Program pemagangan nasional berbasis keahlian teknologi digital guna menyiapkan masa depan lulusan yang mandiri, adaptif, tangguh, dan kompetitif.

</p>

{/* Official Organizers Logos */}

<div className="text-[10px] font-bold text-slate-400 uppercase tracking-wider">Diselenggarakan Oleh:</div>

<span className="text-[10px] font-bold text-slate-600">Dinas Pendidikan Jawa Timur</span>

<span className="text-[10px] font-bold text-slate-600">ITS Surabaya</span>

</div>

</div>

{/* Quick Links */}

<h4 className="text-sm font-black text-slate-900 uppercase tracking-wider">Tautan Cepat</h4>

<a href="#beranda" className="text-slate-500 hover:text-[#005BFF] transition-colors">Halaman Beranda</a>

<a href="#tentang" className="text-slate-500 hover:text-[#005BFF] transition-colors">Mengenal Program</a>

<a href="#keunggulan" className="text-slate-500 hover:text-[#005BFF] transition-colors">Keunggulan Utama</a>

<a href="#alur" className="text-slate-500 hover:text-[#005BFF] transition-colors">Alur Sistem Karir</a>

<a href="#mitra" className="text-slate-500 hover:text-[#005BFF] transition-colors">Mitra Korporat</a>

<a href="https://www.plusk.online/" target="_blank" rel="noopener noreferrer" className="text-slate-500 hover:text-[#005BFF] transition-colors">Portal Pendaftaran</a>

</div>

{/* Contact Info */}

<h4 className="text-sm font-black text-slate-900 uppercase tracking-wider">Hubungi Kami</h4>

<p>📍 Kantor Pusat Double Track Indonesia - Jakarta & Surabaya, Jawa Timur</p>

<p>📧 helpdesk@doubletrack.or.id</p>

<p>📞 +62 811-2345-6789 (Senin - Jumat 08:00 - 17:00 WIB)</p>

</div>

{/* Verification Barcode Mockup */}

<h4 className="text-xs font-black text-slate-900 uppercase tracking-wider text-center md:text-left">Pindai QR Pendaftaran</h4>

{/* Simulated QR Code SVG */}

</svg>

</div>