Shopify Profile Grid – Dynamic Team Showcasev

                    <!-- 
========================================
Section Name: Profile Grid
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays a responsive grid of profile cards with customizable images and names.
- Features interactive hover effects with scaling images and animated text.
- Includes background blur effects and custom clip paths for modern styling.
- Fully responsive design that adapts from mobile to desktop with configurable columns.

Promotion: 
Showcase your team members, testimonials, or featured customers with an engaging profile grid. Create visual interest with stylish hover animations and modern design. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->


{% comment %}
  Dynamic Profile Grid Section
  - Customizable profiles with hover effects
  - Responsive grid layout
  - Background and image customization
{% endcomment %}

<section class="profiles"
  style="
    --name-txt-clr: {{ section.settings.text_color }};
    --bg-clr: {{ section.settings.bg_color }};
    --bg-blur: {{ section.settings.bg_blur }}px;
    --bg-blur-hover: {{ section.settings.bg_blur_hover }}px;
    --size: {{ section.settings.avatar_size }}px;
  ">
  {% for block in section.blocks %}
    {% if block.type == 'profile' %}
      <div class="avatar" {{ block.shopify_attributes }} style="--bg-img:url({{ block.settings.background_image | img_url: 'master' }})">
        <div class="avatar-img">
          <img src="{{ block.settings.profile_image | img_url: 'master' }}" alt="{{ block.settings.name }}">
        </div>
        <p>{{ block.settings.name }}</p>
      </div>
    {% endif %}
  {% endfor %}
</section>

{% style %}
@import url(https://fonts.bunny.net/css?family=roboto:300);

.profiles{
  --img-clip: "M 0 -50 L 200 -50 L 200 150 C 100 150 0 250 0 150 Z";
  --img-shadow: drop-shadow(5px 5px 2px rgba(0 0 0 / 0.5));
  
  font-family: 'Roboto', sans-serif;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols,1),var(--size));
  gap: 2rem;
  margin: {{ section.settings.top_margin }}px auto {{ section.settings.bottom_margin }}px;
  width: fit-content;
}

@media (min-width: 500px){
  .profiles{
    --grid-cols: 2;
  }
}

@media (min-width: 860px){
  .profiles{
    --grid-cols: {{ section.settings.desktop_columns }};
  }
}

.avatar{
  position: relative;
  width: var(--size);
  height: var(--size);
  aspect-ratio: 1;
}

.avatar-img {
  clip-path: path(var(--img-clip));
}

.avatar-img::before{
  content: '';
  position: absolute;
  display: block;
  inset: 50% 0 0 0;
  z-index: -1;
  border-radius: 20px;
  background-color: var(--bg-clr);
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  filter: blur(var(--bg-blur));
  transition: filter 300ms ease-in-out;
}

.avatar-img > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 300ms, filter 300ms;
  transform-origin: bottom;
  scale: var(--img-scale, .9);
  filter: var(--img-shadow);  
}

.avatar > p{
  font-size: {{ section.settings.text_size }}px;
  color: var(--name-txt-clr);
  position: absolute;
  bottom: .5rem;
  right: 0;
  translate: 0 var(--name-y,-50px);
  opacity: var(--name-opacity,0);
  z-index: -1;
  transition-name: translate, opacity;
  transition-delay: 150ms;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.47, 1.64, 0.41, 0.8), ease-in-out;
}

.avatar:hover{
  --img-scale: 1.1;
  --img-shadow: drop-shadow(10px 15px 4px rgba(0 0 0 / 0.5));
  --name-y: 0;
  --name-opacity: 1;
  --bg-blur: var(--bg-blur-hover);
}
{% endstyle %}

{% schema %}
{
  "name": "Profile Grid",
  "settings": [
    {
      "type": "header",
      "content": "Layout Settings"
    },
    {
      "type": "range",
      "id": "desktop_columns",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 4,
      "label": "Number of Columns (Desktop)"
    },
    {
      "type": "range",
      "id": "avatar_size",
      "min": 150,
      "max": 300,
      "step": 10,
      "default": 200,
      "label": "Avatar Size (px)"
    },
    {
      "type": "range",
      "id": "top_margin",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 20,
      "label": "Top Margin (px)"
    },
    {
      "type": "range",
      "id": "bottom_margin",
      "min": 0,
      "max": 100,
      "step": 5,
      "default": 20,
      "label": "Bottom Margin (px)"
    },
    {
      "type": "header",
      "content": "Style Settings"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Name Text Color",
      "default": "#EEEEEE"
    },
    {
      "type": "color",
      "id": "bg_color",
      "label": "Default Background Color",
      "default": "#4682B4"
    },
    {
      "type": "range",
      "id": "text_size",
      "min": 8,
      "max": 24,
      "step": 1,
      "default": 14,
      "label": "Name Text Size (px)"
    },
    {
      "type": "range",
      "id": "bg_blur",
      "min": 0,
      "max": 20,
      "step": 1,
      "default": 0,
      "label": "Background Blur (px)"
    },
    {
      "type": "range",
      "id": "bg_blur_hover",
      "min": 0,
      "max": 40,
      "step": 1,
      "default": 20,
      "label": "Background Blur on Hover (px)"
    }
  ],
  "blocks": [
    {
      "type": "profile",
      "name": "Profile",
      "settings": [
        {
          "type": "image_picker",
          "id": "profile_image",
          "label": "Profile Image"
        },
        {
          "type": "image_picker",
          "id": "background_image",
          "label": "Background Image"
        },
        {
          "type": "text",
          "id": "name",
          "label": "Name",
          "default": "Profile Name"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Profile Grid",
      "category": "Custom Content",
      "blocks": [
        {
          "type": "profile",
          "settings": {
            "name": "Sandra"
          }
        },
        {
          "type": "profile",
          "settings": {
            "name": "David V."
          }
        },
        {
          "type": "profile",
          "settings": {
            "name": "Ronald"
          }
        },
        {
          "type": "profile",
          "settings": {
            "name": "Elizabeth"
          }
        }
      ]
    }
  ]
}
{% endschema %}