Misc. Full Sections / Modules

Custom Coded Needed

<!-- Tabs CSS -->
<style>
@media (min-width: 991px) {
  .home__tools-icon {
    opacity: 0;
  }

  .home__tools-link:hover .home__tools-icon {
    opacity: 1;
  }
}
</style>


<!-- Tabs Custom Code-->
<script>

//when triggers hover
$('.home__tools-link').hover(function(){
		//get this trigger index 
    var index = $('.home__tools-link').index(this);
    //remove all active classes on triggers
    $('.tools-tab').removeClass('is-active');
    //add active class to this item
    $(this).addClass('is-active');
    //remove all active classes on targets
    $('.home__tools-tabs__img').removeClass('is-active');
    //adds active class to equivalent index target element
    $('.home__tools-tabs__img').eq(index).addClass('is-active');
});
</script>

‍

Options: 5 tabs — some can be hidden to reduce the number.

The heading, copy, image, and link to the destination can be updated.

Please note that the above code must be added, as it enables the tab functionality and allows the image to change on hover.

Options: 

The section heading and button are editable and can be shown or hidden as required.

The section includes 3 tabs (Can't change number of tabs), and each tab has the following properties:

1. Tab logo
2. Big image
3. Small image
4. Tag (Industry) – editable
5. Link to the case study
6. Number
7. Number description
8. Quote testimonial and author

Options: Image, Copy, and Button (Copy + Text).
It includes a Variant option that allows you to reverse the layout from right to left and vice versa.

To reuse the same section, you can unlink it and replace the image with a Lottie file.

Options

• Section Heading: Update the heading of the section.
• Background Color: Change the background color of the section.
• Number of Cards: Reduce the number of visible cards from 4 to 3 by hiding a card.
• Per Card Options: Each card includes:
  • Icon: Replace or update the icon.
  • Heading: Edit the card heading.
  • Subheading: Edit the card subheading.
  • Visibility : Card Visibility

• Options
  • Slider Section:
    • Update - 3 slides.
    • Background: Change the background of the slider section.
  • Per Slide Options:
    Each slide includes:
    • Featured Image: Upload the main image for the slide.
    • Company Logo: Add or replace the logo.
    • Testimonial Quote: Add the testimonial text.
    • Person’s Name: Add the name of the person giving the testimonial.
    • Designation: Add the person’s job title or designation in the company.

Options

• Background Color:
  Change the background color of the section.
• Section Heading:
  Update the heading of the section.
• Logos / Images:
  Update or replace all 3 logos/images.

Options

• Section Heading:
  Update the heading of the section.
• Background Color:
  Change the background color of the section.
• Cards (4 Total):
  The section contains 4 cards, and each card includes:
  • Visibility: Show or hide the card.
  • Icon: Update or replace the icon.
  • Heading: Edit the card heading.
  • Paragraph: Edit the card description text.

<!-- CSS -->
<style>
/* Animate Accordion Bottom Grid */
.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-bottom {
  grid-template-rows: 1fr;
}

/* Animate Icon */
.accordion-css__item-icon {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-icon {
  transform: rotate(0.001deg);
}
</style>





<!-- Accordion JS -->
<script>
function initAccordionCSS() {
  document.querySelectorAll('[data-accordion-css-init]').forEach((accordion) => {
    const closeSiblings = accordion.getAttribute('data-accordion-close-siblings') === 'true';

    accordion.addEventListener('click', (event) => {
      const toggle = event.target.closest('[data-accordion-toggle]');
      if (!toggle) return; // Exit if the clicked element is not a toggle

      const singleAccordion = toggle.closest('[data-accordion-status]');
      if (!singleAccordion) return; // Exit if no accordion container is found

      const isActive = singleAccordion.getAttribute('data-accordion-status') === 'active';
      singleAccordion.setAttribute('data-accordion-status', isActive ? 'not-active' : 'active');
      
      // When [data-accordion-close-siblings="true"]
      if (closeSiblings && !isActive) {
        accordion.querySelectorAll('[data-accordion-status="active"]').forEach((sibling) => {
          if (sibling !== singleAccordion) sibling.setAttribute('data-accordion-status', 'not-active');
        });
      }
    });
  });
}

// Initialize Accordion CSS
document.addEventListener('DOMContentLoaded', () => {
  initAccordionCSS();
});
</script>

‍

Options

• FAQs:
  Add as many FAQs as needed by duplicating the FAQ item.
• Section Heading:
  Update the heading of the section.
• Background:
  Change the background of the section.
• Per FAQ Options:
  Each FAQ includes:
  • Question: Edit the FAQ question.
  • Answer: Edit the FAQ answer.

Note:
Please add the custom code in the page settings for the animation to work.
This code controls whether the accordion opens or closes.

How to Set This Up:

1. First, add the Section / Grid 5 Headshots block.
   This acts as the main container that will hold all the profile cards.
2. Inside that section, add a Card / Headshot for each person you want to display.
3. For each headshot card, choose the layout option (called a “variant”) named Grid-small.

That’s it! Once you’ve added all the headshot cards inside the section, they will automatically display in a neat grid layout.