<!DOCTYPE html><html class="light" lang="id" style=""><head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>{{ config('app.name', 'Nusa OTP') }}</title>

    <link rel="icon" type="image/png" href="{{ asset('public/assets/icon-nusaotp.ico') }}">
    <link rel="apple-touch-icon" href="{{ asset('public/assets/icon-nusaotp.ico') }}">

    <meta property="og:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta property="og:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta property="og:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nusaotp.com">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ config('app.name', 'Nusa OTP') }}">
    <meta name="twitter:description" content="Nusa OTP Adalah Platform Layanan Nomor Virtual Dengan OTP Otomatis Tercepat Dan Termurah Di Indonesia. Beli Nomor Virtual Sekarang, Instan, Terpercaya, Dan Aktif 24 Jam.">
    <meta name="twitter:image" content="{{ asset('public/assets/og-nusaotp.webp') }}">
     <meta name="keywords" content="Nusa OTP, nomor virtual murah, Nusa OTP nokos, Nokos, beli nomor virtual, OTP murah, Nokos Indonesia, OTP Wa, nomor virtual, nomor WhatsApp, nomor Telegram, nomor Gmail, nomor registrasi, layanan verifikasi akun, platform nomor virtual, nomor online, nomor SMS verifikasi, nokos wa, nokos indonesia, nomor kosong, nomor virtual murah, otp murah, nokos wa murah, nokos wa, nomor kosong murah, nomor murah, beli nomor kosong, jasa nomor kosong murah, jasa nomor kosong, jasa otp murah, beli nomor kosong wa, nomor kosong">
    
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&amp;display=swap" rel="stylesheet">
<script id="tailwind-config">
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "on-secondary-fixed-variant": "#004e5c",
                    "outline": "#757684",
                    "surface-container-highest": "#d3e4fe",
                    "on-surface-variant": "#444653",
                    "on-background": "#0b1c30",
                    "inverse-surface": "#213145",
                    "tertiary": "#003d27",
                    "secondary-fixed-dim": "#4cd7f6",
                    "on-primary-container": "#a8b8ff",
                    "surface-bright": "#f8f9ff",
                    "error": "#ba1a1a",
                    "secondary": "#00687a",
                    "on-tertiary-fixed": "#002113",
                    "primary-container": "#1e40af",
                    "secondary-fixed": "#acedff",
                    "surface-variant": "#d3e4fe",
                    "tertiary-container": "#00563a",
                    "on-error": "#ffffff",
                    "primary-fixed-dim": "#b8c4ff",
                    "on-error-container": "#93000a",
                    "on-primary-fixed-variant": "#173bab",
                    "surface-container-lowest": "#ffffff",
                    "surface-container": "#e5eeff",
                    "on-tertiary-fixed-variant": "#005236",
                    "primary": "#00288e",
                    "surface-tint": "#3755c3",
                    "secondary-container": "#57dffe",
                    "on-tertiary": "#ffffff",
                    "outline-variant": "#c4c5d5",
                    "tertiary-fixed-dim": "#4edea3",
                    "on-secondary-fixed": "#001f26",
                    "surface-dim": "#cbdbf5",
                    "on-primary": "#ffffff",
                    "error-container": "#ffdad6",
                    "on-primary-fixed": "#001453",
                    "inverse-primary": "#b8c4ff",
                    "on-secondary": "#ffffff",
                    "on-surface": "#0b1c30",
                    "surface": "#f8f9ff",
                    "surface-container-low": "#eff4ff",
                    "surface-container-high": "#dce9ff",
                    "on-secondary-container": "#006172",
                    "primary-fixed": "#dde1ff",
                    "background": "#f8f9ff",
                    "inverse-on-surface": "#eaf1ff",
                    "tertiary-fixed": "#6ffbbe",
                    "on-tertiary-container": "#3fd298"
            },
            "borderRadius": {
                    "DEFAULT": "0.25rem",
                    "lg": "0.5rem",
                    "xl": "0.75rem",
                    "full": "9999px"
            },
            "spacing": {
                    "stack-lg": "1.5rem",
                    "section-gap": "2rem",
                    "gutter": "1rem",
                    "container-margin": "1rem",
                    "stack-sm": "0.5rem",
                    "stack-md": "1rem"
            },
            "fontFamily": {
                    "number-display": ["Inter"],
                    "label-md": ["Inter"],
                    "headline-md": ["Inter"],
                    "headline-lg": ["Inter"],
                    "body-md": ["Inter"],
                    "headline-lg-mobile": ["Inter"],
                    "body-lg": ["Inter"]
            },
            "fontSize": {
                    "number-display": ["24px", {"lineHeight": "32px", "letterSpacing": "0.1em", "fontWeight": "700"}],
                    "label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "600"}],
                    "headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
                    "headline-lg": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                    "body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
                    "headline-lg-mobile": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.01em", "fontWeight": "700"}],
                    "body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
            }
          },
        },
      }
    </script>
<style>
        body { font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            display: inline-block;
            vertical-align: middle;
        }
        .kinetic-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
        }
        .kinetic-card:active {
            transform: scale(0.98);
        }
        .glass-effect {
            backdrop-filter: blur(8px);
            background: rgba(248, 249, 255, 0.85);
        }
    </style>
<style>
    body {
      min-height: max(884px, 100dvh);
    }
  </style>
  </head>
<body class="bg-background text-on-background min-h-screen pb-24">
<!-- TopAppBar -->
@include('apk.partials.header')
<main class="px-container-margin mt-stack-md space-y-stack-lg">
<!-- Featured Bento News -->
@php
$infos = \App\Models\Information::latest()->get();
@endphp

<section class="grid grid-cols-1 gap-4">

    @forelse($infos as $info)

        @php
            $parsedContent = preg_replace(
                '/(https?:\/\/[^\s<]+)/i',
                '<a href="$1" target="_blank" class="text-primary underline">$1</a>',
                e($info->content)
            );
        @endphp

        <div class="kinetic-card bg-surface-container-lowest border border-outline-variant/30 p-5 rounded-xl relative overflow-hidden">

            <div class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full -mr-16 -mt-16"></div>

            <div class="flex justify-between items-start relative z-10">

                <span class="px-3 py-1 rounded-full bg-secondary-container text-on-secondary-container font-label-md text-label-md">
                    Informasi
                </span>

                

            </div>

            <div class="mt-4 relative z-10">

                <h2 class="font-headline-md text-headline-md text-on-surface leading-tight">
                    {{ $info->title }}
                </h2>

                <div class="mt-3 font-body-md text-body-md text-on-surface-variant leading-7 break-words">

                    {!! nl2br($parsedContent) !!}

                </div>

            </div>

            <div class="mt-4 flex items-center gap-2 text-outline text-sm">

                <span class="material-symbols-outlined text-[18px]">
                    schedule
                </span>

                {{ $info->created_at->format('d M Y H:i') }}

            </div>

        </div>

    @empty

        <div class="kinetic-card bg-surface-container-lowest border border-outline-variant/30 rounded-xl p-8 text-center">

            <div class="w-16 h-16 mx-auto rounded-2xl bg-surface-container flex items-center justify-center">

                <span class="material-symbols-outlined text-primary text-[32px]">
                    info
                </span>

            </div>

            <h3 class="mt-4 font-bold text-on-surface">
                Belum Ada Informasi
            </h3>

            <p class="mt-2 text-on-surface-variant text-sm">
                Saat ini belum ada informasi terbaru.
            </p>

        </div>

    @endforelse

</section>
<!-- Empty State / End of List -->
@if($infos->count() > 0)
<div class="py-stack-lg flex flex-col items-center justify-center text-outline/50">
    <span class="material-symbols-outlined text-4xl mb-2">
        check_circle
    </span>

    <p class="font-label-md text-label-md">
        Tidak ada informasi lainnya
    </p>
</div>
@endif
</main>
<!-- BottomNavBar -->
@include('apk.partials.bar')
<script>
        // Micro-interaction: Scroll reveal for cards
        const observerOptions = {
            threshold: 0.1
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = "1";
                    entry.target.style.transform = "translateY(0)";
                }
            });
        }, observerOptions);

        document.querySelectorAll('.kinetic-card').forEach(card => {
            card.style.opacity = "0";
            card.style.transform = "translateY(20px)";
            card.style.transition = "opacity 0.5s ease-out, transform 0.5s ease-out";
            observer.observe(card);
        });

        // Pull to refresh simulation
        let touchstartY = 0;
        let touchendY = 0;
        
        document.addEventListener('touchstart', e => {
            touchstartY = e.changedTouches[0].screenY;
        }, false);

        document.addEventListener('touchend', e => {
            touchendY = e.changedTouches[0].screenY;
            if (touchendY > touchstartY + 100 && window.scrollY === 0) {
                location.reload();
            }
        }, false);
    </script>


</body></html>