feat: create solutions page with three service modules

This commit is contained in:
张翔
2026-02-26 18:44:50 +08:00
parent 2595d27221
commit 679d49043d
+265
View File
@@ -0,0 +1,265 @@
import { Metadata } from 'next';
import { Button } from '@/components/ui/button';
import { ArrowRight, Lightbulb, Cpu, Users, Calendar, CheckCircle2, TrendingUp, Code, FileText } from 'lucide-react';
export const metadata: Metadata = {
title: '解决方案 - 睿新致远',
description: '三种角色,一种身份——您的成长伙伴',
};
export default function SolutionsPage() {
return (
<div className="min-h-screen bg-white">
<div className="bg-gradient-to-br from-[#C41E3A] to-[#1C1C1C] py-20">
<div className="container-wide">
<h1 className="text-4xl md:text-5xl font-bold text-white mb-6 text-center">
</h1>
<p className="text-xl text-white/90 text-center max-w-3xl mx-auto">
</p>
</div>
</div>
<div className="container-wide py-16">
<div className="max-w-6xl mx-auto space-y-24">
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20">
<div className="flex items-start gap-6 mb-8">
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
<Lightbulb className="w-8 h-8 text-white" />
</div>
<div>
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
·
</h2>
<p className="text-lg text-[#5C5C5C]">
</p>
</div>
</div>
<div className="space-y-6 mb-8">
<p className="text-lg text-[#1C1C1C] leading-relaxed">
</p>
<p className="text-lg text-[#1C1C1C] leading-relaxed">
</p>
<p className="text-lg text-[#1C1C1C] leading-relaxed">
</p>
</div>
<div className="mb-8">
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
</h3>
<div className="grid md:grid-cols-3 gap-4">
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
</div>
</div>
<div className="flex justify-center">
<Button
size="lg"
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</div>
</section>
<section className="bg-gradient-to-br from-[#F5F7FA] to-white rounded-2xl p-12 border border-[#4F46E5]/20">
<div className="flex items-start gap-6 mb-8">
<div className="w-16 h-16 bg-[#4F46E5] rounded-2xl flex items-center justify-center flex-shrink-0">
<Cpu className="w-8 h-8 text-white" />
</div>
<div>
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
·
</h2>
<p className="text-lg text-[#5C5C5C]">
</p>
</div>
</div>
<div className="space-y-6 mb-8">
<p className="text-lg text-[#1C1C1C] leading-relaxed">
"最火""最对"
</p>
<p className="text-lg text-[#1C1C1C] leading-relaxed">
沿
</p>
<p className="text-lg text-[#1C1C1C] leading-relaxed">
</p>
</div>
<div className="mb-8">
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
<CheckCircle2 className="w-6 h-6 text-[#4F46E5]" />
</h3>
<div className="grid md:grid-cols-3 gap-4">
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#4F46E5] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#4F46E5] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#4F46E5] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
</div>
</div>
<div className="flex justify-center">
<Button
size="lg"
variant="outline"
className="border-[#4F46E5] text-[#4F46E5] hover:bg-[#4F46E5] hover:text-white"
onClick={() => {
const element = document.getElementById('cases');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</div>
</section>
<section className="bg-gradient-to-br from-[#FFFBF5] to-white rounded-2xl p-12 border border-[#C41E3A]/20">
<div className="flex items-start gap-6 mb-8">
<div className="w-16 h-16 bg-[#C41E3A] rounded-2xl flex items-center justify-center flex-shrink-0">
<Users className="w-8 h-8 text-white" />
</div>
<div>
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-2">
·
</h2>
<p className="text-lg text-[#5C5C5C]">
</p>
</div>
</div>
<div className="space-y-6 mb-8">
<p className="text-lg text-[#1C1C1C] leading-relaxed">
线
</p>
<p className="text-lg text-[#1C1C1C] leading-relaxed">
访
</p>
<p className="text-lg text-[#1C1C1C] leading-relaxed">
</p>
</div>
<div className="mb-8">
<h3 className="text-xl font-semibold text-[#1C1C1C] mb-4 flex items-center gap-2">
<CheckCircle2 className="w-6 h-6 text-[#C41E3A]" />
</h3>
<div className="grid md:grid-cols-3 gap-4">
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
<span className="text-[#1C1C1C]"></span>
</div>
<div className="flex items-start gap-3 p-4 bg-white rounded-lg border border-[#E5E5E5]">
<div className="w-2 h-2 bg-[#C41E3A] rounded-full mt-2" />
<span className="text-[#1C1C1C]">7×24</span>
</div>
</div>
</div>
<div className="flex justify-center">
<Button
size="lg"
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</div>
</section>
</div>
</div>
<div className="bg-[#F5F5F5] py-16">
<div className="container-wide text-center">
<h2 className="text-3xl font-bold text-[#1C1C1C] mb-6">
</h2>
<p className="text-lg text-[#5C5C5C] mb-8 max-w-2xl mx-auto">
</p>
<div className="flex justify-center gap-4">
<Button
size="lg"
variant="outline"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
</Button>
<Button
size="lg"
className="bg-[#C41E3A] hover:bg-[#A01830] text-white"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</div>
</div>
</div>
</div>
);
}