From bac6b9f910b07c4a2288ff366d69e0ef423275bf Mon Sep 17 00:00:00 2001 From: minheon Date: Mon, 30 Mar 2026 16:40:16 +0900 Subject: [PATCH] =?UTF-8?q?[update]=20Home=20Page=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/home/arrow-right.svg | 3 + src/assets/home/check-circle.svg | 4 + src/assets/home/chevron-left.svg | 3 + src/assets/home/chevron-right.svg | 3 + src/assets/home/infinity-loop.svg | 16 +++ src/features/home/constants/cta_contents.ts | 8 ++ src/features/home/constants/hero_contents.ts | 13 ++ .../home/constants/modules_contents.ts | 79 +++++++++++ .../home/constants/problem_contents.ts | 25 ++++ .../home/constants/process_contents.ts | 23 +++ .../home/constants/solution_contents.ts | 31 ++++ .../home/constants/use_cases_contents.ts | 36 +++++ src/features/home/hooks/useAnalyze.ts | 15 ++ src/features/home/ui/CTASection.tsx | 89 ++++++++---- src/features/home/ui/HeroSection.tsx | 119 +++++++++------- src/features/home/ui/ProblemSection.tsx | 85 ++++++----- src/features/home/ui/ProcessSection.tsx | 133 +++--------------- src/features/home/ui/SolutionSection.tsx | 94 ++++++------- src/features/home/ui/SystemSection.tsx | 108 +++++++------- src/features/home/ui/UseCaseSection.tsx | 92 ++++++------ .../home/ui/process/AgdpCycleSummaryCard.tsx | 22 +++ .../home/ui/process/AgdpEngineDiagram.tsx | 55 ++++++++ .../home/ui/process/AgdpOrbitNode.tsx | 21 +++ .../home/ui/process/AgdpRewardPathLabel.tsx | 17 +++ .../home/ui/process/MarketingEngineIntro.tsx | 40 ++++++ .../home/ui/system/CoreModuleCard.tsx | 37 +++++ .../ui/system/CoreModulesCenterHeading.tsx | 20 +++ 27 files changed, 798 insertions(+), 393 deletions(-) create mode 100644 src/assets/home/arrow-right.svg create mode 100644 src/assets/home/check-circle.svg create mode 100644 src/assets/home/chevron-left.svg create mode 100644 src/assets/home/chevron-right.svg create mode 100644 src/assets/home/infinity-loop.svg create mode 100644 src/features/home/constants/cta_contents.ts create mode 100644 src/features/home/constants/hero_contents.ts create mode 100644 src/features/home/constants/modules_contents.ts create mode 100644 src/features/home/constants/problem_contents.ts create mode 100644 src/features/home/constants/process_contents.ts create mode 100644 src/features/home/constants/solution_contents.ts create mode 100644 src/features/home/constants/use_cases_contents.ts create mode 100644 src/features/home/hooks/useAnalyze.ts create mode 100644 src/features/home/ui/process/AgdpCycleSummaryCard.tsx create mode 100644 src/features/home/ui/process/AgdpEngineDiagram.tsx create mode 100644 src/features/home/ui/process/AgdpOrbitNode.tsx create mode 100644 src/features/home/ui/process/AgdpRewardPathLabel.tsx create mode 100644 src/features/home/ui/process/MarketingEngineIntro.tsx create mode 100644 src/features/home/ui/system/CoreModuleCard.tsx create mode 100644 src/features/home/ui/system/CoreModulesCenterHeading.tsx diff --git a/src/assets/home/arrow-right.svg b/src/assets/home/arrow-right.svg new file mode 100644 index 0000000..4b8981c --- /dev/null +++ b/src/assets/home/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/home/check-circle.svg b/src/assets/home/check-circle.svg new file mode 100644 index 0000000..3822028 --- /dev/null +++ b/src/assets/home/check-circle.svg @@ -0,0 +1,4 @@ + diff --git a/src/assets/home/chevron-left.svg b/src/assets/home/chevron-left.svg new file mode 100644 index 0000000..b6d06ff --- /dev/null +++ b/src/assets/home/chevron-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/home/chevron-right.svg b/src/assets/home/chevron-right.svg new file mode 100644 index 0000000..b4f8f20 --- /dev/null +++ b/src/assets/home/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/home/infinity-loop.svg b/src/assets/home/infinity-loop.svg new file mode 100644 index 0000000..c589390 --- /dev/null +++ b/src/assets/home/infinity-loop.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/src/features/home/constants/cta_contents.ts b/src/features/home/constants/cta_contents.ts new file mode 100644 index 0000000..c7b46d1 --- /dev/null +++ b/src/features/home/constants/cta_contents.ts @@ -0,0 +1,8 @@ +/** CTA 섹션 카피 */ + +export const CTA_HEADLINE = "Ready to Transform Your Marketing?"; +export const CTA_DESCRIPTION = + "URL 하나로 시작하는 완벽한 마케팅 자동화. 지금 바로 무료 진단을 받아보세요."; +export const CTA_URL_PLACEHOLDER = "Enter Your URL"; +export const CTA_BUTTON_LABEL = "Analyze"; +export const CTA_FOOTNOTE = "네이버 블로그, 플레이스, 소셜미디어 종합 분석 리포트 받아보기"; diff --git a/src/features/home/constants/hero_contents.ts b/src/features/home/constants/hero_contents.ts new file mode 100644 index 0000000..7c6c141 --- /dev/null +++ b/src/features/home/constants/hero_contents.ts @@ -0,0 +1,13 @@ +/** Hero 섹션 카피 */ + +export const HERO_BADGE_TEXT = + "Agentic AI Marketing Automation for Premium Medical Business & Marketing Agency"; + +export const HERO_URL_PLACEHOLDER = "Enter Your Website URL"; +export const HERO_CTA_BUTTON_LABEL = "Analyze Marketing Performance"; +export const HERO_FOOTNOTE = + "네이버 블로그, 플레이스, 소셜미디어 등 Online Presence 종합 분석 리포트를 제공합니다."; + +export const HERO_LEAD_EN = "Marketing that learns, improves, and accelerates — automatically."; +export const HERO_LEAD_KO = + "쓸수록 더 정교해지는 AI 마케팅 엔진. 콘텐츠 기획, 생성, 영상 제작, 채널 배포, 데이터 분석까지 하나로."; diff --git a/src/features/home/constants/modules_contents.ts b/src/features/home/constants/modules_contents.ts new file mode 100644 index 0000000..80e6117 --- /dev/null +++ b/src/features/home/constants/modules_contents.ts @@ -0,0 +1,79 @@ +/** Core Modules 섹션 — DEMO Modules */ + +export type CoreModule = { + step: string; + title: string; + items: string[]; + highlight: string; +}; + +export const CORE_MODULES: CoreModule[] = [ + { + step: "1", + title: "Marketing Intelligence", + items: [ + "브랜딩, 마케팅 현황 분석", + "타겟 고객 분석", + "키워드 분석", + "경쟁 및 포지셔닝 분석", + "SEO 전략 & 채널별 콘텐츠 기획", + ], + highlight: "AI 기반 시장 통찰력 도출", + }, + { + step: "2", + title: "Content Creation", + items: [ + "블로그 콘텐츠 생성", + "SEO 콘텐츠 생성", + "SNS 콘텐츠 생성", + "마케팅 카피 생성", + "Human-in-the loop 프로세스", + ], + highlight: "고품질 맞춤형 콘텐츠 자동화", + }, + { + step: "3", + title: "Video Automation", + items: [ + "블로그 → 영상 변환", + "숏폼 콘텐츠 생성", + "유튜브 콘텐츠 제작", + "SNS 영상 제작", + "멀티모달 AI 엔진: 영상 + 음악 + 카피", + ], + highlight: "원클릭 영상 제작 시스템", + }, + { + step: "4", + title: "Distribution Engine", + items: [ + "블로그 게시", + "SNS 자동 게시", + "유튜브 업로드", + "콘텐츠 일정 관리", + "SEO, AEO 자동 최적화", + ], + highlight: "전 채널 통합 배포 및 최적화", + }, + { + step: "5", + title: "Performance Intelligence", + items: [ + "SEO 성과 분석", + "콘텐츠 성과 분석", + "채널 성과 분석", + "AI 콘텐츠 개선 전략 추천", + "데이터 기반 효과 검증", + ], + highlight: "실시간 성과 추적 및 개선", + }, +]; + +export const MODULE_CARD_STAGGER = [ + "", + "animation-delay-100", + "animation-delay-200", + "animation-delay-300", + "animation-delay-400", +] as const; diff --git a/src/features/home/constants/problem_contents.ts b/src/features/home/constants/problem_contents.ts new file mode 100644 index 0000000..4cdbce5 --- /dev/null +++ b/src/features/home/constants/problem_contents.ts @@ -0,0 +1,25 @@ +/** Problem 섹션 — DEMO Problems */ + +export type ProblemCard = { + title: string; + desc: string; + highlight?: boolean; +}; + +export const PROBLEM_CARDS: ProblemCard[] = [ + { + title: "콘텐츠 생산의 한계", + desc: "블로그, SEO, 유튜브, 숏폼 등 지속적 생산이 필요하지만 인력과 비용, 시간 부족으로 제한됩니다.", + }, + { + title: "영상 콘텐츠 제작 비용", + desc: "영상은 중요하지만 촬영, 편집, 기획 비용이 높습니다. 특히 숏폼 콘텐츠는 지속적인 제작이 어렵습니다.", + highlight: true, + }, + { + title: "데이터 기반의 마케팅 부족", + desc: "어떤 콘텐츠가 효과적인지, 어떤 키워드가 유입을 만드는지, 어떤 채널이 성과가 좋은지 알기 어렵고, 각 플랫폼들의 데이터들을 한눈에 파악할 수 없습니다.", + }, +]; + +export const PROBLEM_CARD_STAGGER = ["", "animation-delay-100", "animation-delay-200"] as const; diff --git a/src/features/home/constants/process_contents.ts b/src/features/home/constants/process_contents.ts new file mode 100644 index 0000000..ee1a1e5 --- /dev/null +++ b/src/features/home/constants/process_contents.ts @@ -0,0 +1,23 @@ +/** Process(다크) 섹션 — AGDP 순환 다이어그램 레이아웃 */ + +export type AgdpSlot = "left" | "top" | "right" | "bottom"; + +export type AgdpNodeDef = { + letter: string; + label: string; + slot: AgdpSlot; +}; + +export const AGDP_NODES: readonly AgdpNodeDef[] = [ + { letter: "A", label: "Analysis", slot: "left" }, + { letter: "G", label: "Generation", slot: "top" }, + { letter: "D", label: "Distribution", slot: "right" }, + { letter: "P", label: "Performance", slot: "bottom" }, +]; + +export const AGDP_SLOT_WRAPPER_CLASS: Record = { + left: "absolute top-1/2 left-0 -translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4", + top: "absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4", + right: "absolute top-1/2 right-0 translate-x-1/2 -translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4", + bottom: "absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 z-30 flex flex-col items-center gap-3 md:gap-4", +}; diff --git a/src/features/home/constants/solution_contents.ts b/src/features/home/constants/solution_contents.ts new file mode 100644 index 0000000..77b1ebc --- /dev/null +++ b/src/features/home/constants/solution_contents.ts @@ -0,0 +1,31 @@ +/** Solution(Target Audience) 섹션 — DEMO TargetAudience */ + +export type SolutionCard = { + title: string; + description: string; + items: string[]; + cardClass: string; + tagClass: string; + animClass: string; +}; + +export const SOLUTION_CARDS: SolutionCard[] = [ + { + title: "Premium Medical Business", + description: + "고객 LTV가 높고 브랜드 경쟁이 심해 콘텐츠 마케팅이 필수적인 프리미엄 의료 서비스 제공 병원", + items: ["피부과", "성형외과", "치과", "안과", "헬스케어 클리닉", "피트니스"], + cardClass: "bg-gradient-to-br from-navy-50 to-white border border-neutral-20", + tagClass: "border border-neutral-20", + animClass: "animate-fade-in-left animation-delay-100", + }, + { + title: "Medical Marketing Agency", + description: + "콘텐츠 제작 비용 부담과 인력 의존도가 높고 영상 제작 생산성 개선이 필요한 병원 마케팅 대행사", + items: ["병원 마케팅 대행사", "콘텐츠 마케팅 Agency", "영상 마케팅 Agency", "광고 운영 대행사"], + cardClass: "bg-gradient-to-br from-status-good-bg to-white border border-status-good-border/50", + tagClass: "border border-status-good-border/50", + animClass: "animate-fade-in-right animation-delay-200", + }, +]; diff --git a/src/features/home/constants/use_cases_contents.ts b/src/features/home/constants/use_cases_contents.ts new file mode 100644 index 0000000..de7e5b4 --- /dev/null +++ b/src/features/home/constants/use_cases_contents.ts @@ -0,0 +1,36 @@ +/** Use Cases 섹션 — DEMO UseCases */ + +export type UseCaseCard = { + title: string; + items: string[]; + cardClass: string; + iconClass: string; + animClass: string; +}; + +export const USE_CASE_CARDS: UseCaseCard[] = [ + { + title: "Premium Medical Business", + items: [ + "SEO 콘텐츠 자동 생산으로 검색 상위 노출 달성", + "비용 부담 없이 고품질 영상 콘텐츠 대량 확대", + "자연 검색 유입 증가로 인한 환자 전환율 상승", + ], + cardClass: + "glass-card p-10 md:p-12 bg-gradient-to-br from-status-info-bg/50 to-white border border-status-info-border/30", + iconClass: "text-status-info-dot", + animClass: "animate-fade-in-left animation-delay-100", + }, + { + title: "Marketing Agency", + items: [ + "AI 기반 콘텐츠 제작 자동화로 생산성 극대화", + "블로그 텍스트 기반 영상 제작 자동화로 리소스 절감", + "다수 클라이언트 계정의 통합 운영 및 효율화", + ], + cardClass: + "glass-card p-10 md:p-12 bg-gradient-to-br from-status-good-bg/50 to-white border border-status-good-border/30", + iconClass: "text-violet-500", + animClass: "animate-fade-in-right animation-delay-200", + }, +]; diff --git a/src/features/home/hooks/useAnalyze.ts b/src/features/home/hooks/useAnalyze.ts new file mode 100644 index 0000000..30476d9 --- /dev/null +++ b/src/features/home/hooks/useAnalyze.ts @@ -0,0 +1,15 @@ +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; + +export function useAnalyze() { + const [url, setUrl] = useState(""); + const navigate = useNavigate(); + + const handleAnalyze = () => { + if (url.trim()) { + navigate("/report/loading", { state: { url } }); + } + }; + + return { url, setUrl, handleAnalyze }; +} diff --git a/src/features/home/ui/CTASection.tsx b/src/features/home/ui/CTASection.tsx index 2dda8b6..1f125ff 100644 --- a/src/features/home/ui/CTASection.tsx +++ b/src/features/home/ui/CTASection.tsx @@ -1,35 +1,64 @@ +import ArrowRightIcon from "@/assets/home/arrow-right.svg?react"; +import { + CTA_BUTTON_LABEL, + CTA_DESCRIPTION, + CTA_FOOTNOTE, + CTA_HEADLINE, + CTA_URL_PLACEHOLDER, +} from "@/features/home/constants/cta_contents"; +import { useAnalyze } from "@/features/home/hooks/useAnalyze"; +import { useInView } from "@/hooks/useInView"; + export function CTASection() { - return ( -
+ const { ref, inView } = useInView(); + const { url, setUrl, handleAnalyze } = useAnalyze(); - {/* 배경 글로우 원 */} -
+ return ( +
+
+
- {/* 타이틀 */} -
-
- Ready to Transform Your Marketing? -
-
- URL 하나로 시작하는 완벽한 마케팅 자동화. 지금 바로 무료 진단을 받아보세요. -
-
+
+

+ {CTA_HEADLINE} +

- {/* 버튼 */} -
- - -
- 네이버 블로그, 플레이스, 소셜미디어 종합 분석 리포트 받아보기 -
-
+

+ {CTA_DESCRIPTION} +

+ +
+ setUrl(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && handleAnalyze()} + className="w-full px-8 py-4 body-16-medium bg-gradient-to-r from-marketing-cream via-marketing-lilac to-marketing-ice border border-white/20 rounded-full focus:outline-none focus:ring-2 focus:ring-white/50 shadow-sm text-center text-navy-900 placeholder:text-navy-900/60 break-keep" + /> + +

{CTA_FOOTNOTE}

- ) -} \ No newline at end of file +
+
+ ); +} diff --git a/src/features/home/ui/HeroSection.tsx b/src/features/home/ui/HeroSection.tsx index e50be24..752acef 100644 --- a/src/features/home/ui/HeroSection.tsx +++ b/src/features/home/ui/HeroSection.tsx @@ -1,55 +1,78 @@ -import bg from "@/assets/home/bg_hero.png"; -import twinkle from "@/assets/home/twinkle.svg"; +import InfinityLoopIcon from "@/assets/home/infinity-loop.svg?react"; +import ArrowRightIcon from "@/assets/home/arrow-right.svg?react"; +import { + HERO_BADGE_TEXT, + HERO_CTA_BUTTON_LABEL, + HERO_FOOTNOTE, + HERO_LEAD_EN, + HERO_LEAD_KO, + HERO_URL_PLACEHOLDER, +} from "@/features/home/constants/hero_contents"; +import { useAnalyze } from "@/features/home/hooks/useAnalyze"; export function HeroSection() { - return ( -
-
+ const { url, setUrl, handleAnalyze } = useAnalyze(); - {/* 배지 */} -
- twinkle -
- Infinite Marketing for Premium Medical Business & Marketing Agency -
-
+ return ( +
- {/* 타이틀 */} -
-
- Marketing becomes a -
-
- self-improving engine. -
-
+ {/* 배경 그라디언트 */} +
- {/* 설명 */} -
-

AI가 콘텐츠를 만들고 데이터가 마케팅을 개선합니다.

-

콘텐츠 기획, 생성, 영상 제작, 채널 배포, 데이터 분석을 하나의 자동화 엔진으로.

-
+
- {/* 버튼 */} -
- - -
- 네이버 블로그, 플레이스, 소셜미디어 등 Online Presence 종합 분석 리포트를 제공합니다. -
-
- -
+ {/* 배지 */} +
+
- ) -} \ No newline at end of file + + {/* 제목 */} +

+ + Infinite + {" "} + Growth +
+ Marketing Engine. +

+ + {/* 설명 */} +

+ {HERO_LEAD_EN} +
+ {HERO_LEAD_KO} +

+ + {/* CTA */} +
+
+ setUrl(e.target.value)} + onKeyDown={(e) => e.key === "Enter" && handleAnalyze()} + className="w-full px-8 py-5 body-16-medium bg-white/80 backdrop-blur-sm border border-neutral-30 rounded-2xl focus:outline-none focus:ring-2 focus:ring-violet-500/20 focus:border-violet-500/40 shadow-sm text-center text-navy-900 placeholder:text-neutral-60 transition-all group-hover:border-neutral-40 break-keep" + /> +
+ +

{HERO_FOOTNOTE}

+
+ +
+ + {/* 블롭 데코레이션 */} +
+
+
+ +
+ ); +} diff --git a/src/features/home/ui/ProblemSection.tsx b/src/features/home/ui/ProblemSection.tsx index 906c09f..f8e86e0 100644 --- a/src/features/home/ui/ProblemSection.tsx +++ b/src/features/home/ui/ProblemSection.tsx @@ -1,48 +1,45 @@ -const PROBLEMS = [ - { - title: "콘텐츠 생산의 한계", - description: "블로그, SEO, 유튜브, 숏폼 등 지속적 생산이 필요하지만 인력과 비용, 시간 부족으로 제한됩니다.", - gradient: false, - }, - { - title: "영상 콘텐츠 제작 비용", - description: "영상은 중요하지만 촬영, 편집, 기획 비용이 높습니다. 특히 숏폼 콘텐츠는 지속적인 제작이 어렵습니다.", - gradient: true, - }, - { - title: "데이터 기반의 마케팅 부족", - description: "어떤 콘텐츠가 효과적인지, 어떤 키워드가 유입을 만드는지, 어떤 채널이 성과가 좋은지 알기 어렵고, 각 플랫폼들의 데이터들을 한눈에 파악할 수 없습니다.", - gradient: false, - }, -] +import { PROBLEM_CARDS, PROBLEM_CARD_STAGGER } from "@/features/home/constants/problem_contents"; +import { useInView } from "@/hooks/useInView"; export function ProblemSection() { - return ( -
-
-
- Premium Medical Marketing is Hard -
-
- 병원 마케팅이 직면한 3가지 핵심 과제 -
-
+ const { ref, inView } = useInView(); -
- {PROBLEMS.map(({ title, description, gradient }, index) => ( -
-
- {title} -
-
- {description} -
-
- ))} -
+ return ( +
+
+ +
+

+ Premium Medical Marketing is Hard +

+

+ 병원 마케팅이 직면한 3가지 핵심 과제 +

- ) -} \ No newline at end of file + +
+ {PROBLEM_CARDS.map((problem, idx) => ( +
+

+ {problem.title} +

+

{problem.desc}

+
+ ))} +
+ +
+
+ ); +} diff --git a/src/features/home/ui/ProcessSection.tsx b/src/features/home/ui/ProcessSection.tsx index 5397b47..d57e079 100644 --- a/src/features/home/ui/ProcessSection.tsx +++ b/src/features/home/ui/ProcessSection.tsx @@ -1,121 +1,20 @@ -import twinkle_pink from "@/assets/home/twinkle_pink.svg"; - -const AGDP_ITEMS = [ - { letter: "G", label: "Generation", angle: 0 }, - { letter: "D", label: "Distribution", angle: 90 }, - { letter: "P", label: "Performance", angle: 180 }, - { letter: "A", label: "Analysis", angle: 270 }, -] - -const REWARD_SIGNAL_CONFIG = { - text: "← REWARD SIGNAL", - startAngle: 158, - endAngle: 110, - radius: 200, - cx: 300, - cy: 300, -} - -function RewardSignalText() { - const { text, startAngle, endAngle, radius, cx, cy } = REWARD_SIGNAL_CONFIG - const chars = text.split("") - const angleStep = (endAngle - startAngle) / (chars.length - 1) - - return ( - - {chars.map((char, i) => { - const angle = (startAngle + i * angleStep) * (Math.PI / 180) - return ( - - {char} - - ) - })} - - ) -} +import { AgdpCycleSummaryCard } from "@/features/home/ui/process/AgdpCycleSummaryCard"; +import { AgdpEngineDiagram } from "@/features/home/ui/process/AgdpEngineDiagram"; +import { MarketingEngineIntro } from "@/features/home/ui/process/MarketingEngineIntro"; +import { useInView } from "@/hooks/useInView"; export function ProcessSection() { - return ( -
+ const { ref, inView } = useInView(); - {/* 배경 글로우 원 */} -
+ return ( +
+
-
- - {/* 배지 */} -
- twinkle -
AI Marketing Engine
-
- - {/* 타이틀 */} -
- Infinite Marketing Engine -
- - {/* 설명 */} -
- - Infinite Marketing for Premium Medical Business & Marketing Agency - - - Infinite Marketing은 Premium Medical Business와 Marketing Agency를 위한 AI Marketing Automation Platform입니다. - CLINICAD는 마케팅 분석, 콘텐츠 생성, 영상 콘텐츠 제작, 채널 배포, 성과 분석과 피드백 적용을 하나의 Self-Improving Marketing Engine으로 제공합니다. - -
- - {/* 원 레이어 */} -
-
- - - - {/* 중앙 원 */} -
- AGDP - - Infinite
Marketing - -
- - {/* 위성 원 */} - {AGDP_ITEMS.map(({ letter, label, angle }) => ( -
-
- {letter} -
- {label} -
- ))} -
- - {/* AGDP Cycle 설명 */} -
- AGDP Cycle:   -
- 분석(Analysis) → 생성(Generation) → 배포(Distribution) → 성과(Performance)의 무한 루프를 통해 콘텐츠 품질(CTR)을 - 자율 최적화 - 합니다. -
-
-
-
- ) -} \ No newline at end of file +
+ + + +
+
+ ); +} diff --git a/src/features/home/ui/SolutionSection.tsx b/src/features/home/ui/SolutionSection.tsx index 9e35bed..476dbeb 100644 --- a/src/features/home/ui/SolutionSection.tsx +++ b/src/features/home/ui/SolutionSection.tsx @@ -1,55 +1,47 @@ -const SOLUTION_CARDS = [ - { - title: "Premium Medical Business", - description: "고객 LTV가 높고 브랜드 경쟁이 심해 콘텐츠 마케팅이 필수적인 프리미엄 의료 서비스 제공 병원", - items: ["피부과", "성형외과", "치과", "안과", "헬스케어 클리닉", "피트니스"], - gradient: "from-[#F8FAFC]", - }, - { - title: "Medical Marketing Agency", - description: "콘텐츠 제작 비용 부담과 인력 의존도가 높고 영상 제작 생산성 개선이 필요한 병원 마케팅 대행사", - items: ["병원 마케팅 대행사", "콘텐츠 마케팅 Agency", "영상 마케팅 Agency", "광고 운영 대행사"], - gradient: "from-[#FAF5FF]", - }, -] +import { SOLUTION_CARDS } from "@/features/home/constants/solution_contents"; +import { useInView } from "@/hooks/useInView"; export function SolutionSection() { - return ( -
-
-
-
- Who is Infinite Marketing for -
-
프리미엄 의료 서비스와 전문 마케팅 에이전시를 위한 최적의 솔루션
-
+ const { ref, inView } = useInView(); -
- {SOLUTION_CARDS.map(({ title, description, items, gradient }, index) => ( -
-
- {title} -
-
- {description} -
-
- {items.map((item, i) => ( -
- {item} -
- ))} -
-
- ))} -
-
+ return ( +
+
+ +
+

+ Who is Infinite Marketing for +

+

+ 프리미엄 의료 서비스와 전문 마케팅 에이전시를 위한 최적의 솔루션 +

- ) -} \ No newline at end of file + +
+ {SOLUTION_CARDS.map(({ title, description, items, cardClass, tagClass, animClass }) => ( +
+

{title}

+

{description}

+
+ {items.map((item) => ( + + {item} + + ))} +
+
+ ))} +
+ +
+
+ ); +} diff --git a/src/features/home/ui/SystemSection.tsx b/src/features/home/ui/SystemSection.tsx index babc9bb..2f027cb 100644 --- a/src/features/home/ui/SystemSection.tsx +++ b/src/features/home/ui/SystemSection.tsx @@ -1,56 +1,62 @@ -import bg from "@/assets/home/bg_system.png"; - -const CORE_MODULES = [ - { index: 1, title: "Marketing Intelligence", description: ["브랜딩, 마케팅 현황 분석", "타겟 고객 분석", "키워드 분석", "경쟁 및 포지셔닝 분석"], footer: "SEO 전략 & 채널별 콘텐츠 기획", angle: 0 }, - { index: 2, title: "Content Creation", description: ["블로그 콘텐츠 생성", "SEO 콘텐츠 생성", "SNS 콘텐츠 생성", "마케팅 카피 생성"], footer: "Human-in-the loop 프로세스", angle: 78 }, - { index: 3, title: "Video Automation", description: ["블로그 → 영상 변환", "숏폼 콘텐츠 생성", "유튜브 콘텐츠 제작", "SNS 영상 제작"], footer: "멀티모달 AI 엔진: 영상 + 음악 + 카피", angle: 144 }, - { index: 4, title: "Distribution Engine", description: ["블로그 게시", "SNS 자동 게시", "유튜브 업로드", "콘텐츠 일정 관리"], footer: "SEO, AEO 자동 최적화", angle: 216 }, - { index: 5, title: "Performance Intelligence", description: ["SEO 성과 분석", "콘텐츠 성과 분석", "채널 성과 분석", "AI 콘텐츠 개선 전략 추천"], footer: "데이터 기반 효과 검증", angle: 283 }, -] +import { CORE_MODULES, MODULE_CARD_STAGGER } from "@/features/home/constants/modules_contents"; +import { useInView } from "@/hooks/useInView"; +import { CoreModuleCard } from "./system/CoreModuleCard"; +import { CoreModulesCenterHeading } from "./system/CoreModulesCenterHeading"; export function SystemSection() { - return ( -
-
-
- Core Modules -
-
- 성능 개선 반영 자율 순환 마케팅 시스템 -
-
+ const { ref, inView } = useInView(); -
-
- Self-Improving
Growth Engine -
+ return ( +
+
+
+
- {CORE_MODULES.map(({ index, title, description, footer, angle }) => ( -
-
-
- {index} -
-
- {title} -
-
- -
- {description.map((desc) => ( -
{desc}
- ))} -
- -
-
{footer}
-
- ))} -
+
+
+

Core Modules

+

+ 성능 개선 반영 자율 순환 마케팅 시스템 +

- ) -} \ No newline at end of file + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+ {CORE_MODULES.map((mod, idx) => ( + + ))} +
+
+
+
+ ); +} diff --git a/src/features/home/ui/UseCaseSection.tsx b/src/features/home/ui/UseCaseSection.tsx index a3c7157..3dd69f6 100644 --- a/src/features/home/ui/UseCaseSection.tsx +++ b/src/features/home/ui/UseCaseSection.tsx @@ -1,56 +1,44 @@ -const CheckIcon = ({ fill }: { fill: string }) => ( - - - - -) - -const USE_CASES = [ - { - title: "Premium Medical Business", - descriptions: ["SEO 콘텐츠 자동 생산으로 검색 상위 노출 달성", "비용 부담 없이 고품질 영상 콘텐츠 대량 확대", "자연 검색 유입 증가로 인한 환자 전환율 상승"], - color: "#2B7FFF", - gradient: "from-[#EFF6FF]", - }, - { - title: "Marketing Agency", - descriptions: ["AI 기반 콘텐츠 제작 자동화로 생산성 극대화", "블로그 텍스트 기반 영상 제작 자동화로 리소스 절감", "다수 클라이언트 계정의 통합 운영 및 효율화"], - color: "#AD46FF", - gradient: "from-[#FAF5FF]", - }, -] +import CheckCircleIcon from "@/assets/home/check-circle.svg?react"; +import { USE_CASE_CARDS } from "@/features/home/constants/use_cases_contents"; +import { useInView } from "@/hooks/useInView"; export function UseCaseSection() { - return ( -
-
-
- Use Cases -
-
- Infinite Marketing이 만드는 실질적인 변화를 확인해보세요! -
-
+ const { ref, inView } = useInView(); -
- {USE_CASES.map(({ title, descriptions, color, gradient }, index) => ( -
-
- {title} -
-
- {descriptions.map((desc, i) => ( -
- {desc} -
- ))} -
-
- ))} -
+ return ( +
+
+
+

Use Cases

+

+ Infinite Marketing이 만드는 실질적인 변화를 확인해보세요! +

- ) -} \ No newline at end of file + +
+ {USE_CASE_CARDS.map((c) => ( +
+

{c.title}

+
    + {c.items.map((item) => ( +
  • +
    • + ))} +
+
+ ))} +
+
+
+ ); +} diff --git a/src/features/home/ui/process/AgdpCycleSummaryCard.tsx b/src/features/home/ui/process/AgdpCycleSummaryCard.tsx new file mode 100644 index 0000000..75f7171 --- /dev/null +++ b/src/features/home/ui/process/AgdpCycleSummaryCard.tsx @@ -0,0 +1,22 @@ +type Props = { visible: boolean }; + +export function AgdpCycleSummaryCard({ visible }: Props) { + return ( +
+
+

+ AGDP Cycle:{" "} + + 분석(Analysis) → 생성(Generation) → 배포(Distribution) → 성과(Performance)의 무한 루프를 통해 콘텐츠 품질(CTR)을{" "} + + 자율 최적화 + 합니다. +

+
+
+ ); +} diff --git a/src/features/home/ui/process/AgdpEngineDiagram.tsx b/src/features/home/ui/process/AgdpEngineDiagram.tsx new file mode 100644 index 0000000..01abb4d --- /dev/null +++ b/src/features/home/ui/process/AgdpEngineDiagram.tsx @@ -0,0 +1,55 @@ +import { AGDP_NODES } from "@/features/home/constants/process_contents"; +import { AgdpOrbitNode } from "./AgdpOrbitNode"; +import { AgdpRewardPathLabel } from "./AgdpRewardPathLabel"; + +type Props = { visible: boolean }; + +export function AgdpEngineDiagram({ visible }: Props) { + return ( +
+
+ + + +
+
+ + AGDP + +

+ Infinite +
+ Marketing +

+
+
+ + {AGDP_NODES.map((node) => ( + + ))} + + +
+ ); +} diff --git a/src/features/home/ui/process/AgdpOrbitNode.tsx b/src/features/home/ui/process/AgdpOrbitNode.tsx new file mode 100644 index 0000000..eb139d0 --- /dev/null +++ b/src/features/home/ui/process/AgdpOrbitNode.tsx @@ -0,0 +1,21 @@ +import type { AgdpNodeDef } from "@/features/home/constants/process_contents"; +import { AGDP_SLOT_WRAPPER_CLASS } from "@/features/home/constants/process_contents"; + +type Props = { node: AgdpNodeDef }; + +export function AgdpOrbitNode({ node }: Props) { + const wrapperClass = AGDP_SLOT_WRAPPER_CLASS[node.slot]; + + return ( +
+
+ {node.letter} +
+
+ + {node.label} + +
+
+ ); +} diff --git a/src/features/home/ui/process/AgdpRewardPathLabel.tsx b/src/features/home/ui/process/AgdpRewardPathLabel.tsx new file mode 100644 index 0000000..425d65d --- /dev/null +++ b/src/features/home/ui/process/AgdpRewardPathLabel.tsx @@ -0,0 +1,17 @@ +/** P→A 호 SVG 경로 위 "Reward" 라벨 (DEMO Solution.tsx) */ +export function AgdpRewardPathLabel() { + const pathId = "agdp-reward-path"; + + return ( + + ); +} diff --git a/src/features/home/ui/process/MarketingEngineIntro.tsx b/src/features/home/ui/process/MarketingEngineIntro.tsx new file mode 100644 index 0000000..71af2b6 --- /dev/null +++ b/src/features/home/ui/process/MarketingEngineIntro.tsx @@ -0,0 +1,40 @@ +import twinklePink from "@/assets/home/twinkle_pink.svg"; + +type Props = { visible: boolean }; + +export function MarketingEngineIntro({ visible }: Props) { + return ( + <> +
+ + AI Marketing Engine +
+ +

+ Infinite Marketing Engine +

+ +

+ + Infinite Marketing for Premium Medical Business & Marketing Agency + +
+ Infinite Marketing은 Premium Medical Business와 Marketing Agency를 위한 AI Marketing Automation Platform입니다. + INFINITH는 마케팅 분석, 콘텐츠 생성, 영상 콘텐츠 제작, 채널 배포, 성과 분석과 피드백 적용을 하나의 Self-Improving Marketing + Engine으로 제공합니다. +

+ + ); +} diff --git a/src/features/home/ui/system/CoreModuleCard.tsx b/src/features/home/ui/system/CoreModuleCard.tsx new file mode 100644 index 0000000..c0dc52a --- /dev/null +++ b/src/features/home/ui/system/CoreModuleCard.tsx @@ -0,0 +1,37 @@ +import type { CoreModule } from "@/features/home/constants/modules_contents"; + +type Props = { + mod: CoreModule; + className?: string; + visible: boolean; + delayClass?: string; +}; + +export function CoreModuleCard({ mod, className = "", visible, delayClass = "" }: Props) { + return ( +
+
+
+ {mod.step} +
+

{mod.title}

+
+ +
    + {mod.items.map((item) => ( +
  • + {item} +
    • + ))} +
+ +
+ {mod.highlight} +
+
+ ); +} diff --git a/src/features/home/ui/system/CoreModulesCenterHeading.tsx b/src/features/home/ui/system/CoreModulesCenterHeading.tsx new file mode 100644 index 0000000..ac3d088 --- /dev/null +++ b/src/features/home/ui/system/CoreModulesCenterHeading.tsx @@ -0,0 +1,20 @@ +type Props = { visible: boolean }; + +/** Core Modules 섹션 중앙 — Self-Improving Growth Engine 타이틀 */ +export function CoreModulesCenterHeading({ visible }: Props) { + return ( +
+
+

+ Self-Improving +
+ Growth Engine +

+
+
+ ); +}