feat: 重构首页并添加国际化支持
- 完全重构首页布局,添加轮播图、公司介绍、产品中心等模块 - 新增多个关于页面路由结构 - 调整国际化配置,移除日语支持并更新翻译文本 - 优化导航菜单和页脚内容
This commit is contained in:
0
app/[locale]/about/arch/page.tsx
Normal file
0
app/[locale]/about/arch/page.tsx
Normal file
0
app/[locale]/about/base/page.tsx
Normal file
0
app/[locale]/about/base/page.tsx
Normal file
0
app/[locale]/about/course/page.tsx
Normal file
0
app/[locale]/about/course/page.tsx
Normal file
0
app/[locale]/about/culture/page.tsx
Normal file
0
app/[locale]/about/culture/page.tsx
Normal file
0
app/[locale]/about/green/page.tsx
Normal file
0
app/[locale]/about/green/page.tsx
Normal file
0
app/[locale]/about/honor/page.tsx
Normal file
0
app/[locale]/about/honor/page.tsx
Normal file
0
app/[locale]/about/introduction/page.tsx
Normal file
0
app/[locale]/about/introduction/page.tsx
Normal file
@@ -1,75 +1,467 @@
|
||||
'use client'
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { siteConfig } from "@/config/site";
|
||||
import { MousePointerClick } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import Link from "next/link";
|
||||
import { SiDiscord } from "react-icons/si";
|
||||
|
||||
export default function HomeComponent() {
|
||||
const t = useTranslations("Home");
|
||||
|
||||
return (
|
||||
<>
|
||||
<section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-16 pt-24 text-center">
|
||||
<h1 className="mx-auto max-w-4xl font-display text-5xl font-bold tracking-tight text-slate-900 sm:text-7xl dark:text-gray-200">
|
||||
Next.js{" "}
|
||||
<span className="relative whitespace-nowrap text-blue-600">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
viewBox="0 0 418 42"
|
||||
className="absolute left-0 top-2/3 h-[0.58em] w-full fill-blue-300/70"
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<path d="M203.371.916c-26.013-2.078-76.686 1.963-124.73 9.946L67.3 12.749C35.421 18.062 18.2 21.766 6.004 25.934 1.244 27.561.828 27.778.874 28.61c.07 1.214.828 1.121 9.595-1.176 9.072-2.377 17.15-3.92 39.246-7.496C123.565 7.986 157.869 4.492 195.942 5.046c7.461.108 19.25 1.696 19.17 2.582-.107 1.183-7.874 4.31-25.75 10.366-21.992 7.45-35.43 12.534-36.701 13.884-2.173 2.308-.202 4.407 4.442 4.734 2.654.187 3.263.157 15.593-.78 35.401-2.686 57.944-3.488 88.365-3.143 46.327.526 75.721 2.23 130.788 7.584 19.787 1.924 20.814 1.98 24.557 1.332l.066-.011c1.201-.203 1.53-1.825.399-2.335-2.911-1.31-4.893-1.604-22.048-3.261-57.509-5.556-87.871-7.36-132.059-7.842-23.239-.254-33.617-.116-50.627.674-11.629.54-42.371 2.494-46.696 2.967-2.359.259 8.133-3.625 26.504-9.81 23.239-7.825 27.934-10.149 28.304-14.005.417-4.348-3.529-6-16.878-7.066Z"></path>
|
||||
</svg>
|
||||
<span className="relative"> i18n </span>{" "}
|
||||
</span>
|
||||
Starter
|
||||
</h1>
|
||||
<p className="mx-auto mt-6 max-w-2xl text-2xl tracking-tight text-slate-700 dark:text-slate-500">
|
||||
{t("description")}
|
||||
</p>
|
||||
<section className="mx-auto text-center">
|
||||
{/* 轮播图区域, 先用一张图片占位, 宽度100%, 盖度100vh */}
|
||||
<img src="/placeholder.svg" alt={t("carousel")} className="w-screen h-[80vh] object-cover rounded-lg" />
|
||||
{/* 公司介绍 - 左右布局 */}
|
||||
<div className="flex flex-col lg:flex-row w-full my-16 px-8">
|
||||
{/* 左边视频(图片占位) */}
|
||||
<div className="w-full lg:w-1/2 h-[50vh] lg:h-[60vh] relative overflow-hidden">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt={t("company_video")}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-10 flex items-center justify-center gap-2">
|
||||
<Button
|
||||
className="h-11 rounded-xl px-8 py-2 bg-white text-indigo-500 hover:text-indigo-600 border-2 border-indigo-500"
|
||||
variant="outline"
|
||||
asChild
|
||||
>
|
||||
<Link
|
||||
href="https://nexty.dev/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="Get SaaS Version - Nexty.dev"
|
||||
prefetch={false}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<MousePointerClick className="w-4 h-4 text-indigo-500" />
|
||||
Get SaaS Version
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
className="h-11 rounded-xl px-8 py-2 bg-white text-indigo-500 hover:text-indigo-600 border-2 border-indigo-500"
|
||||
variant="outline"
|
||||
asChild
|
||||
>
|
||||
<Link
|
||||
href={
|
||||
siteConfig.socialLinks?.discord ||
|
||||
"https://discord.com/invite/R7bUxWKRqZ"
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
title="Join Discord"
|
||||
prefetch={false}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<SiDiscord className="w-4 h-4 text-indigo-500" />
|
||||
Join Discord
|
||||
</Link>
|
||||
</Button>
|
||||
{/* 右边内容 - 分三部分 */}
|
||||
<div className="w-full lg:w-1/2 flex flex-col justify-center p-8 lg:p-16">
|
||||
{/* 第一部分:标题 */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-3xl font-bold text-gray-900">天津友发钢管集团股份有限公司</h2>
|
||||
</div>
|
||||
|
||||
{/* 第二部分:介绍 */}
|
||||
<div className="mb-8">
|
||||
<p className="text-lg text-gray-700 leading-relaxed">
|
||||
友发集团是集直缝焊接圆管(含热浸镀锌)、直缝焊接方矩管(含热浸镀锌)、钢塑复合管、不锈钢管及管件、螺旋焊管(含承插及防腐加工)、热镀锌无缝管、石油管道、管件、保温管道、塑料管及管件、盘扣脚手架、光伏支架及地桩等多种产品生产销售于一体的大型企业集团,拥有'友发'和'正金'两个品牌。已经形成天津、河北唐山、河北邯郸、河北沧州、陕西韩城、江苏溧阳、辽宁葫芦岛、云南玉溪、安徽临泉、吉林磐石10个生产基地,同时正在建设四川成都基地。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 第三部分:按钮 */}
|
||||
<div>
|
||||
<button className="bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded transition-colors">
|
||||
了解更多
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* 隐式轮播图,没有控件,每张四个卡片 */}
|
||||
<div className="relative overflow-hidden py-16">
|
||||
<div className="flex w-full flex-nowrap animate-carousel">
|
||||
{/* 第一组卡片 */}
|
||||
<div className="min-w-full flex justify-center px-4 gap-6">
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">5</div>
|
||||
<div className="text-gray-700">国家级绿色产品</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">3+</div>
|
||||
<div className="text-gray-700">国家级绿色工厂</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">7</div>
|
||||
<div className="text-gray-700">CNAS(国家认可)实验室</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">10</div>
|
||||
<div className="text-gray-700">生产基地</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 第二组卡片 - 用于无缝轮播 */}
|
||||
<div className="min-w-full flex justify-center px-4 gap-6">
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">5</div>
|
||||
<div className="text-gray-700">国家级绿色产品</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">3+</div>
|
||||
<div className="text-gray-700">国家级绿色工厂</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">7</div>
|
||||
<div className="text-gray-700">CNAS(国家认可)实验室</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg shadow-md p-6 flex-1 max-w-[22%] text-center">
|
||||
<div className="text-red-600 text-4xl font-bold mb-2">10</div>
|
||||
<div className="text-gray-700">生产基地</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
@keyframes carousel {
|
||||
0% { transform: translateX(0); }
|
||||
90% { transform: translateX(0); }
|
||||
100% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(-100%); }
|
||||
}
|
||||
.animate-carousel {
|
||||
animation: carousel 5s infinite linear;
|
||||
animation-timing-function: linear;
|
||||
transition: transform 1.5s;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
|
||||
{/* 最新资讯 */}
|
||||
<div className="py-16 px-4 bg-white relative overflow-hidden">
|
||||
{/* 标题 */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 inline-block relative">
|
||||
最新资讯
|
||||
<span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* 资讯卡片列表 */}
|
||||
<div className="flex flex-wrap justify-center gap-6 max-w-7xl mx-auto">
|
||||
{/* 第一张卡片 */}
|
||||
<div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
|
||||
<div className="p-4">
|
||||
<div className="text-red-600 mb-2 font-medium text-left">2025/11/17</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">核聚变区,智创未来,友发集团亮相202...</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/placeholder.svg" alt="资讯图片1" className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第二张卡片 - 中间突出显示 */}
|
||||
<div className="w-full md:w-[28vw] lg:w-[28vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg relative -mt-2 z-10">
|
||||
<div className="p-4">
|
||||
<div className="text-red-600 mb-2 font-medium text-left">2025/11/17</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">携手再攀产业新高峰,友发集团应邀出席...</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/placeholder.svg" alt="资讯图片2" className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第三张卡片 */}
|
||||
<div className="w-full md:w-[26vw] lg:w-[26vw] bg-white rounded-lg overflow-hidden transition-all duration-300 hover:shadow-lg">
|
||||
<div className="p-4">
|
||||
<div className="text-red-600 mb-2 font-medium text-left">2025/09/20</div>
|
||||
<div className="text-gray-800 mb-3 line-clamp-1 text-base whitespace-nowrap overflow-hidden text-ellipsis">友发集团与中诚投建工集团签订战略合作...</div>
|
||||
</div>
|
||||
<div className="p-4 h-48 overflow-hidden">
|
||||
<img src="/placeholder.svg" alt="资讯图片3" className="w-full h-full object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 了解更多按钮 */}
|
||||
<div className="text-center mt-12">
|
||||
<button className="px-6 py-2 bg-white border border-red-600 text-red-600 hover:bg-red-600 hover:text-white transition-all duration-300 rounded-sm">
|
||||
了解更多 >
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* 产品中心 */}
|
||||
<div className="py-16 px-4 bg-white">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 inline-block relative">
|
||||
产品中心
|
||||
<span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* 左右布局,左3右2 */}
|
||||
<div className="flex flex-col lg:flex-row w-full max-w-7xl mx-auto">
|
||||
{/* 左侧产品图 - 占3份 */}
|
||||
<div className="w-full lg:w-3/5 h-[50vh] lg:h-[70vh] relative overflow-hidden bg-gray-100 rounded-lg mb-8 lg:mb-0">
|
||||
{/* 默认显示第一张产品图 */}
|
||||
<img
|
||||
id="productImage"
|
||||
src="/placeholder.svg"
|
||||
alt="直缝高频焊接圆管"
|
||||
className="w-full h-full object-contain p-8 transition-opacity duration-300"
|
||||
/>
|
||||
|
||||
{/* 产品标题覆盖层 */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-black/70 to-transparent">
|
||||
<h3 id="productTitle" className="text-white text-2xl font-bold">直缝高频焊接圆管(含热浸镀锌)</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 右侧产品列表 - 占2份,两列布局 */}
|
||||
<div className="w-full lg:w-2/5 grid grid-cols-2 gap-4 lg:gap-6 p-4 lg:pl-8">
|
||||
{/* 产品1 */}
|
||||
<div
|
||||
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
||||
onMouseEnter={() => {
|
||||
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
||||
document.getElementById('productImage')?.setAttribute('alt', '直缝高频焊接圆管');
|
||||
document.getElementById('productTitle')!.textContent = '直缝高频焊接圆管(含热浸镀锌)';
|
||||
}}
|
||||
>
|
||||
<span>直缝高频焊接圆管(含热浸镀锌)</span>
|
||||
</div>
|
||||
|
||||
{/* 产品2 */}
|
||||
<div
|
||||
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
||||
onMouseEnter={() => {
|
||||
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
||||
document.getElementById('productImage')?.setAttribute('alt', '方形焊接钢管');
|
||||
document.getElementById('productTitle')!.textContent = '方形焊接钢管(含热浸镀锌)';
|
||||
}}
|
||||
>
|
||||
<span>方形焊接钢管(含热浸镀锌)</span>
|
||||
</div>
|
||||
|
||||
{/* 产品3 */}
|
||||
<div
|
||||
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
||||
onMouseEnter={() => {
|
||||
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
||||
document.getElementById('productImage')?.setAttribute('alt', '钢塑复合管');
|
||||
document.getElementById('productTitle')!.textContent = '钢塑复合管';
|
||||
}}
|
||||
>
|
||||
<span>钢塑复合管</span>
|
||||
</div>
|
||||
|
||||
{/* 产品4 */}
|
||||
<div
|
||||
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
||||
onMouseEnter={() => {
|
||||
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
||||
document.getElementById('productImage')?.setAttribute('alt', '管路连接件');
|
||||
document.getElementById('productTitle')!.textContent = '管路连接件';
|
||||
}}
|
||||
>
|
||||
<span>管路连接件</span>
|
||||
</div>
|
||||
|
||||
{/* 产品5 */}
|
||||
<div
|
||||
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
||||
onMouseEnter={() => {
|
||||
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
||||
document.getElementById('productImage')?.setAttribute('alt', '盘扣脚手架');
|
||||
document.getElementById('productTitle')!.textContent = '盘扣脚手架';
|
||||
}}
|
||||
>
|
||||
<span>盘扣脚手架</span>
|
||||
</div>
|
||||
|
||||
{/* 产品6 */}
|
||||
<div
|
||||
className="product-item p-6 flex items-center justify-center text-center bg-gray-200 cursor-pointer transition-colors duration-300 hover:bg-red-600 hover:text-white"
|
||||
onMouseEnter={() => {
|
||||
document.getElementById('productImage')?.setAttribute('src', '/placeholder.svg');
|
||||
document.getElementById('productImage')?.setAttribute('alt', '不锈钢管及管件');
|
||||
document.getElementById('productTitle')!.textContent = '不锈钢管及管件';
|
||||
}}
|
||||
>
|
||||
<span>不锈钢管及管件</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 应用领域 */}
|
||||
<div className="py-16 px-4 bg-gray-50 relative overflow-hidden">
|
||||
{/* 标题 */}
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 inline-block relative">
|
||||
应用领域
|
||||
<span className="absolute bottom-0 left-1/4 w-1/2 h-1 bg-red-600"></span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{/* 轮播容器 */}
|
||||
<div className="relative max-w-7xl mx-auto">
|
||||
{/* 左切换按钮 */}
|
||||
<button
|
||||
id="prevSlide"
|
||||
className="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
|
||||
>
|
||||
<
|
||||
</button>
|
||||
|
||||
{/* 右切换按钮 */}
|
||||
<button
|
||||
id="nextSlide"
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-md flex items-center justify-center text-gray-700 hover:bg-red-600 hover:text-white transition-colors z-20"
|
||||
>
|
||||
>
|
||||
</button>
|
||||
|
||||
{/* 轮播内容 */}
|
||||
<div className="overflow-hidden">
|
||||
<div
|
||||
id="carouselTrack"
|
||||
className="flex transition-transform duration-500 ease-in-out"
|
||||
style={{ transform: 'translateX(0)' }}
|
||||
>
|
||||
{/* 第一组卡片拼图 */}
|
||||
<div className="min-w-full flex flex-wrap gap-4 p-4">
|
||||
{/* 第一行 */}
|
||||
<div className="w-full flex gap-4 mb-4">
|
||||
{/* 电梯井道 */}
|
||||
<div className="w-1/4 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="电梯井道"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
电梯井道
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 塔机制造 - 宽度为其他卡片的两倍 */}
|
||||
<div className="w-1/2 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="塔机制造"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
塔机制造
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 工程机械 */}
|
||||
<div className="w-1/4 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="工程机械"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
工程机械
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第二行 */}
|
||||
<div className="w-full flex gap-4">
|
||||
{/* 高速护栏 - 宽度为其他卡片的两倍 */}
|
||||
<div className="w-1/2 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="高速护栏"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
高速护栏
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 桥梁 */}
|
||||
<div className="w-1/4 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="桥梁"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
桥梁
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 钢结构 */}
|
||||
<div className="w-1/4 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="钢结构"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
钢结构
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第二组卡片拼图(可扩展更多组) */}
|
||||
<div className="min-w-full flex flex-wrap gap-4 p-4">
|
||||
{/* 第一行 */}
|
||||
<div className="w-full flex gap-4 mb-4">
|
||||
{/* 建筑工程 */}
|
||||
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="建筑工程"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
建筑工程
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 水利水电 */}
|
||||
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="水利水电"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
水利水电
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 轨道交通 */}
|
||||
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="轨道交通"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
轨道交通
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 第二行 */}
|
||||
<div className="w-full flex gap-4">
|
||||
{/* 市政工程 */}
|
||||
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="市政工程"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
市政工程
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 农业设施 */}
|
||||
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="农业设施"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
农业设施
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 能源化工 */}
|
||||
<div className="w-1/3 relative overflow-hidden rounded-lg">
|
||||
<img
|
||||
src="/placeholder.svg"
|
||||
alt="能源化工"
|
||||
className="w-full h-[280px] object-cover hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white py-2 px-4">
|
||||
能源化工
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 生产案例 */}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -8,24 +8,12 @@
|
||||
"Header": {
|
||||
"links": [
|
||||
{
|
||||
"name": "Blog",
|
||||
"name": "News Center",
|
||||
"href": "/blog"
|
||||
},
|
||||
{
|
||||
"name": "About",
|
||||
"href": "/about"
|
||||
},
|
||||
{
|
||||
"name": "Source Code",
|
||||
"href": "https://github.com/weijunext/nextjs-starter",
|
||||
"target": "_blank",
|
||||
"rel": "noopener noreferrer nofollow"
|
||||
},
|
||||
{
|
||||
"name": "Pro Version",
|
||||
"href": "https://nexty.dev",
|
||||
"target": "_blank",
|
||||
"rel": "noopener noreferrer"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -35,26 +23,6 @@
|
||||
"TermsOfService": "Terms of Service",
|
||||
"Links": {
|
||||
"groups": [
|
||||
{
|
||||
"title": "Languages",
|
||||
"links": [
|
||||
{
|
||||
"href": "/en",
|
||||
"name": "English",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/zh",
|
||||
"name": "中文",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/ja",
|
||||
"name": "日本語",
|
||||
"useA": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Open Source",
|
||||
"links": [
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"Header": {
|
||||
"links": [
|
||||
{
|
||||
"name": "ブログ",
|
||||
"name": "ニュースセンター",
|
||||
"href": "/blog"
|
||||
},
|
||||
{
|
||||
|
||||
@@ -8,24 +8,12 @@
|
||||
"Header": {
|
||||
"links": [
|
||||
{
|
||||
"name": "Blog",
|
||||
"name": "Tin tức",
|
||||
"href": "/blog"
|
||||
},
|
||||
{
|
||||
"name": "Về chúng tôi",
|
||||
"href": "/about"
|
||||
},
|
||||
{
|
||||
"name": "Mã nguồn",
|
||||
"href": "https://github.com/weijunext/nextjs-starter",
|
||||
"target": "_blank",
|
||||
"rel": "noopener noreferrer nofollow"
|
||||
},
|
||||
{
|
||||
"name": "Phiên bản cao cấp",
|
||||
"href": "https://nexty.dev",
|
||||
"target": "_blank",
|
||||
"rel": "noopener noreferrer"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -35,31 +23,6 @@
|
||||
"TermsOfService": "Điều khoản dịch vụ",
|
||||
"Links": {
|
||||
"groups": [
|
||||
{
|
||||
"title": "Ngôn ngữ",
|
||||
"links": [
|
||||
{
|
||||
"href": "/en",
|
||||
"name": "English",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/zh",
|
||||
"name": "Tiếng Trung",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/ja",
|
||||
"name": "Tiếng Nhật",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/vi",
|
||||
"name": "Tiếng Việt",
|
||||
"useA": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Dự án mã nguồn mở",
|
||||
"links": [
|
||||
|
||||
@@ -8,24 +8,16 @@
|
||||
"Header": {
|
||||
"links": [
|
||||
{
|
||||
"name": "博客",
|
||||
"href": "/blog"
|
||||
"name": "网站首页",
|
||||
"href": "/"
|
||||
},
|
||||
{
|
||||
"name": "关于",
|
||||
"name": "走进福安德",
|
||||
"href": "/about"
|
||||
},
|
||||
{
|
||||
"name": "源码",
|
||||
"href": "https://github.com/weijunext/nextjs-starter",
|
||||
"target": "_blank",
|
||||
"rel": "noopener noreferrer nofollow"
|
||||
},
|
||||
{
|
||||
"name": "高级版",
|
||||
"href": "https://nexty.dev",
|
||||
"target": "_blank",
|
||||
"rel": "noopener noreferrer"
|
||||
"name": "新闻中心",
|
||||
"href": "/blog"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -36,21 +28,41 @@
|
||||
"Links": {
|
||||
"groups": [
|
||||
{
|
||||
"title": "语言",
|
||||
"title": "关于我们",
|
||||
"links": [
|
||||
{
|
||||
"href": "/en",
|
||||
"name": "English",
|
||||
"href": "/about?section=company",
|
||||
"name": "公司简介",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/zh",
|
||||
"name": "中文",
|
||||
"href": "/about?section=culture",
|
||||
"name": "企业文化",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/ja",
|
||||
"name": "日本語",
|
||||
"href": "/about?section=base",
|
||||
"name": "生产基地",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/about?section=organization",
|
||||
"name": "组织架构",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/about?section=awards",
|
||||
"name": "荣誉资质",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/about?section=history",
|
||||
"name": "发展历程",
|
||||
"useA": true
|
||||
},
|
||||
{
|
||||
"href": "/about?section=green",
|
||||
"name": "绿色发展",
|
||||
"useA": true
|
||||
}
|
||||
]
|
||||
|
||||
@@ -7,8 +7,6 @@ export default getRequestConfig(async ({ requestLocale }) => {
|
||||
|
||||
if (locale?.startsWith('zh')) {
|
||||
locale = 'zh';
|
||||
} else if (locale?.startsWith('ja')) {
|
||||
locale = 'ja';
|
||||
} else if (locale?.startsWith('en')) {
|
||||
locale = 'en';
|
||||
} else if (locale?.startsWith('vi')) {
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import { createNavigation } from 'next-intl/navigation';
|
||||
import { defineRouting } from 'next-intl/routing';
|
||||
|
||||
export const LOCALES = ['en', 'zh', 'ja', 'vi']
|
||||
export const LOCALES = ['en', 'zh', 'vi']
|
||||
export const DEFAULT_LOCALE = 'zh'
|
||||
export const LOCALE_NAMES: Record<string, string> = {
|
||||
'en': "English",
|
||||
'zh': "中文",
|
||||
'ja': "日本語",
|
||||
'vi': "Tiếng Việt",
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user