我正在参加「豆包MarsCode初体验」征文活动 豆包MarsCode体验官-｛玩转AI｝开启智能编程之旅，拿手机大奖 - 掘金 (juejin.cn)，豆包MarsCode是一款智能开发工具，该工具让我觉得很不错的一个特点就是为开发者提供了AI编程助手，该编程助手能够实现代码补全与实现功能减少手动输入，提高开发效率，并且能够帮助理解代码逻辑将代码进行解释与优化，自动生成注释，以便于代码的维护和团队协作。

实现效果图

大家以为我上面是的图是官方的图嘛，哈哈，并不是，为了参加这次活动，咱们尝试自己来写个Marscode 并且咱们一次性使用两种技术栈： Vue、React 两种主流的前端框架

• 创建 Vue项目

• 创建React项目

首选第一步要做的是什么，既然要还原，哪肯定要一模一样，使用一样的UI库，字节跳动内部使用的 框架正好也开源的了

arco.design/

直接咔咔一顿炫

安装

需要同时安装 react >= 16.8 和 react-dom >= 16.8。

// npm
npm i @arco-design/web-react

// yarn
yarn add @arco-design/web-react

基础使用

以 Button 组件为例。

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@arco-design/web-react";
import "@arco-design/web-react/dist/css/arco.css";

ReactDOM.render(
  <Button type="primary">Hello Arco</Button>,
  document.querySelector("#root")
);

进行下布局

经典官网布局，调整一下

• 最终的 packagejson文件

{
  "name": "project-web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@arco-design/web-vue": "^2.55.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "axios": "^1.7.2",
    "core-js": "^3.8.3",
    "element-plus": "^2.7.6",
    "element-ui-plus": "^1.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue": "^3.2.13",
    "vue-router": "^4.0.13",
    "vue3-puzzle-vcode": "^1.1.7",
    "vuex": "^4.0.0"
  },
  "devDependencies": {},
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

写个首页,因为不喜欢卖关子，所以直接贴代码

<script setup>
import {ref, onMounted} from 'vue';
import {Button, IconDownload} from '@arco-design/web-vue';

// 创建一个响应式变量
const isTextVisible = ref(false);

const selectedTab = ref('VSCode'); // 初始选中 VSCode Tab

const tabs = [
  {name: 'VSCode', label: 'VSCode'},
  {name: 'JetBrains', label: 'JetBrains'}
];

// 组件挂载后将变量设置为 true
onMounted(() => {
  isTextVisible.value = true;
});
</script>

<template>
  <div class="container">
    <div class="header">
      <div class="logo">豆包MarsCode</div>
      <div class="nav">
        <a href="#">编程助手</a>
        <a href="#">IDE</a>
        <a href="#">文档↗</a>
        <a href="#">社区↗</a>
      </div>
      <Button type="primary" shape="round" class="login-btn">登录</Button>
    </div>
    <div class="main">
      <h1 :class="{ 'text-appear': isTextVisible }">
        <span class="glowing-text">用AI激发创造</span>
      </h1>
      <p class="main-description">
        豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力
      </p>
      <Button type="primary" class="progra_box" size="large">立即获取编程助手</Button>

      <div class="content_one">
        <h1 :class="{ 'text-appear': isTextVisible }">
          <span>强大的AI能力</span>
        </h1>
        <p class="content-description">
          通过代码补全、代码推荐、单测生成等能力，在编程的各个阶段提供协助支持
        </p>
      </div>

      <div class="card-container">
        <div class="card card-left-1">
          <h2>代码补全</h2>
          <p>在编码过程中提供单行或多行的代码推荐，并支持通过注释生成代码片段，提升代码编写速度。</p>
          <img
            src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeCompletionExtension.24cfc3cb.webp"
            alt="Code Completion">
        </div>

        <div class="card card-right-2">
          <h2>单测生成</h2>
          <p>为选中函数生成单测，提升单测覆盖率，提升代码质量。</p>
          <img
            src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnUnitTest.b81885c3.png"
            alt="Unit Test">
        </div>

        <div class="card card-left-3">
          <div class="card-content">
            <h3>代码解释</h3>
            <p>理解项目仓库，帮助用户准确解释代码从而快速上手开发。</p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
              alt="Code Explanation">
          </div>
        </div>
        <div class="card card-right-4">
          <div class="card-content">
            <h3>代码补全 Pro</h3>
            <p>在修改或重构代码时，支持基于编辑行为预测下一个改动，并给出推荐。</p>
          </div>
          <img
            src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeRecommandationExtension.7424fc50.gif"
            alt="Code Recommendation">
        </div>
      </div>

      <div class="car_bottom">
        <div class="card card-bottom-card">
          <div class="card-content">
            <h3>生成注释</h3>
            <p>理解项目仓库，帮助用户准确解释代码从而快速上手开发。</p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
              alt="Code Explanation">
          </div>
        </div>
        <div class="card card-bottom-card">
          <div class="card-content">
            <h3>错误修复</h3>
            <p>理解项目仓库，帮助用户准确解释代码从而快速上手开发。</p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
              alt="Code Explanation">
          </div>
        </div>
        <div class="card card-bottom-card">
          <div class="card-content">
            <h3>AI 问答</h3>
            <p>理解项目仓库，帮助用户准确解释代码从而快速上手开发。</p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
              alt="Code Explanation">
          </div>
        </div>
      </div>

      <div class="ide-support">
        <h3 class="ide-title">支持丰富的编程语言和主流 IDE</h3>
        <p class="ide-description">支持超过 100 种编程语言，兼容 VSCode 和 JetBrains 代码编辑器</p>
        <div class="ide-tags">
          <span class="tag">Python</span>
          <span class="tag">Go</span>
          <span class="tag">JavaScript</span>
          <span class="tag">HTML/CSS</span>
          <span class="tag">TypeScript</span>
          <span class="tag">C++</span>
          <span class="tag">Java</span>
          <span class="tag">Kotlin</span>
          <span class="tag">C</span>
          <span class="tag">Rust</span>
          <!-- Add more tags as needed -->
        </div>
        <div class="ide-cards">
          <div class="ide-card">
            <img
              src="../assets/VSCode.png"
              alt="VSCode Logo">
            <span>VS Code</span>
          </div>
          <div class="ide-card">
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/jetbrains.f2f57807.png"
              alt="JetBrains Logo">
            <span>JetBrains IDEs</span>
          </div>

        </div>
      </div>

      <div class="install-support">
        <h3 class="ide-title">安装教程
        </h3>
        <p class="ide-description">本地 IDE 中快速安装及使用
        </p>
        <div class="tab-container">
          <div class="tab">
            <div
              v-for="tab in tabs"
              :key="tab.name"
              :class="['tab', { active: selectedTab === tab.name }]"
              @click="selectedTab = tab.name"
            >
              {{ tab.label }}
            </div>
          </div>
        </div>
      </div>
      <div class="tab-content">
        <div v-if="selectedTab === 'VSCode'">
          <!-- VSCode 内容 -->
          <h1>Vscode</h1>
          <p>VSCode 的安装和使用教程</p>
          <div class="fontTitle">快速安装:</div>
          <div class="tab-card">
            <span>打开 Visual Studio Code 插件市场下载 MarsCode 并安装。安装后请重启 IDE并登录，即可体验 AI 助力编码
             </span>
            <Button type="primary" class="progra_box" size="small">立即安装</Button>

          </div>
          <div class="tab-card_parent">
            <div class="font-tip">第1步:</div>
            <div class="tab-card_box">
              <div class="very_line-1">
              </div>
              <span>安装 Visual Studio Code 后，左侧导航栏上点击扩展。
                </span>
            </div>

            <div class="font-tip">第2步:</div>
            <div class="tab-card_box">
              <div class="very_line-2">
              </div>
              <span>安装 Visual Studio Code 后，左侧导航栏上点击扩展。
                </span>
            </div>


            <div class="font-tip">第3步:</div>
            <div class="tab-card_box">
              <div class="very_line-3">
              </div>
              <span>安装 Visual Studio Code 后，左侧导航栏上点击扩展。
                </span>
            </div>
          </div>

        </div>
        <div v-if="selectedTab === 'JetBrains'">
          <!-- JetBrains 内容 -->
          <h1>JetBrains</h1>
          <p>JetBrains 系列 IDE 的安装和使用教程</p>
        </div>
      </div>
      <div class="data-security">
        <h3 class="section-title">数据安全和隐私</h3>
        <p class="section-description">我们致力于保护您的数据安全与隐私</p>
        <div class="security-card-container">
          <div class="security-card">
            <h4>开源合规的训练数据集</h4>
            <p>所有用于训练的代码数据均为合规的开源数据集</p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/openSourceDataset.0f69d5b7.png"
              alt="Open Source Dataset">
          </div>
          <div class="security-card">
            <h4>数据加密传输</h4>
            <p>您的数据将基于 HTTPS 协议加密传输，以确保安全通信</p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/dataEncryptionTransmission.602661bd.png"
              alt="Data Encryption">
          </div>
          <div class="security-card">
            <h4>不会进行二次训练</h4>
            <p>不会使用您的代码和数据进行二次训练</p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/noTrainAgain.0001205e.png"
              alt="No Retraining">
          </div>
        </div>
      </div>
      <div class="animation-container">
        <div class="ripple-animation"></div>
        <Button type="primary" class="progra_box" size="large">免费下载编程助手</Button>
      </div>

      <footer class="footer">
        <div class="footer-content">
          <div class="footer-column">
            <a href="#">服务条款</a>
            <a href="#">用户协议</a>
            <a href="#">隐私政策</a>
          </div>
          <div class="footer-column">
            <a href="#">关注我们</a>
            <a href="#">掘金社区</a>
            <a href="#">微信公众号</a>
          </div>
          <div class="footer-column">
            <p>© 豆豆 MarsCode 版权所有</p>
            <p>京ICP备2020462284号</p>
            <p>京公网安备11010802044595号</p>
            <p> 地址：北京市海淀区北三环西路2号院</p>
            <p>feedback@mail.marscode.cn</p>
          </div>
        </div>
      </footer>

    </div>
  </div>
</template>

<style scoped>
@import "~@arco-design/web-vue/dist/arco.css";


.progra_box {
  border-radius: 25px;
  font-size: 20px;
  line-height: 20px;
  height: 50px;
}

.container {
  text-align: center;
  background: url('https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/bg_extension_ai.c2bd2693.jpg') no-repeat center center,
  url('https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/bg_extension_banner.1f666f0c.jpg') no-repeat center center;
  background-size: cover, cover;
  color: white;
  padding: 50px 20px;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.very_line-1 {
  background: linear-gradient(180deg, #06f, #bf46e5);
  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}


.very_line-2 {
  background: linear-gradient(180deg, #bf46e5, #fe8853);  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}

.very_line-3 {
  background: linear-gradient(180deg, #fe8853, #f84872);
  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}

.fontTitle {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .042px;
  line-height: 28px;
  align-content: flex-end;
  margin-right: 800px;
}



.tab-card_box {
  width: 900px;
  height: 100px;
  margin-top: 90px;
  margin-left: 440px;
  background: #121314;
  border-radius: 12px;
}

.font-tip {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  position: relative;
  top: 80px;
  right: 450px;
}

.tab-card {
  align-items: center;
  background: #121314;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24px 34px;
  margin-left: 450px;
  margin-top: 50px;
  width: 800px;
  height: 100px;
  border: 1px solid white;
}

.tab-container {

  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab {

  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  background: #1c2b3b;
  color: white;
  border-radius: 25px;
  margin: 0 10px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.tab.active {
  background: #2851fe;
  color: #fff;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.nav {
  display: flex;
  float: left;
  margin-right: 590px;
  font-size: 23px;
  gap: 20px;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.login-btn {
}

.main h1 {
  font-size: 80px;
  margin-bottom: 20px;
}

.main-description {
  font-size: 18px;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* 省略不变的部分 */
.car_bottom {
  display: flex;
  justify-content: flex-start; /* 保��� flex-start */
  gap: 0px; /* 将 gap 设置为 0 */
  margin-top: 30px;
}

.card-bottom-card {
  background: #1c2b3b;
  color: white;
  width: 400px; /* 调整宽度，确保三张卡片在一行，并为间距留出空间 */
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  overflow: hidden;
  height: 350px;
  margin-right: -15px; /* 为每张卡片添加右边距 */
}

.install-support {
  margin-top: 150px;
}

.card-bottom-card:last-child {
  margin-right: 0; /* 确保最后一张卡片没有右边距 */
}

.animation-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 根据需要调整 */
}

.ripple-animation {
  position: absolute;
  width: 200px; /* 根据需要调整 */
  height: 200px; /* 根据需要调整 */
  background: radial-gradient(circle, white 20%, transparent 20%);
  background-size: 50% 50%;
  animation: ripple 2s infinite;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.animated-button {
  position: relative;
  z-index: 1;
  background-color: #007bff; /* 根据需要调整 */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-button:hover .button-icon {
  transform: translateY(-5px);
}

.button-icon {
  font-size: 20px; /* 根据需要调整 */
  transition: transform 0.3s;
}

@media (max-width: 768px) {
  .card-bottom-card {
    width: 100%; /* 在小屏幕上，每张卡片占据整行 */
    margin-right: 0; /* 在小屏幕上，取消右边距 */
    margin-bottom: 20px; /* 在小屏幕上，为卡片添加下边距 */
  }

  .car_bottom {
    flex-direction: column; /* 在小屏幕上，卡片垂直排列 */
  }
}

.content_one h1 {
  font-size: 60px;
  margin-bottom: 10px;
}

.content-description {
  font-size: 16px;
  margin-bottom: 20px;
  color: hsla(0, 0%, 100%, .75);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 调整为 space-between 以缩小卡片间距 */
  margin-top: 30px;
}

.card {
  width: 45%; /* 调整卡片宽度以减小间距 */
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  margin-bottom: 20px;
  overflow: hidden;
  height: 350px;
}

.card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

.card-left-1 {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  width: 650px;
  margin-left: 166px;
}

.card-right-2 {
  background: #000305;
  color: white;
  width: 650px;
  margin-right: 266px;
}

.card-left-3 {
  background: #1c2b3b;
  color: white;
  width: 350px;
  margin-left: 166px;
}

.card-right-4 {
  background: #2851fe;
  color: white;
  width: 950px;
  margin-right: 266px;
}

.card-bottom-card {
  background: #1c2b3b;
  color: white;
  width: 340px;
  margin-left: 158px;
}


.glowing-text {
  display: inline-block;
  position: relative;
  font-weight: bold;
}


.glowing-text::after {
  content: '用AI激发创造';
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  animation: glow-text 8s linear infinite;
  animation-delay: 0s;
  background: conic-gradient(
    from 328deg at 50% -10%,
    rgb(119, 173, 255) -86.58deg,
    rgb(255, 255, 255) 69.75deg,
    rgb(255, 181, 144) 99.21deg,
    rgb(207, 117, 252) 203.39deg,
    rgb(119, 173, 255) 273.42deg,
    rgb(255, 255, 255) 429.75deg
  );
  -webkit-background-clip: text;
}


.ide-support {
  text-align: center;
  margin-top: 40px;
}

.ide-title {
  font-size: 40px;
  margin-bottom: 10px;
}

.ide-description {
  font-size: 16px;
  color: hsla(0, 0%, 100%, .75);
  margin-bottom: 20px;
}

.animation-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Adjust as necessary */
}

.ripple-animation {
  position: absolute;
  width: 200px; /* Adjust as necessary */
  height: 200px; /* Adjust as necessary */
  background: radial-gradient(circle, white 20%, transparent 20%);
  background-size: 50% 50%;
  animation: ripple 2s infinite;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.animated-button {
  position: relative;
  z-index: 1;
  background-color: #007bff; /* Adjust as necessary */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.animated-button:hover .button-icon {
  transform: translateY(-5px);
}

.button-icon {
  width: 20px; /* Adjust as necessary */
  height: 20px; /* Adjust as necessary */
  transition: transform 0.3s;
}


.ide-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.tag {
  background: #1c2b3b;
  color: white;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 14px;
}

.ide-cards {

  display: flex;
  justify-content: center;
  gap: 40px;
}

.ide-card {
  border-radius: 12px;
  border: 1px solid #1c2b3b;
  width: 155px;
  text-align: center;
  color: white;
}

.ide-card:hover {
  border-color: #2851fe;
}

.ide-card img {
  max-width: 100px;
  height: auto;
  margin-bottom: 10px;
}

.ide-card span {
  display: block;
  font-size: 16px;
}

.text-appear {
  opacity: 1;
  transform: translateY(0);
  animation: text-appear 2s ease-in-out forwards;
}

@keyframes glow-text {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0), 0 0 20px rgba(255, 255, 255, 0);
  }
  10% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
  }
  20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
  }
}

@keyframes text-appear {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-security {
  margin-top: 150px;
  text-align: center;
}

.section-title {
  font-size: 40px;
  margin-bottom: 10px;
}

.section-description {
  font-size: 16px;
  color: hsla(0, 0%, 100%, .75);
  margin-bottom: 20px;
}

.security-card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.security-card {
  background: #1c2b3b;
  color: white;
  width: 300px;
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.security-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

/* media queries for responsiveness */
@media (max-width: 768px) {
  .security-card-container {
    flex-direction: column;
    align-items: center;
  }

  .security-card {
    width: 100%;
    margin-bottom: 20px;
  }
}.footer {
   background-color: #1a1a1a;
   color: #fff;
   padding: 40px 20px;
   text-align: center;
 }

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}

.footer-column a,
.footer-column p {
  color: #fff;
  margin: 5px 0;
  text-decoration: none;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-column p {
  font-size: 14px;
}

.footer-column p:nth-child(2),
.footer-column p:nth-child(3) {
  margin-top: 10px;
}
</style>

如果只用Vue写这么行呢，所以咱们在加上React + TS

import React, { useState, useEffect, useRef } from 'react';
import {
  Button,
  IconDownload,
  Tabs,
  Tab,
  Card,
  Col,
  Row,
  Switch,
  AnimatedText,
  rippleAnimation,
} from '@arco-design/web-react';

// 创建一个响应式变量
const isTextVisible = useState(false)[0];

const selectedTab = useState('VSCode')[0]; // 初始选中 VSCode Tab

const tabs = [
  { name: 'VSCode', label: 'VSCode' },
  { name: 'JetBrains', label: 'JetBrains' },
];

// 组件挂载后将变量设置为 true
useEffect(() => {
  isTextVisible.setValue(true);
}, []);

const App = () => {
  return (
    <div className="container">
      <div className="header">
        <div className="logo">豆包MarsCode</div>
        <div className="nav">
          <a href="#">编程助手</a>
          <a href="#">IDE</a>
          <a href="#">文档↗</a>
          <a href="#">社区↗</a>
        </div>

        <Button type="primary" shape="round" className="login-btn">
          登录
        </Button>
      </div>
      <div className="main">
        {/* 添加动态文本，让页面加载更丝滑 */}
        <h1 className={isTextVisible ? 'text-appear' : ''}>
          <span className="glowing-text">用AI激发创造</span>
        </h1>
        <p className="main-description">
          豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力
        </p>

        <Button type="primary" className="progra_box" size="large">
          立即获取编程助手
        </Button>

        <div className="content_one">
          <h1 className={isTextVisible ? 'text-appear' : ''}>
            <span>强大的AI能力</span>
          </h1>
          <p className="content-description">
            通过代码补全、代码推荐、单测生成等能力，在编程的各个阶段提供协助支持
          </p>
        </div>

        <div className="card-container">
          <div className="card card-left-1">
            <h2>代码补全</h2>
            <p>
              在编码过程中提供单行或多行的代码推荐，并支持通过注释生成代码片段，提升代码编写速度。
            </p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeCompletionExtension.24cfc3cb.webp"
              alt="Code Completion"
            />
          </div>

          <div className="card card-right-2">
            <h2>单测生成</h2>
            <p>
              为选中函数生成单测，提升单测覆盖率，提升代码质量。
            </p>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnUnitTest.b81885c3.png"
              alt="Unit Test"
            />
          </div>

          <div className="card card-left-3">
            <div className="card-content">
              <h3>代码解释</h3>
              <p>
                理解项目仓库，帮助用户准确解释代码从而快速上手开发。
              </p>
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
                alt="Code Explanation"
              />
            </div>
          </div>
          <div className="card card-right-4">
            <div className="card-content">
              <h3>代码补全 Pro</h3>
              <p>
                在修改或重构代码时，支持基于编辑行为预测下一个改动，并给出推荐。
              </p>
            </div>
            <img
              src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeRecommandationExtension.7424fc50.gif"
              alt="Code Recommendation"
            />
          </div>
        </div>

        <div className="car_bottom">
          <div className="card card-bottom-card">
            <div className="card-content">
              <h3>生成注释</h3>
              <p>
                理解项目仓库，帮助用户准确解释代码从而快速上手开发。
              </p>
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
                alt="Code Explanation"
              />
            </div>
          </div>
          <div className="card card-bottom-card">
            <div className="card-content">
              <h3>错误修复</h3>
              <p>
                理解项目仓库，帮助用户准确解释代码从而快速上手开发。
              </p>
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
                alt="Code Explanation"
              />
            </div>
          </div>
          <div className="card card-bottom-card">
            <div className="card-content">
              <h3>AI 问答</h3>
              <p>
                理解项目仓库，帮助用户准确解释代码从而快速上手开发。
              </p>
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/cnCodeExplainExtension.c02bc25e.png"
                alt="Code Explanation"
              />
            </div>
          </div>
        </div>

        <div className="ide-support">
          <h3 className="ide-title">支持丰富的编程语言和主流 IDE</h3>
          <p className="ide-description">
            支持超过 100 种编程语言，兼容 VSCode 和 JetBrains 代码编辑器
          </p>
          <div className="ide-tags">
            <span className="tag">Python</span>
            <span className="tag">Go</span>
            <span className="tag">JavaScript</span>
            <span className="tag">HTML/CSS</span>
            <span className="tag">TypeScript</span>
            <span className="tag">C++</span>
            <span className="tag">Java</span>
            <span className="tag">Kotlin</span>
            <span className="tag">C</span>
            <span className="tag">Rust</span>
            {/* Add more tags as needed */}
          </div>
          <div className="ide-cards">
            <div className="ide-card">
              <img src="../assets/VSCode.png" alt="VSCode Logo" />
              <span>VS Code</span>
            </div>
            <div className="ide-card">
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/jetbrains.f2f57807.png"
                alt="JetBrains Logo"
              />
              <span>JetBrains IDEs</span>
            </div>
          </div>
        </div>

        <div className="install-support">
          <h3 className="ide-title">安装教程</h3>
          <p className="ide-description">本地 IDE 中快速安装及使用</p>
          <div className="tab-container">
            <div className="tab">
              {tabs.map((tab) => (
                <div
                  key={tab.name}
                  className={['tab', { active: selectedTab === tab.name }]}
                  onClick={() => selectedTab.setValue(tab.name)}
                >
                  {tab.label}
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="tab-content">
          {selectedTab === 'VSCode' && (
            <div>
              {/* VSCode 内容 */}
              <h1>Vscode</h1>
              <p>VSCode 的安装和使用教程</p>

              <div className="fontTitle">快速安装:</div>
              <div className="tab-card">
<span>打开 Visual Studio Code 插件市场下载 MarsCode 并安装。安装后请重启 IDE并登录，即可体验 AI 助力编码
</span>
                <Button type="primary" className="progra_box" size="small">
                  立即安装
                </Button>

              </div>
              <div className="tab-card_parent">
                <div className="font-tip">第1步:</div>
                <div className="tab-card_box">
                  <div className="very_line-1">
                  </div>
                  <span>安装 Visual Studio Code 后，左侧导航栏上点击扩展。
</span>
                </div>

                <div className="font-tip">第2步:</div>
                <div className="tab-card_box">
                  <div className="very_line-2">
                  </div>
                  <span>安装 Visual Studio Code 后，左侧导航栏上点击扩展。
</span>
                </div>


                <div className="font-tip">第3步:</div>
                <div className="tab-card_box">
                  <div className="very_line-3">
                  </div>
                  <span>安装 Visual Studio Code 后，左侧导航栏上点击扩展。
</span>
                </div>
              </div>

            </div>
          )}
          {selectedTab === 'JetBrains' && (
            <div>
              {/* JetBrains 内容 */}
              <h1>JetBrains</h1>
              <p>JetBrains 系列 IDE 的安装和使用教程</p>
            </div>
          )}
        </div>
        <div className="data-security">
          <h3 className="section-title">数据安全和隐私</h3>
          <p className="section-description">我们致力于保护您的数据安全与隐私</p>
          <div className="security-card-container">
            <div className="security-card">
              <h4>开源合规的训练数据集</h4>
              <p>所有用于训练的代码数据均为合规的开源数据集</p>
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/openSourceDataset.0f69d5b7.png"
                alt="Open Source Dataset"
              />
            </div>
            <div className="security-card">
              <h4>数据加密传输</h4>
              <p>您的数据将基于 HTTPS 协议加密传输，以确保安全通信</p>
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/dataEncryptionTransmission.602661bd.png"
                alt="Data Encryption"
              />
            </div>
            <div className="security-card">
              <h4>不会进行二次训练</h4>
              <p>不会使用您的代码和数据进行二次训练</p>
              <img
                src="https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/noTrainAgain.0001205e.png"
                alt="No Retraining"
              />
            </div>
          </div>
        </div>
        <div className="animation-container">
          <div className="ripple-animation"></div>
          <Button type="primary" className="progra_box" size="large">
            免费下载编程助手
          </Button>
        </div>

        <footer className="footer">
          <div className="footer-content">
            <div className="footer-column">
              <a href="#">服务条款</a>
              <a href="#">用户协议</a>
              <a href="#">隐私政策</a>
            </div>
            <div className="footer-column">
              <a href="#">关注我们</a>
              <a href="#">掘金社区</a>
              <a href="#">微信公众号</a>
            </div>
            <div className="footer-column">
              <p>© 豆豆 MarsCode 版权所有</p>
              <p>京ICP备2020462284号</p>
              <p>京公网安备11010802044595号</p>
              <p> 地址：北京市海淀区北三环西路2号院</p>
              <p>feedback@mail.marscode.cn</p>
            </div>
          </div>
        </footer>

      </div>
    </div>
  );
};

export default App;

• React 样式单独导入

@import "./my-styles.css";

@import "~@arco-design/web-vue/dist/arco.css";


.progra_box {
  border-radius: 25px;
  font-size: 20px;
  line-height: 20px;
  height: 50px;
}

.container {
  text-align: center;
  background: url('https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/bg_extension_ai.c2bd2693.jpg') no-repeat center center,
  url('https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/bg_extension_banner.1f666f0c.jpg') no-repeat center center;
  background-size: cover, cover;
  color: white;
  padding: 50px 20px;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.very_line-1 {
  background: linear-gradient(180deg, #06f, #bf46e5);
  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}


.very_line-2 {
  background: linear-gradient(180deg, #bf46e5, #fe8853);  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}

.very_line-3 {
  background: linear-gradient(180deg, #fe8853, #f84872);
  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}

.fontTitle {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .042px;
  line-height: 28px;
  align-content: flex-end;
  margin-right: 800px;
}



.tab-card_box {
  width: 900px;
  height: 100px;
  margin-top: 90px;
  margin-left: 440px;
  background: #121314;
  border-radius: 12px;
}

.font-tip {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  position: relative;
  top: 80px;
  right: 450px;
}

.tab-card {
  align-items: center;
  background: #121314;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24px 34px;
  margin-left: 450px;
  margin-top: 50px;
  width: 800px;
  height: 100px;
  border: 1px solid white;
}

.tab-container {

  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab {

  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  background: #1c2b3b;
  color: white;
  border-radius: 25px;
  margin: 0 10px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.tab.active {
  background: #2851fe;
  color: #fff;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.nav {
  display: flex;
  float: left;
  margin-right: 590px;
  font-size: 23px;
  gap: 20px;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.login-btn {
}

.main h1 {
  font-size: 80px;
  margin-bottom: 20px;
}

.main-description {
  font-size: 18px;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* 省略不变的部分 */
.car_bottom {
  display: flex;
  justify-content: flex-start; /* 保持 flex-start */
  gap: 0px; /* 将 gap 设置为 0 */
  margin-top: 30px;
}

.card-bottom-card {
  background: #1c2b3b;
  color: white;
  width: 400px; /* 调整宽度，确保三张卡片在一行，并为间距留出空间 */
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  overflow: hidden;
  height: 350px;
  margin-right: -15px; /* 为每张卡片添加右边距 */
}

.install-support {
  margin-top: 150px;
}

.card-bottom-card:last-child {
  margin-right: 0; /* 确保最后一张卡片没有右边距 */
}

.animation-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 根据需要调整 */
}

.ripple-animation {
  position: absolute;
  width: 200px; /* 根据需要调整 */
  height: 200px; /* 根据需要调整 */
  background: radial-gradient(circle, white 20%, transparent 20%);
  background-size: 50% 50%;
  animation: ripple 2s infinite;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.animated-button {
  position: relative;
  z-index: 1;
  background-color: #007bff; /* 根据需要调整 */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-button:hover .button-icon {
  transform: translateY(-5px);
}

.button-icon {
  font-size: 20px; /* 根据需要调整 */
  transition: transform 0.3s;
}

@media (max-width: 768px) {
  .card-bottom-card {
    width: 100%; /* 在小屏幕上，每张卡片占据整行 */
    margin-right: 0; /* 在小屏幕上，取消右边距 */
    margin-bottom: 20px; /* 在小屏幕上，为卡片添加下边距 */
  }

  .car_bottom {
    flex-direction: column; /* 在小屏幕上，卡片垂直排列 */
  }
}

.content_one h1 {
  font-size: 60px;
  margin-bottom: 10px;
}

.content-description {
  font-size: 16px;
  margin-bottom: 20px;
  color: hsla(0, 0%, 100%, .75);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 调整为 space-between 以缩小卡片间距 */
  margin-top: 30px;
}

.card {
  width: 45%; /* 调整卡片宽度以减小间距 */
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  margin-bottom: 20px;
  overflow: hidden;
  height: 350px;
}

.card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

.card-left-1 {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  width: 650px;
  margin-left: 166px;
}

.card-right-2 {
  background: #000305;
  color: white;
  width: 650px;
  margin-right: 266px;
}

.card-left-3 {
  background: #1c2b3b;
  color: white;
  width: 350px;
  margin-left: 166px;
}

.card-right-4 {
  background: #2851fe;
  color: white;
  width: 950px;
  margin-right: 266px;
}

.card-bottom-card {
  background: #1c2b3b;
  color: white;
  width: 340px;
  margin-left: 158px;
}


.glowing-text {
  display: inline-block;
  position: relative;
  font-weight: bold;
}


.glowing-text::after {
  content: '用AI激发创造';
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  animation: glow-text 8s linear infinite;
  animation-delay: 0s;
  background: conic-gradient(
    from 328deg at 50% -10%,
    rgb(119, 173, 255) -86.58deg,
    rgb(255, 255, 255) 69.75deg,
    rgb(255, 181, 144) 99.21deg,
    rgb(207, 117, 252) 203.39deg,
    rgb(119, 173, 255) 273.42deg,
    rgb(255, 255, 255) 429.75deg
  );
  -webkit-background-clip: text;
}


.ide-support {
  text-align: center;
  margin-top: 40px;
}

.ide-title {
  font-size: 40px;
  margin-bottom: 10px;
}

.ide-description {
  font-size: 16px;
  color: hsla(0, 0%, 100%, .75);
  margin-bottom: 20px;
}

.animation-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Adjust as necessary */
}

.ripple-animation {
  position: absolute;
  width: 200px; /* Adjust as necessary */
  height: 200px; /* Adjust as necessary */
  background: radial-gradient(circle, white 20%, transparent 20%);
  background-size: 50% 50%;
  animation: ripple 2s infinite;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.animated-button {
  position: relative;
  z-index: 1;
  background-color: #007bff; /* Adjust as necessary */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.animated-button:hover .button-icon {
  transform: translateY(-5px);
}

.button-icon {
  width: 20px; /* Adjust as necessary */
  height: 20px; /* Adjust as necessary */
  transition: transform 0.3s;
}


.ide-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.tag {
  background: #1c2b3b;
  color: white;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 14px;
}

.ide-cards {

  display: flex;
  justify-content: center;
  gap: 40px;
}

.ide-card {
  border-radius: 12px;
  border: 1px solid #1c2b3b;
  width: 155px;
  text-align: center;
  color: white;
}

.ide-card:hover {
  border-color: #2851fe;
}

.ide-card img {
  max-width: 100px;
  height: auto;
  margin-bottom: 10px;
}

.ide-card span {
  display: block;
  font-size: 16px;
}

.text-appear {
  opacity: 1;
  transform: translateY(0);
  animation: text-appear 2s ease-in-out forwards;
}

@keyframes glow-text {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0), 0 0 20px rgba(255, 255, 255, 0);
  }
  10% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
  }
  20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
  }
}

@keyframes text-appear {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-security {
  margin-top: 150px;
  text-align: center;
}

.section-title {
  font-size: 40px;
  margin-bottom: 10px;
}

.section-description {
  font-size: 16px;
  color: hsla(0, 0%, 100%, .75);
  margin-bottom: 20px;
}

.security-card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.security-card {
  background: #1c2b3b;
  color: white;
  width: 300px;
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.security-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

/* media queries for responsiveness */
@media (max-width: 768px) {
  .security-card-container {
    flex-direction: column;
    align-items: center;
  }

  .security-card {
    width: 100%;
    margin-bottom: 20px;
  }
}.footer {
   background-color: #1a1a1a;
   color: #fff;
   padding: 40px 20px;
   text-align: center;
 }

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}

.footer-column a,
.footer-column p {
  color: #fff;
  margin: 5px 0;
  text-decoration: none;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-column p {
  font-size: 14px;
}

.footer-column p:nth-child(2),
.footer-column p:nth-child(3) {
  margin-top: 10px;
}

这样不就搞定了

• React 样式单独导入

@import "./my-styles.css";

@import "~@arco-design/web-vue/dist/arco.css";


.progra_box {
  border-radius: 25px;
  font-size: 20px;
  line-height: 20px;
  height: 50px;
}

.container {
  text-align: center;
  background: url('https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/bg_extension_ai.c2bd2693.jpg') no-repeat center center,
  url('https://lf-cdn.marscode.cn/obj/marscode-bucket-cn/a0_website_prod/static/image/bg_extension_banner.1f666f0c.jpg') no-repeat center center;
  background-size: cover, cover;
  color: white;
  padding: 50px 20px;
  min-height: 100vh;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.very_line-1 {
  background: linear-gradient(180deg, #06f, #bf46e5);
  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}


.very_line-2 {
  background: linear-gradient(180deg, #bf46e5, #fe8853);  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}

.very_line-3 {
  background: linear-gradient(180deg, #fe8853, #f84872);
  flex: none;
  margin-left: 10px;
  width: 2px;
  height: 100px;
  box-sizing: border-box;
}

.fontTitle {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .042px;
  line-height: 28px;
  align-content: flex-end;
  margin-right: 800px;
}



.tab-card_box {
  width: 900px;
  height: 100px;
  margin-top: 90px;
  margin-left: 440px;
  background: #121314;
  border-radius: 12px;
}

.font-tip {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  position: relative;
  top: 80px;
  right: 450px;
}

.tab-card {
  align-items: center;
  background: #121314;
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 24px 34px;
  margin-left: 450px;
  margin-top: 50px;
  width: 800px;
  height: 100px;
  border: 1px solid white;
}

.tab-container {

  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tab {

  display: flex;
  flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 2px solid transparent;
  background: #1c2b3b;
  color: white;
  border-radius: 25px;
  margin: 0 10px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.tab.active {
  background: #2851fe;
  color: #fff;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}

.nav {
  display: flex;
  float: left;
  margin-right: 590px;
  font-size: 23px;
  gap: 20px;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.login-btn {
}

.main h1 {
  font-size: 80px;
  margin-bottom: 20px;
}

.main-description {
  font-size: 18px;
  margin-bottom: 40px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}


/* 省略不变的部分 */
.car_bottom {
  display: flex;
  justify-content: flex-start; /* 保持 flex-start */
  gap: 0px; /* 将 gap 设置为 0 */
  margin-top: 30px;
}

.card-bottom-card {
  background: #1c2b3b;
  color: white;
  width: 400px; /* 调整宽度，确保三张卡片在一行，并为间距留出空间 */
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  overflow: hidden;
  height: 350px;
  margin-right: -15px; /* 为每张卡片添加右边距 */
}

.install-support {
  margin-top: 150px;
}

.card-bottom-card:last-child {
  margin-right: 0; /* 确保最后一张卡片没有右边距 */
}

.animation-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* 根据需要调整 */
}

.ripple-animation {
  position: absolute;
  width: 200px; /* 根据需要调整 */
  height: 200px; /* 根据需要调整 */
  background: radial-gradient(circle, white 20%, transparent 20%);
  background-size: 50% 50%;
  animation: ripple 2s infinite;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.animated-button {
  position: relative;
  z-index: 1;
  background-color: #007bff; /* 根据需要调整 */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animated-button:hover .button-icon {
  transform: translateY(-5px);
}

.button-icon {
  font-size: 20px; /* 根据需要调整 */
  transition: transform 0.3s;
}

@media (max-width: 768px) {
  .card-bottom-card {
    width: 100%; /* 在小屏幕上，每张卡片占据整行 */
    margin-right: 0; /* 在小屏幕上，取消右边距 */
    margin-bottom: 20px; /* 在小屏幕上，为卡片添加下边距 */
  }

  .car_bottom {
    flex-direction: column; /* 在小屏幕上，卡片垂直排列 */
  }
}

.content_one h1 {
  font-size: 60px;
  margin-bottom: 10px;
}

.content-description {
  font-size: 16px;
  margin-bottom: 20px;
  color: hsla(0, 0%, 100%, .75);
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 调整为 space-between 以缩小卡片间距 */
  margin-top: 30px;
}

.card {
  width: 45%; /* 调整卡片宽度以减小间距 */
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  margin-bottom: 20px;
  overflow: hidden;
  height: 350px;
}

.card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .card {
    width: 100%;
  }
}

.card-left-1 {
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  color: white;
  width: 650px;
  margin-left: 166px;
}

.card-right-2 {
  background: #000305;
  color: white;
  width: 650px;
  margin-right: 266px;
}

.card-left-3 {
  background: #1c2b3b;
  color: white;
  width: 350px;
  margin-left: 166px;
}

.card-right-4 {
  background: #2851fe;
  color: white;
  width: 950px;
  margin-right: 266px;
}

.card-bottom-card {
  background: #1c2b3b;
  color: white;
  width: 340px;
  margin-left: 158px;
}


.glowing-text {
  display: inline-block;
  position: relative;
  font-weight: bold;
}


.glowing-text::after {
  content: '用AI激发创造';
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  animation: glow-text 8s linear infinite;
  animation-delay: 0s;
  background: conic-gradient(
    from 328deg at 50% -10%,
    rgb(119, 173, 255) -86.58deg,
    rgb(255, 255, 255) 69.75deg,
    rgb(255, 181, 144) 99.21deg,
    rgb(207, 117, 252) 203.39deg,
    rgb(119, 173, 255) 273.42deg,
    rgb(255, 255, 255) 429.75deg
  );
  -webkit-background-clip: text;
}


.ide-support {
  text-align: center;
  margin-top: 40px;
}

.ide-title {
  font-size: 40px;
  margin-bottom: 10px;
}

.ide-description {
  font-size: 16px;
  color: hsla(0, 0%, 100%, .75);
  margin-bottom: 20px;
}

.animation-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; /* Adjust as necessary */
}

.ripple-animation {
  position: absolute;
  width: 200px; /* Adjust as necessary */
  height: 200px; /* Adjust as necessary */
  background: radial-gradient(circle, white 20%, transparent 20%);
  background-size: 50% 50%;
  animation: ripple 2s infinite;
  z-index: -1;
}

@keyframes ripple {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.animated-button {
  position: relative;
  z-index: 1;
  background-color: #007bff; /* Adjust as necessary */
  border: none;
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.3s;
}

.animated-button:hover .button-icon {
  transform: translateY(-5px);
}

.button-icon {
  width: 20px; /* Adjust as necessary */
  height: 20px; /* Adjust as necessary */
  transition: transform 0.3s;
}


.ide-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.tag {
  background: #1c2b3b;
  color: white;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 14px;
}

.ide-cards {

  display: flex;
  justify-content: center;
  gap: 40px;
}

.ide-card {
  border-radius: 12px;
  border: 1px solid #1c2b3b;
  width: 155px;
  text-align: center;
  color: white;
}

.ide-card:hover {
  border-color: #2851fe;
}

.ide-card img {
  max-width: 100px;
  height: auto;
  margin-bottom: 10px;
}

.ide-card span {
  display: block;
  font-size: 16px;
}

.text-appear {
  opacity: 1;
  transform: translateY(0);
  animation: text-appear 2s ease-in-out forwards;
}

@keyframes glow-text {
  0%, 100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0), 0 0 20px rgba(255, 255, 255, 0);
  }
  10% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
  }
  20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
  }
}

@keyframes text-appear {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.data-security {
  margin-top: 150px;
  text-align: center;
}

.section-title {
  font-size: 40px;
  margin-bottom: 10px;
}

.section-description {
  font-size: 16px;
  color: hsla(0, 0%, 100%, .75);
  margin-bottom: 20px;
}

.security-card-container {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.security-card {
  background: #1c2b3b;
  color: white;
  width: 300px;
  padding: 20px;
  border-radius: 15px;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.security-card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
}

/* media queries for responsiveness */
@media (max-width: 768px) {
  .security-card-container {
    flex-direction: column;
    align-items: center;
  }

  .security-card {
    width: 100%;
    margin-bottom: 20px;
  }
}.footer {
   background-color: #1a1a1a;
   color: #fff;
   padding: 40px 20px;
   text-align: center;
 }

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.footer-column {
  flex: 1;
  min-width: 200px;
  padding: 10px;
}

.footer-column a,
.footer-column p {
  color: #fff;
  margin: 5px 0;
  text-decoration: none;
}

.footer-column a:hover {
  text-decoration: underline;
}

.footer-column p {
  font-size: 14px;
}

.footer-column p:nth-child(2),
.footer-column p:nth-child(3) {
  margin-top: 10px;
}

这样不就搞定了

就问你吊不吊，自己写个Marscode

一比一还原