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`, borderRadius: `${Math.round(size * 0.3)}px` }"
      aria-hidden="true"
    >
      <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="14" y="16" width="8" height="32" rx="4" fill="#fff" />
        <path
          d="M17 17.5c1-1.6 3.5-1.8 4.8-.5L36 30l4.3-4c1.4-1.3 3.6-1.2 4.7.4L44 27.5 33 37.5c-1.1 1-2.8 1-3.9 0L16.5 24.5 17 17.5Z"
          fill="#134e4a"
        />
        <path
          d="M27.5 32 38 21.5c1.3-1.3 3.4-1.2 4.6.2L50 29.5l-2.6 2.6L40 25.5 31 34c-1 1-2.8 1-3.8-.1l-.7-.9Z"
          fill="#ecfdf5"
        />
        <rect x="42" y="16" width="8" height="32" rx="4" fill="#134e4a" />
        <path
          d="M41 17.5c1.3-1.4 3.5-1.3 4.7.2l1.6 1.8-7 6.6-2.1-2c-1.2-1.1-.9-3.2 2.8-6.6Z"
          fill="#ecfdf5"
        />
      </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: linear-gradient(145deg, #5eead4, #14b8a6);
  box-shadow: 0 8px 18px rgba(20, 184, 166, 0.28);
  overflow: hidden;
  padding: 4px;
  box-sizing: border-box;
}

.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>