Files
edukarsa/front-page.php
T

271 lines
14 KiB
PHP

<?php get_header(); ?>
<main id="primary" class="site-main edukarsa-home">
<!-- 1. SLIDER -->
<?php if ( get_option('edukarsa_tampil_slider', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-hero-slider" style="padding: 0;">
<div class="slider-container" id="hero-slider-container">
<?php
$query_slider = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) );
if ( $query_slider->have_posts() ) :
echo '<div class="slider-wrapper" id="hero-slider-wrapper">';
while ( $query_slider->have_posts() ) : $query_slider->the_post();
$link = get_post_meta( get_the_ID(), '_slider_link', true );
?>
<div class="slide-item img-wrapper-slider">
<?php if(!empty($link)) echo '<a href="'.esc_url($link).'">'; ?>
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'full' ); ?>
<?php else: ?>
<div class="img-placeholder"><i>🖼️</i><span>Upload Gambar Slider untuk "<?php the_title(); ?>"</span></div>
<?php endif; ?>
<?php if(!empty($link)) echo '</a>'; ?>
</div>
<?php
endwhile;
echo '</div>';
wp_reset_postdata();
endif;
?>
</div>
</section>
<?php endif; ?>
<!-- 2. STATISTIK DESAIN KARTU -->
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-stats">
<div class="container stats-grid">
<?php for($i=1; $i<=3; $i++) : ?>
<div class="stat-item card-style stat-card-modern">
<div class="stat-icon-wrapper">
<?php $icon = get_option('edukarsa_stat'.$i.'_icon'); ?>
<?php if($icon) : ?>
<img src="<?php echo esc_url($icon); ?>" alt="Icon">
<?php else: ?>
<span>🏫</span>
<?php endif; ?>
</div>
<h3 class="stat-number"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_angka', '00') ); ?></h3>
<h4 class="stat-title"><?php echo esc_html( get_option('edukarsa_stat'.$i.'_label', 'Judul Statistik') ); ?></h4>
<p class="stat-desc"><?php echo nl2br(esc_html( get_option('edukarsa_stat'.$i.'_desc', 'Deskripsi singkat') )); ?></p>
</div>
<?php endfor; ?>
</div>
</section>
<?php endif; ?>
<!-- 3. ABOUT US -->
<?php if ( get_option('edukarsa_tampil_about', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-sambutan pt-0">
<div class="container sambutan-grid">
<div class="sambutan-image-wrapper">
<div class="img-wrapper-portrait">
<?php $foto = get_option('edukarsa_foto_kepsek'); ?>
<?php if(!empty($foto)) : ?>
<img src="<?php echo esc_url($foto); ?>" alt="Kepala Sekolah">
<?php else : ?>
<div class="img-placeholder"><i>👤</i><span>Upload Foto Kepala Sekolah</span></div>
<?php endif; ?>
</div>
</div>
<div class="sambutan-content">
<span class="badge-title">ABOUT US</span>
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_nama_kepsek') ); ?></h2>
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:15px; font-size:18px;"><?php echo esc_html( get_option('edukarsa_subtitle_about') ); ?></h4>
<div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary">Ketahui Lebih Lanjut</a>
</div>
</div>
</section>
<?php endif; ?>
<!-- 4. MILESTONES -->
<?php if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-milestones bg-light-blue">
<div class="container milestone-grid text-center">
<?php
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
if ( $query_milestone->have_posts() ) :
while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
echo '<div class="milestone-item card-style"><h3 class="milestone-title" style="color:var(--primary-color); font-size:28px; margin-bottom:5px;">' . get_the_title() . '</h3><div class="milestone-desc">' . get_the_excerpt() . '</div></div>';
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</section>
<?php endif; ?>
<!-- 5. PROGRAM -->
<?php if ( get_option('edukarsa_tampil_program', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-programs">
<div class="container">
<div class="section-header text-center"><h2 class="section-title">Our Program</h2><hr class="title-underline"></div>
<div class="program-grid">
<?php
$query_program = new WP_Query( array( 'post_type' => 'program', 'posts_per_page' => 3 ) );
if ( $query_program->have_posts() ) :
while ( $query_program->have_posts() ) : $query_program->the_post();
?>
<div class="program-card card-style text-center top-border-blue">
<div class="img-wrapper-landscape" style="margin-bottom: 20px;">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php else: ?>
<div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
<?php endif; ?>
</div>
<h3 style="margin-bottom:15px; color:var(--heading-color);"><?php the_title(); ?></h3>
<div class="program-desc" style="margin-bottom:20px; font-size:14px; color:#666;"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
</div>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
</section>
<?php endif; ?>
<!-- WRAPPER PARALLAX -->
<?php
$mid_bg = get_option('edukarsa_mid_bg_image');
$mid_color = get_option('edukarsa_mid_bg_color', '#0b4a8e');
$parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background-color: '.esc_attr($mid_color).';';
?>
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
<div class="parallax-overlay" style="background-color: <?php echo esc_attr($mid_color); ?>; opacity: <?php echo $mid_bg ? '0.9' : '1'; ?>;"></div>
<div class="parallax-content relative-z2">
<!-- 6. VIDEO -->
<?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-videos">
<div class="container video-grid">
<?php for($i=1; $i<=2; $i++) : ?>
<div class="video-item">
<?php $vid_thumb = get_option('edukarsa_video'.$i.'_thumb'); ?>
<a href="<?php echo esc_url( get_option('edukarsa_video'.$i.'_url', '#') ); ?>" target="_blank">
<div class="img-wrapper-video">
<?php if($vid_thumb) : ?>
<img src="<?php echo esc_url($vid_thumb); ?>" alt="Video">
<?php else: ?>
<div class="img-placeholder" style="background:#1e293b; color:#cbd5e1; border:none;"><i>▶️</i><span>Upload Thumbnail Video <?php echo $i; ?></span></div>
<?php endif; ?>
</div>
<?php if($vid_thumb) echo '<div class="play-btn">▶</div>'; ?>
</a>
</div>
<?php endfor; ?>
</div>
</section>
<?php endif; ?>
<!-- 7. KEUNGGULAN DINAMIS -->
<?php if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 0; padding-bottom: 100px;">
<div class="container">
<div class="section-header text-center">
<span class="badge-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US') ); ?></span>
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_title', 'Keunggulan Program') ); ?></h2>
</div>
<div class="keunggulan-grid">
<?php
$query_keunggulan = new WP_Query( array( 'post_type' => 'keunggulan', 'posts_per_page' => 9 ) );
if ( $query_keunggulan->have_posts() ) :
$nomor = 1;
while ( $query_keunggulan->have_posts() ) : $query_keunggulan->the_post();
?>
<div class="keunggulan-card card-style">
<div class="keunggulan-number"><?php echo sprintf("%02d", $nomor); ?></div>
<div class="keunggulan-content-inner">
<h4><?php the_title(); ?></h4>
<div style="font-size: 14px; color: #666;">
<?php echo wp_trim_words( wp_strip_all_tags( get_the_content() ), 15, '...' ); ?>
</div>
</div>
</div>
<?php
$nomor++;
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
</section>
<?php endif; ?>
</div>
</div>
<!-- 8. CTA SECTION (SEKARANG SUDAH KEMBALI) -->
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
<?php $cta_bg = get_option('edukarsa_cta_bg'); ?>
<section class="edukarsa-section edukarsa-cta-bg" <?php if($cta_bg) echo 'style="background-image: url('.esc_url($cta_bg).');"'; ?>>
<div class="container text-center text-white relative-z2">
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light" style="margin-top: 20px;">
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?>
</a>
</div>
</section>
<?php endif; ?>
<!-- 9. LATEST NEWS DINAMIS -->
<?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-latest-news">
<div class="container">
<div class="section-header text-center">
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
</div>
<div class="news-grid">
<?php
$query_news = new WP_Query( array('post_type' => 'post', 'posts_per_page' => 6) );
if ( $query_news->have_posts() ) :
while ( $query_news->have_posts() ) : $query_news->the_post();
?>
<article class="news-card card-style">
<div class="img-wrapper-landscape" style="border-radius: 12px 12px 0 0;">
<?php if ( has_post_thumbnail() ) : ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'medium' ); ?></a>
<?php else: ?>
<div class="img-placeholder"><i>📰</i><span>Gambar Berita</span></div>
<?php endif; ?>
</div>
<div class="news-content">
<h3 class="news-title"><a href="<?php the_permalink(); ?>" style="color:var(--heading-color);"><?php the_title(); ?></a></h3>
<div class="news-excerpt"><?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?></div>
<a href="<?php the_permalink(); ?>" class="btn-outline-primary" style="margin-top: auto; align-self: flex-start;">Read More</a>
</div>
</article>
<?php
endwhile;
wp_reset_postdata();
endif;
?>
</div>
</div>
</section>
<?php endif; ?>
</main>
<script>
document.addEventListener("DOMContentLoaded", function() {
const slider = document.getElementById('hero-slider-wrapper');
if (slider && slider.children.length > 1) {
setInterval(function() {
if (slider.scrollLeft + slider.clientWidth >= slider.scrollWidth - 10) {
slider.scrollTo({ left: 0, behavior: 'smooth' });
} else {
slider.scrollBy({ left: slider.clientWidth, behavior: 'smooth' });
}
}, 4000);
}
});
</script>
<?php get_footer(); ?>