+ const { ref, inView } = useInView();
+ const { url, setUrl, handleAnalyze } = useAnalyze();
- {/* 배경 글로우 원 */}
-
+ return (
+
+
+
- {/* 타이틀 */}
-
+ );
+}
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 (
-
-
+
- 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"
+ />
+
+
- )
-}
\ No newline at end of file
+ {CTA_FOOTNOTE}
-
+ const { url, setUrl, handleAnalyze } = useAnalyze();
- {/* 배지 */}
-
- {/* 타이틀 */}
-
+
+ Infinite
+ {" "}
+ Growth
+
+
+ {/* 설명 */}
+
+
+ {/* 블롭 데코레이션 */}
+
+
+
+
+
+ );
+}
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 (
-
- 
-
+ return (
+
- Infinite Marketing for Premium Medical Business & Marketing Agency
-
-
-
+ {/* 배경 그라디언트 */}
+
- {/* 설명 */}
-
- Marketing becomes a
-
-
- self-improving engine.
-
-
-
+ AI가 콘텐츠를 만들고 데이터가 마케팅을 개선합니다.
-콘텐츠 기획, 생성, 영상 제작, 채널 배포, 데이터 분석을 하나의 자동화 엔진으로.
-
- {/* 버튼 */}
-
+ {/* 배지 */}
+
-
-
-
-
-
- 네이버 블로그, 플레이스, 소셜미디어 등 Online Presence 종합 분석 리포트를 제공합니다.
-
-
+
+ {HERO_BADGE_TEXT}
- )
-}
\ No newline at end of file
+
+ {/* 제목 */}
+
+
+ Infinite
+ {" "}
+ Growth
+
+ Marketing Engine.
+
+
+ {/* 설명 */}
+
+ {HERO_LEAD_EN}
+
+ {HERO_LEAD_KO}
+
+
+
+
+ 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/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 (
-
- )
-}
+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
- Premium Medical Marketing is Hard
-
-
- 병원 마케팅이 직면한 3가지 핵심 과제
-
-
- {PROBLEMS.map(({ title, description, gradient }, index) => (
-
+ return (
+
-
- ))}
-
- {title}
-
-
- {description}
-
-
+
+
+
+
- )
-}
\ No newline at end of file
+
+ + Premium Medical Marketing is Hard +
++ 병원 마케팅이 직면한 3가지 핵심 과제 +
+ {PROBLEM_CARDS.map((problem, idx) => (
+
+
+
+
+ ))}
+ + {problem.title} +
+{problem.desc}
+
+ const { ref, inView } = useInView();
- {/* 배경 글로우 원 */}
-
+ return (
+
+
-
- )
-}
\ No newline at end of file
+
-
- {/* 배지 */}
-
-
- 
-
-
- {/* 타이틀 */}
- 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 Cycle 설명 */}
-
- AGDP
-
- Infinite
Marketing - -
-
- {/* 위성 원 */}
- {AGDP_ITEMS.map(({ letter, label, angle }) => (
- Marketing - -
-
- ))}
-
- {letter}
-
- {label}
-
- AGDP Cycle:
-
-
- 분석(Analysis) → 생성(Generation) → 배포(Distribution) → 성과(Performance)의 무한 루프를 통해 콘텐츠 품질(CTR)을
- 자율 최적화
- 합니다.
-
-
+
+
+ );
+}
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 (
-
-
+
+ );
+}
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 (
-
- ();
-
+ return (
+
-
+ const { ref, inView } = useInView
- Who is Infinite Marketing for
-
- 프리미엄 의료 서비스와 전문 마케팅 에이전시를 위한 최적의 솔루션
-
- {SOLUTION_CARDS.map(({ title, description, items, gradient }, index) => (
-
-
-
- ))}
-
- {title}
-
-
- {description}
-
-
- {items.map((item, i) => (
-
-
- {item}
-
- ))}
-
+
+
+
+
- )
-}
\ No newline at end of file
+
+ + Who is Infinite Marketing for +
++ 프리미엄 의료 서비스와 전문 마케팅 에이전시를 위한 최적의 솔루션 +
+ {SOLUTION_CARDS.map(({ title, description, items, cardClass, tagClass, animClass }) => (
+
+
+
+
+ ))}
+ {title}
+{description}
+
+ {items.map((item) => (
+
+ {item}
+
+ ))}
+
+
- ();
-
-
+ const { ref, inView } = useInView
- Core Modules
-
-
- 성능 개선 반영 자율 순환 마케팅 시스템
-
-
-
+
+
+
- {CORE_MODULES.map(({ index, title, description, footer, angle }) => (
-
+
- Self-Improving
Growth Engine -
+ return (
+ Growth Engine -
-
- ))}
-
-
-
-
- {index}
-
-
- {title}
-
-
- {description.map((desc) => (
-
-
-
- {desc}
- ))}
- {footer}
-
+
+
+ );
+}
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 (
-
+
- )
-}
\ No newline at end of file
+
+ Core Modules
++ 성능 개선 반영 자율 순환 마케팅 시스템 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {CORE_MODULES.map((mod, idx) => (
+
+
- ();
-
+
+ );
+}
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 (
+ (
+ options?: IntersectionObserverInit,
+) {
+ const ref = useRef(null);
+ const [inView, setInView] = useState(false);
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return;
+
+ const observer = new IntersectionObserver(
+ ([entry]) => {
+ if (entry.isIntersecting) {
+ setInView(true);
+ observer.disconnect(); // once: true
+ }
+ },
+ { threshold: 0.15, ...options },
+ );
+
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, []);
+
+ return { ref, inView };
+}
diff --git a/src/hooks/useScrollToTop.ts b/src/hooks/useScrollToTop.ts
new file mode 100644
index 0000000..d795ed6
--- /dev/null
+++ b/src/hooks/useScrollToTop.ts
@@ -0,0 +1,15 @@
+import { useNavigate } from "react-router-dom";
+
+/**
+ * 지정한 경로로 이동하면서 페이지 상단으로 smooth 스크롤합니다.
+ * 로고 클릭 등 "홈으로 돌아가기 + 스크롤 초기화" 패턴에 사용합니다.
+ */
+export function useScrollToTop(path = "/") {
+ const navigate = useNavigate();
+
+ return (e: React.MouseEvent) => {
+ e.preventDefault();
+ navigate(path);
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ };
+}
diff --git a/src/layouts/Footer.tsx b/src/layouts/Footer.tsx
index 73fe3ee..09eb9ed 100644
--- a/src/layouts/Footer.tsx
+++ b/src/layouts/Footer.tsx
@@ -1,22 +1,48 @@
+import { Link } from "react-router-dom";
+import { useScrollToTop } from "@/hooks/useScrollToTop";
+
+const LINKS = [
+ { label: "Privacy Policy", href: "/privacy" },
+ { label: "Terms of Service", href: "/terms" },
+];
+
export function Footer() {
- return (
-
-
+ const { ref, inView } = useInView
- Use Cases
-
-
- Infinite Marketing이 만드는 실질적인 변화를 확인해보세요!
-
-
- {USE_CASES.map(({ title, descriptions, color, gradient }, index) => (
-
+ return (
+
-
- ))}
-
- {title}
-
-
- {descriptions.map((desc, i) => (
-
-
-
- ))}
-
+
+
+
- )
-}
\ No newline at end of file
+
+ Use Cases
++ Infinite Marketing이 만드는 실질적인 변화를 확인해보세요! +
+ {USE_CASE_CARDS.map((c) => (
+
+
+
+ ))}
+ {c.title}
+-
+ {c.items.map((item) => (
+
- + + + {item} + + + ))} +
+
+ );
+}
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 Cycle:{" "} + + 분석(Analysis) → 생성(Generation) → 배포(Distribution) → 성과(Performance)의 무한 루프를 통해 콘텐츠 품질(CTR)을{" "} + + 자율 최적화 + 합니다. +
+
+
+
+
+
+
+ );
+}
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 (
+
+
+
+ {AGDP_NODES.map((node) => (
+
+
+ AGDP
+
+
+ Infinite
+
+
+
+ Infinite
+
+ Marketing
+
+
+
+ );
+}
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 (
+ <>
+
+ {node.letter}
+
+
+
+ {node.label}
+
+
+
+ 
+ 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/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 (
+
+
+
+
+ {mod.step}
+
+ {mod.title}
+-
+ {mod.items.map((item) => (
+
- + {item} + + ))} +
+ {mod.highlight}
+
+
+
+ );
+}
diff --git a/src/hooks/useInView.ts b/src/hooks/useInView.ts
new file mode 100644
index 0000000..cf6a0a2
--- /dev/null
+++ b/src/hooks/useInView.ts
@@ -0,0 +1,32 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * 요소가 뷰포트에 진입하면 inView = true 로 바뀌는 훅.
+ * framer-motion의 whileInView({ once: true }) 와 동일한 동작.
+ */
+export function useInView
+
+ Self-Improving
+
+
+