policy-ui/app/pages/ai-tools/sales-factory.vue

<script setup lang="ts">
usePageTitle('Sales Factory')
</script>

<template>
  <div class="sf-page">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div>
        <h1 class="mt-1 text-2xl font-semibold tracking-tight text-[var(--text-primary)]">Sales Factory</h1>
        <p class="mt-2 text-[14px] leading-relaxed text-[var(--text-muted)]">
          Analyze your book for cross-sell opportunities, assign leads to agents, and connect to email campaigns.
        </p>
      </div>
      <span
        class="inline-flex items-center rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-wider"
        style="background: rgba(1, 105, 111, 0.06); color: #01696f;"
      >Coming soon</span>
    </div>

    <!-- Preview cards -->
    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      <div class="sf-card">
        <div class="sf-card-icon" style="background: rgba(1,105,111,0.08); color: #01696f;">
          <UIcon name="i-heroicons-magnifying-glass-circle" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="sf-card-title">Book Analysis</h3>
        <p class="sf-card-desc">Scan your entire book of business for coverage gaps, mono-line clients, and cross-sell opportunities based on client profiles.</p>
        <div class="sf-card-tags">
          <span class="sf-tag">Gap analysis</span>
          <span class="sf-tag">Mono-line detection</span>
          <span class="sf-tag">Opportunity scoring</span>
        </div>
      </div>

      <div class="sf-card">
        <div class="sf-card-icon" style="background: rgba(124,58,237,0.08); color: #7c3aed;">
          <UIcon name="i-heroicons-user-plus" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="sf-card-title">Lead Assignment</h3>
        <p class="sf-card-desc">Assign qualified leads and opportunities to agents based on capacity, expertise, and territory. Track conversion rates per agent.</p>
        <div class="sf-card-tags">
          <span class="sf-tag">Auto-assignment</span>
          <span class="sf-tag">Round-robin</span>
          <span class="sf-tag">Capacity rules</span>
        </div>
      </div>

      <div class="sf-card">
        <div class="sf-card-icon" style="background: rgba(194,123,26,0.08); color: #c27b1a;">
          <UIcon name="i-heroicons-envelope" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="sf-card-title">Campaign Engine</h3>
        <p class="sf-card-desc">Connect to email campaigns for renewal nudges, cross-sell outreach, and re-engagement sequences. Track open rates and conversions.</p>
        <div class="sf-card-tags">
          <span class="sf-tag">Email sequences</span>
          <span class="sf-tag">A/B testing</span>
          <span class="sf-tag">Analytics</span>
        </div>
      </div>

      <div class="sf-card">
        <div class="sf-card-icon" style="background: rgba(15,123,95,0.08); color: #0f7b5f;">
          <UIcon name="i-heroicons-chart-bar" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="sf-card-title">Pipeline Intelligence</h3>
        <p class="sf-card-desc">Visualize your sales pipeline by stage, LOB, and agent. Forecast close rates and identify stalled deals needing attention.</p>
        <div class="sf-card-tags">
          <span class="sf-tag">Pipeline stages</span>
          <span class="sf-tag">Forecasting</span>
          <span class="sf-tag">Stall alerts</span>
        </div>
      </div>

      <div class="sf-card">
        <div class="sf-card-icon" style="background: rgba(193,56,56,0.08); color: #c13838;">
          <UIcon name="i-heroicons-arrow-path" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="sf-card-title">Cross-sell Engine</h3>
        <p class="sf-card-desc">AI-powered recommendations for which products to offer existing clients based on their profile, industry, and current coverage.</p>
        <div class="sf-card-tags">
          <span class="sf-tag">AI recommendations</span>
          <span class="sf-tag">Product matching</span>
          <span class="sf-tag">Client scoring</span>
        </div>
      </div>

      <div class="sf-card">
        <div class="sf-card-icon" style="background: rgba(190,24,93,0.08); color: #be185d;">
          <UIcon name="i-heroicons-presentation-chart-line" style="width: 20px; height: 20px;" />
        </div>
        <h3 class="sf-card-title">Sales Reporting</h3>
        <p class="sf-card-desc">Agent scorecards, team leaderboards, conversion funnels, and revenue attribution — all in real time.</p>
        <div class="sf-card-tags">
          <span class="sf-tag">Scorecards</span>
          <span class="sf-tag">Leaderboards</span>
          <span class="sf-tag">Attribution</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.sf-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 64rem;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.sf-card {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 200ms ease;
}
.sf-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border-color: rgba(1,105,111,0.15);
}
.sf-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
}
.sf-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.sf-card-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.sf-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.sf-tag {
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,0.03);
  color: var(--text-muted);
}
</style>