张翔
829d83522c
- 重构 About、Contact、Team 等静态营销页面 - 重构 News 新闻列表与详情页 - 重构 Products 产品目录、详情与独立产品页面 - 重构 Services 与 Solutions 服务/解决方案页面 - 重构 Detail 四层叙事组件 (Hero → Value → Trust → CTA) - 重构 Sections 页面区块组件 (Hero, CTA, SocialProof, WhyUs 等) - 新增 SectionHeader、ServiceCard、CaseCard 等可复用组件
58 lines
2.4 KiB
TypeScript
58 lines
2.4 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { ProductCard } from '@/components/ui/product-card';
|
|
import { GeometricDecoration } from '@/components/ui/brand-visuals';
|
|
import { PRODUCTS } from '@/lib/constants';
|
|
import { useReducedMotion } from '@/hooks/use-reduced-motion';
|
|
|
|
export function ProductMatrixSection() {
|
|
const shouldReduceMotion = useReducedMotion();
|
|
|
|
return (
|
|
<section id="products" className="relative py-16 md:py-20 bg-[var(--color-bg-primary)] bg-texture-grid">
|
|
<GeometricDecoration variant="lines" />
|
|
<div className="container-wide relative z-10">
|
|
<motion.div
|
|
initial={shouldReduceMotion ? {} : { opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-100px' }}
|
|
transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
|
|
className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-14"
|
|
>
|
|
<div>
|
|
<h2 className="text-3xl sm:text-4xl font-semibold text-[var(--color-text-primary)] mb-3">
|
|
产品矩阵
|
|
</h2>
|
|
<p className="text-base text-[var(--color-text-muted)] max-w-lg">
|
|
6 款自研产品覆盖企业数字化全场景，目前全部<span className="text-[var(--color-brand)] font-medium">研发中</span>，欢迎提前了解规划
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--color-brand-bg)] text-[var(--color-brand)] text-xs font-medium border border-[var(--color-brand)]/10">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-[var(--color-brand)] animate-pulse" />
|
|
研发中 · 即将上线
|
|
</span>
|
|
<span className="text-sm text-[var(--color-text-subtle)] font-mono tracking-wider hidden md:block">
|
|
{PRODUCTS.length} PRODUCTS
|
|
</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
|
|
{PRODUCTS.map((product, index) => (
|
|
<ProductCard
|
|
key={product.id}
|
|
title={product.title}
|
|
description={product.description}
|
|
href={`/products/${product.id}`}
|
|
index={index}
|
|
status={product.status}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|