add amimation swiper

pnpm-lock.yaml

@@ -41,6 +41,12 @@ importers:
       react-dom:
         specifier: ^18
         version: 18.3.1(react@18.3.1)
+      react-seamless-scroll:
+        specifier: ^1.0.3
+        version: 1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      swiper:
+        specifier: ^11.1.14
+        version: 11.1.14
     devDependencies:
       '@types/node':
         specifier: ^20
@@ -1564,6 +1570,12 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
+  react-seamless-scroll@1.0.3:
+    resolution: {integrity: sha512-QSKrkhwZOphunAQd+5CZZ4StecsDILllVEOwR352TBVmzmhe03qxljMyOHXbNCNTujAJ/oDJytxE43jpxcqieQ==}
+    peerDependencies:
+      react: ^16.8.6
+      react-dom: ^16.8.6
+
   react-transition-group@4.4.5:
     resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
     peerDependencies:
@@ -1757,6 +1769,10 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  swiper@11.1.14:
+    resolution: {integrity: sha512-VbQLQXC04io6AoAjIUWuZwW4MSYozkcP9KjLdrsG/00Q/yiwvhz9RQyt0nHXV10hi9NVnDNy1/wv7Dzq1lkOCQ==}
+    engines: {node: '>= 4.7.0'}
+
   tailwindcss@3.4.13:
     resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==}
     engines: {node: '>=14.0.0'}
@@ -2806,8 +2822,8 @@ snapshots:
       '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.1)
       eslint-plugin-react: 7.37.1(eslint@8.57.1)
       eslint-plugin-react-hooks: 5.0.0-canary-7118f5dd7-20230705(eslint@8.57.1)
@@ -2826,37 +2842,37 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7
       enhanced-resolve: 5.17.1
       eslint: 8.57.1
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 8.8.1(eslint@8.57.1)(typescript@5.6.3)
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -2867,7 +2883,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.1
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.8.1(eslint@8.57.1)(typescript@5.6.3))(eslint@8.57.1))(eslint@8.57.1))(eslint@8.57.1)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -3629,6 +3645,11 @@ snapshots:
 
   react-is@18.3.1: {}
 
+  react-seamless-scroll@1.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-transition-group@4.4.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@babel/runtime': 7.25.7
@@ -3852,6 +3873,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  swiper@11.1.14: {}
+
   tailwindcss@3.4.13:
     dependencies:
       '@alloc/quick-lru': 5.2.0

src/app/[[...lang]]/page.tsx

@@ -4,6 +4,7 @@ import Header from "@/app/components/header";
 import Footer from "@/app/components/footer";
 
 import Examples from "../components/Examples";
+import ChannelSwiper from "../components/ChannelSwiper";
 
 export default async function Home(props: { params: { lang: string[] } }) {
   const lang = props.params.lang || ["zh"];
@@ -68,6 +69,22 @@ export default async function Home(props: { params: { lang: string[] } }) {
               <div className="absolute w-[691px] text-[32px] top-[100px] right-[95px] text-[#333333] text-right font-semibold">{dict.lightweightDeployment}</div>
               <div className="absolute w-[712px] text-[32px] top-[145px] right-[95px] text-[#333333] text-right font-semibold">{dict.simplifyProcess}</div>
             </div>
+
+            <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[50px]">
+              <div
+                className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
+                style={{
+                  background: "linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)",
+                  backgroundClip: "text",
+                  WebkitTextFillColor: "transparent",
+                }}
+              >
+                渠道支持
+              </div>
+            </div>
+            <ChannelSwiper />
+
+
             <div className="w-full flex flex-col justify-center items-center mt-[98px]" id="case">
               <div
                 className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
@@ -81,7 +98,6 @@ export default async function Home(props: { params: { lang: string[] } }) {
               </div>
               {/* <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div> */}
             </div>
-
             <Examples dict={dict} lang={lang} />
 
             <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]" id="contact">

src/app/components/AutoplayCarousel.tsx

@@ -0,0 +1,83 @@
+import { ReactElement, useEffect, useLayoutEffect } from "react";
+import * as React from "react";
+
+interface Props<T> {
+  Item: (item: T) => ReactElement;
+  showNum: number;
+  speed: number;
+  containerWidth: number;
+  data: T[];
+  hoverStop?: boolean;
+  direction?: "left" | "right";
+}
+
+const fillArray = (arr: any, length: number) => {
+  const result: any = [];
+  while (result.length < length) {
+    result.push(...arr);
+  }
+  return result.concat(result);
+};
+
+function AutoplayCarousel<T>({ Item, showNum, speed, containerWidth, data, hoverStop = false, direction = "left" }: Props<T>) {
+  const showData = fillArray(data, showNum);
+  const length = showData.length;
+  const itemWidth = containerWidth / showNum;
+
+  useLayoutEffect(() => {
+    const style = document.createElement("style");
+
+    let start = "0";
+    let end = `-${(itemWidth * length) / 2}`;
+    if (direction === "right") {
+      start = end;
+      end = "0";
+    }
+
+    const keyframes = `
+      @keyframes templates-partner-moving {
+        0% {
+          transform: translateX(${start}px);
+        }
+        100% {
+          transform: translateX(${end}px);
+        }
+      }
+    `;
+
+    const hoverStyles = hoverStop
+      ? `
+      .list:hover {
+        animation-play-state: paused !important;
+      }
+    `
+      : ``;
+
+    style.innerText = keyframes + hoverStyles;
+    document.head.appendChild(style);
+
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  return (
+    <div style={{ width: `${containerWidth}px` }} className="wrap">
+      <div
+        className="list"
+        style={{
+          width: `${itemWidth * length}px`,
+          animation: `templates-partner-moving ${(length / showNum / 2) * speed}s infinite linear`,
+        }}
+      >
+        {showData.map((item, index) => (
+          <div key={index} style={{ width: `${(itemWidth * 100) / containerWidth}%` }}>
+            <Item {...item} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default AutoplayCarousel;

src/app/components/ChannelSwiper.tsx

@@ -0,0 +1,41 @@
+"use client";
+import AutoplayCarousel from "./AutoplayCarousel";
+
+interface ItemProps {
+  url: string;
+}
+const data: ItemProps[] = [
+  { url: "logo-yandex.png" },
+  { url: "logo-vungle.png" },
+  { url: "logo-unity.png" },
+  { url: "logo-tiktok.png" },
+  { url: "logo-tapjoy.png" },
+  { url: "logo-pangle.png" },
+  { url: "logo-moloco.png" },
+  { url: "logo-mintegral.png" },
+  { url: "logo-liftoff.png" },
+  { url: "logo-kwai.png" },
+  { url: "logo-google.png" },
+  { url: "logo-facebook.png" },
+  { url: "logo-chartboost.png" },
+  { url: "logo-bigoads.png" },
+  { url: "logo-applovin.png" },
+];
+
+export default function ChannelSwiper() {
+  const Item = (item: ItemProps) => {
+    return (
+      <div className=" mx-1 lg:mx-8 w-[100px] h-[50px]  lg:w-auto lg:h-[70px] flex items-center">
+        <img src={`https://www-soyootech.oss-cn-hangzhou.aliyuncs.com/channel/${item.url}`} className="" alt="" />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className="overflow-hidden flex items-center">
+        <AutoplayCarousel Item={Item} containerWidth={1400} showNum={8} speed={20} data={data} />
+      </div>
+    </>
+  );
+}

src/app/globals.css

@@ -3,147 +3,165 @@
 @tailwind utilities;
 
 html::-webkit-scrollbar {
-	width: 8px;
+  width: 8px;
 }
 
 html::-webkit-scrollbar-thumb {
-	background-color: rgba(169, 169, 169, 0.729);
+  background-color: rgba(169, 169, 169, 0.729);
-	border-radius: 10px;
+  border-radius: 10px;
 }
 
 html::-webkit-scrollbar-track {
-	background: #fff;
+  background: #fff;
 }
 
-
 html {
-	font-size: 14.4px;
+  font-size: 14.4px;
 }
 .menu-item {
-	display: block;
+  display: block;
 }
 @media (min-width: 300px) and (max-width: 350px) {
-	html {
+  html {
-		font-size: 3px;
+    font-size: 3px;
-	}
+  }
 }
 @media (min-width: 350px) and (max-width: 400px) {
-	html {
+  html {
-		font-size: 3.5px;
+    font-size: 3.5px;
-	}
+  }
 }
 @media (min-width: 400px) and (max-width: 450px) {
-	html {
+  html {
-		font-size: 4px;
+    font-size: 4px;
-	}
+  }
 }
 @media (min-width: 450px) and (max-width: 500px) {
-	html {
+  html {
-		font-size: 4.5px;
+    font-size: 4.5px;
-	}
+  }
 }
 @media (min-width: 500px) and (max-width: 550px) {
-	html {
+  html {
-		font-size: 5px;
+    font-size: 5px;
-	}
+  }
 }
 @media (min-width: 550px) and (max-width: 600px) {
-	html {
+  html {
-		font-size: 5.5px;
+    font-size: 5.5px;
-	}
+  }
 }
 @media (min-width: 600px) and (max-width: 650px) {
-	html {
+  html {
-		font-size: 6px;
+    font-size: 6px;
-	}
+  }
 }
 @media (min-width: 650px) and (max-width: 700px) {
-	html {
+  html {
-		font-size: 6.5px;
+    font-size: 6.5px;
-	}
+  }
 }
 @media (min-width: 700px) and (max-width: 750px) {
-	html {
+  html {
-		font-size: 7px;
+    font-size: 7px;
-	}
+  }
 }
 @media (min-width: 750px) and (max-width: 800px) {
-	html {
+  html {
-		font-size: 7.6px;
+    font-size: 7.6px;
-	}
+  }
 }
 @media (min-width: 800px) and (max-width: 850px) {
-	html {
+  html {
-		font-size: 8px;
+    font-size: 8px;
-	}
+  }
 }
 @media (min-width: 850px) and (max-width: 900px) {
-	html {
+  html {
-		font-size: 8.5px;
+    font-size: 8.5px;
-	}
+  }
 }
 @media (min-width: 900px) and (max-width: 950px) {
-	html {
+  html {
-		font-size: 9px;
+    font-size: 9px;
-	}
+  }
 }
 @media (min-width: 1000px) and (max-width: 1050px) {
-	html {
+  html {
-		font-size: 10px;
+    font-size: 10px;
-	}
+  }
 }
 @media (min-width: 1050px) and (max-width: 1100px) {
-	html {
+  html {
-		font-size: 10.5px;
+    font-size: 10.5px;
-	}
+  }
 }
 @media (min-width: 1100px) and (max-width: 1150px) {
-	html {
+  html {
-		font-size: 11px;
+    font-size: 11px;
-	}
+  }
 }
 @media (min-width: 1150px) and (max-width: 1200px) {
-	html {
+  html {
-		font-size: 11.5px;
+    font-size: 11.5px;
-	}
+  }
 }
 @media (min-width: 1200px) and (max-width: 1250px) {
-	html {
+  html {
-		font-size: 12px;
+    font-size: 12px;
-	}
+  }
 }
 @media (min-width: 1250px) and (max-width: 1300px) {
-	html {
+  html {
-		font-size: 12.5px;
+    font-size: 12.5px;
-	}
+  }
 }
 @media (min-width: 1300px) and (max-width: 1350px) {
-	html {
+  html {
-		font-size: 13px;
+    font-size: 13px;
-	}
+  }
 }
 @media (min-width: 1350px) and (max-width: 1400px) {
-	html {
+  html {
-		font-size: 13.5px;
+    font-size: 13.5px;
-	}
+  }
 }
 @media (min-width: 1400px) and (max-width: 1450px) {
-	html {
+  html {
-		font-size: 14px;
+    font-size: 14px;
-	}
+  }
 }
 @media (min-width: 1440px) {
-	html {
+  html {
-		font-size: 14.4px;
+    font-size: 14.4px;
-	}
+  }
 }
 @media (max-width: 1440px) {
-	.menu-item {
+  .menu-item {
-		display: none;
+    display: none;
-	}
+  }
 }
 @media (min-width: 1440px) {
-	.menu-item {
+  .menu-item {
-		display: block;
+    display: block;
-	}
+  }
+}
+
+.wrap {
+  overflow: hidden;
+}
+.wrap .list {
+  position: relative;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  display: flex;
+}
+
+@media (max-width: 768px) {
+  .wrap .list > div {
+    width: 150px !important;
+    display: flex;
+    justify-content: center;
+  }
 }

tsconfig.json

@@ -1,6 +1,10 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,16 +15,27 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
+    "baseUrl": "./",
     "incremental": true,
+    "noImplicitAny": false,
     "plugins": [
       {
         "name": "next"
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
-  "exclude": ["node_modules"]
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }