hskwon
aca1767eb9
- URL 하드코딩 → .env APP_URL 기반 동적 URL로 변경 - DB 연결 하드코딩 → .env 기반으로 변경 - MySQL strict mode DATE 오류 수정
492 lines
33 KiB
PHP
492 lines
33 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CodeBridgeX SAM 영업전략 </title>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<!-- Lucide Icons -->
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap');
|
|
body { font-family: 'Noto Sans KR', sans-serif; }
|
|
|
|
.slide {
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
.slide.active {
|
|
display: flex;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
|
.animate-fadeIn { animation: fadeIn 0.8s forwards; }
|
|
|
|
@keyframes bounce { 0%, 100% { transform: translateY(-5%); } 50% { transform: translateY(0); } }
|
|
.animate-bounce-custom { animation: bounce 2s infinite; }
|
|
|
|
/* Custom Scrollbar */
|
|
::-webkit-scrollbar { width: 8px; }
|
|
::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-100 min-h-screen overflow-x-hidden">
|
|
<!-- Navigation / Header -->
|
|
<header class="bg-white border-b border-stone-200 sticky top-0 z-50 w-full">
|
|
<div class="container mx-auto">
|
|
<div class="py-4 flex items-center justify-start">
|
|
<a href="<?=$root_dir?>/index.php" class="inline-flex items-center px-3 py-2 rounded-lg hover:bg-amber-100 transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11.5L12 4l9 7.5M5 10v8a1 1 0 001 1h3.5a1 1 0 001-1v-3h2v3a1 1 0 001 1H18a1 1 0 001-1v-8"/>
|
|
</svg>
|
|
<span class="ml-2 text-base md:text-lg font-semibold text-amber-700 hidden md:inline">홈으로</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Presentation Container -->
|
|
<div class="flex items-center justify-center min-h-[calc(100vh-80px)] py-8">
|
|
<div id="deck-container" class="w-full max-w-6xl h-[700px] relative bg-slate-900 rounded-xl shadow-2xl overflow-hidden border border-slate-200/20 text-white transition-colors duration-700">
|
|
|
|
<!-- Watermark -->
|
|
<div class="absolute top-8 left-8 text-sm font-bold tracking-widest opacity-50 flex items-center gap-2 z-50">
|
|
CodeBridgeX : SAM <span id="industry-tag" class="hidden bg-blue-600 text-white text-[10px] px-2 py-0.5 rounded-full"></span>
|
|
</div>
|
|
|
|
<!-- Slides Wrapper -->
|
|
<div id="slides-wrapper" class="w-full h-full relative">
|
|
|
|
<!-- Slide 0: Cover -->
|
|
<div class="slide active w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-slate-900" data-text="text-white">
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight animate-fadeIn">
|
|
대표님, 어제는<br>편안히 주무셨습니까?
|
|
</h1>
|
|
<p class="text-xl md:text-2xl text-slate-300 font-light max-w-3xl mb-12 animate-fadeIn" style="animation-delay: 0.2s">
|
|
직원들은 절대 모르는, 오직 대표님만의 '20가지' 무거운 짐
|
|
</p>
|
|
<button onclick="nextSlide()" class="px-8 py-3 bg-red-600 hover:bg-red-700 text-white rounded-full font-bold flex items-center gap-2 transition-all transform hover:scale-105 animate-fadeIn" style="animation-delay: 0.4s">
|
|
시작하기 <i data-lucide="chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Slide 1: Pain Points -->
|
|
<div class="slide w-full h-full flex-col justify-center px-4 md:px-12" data-bg="bg-red-50" data-text="text-slate-900">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-3xl font-bold text-slate-800 mb-2">혹시 이런 상황, 겪어보지 않으셨나요?</h2>
|
|
<p class="text-slate-600">CEO를 괴롭히는 20가지 Pain Points</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 overflow-y-auto max-h-[400px] p-2" id="pain-grid">
|
|
<!-- Items will be injected by JS -->
|
|
</div>
|
|
<div class="mt-8 text-center">
|
|
<p class="text-red-600 font-bold animate-pulse">이 중 하나라도 해당된다면, 다음 장을 넘겨주세요.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 2: Solution Intro -->
|
|
<div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-blue-600" data-text="text-white">
|
|
<h2 class="text-2xl md:text-4xl font-light mb-4 animate-fadeIn">이 모든 골치 아픈 문제들...</h2>
|
|
<h3 class="text-3xl md:text-5xl font-bold mb-12 animate-fadeIn" style="animation-delay: 0.2s">이제 '사람' 말고 '시스템'에게 맡기십시오.</h3>
|
|
<div class="bg-white text-blue-600 px-12 py-8 rounded-2xl shadow-2xl transform hover:scale-105 transition-transform duration-500 animate-fadeIn" style="animation-delay: 0.4s">
|
|
<h1 class="text-6xl md:text-8xl font-black tracking-tighter mb-2">S.A.M</h1>
|
|
<p class="text-lg md:text-xl font-medium tracking-widest uppercase text-slate-500">Smart Automation Management</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 3: Strategy 1 (Money - Interactive) -->
|
|
<div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-white" data-text="text-slate-800">
|
|
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
|
|
<div class="mb-6 p-6 bg-slate-50 rounded-full shadow-lg"><i data-lucide="credit-card" class="w-16 h-16 text-blue-600"></i></div>
|
|
<span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 01 : MONEY</span>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">CEO 전용 시크릿 대시보드</h2>
|
|
<p class="text-slate-600 text-lg mb-6">직원들은 못 봅니다. 오직 대표님만 확인하십시오.</p>
|
|
|
|
<!-- Calculator Form -->
|
|
<div class="bg-blue-50 p-6 rounded-xl border border-blue-100 w-full animate-fadeIn text-left">
|
|
<h4 class="font-bold text-blue-800 mb-3 flex items-center gap-2"><i data-lucide="calculator" size="18"></i> '숨은 손실' 계산기</h4>
|
|
<div class="space-y-3">
|
|
<input type="number" id="calc-revenue" placeholder="연 매출 (억 원)" class="w-full p-2 rounded border focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<input type="number" id="calc-employee" placeholder="직원 수 (명)" class="w-full p-2 rounded border focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<button onclick="calculateLoss()" class="w-full bg-blue-600 text-white py-2 rounded font-bold hover:bg-blue-700 transition-colors">나의 손실액 확인하기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:w-2/3 w-full h-[500px] overflow-y-auto relative">
|
|
<!-- Default Content -->
|
|
<div id="money-default" class="grid gap-6">
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-blue-500"></i>오늘의 이슈 브리핑</h3>
|
|
<p class="text-slate-600 ml-7">지각, 재고미달, 사고 발생 전 알림</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-blue-500"></i>세무 리스크 실시간 감지</h3>
|
|
<p class="text-slate-600 ml-7">가지급금 이자 4.6% 자동 계산, 법인세 예측</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-blue-500"></i>자금 흐름의 투명화</h3>
|
|
<p class="text-slate-600 ml-7">예상 부가세, 접대비 한도, 카드 사용내역 통합</p>
|
|
</div>
|
|
</div>
|
|
<!-- Result Content (Hidden by default) -->
|
|
<div id="money-result" class="hidden bg-white p-6 rounded-xl shadow-xl border border-blue-200 h-full animate-fadeIn">
|
|
<div class="flex items-center gap-2 mb-4 text-blue-800 border-b pb-2">
|
|
<i data-lucide="sparkles" class="text-yellow-500"></i>
|
|
<h3 class="font-bold text-xl">재무 정밀 진단 리포트</h3>
|
|
</div>
|
|
<div id="money-result-text" class="prose prose-sm max-w-none text-slate-700 whitespace-pre-line leading-relaxed"></div>
|
|
<button onclick="resetMoney()" class="mt-6 text-sm text-slate-400 hover:text-slate-600 underline">기본 화면으로 돌아가기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 4: Strategy 2 (Law - Interactive) -->
|
|
<div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-slate-50" data-text="text-slate-800">
|
|
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
|
|
<div class="mb-6 p-6 bg-white rounded-full shadow-lg"><i data-lucide="gavel" class="w-16 h-16 text-red-600"></i></div>
|
|
<span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 02 : LAW</span>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">착수금 0원, 대표님의 '개인 로펌'</h2>
|
|
<p class="text-slate-600 text-lg mb-6">돈 떼일 걱정, 법적 분쟁의 공포에서 해방시켜 드립니다.</p>
|
|
|
|
<!-- Legal Form -->
|
|
<div class="bg-red-50 p-6 rounded-xl border border-red-100 w-full animate-fadeIn text-left">
|
|
<h4 class="font-bold text-red-800 mb-3 flex items-center gap-2"><i data-lucide="file-text" size="18"></i> 법률 해결 시뮬레이션</h4>
|
|
<div class="space-y-3">
|
|
<textarea id="legal-input" placeholder="현재 겪고 있는 법적 문제 (예: 거래처 미수금 5천만원)" class="w-full p-2 rounded border focus:ring-2 focus:ring-red-500 outline-none h-24 text-sm"></textarea>
|
|
<button onclick="solveLegal()" class="w-full bg-red-600 text-white py-2 rounded font-bold hover:bg-red-700 transition-colors">해결책 받아보기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:w-2/3 w-full h-[500px] overflow-y-auto">
|
|
<!-- Default Content -->
|
|
<div id="legal-default" class="grid gap-6">
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-red-500"></i>미수금/채권 추심 특화</h3>
|
|
<p class="text-slate-600 ml-7">변호사 직접 관리, 법원 출석 대행 (대표님 출석 X)</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-red-500"></i>파격적인 조건</h3>
|
|
<p class="text-slate-600 ml-7">착수금 0원 / 성공보수 20% (성공했을 때만 지급)</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-red-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-red-500"></i>거래처 리스크 제로화</h3>
|
|
<p class="text-slate-600 ml-7">신규 업체 기업 분석 서비스로 '우량 기업' 판별</p>
|
|
</div>
|
|
</div>
|
|
<!-- Result Content (Hidden by default) -->
|
|
<div id="legal-result" class="hidden bg-white p-6 rounded-xl shadow-xl border border-red-200 h-full animate-fadeIn">
|
|
<div class="flex items-center gap-2 mb-4 text-red-800 border-b pb-2">
|
|
<i data-lucide="gavel" class="text-red-500"></i>
|
|
<h3 class="font-bold text-xl">SAM 법무팀 솔루션</h3>
|
|
</div>
|
|
<div class="prose prose-sm max-w-none text-slate-700 whitespace-pre-line leading-relaxed">
|
|
<strong class="text-lg">Step 1. SAM 법무팀 즉시 배정</strong>
|
|
고객님의 사건(" <span id="legal-issue-text" class="italic text-red-600"></span> ")을 해결하기 위해 기업 전문 변호사가 배정되었습니다.
|
|
|
|
<strong class="text-lg mt-4 block">Step 2. 내용증명 및 가압류 진행</strong>
|
|
대표님 명의가 아닌, **법무법인 명의**로 강력한 내용증명을 발송하여 심리적 압박을 가합니다.
|
|
|
|
<strong class="text-lg mt-4 block">Step 3. 소송 및 회수</strong>
|
|
착수금 0원으로 소송을 시작합니다. 법원 출석은 변호사가 대행하며, 회수 시에만 성공보수 20%가 발생합니다.
|
|
|
|
<div class="mt-6 p-4 bg-red-50 rounded text-red-800 font-bold text-center">
|
|
"대표님은 경영에만 집중하세요. 싸움은 SAM이 대신합니다."
|
|
</div>
|
|
</div>
|
|
<button onclick="resetLegal()" class="mt-6 text-sm text-slate-400 hover:text-slate-600 underline">기본 화면으로 돌아가기</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 5: Strategy 3 (Chatbot - Rule Based) -->
|
|
<div class="slide w-full h-full flex-col md:flex-row gap-8 px-4 md:px-16 items-center" data-bg="bg-slate-50" data-text="text-slate-800">
|
|
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left">
|
|
<div class="mb-6 p-6 bg-white rounded-full shadow-lg"><i data-lucide="bot" class="w-16 h-16 text-purple-600"></i></div>
|
|
<span class="inline-block px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 03 : AI ASSISTANT</span>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">말 한마디로 끝나는 경영 관리</h2>
|
|
<p class="text-slate-600 text-lg mb-6">AI 비서 '헤이 SAM'을 지금 바로 체험해보세요.</p>
|
|
<div class="hidden md:block text-sm text-slate-400 bg-white p-4 rounded-lg border">
|
|
<p class="font-bold mb-2">💡 이렇게 물어보세요:</p>
|
|
<ul class="space-y-1">
|
|
<li>"거래처에 보낼 추석 인사말 써줘"</li>
|
|
<li>"이번 달 예상 부가세가 얼마야?"</li>
|
|
<li>"직원 근태 관리 규정 초안 만들어줘"</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat UI -->
|
|
<div class="md:w-2/3 w-full h-[500px] bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200 flex flex-col">
|
|
<div class="bg-purple-600 p-4 text-white flex items-center justify-between">
|
|
<div class="flex items-center gap-3"><i data-lucide="bot" size="24"></i><div><h3 class="font-bold">Hey SAM</h3><p class="text-xs text-purple-200">Smart Automation Management</p></div></div>
|
|
<div class="flex gap-2"><span class="w-3 h-3 bg-red-400 rounded-full"></span><span class="w-3 h-3 bg-yellow-400 rounded-full"></span><span class="w-3 h-3 bg-green-400 rounded-full"></span></div>
|
|
</div>
|
|
<div id="chat-messages" class="flex-1 p-4 bg-slate-50 overflow-y-auto space-y-4">
|
|
<div class="flex justify-start">
|
|
<div class="bg-white text-slate-800 shadow-sm border border-slate-200 p-3 rounded-2xl rounded-tl-none max-w-[80%]">
|
|
<div class="text-xs text-purple-600 font-bold mb-1">SAM</div>
|
|
대표님, 무엇을 도와드릴까요? (예: 이번 달 미수금 현황 분석해줘)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<form onsubmit="handleChat(event)" class="p-4 bg-white border-t border-slate-100 flex gap-2">
|
|
<input type="text" id="chat-input" placeholder="SAM에게 업무를 지시하세요..." class="flex-1 bg-slate-100 border-none rounded-full px-4 py-3 focus:ring-2 focus:ring-purple-500 outline-none">
|
|
<button type="submit" class="p-3 bg-purple-600 text-white rounded-full hover:bg-purple-700 transition-colors"><i data-lucide="send" size="20"></i></button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 6: Strategy 4 (Freedom) -->
|
|
<div class="slide w-full h-full flex-col md:flex-row items-center justify-center px-4 md:px-16 gap-8" data-bg="bg-white" data-text="text-slate-800">
|
|
<div class="md:w-1/3 flex flex-col items-center md:items-start text-center md:text-left mb-8 md:mb-0">
|
|
<div class="mb-6 p-6 bg-slate-50 rounded-full shadow-lg"><i data-lucide="map-pin" class="w-16 h-16 text-green-600"></i></div>
|
|
<span class="inline-block px-3 py-1 bg-slate-200 text-slate-600 rounded-full text-xs font-bold mb-4 tracking-wider">STRATEGY 04 : FREEDOM</span>
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4 leading-tight text-slate-900">사무실 밖에서도 '전지적 대표 시점'</h2>
|
|
<p class="text-slate-600 text-lg">현장과 사무실의 경계가 사라집니다.</p>
|
|
</div>
|
|
<div class="md:w-2/3 grid gap-6 w-full">
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-blue-500"></i>압도적 인프라</h3>
|
|
<p class="text-slate-600 ml-7">접속 IP 무제한 (타사 3개 제한) + 모바일 완벽 지원</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-blue-500"></i>GPS 근태 관리 (무료)</h3>
|
|
<p class="text-slate-600 ml-7">현장 직원이 어디에 있는지, 출근은 했는지 지도 확인</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500 hover:shadow-lg transition-shadow">
|
|
<h3 class="text-xl font-bold text-slate-800 mb-2 flex items-center gap-2"><i data-lucide="check-circle" class="text-blue-500"></i>AI 비서 '헤이 SAM'</h3>
|
|
<p class="text-slate-600 ml-7">음성으로 업무 지시, 챗봇으로 데이터 검색</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 7: Emotion -->
|
|
<div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-slate-900" data-text="text-white">
|
|
<i data-lucide="bell" class="w-20 h-20 text-yellow-400 mb-4 animate-bounce-custom"></i>
|
|
<h2 class="text-4xl md:text-6xl font-black mb-4 text-yellow-400 drop-shadow-lg">띵동! "SAM~"</h2>
|
|
<h3 class="text-xl md:text-3xl font-bold mb-8 max-w-2xl leading-relaxed">대표님을 미소 짓게 하는 세상에서 가장 기분 좋은 알림</h3>
|
|
<div class="bg-white/10 backdrop-blur-md p-8 rounded-2xl max-w-3xl border border-white/20">
|
|
<p class="text-lg text-slate-200 mb-6 leading-relaxed">수주가 등록되거나 발주가 나갈 때, 대표님 핸드폰으로만 알림이 갑니다.</p>
|
|
<p class="text-2xl font-serif italic text-white">"골치 아픈 보고 대신, 매일 매출이 오르는 소리를 들으세요."</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide 8: CTA -->
|
|
<div class="slide w-full h-full flex-col items-center justify-center text-center px-4" data-bg="bg-blue-700" data-text="text-white">
|
|
<div class="grid grid-cols-4 gap-4 mb-12 opacity-50 text-white">
|
|
<i data-lucide="briefcase" size="40"></i><i data-lucide="gavel" size="40"></i><i data-lucide="users" size="40"></i><i data-lucide="shield-check" size="40"></i>
|
|
</div>
|
|
<h2 class="text-3xl md:text-5xl font-bold mb-6 leading-tight">변호사, 세무사, 비서, 감사팀...</h2>
|
|
<p class="text-xl md:text-2xl text-blue-200 mb-12 font-light">이 모든 전문가를 월 O만원에 고용하시겠습니까?</p>
|
|
<button class="px-10 py-5 bg-white text-blue-700 rounded-full font-bold text-xl shadow-xl hover:bg-blue-50 transition-all transform hover:scale-105 flex items-center gap-3">
|
|
CodeBridgeX SAM 도입 문의 <i data-lucide="arrow-right"></i>
|
|
</button>
|
|
<p class="mt-8 text-sm text-blue-300">* 초기 도입 컨설팅 무료 진행 중</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Navigation Controls -->
|
|
<div class="absolute bottom-8 right-8 flex gap-4 z-40">
|
|
<button onclick="prevSlide()" id="btn-prev" class="p-3 rounded-full backdrop-blur-sm border border-current hover:bg-white/20 active:scale-95 transition-all"><i data-lucide="chevron-left"></i></button>
|
|
<button onclick="nextSlide()" id="btn-next" class="p-3 rounded-full backdrop-blur-sm border border-current hover:bg-white/20 active:scale-95 transition-all"><i data-lucide="chevron-right"></i></button>
|
|
</div>
|
|
|
|
<!-- Progress Indicator -->
|
|
<div class="absolute bottom-8 left-8 flex gap-2" id="progress-dots">
|
|
<!-- Dots injected by JS -->
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script>
|
|
// Init Icons
|
|
lucide.createIcons();
|
|
|
|
// Data & Logic
|
|
const painPoints = [
|
|
"핵심인력 퇴사/정보유출", "가지급금 이자폭탄", "미수금 회수 불가", "예상 부가세 깜깜이",
|
|
"지출결의서 분실", "현장 직원 근태불명", "재고 구멍/생산중단", "견적 실수/마진하락",
|
|
"법인세 가산세 걱정", "불량 거래처 계약", "인수인계 엉망", "차량/설비 AS 비용",
|
|
"외근 중 업무 마비", "잦은 서류 누락", "복잡한 급여/노무", "소송 착수금 부담",
|
|
"접대비 한도 초과", "담당자 부재시 혼란", "발주 오타 사고", "밤낮 없는 업무보고"
|
|
];
|
|
|
|
// Populate Pain Grid
|
|
const painGrid = document.getElementById('pain-grid');
|
|
painPoints.forEach(item => {
|
|
const div = document.createElement('div');
|
|
div.className = "bg-white p-4 rounded-lg shadow-sm border border-red-100 flex items-center justify-center text-center hover:bg-red-50 hover:border-red-300 transition-colors";
|
|
div.innerHTML = `<div class="flex flex-col items-center gap-2"><i data-lucide="alert-triangle" class="w-5 h-5 text-red-400"></i><span class="text-sm font-medium text-slate-700 break-keep">${item}</span></div>`;
|
|
painGrid.appendChild(div);
|
|
});
|
|
lucide.createIcons(); // Re-run for dynamic content
|
|
|
|
// Slides Logic
|
|
const slides = document.querySelectorAll('.slide');
|
|
const container = document.getElementById('deck-container');
|
|
const dotsContainer = document.getElementById('progress-dots');
|
|
let currentSlide = 0;
|
|
|
|
// Init Dots
|
|
slides.forEach((_, idx) => {
|
|
const dot = document.createElement('div');
|
|
dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === 0 ? 'w-8 bg-current opacity-100' : 'w-2 bg-current opacity-30'}`;
|
|
dotsContainer.appendChild(dot);
|
|
});
|
|
|
|
function updateSlide() {
|
|
slides.forEach((slide, idx) => {
|
|
slide.classList.toggle('active', idx === currentSlide);
|
|
});
|
|
|
|
// Update Background & Text Colors
|
|
const activeSlide = slides[currentSlide];
|
|
container.className = `w-full max-w-6xl h-[700px] relative rounded-xl shadow-2xl overflow-hidden border border-slate-200/20 transition-colors duration-700 ${activeSlide.dataset.bg} ${activeSlide.dataset.text}`;
|
|
|
|
// Update Dots
|
|
const dots = dotsContainer.children;
|
|
Array.from(dots).forEach((dot, idx) => {
|
|
dot.className = `h-1.5 rounded-full transition-all duration-300 ${idx === currentSlide ? 'w-8 bg-current opacity-100' : 'w-2 bg-current opacity-30'}`;
|
|
});
|
|
|
|
// Button State
|
|
document.getElementById('btn-prev').disabled = currentSlide === 0;
|
|
document.getElementById('btn-prev').style.opacity = currentSlide === 0 ? '0.3' : '1';
|
|
document.getElementById('btn-next').disabled = currentSlide === slides.length - 1;
|
|
document.getElementById('btn-next').style.opacity = currentSlide === slides.length - 1 ? '0.3' : '1';
|
|
}
|
|
|
|
function nextSlide() {
|
|
if (currentSlide < slides.length - 1) {
|
|
currentSlide++;
|
|
updateSlide();
|
|
}
|
|
}
|
|
|
|
function prevSlide() {
|
|
if (currentSlide > 0) {
|
|
currentSlide--;
|
|
updateSlide();
|
|
}
|
|
}
|
|
|
|
// Logic: Financial Calculator (Rule Based)
|
|
function calculateLoss() {
|
|
const rev = parseFloat(document.getElementById('calc-revenue').value);
|
|
const emp = parseFloat(document.getElementById('calc-employee').value);
|
|
|
|
if (!rev || !emp) {
|
|
alert('연 매출과 직원 수를 입력해주세요.');
|
|
return;
|
|
}
|
|
|
|
// Simple Logic: 3% of revenue is hidden loss, or 1500000 per employee per month waste
|
|
const hiddenLoss = Math.round(rev * 10000 * 0.03); // 3% of revenue in Man Won
|
|
const savedCost = Math.round(hiddenLoss * 0.7); // SAM saves 70% of loss
|
|
|
|
const resultText = `
|
|
<strong class="text-lg">분석 결과 (추정치)</strong>
|
|
|
|
대표님의 기업 규모(매출 ${rev}억, 직원 ${emp}명)에서 시스템 부재로 인한 '숨은 손실(Hidden Cost)'은 **연간 약 ${hiddenLoss.toLocaleString()}만 원**으로 추산됩니다.
|
|
|
|
주요 원인:
|
|
- 수기 작업으로 인한 인건비 누수
|
|
- 재고 로스 및 미수금 금융 비용
|
|
|
|
<span class="text-blue-600 font-bold block mt-4">SAM 도입 시 예상 절감액: 월 ${Math.round(savedCost/12).toLocaleString()}만 원</span>
|
|
지금 바로 새어나가는 돈을 막으셔야 합니다.
|
|
`;
|
|
|
|
document.getElementById('money-default').classList.add('hidden');
|
|
document.getElementById('money-result').classList.remove('hidden');
|
|
document.getElementById('money-result-text').innerHTML = resultText;
|
|
}
|
|
|
|
function resetMoney() {
|
|
document.getElementById('money-default').classList.remove('hidden');
|
|
document.getElementById('money-result').classList.add('hidden');
|
|
document.getElementById('calc-revenue').value = '';
|
|
document.getElementById('calc-employee').value = '';
|
|
}
|
|
|
|
// Logic: Legal Simulator (Static)
|
|
function solveLegal() {
|
|
const issue = document.getElementById('legal-input').value;
|
|
if (!issue) {
|
|
alert('법적 문제를 간단히 적어주세요.');
|
|
return;
|
|
}
|
|
document.getElementById('legal-issue-text').innerText = issue;
|
|
document.getElementById('legal-default').classList.add('hidden');
|
|
document.getElementById('legal-result').classList.remove('hidden');
|
|
}
|
|
|
|
function resetLegal() {
|
|
document.getElementById('legal-default').classList.remove('hidden');
|
|
document.getElementById('legal-result').classList.add('hidden');
|
|
document.getElementById('legal-input').value = '';
|
|
}
|
|
|
|
// Logic: Chatbot (Rule Based)
|
|
function handleChat(e) {
|
|
e.preventDefault();
|
|
const input = document.getElementById('chat-input');
|
|
const msg = input.value.trim();
|
|
if (!msg) return;
|
|
|
|
// Add User Message
|
|
const chatBox = document.getElementById('chat-messages');
|
|
const userDiv = document.createElement('div');
|
|
userDiv.className = "flex justify-end";
|
|
userDiv.innerHTML = `<div class="bg-purple-600 text-white rounded-2xl rounded-tr-none p-3 max-w-[80%]">${msg}</div>`;
|
|
chatBox.appendChild(userDiv);
|
|
|
|
input.value = '';
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
|
|
// Simulate Bot Reply
|
|
setTimeout(() => {
|
|
let reply = "죄송합니다. 정확한 내용을 다시 말씀해 주시겠습니까?";
|
|
|
|
if (msg.includes("인사") || msg.includes("추석") || msg.includes("메일")) {
|
|
reply = "네, 대표님. 거래처용 정중한 인사말 초안을 작성하여 메일함에 저장해 두겠습니다. 확인 후 전송 버튼만 눌러주세요. ✨";
|
|
} else if (msg.includes("부가세") || msg.includes("세금")) {
|
|
reply = "이번 달 예상 부가세는 약 1,250만 원입니다. 매입 자료가 3건 누락되어 있으니, 대시보드에서 확인해 주세요. 💰";
|
|
} else if (msg.includes("근태") || msg.includes("직원")) {
|
|
reply = "현재 현장 직원 3명이 GPS 범위 내에서 출근 체크를 완료했습니다. 1명은 아직 미출근 상태입니다. 📍";
|
|
} else if (msg.includes("미수금")) {
|
|
reply = "A업체의 미수금 500만 원이 3개월째 연체 중입니다. 내용증명 발송을 준비할까요? ⚖️";
|
|
} else {
|
|
reply = "네, 알겠습니다. 해당 업무를 SAM 대시보드 '오늘의 할 일'에 등록하고 담당자에게 알림을 보냈습니다. ✅";
|
|
}
|
|
|
|
const botDiv = document.createElement('div');
|
|
botDiv.className = "flex justify-start";
|
|
botDiv.innerHTML = `<div class="bg-white text-slate-800 shadow-sm border border-slate-200 p-3 rounded-2xl rounded-tl-none max-w-[80%]"><div class="text-xs text-purple-600 font-bold mb-1">SAM</div>${reply}</div>`;
|
|
chatBox.appendChild(botDiv);
|
|
chatBox.scrollTop = chatBox.scrollHeight;
|
|
}, 800);
|
|
}
|
|
|
|
// Keyboard Nav
|
|
window.addEventListener('keydown', (e) => {
|
|
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
|
if (e.key === 'ArrowRight') nextSlide();
|
|
if (e.key === 'ArrowLeft') prevSlide();
|
|
});
|
|
|
|
// Initialize First Slide
|
|
updateSlide();
|
|
</script>
|
|
</body>
|
|
</html> |