|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Salescall - AI 기반 인간 같은 아웃바운드 콜 서비스</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3b82f6', |
|
|
secondary: '#0d9488', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
|
|
|
.videoWrapper { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
} |
|
|
.videoWrapper iframe { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 10%; |
|
|
width: 80%; |
|
|
height: 80%; |
|
|
} |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.aspect-w-16 { |
|
|
position: relative; |
|
|
padding-bottom: 56.25%; |
|
|
height: 0; |
|
|
overflow: hidden; |
|
|
} |
|
|
.aspect-h-9 { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
.voice-wave { |
|
|
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgxNDksIDE2OSwgMTk5LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg=='); |
|
|
} |
|
|
</style> |
|
|
<style> |
|
|
.rotate-180 { |
|
|
transform: rotate(180deg); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800 bg-white"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i data-feather="phone-call" class="text-primary h-8 w-8"></i> |
|
|
<span class="ml-2 text-xl font-bold text-gray-900">Salescall</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out" onclick="location.href='https://vo.la/4giyLEL'"> |
|
|
상담 예약 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="hero-gradient voice-wave"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="md:w-1/2"> |
|
|
<h1 class="text-4xl md:text-4xl font-bold text-gray-900 leading-tight"> |
|
|
<span class="text-primary">10년차 베테랑 수준으로</span><br> |
|
|
고객과 전화하는 AI |
|
|
</h1> |
|
|
<p class="mt-4 text-lg text-gray-600 pr-10"> |
|
|
첫날부터 10년차 베테랑처럼 고객을 설득하는 <span class="text-primary font-bold">세일즈콜 AI</span>를 통해<br><span class="text-red-500 font-bold">반복되는 채용과 교육</span>으로부터 벗어나세요. |
|
|
</p> |
|
|
<div class="mt-8 flex flex-col sm:flex-row gap-4"> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-12 py-3 rounded-md text-base font-medium transition duration-150 ease-in-out" onclick="location.href='https://vo.la/4giyLEL'"> |
|
|
상담 예약 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden md:block md:w-1/2"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-8 -left-8 w-64 h-64 bg-teal-100 rounded-full opacity-50"></div> |
|
|
<div class="absolute -bottom-8 -right-8 w-64 h-64 bg-blue-100 rounded-full opacity-50"></div> |
|
|
<div class="relative bg-white p-8 rounded-xl shadow-xl"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="bg-primary bg-opacity-10 p-3 rounded-full"> |
|
|
<i data-feather="phone" class="text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium text-gray-900">실시간 통화 데모</h3> |
|
|
<p class="text-sm text-gray-500">지금 데모를 확인해보세요</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 space-y-4"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-sm text-gray-500">응답 속도</span> |
|
|
<span class="text-sm font-medium text-primary">0.3초 (평균 1.2초 대비)</span> |
|
|
</div> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="relative h-full"> |
|
|
<div class="absolute h-full bg-red-200 rounded-full" style="width: 100%"></div> |
|
|
<div class="absolute h-full bg-green-500 rounded-full" style="left: 0%; width: 25%"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs text-gray-500"> |
|
|
<span class="text-primary font-medium">Salescall: 0.3초</span> |
|
|
<span class="text-red-600">경쟁사: 1.2초</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-sm text-gray-500">AI/인간 구별</span> |
|
|
<span class="text-sm font-medium text-secondary">98%의 인간 유사도</span> |
|
|
</div> |
|
|
<div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
|
|
<div class="h-full bg-green-500 rounded-full" style="width: 98%"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="videoWrapper"> |
|
|
<iframe width="1280" height="720" src="https://www.youtube.com/embed/HhVD-wYJ-i0?si=oxsBgdY9TgA2SeBm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="features" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-3xl font-bold text-gray-900">진짜 상담원 음성을 통한<br> 고객 설득과 전환</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-600 mx-auto"> |
|
|
<span class="text-primary">고객 설득</span>과 <span class="text-secondary">전환</span>을 초점으로 설계 |
|
|
</p> |
|
|
</div> |
|
|
<div class="mt-16 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 hovered-element"> |
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out hovered-element"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary bg-opacity-10 text-primary"> |
|
|
<i data-feather="award"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">10년차 베테랑 AI 상담원</h3> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
10년 이상 경력 상담원의 음성 모델로, <span class="font-bold">자연스러운 높낮이와 억양</span>을 통해 실제 사람처럼 대화합니다. |
|
|
</p> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
빠른 반응속도와 <span class="font-bold">인간 음성과 98% 유사한 수준</span>의 음성을 통해 자연스러움을 제공합니다. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out hovered-element"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary bg-opacity-10 text-secondary"> |
|
|
<i data-feather="message-circle"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">고객 설득 기술</h3> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
효과적인 후킹 멘트와 핵심 포인트 강조를 통해 고객의 관심을 이끌어내고, <span class="font-bold">공감과 재설득</span>으로 전환을 이루어 냅니다. |
|
|
</p> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
또한 <span class="font-bold">성공한 케이스를 이용한 재학습</span>을 통해 고객 전환율을 높힙니다. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out hovered-element"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary bg-opacity-10 text-primary"> |
|
|
<i data-feather="refresh-cw"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">고객 전환 시스템</h3> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
관심 고객 여부를 자동으로 판단해 상담 효율을 높이고, <span class="font-bold">2차 상담 일정을 자동으로 조율</span>하여 고객 응답률과 전환율을 극대화합니다. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out hovered-element"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary bg-opacity-10 text-secondary"> |
|
|
<i data-feather="phone-call"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">고도화된 통화 시스템</h3> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
<span class="font-bold">100건 이상과의 동시 통화를 안정적으로 처리</span>하며, <span class="font-bold">가장 응답률이 높은 시간대에 집중적으로 전화</span>를 걸어 효율을 극대화합니다. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out hovered-element"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary bg-opacity-10 text-primary"> |
|
|
<i data-feather="database"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">통화 데이터 기록</h3> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
모든 통화 수신 여부와 통화 내용을 저장하며 통화 내용을 통해 <span class="font-bold">고객의 반응과 도달 여부를 분석·제공</span> 합니다. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-white p-8 rounded-xl shadow-md transition duration-300 ease-in-out hovered-element"> |
|
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-secondary bg-opacity-10 text-secondary"> |
|
|
<i data-feather="bar-chart-2"></i> |
|
|
</div> |
|
|
<h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">데이터 기반 최적화</h3> |
|
|
<p class="mt-2 text-gray-600 hovered-element"> |
|
|
응답률과 전환율이 높은 시간대를 분석해 <span class="font-bold">최적의 상담 타이밍</span>을 찾아내고, 효과적인 멘트 패턴을 식별하여 <span class="font-bold">자동으로 학습·개선되어 지속적으로 성과</span>를 향상시킵니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 py-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<h2 class="text-3xl font-bold text-center text-gray-900 mb-12">자주 묻는 질문</h2> |
|
|
<div class="space-y-4"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">수/발신 전화번호는 어떻게 설정할 수 있나요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
기존 사용 중이던 대표번호, 혹은 070 인터넷 전화번호로 AI가 전화를 걸 수 있습니다. 전화 발신의 경우 특정 문구를 수신자에게 보여주는 옵션(레터링)을 추가해 신뢰도를 높일 수 있습니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">시나리오 커스터마이징이 가능한가요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
시나리오, AI 학습(데이터)등 자유롭게 커스터마이징 가능하며, AI 목소리 교체는 기업 요금제 고객에게 제공하고 있습니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">통화 데이터 어떻게 기록되고 관리되나요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
통화 스크립트, 통화 녹음 파일은 기본적으로 세일즈콜 서버에 저장됩니다. 데이터 저장을 원하지 않을 시, 통화가 종료되는 순간 고객사 서버로 데이터 전달 후 세일즈콜은 데이터를 폐기합니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">기술 지원은 어떻게 받을 수 있나요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
구현 단계별로 전문 컨설턴트가 배정되어 설계부터 운영까지 전담 지원합니다. 24시간 기술 지원 서비스를 제공하여 안정적인 서비스 운영을 보장합니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">동시에 몇 건의 통화가 가능한가요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
기본 10 채널을 제공하며, 요청 시 100채널 이상 동시 운영이 가능합니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">기존 운영 방식 대비 비용 절감 효과는 어느 정도인가요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
인력 운영 대비 최대 80% 비용 절감이 가능합니다. 월 5,000 통화 기준으로 기존 500만원에서 150만원으로 약 350만원의 비용 절감 효과를 얻을 수 있습니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">서비스 도입까지 얼마나 걸리나요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
평균 2주 이내에 캠페인 시작이 가능합니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden"> |
|
|
<button class="accordion-toggle w-full flex justify-between items-center p-6 text-left"> |
|
|
<span class="text-lg font-medium text-gray-900">기존 시스템과의 연동이 가능한가요?</span> |
|
|
<i data-feather="chevron-down" class="transform transition-transform duration-300"></i> |
|
|
</button> |
|
|
<div class="accordion-content hidden px-6 pb-6 pt-0"> |
|
|
<p class="text-gray-600"> |
|
|
API, ERP, CRM 등 내부 시스템과의 원활한 통합을 지원합니다. 기존 시스템 연동이 필요한 경우 별도 협의를 통해 맞춤형 일정을 수립할 수 있습니다. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="bg-primary"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center"> |
|
|
<h2 class="text-3xl font-bold text-white">AI임을 눈치채지 못한 이유, 직접 확인해보세요.</h2> |
|
|
<div class="mt-8"> |
|
|
<button class="bg-white hover:bg-gray-100 text-primary px-8 py-3 rounded-md text-base font-medium transition duration-150 ease-in-out shadow-lg" onclick="location.href='https://vo.la/4giyLEL'"> |
|
|
상담 예약 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
|
|
<div class="mt-12 pt-8 border-t border-gray-800 text-center text-gray-400 text-sm"> |
|
|
<p>Copyright © 2025 Salescall. All Rights Reserved.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
|
|
|
document.querySelectorAll('.accordion-toggle').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const content = button.nextElementSibling; |
|
|
const icon = button.querySelector('i'); |
|
|
|
|
|
if (content.classList.contains('hidden')) { |
|
|
content.classList.remove('hidden'); |
|
|
icon.classList.add('rotate-180'); |
|
|
} else { |
|
|
content.classList.add('hidden'); |
|
|
icon.classList.remove('rotate-180'); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
