{% set name = name | default(value="") %}
{% set title = title | default(value="") %}
{% set linkedin_link = linkedin_link | default(value="") %}
{% set description_1 = description_1 | default(value="") %}
{% set description_2 = description_2 | default(value="") %}
{% set image_src = image_src | default(value="") %}
{% set image_alt = image_alt | default(value="") %}


    <section class="max-w-7xl px-4 mx-auto flex items-center justify-center isolate overflow-hidden py-8">
      <div class="flex flex-col lg:flex-row items-center">
        <!-- Left Content -->
        <div class="w-full lg:w-1/2 flex justify-center">
          <img src="{{ image_src }}" alt="{{ image_alt }}" 
               class="fade-in w-full lg:w-2/3 rounded-lg grayscale">
        </div>       
      
        <!-- Right Content -->
        <div class="w-full lg:mt-0 mt-6 lg:w-1/2 lg:text-left">
          <div class="flex items-center gap-3 fade-in">
            <h2 class="text-balance font-bold tracking-tight text-white text-xl lg:text-4xl">
              {{ name }}
            </h2>
            <a href="{{ linkedin_link }}" target="_blank" 
               class="mx-2 bg-white hover:gray-500 text-white p-2 rounded-lg transition">
              <svg class="w-5 h-5" fill="black" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.98 3.5C4.98 4.60457 4.08557 5.5 2.98 5.5C1.87443 5.5 0.98 4.60457 0.98 3.5C0.98 2.39543 1.87443 1.5 2.98 1.5C4.08557 1.5 4.98 2.39543 4.98 3.5ZM1 7H5V21H1V7ZM8 7H12V9.26C12.6325 8.2665 13.878 7 16 7C19.3125 7 21 9.006 21 12.94V21H17V13.71C17 11.587 16.5045 10.5 15.022 10.5C13.5395 10.5 13 11.79 13 13.71V21H9V7H8Z"/>
              </svg>
            </a>
          </div>
          <p class="mx-auto text-pretty text-lg lg:text-2xl font-medium text-gray-200 fade-in">{{ title }}</p>
          <p class="mx-auto mt-6 text-pretty text-base font-normal text-gray-200 fade-in">
           {{ description_1 }}
           <br>
           {{ description_2 }}
          </p>
        </div>
      </div>  
    </section>



<style>

      /* Apply the blinking animation to the link */
 .blinking-effect {
  animation: blink 2s infinite; /* Adjust the speed here (1.5s for slow blinking) */
}

  /* Define the fade-in animation */
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  /* Apply the fade-in animation to elements with the 'fade-in' class */
  .fade-in {
    animation: fadeIn 4s ease-in-out forwards; /* Adjust the duration (2s) to make it slower or faster */
  }

  /* Optional: Delay the animation for a more staggered effect */
  h2 {
    animation-delay: 0.5s; /* Delay for header */
  }

  p {
    animation-delay: 1s; /* Delay for paragraphs */
  }
</style>