diff --git a/components/layout/top-bar.tsx b/components/layout/top-bar.tsx
index 0aee37e..3a40c78 100644
--- a/components/layout/top-bar.tsx
+++ b/components/layout/top-bar.tsx
@@ -165,10 +165,13 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
   };
 
   return (
-    <div
-      className="fixed right-0 top-0 h-16 header z-[999]"
-      style={{ isolation: "isolate", left: collapsed ? "3rem" : "16rem" }}
-    >
+         <div
+       className="fixed right-0 top-0 h-16 header z-[999]"
+       style={{
+         isolation: "isolate",
+         left: pathname === "/" ? "0" : (collapsed ? "2.5rem" : "16rem")
+       }}
+     >
       <div className="h-full flex items-center justify-between pr-6 pl-4">
         <div className="flex items-center space-x-4">
           <div
@@ -212,7 +215,11 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
             {pathname === "/" ? (
               <div
                 data-alt="go-started-button"
-                className="z-100 pointer-events-auto bg-white text-black rounded-full px-4 py-2 cursor-pointer transition-opacity opacity-100 hover:opacity-80 text-sm font-medium"
+                className="z-100 pointer-events-auto bg-white text-black rounded-full cursor-pointer transition-opacity opacity-100 hover:opacity-80 font-medium
+                           /* 移动端适配 */
+                           px-2 py-1.5 text-xs
+                           /* 平板及以上适配 */
+                           sm:px-4 sm:py-2 sm:text-sm"
                 onClick={() => router.push("/movies")}
               >
                 Go Started
@@ -289,67 +296,67 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
                       data-alt="user-menu-dropdown"
                       onClick={(e) => e.stopPropagation()}
                     >
-                                                                                           <UserCard plan_name={currentUser.plan_name}>
-                         <div className="relative z-[2] w-full h-full flex flex-col text-white p-3">
-                           {/* 顶部用户信息 */}
-                           <div className="flex items-center space-x-3 mb-3">
-                             <div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
-                               {currentUser.username
-                                 ? currentUser.username.charAt(0)
-                                 : "MF"}
-                             </div>
-                             <div className="flex-1 min-w-0">
-                               <h3 className="text-sm font-semibold text-white truncate">
-                                 {currentUser.name || currentUser.username}
-                               </h3>
-                               <p className="text-xs text-gray-300 truncate">
-                                 {currentUser.email}
-                               </p>
-                             </div>
-                           </div>
-
-                                                       {/* AI 积分 */}
-                            <div className="flex items-center justify-center space-x-3 mb-4">
-                              <div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
-                                <Sparkles className="h-5 w-5 text-white" />
-                              </div>
-                              <span className="text-white text-base font-semibold">
-                                {isLoadingSubscription
-                                  ? "Loading..."
-                                  : `${credits} credits`}
-                              </span>
+                      <UserCard plan_name={currentUser.plan_name}>
+                        <div className="relative z-[2] w-full h-full flex flex-col text-white p-3">
+                          {/* 顶部用户信息 */}
+                          <div className="flex items-center space-x-3 mb-3">
+                            <div className="h-10 w-10 rounded-full bg-[#C73BFF] flex items-center justify-center text-white font-bold text-sm flex-shrink-0">
+                              {currentUser.username
+                                ? currentUser.username.charAt(0)
+                                : "MF"}
                             </div>
-
-                            {/* 操作按钮区域 */}
-                            <div className="flex-1 flex flex-row justify-center items-end">
-                              <button
-                                className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors"
-                                onClick={() => {
-                                  window.open("/pricing", "_blank");
-                                }}
-                              >
-                                Upgrade
-                              </button>
-
-                              {currentUser.plan_name !== "none" && (
-                                <button
-                                  className="flex-1 bg-transparent border border-gray-400/30 text-gray-300 text-xs py-0.5 h-6 rounded hover:bg-gray-400/10 transition-colors disabled:opacity-50"
-                                  onClick={handleManageSubscription}
-                                  disabled={isManagingSubscription}
-                                >
-                                  Manage
-                                </button>
-                              )}
-
-                              <button
-                                className="flex-1 bg-transparent border border-red-400/50 text-red-300 text-xs py-0.5 h-6 rounded hover:bg-red-400/10 transition-colors"
-                                onClick={() => logoutUser()}
-                              >
-                                Logout
-                              </button>
+                            <div className="flex-1 min-w-0">
+                              <h3 className="text-sm font-semibold text-white truncate">
+                                {currentUser.name || currentUser.username}
+                              </h3>
+                              <p className="text-xs text-gray-300 truncate">
+                                {currentUser.email}
+                              </p>
                             </div>
-                         </div>
-                       </UserCard>
+                          </div>
+
+                          {/* AI 积分 */}
+                          <div className="flex items-center justify-center space-x-3 mb-4">
+                            <div className="p-2 rounded-full bg-white/10 backdrop-blur-sm">
+                              <Sparkles className="h-5 w-5 text-white" />
+                            </div>
+                            <span className="text-white text-base font-semibold">
+                              {isLoadingSubscription
+                                ? "Loading..."
+                                : `${credits} credits`}
+                            </span>
+                          </div>
+
+                          {/* 操作按钮区域 */}
+                          <div className="flex-1 flex flex-row justify-center items-end">
+                            <button
+                              className="flex-1 bg-transparent border border-white/30 text-white text-xs py-0.5 h-6 rounded hover:bg-white/10 transition-colors"
+                              onClick={() => {
+                                window.open("/pricing", "_blank");
+                              }}
+                            >
+                              Upgrade
+                            </button>
+
+                            {currentUser.plan_name !== "none" && (
+                              <button
+                                className="flex-1 bg-transparent border border-gray-400/30 text-gray-300 text-xs py-0.5 h-6 rounded hover:bg-gray-400/10 transition-colors disabled:opacity-50"
+                                onClick={handleManageSubscription}
+                                disabled={isManagingSubscription}
+                              >
+                                Manage
+                              </button>
+                            )}
+
+                            <button
+                              className="flex-1 bg-transparent border border-red-400/50 text-red-300 text-xs py-0.5 h-6 rounded hover:bg-red-400/10 transition-colors"
+                              onClick={() => logoutUser()}
+                            >
+                              Logout
+                            </button>
+                          </div>
+                        </div>
+                      </UserCard>
                     </motion.div>,
                     document.body
                   )
@@ -357,22 +364,30 @@ export function TopBar({ collapsed }: { collapsed: boolean }) {
             </div>
           </div>
         ) : (
-          <div className="flex items-center space-x-4">
-            <div
-              data-alt="login-button"
-              className="z-100  pointer-events-auto text-gray-300 hover:text-white cursor-pointer px-3 py-2 rounded transition-colors text-sm"
-              onClick={() => router.push("/signup")}
-            >
-              Sign Up
-            </div>
-            <div
-              data-alt="go-started-button"
-              className="z-100 pointer-events-auto bg-white text-black rounded-full px-4 py-2 cursor-pointer transition-opacity opacity-100 hover:opacity-80 text-sm font-medium"
-              onClick={() => router.push("/movies")}
-            >
-              Go Started
-            </div>
-          </div>
+                     <div className="flex items-center space-x-2 sm:space-x-4">
+             <div
+               data-alt="login-button"
+               className="z-100 pointer-events-auto text-gray-300 hover:text-white cursor-pointer rounded transition-colors
+                          /* 移动端适配 */
+                          px-2 py-1.5 text-xs
+                          /* 平板及以上适配 */
+                          sm:px-3 sm:py-2 sm:text-sm"
+               onClick={() => router.push("/signup")}
+             >
+               Sign Up
+             </div>
+             <div
+               data-alt="go-started-button"
+               className="z-100 pointer-events-auto bg-white text-black rounded-full cursor-pointer transition-opacity opacity-100 hover:opacity-80 font-medium
+                          /* 移动端适配 */
+                          px-2 py-1.5 text-xs
+                          /* 平板及以上适配 */
+                          sm:px-4 sm:py-2 sm:text-sm"
+               onClick={() => router.push("/movies")}
+             >
+               Go Started
+             </div>
+           </div>
         )}
       </div>
     </div>
diff --git a/components/pages/home-page2.tsx b/components/pages/home-page2.tsx
index 0dc5484..16c5e8c 100644
--- a/components/pages/home-page2.tsx
+++ b/components/pages/home-page2.tsx
@@ -12,7 +12,15 @@ import "./style/home-page2.css";
 import { usePathname, useRouter } from "next/navigation";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/swiper-bundle.css"; // 引入样式
-import { Autoplay } from "swiper/modules";
+import "swiper/css/effect-coverflow";
+import "swiper/css/effect-cube";
+import "swiper/css/pagination";
+import {
+  Autoplay,
+  EffectCoverflow,
+  EffectCube,
+  Pagination,
+} from "swiper/modules";
 
 import { VideoCarouselLayout } from "@/components/video-carousel-layout";
 import { VideoGridLayout } from "@/components/video-grid-layout";
@@ -160,39 +168,6 @@ function useVideoPreloader() {
 export function HomePage2() {
   // 后台静默预加载视频，不显示任何加载界面
   useVideoPreloader();
-  const [hPading, setHPading] = useState(0);
-
-  useEffect(() => {
-    // 获取当前窗口尺寸
-    const currentWidth = window.innerWidth;
-    const currentHeight = window.innerHeight;
-    // 计算缩放比例 (1920x1080)
-    const wScale = currentWidth / 1920;
-    const hScale = currentHeight / 1080;
-
-    // 检查app节点是否存在
-    const homePage = document.getElementById("home-page");
-    if (!homePage) {
-      console.error("未找到app节点");
-      return;
-    }
-    // setHPading((hScale || 1)  * 10);
-    // 创建样式元素
-    const style = document.createElement("style");
-
-    // 设置CSS样式
-    style.textContent = `
-        #home-page {
-           transform-origin: top left;
-           transform: scale(${wScale}, ${hScale});
-           width: 1920px;
-           height: 1080px;
-         }
-     `;
-
-    // 将样式添加到head
-    document.head.appendChild(style);
-  }, []);
   return (
     //
     <div
@@ -214,27 +189,101 @@ export function HomePage2() {
 function HomeModule1() {
   const router = useRouter();
   return (
-    <div className="home-module1 relative flex justify-center items-start pt-[28rem] w-full h-[1280px]  bg-black snap-start">
+    <div
+      className="home-module1 relative flex justify-center items-start w-full bg-black snap-start
+                    /* 移动端适配 */
+                    h-[100vh] pt-[40vh]
+                    /* 平板适配 */
+                    sm:h-[100vh] sm:pt-[35vh]
+                    /* 小屏笔记本适配 (13-15寸) */
+                    md:h-[100vh] md:pt-[30vh]
+                    /* 大屏笔记本适配 (16-17寸) */
+                    lg:h-[100vh] lg:pt-[28vh]
+                    /* 桌面端适配 (21-24寸) */
+                    xl:h-[100vh] xl:pt-[25vh]
+                    /* 大屏显示器适配 (27寸+) */
+                    2xl:h-[100vh] 2xl:pt-[22vh]"
+    >
       <video
         src="https://cdn.qikongjian.com/1756549479451_ltrtoz.mp4"
         autoPlay
         loop
         muted
         playsInline
-        className="absolute top-0 left-0 z-1 w-full h-full object-cover"
+        className="absolute top-0 left-0 z-1 w-full h-full
+                   /* 移动端优化 */
+                   object-cover
+                   /* 平板及以上优化 */
+                   sm:object-cover
+                   /* 桌面端优化 */
+                   md:object-cover lg:object-cover xl:object-cover 2xl:object-cover"
       ></video>
-      <div className="center z-10 flex flex-col items-center">
-        <h1 className="text-white text-[5.75rem] leading-[100%] font-bold mb-[1rem]">
+      <div className="center z-10 flex flex-col items-center px-4">
+        <h1
+          className="text-white font-bold text-center
+                       /* 移动端字体 */
+                       text-[2.5rem] leading-[110%] mb-4
+                       /* 平板字体 */
+                       sm:text-[3.5rem] sm:leading-[110%] sm:mb-6
+                       /* 小屏笔记本字体 */
+                       md:text-[4.5rem] md:leading-[110%] md:mb-8
+                       /* 大屏笔记本字体 */
+                       lg:text-[5rem] lg:leading-[110%] lg:mb-8
+                       /* 桌面端字体 */
+                       xl:text-[5.5rem] xl:leading-[110%] xl:mb-10
+                       /* 大屏显示器字体 */
+                       2xl:text-[6rem] 2xl:leading-[110%] 2xl:mb-12"
+        >
           Ideas Spark Movies
         </h1>
-        <p className="text-white text-[2rem] leading-[140%] font-normal">
+        <p
+          className="text-white font-normal text-center
+                     /* 移动端字体 */
+                     text-[1rem] leading-[140%] mb-2
+                     /* 平板字体 */
+                     sm:text-[1.25rem] sm:leading-[140%] sm:mb-3
+                     /* 小屏笔记本字体 */
+                     md:text-[1.5rem] md:leading-[140%] md:mb-4
+                     /* 大屏笔记本字体 */
+                     lg:text-[1.75rem] lg:leading-[140%] lg:mb-4
+                     /* 桌面端字体 */
+                     xl:text-[2rem] xl:leading-[140%] xl:mb-5
+                     /* 大屏显示器字体 */
+                     2xl:text-[2.25rem] 2xl:leading-[140%] 2xl:mb-6"
+        >
           One line, one film—your story, your scene.
         </p>
-        <p className="text-white text-[2rem] leading-[140%] font-normal">
+        <p
+          className="text-white font-normal text-center
+                     /* 移动端字体 */
+                     text-[1rem] leading-[140%] mb-6
+                     /* 平板字体 */
+                     sm:text-[1.25rem] sm:leading-[140%] sm:mb-8
+                     /* 小屏笔记本字体 */
+                     md:text-[1.5rem] md:leading-[140%] md:mb-10
+                     /* 大屏笔记本字体 */
+                     lg:text-[1.75rem] lg:leading-[140%] lg:mb-12
+                     /* 桌面端字体 */
+                     xl:text-[2rem] xl:leading-[140%] xl:mb-14
+                     /* 大屏显示器字体 */
+                     2xl:text-[2.25rem] 2xl:leading-[140%] 2xl:mb-16"
+        >
           Everyone is a movie master.
         </p>
         <div
-          className="w-[11.5rem] h-[3.75rem] mt-[4rem] text-base flex justify-center items-center font-normal border border-white rounded-full bg-white/30 cursor-pointer"
+          className="flex justify-center items-center font-normal border border-white rounded-full bg-white/30 cursor-pointer
+                     /* 移动端按钮 */
+                     w-[8rem] h-[2.5rem] text-sm
+                     /* 平板按钮 */
+                     sm:w-[9rem] sm:h-[2.75rem] sm:text-base
+                     /* 小屏笔记本按钮 */
+                     md:w-[10rem] md:h-[3rem] md:text-base
+                     /* 大屏笔记本按钮 */
+                     lg:w-[11rem] lg:h-[3.25rem] lg:text-lg
+                     /* 桌面端按钮 */
+                     xl:w-[11.5rem] xl:h-[3.5rem] xl:text-lg
+                     /* 大屏显示器按钮 */
+                     2xl:w-[12rem] 2xl:h-[3.75rem] 2xl:text-xl"
           onClick={() => {
             if (localStorage.getItem("token")) {
               router.push("/movies");
@@ -251,6 +300,20 @@ function HomeModule1() {
 }
 /**核心价值 */
 function HomeModule2() {
+  const [isMobile, setIsMobile] = useState(true);
+
+  // 检测屏幕尺寸并设置状态
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 640);
+    };
+
+    // 初始检查
+    checkScreenSize();
+
+    // 监听窗口大小变化
+  }, []);
+
   const videoList = [
     {
       title: "Text to Movie",
@@ -268,53 +331,205 @@ function HomeModule2() {
   return (
     <div
       data-alt="core-value-section"
-      className="home-module2 relative flex flex-col items-center justify-center w-full h-[1000px]  bg-black snap-start"
+      className="home-module2 relative flex flex-col items-center justify-center w-full bg-black snap-start
+                  /* 移动端适配 */
+                  h-[80vh] py-8
+                  /* 平板适配 */
+                  sm:h-[100vh] sm:py-12
+                  /* 小屏笔记本适配 (13-15寸) */
+                  md:h-[1000px] md:py-16
+                  /* 大屏笔记本适配 (16-17寸) */
+                  lg:h-[1000px] lg:py-20
+                  /* 桌面端适配 (21-24寸) */
+                  xl:h-[1000px] xl:py-24
+                  /* 大屏显示器适配 (27寸+) */
+                  2xl:h-[1000px] 2xl:py-32"
     >
       <div
         data-alt="core-value-content"
-        className="center z-10 flex flex-col items-center mb-[8rem]"
+        className="center z-10 flex flex-col items-center px-4
+                   /* 移动端间距 */
+                   mb-8
+                   /* 平板间距 */
+                   sm:mb-8
+                   /* 小屏笔记本间距 */
+                   md:mb-10
+                   /* 大屏笔记本间距 */
+                   lg:mb-12
+                   /* 桌面端间距 */
+                   xl:mb-16
+                   /* 大屏显示器间距 */
+                   2xl:mb-20"
       >
-        <h2 className="text-white text-[3.375rem] leading-[100%] font-normal mb-[3rem]">
+        <h2
+          className="text-white font-normal text-center
+                       /* 移动端字体 */
+                       text-[2rem] leading-[110%] mb-4
+                       /* 平板字体 */
+                       sm:text-[2.5rem] sm:leading-[110%] sm:mb-6
+                       /* 小屏笔记本字体 */
+                       md:text-[3rem] md:leading-[110%] md:mb-8
+                       /* 大屏笔记本字体 */
+                       lg:text-[3.25rem] lg:leading-[110%] lg:mb-10
+                       /* 桌面端字体 */
+                       xl:text-[3.375rem] xl:leading-[110%] xl:mb-12
+                       /* 大屏显示器字体 */
+                       2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-16"
+        >
           Just Drop A Thought
         </h2>
-        <p className="text-white text-[1.7rem] leading-[140%] font-normal text-center">
+        <p
+          className="text-white font-normal text-center
+                     /* 移动端字体 */
+                     text-[1rem] leading-[140%]
+                     /* 平板字体 */
+                     sm:text-[1.25rem] sm:leading-[140%]
+                     /* 小屏笔记本字体 */
+                     md:text-[1.5rem] md:leading-[140%]
+                     /* 大屏笔记本字体 */
+                     lg:text-[1.6rem] lg:leading-[140%]
+                     /* 桌面端字体 */
+                     xl:text-[1.7rem] xl:leading-[140%]
+                     /* 大屏显示器字体 */
+                     2xl:text-[1.8rem] 2xl:leading-[140%]"
+        >
           Say your idea in a single line,and MovieFlow will bring it to life.
         </p>
       </div>
       <div
         data-alt="core-value-videos"
-        className="flex justify-center gap-[1rem] w-full px-[4rem]"
+        className="w-full px-4
+                    /* 移动端容器 */
+                    h-[20rem]
+                    /* 平板容器 */
+                    sm:h-[24rem] sm:px-6
+                    /* 小屏笔记本容器 */
+                    md:h-[28rem] md:px-8
+                    /* 大屏笔记本容器 */
+                    lg:h-[32rem] lg:px-12
+                    /* 桌面端容器 */
+                    xl:h-[36rem] xl:px-16
+                    /* 大屏显示器容器 */
+                    2xl:h-[40rem] 2xl:px-20"
       >
-        {/* 第一个视频 */}
-        {videoList.map((item, index) => (
-          <div
-            data-alt="core-value-video-1"
-            className="flex flex-col items-center"
-            key={index}
-          >
-            <video
-              src={item.video}
-              loop
-              muted
-              playsInline
-              onMouseEnter={(e) => {
-                const videoElement = e.currentTarget;
-                videoElement.play();
-              }}
-              className=" h-[20rem] object-cover border border-white/20 rounded-2xl"
-            />
-            <h3 className="mt-[1rem] text-white text-[1.5rem] font-medium">
-              {item.title}
-            </h3>
-          </div>
-        ))}
+        <Swiper
+          key={isMobile ? "mobile-swiper" : "desktop-swiper"}
+          effect={isMobile ? "cube" : "coverflow"}
+          grabCursor={true}
+          initialSlide={1}
+          cubeEffect={
+            isMobile
+              ? {
+                  shadow: true,
+                  slideShadows: true,
+                  shadowOffset: 20,
+                  shadowScale: 0.94,
+                }
+              : undefined
+          }
+          coverflowEffect={
+            !isMobile
+              ? {
+                  rotate: 50,
+                  stretch: 0,
+                  depth: 100,
+                  modifier: 1,
+                  slideShadows: true,
+                }
+              : undefined
+          }
+          centeredSlides={!isMobile}
+          slidesPerView={isMobile ? 1 : "auto"}
+          pagination={
+            isMobile
+              ? true
+              : {
+                  clickable: true,
+                  dynamicBullets: true,
+                }
+          }
+          modules={
+            isMobile ? [EffectCube, Pagination] : [EffectCoverflow, Pagination]
+          }
+          className="w-full h-full
+                      /* 分页器样式 - 白色线条 */
+                      [&_.swiper-pagination-bullet]:!bg-white [&_.swiper-pagination-bullet]:!w-5 [&_.swiper-pagination-bullet]:!h-0.5 [&_.swiper-pagination-bullet]:!rounded-none [&_.swiper-pagination-bullet]:!mx-1
+                      /* Cube 效果样式 */
+                      [&_.swiper-wrapper]:!transform-style-preserve-3d [&_.swiper-slide]:!transform-style-preserve-3d"
+          onSlideChange={(swiper) => {
+            // 只播放当前活跃的视频
+            const activeSlide = swiper.slides[swiper.activeIndex];
+            const activeVideo = activeSlide?.querySelector("video");
+            if (activeVideo) {
+              activeVideo.play().catch(() => {
+                // 忽略播放错误
+              });
+            }
+          }}
+          onSwiper={(swiper) => {
+            // 初始化时播放第二个视频（索引为1）
+            const secondVideo = swiper.slides[1]?.querySelector("video");
+            if (secondVideo) {
+              secondVideo.play().catch(() => {
+                // 忽略播放错误
+              });
+            }
+          }}
+        >
+          {videoList.map((item, index) => (
+            <SwiperSlide
+              key={index}
+              className={`flex flex-col items-center justify-center ${
+                isMobile
+                  ? "w-full h-full"
+                  : "w-[320px] h-full md:w-[360px] lg:w-[400px] xl:w-[440px] 2xl:w-[480px]"
+              }`}
+            >
+              <video
+                src={item.video}
+                loop
+                muted
+                playsInline
+                className={`object-cover border border-white/20 rounded-2xl w-full ${
+                  isMobile
+                    ? "h-[12rem]"
+                    : "h-[14rem] md:h-[16rem] lg:h-[18rem] xl:h-[20rem] 2xl:h-[22rem]"
+                }`}
+              />
+              <h3
+                className={`mt-4 text-white font-medium text-center ${
+                  isMobile
+                    ? "text-[1rem]"
+                    : "text-[1.125rem] md:text-[1.25rem] lg:text-[1.375rem] xl:text-[1.5rem] 2xl:text-[1.625rem]"
+                }`}
+              >
+                {item.title}
+              </h3>
+            </SwiperSlide>
+          ))}
+        </Swiper>
       </div>
     </div>
   );
 }
 /**案例展示 */
 function HomeModule3() {
-  const videoList = [
+  const [isMobile, setIsMobile] = useState(true);
+
+  // 检测屏幕尺寸并设置状态
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 640);
+    };
+
+    // 初始检查
+    checkScreenSize();
+
+    // // 监听窗口大小变化
+  }, []);
+
+  // PC端二维数组数据
+  const pcVideoList = [
     [
       "https://cdn.qikongjian.com/1756474023656_60twk5.mp4",
       "https://cdn.qikongjian.com/1756474023644_14n7is.mp4",
@@ -323,7 +538,6 @@ function HomeModule3() {
       "https://cdn.qikongjian.com/1756474023657_nf8799.mp4",
       "https://cdn.qikongjian.com/1756474230992_vw0ubf.mp4",
     ],
-
     [
       "https://cdn.qikongjian.com/1756474023655_pov4c3.mp4",
       "https://cdn.qikongjian.com/1756474023663_yohi7a.mp4",
@@ -341,110 +555,277 @@ function HomeModule3() {
     ],
   ];
 
-  // 定义内容样式
-  const contentStyle: React.CSSProperties = {
-    height: "100%",
-    lineHeight: "10rem",
-    textAlign: "center",
-    background: "#364d79",
-  };
+  // 移动端一维数组数据（合并所有视频）
+  const mobileVideoList = [
+    "https://cdn.qikongjian.com/1756474023656_60twk5.mp4",
+    "https://cdn.qikongjian.com/1756474023644_14n7is.mp4",
+    "https://cdn.qikongjian.com/1756474023648_kocq6z.mp4",
+    "https://cdn.qikongjian.com/1756474023657_w10boo.mp4",
+    "https://cdn.qikongjian.com/1756474023657_nf8799.mp4",
+    "https://cdn.qikongjian.com/1756474230992_vw0ubf.mp4",
+    "https://cdn.qikongjian.com/1756474023655_pov4c3.mp4",
+    "https://cdn.qikongjian.com/1756474023663_yohi7a.mp4",
+    "https://cdn.qikongjian.com/1756474023661_348dx3.mp4",
+    "https://cdn.qikongjian.com/1756474023683_xlb34s.mp4",
+    "https://cdn.qikongjian.com/1756474230987_63ooji.mp4",
+    "https://cdn.qikongjian.com/1756474230997_zysje8.mp4",
+    "https://cdn.qikongjian.com/1756474230988_tgqzln.mp4",
+    "https://cdn.qikongjian.com/1756474231007_qneeia.mp4",
+    "https://cdn.qikongjian.com/1756474231008_qyqtka.mp4",
+    "https://cdn.qikongjian.com/1756474231009_vs49d9.mp4",
+    "https://cdn.qikongjian.com/1756474231010_2a48p0.mp4",
+  ];
 
   return (
-    <div className="home-module3 h-[1360px] relative flex flex-col items-center justify-center w-full bg-black snap-start">
-      <div className="center z-10 flex flex-col items-center  mb-[4rem]">
-        <h2 className="text-white text-[3.375rem] leading-[100%] font-normal mb-[3rem]">
+    <div
+      className="home-module3 relative flex flex-col items-center justify-center w-full bg-black snap-start
+                    /* 移动端适配 */
+                    h-[80vh] py-8
+                    /* 平板适配 */
+                    sm:h-[100vh] sm:py-12
+                    /* 小屏笔记本适配 (13-15寸) */
+                    md:h-[1300px] md:py-16
+                    /* 大屏笔记本适配 (16-17寸) */
+                    lg:h-[1300px] lg:py-20
+                    /* 桌面端适配 (21-24寸) */
+                    xl:h-[1300px] xl:py-24
+                    /* 大屏显示器适配 (27寸+) */
+                    2xl:h-[1300px] 2xl:py-32"
+    >
+      <div
+        className="center z-10 flex flex-col items-center px-4
+                     /* 移动端间距 */
+                     -mb-8
+                     /* 平板间距 */
+                     sm:mb-12
+                     /* 小屏笔记本间距 */
+                     md:mb-16
+                     /* 大屏笔记本间距 */
+                     lg:mb-20
+                     /* 桌面端间距 */
+                     xl:mb-24
+                     /* 大屏显示器间距 */
+                     2xl:mb-32"
+      >
+        <h2
+          className="text-white font-normal text-center
+                       /* 移动端字体 */
+                       text-[2rem] leading-[110%] mb-4
+                       /* 平板字体 */
+                       sm:text-[2.5rem] sm:leading-[110%] sm:mb-6
+                       /* 小屏笔记本字体 */
+                       md:text-[3rem] md:leading-[110%] md:mb-8
+                       /* 大屏笔记本字体 */
+                       lg:text-[3.25rem] lg:leading-[110%] lg:mb-10
+                       /* 桌面端字体 */
+                       xl:text-[3.375rem] xl:leading-[110%] xl:mb-12
+                       /* 大屏显示器字体 */
+                       2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-16"
+        >
           Ideas Made Real
         </h2>
-        <p className="text-white text-[1.7rem] leading-[140%] font-normal text-center">
+        <p
+          className="text-white font-normal text-center
+                      /* 移动端字体 */
+                      text-[1rem] leading-[140%]
+                      /* 平板字体 */
+                      sm:text-[1.25rem] sm:leading-[140%]
+                      /* 小屏笔记本字体 */
+                      md:text-[1.5rem] md:leading-[140%]
+                      /* 大屏笔记本字体 */
+                      lg:text-[1.6rem] lg:leading-[140%]
+                      /* 桌面端字体 */
+                      xl:text-[1.7rem] xl:leading-[140%]
+                      /* 大屏显示器字体 */
+                      2xl:text-[1.8rem] 2xl:leading-[140%]"
+        >
           High-quality films, any style, made with MovieFlow.
         </p>
       </div>
-      {/* 3x3网格布局 */}
-      <div
-        data-alt="vertical-grid-shadow"
-        className="grid grid-cols-3 gap-[1rem] w-full h-[64rem] px-[5rem] relative"
-      >
-        {/* 上方阴影遮罩 - 使用 mask 实现真正的渐变模糊，加重黑色 */}
-        <div
-          className="absolute -top-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
-          style={{
-            backdropFilter: "blur(12px)",
-            WebkitBackdropFilter: "blur(12px)",
-            backgroundColor: "rgba(0,0,0,0.9)",
-            mask: "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
-            WebkitMask:
-              "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
-          }}
-        ></div>
 
-        {/* 下方阴影遮罩 - 使用 mask 实现真正的渐变模糊，加重黑色 */}
+      {/* 移动端 - 单列布局 */}
+      {isMobile ? (
         <div
-          className="absolute -bottom-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
-          style={{
-            backdropFilter: "blur(12px)",
-            WebkitBackdropFilter: "blur(12px)",
-            backgroundColor: "rgba(0,0,0,0.9)",
-            mask: "linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
-            WebkitMask:
-              "linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
-          }}
-        ></div>
-        {videoList.map((column, columnIndex) => (
+          data-alt="mobile-single-column"
+          className="w-full px-4 h-[40rem] relative"
+        >
+          {/* 上方阴影遮罩 */}
           <div
-            key={columnIndex}
-            className="w-[35.5rem] h-[64rem] relative z-10"
+            className="absolute -top-[1rem] -left-0 w-full h-[8rem] z-20 pointer-events-none"
+            style={{
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              backgroundColor: "rgba(0,0,0,0.9)",
+              mask: "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+              WebkitMask:
+                "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+            }}
+          ></div>
+
+          {/* 下方阴影遮罩 */}
+          <div
+            className="absolute -bottom-[1rem] -left-0 w-full h-[8rem] z-20 pointer-events-none"
+            style={{
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              backgroundColor: "rgba(0,0,0,0.9)",
+              mask: "linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+              WebkitMask:
+                "linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+            }}
+          ></div>
+
+          <Swiper
+            modules={[Autoplay]}
+            direction="vertical"
+            loop={true}
+            spaceBetween={16}
+            slidesPerView={2}
+            autoplay={{
+              delay: 0,
+              pauseOnMouseEnter: true,
+              disableOnInteraction: false,
+            }}
+            speed={8000}
+            grabCursor={true}
+            className="w-full h-full"
+            cssMode={false}
+            freeMode={true}
+            watchSlidesProgress={false}
+            style={
+              {
+                "--swiper-wrapper-transition-timing-function": "linear",
+              } as React.CSSProperties
+            }
           >
-            <Swiper
-              modules={[Autoplay]}
-              direction="vertical"
-              loop={true}
-              spaceBetween={0}
-              slidesPerView={3}
-              autoplay={{
-                delay: 0,
-                pauseOnMouseEnter: true,
-                disableOnInteraction: false,
-                reverseDirection: columnIndex % 2 === 0,
-              }}
-              speed={6000}
-              grabCursor={true}
-              className="w-full h-full"
-              cssMode={false}
-              freeMode={true}
-              watchSlidesProgress={false}
-              style={
-                {
-                  "--swiper-wrapper-transition-timing-function": "linear",
-                } as React.CSSProperties
-              }
-            >
-              {column.map((video, videoIndex) => (
-                <SwiperSlide key={videoIndex}>
-                  <div className="w-full h-[20rem] bg-gray-800 rounded-2xl overflow-hidden">
-                    <video
-                      src={video}
-                      loop
-                      muted
-                      playsInline
-                      className="w-full h-full object-cover"
-                      onMouseEnter={(e) => {
-                        const videoElement = e.currentTarget;
-                        videoElement.play();
-                      }}
-                    />
-                  </div>
-                </SwiperSlide>
-              ))}
-            </Swiper>
-          </div>
-        ))}
-      </div>
+            {mobileVideoList.map((video, videoIndex) => (
+              <SwiperSlide key={videoIndex} className="w-full !h-[12rem]">
+                <div className="w-full h-[11rem] bg-gray-800 rounded-2xl overflow-hidden">
+                  <video
+                    src={video}
+                    autoPlay
+                    loop
+                    muted
+                    playsInline
+                    className="w-full h-full object-cover"
+                    onMouseEnter={(e) => {
+                      const videoElement = e.currentTarget;
+                      videoElement.play();
+                    }}
+                  />
+                </div>
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      ) : (
+        /* PC端 - 三列网格布局 */
+        <div
+          data-alt="pc-grid-layout"
+          className="grid grid-cols-3 gap-4 w-full h-[64rem] px-8 relative
+                     /* 平板及以上 - 有最大宽度限制 */
+                     sm:max-w-[1200px] sm:mx-auto sm:gap-6
+                     /* 小屏笔记本 */
+                     md:max-w-[1400px] md:gap-8
+                     /* 大屏笔记本 */
+                     lg:max-w-[1600px] lg:gap-8
+                     /* 桌面端 */
+                     xl:max-w-[1800px] xl:gap-8
+                     /* 大屏显示器 */
+                     2xl:max-w-[2000px] 2xl:gap-8 "
+        >
+          {/* 上方阴影遮罩 */}
+          <div
+            className="absolute -top-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
+            style={{
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              backgroundColor: "rgba(0,0,0,0.9)",
+              mask: "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+              WebkitMask:
+                "linear-gradient(to bottom, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+            }}
+          ></div>
+
+          {/* 下方阴影遮罩 */}
+          <div
+            className="absolute -bottom-[1rem] -left-0 w-full h-[20rem] z-20 pointer-events-none"
+            style={{
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              backgroundColor: "rgba(0,0,0,0.9)",
+              mask: "linear-gradient(to top, black 0%, black 30%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+              WebkitMask:
+                "linear-gradient(to top, black 0%, black 20%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.6) 75%, transparent 100%)",
+            }}
+          ></div>
+
+          {pcVideoList.map((column, columnIndex) => (
+            <div key={columnIndex} className="w-full h-[64rem] relative z-10">
+              <Swiper
+                modules={[Autoplay]}
+                direction="vertical"
+                loop={true}
+                spaceBetween={0}
+                slidesPerView={3}
+                autoplay={{
+                  delay: 0,
+                  pauseOnMouseEnter: true,
+                  disableOnInteraction: false,
+                  reverseDirection: columnIndex % 2 === 0,
+                }}
+                speed={6000}
+                grabCursor={true}
+                className="w-full h-full"
+                cssMode={false}
+                freeMode={true}
+                watchSlidesProgress={false}
+                style={
+                  {
+                    "--swiper-wrapper-transition-timing-function": "linear",
+                  } as React.CSSProperties
+                }
+              >
+                {column.map((video, videoIndex) => (
+                  <SwiperSlide key={videoIndex} className="w-full !h-[20rem]">
+                    <div className="w-full h-[19rem] bg-gray-800 rounded-2xl overflow-hidden aspect-[1/0.77]">
+                      <video
+                        src={video}
+                        loop
+                        muted
+                        playsInline
+                        className="w-full h-full object-cover aspect-[1/0.77]"
+                        onMouseEnter={(e) => {
+                          const videoElement = e.currentTarget;
+                          videoElement.play();
+                        }}
+                      />
+                    </div>
+                  </SwiperSlide>
+                ))}
+              </Swiper>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }
 /**电影制作工序介绍 */
 function HomeModule4() {
   const [activeTab, setActiveTab] = useState(0);
+  const [isMobile, setIsMobile] = useState(true);
+
+  // 检测屏幕尺寸并设置状态
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    // 初始检查
+    checkScreenSize();
+  }, []);
+
   const processSteps = [
     {
       title: " The Story Agent",
@@ -477,67 +858,228 @@ function HomeModule4() {
   };
 
   return (
-    <div
-      data-alt="core-value-section"
-      className="home-module4 h-[1000px] relative flex flex-col items-center justify-center w-full bg-black snap-start"
-    >
-      <div
-        data-alt="core-value-content"
-        className="center z-10 flex flex-col items-center mb-[10rem]"
-      >
-        <h2 className="text-white text-[3.375rem] leading-[100%] font-normal ">
+         <div
+       data-alt="core-value-section"
+       className="home-module4 relative flex flex-col items-center justify-center w-full bg-black snap-start
+                  /* 移动端适配 */
+                  h-[100vh] py-8 px-2
+                  /* 平板适配 */
+                  sm:h-[1000px] sm:py-12 sm:px-6
+                  /* PC端全部使用视口高度，更好地适应不同屏幕 */
+                  md:min-h-[1000px] md:py-16 md:px-6
+                  lg:min-h-[1100px] lg:py-20 lg:px-6
+                  xl:min-h-[1200px] xl:py-24 xl:px-6
+                  2xl:min-h-[1300px] 2xl:py-32 2xl:px-6"
+     >
+             <div
+         data-alt="core-value-content"
+         className="center z-10 flex flex-col items-center
+                    /* 移动端间距和高度 */
+                    px-4 h-[14rem]
+                    /* 平板间距和高度 */
+                    sm:px-6 sm:h-[16rem]
+                    /* 小屏笔记本间距和高度 */
+                    md:px-8 md:h-[8rem]
+                    /* 大屏笔记本间距和高度 */
+                    lg:px-12 lg:h-[12rem]
+                    /* 桌面端间距和高度 */
+                    xl:px-16 xl:h-[14rem]
+                    /* 大屏显示器间距和高度 */
+                    2xl:px-20 2xl:h-[16rem]"
+       >
+        <h2
+          className="text-white font-normal text-center
+                       /* 移动端字体 */
+                       text-[1.5rem] leading-[110%]
+                       /* 平板字体 */
+                       sm:text-[2rem] sm:leading-[110%]
+                       /* 小屏笔记本字体 */
+                       md:text-[2.5rem] md:leading-[110%]
+                       /* 大屏笔记本字体 */
+                       lg:text-[3rem] lg:leading-[110%]
+                       /* 桌面端字体 */
+                       xl:text-[3.375rem] xl:leading-[110%]
+                       /* 大屏显示器字体 */
+                       2xl:text-[3.5rem] 2xl:leading-[110%]"
+        >
           Create Your Way
         </h2>
       </div>
 
-      <div className="flex w-full px-[4rem] gap-[2rem]">
-        {/* 左侧四个切换tab */}
-        <div className="flex flex-col gap-[1rem]">
-          {processSteps.map((step, index) => (
-            <div
-              key={index}
-              onClick={() => handleTabClick(index)}
-              className={`w-[31.75rem] h-[10.5rem] rounded-2xl cursor-pointer transition-all duration-300 border ${
-                activeTab === index
-                  ? "bg-[#262626] border-white/20 hover:border-white/40"
-                  : "bg-black border-white/10 hover:border-white/40"
-              }`}
-            >
-              <div className="p-[1.5rem] h-full flex flex-col justify-center">
+      {isMobile ? (
+        /* 移动端 - 垂直布局 */
+        <div className="w-full px-4 space-y-6">
+          {/* 视频播放区域 */}
+          <div className="w-full">
+            <div className="w-full h-[12rem] bg-gray-800 rounded-2xl overflow-hidden border border-white/20">
+              <video
+                key={activeTab}
+                src={processSteps[activeTab].video}
+                autoPlay
+                loop
+                muted
+                playsInline
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+
+          {/* 切换tabs */}
+          <div className="grid grid-cols-2 gap-3">
+            {processSteps.map((step, index) => (
+              <div
+                key={index}
+                onClick={() => handleTabClick(index)}
+                className={`p-3 rounded-xl cursor-pointer transition-all duration-300 border ${
+                  activeTab === index
+                    ? "bg-[#262626] border-white/20"
+                    : "bg-black border-white/10"
+                }`}
+              >
                 <h3
-                  className={`text-[2rem] font-normal mb-[1.5rem] ${
+                  className={`text-sm font-normal mb-2 ${
                     activeTab === index ? "text-white" : "text-white/70"
                   }`}
                 >
                   {step.title}
                 </h3>
                 <p
-                  className={`text-[0.875rem] leading-[140%] ${
-                    activeTab === index ? "text-white" : "text-white/70"
+                  className={`text-xs leading-[140%] ${
+                    activeTab === index ? "text-white/80" : "text-white/50"
                   }`}
                 >
                   {step.description}
                 </p>
               </div>
-            </div>
-          ))}
-        </div>
-
-        {/* 右侧视频播放区域 */}
-        <div className="flex-1 flex justify-center">
-          <div className="w-[80rem] h-[45rem] bg-gray-800 rounded-2xl overflow-hidden border border-white/20">
-            <video
-              key={activeTab}
-              src={processSteps[activeTab].video}
-              autoPlay
-              loop
-              muted
-              playsInline
-              className="w-full h-full object-cover"
-            />
+            ))}
           </div>
         </div>
-      </div>
+      ) : (
+                 /* PC端 - 水平布局 */
+                   <div
+            className="flex w-full gap-[1rem]
+                           /* 平板及以上 - 间距和内边距 */
+                           sm:px-4 sm:gap-2
+                           /* 小屏笔记本 */
+                           md:px-[3rem] md:gap-[1.5rem]
+                           /* 大屏笔记本 */
+                           lg:px-[4rem] lg:gap-[2rem]
+                           /* 桌面端 */
+                           xl:px-[5rem] xl:gap-[2.5rem]
+                           /* 大屏显示器 */
+                           2xl:px-[6rem] 2xl:gap-[3rem]
+                           /* 设置具体高度，覆盖flex-1的自动填充 */
+                           sm:h-[60%]
+                           md:h-[65%]
+                           lg:h-[70%]
+                           xl:h-[75%]
+                           2xl:h-[65%]
+                           /* 超宽屏幕适配 */
+                           min-[1920px]:h-[70%]
+                           min-[2560px]:h-[80%]"
+          >
+          {/* 左侧四个切换tab */}
+          <div className="flex flex-col gap-[1rem] h-full justify-center">
+            {processSteps.map((step, index) => (
+              <div
+                key={index}
+                onClick={() => handleTabClick(index)}
+                className={`rounded-2xl cursor-pointer transition-all flex-1 duration-300 border ${
+                  activeTab === index
+                    ? "bg-[#262626] border-white/20 hover:border-white/40"
+                    : "bg-black border-white/10 hover:border-white/40"
+                }
+                                  /* 平板及以上 - 使用固定高度，让外层盒子撑起来 */
+                  sm:w-[12rem]
+                  /* 小屏笔记本 - 13-15寸适配 */
+                  md:w-[14rem]
+                  /* 大屏笔记本 - 16-17寸适配 */
+                  lg:w-[16rem]
+                  /* 桌面端 - 21-24寸 */
+                  xl:w-[22rem]
+                  /* 大屏显示器 - 27寸+ */
+                  2xl:w-[32rem]`}
+              >
+                <div
+                  className="h-full flex flex-col justify-center
+                               /* 平板及以上 - 内边距适配 */
+                               sm:p-[0.75rem]
+                               /* 小屏笔记本 - 13-15寸 */
+                               md:p-[0.875rem]
+                               /* 大屏笔记本 - 16-17寸 */
+                               lg:p-[1rem]
+                               /* 桌面端 - 21-24寸 */
+                               xl:p-[1.25rem]
+                               /* 大屏显示器 - 27寸+ */
+                               2xl:p-[1.5rem]"
+                >
+                  <h3
+                    className={`font-normal ${
+                      activeTab === index ? "text-white" : "text-white/70"
+                    }
+                    /* 平板及以上 - 字体适配 */
+                    sm:text-[1rem] sm:mb-[0.5rem]
+                    /* 小屏笔记本 - 13-15寸 */
+                    md:text-[1.125rem] md:mb-[0.625rem]
+                    /* 大屏笔记本 - 16-17寸 */
+                    lg:text-[1.25rem] lg:mb-[0.75rem]
+                    /* 桌面端 - 21-24寸 */
+                    xl:text-[1.5rem] xl:mb-[1rem]
+                    /* 大屏显示器 - 27寸+ */
+                    2xl:text-[1.75rem] 2xl:mb-[1.25rem]`}
+                  >
+                    {step.title}
+                  </h3>
+                  <p
+                    className={`leading-[140%] ${
+                      activeTab === index ? "text-white" : "text-white/70"
+                    }
+                    /* 平板及以上 - 字体适配 */
+                    sm:text-[0.7rem]
+                    /* 小屏笔记本 - 13-15寸 */
+                    md:text-[0.75rem]
+                    /* 大屏笔记本 - 16-17寸 */
+                    lg:text-[0.75rem]
+                    /* 桌面端 - 21-24寸 */
+                    xl:text-[1rem]
+                    /* 大屏显示器 - 27寸+ */
+                    2xl:text-[1rem]`}
+                  >
+                    {step.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* 右侧视频播放区域 */}
+          <div className="flex-1 flex justify-center items-center">
+            <div
+              className="bg-gray-800 rounded-2xl overflow-hidden border border-white/20
+                             /* 平板及以上 - 使用100%高度，让外层盒子撑起来 */
+                             sm:w-[85%] sm:h-full
+                             /* 小屏笔记本 - 13-15寸适配 */
+                             md:w-[100%] md:h-full
+                             /* 大屏笔记本 - 16-17寸适配 */
+                             lg:w-[100%] lg:h-full
+                             /* 桌面端 - 21-24寸 */
+                             xl:w-[100%] xl:h-full
+                             /* 大屏显示器 - 27寸+ */
+                             2xl:w-[100%] 2xl:h-full"
+            >
+              <video
+                key={activeTab}
+                src={processSteps[activeTab].video}
+                autoPlay
+                loop
+                muted
+                playsInline
+                className="w-full h-full object-cover"
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -622,35 +1164,111 @@ function HomeModule5() {
   return (
     <div
       data-alt="core-value-section"
-      className="home-module5 h-[1300px] relative flex flex-col items-center justify-center w-full  bg-black snap-start"
+      className="home-module5 relative flex flex-col items-center justify-center w-full bg-black snap-start
+                 /* 移动端适配 */
+                 min-h-[100vh] py-8
+                 /* 平板适配 */
+                 sm:min-h-[100vh] sm:py-12
+                 /* 小屏笔记本适配 (13-15寸) */
+                 md:h-[1000px] md:py-16
+                 /* 大屏笔记本适配 (16-17寸) */
+                 lg:h-[1100px] lg:py-20
+                 /* 桌面端适配 (21-24寸) */
+                 xl:h-[1200px] xl:py-24
+                 /* 大屏显示器适配 (27寸+) */
+                 2xl:h-[1500px] 2xl:py-32"
     >
       <div
         data-alt="core-value-content"
-        className="center z-10 flex flex-col items-center  mb-[4rem]"
+        className="center z-10 flex flex-col items-center
+                   /* 移动端间距 */
+                   mb-8 px-4
+                   /* 平板间距 */
+                   sm:mb-12 sm:px-6
+                   /* 小屏笔记本间距 */
+                   md:mb-[4rem] md:px-8
+                   /* 大屏笔记本间距 */
+                   lg:mb-[4rem] lg:px-12
+                   /* 桌面端间距 */
+                   xl:mb-[4rem] xl:px-16
+                   /* 大屏显示器间距 */
+                   2xl:mb-[4rem] 2xl:px-20"
       >
-        <h2 className="text-white text-[3.375rem] leading-[100%] font-normal mb-[1.5rem]">
+        <h2
+          className="text-white font-normal text-center
+                       /* 移动端字体 */
+                       text-[1.5rem] leading-[110%] mb-4
+                       /* 平板字体 */
+                       sm:text-[2rem] sm:leading-[110%] sm:mb-6
+                       /* 小屏笔记本字体 */
+                       md:text-[2.5rem] md:leading-[110%] md:mb-[1.5rem]
+                       /* 大屏笔记本字体 */
+                       lg:text-[3rem] lg:leading-[110%] lg:mb-[1.5rem]
+                       /* 桌面端字体 */
+                       xl:text-[3.375rem] xl:leading-[110%] xl:mb-[1.5rem]
+                       /* 大屏显示器字体 */
+                       2xl:text-[3.5rem] 2xl:leading-[110%] 2xl:mb-[1.5rem]"
+        >
           Pick a plan and make it yours
         </h2>
 
         {/* 计费切换 */}
-        <div className="h-[3.375rem] flex bg-black rounded-full p-[0.0625rem] mt-[1.5rem] border border-white/20">
+        <div
+          className="flex bg-black rounded-full border border-white/20
+                        /* 移动端尺寸 */
+                        h-[2.5rem] p-[0.0625rem] mt-4
+                        /* 平板尺寸 */
+                        sm:h-[3rem] sm:mt-6
+                        /* 小屏笔记本尺寸 */
+                        md:h-[3.375rem] md:mt-[1.5rem]
+                        /* 大屏笔记本尺寸 */
+                        lg:h-[3.375rem] lg:mt-[1.5rem]
+                        /* 桌面端尺寸 */
+                        xl:h-[3.375rem] xl:mt-[1.5rem]
+                        /* 大屏显示器尺寸 */
+                        2xl:h-[3.375rem] 2xl:mt-[1.5rem]"
+        >
           <button
             onClick={() => setBillingType("month")}
-            className={`box-border flex justify-center items-center w-[6rem]  text-base rounded-full transition-all duration-300 ${
+            className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
               billingType === "month"
                 ? "bg-white text-black"
                 : "text-white hover:text-gray-300"
-            }`}
+            }
+            /* 移动端按钮尺寸 */
+            w-[4.5rem] text-sm
+            /* 平板按钮尺寸 */
+            sm:w-[5rem] sm:text-sm
+            /* 小屏笔记本按钮尺寸 */
+            md:w-[6rem] md:text-base
+            /* 大屏笔记本按钮尺寸 */
+            lg:w-[6rem] lg:text-base
+            /* 桌面端按钮尺寸 */
+            xl:w-[6rem] xl:text-base
+            /* 大屏显示器按钮尺寸 */
+            2xl:w-[6rem] 2xl:text-base`}
           >
             Monthly
           </button>
           <button
             onClick={() => setBillingType("year")}
-            className={`box-border flex justify-center items-center w-[7.125rem]  text-base rounded-full transition-all duration-300 ${
+            className={`box-border flex justify-center items-center rounded-full transition-all duration-300 ${
               billingType === "year"
                 ? "bg-white text-black"
                 : "text-white hover:text-gray-300"
-            }`}
+            }
+            /* 移动端按钮尺寸 */
+            w-[5.5rem] text-sm
+            /* 平板按钮尺寸 */
+            sm:w-[6rem] sm:text-sm
+            /* 小屏笔记本按钮尺寸 */
+            md:w-[7.125rem] md:text-base
+            /* 大屏笔记本按钮尺寸 */
+            lg:w-[7.125rem] lg:text-base
+            /* 桌面端按钮尺寸 */
+            xl:w-[7.125rem] xl:text-base
+            /* 大屏显示器按钮尺寸 */
+            2xl:w-[7.125rem] 2xl:text-base`}
           >
             Yearly - <span className="text-[#FFCC6D]">20%</span>
           </button>
@@ -658,51 +1276,221 @@ function HomeModule5() {
       </div>
 
       {/* 主要价格卡片 */}
-      <div className="flex justify-between w-[90%] px-[12rem] mb-[2rem]">
+      <div
+        className="w-full max-w-[70%] mx-auto px-4
+                     /* 移动端 - 单列布局 */
+                     grid grid-cols-1 gap-4
+                     /* 平板 - 双列布局 */
+                     sm:grid-cols-2 sm:gap-6 sm:px-6
+                     /* 桌面端 - 三列布局 */
+                     md:grid-cols-3 md:gap-8 md:px-8
+                     /* 大屏 - 保持三列但增加间距 */
+                     lg:gap-10 lg:px-12
+                     xl:gap-12 xl:px-16
+                     2xl:gap-16 2xl:px-20"
+      >
         {pricingPlans.map((plan, index) => (
           <div
             key={index}
-            className=" w-[24rem] h-[38.125rem] bg-black rounded-2xl p-[1.5rem] border border-white/20"
+            className="bg-black rounded-2xl border border-white/20
+                       /* 移动端卡片尺寸 */
+                       p-4 min-h-[28rem]
+                       /* 平板卡片尺寸 */
+                       sm:p-5 sm:min-h-[32rem]
+                       /* 小屏笔记本卡片尺寸 */
+                       md:p-6 md:min-h-[36rem]
+                       /* 大屏笔记本卡片尺寸 */
+                       lg:p-[1.375rem] lg:min-h-[37rem]
+                       /* 桌面端卡片尺寸 */
+                       xl:p-[1.5rem] xl:min-h-[38.125rem]
+                       /* 大屏显示器卡片尺寸 */
+                       2xl:p-[1.75rem] 2xl:min-h-[40rem]"
           >
-            <h3 className="text-white text-2xl font-normal mb-[1rem]">
+            <h3
+              className="text-white font-normal
+                          /* 移动端标题 */
+                          text-lg mb-3
+                          /* 平板标题 */
+                          sm:text-xl sm:mb-4
+                          /* 小屏笔记本标题 */
+                          md:text-xl md:mb-4
+                          /* 大屏笔记本标题 */
+                          lg:text-2xl lg:mb-[1rem]
+                          /* 桌面端标题 */
+                          xl:text-2xl xl:mb-[1rem]
+                          /* 大屏显示器标题 */
+                          2xl:text-3xl 2xl:mb-[1.25rem]"
+            >
               {plan.title}
             </h3>
-            <div className="mb-[1rem]">
-              <span className="text-white text-[3.375rem] font-bold">
+            <div
+              className="mb-3
+                           /* 平板间距 */
+                           sm:mb-4
+                           /* 小屏笔记本间距 */
+                           md:mb-4
+                           /* 大屏笔记本间距 */
+                           lg:mb-[1rem]
+                           /* 桌面端间距 */
+                           xl:mb-[1rem]
+                           /* 大屏显示器间距 */
+                           2xl:mb-[1.25rem]"
+            >
+              <span
+                className="text-white font-bold
+                              /* 移动端价格字体 */
+                              text-2xl
+                              /* 平板价格字体 */
+                              sm:text-3xl
+                              /* 小屏笔记本价格字体 */
+                              md:text-[2.5rem]
+                              /* 大屏笔记本价格字体 */
+                              lg:text-[3rem]
+                              /* 桌面端价格字体 */
+                              xl:text-[3.375rem]
+                              /* 大屏显示器价格字体 */
+                              2xl:text-[3.75rem]"
+              >
                 ${plan.price}
               </span>
-              <span className="text-white text-xs ml-[0.5rem]">
+              <span
+                className="text-white ml-2
+                              /* 移动端单位字体 */
+                              text-xs
+                              /* 平板单位字体 */
+                              sm:text-xs
+                              /* 小屏笔记本单位字体 */
+                              md:text-xs
+                              /* 大屏笔记本单位字体 */
+                              lg:text-xs
+                              /* 桌面端单位字体 */
+                              xl:text-xs
+                              /* 大屏显示器单位字体 */
+                              2xl:text-sm"
+              >
                 / {billingType === "month" ? "mo" : "year"}
               </span>
             </div>
-            <p className="text-white text-[0.875rem] mb-[1rem]">
+            <p
+              className="text-white mb-4
+                          /* 移动端描述字体 */
+                          text-sm
+                          /* 平板描述字体 */
+                          sm:text-sm
+                          /* 小屏笔记本描述字体 */
+                          md:text-[0.875rem]
+                          /* 大屏笔记本描述字体 */
+                          lg:text-[0.875rem]
+                          /* 桌面端描述字体 */
+                          xl:text-[0.875rem]
+                          /* 大屏显示器描述字体 */
+                          2xl:text-base"
+            >
               {plan.credits}
             </p>
             {plan.issubscribed ? (
               <button
                 disabled
-                className="w-full bg-gray-400 text-gray-600 py-[0.75rem] rounded-full mb-[1rem] cursor-not-allowed border border-gray-300"
+                className="w-full bg-gray-400 text-gray-600 rounded-full cursor-not-allowed border border-gray-300
+                          /* 移动端按钮 */
+                          py-2 mb-4 text-sm
+                          /* 平板按钮 */
+                          sm:py-3 sm:mb-4 sm:text-base
+                          /* 小屏笔记本按钮 */
+                          md:py-[0.75rem] md:mb-[1rem] md:text-base
+                          /* 大屏笔记本按钮 */
+                          lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
+                          /* 桌面端按钮 */
+                          xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
+                          /* 大屏显示器按钮 */
+                          2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
               >
                 Already Owned
               </button>
             ) : (
               <button
                 onClick={() => handleSubscribe(plan.title)}
-                className="w-full bg-white text-black py-[0.75rem] rounded-full mb-[1rem] hover:bg-black hover:text-white transition-colors border border-white/20"
+                className="w-full bg-white text-black rounded-full hover:bg-black hover:text-white transition-colors border border-white/20
+                          /* 移动端按钮 */
+                          py-2 mb-4 text-sm
+                          /* 平板按钮 */
+                          sm:py-3 sm:mb-4 sm:text-base
+                          /* 小屏笔记本按钮 */
+                          md:py-[0.75rem] md:mb-[1rem] md:text-base
+                          /* 大屏笔记本按钮 */
+                          lg:py-[0.75rem] lg:mb-[1rem] lg:text-base
+                          /* 桌面端按钮 */
+                          xl:py-[0.75rem] xl:mb-[1rem] xl:text-base
+                          /* 大屏显示器按钮 */
+                          2xl:py-[0.875rem] 2xl:mb-[1.25rem] 2xl:text-lg"
               >
                 {plan.buttonText}
               </button>
             )}
-            <p className="w-full text-center text-white/60 text-[0.75rem] mb-[2rem]">
+            <p
+              className="w-full text-center text-white/60 mb-4
+                          /* 移动端提示文字 */
+                          text-xs
+                          /* 平板提示文字 */
+                          sm:text-xs
+                          /* 小屏笔记本提示文字 */
+                          md:text-[0.75rem] md:mb-[2rem]
+                          /* 大屏笔记本提示文字 */
+                          lg:text-[0.75rem] lg:mb-[2rem]
+                          /* 桌面端提示文字 */
+                          xl:text-[0.75rem] xl:mb-[2rem]
+                          /* 大屏显示器提示文字 */
+                          2xl:text-sm 2xl:mb-[2.5rem]"
+            >
               * Billed monthly until cancelled
             </p>
-            <ul className="space-y-[1rem]">
+            <ul
+              className="space-y-2
+                          /* 平板特性列表间距 */
+                          sm:space-y-3
+                          /* 小屏笔记本特性列表间距 */
+                          md:space-y-[1rem]
+                          /* 大屏笔记本特性列表间距 */
+                          lg:space-y-[1rem]
+                          /* 桌面端特性列表间距 */
+                          xl:space-y-[1rem]
+                          /* 大屏显示器特性列表间距 */
+                          2xl:space-y-[1.25rem]"
+            >
               {plan.features.map((feature, featureIndex) => (
                 <li
                   key={featureIndex}
-                  className="flex items-center text-white text-[0.875rem]"
+                  className="flex items-center text-white
+                            /* 移动端特性文字 */
+                            text-sm
+                            /* 平板特性文字 */
+                            sm:text-sm
+                            /* 小屏笔记本特性文字 */
+                            md:text-[0.875rem]
+                            /* 大屏笔记本特性文字 */
+                            lg:text-[0.875rem]
+                            /* 桌面端特性文字 */
+                            xl:text-[0.875rem]
+                            /* 大屏显示器特性文字 */
+                            2xl:text-base"
                 >
-                  <span className="text-[#C73BFF] mr-[0.5rem]">✓</span>
+                  <span
+                    className="text-[#C73BFF] mr-2
+                                  /* 移动端勾号间距 */
+                                  text-sm
+                                  /* 平板勾号间距 */
+                                  sm:mr-2 sm:text-base
+                                  /* 小屏笔记本勾号间距 */
+                                  md:mr-[0.5rem] md:text-base
+                                  /* 大屏笔记本勾号间距 */
+                                  lg:mr-[0.5rem] lg:text-base
+                                  /* 桌面端勾号间距 */
+                                  xl:mr-[0.5rem] xl:text-base
+                                  /* 大屏显示器勾号间距 */
+                                  2xl:mr-[0.625rem] 2xl:text-lg"
+                  >
+                    ✓
+                  </span>
                   {feature}
                 </li>
               ))}