;

;

;
    



<div id="tc-6a966e006a405" class="w-full max-w-3xl mx-auto p-4 lg:p-1 mt-20" data-tc-root>
    <div class="flex flex-col gap-3">

        
        <div
            class="relative overflow-hidden rounded-lg bg-gray-100 select-none touch-pan-y"
            data-tc-viewport
        >
            <div
                class="flex transition-transform duration-300 ease-out"
                data-tc-track
                style="will-change: transform;"
            >
                                    <div class="shrink-0 w-full h-[400px]">
                        <img
                            src="https://dompet-umkm.web.id/storage/proker/biopori/gambar-3.jpg"
                            alt="A large body of water surrounded by mountains"
                            class="w-full h-full object-cover rounded-lg pointer-events-none select-none"
                            draggable="false"
                        >
                    </div>
                                    <div class="shrink-0 w-full h-[400px]">
                        <img
                            src="https://dompet-umkm.web.id/storage/proker/biopori/gambar-1.jpeg"
                            alt="A large body of water surrounded by mountains"
                            class="w-full h-full object-cover rounded-lg pointer-events-none select-none"
                            draggable="false"
                        >
                    </div>
                                    <div class="shrink-0 w-full h-[400px]">
                        <img
                            src="https://dompet-umkm.web.id/storage/proker/biopori/gambar-2.jpeg"
                            alt="A large body of water surrounded by mountains"
                            class="w-full h-full object-cover rounded-lg pointer-events-none select-none"
                            draggable="false"
                        >
                    </div>
                            </div>

            
            <button
                type="button"
                data-tc-prev
                class="absolute left-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white text-black opacity-70 shadow-lg transition-transform hover:scale-110 hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
            >
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>

            
            <button
                type="button"
                data-tc-next
                class="absolute right-4 top-1/2 -translate-y-1/2 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-white text-black opacity-70 shadow-lg transition-transform hover:scale-110 hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:scale-100"
            >
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </button>

            
            <div
                class="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-black/50 px-3 py-1 text-sm text-white"
                data-tc-counter
            ></div>
        </div>

        
        <div class="display-flex justify-center flex">
        <div class="tc-no-scrollbar overflow-x-auto" data-tc-thumbs>
            <div class="flex h-20 w-max gap-0.5 pb-2" data-tc-thumbs-track>
                                    <button
                        type="button"
                        data-tc-thumb
                        data-index="0"
                        class="relative h-full shrink-0 overflow-hidden rounded transition-all duration-300 ease-out"
                        style="width: 120px; margin-left: 2px; margin-right: 2px;"
                    >
                        <img
                            src="https://dompet-umkm.web.id/storage/proker/biopori/gambar-3.jpg"
                            alt="A large body of water surrounded by mountains"
                            class="h-full w-full object-cover pointer-events-none select-none"
                            draggable="false"
                        >
                    </button>
                                    <button
                        type="button"
                        data-tc-thumb
                        data-index="1"
                        class="relative h-full shrink-0 overflow-hidden rounded transition-all duration-300 ease-out"
                        style="width: 35px; margin-left: 0px; margin-right: 0px;"
                    >
                        <img
                            src="https://dompet-umkm.web.id/storage/proker/biopori/gambar-1.jpeg"
                            alt="A large body of water surrounded by mountains"
                            class="h-full w-full object-cover pointer-events-none select-none"
                            draggable="false"
                        >
                    </button>
                                    <button
                        type="button"
                        data-tc-thumb
                        data-index="2"
                        class="relative h-full shrink-0 overflow-hidden rounded transition-all duration-300 ease-out"
                        style="width: 35px; margin-left: 0px; margin-right: 0px;"
                    >
                        <img
                            src="https://dompet-umkm.web.id/storage/proker/biopori/gambar-2.jpeg"
                            alt="A large body of water surrounded by mountains"
                            class="h-full w-full object-cover pointer-events-none select-none"
                            draggable="false"
                        >
                    </button>
                            </div>
        </div>
        </div>
    </div>
</div>
<section class="px-4 py-12">
    <div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">

        
        <div class="bg-white rounded-3xl ring-1 ring-gray-100 shadow-[0_2px_8px_rgba(0,0,0,0.05)] p-6 sm:p-8 flex flex-col justify-center min-h-[280px]">
            <span class="inline-flex items-center gap-1.5 w-fit px-3 py-1 rounded-full text-[11px] font-semibold text-emerald-700 bg-emerald-50 mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3c-3 3-6 6-6 10a6 6 0 0012 0c0-4-3-7-6-10z" />
                </svg>
                Program Kerja KKN
            </span>

            <h2 class="text-xl sm:text-2xl font-bold text-gray-900 mb-2">Biopori</h2>

            <p class="text-gray-600 leading-relaxed">
                <span class="font-bold">Bio pori</span> merupakan salah satu proker yang kami laksanakan untuk kkn
            </p>
        </div>

        
        <div class="min-h-[280px] rounded-3xl overflow-hidden [&>*]:h-full [&>*]:w-full">
            <a
    href="https://www.google.com/maps/search/?api=1&amp;query=-4.0135%2C119.6255"
    target="_blank"
    rel="noopener noreferrer"
    x-data="{
        hovered: false,
        rx: 0,
        ry: 0,
        move(e) {
            const r = $refs.card.getBoundingClientRect();
            const dx = e.clientX - (r.left + r.width / 2);
            const dy = e.clientY - (r.top + r.height / 2);
            this.ry = Math.max(-8, Math.min(8, (dx / 50) * 8));
            this.rx = Math.max(-8, Math.min(8, (-dy / 50) * 8));
        },
        reset() { this.rx = 0; this.ry = 0; this.hovered = false; },
    }"
    @mousemove="move"
    @mouseenter="hovered = true"
    @mouseleave="reset"
    class="relative inline-block cursor-pointer select-none" coordinates="-4.0135° S, 119.6255° E"
    style="perspective: 1000px"
>
    <div
        x-ref="card"
        class="relative overflow-hidden rounded-2xl bg-slate-900 border border-slate-700"
        :class="hovered ? 'w-[360px] h-[280px]' : 'w-[240px] h-[140px]'"
        :style="`transform: rotateX(${rx}deg) rotateY(${ry}deg); transform-style: preserve-3d; transition: transform .3s ease-out, width .4s cubic-bezier(.34,1.4,.64,1), height .4s cubic-bezier(.34,1.4,.64,1);`"
    >
        <div class="absolute inset-0 bg-gradient-to-br from-white/5 via-transparent to-white/10 pointer-events-none z-10"></div>

        
        <div
            x-show="hovered" x-cloak
            x-transition:enter="transition ease-out duration-300 delay-100"
            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-150"
            x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
            class="absolute inset-0 pointer-events-none"
        >
            <iframe
                src="https://www.google.com/maps?q=-4.0135%2C119.6255&amp;z=15&amp;output=embed"
                class="absolute inset-0 w-full h-full border-0"
                loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"
            ></iframe>
            <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent opacity-40"></div>
        </div>

        
        <div class="absolute inset-0 transition-opacity duration-300" :class="hovered ? 'opacity-0' : 'opacity-[0.03]'">
            <svg width="100%" height="100%" class="absolute inset-0">
                <defs>
                    <pattern id="expand-map-grid" width="20" height="20" patternUnits="userSpaceOnUse">
                        <path d="M 20 0 L 0 0 0 20" fill="none" class="stroke-white" stroke-width="0.5" />
                    </pattern>
                </defs>
                <rect width="100%" height="100%" fill="url(#expand-map-grid)" />
            </svg>
        </div>

        
        <div class="relative z-20 h-full flex flex-col justify-between p-5">
            <div class="flex items-start justify-between">
                <svg
                    x-show="!hovered"
                    width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                    stroke-linecap="round" stroke-linejoin="round"
                    class="text-emerald-400 transition-[filter] duration-300"
                    :style="hovered ? 'filter: drop-shadow(0 0 8px rgba(52,211,153,.6))' : 'filter: drop-shadow(0 0 4px rgba(52,211,153,.3))'"
                >
                    <polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" />
                    <line x1="9" x2="9" y1="3" y2="18" />
                    <line x1="15" x2="15" y1="6" y2="21" />
                </svg>

                <div
                    class="flex items-center gap-1.5 px-2 py-1 rounded-full bg-white/5 backdrop-blur-sm transition-transform duration-200"
                    :class="hovered && 'scale-105'"
                >
                    <div class="w-1.5 h-1.5 rounded-full bg-emerald-400"></div>
                    <span class="text-[10px] font-medium text-slate-400 tracking-wide uppercase">Live</span>
                </div>
            </div>

            <div class="space-y-1">
                <h3
                    class="text-white font-medium text-sm tracking-tight transition-transform duration-200"
                    :class="hovered && 'translate-x-1'"
                >
                    Parepare, Galung Maloang
                </h3>

                <p
                    x-show="hovered" x-cloak
                    x-transition:enter="transition ease-out duration-250"
                    x-transition:enter-start="opacity-0 -translate-y-2"
                    x-transition:enter-end="opacity-100 translate-y-0"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
                    class="text-slate-400 text-xs font-mono"
                >
                    4.0135° LS, 119.6255° BT
                </p>

                <div
                    class="h-px bg-gradient-to-r from-emerald-500/50 via-emerald-400/30 to-transparent origin-left transition-transform duration-400"
                    :class="hovered ? 'scale-x-100' : 'scale-x-[0.3]'"
                ></div>
            </div>
        </div>
    </div>

    <p
        x-show="hovered" x-cloak
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0"
        x-transition:leave="transition ease-in duration-150"
        class="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[10px] text-slate-400 whitespace-nowrap"
    >
        Klik untuk buka di Google Maps
    </p>
</a>        </div>

    </div>
</section>

<style>
    .tc-no-scrollbar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .tc-no-scrollbar::-webkit-scrollbar {
        display: none;
    }
</style>

<script>
(function () {
    const FULL_WIDTH = 120;
    const COLLAPSED_WIDTH = 35;
    const MARGIN = 2;
    const DRAG_THRESHOLD_RATIO = 0.3;
    const VELOCITY_THRESHOLD = 0.5; // px per ms (setara 500px/s)

    const root = document.getElementById('tc-6a966e006a405');
    if (!root || root.dataset.tcInit) return;
    root.dataset.tcInit = '1';

    const viewport = root.querySelector('[data-tc-viewport]');
    const track = root.querySelector('[data-tc-track]');
    const slides = Array.from(track.children);
    const prevBtn = root.querySelector('[data-tc-prev]');
    const nextBtn = root.querySelector('[data-tc-next]');
    const counter = root.querySelector('[data-tc-counter]');
    const thumbsWrap = root.querySelector('[data-tc-thumbs]');
    const thumbs = Array.from(root.querySelectorAll('[data-tc-thumb]'));

    const total = slides.length;
    let index = 0;
    let isDragging = false;
    let startX = 0;
    let lastX = 0;
    let lastT = 0;
    let velocity = 0;
    let dragPercent = 0;

    function clamp(v, min, max) {
        return Math.max(min, Math.min(max, v));
    }

    function applyTrackTransform(withTransition) {
        track.style.transition = withTransition ? 'transform 300ms ease-out' : 'none';
        track.style.transform = `translateX(calc(-${index * 100}% + ${dragPercent}%))`;
    }

    function updateButtons() {
        prevBtn.disabled = index === 0;
        nextBtn.disabled = index === total - 1;
    }

    function updateCounter() {
        counter.textContent = `${index + 1} / ${total}`;
    }

    function updateThumbs() {
        thumbs.forEach((btn, i) => {
            const active = i === index;
            btn.style.width = (active ? FULL_WIDTH : COLLAPSED_WIDTH) + 'px';
            btn.style.marginLeft = (active ? MARGIN : 0) + 'px';
            btn.style.marginRight = (active ? MARGIN : 0) + 'px';
        });

        const activeThumb = thumbs[index];
        if (activeThumb) {
            activeThumb.scrollIntoView({
                behavior: 'smooth',
                inline: 'center',
                block: 'nearest',
            });
        }
    }

    function goTo(newIndex) {
        index = clamp(newIndex, 0, total - 1);
        dragPercent = 0;
        applyTrackTransform(true);
        updateButtons();
        updateCounter();
        updateThumbs();
    }

    // --- Buttons ---
    prevBtn.addEventListener('click', () => goTo(index - 1));
    nextBtn.addEventListener('click', () => goTo(index + 1));

    // --- Thumbnail click ---
    thumbs.forEach((btn) => {
        btn.addEventListener('click', () => {
            goTo(parseInt(btn.dataset.index, 10));
        });
    });

    // --- Drag / swipe on main viewport ---
    function onPointerDown(e) {
        isDragging = true;
        startX = e.clientX;
        lastX = startX;
        lastT = performance.now();
        velocity = 0;
        viewport.setPointerCapture(e.pointerId);
    }

    function onPointerMove(e) {
        if (!isDragging) return;
        const now = performance.now();
        const dt = now - lastT || 1;
        velocity = (e.clientX - lastX) / dt;
        lastX = e.clientX;
        lastT = now;

        const deltaX = e.clientX - startX;
        const containerWidth = viewport.offsetWidth || 1;
        dragPercent = (deltaX / containerWidth) * 100;
        applyTrackTransform(false);
    }

    function onPointerUp() {
        if (!isDragging) return;
        isDragging = false;

        const containerWidth = viewport.offsetWidth || 1;
        const offsetPx = (dragPercent / 100) * containerWidth;

        let newIndex = index;
        if (Math.abs(velocity) > VELOCITY_THRESHOLD) {
            newIndex = velocity > 0 ? index - 1 : index + 1;
        } else if (Math.abs(offsetPx) > containerWidth * DRAG_THRESHOLD_RATIO) {
            newIndex = offsetPx > 0 ? index - 1 : index + 1;
        }

        goTo(newIndex);
    }

    viewport.addEventListener('pointerdown', onPointerDown);
    viewport.addEventListener('pointermove', onPointerMove);
    viewport.addEventListener('pointerup', onPointerUp);
    viewport.addEventListener('pointercancel', onPointerUp);
    viewport.addEventListener('pointerleave', () => {
        if (isDragging) onPointerUp();
    });

    // Re-sync transform on resize (persentase sudah relatif jadi aman,
    // tapi kita pastikan transisi tidak aneh saat resize berlangsung)
    window.addEventListener('resize', () => applyTrackTransform(false));

    // Init
    applyTrackTransform(false);
    updateButtons();
    updateCounter();
    updateThumbs();
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proker Biopori</title>

    <!-- Leaflet CSS -->
<link
    rel="stylesheet"
    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
    crossorigin=""
/>

    <link rel="preload" as="style" href="https://dompet-umkm.web.id/build/assets/app-Dpn0NDpq.css" /><link rel="preload" as="style" href="https://dompet-umkm.web.id/build/assets/app-1DTFk8zz.css" /><link rel="modulepreload" as="script" href="https://dompet-umkm.web.id/build/assets/app-D07mHZzT.js" /><link rel="stylesheet" href="https://dompet-umkm.web.id/build/assets/app-Dpn0NDpq.css" /><link rel="stylesheet" href="https://dompet-umkm.web.id/build/assets/app-1DTFk8zz.css" /><script type="module" src="https://dompet-umkm.web.id/build/assets/app-D07mHZzT.js"></script></head>
<body class="text-gray-800 antialiased min-h-screen flex flex-col relative">
        <video
        autoplay
        muted
        loop
        playsinline
        class="fixed inset-0 w-full h-full object-cover -z-10"
    >
        <source src="https://dompet-umkm.web.id/storage/hero/hero.mp4" type="video/mp4">
    </video>

    <!-- <nav class="bg-white/30 backdrop-blur-sm  border-gray-200 sticky top-0 z-30">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex justify-between h-16 items-center">
                <a href="https://dompet-umkm.web.id/umkm" class="font-bold text-lg text-emerald-600">
                    Dompet UMKM
                </a>

                <div class="hidden md:flex items-center gap-6 text-sm font-medium">
                    <a href="https://dompet-umkm.web.id/umkm" class="text-gray-600 hover:text-emerald-600">Etalase UMKM</a>

                                            <a href="https://dompet-umkm.web.id/login" class="text-gray-600 hover:text-emerald-600">Masuk</a>
                        <a href="https://dompet-umkm.web.id/umkm"
                           class="bg-emerald-600 text-white px-4 py-2 rounded-lg hover:bg-emerald-700">
                            Daftar
                        </a>
                                    </div>
            </div>
        </div>
    </nav> -->
    <header x-data="{ mobileMenuOpen: false }" class="fixed top-0 inset-x-0 z-50 transition-all duration-300 bg-white/20 backdrop-blur-xs border-slate-200/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-20">
            <!-- Logo Brand -->
            <div class="flex-shrink-0 flex items-center gap-3 cursor-pointer group">
                <div class="w-10 h-10 flex items-center justify-center group-hover:scale-105 transition-transform">
                    <img src="https://dompet-umkm.web.id/storage/img/logo/77.png">
                </div>
                <span class="font-jakarta font-bold text-2xl tracking-tight text-slate-900">Dompet<span class="text-emerald-600">  umkm</span></span>
            </div>

            <!-- Desktop Menu -->
            <nav class="hidden md:flex space-x-10 items-center">
                <a href="https://dompet-umkm.web.id/home" class="text-sm font-semibold text-white hover:text-emerald-600 transition-colors">Home</a>
                <a href="https://dompet-umkm.web.id/dashboard" class="text-sm font-medium text-white hover:text-slate-900 transition-colors">Dashboard</a>
                <a href="https://dompet-umkm.web.id/umkm" class="text-sm font-medium text-white hover:text-slate-900 transition-colors">Umkm</a>
                <a href="https://dompet-umkm.web.id/pengeluaran" class="text-sm font-medium text-white hover:text-slate-900 transition-colors">Pengeluaran</a>
                <a href="https://dompet-umkm.web.id/pemasukan" class="text-sm font-medium text-white hover:text-slate-900 transition-colors">Pemasukan</a>
                <a href="https://dompet-umkm.web.id/profil-umkm" class="text-sm font-medium text-white hover:text-slate-900 transition-colors">Profile Saya</a>
                <a href="https://dompet-umkm.web.id/proker" class="text-sm font-medium text-white hover:text-slate-900 transition-colors">Proker</a>
                <form method="POST" action="https://dompet-umkm.web.id/logout">
                    <input type="hidden" name="_token" value="lRYKZa049PAukbgTuL4OphRZOxSv2QzyqAvWPUtp" autocomplete="off">                    <button type="submit" class="text-sm font-medium text-white hover:text-slate-900 transition-colors">Log Out</button>
                </form>
            </nav>

            <!-- Auth / CTA Buttons Desktop -->
            <div class="hidden md:flex items-center space-x-4">
                <a href="https://dompet-umkm.web.id/login" class="text-sm font-semibold text-white hover:text-slate-900 px-3 py-2">Masuk</a>
                <a href="https://dompet-umkm.web.id/register" class="inline-flex items-center justify-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-900 rounded-lg hover:bg-slate-800 hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200">
                    Coba Sekarang
                    <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>

            <!-- Mobile Menu Button -->
            <div class="md:hidden flex items-center">
                <button @click="mobileMenuOpen = !mobileMenuOpen" class="text-slate-500 hover:text-slate-900 focus:outline-none p-2">
                    <svg x-show="!mobileMenuOpen" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                    <svg x-show="mobileMenuOpen" x-cloak class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile Menu Panel -->
    <div x-show="mobileMenuOpen" x-cloak x-transition class="md:hidden bg-white/95 backdrop-blur-md border-t border-slate-200/50">
        <div class="px-4 pt-2 pb-4 space-y-1">
            <a href="https://dompet-umkm.web.id/home" class="block px-3 py-2 text-sm font-semibold text-slate-900 hover:text-emerald-600">Home</a>
            <a href="https://dompet-umkm.web.id/dashboard" class="block px-3 py-2 text-sm font-medium text-slate-900 hover:text-emerald-600">Dashboard</a>
            <a href="https://dompet-umkm.web.id/umkm" class="block px-3 py-2 text-sm font-medium text-slate-900 hover:text-emerald-600">Umkm</a>
            <a href="https://dompet-umkm.web.id/pengeluaran" class="block px-3 py-2 text-sm font-medium text-slate-900 hover:text-emerald-600">Pengeluaran</a>
            <a href="https://dompet-umkm.web.id/pemasukan" class="block px-3 py-2 text-sm font-medium text-slate-900 hover:text-emerald-600">Pemasukan</a>
            <a href="https://dompet-umkm.web.id/profil-umkm" class="block px-3 py-2 text-sm font-medium text-slate-900 hover:text-emerald-600">Profile Saya</a>
            <a href="https://dompet-umkm.web.id/proker" class="block px-3 py-2 text-sm font-medium text-slate-900 hover:text-emerald-600">Proker</a>
            <div class="pt-3 border-t border-slate-200/50 space-y-2">
                <a href="https://dompet-umkm.web.id/login" class="block px-3 py-2 text-sm font-semibold text-slate-900">Masuk</a>
                <a href="https://dompet-umkm.web.id/register" class="block text-center px-5 py-2.5 text-sm font-semibold text-white bg-slate-900 rounded-lg">Coba Sekarang</a>
            </div>
            <form method="POST" action="https://dompet-umkm.web.id/logout">
            <input type="hidden" name="_token" value="lRYKZa049PAukbgTuL4OphRZOxSv2QzyqAvWPUtp" autocomplete="off">            <button type="submit" class="block w-full text-left px-20 py-2 text-sm font-medium text-slate-900 hover:text-emerald-600">Log Out</button>
        </form>
        </div>
    </div>
</header>
    <main class="flex-1 max-w-6xl mx-auto w-full px-4 py-8 md:mt-10">

        
        
        
            </main>

    <footer class="text-center text-xs text-gray-400 py-6">
        &copy; 2026 Dompet UMKM. Bantu UMKM naik kelas, jangan sampai boncos.
    </footer>

        <script src="https://dompet-umkm.web.id/js/umkm-location-picker.js" defer></script>
</body>
</html>