AI_Student_Client/src/views/officialweb.vue

<template>
  <div id="app">
    <!-- 导航栏 - 使用Element Navbar组件 -->
    <nav class="custom-nav">
      <div class="nav-logo" @click="scrollToTop">
        <i class="fas fa-brain"></i> GPS-REN
      </div>

      <el-menu class="nav-menu" mode="horizontal" :default-active="activeNav">
        <el-menu-item index="1" @click="scrollToSection('home')">首页</el-menu-item>
        <el-menu-item index="2" @click="scrollToSection('model')">GPS-REN教学法</el-menu-item>
        <el-menu-item index="3" @click="scrollToSection('features')">平台功能</el-menu-item>
        <el-menu-item index="4" @click="scrollToSection('cases')">使用案例</el-menu-item>
        <el-menu-item index="5" @click="scrollToSection('about')">关于我们</el-menu-item>
      </el-menu>

      <div class="nav-buttons">
        <el-button class="nav-btn-outline" @click="showLoginDialog">学生端</el-button>
        <el-button class="nav-btn-primary" type="primary" @click="showRegisterDialog">教师端</el-button>
      </div>
    </nav>

    <!-- 主体内容 -->
    <div>
      <!-- 英雄区域 -->
      <section class="hero" id="home">
        <div class="hero-content">
          <h1>培养能驾驭AI的高阶人才</h1>
          <p>面向AI时代的GPS-REN教学模式，重塑高等教育，让学生真正掌握驾驭人工智能的能力</p>
          <div class="hero-buttons">
            <!-- <a href="#" class="hero-btn hero-btn-primary">教师体验平台</a>
            <a href="#" class="hero-btn hero-btn-outline">学生端演示</a> -->
            <img :src="img" style="width:100%;height:300px"/>
          </div>
        </div>
      </section>

      <!-- GPS-REN模型展示 -->
      <section class="model-section" id="model">
        <div class="section-header">
          <h2>GPS-REN 教学模式</h2>
          <p>系统化培养AI时代所需的高阶思维与问题解决能力</p>
        </div>

        <div class="model-steps">
          <img :src="img0" style="width: 737px;height: 557px;"/>
        </div>
        <!-- <div class="model-steps">
          <el-card class="step-card" shadow="hover">
            <div class="step-icon">
              G
            </div>
            <h3>目标导向</h3>
            <p>明确学习目标，聚焦核心问题</p>
          </el-card>

          <el-card class="step-card" shadow="hover">
            <div class="step-icon">
              P
            </div>
            <h3>问题定义</h3>
            <p>精准描述问题，确立解决方向</p>
          </el-card>

          <el-card class="step-card" shadow="hover">
            <div class="step-icon">
              S
            </div>
            <h3>系统拆解</h3>
            <p>分解复杂问题，建立解决框架</p>
          </el-card>

          <el-card class="step-card" shadow="hover">
            <div class="step-icon">
              R
            </div>
            <h3>结果整合</h3>
            <p>整合解决方案，形成完整成果</p>
          </el-card>

          <el-card class="step-card" shadow="hover">
            <div class="step-icon">
              E
            </div>
            <h3>结果评估</h3>
            <p>系统评估方案，验证达成效果</p>
          </el-card>

          <el-card class="step-card" shadow="hover">
            <div class="step-icon">
              N
            </div>
            <h3>总结新知识</h3>
            <p>提炼核心知识，实现认知升级</p>
          </el-card>
        </div> -->
      </section>

      <!-- 平台功能 -->
      <section class="features-section" id="features">
        <div class="features">
          <div class="feature-text">
            <h2>智能教学平台</h2>
            <p>GPS-REN教学平台为教师和学生提供完整的AI时代教学解决方案，实现教与学的智能闭环。</p>

            <div class="feature-points">
              <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="2">
                  <i class="el-icon-success" style="color: var(--primary); font-size: 1.5rem;"></i>
                </el-col>
                <el-col :span="22">
                  <h3>教师端</h3>
                  <p>轻松创建课程目标，AI智能生成评价标准，跟踪学生学习进度</p>
                </el-col>
              </el-row>

              <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="2">
                  <i class="el-icon-success" style="color: var(--primary); font-size: 1.5rem;"></i>
                </el-col>
                <el-col :span="22">
                  <h3>学生端</h3>
                  <p>引导式学习流程，AI即时反馈，GPS-REN完整训练闭环</p>
                </el-col>
              </el-row>

              <el-row :gutter="20" style="margin-bottom: 20px;">
                <el-col :span="2">
                  <i class="el-icon-success" style="color: var(--primary); font-size: 1.5rem;"></i>
                </el-col>
                <el-col :span="22">
                  <h3>评价系统</h3>
                  <p>基于GPS-REN的多维度评价体系，AI辅助精准评分与反馈</p>
                </el-col>
              </el-row>
            </div>

            <!-- <el-button type="primary" size="large" style="margin-top: 1.5rem; padding: 12px 30px;">查看平台功能</el-button> -->
          </div>

          <el-card class="feature-image-card">
            <i class="el-icon-monitor"></i>
          </el-card>
        </div>
      </section>

      <!-- 评价标准展示 -->
      <section class="evaluation-section">
        <div class="section-header">
          <h2>科学的评价标准</h2>
          <p>基于GPS-REN的多维度评价体系，确保学习质量</p>
        </div>

        <div class="evaluation-table">
          <table>
            <thead>
            <tr>
              <th>步骤</th>
              <th>评价指标</th>
              <th>权重</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>问题定义 (P)</td>
              <td>功能描述准确、术语表达规范、接口定义清晰</td>
              <td>20%</td>
            </tr>
            <tr>
              <td>系统拆解 (S)</td>
              <td>拆解维度合理、逻辑结构完整、颗粒度适中</td>
              <td>20%</td>
            </tr>
            <tr>
              <td>结果获取 (R)</td>
              <td>解决方案有效性</td>
              <td>10%</td>
            </tr>
            <tr>
              <td>结果评估 (E)</td>
              <td>评估方案合理、评估过程真实、评估结果达成度</td>
              <td>20%</td>
            </tr>
            <tr>
              <td>总结新知识 (N)</td>
              <td>关联性、新增性、联结性、准确性</td>
              <td>30%</td>
            </tr>
            </tbody>
          </table>
        </div>
      </section>

      <!-- 使用案例 -->
      <section class="case-study" id="cases">
        <div class="section-header">
          <h2>成功应用案例</h2>
          <p>数据结构与算法课程中的实践成果</p>
        </div>

        <div class="case-grid">
          <div class="case-image">
            <img :src="img1" style="width:578px;height: 262px;">
          </div>

          <div class="case-content">
            <h3>实现"两性一度"课程目标</h3>
            <p>在数据结构与算法课程中应用GPS-REN教学模式，成功实现了高阶性、创新性和挑战度的教学目标。</p>

            <ul style="margin-top: 1.5rem; margin-left: 1.5rem;">
              <li>
                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
                课程内容建立元知识体系模块
              </li>
              <li>
                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
                将原有课程内容设计为多个具体问题
              </li>
              <li>
                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
                基础验证性考核与GPS-REN评价相结合
              </li>
              <li>
                <i class="el-icon-check" style="color: var(--accent); margin-right: 0.5rem;"></i>
                学生运用AI工具能力提升3.2倍
              </li>
            </ul>

            <!-- <el-button style="margin-top: 2rem;" size="medium" plain>查看完整案例</el-button> -->
          </div>
        </div>
      </section>

      <!-- CTA区域 -->
<!--      <section class="cta-section">-->
<!--        <div class="cta-content">-->
<!--          <h2>开启AI时代教学新范式</h2>-->
<!--          <p>加入1000+教育机构的选择，共同培养能驾驭AI的高阶人才</p>-->
<!--          <div class="cta-buttons">-->
<!--            <el-button class="cta-btn cta-btn-light" size="large">教师免费试用</el-button>-->
<!--            <el-button class="cta-btn cta-btn-outline" size="large">学校合作咨询</el-button>-->
<!--          </div>-->
<!--        </div>-->
<!--      </section>-->

      <!-- 底部 -->
<!--      <footer id="about">-->
<!--        <div class="footer-grid">-->
<!--          <div class="footer-about">-->
<!--            <div class="footer-logo" @click="scrollToTop">-->
<!--              <i class="fas fa-brain"></i> GPS-REN-->
<!--            </div>-->
<!--            <p>我们致力于推动AI时代的高等教育改革，通过GPS-REN教学模式培养能够驾驭人工智能的高阶人才。</p>-->
<!--            <div class="social-links">-->
<!--              <a href="#" class="social-icon"><i class="el-icon-chat-dot-round"></i></a>-->
<!--              <a href="#" class="social-icon"><i class="el-icon-chat-line-round"></i></a>-->
<!--              <a href="#" class="social-icon"><i class="el-icon-share"></i></a>-->
<!--              <a href="#" class="social-icon"><i class="el-icon-connection"></i></a>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="footer-links">-->
<!--            <h4>平台功能</h4>-->
<!--            <ul>-->
<!--              <li><a href="#">教师工作台</a></li>-->
<!--              <li><a href="#">学生学习端</a></li>-->
<!--              <li><a href="#">AI评价系统</a></li>-->
<!--              <li><a href="#">课程管理系统</a></li>-->
<!--            </ul>-->
<!--          </div>-->

<!--          <div class="footer-links">-->
<!--            <h4>教学资源</h4>-->
<!--            <ul>-->
<!--              <li><a href="#">GPS-REN教学法</a></li>-->
<!--              <li><a href="#">课程案例库</a></li>-->
<!--              <li><a href="#">教师培训</a></li>-->
<!--              <li><a href="#">API文档</a></li>-->
<!--            </ul>-->
<!--          </div>-->

<!--          <div class="footer-links">-->
<!--            <h4>关于我们</h4>-->
<!--            <ul>-->
<!--              <li><a href="#">公司介绍</a></li>-->
<!--              <li><a href="#">教研团队</a></li>-->
<!--              <li><a href="#">加入我们</a></li>-->
<!--              <li><a href="#">联系客服</a></li>-->
<!--            </ul>-->
<!--          </div>-->
<!--        </div>-->

<!--        <div class="copyright">-->
<!--          &copy; 2025 GPS-REN教学平台 - 培养AI时代的高阶人才-->
<!--        </div>-->
<!--      </footer>-->
    </div>
  </div>

</template>

<script>
import Img1 from '@/assets/img/441.png'
import Img2 from '@/assets/img/442.png'
import Img3 from '@/assets/img/443.png'
export default {
  name:'officialweb.vue',
  data() {
    return {
      img:Img1,
      img0:Img2,
      img1:Img3,
      activeNav: '1',
      evaluationData: [
        { step: '问题定义 (P)', indicator: '功能描述准确、术语表达规范、接口定义清晰', weight: '20%' },
        { step: '系统拆解 (S)', indicator: '拆解维度合理、逻辑结构完整、颗粒度适中', weight: '20%' },
        { step: '结果获取 (R)', indicator: '解决方案有效性', weight: '10%' },
        { step: '结果评估 (E)', indicator: '评估方案合理、评估过程真实、评估结果达成度', weight: '20%' },
        { step: '总结新知识 (N)', indicator: '关联性、新增性、联结性、准确性', weight: '30%' }
      ]
    };
  },
  methods: {
    scrollToSection(sectionId) {
      // 平滑滚动到指定区域
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
      // 更新导航激活状态
      const navMap = {
        'home': '1',
        'model': '2',
        'features': '3',
        'cases': '4',
        'about': '5'
      };
      this.activeNav = navMap[sectionId] || '1';
    },
    scrollToTop() {
      window.scrollTo({ top: 0, behavior: 'smooth' });
      this.activeNav = '1';
    },
    showLoginDialog() {
      // 这里可以显示登录对话框
      // this.$message({
      //   message: '登录功能',
      //   type: 'info'
      // });
      //以外链的形式跳转到登录页面
      window.open('/#/login', );
      // this.$router.push({name: 'login'});
    },
    showRegisterDialog() {
      // 这里可以显示注册对话框
      window.open('http://console.edu.oh-os.com/#/login', );
    }
  },
  mounted() {
    // 监听滚动，更新导航激活状态
    window.addEventListener('scroll', () => {
      const sections = [
        { id: 'home', offset: 100 },
        { id: 'model', offset: 100 },
        { id: 'features', offset: 100 },
        { id: 'cases', offset: 100 },
        { id: 'about', offset: 100 }
      ];

      const scrollPosition = window.scrollY || window.pageYOffset;

      for (const section of sections) {
        const element = document.getElementById(section.id);
        if (element) {
          const position = element.offsetTop - section.offset;
          if (scrollPosition >= position) {
            const navMap = {
              'home': '1',
              'model': '2',
              'features': '3',
              'cases': '4',
              'about': '5'
            };
            this.activeNav = navMap[section.id];
          }
        }
      }
    });
  }
}
</script>

<style>
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --secondary: #0f172a;
  --accent: #f59e0b;
  --light: #f8fafc;
  --gray: #64748b;
  --light-gray: #e2e8f0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body {
  background-color: #fff;
  color: var(--secondary);
  line-height: 1.6;
}

/* 导航栏样式 - 使用Element Navbar风格 */
.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5%;
}

.nav-logo {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
}

.nav-logo i {
  margin-right: 0.5rem;
  font-size: 1.8rem;
}

.el-menu.nav-menu {
  background: transparent !important;
  border: none !important;
}

.el-menu.nav-menu .el-menu-item {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--secondary);
  transition: color 0.3s;
}

.el-menu.nav-menu .el-menu-item:hover {
  color: var(--primary);
  background: transparent !important;
}

.nav-buttons {
  display: flex;
  gap: 15px;
}

.el-button.nav-btn-outline {
  padding: 10px 20px;
  border-radius: 30px;
  border-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
  transition: all 0.3s;
}

.el-button.nav-btn-outline:hover {
  background-color: var(--primary);
  color: white;
}

.el-button.nav-btn-primary {
  padding: 10px 20px;
  border-radius: 30px;
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
  font-weight: 600;
  transition: all 0.3s;
}

.el-button.nav-btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
}

/* 英雄区域 */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 5%;
  /* background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 1) 100%); */
  position: relative;
  overflow: hidden;
}

.hero-content {
  max-width: 100%;
  z-index: 2;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.15;
  color: var(--secondary);
}

.hero p {
  font-size: 1.5rem;
  color: var(--gray);
  margin-bottom: 2rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 2rem;
}

.hero-btn {
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
  font-size: 1.1rem;
}

.hero-btn-primary {
  background-color: var(--primary);
  color: white;
  border: 2px solid var(--primary);
}

.hero-btn-primary:hover {
  background-color: var(--primary-dark);
  border-color: var(--primary-dark);
  color: white;
}

.hero-btn-outline {
  border: 2px solid var(--primary);
  color: var(--primary);
}

.hero-btn-outline:hover {
  background-color: var(--primary);
  color: white;
}

/* GPS-REN模型展示 - 使用El-Card */
.model-section {
  padding: 6rem 5%;
  /* background-color: var(--light); */
}

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--secondary);
}

.section-header p {
  font-size: 1.25rem;
  color: var(--gray);
}

.model-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  max-width: calc(100% - 20rem);
  margin: 0 auto;
}

.el-card.step-card {
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  height: 100%;
}

.el-card.step-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1) !important;
}

.step-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(37, 99, 235, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary);
}

.step-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--secondary);
}

.step-card p {
  color: var(--gray);
}

/* 平台功能 */
.features-section {
  padding: 6rem 5%;
  background-color: white;
}

.features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.feature-text {
  padding-right: 2rem;
}

.feature-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
}

.feature-text p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
  color: var(--gray);
}

.el-card.feature-image-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  height: 400px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 5rem;
}

/* 评价标准展示 */
.evaluation-section {
  padding: 6rem 5%;
  background-color: var(--light);
}

.evaluation-table {
  max-width: 1000px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 1.25rem 1.5rem;
  text-align: left;
  border-bottom: 1px solid var(--light-gray);
}

th {
  background-color: var(--primary);
  color: white;
  font-weight: 600;
}

tr:nth-child(even) {
  background-color: rgba(37, 99, 235, 0.03);
}

/* 使用案例 */
.case-study {
  padding: 6rem 5%;
  background-color: white;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

.case-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-content h3 {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  color: var(--secondary);
}

.case-image {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  position: relative;
  height: 350px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 5rem;
}

/* CTA区域 */
.cta-section {
  padding: 8rem 5%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  text-align: center;
}

.cta-content {
  max-width: 800px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.cta-content p {
  font-size: 1.25rem;
  margin-bottom: 2.5rem;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.cta-btn {
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s;
}

.cta-btn-light {
  background-color: white;
  color: var(--primary);
  border: none;
}

.cta-btn-light:hover {
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--primary);
}

.cta-btn-outline {
  background: transparent;
  color: white;
  border: 2px solid white;
}

.cta-btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* 底部 - 使用Element风格 */
footer {
  background-color: var(--secondary);
  color: white;
  padding: 4rem 5% 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto 3rem;
}

.footer-logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: white;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.footer-logo i {
  margin-right: 0.5rem;
  font-size: 1.8rem;
}

.footer-about p {
  opacity: 0.7;
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.footer-links h4 {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.footer-links ul {
  list-style: none;
  padding: 0;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: opacity 0.3s;
  display: block;
  padding: 5px 0;
}

.footer-links a:hover {
  color: white;
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
  transition: background-color 0.3s;
  text-decoration: none;
  font-size: 1.2rem;
}

.social-icon:hover {
  background-color: var(--primary);
}

.copyright {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0.6;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .model-steps {
    grid-template-columns: repeat(3, 1fr);
  }

  .features, .case-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1.25rem;
  }

  .model-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-buttons, .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px) {
  .model-steps {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}
</style>