proxio 初版

themes/proxio/components/About.js

@@ -1,188 +0,0 @@
-/* eslint-disable @next/next/no-img-element */
-/* eslint-disable react/no-unescaped-entities */
-import { siteConfig } from '@/lib/config'
-import Link from 'next/link'
-
-/**
- * 首页的关于模块
- */
-export const About = () => {
-  return (
-    <>
-      {/* <!-- ====== About Section Start --> */}
-      <section
-        id='about'
-        className='bg-gray-1 pb-8 pt-20 dark:bg-dark-2 lg:pb-[70px] lg:pt-[120px]'>
-        <div className='container'>
-          <div className='wow fadeInUp' data-wow-delay='.2s'>
-            <div className='-mx-4 flex flex-wrap items-center'>
-              {/* 左侧的文字说明板块 */}
-              <div className='w-full px-4 lg:w-1/2'>
-                <div className='mb-12 max-w-[540px] lg:mb-0'>
-                  <h2 className='mb-5 text-3xl font-bold leading-tight text-dark dark:text-white sm:text-[40px] sm:leading-[1.2]'>
-                    {siteConfig('PROXIO_CAREER_TITLE')}
-                  </h2>
-                  <p
-                    className='mb-10 text-base leading-relaxed text-body-color dark:text-dark-6'
-                    dangerouslySetInnerHTML={{
-                      __html: siteConfig('PROXIO_CAREER_TEXT')
-                    }}></p>
-
-                  <Link
-                    href={siteConfig('PROXIO_CAREER_BUTTON_URL', '')}
-                    className='inline-flex items-center justify-center rounded-md border border-primary bg-primary px-7 py-3 text-center text-base font-medium text-white hover:border-blue-dark hover:bg-blue-dark'>
-                    {siteConfig('PROXIO_CAREER_BUTTON_TEXT')}
-                  </Link>
-                </div>
-              </div>
-
-              {/* 右侧的图片海报 */}
-              <div className='w-full px-4 lg:w-1/2'>
-                <div className='-mx-2 flex flex-wrap sm:-mx-4 lg:-mx-2 xl:-mx-4'>
-                  <div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
-                    <div className='mb-4 sm:mb-8 sm:h-[400px] md:h-[540px] lg:h-[400px] xl:h-[500px]'>
-                      <img
-                        src={siteConfig('PROXIO_CAREER_IMAGE_1')}
-                        alt='about image'
-                        className='h-full w-full object-cover object-center'
-                      />
-                    </div>
-                  </div>
-
-                  <div className='w-full px-2 sm:w-1/2 sm:px-4 lg:px-2 xl:px-4'>
-                    <div className='mb-4 sm:mb-8 sm:h-[220px] md:h-[346px] lg:mb-4 lg:h-[225px] xl:mb-8 xl:h-[310px]'>
-                      <img
-                        src={siteConfig('PROXIO_CAREER_IMAGE_2')}
-                        alt='about image'
-                        className='h-full w-full object-cover object-center'
-                      />
-                    </div>
-
-                    <div className='relative z-10 mb-4 flex items-center justify-center overflow-hidden bg-primary px-6 py-12 sm:mb-8 sm:h-[160px] sm:p-5 lg:mb-4 xl:mb-8'>
-                      <div>
-                        <span className='block text-5xl font-extrabold text-white'>
-                          {siteConfig('PROXIO_CAREER_TIPS_1')}
-                        </span>
-                        <span className='block text-base font-semibold text-white'>
-                          {siteConfig('PROXIO_CAREER_TIPS_2')}
-                        </span>
-                        <span className='block text-base font-medium text-white text-opacity-70'>
-                          {siteConfig('PROXIO_CAREER_TIPS_3')}
-                        </span>
-                      </div>
-                      <div>
-                        <span className='absolute left-0 top-0 -z-10'>
-                          <svg
-                            width='106'
-                            height='144'
-                            viewBox='0 0 106 144'
-                            fill='none'
-                            xmlns='http://www.w3.org/2000/svg'>
-                            <rect
-                              opacity='0.1'
-                              x='-67'
-                              y='47.127'
-                              width='113.378'
-                              height='131.304'
-                              transform='rotate(-42.8643 -67 47.127)'
-                              fill='url(#paint0_linear_1416_214)'
-                            />
-                            <defs>
-                              <linearGradient
-                                id='paint0_linear_1416_214'
-                                x1='-10.3111'
-                                y1='47.127'
-                                x2='-10.3111'
-                                y2='178.431'
-                                gradientUnits='userSpaceOnUse'>
-                                <stop stopColor='white' />
-                                <stop
-                                  offset='1'
-                                  stopColor='white'
-                                  stopOpacity='0'
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </span>
-                        <span className='absolute right-0 top-0 -z-10'>
-                          <svg
-                            width='130'
-                            height='97'
-                            viewBox='0 0 130 97'
-                            fill='none'
-                            xmlns='http://www.w3.org/2000/svg'>
-                            <rect
-                              opacity='0.1'
-                              x='0.86792'
-                              y='-6.67725'
-                              width='155.563'
-                              height='140.614'
-                              transform='rotate(-42.8643 0.86792 -6.67725)'
-                              fill='url(#paint0_linear_1416_215)'
-                            />
-                            <defs>
-                              <linearGradient
-                                id='paint0_linear_1416_215'
-                                x1='78.6495'
-                                y1='-6.67725'
-                                x2='78.6495'
-                                y2='133.937'
-                                gradientUnits='userSpaceOnUse'>
-                                <stop stopColor='white' />
-                                <stop
-                                  offset='1'
-                                  stopColor='white'
-                                  stopOpacity='0'
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </span>
-                        <span className='absolute bottom-0 right-0 -z-10'>
-                          <svg
-                            width='175'
-                            height='104'
-                            viewBox='0 0 175 104'
-                            fill='none'
-                            xmlns='http://www.w3.org/2000/svg'>
-                            <rect
-                              opacity='0.1'
-                              x='175.011'
-                              y='108.611'
-                              width='101.246'
-                              height='148.179'
-                              transform='rotate(137.136 175.011 108.611)'
-                              fill='url(#paint0_linear_1416_216)'
-                            />
-                            <defs>
-                              <linearGradient
-                                id='paint0_linear_1416_216'
-                                x1='225.634'
-                                y1='108.611'
-                                x2='225.634'
-                                y2='256.79'
-                                gradientUnits='userSpaceOnUse'>
-                                <stop stopColor='white' />
-                                <stop
-                                  offset='1'
-                                  stopColor='white'
-                                  stopOpacity='0'
-                                />
-                              </linearGradient>
-                            </defs>
-                          </svg>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-      {/* <!-- ====== About Section End --> */}
-    </>
-  )
-}

themes/proxio/components/Blog.js

@@ -12,33 +12,34 @@ export const Blog = ({ posts }) => {
   return (
     <>
       {/* <!-- ====== Blog Section Start --> */}
-      <section className='bg-white pb-10 pt-20 dark:bg-dark lg:pb-20 lg:pt-[120px]'>
+      <section className='bg-white pt-20 dark:bg-dark lg:pt-[120px]'>
         <div className='container mx-auto'>
           {/* 区块标题文字 */}
           <div className='-mx-4 flex flex-wrap justify-center wow fadeInUp' data-wow-delay='.2s'>
-            <div className='w-full px-4'>
-              <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
-                <span className='mb-2 block text-lg font-semibold text-primary'>
+            <div className='w-full px-4 py-4'>
+              <div className='mx-auto max-w-[485px] text-center space-y-4'>
+                <span className='px-3 py-0.5 rounded-2xl mb-2 dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
                   {siteConfig('PROXIO_BLOG_TITLE')}
                 </span>
-                <h2 className='mb-4 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+
+                <h2 className='text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
                   {siteConfig('PROXIO_BLOG_TEXT_1')}
                 </h2>
               </div>
             </div>
           </div>
           {/* 博客列表 此处优先展示3片文章 */}
-          <div className='-mx-4 grid grid-cols-2'>
+          <div className='-mx-4 grid md:grid-cols-2 grid-cols-1'>
             {posts?.map((item, index) => {
               return (
                 <div key={index} className='w-full px-4'>
                   <div
                     className='wow fadeInUp group mb-10 relative overflow-hidden'
                     data-wow-delay='.1s'>
-                    {/* 图片部分 */}
                     <div className='relative rounded-xl border overflow-hidden shadow-md dark:border-gray-700 dark:bg-gray-800'>
                       {item.pageCoverThumbnail && (
                         <Link href={item?.href} className='block'>
+                          {/* 图片半透明 */}
                           <LazyImage
                             src={item.pageCoverThumbnail}
                             alt={item.title}
@@ -47,11 +48,16 @@ export const Blog = ({ posts }) => {
                         </Link>
                       )}
                       {/* 遮罩层，仅覆盖图片部分 */}
-                      <div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-opacity duration-500 group-hover:opacity-0'></div>
+                      <div className='absolute inset-0 bg-gray-100 dark:bg-hexo-black-gray transition-all duration-500 group-hover:opacity-50 group-hover:bg-black' />
+                      {/* 鼠标悬停时显示的文字内容 */}
+                      <div className='absolute inset-0 flex items-center justify-center group-hover:scale-110 duration-200 group-hover:text-white'>
+                        <p className='max-w-[370px] text-base text-body-color dark:text-dark-6 flex items-center justify-center duration-200 group-hover:text-white '>
+                          {item.summary}
+                        </p></div>
                     </div>
                     {/* 内容部分 */}
                     <div className='relative z-10 p-4'>
-                      <span className='mb-6 inline-block bg-primary px-4 py-0.5 text-center text-xs font-medium leading-loose text-white'>
+                      <span className='inline-blocktext-center text-xs font-medium leading-loose text-white'>
                         {item.publishDay}
                       </span>
                       <h3>
@@ -61,9 +67,7 @@ export const Blog = ({ posts }) => {
                           {item.title}
                         </Link>
                       </h3>
-                      <p className='max-w-[370px] text-base text-body-color dark:text-dark-6'>
-                        {item.summary}
-                      </p>
+
                     </div>
                   </div>
                 </div>

themes/proxio/components/Brand.js

@@ -1,39 +1,71 @@
 /* eslint-disable @next/next/no-img-element */
 
 import { siteConfig } from '@/lib/config'
+import { useEffect, useRef } from 'react'
 
 /**
- * 合作伙伴
+ * 合作伙伴滚动组件
  * @returns
  */
 export const Brand = () => {
-  const brands = siteConfig('PROXIO_BRANDS')
+  const brands = siteConfig('PROXIO_BRANDS', [])
+
+  const scrollContainerRef = useRef(null)
+
+  useEffect(() => {
+    const scrollContainer = scrollContainerRef.current
+
+    let scrollAmount = 0
+    const scrollSpeed = 1 // 滚动速度
+
+    const scroll = () => {
+      if (scrollContainer) {
+        scrollAmount += scrollSpeed
+        scrollContainer.scrollLeft = scrollAmount
+
+        // 如果滚动到内容的一半，立即重置滚动位置
+        if (scrollAmount >= scrollContainer.scrollWidth / 2) {
+          scrollAmount = 0
+        }
+      }
+      requestAnimationFrame(scroll)
+    }
+
+    scroll()
+
+    return () => cancelAnimationFrame(scroll)
+  }, [])
+
   return (
     <>
       {/* <!-- ====== Brands Section Start --> */}
-      <section className='py-20 dark:bg-dark'>
-        <div className='container px-4'>
-          <div className='-mx-4 flex flex-wrap items-center justify-center gap-8 xl:gap-11'>
-            {brands?.map((item, index) => {
-              return (
-                <a key={index} href={item.URL}>
-                  <img
-                    src={item.IMAGE}
-                    alt={item.TITLE}
-                    className='dark:hidden'
-                  />
-                  <img
-                    src={item.IMAGE_WHITE}
-                    alt={item.TITLE}
-                    className='hidden dark:block'
-                  />
-                </a>
-              )
-            })}
+      <section id='brand' className='py-12 dark:bg-dark'>
+        <div
+          className='overflow-hidden whitespace-nowrap container mx-auto p-3 border rounded-2xl border-gray-200 dark:border-[#333333]'
+          ref={scrollContainerRef}
+        >
+          <div className='inline-block'>
+            {brands?.map((item, index) => (
+              <span
+                key={index}
+                className='mx-8 text-lg font-semibold text-gray-700 dark:text-gray-300'
+              >
+                {item}
+              </span>
+            ))}
+            {/* 克隆一份内容，用于无缝滚动 */}
+            {brands.map((item, index) => (
+              <span
+                key={`clone-${index}`}
+                className='mx-8 text-lg font-semibold text-gray-700 dark:text-gray-300'
+              >
+                {item}
+              </span>
+            ))}
           </div>
         </div>
       </section>
       {/* <!-- ====== Brands Section End --> */}
     </>
   )
-}
+}

themes/proxio/components/CTA.js

@@ -13,14 +13,20 @@ export const CTA = () => {
   return (
     <>
       {/* <!-- ====== CTA Section Start --> */}
-      <section className='relative z-10 overflow-hidden bg-gray-1 dark:bg-dark-2 py-20 lg:py-[115px]'>
+      <section className='relative z-10 overflow-hidden bg-gray-1 dark:bg-black py-20 lg:py-[115px]'>
         <div className='container mx-auto'>
           <div className='relative overflow-hidden'>
             <div className='-mx-4 flex flex-wrap items-stretch'>
               <div className='w-full px-4 mb-2'>
                 <div className='mx-auto max-w-[570px] text-center'>
+
+                  <div>
+                    <span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
+                      {siteConfig('PROXIO_CTA_TITLE')}
+                    </span>
+                  </div>
                   <h2 className='mb-2.5 text-3xl font-bold dark:text-white md:text-[38px] md:leading-[1.44]'>
-                    <span>{siteConfig('PROXIO_CTA_TITLE')}</span>
+
                     <span className='text-3xl font-normal md:text-[40px]'>
                       {siteConfig('PROXIO_CTA_TITLE_2')}
                     </span>
@@ -42,69 +48,7 @@ export const CTA = () => {
             </div>
           </div>
         </div>
-        <div>
-          <span className='absolute left-0 top-0'>
-            <svg
-              width='495'
-              height='470'
-              viewBox='0 0 495 470'
-              fill='none'
-              xmlns='http://www.w3.org/2000/svg'>
-              <circle
-                cx='55'
-                cy='442'
-                r='138'
-                stroke='white'
-                stroke-opacity='0.04'
-                stroke-width='50'
-              />
-              <circle
-                cx='446'
-                r='39'
-                stroke='white'
-                stroke-opacity='0.04'
-                stroke-width='20'
-              />
-              <path
-                d='M245.406 137.609L233.985 94.9852L276.609 106.406L245.406 137.609Z'
-                stroke='white'
-                stroke-opacity='0.08'
-                stroke-width='12'
-              />
-            </svg>
-          </span>
-          <span className='absolute bottom-0 right-0'>
-            <svg
-              width='493'
-              height='470'
-              viewBox='0 0 493 470'
-              fill='none'
-              xmlns='http://www.w3.org/2000/svg'>
-              <circle
-                cx='462'
-                cy='5'
-                r='138'
-                stroke='white'
-                stroke-opacity='0.04'
-                stroke-width='50'
-              />
-              <circle
-                cx='49'
-                cy='470'
-                r='39'
-                stroke='white'
-                stroke-opacity='0.04'
-                stroke-width='20'
-              />
-              <path
-                d='M222.393 226.701L272.808 213.192L259.299 263.607L222.393 226.701Z'
-                stroke='white'
-                stroke-opacity='0.06'
-                stroke-width='13'
-              />
-            </svg>
-          </span>
-        </div>
+
       </section>
       {/* <!-- ====== CTA Section End --> */}
     </>

themes/proxio/components/Career.js

@@ -0,0 +1,62 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable react/no-unescaped-entities */
+import { siteConfig } from '@/lib/config'
+import Link from 'next/link'
+
+/**
+ * 首页的生涯模块
+ */
+export const Career = () => {
+  const Careers = siteConfig('PROXIO_CAREERS')
+  return (
+    <>
+      {/* <!-- ====== About Section Start --> */}
+      <section
+        id='about'
+        className='bg-gray-1 pb-8 pt-20 dark:bg-black lg:pb-[70px] lg:pt-[120px]'>
+        <div className='container'>
+          <div className='wow fadeInUp' data-wow-delay='.2s'>
+            {/* 左侧的文字说明板块 */}
+            <div className='w-full px-4 lg:w-1/2'>
+              <div className='mb-12 max-w-[540px] lg:mb-0'>
+                <span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
+                  {siteConfig('PROXIO_CAREER_TITLE')}
+                </span>
+                <h2
+                  className='mb-10 text-3xl font-semibold leading-relaxed dark:text-dark-6'
+                >{siteConfig('PROXIO_CAREER_TEXT')}</h2>
+              </div>
+            </div>
+
+            <div className='-mx-4 flex flex-wrap items-center px-4'>
+              {Careers?.map((item, index) => {
+                return <CareerItem key={index} {...item} />
+              })}
+            </div>
+          </div>
+        </div>
+      </section>
+      {/* <!-- ====== About Section End --> */}
+    </>
+  )
+}
+
+
+// 生涯内容
+const CareerItem = ({ title, bio, text }) => {
+  return <div className='w-full border-b mb-6 border-gray-200 dark:border-[#333333] px-4 flex justify-between wow fadeInUp'>
+    <div className='flex item-start flex-col items-start w-full' data-wow-delay='.1s'>
+      <h4 className='mb-3 text-xl text-dark dark:text-white'>
+        <span className='font-bold mr-4'>{title}</span>
+        <span className='text-sm'>{bio}</span>
+      </h4>
+
+    </div>
+    <div className='w-full'>
+      <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
+        {text}
+      </p>
+    </div>
+  </div>
+
+}

themes/proxio/components/FAQ.js

@@ -1,115 +1,80 @@
 import { siteConfig } from '@/lib/config'
-import { useEffect } from 'react'
+import { useState } from 'react'
 import { SVGCircleBG } from './svg/SVGCircleBG'
-import { SVGQuestion } from './svg/SVGQuestion'
 
+/**
+ * 问答
+ * @returns
+ */
 export const FAQ = () => {
-  useEffect(() => {
-    // ===== Faq accordion
-    const faqs = document.querySelectorAll('.single-faq')
-    faqs.forEach(el => {
-      el.querySelector('.faq-btn').addEventListener('click', () => {
-        el.querySelector('.icon').classList.toggle('rotate-180')
-        el.querySelector('.faq-content').classList.toggle('hidden')
-      })
-    })
-  })
+  const FAQS = siteConfig('PROXIO_FAQS', [])
+
+  const [openIndex, setOpenIndex] = useState(null)
+
+  const toggleFAQ = (index) => {
+    setOpenIndex(openIndex === index ? null : index)
+  }
+
   return (
     <>
       {/* <!-- ====== FAQ Section Start --> */}
-      <section className='relative overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]'>
-        <div className='container mx-auto'>
-          <div className='-mx-4 flex flex-wrap'>
-            <div className='w-full px-4'>
-              <div className='mx-auto mb-[60px] max-w-[520px] text-center'>
-                <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('PROXIO_FAQ_TITLE')}
-                </span>
-                <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
+      <section className="relative overflow-hidden bg-white pb-8 pt-20 dark:bg-dark lg:pb-[50px] lg:pt-[120px]">
+        <div className="max-w-2xl mx-auto">
+          <div className="-mx-4 flex flex-wrap">
+            <div className="w-full px-4">
+              <div className="mx-auto mb-[60px] max-w-[520px] text-center flex flex-col space-y-4">
+                <div>
+                  <span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
+                    {siteConfig('PROXIO_FAQ_TITLE')}
+                  </span>
+                </div>
+                <h2 className="mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]">
                   {siteConfig('PROXIO_FAQ_TEXT_1')}
                 </h2>
-                <p className='mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6'>
+                <p className="mx-auto max-w-[485px] text-base text-body-color dark:text-dark-6">
                   {siteConfig('PROXIO_FAQ_TEXT_2')}
                 </p>
               </div>
             </div>
           </div>
 
-          <div className='-mx-4 flex flex-wrap'>
-            <div className='w-full px-4 lg:w-1/2'>
-              <div className='mb-12 flex lg:mb-[70px]'>
-                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
-                  <SVGQuestion />
-                </div>
-                <div className='w-full'>
-                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
-                    {siteConfig('PROXIO_FAQ_1_QUESTION')}
-                  </h3>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: siteConfig('PROXIO_FAQ_1_ANSWER')
-                    }}
-                    className='text-base text-body-color dark:text-dark-6'></p>
+          {/* FAQ 列表 */}
+          <div className="-mx-4 flex flex-wrap space-y-4">
+            {FAQS?.map((faq, index) => (
+              <div
+                key={index}
+                className="w-full px-4 cursor-pointer"
+                onClick={() => toggleFAQ(index)}
+              >
+                <div className="p-4 border rounded-lg dark:bg-[#0E0E0E] bg-white dark:bg-dark-1 border-gray-200 dark:border-[#333333]">
+                  {/* 问题部分 */}
+                  <div className="flex justify-between items-center">
+                    <h3 className="text-lg font-semibold text-dark dark:text-white">
+                      {faq.q}
+                    </h3>
+                    <i
+                      className={`fas fa-chevron-down text-gray-500 dark:text-gray-300 transition-transform duration-300 ${openIndex === index ? 'rotate-180' : ''
+                        }`}
+                    />
+                  </div>
+                  {/* 答案部分 */}
+                  <div
+                    className={`mt-4 text-base text-body-color dark:text-dark-6 transition-all duration-300 overflow-hidden ${openIndex === index ? 'max-h-screen' : 'max-h-0'
+                      }`}
+                    dangerouslySetInnerHTML={{ __html: faq.a }}
+                  ></div>
                 </div>
               </div>
-              <div className='mb-12 flex lg:mb-[70px]'>
-                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
-                  <SVGQuestion />
-                </div>
-                <div className='w-full'>
-                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
-                    {siteConfig('PROXIO_FAQ_2_QUESTION')}
-                  </h3>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: siteConfig('PROXIO_FAQ_2_ANSWER')
-                    }}
-                    className='text-base text-body-color dark:text-dark-6'></p>
-                </div>
-              </div>
-            </div>
-
-            <div className='w-full px-4 lg:w-1/2'>
-              <div className='mb-12 flex lg:mb-[70px]'>
-                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
-                  <SVGQuestion />
-                </div>
-                <div className='w-full'>
-                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
-                    {siteConfig('PROXIO_FAQ_3_QUESTION')}
-                  </h3>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: siteConfig('PROXIO_FAQ_3_ANSWER')
-                    }}
-                    className='text-base text-body-color dark:text-dark-6'></p>
-                </div>
-              </div>
-              <div className='mb-12 flex lg:mb-[70px]'>
-                <div className='mr-4 flex h-[50px] w-full max-w-[50px] items-center justify-center rounded-xl bg-primary text-white sm:mr-6 sm:h-[60px] sm:max-w-[60px]'>
-                  <SVGQuestion />
-                </div>
-                <div className='w-full'>
-                  <h3 className='mb-6 text-xl font-semibold text-dark dark:text-white sm:text-2xl lg:text-xl xl:text-2xl'>
-                    {siteConfig('PROXIO_FAQ_4_QUESTION')}
-                  </h3>
-                  <p
-                    dangerouslySetInnerHTML={{
-                      __html: siteConfig('PROXIO_FAQ_4_ANSWER')
-                    }}
-                    className='text-base text-body-color dark:text-dark-6'></p>
-                </div>
-              </div>
-            </div>
+            ))}
           </div>
         </div>
 
         {/* 背景图案 */}
         <div>
-          <span className='absolute left-4 top-4 -z-[1]'>
+          <span className="absolute left-4 top-4 -z-[1]">
             <SVGCircleBG />
           </span>
-          <span className='absolute bottom-4 right-4 -z-[1]'>
+          <span className="absolute bottom-4 right-4 -z-[1]">
             <SVGCircleBG />
           </span>
         </div>
@@ -117,4 +82,4 @@ export const FAQ = () => {
       {/* <!-- ====== FAQ Section End --> */}
     </>
   )
-}
+}

themes/proxio/components/Features.js

@@ -12,15 +12,16 @@ export const Features = () => {
   return (
     <>
       {/* <!-- ====== Features Section Start --> */}
-      <section className='pb-8 pt-20 dark:bg-dark lg:pb-[70px] lg:pt-[120px]'>
+      <section className='pb-8 pt-20 dark:bg-dark lg:pb-[40px] lg:pt-[120px]'>
         <div className='container'>
+
           <div className='-mx-4 flex flex-wrap'>
             <div className='w-full px-4'>
-              <div className='mx-auto mb-12 max-w-[485px] text-center lg:mb-[70px]'>
-                <span className='mb-2 block text-lg font-semibold text-primary'>
+              <div className='mx-auto mb-12 lg:mb-[40px]'>
+                <span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
                   {siteConfig('PROXIO_FEATURE_TITLE')}
                 </span>
-                <h2 className='mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
+                <h2 className='my-5 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:text-[40px] md:leading-[1.2]'>
                   {siteConfig('PROXIO_FEATURE_TEXT_1')}
                 </h2>
                 <p className='text-base text-body-color dark:text-dark-6'>
@@ -29,12 +30,15 @@ export const Features = () => {
               </div>
             </div>
           </div>
-          <div className='-mx-4 flex flex-wrap'>
-            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
-              <div className='wow fadeInUp group mb-12' data-wow-delay='.1s'>
-                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
-                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
-                  <SVGGifts />
+          {/* 支持三个特性 */}
+          <div className='-mx-4 flex flex-col md:flex-row gap-4 px-4'>
+
+            <div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
+              <div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
+                <div className='flex w-12 h-12'>
+                  <div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
+                    <i class={siteConfig('PROXIO_FEATURE_1_ICON_CLASS')}></i>
+                  </div>
                 </div>
                 <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
                   {siteConfig('PROXIO_FEATURE_1_TITLE_1')}
@@ -42,18 +46,15 @@ export const Features = () => {
                 <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
                   {siteConfig('PROXIO_FEATURE_1_TEXT_1')}
                 </p>
-                <Link
-                  href={siteConfig('PROXIO_FEATURE_1_BUTTON_URL', '')}
-                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
-                  {siteConfig('PROXIO_FEATURE_1_BUTTON_TEXT')}
-                </Link>
               </div>
             </div>
-            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
-              <div className='wow fadeInUp group mb-12' data-wow-delay='.15s'>
-                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
-                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
-                  <SVGTemplate />
+
+            <div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
+              <div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
+                <div className='flex w-12 h-12'>
+                  <div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
+                    <i class={siteConfig('PROXIO_FEATURE_2_ICON_CLASS')}></i>
+                  </div>
                 </div>
                 <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
                   {siteConfig('PROXIO_FEATURE_2_TITLE_1')}
@@ -61,18 +62,15 @@ export const Features = () => {
                 <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
                   {siteConfig('PROXIO_FEATURE_2_TEXT_1')}
                 </p>
-                <Link
-                  href={siteConfig('PROXIO_FEATURE_2_BUTTON_URL', '')}
-                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
-                  {siteConfig('PROXIO_FEATURE_2_BUTTON_TEXT')}
-                </Link>
               </div>
             </div>
-            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
-              <div className='wow fadeInUp group mb-12' data-wow-delay='.2s'>
-                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
-                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
-                  <SVGDesign />
+
+            <div className='w-full p-6 rounded-xl border border-gray-200 dark:border-[#333333]'>
+              <div className='wow fadeInUp group flex-col space-y-2 flex' data-wow-delay='.1s'>
+                <div className='flex w-12 h-12'>
+                  <div className='w-full flex justify-center items-center rounded-xl border border-gray-200 dark:border-[#333333] dark:text-white'>
+                    <i class={siteConfig('PROXIO_FEATURE_3_ICON_CLASS')}></i>
+                  </div>
                 </div>
                 <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
                   {siteConfig('PROXIO_FEATURE_3_TITLE_1')}
@@ -80,32 +78,18 @@ export const Features = () => {
                 <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
                   {siteConfig('PROXIO_FEATURE_3_TEXT_1')}
                 </p>
-                <Link
-                  href={siteConfig('PROXIO_FEATURE_3_BUTTON_URL', '')}
-                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
-                  {siteConfig('PROXIO_FEATURE_3_BUTTON_TEXT')}
-                </Link>
-              </div>
-            </div>
-            <div className='w-full px-4 md:w-1/2 lg:w-1/4'>
-              <div className='wow fadeInUp group mb-12' data-wow-delay='.25s'>
-                <div className='relative z-10 mb-10 flex h-[70px] w-[70px] items-center justify-center rounded-[14px] bg-primary'>
-                  <span className='absolute left-0 top-0 -z-[1] mb-8 flex h-[70px] w-[70px] rotate-[25deg] items-center justify-center rounded-[14px] bg-primary bg-opacity-20 duration-300 group-hover:rotate-45'></span>
-                  <SVGEssential />
-                </div>
-                <h4 className='mb-3 text-xl font-bold text-dark dark:text-white'>
-                  {siteConfig('PROXIO_FEATURE_4_TITLE_1')}
-                </h4>
-                <p className='mb-8 text-body-color dark:text-dark-6 lg:mb-9'>
-                  {siteConfig('PROXIO_FEATURE_4_TEXT_1')}
-                </p>
-                <Link
-                  href={siteConfig('PROXIO_FEATURE_4_BUTTON_URL', '')}
-                  className='text-base font-medium text-dark hover:text-primary dark:text-white dark:hover:text-primary'>
-                  {siteConfig('PROXIO_FEATURE_3_BUTTON_TEXT')}
-                </Link>
               </div>
             </div>
+
+          </div>
+
+          <div className='mt-8 w-full flex justify-center items-center'>
+            <Link
+              href={siteConfig('PROXIO_FEATURE_BUTTON_URL', '')}
+              className='px-4 py-2 rounded-3xl border dark:border-gray-200 border-[#333333] text-base font-medium text-dark hover:bg-gray-100 dark:text-white dark:hover:bg-white dark:hover:text-black duration-200'>
+              {siteConfig('PROXIO_FEATURE_BUTTON_TEXT')}
+              <i className="pl-4 fa-solid fa-arrow-right"></i>
+            </Link>
           </div>
         </div>
       </section>

themes/proxio/components/Hero.js

@@ -39,7 +39,7 @@ export const Hero = props => {
                     <div className='w-full px-4'>
                         <div
                             className='hero-content wow fadeInUp mx-auto max-w-[780px] text-center'
-                            data-wow-delay='.2s'>
+                            data-wow-delay='0.5s'>
                             {/* 主标题 */}
                             <h1 className='mb-6 text-3xl font-bold leading-snug sm:text-4xl sm:leading-snug lg:text-5xl lg:leading-[1.2]'>
                                 {siteConfig('PROXIO_HERO_TITLE_1', null, config)}

themes/proxio/components/Team.js

@@ -1,41 +1,64 @@
 /* eslint-disable @next/next/no-img-element */
 import { siteConfig } from '@/lib/config'
-import { SVGAvatarBG } from './svg/SVGAvatarBG'
-
+import LazyImage from '@/components/LazyImage'
+/**
+ * 作者团队
+ * @returns 
+ */
 export const Team = () => {
-    const PROXIO_TEAM_ITEMS = siteConfig('PROXIO_TEAM_ITEMS', [])
+    const PROXIO_ABOUT_PHOTO_URL = siteConfig('PROXIO_ABOUT_PHOTO_URL')
     return (
         <>
             {/* <!-- ====== Team Section Start --> */}
             <section
                 id='team'
-                className='overflow-hidden bg-gray-1 pb-12 pt-20 dark:bg-dark-2 lg:pb-[90px] lg:pt-[120px]'>
+                className='overflow-hidden pb-12 pt-20 lg:pb-[90px] lg:pt-[120px]'>
                 <div className='container mx-auto'>
-                    <div className='flex -mx-4 '>
-                        <div className='flex flex-col'>
-                            <div className='mx-auto mb-[60px] max-w-[485px]'>
-                                <span className='mb-2 block text-lg font-semibold text-primary'>
+                    <div className='flex flex-col md:flex-row -mx-4 justify-between'>
+                        {/* 左边肖像图 */}
+                        <div className='mx-6 mb-6 max-w-96 border-gray-200 dark:border-[#333333] dark:bg-dark-1 border rounded-2xl overflow-hidden'>
+                            <LazyImage src={PROXIO_ABOUT_PHOTO_URL} className='object-cover h-full' />
+                        </div>
+                        {/* 右侧文字说明 */}
+                        <div className='flex flex-col px-4 space-y-4 mx-auto justify-between max-w-[485px]'>
+                            <div>
+                                <span className='px-3 py-0.5 mb-2 dark:bg-dark-1 rounded-2xl border border-gray-200 dark:border-[#333333] dark:text-white'>
                                     {siteConfig('PROXIO_ABOUT_TITLE')}
                                 </span>
-                                <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
-                                    {siteConfig('PROXIO_ABOUT_TEXT_1')}
-                                </h2>
-                                <p
-                                    dangerouslySetInnerHTML={{
-                                        __html: siteConfig('PROXIO_ABOUT_TEXT_2')
-                                    }}
-                                    className='text-base text-body-color dark:text-dark-6'></p>
+                            </div>
+                            <h2 className='mb-3 text-2xl leading-[1.2] dark:text-white md:text-[40px]'>
+                                {siteConfig('PROXIO_ABOUT_TEXT_1')}
+                            </h2>
+                            <p
+                                dangerouslySetInnerHTML={{
+                                    __html: siteConfig('PROXIO_ABOUT_TEXT_2')
+                                }}
+                                className='text-base text-body-color dark:text-dark-6'></p>
+                            {/* 数值四宫格 */}
+                            <div className='grid grid-cols-2 grid-rows-2 pt-6 gap-4'>
+                                <KeyVal k={siteConfig('PROXIO_ABOUT_KEY_1')} v={siteConfig('PROXIO_ABOUT_VAL_1')} />
+                                <KeyVal k={siteConfig('PROXIO_ABOUT_KEY_2')} v={siteConfig('PROXIO_ABOUT_VAL_2')} />
+                                <KeyVal k={siteConfig('PROXIO_ABOUT_KEY_3')} v={siteConfig('PROXIO_ABOUT_VAL_3')} />
+                                <KeyVal k={siteConfig('PROXIO_ABOUT_KEY_4')} v={siteConfig('PROXIO_ABOUT_VAL_4')} />
                             </div>
                         </div>
-                        <div>
-                            
-                        </div>
                     </div>
-
-
                 </div>
             </section>
             {/* <!-- ====== Team Section End --> */}
         </>
     )
 }
+
+// 显示一组键值对
+const KeyVal = ({ k, v }) => {
+    if (!k) {
+        return null;
+    }
+    return (
+        <div className='space-y-2'>
+            <div className='dark:text-dark-6'>{k}</div>
+            <div className='dark:text-white text-2xl font-semibold'>{v}</div>
+        </div>
+    )
+}

themes/proxio/components/Testimonials.js

@@ -1,150 +1,149 @@
 /* eslint-disable react/no-unescaped-entities */
 /* eslint-disable @next/next/no-img-element */
-
 import { siteConfig } from '@/lib/config'
-import { loadExternalResource } from '@/lib/utils'
-import { useEffect } from 'react'
-import { SVGLeftArrow } from './svg/SVGLeftArrow'
-import { SVGRightArrow } from './svg/SVGRightArrow'
+import Link from 'next/link'
+import { useEffect, useRef } from 'react'
 
 /**
- * 一些外部js
+ * 用户反馈
+ * @returns
  */
-const loadExternal = async () => {
-  await loadExternalResource(
-    'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.css',
-    'css'
-  )
-  await loadExternalResource(
-    'https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js',
-    'js'
-  )
-
-  const Swiper = window.Swiper
-  if (!Swiper) {
-    return
-  }
-  // Testimonial
-  // eslint-disable-next-line no-unused-vars
-  const testimonialSwiper = new Swiper('.testimonial-carousel', {
-    slidesPerView: 1,
-    spaceBetween: 30,
-
-    // Navigation arrows
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev'
-    },
-
-    breakpoints: {
-      640: {
-        slidesPerView: 2,
-        spaceBetween: 30
-      },
-      1024: {
-        slidesPerView: 3,
-        spaceBetween: 30
-      },
-      1280: {
-        slidesPerView: 3,
-        spaceBetween: 30
-      }
-    }
-  })
-}
-
 export const Testimonials = () => {
+  const PROXIO_TESTIMONIALS_ITEMS = siteConfig('PROXIO_TESTIMONIALS_ITEMS', [])
+
+  const scrollContainerRef = useRef(null)
+
   useEffect(() => {
-    loadExternal()
+    const scrollContainer = scrollContainerRef.current
+    let scrollAmount = 0
+    const scrollSpeed = 1 // 滚动速度
+
+    const scroll = () => {
+      if (scrollContainer) {
+        scrollAmount += scrollSpeed
+        scrollContainer.scrollTop = scrollAmount
+
+        // 如果滚动到内容的一半，立即重置滚动位置
+        if (scrollAmount >= scrollContainer.scrollHeight / 2) {
+          scrollAmount = 0
+        }
+      }
+      requestAnimationFrame(scroll)
+    }
+
+    scroll()
+
+    return () => cancelAnimationFrame(scroll)
   }, [])
-  // 用户评分
-  const ratings = [1, 2, 3, 4, 5]
-  const PROXIO_TESTIMONIALS_ITEMS = siteConfig('PROXIO_TESTIMONIALS_ITEMS')
+
   return (
     <>
       {/* <!-- ====== Testimonial Section Start --> */}
       <section
-        id='testimonials'
-        className='overflow-hidden bg-gray-1 py-20 dark:bg-dark-2 md:py-[120px]'>
-        <div className='container mx-auto'>
-          <div className='-mx-4 flex flex-wrap justify-center'>
-            <div className='w-full px-4'>
-              <div className='mx-auto mb-[60px] max-w-[485px] text-center'>
-                <span className='mb-2 block text-lg font-semibold text-primary'>
-                  {siteConfig('PROXIO_TESTIMONIALS_TITLE')}
-                </span>
-                <h2 className='mb-3 text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]'>
-                  {siteConfig('PROXIO_TESTIMONIALS_TEXT_1')}
-                </h2>
-                <p className='text-base text-body-color dark:text-dark-6'>
-                  {siteConfig('PROXIO_TESTIMONIALS_TEXT_2')}
-                </p>
-              </div>
+        id="testimonials"
+        className="overflow-hidden bg-gray-1 py-20 dark:bg-black md:py-[60px]"
+      >
+        <div className="container mx-auto flex flex-col md:flex-row items-start gap-10">
+          {/* 左侧标题和描述 */}
+          <div className="flex flex-col space-y-8 w-full md:w-1/2 text-center md:text-left">
+
+            <div>
+              <span className='px-3 py-0.5 rounded-2xl dark:bg-dark-1 border border-gray-200 dark:border-[#333333] dark:text-white'>
+                {siteConfig('PROXIO_TESTIMONIALS_TITLE')}
+              </span>
+            </div>
+            <h2 className="text-3xl font-bold leading-[1.2] text-dark dark:text-white sm:text-4xl md:text-[40px]">
+              {siteConfig('PROXIO_TESTIMONIALS_TEXT_1')}
+            </h2>
+            <p className="text-base text-body-color dark:text-dark-6">
+              {siteConfig('PROXIO_TESTIMONIALS_TEXT_2')}
+            </p>
+
+            <div className='mt-8 w-full flex justify-start items-center'>
+              <Link
+                href={siteConfig('PROXIO_TESTIMONIALS_BUTTON_URL', '')}
+                className='px-4 py-2 rounded-3xl border dark:border-gray-200 border-[#333333] text-base font-medium text-dark hover:bg-gray-100 dark:text-white dark:hover:bg-white dark:hover:text-black duration-200'>
+                {siteConfig('PROXIO_TESTIMONIALS_BUTTON_TEXT')}
+                <i className="pl-4 fa-solid fa-arrow-right"></i>
+              </Link>
             </div>
           </div>
 
-          <div className='-m-5'>
-            <div className='swiper testimonial-carousel common-carousel p-5'>
-              <div className='swiper-wrapper'>
-                {/* 用户评价卡牌 */}
-                {PROXIO_TESTIMONIALS_ITEMS?.map((item, index) => {
-                  return (
-                    <div key={index} className='swiper-slide'>
-                      <div className='rounded-xl bg-white px-4 py-[30px] shadow-testimonial dark:bg-dark sm:px-[30px]'>
-                        <div className='mb-[18px] flex items-center gap-[2px]'>
-                          {ratings.map((rating, index) => (
-                            <img
-                              key={index}
-                              alt='star icon' // 为每个图片设置唯一的 key 属性
-                              src={siteConfig('PROXIO_TESTIMONIALS_STAR_ICON')}
-                            />
-                          ))}
-                        </div>
 
-                        <p className='mb-6 text-base text-body-color dark:text-dark-6'>
-                          “{item.PROXIO_TESTIMONIALS_ITEM_TEXT}”
-                        </p>
-
-                        <a
-                          href={item.PROXIO_TESTIMONIALS_ITEM_URL}
-                          className='flex items-center gap-4'>
-                          <div className='h-[50px] w-[50px] overflow-hidden rounded-full'>
-                            <img
-                              src={item.PROXIO_TESTIMONIALS_ITEM_AVATAR}
-                              alt='author'
-                              className='h-[50px] w-[50px] overflow-hidden rounded-full object-cover'
-                            />
-                          </div>
-
-                          <div>
-                            <h3 className='text-sm font-semibold text-dark dark:text-white'>
-                              {item.PROXIO_TESTIMONIALS_ITEM_NICKNAME}
-                            </h3>
-                            <p className='text-xs text-body-secondary'>
-                              {item.PROXIO_TESTIMONIALS_ITEM_DESCRIPTION}
-                            </p>
-                          </div>
-                        </a>
-                      </div>
+          {/* 右侧用户评价卡牌 */}
+          <div
+            className="w-full md:w-1/2 h-[600px] overflow-hidden relative"
+            ref={scrollContainerRef}
+          >
+            <div className="absolute top-0 left-0 w-full">
+              {PROXIO_TESTIMONIALS_ITEMS?.map((item, index) => (
+                <div
+                  key={index}
+                  className="mb-6 rounded-xl bg-white px-4 py-[30px] shadow-testimonial border dark:bg-[#0E0E0E] sm:px-[30px] dark:border-[#333333] "
+                >
+                  <p className="mb-6 text-base text-body-color dark:text-dark-6">
+                    “{item.PROXIO_TESTIMONIALS_ITEM_TEXT}”
+                  </p>
+                  <a
+                    href={item.PROXIO_TESTIMONIALS_ITEM_URL}
+                    className="flex items-center gap-4"
+                  >
+                    <div className="h-[50px] w-[50px] overflow-hidden rounded-full">
+                      <img
+                        src={item.PROXIO_TESTIMONIALS_ITEM_AVATAR}
+                        alt="author"
+                        className="h-[50px] w-[50px] overflow-hidden rounded-full object-cover"
+                      />
                     </div>
-                  )
-                })}
-              </div>
-
-              {/* 切换按钮  */}
-              <div className='mt-[60px] flex items-center justify-center gap-1'>
-                <div className='swiper-button-prev'>
-                  <SVGLeftArrow />
+                    <div>
+                      <h3 className="text-sm font-semibold text-dark dark:text-white">
+                        {item.PROXIO_TESTIMONIALS_ITEM_NICKNAME}
+                      </h3>
+                      <p className="text-xs text-body-secondary">
+                        {item.PROXIO_TESTIMONIALS_ITEM_DESCRIPTION}
+                      </p>
+                    </div>
+                  </a>
                 </div>
-                <div className='swiper-button-next'>
-                  <SVGRightArrow />
+              ))}
+              {/* 克隆一份内容，用于无缝滚动 */}
+              {PROXIO_TESTIMONIALS_ITEMS?.map((item, index) => (
+                <div
+                  key={`clone-${index}`}
+                  className="mb-6 rounded-xl bg-white px-4 py-[30px] shadow-testimonial border dark:bg-[#0E0E0E] sm:px-[30px] dark:border-[#333333] "
+                >
+                  <p className="mb-6 text-base text-body-color dark:text-dark-6">
+                    “{item.PROXIO_TESTIMONIALS_ITEM_TEXT}”
+                  </p>
+                  <a
+                    href={item.PROXIO_TESTIMONIALS_ITEM_URL}
+                    className="flex items-center gap-4"
+                  >
+                    <div className="h-[50px] w-[50px] overflow-hidden rounded-full">
+                      <img
+                        src={item.PROXIO_TESTIMONIALS_ITEM_AVATAR}
+                        alt="author"
+                        className="h-[50px] w-[50px] overflow-hidden rounded-full object-cover"
+                      />
+                    </div>
+                    <div>
+                      <h3 className="text-sm font-semibold text-dark dark:text-white">
+                        {item.PROXIO_TESTIMONIALS_ITEM_NICKNAME}
+                      </h3>
+                      <p className="text-xs text-body-secondary">
+                        {item.PROXIO_TESTIMONIALS_ITEM_DESCRIPTION}
+                      </p>
+                    </div>
+                  </a>
                 </div>
-              </div>
+              ))}
             </div>
           </div>
+
+
         </div>
       </section>
       {/* <!-- ====== Testimonial Section End --> */}
     </>
   )
-}
+}