瀏覽代碼

about部分

Mcal 1 周之前
父節點
當前提交
6bef17fe18

+ 1 - 0
app.vue

@@ -6,6 +6,7 @@ useHead({
   link: [
     { rel: 'stylesheet', href: '/css/bootstrap.min.css' },
     { rel: 'stylesheet', href: '/css/swiper-bundle.min.css' },
+    // { rel: 'stylesheet', href: '/css/tailwind.min.css' },
 
     { rel: 'stylesheet', href: '/css/all.min.css' },
     { rel: 'stylesheet', href: '/css/animate.css' },

+ 287 - 408
pages/about/index.vue

@@ -64,7 +64,7 @@
         <div class="row g-4">
           <div class="col-lg-6 wow fadeInUp" data-wow-delay=".3s">
             <div class="activities-image-items">
-              <img src="/picture/04.png" alt="img" />
+              <img src="/aboutImg/Container2.svg" alt="img" />
               <div class="radius-shape">
                 <img src="/picture/radius-shape.png" alt="shape-img" />
               </div>
@@ -76,69 +76,57 @@
           <div class="col-lg-6">
             <div class="activities-content">
               <div class="section-title">
-                <span class="wow fadeInUp">About Us</span>
+                <span class="wow fadeInUp">关于我们</span>
                 <h2 class="wow fadeInUp" data-wow-delay=".3s">
-                  Learn to play, converse
+                  公司介绍
                   <br />
-                  with confidence.
                 </h2>
               </div>
               <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">
-                Luctus. Curabitur nibh justo imperdiet non ex non tempus faucibus urna Aliquam at
-                elit vitae dui sagittis maximus eget vitae diam In fermentum
+                慧可文化传播(重庆)有限公司是一家致力于科技创新与文化服务深度融合的高新技术企业。我们专注于指导全球儿童和青少年的汉语入门。这个创新平台致力于 6-18 岁外国儿童和青少年的中文教育。
               </p>
               <div class="row g-4 mt-4">
-                <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
+                <div class="col-xl-4 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                   <div class="icon-items">
-                    <div class="icon">
-                      <img src="/picture/icon-5.svg" alt="img" />
-                    </div>
-                    <div class="content">
-                      <h5>Sport Program</h5>
+
+                    <div class="content text-center">
+                      <h5>80%</h5>
                       <p>
-                        Aliquam erat volutpat
+                        具有海外教学经验的教师
                         <br />
-                        nullam imperdiet
+                        <!-- nullam imperdiet -->
                       </p>
                     </div>
                   </div>
                 </div>
-                <div class="col-xl-6 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+                <div class="col-xl-4 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".3s">
                   <div class="icon-items">
-                    <div class="icon">
-                      <img src="/picture/icon-6.svg" alt="img" />
-                    </div>
-                    <div class="content">
-                      <h5>Easy To Learn</h5>
+
+                    <div class="content text-center">
+                      <h5>98%</h5>
                       <p>
-                        Ut vehiculadictumst
+                        HSK通过率超过
                         <br />
-                        maecenas ante.
+                        <!-- nullam imperdiet -->
                       </p>
                     </div>
                   </div>
                 </div>
-              </div>
-              <div class="about-author">
-                <div class="author-image wow fadeInUp" data-wow-delay=".3s">
-                  <img src="/picture/author1.png" alt="author-img" />
-                  <div class="content">
-                    <h6>Ronald Richards</h6>
-                    <p>Co, Founder</p>
-                  </div>
-                </div>
-                <div class="author-icon wow fadeInUp" data-wow-delay=".5s">
-                  <div class="icon">
-                    <i class="fa-solid fa-phone"></i>
-                  </div>
-                  <div class="content">
-                    <span>Call Us Now</span>
-                    <h5>
-                      <a href="tel:18589716552">18589716552</a>
-                    </h5>
+                <div class="col-xl-4 col-lg-8 col-md-6 wow fadeInUp" data-wow-delay=".5s">
+                  <div class="icon-items">
+
+                    <div class="content text-center">
+                      <h5>10000+</h5>
+                      <p>
+                        会员开始他们的中文学习之旅
+                        <br />
+                        <!-- maecenas ante. -->
+                      </p>
+                    </div>
                   </div>
                 </div>
               </div>
+
             </div>
           </div>
         </div>
@@ -154,37 +142,35 @@
     </div>
     <div class="container">
       <div class="section-title text-center">
-        <span class="wow fadeInUp">Our values</span>
+        <span class="wow fadeInUp">我们的故事</span>
         <h2 class="wow fadeInUp" data-wow-delay=".3s">
-          The best playschool
+          品牌故事
           <br />
-          for your kid
+          <!-- for your kid -->
         </h2>
       </div>
       <div class="row">
         <div class="col-xl-4 col-lg-6">
           <div class="feature-value-items">
             <div class="value-icon-items wow fadeInUp" data-wow-delay=".3s">
-              <div class="icon">
-                <img src="/picture/icon-11.svg" alt="img" />
+              <div class="">
+                <img src="/aboutImg/Overlay1.svg" alt="img" />
               </div>
               <div class="content">
-                <h5>Teacher Training and Progress</h5>
+                <h5>2024年除夕夜</h5>
                 <p>
-                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
-                  pulvinar.
+                  开心中文‌在新年的鞭炮声中诞生
                 </p>
               </div>
             </div>
             <div class="value-icon-items wow fadeInUp" data-wow-delay=".5s">
-              <div class="icon color-2">
-                <img src="/picture/icon-21.svg" alt="img" />
+              <div class=" color-2">
+                <img src="/aboutImg/Overlay3.svg" alt="img" />
               </div>
               <div class="content">
-                <h5>Nanny Selection 24/7</h5>
+                <h5>2025年1月</h5>
                 <p>
-                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
-                  pulvinar.
+                  组建研发团队
                 </p>
               </div>
             </div>
@@ -193,37 +179,35 @@
         <div class="col-xl-4 col-lg-6 wow fadeInUp" data-wow-delay=".4s">
           <div class="feature-value-items">
             <div class="feature-value-image">
-              <img src="/picture/cta-2.png" alt="img" />
-              <div class="value-shape">
+              <img src="/aboutImg/Container1.svg" alt="img" />
+              <!-- <div class="value-shape">
                 <img src="/picture/cta-shape-2.png" alt="shape-img" />
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
         <div class="col-xl-4 col-lg-6">
           <div class="feature-value-items">
-            <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".3s">
+            <div class="value-icon-items  style-2 wow fadeInUp" style="justify-content:end" data-wow-delay=".3s">
               <div class="content">
-                <h5>Advanced Placement Courses</h5>
+                <h5>2025年3月​</h5>
                 <p>
-                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
-                  pulvinar.
+                  组建教育团队
                 </p>
               </div>
-              <div class="icon color-3">
-                <img src="/picture/icon-3.svg" alt="img" />
+              <div class=" color-3">
+                <img src="/aboutImg/Overlay2.svg" alt="img" />
               </div>
             </div>
             <div class="value-icon-items style-2 wow fadeInUp" data-wow-delay=".5s">
               <div class="content">
-                <h5>Self-contained gifted programs​</h5>
+                <h5>目前</h5>
                 <p>
-                  Adipiscing elit Praesent luctus laoreet iaculis Curabitur rutrum lectus augue, ut
-                  pulvinar.
+                  成为海外家庭首选的“一站式中文成长伙伴”
                 </p>
               </div>
-              <div class="icon color-2 color-4">
-                <img src="/picture/icon-41.svg" alt="img" />
+              <div class=" color-2 color-4">
+                <img src="/aboutImg/Overlay4.svg" alt="img" />
               </div>
             </div>
           </div>
@@ -231,369 +215,264 @@
       </div>
     </div>
   </section>
-  <section class="counter-section fix">
-    <div class="line-shape">
-      <img src="/picture/line-shape1.png" alt="shape-img" />
-    </div>
-    <div class="box-shape float-bob-x">
-      <img src="/picture/box-shape.png" alt="shape-img" />
-    </div>
-    <div class="counter-bg"></div>
-    <div class="container">
-      <div class="counter-wrapper">
-        <div class="row g-4">
-          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".2s">
-            <div class="counter-items">
-              <div class="icon">
-                <img src="/picture/icon-12.svg" alt="img" />
-              </div>
-              <div class="content">
-                <h2>
-                  <span class="count">25</span>
-                  +
-                </h2>
-                <p>Year of Experience</p>
-              </div>
-            </div>
-          </div>
-          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".4s">
-            <div class="counter-items">
-              <div class="icon">
-                <img src="/picture/icon-22.svg" alt="img" />
-              </div>
-              <div class="content">
-                <h2>
-                  <span class="count">6,500</span>
-                  +
-                </h2>
-                <p>Class Completed</p>
-              </div>
-            </div>
-          </div>
-          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".6s">
-            <div class="counter-items">
-              <div class="icon">
-                <img src="/picture/icon-31.svg" alt="img" />
-              </div>
-              <div class="content">
-                <h2>
-                  <span class="count">100</span>
-                  +
-                </h2>
-                <p>Experts Instructors</p>
-              </div>
-            </div>
-          </div>
-          <div class="col-xl-3 col-lg-4 col-md-6 wow fadeInUp" data-wow-delay=".8s">
-            <div class="counter-items border-none">
-              <div class="icon">
-                <img src="/picture/icon-42.svg" alt="img" />
-              </div>
-              <div class="content">
-                <h2>
-                  <span class="count">6,561</span>
-                  +
-                </h2>
-                <p>Students Enroll</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-  <section class="team-section-3 fix section-padding pt-1 mt-60">
-    <div class="tree-shape float-bob-x">
-      <img src="/picture/tree-shape.png" alt="shape-img" />
-    </div>
-    <div class="right-shape">
-      <img src="/picture/right.png" alt="shape-img" />
-    </div>
-    <div class="bee-shape float-bob-y">
-      <img src="/picture/bee.png" alt="shape-img" />
-    </div>
-    <div class="container">
-      <div class="section-title-area">
-        <div class="section-title mt-60">
-          <span class="wow fadeInUp">Our Experts</span>
-          <h2 class="wow fadeInUp" data-wow-delay=".3s">Our Expert Instructors</h2>
-        </div>
-        <div class="array-button wow fadeInUp" data-wow-delay=".5s">
-          <button class="array-prev bor-1"><i class="fal fa-arrow-left"></i></button>
-          <button class="array-next"><i class="fal fa-arrow-right"></i></button>
+  <section>
+    <div class="main-container">
+        <div class="title-section">
+            <h3>品牌文化</h3>
+            <h2>我们努力践行的文化</h2>
         </div>
-      </div>
-      <div class="swiper team-slider">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide">
-            <div class="team-items">
-              <div class="team-image">
-                <div class="shape-img">
-                  <img src="/picture/team-shape.png" alt="img" />
-                </div>
-                <img src="/picture/01.jpg" alt="team-img" />
-                <div class="social-profile">
-                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
-                  <ul>
-                    <li>
-                      <a href="#"><i class="fab fa-facebook-f"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div class="team-content">
-                <h3>
-                  <a href="team-details.html">Brooklyn Simmons</a>
-                </h3>
-                <p>Instructors</p>
-              </div>
-            </div>
-          </div>
-          <div class="swiper-slide">
-            <div class="team-items">
-              <div class="team-image">
-                <div class="shape-img">
-                  <img src="/picture/team-shape.png" alt="img" />
-                </div>
-                <img src="/picture/02.jpg" alt="team-img" />
-                <div class="social-profile">
-                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
-                  <ul>
-                    <li>
-                      <a href="#"><i class="fab fa-facebook-f"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div class="team-content">
-                <h3>
-                  <a href="team-details.html">Leslie Alexander</a>
-                </h3>
-                <p>Instructors</p>
-              </div>
+        <div class="card-container">
+            <div class="cloud-card orange-gradient">
+                <h3>使命</h3>
+                <p>以创新为动力,推动教育科技发展,打造卓越的在线学习平台,让知识传播更加便捷高效</p>
             </div>
-          </div>
-          <div class="swiper-slide">
-            <div class="team-items">
-              <div class="team-image">
-                <div class="shape-img">
-                  <img src="/picture/team-shape.png" alt="img" />
-                </div>
-                <img src="/picture/03.jpg" alt="team-img" />
-                <div class="social-profile">
-                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
-                  <ul>
-                    <li>
-                      <a href="#"><i class="fab fa-facebook-f"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div class="team-content">
-                <h3>
-                  <a href="team-details.html">Ronald Richards</a>
-                </h3>
-                <p>Instructors</p>
-              </div>
+            <div class="cloud-card teal-gradient">
+                <h3>愿景</h3>
+                <p>打造专业优质的教育生态系统,让每个人都能享受到优质的教育资源</p>
             </div>
-          </div>
-          <div class="swiper-slide">
-            <div class="team-items">
-              <div class="team-image">
-                <div class="shape-img">
-                  <img src="/picture/team-shape.png" alt="img" />
-                </div>
-                <img src="/picture/04.jpg" alt="team-img" />
-                <div class="social-profile">
-                  <span class="plus-btn"><i class="fas fa-share-alt"></i></span>
-                  <ul>
-                    <li>
-                      <a href="#"><i class="fab fa-facebook-f"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fa-brands fa-instagram"></i></a>
-                    </li>
-                    <li>
-                      <a href="#"><i class="fab fa-linkedin-in"></i></a>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-              <div class="team-content">
-                <h3>
-                  <a href="team-details.html">Kristin Watson</a>
-                </h3>
-                <p>Instructors</p>
-              </div>
+            <div class="cloud-card slate-gradient">
+                <h3>价值观</h3>
+                <p>传承创新中华文化精髓,培养具有全球视野的新时代人才</p>
             </div>
-          </div>
         </div>
-      </div>
     </div>
   </section>
-  <section class="testimonial-section-2 section-padding pt-0">
+  <section>
+    <div class="min-h-screen bg-gray-50">
     <div class="container">
-      <div class="testimonial-wrapper style-2 section-padding">
-        <div class="shape-1">
-          <img src="/picture/shape-11.png" alt="shape-img" />
-        </div>
-        <div class="shape-2">
-          <img src="/picture/shape-2.png" alt="shape-img" />
-        </div>
-        <div class="testimonial-bg"></div>
-        <div class="section-title text-center">
-          <span class="wow fadeInUp">Testimonials</span>
-          <h2 class="wow fadeInUp" data-wow-delay=".3s">What clients say</h2>
-        </div>
-        <div class="swiper testimonial-slider-2">
-          <div class="swiper-wrapper">
-            <div class="swiper-slide">
-              <div class="testimonial-box-items">
-                <p>
-                  Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
-                  dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
-                  elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
-                  sapien ac elementum
-                </p>
-                <div class="client-info">
-                  <img src="/picture/author1.png" alt="img" />
-                  <div class="content">
-                    <h5>Ronald Richards</h5>
-                    <p>Co, Founder</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="testimonial-box-items">
-                <p>
-                  Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
-                  dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
-                  elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
-                  sapien ac elementum
-                </p>
-                <div class="client-info">
-                  <img src="/picture/author1.png" alt="img" />
-                  <div class="content">
-                    <h5>Ronald Richards</h5>
-                    <p>Co, Founder</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="swiper-slide">
-              <div class="testimonial-box-items">
-                <p>
-                  Nunc vulputate tempor leo quis accumsan Sed vel mauris bibendum dignissim nisl a
-                  dapibus tortor Fusce sagittis est fringilla auctor eros vitae aliquam mauris Ut et
-                  elit consectetur porta felis ac interdum dolor Maecenas neque mi ullamcorper id
-                  sapien ac elementum
-                </p>
-                <div class="client-info">
-                  <img src="/picture/author1.png" alt="img" />
-                  <div class="content">
-                    <h5>Ronald Richards</h5>
-                    <p>Co, Founder</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="array-button">
-          <button class="array-prev"><i class="fal fa-arrow-left"></i></button>
-          <button class="array-next"><i class="fal fa-arrow-right"></i></button>
-        </div>
+      <!-- 标题区域 -->
+      <div class="title-area">
+        <h2>教育理念与价值观</h2>
+        <p>始终坚持以学生为中心,为每一位学子打造优质教育体验</p>
       </div>
-    </div>
-  </section>
-  <div class="instagram-banner fix section-padding pt-0">
-    <div class="instagram-wrapper">
-      <h3 class="text-center wow fadeInUp" data-wow-delay=".3s">Follow Instagram</h3>
-      <div class="swiper instagram-banner-slider">
-        <div class="swiper-wrapper">
-          <div class="swiper-slide">
-            <div class="instagram-banner-items">
-              <div class="banner-image">
-                <img src="/picture/012.jpg" alt="insta-img" />
-                <a href="p9wfc14694.html" class="icon">
-                  <i class="fa-brands fa-instagram"></i>
-                </a>
-              </div>
+
+      <!-- 内容区域 -->
+      <div class="content-area">
+        <!-- 第一块内容 -->
+        <div class="content-item">
+          <div class="text-content">
+            <h3>专业教师团队</h3>
+            <div class="text-box">
+              <p>
+                拥有丰富的教学经验和专业背景,90% 以上的教师拥有研究生学历。始终坚持高标准的教学质量,为学生提供最优质的教育资源。
+              </p>
             </div>
           </div>
-          <div class="swiper-slide">
-            <div class="instagram-banner-items">
-              <div class="banner-image">
-                <img src="/picture/022.jpg" alt="insta-img" />
-                <a href="p9wfc14694.html" class="icon">
-                  <i class="fa-brands fa-instagram"></i>
-                </a>
-              </div>
-            </div>
+          <div class="image-content">
+            <img src="/aboutImg/Frame 121.svg" style="right:0" alt="专业教师团队" />
           </div>
-          <div class="swiper-slide">
-            <div class="instagram-banner-items">
-              <div class="banner-image">
-                <img src="/picture/032.jpg" alt="insta-img" />
-                <a href="p9wfc14694.html" class="icon">
-                  <i class="fa-brands fa-instagram"></i>
-                </a>
-              </div>
+        </div>
+
+        <!-- 第二块内容 -->
+        <div class="content-item reverse">
+          <div class="text-content">
+            <h3>特色教学方式</h3>
+            <div class="text-box">
+              <p>
+                将传统文化与现代教育相结合,采用互动式教学模式。通过丰富多样的课程设计,激发学生学习兴趣,培养全面发展的人才。
+              </p>
             </div>
           </div>
-          <div class="swiper-slide">
-            <div class="instagram-banner-items">
-              <div class="banner-image">
-                <img src="/picture/041.jpg" alt="insta-img" />
-                <a href="p9wfc14694.html" class="icon">
-                  <i class="fa-brands fa-instagram"></i>
-                </a>
-              </div>
-            </div>
+          <div class="image-content">
+            <img src="/aboutImg/software-hero-img.svg" style="left:0" alt="特色教学方式" />
           </div>
-          <div class="swiper-slide">
-            <div class="instagram-banner-items">
-              <div class="banner-image">
-                <img src="/picture/05.jpg" alt="insta-img" />
-                <a href="p9wfc14694.html" class="icon">
-                  <i class="fa-brands fa-instagram"></i>
-                </a>
-              </div>
+        </div>
+
+        <!-- 第三块内容 -->
+        <div class="content-item">
+          <div class="text-content">
+            <h3>个性化服务</h3>
+            <div class="text-box">
+              <p>
+                提供贴心的教育服务支持,全方位关注每位学生的成长。我们致力于打造温馨舒适的学习环境,让每个孩子都能快乐学习。
+              </p>
             </div>
           </div>
-          <div class="swiper-slide">
-            <div class="instagram-banner-items">
-              <div class="banner-image">
-                <img src="/picture/06.jpg" alt="insta-img" />
-                <a href="p9wfc14694.html" class="icon">
-                  <i class="fa-brands fa-instagram"></i>
-                </a>
-              </div>
-            </div>
+          <div class="image-content">
+            <img src="/aboutImg/bg.svg" style="right:0" alt="个性化服务" />
           </div>
         </div>
       </div>
     </div>
   </div>
+  </section>
   <FooterSection></FooterSection>
 </template>
 <script setup></script>
+<style>
+/* 整体容器样式 */
+.main-container {
+    min-height: 1024px;
+    width: 1440px;
+    margin: 0 auto;
+    background-color: white;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+}
+
+/* 标题部分样式 */
+.title-section {
+    text-align: center;
+    margin-bottom: 4rem;
+}
+
+.title-section h3 {
+    color: #6b7280;
+    font-size: 1.125rem;
+    margin-bottom: 1rem;
+}
+
+.title-section h2 {
+    font-size: 1.875rem;
+    font-weight: bold;
+    color: #1f2937;
+}
+
+/* 卡片容器样式 */
+.card-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+}
+
+/* 云卡片通用样式 */
+.cloud-card {
+    position: relative;
+    width: 360px;
+    min-height: 240px;
+    padding: 2.5rem;
+    color: white;
+    border-radius: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
+}
+
+
+.cloud-card h3 {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+.cloud-card p {
+    font-size: 1rem;
+    line-height: 1.625;
+}
+
+/* 不同颜色渐变样式 */
+.orange-gradient {
+    background: linear-gradient(to bottom right, #fdba74, #fb923c);
+}
+
+.teal-gradient {
+    background: linear-gradient(to bottom right, #2dd4bf, #14b8a6);
+}
+
+.slate-gradient {
+    background: linear-gradient(to bottom right, #475569, #334155);
+}    
+
+
+.min-h-screen {
+  min-height: 100vh;
+}
+
+.bg-gray-50 {
+  background-color: #f9fafb;
+}
+
+.container {
+  min-height: 1024px;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 0 1rem;
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.title-area {
+  text-align: center;
+  margin-bottom: 5rem;
+}
+
+.title-area h2 {
+  font-size: 1.875rem;
+  font-weight: bold;
+  color: #1f2937;
+  margin-bottom: 1rem;
+}
+
+.title-area p {
+  color: #4b5563;
+}
+
+.content-area {
+  display: flex;
+  flex-direction: column;
+  /* gap: 6rem; */
+}
+
+.content-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.content-item.reverse {
+  flex-direction: row-reverse;
+}
+
+.text-content {
+  width: 50%;
+}
+
+.content-item .text-content {
+  padding-right: 3rem;
+}
+
+.content-item.reverse .text-content {
+  padding-left: 3rem;
+  padding-right: 0;
+}
+
+.text-content h3 {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #1f2937;
+  margin-bottom: 1.5rem;
+}
+
+.text-box {
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+}
+
+.text-box p {
+  color: #4b5563;
+  line-height: 1.625;
+}
+
+.image-content {
+  width: 50%;
+  position: relative;
+  padding-top: 75%;
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.image-content img {
+  position: absolute;
+  top: 50%;
+
+  width: 50%;
+  height: 50%;
+  object-fit: cover;
+}
+</style>

File diff suppressed because it is too large
+ 10 - 0
public/aboutImg/Container1.svg


File diff suppressed because it is too large
+ 15 - 0
public/aboutImg/Container2.svg


File diff suppressed because it is too large
+ 12 - 0
public/aboutImg/Frame 121.svg


File diff suppressed because it is too large
+ 3 - 0
public/aboutImg/Overlay1.svg


File diff suppressed because it is too large
+ 3 - 0
public/aboutImg/Overlay2.svg


File diff suppressed because it is too large
+ 3 - 0
public/aboutImg/Overlay3.svg


File diff suppressed because it is too large
+ 3 - 0
public/aboutImg/Overlay4.svg


File diff suppressed because it is too large
+ 12 - 0
public/aboutImg/bg.svg


File diff suppressed because it is too large
+ 7 - 0
public/aboutImg/software-hero-img.svg


File diff suppressed because it is too large
+ 0 - 0
public/css/tailwind.min.css


Some files were not shown because too many files changed in this diff