diff --git a/src/app/(marketing)/home-content-v15.test.tsx b/src/app/(marketing)/home-content-v15.test.tsx
index 81b8062..bbd2285 100644
--- a/src/app/(marketing)/home-content-v15.test.tsx
+++ b/src/app/(marketing)/home-content-v15.test.tsx
@@ -126,11 +126,6 @@ describe('HomeContentV15 - 浅色 Hero(暗黑模式 token 友好)', () => {
expect(screen.getByTestId('hero-stats')).toBeInTheDocument();
});
- it('renders the abstract data-driven visual without product UI shell', () => {
- render();
-
- expect(screen.getByTestId('hero-product-visual')).toBeInTheDocument();
- });
});
describe('HomeContentV15 - 信任层与章节式叙事', () => {
diff --git a/src/app/(marketing)/home-content-v15.tsx b/src/app/(marketing)/home-content-v15.tsx
index 53faf21..92369d8 100644
--- a/src/app/(marketing)/home-content-v15.tsx
+++ b/src/app/(marketing)/home-content-v15.tsx
@@ -5,7 +5,6 @@ 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 { HeroProductVisual } from '@/components/sections/hero-product-visual';
import { HeroParticleField } from '@/components/sections/hero-particle-field';
import { ArrowRight, Lightbulb, Database, Layers, Code, Puzzle, Server, Quote, Calendar } from 'lucide-react';
import { cn } from '@/lib/utils';
@@ -178,12 +177,12 @@ function HeroSection({ heroData }: {
{!reduceMotion && (
-
+
{/* 品牌口号 Badge:浅色画布上的品牌红信号(hero 不重复渲染 Logo,避免与导航栏重复) */}
{slogan && (
@@ -241,16 +240,6 @@ function HeroSection({ heroData }: {
)}
-
- {/* 右侧:产品视觉(SVG 数据看板示意,浅色卡片浮于浅色画布) */}
-
-
-
diff --git a/src/components/sections/hero-product-visual.test.tsx b/src/components/sections/hero-product-visual.test.tsx
deleted file mode 100644
index 5453eb4..0000000
--- a/src/components/sections/hero-product-visual.test.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { describe, it, expect, jest } from '@jest/globals';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import HeroProductVisual from './hero-product-visual';
-
-jest.mock('@/hooks/use-reduced-motion', () => ({
- useReducedMotion: jest.fn(() => false),
-}));
-
-describe('HeroProductVisual - Absorb 层(渐进描边)', () => {
- it('renders the brand-red trend line path', () => {
- render(
);
- const path = document.querySelector('.hero-trend-line');
- expect(path).toBeInTheDocument();
- expect(path).toHaveAttribute('stroke', 'var(--color-brand)');
- });
-
- it('renders the trend line statically (no draw animation) under reduced motion', () => {
- const { useReducedMotion } = require('@/hooks/use-reduced-motion');
- (useReducedMotion as jest.Mock).mockReturnValue(true);
- render(
);
- const path = document.querySelector('.hero-trend-line') as SVGPathElement;
- expect(path).toBeInTheDocument();
- // reduced-motion:入场即为完整描边(strokeDashoffset = 0),不播放描边动画
- expect(path.style.strokeDashoffset).toBe('0');
- });
-});
diff --git a/src/components/sections/hero-product-visual.tsx b/src/components/sections/hero-product-visual.tsx
deleted file mode 100644
index 37f5b34..0000000
--- a/src/components/sections/hero-product-visual.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import { TrendingUp, ArrowUpRight, ArrowDownRight } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import { useReducedMotion } from '@/hooks/use-reduced-motion';
-
-// 抽象数据可视化示意(示例数据)——作为品牌「数据驱动」能力的视觉表达,不含具体产品 UI 外壳
-const KPIS = [
- { label: '营收同比', value: '+32.6%', trend: 'up', note: '较上期' },
- { label: '订单履约率', value: '98.2%', trend: 'up', note: '目标 95%' },
- { label: '库存周转', value: '5.8 天', trend: 'down', note: '提速 1.2 天' },
- { label: '客户新增', value: '+18.4%', trend: 'up', note: '本月' },
-] as const;
-
-function TrendBadge({ trend, label }: { trend: 'up' | 'down'; label: string }) {
- const Icon = trend === 'up' ? ArrowUpRight : ArrowDownRight;
- return (
-
-
- {label}
-
- );
-}
-
-const EASE_INK = 'cubic-bezier(0.22, 1, 0.36, 1)';
-// 描边路径长度上限(宽松覆盖实际路径,确保 offset 动画完整绘制整条线)
-const TREND_PATH_LENGTH = 600;
-
-export function HeroProductVisual({ className }: { className?: string }) {
- const rootRef = useRef
(null);
- const reduceMotion = useReducedMotion();
- // reduced-motion:首帧即为静态完整线,杜绝任何一闪
- const [drawn, setDrawn] = useState(reduceMotion);
-
- useEffect(() => {
- if (reduceMotion) {
- setDrawn(true);
- return;
- }
- const el = rootRef.current;
- if (!el || typeof IntersectionObserver === 'undefined') {
- setDrawn(true); // 无 IO 支持的降级:直接静态呈现完整线
- return;
- }
- const io = new IntersectionObserver(
- (entries) => {
- if (entries.some((e) => e.isIntersecting)) {
- setDrawn(true);
- io.disconnect();
- }
- },
- { threshold: 0.25 },
- );
- io.observe(el);
- return () => io.disconnect();
- }, [reduceMotion]);
-
- return (
-
- {/* KPI 卡片:抽象数据可视化 */}
-
- {KPIS.map((kpi) => (
-
-
- {kpi.label}
-
-
-
- {kpi.value}
-
-
-
- ))}
-
-
- {/* 趋势图:品牌色曲线 + 渐变填充(Absorb 层:滚动入视时曲线渐进描边,数据「长出来」) */}
-
-
- 数据增长趋势
- 示例数据 · 近 12 个月
-
-
-
-
- );
-}
-
-export default HeroProductVisual;