ibit-web/code/src/views/BrandView.vue

<script setup lang="ts">
// P 品牌信息 —— 文案来源 docs/品牌信息.md
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const heroStats = computed(() => [
  { value: '2023', label: t('brand.statFounded') },
  { value: t('brand.statRegisteredValue'), label: t('brand.statRegistered') },
  { value: t('brand.statOperationValue'), label: t('brand.statOperation') },
  { value: t('brand.statLicenseValue'), label: t('brand.statLicense') },
])

const teamCores = computed(() => [
  {
    title: t('brand.teamTechTitle'),
    desc: t('brand.teamTechDesc'),
    icon: '⚙️',
  },
  {
    title: t('brand.teamTradingTitle'),
    desc: t('brand.teamTradingDesc'),
    icon: '📈',
  },
])

const flagshipProducts = computed(() => [
  {
    tag: t('brand.product1Tag'),
    title: t('brand.product1Title'),
    desc: t('brand.product1Desc'),
    highlights: [t('brand.product1Highlight1'), t('brand.product1Highlight2'), t('brand.product1Highlight3')],
  },
  {
    tag: t('brand.product2Tag'),
    title: t('brand.product2Title'),
    desc: t('brand.product2Desc'),
    highlights: [t('brand.product2Highlight1'), t('brand.product2Highlight2'), t('brand.product2Highlight3')],
  },
  {
    tag: t('brand.product3Tag'),
    title: t('brand.product3Title'),
    desc: t('brand.product3Desc'),
    highlights: [t('brand.product3Highlight1'), t('brand.product3Highlight2'), t('brand.product3Highlight3')],
  },
])

const metrics = computed(() => [
  { value: '10,000+', label: t('brand.metric1Label'), note: t('brand.metric1Note') },
  { value: '$10M+', label: t('brand.metric2Label'), note: t('brand.metric2Note') },
  { value: '50+', label: t('brand.metric3Label'), note: t('brand.metric3Note') },
  { value: '24/7', label: t('brand.metric4Label'), note: t('brand.metric4Note') },
])

const roadmap = computed(() => [
  { year: t('brand.rmPhase1'), title: t('brand.rm1Title'), desc: t('brand.rm1Desc') },
  { year: t('brand.rmPhase2'), title: t('brand.rm2Title'), desc: t('brand.rm2Desc') },
  { year: t('brand.rmPhase3'), title: t('brand.rm3Title'), desc: t('brand.rm3Desc') },
  { year: t('brand.rmPhase4'), title: t('brand.rm4Title'), desc: t('brand.rm4Desc') },
])

const securityPillars = computed(() => [
  { title: t('brand.security1Title'), desc: t('brand.security1Desc') },
  { title: t('brand.security2Title'), desc: t('brand.security2Desc') },
  { title: t('brand.security3Title'), desc: t('brand.security3Desc') },
  { title: t('brand.security4Title'), desc: t('brand.security4Desc') },
])
</script>

<template>
  <main class="page-main">
    <!-- ── Hero ────────────────────────────────────────── -->
    <section class="brand-hero">
      <div class="hero-glow" aria-hidden="true" />
      <div class="page-container hero-inner">
        <p class="hero-eyebrow">{{ t('brand.heroEyebrow') }}</p>
        <h1 class="hero-title">
          iBit<br>
          <span class="hero-title-sub">{{ t('brand.heroTitleSub') }}</span>
        </h1>
        <p class="hero-desc">{{ t('brand.heroDesc') }}</p>
        <ul class="hero-stats">
          <li v-for="s in heroStats" :key="s.label">
            <span class="stat-value">{{ s.value }}</span>
            <span class="stat-label">{{ s.label }}</span>
          </li>
        </ul>
      </div>
    </section>

    <!-- ── 起源与初心 ──────────────────────────────────── -->
    <section class="brand-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> {{ t('brand.originTitle') }} <span class="bracket">]</span>
        </h2>
        <p class="section-p">{{ t('brand.originPara1') }}</p>
        <p class="section-p">{{ t('brand.originPara2') }}</p>
        <p class="section-p">{{ t('brand.originPara3') }}</p>
      </div>
    </section>

    <!-- ── 双核团队 ────────────────────────────────────── -->
    <section class="brand-section brand-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> {{ t('brand.teamTitle') }} <span class="bracket">]</span>
        </h2>
        <div class="team-grid">
          <div v-for="t in teamCores" :key="t.title" class="team-card">
            <div class="team-icon">{{ t.icon }}</div>
            <h3 class="team-title">{{ t.title }}</h3>
            <p class="team-desc">{{ t.desc }}</p>
          </div>
        </div>
        <p class="section-p team-quote">{{ t('brand.teamQuote') }}</p>
      </div>
    </section>

    <!-- ── 王牌产品 ────────────────────────────────────── -->
    <section class="brand-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> {{ t('brand.productsTitle') }} <span class="bracket">]</span>
        </h2>
        <div class="product-list">
          <article v-for="p in flagshipProducts" :key="p.title" class="product-item">
            <div class="product-tag">{{ p.tag }}</div>
            <h3 class="product-title">{{ p.title }}</h3>
            <p class="product-desc">{{ p.desc }}</p>
            <ul class="product-highlights">
              <li v-for="h in p.highlights" :key="h">
                <span class="dot">·</span>{{ h }}
              </li>
            </ul>
          </article>
        </div>
      </div>
    </section>

    <!-- ── 数据表现 ────────────────────────────────────── -->
    <section class="brand-section brand-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> {{ t('brand.metricsTitle') }} <span class="bracket">]</span>
        </h2>
        <p class="section-p">{{ t('brand.metricsDesc') }}</p>
        <div class="metric-grid">
          <div v-for="m in metrics" :key="m.label" class="metric-card">
            <div class="metric-value">{{ m.value }}</div>
            <div class="metric-label">{{ m.label }}</div>
            <div class="metric-note">{{ m.note }}</div>
          </div>
        </div>
      </div>
    </section>

    <!-- ── 愿景与 Roadmap ──────────────────────────────── -->
    <section class="brand-section">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> {{ t('brand.visionTitle') }} <span class="bracket">]</span>
        </h2>
        <p class="section-p">{{ t('brand.visionDesc') }}</p>

        <h3 class="sub-heading">{{ t('brand.roadmapTitle') }}</h3>
        <ol class="roadmap">
          <li v-for="(r, i) in roadmap" :key="r.title">
            <div class="rm-index">{{ String(i + 1).padStart(2, '0') }}</div>
            <div class="rm-content">
              <p class="rm-phase">{{ r.year }}</p>
              <p class="rm-title">{{ r.title }}</p>
              <p class="rm-desc">{{ r.desc }}</p>
            </div>
          </li>
        </ol>
      </div>
    </section>

    <!-- ── 安全合规 ────────────────────────────────────── -->
    <section class="brand-section brand-section--alt">
      <div class="page-container content">
        <h2 class="section-heading">
          <span class="bracket">[</span> {{ t('brand.securityTitle') }} <span class="bracket">]</span>
        </h2>
        <p class="section-p">{{ t('brand.securityDesc') }}</p>
        <div class="security-grid">
          <div v-for="s in securityPillars" :key="s.title" class="security-card">
            <h4 class="security-title">{{ s.title }}</h4>
            <p class="security-desc">{{ s.desc }}</p>
          </div>
        </div>
      </div>
    </section>

    <!-- ── CTA ─────────────────────────────────────────── -->
    <section class="brand-cta">
      <div class="page-container cta-inner">
        <h2 class="cta-title">{{ t('brand.ctaTitle') }}</h2>
        <p class="cta-desc">{{ t('brand.ctaDesc') }}</p>
        <div class="cta-row">
          <RouterLink to="/download" class="cta-btn cta-btn--primary">
            <span class="bracket">[</span> {{ t('brand.ctaBtn1') }} <span class="bracket">]</span>
          </RouterLink>
          <RouterLink to="/about" class="cta-btn">
            <span class="bracket">[</span> {{ t('brand.ctaBtn2') }} <span class="bracket">]</span>
          </RouterLink>
        </div>
      </div>
    </section>
  </main>
</template>

<style scoped>
/* ── Hero ── */
.brand-hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-12);
  background: var(--color-bg-primary);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  left: 50%;
  top: -20%;
  width: 900px;
  height: 600px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240,185,11,0.2) 0%, transparent 60%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; max-width: 1000px; }
.hero-eyebrow {
  font-size: var(--text-caption);
  letter-spacing: 4px;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-4);
}
.hero-title {
  font-size: 56px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-bottom: var(--space-5);
}
.hero-title-sub {
  display: block;
  font-size: 24px;
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-top: var(--space-2);
}
.hero-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-10);
  max-width: 820px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}
.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-left: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
}
.stat-value {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.stat-label {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ── Section 通用 ── */
.brand-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-primary);
}
.brand-section--alt { background: var(--color-bg-secondary); }
.content { max-width: 1080px; }

.section-heading {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-h2);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}
.bracket { color: var(--color-primary); font-weight: var(--fw-bold); }

.section-p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.9;
  margin-bottom: var(--space-4);
  max-width: 960px;
}

.sub-heading {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-8);
  margin-bottom: var(--space-5);
}

/* ── 团队双核 ── */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.team-card {
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s;
}
.team-card:hover { border-color: var(--color-primary); }
.team-icon {
  font-size: 28px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 185, 11, 0.1);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.team-title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.team-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.8;
}
.team-quote {
  margin-top: var(--space-4);
  font-style: italic;
  color: var(--color-text-secondary);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary);
}

/* ── 王牌产品 ── */
.product-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.product-item {
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color 0.2s, transform 0.2s;
}
.product-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.product-tag {
  display: inline-block;
  padding: 2px var(--space-3);
  background: rgba(240, 185, 11, 0.12);
  color: var(--color-primary);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}
.product-title {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.product-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-4);
}
.product-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
}
.product-highlights li {
  font-size: var(--text-small);
  color: var(--color-text-primary);
  display: inline-flex;
  align-items: center;
}
.product-highlights .dot {
  color: var(--color-primary);
  margin-right: var(--space-1);
  font-weight: var(--fw-bold);
}

/* ── 数据 ── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.metric-card {
  padding: var(--space-6);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.metric-value {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.metric-label {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-2);
}
.metric-note {
  font-size: var(--text-caption);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── Roadmap ── */
.roadmap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
}
.roadmap li {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.rm-index {
  font-size: 28px;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  flex-shrink: 0;
}
.rm-phase {
  font-size: var(--text-caption);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  letter-spacing: 1px;
}
.rm-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-top: var(--space-1);
  margin-bottom: var(--space-2);
}
.rm-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── 安全支柱 ── */
.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.security-card {
  padding: var(--space-5);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.security-title {
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.security-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

/* ── CTA ── */
.brand-cta {
  padding: var(--space-16) 0;
  background: radial-gradient(ellipse at center, rgba(240,185,11,0.08) 0%, transparent 70%),
              var(--color-bg-primary);
  border-top: 1px solid var(--color-border);
}
.cta-inner { text-align: center; max-width: 760px; }
.cta-title {
  font-size: 32px;
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}
.cta-desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: 1.85;
  margin-bottom: var(--space-8);
}
.cta-row {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background 0.2s;
}
.cta-btn:hover { background: rgba(240,185,11,0.1); }
.cta-btn--primary {
  background: var(--color-primary);
  color: #000;
}
.cta-btn--primary:hover { opacity: 0.92; background: var(--color-primary); }

/* ── 移动端 ── */
@media (max-width: 960px) {
  .hero-title { font-size: 40px; }
  .hero-title-sub { font-size: 18px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .security-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .brand-hero { padding: var(--space-10) 0; }
  .hero-title { font-size: 32px; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .brand-section { padding: var(--space-10) 0; }
  .brand-cta { padding: var(--space-10) 0; }
  .cta-title { font-size: 24px; }
}
</style>