s202226701054/newwisefitnessapp/src/app/tab1/tab1.page.html

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      WiseFitness
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="page-content">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <ion-card class="card-style">
          <div class="card-content-wrapper">
            <div class="text-content">
              <ion-card-header>
                <ion-card-title>真实用户健身成果</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                曾经的我体重超标，行动不便。WisefitnessApp为我量身定制计划，坚持数月，成功蜕变！
              </ion-card-content>
            </div>
            <div class="image-content">
              <img src="assets/change2.jpg" alt="Fitness Result" class="card-image">
            </div>
          </div>
        </ion-card>
      </div>

      <div class="swiper-slide">
        <ion-card class="card-style">
          <div class="card-content-wrapper">
            <div class="text-content">
              <ion-card-header>
                <ion-card-title>个性化健身计划生成</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                根据您的独特情况，精准定制专属健身计划
              </ion-card-content>
            </div>
            <div class="image-content">
              <ion-img src="path-to-fitness-plan-image"></ion-img>
            </div>
          </div>
        </ion-card>
      </div>

      <div class="swiper-slide">
        <ion-card class="card-style">
          <div class="card-content-wrapper">
            <div class="text-content">
              <ion-card-header>
                <ion-card-title>个性化饮食计划生成</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                为您打造科学合理的饮食规划，助力健身目标达成
              </ion-card-content>
            </div>
            <div class="image-content">
              <img src="path-to-diet-plan-image" alt="Diet Plan" class="card-image">
            </div>
          </div>
        </ion-card>
      </div>

      <div class="swiper-slide">
        <ion-card class="card-style">
          <div class="card-content-wrapper">
            <div class="text-content">
              <ion-card-header>
                <ion-card-title>限时优惠！</ion-card-title>
              </ion-card-header>
              <ion-card-content>
                新用户注册即享健身课程半价优惠，开启智慧健身之旅！
              </ion-card-content>
            </div>
            <div class="image-content">
              <img src="path-to-coupon-image" alt="Coupon" class="card-image">
            </div>
          </div>
        </ion-card>
      </div>
    </div>
  </div>

  <!-- 用户推荐区域 -->
  <ion-list>
    <ion-item *ngFor="let user of users">
      <ion-avatar slot="start">
        <img src="{{user.avatarUrl}}" alt="{{user.name}}">
      </ion-avatar>
      <ion-label>
        <h2>{{user.name}}</h2>
        <p>{{user.recommendation}}</p>
      </ion-label>
    </ion-item>
    <ion-button fill="outline" slot="end" (click)="goToReviews()">查看更多推荐</ion-button>
  </ion-list>
  <ion-grid>
    <ion-row>
      <ion-col size="4">
        <ion-card>
          <ion-icon name="analytics-outline" slot="icon-only"></ion-icon>
          <ion-card-header>
            <ion-card-title>AI精准分析，专属您的健身方案</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>

      <ion-col size="4">
        <ion-card>
          <ion-icon name="person-circle-outline" slot="icon-only"></ion-icon>
          <ion-card-header>
            <ion-card-title>专业教练在线为您答疑解惑</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>

      <ion-col size="4">
        <ion-card>
          <ion-icon name="chatbubbles-outline" slot="icon-only"></ion-icon>
          <ion-card-header>
            <ion-card-title>健身社区，与志同道合者共进步</ion-card-title>
          </ion-card-header>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
  <app-discount-banner></app-discount-banner>
  <ion-button expand="block" color="success" (click)="goToTestPage()">立即定制我的健身计划</ion-button>
  <ion-button expand="block" fill="outline" (click)="goToLogin()">登录/注册</ion-button>
  <ion-footer>
    <ion-toolbar>
      <ion-label>© 20XX WisefitnessApp. All rights reserved.</ion-label>
      <ion-buttons slot="end">
        <ion-button href="#" (click)="openPrivacyPolicy()">隐私政策</ion-button>
        <ion-button href="#" (click)="openTermsOfService()">服务条款</ion-button>
      </ion-buttons>
    </ion-toolbar>
  </ion-footer>
</ion-content>