AI_Video_LP/layouts/partials/components/en/home.html

<!-- Founder's CTA (keep your partial) -->
<section class="py-4">
  <div class="container">
    {{ partial "founder-cta.html" . }}
  </div>
</section>

<!-- Hero / What We Do -->
<section class="py-5 bg-light">
  <div class="container">
    <div class="row g-4 align-items-center">
      <div class="col-lg-6">
        <p class="kicker mb-2">AI Virtual Anchor</p>
        <h2 class="fw-bold mb-3">AI Virtual Presenter</h2>
        <p class="text-secondary mb-3">
          Combining speech synthesis, realistic human modeling, and image generation technologies, our AI Virtual Anchor
          automatically delivers multilingual news, lessons, or branded messages.
          Whether for media, education, or marketing, it creates customized content with greater speed, flexibility, and
          cost-efficiency.
        </p>
        <ul class="text-secondary ps-3 mb-0">
          <li class="mb-2">Natural synchronization of voice, facial expressions, and lip movement</li>
          <li class="mb-2">Multilingual and multi-platform publishing in real time</li>
          <li class="mb-0">Consistent brand image, scalable and reusable content</li>
        </ul>
      </div>
      <div class="col-lg-6">
        <img src="/imgs/ai-presenter/demo.webp" alt="AI Virtual Anchor Demo" class="img-fluid rounded">
        <p class="mt-2 small text-secondary text-center">
          ▲ Real-world TV use cases: Hakka News “AI Weather Presenter”, CTS “Hangzhou Asian Games Broadcast”, SETN “AI
          Clone Juan”
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Key Benefits -->
<section class="py-5">
  <div class="container text-center">
    <p class="kicker mb-2">Key Benefits</p>
    <h2 class="fw-bold mb-4">AI-Generated · Multilingual · Efficient & Cost-Effective</h2>

    <div class="row g-4">
      <div class="col-md-6 col-lg-4">
        <div class="feature-card h-100">
          <i class="bi bi-lightning-charge fs-3 text-primary mb-2"></i>
          <h5 class="fw-semibold mb-2">AI Auto Generation</h5>
          <p class="text-secondary mb-0">
            Automatically generates presenters, subtitles, and scenes with AI — supporting multiple languages and platforms
            to produce high-quality content efficiently.
          </p>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class="feature-card h-100">
          <i class="bi bi-translate fs-3 text-primary mb-2"></i>
          <h5 class="fw-semibold mb-2">Multilingual & Multi-Version Output</h5>
          <p class="text-secondary mb-0">
            Supports Mandarin, English, Japanese, Korean, and more with subtitle templates.  
            One-click generation of multiple formats and versions to fit every platform.
          </p>
        </div>
      </div>
      <div class="col-md-6 col-lg-4">
        <div class="feature-card h-100">
          <i class="bi bi-currency-dollar fs-3 text-primary mb-2"></i>
          <h5 class="fw-semibold mb-2">High Efficiency, Low Cost</h5>
          <p class="text-secondary mb-0">
            Build once and use long-term — easily switch outfits and scenes without location limits,  
            drastically shortening production time and labor costs.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Use Cases -->
<section class="py-5 bg-light">
  <div class="container text-center">
    <p class="kicker mb-2">Use Cases</p>
    <h2 class="fw-bold mb-3">Versatile Applications Across Multiple Scenarios</h2>
    <p class="text-secondary mb-5">
      From news broadcasting to marketing promotion, AI Virtual Anchors can flexibly serve diverse content needs —
      helping brands scale reach and consistency effortlessly.
    </p>

    <div class="row g-4">
      <div class="col-6 col-md-3"><i class="bi bi-newspaper fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">News Broadcast / TV Production</p>
      </div>
      <div class="col-6 col-md-3"><i class="bi bi-bag-check fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">Product Introduction</p>
      </div>
      <div class="col-6 col-md-3"><i class="bi bi-mortarboard fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">Education / Internal Training</p>
      </div>
      <div class="col-6 col-md-3"><i class="bi bi-broadcast-pin fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">Brand Promotion / Image Video</p>
      </div>
      <div class="col-6 col-md-3"><i class="bi bi-calendar-event fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">Event Opening / Teasers</p>
      </div>
      <div class="col-6 col-md-3"><i class="bi bi-headset fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">Customer Support / Virtual Guide</p>
      </div>
      <div class="col-6 col-md-3"><i class="bi bi-camera-reels fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">Social Media Shorts</p>
      </div>
      <div class="col-6 col-md-3"><i class="bi bi-bar-chart-line fs-1 text-brand"></i>
        <p class="fw-semibold mt-2 mb-0">Internal Presentations / Reports</p>
      </div>
    </div>

    <p class="text-secondary mt-5 mb-0">
      ChoozMo’s AI Digital Humans have been widely adopted across media and enterprise environments — now expanding into
      LLM and AI customer service applications.
    </p>
  </div>
</section>

<!-- Deep Dive -->
<section class="py-5">
  <div class="container">
    <div class="text-center mb-4">
      <p class="kicker mb-2">Deep Dive</p>
      <h2 class="fw-bold mb-2">24/7 Broadcasting — Always On, Always Creating</h2>
      <p class="text-secondary mb-0">Auto Generation × Multilingual Hosting × Always-On Branding</p>
    </div>

    <div class="row g-4">
      <!-- Definition -->
      <div class="col-md-6 col-lg-6">
        <div class="feature-card h-100">
          <div class="d-flex align-items-center justify-content-center mb-2">
            <i class="bi bi-info-circle fs-4 text-primary me-2"></i>
            <strong>What Is an AI Virtual Anchor?</strong>
          </div>
          <p class="text-secondary mb-2">
            A digital host built through speech synthesis and virtual human modeling — capable of reading scripts,
            presenting, and interacting autonomously.
          </p>
          <ul class="text-secondary ps-3 mb-0">
            <li>Natural synchronization of facial expression and speech speed</li>
            <li>Supports multiple languages and automatic subtitles</li>
            <li>Always online — 24/7 operation</li>
          </ul>
        </div>
      </div>

      <!-- Advantages -->
      <div class="col-md-6 col-lg-6">
        <div class="feature-card h-100">
          <div class="d-flex align-items-center justify-content-center mb-2">
            <i class="bi bi-graph-up-arrow fs-4 text-primary me-2"></i>
            <strong>Why Adopt It Now?</strong>
          </div>
          <p class="text-secondary mb-2">
            Scale content faster and more affordably while maintaining brand consistency and speed of updates.
          </p>
          <ul class="text-secondary ps-3 mb-0">
            <li>Fast multilingual content generation</li>
            <li>One-time modeling, long-term reuse</li>
            <li>Cross-platform distribution</li>
          </ul>
        </div>
      </div>

      <!-- Scenarios -->
      <div class="col-md-6 col-lg-6">
        <div class="feature-card h-100">
          <div class="d-flex align-items-center justify-content-center mb-2">
            <i class="bi bi-grid-1x2 fs-4 text-primary me-2"></i>
            <strong>Common Application Scenarios</strong>
          </div>
          <p class="text-secondary mb-2">
            Ideal for news, marketing, education, and customer service videos — all automatically generated.
          </p>
          <ul class="text-secondary ps-3 mb-0">
            <li>Frequent updates (news, announcements)</li>
            <li>Multi-version A/B testing for marketing</li>
            <li>Standardized education and onboarding</li>
          </ul>
        </div>
      </div>

      <!-- Implementation -->
      <div class="col-md-6 col-lg-6">
        <div class="feature-card h-100">
          <div class="d-flex align-items-center justify-content-center mb-2">
            <i class="bi bi-stars fs-4 text-primary me-2"></i>
            <strong>Implementation Tips & Success Factors</strong>
          </div>
          <p class="text-secondary mb-2">
            Scale content production steadily with a “Template × Review × Optimization” workflow.
          </p>
          <ul class="text-secondary ps-3 mb-0">
            <li>Define brand tone and subtitle templates</li>
            <li>Plan multilingual versions and review flow</li>
            <li>Optimize continuously based on view data</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Case Studies -->
<section id="cases" class="py-5 bg-light">
  <div class="container text-center case-studies">
    <p class="kicker mb-2">Case Studies</p>
    <h2 class="fw-bold mb-4">Real-World Cases</h2>

    <div class="row g-4">
      <div class="col-lg-4">
        <div class="media-card">
          <img src="/imgs/ai-presenter/img121.webp" alt="Tourism Administration – Director’s Digital Twin"
            class="img-fluid">
        </div>
        <p class="mt-2 small text-secondary">▲ Tourism Administration – Director’s Digital Twin</p>
      </div>

      <div class="col-lg-4">
        <div class="media-card">
          <img src="/imgs/ai-presenter/img122.webp"
            alt="SMEA, Ministry of Economic Affairs – Deputy Director Wu Chia-Ying" class="img-fluid">
        </div>
        <p class="mt-2 small text-secondary">▲ SMEA – Deputy Director Wu Chia-Ying</p>
      </div>

      <div class="col-lg-4">
        <div class="media-card">
          <img src="/imgs/ai-presenter/img125.webp" alt="CDIB Education Foundation" class="img-fluid">
        </div>
        <p class="mt-2 small text-secondary">▲ CDIB Education Foundation</p>
      </div>

      <div class="col-lg-4">
        <div class="media-card">
          <img src="/imgs/ai-presenter/chibi_2.webp" alt="Chibi-style AI Presenter" class="img-fluid">
        </div>
        <p class="mt-2 small text-secondary">▲ Chibi-style News Presenter</p>
      </div>

      <div class="col-lg-4">
        <div class="media-card">
          <div class="ratio ratio-16x9">
            <iframe
              src="https://www.youtube.com/embed/CUR_9L8RtDk?autoplay=1&mute=1&loop=1&playlist=CUR_9L8RtDk&playsinline=1&controls=0&modestbranding=1&rel=0"
              title="AI Presenter Case" frameborder="0"
              allow="autoplay; encrypted-media; gyroscope; picture-in-picture; web-share"
              referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
            </iframe>
          </div>
        </div>
        <p class="mt-2 small text-secondary">▲ SET News – “AI Clone Juan”</p>
      </div>

      <div class="col-lg-4">
        <div class="media-card">
          <img src="/imgs/ai-presenter/change_outfit.webp" alt="AI Outfit Customization" class="img-fluid">
        </div>
        <p class="mt-2 small text-secondary">▲ AI Outfit Customization: instantly change looks to match brand style or
          event themes</p>
      </div>
    </div>

    <p class="my-4 text-center" style="line-height: 2;">
      🚀 Choose <strong>ChoozMo AI Digital Human</strong><br>
      Create scalable, reusable AI videos with your own brand identity and multilingual content.
    </p>

    <div class="text-center">
      <a href="https://page.line.me/417lsxlz?oat_content=url&openQrModal=true" class="link-btn" target="_blank"
        rel="noopener">
        Get a Free Consultation
      </a>
    </div>
  </div>
</section>