157 lines
7.1 KiB
TypeScript
157 lines
7.1 KiB
TypeScript
import type { MetaFunction } from "@remix-run/node";
|
||
import { ImageLoader } from "hooks/ParticleImage";
|
||
import { useLoaderData } from "@remix-run/react";
|
||
import { Carousel } from "~/components/Carousel";
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "创新技术 - 新纪元科技" },
|
||
{ name: "description", content: "新纪元科技的创新技术" },
|
||
];
|
||
};
|
||
|
||
export const loader = () => {
|
||
return {
|
||
isClient: true,
|
||
innovations: [
|
||
{
|
||
title: "智能环境监测",
|
||
image: "/a1.jpg",
|
||
},
|
||
{
|
||
title: "清洁能源技术",
|
||
image: "/a2.jpg",
|
||
},
|
||
{
|
||
title: "废物处理创新",
|
||
image: "/a3.jpg",
|
||
}
|
||
]
|
||
};
|
||
};
|
||
|
||
export default function Innovations() {
|
||
const { isClient, innovations } = useLoaderData<typeof loader>();
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-white text-gray-800">
|
||
{/* 头部区域：标题 + 轮播图 */}
|
||
<div className="relative bg-gradient-to-b from-green-50 to-blue-50/30 pt-16 pb-32 overflow-hidden">
|
||
<div className="max-w-7xl mx-auto px-4">
|
||
{/* 标题部分 */}
|
||
<div className="text-center mb-16">
|
||
<h1 className="text-5xl font-bold bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
|
||
创新技术
|
||
</h1>
|
||
<p className="text-gray-600 mt-6 text-lg max-w-2xl mx-auto">
|
||
引领环保科技发展，推动行业技术革新
|
||
</p>
|
||
</div>
|
||
|
||
{/* 轮播图部分 */}
|
||
{isClient ? (
|
||
<div className="relative">
|
||
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-white/10 pointer-events-none" />
|
||
<div className="flex justify-center">
|
||
<div className="w-[600px]">
|
||
<Carousel
|
||
items={innovations.map((innovation) => ({
|
||
content: (
|
||
<div className="w-[600px] h-[400px] relative rounded-xl overflow-hidden">
|
||
<ImageLoader
|
||
src={innovation.image}
|
||
alt={innovation.title}
|
||
className="relative z-[1]"
|
||
containerClassName="w-full h-full"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent z-[2]" />
|
||
<div className="absolute bottom-0 left-0 right-0 p-8 z-[3]">
|
||
<h3 className="text-white text-3xl font-bold mb-2">{innovation.title}</h3>
|
||
<p className="text-white/80 text-lg">探索环保科技的无限可能</p>
|
||
</div>
|
||
</div>
|
||
),
|
||
}))}
|
||
interval={5000}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex justify-center">
|
||
<div className="w-[600px] h-[400px] bg-gray-100 rounded-xl" />
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 技术详情部分 */}
|
||
<div className="py-24 bg-white">
|
||
<div className="max-w-7xl mx-auto px-4">
|
||
<h2 className="text-4xl font-bold text-center mb-20">
|
||
<span className="bg-gradient-to-r from-green-600 to-blue-600 bg-clip-text text-transparent">
|
||
核心技术详解
|
||
</span>
|
||
</h2>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300
|
||
hover:-translate-y-2 hover:shadow-xl">
|
||
<div className="bg-green-50 w-16 h-16 rounded-full flex items-center justify-center mb-6
|
||
transform transition-all duration-300 hover:scale-110 hover:rotate-12">
|
||
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-xl font-bold mb-4 relative">
|
||
<span className="relative z-10">AI环境优化</span>
|
||
<span className="absolute bottom-0 left-0 w-full h-2 bg-green-100 transform -skew-x-12"></span>
|
||
</h3>
|
||
<p className="text-gray-600">
|
||
运用人工智能技术，实现环境数据的智能分析和决策优化，提供精准的环境治理方案。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300
|
||
hover:-translate-y-2 hover:shadow-xl">
|
||
<div className="bg-blue-50 w-16 h-16 rounded-full flex items-center justify-center mb-6
|
||
transform transition-all duration-300 hover:scale-110 hover:rotate-12">
|
||
<svg className="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-xl font-bold mb-4 relative">
|
||
<span className="relative z-10">清洁能源转换</span>
|
||
<span className="absolute bottom-0 left-0 w-full h-2 bg-blue-100 transform -skew-x-12"></span>
|
||
</h3>
|
||
<p className="text-gray-600">
|
||
创新的能源转换技术，提高清洁能源利用效率，推动色能源革命。
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-lg p-8 shadow-lg transform transition-all duration-300
|
||
hover:-translate-y-2 hover:shadow-xl">
|
||
<div className="bg-purple-50 w-16 h-16 rounded-full flex items-center justify-center mb-6
|
||
transform transition-all duration-300 hover:scale-110 hover:rotate-12">
|
||
<svg className="w-8 h-8 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
|
||
</svg>
|
||
</div>
|
||
<h3 className="text-xl font-bold mb-4 relative">
|
||
<span className="relative z-10">生态修复系统</span>
|
||
<span className="absolute bottom-0 left-0 w-full h-2 bg-purple-100 transform -skew-x-12"></span>
|
||
</h3>
|
||
<p className="text-gray-600">
|
||
综合性生态环境修复解决方案，助力自然生态系统恢复与保护
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 页脚 */}
|
||
<footer className="bg-gray-900 text-white py-12">
|
||
{/* 同首页页脚内容 */}
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|