fix(ui): about hero 下划线不再遮挡副标题 + home hero 移除重复 Logo
- about-content-v4: hero 标题强调下划线 absolute -bottom-2 → bottom-0, 不再向下溢出侵入下一行文字(浏览器几何验证:下划线 642-645px 位于 '专业核心团队'(521-629) 与 '的转型伙伴'(656-764) 间隙,零遮挡) - home-content-v15: hero 删除品牌 Logo(与导航栏重复),slogan badge 成为首元素;移除 Image import - 测试:hero logo 断言改为 'hero 内不重复渲染 img(与 header 去重)' - 视觉基线更新 4 张:home-fullpage / about-fullpage / theme-light-main / theme-dark-main
|
Before Width: | Height: | Size: 540 KiB After Width: | Height: | Size: 540 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
@@ -73,7 +73,7 @@ function HeroSection({ data }: { data: AboutData }) {
|
|||||||
<span className="relative text-brand font-black">
|
<span className="relative text-brand font-black">
|
||||||
{line}
|
{line}
|
||||||
<motion.span
|
<motion.span
|
||||||
className="absolute -bottom-2 left-0 w-full h-[3px] bg-brand"
|
className="absolute bottom-0 left-0 w-full h-[3px] bg-brand"
|
||||||
style={{ transformOrigin: 'left' }}
|
style={{ transformOrigin: 'left' }}
|
||||||
initial={{ scaleX: 0 }}
|
initial={{ scaleX: 0 }}
|
||||||
animate={{ scaleX: 1 }}
|
animate={{ scaleX: 1 }}
|
||||||
|
|||||||
@@ -89,12 +89,13 @@ jest.mock('lucide-react', () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
describe('HomeContentV15 - 浅色 Hero(暗黑模式 token 友好)', () => {
|
describe('HomeContentV15 - 浅色 Hero(暗黑模式 token 友好)', () => {
|
||||||
it('renders the light canvas hero with a brand logo variant', () => {
|
it('does not repeat the brand logo inside the hero (dedup with header)', () => {
|
||||||
render(<HomeContentV15 />);
|
render(<HomeContentV15 />);
|
||||||
|
|
||||||
expect(screen.getByTestId('hero-section')).toBeInTheDocument();
|
const hero = screen.getByTestId('hero-section');
|
||||||
const heroLogo = screen.getByTestId('mock-next-image');
|
expect(hero).toBeInTheDocument();
|
||||||
expect(heroLogo).toHaveAttribute('src', '/logo.svg');
|
// hero 内不应再有 Logo(导航栏已展示,避免重复);slogan badge 保留
|
||||||
|
expect(hero.querySelector('img')).toBeNull();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('keeps a single primary CTA and demotes the secondary action to a text link', () => {
|
it('keeps a single primary CTA and demotes the secondary action to a text link', () => {
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { useRef } from 'react';
|
import { useRef } from 'react';
|
||||||
import Image from 'next/image';
|
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
import { ScrollReveal, StaggerReveal } from '@/components/ui/scroll-reveal';
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from '@/components/ui/badge';
|
||||||
@@ -172,24 +171,7 @@ function HeroSection({ heroData, stats }: {
|
|||||||
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-16 sm:py-20 md:py-24 lg:py-24">
|
<div className="max-w-container mx-auto px-4 sm:px-6 lg:px-10 relative z-10 w-full py-16 sm:py-20 md:py-24 lg:py-24">
|
||||||
<div className="grid items-center gap-16 lg:grid-cols-[1.05fr_0.95fr]">
|
<div className="grid items-center gap-16 lg:grid-cols-[1.05fr_0.95fr]">
|
||||||
<div className="max-w-4xl">
|
<div className="max-w-4xl">
|
||||||
{/* 品牌标识:浅色画布使用深色版 Logo(深色版见 footer 深色区块) */}
|
{/* 品牌口号 Badge:浅色画布上的品牌红信号(hero 不重复渲染 Logo,避免与导航栏重复) */}
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
animate={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.35, delay: 0, ease: EASE_OUT }}
|
|
||||||
className="mb-6"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
src="/logo.svg"
|
|
||||||
alt={`${COMPANY_INFO.name} Logo`}
|
|
||||||
width={224}
|
|
||||||
height={56}
|
|
||||||
className="h-12 w-auto sm:h-14"
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* 品牌口号 Badge:浅色画布上的品牌红信号 */}
|
|
||||||
{slogan && (
|
{slogan && (
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
|||||||