Dashboard Admin - Water Chiller JMeagle

🦶 Edit Design Footer

Judul Footer

Teks / Copyright Footer

/* Pembagian Kolom Responsif */
    .jm-branch-col {
        flex: 1 1 300px;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

/* Kolom Brand / Logo (Diubah ke tengah secara vertikal) */
    .jm-brand-col {
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-bottom: 15px;
    }

/* Mengatasi Logo Hitam & Diperbesar Sedikit */
    .jm-logo-img {
        max-width: 100%;
        max-height: 110px; /* Ukuran dinaikkan dari 80px agar sedikit lebih besar */
        width: auto;
        height: auto;
        object-fit: contain;
        margin-bottom: 12px;
        /* Trik filter membuat teks logo hitam berubah terang saat background gelap */
        filter: drop-shadow(0px 0px 1px rgba(255,255,255,0.8)) brightness(1.2);
        background: rgba(255, 255, 255, 0.9); /* Opsi alternatif: beri background putih lembut di sekitar logo */
        padding: 8px 12px;
        border-radius: 8px;
    }

.jm-brand-text {
        font-size: 0.9rem;
        line-height: 1.5;
        opacity: 0.9;
        font-weight: 500;
        color: inherit;
    }

/* Judul Kolom */
    .jm-main-title {
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 16px;
        text-align: center;
        color: inherit;
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 8px;
    }

/* List Kontak Kartu Modern dengan Kontras Tinggi */
    .jm-contact-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 16px;
    }

.jm-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Latar belakang kartu kontras */
        background: rgba(255, 255, 255, 0.1); 
        padding: 12px 14px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

.jm-item:hover {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.18);
    }

.jm-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
    }

/* Label Dibuat Lebih Terang & Jelas */
    .jm-label {
        font-size: 0.72rem;
        text-transform: uppercase;
        color: #60a5fa; /* Warna biru muda terang agar menonjol di latar gelap */
        font-weight: 700;
        letter-spacing: 0.5px;
    }

.jm-value a {
        font-size: 0.9rem;
        color: #ffffff !important; /* Paksa warna teks putih agar selalu terbaca */
        text-decoration: none;
        font-weight: 600;
    }

.jm-value a:hover {
        color: #93c5fd !important;
        text-decoration: underline;
    }

/* Tombol WhatsApp */
    .btn-modern-wa {
        background: #25D366;
        color: #ffffff !important;
        padding: 6px 14px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        text-decoration: none;
        box-shadow: 0 2px 8px rgba(37, 211, 102, 0.4);
        transition: transform 0.2s ease, background-color 0.2s ease;
        display: inline-flex;
        align-items: center;
        margin-left: 8px;
        white-space: nowrap;
    }

.btn-modern-wa:hover {
        background: #1eb857;
        transform: scale(1.04);
    }

/* Kotak Lokasi & Peta */
    .jm-location-box {
        background: rgba(255, 255, 255, 0.08);
        padding: 14px;
        border-radius: 10px;
        margin-top: auto;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

.jm-loc-title {
        font-size: 0.8rem;
        font-weight: 700;
        margin-bottom: 6px;
        display: block;
        letter-spacing: 0.5px;
        color: #60a5fa;
    }

.jm-address {
        font-size: 0.85rem;
        line-height: 1.4;
        margin: 0 0 10px 0;
        color: #e2e8f0;
    }

.jm-map-wrapper {
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        height: 130px;
    }

.jm-map-wrapper iframe {
        width: 100%;
        height: 100%;
        border: 0;
    }

/* Copyright Footer */
    .jm-copyright {
        width: 100%;
        text-align: center;
        font-size: 0.8rem;
        color: #94a3b8;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 15px;
        margin-top: 10px;
    }

/* Mobile Responsive */
    @media (max-width: 768px) {
        .jm-modern-footer {
            padding: 20px 16px 15px 16px;
            gap: 20px;
        }

.jm-branch-col {
            flex: 1 1 100%;
        }

.jm-brand-col {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 20px;
        }
    }
</style>

<div class="jm-modern-footer">
    
    <div class="jm-branch-col jm-brand-col">
        <img class="jm-logo-img" src="https://www.jmeaglecompressor.com/wp-content/uploads/2021/04/logo.png" alt="JM Eagle Compressor Industries">
        <div class="jm-brand-text">
            Situs resmi PT. Nusantara Teknik Utama
        </div>
    </div>

<div class="jm-branch-col">
        <div class="jm-main-title">Sales Surabaya</div>
        
        <div class="jm-contact-list">
            <div class="jm-item">
                <div class="jm-info">
                    <span class="jm-label">E-mail</span>
                    <span class="jm-value"><a href="mailto:yahya@jmeaglecompressor.com">yahya@jmeaglecompressor.com</a></span>
                </div>
            </div>
            
            <div class="jm-item">
                <div class="jm-info">
                    <span class="jm-label">CS Surabaya 2</span>
                    <span class="jm-value"><a href="tel:081548381199">0815-4838-1199</a></span>
                </div>
                <a class="btn-modern-wa" href="https://api.whatsapp.com/send?phone=6281548381199&text=Hai%20Admin,%20Sales%20/%20Marketing%20Surabaya,%20Klik%20dari%20https://www.jmeaglecompressor.com/%20Saya%20Mau%20Order%20Produk%20(.....)%20Apa%20Bisa%20Dibantu?" target="_blank" rel="noopener">WhatsApp</a>
            </div>
            
        </div>

<div class="jm-location-box">
            <span class="jm-loc-title">WORKSHOP SURABAYA</span>
            <p class="jm-address">Jl. Raya Larangan KM.28 Driyorejo – Gresik</p>
            <div class="jm-map-wrapper">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3844.1125308582696!2d112.5765761790389!3d-7.381505778149606!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e78085c8b418061%3A0x6ea562c6804ced24!2sTeknik%20Utama!5e0!3m2!1sid!2sid!4v1679293983761!5m2!1sid!2sid" loading="lazy"></iframe>
            </div>
        </div>
    </div>

<div class="jm-branch-col">
        <div class="jm-main-title">Sales Solo</div>
        
        <div class="jm-contact-list">
            
            <div class="jm-item">
                <div class="jm-info">
                    <span class="jm-label">CS Solo 1</span>
                    <span class="jm-value"><a href="tel:081548381199">0815-4838-1199</a></span>
                </div>
                <a class="btn-modern-wa" href="https://api.whatsapp.com/send?phone=6281548381199&text=Hai%20Admin,%20Sales%20/%20Marketing%20Solo,%20Klik%20dari%20https://www.jmeaglecompressor.com/%20Saya%20Mau%20Order%20Produk%20(.....)%20Apa%20Bisa%20Dibantu?" target="_blank" rel="noopener">WhatsApp</a>
            </div>
            
        </div>

<div class="jm-location-box">
            <span class="jm-loc-title">WORKSHOP SOLO</span>
            <p class="jm-address">Jl. Adi Sumarmo No. 4-5 Kartasura, Solo, Jawa Tengah 57169</p>
            <div class="jm-map-wrapper">
                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7910.4197749892255!2d110.742279!3d-7.552078000000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e7a15c701b5d0f7%3A0x9df60e09473c19f6!2sTeknik%20Utama%20Solo!5e0!3m2!1sid!2sid!4v1679294096770!5m2!1sid!2sid" loading="lazy"></iframe>
            </div>
        </div>
    </div>