/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/about.php
<?php
/* Template Name: About Us Page */
get_header();
?>
<section class="w-full min-h-screen bg-[#fffff] py-20 transition-all duration-700" id="about-section">
<div class="absolute left-[3%] top-[4%] md:top-[2%] lg:top-[15%] w-[60px] md:w-[80px] h-[60px] md:h-[80px] rounded-[50%] border-2 border-transparent bg-white
[background:linear-gradient(white,white)_padding-box,linear-gradient(180deg,_#EB212E_38.5%,_#fff_100%)_border-box]
flex items-center justify-center about-reveal" data-index="0">
<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-[#000] text-center flex items-center justify-center">
SUNNY HILL FOUNDATION
</span>
</div>
<div class="flex justify-center items-center my-20 about-reveal" data-index="1">
<h1 class="text-[#000] text-start w-full mt-8 lg:max-w-[600px] text-xl font-maison px-6">
<?php
echo function_exists('get_field') && get_field('title_about')
? get_field('title_about')
: get_the_title();
?>
</h1>
</div>
<div class="flex flex-col md:flex-row justify-center gap-10 md:gap-20 px-6 md:px-10 font-alte">
<div class="flex flex-col gap-8 max-w-[500px] about-reveal" data-index="2">
<p class="text-[#000] leading-6">
<?php
echo function_exists('get_field') && get_field('left_column_about')
? get_field('left_column_about')
: get_the_content();
?>
</p>
</div>
<div class="max-w-[500px] flex flex-col gap-8 about-reveal" data-index="3">
<p class="text-[#000] text-base leading-6">
<?php
echo function_exists('get_field') && get_field('right_column_about')
? get_field('right_column_about')
: '';
?>
</p>
</div>
</div>
</section>
<script>
document.addEventListener('DOMContentLoaded', function() {
const elements = Array.from(document.querySelectorAll('.about-reveal'))
.sort((a, b) => a.dataset.index - b.dataset.index);
function revealSequentially(index = 0) {
if (index < elements.length) {
elements[index].classList.add('active');
setTimeout(() => revealSequentially(index + 1), 250);
}
}
requestAnimationFrame(() => {
document.getElementById('about-section').style.opacity = '1';
revealSequentially();
});
});
</script>
<?php get_footer(); ?>