feat: 案例中心静态

next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    i18n: {
+      defaultLocale: 'en',
+      locales: ['en', 'zh-CN'],
+    },
+}

next.config.mjs

@@ -1,4 +1,9 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    i18n: {
+        defaultLocale: 'en',
+        locales: ['en', 'zh-CN'],
+    }
+};
 
 export default nextConfig;

package.json

@@ -12,9 +12,12 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/material": "^6.1.3",
+    "i18next": "^23.15.2",
     "next": "14.2.15",
+    "next-i18next": "^15.3.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-i18next": "^15.0.3"
   },
   "devDependencies": {
     "@types/node": "^20",

public/locales/en-US.json

@@ -0,0 +1,3 @@
+{
+    "lan": "Chinese"
+}

public/locales/zh-CN.json

@@ -0,0 +1,3 @@
+{
+    "lan": "简体中文"
+}

src/app/components/header.tsx

@@ -0,0 +1,79 @@
+import Image from "next/image";
+import { useTranslation } from 'next-i18next';
+
+type NavType = {
+    name: string;
+    href: string;
+}
+
+function SplitButton() {
+    // const { t } = useTranslation();
+    const lagn = '简体中文'
+    return <>
+        <div className="flex items-center w-[129px] h-[28px] bg-[#EEF1F6] 
+        border-[1px] border-[#eeeeee] rounded-[3px] px-[10px] mt-[18px]">
+            <Image 
+                src="/common/earth.png"
+                width={16.5}
+                height={16.5}
+                alt="logo"
+            />
+            <div className="flex-1 text-[14px] text-[#333333] mx-[9px]">{ lagn }</div>
+            <Image
+                 src="/common/arrow.png"
+                 width={10}
+                 height={5}
+                 alt="logo"
+            />
+        </div>
+    </>
+}
+export default function Header() {
+    const navList: NavType[] = [
+        {
+          name: "首页",
+          href: "/"
+        },
+        {
+          name: "服务内容",
+          href: "/service"
+        },
+        {
+          name: "案例中心",
+          href: "/case"
+        },
+        {
+          name: "联系我们",
+          href: "/contact "
+        },
+    ]
+    const pathname = '首页'
+    return (<>
+        <div className={"flex items-center px-[20px] h-[80px]"}>
+          <Image
+            src="/common/logo.png"
+            width={180}
+            height={47}
+            alt="logo"
+          />
+          <div className={"flex flex-1 items-end h-[80px] mx-[13px]"}>
+              {
+                navList.map((item: NavType) => (
+                  <div key={item.name} className="text-center cursor-pointer">
+                    <div className="my-[10px] w-[144px] text-[18px]">{ item.name }</div>
+                    {
+                      pathname === item.name ? 
+                      <Image src="/common/tab_checked.png" width={144} height={8} alt="" /> : 
+                      <div className="h-[8px]"></div>
+                    }
+                  </div>
+                ))
+              }
+          </div>
+          <div className="">
+            <SplitButton />
+          </div>
+        </div>
+      </>
+    )
+}

src/app/globals.css

@@ -2,26 +2,4 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
-  }
-}

src/app/home/page.tsx

@@ -0,0 +1,177 @@
+import Image from "next/image";
+
+type CaseType = {
+    img: string
+}
+export default function Home () {
+    const caseList: CaseType[] = [
+        { img: '/home/case_1.png' },
+        { img: '/home/case_2.png' },
+        { img: '/home/case_3.png' },
+        { img: '/home/case_3.png' },
+        { img: '/home/case_1.png' },
+        { img: '/home/case_2.png' },
+        { img: '/home/case_3.png' },
+        { img: '/home/case_3.png' },
+        { img: '/home/case_1.png' },
+        { img: '/home/case_2.png' },
+        { img: '/home/case_3.png' },
+        { img: '/home/case_3.png' },
+        { img: '/home/case_1.png' },
+        { img: '/home/case_2.png' },
+        { img: '/home/case_3.png' },
+    ]
+    return <>
+        <div>
+            <div className="w-full h-[770px] bg-[url('/home/img_header.png')] bg-right bg-no-repeat pt-[279px] pl-[172px]">
+                <div 
+                    className="text-[46px] leading-[62px] w-[368px] text-center"
+                >
+                    <div 
+                    className="font-black"
+                    style={{
+                        'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
+                        'backgroundClip': 'text',
+                        'WebkitTextFillColor': 'transparent'
+                    }}>
+                        聚焦试玩广告
+                    </div>
+                    <div 
+                    className="font-black"
+                    style={{
+                        'background': 'linear-gradient(106deg, #8EC2EA 0%, #4174ED 93%)',
+                        'backgroundClip': 'text',
+                        'WebkitTextFillColor': 'transparent'
+                    }}>
+                        全面助力游戏出海
+                    </div>
+                </div>
+            </div>
+            <div className="w-full h-[428px] relative">
+                <Image
+                    src="/home/img_bg2.png"
+                    width={745}
+                    height={428}
+                    alt=""
+                
+                />
+                <div className="absolute w-[770px] text-[32px] top-[184px] right-[115px] text-[#333333] text-right font-semibold">
+                100%内容定制，根据项目需求量身打造试玩广告方案
+                确保完全符合产品形象与市场定位
+                </div>
+            </div>
+            <div className="w-full h-[403px] relative">
+                <Image
+                    className="absolute right-[0]"
+                    src="/home/img_AB.png"
+                    width={787}
+                    height={403}
+                    alt=""
+                
+                />
+                <div className="absolute w-[662px] text-[32px] top-[160px] left-[165px] text-[#333333] text-left font-semibold">
+                支持 A/B 测试，通过优化素材内容
+                </div>
+                <div className="absolute w-[680px] text-[32px] top-[204px] left-[165px] text-[#333333] text-left font-semibold">
+                迭代游戏玩法，全面提升提升转化率与用户体验
+                </div>
+            </div>
+            <div className="w-full h-[392px] relative">
+                <Image
+                    className="absolute"
+                    src="/home/img_mutilan.png"
+                    width={698}
+                    height={392}
+                    alt=""
+                
+                />
+                <div className="absolute w-[520px] text-[32px] top-[197px] right-[115px] text-[#333333] text-right font-semibold">
+                多语言支持，覆盖全球多种语言版本
+                </div>
+                <div className="absolute w-[510px] text-[32px] top-[242px] right-[115px] text-[#333333] text-right font-semibold">
+                打破地域限制，实现国际化布局
+                </div>
+            </div>
+            <div className="w-full h-[317px] relative mt-[83px]">
+                <Image
+                    className="absolute right-[0]"
+                    src="/home/img_Omnichannel.png"
+                    width={742}
+                    height={317}
+                    alt=""
+                
+                />
+                <div className="absolute w-[680px] text-[32px] top-[124px] left-[165px] text-[#333333] text-left font-semibold">
+                全渠道适配，接入各大主流分发渠道
+                </div>
+                <div className="absolute w-[680px] text-[32px] top-[169px] left-[165px] text-[#333333] text-left font-semibold">
+                让您的产品触达更多潜在用户，扩大品牌影响力
+                </div>
+            </div>       
+            <div className="w-full h-[317px] relative mt-[83px]">
+                <Image
+                    className="absolute"
+                    src="/home/img_Omnichannel.png"
+                    width={742}
+                    height={317}
+                    alt=""
+                
+                />
+                <div className="absolute w-[610px] text-[32px] top-[100px] right-[115px] text-[#333333] text-right font-semibold">
+                轻量化部署，提供便捷的产品效果预览方案
+                </div>
+                <div className="absolute w-[600px] text-[32px] top-[145px] right-[115px] text-[#333333] text-right font-semibold">
+                简化用户决策流程，方便追踪各阶段进度
+                </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]"
+                    style={{
+                        background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
+                        backgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent'
+                    }}
+                >案例中心</div>
+                <div className="text-[19px] text-[#59676C]">点击图标 立即体验</div>
+            </div>  
+            <div className="w-full px-[40px] flex flex-wrap justify-center gap-[50px] mt-[34px] mb-[83px]">
+                {
+                    caseList.map((item: CaseType) => {
+                        return <div key={item.img} className="cursor-pointer">
+                            <Image
+                                className="hover:scale-[1.17] hover:shadow-[0px_0px_20px_8px_#0988FF] rounded-[60px] 
+                                transition ease-in-out duration-300"
+                                src={item.img}
+                                width={300}
+                                height={300}
+                                alt=""
+                            />
+                        </div>
+                    })
+                }
+                <div className="w-[300px] h-[300px] flex flex-col justify-center items-center text-[30px] text-[#3d3d3d] cursor-pointer">
+                    <div>想看更多？</div> 
+                    <div>联系我们！</div>
+                </div>
+                
+                
+            </div>  
+            <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]"
+                    style={{
+                        background: 'linear-gradient(90deg, #93BBE6 0%, #4C76E4 100%)',
+                        backgroundClip: 'text',
+                        WebkitTextFillColor: 'transparent'
+                    }}
+                >联系我们</div>
+            </div>  
+            <div className="w-full flex items-center justify-center">
+                <div>
+                    
+                </div>
+            </div>
+        </div>
+    </>
+}

src/app/layout.tsx

@@ -1,6 +1,10 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
+import { appWithTranslation } from 'next-i18next'
+import Header from "./components/header";
+import { ReactElement, ReactNode } from "react";
+import { AppProps } from "next/app";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -18,18 +22,20 @@ export const metadata: Metadata = {
   description: "Generated by create next app",
 };
 
-export default function RootLayout({
+interface LayoutProps extends AppProps {
-  children,
+  children: ReactNode;
-}: Readonly<{
+}
-  children: React.ReactNode;
+function RootLayout({ children, ...appProps }: LayoutProps): ReactElement {
-}>) {
   return (
     <html lang="en">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <Header />
         {children}
       </body>
     </html>
   );
 }
+export default RootLayout
+// export default appWithTranslation(RootLayout)

src/app/page.tsx

@@ -1,58 +0,0 @@
-import Image from "next/image";
-
-type NavType = {
-  name: string;
-  href: string;
-}
-export default function Page({ children }: Readonly<{
-  children: React.ReactNode;
-}>) {
-
-  const activeTab = "首页";
-  const navList: NavType[] = [
-    {
-      name: "首页",
-      href: "/"
-    },
-    {
-      name: "服务内容",
-      href: "/service"
-    },
-    {
-      name: "案例中心",
-      href: "/case"
-    },
-    {
-      name: "联系我们",
-      href: "/contact "
-    },
-  ]
-
-  return (<>
-    <div className={"flex items-center px-[20px] h-[80px]"}>
-      <Image
-        src="/common/logo.png"
-        width={180}
-        height={47}
-        alt="logo"
-      />
-      <div className={"flex flex-1 items-end h-[80px]"}>
-          {
-            navList.map((item: NavType) => (
-              <div key={item.name} className="text-center">
-                <div className="my-[10px] w-[144px] text-[18px]">{ item.name }</div>
-                {
-                  activeTab === item.name ? 
-                  <Image src="/common/tab_checked.png" width={144} height={8} alt="" /> : 
-                  <div className="h-[8px]"></div>
-                }
-              </div>
-            ))
-          }
-      </div>
-      <div className=""></div>
-    </div>
-    {children}
-  </>
-  )
-}