1

src/app/tab1/tab1.page.html

@@ -50,6 +50,50 @@
    <!-- 轮播图结束 -->
 
 
+   <!-- 分类 -->
+   <div class="features-grid">
+    <div class="features-row">
+      <div class="feature-item">
+        <ion-icon name="basketball-outline"></ion-icon>
+        <span>基础训练</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="speedometer-outline"></ion-icon>
+        <span>体能提升</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="shield-outline"></ion-icon>
+        <span>防守技巧</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="flash-outline"></ion-icon>
+        <span>进攻战术</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="trending-up-outline"></ion-icon>
+        <span>投篮技巧</span>
+      </div>
+    </div>
+
+    <div class="features-row">
+      <div class="feature-item">
+        <ion-icon name="people-outline"></ion-icon>
+        <span>团队配合</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="fitness-outline"></ion-icon>
+        <span>力量训练</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="timer-outline"></ion-icon>
+        <span>敏捷训练</span>
+      </div>
+      <div class="feature-item">
+        <ion-icon name="medal-outline"></ion-icon>
+        <span>比赛技巧</span>
+      </div>
+    </div>
+  </div>
   <!-- 教练指导区 -->
   <section>
     <ion-card>
@@ -77,20 +121,20 @@
   <!-- 教练图像 -->
   <div class="learning-cards">
     <div class="learning-card">
-      <img src="assets/tab1.img/li.png" alt="王教练">
-      <h3>王教练</h3>
+      <img src="assets/tab1.img/6.png" alt="王教练">
+      <h3>库教练</h3>
     </div>
     <div class="learning-card">
-      <img src="assets/tab1.img/wang.png" alt="王教练">
-      <h3>王教练</h3>
+      <img src="assets/tab1.img/7.png" alt="王教练">
+      <h3>杜教练</h3>
     </div>
     <div class="learning-card">
-      <img src="assets/tab1.img/zhang.png" alt="王教练">
+      <img src="assets/tab1.img/8.png" alt="王教练">
       <h3>王教练</h3>
     </div>
     <div class="learning-card">
-      <img src="assets/tab1.img/li.png" alt="王教练">
-      <h3>王教练</h3>
+      <img src="assets/tab1.img/9.png" alt="王教练">
+      <h3>李教练</h3>
     </div>
   </div>
 </ion-content>

src/app/tab1/tab1.page.scss

@@ -224,4 +224,63 @@ ion-content {
           text-align: center;
       }
   }
-}
+}
+
+
+// 功能导航区
+.features-grid {
+  padding: 16px var(--page-padding);
+  background: white;
+
+  .features-row {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+
+      &:last-child {
+          margin-bottom: 0;
+      }
+  }
+
+  .feature-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 8px;
+      border-radius: 8px;
+      transition: all 0.3s;
+
+      &:active {
+          background: rgba(182, 77, 36, 0.1);
+      }
+
+      ion-icon {
+          font-size: 28px;
+          color: #4CAF50;  // 主题色，可以根据需要调整
+          margin-bottom: 8px;
+          transition: all 0.3s ease;
+      }
+
+      &:hover {
+          transform: translateY(-3px);
+          
+          ion-icon {
+              transform: scale(1.1);
+          }
+      }
+
+      // 为不同类别设置不同的图标颜色
+      &:nth-child(1) ion-icon { color: #FF5722; }  // 基础训练
+      &:nth-child(2) ion-icon { color: #2196F3; }  // 体能提升
+      &:nth-child(3) ion-icon { color: #4CAF50; }  // 防守技巧
+      &:nth-child(4) ion-icon { color: #FFC107; }  // 进攻战术
+      &:nth-child(5) ion-icon { color: #9C27B0; }  // 投篮技巧
+
+      span {
+          font-size: 12px;
+          color: #333;
+      }
+  }
+}

src/app/tab1/tab1.page.ts

@@ -29,11 +29,11 @@ export class Tab1Page {
     { name: '教练王', style: '体能训练', avatar: 'assets/tab1.img/wang.png' },
   ];
   slides: Slide[] = [
-    { image: 'assets/tab1.img/li.png', alt: '轮播图1' },
-    { image: 'assets/tab1.img/wang.png', alt: '轮播图2' },
-    { image: 'assets/tab1.img/zhang.png', alt: '轮播图3' },
-    { image: 'assets/tab1.img/li.png', alt: '轮播图4' },
-    { image: 'assets/tab1.img/li.png', alt: '轮播图5' }
+    { image: 'assets/tab1.img/1.png', alt: '轮播图1' },
+    { image: 'assets/tab1.img/2.jpg', alt: '轮播图2' },
+    { image: 'assets/tab1.img/3.jpg', alt: '轮播图3' },
+    { image: 'assets/tab1.img/4.jpg', alt: '轮播图4' },
+    { image: 'assets/tab1.img/5.jpg', alt: '轮播图5' }
   ];
 
   currentIndex = 0;
@@ -175,4 +175,6 @@ export class Tab1Page {
     }
     this.startAutoPlay();
   }
+
+  
 }

src/app/tab4/tab4.page.html

@@ -1,83 +1,173 @@
 <ion-header [translucent]="true">
   <ion-toolbar class="custom-toolbar">
-    <ion-title class="custom-title">
-      我的
-    </ion-title>
+    <ion-title class="custom-title">我的</ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content [fullscreen]="true">
 
+<ion-content [fullscreen]="true" class="ion-padding">
   <!-- 用户登录状态 -->
-  <ion-card>
-    <!-- 未登录 -->
-    @if(!currentUser?.id){
-      <ion-content>
-        <ion-card class="login-card">
-          <ion-card-header>
-            <ion-card-title>欢迎来到篮球火！</ion-card-title>
-            <ion-card-subtitle>在这里，我们为您提供专业的篮球训练和健康管理方案，帮助您提升技能和身体素质。无论是技术指导、战术分析还是身体训练，我们的团队将为您量身定制个性化的训练计划。让我们一起在篮球的世界中成长，迎接挑战，超越自我！</ion-card-subtitle>
-          </ion-card-header>
-          <ion-card-content>
-            登录后，您将能够记录您的训练数据，获取专业建议，参与社区互动，享受更好的篮球体验！欢迎您的加入，篮球火，从此刻开始！
-          </ion-card-content>
-          <ion-card-content>
-            <img src="assets/tab1.img/商标.jpg" alt="商标" class="responsive-image" />
-          </ion-card-content>
-        </ion-card>
-      </ion-content>
-    }
-    <!-- 已登录 -->
-    @if(currentUser?.id){
-      <ion-card-header class="card-header">
-        <img [src]="currentUser?.get('avatar')" onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" alt="图片加载失败" class="avatar" />
-        <div class="user-info">
-          <ion-card-title>账号：{{currentUser?.get("username")}}</ion-card-title>
-          <ion-card-subtitle>
-            姓名: {{currentUser?.get("realname") || "-"}}
-            性别: {{currentUser?.get("gender") || "-"}}
-            年龄: {{currentUser?.get("age") || "-"}}
-            
-          </ion-card-subtitle>
+  @if(!currentUser?.id){
+    <div class="welcome-container">
+      <ion-card class="login-card">
+        <div class="logo-container">
+          <img src="assets/tab1.img/商标.jpg" alt="商标" class="logo-image" />
         </div>
-      </ion-card-header>
-    }
-    <ion-card-content>
-      @if(!currentUser?.id){
-        <ion-button expand="block" (click)="signup()" color="success">注册</ion-button>
-        <ion-button expand="block" (click)="login()" color="success">登录</ion-button>
-      }
-      @if(currentUser?.id){
-        <ion-button expand="block" (click)="editUser()" color="success">编辑资料</ion-button>
-        <ion-button expand="block" (click)="logout()" color="medium">登出</ion-button>
-      }
-    </ion-card-content>
-  </ion-card>
+        
+        <ion-card-header>
+          <ion-card-title class="welcome-title">欢迎来到篮球火！</ion-card-title>
+          <ion-card-subtitle class="welcome-subtitle">
+            在这里，我们为您提供专业的篮球训练和健康管理方案，帮助您提升技能和身体素质。
+          </ion-card-subtitle>
+        </ion-card-header>
 
-  @if(currentUser?.id){
-    <ion-card class="memo-card" (click)="gototab5()">
-      <h2 class="memo-title">训练备忘录</h2>
-      <p class="memo-description">记录下您每次训练时的心得体会，及时做出改变加强训练</p>
-    </ion-card>
-  }
-  @if(currentUser?.id){
-    <ion-card class="memo-card" (click)="gototab6()">
-      <h2 class="memo-title">身体数据</h2>
-      <p class="memo-description">记录下您的身体数据</p>
-    </ion-card>
-  }
-  @if(currentUser?.id){
-    <ion-card class="memo-card" (click)="gototab7()">
-      <h2 class="memo-title">训练记录</h2>
-      <p class="memo-description">记录下您的训练记录，成长与进步</p>
-    </ion-card>
+        <ion-card-content class="login-content">
+          <div class="login-description">
+            登录后，您将能够：
+            <ul class="feature-list">
+              <li><ion-icon name="basketball-outline"></ion-icon> 记录训练数据</li>
+              <li><ion-icon name="trophy-outline"></ion-icon> 获取专业建议</li>
+              <li><ion-icon name="people-outline"></ion-icon> 参与社区互动</li>
+              <li><ion-icon name="trending-up-outline"></ion-icon> 追踪个人进步</li>
+            </ul>
+          </div>
+          
+          <div class="button-container">
+            <ion-button expand="block" class="signup-btn" (click)="signup()">
+              <ion-icon name="person-add-outline" slot="start"></ion-icon>
+              注册账号
+            </ion-button>
+            <ion-button expand="block" class="login-btn" (click)="login()">
+              <ion-icon name="log-in-outline" slot="start"></ion-icon>
+              立即登录
+            </ion-button>
+          </div>
+        </ion-card-content>
+      </ion-card>
+    </div>
   }
+
+  <!-- 已登录 -->
   @if(currentUser?.id){
-    <ion-card class="memo-card" (click)="gototab8()">
-      <h2 class="memo-title">评价与反馈</h2>
-      <p class="memo-description">请您给出宝贵的建议</p>
-    </ion-card>
-  }
+    <div class="profile-container">
+      <ion-card class="profile-card">
+        <div class="profile-header">
+          <div class="avatar-container">
+            <img [src]="currentUser?.get('avatar')" 
+                 onerror="this.src='https://app.fmode.cn/dev/jxnu/202226701019/头像示例.png';" 
+                 alt="头像" 
+                 class="avatar" />
+            <div class="avatar-edit-badge">
+              <ion-icon name="camera"></ion-icon>
+            </div>
+          </div>
+          <div class="user-info">
+            <h2 class="username">{{currentUser?.get("username")}}</h2>
+            <div class="user-stats">
+              <div class="stat-item">
+                <ion-icon name="basketball-outline"></ion-icon>
+                <span>训练天数</span>
+                <strong>30</strong>
+              </div>
+              <div class="stat-item">
+                <ion-icon name="trending-up-outline"></ion-icon>
+                <span>进步指数</span>
+                <strong>85%</strong>
+              </div>
+            </div>
+          </div>
+        </div>
 
+        <div class="profile-details">
+          <div class="detail-item">
+            <ion-icon name="person-outline"></ion-icon>
+            <span class="label">姓名</span>
+            <span class="value">{{currentUser?.get("realname") || "-"}}</span>
+          </div>
+          <div class="detail-item">
+            <ion-icon name="transgender-outline"></ion-icon>
+            <span class="label">性别</span>
+            <span class="value">{{currentUser?.get("gender") || "-"}}</span>
+          </div>
+          <div class="detail-item">
+            <ion-icon name="calendar-outline"></ion-icon>
+            <span class="label">年龄</span>
+            <span class="value">{{currentUser?.get("age") || "-"}}岁</span>
+          </div>
+        </div>
+
+        <div class="profile-actions">
+          <ion-button class="edit-btn" (click)="editUser()">
+            <ion-icon name="create-outline" slot="start"></ion-icon>
+            编辑资料
+          </ion-button>
+          <ion-button class="logout-btn" (click)="logout()">
+            <ion-icon name="log-out-outline" slot="start"></ion-icon>
+            退出登录
+          </ion-button>
+        </div>
+      </ion-card>
+
+      <div class="features-grid">
+        <ion-card class="feature-card" (click)="gototab5()">
+          <div class="feature-content">
+            <div class="feature-icon">
+              <ion-icon name="book-outline"></ion-icon>
+            </div>
+            <div class="feature-text">
+              <h3>训练备忘录</h3>
+              <p>记录训练心得，持续改进</p>
+            </div>
+          </div>
+          <div class="feature-arrow">
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+          </div>
+        </ion-card>
 
+        <ion-card class="feature-card" (click)="gototab6()">
+          <div class="feature-content">
+            <div class="feature-icon fitness">
+              <ion-icon name="fitness-outline"></ion-icon>
+            </div>
+            <div class="feature-text">
+              <h3>身体数据</h3>
+              <p>追踪身体状况</p>
+            </div>
+          </div>
+          <div class="feature-arrow">
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+          </div>
+        </ion-card>
+
+        <ion-card class="feature-card" (click)="gototab7()">
+          <div class="feature-content">
+            <div class="feature-icon trophy">
+              <ion-icon name="trophy-outline"></ion-icon>
+            </div>
+            <div class="feature-text">
+              <h3>训练记录</h3>
+              <p>见证成长与进步</p>
+            </div>
+          </div>
+          <div class="feature-arrow">
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+          </div>
+        </ion-card>
 
+        <ion-card class="feature-card" (click)="gototab8()">
+          <div class="feature-content">
+            <div class="feature-icon feedback">
+              <ion-icon name="chatbubbles-outline"></ion-icon>
+            </div>
+            <div class="feature-text">
+              <h3>评价反馈</h3>
+              <p>分享您的建议</p>
+            </div>
+          </div>
+          <div class="feature-arrow">
+            <ion-icon name="chevron-forward-outline"></ion-icon>
+          </div>
+        </ion-card>
+      </div>
+    </div>
+  }
 </ion-content>

src/app/tab4/tab4.page.scss

@@ -321,4 +321,460 @@ ion-button {
     .memo-card .memo-description {
         color: #bbb;
     }
+}
+
+.welcome-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100%;
+    padding: 20px;
+    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
+}
+
+.login-card {
+    max-width: 500px;
+    width: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 24px;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    overflow: hidden;
+}
+
+.logo-container {
+    display: flex;
+    justify-content: center;
+    padding: 30px 0 15px;
+    
+    .logo-image {
+        width: 120px;
+        height: 120px;
+        border-radius: 60px;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease;
+        
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+}
+
+.welcome-title {
+    font-size: 2em;
+    font-weight: 700;
+    color: #2c3e50;
+    text-align: center;
+    margin-bottom: 15px;
+    background: linear-gradient(45deg, #4CAF50, #2196F3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.welcome-subtitle {
+    font-size: 1.1em;
+    line-height: 1.6;
+    color: #666;
+    text-align: center;
+    padding: 0 20px;
+}
+
+.login-content {
+    padding: 20px;
+}
+
+.login-description {
+    color: #555;
+    font-size: 1.1em;
+    margin-bottom: 25px;
+}
+
+.feature-list {
+    list-style: none;
+    padding: 0;
+    margin: 20px 0;
+    
+    li {
+        display: flex;
+        align-items: center;
+        margin: 12px 0;
+        color: #2c3e50;
+        font-size: 1.1em;
+        
+        ion-icon {
+            margin-right: 10px;
+            color: #4CAF50;
+            font-size: 1.4em;
+        }
+    }
+}
+
+.button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    margin-top: 30px;
+    
+    ion-button {
+        margin: 0;
+        height: 48px;
+        font-size: 1.1em;
+        --border-radius: 12px;
+        
+        &.signup-btn {
+            --background: linear-gradient(45deg, #4CAF50, #45b649);
+            
+            &:hover {
+                --background: linear-gradient(45deg, #45b649, #4CAF50);
+            }
+        }
+        
+        &.login-btn {
+            --background: linear-gradient(45deg, #2196F3, #1e88e5);
+            
+            &:hover {
+                --background: linear-gradient(45deg, #1e88e5, #2196F3);
+            }
+        }
+        
+        ion-icon {
+            margin-right: 8px;
+            font-size: 1.2em;
+        }
+    }
+}
+
+@media (max-width: 480px) {
+    .login-card {
+        margin: 10px;
+    }
+    
+    .welcome-title {
+        font-size: 1.8em;
+    }
+    
+    .feature-list li {
+        font-size: 1em;
+    }
+}
+
+.login-card {
+    animation: slideUp 0.5s ease-out;
+}
+
+@keyframes slideUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.profile-container {
+    padding: 16px;
+    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+    min-height: 100%;
+}
+
+.profile-card {
+    background: white;
+    border-radius: 24px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    margin-bottom: 24px;
+}
+
+.profile-header {
+    background: linear-gradient(120deg, #4CAF50, #2196F3);
+    padding: 30px 20px;
+    color: white;
+    text-align: center;
+}
+
+.avatar-container {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 20px;
+    
+    .avatar {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        border: 4px solid rgba(255, 255, 255, 0.9);
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+        object-fit: cover;
+    }
+    
+    .avatar-edit-badge {
+        position: absolute;
+        bottom: 5px;
+        right: 5px;
+        background: #4CAF50;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        
+        &:hover {
+            transform: scale(1.1);
+            background: #45a049;
+        }
+        
+        ion-icon {
+            font-size: 20px;
+            color: white;
+        }
+    }
+}
+
+.user-info {
+    .username {
+        font-size: 1.8em;
+        font-weight: 600;
+        margin: 0 0 15px;
+        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+}
+
+.user-stats {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    
+    .stat-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        
+        ion-icon {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+        
+        span {
+            font-size: 0.9em;
+            opacity: 0.9;
+        }
+        
+        strong {
+            font-size: 1.2em;
+            font-weight: 600;
+            margin-top: 5px;
+        }
+    }
+}
+
+.profile-details {
+    padding: 20px;
+    background: rgba(255, 255, 255, 0.95);
+    
+    .detail-item {
+        display: flex;
+        align-items: center;
+        padding: 12px 0;
+        border-bottom: 1px solid #eee;
+        
+        &:last-child {
+            border-bottom: none;
+        }
+        
+        ion-icon {
+            font-size: 20px;
+            color: #4CAF50;
+            margin-right: 12px;
+        }
+        
+        .label {
+            color: #666;
+            width: 80px;
+        }
+        
+        .value {
+            color: #2c3e50;
+            font-weight: 500;
+            flex: 1;
+        }
+    }
+}
+
+.profile-actions {
+    padding: 20px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+    
+    ion-button {
+        margin: 0;
+        height: 46px;
+        font-size: 1em;
+        --border-radius: 12px;
+        
+        &.edit-btn {
+            --background: linear-gradient(45deg, #4CAF50, #45b649);
+            
+            &:hover {
+                --background: linear-gradient(45deg, #45b649, #4CAF50);
+            }
+        }
+        
+        &.logout-btn {
+            --background: linear-gradient(45deg, #ff4b4b, #ff6b6b);
+            
+            &:hover {
+                --background: linear-gradient(45deg, #ff6b6b, #ff4b4b);
+            }
+        }
+        
+        ion-icon {
+            margin-right: 8px;
+        }
+    }
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+}
+
+.feature-card {
+    background: white;
+    border-radius: 16px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+        
+        .feature-arrow ion-icon {
+            transform: translateX(3px);
+        }
+    }
+    
+    .feature-content {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+    }
+    
+    .feature-icon {
+        width: 50px;
+        height: 50px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #4CAF50, #45b649);
+        
+        &.fitness {
+            background: linear-gradient(135deg, #2196F3, #1e88e5);
+        }
+        
+        &.trophy {
+            background: linear-gradient(135deg, #FF9800, #F57C00);
+        }
+        
+        &.feedback {
+            background: linear-gradient(135deg, #9C27B0, #7B1FA2);
+        }
+        
+        ion-icon {
+            font-size: 24px;
+            color: white;
+        }
+    }
+    
+    .feature-text {
+        h3 {
+            margin: 0 0 5px;
+            font-size: 1.1em;
+            color: #2c3e50;
+        }
+        
+        p {
+            margin: 0;
+            font-size: 0.9em;
+            color: #666;
+        }
+    }
+    
+    .feature-arrow {
+        color: #666;
+        
+        ion-icon {
+            font-size: 20px;
+            transition: transform 0.3s ease;
+        }
+    }
+}
+
+@media (max-width: 480px) {
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .profile-actions {
+        grid-template-columns: 1fr;
+    }
+    
+    .user-stats {
+        gap: 20px;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .profile-container {
+        background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
+    }
+    
+    .profile-card, .feature-card {
+        background: #2d2d2d;
+    }
+    
+    .profile-details {
+        background: rgba(45, 45, 45, 0.95);
+        
+        .detail-item {
+            border-color: #444;
+            
+            .label {
+                color: #bbb;
+            }
+            
+            .value {
+                color: #fff;
+            }
+        }
+    }
+    
+    .feature-card {
+        .feature-text {
+            h3 {
+                color: #fff;
+            }
+            
+            p {
+                color: #bbb;
+            }
+        }
+        
+        .feature-arrow {
+            color: #bbb;
+        }
+    }
 }

src/app/tab4/tab4.page.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController } from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle, ModalController,IonIcon } from '@ionic/angular/standalone';
 import { Router } from '@angular/router';
 import { openUserLoginModal } from '../../lib/user/modal-user-login/modal-user-login.component';
 import { CloudUser } from '../../lib/ncloud';
@@ -10,7 +10,7 @@ import { openUserEditModal } from '../../lib/user/modal-user-edit/modal-user-edi
   templateUrl: 'tab4.page.html',
   styleUrls: ['tab4.page.scss'],
   standalone: true,
-  imports: [IonHeader, IonToolbar, IonTitle, IonContent, 
+  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonIcon,
     IonCard, IonCardContent, IonButton, IonCardHeader, IonCardTitle, IonCardSubtitle,
   ],
 })

src/app/tabs/tabs.page.ts

@@ -1,7 +1,7 @@
 import { Component, EnvironmentInjector, inject } from '@angular/core';
 import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
-import { triangle, ellipse, square, chevronBackOutline, chevronForwardOutline } from 'ionicons/icons';
+import { triangle, ellipse, square, chevronBackOutline, chevronForwardOutline, basketballOutline, trophyOutline, peopleOutline, trendingUpOutline, logInOutline, personAddOutline, cameraOutline, pencil, pencilOutline, createOutline, logOutOutline, bookOutline, fitnessOutline, heartCircleOutline, heartCircle, heartHalfOutline, heartOutline, chatbubblesOutline, shieldOutline, flashOutline, speedometerOutline, timerOutline, medalOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'app-tabs',
@@ -14,6 +14,9 @@ export class TabsPage {
   public environmentInjector = inject(EnvironmentInjector);
 
   constructor() {
-    addIcons({ triangle, ellipse, square,chevronBackOutline,chevronForwardOutline});
+    addIcons({ triangle, ellipse, square,chevronBackOutline,chevronForwardOutline,basketballOutline,trophyOutline
+      ,peopleOutline,trendingUpOutline,logInOutline,personAddOutline,cameraOutline,pencilOutline,pencil,createOutline,logOutOutline
+    ,bookOutline,fitnessOutline,heartOutline,heartHalfOutline,heartCircleOutline,heartCircle,chatbubblesOutline,speedometerOutline,
+    shieldOutline,flashOutline,timerOutline,medalOutline});
   }
 }