FileMgr

✏️ /home/mien4214/public_html/webcp-lama/app/Views/kontak/index.php

✕ Tutup

<?= $this->extend('layout/wrapper') ?>

<?= $this->section('style') ?>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&display=swap" rel="stylesheet">
<style>
    :root {
        --neo-bg: #FDF4E3;          
        --neo-dark: #181818; 
        --neo-red: #D41343;         
        --neo-yellow: #FFD13B;      
        --neo-pink: #FFB3C6;       
        --neo-blue: #A2D2FF;       
        --neo-white: #ffffff;
        
        --border-thick: 3px solid var(--neo-dark);
        --radius-medium: 16px;
        --radius-large: 24px;
    }

body {
        font-family: 'Space Grotesk', sans-serif;
        color: var(--neo-dark);
        background-color: var(--neo-bg);
    }

/* --- PAGE TITLE --- */
    .neo-page-title {
        font-size: 3.5rem;
        text-align: center;
        margin-bottom: 15px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--neo-dark);
        text-shadow: 4px 4px 0px var(--neo-yellow);
        letter-spacing: -1px;
    }

.badge-title {
        background: var(--neo-dark);
        color: var(--neo-white);
        padding: 8px 25px;
        border-radius: 50px;
        font-size: 1.2rem;
        font-weight: 800;
        display: inline-block;
        box-shadow: 4px 4px 0px var(--neo-red);
        transform: rotate(-2deg);
        border: 2px solid var(--neo-dark);
        text-transform: uppercase;
    }

/* --- CONTACT INFO CARDS --- */
    .neo-info-box {
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 30px;
        box-shadow: 6px 6px 0px var(--neo-dark);
        transition: 0.3s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

.neo-info-box:hover {
        transform: translate(-3px, -3px);
        box-shadow: 9px 9px 0px var(--neo-red);
    }

.neo-icon-wrap {
        width: 60px;
        height: 60px;
        background: var(--neo-white);
        border: 2px solid var(--neo-dark);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: var(--neo-dark);
        margin-bottom: 20px;
        box-shadow: 3px 3px 0px var(--neo-dark);
        transform: rotate(-3deg);
    }

.neo-info-box h3 {
        font-size: 1.4rem;
        font-weight: 800;
        color: var(--neo-dark);
        margin-bottom: 10px;
        text-transform: uppercase;
    }

.neo-info-box p {
        font-size: 1rem;
        font-weight: 600;
        color: var(--neo-dark);
        margin-bottom: 0;
        line-height: 1.6;
    }

/* --- GOOGLE MAPS WRAPPER --- */
    .neo-map-wrapper {
        border: var(--border-thick);
        border-radius: var(--radius-large);
        overflow: hidden;
        box-shadow: 8px 8px 0px var(--neo-dark);
        height: 100%;
        min-height: 450px;
        background: var(--neo-white);
        position: relative;
    }

/* Memaksa iframe maps memenuhi kontainer */
    .neo-map-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        border: none !important;
    }

@media only screen and (max-width: 768px) {
        .neo-page-title { font-size: 2.5rem; }
        .neo-map-wrapper { min-height: 350px; margin-top: 20px; }
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<main id="main" style="padding-top: 100px; padding-bottom: 80px;">

<section id="contact" class="mt-4">
        
        <div class="container">
            <div class="text-center mb-5">
                <div class="badge-title mb-2">📞 KAMI SIAP MEMBANTU</div>
                <h1 class="neo-page-title"><?= $title ?></h1>
            </div>
        </div>

<div class="container">
            <div class="row align-items-stretch g-4">
                
                <div class="col-lg-6">
                    <div class="row g-4 h-100">
                        
                        <div class="col-12">
                            <div class="neo-info-box" style="background-color: var(--neo-yellow);">
                                <div class="neo-icon-wrap">
                                    <i class="bx bx-map"></i>
                                </div>
                                <div>
                                    <h3>📍 Alamat Pusat</h3>
                                    <p><?= nl2br($konfigurasi['alamat']) ?></p>
                                </div>
                            </div>
                        </div>

<div class="col-md-6">
                            <div class="neo-info-box" style="background-color: var(--neo-pink);">
                                <div class="neo-icon-wrap" style="transform: rotate(3deg);">
                                    <i class="bx bx-envelope"></i>
                                </div>
                                <div>
                                    <h3>✉️ Email</h3>
                                    <p><?= nl2br($konfigurasi['email']) ?></p>
                                </div>
                            </div>
                        </div>

<div class="col-md-6">
                            <div class="neo-info-box" style="background-color: var(--neo-blue);">
                                <div class="neo-icon-wrap" style="transform: rotate(-3deg);">
                                    <i class="bx bx-phone-call"></i>
                                </div>
                                <div>
                                    <h3>☎️ Telepon/WA</h3>
                                    <p><?= nl2br($konfigurasi['telepon']) ?></p>
                                </div>
                            </div>
                        </div>

</div>
                </div>

</div>
        </div>
      
    </section>
</main>
<?= $this->endSection() ?>

Batal

⬅ Views 1 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 index.php	php	6.3 KB	25/02/26 15:47	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission