---
### ALL PAGES ###
layout: themes/[ site.theme.id ]/frontend/core/base

### PAGE CONFIG ###
company_values:
  - title: "Innovation first"
    description: "We push boundaries and challenge the status quo to create breakthrough solutions"
    icon: "lightbulb"
  - title: "Customer obsessed"
    description: "Everything we do is focused on delivering exceptional value to our customers"
    icon: "heart"
  - title: "Team excellence"
    description: "We hire the best talent and create an environment where everyone can thrive"
    icon: "users"
  - title: "Transparent culture"
    description: "We believe in open communication, honest feedback, and shared decision-making"
    icon: "magnifying-glass"
---

<!-- Hero Section -->
<section>
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-lg-10">
        <h1 class="h1 mb-3">
          Meet our <span class="text-gradient-rainbow">amazing team</span>
        </h1>
        <p class="fs-5 text-muted mb-0">
          We're a diverse group of passionate individuals working together to build the future of {{ site.brand.name }}. Get to know the people behind the magic.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Team members section -->
<section class="pt-0">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="h2 mb-3">The people behind the <span class="text-accent">magic</span></h2>
      <p class="fs-5 text-muted">Get to know the talented individuals driving {{ site.brand.name }} forward</p>
    </div>

    <div class="row g-4 justify-content-center">
      {% for member in site.team %}
        <div class="col-lg-4 col-md-6">
          <div class="card h-100 border-0 shadow-sm team-member-card">
            <div class="card-body p-4 text-center d-flex flex-column">
              <div class="position-relative mb-3 d-inline-block">
                <a href="{{ site.url }}{{ member.url }}" class="text-decoration-none d-block">
                  <div class="avatar avatar-2xl">
                    {%- uj_member member.id, "image-tag", class="rounded-circle object-fit-cover d-block team-member-image" -%}
                  </div>
                </a>
              </div>

              <h4 class="mb-1">
                <a href="{{ site.url }}{{ member.url }}" class="text-decoration-none text-body">
                  {%- uj_member member.id, "name" -%}
                </a>
              </h4>
              <p class="text-primary fw-semibold mb-3">{{ member.member.position }}</p>
              <p class="text-muted small mb-0 flex-grow-1">{{ member.member.description }}</p>

              {% iftruthy member.member.links %}
                <div class="d-flex justify-content-center gap-2 mt-3">
                  {% for link in member.member.links %}
                    {% assign link_icon = link.id %}
                    {% if link.id == "website" %}{% assign link_icon = "globe" %}{% endif %}
                    <a href="{{ link.url }}" class="btn btn-outline-adaptive btn-sm avatar avatar-md rounded-circle d-flex align-items-center justify-content-center" target="_blank" rel="nofollow noopener" title="{{ link.title }}">
                      {% uj_icon link_icon, "" %}
                    </a>
                  {% endfor %}
                </div>
              {% endiftruthy %}

              <div class="mt-3">
                <a href="{{ site.url }}{{ member.url }}" class="btn btn-outline-primary btn-sm">
                  View profile
                </a>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Mission Statement Section -->
<section>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 text-center">
        <div class="bg-primary bg-gradient rounded-4 p-5 text-light">
          <h2 class="h2 mb-4">Our mission</h2>
          <p class="fs-4 fw-bold mb-4 opacity-90">
            "To empower individuals and businesses with innovative technology solutions that simplify complex challenges and unlock new possibilities for growth and success."
          </p>
          {% assign mission_member = nil %}
          {% for member in site.team %}
            {% assign position_lower = member.member.position | downcase %}
            {% if position_lower == "ceo" or position_lower == "chief executive officer" %}
              {% assign mission_member = member %}
              {% break %}
            {% endif %}
          {% endfor %}
          {% unless mission_member %}
            {% for member in site.team %}
              {% assign position_lower = member.member.position | downcase %}
              {% if position_lower == "owner" %}
                {% assign mission_member = member %}
                {% break %}
              {% endif %}
            {% endfor %}
          {% endunless %}
          {% unless mission_member %}
            {% for member in site.team %}
              {% assign position_lower = member.member.position | downcase %}
              {% if position_lower == "president" %}
                {% assign mission_member = member %}
                {% break %}
              {% endif %}
            {% endfor %}
          {% endunless %}
          {% unless mission_member %}
            {% assign mission_member = site.team | first %}
          {% endunless %}
          {% if mission_member %}
            <div class="d-flex justify-content-center align-items-center">
              <div class="border border-white avatar avatar-lg rounded-circle d-flex align-items-center justify-content-center me-3">
                {% uj_icon "quote-left", "fa-3xl" %}
              </div>
              <div class="text-start">
                <div class="fw-bold">{%- uj_member mission_member.id, "name" -%}</div>
                <div class="opacity-75">{{ mission_member.member.position }}</div>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Company Values Section -->
<section>
  <div class="container">
    <div class="text-center mb-5" data-lazy="@class animation-slide-up">
      <h2 class="h2 mb-3">
        Our <span class="">core values</span>
      </h2>
      <p class="fs-5 text-muted">The principles that guide everything we do</p>
    </div>

    <div class="row g-4">
      {% for value in page.resolved.company_values %}
        <div class="col-lg-3 col-md-6" data-lazy="@class animation-slide-up">
          <div class="card h-100 border-0 shadow-sm text-center rounded-3">
            <div class="card-body p-4">
              <div class="bg-primary bg-gradient avatar avatar-xl rounded-circle d-inline-flex align-items-center justify-content-center mb-3">
                {% uj_icon value.icon, "text-light fs-2" %}
              </div>
              <h4 class="fw-bold mb-3">{{ value.title }}</h4>
              <p class="text-muted mb-0">{{ value.description }}</p>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</section>

<!-- Join Our Team CTA -->
<section>
  <div class="container">
    <div class="row justify-content-center text-center">
      <div class="col-lg-8">
        <div class="mb-4">
          {% uj_icon "briefcase", "text-primary display-4 mb-4" %}
        </div>
        <h2 class="h2 mb-4">
          Want to join our <span class="">team</span>?
        </h2>
        <p class="fs-5 text-muted mb-4">
          We're always looking for talented, passionate people to join our mission. Check out our open positions and become part of something amazing.
        </p>
        <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
          <a href="/careers" class="btn btn-primary btn-lg px-5 py-3">
            {% uj_icon "rocket", "me-2" %}
            Apply now
          </a>
          <a href="/contact" class="btn btn-outline-adaptive btn-lg px-5 py-3">
            {% uj_icon "envelope", "me-2" %}
            Get in touch
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

{{ content | uj_content_format }}