From bfa49410e432f23459a76b43cde1d88d336e912b Mon Sep 17 00:00:00 2001 From: zhangxiang Date: Tue, 1 Sep 2026 09:54:45 +0800 Subject: [PATCH] feat(hero): refine light hero tech-sense with engineering grid and tuned ink links MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 浅色 Hero 科技感变体（HERO_VARIANT='grid'）：墨色工程网格 + 品牌红节点 + 墨色细连线 连线 globalAlpha 上限 0.7→0.42，加边缘径向淡出（确定性，快照零漂移） 工程网格 CSS 加 radial mask 聚焦版心（呼应 McKinsey 穿透噪声） 清理死 CSS：移除 hero-dot-grid/hero-dot-spot 及 --hero-dot-* 变量 保留 --spot-x/--spot-y（spotlight 聚光复用） 门禁：type-check 0 / eslint 0 / 单测 17 passed --- src/app/(marketing)/home-content-v15.tsx | 61 ++++++--- src/app/globals.css | 41 +++--- .../sections/hero-particle-field.tsx | 126 ++++++++++++++++-- 3 files changed, 182 insertions(+), 46 deletions(-) diff --git a/src/app/(marketing)/home-content-v15.tsx b/src/app/(marketing)/home-content-v15.tsx index 92369d8..a4c06d8 100644 --- a/src/app/(marketing)/home-content-v15.tsx +++ b/src/app/(marketing)/home-content-v15.tsx @@ -5,7 +5,7 @@ import { motion } from 'framer-motion'; import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal'; import { Badge } from '@/components/ui/badge'; import { StaticLink } from '@/components/ui/static-link'; -import { HeroParticleField } from '@/components/sections/hero-particle-field'; +import { HeroParticleField, type HeroVariant } from '@/components/sections/hero-particle-field'; import { ArrowRight, Lightbulb, Database, Layers, Code, Puzzle, Server, Quote, Calendar } from 'lucide-react'; import { cn } from '@/lib/utils'; import { EASE_OUT } from '@/components/ui/page-decoration'; @@ -136,12 +136,23 @@ function StyledTitle({ lines }: { lines: (string | undefined)[] }) { // ===== 品牌 CTA 按钮已抽离为可复用 UI 组件：@/components/ui/cta-button ===== -// ===== Hero 区：浅色 editorial 画布 + 品牌红单电压 ===== -// 设计方向（2026-08-31 重设计，参考 Accenture Radical Relevance）： +// ===== Hero 区：浅色画布 + 精密工程网格科技感 + 品牌红单电压 ===== +// 设计方向（2026-08-31 重设计，参考 Accenture Radical Relevance；2026-09-01 科技感升级）： // - 声明先行：H1 → 主张 → CTA，一屏只负责「一句话说清你是谁 + 一个行动」 // - 数据指标下沉为独立成果带（HeroStatsBand），由滚动触发（Glance 层），不再挤在 hero 内 -// - 单一电压：hero 内只有品牌红一个彩色，其余全走中性 token +// - 单一电压：hero 内只有品牌红一个彩色；连线走墨色（浅底）/中性灰（深底），不抢品牌红 // - 字重收敛：大标题 700（原 900），对齐 Accenture「字重 9→3」的克制 +// - 科技感引擎：HeroParticleField 变体（固定种子、reduced-motion/自动化降级 → 快照零漂移） +// +// ===== HERO_VARIANT 观感开关（默认 'grid'：浅色底 + 工程网格科技感）===== +// 定调：Hero 保持浅色背景（与全站浅色咨询风一致），科技感由「精密工程网格 + 动态粒子 + 墨色细连线」承担， +// 不做深色 Hero。深色变体保留待选（改这一行即生效，无需改其它代码）： +// 'grid' 浅色工程网格 + 品牌红漂移节点 + 墨色细连线 ← 默认落地 +// 'network' 深色节点网络（品牌红节点 + 中性灰连线） +// 'constellation' 深色数据星图（品牌红脉冲节点 + 暗白次级点 + 竖向数据流） +// 'spotlight' 深色聚光 + 粒子 + 工程网格（纵深最强，复用 L2 光标聚光） +const HERO_VARIANT: HeroVariant = 'grid'; + function HeroSection({ heroData }: { heroData?: Record | null; }) { @@ -150,6 +161,12 @@ function HeroSection({ heroData }: { const siteConfig = useSiteConfig(); const reduceMotion = useReducedMotion(); + // 科技感变体开关（见文件顶部 HERO_VARIANT 注释）：深色变体统一走深色画布 + 主题感知文字 + const dark = HERO_VARIANT !== 'grid'; + const showGrid = HERO_VARIANT === 'constellation' || HERO_VARIANT === 'spotlight'; // 深色工程网格 + const showLightGrid = HERO_VARIANT === 'grid'; // 浅色工程网格（墨色 hairline，精密质感） + const showCursorGlow = HERO_VARIANT === 'spotlight'; + const heading = heroData?.heading || heroData?.headingBottom || '让每一家企业都拥有数据驱动的决策能力'; const subheading = heroData?.subheading || heroData?.description || ''; const ctaLabel = heroData?.ctaLabel || '预约咨询'; @@ -161,7 +178,7 @@ function HeroSection({ heroData }: { return (
{ if (!spotRef.current || !containerRef.current) return; @@ -170,21 +187,25 @@ function HeroSection({ heroData }: { spotRef.current.style.setProperty('--spot-y', `${e.clientY - rect.top}px`); }} > - {/* L1 静态点阵：token 化（颜色/alpha 随主题反色），深底自动切中性浅灰 */} -