Animated Tabs Section with Image and content

                    <section class="tab-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="page-width">

    <!-- Content Area -->
    <div class="tab-content-wrapper">
      <!-- Left Content -->
      <div class="tab-text-content">
            <!-- Section Title -->
    <div class="tab-header-tabs-cont">
    <div class="tab-header">
      <h1 class="tab-section-title" style="
        font-size: {{ section.settings.title_font_size }}px; 
        color: {{ section.settings.title_color }};
        font-weight: {{ section.settings.title_font_weight }};
      ">{{ section.settings.section_title }}</h1>
    </div>

    <!-- Tab Navigation -->
    <div class="tab-navigation">
      {% for block in section.blocks %}
        <button class="tab-btn {% if forloop.first %}active{% endif %}" data-tab-id="{{ block.id }}">{{ block.settings.tab_name }}</button>
      {% endfor %}
    </div>
    </div>
        {% for block in section.blocks %}
          <div class="tab-content {% if forloop.first %}active{% endif %}" id="content-{{ block.id }}">
            <h2 class="tab-content-title" style="
              font-size: {{ section.settings.content_title_font_size }}px; 
              color: {{ section.settings.content_title_color }};
              font-weight: {{ section.settings.content_title_font_weight }};
            ">{{ block.settings.tab_title }}</h2>
            <p class="tab-content-description" style="
              font-size: {{ section.settings.content_description_font_size }}px; 
              color: {{ section.settings.content_description_color }};
              font-weight: {{ section.settings.content_description_font_weight }};
            ">{{ block.settings.tab_description }}</p>
          </div>
        {% endfor %}
      </div>

      <!-- Right Image -->
      <div class="tab-image-content">
        {% for block in section.blocks %}
          <div class="tab-image {% if forloop.first %}active{% endif %}" id="image-{{ block.id }}">
            <img src="{{ block.settings.tab_image | img_url: 'master' }}" alt="{{ block.settings.tab_name }}">
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
</section>

<style>
/* General Styling */
.tab-section {
  color: #fff;
  text-align: left;
  position: relative;
}

.tab-header {
  margin-bottom: 1rem;
}

.tab-section-title {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

/* Navigation Styling */
.tab-navigation {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-btn {
    padding: 0.5rem 1.5rem;
    font-size: 16px;
    background-color: #000;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
  background-color: #fff;
  color: #000;
}

/* Content Wrapper */
.tab-content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.tab-text-content {
    display: flex;
    flex-direction: column;
  gap:30px;
    height: 100%;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.8s ease-out;
}

.tab-content-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.tab-content-description {
  font-size: 1rem;
  line-height: 1.5;
  color: #ccc;
}

/* Image Content */
.tab-image-content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tab-image {
  display: none;
  animation: fadeInUp 0.8s ease-out;
}

.tab-image.active {
  display: block;
}

.tab-image img {
    max-width: 100%;
    border-radius: 10px;
    height: 500px;
    width: 500px;
    object-fit: cover;
}
/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content-title,
.tab-content-description {
  animation: none; /* Reset animation for inactive elements */
  opacity: 0;
}

.tab-content.active .tab-content-title {
  animation: fadeInUp 0.8s ease-out forwards;
}

.tab-content.active .tab-content-description {
  animation: fadeInUp 0.8s ease-out 0.2s forwards; /* Delayed reveal for description */
}

/* Image Animation */
.tab-image {
  animation: fadeInUp 0.8s ease-out forwards;
}
@media(max-width:599px){
.tab-content-wrapper {
    grid-template-columns: 1fr;
}

}
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  // Ensure the first tab's content and image are active on page load
  $(".tab-content").hide();
  $(".tab-image").hide();

  $(".tab-content.active").show();
  $(".tab-image.active").show();

  $(".tab-btn").click(function () {
    const tabId = $(this).data("tab-id");

    // Update button active state
    $(".tab-btn").removeClass("active");
    $(this).addClass("active");

    // Update text content active state
    $(".tab-content").removeClass("active").hide(); // Hide all content
    $("#content-" + tabId).addClass("active").fadeIn(); // Show the selected content

    // Update image active state
    $(".tab-image").removeClass("active").hide(); // Hide all images
    $("#image-" + tabId).addClass("active").fadeIn(); // Show the selected image
  });
});

</script>


{% schema %}
{
  "name": "Dynamic Tab Section",
  "settings": [
    {
      "type": "text",
      "id": "section_title",
      "label": "Section Title",
      "default": "Explore the Layers of Abstract Design and Depth"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 50,
      "min": 0,
      "max": 200,
      "step": 2
    },
    {
      "type": "range",
      "id": "title_font_size",
      "label": "Title Font Size",
      "default": 36,
      "min": 16,
      "max": 64,
      "step": 2
    },
    {
      "type": "color",
      "id": "title_color",
      "label": "Title Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "title_font_weight",
      "label": "Title Font Weight",
      "default": 700,
      "min": 400,
      "max": 900,
      "step": 100
    },
    {
      "type": "range",
      "id": "content_title_font_size",
      "label": "Content Title Font Size",
      "default": 24,
      "min": 16,
      "max": 48,
      "step": 2
    },
    {
      "type": "color",
      "id": "content_title_color",
      "label": "Content Title Color",
      "default": "#ffffff"
    },
    {
      "type": "range",
      "id": "content_title_font_weight",
      "label": "Content Title Font Weight",
      "default": 700,
      "min": 400,
      "max": 900,
      "step": 100
    },
    {
      "type": "range",
      "id": "content_description_font_size",
      "label": "Content Description Font Size",
      "default": 16,
      "min": 12,
      "max": 32,
      "step": 1
    },
    {
      "type": "color",
      "id": "content_description_color",
      "label": "Content Description Color",
      "default": "#cccccc"
    },
    {
      "type": "range",
      "id": "content_description_font_weight",
      "label": "Content Description Font Weight",
      "default": 400,
      "min": 300,
      "max": 700,
      "step": 100
    }
  ],
  "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "settings": [
        {
          "type": "text",
          "id": "tab_name",
          "label": "Tab Name",
          "default": "Shapes"
        },
        {
          "type": "image_picker",
          "id": "tab_image",
          "label": "Tab Image",
          "info": "Image for the tab."
        },
        {
          "type": "text",
          "id": "tab_title",
          "label": "Tab Title",
          "default": "Fragments of Motion"
        },
        {
          "type": "textarea",
          "id": "tab_description",
          "label": "Tab Description",
          "default": "Where design meets depth—an abstract dance of light and form."
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Tab Section",
      "category": "Custom Sections"
    }
  ]
}
{% endschema %}