novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 重构网站UI设计并优化布局结构

Browse Source 
重构整体UI设计，采用红色主题配色方案
优化页面布局结构，将Header和Footer移至page组件
更新按钮样式和交互效果，增强视觉反馈
调整全局字体配置，使用思源黑体作为中文字体
改进各区块卡片样式，增加悬停动画效果
优化响应式设计，提升移动端体验
This commit is contained in:
张翔
2026-02-08 16:46:22 +08:00
parent cc55146ba6
commit 522f1e09a7
13 changed files with 392 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(marketing)/layout.tsx
-5
View File
@@ -1,6 +1,3 @@
import { Header } from '@/components/layout/header';
import { Footer } from '@/components/layout/footer';
export default function MarketingLayout({
children,
}: {
@@ -8,9 +5,7 @@ export default function MarketingLayout({
}) {
return (
<div className="min-h-screen flex flex-col">
<Header />
<main className="flex-1">{children}</main>
<Footer />
</div>
);
}
src/app/(marketing)/page.tsx
+13 -13
View File
@@ -1,25 +1,25 @@
import { HeroSection } from '@/components/sections/hero-section';
import { AboutSection } from '@/components/sections/about-section';
import { ServicesSection } from '@/components/sections/services-section';
import { ProductsSection } from '@/components/sections/products-section';
import { NewsSection } from '@/components/sections/news-section';
import { ContactSection } from '@/components/sections/contact-section';
import { COMPANY_INFO } from '@/lib/constants';
"use client";
export const metadata = {
title: `${COMPANY_INFO.name} - 专业科技服务提供商`,
description: COMPANY_INFO.description,
};
import { Header } from "@/components/layout/header";
import { Footer } from "@/components/layout/footer";
import { HeroSection } from "@/components/sections/hero-section";
import { AboutSection } from "@/components/sections/about-section";
import { ServicesSection } from "@/components/sections/services-section";
import { ProductsSection } from "@/components/sections/products-section";
import { NewsSection } from "@/components/sections/news-section";
import { ContactSection } from "@/components/sections/contact-section";
export default function HomePage() {
return (
<>
<main className="min-h-screen">
<Header />
<HeroSection />
<AboutSection />
<ServicesSection />
<ProductsSection />
<NewsSection />
<ContactSection />
</>
<Footer />
</main>
);
}
src/app/globals.css
+113 -64
View File
@@ -8,6 +8,7 @@
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--font-chinese: var(--font-noto-sans-sc);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -44,80 +45,85 @@
}
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.145 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.145 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.145 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--radius: 0.5rem;
--primary: #C41E3A;
--primary-dark: #A01830;
--primary-light: #D93D5C;
--primary-muted: #FEF2F4;
--primary-foreground: #FFFFFF;
--background: #FFFFFF;
--background-secondary: #FAF8F8;
--background-tertiary: #F5F0F0;
--foreground: #1A1A1A;
--card: #FFFFFF;
--card-foreground: #1A1A1A;
--popover: #FFFFFF;
--popover-foreground: #1A1A1A;
--secondary: #FAF8F8;
--secondary-foreground: #1A1A1A;
--muted: #F5F0F0;
--muted-foreground: #6B6B6B;
--accent: #F5F0F0;
--accent-foreground: #1A1A1A;
--destructive: #DC2626;
--destructive-foreground: #FFFFFF;
--border: #E8E0E0;
--input: #E8E0E0;
--ring: #C41E3A;
--chart-1: #C41E3A;
--chart-2: #1B4B8C;
--chart-3: #10B981;
--chart-4: #F59E0B;
--chart-5: #8B5CF6;
--sidebar: #FAF8F8;
--sidebar-foreground: #1A1A1A;
--sidebar-primary: #C41E3A;
--sidebar-primary-foreground: #FFFFFF;
--sidebar-accent: #F5F0F0;
--sidebar-accent-foreground: #1A1A1A;
--sidebar-border: #E8E0E0;
--sidebar-ring: #C41E3A;
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--background: #1A1A1A;
--background-secondary: #2A2A2A;
--background-tertiary: #333333;
--foreground: #FAFAFA;
--card: #2A2A2A;
--card-foreground: #FAFAFA;
--popover: #2A2A2A;
--popover-foreground: #FAFAFA;
--primary: #D93D5C;
--primary-foreground: #FFFFFF;
--secondary: #333333;
--secondary-foreground: #FAFAFA;
--muted: #333333;
--muted-foreground: #A0A0A0;
--accent: #333333;
--accent-foreground: #FAFAFA;
--destructive: #EF4444;
--destructive-foreground: #FFFFFF;
--border: rgba(255, 255, 255, 0.1);
--input: rgba(255, 255, 255, 0.15);
--ring: #D93D5C;
--sidebar: #2A2A2A;
--sidebar-foreground: #FAFAFA;
--sidebar-primary: #D93D5C;
--sidebar-primary-foreground: #FFFFFF;
--sidebar-accent: #333333;
--sidebar-accent-foreground: #FAFAFA;
--sidebar-border: rgba(255, 255, 255, 0.1);
--sidebar-ring: #D93D5C;
}
@layer base {
* {
@apply border-border outline-ring/50;
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
html {
scroll-behavior: smooth;
@@ -129,3 +135,46 @@
@apply w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #F5F0F0;
}
::-webkit-scrollbar-thumb {
background: #C41E3A;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #A01830;
}
::selection {
background-color: #C41E3A;
color: #FFFFFF;
}
src/app/layout.tsx
+8 -32
View File
@@ -1,5 +1,5 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono, Ma_Shan_Zheng, ZCOOL_XiaoWei, Noto_Serif_SC } from "next/font/google";
import { Geist, Geist_Mono, Noto_Sans_SC } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
@@ -12,23 +12,10 @@ const geistMono = Geist_Mono({
subsets: ["latin"],
});
// 书法字体
const maShanZheng = Ma_Shan_Zheng({
weight: "400",
variable: "--font-ma-shan-zheng",
subsets: ["latin"],
});
const zcoolXiaoWei = ZCOOL_XiaoWei({
weight: "400",
variable: "--font-zcool-xiaowei",
subsets: ["latin"],
});
// 思源宋体 - 作为青柳隶书的替代
const notoSerifSC = Noto_Serif_SC({
weight: ["400", "700"],
variable: "--font-noto-serif-sc",
// 思源黑体 - 中文字体
const notoSansSC = Noto_Sans_SC({
weight: ["400", "500", "700"],
variable: "--font-noto-sans-sc",
subsets: ["latin"],
});
@@ -59,11 +46,6 @@ export const metadata: Metadata = {
title: "四川睿新致远科技有限公司",
description: "企业数字化转型服务商",
},
verification: {
// 可以添加搜索引擎验证代码
// google: "your-google-verification-code",
// baidu: "your-baidu-verification-code",
},
alternates: {
canonical: "https://www.novalon.cn",
},
@@ -75,21 +57,15 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="zh-CN">
<html lang="zh-CN" className="scroll-smooth">
<head>
{/* Favicon */}
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/favicon.svg" />
{/* 中文字体 - 从Google Fonts加载 */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
<link
href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&display=swap"
rel="stylesheet"
/>
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} ${maShanZheng.variable} ${zcoolXiaoWei.variable} ${notoSerifSC.variable} antialiased`}
className={`${geistSans.variable} ${geistMono.variable} ${notoSansSC.variable} font-sans antialiased`}
style={{ fontFamily: "'Noto Sans SC', 'Geist', -apple-system, BlinkMacSystemFont, sans-serif" }}
>
{children}
</body>
src/components/layout/footer.tsx
+27 -28
View File
@@ -1,11 +1,10 @@
import Link from 'next/link';
import Image from 'next/image';
import { Mail, Phone, MapPin } from 'lucide-react';
import { COMPANY_INFO, NAVIGATION, SOCIAL_LINKS } from '@/lib/constants';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
export function Footer() {
return (
<footer className="bg-black text-white">
<footer className="bg-[#1A1A1A] text-white">
<div className="container-custom py-16">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
{/* Company Info */}
@@ -13,11 +12,11 @@ export function Footer() {
<div className="flex items-center mb-6">
<img src="/logo-white.svg" alt="四川睿新致远科技有限公司" className="h-12 w-auto" />
</div>
<p className="text-gray-400 text-sm leading-relaxed mb-6">
<p className="text-[#8A8A8A] text-sm leading-relaxed mb-6">
{COMPANY_INFO.description}
</p>
<div className="flex flex-col items-start gap-3">
<span className="text-gray-400 text-sm">关注微信公众号</span>
<span className="text-[#8A8A8A] text-sm">关注微信公众号</span>
<div className="w-24 h-24 bg-white rounded-lg p-2">
<img
src="/images/qrcode-wechat.png"
@@ -30,16 +29,16 @@ export function Footer() {
{/* Quick Links */}
<div>
<h3 className="font-semibold text-lg mb-6">快速链接</h3>
<h3 className="font-semibold text-lg mb-6 text-white">快速链接</h3>
<ul className="space-y-3">
{NAVIGATION.map((item) => (
<li key={item.id}>
<Link
<a
href={item.href}
className="text-gray-400 hover:text-white transition-colors"
className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors"
>
{item.label}
</Link>
</a>
</li>
))}
</ul>
@@ -47,46 +46,46 @@ export function Footer() {
{/* Services */}
<div>
<h3 className="font-semibold text-lg mb-6">服务项目</h3>
<h3 className="font-semibold text-lg mb-6 text-white">服务项目</h3>
<ul className="space-y-3">
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
软件开发
</Link>
</a>
</li>
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
云服务
</Link>
</a>
</li>
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
数据分析
</Link>
</a>
</li>
<li>
<Link href="/services" className="text-gray-400 hover:text-white transition-colors">
<a href="#services" className="text-[#8A8A8A] hover:text-[#C41E3A] transition-colors">
信息安全
</Link>
</a>
</li>
</ul>
</div>
{/* Contact Info */}
<div>
<h3 className="font-semibold text-lg mb-6">联系方式</h3>
<h3 className="font-semibold text-lg mb-6 text-white">联系方式</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<MapPin className="w-5 h-5 text-gray-400 mt-0.5" />
<span className="text-gray-400">{COMPANY_INFO.address}</span>
<MapPin className="w-5 h-5 text-[#C41E3A] mt-0.5" />
<span className="text-[#8A8A8A]">{COMPANY_INFO.address}</span>
</li>
<li className="flex items-center gap-3">
<Phone className="w-5 h-5 text-gray-400" />
<span className="text-gray-400">{COMPANY_INFO.phone}</span>
<Phone className="w-5 h-5 text-[#C41E3A]" />
<span className="text-[#8A8A8A]">{COMPANY_INFO.phone}</span>
</li>
<li className="flex items-center gap-3">
<Mail className="w-5 h-5 text-gray-400" />
<span className="text-gray-400">{COMPANY_INFO.email}</span>
<Mail className="w-5 h-5 text-[#C41E3A]" />
<span className="text-[#8A8A8A]">{COMPANY_INFO.email}</span>
</li>
</ul>
</div>
@@ -95,14 +94,14 @@ export function Footer() {
{/* Bottom */}
<div className="border-t border-white/10 mt-12 pt-8">
<div className="flex flex-col md:flex-row justify-between items-center gap-4">
<p className="text-gray-400 text-sm">
<p className="text-[#8A8A8A] text-sm">
© {new Date().getFullYear()} {COMPANY_INFO.name}. All rights reserved.
</p>
<div className="flex gap-6">
<Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
<Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
隐私政策
</Link>
<Link href="#" className="text-gray-400 hover:text-white text-sm transition-colors">
<Link href="#" className="text-[#8A8A8A] hover:text-[#C41E3A] text-sm transition-colors">
服务条款
</Link>
</div>
src/components/layout/header.tsx
+46 -14
View File
@@ -2,7 +2,7 @@
import Link from 'next/link';
import { useState, useEffect, useCallback } from 'react';
import { Menu, X } from 'lucide-react';
import { Menu } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
import { COMPANY_INFO, NAVIGATION } from '@/lib/constants';
@@ -67,19 +67,19 @@ export function Header() {
className={cn(
"fixed top-0 left-0 right-0 z-50 transition-all duration-300",
isScrolled
? "bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200/50"
: "bg-slate-50/85 backdrop-blur-md border-b border-slate-200"
? "bg-white/95 backdrop-blur-md shadow-sm border-b border-[#E8E0E0]"
: "bg-transparent"
)}
>
<div className="container-custom">
<div className="flex items-center justify-center h-20 relative">
<div className="flex items-center justify-between h-20">
{/* Logo */}
<Link
href="#home"
onClick={(e) => handleNavClick(e, '#home')}
className="flex items-center absolute left-0"
className="flex items-center"
>
<img src="/logo.svg" alt={COMPANY_INFO.name} className="h-12 w-auto" />
<img src="/logo.svg" alt={COMPANY_INFO.name} className="h-10 w-auto" />
</Link>
{/* Desktop Navigation */}
@@ -90,18 +90,37 @@ export function Header() {
href={item.href}
onClick={(e) => handleNavClick(e, item.href)}
className={cn(
"px-4 py-2 text-sm font-medium rounded-full transition-all duration-200",
"relative px-4 py-2 text-sm font-medium transition-all duration-200",
activeSection === item.id.replace('#', '')
? "text-black bg-black/5"
: "text-gray-600 hover:text-black hover:bg-black/5"
? "text-[#C41E3A]"
: "text-[#4A4A4A] hover:text-[#C41E3A]"
)}
>
{item.label}
{/* 活跃指示条 */}
<span
className={cn(
"absolute bottom-0 left-1/2 -translate-x-1/2 h-0.5 bg-[#C41E3A] transition-all duration-200",
activeSection === item.id.replace('#', '') ? "w-6" : "w-0"
)}
/>
</a>
))}
</nav>
{/* CTA Button - Desktop */}
<div className="hidden lg:block">
<Button
onClick={(e) => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}}
>
立即咨询
</Button>
</div>
{/* Mobile Menu */}
<Sheet open={isOpen} onOpenChange={setIsOpen}>
@@ -110,7 +129,7 @@ export function Header() {
<Menu className="h-6 w-6" />
</Button>
</SheetTrigger>
<SheetContent side="right" className="w-[300px]">
<SheetContent side="right" className="w-[300px] bg-white">
<div className="flex flex-col gap-2 mt-8">
{NAVIGATION.map((item) => (
<a
@@ -120,14 +139,27 @@ export function Header() {
className={cn(
"px-4 py-3 text-lg font-medium rounded-lg transition-all duration-200",
activeSection === item.id.replace('#', '')
? "text-black bg-black/5"
: "text-gray-600 hover:text-black hover:bg-black/5"
? "text-[#C41E3A] bg-[#FEF2F4]"
: "text-[#4A4A4A] hover:text-[#C41E3A] hover:bg-[#F5F0F0]"
)}
>
{item.label}
</a>
))}
<div className="mt-4 pt-4 border-t border-[#E8E0E0]">
<Button
className="w-full"
onClick={() => {
const element = document.getElementById('contact');
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
setIsOpen(false);
}}
>
立即咨询
</Button>
</div>
</div>
</SheetContent>
</Sheet>
src/components/sections/about-section.tsx
+22 -23
View File
@@ -3,7 +3,6 @@
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import { Lightbulb, Users, Target, Award } from 'lucide-react';
import { COMPANY_INFO, STATS } from '@/lib/constants';
@@ -44,7 +43,7 @@ export function AboutSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="about" className="py-24 bg-white" ref={ref}>
<section id="about" className="py-24 bg-[#FAF8F8]" ref={ref}>
<div className="container-custom">
{/* 头部介绍 */}
<motion.div
@@ -54,25 +53,25 @@ export function AboutSection() {
className="max-w-4xl mx-auto"
>
<div className="text-center mb-16">
<Badge variant="outline" className="mb-4">
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
关于我们
</Badge>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
关于 {COMPANY_INFO.shortName}
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
关于 <span className="text-[#C41E3A]">{COMPANY_INFO.shortName}</span>
</h2>
<p className="text-lg text-gray-600">
<p className="text-lg text-[#4A4A4A]">
{COMPANY_INFO.slogan}
</p>
</div>
{/* 公司简介 */}
<div className="prose prose-lg max-w-none mb-16">
<h3 className="text-2xl font-bold text-black mb-4">公司简介</h3>
<p className="text-gray-600 mb-6 leading-relaxed">
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-4">公司简介</h3>
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
{COMPANY_INFO.name}成立于{COMPANY_INFO.founded}年1月15日，总部位于{COMPANY_INFO.location}龙泉驿区幸福路12号。
公司专注于信息技术服务与解决方案，致力于为企业提供全方位的数字化转型支持。
</p>
<p className="text-gray-600 mb-6 leading-relaxed">
<p className="text-[#4A4A4A] mb-6 leading-relaxed">
我们拥有一支经验丰富的技术团队，在软件开发、云计算、数据分析、信息安全等领域具有深厚的技术积累。
公司秉承"专注科技创新，驱动智慧未来"的理念，为客户提供高质量的产品和服务，助力企业在数字经济时代实现转型升级。
</p>
@@ -86,10 +85,10 @@ export function AboutSection() {
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
>
{STATS.map((stat, idx) => (
<Card key={idx} className="text-center">
<Card key={idx} className="text-center border-[#E8E0E0] bg-white hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1">
<CardContent className="pt-6">
<div className="text-3xl sm:text-4xl font-bold text-black mb-2">{stat.value}</div>
<div className="text-sm text-gray-600">{stat.label}</div>
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A] mb-2">{stat.value}</div>
<div className="text-sm text-[#6B6B6B]">{stat.label}</div>
</CardContent>
</Card>
))}
@@ -102,7 +101,7 @@ export function AboutSection() {
transition={{ duration: 0.6, delay: 0.3 }}
className="mb-16"
>
<h3 className="text-2xl font-bold text-black mb-8 text-center">企业价值观</h3>
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">企业价值观</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{values.map((value, idx) => (
<motion.div
@@ -110,14 +109,14 @@ export function AboutSection() {
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.4 + idx * 0.1 }}
className="flex items-start gap-4 p-6 bg-gray-50 rounded-xl"
className="flex items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0] hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300"
>
<div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
<div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center flex-shrink-0">
<value.icon className="w-6 h-6 text-white" />
</div>
<div>
<h4 className="font-semibold text-black mb-2">{value.title}</h4>
<p className="text-gray-600 text-sm">{value.description}</p>
<h4 className="font-semibold text-[#1A1A1A] mb-2">{value.title}</h4>
<p className="text-[#6B6B6B] text-sm">{value.description}</p>
</div>
</motion.div>
))}
@@ -130,7 +129,7 @@ export function AboutSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.5 }}
>
<h3 className="text-2xl font-bold text-black mb-8 text-center">发展历程</h3>
<h3 className="text-2xl font-bold text-[#1A1A1A] mb-8 text-center">发展历程</h3>
<div className="space-y-6">
{milestones.map((milestone, idx) => (
<motion.div
@@ -138,14 +137,14 @@ export function AboutSection() {
initial={{ opacity: 0, x: -20 }}
animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.5, delay: 0.6 + idx * 0.1 }}
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-gray-50 rounded-xl"
className="flex flex-col md:flex-row md:items-start gap-4 p-6 bg-white rounded-xl border border-[#E8E0E0]"
>
<div className="md:w-32 flex-shrink-0">
<span className="text-sm font-medium text-gray-500">{milestone.date}</span>
<span className="text-sm font-medium text-[#C41E3A]">{milestone.date}</span>
</div>
<div className="flex-1">
<h4 className="font-semibold text-black mb-1">{milestone.title}</h4>
<p className="text-gray-600 text-sm">{milestone.description}</p>
<h4 className="font-semibold text-[#1A1A1A] mb-1">{milestone.title}</h4>
<p className="text-[#6B6B6B] text-sm">{milestone.description}</p>
</div>
</motion.div>
))}
src/components/sections/contact-section.tsx
+58 -41
View File
@@ -4,7 +4,6 @@ import { useState } from 'react';
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
@@ -30,7 +29,7 @@ export function ContactSection() {
}
return (
<section id="contact" className="py-24 bg-gray-50" ref={ref}>
<section id="contact" className="py-24 bg-[#FAF8F8]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -38,13 +37,13 @@ export function ContactSection() {
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
<Badge variant="outline" className="mb-4">
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
联系我们
</Badge>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
与我们取得联系
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
与我们取得<span className="text-[#C41E3A]">联系</span>
</h2>
<p className="text-lg text-gray-600">
<p className="text-lg text-[#4A4A4A]">
无论您有任何问题或合作意向，我们都很乐意与您交流
</p>
</motion.div>
@@ -57,56 +56,56 @@ export function ContactSection() {
transition={{ duration: 0.6, delay: 0.2 }}
className="flex flex-col gap-6 h-full"
>
<Card className="flex-1 flex flex-col">
<Card className="flex-1 flex flex-col border-[#E8E0E0] bg-white">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Sparkles className="w-5 h-5 text-gray-600" />
<CardTitle className="flex items-center gap-2 text-[#1A1A1A]">
<Sparkles className="w-5 h-5 text-[#C41E3A]" />
我们的承诺
</CardTitle>
</CardHeader>
<CardContent className="space-y-6 flex-1">
<div className="flex items-start gap-4">
<div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
<HeadphonesIcon className="w-5 h-5 text-gray-700" />
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
<HeadphonesIcon className="w-5 h-5 text-[#C41E3A]" />
</div>
<div>
<h3 className="font-semibold text-black">专业响应</h3>
<p className="text-gray-600">工作日 2 小时内快速响应您的咨询</p>
<h3 className="font-semibold text-[#1A1A1A]">专业响应</h3>
<p className="text-[#6B6B6B]">工作日 2 小时内快速响应您的咨询</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
<MessageCircle className="w-5 h-5 text-gray-700" />
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
<MessageCircle className="w-5 h-5 text-[#C41E3A]" />
</div>
<div>
<h3 className="font-semibold text-black">免费咨询</h3>
<p className="text-gray-600">提供免费的业务咨询和方案评估服务</p>
<h3 className="font-semibold text-[#1A1A1A]">免费咨询</h3>
<p className="text-[#6B6B6B]">提供免费的业务咨询和方案评估服务</p>
</div>
</div>
<div className="flex items-start gap-4">
<div className="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0">
<Sparkles className="w-5 h-5 text-gray-700" />
<div className="w-10 h-10 bg-[#FEF2F4] rounded-lg flex items-center justify-center flex-shrink-0">
<Sparkles className="w-5 h-5 text-[#C41E3A]" />
</div>
<div>
<h3 className="font-semibold text-black">定制方案</h3>
<p className="text-gray-600">根据您的需求量身定制最优解决方案</p>
<h3 className="font-semibold text-[#1A1A1A]">定制方案</h3>
<p className="text-[#6B6B6B]">根据您的需求量身定制最优解决方案</p>
</div>
</div>
</CardContent>
</Card>
<Card>
<Card className="border-[#E8E0E0] bg-white">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Clock className="w-5 h-5 text-gray-600" />
<CardTitle className="flex items-center gap-2 text-[#1A1A1A]">
<Clock className="w-5 h-5 text-[#C41E3A]" />
工作时间
</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">周一至周五</span>
<span className="text-black font-medium">9:00 - 18:00</span>
<span className="text-[#6B6B6B]">周一至周五</span>
<span className="text-[#1A1A1A] font-medium">9:00 - 18:00</span>
</div>
</div>
</CardContent>
@@ -120,43 +119,60 @@ export function ContactSection() {
transition={{ duration: 0.6, delay: 0.3 }}
className="h-full"
>
<Card className="h-full flex flex-col">
<Card className="h-full flex flex-col border-[#E8E0E0] bg-white">
<CardHeader>
<CardTitle>发送消息</CardTitle>
<CardTitle className="text-[#1A1A1A]">发送消息</CardTitle>
</CardHeader>
<CardContent>
{isSubmitted ? (
<div className="text-center py-12">
<div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<Send className="w-8 h-8 text-green-600" />
<div className="w-16 h-16 bg-[#FEF2F4] rounded-full flex items-center justify-center mx-auto mb-4">
<Send className="w-8 h-8 text-[#C41E3A]" />
</div>
<h3 className="text-xl font-semibold text-black mb-2">消息已发送</h3>
<p className="text-gray-600">感谢您的留言，我们会尽快与您联系！</p>
<h3 className="text-xl font-semibold text-[#1A1A1A] mb-2">消息已发送</h3>
<p className="text-[#6B6B6B]">感谢您的留言，我们会尽快与您联系！</p>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div className="space-y-2">
<label htmlFor="name" className="text-sm font-medium text-black">
<label htmlFor="name" className="text-sm font-medium text-[#1A1A1A]">
姓名
</label>
<Input id="name" placeholder="请输入您的姓名" required />
<Input
id="name"
placeholder="请输入您的姓名"
required
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
/>
</div>
<div className="space-y-2">
<label htmlFor="phone" className="text-sm font-medium text-black">
<label htmlFor="phone" className="text-sm font-medium text-[#1A1A1A]">
电话
</label>
<Input id="phone" type="tel" placeholder="请输入您的电话" required />
<Input
id="phone"
type="tel"
placeholder="请输入您的电话"
required
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
/>
</div>
</div>
<div className="space-y-2">
<label htmlFor="email" className="text-sm font-medium text-black">
<label htmlFor="email" className="text-sm font-medium text-[#1A1A1A]">
邮箱
</label>
<Input id="email" type="email" placeholder="请输入您的邮箱" required />
<Input
id="email"
type="email"
placeholder="请输入您的邮箱"
required
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
/>
</div>
<div className="space-y-2">
<label htmlFor="message" className="text-sm font-medium text-black">
<label htmlFor="message" className="text-sm font-medium text-[#1A1A1A]">
留言内容
</label>
<Textarea
@@ -164,11 +180,12 @@ export function ContactSection() {
placeholder="请输入您想咨询的内容"
rows={5}
required
className="border-[#E8E0E0] focus:border-[#C41E3A] focus:ring-[#C41E3A]/20"
/>
</div>
<Button
type="submit"
className="w-full bg-black text-white hover:bg-gray-800"
className="w-full"
disabled={isSubmitting}
>
{isSubmitting ? (
src/components/sections/hero-section.tsx
+37 -26
View File
@@ -1,24 +1,26 @@
'use client';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { COMPANY_INFO, STATS } from '@/lib/constants';
import { ArrowRight } from 'lucide-react';
export function HeroSection() {
const handleScrollTo = (id: string) => {
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
};
return (
<section id="home" className="relative min-h-screen flex items-center bg-white overflow-hidden pt-20">
{/* Background Pattern */}
<div className="absolute inset-0 opacity-5">
<div
className="absolute inset-0"
style={{
backgroundImage: 'radial-gradient(circle at 1px 1px, black 1px, transparent 0)',
backgroundSize: '40px 40px',
}}
/>
</div>
<section id="home" className="relative min-h-screen flex items-center overflow-hidden pt-20">
{/* Background Gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-[#FEF2F4]/50 via-white to-[#FAF8F8]" />
{/* Decorative Elements */}
<div className="absolute top-1/4 right-0 w-96 h-96 bg-[#C41E3A]/5 rounded-full blur-3xl" />
<div className="absolute bottom-1/4 left-0 w-72 h-72 bg-[#C41E3A]/3 rounded-full blur-3xl" />
{/* Content */}
<div className="container-custom relative z-10 py-20">
@@ -29,12 +31,12 @@ export function HeroSection() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-slate-50 to-slate-100 border border-slate-200 shadow-sm mb-8">
<div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-white border border-[#E8E0E0] shadow-sm mb-8">
<span className="relative flex h-2.5 w-2.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" />
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#C41E3A] opacity-75" />
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-[#C41E3A]" />
</span>
<span className="text-sm font-medium text-slate-700 tracking-wide">
<span className="text-sm font-medium text-[#4A4A4A] tracking-wide">
专业科技服务提供商
</span>
</div>
@@ -45,7 +47,7 @@ export function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }}
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-black leading-tight mb-6"
className="text-4xl sm:text-5xl lg:text-6xl font-bold text-[#1A1A1A] leading-tight mb-6"
>
{COMPANY_INFO.name}
</motion.h1>
@@ -55,7 +57,7 @@ export function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="text-xl sm:text-2xl text-gray-600 mb-8"
className="text-xl sm:text-2xl text-[#C41E3A] font-medium mb-8"
>
{COMPANY_INFO.slogan}
</motion.p>
@@ -65,7 +67,7 @@ export function HeroSection() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }}
className="text-lg text-gray-500 max-w-2xl mx-auto mb-10"
className="text-lg text-[#4A4A4A] max-w-2xl mx-auto mb-10"
>
{COMPANY_INFO.description}
</motion.p>
@@ -77,11 +79,20 @@ export function HeroSection() {
transition={{ duration: 0.6, delay: 0.4 }}
className="flex flex-col sm:flex-row items-center justify-center gap-4"
>
<Button size="lg" asChild>
<Link href="/about">了解更多</Link>
<Button
size="lg"
onClick={() => handleScrollTo('about')}
className="group"
>
了解更多
<ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
</Button>
<Button size="lg" variant="outline" asChild>
<Link href="/contact">联系我们</Link>
<Button
size="lg"
variant="outline"
onClick={() => handleScrollTo('contact')}
>
联系我们
</Button>
</motion.div>
@@ -100,8 +111,8 @@ export function HeroSection() {
transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
className="text-center"
>
<div className="text-3xl sm:text-4xl font-bold text-black">{stat.value}</div>
<div className="text-sm text-gray-500 mt-1">{stat.label}</div>
<div className="text-3xl sm:text-4xl font-bold text-[#C41E3A]">{stat.value}</div>
<div className="text-sm text-[#6B6B6B] mt-1">{stat.label}</div>
</motion.div>
))}
</motion.div>
src/components/sections/news-section.tsx
+18 -21
View File
@@ -3,7 +3,6 @@
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { ArrowRight, Calendar } from 'lucide-react';
import { NEWS } from '@/lib/constants';
@@ -21,13 +20,13 @@ export function NewsSection() {
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
<Badge variant="outline" className="mb-4">
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
新闻动态
</Badge>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
最新资讯
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
最新<span className="text-[#C41E3A]">资讯</span>
</h2>
<p className="text-lg text-gray-600">
<p className="text-lg text-[#4A4A4A]">
了解公司最新动态、行业资讯和技术分享
</p>
</motion.div>
@@ -40,27 +39,29 @@ export function NewsSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
>
<Card className="h-full flex flex-col group hover:shadow-lg transition-shadow">
<Card className="h-full flex flex-col border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
<CardHeader>
<div className="flex items-center gap-2 mb-3">
<Badge variant="secondary">{news.category}</Badge>
<span className="text-sm text-gray-500 flex items-center gap-1">
<span className="inline-block px-2 py-0.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium">
{news.category}
</span>
<span className="text-sm text-[#8A8A8A] flex items-center gap-1">
<Calendar className="w-3 h-3" />
{news.date}
</span>
</div>
<CardTitle className="text-xl leading-tight">{news.title}</CardTitle>
<CardTitle className="text-xl leading-tight text-[#1A1A1A]">{news.title}</CardTitle>
</CardHeader>
<CardContent className="flex-1 flex flex-col">
<CardDescription className="text-base leading-relaxed mb-6 flex-1">
<CardDescription className="text-base leading-relaxed mb-6 flex-1 text-[#6B6B6B]">
{news.excerpt}
</CardDescription>
<a
href={`/news/${news.id}`}
className="inline-flex items-center text-sm font-medium text-black hover:underline"
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors group/link"
>
阅读更多
<ArrowRight className="ml-1 w-4 h-4" />
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover/link:translate-x-1" />
</a>
</CardContent>
</Card>
@@ -68,7 +69,7 @@ export function NewsSection() {
))}
</div>
{/* 查看更多 - 改为展开更多新闻 */}
{/* 查看更多 */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -77,16 +78,12 @@ export function NewsSection() {
>
<button
onClick={() => {
const newsSection = document.getElementById('news');
if (newsSection) {
// 展开更多新闻的逻辑可以在这里添加
alert('更多新闻功能开发中...');
}
alert('更多新闻功能开发中...');
}}
className="inline-flex items-center text-sm font-medium text-black hover:underline cursor-pointer bg-transparent border-none"
className="inline-flex items-center text-sm font-medium text-[#C41E3A] hover:text-[#A01830] transition-colors bg-transparent border-none cursor-pointer group"
>
查看全部新闻
<ArrowRight className="ml-1 w-4 h-4" />
<ArrowRight className="ml-1 w-4 h-4 transition-transform group-hover:translate-x-1" />
</button>
</motion.div>
</div>
src/components/sections/products-section.tsx
+23 -24
View File
@@ -3,7 +3,6 @@
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowRight, Check, TrendingUp } from 'lucide-react';
@@ -14,7 +13,7 @@ export function ProductsSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="products" className="py-24 bg-gray-50" ref={ref}>
<section id="products" className="py-24 bg-[#FAF8F8]" ref={ref}>
<div className="container-custom">
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -22,13 +21,13 @@ export function ProductsSection() {
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
<Badge variant="outline" className="mb-4">
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
产品服务
</Badge>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-black mb-6">
我们的产品
</span>
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-[#1A1A1A] mb-6">
我们的<span className="text-[#C41E3A]">产品</span>
</h2>
<p className="text-lg text-gray-600">
<p className="text-lg text-[#4A4A4A]">
自主研发的企业级产品，助力企业高效运营，实现数字化转型
</p>
</motion.div>
@@ -41,28 +40,28 @@ export function ProductsSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: 0.1 + idx * 0.1 }}
>
<Card className="h-full flex flex-col group hover:shadow-lg transition-shadow">
<Card className="h-full flex flex-col border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
<CardHeader>
<Badge variant="secondary" className="w-fit mb-3">
<span className="inline-block px-3 py-1 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-xs font-medium w-fit mb-3">
{product.category}
</Badge>
<CardTitle className="text-xl">{product.title}</CardTitle>
</span>
<CardTitle className="text-xl text-[#1A1A1A]">{product.title}</CardTitle>
</CardHeader>
<CardContent className="flex-1 flex flex-col">
<CardDescription className="text-base leading-relaxed mb-4 flex-1">
<CardDescription className="text-base leading-relaxed mb-4 flex-1 text-[#6B6B6B]">
{product.description}
</CardDescription>
{/* 核心功能 */}
<div className="mb-4">
<p className="text-sm font-medium text-black mb-2">核心功能</p>
<p className="text-sm font-medium text-[#1A1A1A] mb-2">核心功能</p>
<div className="flex flex-wrap gap-1.5">
{product.features.slice(0, 4).map((feature, idx) => (
<span
key={idx}
className="inline-flex items-center text-xs px-2 py-1 bg-gray-100 text-gray-700 rounded"
className="inline-flex items-center text-xs px-2 py-1 bg-[#F5F0F0] text-[#4A4A4A] rounded"
>
<Check className="w-3 h-3 mr-1 text-green-600" />
<Check className="w-3 h-3 mr-1 text-[#C41E3A]" />
{feature}
</span>
))}
@@ -71,21 +70,21 @@ export function ProductsSection() {
{/* 核心价值 */}
<div className="mb-4">
<p className="text-sm font-medium text-black mb-2 flex items-center">
<TrendingUp className="w-4 h-4 mr-1 text-blue-600" />
<p className="text-sm font-medium text-[#1A1A1A] mb-2 flex items-center">
<TrendingUp className="w-4 h-4 mr-1 text-[#C41E3A]" />
核心价值
</p>
<ul className="space-y-1">
{product.benefits.map((benefit, idx) => (
<li key={idx} className="text-xs text-gray-600 flex items-start">
<span className="text-blue-600 mr-1.5">•</span>
<li key={idx} className="text-xs text-[#6B6B6B] flex items-start">
<span className="text-[#C41E3A] mr-1.5">•</span>
{benefit}
</li>
))}
</ul>
</div>
<Button variant="outline" className="w-full mt-auto group-hover:bg-black group-hover:text-white transition-colors">
<Button variant="outline" className="w-full mt-auto group-hover:bg-[#C41E3A] group-hover:text-white group-hover:border-[#C41E3A] transition-colors">
了解详情
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
@@ -102,14 +101,14 @@ export function ProductsSection() {
transition={{ duration: 0.6, delay: 0.5 }}
className="mt-20 text-center"
>
<div className="bg-gradient-to-r from-gray-100 to-gray-200 rounded-2xl p-12">
<h3 className="text-2xl sm:text-3xl font-bold text-black mb-4">
<div className="bg-gradient-to-r from-[#FEF2F4] to-[#FAF8F8] rounded-2xl p-12 border border-[#E8E0E0]">
<h3 className="text-2xl sm:text-3xl font-bold text-[#1A1A1A] mb-4">
需要定制化解决方案？
</h3>
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
<p className="text-[#6B6B6B] mb-8 max-w-2xl mx-auto">
我们的专业团队可以根据您的业务需求，提供量身定制的产品开发和系统集成服务
</p>
<Button size="lg" className="bg-black text-white hover:bg-gray-800">
<Button size="lg">
联系我们
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
src/components/sections/services-section.tsx
+13 -17
View File
@@ -1,13 +1,11 @@
'use client';
import Link from 'next/link';
import { motion } from 'framer-motion';
import { useInView } from 'framer-motion';
import { useRef } from 'react';
import { Code, Cloud, BarChart3, Shield, ArrowRight } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { SERVICES } from '@/lib/constants';
const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
@@ -22,7 +20,7 @@ export function ServicesSection() {
const isInView = useInView(ref, { once: true, margin: '-100px' });
return (
<section id="services" className="py-24 bg-gray-50" ref={ref}>
<section id="services" className="py-24 bg-white" ref={ref}>
<div className="container-custom">
{/* Section Header */}
<motion.div
@@ -31,13 +29,13 @@ export function ServicesSection() {
transition={{ duration: 0.6 }}
className="text-center max-w-3xl mx-auto mb-16"
>
<Badge variant="outline" className="mb-4">
<span className="inline-block px-4 py-1.5 rounded-full bg-[#FEF2F4] text-[#C41E3A] text-sm font-medium mb-4">
核心业务
</Badge>
<h2 className="text-3xl sm:text-4xl font-bold text-black mb-4">
专业服务，助力发展
</span>
<h2 className="text-3xl sm:text-4xl font-bold text-[#1A1A1A] mb-4">
专业服务，<span className="text-[#C41E3A]">助力发展</span>
</h2>
<p className="text-lg text-gray-600">
<p className="text-lg text-[#4A4A4A]">
我们提供全方位的技术解决方案，帮助企业实现数字化转型
</p>
</motion.div>
@@ -53,15 +51,15 @@ export function ServicesSection() {
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.5, delay: index * 0.1 }}
>
<Card className="h-full hover:shadow-lg transition-shadow">
<Card className="h-full border-[#E8E0E0] bg-white hover:border-[#C41E3A]/30 hover:shadow-lg hover:shadow-[#C41E3A]/5 transition-all duration-300 hover:-translate-y-1 group">
<CardHeader>
<div className="w-12 h-12 bg-black rounded-lg flex items-center justify-center mb-4">
<div className="w-12 h-12 bg-[#C41E3A] rounded-lg flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
{Icon && <Icon className="w-6 h-6 text-white" />}
</div>
<CardTitle className="text-xl">{service.title}</CardTitle>
<CardTitle className="text-xl text-[#1A1A1A]">{service.title}</CardTitle>
</CardHeader>
<CardContent>
<CardDescription className="text-base">
<CardDescription className="text-base text-[#6B6B6B]">
{service.description}
</CardDescription>
</CardContent>
@@ -78,11 +76,9 @@ export function ServicesSection() {
transition={{ duration: 0.6, delay: 0.4 }}
className="text-center mt-12"
>
<Button variant="outline" size="lg" asChild>
<Link href="/services">
查看全部服务
<ArrowRight className="ml-2 w-4 h-4" />
</Link>
<Button variant="outline" size="lg" className="group">
查看全部服务
<ArrowRight className="ml-2 w-4 h-4 transition-transform group-hover:translate-x-1" />
</Button>
</motion.div>
</div>
src/components/ui/button.tsx
+14 -14
View File
@@ -5,30 +5,30 @@ import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
default: "bg-[#C41E3A] text-white hover:bg-[#A01830] hover:shadow-lg hover:shadow-[#C41E3A]/25 hover:-translate-y-0.5",
destructive:
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
"bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500/50",
outline:
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
"border-2 border-[#C41E3A] bg-transparent text-[#C41E3A] hover:bg-[#FEF2F4] hover:text-[#A01830]",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
"bg-[#FAF8F8] text-[#1A1A1A] hover:bg-[#F5F0F0]",
ghost:
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline",
"hover:bg-[#F5F0F0] hover:text-[#1A1A1A]",
link: "text-[#C41E3A] underline-offset-4 hover:underline hover:text-[#A01830]",
},
size: {
default: "h-9 px-4 py-2 has-[>svg]:px-3",
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
icon: "size-9",
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
default: "h-10 px-6 py-2",
xs: "h-7 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
sm: "h-8 rounded-md gap-1.5 px-4",
lg: "h-12 rounded-md px-8 text-base",
icon: "size-10",
"icon-xs": "size-7 rounded-md [&_svg:not([class*='size-'])]:size-3",
"icon-sm": "size-8",
"icon-lg": "size-10",
"icon-lg": "size-12",
},
},
defaultVariants: {