@appthen/cli 1.2.8 → 1.2.11

package/tests/test-app/src/pages/web_version/website.tsx

@@ -0,0 +1,1066 @@
+/**
+ * 网站首页
+ * @type Page
+ * @screen 1400w
+ * @frames web
+ */
+import React from 'react';
+import { Image, Page, Text, View } from '@appthen/react';
+import { Icon } from '@appthen/antd';
+import form from '/src/pages/block/form';
+import './website.css';
+
+class IProps {}
+
+/*
+ * 数据与接口请求定义
+ */
+class IState {
+  navbarScrolled: boolean;
+  showBackToTop: boolean;
+  mobileMenuOpen: boolean;
+  animatedNumbers: {
+    /* @example 0 */projects?: number,
+    /* @example 0 */clients?: number,
+    /* @example 0 */experience?: number,
+    /* @example 0 */awards?: number,
+  };
+}
+
+class Document extends React.Component<IProps, IState> {
+  state = {
+    navbarScrolled: false,
+    showBackToTop: false,
+    mobileMenuOpen: false,
+    animatedNumbers: { projects: 0, clients: 0, experience: 0, awards: 0 },
+  };
+
+  componentDidMount() {
+    window.addEventListener('scroll', this.handleScroll);
+    this.animateNumbers();
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('scroll', this.handleScroll);
+  }
+
+  handleScroll() {
+    const scrollTop = window.pageYOffset;
+    this.setState({
+      navbarScrolled: scrollTop > 50,
+      showBackToTop: scrollTop > 300,
+    });
+  }
+
+  scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
+
+  scrollToSection(sectionId) {
+    const element = document.getElementById(sectionId);
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+      });
+    }
+  }
+
+  animateNumbers() {
+    const targets = {
+      projects: 150,
+      clients: 500,
+      experience: 10,
+      awards: 25,
+    };
+    const duration = 2000;
+    const steps = 50;
+    const interval = duration / steps;
+    let currentStep = 0;
+    const timer = setInterval(() => {
+      currentStep++;
+      const progress = currentStep / steps;
+      this.setState({
+        animatedNumbers: {
+          projects: Math.floor(targets.projects * progress),
+          clients: Math.floor(targets.clients * progress),
+          experience: Math.floor(targets.experience * progress),
+          awards: Math.floor(targets.awards * progress),
+        },
+      });
+      if (currentStep >= steps) {
+        clearInterval(timer);
+        this.setState({
+          animatedNumbers: targets,
+        });
+      }
+    }, interval);
+  }
+
+  render() {
+    return (
+      <Page className="min-h-screen bg-[#ffffff]">
+        <nav
+          className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
+            this.state.navbarScrolled
+              ? 'bg-[rgba(26,62,114,0.98)] shadow-lg py-3'
+              : 'bg-[rgba(26,62,114,0.95)] py-4'
+          }`}
+        >
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="flex items-center justify-between">
+              <View href="#" className="flex items-center">
+                <Text className="text-[31px] text-[#ffffff]">LOGO</Text>
+              </View>
+              <button
+                className="lg:hidden text-[#ffffff]"
+                onClick={() =>
+                  this.setState({
+                    mobileMenuOpen: !this.state.mobileMenuOpen,
+                  })
+                }
+              >
+                <Icon className="fas fa-bars text-xl" />
+              </button>
+              <View className="hidden lg:flex space-x-8 items-center">
+                <View
+                  href="#home"
+                  className="text-white hover:text-gray-300 transition-colors"
+                  onClick={() => this.scrollToSection('home')}
+                >
+                  <Text>首页</Text>
+                </View>
+                <View
+                  href="#services"
+                  className="text-white hover:text-gray-300 transition-colors"
+                  onClick={() => this.scrollToSection('services')}
+                >
+                  <Text>服务</Text>
+                </View>
+                <View
+                  href="#about"
+                  className="text-white hover:text-gray-300 transition-colors"
+                  onClick={() => this.scrollToSection('about')}
+                >
+                  <Text>关于我们</Text>
+                </View>
+                <View
+                  href="#team"
+                  className="text-white hover:text-gray-300 transition-colors"
+                  onClick={() => this.scrollToSection('team')}
+                >
+                  <Text>团队</Text>
+                </View>
+                <View
+                  href="#portfolio"
+                  className="text-white hover:text-gray-300 transition-colors"
+                  onClick={() => this.scrollToSection('portfolio')}
+                >
+                  <Text>案例</Text>
+                </View>
+                <View
+                  href="#contact"
+                  className="text-white hover:text-gray-300 transition-colors"
+                  onClick={() => this.scrollToSection('contact')}
+                >
+                  <Text>联系我们</Text>
+                </View>
+                <View
+                  href="tel:+86-400-123-4567"
+                  className="border-white text-white hover:bg-white hover:text-[#1A3E72] transition-all duration-300 border-solid border border-solid pl-[16px] pr-[16px] pt-[8px] pb-[8px] rounded-full"
+                >
+                  <Text>联系我们</Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </nav>
+        <section
+          id="home"
+          className="bg-gradient-to-br from-[#1A3E72] via-[#1A3E72] to-[#142D55] relative text-[#ffffff] pt-[128px] pb-[96px] overflow-hidden"
+        >
+          <View className="top-1/4 left-1/12 animate-pulse absolute w-[128px] h-[128px] bg-[#E74C3C] rounded-full [opacity:0.1]" />
+          <View className="bottom-1/4 right-1/12 animate-pulse delay-1000 absolute w-[160px] h-[160px] bg-[#F39C12] rounded-full [opacity:0.1]" />
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px] relative z-10">
+            <View className="lg:grid-cols-2 grid gap-12 items-center">
+              <View>
+                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-[24px] [lineHeight:1.25]">
+                  <Text>创新科技</Text>
+                  <br />
+                  <Text>引领未来</Text>
+                </h1>
+                <p className="text-xl md:text-2xl text-gray-200 mb-[32px]">
+                  专业的技术团队，为您提供全方位的数字化解决方案
+                </p>
+                <View className="flex flex-wrap gap-4">
+                  <button
+                    onClick={() => this.scrollToSection('contact')}
+                    className="bg-[#E74C3C] hover:bg-[#c0392b] transition-all duration-300 transform hover:scale-105 text-[#ffffff] pl-[32px] pr-[32px] pt-[12px] pb-[12px] rounded-full font-semibold"
+                  >
+                    <Text>立即咨询</Text>
+                  </button>
+                  <button
+                    onClick={() => this.scrollToSection('services')}
+                    className="border-2 border-white text-white hover:bg-white hover:text-[#1A3E72] transition-all duration-300 pl-[32px] pr-[32px] pt-[12px] pb-[12px] rounded-full font-semibold"
+                  >
+                    <Text>了解服务</Text>
+                  </button>
+                </View>
+              </View>
+              <View className="hidden lg:block">
+                <View className="bg-white/10 backdrop-blur-sm rounded-2xl p-[32px]">
+                  <h3 className="text-2xl font-bold mb-[24px]">企业数据概览</h3>
+                  <View className="grid grid-cols-2 gap-6">
+                    <View className="">
+                      <View className="text-4xl font-bold text-[#F39C12] mb-[8px]">
+                        <Text>{this.state.animatedNumbers.projects}</Text>
+                      </View>
+                      <p className="text-sm text-[#d1d5db]">成功项目</p>
+                    </View>
+                    <View className="">
+                      <View className="text-4xl font-bold text-[#F39C12] mb-[8px]">
+                        <Text>{this.state.animatedNumbers.clients}</Text>
+                      </View>
+                      <p className="text-sm text-[#d1d5db]">满意客户</p>
+                    </View>
+                    <View className="">
+                      <View className="text-4xl font-bold text-[#F39C12] mb-[8px]">
+                        <Text>{this.state.animatedNumbers.experience}</Text>
+                      </View>
+                      <p className="text-sm text-[#d1d5db]">年行业经验</p>
+                    </View>
+                    <View className="">
+                      <View className="text-4xl font-bold text-[#F39C12] mb-[8px]">
+                        <Text>{this.state.animatedNumbers.awards}</Text>
+                      </View>
+                      <p className="text-sm text-[#d1d5db]">获得奖项</p>
+                    </View>
+                  </View>
+                </View>
+              </View>
+            </View>
+          </View>
+        </section>
+        <section
+          id="services"
+          className="pt-[80px] pb-[80px] bg-[var(--gray-50)]"
+        >
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="mb-[64px]">
+              <h2 className="inline-block text-4xl font-bold text-[#1A3E72] mb-[16px] relative">
+                <Text>我们的服务</Text>
+                <Text className="-bottom-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-[#E74C3C] to-[#F39C12] absolute w-[64px] h-[4px]" />
+              </h2>
+              <p className="text-xl text-[#4b5563]">
+                为企业提供全方位的数字化解决方案
+              </p>
+            </View>
+            <View className="md:grid-cols-3 grid gap-8">
+              {[
+                {
+                  title: 'Web开发',
+                  icon: 'fas fa-code',
+                  image:
+                    'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800',
+                  items: [
+                    '响应式网站',
+                    '电商平台',
+                    '企业官网',
+                    'Web应用',
+                    'API开发',
+                    '性能优化',
+                    'SEO优化',
+                  ],
+                },
+                {
+                  title: '移动应用开发',
+                  icon: 'fas fa-mobile-alt',
+                  image:
+                    'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800',
+                  items: [
+                    'iOS应用',
+                    'Android应用',
+                    '跨平台开发',
+                    'UI/UX设计',
+                    '应用商店上架',
+                    '应用维护',
+                  ],
+                },
+                {
+                  title: '云服务与运维',
+                  icon: 'fas fa-cloud',
+                  image:
+                    'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800',
+                  items: [
+                    '云架构设计',
+                    '服务器部署',
+                    '数据库管理',
+                    '安全防护',
+                    '监控运维',
+                    '备份恢复',
+                  ],
+                },
+              ].map((service, index) => (
+                <View
+                  key={index}
+                  className="shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 bg-[#ffffff] rounded-2xl"
+                >
+                  <View className="rounded-t-[16px] h-[192px] bg-cover bg-center" />
+                  <View className="p-[32px]">
+                    <View className="text-4xl text-[#E74C3C] mb-[16px]">
+                      <Icon className={service.icon} />
+                    </View>
+                    <h3 className="text-2xl font-bold mb-[16px]">
+                      {service.title}
+                    </h3>
+                    <ul className="space-y-2 mb-[24px]">
+                      {service.items.map((item, idx) => (
+                        <li key={idx} className="flex items-center">
+                          <Icon className="fas fa-check-circle text-[#1A3E72] mr-[8px]" />
+                          <Text className="text-[#374151]">{item}</Text>
+                        </li>
+                      ))}
+                    </ul>
+                    <View
+                      href="#"
+                      className="text-[#1A3E72] hover:text-[#E74C3C] transition-colors font-semibold"
+                    >
+                      <Text>查看详情</Text>
+                      <Icon className="fas fa-arrow-right ml-[4px]" />
+                    </View>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        </section>
+        <section className="pt-[80px] pb-[80px]">
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="mb-[64px]">
+              <h2 className="inline-block text-4xl font-bold text-[#1A3E72] mb-[16px] relative">
+                <Text>合作客户</Text>
+                <Text className="-bottom-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-[#E74C3C] to-[#F39C12] absolute w-[64px] h-[4px]" />
+              </h2>
+              <p className="text-xl text-[#4b5563]">
+                服务众多知名企业，助力数字化转型
+              </p>
+            </View>
+            <View className="md:grid-cols-3 lg:grid-cols-5 grid grid-cols-2 gap-8">
+              {[
+                '阿里巴巴',
+                '腾讯科技',
+                '百度',
+                '京东',
+                '美团',
+                '字节跳动',
+                '小米科技',
+                '华为',
+                '滴滴出行',
+                '网易',
+                '新浪',
+                '搜狐',
+                '360',
+                '携程',
+                '拼多多',
+              ].map((client, index) => (
+                <View key={index} className="group ">
+                  <View className="group-hover:shadow-lg transition-all duration-300 bg-[#f3f4f6] rounded-lg p-[24px] mb-[12px]">
+                    <Image
+                      src={`https://via.placeholder.com/150x60/FFFFFF/1A3E72?text=${encodeURIComponent(
+                        client
+                      )}`}
+                      alt={client}
+                      className="filter grayscale group-hover:grayscale-0 transition-all duration-300 w-full h-[48px] [objectFit:contain]"
+                    />
+                  </View>
+                  <p className="text-sm font-medium text-[#374151]">{client}</p>
+                </View>
+              ))}
+            </View>
+          </View>
+        </section>
+        <section id="about" className="pt-[80px] pb-[80px] bg-[var(--gray-50)]">
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="lg:grid-cols-2 grid gap-16">
+              <View>
+                <h2 className="inline-block text-4xl font-bold text-[#1A3E72] mb-[32px] relative">
+                  <Text>企业使命与愿景</Text>
+                  <Text className="-bottom-3 bg-gradient-to-r from-[#E74C3C] to-[#F39C12] absolute left-[0px] w-[64px] h-[4px]" />
+                </h2>
+                <View className="mb-[32px]">
+                  <h3 className="bg-gradient-to-r from-[#1A3E72] to-[#E74C3C] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] text-2xl font-bold mb-[16px]">
+                    使命 (Mission)
+                  </h3>
+                  <p className="text-xl font-bold mb-[16px]">
+                    通过创新技术和专业服务，助力企业数字化转型，创造更大价值
+                  </p>
+                  <ul className="space-y-2">
+                    <li className="flex items-start">
+                      <Icon className="fas fa-check-circle text-[#1A3E72] mr-[12px] mt-[4px]" />
+                      <Text>提供高质量的技术解决方案</Text>
+                    </li>
+                    <li className="flex items-start">
+                      <Icon className="fas fa-check-circle text-[#1A3E72] mr-[12px] mt-[4px]" />
+                      <Text>专注客户需求，持续创新</Text>
+                    </li>
+                    <li className="flex items-start">
+                      <Icon className="fas fa-check-circle text-[#1A3E72] mr-[12px] mt-[4px]" />
+                      <Text>构建长期合作伙伴关系</Text>
+                    </li>
+                  </ul>
+                </View>
+                <View>
+                  <h3 className="bg-gradient-to-r from-[#1A3E72] to-[#E74C3C] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] text-2xl font-bold mb-[16px]">
+                    愿景 (Vision)
+                  </h3>
+                  <p className="text-xl font-bold mb-[16px]">
+                    成为行业领先的数字化服务提供商，推动企业创新发展
+                  </p>
+                  <ul className="space-y-2">
+                    <li className="flex items-start">
+                      <Icon className="fas fa-check-circle text-[#1A3E72] mr-[12px] mt-[4px]" />
+                      <Text>引领技术创新趋势</Text>
+                    </li>
+                    <li className="flex items-start">
+                      <Icon className="fas fa-check-circle text-[#1A3E72] mr-[12px] mt-[4px]" />
+                      <Text>打造行业标杆案例</Text>
+                    </li>
+                  </ul>
+                </View>
+              </View>
+              <View>
+                <h2 className="inline-block text-4xl font-bold text-[#1A3E72] mb-[32px] relative">
+                  <Text>核心价值观</Text>
+                  <Text className="-bottom-3 bg-gradient-to-r from-[#E74C3C] to-[#F39C12] absolute left-[0px] w-[64px] h-[4px]" />
+                </h2>
+                <View className="md:grid-cols-2 grid gap-6">
+                  {[
+                    {
+                      title: '技术创新',
+                      desc: '持续关注前沿技术，运用最新的开发框架和工具，为客户提供领先的技术解决方案',
+                      icon: 'fas fa-rocket',
+                    },
+                    {
+                      title: '质量至上',
+                      desc: '严格的质量控制体系，确保每个项目都达到最高标准，为客户创造长期价值',
+                      icon: 'fas fa-award',
+                    },
+                    {
+                      title: '客户导向',
+                      desc: '深入理解客户需求，提供个性化解决方案，与客户共同成长',
+                      icon: 'fas fa-users',
+                    },
+                    {
+                      title: '团队协作',
+                      desc: '高效的团队协作机制，发挥每个成员的专业优势，共同完成项目目标',
+                      icon: 'fas fa-handshake',
+                    },
+                  ].map((value, index) => (
+                    <View
+                      key={index}
+                      className="shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 border-solid bg-[#ffffff] rounded-2xl p-[24px] border-t-[16px] border-t-solid border-[#D4AF37] border border-solid"
+                    >
+                      <h3 className="bg-gradient-to-r from-[#1A3E72] to-[#E74C3C] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] [WebkitBackgroundClip:text] [WebkitTextFillColor:transparent] [backgroundClip:text] text-xl font-bold mb-[12px]">
+                        {value.title}
+                      </h3>
+                      <p className="text-[#374151] mb-[16px]">{value.desc}</p>
+                      <View className="">
+                        <Icon
+                          className={`${value.icon} text-3xl text-gray-300`}
+                        />
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </View>
+          </View>
+        </section>
+        <section className="pt-[80px] pb-[80px] bg-[#1A3E72] text-[#ffffff]">
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="md:grid-cols-4 grid gap-8">
+              {[
+                {
+                  icon: 'fas fa-project-diagram',
+                  value: state.animatedNumbers.projects,
+                  label: '成功项目',
+                },
+                {
+                  icon: 'fas fa-users',
+                  value: state.animatedNumbers.clients,
+                  label: '满意客户',
+                },
+                {
+                  icon: 'fas fa-calendar-alt',
+                  value: state.animatedNumbers.experience,
+                  label: '年行业经验',
+                },
+                {
+                  icon: 'fas fa-trophy',
+                  value: state.animatedNumbers.awards,
+                  label: '获得奖项',
+                },
+              ].map((stat, index) => (
+                <View key={index} className="">
+                  <View className="bg-white/10 backdrop-blur-sm hover:bg-white/20 transition-all duration-300 rounded-2xl p-[32px]">
+                    <Icon
+                      className={`${stat.icon} text-4xl mb-4 text-[#F39C12]`}
+                      size={0}
+                      rotate={0}
+                      spin={false}
+                    />
+                    <View className="text-4xl font-bold mb-[8px]">
+                      <Text>{stat?.value}</Text>
+                    </View>
+                    <p className="text-[#d1d5db]">{stat.label}</p>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        </section>
+        <section id="team" className="pt-[80px] pb-[80px] bg-[var(--gray-50)]">
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="mb-[64px]">
+              <h2 className="inline-block text-4xl font-bold text-[#1A3E72] mb-[16px] relative">
+                <Text>专业团队</Text>
+                <Text className="-bottom-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-[#E74C3C] to-[#F39C12] absolute w-[64px] h-[4px]" />
+              </h2>
+              <p className="text-xl text-[#4b5563]">
+                经验丰富的技术专家，为您提供专业服务
+              </p>
+            </View>
+            <View className="md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 grid gap-8">
+              {[
+                {
+                  name: '张伟',
+                  title: '技术总监',
+                  role: '全栈开发专家',
+                  desc: '10年+开发经验，精通前后端技术栈，曾任职于知名互联网公司',
+                },
+                {
+                  name: '李明',
+                  title: '产品经理',
+                  role: '用户体验专家',
+                  desc: '专注产品设计与用户体验，成功主导多个大型项目',
+                },
+                {
+                  name: '王芳',
+                  title: 'UI/UX设计师',
+                  role: '视觉设计专家',
+                  desc: '资深设计师，擅长品牌视觉和交互设计，作品获得多项设计奖项',
+                },
+                {
+                  name: '刘强',
+                  title: '运维工程师',
+                  role: '云架构专家',
+                  desc: '云计算和DevOps专家，负责系统架构设计和运维保障',
+                },
+              ].map((leader, index) => (
+                <View
+                  key={index}
+                  className="shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 bg-[#ffffff] rounded-2xl"
+                >
+                  <Image
+                    src={`https://images.unsplash.com/photo-${
+                      1560250097 + index
+                    }-0b93528c311a?w=400`}
+                    alt={leader.name}
+                    className="rounded-t-[16px] w-full h-[256px] [objectFit:cover]"
+                  />
+                  <View className="p-[24px]">
+                    <h3 className="text-xl font-bold mb-[4px]">
+                      {leader.name}
+                    </h3>
+                    <p className="text-sm text-[#4b5563] mb-[8px]">
+                      {leader.title}
+                    </p>
+                    <p className="text-sm font-semibold text-[#1A3E72] mb-[8px]">
+                      {leader.role}
+                    </p>
+                    <p className="text-sm text-[#4b5563]">{leader.desc}</p>
+                  </View>
+                </View>
+              ))}
+            </View>
+          </View>
+        </section>
+        <section id="portfolio" className="pt-[80px] pb-[80px]">
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="mb-[64px]">
+              <h2 className="inline-block text-4xl font-bold text-[#1A3E72] mb-[16px] relative">
+                <Text>成功案例</Text>
+                <Text className="-bottom-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-[#E74C3C] to-[#F39C12] absolute w-[64px] h-[4px]" />
+              </h2>
+              <p className="text-xl text-[#4b5563]">
+                精选项目案例，展示我们的专业实力
+              </p>
+            </View>
+            <View className="lg:grid-cols-2 grid gap-12">
+              <View>
+                <View className="space-y-8">
+                  {[
+                    '电商平台开发',
+                    '企业管理系统',
+                    '移动应用开发',
+                    '云架构迁移',
+                    '数据分析平台',
+                  ].map((item, index) => (
+                    <View key={index} className="flex items-start">
+                      <View className="flex-shrink-0 w-[16px] h-[16px] bg-[#E74C3C] rounded-full mt-[8px] mr-[16px] relative">
+                        <View className="inset-0 animate-ping absolute bg-[#E74C3C] rounded-full" />
+                      </View>
+                      <View>
+                        <h4 className="text-lg font-semibold">{item}</h4>
+                        <p className="text-[#4b5563]">
+                          运用先进技术，为客户创造价值
+                        </p>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+              <View>
+                <View className="space-y-8">
+                  {[
+                    '品牌官网设计',
+                    'API接口开发',
+                    '系统性能优化',
+                    '安全防护升级',
+                    '运维监控系统',
+                  ].map((item, index) => (
+                    <View key={index} className="flex items-start">
+                      <View className="flex-shrink-0 w-[16px] h-[16px] bg-[#E74C3C] rounded-full mt-[8px] mr-[16px] relative">
+                        <View className="inset-0 animate-ping absolute bg-[#E74C3C] rounded-full" />
+                      </View>
+                      <View>
+                        <h4 className="text-lg font-semibold">{item}</h4>
+                        <p className="text-[#4b5563]">专业服务，保障项目成功</p>
+                      </View>
+                    </View>
+                  ))}
+                </View>
+              </View>
+            </View>
+          </View>
+        </section>
+        <section className="pt-[80px] pb-[80px]">
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="mb-[64px]">
+              <h2 className="inline-block text-4xl font-bold text-[#1A3E72] mb-[16px] relative">
+                <Text>客户见证</Text>
+                <Text className="-bottom-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-[#E74C3C] to-[#F39C12] absolute w-[64px] h-[4px]" />
+              </h2>
+              <p className="text-xl text-[#4b5563]">客户的成功就是我们的成功</p>
+            </View>
+            <View className="md:grid-cols-3 grid gap-8">
+              {[
+                {
+                  name: '张总',
+                  company: '某电商平台CTO',
+                  quote:
+                    'TechCorp团队的技术实力和服务态度都非常出色，帮助我们成功完成了平台的技术升级，用户体验得到了显著提升，业务增长超出预期。',
+                },
+                {
+                  name: '李总',
+                  company: '某制造企业信息总监',
+                  quote:
+                    '与TechCorp合作开发的企业管理系统，大大提高了我们的工作效率。他们的专业团队不仅技术过硬，更重要的是能够深入理解我们的业务需求。',
+                },
+                {
+                  name: '王总',
+                  company: '某金融公司产品经理',
+                  quote:
+                    '从需求分析到系统上线，TechCorp提供了全程的专业服务。他们的移动应用开发能力让我们的产品在市场上获得了很好的反响。',
+                },
+              ].map((testimonial, index) => (
+                <View
+                  key={index}
+                  className="bg-[#ffffff] rounded-2xl shadow-[0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)] p-[32px] relative"
+                >
+                  <View className="top-[16px] right-[16px] absolute text-6xl text-[#e5e7eb]">
+                    <Icon className="fas fa-quote-right" />
+                  </View>
+                  <p className="italic text-[#374151] mb-[24px]">{`"${testimonial.quote}"`}</p>
+                  <View className="flex items-center">
+                    <Image
+                      src={`https://images.unsplash.com/photo-${
+                        1560250097 + index
+                      }-0b93528c311a?w=100`}
+                      alt={testimonial.name}
+                      className="w-[48px] h-[48px] rounded-full mr-[16px]"
+                    />
+                    <View>
+                      <h4 className="font-bold">{testimonial.name}</h4>
+                      <p className="text-sm text-[#4b5563]">
+                        {testimonial.company}
+                      </p>
+                    </View>
+                  </View>
+                </View>
+              ))}
+            </View>
+            <View className="mt-[48px]">
+              <button className="text-[#1A3E72] hover:bg-[#1A3E72] hover:text-white transition-all duration-300 border-solid border border-solid border-[#1A3E72] pl-[24px] pr-[24px] pt-[12px] pb-[12px] rounded-full mr-[16px]">
+                <Text>查看更多案例</Text>
+              </button>
+              <button className="bg-[#1A3E72] hover:bg-[#142D55] transition-all duration-300 text-[#ffffff] pl-[24px] pr-[24px] pt-[12px] pb-[12px] rounded-full">
+                <Text>印尼观察报告</Text>
+              </button>
+            </View>
+          </View>
+        </section>
+        <section
+          id="contact"
+          className="pt-[80px] pb-[80px] bg-[#1A3E72] text-[#ffffff]"
+        >
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="lg:grid-cols-2 grid gap-12">
+              <View>
+                <h2 className="text-4xl font-bold mb-[24px]">联系我们</h2>
+                <p className="text-xl mb-[32px] text-[#d1d5db]">
+                  无论您有任何技术需求，我们的专业团队随时为您服务
+                </p>
+                <View className="space-y-6">
+                  <View className="flex items-start">
+                    <View className="bg-white/10 backdrop-blur-sm rounded-full p-[12px] mr-[16px]">
+                      <Icon className="fas fa-phone-alt" />
+                    </View>
+                    <View>
+                      <h4 className="font-bold mb-[4px]">电话</h4>
+                      <p className="text-[#d1d5db]">+86-400-123-4567</p>
+                    </View>
+                  </View>
+                  <View className="flex items-start">
+                    <View className="bg-white/10 backdrop-blur-sm rounded-full p-[12px] mr-[16px]">
+                      <Icon className="fas fa-envelope" />
+                    </View>
+                    <View>
+                      <h4 className="font-bold mb-[4px]">邮箱</h4>
+                      <p className="text-[#d1d5db]">contact@techcorp.com</p>
+                    </View>
+                  </View>
+                  <View className="flex items-start">
+                    <View className="bg-white/10 backdrop-blur-sm rounded-full p-[12px] mr-[16px]">
+                      <Icon className="fas fa-map-marker-alt" />
+                    </View>
+                    <View>
+                      <h4 className="font-bold mb-[4px]">地址</h4>
+                      <p className="text-[#d1d5db]">
+                        北京市朝阳区建国门外大街1号国贸大厦A座20层
+                      </p>
+                    </View>
+                  </View>
+                </View>
+                <View className="flex flex-wrap gap-4 mt-[32px]">
+                  <View
+                    href="tel:+86-400-123-4567"
+                    className="bg-white hover:bg-gray-100 transition-all duration-300 text-[#1A3E72] pl-[24px] pr-[24px] pt-[12px] pb-[12px] rounded-full font-semibold"
+                  >
+                    <Icon className="fas fa-phone-alt mr-[8px]" />
+                    <Text>电话咨询</Text>
+                  </View>
+                  <View
+                    href="mailto:contact@techcorp.com"
+                    className="border-white text-white hover:bg-white hover:text-[#1A3E72] transition-all duration-300 border-solid border border-solid pl-[24px] pr-[24px] pt-[12px] pb-[12px] rounded-full font-semibold"
+                  >
+                    <Icon className="fas fa-envelope mr-[8px]" />
+                    <Text>邮件联系</Text>
+                  </View>
+                </View>
+              </View>
+              <View>
+                <View className="bg-[#ffffff] rounded-2xl p-[32px]">
+                  <h3 className="text-2xl font-bold text-[#1A3E72] mb-[24px]">
+                    咨询表单
+                  </h3>
+                  <form>
+                    <View className="mb-[16px]">
+                      <label className="block text-[#374151] mb-[8px]">
+                        <Text>姓名</Text>
+                        <Text className="text-[#ef4444]">*</Text>
+                      </label>
+                      <input
+                        type="text"
+                        className="border-gray-300 focus:outline-none focus:border-[#1A3E72] border-solid w-full pl-[16px] pr-[16px] pt-[12px] pb-[12px] border border-solid rounded-lg"
+                        required={true}
+                      />
+                    </View>
+                    <View className="mb-[16px]">
+                      <label className="block text-[#374151] mb-[8px]">
+                        <Text>公司名称</Text>
+                      </label>
+                      <input
+                        type="text"
+                        className="border-gray-300 focus:outline-none focus:border-[#1A3E72] border-solid w-full pl-[16px] pr-[16px] pt-[12px] pb-[12px] border border-solid rounded-lg"
+                      />
+                    </View>
+                    <View className="md:grid-cols-2 grid gap-4 mb-[16px]">
+                      <View>
+                        <label className="block text-[#374151] mb-[8px]">
+                          <Text>电话</Text>
+                          <Text className="text-[#ef4444]">*</Text>
+                        </label>
+                        <input
+                          type="tel"
+                          className="border-gray-300 focus:outline-none focus:border-[#1A3E72] border-solid w-full pl-[16px] pr-[16px] pt-[12px] pb-[12px] border border-solid rounded-lg"
+                          required={true}
+                        />
+                      </View>
+                      <View>
+                        <label className="block text-[#374151] mb-[8px]">
+                          <Text>邮箱</Text>
+                          <Text className="text-[#ef4444]">*</Text>
+                        </label>
+                        <input
+                          type="email"
+                          className="border-gray-300 focus:outline-none focus:border-[#1A3E72] border-solid w-full pl-[16px] pr-[16px] pt-[12px] pb-[12px] border border-solid rounded-lg"
+                          required={true}
+                        />
+                      </View>
+                    </View>
+                    <View className="mb-[16px]">
+                      <label className="block text-[#374151] mb-[8px]">
+                        <Text>感兴趣的服务</Text>
+                      </label>
+                      <select className="border-gray-300 focus:outline-none focus:border-[#1A3E72] border-solid w-full pl-[16px] pr-[16px] pt-[12px] pb-[12px] border border-solid rounded-lg">
+                        <option>
+                          <Text>请选择服务类型</Text>
+                        </option>
+                        <option>
+                          <Text>Web开发</Text>
+                        </option>
+                        <option>
+                          <Text>移动应用开发</Text>
+                        </option>
+                        <option>
+                          <Text>云服务与运维</Text>
+                        </option>
+                        <option>
+                          <Text>UI/UX设计</Text>
+                        </option>
+                        <option>
+                          <Text>系统集成</Text>
+                        </option>
+                        <option>
+                          <Text>技术咨询</Text>
+                        </option>
+                        <option>
+                          <Text>数据分析</Text>
+                        </option>
+                        <option>
+                          <Text>安全防护</Text>
+                        </option>
+                        <option>
+                          <Text>性能优化</Text>
+                        </option>
+                        <option>
+                          <Text>其他服务</Text>
+                        </option>
+                      </select>
+                    </View>
+                    <View className="mb-[24px]">
+                      <label className="block text-[#374151] mb-[8px]">
+                        <Text>咨询内容</Text>
+                      </label>
+                      <textarea
+                        className="border-gray-300 focus:outline-none focus:border-[#1A3E72] border-solid w-full pl-[16px] pr-[16px] pt-[12px] pb-[12px] border border-solid rounded-lg"
+                        rows="4"
+                      />
+                    </View>
+                    <button
+                      type="submit"
+                      className="bg-[#E74C3C] hover:bg-[#c0392b] transition-all duration-300 w-full text-[#ffffff] pt-[16px] pb-[16px] rounded-lg font-bold"
+                    >
+                      <Text>提交咨询</Text>
+                    </button>
+                  </form>
+                </View>
+              </View>
+            </View>
+          </View>
+        </section>
+        <footer className="bg-[#2C3E50] text-[#ffffff] pt-[64px] pb-[64px]">
+          <View className="container ml-[auto] mr-[auto] pl-[16px] pr-[16px]">
+            <View className="md:grid-cols-2 lg:grid-cols-4 grid gap-8">
+              <View>
+                <Image
+                  src="https://via.placeholder.com/180x50/FFFFFF/1A3E72?text=TechCorp"
+                  alt="TechCorp"
+                  className="mb-[16px]"
+                />
+                <p className="text-[#d1d5db] mb-[16px]">
+                  专业的技术团队，为您提供全方位的数字化解决方案
+                </p>
+                <View className="space-x-4 flex">
+                  <View
+                    href="#"
+                    className="text-gray-300 hover:text-white transition-colors"
+                  >
+                    <Icon className="fab fa-weixin text-xl" />
+                  </View>
+                  <View
+                    href="#"
+                    className="text-gray-300 hover:text-white transition-colors"
+                  >
+                    <Icon className="fab fa-linkedin text-xl" />
+                  </View>
+                  <View
+                    href="#"
+                    className="text-gray-300 hover:text-white transition-colors"
+                  >
+                    <Icon className="fab fa-github text-xl" />
+                  </View>
+                  <View
+                    href="#"
+                    className="text-gray-300 hover:text-white transition-colors"
+                  >
+                    <Icon className="fab fa-twitter text-xl" />
+                  </View>
+                </View>
+              </View>
+              <View>
+                <h4 className="text-lg font-bold mb-[16px]">快速链接</h4>
+                <ul className="space-y-2">
+                  <li>
+                    <View
+                      href="#home"
+                      className="text-gray-300 hover:text-white transition-colors"
+                      onClick={() => this.scrollToSection('home')}
+                    >
+                      <Text>首页</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#services"
+                      className="text-gray-300 hover:text-white transition-colors"
+                      onClick={() => this.scrollToSection('services')}
+                    >
+                      <Text>服务</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#about"
+                      className="text-gray-300 hover:text-white transition-colors"
+                      onClick={() => this.scrollToSection('about')}
+                    >
+                      <Text>关于我们</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#team"
+                      className="text-gray-300 hover:text-white transition-colors"
+                      onClick={() => this.scrollToSection('team')}
+                    >
+                      <Text>团队</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#portfolio"
+                      className="text-gray-300 hover:text-white transition-colors"
+                      onClick={() => this.scrollToSection('portfolio')}
+                    >
+                      <Text>案例</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#contact"
+                      className="text-gray-300 hover:text-white transition-colors"
+                      onClick={() => this.scrollToSection('contact')}
+                    >
+                      <Text>联系我们</Text>
+                    </View>
+                  </li>
+                </ul>
+              </View>
+              <View>
+                <h4 className="text-lg font-bold mb-[16px]">服务领域</h4>
+                <ul className="space-y-2">
+                  <li>
+                    <View
+                      href="#"
+                      className="text-gray-300 hover:text-white transition-colors"
+                    >
+                      <Text>政府许可与资质</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#"
+                      className="text-gray-300 hover:text-white transition-colors"
+                    >
+                      <Text>政商关系服务</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#"
+                      className="text-gray-300 hover:text-white transition-colors"
+                    >
+                      <Text>财务与咨询服务</Text>
+                    </View>
+                  </li>
+                  <li>
+                    <View
+                      href="#indonesia"
+                      className="text-gray-300 hover:text-white transition-colors"
+                      onClick={() => this.scrollToSection('indonesia')}
+                    >
+                      <Text>市场概况</Text>
+                    </View>
+                  </li>
+                </ul>
+              </View>
+              <View>
+                <h4 className="text-lg font-bold mb-[16px]">联系方式</h4>
+                <ul className="space-y-3">
+                  <li className="flex items-start">
+                    <Icon className="fas fa-map-marker-alt mr-[12px] mt-[4px] text-[#E74C3C]" />
+                    <Text className="text-[#d1d5db]">Address xxxxx</Text>
+                  </li>
+                  <li className="flex items-start">
+                    <Icon className="fas fa-phone-alt mr-[12px] mt-[4px] text-[#E74C3C]" />
+                    <Text className="text-[#d1d5db]">
+                      00000000000 / 000000000
+                    </Text>
+                  </li>
+                  <li className="flex items-start">
+                    <Icon className="fas fa-envelope mr-[12px] mt-[4px] text-[#E74C3C]" />
+                    <Text className="text-[#d1d5db]">000000000@gmail.com</Text>
+                  </li>
+                </ul>
+              </View>
+            </View>
+            <View className="border-gray-600 border-t border-t-solid mt-[48px] pt-[32px]">
+              <View className="md:flex-row flex flex-col justify-between items-center">
+                <p className="mb-4 md:mb-0 text-[#d1d5db]">
+                  © 2023 通用咨询. 保留所有权利.
+                </p>
+                <p className="text-[#d1d5db]">赋能中国企业数字化安全高效落地</p>
+              </View>
+            </View>
+          </View>
+        </footer>
+        <button
+          onClick={this.scrollToTop}
+          className={`fixed bottom-8 right-8 w-12 h-12 bg-[#E74C3C] text-white rounded-full flex items-center justify-center shadow-lg transition-all duration-300 ${
+            this.state.showBackToTop
+              ? 'opacity-100 translate-y-0'
+              : 'opacity-0 translate-y-10 pointer-events-none'
+          } hover:bg-[#c0392b] hover:scale-110`}
+        >
+          <Icon className="fas fa-arrow-up" />
+        </button>
+      </Page>
+    );
+  }
+}
+
+export default Document;