import React from 'react';
const UpdatedHomepage = () => {
return (
<div className="min-h-screen">
{/* Hero Section - 首屏 */}
<section className="relative h-screen bg-blue-900">
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-black/80"></div>
<div className="container mx-auto px-6 relative h-full flex items-center">
<div className="max-w-3xl">
<h1 className="text-6xl font-bold text-white mb-6">非凡知产</h1>
<p className="text-2xl text-gray-100 mb-8">专注知识产权领域 提供全方位法律服务</p>
<button className="bg-white text-blue-900 px-8 py-4 text-lg font-semibold rounded hover:bg-blue-50 transition-all">
立即咨询
</button>
</div>
</div>
</section>
{/* About Section - 关于我们 */}
<section className="py-20 bg-white">
<div className="container mx-auto px-6">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 className="text-4xl font-bold text-blue-900 mb-6">关于非凡</h2>
<p className="text-gray-700 text-lg leading-relaxed">
非凡知产是专注于知识产权领域的专业服务机构，致力于为客户提供高质量的知识产权法律服务。我们拥有资深的专利代理人和律师团队，以专业、高效、务实的服务理念，为客户提供全方位的知识产权解决方案。
</p>
</div>
<div className="h-64 bg-gray-100 rounded-lg overflow-hidden">
<img
src="/api/placeholder/600/400"
alt="About Us"
className="w-full h-full object-cover"
/>
</div>
</div>
</div>
</section>
{/* Services Section - 服务领域 */}
<section className="py-20 bg-gray-50">
<div className="container mx-auto px-6">
<h2 className="text-4xl font-bold text-center text-blue-900 mb-16">服务领域</h2>
<div className="grid md:grid-cols-4 gap-8">
{[
{ title: '专利申请', desc: '专业的专利申请代理服务' },
{ title: '商标注册', desc: '商标注册与品牌保护服务' },
{ title: '版权登记', desc: '作品版权登记及保护' },
{ title: '法律诉讼', desc: '知识产权维权与诉讼服务' }
].map((service, index) => (
<div key={index} className="bg-white p-8 rounded-lg shadow-md hover:shadow-lg transition-all">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
<svg className="w-8 h-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<h3 className="text-xl font-bold text-center mb-4">{service.title}</h3>
<p className="text-gray-600 text-center">{service.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* Stats Section - 业务优势 */}
<section className="py-16 bg-blue-900 text-white">
<div className="container mx-auto px-6">
<div className="grid md:grid-cols-4 gap-8">
{[
{ number: '15+', label: '年专业经验' },
{ number: '1000+', label: '成功案例' },
{ number: '50+', label: '专业人才' },
{ number: '100+', label: '合作伙伴' }
].map((stat, index) => (
<div key={index} className="text-center">
<div className="text-5xl font-bold mb-2">{stat.number}</div>
<div className="text-blue-100">{stat.label}</div>
</div>
))}
</div>
</div>
</section>
{/* News Section - 新闻资讯 */}
<section className="py-20 bg-gray-50">
<div className="container mx-auto px-6">
<h2 className="text-4xl font-bold text-center text-blue-900 mb-16">新闻资讯</h2>
<div className="grid md:grid-cols-3 gap-8">
{[1, 2, 3].map((item) => (
<div key={item} className="bg-white rounded-lg shadow-md overflow-hidden">
<div className="h-48 bg-gray-200">
<img
src="/api/placeholder/400/300"
alt="News"
className="w-full h-full object-cover"
/>
</div>
<div className="p-6">
<span className="inline-block px-3 py-1 text-sm text-blue-700 bg-blue-50 rounded-full mb-4">
行业动态
</span>
<h3 className="text-xl font-bold mb-3">知识产权保护新政策解析</h3>
<p className="text-gray-600 mb-4">最新的知识产权保护政策出台，对企业知识产权管理有重要影响...</p>
<a href="#" className="text-blue-600 font-semibold hover:text-blue-700">
阅读更多 →
</a>
</div>
</div>
))}
</div>
</div>
</section>
{/* Contact Section - 联系我们 */}
<section className="py-20 bg-white">
<div className="container mx-auto px-6">
<div className="max-w-4xl mx-auto">
<h2 className="text-4xl font-bold text-center text-blue-900 mb-16">联系我们</h2>
<div className="grid md:grid-cols-2 gap-12">
<div>
<h3 className="text-2xl font-bold mb-6">联系方式</h3>
<div className="space-y-4">
<p className="flex items-center text-gray-600">
<svg className="w-6 h-6 mr-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
北京市朝阳区
</p>
<p className="flex items-center text-gray-600">
<svg className="w-6 h-6 mr-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
400-888-8888
</p>
<p className="flex items-center text-gray-600">
<svg className="w-6 h-6 mr-3 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
contact@feiip.com
</p>
</div>
</div>
<form className="space-y-6">
<input
type="text"
placeholder="您的姓名"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
/>
<input
type="email"
placeholder="电子邮箱"
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
/>
<textarea
placeholder="留言内容"
rows={4}
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-500"
></textarea>
<button className="w-full bg-blue-900 text-white py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors">
发送信息
</button>
</form>
</div>
</div>
</div>
</section>
{/* Fixed Contact Button - 悬浮按钮 */}
<div className="fixed bottom-6 right-6 flex flex-col space-y-4">
<button className="w-12 h-12 bg-blue-900 text-white rounded-full flex items-center justify-center hover:bg-blue-800 transition-colors shadow-lg">
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
</button>
<button className="w-12 h-12 bg-blue-900 text-white rounded-full flex items-center justify-center hover:bg-blue-800 transition-colors shadow-lg">
<svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
</button>
</div>
</div>
);
};
export default UpdatedHomepage;
