/home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf/testimonials.php
<?php
get_header();
/* Template Name: Testimonials */
?>


<div class="absolute left-[2%] top-[4%] md:top-[8%] lg:top-[14%] w-[60px] md:w-[80px] h-[60px] md:h-[80px] rounded-[50%] border-2 border-transparent logo-reveal
  [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-[140px] md:h-[200px] top-[100%] rotate-180 font-maison text-[10px] md:text-[12px] font-normal text-[#fff] text-center flex items-center justify-center">
    SUNNY HILL FOUNDATION
  </span>
</div>

<section class="bg-[#3C000C] py-16 relative text-white page-content">
  <div class="max-w-3xl mx-auto px-4">
    <?php if (have_rows('testimonials_content')): ?>
      <div class="space-y-16 my-16">
        <?php
        $index = 0;
        while (have_rows('testimonials_content')): the_row();
          $image = get_sub_field('image_testimonials');
          $title = get_sub_field('title_testimonials');
          $description = get_sub_field('description_testimonials');
          $name = get_sub_field('name_testimonials');
        ?>
          <div class="testimonial-member-container flex items-start gap-6 relative media-reveal" data-index="<?php echo $index; ?>">
            <?php if ($image): ?>
              <div class="testimonial-border-outer flex-shrink-0 relative w-[130px] lg:w-[160px] h-[130px] lg:h-[170px] rounded-full border border-transparent
                [background:linear-gradient(#3C000C,#3C000C)_padding-box,linear-gradient(90deg,_#EB212E_76.07%,_#C91C28_79.07%,_#9E1720_84.09%,_#7B121A_89.1%,_#630F16_93.11%,_#540D13_97.12%,_#4F0D13_100.13%)_border-box]
                flex items-center justify-center p-4">
                <div class="testimonial-border-inner w-full h-full rounded-full border border-transparent
                  [background:linear-gradient(#3C000C,#3C000C)_padding-box,linear-gradient(90deg,_#EB212E_76.07%,_#C91C28_79.07%,_#9E1720_84.09%,_#7B121A_89.1%,_#630F16_93.11%,_#540D13_97.12%,_#4F0D13_100.13%)_border-box]
                  flex items-center justify-center p-4">
                  <div class="testimonial-image w-full h-full rounded-full overflow-hidden">
                    <img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" class="w-full h-full object-cover rounded-full" />
                  </div>
                </div>
              </div>
            <?php endif; ?>
            
            <div class="max-w-3xl flex-1">
              <?php if ($title): ?>
                <h3 class="testimonial-title uppercase font-bold tracking-wide text-sm md:text-base mb-2"><?php echo esc_html($title); ?></h3>
              <?php endif; ?>
              <?php if ($description): ?>
                <p class="testimonial-description text-sm leading-relaxed"><?php echo esc_html($description); ?></p>
              <?php endif; ?>
              <?php if ($description): ?>
                <p class="testimonial-description mt-4 text-sm leading-relaxed"><?php echo esc_html($name); ?></p>
              <?php endif; ?>
            </div>
          </div>
        <?php
        $index++;
        endwhile; ?>
      </div>
    <?php else: ?>
      <p class="text-center">No testimonials found.</p>
    <?php endif; ?>
  </div>
</section>

<style>

.page-content {
    transition: all 0.6s ease-in-out;
}

.page-content.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}

.logo-reveal {
    transition: all 0.6s ease-in-out;
}

.logo-reveal.fade-out {
    opacity: 0;
    transform: translateY(-20px) scale(0.9);
}

.media-reveal {
    transition: all 0.6s ease-in-out;
}

.media-reveal.fade-out {
    opacity: 0;
    transform: translateY(-20px);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const elements = document.querySelectorAll('.media-reveal');
    const logo = document.querySelector('.logo-reveal');
    const pageContent = document.querySelector('.page-content');
    
   
    requestAnimationFrame(() => {
        setTimeout(() => {
            logo.classList.add('show');
        }, 400);
        
        setTimeout(() => {
            elements.forEach((element, index) => {
                setTimeout(() => {
                    element.classList.add('show');
                }, index * 150);
            });
        }, 600);
    });
    
   
    window.addEventListener('beforeunload', function() {
        logo.classList.add('fade-out');
        pageContent.classList.add('fade-out');
        elements.forEach(element => {
            element.classList.add('fade-out');
        });
    });
    
   
    document.addEventListener('click', function(e) {
        const link = e.target.closest('a');
        if (link && link.href && !link.href.includes('#') && link.href !== window.location.href) {
            e.preventDefault();
            
           
            logo.classList.add('fade-out');
            pageContent.classList.add('fade-out');
            elements.forEach(element => {
                element.classList.add('fade-out');
            });
            
            
            setTimeout(() => {
                window.location.href = link.href;
            }, 600);
        }
    });
});
</script>

<?php get_footer(); ?>
Path: home/u336066629/websites/AmAL87tCa/public_html/wp-content/themes/shf