<?php 
// Security Headers
header("X-Frame-Options: SAMEORIGIN"); // cegah clickjacking
header("X-Content-Type-Options: nosniff"); // cegah MIME sniffing
header("X-XSS-Protection: 1; mode=block"); // cegah XSS di browser lama
header("Referrer-Policy: no-referrer-when-downgrade"); // batasi info referrer
header("Content-Security-Policy: default-src 'self' https: data:; script-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com; style-src 'self' https://cdn.jsdelivr.net https://fonts.googleapis.com 'unsafe-inline'; img-src 'self' data: https:; font-src 'self' https://fonts.gstatic.com;"); 
?>

<?php include 'header.php'; ?>

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PT Psiko Dinamika</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .sidebar {
            background-color: navy;
            color: white;
            padding: 15px;
            border-radius: 5px;
        }
        .sidebar h5 {
            background-color: #001f4d;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            border-radius: 5px;
        }
        .sidebar a {
            display: block;
            background-color: #003366;
            color: white;
            text-decoration: none;
            padding: 10px;
            margin: 5px 0;
            border-radius: 5px;
            text-align: center;
            font-weight: bold;
        }
        .sidebar a:hover {
            background-color: #0059b3;
        }
        .content {
            background: white;
            padding: 20px;
            border-radius: 5px;
        }
        
    </style>
</head>
<body>
    
<!-- CSS Fade-in & Paragraf Rapi -->
<style>
/* Efek fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Paragraf rapi */
.text-container {
    max-width: 900px;
    margin: 0 auto;
}
.text-container p {
    text-align: justify;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.text-container h2, 
.text-container h3 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
</style>

<div class="container my-4">
    <div class="row">
        <!-- Konten Utama -->
        <div class="col-md-8">
            <div class="text-container fade-in">
            <h1 class="fw-bold mb-4">Tentang PT Psiko Dinamika</h1>
            <p>Selamat datang di PT Psiko Dinamika, rumah bagi para penulis, peneliti, akademisi, dan 
pencinta ilmu pengetahuan. Kami adalah bagian dari PT. Psiko Dinamika, perusahaan yang 
bergerak di bidang penerbitan buku, jurnal artikel ilmiah, dan media berita online. 
Didirikan oleh Dr. Tugimin Supriyadi, S.Psi., MM., Psikolog, PT Psiko Dinamika hadir 
sebagai wadah untuk menyebarluaskan gagasan, pengetahuan, dan hasil riset dari berbagai 
disiplin ilmu—khususnya di bidang psikologi. Dengan komitmen terhadap kualitas, 
integritas, dan pengembangan ilmu pengetahuan, kami terus berinovasi dalam 
menghadirkan karya-karya terbaik untuk masyarakat luas.</p>
            <p>Bersama para pakar dan tenaga profesional yang kompeten di bidangnya, kami 
mengundang Anda untuk menjelajahi koleksi terbitan kami, berkontribusi dalam publikasi 
ilmiah, dan menjadi bagian dari gerakan literasi yang bermakna. </p>
            <p>PT Psiko Dinamika merupakan unit penerbitan yang didirikan oleh Dr. Tugimin 
Supriyadi, S.Psi., MM., Psikolog melalui PT. Psiko Dinamika, sebuah perusahaan yang 
bergerak di bidang penerbitan. PT. Psiko Dinamika berfokus pada tiga bidang utama, yaitu 
penerbitan buku, penerbitan jurnal artikel ilmiah, dan media berita online. Di bawah 
kepemimpinan Dr. Tugimin Supriyadi dan dukungan para pakar yang berkompeten di 
bidangnya, PT Psiko Dinamika telah menerbitkan berbagai karya berkualitas, terutama 
dalam bidang psikologi. Selain itu, penerbit ini juga terbuka untuk berbagai disiplin ilmu 
lain, menjadikannya sebagai wadah penerbitan lintas keilmuan yang mendorong 
pertumbuhan pengetahuan dan penelitian di Indonesia. </p>
        </div>
    </div>

        <!-- Sidebar -->
<div class="col-md-4">
    <div class="p-3 rounded" style="background-color:#001f4d; color:white;">
        <h5 class="text-center fw-bold mb-3">Menu Navigasi</h5>
        <!-- Button Visi & Misi -->
        <button class="btn btn-primary w-100 mb-2" style="background-color:#003366; border:none;" data-bs-toggle="modal" data-bs-target="#visiMisiModal">
            Visi & Misi
        </button>
        <!-- Tombol Kontak -->
        <button class="btn btn-primary w-100 mb-2" style="background-color:#003366; border:none;" data-bs-toggle="modal" data-bs-target="#kontakModal">
        Kontak
        </button>
        <!-- Button Copyright -->
        <button class="btn btn-primary w-100 mb-2" style="background-color:#003366; border:none;" data-bs-toggle="modal" data-bs-target="#copyrightModal">
            Copyright
        </button>
        <!-- Button Kebijakan Privasi -->
        <button class="btn btn-primary w-100 mb-2" style="background-color:#003366; border:none;" data-bs-toggle="modal" data-bs-target="#privasiModal">
            Kebijakan Privasi
        </button>
        <!-- Tombol Promo -->
<button class="btn btn-primary w-100 mb-2" style="background-color:#003366; border:none;" data-bs-toggle="modal" data-bs-target="#promoModal">
    Promo Spesial
</button>
    </div>
</div>

<!-- CSS Fade-in & Paragraf Rapi untuk Modal -->
<style>
/* Efek fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Paragraf rapi */
.modal-body p, 
.modal-body ol {
    text-align: justify;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.modal-body h5 {
    margin-top: 1rem;
    font-weight: bold;
}
</style>

<!-- Modal Visi & Misi -->
<div class="modal fade" id="visiMisiModal" tabindex="-1" aria-labelledby="visiMisiLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content fade-in">
            <div class="modal-header" style="background-color:#001f4d; color:white;">
                <h5 class="modal-title" id="visiMisiLabel">Visi & Misi</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container my-5">
                <div class="card shadow-sm p-4">
                <h5 class="fw-bold mb-3">Visi</h5>
                <p class="text-justify fade-in">Menjadi penerbit terpercaya dan unggul dalam penyebarluasan ilmu pengetahuan, khususnya di bidang psikologi, serta menjadi pelopor literasi akademik yang berkontribusi pada kemajuan intelektual bangsa.</p>
                
                <h5 class="fw-bold mt-4 mb-3">Misi</h5>
                <ol class="text-justify fade-in">
                    <li>Menerbitkan buku dan jurnal ilmiah yang berkualitas, relevan, dan berdampak bagi dunia akademik dan masyarakat luas.</li>
                    <li>Menyediakan platform publikasi yang terbuka, kredibel, dan terstandar bagi para penulis dan peneliti dari berbagai disiplin ilmu.</li>
                    <li>Mendorong pertumbuhan literasi ilmiah melalui media online yang informatif dan edukatif.</li>
                    <li>Menjalin kolaborasi dengan institusi pendidikan, profesional, dan komunitas ilmiah dalam pengembangan konten dan penelitian.</li>
                    <li>Menjadi jembatan antara dunia akademik dan publik melalui penyajian ilmu yang dapat diakses secara luas dan mudah dipahami.</li>
                </ol>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<!-- CSS tambahan -->
<style>
.text-justify {
  text-align: justify;
  line-height: 1.8;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<!-- Modal Kontak -->
<div class="modal fade" id="kontakModal" tabindex="-1" aria-labelledby="kontakLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#001f4d; color:white;">
                <h5 class="modal-title" id="kontakLabel">Kontak Kami</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container my-5">
                <div class="card shadow-sm p-4">
                <ol>
                <strong>Whatsapp:</strong> <a href="https://wa.me/6289512582226" target="_blank"><p>+62 895-1258-2226 (Mega Widya)</a></p>
                 <a href="https://wa.me/6281385250768" target="_blank"><p>+62 813 8525 0768 (Tiara Anggita Perdini)</a></p>
                
                 <p><strong>Instagram:</strong> <a href="https://instagram.com/psiko_dinamika" target="_blank">@psiko_dinamika</a></p>
                </ol>
                </div>
        </div>
    </div>
</div>
</div>
</div>

<!-- CSS Fade-in & Paragraf Rapi untuk Modal -->
<style>
/* Efek fade-in */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Paragraf rapi */
.modal-body p {
    text-align: justify;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.modal-body h5 {
    margin-top: 1rem;
    font-weight: bold;
}
</style>

<!-- Modal Copyright -->
<div class="modal fade" id="copyrightModal" tabindex="-1" aria-labelledby="copyrightLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content fade-in">
            <div class="modal-header" style="background-color:#001f4d; color:white;">
                <h5 class="modal-title" id="copyright">Copyright</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container my-5">
                <div class="card shadow-sm p-4 bg-transparent-custom">
                <p class="fw-bold mt-4 mb-3">Copyright © Psiko Dinamika </p>
                <p class="text-justify fade-in">Seluruh konten yang terdapat di dalam situs ini, termasuk namun tidak terbatas pada teks, 
gambar, grafik, logo, ikon, serta file digital lainnya, merupakan milik PT. Psiko Dinamika 
dan dilindungi oleh undang-undang hak cipta yang berlaku di Indonesia.  </p>
                <p class="text-justify fade-in">Dilarang keras menggandakan, menyebarluaskan, mempublikasikan, mengubah, atau 
menggunakan sebagian atau seluruh konten situs ini tanpa izin tertulis dari pihak PT Psiko Dinamika. </p>
                <p class="text-justify fade-in">Setiap penggunaan materi dari situs ini untuk kepentingan pribadi, pendidikan, atau non
komersial diperbolehkan selama mencantumkan sumber secara jelas dan tidak merugikan 
pihak manapun.  </p>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<!-- Modal Kebijakan Privasi -->
<div class="modal fade" id="privasiModal" tabindex="-1" aria-labelledby="privasiLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content fade-in">
            <div class="modal-header" style="background-color:#001f4d; color:white;">
                <h5 class="modal-title" id="privasiLabel">Kebijakan Privasi</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container my-5">
                <div class="card shadow-sm p-4 bg-transparent-custom">
                <p class="text-justify fade-in"> <b>PT Psiko Dinamika</b> sangat menghargai privasi pengunjung situs kami. Kebijakan ini 
menjelaskan bagaimana kami mengumpulkan, menggunakan, dan melindungi informasi 
pribadi yang Anda berikan saat menggunakan layanan kami.</p>
                
                <ol class="text-justify fade-in">
                    <li>Informasi yang Kami Kumpulkan. Kami dapat mengumpulkan informasi pribadi 
seperti nama, alamat email, nomor telepon, institusi afiliasi, dan data lain yang 
Anda berikan secara sukarela melalui formulir pendaftaran, pengiriman naskah, 
atau komunikasi langsung. </li>
                    <li>Penggunaan Informasi. Informasi yang Anda berikan akan digunakan untuk: 
Memproses pengajuan publikasi atau permintaan layanan lainnya, Mengirimkan 
informasi atau pembaruan terkait penerbitan dan konten baru,  Meningkatkan 
kualitas layanan dan pengalaman pengguna di situs kami. </li>
                    <li>Perlindungan Data. Kami berkomitmen untuk menjaga keamanan data pribadi 
Anda. Kami menerapkan langkah-langkah keamanan teknis dan organisasi guna 
mencegah akses tidak sah, pengungkapan, atau perubahan data tanpa izin.</li>
                    <li>Pembagian Informasi. Kami tidak akan menjual, menyewakan, atau membagikan 
informasi pribadi Anda kepada pihak ketiga tanpa persetujuan Anda, kecuali 
diwajibkan oleh hukum.</li>
                    <li>Cookie dan Teknologi Pelacak. Situs kami dapat menggunakan cookie untuk 
meningkatkan pengalaman pengguna. Anda dapat memilih untuk menonaktifkan 
cookie melalui pengaturan browser Anda.</li>
                    <li>Perubahan Kebijakan. PT Psiko Dinamika dapat memperbarui kebijakan privasi 
ini dari waktu ke waktu. Perubahan akan ditampilkan di halaman ini, dan pengguna 
dianggap menyetujui perubahan tersebut setelah mengakses situs kami secara 
berkelanjutan. </li>
                </ol>
            </div>
        </div>
    </div>
</div>
                    </div>
                    </div>

<!-- Modal Promo -->
<div class="modal fade" id="promoModal" tabindex="-1" aria-labelledby="promoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#001f4d; color:white;">
                <h5  class="modal-title" id="promoLabel">Promo Spesial</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="card mt-4">
    
    <div class="card-body text-center">
        <?php
include "config.php";
$result = $conn->query("SELECT * FROM promo");
?>


<?php while($row = $result->fetch_assoc()) { ?>
    <div style="margin-bottom:20px; text-align:center;">
        <img src="uploads/<?php echo $row['poster']; ?>" alt="<?php echo $row['judul']; ?>" width="200"><br>
        <strong><?php echo $row['judul']; ?></strong><br>
        <small><?php echo $row['deskripsi']; ?></small>
    </div>
<?php } ?>
    </div>
</div>
        </div>
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>


<?php include 'footer.php'; ?>