/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/front-page.php
<?php
/* Template Name: Front Page */
get_header();
$projects = new WP_Query(array(
'post_type' => 'project',
'posts_per_page' => 1,
'offset' => 2,
'post_status' => 'publish'
));
?>
<section class="projects-page w-full h-[100vh] relative overflow-hidden">
<div class="projects-bg-transition absolute inset-0 z-[-1] transition-opacity duration-1000 opacity-0">
<div id="backgroundContainer" class="absolute inset-0 bg-cover bg-center bg-no-repeat transition-all duration-[2000ms] ease-in-out"
style="background-image: radial-gradient(70.97% 126.22% at 30% 40%, #775f62 26%, rgba(119, 95, 98, 0.96) 38%, rgba(119, 95, 98, 0.85) 52%, rgba(119, 95, 98, 0.66) 67%, rgba(119, 95, 98, 0.39) 82%, rgba(119, 95, 98, 0.06) 98%, rgba(119, 95, 98, 0) 100%), url('<?php echo get_template_directory_uri(); ?>/assets/images/prishtina.jpg');">
</div>
</div>
<div id="topCircle" class="projects-logo absolute left-[3%] top-[4%] md:top-[11%] w-[60px] md:w-[88px] h-[60px] md:h-[88px] rounded-[50%] border-2 border-transparent opacity-0 transition-all duration-[2000ms] ease-in-out"
style="background: linear-gradient(#775F62, #775F62) padding-box, linear-gradient(180deg, #EB212E 38.5%, #775F62 100%) border-box;">
<span class="[writing-mode:vertical-lr] relative h-[140px] md:h-[200px] top-[35%] left-5 lg:left-8 rotate-180 font-alte text-[10px] md:text-[12px] font-normal text-[#BCBCBC] text-center flex items-center justify-center bg-gradient-to-b from-[#BCBCBC] to-transparent bg-clip-text">
SUNNY HILL FOUNDATION
</span>
</div>
<div class="home-content h-full opacity-0 transition-opacity duration-1000 flex items-center justify-center">
<?php if($projects->have_posts()): ?>
<?php while($projects->have_posts()): $projects->the_post(); ?>
<div class="w-full h-[100vh] flex items-center justify-center">
<div class="circle relative z-10 flex items-center justify-center mt-10 mr-0 lg:mt-20 lg:mr-56 transform translate-y-10 opacity-0 transition-all duration-1000">
<div class="w-[280px] md:w-[600px] relative left-0 md:left-10 text-center md:text-center font-maison text-[18px] md:text-[24px] font-[500] leading-[20px] md:leading-[24px] flex flex-col gap-6">
<!-- <div class='ml-10 w-full text-left py-8 flex slide-content text-white'>
<?php
// $home_content = get_field('home_title');
if ($home_content) {
echo $home_content;
} else {
echo wp_trim_words(get_the_content(), 20, '...');
}
?>
</div> -->
<div class="ml-10 w-full text-left py-8 flex slide-content text-white">
<?php
$home_content = '';
if ( function_exists('get_field') ) {
$home_content = get_field('home_title');
}
if ( ! empty($home_content) ) {
echo wp_kses_post($home_content);
} else {
echo wp_kses_post(
wp_trim_words( get_the_content(), 20, '...' )
);
}
?>
</div>
<div class="w-2/3 mx-auto text-left">
<a href="<?php the_permalink(); ?>"
class='inline-block px-6 py-2 bg-[#EB212E] text-white text-[16px] w-auto md:text-[12px] leading-[20px] transition-all duration-300 ease-in-out rounded-md hover:bg-transparent hover:text-[#EB212E] border-2 border-[#EB212E] font-medium'>
READ MORE
</a>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<!-- Fallback if no projects -->
<div class="w-full h-[100vh] flex items-center justify-center">
<div class="circle relative z-10 flex items-center justify-center mt-10 mr-0 lg:mt-20 lg:mr-56 transform translate-y-10 opacity-0 transition-all duration-1000">
<div class="w-[280px] md:w-[600px] relative left-0 md:left-20 text-center md:text-center font-maison text-[18px] md:text-[24px] font-[500] leading-[20px] md:leading-[24px] flex flex-col gap-6">
<span class='text-[11px] leading-[10px] relative lg:bottom-5 md:left-30 md:text-left text-center slide-subtitle transition-colors duration-[2000ms] ease-in-out color-[#540D13]'>
SUNNY HILL Foundation <br/>Home
</span>
<div class='ml-10 w-full text-left py-8 flex slide-content text-white'>
<?php
$home_content = get_field('home_title');
if ($home_content) {
echo $home_content;
} else {
echo "Welcome to Sunny Hill Foundation";
}
?>
</div>
<a href="#" class='slide-link text-[20px] leading-[20px] transition-colors duration-[2000ms] ease-in-out color-[#540D13]'>read more...</a>
</div>
</div>
</div>
<?php endif; ?>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
setTimeout(() => {
document.querySelector('.projects-bg-transition').style.opacity = '1';
setTimeout(() => {
document.querySelector('.projects-logo').style.opacity = '1';
setTimeout(() => {
document.querySelector('.home-content').style.opacity = '1';
document.querySelectorAll('.circle').forEach((circle, index) => {
setTimeout(() => {
circle.style.opacity = '1';
circle.style.transform = 'translateY(0)';
}, index * 300);
});
}, 400);
}, 400);
}, 100);
});
</script>
<?php get_footer(); ?>