update: 英文排版+打包方式修改

next.config.mjs

@@ -1,6 +1,5 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',  
 };
 
 export default nextConfig;

out/_next/static/Ed69oq3AL5GWmDlpBpxgP/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST={__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/_error":["static/chunks/pages/_error-2b1e5691dd2d9302.js"],sortedPages:["/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

out/_next/static/Ed69oq3AL5GWmDlpBpxgP/_ssgManifest.js

@@ -1 +0,0 @@
-self.__SSG_MANIFEST=new Set(["\u002F[lang]\u002Fhome"]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()

out/_next/static/chunks/app/[lang]/home/page-c9f0bc3d29eecfb6.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[958],{9238:function(e,t,n){Promise.resolve().then(n.bind(n,7168))},7168:function(e,t,n){"use strict";n.d(t,{default:function(){return c}});var r=n(881),s=n(6509),i=n(4149);function a(e){let{dict:t,lang:n}=e,[a,c]=(0,i.useState)(!1);return(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:"relative",children:[(0,r.jsxs)("div",{className:"flex items-center w-[129px] h-[28px] bg-[#EEF1F6]    border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer",onClick:()=>c(!a),children:[(0,r.jsx)("img",{src:"/common/earth.png",width:16.5,height:16.5,alt:"logo"}),(0,r.jsx)("div",{className:"flex-1 text-[14px] text-[#333333] mx-[9px]",children:null==t?void 0:t.lang}),(0,r.jsx)("img",{className:"transition-transform duration-300 transform rotate-0 ".concat(a&&"rotate-180"),src:"/common/arrow.png",width:10,height:5,alt:"logo"})]}),(0,r.jsx)(s.default,{href:"zh"===n?"/en/home.html":"/index.html",children:(0,r.jsx)("div",{className:"absolute ".concat(!a&&"hidden"," top-[30px] w-[129px] h-[28px] \n              bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block"),children:(0,r.jsx)("div",{className:"text-[14px] text-[#333333]",children:null==t?void 0:t.lang1})})})]})})}function c(e){let{dict:t,lang:n}=e,[c,l]=(0,i.useState)(t.home),o=[{name:t.home,href:"#home"},{name:t.services,href:"#service"},{name:t.caseGallery,href:"#case"},{name:t.contactUs,href:"#contact "}];return(0,r.jsx)(r.Fragment,{children:(0,r.jsxs)("div",{className:"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8]",style:{borderBottom:"1px solid #D8D8D8"},children:[(0,r.jsx)("img",{src:"/common/logo.png",width:180,height:47,alt:"logo"}),(0,r.jsx)("div",{className:"flex flex-1 items-end h-[80px] mx-[13px]",children:o.map(e=>(0,r.jsx)(s.default,{href:e.href,children:(0,r.jsxs)("div",{className:"text-center cursor-pointer",onClick:()=>l(e.name),children:[(0,r.jsx)("div",{className:"my-[10px] w-[144px] text-[18px]",children:e.name}),c===e.name?(0,r.jsx)("img",{src:"/common/tab_checked.png",width:144,height:8,alt:""}):(0,r.jsx)("div",{className:"h-[8px]"})]})},e.name))}),(0,r.jsx)("div",{className:"",children:(0,r.jsx)(a,{dict:t,lang:n})})]})})}}},function(e){e.O(0,[509,985,330,744],function(){return e(e.s=9238)}),_N_E=e.O()}]);

out/_next/static/chunks/app/_not-found/page-737aa1d9ace74c2b.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[409],{6325:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_not-found/page",function(){return n(9094)}])},9094:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return s}}),n(8806);let i=n(881);n(4149);let o={fontFamily:'system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',height:"100vh",textAlign:"center",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},l={display:"inline-block"},r={display:"inline-block",margin:"0 20px 0 0",padding:"0 23px 0 0",fontSize:24,fontWeight:500,verticalAlign:"top",lineHeight:"49px"},d={fontSize:14,fontWeight:400,lineHeight:"49px",margin:0};function s(){return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)("title",{children:"404: This page could not be found."}),(0,i.jsx)("div",{style:o,children:(0,i.jsxs)("div",{children:[(0,i.jsx)("style",{dangerouslySetInnerHTML:{__html:"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}),(0,i.jsx)("h1",{className:"next-error-h1",style:r,children:"404"}),(0,i.jsx)("div",{style:l,children:(0,i.jsx)("h2",{style:d,children:"This page could not be found."})})]})})]})}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)}},function(e){e.O(0,[985,330,744],function(){return e(e.s=6325)}),_N_E=e.O()}]);

out/_next/static/chunks/app/layout-706646e3c811248c.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[185],{62:function(e,a,_){Promise.resolve().then(_.t.bind(_,5418,23)),Promise.resolve().then(_.t.bind(_,2045,23)),Promise.resolve().then(_.t.bind(_,8226,23))},8226:function(){},2045:function(e){e.exports={style:{fontFamily:"'__geistMono_c3aa02', '__geistMono_Fallback_c3aa02'"},className:"__className_c3aa02",variable:"__variable_c3aa02"}},5418:function(e){e.exports={style:{fontFamily:"'__geistSans_1e4310', '__geistSans_Fallback_1e4310'"},className:"__className_1e4310",variable:"__variable_1e4310"}}},function(e){e.O(0,[473,985,330,744],function(){return e(e.s=62)}),_N_E=e.O()}]);

out/_next/static/chunks/main-app-4f9373d734aab50e.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[744],{3030:function(e,n,t){Promise.resolve().then(t.t.bind(t,1013,23)),Promise.resolve().then(t.t.bind(t,8073,23)),Promise.resolve().then(t.t.bind(t,1626,23)),Promise.resolve().then(t.t.bind(t,6102,23)),Promise.resolve().then(t.t.bind(t,4262,23)),Promise.resolve().then(t.t.bind(t,2609,23))}},function(e){var n=function(n){return e(e.s=n)};e.O(0,[985,330],function(){return n(39),n(3030)}),_N_E=e.O()}]);

out/_next/static/chunks/pages/_app-d82aa3db5a62fcc3.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[888],{9452:function(n,_,u){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_app",function(){return u(4820)}])}},function(n){var _=function(_){return n(n.s=_)};n.O(0,[774,179],function(){return _(9452),_(6699)}),_N_E=n.O()}]);

out/_next/static/chunks/pages/_error-2b1e5691dd2d9302.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[820],{7022:function(n,_,u){(window.__NEXT_P=window.__NEXT_P||[]).push(["/_error",function(){return u(3936)}])}},function(n){n.O(0,[888,774,179],function(){return n(n.s=7022)}),_N_E=n.O()}]);

out/_next/static/chunks/webpack-45c4f5b90c99fa82.js

@@ -1 +0,0 @@
-!function(){"use strict";var e,t,n,r,o,u,i,c,f,a={},l={};function d(e){var t=l[e];if(void 0!==t)return t.exports;var n=l[e]={exports:{}},r=!0;try{a[e](n,n.exports,d),r=!1}finally{r&&delete l[e]}return n.exports}d.m=a,e=[],d.O=function(t,n,r,o){if(n){o=o||0;for(var u=e.length;u>0&&e[u-1][2]>o;u--)e[u]=e[u-1];e[u]=[n,r,o];return}for(var i=1/0,u=0;u<e.length;u++){for(var n=e[u][0],r=e[u][1],o=e[u][2],c=!0,f=0;f<n.length;f++)i>=o&&Object.keys(d.O).every(function(e){return d.O[e](n[f])})?n.splice(f--,1):(c=!1,o<i&&(i=o));if(c){e.splice(u--,1);var a=r();void 0!==a&&(t=a)}}return t},d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},d.t=function(e,r){if(1&r&&(e=this(e)),8&r||"object"==typeof e&&e&&(4&r&&e.__esModule||16&r&&"function"==typeof e.then))return e;var o=Object.create(null);d.r(o);var u={};t=t||[null,n({}),n([]),n(n)];for(var i=2&r&&e;"object"==typeof i&&!~t.indexOf(i);i=n(i))Object.getOwnPropertyNames(i).forEach(function(t){u[t]=function(){return e[t]}});return u.default=function(){return e},d.d(o,u),o},d.d=function(e,t){for(var n in t)d.o(t,n)&&!d.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},d.f={},d.e=function(e){return Promise.all(Object.keys(d.f).reduce(function(t,n){return d.f[n](e,t),t},[]))},d.u=function(e){},d.miniCssF=function(e){},d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r={},o="_N_E:",d.l=function(e,t,n,u){if(r[e]){r[e].push(t);return}if(void 0!==n)for(var i,c,f=document.getElementsByTagName("script"),a=0;a<f.length;a++){var l=f[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+n){i=l;break}}i||(c=!0,(i=document.createElement("script")).charset="utf-8",i.timeout=120,d.nc&&i.setAttribute("nonce",d.nc),i.setAttribute("data-webpack",o+n),i.src=d.tu(e)),r[e]=[t];var s=function(t,n){i.onerror=i.onload=null,clearTimeout(p);var o=r[e];if(delete r[e],i.parentNode&&i.parentNode.removeChild(i),o&&o.forEach(function(e){return e(n)}),t)return t(n)},p=setTimeout(s.bind(null,void 0,{type:"timeout",target:i}),12e4);i.onerror=s.bind(null,i.onerror),i.onload=s.bind(null,i.onload),c&&document.head.appendChild(i)},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.tt=function(){return void 0===u&&(u={createScriptURL:function(e){return e}},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(u=trustedTypes.createPolicy("nextjs#bundler",u))),u},d.tu=function(e){return d.tt().createScriptURL(e)},d.p="/_next/",i={272:0,473:0},d.f.j=function(e,t){var n=d.o(i,e)?i[e]:void 0;if(0!==n){if(n)t.push(n[2]);else if(/^(272|473)$/.test(e))i[e]=0;else{var r=new Promise(function(t,r){n=i[e]=[t,r]});t.push(n[2]=r);var o=d.p+d.u(e),u=Error();d.l(o,function(t){if(d.o(i,e)&&(0!==(n=i[e])&&(i[e]=void 0),n)){var r=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;u.message="Loading chunk "+e+" failed.\n("+r+": "+o+")",u.name="ChunkLoadError",u.type=r,u.request=o,n[1](u)}},"chunk-"+e,e)}}},d.O.j=function(e){return 0===i[e]},c=function(e,t){var n,r,o=t[0],u=t[1],c=t[2],f=0;if(o.some(function(e){return 0!==i[e]})){for(n in u)d.o(u,n)&&(d.m[n]=u[n]);if(c)var a=c(d)}for(e&&e(t);f<o.length;f++)r=o[f],d.o(i,r)&&i[r]&&i[r][0](),i[r]=0;return d.O(a)},(f=self.webpackChunk_N_E=self.webpackChunk_N_E||[]).forEach(c.bind(null,0)),f.push=c.bind(null,f.push.bind(f))}();

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

@@ -1,8 +1,4 @@
-export async function generateStaticParams() {
-    return ['en', 'zh'].map((post) => ({
-        lang: post,
-    }))
-}
+
 
 
 
@@ -17,15 +13,15 @@ type CaseType = {
 }
 export type PropsType = {
     params: {
-      lang: string;
+      lang: string[];
     };
 }
 
 
 
 export default async function Home (props: PropsType) {
-    const lang = props.params.lang;
-    const dict = await getDictionary(lang);
+    const lang = props.params.lang || ['zh'];
+    const dict = await getDictionary(lang[0]);
     const caseList: CaseType[] = [
         { img: '/home/case_1.png' },
         { img: '/home/case_2.png' },
@@ -45,12 +41,12 @@ export default async function Home (props: PropsType) {
     ]
     return <>
         <div className='w-full'>
-            <div className="w-[1440px] mx-auto">
+            <div className="w-min-[1440px] w-max-[1920px] mx-auto">
                 <Header dict={dict} lang={lang} />
                 <section id="home">
-                    <div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[172px]">
+                    <div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[72px]">
                         <div 
-                            className="text-[46px] leading-[62px] w-[368px] text-center"
+                            className="text-[46px] leading-[62px] w-[585px] text-center"
                         >
                             <div 
                             className="font-black"
@@ -135,6 +131,7 @@ export default async function Home (props: PropsType) {
                         { dict.expandInfluence }
                         </div>
                     </div>      
+                    <section id="case"> 
                     <div className="w-full h-[317px] relative mt-[83px]">
                         <img
                             className="absolute"
@@ -144,16 +141,17 @@ export default async function Home (props: PropsType) {
                             alt=""
                         
                         />
-                        <div className="absolute w-[610px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold">
+                        <div className="absolute w-[691px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold">
                         { dict.lightweightDeployment }
                         </div>
-                        <div className="absolute w-[600px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
+                        <div className="absolute w-[712px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
                         { dict.simplifyProcess }
                         </div>
                     </div>  
+                    
                     <div className="w-full flex flex-col justify-center items-center mt-[98px]">
                         <div 
-                            className="leading-[34px] text-[36px] font-black w-[150px] mb-[11px]"
+                            className="leading-[42px] text-[36px] font-black w-[300px] mb-[11px] text-center"
                             style={{
                                 background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
                                 backgroundClip: 'text',
@@ -162,20 +160,28 @@ export default async function Home (props: PropsType) {
                         >{ dict.caseGallery }</div>
                         <div className="text-[19px] text-[#59676C]">{ dict.clickNow }</div>
                     </div> 
+                    </section>
                
-                <section id="case">
                     <div className="w-full px-[40px] flex flex-wrap justify-center gap-[50px] mt-[34px] mb-[83px]">
                         {
                             caseList.map((item: CaseType, index: number) => {
-                                return <div key={'key'+index} className="cursor-pointer">
+                                return <div key={'key'+index} className="cursor-pointer relative group">
+                                    <div className='hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px]'>
                                         <img
-                                        className="hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] 
+                                            className="rounded-[60px] 
                                             transition ease-in-out duration-300"
                                             src={item.img}
                                             width={300}
                                             height={300}
                                             alt=""
                                         />
+                                        <div className='absolute bottom-0 w-full h-[81px] bg-[#002653] text-center 
+                                        text-white text-[30px] hidden group-hover:block '
+                                        style={{borderRadius: '0px 0px 60px 60px', lineHeight: '81px'}}
+                                        >
+                                            {dict.clickToPlay}
+                                        </div>
+                                    </div>
                                 </div>
                             })
                         }
@@ -186,11 +192,11 @@ export default async function Home (props: PropsType) {
                             <div>{ dict.contactUs1 }</div>
                         </div>
                     </div>  
-            </section>
+          
             <section id="contact">
                     <div className="w-full flex flex-col justify-center items-center mt-[98px] mb-[59px]">
                         <div 
-                            className="leading-[34px] text-[36px] font-black w-[150px] mb-[11px]"
+                            className="leading-[34px] text-[36px] font-black w-[300px] mb-[11px] text-center"
                             style={{
                                 background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
                                 backgroundClip: 'text',

src/app/components/header.tsx

@@ -3,16 +3,17 @@ import Link from "next/link";
 import { useState } from "react";
 
 
+
 type NavType = {
     name: string;
     href: string;
 }
 
-function SplitButton(props: {dict: Record<string, string>, lang: string}) {
+function SplitButton(props: {dict: Record<string, string>, lang: string[]}) {
   const { dict, lang } = props
   const [show, setShow] = useState(false)
     return <>
-    <div className="relative">
+    <div className="">
         <div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
         border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px] cursor-pointer" 
         onClick={() => setShow(!show)}>
@@ -32,17 +33,21 @@ function SplitButton(props: {dict: Record<string, string>, lang: string}) {
             />
         </div>
         {
-            <Link href={lang === 'zh' ? '/en/home.html' : '/index.html'}>
-              <div className={`absolute ${!show && 'hidden'} top-[30px] w-[129px] h-[28px] 
+            
+              <div className={`absolute ${!show && 'hidden'} w-[100vw] h-[100vh] left-0 top-0 z-[1000]`} onClick={() => setShow(false)}>
+                <Link href={lang[0] === 'zh' ? '/en' : '/'}>
+                  <div className={`absolute right-[40px] top-[68px] w-[129px] h-[28px] 
                   bg-[#EEF1F6] text-center transition-all duration-300 origin-top group-hover:block`}>
                       <div className="text-[14px] text-[#333333]">{dict?.lang1}</div>
                   </div>
                 </Link>
+              </div>
+            
         }
       </div>
     </>
 }
-export default function Header(props: {dict: Record<string, string>, lang: string}) {
+export default function Header(props: {dict: Record<string, string>, lang: string[]}) {
   const { dict, lang } = props
   const [activeTab, setActiveTab] = useState(dict.home)
     const navList: NavType[] = [
@@ -64,7 +69,7 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
         },
     ]
     return (<>
-        <div className={"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8]"}
+        <div className={"flex items-center px-[20px] h-[80px] border-b-1 border-solid border-[#D8D8D8] fixed w-full bg-white z-[999]"}
           style={{ borderBottom: '1px solid #D8D8D8' }}
         >
           <img
@@ -90,9 +95,11 @@ export default function Header(props: {dict: Record<string, string>, lang: strin
               }
           </div>
           <div className="">
+         
             <SplitButton dict={dict} lang={lang} />
           </div>
         </div>
+        <div className="h-[80px]"></div>
       </>
     )
 }

src/dictionaries/en.json

@@ -3,21 +3,21 @@
     "lang1": "简体中文",
     "home": "Home",
     "services": "Services",
-    "caseGallery": "Case gallery",
+    "caseGallery": "Case Gallery",
     "contactUs": "Contact Us",
-    "FocusingOnPlayableAds": "Focusing on playable ads",
-    "goOverseas": "comprehensively assisting the game to go overseas",
-    "customized": "100% customized , tailored to the needs of the project to create a playable ad Ensure full compliance with product image and market positioning",
-    "ABTesting": "Support A/B testing, by optimizing the material content",
-    "iterateGameplay": "Iterate gameplay to improve conversion rate and user experience",
-    "multiLanguage": "Multi-language support, covering the global multi-language version",
-    "breakingGeographical": "Breaking geographical restrictions and realizing internationalized layout",
-    "allChannel": "All-channel adaptation, access to major mainstream distribution channels",
-    "expandInfluence": "Let your products reach more potential users and expand your brand influence",
-    "lightweightDeployment": "Lightweight deployment, providing convenient product effect preview solutions",
-    "simplifyProcess": "Simplify the user decision-making process, easy to track the progress of each stage",
+    "FocusingOnPlayableAds": "Realization of",
+    "goOverseas": "high quality playable ads",
+    "customized": "100% customized, Ensure full compliance with product image and market positioning",
+    "ABTesting": "Supports A/B testing to improve",
+    "iterateGameplay": "conversions through iterative gameplay",
+    "multiLanguage": "Multi-language support and",
+    "breakingGeographical": "internationalized layout",
+    "allChannel": "Omni-channel adaptation to",
+    "expandInfluence": "expand brand influence",
+    "lightweightDeployment": "Lightweight deployment, providing",
+    "simplifyProcess": "convenient product effect preview solutions",
     "clickNow": "Click on the icon to experience it now",
-    "seeMore": "Want to see more?",
+    "seeMore": "See more?",
     "contactUs1": "Contact us!",
     "businessCooperation": "Business Cooperation/Job Hunting:",
     "addWeChat": "Add WeChat to enjoy exclusive services",
@@ -27,6 +27,7 @@
     "legalAgreements": "Legal & Agreements",
     "privacyPolicy": "Privacy Policy",
     "userAgreement": "User Agreement",
-    "productPricing": "Product Pricing"
+    "productPricing": "Product Pricing",
+    "clickToPlay": "Click to play"
 
 }

src/dictionaries/zh.json

@@ -27,5 +27,6 @@
     "legalAgreements": "法律与协议",
     "privacyPolicy": "隐私条款",
     "userAgreement": "用户协议",
-    "productPricing": "产品定价"
+    "productPricing": "产品定价",
+    "clickToPlay": "点击游玩"
 }