diff --git a/src/app/globals.css b/src/app/globals.css
index b49f4f5..4565f14 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,12 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-/* 企业官网全局样式 */
+/* 现代Web应用全局样式 */
 :root {
   --primary-color: #2563eb;
   --primary-dark: #1d4ed8;
   --secondary-color: #64748b;
-  --accent-color: #f59e0b;
+  --accent-color: #10b981;
   --text-primary: #1f2937;
   --text-secondary: #6b7280;
   --text-light: #9ca3af;
@@ -15,6 +15,8 @@
   --bg-secondary: #f8fafc;
   --bg-dark: #1f2937;
   --border-color: #e5e7eb;
+  --green-50: #f0fdf4;
+  --green-100: #dcfce7;
 }
 
 * {
@@ -56,69 +58,109 @@ a:hover {
 }
 
 .btn {
-  @apply inline-flex items-center justify-center px-6 py-3 text-sm font-medium rounded-lg transition-all duration-300 cursor-pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  text-decoration: none;
 }
 
 .btn-primary {
-  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-4 focus:ring-blue-200;
+  background-color: #2563eb;
+  color: white;
+  border: none;
+}
+
+.btn-primary:hover {
+  background-color: #1d4ed8;
 }
 
 .btn-secondary {
-  @apply bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-4 focus:ring-gray-100;
+  background-color: #f3f4f6;
+  color: #1f2937;
+  border: none;
+}
+
+.btn-secondary:hover {
+  background-color: #e5e7eb;
 }
 
 .btn-outline {
-  @apply border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white focus:ring-4 focus:ring-blue-200;
+  border: 2px solid #2563eb;
+  color: #2563eb;
+  background-color: transparent;
 }
 
-.card {
-  @apply bg-white rounded-lg shadow-md overflow-hidden transition-shadow duration-300 hover:shadow-lg;
+.btn-outline:hover {
+  background-color: #2563eb;
+  color: white;
 }
 
-.section-padding {
-  @apply py-16 lg:py-24;
+.card {
+  background-color: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  transition: box-shadow 0.3s ease;
 }
 
-.section-title {
-  @apply text-3xl lg:text-4xl font-bold text-center mb-4;
+.card:hover {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-.section-subtitle {
-  @apply text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto;
+.section-padding {
+  padding: 4rem 0;
 }
 
-/* 导航栏样式 */
-.navbar {
-  @apply bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50;
+@media (min-width: 1024px) {
+  .section-padding {
+    padding: 6rem 0;
+  }
 }
 
-.navbar-brand {
-  @apply text-2xl font-bold text-blue-600;
+.section-title {
+  font-size: 1.875rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 1rem;
 }
 
-.navbar-nav {
-  @apply flex items-center space-x-8;
+@media (min-width: 1024px) {
+  .section-title {
+    font-size: 2.25rem;
+  }
 }
 
-.navbar-link {
-  @apply text-gray-700 hover:text-blue-600 font-medium transition-colors duration-300;
+.section-subtitle {
+  font-size: 1.125rem;
+  color: #6b7280;
+  text-align: center;
+  margin-bottom: 3rem;
+  max-width: 42rem;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-.navbar-link.active {
-  @apply text-blue-600;
+/* 现代化组件样式 */
+.hero-gradient {
+  background: linear-gradient(135deg, var(--green-50) 0%, var(--green-100) 100%);
 }
 
-/* 英雄区域样式 */
-.hero {
-  @apply bg-gradient-to-br from-blue-50 to-indigo-100 py-20 lg:py-32;
+.service-card {
+  @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-all duration-300 transform hover:-translate-y-1;
 }
 
-.hero-title {
-  @apply text-4xl lg:text-6xl font-bold text-gray-900 mb-6;
+.case-card {
+  @apply bg-white rounded-lg shadow-sm overflow-hidden hover:shadow-lg transition-all duration-300;
 }
 
-.hero-subtitle {
-  @apply text-xl lg:text-2xl text-gray-600 mb-8 max-w-3xl;
+.partner-logo {
+  @apply filter grayscale hover:grayscale-0 transition-all duration-300;
 }
 
 /* 特色区域样式 */
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 470f326..98d1113 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 import HeroSection from '@/components/sections/HeroSection';
 import FeaturesSection from '@/components/sections/FeaturesSection';
-import AboutSection from '@/components/sections/AboutSection';
-import ArticlesSection from '@/components/sections/ArticlesSection';
+import CasesSection from '@/components/sections/CasesSection';
+import PartnersSection from '@/components/sections/PartnersSection';
 import ContactSection from '@/components/sections/ContactSection';
 
 export default function Home() {
@@ -10,14 +10,14 @@ export default function Home() {
       {/* 英雄区域 */}
       <HeroSection />
 
-      {/* 特色服务 */}
+      {/* 产品服务 */}
       <FeaturesSection />
 
-      {/* 关于我们 */}
-      <AboutSection />
+      {/* 客户案例 */}
+      <CasesSection />
 
-      {/* 最新文章 */}
-      <ArticlesSection />
+      {/* 合作伙伴 */}
+      <PartnersSection />
 
       {/* 联系我们 */}
       <ContactSection />
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 014a3a4..300fad0 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,78 +1,79 @@
 import Link from 'next/link';
+import Image from 'next/image';
 
 const Footer = () => {
   const currentYear = new Date().getFullYear();
 
   const footerLinks = {
-    company: [
-      { name: '关于我们', href: '/about' },
-      { name: '企业文化', href: '/culture' },
-      { name: '发展历程', href: '/history' },
-      { name: '招聘信息', href: '/careers' },
+    products: [
+      { name: '网站建设', href: '/products/website' },
+      { name: '移动应用', href: '/products/mobile' },
+      { name: '系统开发', href: '/products/system' },
+      { name: '电商平台', href: '/products/ecommerce' },
     ],
-    services: [
-      { name: '产品服务', href: '/services' },
-      { name: '解决方案', href: '/solutions' },
-      { name: '技术支持', href: '/support' },
-      { name: '客户案例', href: '/cases' },
+    solutions: [
+      { name: '企业数字化', href: '/solutions/digital' },
+      { name: '教育信息化', href: '/solutions/education' },
+      { name: '智慧城市', href: '/solutions/smart-city' },
+      { name: '工业互联网', href: '/solutions/industry' },
     ],
-    resources: [
-      { name: '新闻资讯', href: '/articles' },
-      { name: '行业动态', href: '/news' },
-      { name: '技术博客', href: '/blog' },
-      { name: '下载中心', href: '/downloads' },
+    support: [
+      { name: '技术文档', href: '/docs' },
+      { name: '开发指南', href: '/guide' },
+      { name: 'API参考', href: '/api' },
+      { name: '常见问题', href: '/faq' },
     ],
-    contact: [
+    company: [
+      { name: '关于我们', href: '/about' },
+      { name: '新闻动态', href: '/news' },
+      { name: '招聘信息', href: '/careers' },
       { name: '联系我们', href: '/contact' },
-      { name: '在线客服', href: '/service' },
-      { name: '意见反馈', href: '/feedback' },
-      { name: '合作伙伴', href: '/partners' },
     ],
   };
 
   return (
-    <footer className="footer">
-      <div className="container">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
+    <footer className="bg-gray-900 text-white py-12">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-8">
           {/* 公司信息 */}
           <div className="lg:col-span-2">
-            <div className="footer-section">
-              <h3 className="footer-title">企业官网</h3>
+            <div className="mb-8 lg:mb-0">
+              <h3 className="text-lg font-semibold mb-4">WEBSOFT</h3>
               <p className="text-gray-300 mb-6 max-w-md">
-                我们致力于为客户提供优质的产品和服务，以创新驱动发展，以质量赢得信赖。
-                专业、诚信、创新是我们的核心价值观。
+                专业的Web应用开发服务商，致力于为企业提供高质量的数字化解决方案。
+                我们拥有丰富的行业经验和专业的技术团队。
               </p>
               <div className="space-y-2 text-gray-300">
                 <div className="flex items-center">
                   <svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" />
                   </svg>
-                  <span>北京市朝阳区某某大厦 888 号</span>
+                  <span>福建省福州市鼓楼区软件园</span>
                 </div>
                 <div className="flex items-center">
                   <svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
                   </svg>
-                  <span>400-888-8888</span>
+                  <span>0591-88888888</span>
                 </div>
                 <div className="flex items-center">
                   <svg className="w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
                     <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
                   </svg>
-                  <span>contact@company.com</span>
+                  <span>info@websoft.top</span>
                 </div>
               </div>
             </div>
           </div>
 
-          {/* 公司链接 */}
-          <div className="footer-section">
-            <h3 className="footer-title">公司</h3>
+          {/* 产品链接 */}
+          <div className="mb-8 lg:mb-0">
+            <h3 className="text-lg font-semibold mb-4">产品</h3>
             <ul className="space-y-3">
-              {footerLinks.company.map((link) => (
+              {footerLinks.products.map((link) => (
                 <li key={link.name}>
-                  <Link href={link.href} className="footer-link">
+                  <Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300">
                     {link.name}
                   </Link>
                 </li>
@@ -80,13 +81,13 @@ const Footer = () => {
             </ul>
           </div>
 
-          {/* 服务链接 */}
-          <div className="footer-section">
-            <h3 className="footer-title">服务</h3>
+          {/* 解决方案链接 */}
+          <div className="mb-8 lg:mb-0">
+            <h3 className="text-lg font-semibold mb-4">解决方案</h3>
             <ul className="space-y-3">
-              {footerLinks.services.map((link) => (
+              {footerLinks.solutions.map((link) => (
                 <li key={link.name}>
-                  <Link href={link.href} className="footer-link">
+                  <Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300">
                     {link.name}
                   </Link>
                 </li>
@@ -94,18 +95,43 @@ const Footer = () => {
             </ul>
           </div>
 
-          {/* 资源链接 */}
-          <div className="footer-section">
-            <h3 className="footer-title">资源</h3>
+          {/* 技术支持链接 */}
+          <div className="mb-8 lg:mb-0">
+            <h3 className="text-lg font-semibold mb-4">技术支持</h3>
             <ul className="space-y-3">
-              {footerLinks.resources.map((link) => (
+              {footerLinks.support.map((link) => (
+                <li key={link.name}>
+                  <Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300">
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* 公司链接和二维码 */}
+          <div className="mb-8 lg:mb-0">
+            <h3 className="text-lg font-semibold mb-4">公司</h3>
+            <ul className="space-y-3 mb-6">
+              {footerLinks.company.map((link) => (
                 <li key={link.name}>
-                  <Link href={link.href} className="footer-link">
+                  <Link href={link.href} className="text-gray-300 hover:text-white transition-colors duration-300">
                     {link.name}
                   </Link>
                 </li>
               ))}
             </ul>
+            {/* 二维码 */}
+            <div className="text-center">
+              <div className="w-20 h-20 bg-white rounded-lg flex items-center justify-center mb-2">
+                <div className="w-16 h-16 bg-gray-300 rounded flex items-center justify-center">
+                  <svg className="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M3 4a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm2 2V5h1v1H5zM3 13a1 1 0 011-1h3a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1v-3zm2 2v-1h1v1H5zM13 3a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V4a1 1 0 00-1-1h-3zm1 2v1h1V5h-1z" clipRule="evenodd" />
+                  </svg>
+                </div>
+              </div>
+              <p className="text-xs text-gray-400">微信公众号</p>
+            </div>
           </div>
         </div>
 
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 1e7fb49..b3c361b 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -10,10 +10,11 @@ const Header = () => {
 
   const navigation = [
     { name: '首页', href: '/' },
-    { name: '关于我们', href: '/about' },
-    { name: '产品服务', href: '/services' },
-    { name: '新闻资讯', href: '/articles' },
-    { name: '联系我们', href: '/contact' },
+    { name: '产品', href: '/products' },
+    { name: '解决方案', href: '/solutions' },
+    { name: '案例', href: '/cases' },
+    { name: '关于', href: '/about' },
+    { name: '联系', href: '/contact' },
   ];
 
   const isActive = (href: string) => {
@@ -24,24 +25,28 @@ const Header = () => {
   };
 
   return (
-    <header className="navbar">
-      <div className="container">
+    <header className="bg-white shadow-sm border-b border-gray-100 sticky top-0 z-50">
+      <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
           {/* Logo */}
           <div className="flex-shrink-0">
-            <Link href="/" className="navbar-brand">
-              企业官网
+            <Link href="/" className="text-xl font-bold text-gray-800">
+              WEBSOFT
             </Link>
           </div>
 
           {/* Desktop Navigation */}
           <nav className="hidden md:block">
-            <div className="navbar-nav">
+            <div className="flex items-center space-x-8">
               {navigation.map((item) => (
                 <Link
                   key={item.name}
                   href={item.href}
-                  className={`navbar-link ${isActive(item.href) ? 'active' : ''}`}
+                  className={`text-sm font-medium transition-colors duration-300 ${
+                    isActive(item.href)
+                      ? 'text-blue-600'
+                      : 'text-gray-700 hover:text-blue-600'
+                  }`}
                 >
                   {item.name}
                 </Link>
@@ -49,9 +54,14 @@ const Header = () => {
             </div>
           </nav>
 
-          {/* CTA Button */}
-          <div className="hidden md:block">
-            <Link href="/contact" className="btn btn-primary">
+          {/* Language Switch & CTA */}
+          <div className="hidden md:flex items-center space-x-4">
+            <div className="flex items-center space-x-2 text-sm text-gray-600">
+              <span className="cursor-pointer hover:text-blue-600">中文</span>
+              <span>|</span>
+              <span className="cursor-pointer hover:text-blue-600">EN</span>
+            </div>
+            <Link href="/contact" className="btn btn-primary text-sm">
               免费咨询
             </Link>
           </div>
diff --git a/src/components/sections/FeaturesSection.tsx b/src/components/sections/FeaturesSection.tsx
index dce3783..6923c9d 100644
--- a/src/components/sections/FeaturesSection.tsx
+++ b/src/components/sections/FeaturesSection.tsx
@@ -1,100 +1,66 @@
 'use client';
 
 const FeaturesSection = () => {
-  const features = [
+  const services = [
     {
       icon: (
-        <svg className="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        <svg className="w-12 h-12 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
         </svg>
       ),
-      title: '高效快速',
-      description: '采用先进的技术架构，确保系统运行高效稳定，响应速度快，为您的业务提供强有力的技术支撑。'
+      title: '全栈开发',
+      description: '提供从前端到后端的完整开发服务，包括用户界面设计、业务逻辑实现、数据库设计等全方位技术支持。'
     },
     {
       icon: (
-        <svg className="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <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 className="w-12 h-12 text-green-600" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
         </svg>
       ),
-      title: '安全可靠',
-      description: '多层安全防护机制，数据加密传输，定期安全检测，确保您的数据和业务安全无忧。'
+      title: '企业级应用',
+      description: '专注于企业级应用开发，提供高可用、高性能、高安全性的解决方案，满足企业复杂业务需求。'
     },
     {
       icon: (
-        <svg className="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
+        <svg className="w-12 h-12 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
+          <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z" />
         </svg>
       ),
-      title: '用户友好',
-      description: '简洁直观的用户界面设计，操作简单易懂，降低学习成本，提升用户体验和工作效率。'
+      title: '移动端开发',
+      description: '跨平台移动应用开发，支持iOS和Android平台，提供原生性能体验和统一的用户界面设计。'
     },
     {
       icon: (
-        <svg className="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z" />
+        <svg className="w-12 h-12 text-orange-600" fill="currentColor" viewBox="0 0 20 20">
+          <path fillRule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clipRule="evenodd" />
         </svg>
       ),
-      title: '灵活扩展',
-      description: '模块化设计架构，支持灵活配置和扩展，可根据业务需求进行定制化开发和功能扩展。'
-    },
-    {
-      icon: (
-        <svg className="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
-        </svg>
-      ),
-      title: '专业服务',
-      description: '专业的技术团队提供全方位服务支持，从需求分析到实施部署，再到后期维护，全程贴心服务。'
-    },
-    {
-      icon: (
-        <svg className="feature-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-        </svg>
-      ),
-      title: '数据分析',
-      description: '强大的数据分析功能，实时监控业务指标，生成详细报表，为决策提供数据支撑。'
+      title: '云服务部署',
+      description: '提供云端部署和运维服务，支持多种云平台，确保应用的高可用性和弹性扩展能力。'
     }
   ];
 
   return (
-    <section className="section-padding bg-gray-50">
-      <div className="container">
+    <section className="py-16 lg:py-24 bg-white">
+      <div className="container mx-auto px-4">
         <div className="text-center mb-16">
-          <h2 className="section-title">为什么选择我们</h2>
-          <p className="section-subtitle">
-            我们拥有丰富的行业经验和专业的技术团队，为您提供全方位的企业级解决方案
+          <h2 className="text-3xl lg:text-4xl font-bold text-center mb-4">产品服务</h2>
+          <p className="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+            我们提供全方位的技术服务，从前端到后端，从设计到部署，满足您的所有需求
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {features.map((feature, index) => (
-            <div key={index} className="feature-card fade-in-up" style={{ animationDelay: `${index * 0.1}s` }}>
-              {feature.icon}
-              <h3 className="feature-title">{feature.title}</h3>
-              <p className="feature-description">{feature.description}</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {services.map((service, index) => (
+            <div key={index} className="text-center p-6 rounded-lg bg-gray-50 hover:bg-gray-100 transition-colors duration-300">
+              <div className="flex justify-center mb-4">
+                {service.icon}
+              </div>
+              <h3 className="text-xl font-semibold mb-3">{service.title}</h3>
+              <p className="text-gray-600 text-sm">{service.description}</p>
             </div>
           ))}
         </div>
-
-        {/* 底部 CTA */}
-        <div className="text-center mt-16">
-          <div className="bg-white rounded-2xl shadow-lg p-8 max-w-4xl mx-auto">
-            <h3 className="text-2xl font-bold mb-4">准备开始您的数字化转型之旅？</h3>
-            <p className="text-gray-600 mb-6">
-              联系我们的专业团队，获取免费的咨询服务和定制化解决方案
-            </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <a href="/contact" className="btn btn-primary">
-                立即咨询
-              </a>
-              <a href="/demo" className="btn btn-outline">
-                预约演示
-              </a>
-            </div>
-          </div>
-        </div>
       </div>
     </section>
   );
diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx
index 6d80b34..f9dd415 100644
--- a/src/components/sections/HeroSection.tsx
+++ b/src/components/sections/HeroSection.tsx
@@ -1,71 +1,70 @@
 'use client';
 
 import Link from 'next/link';
-import Image from 'next/image';
 
 const HeroSection = () => {
   return (
-    <section className="hero">
-      <div className="container">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-          {/* 左侧内容 */}
-          <div className="text-center lg:text-left">
-            <h1 className="hero-title">
-              专业的企业
-              <span className="text-blue-600">解决方案</span>
-              服务商
-            </h1>
-            <p className="hero-subtitle">
-              我们致力于为企业提供全方位的数字化转型服务，
-              以创新技术驱动业务增长，助力企业在数字时代取得成功。
-            </p>
-            <div className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
-              <Link href="/contact" className="btn btn-primary">
-                免费咨询
-              </Link>
-              <Link href="/services" className="btn btn-outline">
-                了解服务
-              </Link>
-            </div>
+    <section className="bg-gradient-to-br from-green-50 to-green-100 py-20 lg:py-32">
+      <div className="container mx-auto px-4">
+        <div className="text-center">
+          {/* 主标题 */}
+          <h1 className="text-4xl lg:text-6xl font-bold text-gray-900 mb-6">
+            构建现代Web应用
+          </h1>
 
-            {/* 统计数据 */}
-            <div className="grid grid-cols-3 gap-8 mt-12 pt-8 border-t border-gray-200">
-              <div className="text-center lg:text-left">
-                <div className="text-3xl font-bold text-blue-600 mb-2">500+</div>
-                <div className="text-gray-600">成功案例</div>
-              </div>
-              <div className="text-center lg:text-left">
-                <div className="text-3xl font-bold text-blue-600 mb-2">98%</div>
-                <div className="text-gray-600">客户满意度</div>
+          {/* 技术标签 */}
+          <div className="flex items-center justify-center space-x-4 mb-12">
+            <span className="text-2xl font-semibold text-green-600">Vue</span>
+            <span className="text-2xl text-gray-400">|</span>
+            <span className="text-2xl font-semibold text-blue-600">React</span>
+          </div>
+
+          {/* 描述文字 */}
+          <p className="text-lg text-gray-600 mb-12 max-w-3xl mx-auto">
+            基于现代前端框架，为企业提供高性能、可扩展的Web应用解决方案。
+            我们专注于用户体验和技术创新，助力企业数字化转型。
+          </p>
+
+          {/* 服务图标 */}
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-2xl mx-auto">
+            <div className="flex flex-col items-center">
+              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-3">
+                <svg className="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
+                </svg>
               </div>
-              <div className="text-center lg:text-left">
-                <div className="text-3xl font-bold text-blue-600 mb-2">24/7</div>
-                <div className="text-gray-600">技术支持</div>
+              <span className="text-sm text-gray-600">响应式设计</span>
+            </div>
+
+            <div className="flex flex-col items-center">
+              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-3">
+                <svg className="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clipRule="evenodd" />
+                </svg>
               </div>
+              <span className="text-sm text-gray-600">前端开发</span>
             </div>
-          </div>
 
-          {/* 右侧图片 */}
-          <div className="relative">
-            <div className="relative z-10">
-              <Image
-                src="/hero-image.jpg"
-                alt="企业解决方案"
-                width={600}
-                height={400}
-                className="rounded-lg shadow-2xl"
-                priority
-                onError={(e) => {
-                  // 如果图片加载失败，显示占位符
-                  const target = e.target as HTMLImageElement;
-                  target.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDYwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIiBmaWxsPSIjRjNGNEY2Ii8+CjxwYXRoIGQ9Ik0yNzUgMTc1SDMyNVYyMjVIMjc1VjE3NVoiIGZpbGw9IiM5Q0EzQUYiLz4KPHA+CjxwYXRoIGQ9Ik0yNTAgMjAwSDM1MFYyMDBIMjUwWiIgZmlsbD0iIzlDQTNBRiIvPgo8L3N2Zz4K';
-                }}
-              />
+            <div className="flex flex-col items-center">
+              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-3">
+                <svg className="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z" />
+                  <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z" />
+                  <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z" />
+                </svg>
+              </div>
+              <span className="text-sm text-gray-600">后端服务</span>
             </div>
 
-            {/* 装饰性元素 */}
-            <div className="absolute -top-4 -right-4 w-72 h-72 bg-blue-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div>
-            <div className="absolute -bottom-8 -left-4 w-72 h-72 bg-purple-100 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-pulse"></div>
+            <div className="flex flex-col items-center">
+              <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-3">
+                <svg className="w-8 h-8 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
+                  <path fillRule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clipRule="evenodd" />
+                  <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V9a1 1 0 00-1-1h-1v-1z" />
+                </svg>
+              </div>
+              <span className="text-sm text-gray-600">移动应用</span>
+            </div>
           </div>
         </div>
       </div>