guofei
/
addseed-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 案例中心静态

style
icefire 2024-10-13 23:01:45 +08:00
parent 4fb653fa20
commit 5aa5435b90
22 changed files with 1222 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
next-i18next.config.js 100644
View File

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

7
next.config.mjs
View File

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

959
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -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",

BIN
public/common/arrow.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 316 B

BIN
public/home/case_1.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
public/home/case_2.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 159 KiB

BIN
public/home/case_3.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 160 KiB

BIN
public/home/img_AB.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
public/home/img_Omnichannel.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
public/home/img_bg2.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
public/home/img_header.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

BIN
public/home/img_mutilan.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 63 KiB

3
public/locales/en-US.json 100644
View File

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

0
public/locales/en/common.json 100644
View File

3
public/locales/zh-CN.json 100644
View File

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

0
public/locales/zh-CN/common.json 100644
View File

79
src/app/components/header.tsx 100644
View File

@ -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>
</>
)
}

22
src/app/globals.css
View File

@ -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;
}
}

177
src/app/home/page.tsx 100644
View File

@ -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>
</>
}

16
src/app/layout.tsx
View File

@ -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({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
interface LayoutProps extends AppProps {
children: 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)

58
src/app/page.tsx
View File

@ -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}
</>
)
}