One Hat Cyber Team

View File Name : d12d0d5854bd3fb950b4dfec51fe9408.php

<html lang="id">

<head>
    <meta charset="utf-8" />
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>
        <?php echo e(isset($setting) ? $setting->name . ' - Penyedia Layanan Internet' : 'Nama Perusahaan - Penyedia Layanan Internet'); ?>

    </title>
      <?php echo app('Illuminate\Foundation\Vite')('resources/js/app.js'); ?>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&amp;display=swap" rel="stylesheet" />
    
    <style>
        body {
            font-family: "Inter", sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        @keyframes scroll-left {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .scrolling-wrapper {
            display: flex;
            width: max-content;
            animation: scroll-left 30s linear infinite;
        }

        .scrolling-container {
            overflow: hidden;
            width: 100%;
        }

        /* Animated background circles */
        .animated-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
            z-index: 0;
            pointer-events: none;
        }

        .circle {
            position: absolute;
            border-radius: 50%;
            opacity: 0.15;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        .circle1 {
            width: 200px;
            height: 200px;
            background: #3b82f6;
            top: 10%;
            left: 15%;
            animation-name: float1;
            animation-duration: 8s;
        }

        .circle2 {
            width: 300px;
            height: 300px;
            background: #60a5fa;
            top: 50%;
            left: 70%;
            animation-name: float2;
            animation-duration: 12s;
        }

        .circle3 {
            width: 150px;
            height: 150px;
            background: #2563eb;
            top: 75%;
            left: 30%;
            animation-name: float3;
            animation-duration: 10s;
        }

        .circle4 {
            width: 100px;
            height: 100px;
            background: #93c5fd;
            top: 40%;
            left: 45%;
            animation-name: float4;
            animation-duration: 14s;
        }

        @keyframes float1 {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }

            50% {
                transform: translateY(-20px) translateX(10px);
                opacity: 0.25;
            }

            100% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }
        }

        @keyframes float2 {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }

            50% {
                transform: translateY(25px) translateX(-15px);
                opacity: 0.3;
            }

            100% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }
        }

        @keyframes float3 {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }

            50% {
                transform: translateY(-15px) translateX(20px);
                opacity: 0.2;
            }

            100% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }
        }

        @keyframes float4 {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }

            50% {
                transform: translateY(18px) translateX(-10px);
                opacity: 0.22;
            }

            100% {
                transform: translateY(0) translateX(0);
                opacity: 0.15;
            }
        }

        /* Fade-in animation for sections */
        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
            will-change: opacity, transform;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: none;
        }
    </style>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Verdana, sans-serif;
        }

        .mySlides {
            display: none;
        }

        img {
            vertical-align: middle;
        }

        /* Slideshow container */
        /* Slide container styles */
        .mySlides {
            position: relative;
            display: block;
            width: 100%;
            /* Gambar menutupi 100% lebar kontainer */
            /* height: 600px; */
            /* Menetapkan tinggi kontainer gambar */
        }
@media (min-width: 768px) {
    .mySlides {
        height: 600px;     /* tinggi tetap 600px untuk desktop */
        aspect-ratio: auto; /* matikan aspect-ratio agar height fixed berlaku */
    }
}

/* Jika mau height lebih kecil di mobile */
@media (max-width: 767px) {
    .mySlides {
        height: 250px; /* tinggi pas untuk layar kecil */
        aspect-ratio: auto;
    }
}
        .slideshow-container {
            position: relative;
            overflow: hidden;
        }

        /* Gambar di slideshow */
        .mySlides img {
            width: 100%;
            /* Gambar mengisi lebar penuh dari container */
            height: 100%;
            /* Gambar mengisi tinggi penuh dari container */
            object-fit: contain;
            /* Gambar menyesuaikan dengan kontainer tanpa terpotong */
            object-position: center;
            /* Gambar akan tetap terpusat di kontainer */
            border-radius: 10px;
            /* Rounded corners */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            /* Menambahkan shadow */
        }

        /* Styling untuk titik (dot) navigasi */
        .dots-container {
            text-align: center;
        }

        .dot {
            height: 15px;
            width: 15px;
            margin: 0 5px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.6s ease;
        }

        /* Cards for home features */
        .feature-card {
            display: flex;
            align-items: center;
            space-x-4;
            background-color: white;
            border-radius: 10px;
            padding: 16px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .feature-card img {
            width: 64px;
            height: 64px;
            object-contain: contain;
        }

        .feature-card h4 {
            font-weight: bold;
            color: #1D4ED8;
            font-size: 1.125rem;
        }

        .feature-card p {
            color: #4B5563;
            font-size: 0.875rem;
        }

        /* Coverage area */
        .coverage-area h4 {
            color: #1D4ED8;
            font-size: 1.125rem;
        }

        .coverage-area ul {
            list-style: disc;
            padding-left: 1.5rem;
        }

        .coverage-area li {
            color: #4B5563;
            font-size: 0.875rem;
        }


        .active {
            background-color: #717171;
        }

        /* Fading animation */
        .fade {
            animation-name: fade;
            animation-duration: 1.5s;
        }

        @keyframes fade {
            from {
                opacity: .4
            }

            to {
                opacity: 1
            }
        }

        /* On smaller screens, decrease text size */
        @media only screen and (max-width: 300px) {
            .text {
                font-size: 11px
            }
        }
    </style>
</head>

<body class="bg-gray-50 text-gray-800 relative overflow-x-hidden">
    <header class="bg-white shadow fixed w-full z-30">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <a class="flex items-center space-x-3" href="#home" id="nav-home">
                    <img alt="" class="h-12 w-12 object-contain" height="48"
                        src="<?php echo e(isset($setting) ? asset('storage/images/' . $setting->images) : url('assets/static/images/blank.png')); ?>"
                        width="48" />
                    <span class="font-bold text-xl text-blue-600">
                        <?php echo e(isset($setting) ? $setting->name : '{Nama Perusahaan}'); ?>

                    </span>
                </a>
                <nav class="hidden md:flex space-x-8 font-semibold text-gray-700" id="nav-main">
                    <a class="hover:text-blue-600 transition" href="#home-section" id="nav-home-link">
                        Home
                    </a>
                    <a class="hover:text-blue-600 transition" href="#pricing-section" id="nav-pricing-link">
                        Pricing
                    </a>
                    <a class="hover:text-blue-600 transition" href="#vision-section" id="nav-vision-link">
                        Visi &amp;
                        misi
                    </a>
                    <a class="hover:text-blue-600 transition" href="#clients-section" id="nav-clients-link">
                        Our
                        Clients
                    </a>
                    <a class="hover:text-blue-600 transition" href="#contact-section" id="nav-contact-link">
                        Contact
                    </a>
                </nav>
                <button aria-label="Toggle menu"
                    class="md:hidden text-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-600"
                    id="mobile-menu-button">
                    <i class="fas fa-bars fa-lg">
                    </i>
                </button>
            </div>
        </div>
        <nav aria-label="Mobile menu" class="md:hidden bg-white border-t border-gray-200 hidden" id="mobile-menu">
            <a class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 font-semibold"
                href="#home-section" id="mobile-nav-home">
                Home
            </a>
            <a class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 font-semibold"
                href="#pricing-section" id="mobile-nav-pricing">
                Pricing
            </a>
            <a class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 font-semibold"
                href="#vision-section" id="mobile-nav-vision">
                Visi &amp; misi
            </a>
            <a class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 font-semibold"
                href="#clients-section" id="mobile-nav-clients">
                Our Clients
            </a>
            <a class="block px-4 py-3 text-gray-700 hover:bg-blue-50 hover:text-blue-600 font-semibold"
                href="#contact-section" id="mobile-nav-contact">
                Contact
            </a>
        </nav>
    </header>
    <main class="pt-20 w-full mx-auto px-6 sm:px-12 lg:px-16 relative z-10">
        <!-- Home Section -->
        <section class="py-16 flex flex-col md:flex-row items-center gap-12 relative overflow-visible fade-in-section"
            id="home-section">

            <div class="md:w-1/2 relative z-10">
                <div class="slideshow-container">

                    <?php if($home==null): ?>
<div class="mySlides fade">
                        <div class="numbertext"></div>
                        <img src="<?php echo e(url('/assets/static/images/blank.png')); ?>"
                            class="rounded-lg shadow-lg w-full object-cover" height="400" loading="lazy"
                            width="600" />

                    </div>

                    <div class="mySlides fade">
                        <div class="numbertext"></div>
                        <img src="<?php echo e(url('/assets/static/images/blank.png')); ?>"
                            class="rounded-lg shadow-lg w-full object-cover" height="400" loading="lazy"
                            width="600" />

                    </div>

                    <div class="mySlides fade">
                        <div class="numbertext"></div>
                        <img src="<?php echo e(url('/assets/static/images/blank.png')); ?>"
                            class="rounded-lg shadow-lg w-full object-cover" height="400" loading="lazy"
                            width="600" />

                    </div>
                    <?php else: ?>
<div class="mySlides fade">
                        <div class="numbertext"></div>
                        <img src="<?php echo e(asset('storage/images/' . $home->images1)); ?>"
                            class="rounded-lg shadow-lg w-full object-cover" height="400" loading="lazy"
                            width="600" />

                    </div>

                    <div class="mySlides fade">
                        <div class="numbertext"></div>
                        <img src="<?php echo e(asset('storage/images/' . $home->images2)); ?>"
                            class="rounded-lg shadow-lg w-full object-cover" height="400" loading="lazy"
                            width="600" />

                    </div>

                    <div class="mySlides fade">
                        <div class="numbertext"></div>
                        <img src="<?php echo e(asset('storage/images/' . $home->images3)); ?>"
                            class="rounded-lg shadow-lg w-full object-cover" height="400" loading="lazy"
                            width="600" />

                    </div>
                    <?php endif; ?>



                </div>
                <br>

                <div style="text-align:center">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>


            </div>

            <div aria-hidden="true" class="animated-bg">
                <div class="circle circle1">
                </div>
                <div class="circle circle2">
                </div>
                <div class="circle circle3">
                </div>
                <div class="circle circle4">
                </div>
            </div>
            <div class="w-full sm:w-1/2 space-y-6 relative z-10">
                <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-700 leading-tight">
                    Selamat Datang di <?php echo e(isset($setting) ? $setting->name : '{Nama Perusahaan}'); ?>

                </h1>
                <p class="text-lg text-gray-700">
                    <?php if($home == null): ?>
                        Isi Data Terlebih Dahulu
                    <?php else: ?>
                        <?php echo e($home->description); ?>

                    <?php endif; ?>
                </p>
                <div class="mt-8 grid grid-cols-1 sm:grid-cols-2 gap-6">
                    <?php if($home_features->isEmpty()): ?>
                        <div class="flex items-center space-x-4 bg-white rounded-lg shadow p-4">
                            <img alt="Ikon kecepatan internet berwarna biru dengan simbol petir"
                                class="w-16 h-16 object-contain" height="64" loading="lazy"
                                src="<?php echo e(url('/assets/static/images/blank.png')); ?>" width="64" />
                            <div>
                                <h4 class="font-semibold text-blue-700 text-lg">
                                    Isi Judul
                                </h4>
                                <p class="text-gray-600 text-sm">
                                    Isi deskripsi
                                </p>
                            </div>
                        </div>
                        <div class="flex items-center space-x-4 bg-white rounded-lg shadow p-4">
                            <img alt="Ikon dukungan pelanggan berwarna biru dengan simbol headset"
                                class="w-16 h-16 object-contain" height="64" loading="lazy"
                                src="<?php echo e(url('/assets/static/images/blank.png')); ?>" width="64" />
                            <div>
                                <h4 class="font-semibold text-blue-700 text-lg">
                                    Isi Judul
                                </h4>
                                <p class="text-gray-600 text-sm">
                                    Isi deskripsi
                                </p>
                            </div>
                        </div>
                    <?php else: ?>
                        <?php $__currentLoopData = $home_features; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $feature): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="flex items-center space-x-4 bg-white rounded-lg shadow p-4">
                                <img alt="Ikon kecepatan internet berwarna biru dengan simbol petir"
                                    class="w-16 h-16 object-contain" height="64" loading="lazy"
                                    src="<?php echo e(asset('storage/images/' . $feature->images)); ?>" width="64" />
                                <div>
                                    <h4 class="font-semibold text-blue-700 text-lg">
                                        <?php echo e($feature->title); ?>

                                    </h4>
                                    <p class="text-gray-600 text-sm">
                                        <?php echo e($feature->description); ?>

                                    </p>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <?php endif; ?>
                </div>
                
                <div class="mt-12 bg-white rounded-lg shadow p-6 max-w-7xl mx-auto">
                    <h3 class="text-2xl font-semibold text-blue-700 mb-6 text-center">Coverage Area</h3>
                    <div class="flex flex-wrap justify-start gap-6 text-gray-700 text-base">
                        <div class="flex-1 min-w-[150px] max-w-[220px]">
                            <h4 class="font-semibold text-lg text-blue-600 mb-2 text-left">Karanganyar</h4>
                        </div>
                        <div class="flex-1 min-w-[150px] max-w-[220px]">
                            <h4 class="font-semibold text-lg text-blue-600 mb-2 text-left">Boyolali</h4>
                        </div>
                        <div class="flex-1 min-w-[150px] max-w-[220px]">
                            <h4 class="font-semibold text-lg text-blue-600 mb-2 text-left">Sukoharjo</h4>
                        </div>
                        <div class="flex-1 min-w-[150px] max-w-[220px]">
                            <h4 class="font-semibold text-lg text-blue-600 mb-2 text-left">Surakarta</h4>
                        </div>
                      <div class="flex-1 min-w-[150px] max-w-[220px]">
                            <h4 class="font-semibold text-lg text-blue-600 mb-2 text-left">Salatiga</h4>
                        </div>
                    </div>
                </div>

            </div>


        </section>
        
        <!-- Pricing Section -->


        <section class="bg-white py-16 fade-in-section" id="pricing-section">
            <div aria-hidden="true" class="animated-bg">
                <div class="circle circle1">
                </div>
                <div class="circle circle2">
                </div>
                <div class="circle circle3">
                </div>
                <div class="circle circle4">
                </div>
            </div>
            <h2 class="text-3xl font-extrabold text-center text-blue-700 mb-12">
                Pricing Plans
            </h2>
            <div class="max-w-5xl mx-auto space-y-12">
                <!-- Home Plans -->
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-blue-600 pb-2 text-center">
                        Home Plans
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">

                        <?php if($homePackages->isEmpty()): ?>
                            <div
                                class="border rounded-xl p-8 shadow-lg hover:shadow-2xl transition bg-blue-50 flex flex-col">
                                <h4 class="text-xl font-semibold text-blue-700 mb-4 text-center">
                                    Isi Nama Paket
                                    <p class="text-3xl font-extrabold text-gray-900 mb-6 text-center">
                                        Isi Harga
                                        <span class="text-sm font-medium">
                                            /Bulan
                                        </span>
                                    </p>
                                    <ul class="space-y-3 text-gray-800 text-sm flex-grow">
                                        <li class="flex items-center gap-3">
                                            <i class="fas fa-check-circle text-blue-600 text-lg flex-shrink-0">
                                            </i>
                                            Isi Fitur Paket
                                        </li>
                                        <li class="flex items-center gap-3">
                                            <i class="fas fa-check-circle text-blue-600 text-lg flex-shrink-0">
                                            </i>
                                            Isi Fitur Paket
                                        </li>

                                    </ul>
                                    <a class="mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow-md transition text-center block"
                                        href="form.html?plan=25 Mbps - $200">
                                        Daftar
                                        Sekarang
                                    </a>
                            </div>
                        <?php else: ?>
                            <?php $__currentLoopData = $homePackages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $home): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div
                                    class="border rounded-xl p-8 shadow-lg hover:shadow-2xl transition bg-blue-50 flex flex-col">
                                    <h4 class="text-xl font-semibold text-blue-700 mb-4 text-center">
                                        <?php echo e($home->name); ?>

                                    </h4>
                                    <p class="text-3xl font-extrabold text-gray-900 mb-6 text-center">
                                        <?php echo e($home->price); ?>

                                        <span class="text-sm font-medium">
                                            /Bulan
                                        </span>
                                    </p>
                                    <ul class="space-y-3 text-gray-800 text-sm flex-grow">
                                        <?php $__currentLoopData = $homePackagesFeatures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $features): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li class="flex items-center gap-3">
                                                <i class="fas fa-check-circle text-blue-600 text-lg flex-shrink-0">
                                                </i>
                                                <?php echo e($features->name); ?>

                                            </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


                                    </ul>
                                    <a class="mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow-md transition text-center block"
                                        href="<?php echo e(route('form.index', ['package' => $home->name])); ?>">
                                        Daftar
                                        Sekarang
                                    </a>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endif; ?>
                    </div>
                </div>
                <!-- Corporate Plans -->
                <div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-6 border-b-2 border-blue-600 pb-2 text-center">
                        Corporate Plans
                    </h3>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-8">

                        <?php if($corporatesPackages->isEmpty()): ?>
                            <div
                                class="border rounded-xl p-8 shadow-lg hover:shadow-2xl transition bg-blue-50 flex flex-col">
                                <h4 class="text-xl font-semibold text-blue-700 mb-4 text-center">
                                    Isi Nama Paket
                                    <p class="text-3xl font-extrabold text-gray-900 mb-6 text-center">
                                        Isi Harga
                                        <span class="text-sm font-medium">
                                            /Bulan
                                        </span>
                                    </p>
                                    <ul class="space-y-3 text-gray-800 text-sm flex-grow">
                                        <li class="flex items-center gap-3">
                                            <i class="fas fa-check-circle text-blue-600 text-lg flex-shrink-0">
                                            </i>
                                            Isi Fitur Paket
                                        </li>
                                        <li class="flex items-center gap-3">
                                            <i class="fas fa-check-circle text-blue-600 text-lg flex-shrink-0">
                                            </i>
                                            Isi Fitur Paket
                                        </li>

                                    </ul>
                                    <a class="mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow-md transition text-center block"
                                        href="form.html?plan=25 Mbps - $200">
                                        Daftar
                                        Sekarang
                                    </a>
                            </div>
                        <?php else: ?>
                            <?php $__currentLoopData = $corporatesPackages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $corporates): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <div
                                    class="border rounded-xl p-8 shadow-lg hover:shadow-2xl transition bg-blue-50 flex flex-col">
                                    <h4 class="text-xl font-semibold text-blue-700 mb-4 text-center">
                                        <?php echo e($corporates->name); ?>

                                    </h4>
                                    <p class="text-3xl font-extrabold text-gray-900 mb-6 text-center">
                                        <?php echo e($corporates->price); ?>

                                        <span class="text-sm font-medium">
                                            /Bulan
                                        </span>
                                    </p>
                                    <ul class="space-y-3 text-gray-800 text-sm flex-grow">
                                        <?php $__currentLoopData = $corporatesPackagesFeatures; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $features): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li class="flex items-center gap-3">
                                                <i class="fas fa-check-circle text-blue-600 text-lg flex-shrink-0">
                                                </i>
                                                <?php echo e($features->name); ?>

                                            </li>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


                                    </ul>
                                    <a class="mt-6 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg shadow-md transition text-center block"
                                        href="<?php echo e(route('form.index', ['package' => $corporates->name])); ?>">
                                        Daftar
                                        Sekarang
                                    </a>
                                </div>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </section>
        <!-- Vision and mision Section -->
        <section class="bg-blue-50 px-4 sm:px-10 py-16 fade-in-section " id="vision-section">
            <div aria-hidden="true" class="animated-bg">
                <div class="circle circle1">
                </div>
                <div class="circle circle2">
                </div>
                <div class="circle circle3">
                </div>
                <div class="circle circle4">
                </div>
            </div>
            <h2 class="text-3xl font-extrabold text-center text-blue-700 mb-12">
                Visi &amp; misi
            </h2>
            <div class="max-w-4xl mx-auto space-y-8 text-gray-800 text-lg">
                <div>
                    <h3 class="text-2xl font-semibold mb-3 text-blue-600">
                        Visi
                    </h3>
                    <?php if($visions == null): ?>
                        <p>
                            Isi Data Visi Dahulu
                        </p>
                    <?php else: ?>
                        <p><?php echo e($visions->vision); ?></p>
                    <?php endif; ?>
                </div>
                <div>
                    <h3 class="text-2xl font-semibold mb-3 text-blue-600">
                        Misi
                    </h3>
                    <ul class="list-disc list-inside space-y-2">

                        <?php if($missions->isEmpty()): ?>
                            <li>
                                Isi Data Misi Dahulu
                            </li>
                        <?php else: ?>
                            <?php $__currentLoopData = $missions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $misi): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <?php echo e($misi->mission); ?>

                                </li>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        <?php endif; ?>


                    </ul>
                </div>
            </div>
        </section>
        <!-- Our Clients Section -->
        <section class="py-16 bg-white fade-in-section" id="clients-section">
            <h2 class="text-3xl font-extrabold text-center text-blue-700 mb-12">
                Our Clients
            </h2>
            <div class="scrolling-container overflow-hidden">
                <div aria-label="Daftar logo klien yang bergerak horizontal terus menerus" class="scrolling-wrapper"
                    role="list">

                    <?php if($client->isEmpty()): ?>

                        <img alt="Logo klien 1, desain logo perusahaan teknologi berwarna biru dan putih"
                            class="object-contain max-h-16 mx-6" height="60" loading="lazy" role="listitem"
                            src="https://storage.googleapis.com/a1aa/image/bc5da7a5-7898-4944-b855-903a44a8f3d4.jpg"
                            width="120" />
                        <img alt="Logo klien 2, desain logo perusahaan media dengan warna oranye dan hitam"
                            class="object-contain max-h-16 mx-6" height="60" loading="lazy" role="listitem"
                            src="https://storage.googleapis.com/a1aa/image/5b572996-982c-4ce5-23a8-a19336a9b450.jpg"
                            width="120" />
                        <img alt="Logo klien 3, desain logo perusahaan telekomunikasi berwarna hijau dan putih"
                            class="object-contain max-h-16 mx-6" height="60" loading="lazy" role="listitem"
                            src="https://storage.googleapis.com/a1aa/image/cab15d8d-faa2-4790-affe-2f1893267a9f.jpg"
                            width="120" />
                    <?php else: ?>
                        <?php $__currentLoopData = $client; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $clients): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <img alt="<?php echo e($clients->name); ?>" class="object-contain max-h-16 mx-6" height="60"
                                loading="lazy" role="listitem"
                                src="<?php echo e(asset('storage/images/' . $clients->images)); ?>" width="120" />
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    <?php endif; ?>

                </div>
            </div>
        </section>
        <!-- Contact Section -->
        
        <section class="bg-blue-700 text-white py-16 fade-in-section" id="contact-section">
            <h2 class="text-3xl font-extrabold text-center mb-12">
                Contact Us
            </h2>
            <div class="max-w-7xl mx-auto flex flex-col md:flex-row gap-12 px-4 sm:px-8">
                <div class="md:w-1/2 rounded-lg overflow-hidden shadow-lg border-4 border-white h-80 sm:h-[400px]">

                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d247.195622504992!2d110.81511391403427!3d-7.560806312164044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a16845f5de451%3A0x31fd9d2e40d69e58!2sJl.%20Prof.%20DR.%20Supomo%20No.72%2C%20Punggawan%2C%20Kec.%20Banjarsari%2C%20Kota%20Surakarta%2C%20Jawa%20Tengah%2057139!5e0!3m2!1sid!2sid!4v1756799723345!5m2!1sid!2sid"
                        height="400" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade" class="w-full h-full object-cover"></iframe>
                </div>
                <div class="md:w-1/2 flex flex-col justify-center space-y-10 px-4 sm:px-8">
                    <div class="flex items-center space-x-6">
                        <i class="fas fa-map-marker-alt fa-3x text-white flex-shrink-0">
                        </i>
                        <address class="not-italic text-lg leading-relaxed">
                            <?php if($setting == null): ?>
                                Isi Data alamat
                            <?php else: ?>
                                <?php echo e($setting->address); ?>

                            <?php endif; ?>
                        </address>
                    </div>
                    <div class="flex items-center space-x-6">
                        <i class="fas fa-envelope fa-3x text-white flex-shrink-0">
                        </i>
                        <a class="underline hover:text-gray-200 text-lg break-words"
                            href="mailto:admin@sukmamedia.com">
                            <?php if($setting == null): ?>
                                Isi Data email
                            <?php else: ?>
                                <?php echo e($setting->email); ?>

                            <?php endif; ?>
                        </a>
                    </div>
                    <div class="flex items-center space-x-6">
                        <i class="fas fa-phone fa-3x text-white flex-shrink-0">
                        </i>
                        <a class="underline hover:text-gray-200 text-lg" href="tel:+6287847424666">
                            <?php if($setting == null): ?>
                                Isi Data nomor telepon
                            <?php else: ?>
                                <?php echo e($setting->phone); ?>

                            <?php endif; ?>
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer class="bg-white border-t border-gray-200 py-6 mt-12">
        <div class="max-w-7xl mx-auto px-6 sm:px-12 lg:px-16 text-center text-gray-600 text-sm">
            © 2025 <?php echo e(isset($setting) ? $setting->name : '{Nama Perusahaan}'); ?>. All rights reserved.
        </div>
    </footer>

    <script>
        const menuButton = document.getElementById("mobile-menu-button");
        const mobileMenu = document.getElementById("mobile-menu");
        menuButton.addEventListener("click", () => {
            mobileMenu.classList.toggle("hidden");
        });

        // Intersection Observer for fade-in animation on scroll
        const faders = document.querySelectorAll('.fade-in-section');

        const appearOptions = {
            threshold: 0.1,
            rootMargin: "0px 0px -50px 0px"
        };

        const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
            entries.forEach(entry => {
                if (!entry.isIntersecting) {
                    // Remove is-visible to allow re-trigger if scrolling back up
                    entry.target.classList.remove('is-visible');
                    return;
                } else {
                    entry.target.classList.add('is-visible');
                    // Optionally unobserve if you want animation only once
                    // appearOnScroll.unobserve(entry.target);
                }
            });
        }, appearOptions);

        faders.forEach(fader => {
            appearOnScroll.observe(fader);
        });
    </script>
    <script>
        let slideIndex = 0;
        showSlides();

        function showSlides() {
            let i;
            let slides = document.getElementsByClassName("mySlides");
            let dots = document.getElementsByClassName("dot");
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            slideIndex++;
            if (slideIndex > slides.length) {
                slideIndex = 1
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
            setTimeout(showSlides, 3000); // Change image every 2 seconds
        }
    </script>
 <?php echo $__env->make('sweetalert::alert', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
</body>

</html>
<?php /**PATH /var/www/html/Compro-ISP/resources/views/v/landingpage/index.blade.php ENDPATH**/ ?>