<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal WebGIS Terpadu</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <style>
    body {
        font-family: 'Poppins', sans-serif;

        background:
            linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
            radial-gradient(circle at top right, #dbeafe 0%, transparent 30%),
            radial-gradient(circle at bottom left, #e0f2fe 0%, transparent 30%),
            #f8fafc;

        background-size:
            40px 40px,
            40px 40px,
            auto,
            auto,
            auto;
    }

    .card-hover {
        transition: all .3s ease;
    }

    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    }
    </style>
</head>

<body>

    <div class="min-h-screen">

        <section class="py-14">
            <div class="max-w-7xl mx-auto px-6">

                <!-- Header -->
                <div class="text-center mb-12">

                    <h1 class="text-4xl md:text-5xl font-bold text-slate-800">
                        Portal WebGIS Terpadu
                    </h1>

                    <p class="mt-4 text-slate-600 text-lg">
                        Pilih salah satu aplikasi WebGIS untuk membuka peta interaktif.
                    </p>

                    <div class="mt-6 flex justify-center">
                        <div class="bg-white px-6 py-3 rounded-2xl shadow border border-slate-200">
                            <p class="text-slate-700 font-medium">
                                Clara Oxana Azalia
                            </p>
                            <p class="text-slate-500 text-sm">
                                NIM D1041231051
                            </p>
                        </div>
                    </div>

                </div>

                <!-- Hero -->
                <div class="bg-white rounded-3xl shadow-lg p-8 border border-slate-100 mb-10">

                    <div class="flex flex-col md:flex-row items-center gap-8">

                        <div class="flex-1">

                            <h2 class="text-2xl font-semibold text-slate-800 mb-3">
                                Sistem Informasi Geospasial Terintegrasi
                            </h2>

                            <p class="text-slate-600 leading-relaxed">
                                Portal WebGIS Terpadu merupakan sistem yang
                                mengintegrasikan beberapa aplikasi WebGIS dalam
                                satu platform untuk memudahkan akses,
                                visualisasi, dan analisis data spasial secara
                                interaktif.
                            </p>

                            <div class="mt-4 flex flex-wrap gap-2">

                                <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">
                                    WebGIS
                                </span>

                                <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm">
                                    Spatial Analysis
                                </span>

                                <span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">
                                    Interactive Mapping
                                </span>

                            </div>

                        </div>

                        <div class="text-8xl">
                            🌎
                        </div>

                    </div>

                </div>

                <!-- Statistik -->
                <div class="grid md:grid-cols-3 gap-6 mb-12">

                    <div class="bg-white p-6 rounded-2xl shadow border border-slate-100 text-center">

                        <h3 class="text-3xl font-bold text-blue-600">
                            3
                        </h3>

                        <p class="text-slate-600">
                            Aplikasi WebGIS
                        </p>

                    </div>

                    <div class="bg-white p-6 rounded-2xl shadow border border-slate-100 text-center">

                        <h3 class="text-3xl font-bold text-green-600">
                            3
                        </h3>

                        <p class="text-slate-600">
                            Tema Geospasial
                        </p>

                    </div>

                    <div class="bg-white p-6 rounded-2xl shadow border border-slate-100 text-center">

                        <h3 class="text-3xl font-bold text-purple-600">
                            1
                        </h3>

                        <p class="text-slate-600">
                            Portal Terintegrasi
                        </p>

                    </div>

                </div>

                <!-- Cards -->
                <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-8">

                    <!-- Parsil -->
                    <a href="webgis-parsiltanah/"
                        class="card-hover bg-white rounded-3xl shadow-lg p-7 border border-slate-100 hover:border-blue-400 flex flex-col">

                        <div class="text-5xl mb-4">🛣️</div>

                        <span class="inline-block mb-3 bg-blue-100 text-blue-700 text-xs px-3 py-1 rounded-full">
                            Spatial Layer
                        </span>

                        <h3 class="text-xl font-semibold text-slate-800 mb-2">
                            WebGIS Parsil Tanah
                        </h3>

                        <p class="text-slate-600">
                            Menampilkan data spasial bidang tanah dan informasi
                            parsil secara interaktif.
                        </p>

                        <div class="mt-auto pt-6 text-blue-600 font-medium">
                            Buka Aplikasi →
                        </div>

                    </a>

                    <!-- Poverty -->
                    <a href="webgis-poverty/"
                        class="card-hover bg-white rounded-3xl shadow-lg p-7 border border-slate-100 hover:border-red-400 flex flex-col">

                        <div class="text-5xl mb-4">📊</div>

                        <span class="inline-block mb-3 bg-red-100 text-red-700 text-xs px-3 py-1 rounded-full">
                            Choropleth Map
                        </span>

                        <h3 class="text-xl font-semibold text-slate-800 mb-2">
                            WebGIS Kemiskinan
                        </h3>

                        <p class="text-slate-600">
                            Visualisasi data kemiskinan wilayah menggunakan
                            peta dan statistik spasial.
                        </p>

                        <div class="mt-auto pt-6 text-red-600 font-medium">
                            Buka Aplikasi →
                        </div>

                    </a>

                    <!-- SPBU -->
                    <a href="gis-spbu/"
                        class="card-hover bg-white rounded-3xl shadow-lg p-7 border border-slate-100 hover:border-green-400 flex flex-col">

                        <div class="text-5xl mb-4">⛽</div>

                        <span class="inline-block mb-3 bg-green-100 text-green-700 text-xs px-3 py-1 rounded-full">
                            Point Location
                        </span>

                        <h3 class="text-xl font-semibold text-slate-800 mb-2">
                            WebGIS SPBU
                        </h3>

                        <p class="text-slate-600">
                            Menampilkan lokasi SPBU beserta informasi dan
                            layanan yang tersedia.
                        </p>

                        <div class="mt-auto pt-6 text-green-600 font-medium">
                            Buka Aplikasi →
                        </div>

                    </a>

                </div>

                <!-- Cara Penggunaan -->
                <div class="mt-16 bg-white rounded-3xl shadow-lg p-8 border border-slate-100">

                    <h2 class="text-2xl font-semibold text-slate-800 mb-6">
                        Cara Penggunaan
                    </h2>

                    <ol class="space-y-3 text-slate-600">

                        <li>
                            <b>1.</b> Pilih aplikasi WebGIS yang ingin digunakan.
                        </li>

                        <li>
                            <b>2.</b> Klik kartu aplikasi pada halaman utama.
                        </li>

                        <li>
                            <b>3.</b> Sistem akan membuka halaman peta interaktif.
                        </li>

                        <li>
                            <b>4.</b> Gunakan fitur zoom dan navigasi peta untuk menjelajahi data.
                        </li>

                        <li>
                            <b>5.</b> Klik objek peta untuk melihat informasi detail.
                        </li>

                    </ol>

                </div>

                <!-- Tentang -->
                <div class="mt-12 bg-slate-800 text-white rounded-3xl p-8">

                    <h2 class="text-2xl font-semibold mb-4">
                        Tentang Portal
                    </h2>

                    <p class="text-slate-300 leading-relaxed">
                        Portal WebGIS Terpadu dikembangkan sebagai media
                        integrasi berbagai aplikasi WebGIS yang mencakup
                        pemetaan lokasi SPBU, data parsil tanah, dan
                        visualisasi kemiskinan wilayah. Sistem ini
                        dirancang untuk mempermudah pengguna dalam
                        mengakses informasi geospasial secara terpusat
                        dan interaktif.
                    </p>

                </div>

            </div>
        </section>

    </div>

    <footer class="border-t border-slate-200 py-8">

        <div class="max-w-7xl mx-auto px-6 text-center">

            <h3 class="font-semibold text-slate-700">
                Portal WebGIS Terpadu
            </h3>

            <p class="text-slate-500 mt-2">
                Integrasi Aplikasi WebGIS untuk Visualisasi dan Analisis Data Spasial
            </p>

            <p class="text-slate-400 text-sm mt-4">
                Clara Oxana Azalia (D1041231051)
            </p>

        </div>

    </footer>

</body>

</html>