/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/board.php
<?php
/* Template Name: Board Page */
get_header();
?>
<div class="board-page min-h-screen flex items-center justify-center text-white py-32 relative overflow-hidden">
<div class="board-bg-transition absolute inset-0 z-[-1]"></div>
<div class="board-logo absolute left-[2%] top-[2%] md:top-[3%] lg:top-[5%] w-[50px] md:w-[60px] h-[50px] md:h-[60px] rounded-[50%] border-2 border-transparent
[background:linear-gradient(#4F0D13,#4F0D13)_padding-box,linear-gradient(180deg,_#EB212E_38.5%,_#4F0D13_100%)_border-box]
flex items-center justify-center z-10">
<span class="[writing-mode:vertical-lr] relative h-[100px] md:h-[120px] top-[100%] rotate-180 font-maison text-[8px] md:text-[10px] font-normal text-[#fff] text-center flex items-center justify-center">
SUNNY HILL FOUNDATION
</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-16 place-items-center w-full max-w-5xl px-8 lg:px-16 mt-8">
<?php
$args = array(
'post_type' => 'board_member',
'posts_per_page' => -1
);
$query = new WP_Query($args);
$index = 0;
if ($query->have_posts()):
while ($query->have_posts()): $query->the_post();
if(have_rows('board_content')):
while(have_rows('board_content')): the_row();
$image = get_sub_field('image_board');
$title = get_sub_field('title_board_');
$description = get_sub_field('description_board');
?>
<div class="board-member-container flex items-center justify-center relative w-full max-w-md py-6" data-index="<?php echo $index; ?>">
<div class="board-border-outer w-[130px] lg:w-[180px] h-[160px] lg:h-[220px] rounded-full border border-transparent
[background:linear-gradient(#4F0D13,#4F0D13)_padding-box,var(--border-gradient)_border-box]
flex items-center justify-center flex-shrink-0">
<div class="board-border-inner w-[125px] lg:w-[175px] h-[125px] lg:h-[175px] rounded-full border border-transparent
[background:linear-gradient(#4F0D13,#4F0D13)_padding-box,var(--border-gradient)_border-box]
flex items-center justify-center">
<div class="board-image w-20 h-20 lg:w-28 lg:h-28 rounded-full overflow-hidden">
<a href="<?php the_permalink(); ?>" class="w-full h-full block">
<img src="<?php echo $image['url']; ?>" alt="<?php echo $title; ?>" class="w-full h-full object-cover">
</a>
</div>
</div>
</div>
<div class="ml-6 flex-1 py-3 font-maison">
<h2 class="board-title text-sm font-semibold flex items-center">
<a href="<?php the_permalink(); ?>" class="text-white hover:text-gray-300"><?php echo $title; ?></a>
<div class="h-[1px] w-12 lg:w-20 [background:var(--border-gradient)] ml-2"></div>
</h2>
<p class="board-description text-xs text-gray-300 leading-snug max-w-[180px] lg:max-w-[220px] mt-2">
<?php echo $description; ?>
</p>
</div>
</div>
<?php
$index++;
endwhile;
endif;
endwhile;
wp_reset_postdata();
endif; ?>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const bgTransition = document.querySelector('.board-bg-transition');
const logo = document.querySelector('.board-logo');
const containers = document.querySelectorAll('.board-member-container');
requestAnimationFrame(() => {
bgTransition.classList.add('show');
setTimeout(() => {
logo.classList.add('show');
containers.forEach((container, containerIndex) => {
setTimeout(() => {
container.classList.add('visible');
const borderOuter = container.querySelector('.board-border-outer');
const borderInner = container.querySelector('.board-border-inner');
const image = container.querySelector('.board-image');
const title = container.querySelector('.board-title');
const description = container.querySelector('.board-description');
setTimeout(() => borderOuter.classList.add('show'), 0);
setTimeout(() => borderInner.classList.add('show'), 200);
setTimeout(() => image.classList.add('show'), 400);
setTimeout(() => title.classList.add('show'), 600);
setTimeout(() => description.classList.add('show'), 800);
}, containerIndex * 800);
});
}, 400);
});
});
</script>
<?php get_footer(); ?>