18740ca800
- 신규 라우트 /discovery → DiscoveryLandingPage, 기존 /discovery/:id 리포트와 공존 - 섹션 9종: Hero(ABMR 루프 + AI 답변 목업) / Why Now / How It Works / Sample Report / 8주 로드맵 / 정직성 스트립 / 최종 CTA - ABMR 루프는 Solution.tsx 다이어그램 구조 복제, AGDP → ABMR 워딩 교체 - 점수·등급·카테고리 %·항목 수 전부 scoreDiscovery 계산값 파생, JSX 수치 하드코딩 없음 (nextGradeTarget·scorePctColor 헬퍼를 discoveryScore에 추가) - ScoreRing에 valueClassName·subLabel 옵션 prop 추가 (하위 호환) - AI 답변 목업 "AEO / GEO 구축 후 목표 상태 예시" 라벨 유지, 연락처 o2oteam@o2o.kr 단일 - 시안 HTML·핸드오버 문서·POC 덱 산출물 포함 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WgWoJZAvvzMxTpWeenZSia
71 lines
2.8 KiB
TypeScript
71 lines
2.8 KiB
TypeScript
/**
|
|
* Why Now 다크 밴드.
|
|
* ⚠️ 3개 수치(12종 크롤러 / 네이버 기여 0건 / Direct 유실 35~70%)는 근거 있는 실측·문헌 값.
|
|
* 새 시장 통계를 임의로 추가하지 않는다 (근거 확인 후에만).
|
|
*/
|
|
import { motion } from 'motion/react';
|
|
|
|
const STATS = [
|
|
{
|
|
figure: '12종',
|
|
title: 'AI 크롤러가 이미 읽는 중',
|
|
detail:
|
|
'GPTBot·OAI-SearchBot·PerplexityBot 등이 오늘도 병원 사이트를 수집합니다. 문제는 접근이 아니라 인용할 내용입니다.',
|
|
},
|
|
{
|
|
figure: '0건',
|
|
title: '네이버 자산의 AI 기여',
|
|
detail:
|
|
'네이버 블로그·플레이스는 robots.txt로 AI 크롤러를 전면 차단합니다(2026-08 실측). 지금까지의 네이버 마케팅은 AI 답변에 닿지 않습니다.',
|
|
},
|
|
{
|
|
figure: '35~70%',
|
|
title: 'Direct로 숨는 AI 유입',
|
|
detail:
|
|
'AI가 보낸 방문의 상당수는 유입 경로 없이 도착합니다. 측정 인프라 없이는 이미 오는 환자도 세지 못합니다.',
|
|
},
|
|
];
|
|
|
|
export default function WhyNow() {
|
|
return (
|
|
<section id="why-now" className="bg-[#0A1128] px-6 py-22">
|
|
<div className="max-w-7xl mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<div className="text-sm font-bold tracking-[0.24em] text-[#AF90FF] mb-4">WHY NOW</div>
|
|
<h2 className="font-serif text-3xl md:text-[40px] font-bold leading-tight text-white mb-3 break-keep">
|
|
검색은 끝났고, 답변이 시작됐습니다.
|
|
</h2>
|
|
<p className="text-[17px] leading-[1.7] text-slate-400 mb-14 break-keep">
|
|
답변엔진은 광고 입찰이 아니라 크롤링 가능한 오픈웹 근거로 병원을 고릅니다. 인용되지
|
|
못하면 비교 대상에도 오르지 못합니다.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{STATS.map((stat, index) => (
|
|
<motion.div
|
|
key={stat.figure}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className="flex flex-col gap-2.5 p-7 bg-[#0F1B45] border border-[#2A3A6B] rounded-2xl"
|
|
>
|
|
<div className="font-serif text-[46px] font-bold text-[#AF90FF] leading-tight">
|
|
{stat.figure}
|
|
</div>
|
|
<div className="text-base font-semibold text-white break-keep">{stat.title}</div>
|
|
<p className="text-[14.5px] leading-[1.7] text-slate-400 break-keep">{stat.detail}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|