CRM_Montzar/apps/web/src/components/brand/MentoLogo.vue

<script setup lang="ts">
withDefaults(
  defineProps<{
    size?: number;
    showText?: boolean;
    variant?: 'full' | 'mark';
  }>(),
  {
    size: 40,
    showText: true,
    variant: 'full',
  },
);
</script>

<template>
  <div class="mento-logo" :class="variant">
    <span class="mark" :style="{ width: `${size}px`, height: `${size}px` }" aria-hidden="true">
      <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="8" y="12" width="10" height="40" rx="5" fill="#2EB29B" />
        <path
          d="M12 13c1.3-2.1 4.4-2.4 6.1-.6L34 28l5.4-5.1c1.7-1.6 4.5-1.4 5.9.5L47 26.2 33.6 39.3c-1.3 1.3-3.4 1.3-4.7 0L10.5 21.2 12 13Z"
          fill="#134E4A"
        />
        <path
          d="M25.2 30.8 37.5 18.8c1.6-1.6 4.3-1.5 5.8.2L55 32.1l-3.2 3.3L41 25.3 30.2 35.8c-1.3 1.3-3.5 1.2-4.7-.1l-.3-.3Z"
          fill="#2EB29B"
        />
        <rect x="46" y="12" width="10" height="40" rx="5" fill="#134E4A" />
        <path
          d="M44.8 13.2c1.6-1.7 4.4-1.6 5.9.2l2 2.2-8.7 8.3-2.6-2.5c-1.5-1.4-1.1-4 3.4-8.2Z"
          fill="#2EB29B"
        />
      </svg>
    </span>
    <div v-if="showText && variant === 'full'" class="text">
      <strong>Mento</strong>
      <small>by Mentech</small>
    </div>
  </div>
</template>

<style scoped>
.mento-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: transparent;
}

.mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.text {
  display: grid;
  gap: 0.05rem;
  min-width: 0;
}

.text strong {
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  color: #0f172a;
  line-height: 1.1;
  font-weight: 800;
}

.text small {
  color: #94a3b8;
  font-size: 0.72rem;
}
</style>