FileMgr

✏️ /home/mien4214/public_html/webcp-lama/app/Views/about/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;
    }

/* --- HERO IMAGES --- */
    .hero-img-box {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        overflow: hidden;
        height: 200px;
        box-shadow: 6px 6px 0px var(--neo-dark);
        transition: 0.3s;
    }
    .hero-img-box:hover {
        transform: translateY(-5px);
        box-shadow: 8px 8px 0px var(--neo-red);
    }
    .hero-img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .hero-img-1 { transform: rotate(-3deg); background: var(--neo-yellow); }
    .hero-img-2 { transform: rotate(2deg); background: var(--neo-pink); }
    .hero-img-3 { transform: rotate(-2deg); background: var(--neo-blue); }
    .hero-img-4 { transform: rotate(3deg); background: var(--neo-white); }

/* --- INFO BOX --- */
    .info-box {
        background: var(--neo-white);
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 40px;
        box-shadow: 8px 8px 0px var(--neo-dark);
    }
    .info-box h3 {
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 20px;
        color: var(--neo-dark);
    }
    .info-box p, .info-box li {
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.6;
        margin-bottom: 15px;
    }

/* --- STAT CARDS --- */
    .stat-card {
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 25px 15px;
        text-align: center;
        box-shadow: 5px 5px 0px var(--neo-dark);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: var(--neo-white);
    }
    .stat-icon {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }
    .stat-num {
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.2;
        color: var(--neo-dark);
    }
    .stat-label {
        font-size: 1rem;
        font-weight: 700;
    }

.benefit-card {
        border: var(--border-thick);
        border-radius: var(--radius-large);
        padding: 20px;
        background: var(--neo-white);
        box-shadow: 4px 4px 0px var(--neo-dark);
        margin-bottom: 25px;
        position: relative;
        animation: float-popup 3s ease-in-out infinite; 
    }
    
    .benefit-card.delay-1 { animation-delay: 0s; }
    .benefit-card.delay-2 { animation-delay: 0.7s; }
    .benefit-card.delay-3 { animation-delay: 1.4s; }

@keyframes float-popup {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

.benefit-card h4 {
        font-weight: 800;
        font-size: 1.1rem;
        margin-bottom: 5px;
    }
    .benefit-card p {
        font-weight: 600;
        font-size: 0.85rem;
        margin-bottom: 0;
    }

.center-showcase-img {
        width: 100%;
        max-width: 380px;
        display: block;
        margin: 0 auto;
        filter: drop-shadow(10px 10px 0px var(--neo-yellow));
        transition: transform 0.3s ease;
    }
    
    .center-showcase-img:hover {
        transform: scale(1.05);
        filter: drop-shadow(12px 12px 0px var(--neo-red));
    }

/* --- FLOATING MINI CARD --- */
    .floating-quote {
        position: absolute;
        bottom: -20px;
        right: -20px;
        background: var(--neo-white);
        border: var(--border-thick);
        border-radius: var(--radius-medium);
        padding: 15px 25px;
        box-shadow: 6px 6px 0px var(--neo-dark);
        max-width: 250px;
        z-index: 10;
    }
    .floating-quote p {
        font-size: 0.9rem;
        font-weight: 700;
        font-style: italic;
        margin: 0;
    }
    .floating-quote span {
        display: block;
        font-size: 0.75rem;
        font-weight: 800;
        color: var(--neo-red);
        margin-top: 5px;
    }

@media only screen and (max-width: 768px) {
        .neo-page-title { font-size: 2.5rem; }
        .hero-img-box { height: 120px; margin-bottom: 15px; transform: none !important; }
        .center-showcase-img { margin-bottom: 40px; margin-top: 20px; max-width: 450px; }
        .floating-quote { position: relative; bottom: 0; right: 0; margin: -20px auto 20px auto; transform: rotate(-2deg); }
    }
</style>
<?= $this->endSection() ?>

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

<section class="container">
        <div class="text-center mb-5">
            <h1 class="neo-page-title">TENTANG KAMI</h1>
            <p style="font-weight: 600; font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
                <?= $tentang['sub_tentang'] ?? 'Deskripsi singkat tentang kami akan tampil di sini.' ?>
            </p>
        </div>

<div class="row g-3 d-none d-md-flex">
            <?php 
            // Cek apakah ada data gambar
            if (!empty($galeri_tentang)) : 
                $i = 1;
                foreach($galeri_tentang as $gt) : 
                    // Menjaga agar class warna/putaran (1, 2, 3, 4) bisa berulang (opsional jika gambarnya kurang/lebih dari 4)
                    $img_class = ($i % 4 == 0) ? 4 : ($i % 4); 
            ?>
                <div class="col-md-3">
                    <div class="hero-img-box hero-img-<?= $img_class ?>">
                        <img src="<?= base_url('assets/upload/image/' . $gt['gambar']) ?>" alt="<?= $gt['judul_galeri'] ?>">
                    </div>
                </div>
            <?php 
                $i++;
                endforeach; 
            else : 
            ?>
                <div class="col-12 text-center text-muted">
                    <p><i>Belum ada galeri gambar tentang kami.</i></p>
                </div>
            <?php endif; ?>
        </div>
    </section>

<section class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5 position-relative">
                <div class="hero-img-box" style="height: 450px; transform: none; box-shadow: 10px 10px 0px var(--neo-dark);">
                    <img src="<?= base_url('assets/upload/image/aboutnyinyir.jpeg') ?>" alt="Mie Nyinyir Team">
                </div>
                
                <div class="floating-quote">
                    <p>"Kepuasan perut dan lidah pelanggan adalah prioritas utama kami."</p>
                    <span>- Founder Mie Nyinyir</span>
                </div>
            </div>

<div class="col-lg-7">
                <div class="info-box" style="background-color: var(--neo-yellow);">
                    <h3>PROFIL KAMI</h3>
                    <?= $tentang['profil'] ?? '<p>Profil perusahaan akan tampil di sini.</p>' ?>
                </div>
            </div>
        </div>
    </section>

<section class="container">
        <div class="row g-4">
            <div class="col-md-4">
                <div class="stat-card" style="background: var(--neo-pink);">
                    <div class="stat-icon">🏬</div>
                    <div class="stat-num"><?= $total_toko ?></div>
                    <div class="stat-label">Total Cabang Aktif</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-card" style="background: var(--neo-yellow);">
                    <div class="stat-icon">🤩</div>
                    <div class="stat-num"><?= number_format($total_pelanggan, 0, ',', '.') ?>+</div>
                    <div class="stat-label">Pelanggan Puas</div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="stat-card" style="background: var(--neo-blue);">
                    <div class="stat-icon">🍜</div>
                    <div class="stat-num"><?= $total_menu ?></div>
                    <div class="stat-label">Varian Menu Spesial</div>
                </div>
            </div>
        </div>
    </section>

<section class="container benefit-section">
        <div class="text-center mb-5">
            <h2 class="neo-page-title" style="font-size: 2.8rem;">KENAPA PILIH KAMI?</h2>
        </div>

<div class="row align-items-center text-md-end text-center flex-column-reverse flex-md-row">
            
            <div class="col-md-4 mt-4 mt-md-0">
                <div class="benefit-card delay-1" style="background: var(--neo-yellow);">
                    <h4>💯 100% Halal MUI</h4>
                    <p>Bahan dan proses terjamin halal untuk dikonsumsi semua kalangan.</p>
                </div>
                <div class="benefit-card delay-2">
                    <h4>🥗 Tanpa Pengawet</h4>
                    <p>Bahan baku segar diproduksi sendiri demi menjaga kualitas rasa.</p>
                </div>
                <div class="benefit-card delay-3" style="background: var(--neo-pink);">
                    <h4>🔥 Level Pedas Bebas</h4>
                    <p>Atur sendiri level pedasmu dari yang manja sampai bikin nangis!</p>
                </div>
            </div>

<div class="col-md-4 text-center">
                <img src="<?= base_url('assets/upload/image/about_food.png') ?>" alt="Mie Pedas PNG" class="center-showcase-img">
            </div>

<div class="col-md-4 text-md-start text-center mt-4 mt-md-0">
                <div class="benefit-card delay-2">
                    <h4>💸 Harga Pelajar</h4>
                    <p>Makan enak dan mewah nggak perlu takut dompet jadi tipis.</p>
                </div>
                <div class="benefit-card delay-1" style="background: var(--neo-blue);">
                    <h4>🛋️ Tempat Nyaman</h4>
                    <p>Cocok banget buat nongkrong santai bareng keluarga atau bestie.</p>
                </div>
                <div class="benefit-card delay-3">
                    <h4>🛵 Pesan Antar Cepat</h4>
                    <p>Tersedia di berbagai aplikasi ojol favoritmu, tinggal klik langsung sampai.</p>
                </div>
            </div>

</div>
    </section>

<section class="container">
        <div class="info-box box-red" style="background: var(--neo-red); color: var(--neo-white);">
            <div class="row align-items-center">
                <div class="col-md-6 border-md-end border-dark pe-md-5">
                    <h3 style="border-bottom-color: var(--neo-yellow); color: var(--neo-yellow);">👁️ VISI</h3>
                    <p>
                        <?= $tentang['visi'] ?? 'Visi perusahaan akan tampil di sini.' ?>
                    </p>
                </div>
                <div class="col-md-6 ps-md-5 mt-4 mt-md-0">
                    <h3 style="border-bottom-color: var(--neo-yellow); color: var(--neo-yellow);">🚀 MISI</h3>
                    <ul style="padding-left: 15px; margin: 0;">
                        <?= $tentang['misi'] ?? '<li>Misi perusahaan akan tampil di sini.</li>' ?>
                    </ul>
                </div>
            </div>
        </div>
    </section>

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

Batal

⬅ Views 1 item

Nama	Tipe	Ukuran	Diubah	Perm	Aksi
🐘 index.php	php	12.2 KB	27/02/26 10:19	0644	✏️ ⬇

✏️ Rename

🔑 Ubah Permission