/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/media.php
<?php get_header();
/* Template Name: Media Page */
?>
<section class="w-full h-[70vh] relative flex items-center justify-center transition-all duration-700" id="media-section">
<div class="media-bg-transition absolute inset-0 bg-cover bg-center bg-no-repeat z-[-1]"
style="background-image: radial-gradient(74.5% 334.66% at 20.04% 8.1%, #775F62 31%, rgba(119, 95, 98, 0.66) 46%, rgba(119, 95, 98, 0.38) 61%, rgba(119, 95, 98, 0.17) 75%, rgba(119, 95, 98, 0.04) 88%, rgba(119, 95, 98, 0) 99%), url('<?php echo get_template_directory_uri(); ?>/assets/images/Rectangle.png');">
</div>
<div class="absolute left-[3%] top-[6%] md:top-[1%] lg:top-[12%] w-[60px] md:w-[88px] h-[60px] md:h-[88px] rounded-[50%] border-2 border-transparent logo-reveal [background:linear-gradient(#775f62,#775f62)_padding-box,linear-gradient(180deg,_#EB212E_38.5%,_transparent_100%)_border-box] flex items-center justify-center">
<span class="[writing-mode:vertical-lr] relative h-[140px] md:h-[200px] top-[100%] rotate-180 font-alte text-[10px] md:text-[12px] font-normal text-[#BCBCBC] text-center flex items-center justify-center">
SUNNY HILL FOUNDATION
</span>
</div>
<div class="relative z-10 flex flex-col items-start justify-start text-start max-w-4xl mx-auto px-4 media-reveal">
<div class="flex flex-col items-start gap-4 px-10 lg:px-0">
<div class="flex items-center gap-4">
<h2 class="text-white font-maison text-[10px] font-medium text-left from-font decoration-none"><?php echo get_field('media_title_'); ?></h2>
</div>
<p class="text-white font-maison text-[24px] font-medium leading-[24px] text-left from-font decoration-none max-w-lg">
<?php echo get_field('media_sub_title'); ?>
</p>
</div>
</div>
</section>
<div class="w-full max-w-4xl mx-auto bg-white p-8 md:p-12 my-12 media-reveal">
<div class="text-[#775F62] font-maison text-left from-font decoration-none space-y-6">
<?php echo get_field('media_content'); ?>
</div>
</div>
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 2,
'orderby' => 'date',
'order' => 'DESC'
);
$query = new WP_Query($args);
$counter = 0;
if ($query->have_posts()) :
while ($query->have_posts()) : $query->the_post();
$bg_color = $counter % 2 === 0 ? 'bg-[#775F62F5]' : 'bg-white';
$text_color = $counter % 2 === 0 ? 'text-white' : 'text-[#540D13]';
?>
<section class="w-full py-16 <?php echo $bg_color; ?> flex items-center justify-center media-reveal">
<div class="flex flex-col items-start gap-4 py-16 px-10 lg:px-0">
<div class="flex items-center gap-4">
<span class="text-[#540D13] font-maison text-[13px] font-medium leading-[10px] text-left from-font decoration-none date-reveal">
<?php echo get_the_date('d M Y'); ?>
</span>
<h2 class="text-[#540D13] font-maison text-[13px] font-medium text-left from-font decoration-none">Next Project</h2>
</div>
<p class="<?php echo $text_color; ?> font-maison text-[24px] font-medium leading-[24px] text-left from-font decoration-none max-w-lg">
<?php echo get_the_title(); ?>
</p>
<a href="<?php the_permalink(); ?>" class="text-[#540D13] font-maison text-lg md:text-xl">read more...</a>
</div>
</section>
<?php
$counter++;
endwhile;
wp_reset_postdata();
endif;
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
const elements = document.querySelectorAll('.media-reveal');
const dateElements = document.querySelectorAll('.date-reveal');
const bgTransition = document.querySelector('.media-bg-transition');
requestAnimationFrame(() => {
bgTransition.classList.add('show');
setTimeout(() => {
elements.forEach((element, index) => {
setTimeout(() => {
element.classList.add('show');
}, index * 200);
});
dateElements.forEach((element, index) => {
setTimeout(() => {
element.classList.add('show');
}, index * 300);
});
}, 400);
});
});
</script>
<?php get_footer(); ?>