CRM_Montzar/apps/web/src/components/auth/AuthBrandPanel.vue

<script setup lang="ts">
import MentoLogo from '@/components/brand/MentoLogo.vue';
import BrandName from '@/components/brand/BrandName.vue';
import { brand } from '@mento/shared';

withDefaults(
  defineProps<{
    headline?: string;
    description?: string;
  }>(),
  {
    headline: 'همه ارتباطات، یکجا مدیریت می‌شوند',
    description: `با ${brand.nameFa} فروش، پشتیبانی و ارتباط با مشتری را در یک پنل یکپارچه مدیریت کنید و رشد پایدار بسازید.`,
  },
);
</script>

<template>
  <aside class="brand-panel" aria-hidden="false">
    <div class="brand-head">
      <MentoLogo :size="44" :show-text="false" />
      <div class="brand-copy">
        <BrandName />
        <span>{{ brand.taglineFa }}</span>
      </div>
    </div>

    <div class="brand-body">
      <h2>{{ headline }}</h2>
      <p>{{ description }}</p>
    </div>

    <div class="illustration" aria-hidden="true">
      <div class="dash">
        <div class="dash-top">
          <span class="avatar" />
          <span class="bar short" />
          <span class="bar" />
        </div>
        <div class="chart-line" />
        <div class="chart-bars">
          <i /><i /><i /><i /><i />
        </div>
      </div>
      <span class="float chat" />
      <span class="float people" />
      <span class="float check" />
      <span class="float ring" />
      <span class="plant" />
    </div>
  </aside>
</template>

<style scoped>
.brand-panel {
  position: relative;
  display: none;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 20% 10%, rgba(45, 212, 191, 0.18), transparent 42%),
    linear-gradient(165deg, #f0fdfa 0%, #e6fffa 48%, #f8fafc 100%);
  overflow: hidden;
  min-width: 0;
}

.brand-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-copy {
  display: grid;
  gap: 0.1rem;
}

.brand-copy strong {
  font-size: 1.2rem;
  color: #0f172a;
  font-weight: 600;
}

.brand-copy span {
  font-size: 0.78rem;
  color: #64748b;
}

.brand-body h2 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.45;
  color: #0f172a;
}

.brand-body p {
  margin: 0;
  color: #64748b;
  line-height: 1.75;
  font-size: 0.95rem;
  max-width: 28ch;
}

.illustration {
  position: relative;
  margin-top: auto;
  min-height: 220px;
  flex: 1;
}

.dash {
  position: absolute;
  inset-inline-start: 12%;
  bottom: 18%;
  width: min(78%, 280px);
  aspect-ratio: 1.35;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  padding: 1rem;
  backdrop-filter: blur(6px);
}

.dash-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: linear-gradient(145deg, #5eead4, #0d9488);
}

.bar {
  height: 8px;
  border-radius: 999px;
  background: #e2e8f0;
  flex: 1;
}

.bar.short {
  flex: 0.55;
}

.chart-line {
  height: 54px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, transparent 55%, rgba(13, 148, 136, 0.12) 55%),
    radial-gradient(circle at 20% 60%, #14b8a6 3px, transparent 4px),
    radial-gradient(circle at 45% 35%, #14b8a6 3px, transparent 4px),
    radial-gradient(circle at 70% 50%, #14b8a6 3px, transparent 4px),
    radial-gradient(circle at 88% 28%, #14b8a6 3px, transparent 4px);
  margin-bottom: 0.85rem;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  height: 48px;
}

.chart-bars i {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #5eead4, #0f766e);
  opacity: 0.85;
}

.chart-bars i:nth-child(1) { height: 45%; }
.chart-bars i:nth-child(2) { height: 70%; }
.chart-bars i:nth-child(3) { height: 55%; }
.chart-bars i:nth-child(4) { height: 88%; }
.chart-bars i:nth-child(5) { height: 62%; }

.float {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}

.float.chat {
  top: 18%;
  inset-inline-end: 8%;
  background:
    radial-gradient(circle at 35% 40%, #0d9488 0 28%, transparent 29%),
    linear-gradient(145deg, #ecfdf5, #fff);
}

.float.people {
  top: 42%;
  inset-inline-start: 4%;
  background:
    radial-gradient(circle at 50% 38%, #14b8a6 0 22%, transparent 23%),
    linear-gradient(145deg, #f0fdfa, #fff);
}

.float.check {
  bottom: 28%;
  inset-inline-end: 6%;
  background:
    linear-gradient(135deg, transparent 42%, #10b981 42% 58%, transparent 58%),
    linear-gradient(45deg, transparent 48%, #10b981 48% 62%, transparent 62%),
    #ecfdf5;
}

.float.ring {
  top: 8%;
  inset-inline-start: 18%;
  border-radius: 999px;
  background:
    conic-gradient(#0d9488 0 70%, #e2e8f0 70% 100%);
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}

.plant {
  position: absolute;
  bottom: 8%;
  inset-inline-start: 8%;
  width: 28px;
  height: 36px;
  background:
    radial-gradient(ellipse at 50% 20%, #34d399 0 35%, transparent 36%),
    linear-gradient(180deg, #0d9488 0 55%, #134e4a 55%);
  border-radius: 40% 40% 8px 8px;
  opacity: 0.9;
}

@media (min-width: 900px) {
  .brand-panel {
    display: flex;
  }
}
</style>