cfc/web/sales/project-card.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1280" width="800" height="1280">
  <defs>
    <linearGradient id="bgGrad" x1="0" y1="0" x2="0.8" y2="1">
      <stop offset="0%" stop-color="#F97316"/>
      <stop offset="50%" stop-color="#EA580C"/>
      <stop offset="100%" stop-color="#C2410C"/>
    </linearGradient>
    <linearGradient id="cardBg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#FFFFFF"/>
      <stop offset="100%" stop-color="#FFF7ED"/>
    </linearGradient>
    <filter id="shadow" x="-5%" y="-5%" width="115%" height="115%">
      <feDropShadow dx="0" dy="4" stdDeviation="16" flood-color="rgba(0,0,0,0.12)"/>
    </filter>
    <filter id="shadowSmall" x="-10%" y="-10%" width="130%" height="130%">
      <feDropShadow dx="0" dy="2" stdDeviation="6" flood-color="rgba(0,0,0,0.08)"/>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="800" height="1280" rx="24" fill="url(#bgGrad)"/>

  <!-- Decorative circles -->
  <circle cx="650" cy="150" r="200" fill="rgba(255,255,255,0.04)"/>
  <circle cx="700" cy="80" r="120" fill="rgba(255,255,255,0.03)"/>
  <circle cx="100" cy="1150" r="180" fill="rgba(255,255,255,0.04)"/>

  <!-- Top decorative dots -->
  <g transform="translate(400, 36)">
    <circle cx="-52" cy="0" r="4" fill="rgba(255,255,255,0.2)"/>
    <circle cx="-26" cy="-3" r="4" fill="rgba(255,255,255,0.3)"/>
    <circle cx="0" cy="0" r="4" fill="rgba(255,255,255,0.4)"/>
    <circle cx="26" cy="-3" r="4" fill="rgba(255,255,255,0.3)"/>
    <circle cx="52" cy="0" r="4" fill="rgba(255,255,255,0.2)"/>
  </g>

  <!-- Brand name -->
  <text x="400" y="80" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="36" font-weight="800" fill="white" text-anchor="middle" letter-spacing="6">浠 艾 福</text>
  <text x="400" y="112" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="17" fill="rgba(255,255,255,0.8)" text-anchor="middle" letter-spacing="3">给全家的一站式幸福提案</text>

  <!-- Divider -->
  <line x1="160" y1="130" x2="640" y2="130" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>

  <!-- Main content card -->
  <rect x="40" y="155" width="720" height="980" rx="20" fill="url(#cardBg)" filter="url(#shadow)"/>

  <!-- ===== Five Dimension Circles ===== -->
  <g transform="translate(400, 230)">
    <!-- 行 (wood) - center -->
    <circle cx="0" cy="0" r="42" fill="#10B981" opacity="0.12"/>
    <circle cx="0" cy="0" r="36" fill="#10B981" opacity="0.2"/>
    <circle cx="0" cy="0" r="28" fill="#10B981"/>
    <text x="0" y="6" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="22" font-weight="700" fill="white" text-anchor="middle">行</text>
    <text x="0" y="52" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#10B981" font-weight="600" text-anchor="middle">人际和谐</text>

    <!-- 身 (earth) - top-left -->
    <circle cx="-90" cy="-70" r="42" fill="#FF8C42" opacity="0.12"/>
    <circle cx="-90" cy="-70" r="36" fill="#FF8C42" opacity="0.2"/>
    <circle cx="-90" cy="-70" r="28" fill="#FF8C42"/>
    <text x="-90" y="-64" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="22" font-weight="700" fill="white" text-anchor="middle">身</text>
    <text x="-90" y="-18" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#FF8C42" font-weight="600" text-anchor="middle">主动健康</text>

    <!-- 智 (metal) - top-right -->
    <circle cx="90" cy="-70" r="42" fill="#6366F1" opacity="0.12"/>
    <circle cx="90" cy="-70" r="36" fill="#6366F1" opacity="0.2"/>
    <circle cx="90" cy="-70" r="28" fill="#6366F1"/>
    <text x="90" y="-64" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="22" font-weight="700" fill="white" text-anchor="middle">智</text>
    <text x="90" y="-18" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#6366F1" font-weight="600" text-anchor="middle">赋能未来</text>

    <!-- 富 (water) - bottom-left -->
    <circle cx="-90" cy="70" r="42" fill="#F59E0B" opacity="0.12"/>
    <circle cx="-90" cy="70" r="36" fill="#F59E0B" opacity="0.2"/>
    <circle cx="-90" cy="70" r="28" fill="#F59E0B"/>
    <text x="-90" y="76" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="22" font-weight="700" fill="white" text-anchor="middle">富</text>
    <text x="-90" y="122" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#F59E0B" font-weight="600" text-anchor="middle">利他创富</text>

    <!-- 心 (fire) - bottom-right -->
    <circle cx="90" cy="70" r="42" fill="#FF6B9D" opacity="0.12"/>
    <circle cx="90" cy="70" r="36" fill="#FF6B9D" opacity="0.2"/>
    <circle cx="90" cy="70" r="28" fill="#FF6B9D"/>
    <text x="90" y="76" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="22" font-weight="700" fill="white" text-anchor="middle">心</text>
    <text x="90" y="122" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#FF6B9D" font-weight="600" text-anchor="middle">大爱相随</text>
  </g>

  <!-- Connecting lines between dimensions (五行相生) -->
  <g stroke="#E5E7EB" stroke-width="1.5" fill="none" opacity="0.6">
    <!-- 身→智 -->
    <line x1="310" y1="160" x2="490" y2="160"/>
    <!-- 智→富 -->
    <line x1="490" y1="230" x2="490" y2="300"/>
    <!-- 富→行 -->
    <line x1="400" y1="300" x2="310" y2="300"/>
    <!-- 行→心 -->
    <line x1="400" y1="230" x2="400" y2="300"/>
    <!-- 心→身 -->
    <line x1="310" y1="300" x2="310" y2="230"/>
  </g>

  <!-- Section Divider -->
  <line x1="80" y1="395" x2="720" y2="395" stroke="#FED7AA" stroke-width="1"/>

  <!-- ===== Project Description ===== -->
  <text x="400" y="430" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="18" font-weight="700" fill="#1C1917" text-anchor="middle">关于浠艾福</text>
  <text x="400" y="458" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#78716C" text-anchor="middle">以五行智慧为根基，以五维能量为引擎</text>
  <text x="400" y="478" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#78716C" text-anchor="middle">为每个家庭定制全生命周期幸福解决方案</text>

  <!-- ===== Three Pillars ===== -->
  <line x1="80" y1="500" x2="720" y2="500" stroke="#FED7AA" stroke-width="1"/>

  <text x="400" y="530" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="16" font-weight="700" fill="#F97316" text-anchor="middle">幸福三支柱</text>

  <!-- Pillar 1 -->
  <rect x="65" y="555" width="210" height="100" rx="12" fill="white" filter="url(#shadowSmall)"/>
  <rect x="65" y="555" width="210" height="4" rx="2" fill="#FF8C42"/>
  <text x="170" y="585" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="14" font-weight="700" fill="#44403C" text-anchor="middle">衣食无忧</text>
  <text x="170" y="606" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#A8A29E" text-anchor="middle">物质生存基础</text>
  <text x="170" y="630" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#78716C" text-anchor="middle">身（主动健康）+ 富（利他创富）</text>

  <!-- Pillar 2 -->
  <rect x="295" y="555" width="210" height="100" rx="12" fill="white" filter="url(#shadowSmall)"/>
  <rect x="295" y="555" width="210" height="4" rx="2" fill="#6366F1"/>
  <text x="400" y="585" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="14" font-weight="700" fill="#44403C" text-anchor="middle">受人尊敬</text>
  <text x="400" y="606" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#A8A29E" text-anchor="middle">社会价值认同</text>
  <text x="400" y="630" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#78716C" text-anchor="middle">智（赋能未来）+ 行（人际和谐）</text>

  <!-- Pillar 3 -->
  <rect x="525" y="555" width="210" height="100" rx="12" fill="white" filter="url(#shadowSmall)"/>
  <rect x="525" y="555" width="210" height="4" rx="2" fill="#FF6B9D"/>
  <text x="630" y="585" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="14" font-weight="700" fill="#44403C" text-anchor="middle">子女传承</text>
  <text x="630" y="606" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#A8A29E" text-anchor="middle">生命延续与期望</text>
  <text x="630" y="630" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="#78716C" text-anchor="middle">心（大爱相随）+ 智（赋能未来）</text>

  <!-- ===== Features ===== -->
  <line x1="80" y1="680" x2="720" y2="680" stroke="#FED7AA" stroke-width="1"/>

  <text x="400" y="710" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="16" font-weight="700" fill="#F97316" text-anchor="middle">核心功能</text>

  <g transform="translate(80, 730)">
    <rect x="0" y="0" width="200" height="44" rx="10" fill="#FFF7ED"/>
    <text x="100" y="27" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#44403C" text-anchor="middle" font-weight="600">🧠 专业心智测评</text>

    <rect x="220" y="0" width="200" height="44" rx="10" fill="#FFF7ED"/>
    <text x="320" y="27" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#44403C" text-anchor="middle" font-weight="600">📋 成长档案追踪</text>

    <rect x="440" y="0" width="200" height="44" rx="10" fill="#FFF7ED"/>
    <text x="540" y="27" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#44403C" text-anchor="middle" font-weight="600">⚡ 五维能量系统</text>

    <rect x="0" y="54" width="200" height="44" rx="10" fill="#FFF7ED"/>
    <text x="100" y="81" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#44403C" text-anchor="middle" font-weight="600">🏥 精准营养推荐</text>

    <rect x="220" y="54" width="200" height="44" rx="10" fill="#FFF7ED"/>
    <text x="320" y="81" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#44403C" text-anchor="middle" font-weight="600">🌱 成长任务管理</text>

    <rect x="440" y="54" width="200" height="44" rx="10" fill="#FFF7ED"/>
    <text x="540" y="81" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="#44403C" text-anchor="middle" font-weight="600">🎮 趣味小游戏</text>
  </g>

  <!-- ===== QR Code Section ===== -->
  <line x1="80" y1="850" x2="720" y2="850" stroke="#FED7AA" stroke-width="1"/>

  <text x="400" y="878" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="15" font-weight="700" fill="#F97316" text-anchor="middle">扫码了解更多</text>

  <image href="../img/yan.png" x="300" y="896" width="200" height="200" rx="8"/>

  <!-- ===== Bottom decoration ===== -->
  <g transform="translate(400, 1120)">
    <circle cx="-52" cy="0" r="3.5" fill="#FF8C42"/>
    <circle cx="-26" cy="-3" r="3.5" fill="#6366F1"/>
    <circle cx="0" cy="0" r="3.5" fill="#F59E0B"/>
    <circle cx="26" cy="-3" r="3.5" fill="#10B981"/>
    <circle cx="52" cy="0" r="3.5" fill="#FF6B9D"/>
  </g>

  <text x="400" y="1140" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="11" fill="rgba(255,255,255,0.4)" text-anchor="middle">浠艾福 · 家庭健康俱乐部</text>

  <!-- Contact info -->
  <text x="400" y="1230" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="13" fill="rgba(255,255,255,0.7)" text-anchor="middle" font-weight="500">书宁老师 13701366188</text>
  <text x="400" y="1255" font-family="'PingFang SC','Microsoft YaHei',sans-serif" font-size="12" fill="rgba(255,255,255,0.4)" text-anchor="middle">www.etotem.com.cn</text>
</svg>