/* global React, ReactDOM, MapMockup, DashboardMockup, PermissionMockup, PhoneMockup, PhoneActivityMockup, KakaoLoginMockup, ExcelMockup, CustomFieldMockup, TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakText */ const { useState, useEffect, useRef } = React; // ============================================================================= // Knockit landing — C v2 tone (map-as-hero, warm accent, light, beta-honest) // ============================================================================= // 링크 설정 — 신규는 셀프서브 가입(/signup), 도입 문의는 메일, 기존 고객은 앱 로그인 const APP_URL = "https://app.knockit.app"; const SIGNUP_URL = `${APP_URL}/signup`; const CONTACT_EMAIL = "nikkimj0625@gmail.com"; const MAILTO_CONTACT = `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent("[Knockit] 도입 문의")}`; // Reveal-on-scroll function useReveal() { useEffect(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add("in");io.unobserve(e.target);}}); }, { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "showStats": true, "showPricing": true, "accentWord": "가볍게", "accent": "warm" } /*EDITMODE-END*/; const ACCENT_OPTIONS = [ { value: "가볍게", label: "가볍게 (추천)" }, { value: "쉽게", label: "쉽게" }, { value: "함께", label: "함께" }, { value: "지금", label: "지금" }]; const COLOR_OPTIONS = [ { value: "warm", label: "키먹 (현재)" }, { value: "indigo", label: "인디고 블루" }, { value: "emerald", label: "에메랄드" }, { value: "slate", label: "슬레이트" }, { value: "coral", label: "코랄" }, { value: "plum", label: "플럼" }]; function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); useReveal(); // Apply accent palette to useEffect(() => { document.body.dataset.accent = tweaks.accent || "warm"; }, [tweaks.accent]); return ( <> {tweaks.showStats && } {tweaks.showPricing && } setTweak("accent", v)} options={COLOR_OPTIONS} /> setTweak("accentWord", v)} options={ACCENT_OPTIONS} /> setTweak("showStats", v)} /> setTweak("showPricing", v)} /> ); } // ============================================================================= // Brand // ============================================================================= function BriefMark({ size = 22, palette = "light" }) { const c = palette === "dark" ? { tile: "#1F2430", k: "#F7F1E8", dot: "#C96F4A" } : { tile: "#F7F1E8", k: "#1F2430", dot: "#C96F4A" }; return ( ); } function Wordmark({ size = 16, color }) { return ( knock i t ); } // ============================================================================= // Top nav // ============================================================================= function GlobalNav() { return ( ); } function SubNav() {return null;} // ============================================================================= // Hero — C v2 (map-as-hero, light, warm accent on "가볍게") // ============================================================================= function Hero({ accentWord }) { return (
{/* full-bleed map background */}
{/* copy overlay */}

현장에서 뛰는 영업팀의 고객·방문 관리, {accentWord} 시작하세요

엑셀, 카톡, 개인 메모에 흩어져 있던 고객 정보와 방문 기록을
팀이 함께 보는 한 화면으로 옮겨드립니다.

    {[ "카카오 로그인으로 1분 안에 시작", "초대 링크 한 번이면 팀원 합류", "모바일 웹에서도 그대로"]. map((b, i) =>
  • {b}
    • )}
{/* corner stat — bottom right */}
1분
카카오 로그인으로 시작
한 곳
고객·지도·활동을 한 화면
); } // ============================================================================= // Pain tile — directly reflects hero sub copy // ============================================================================= function PainTile() { const items = [ { tag: "거래처 정보", title: "거래처 정보가 여기저기 흩어져 있어요", detail: "엑셀, 카톡방, 개인 휴대폰에 나뉘어 있어 팀이 한 번에 확인하기 어렵습니다." }, { tag: "방문 기록", title: "누가 언제 방문했는지 남지 않아요", detail: "담당자가 직접 말해주지 않으면 최근 방문 이력과 상담 내용을 파악하기 어렵습니다." }, { tag: "A/S·정기점검", title: "A/S와 점검 이력이 개인 메모로 남아요", detail: "현장에서 처리한 내용이 회사의 기록으로 쌓이지 않습니다." }, { tag: "다음 액션", title: "다음에 할 일이 쉽게 잊힙니다", detail: "재방문, 확인 요청, 후속 연락이 담당자 기억에만 의존하게 됩니다." }, { tag: "인수인계", title: "담당자가 바뀌면 맥락도 끊깁니다", detail: "거래처별 히스토리가 남아 있지 않으면 새 담당자가 다시 처음부터 파악해야 합니다." }]; return (
THE BEFORE

거래처 정보, 지금
우리 팀은 어떻게 관리하고 있나요?

{items.map((it, i) =>
{it.tag}

{it.title}

{it.detail}

)}
Knockit이 한 화면에 모읍니다
); } // ============================================================================= // Fit tile — "이런 팀에 잘 맞아요" (타깃 고객 메시징) // ============================================================================= function FitTile() { const industries = [ { kr: "식자재 · 주류 영업", en: "Food & beverage distribution" }, { kr: "제조 · 설비 거래처 관리", en: "Manufacturing & equipment" }, { kr: "프랜차이즈 가맹·매장 관리", en: "Franchise store ops" }, { kr: "장비·설치·A/S 영업", en: "Equipment, installation & service" }, { kr: "지역 대리점 · 파트너 관리", en: "Regional dealers & partners" }, { kr: "도·소매 유통 영업", en: "Wholesale & retail sales" }]; const situations = [ "소규모 B2B 영업팀 (3~30명)", "지역 기반 방문 영업이 주력인 팀", "거래처를 정기적으로 관리해야 하는 팀", "엑셀·카톡·개인 메모로 고객 관리 중인 팀", "CRM은 부담스럽지만 기록 체계가 필요한 팀", "영업 인수인계가 자주 발생하는 조직"]; return (
A FIT FOR

이런 팀에 잘 맞아요

여러 지역의 거래처를 방문하고, 기록이 흩어지기 시작한 팀을 위해 만들었습니다.

업종 By industry
    {industries.map((it, i) =>
  • {it.kr} {it.en}
    • )}
상황 By situation
    {situations.map((s, i) =>
  • {s}
    • )}
); } // ============================================================================= // Feature grid (homepage 2-up tiles) // ============================================================================= function FeatureGrid() { return (
Knockit은 별도 앱 설치 없이 모바일 웹에서 바로 열리고,
카카오톡 로그인으로 복잡한 가입 절차를 없앴습니다.} ctaText={null}>
); } function FeatureCard({ variant, eyebrow, title, blurb, ctaText, children }) { return (
{eyebrow}

{title}

{blurb}

{ctaText && }
{children}
); } // ============================================================================= // Permissions tile // ============================================================================= function PermissionsTile() { return (
PERMISSIONS

관리자는 대시보드로, 담당자는 내 거래처로

관리자는 대시보드로 현황을 보고, 담당자는 내 거래처와 방문 기록에 집중합니다.

); } // ============================================================================= // Dashboard tile // ============================================================================= function DashboardTile() { return (
DASHBOARD

오늘 무엇을 할지 한눈에

영업담당자에겐 본인 담당 거래처와 활동만, 관리자에겐 전사 통계가 보입니다.

); } // ============================================================================= // Excel tile — dark, no CTA, sits above feature grid // ============================================================================= function ExcelTile() { return (
BULK IMPORT

엑셀 거래처 목록,
그대로 옮겨오세요

거래처명, 담당자, 연락처, 주소까지 한 번에 불러와 바로 관리할 수 있습니다.

); } // ============================================================================= // Utility features grid // ============================================================================= function UtilityFeatures() { const features = [ { title: "거래처별 활동 기록", desc: "방문, 상담, A/S, 정기점검 내용을 거래처별로 누적해 관리합니다.", icon: "M9 11l3 3 8-8 M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" }, { title: "팀이 함께 보는 거래처", desc: "담당자 개인에게만 있던 현장 정보를 팀이 같은 기준으로 확인합니다.", icon: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75" }, { title: "엑셀 일괄 등록", desc: "기존에 관리하던 거래처 데이터를 기반으로 가볍게 시작할 수 있습니다.", icon: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M16 13H8 M16 17H8 M10 9H8" }, { title: "모바일 웹 지원", desc: "앱 설치 없이 외근 중에도 모바일 웹에서 접속할 수 있습니다.", icon: "M5 2h14a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z M12 18h.01" }]; return (
CORE FEATURES

지금 바로 쓸 수 있는 거래처 관리 기능

{features.map((f, i) =>

{f.title}

{f.desc}

)}
); } // ============================================================================= // Mobile tile // ============================================================================= function MobileTile() { return (
FIELD READY

현장에서 바로
기록하는 팀

납품, A/S, 정기점검 현장에서 마주친 내용을 그 자리에서 남깁니다. 외근을 마치고 돌아와 다시 정리하지 않아도, 방문·상담·다음 액션이 거래처별로 남습니다.

현장에서 Knockit으로 거래처 정보를 확인하는 담당자 {e.target.style.display = 'none';e.target.nextElementSibling.style.display = 'flex';}} />
현장 사진 자리
uploads/field-photo.jpg 에 이미지를 넣으면 표시됩니다
거래처 앞에서 바로 기록
); } // ============================================================================= // Stats band — trust signals (beta-honest) // ============================================================================= function StatsTile() { const points = [ { step: "01", title: "엑셀 그대로 가져오기", desc: "쓰던 거래처 목록을 한 번에 등록할 수 있습니다." }, { step: "02", title: "지도에서 거래처 보기", desc: "지역별 거래처와 방문 대상을 한눈에 확인합니다." }, { step: "03", title: "방문 후 바로 기록하기", desc: "방문 내용과 다음 할 일을 남겨 팀과 공유합니다." }]; return (
WHY KNOCKIT

엑셀보다 쉽고, 시스템보다 가볍게

거래처를 지도에 올리고, 방문 기록과 다음 할 일을 팀이 함께 관리합니다.

{points.map((s, i) =>
{s.step}

{s.title}

{s.desc}

)}
); } // ============================================================================= // Pricing — beta-honest // ============================================================================= function PricingTile() { const plans = [ { name: "Team", ribbon: "14일 무료체험", price: "79,000", unit: "원 / 월", desc: "현장 영업팀에 필요한 기능을 모두 담은 기본 플랜입니다.", meta: "사용자 5명 · 거래처 500개 포함", cta: "14일 무료체험 시작", ctaClass: "btn btn-primary-warm", featured: true, badge: "가장 많이 선택", features: [ "지도 기반 거래처 관리", "방문 기록", "후속 활동 관리", "모바일 사용", "엑셀 일괄등록"] }, { name: "Business", price: "문의", unit: "", desc: "사용자 수가 많거나 거래처 데이터가 많은 팀을 위한 맞춤 플랜입니다.", meta: "사용자 10명 이상 또는 거래처 2,000개 이상 권장", cta: "도입 문의하기", ctaClass: "btn btn-secondary-pill on-warm", features: [ "대량 데이터 이전", "권한 관리", "다중 조직 운영", "우선 지원 / 전담 지원"] }]; return (
PRICING

현장 영업팀을 위한 단순한 요금제

작은 팀은 바로 시작하고, 더 큰 조직은 운영 방식에 맞춰 상담하세요. 모든 팀은 14일 무료체험으로 시작할 수 있습니다.

{plans.map((p, i) =>
{p.badge && {p.badge}} {p.ribbon && {p.ribbon}}
{p.name}
{p.price} {p.unit && {p.unit}}
{p.meta}
{p.desc}
    {p.features.map((f, j) =>
  • {f}
    • )}
)}

사용자 수와 거래처 수가 기본 제공 범위를 초과하는 경우 Business 플랜으로 상담해드립니다.

); } // ============================================================================= // FAQ // ============================================================================= function FaqTile() { const items = [ { q: "앱을 설치해야 하나요?", a: "아니요. Knockit은 모바일 웹에서 바로 사용할 수 있습니다. PC와 모바일에서 같은 거래처와 활동 기록을 확인할 수 있습니다." }, { q: "기존 엑셀 거래처 목록을 가져올 수 있나요?", a: "네. 엑셀 일괄등록으로 거래처명, 주소, 담당자, 연락처 등 기존 데이터를 가져와 시작할 수 있습니다." }, { q: "거래처 위치를 지도에서 볼 수 있나요?", a: "네. 등록한 거래처를 지도 위에서 확인하고, 지역별 방문 대상과 주변 거래처를 함께 볼 수 있습니다." }, { q: "방문 기록과 다음 할 일도 남길 수 있나요?", a: "네. 거래처별로 방문, 상담, A/S, 정기점검 같은 활동 기록을 남기고 후속 활동도 함께 관리할 수 있습니다." }, { q: "담당자별로 보이는 거래처를 나눌 수 있나요?", a: "네. 관리자는 전체 현황을 확인하고, 담당자는 본인에게 배정된 거래처와 방문 기록을 중심으로 관리할 수 있습니다." }, { q: "어떤 팀에 가장 잘 맞나요?", a: "여러 지역의 거래처를 방문하고, 엑셀이나 카톡에 방문 기록이 흩어지기 시작한 팀에 잘 맞습니다. 식자재·주류 영업, 장비·설비 영업, 프랜차이즈 매장 관리, 대리점 관리 같은 현장 중심 업무에 특히 적합합니다." }]; return (
QUESTIONS

자주 묻는 질문

{items.map((it, i) =>
{it.q}
{it.a}
)}
); } // ============================================================================= // CTA band — soft reprise of hero // ============================================================================= function CtaBand({ accentWord }) { return (
GET STARTED

흩어진 거래처, 오늘 바로 지도 위에 올려보세요.

엑셀로 관리하던 거래처를 불러오고, 방문 기록과 다음 할 일을 한곳에서 시작해보세요.

); } // ============================================================================= // Footer — slim // ============================================================================= function FooterSlim() { return ( ); } ReactDOM.createRoot(document.getElementById("root")).render();