diff --git a/index.php b/index.php
new file mode 100644
index 0000000..3be671c
--- /dev/null
+++ b/index.php
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGIS Dashboard - Johanes Satria Christio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+    </style>
+</head>
+<body class="bg-slate-900 text-white min-h-screen flex flex-col justify-between">
+
+    <header class="text-center pt-16 px-4">
+        <span class="text-teal-400 text-xs font-bold tracking-widest uppercase bg-teal-400/10 px-4 py-1.5 rounded-full">Tugas Mandiri SIG Kelas B</span>
+        <h1 class="text-4xl md:text-5xl font-extrabold mt-4 tracking-tight">
+            WebGIS <span class="text-transparent bg-clip-text bg-gradient-to-r from-teal-400 to-indigo-400">Dashboard</span>
+        </h1>
+        <p class="text-slate-400 mt-2 max-w-md mx-auto text-sm md:text-base">
+            Kumpulan berkas proyek Sistem Informasi Geografis terintegrasi milik Johanes Satria Christio.
+        </p>
+    </header>
+
+    <main class="max-w-5xl w-full mx-auto px-6 my-12">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+
+            <div class="bg-slate-800/50 border border-slate-700/50 p-6 rounded-3xl flex flex-col justify-between hover:border-teal-500/50 transition-all duration-300 shadow-xl group">
+                <div>
+                    <div class="w-12 h-12 bg-teal-500/10 rounded-2xl flex items-center justify-center text-teal-400 mb-4 group-hover:bg-teal-500 group-hover:text-slate-950 transition-all duration-300">
+                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">WebGIS SPBU</h3>
+                    <p class="text-slate-400 text-sm leading-relaxed">Manajemen spasial titik objek (Point) lokasi SPBU Kota Pontianak lengkap dengan kontrol Layer Groups.</p>
+                </div>
+                <a href="Projek SPBU 24 JAM/" class="mt-6 inline-flex items-center justify-center bg-teal-500 text-slate-950 text-sm font-semibold py-2.5 px-4 rounded-xl hover:bg-teal-400 transition-all text-center">Buka Aplikasi</a>
+            </div>
+
+            <div class="bg-slate-800/50 border border-slate-700/50 p-6 rounded-3xl flex flex-col justify-between hover:border-indigo-500/50 transition-all duration-300 shadow-xl group">
+                <div>
+                    <div class="w-12 h-12 bg-indigo-500/10 rounded-2xl flex items-center justify-center text-indigo-400 mb-4 group-hover:bg-indigo-500 group-hover:text-slate-950 transition-all duration-300">
+                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 4L9 7"/></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Manajemen Jalan</h3>
+                    <p class="text-slate-400 text-sm leading-relaxed">Manajemen data garis (Line/Polyline) infrastruktur jalan dengan klasifikasi warna status dan hitung panjang otomatis.</p>
+                </div>
+                <a href="Projek Jalan/" class="mt-6 inline-flex items-center justify-center bg-indigo-500 text-white text-sm font-semibold py-2.5 px-4 rounded-xl hover:bg-indigo-400 transition-all text-center">Buka Aplikasi</a>
+            </div>
+
+            <div class="bg-slate-800/50 border border-slate-700/50 p-6 rounded-3xl flex flex-col justify-between hover:border-rose-500/50 transition-all duration-300 shadow-xl group">
+                <div>
+                    <div class="w-12 h-12 bg-rose-500/10 rounded-2xl flex items-center justify-center text-rose-400 mb-4 group-hover:bg-rose-500 group-hover:text-slate-950 transition-all duration-300">
+                        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z"/></svg>
+                    </div>
+                    <h3 class="text-xl font-bold mb-2">Parsil Tanah</h3>
+                    <p class="text-slate-400 text-sm leading-relaxed">Manajemen area bidang (Polygon) kepemilikan kavling tanah menggunakan fungsi kalkulasi luas Shoelace formula.</p>
+                </div>
+                <a href="Projek Tanah/manajemen_parsil/" class="mt-6 inline-flex items-center justify-center bg-rose-500 text-white text-sm font-semibold py-2.5 px-4 rounded-xl hover:bg-rose-400 transition-all text-center">Buka Aplikasi</a>
+            </div>
+
+        </div>
+    </main>
+
+    <footer class="text-center pb-8 text-xs text-slate-600">
+        © 2026 WebGIS Dashboard - Johanes Satria Christio (D1041231076)
+    </footer>
+
+</body>
+</html>
\ No newline at end of file
