diff --git a/src/app/(marketing)/page.tsx b/src/app/(marketing)/page.tsx index e5fef5c..21820cb 100644 --- a/src/app/(marketing)/page.tsx +++ b/src/app/(marketing)/page.tsx @@ -3,6 +3,11 @@ import { Header } from "@/components/layout/header"; import { Footer } from "@/components/layout/footer"; import { HeroSection } from "@/components/sections/hero-section"; +import { StatsSection } from "@/components/sections/stats-section"; +import { SolutionsSection } from "@/components/sections/solutions-section"; +import { TechStackSection } from "@/components/sections/tech-stack-section"; +import { InsightsSection } from "@/components/sections/insights-section"; +import { CasesSection } from "@/components/sections/cases-section"; import { AboutSection } from "@/components/sections/about-section"; import { ServicesSection } from "@/components/sections/services-section"; import { ProductsSection } from "@/components/sections/products-section"; @@ -14,6 +19,11 @@ export default function HomePage() {
+ + + + + diff --git a/src/components/sections/insights-section.tsx b/src/components/sections/insights-section.tsx new file mode 100644 index 0000000..d59662c --- /dev/null +++ b/src/components/sections/insights-section.tsx @@ -0,0 +1,129 @@ +'use client'; + +import { useEffect, useState, useRef } from 'react'; +import { InsightCard } from '@/components/ui/insight-card'; +import { Button } from '@/components/ui/button'; +import { ArrowRight } from 'lucide-react'; + +interface Insight { + id: string; + title: string; + excerpt: string; + category: string; + readTime: string; + publishedAt: string; + imageUrl?: string; + href: string; + featured?: boolean; +} + +const MOCK_INSIGHTS: Insight[] = [ + { + id: '1', + title: '2025年技术趋势:AI驱动的数字化转型', + excerpt: '深入探讨人工智能如何重塑企业技术架构,以及如何把握AI时代的机遇', + category: '技术趋势', + readTime: '8 分钟', + publishedAt: '2026-02-10', + imageUrl: '/insights/ai-trend.jpg', + href: '/insights/ai-trend-2025', + featured: true, + }, + { + id: '2', + title: '微服务架构最佳实践指南', + excerpt: '从单体应用到微服务的演进之路,包含实战案例和避坑指南', + category: '架构设计', + readTime: '12 分钟', + publishedAt: '2026-02-08', + imageUrl: '/insights/microservices.jpg', + href: '/insights/microservices-best-practices', + }, + { + id: '3', + title: '云原生技术栈选型指南', + excerpt: 'Kubernetes、Docker、Service Mesh等技术栈的深度对比与选型建议', + category: '云原生', + readTime: '10 分钟', + publishedAt: '2026-02-05', + imageUrl: '/insights/cloud-native.jpg', + href: '/insights/cloud-native-stack-guide', + }, +]; + +export function InsightsSection() { + const [isVisible, setIsVisible] = useState(false); + const sectionRef = useRef(null); + + useEffect(() => { + const observer = new IntersectionObserver( + ([entry]) => { + if (entry.isIntersecting) { + setIsVisible(true); + } + }, + { threshold: 0.1 } + ); + + if (sectionRef.current) { + observer.observe(sectionRef.current); + } + + return () => observer.disconnect(); + }, []); + + return ( +
+
+
+

+ 技术洞察 +

+

+ 分享前沿技术趋势、最佳实践和深度思考,助力企业数字化转型 +

+
+ +
+ {MOCK_INSIGHTS.map((insight) => ( + + ))} +
+ +
+ +
+
+
+ ); +}