Spaces:

kms7530
/

undefined

Running

App Files Files Community

kms7530 commited on Oct 16, 2025

Commit

2bbc669

verified ·

1 Parent(s): 37eaf9f

수/발신 전화번호는 어떻게 설정할 수 있나요?

Browse files

기존 사용 중이던 대표번호, 혹은 070 인터넷 전화번호로 AI가 전화를 걸 수 있습니다.
전화 발신의 경우 특정 문구를 수신자에게 보여주는 옵션(레터링)을 추가해 신뢰도를 높일 수 있습니다.
시나리오 커스터마이징이 가능한가요?
시나리오, AI 학습(데이터)등 자유롭게 커스터마이징 가능하며, AI 목소리 교체는 기업 요금제 고객에게 제공하고 있습니다.
통화 데이터 어떻게 기록되고 관리되나요?
통화 스크립트, 통화 녹음 파일은 기본적으로 세일즈콜 서버에 저장됩니다.
데이터 저장을 원하지 않을 시, 통화가 종료되는 순간 고객사 서버로 데이터 전달 후 세일즈콜은 데이터를 폐기합니다.
기술 지원은 어떻게 받을 수 있나요?
구현 단계별로 전문 컨설턴트가 배정되어 설계부터 운영까지 전담 지원합니다.
24시간 기술 지원 서비스를 제공하여 안정적인 서비스 운영을 보장합니다.

동시에 몇 건의 통화가 가능한가요?
기본 10 채널을 제공하며, 요청 시 100채널 이상 동시 운영이 가능합니다.
기존 운영 방식 대비 비용 절감 효과는 어느 정도인가요?
인력 운영 대비 최대 80% 비용 절감이 가능합니다.
월 5,000 통화 기준으로 기존 500만원에서 150만원으로 약 350만원의 비용 절감 효과를 얻을 수 있습니다.
서비스 도입까지 얼마나 걸리나요?
평균 2주 이내에 캠페인 시작이 가능합니다.
기존 시스템과의 연동이 가능한가요?
API, ERP, CRM 등 내부 시스템과의 원활한 통합을 지원합니다.
기존 시스템 연동이 필요한 경우 별도 협의를 통해 맞춤형 일정을 수립할 수 있습니다.

Footer 위에 FAQ를 추가해줘. 각 항목은 아코디언으로 만들고, 모든 항목은 닫힌걸로 보여줘.

Files changed (1) hide show

index.html +154 -17

index.html CHANGED Viewed

@@ -57,6 +57,11 @@
             background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgxNDksIDE2OSwgMTk5LCAwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgZmlsbD0idXJsKCNwYXR0ZXJuKSIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIvPjwvc3ZnPg==');
         }
     </style>
 </head>
 <body class="font-sans antialiased text-gray-800 bg-white">
     <!-- Navigation -->
@@ -89,14 +94,12 @@
             <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">
-                        전문 영업 사원처럼 전환하는 AI<br>
-                        <span class="text-primary">10년 경력의 베테랑 에이전트 수준</span>
 </h1>
                     <p class="mt-4 text-lg text-gray-600 pr-10">
-                            당사의 AI는 최고의 영업 사원의 설득 기술을 재현하며,
-                            자연스러운 음조 변화와 빠른 반응 속도(300ms vs 업계 평균 1.2s)를 자랑합니다.<br>
-                            테스트 대상자의 97%가 AI 임을 알아차리지 못했습니다.
-</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">
                             상담 예약
@@ -138,12 +141,9 @@
                                 <span class="text-sm font-medium text-secondary">97%의 인간 유사도</span>
 </div>
                             <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
-                                <div class="h-full bg-secondary rounded-full" style="width: 97%"></div>
                             </div>
 </div>
-                            <button class="mt-6 w-full bg-primary hover:bg-blue-600 text-white py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
-                                데모 영상
-                            </button>
 </div>
                     </div>
                 </div>
@@ -158,9 +158,9 @@
 <!-- Features Section -->
     <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">우수한 음성 기술</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">
@@ -171,7 +171,10 @@
                 </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년 이상 경력을 지닌 베테랑 상담원의 음성 모델로, 자연스러운 높낮이와 억양을 통해 실제 사람처럼 대화합니다. 0.3 초 이내의 반응으로 97% 이상 인간 음성과 구별이 어려운 수준의 자연스러움을 제공합니다.
                 </p>
             </div>
@@ -182,7 +185,10 @@
                 </div>
                 <h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">고객 설득 기술</h3>
                 <p class="mt-2 text-gray-600 hovered-element">
-                    효과적인 후킹 멘트와 핵�� 포인트 강조를 통해 고객의 관심을 이끌어내고, 공감과 불만 처리로 신뢰를 형성합니다. 적극적인 의사소통 전략을 바탕으로 고객의 마음을 움직이고 설득력을 극대화합니다.
                 </p>
             </div>
@@ -299,21 +305,152 @@
             </div>
         </div>
     </div>
     <!-- Footer -->
     <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>© 2025 Salescall. 모든 권리 보유.</p>
 </div>
         </div>
     </footer>
     <script>
         feather.replace();
         // Smooth scrolling for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
             anchor.addEventListener('click', function (e) {
                 e.preventDefault();
                 document.querySelector(this.getAttribute('href')).scrollIntoView({

             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">
     <!-- Navigation -->
             <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">세일즈콜 AI</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">
                             상담 예약
                                 <span class="text-sm font-medium text-secondary">97%의 인간 유사도</span>
 </div>
                             <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
+                                <div class="h-full bg-green-500 rounded-full" style="width: 97%"></div>
                             </div>
 </div>
 </div>
                     </div>
                 </div>
 <!-- Features Section -->
     <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">인간과 가까운 음성을 통한 고객 설득, 전환</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>
                 <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년 이상 경력 상담원의 음성 모델로, 자연스러운 높낮이와 억양을 통해 실제 사람처럼 대화합니다.
+                </p>
+                <p class="mt-2 text-gray-600 hovered-element">
+                    빠른 반응속도와 97% 이상 인간 음성과 구별이 어려운 수준의 음성을 통해 자연스러움을 제공합니다.
                 </p>
             </div>
                 </div>
                 <h3 class="mt-4 text-lg font-medium text-gray-900 hovered-element">고객 설득 기술</h3>
                 <p class="mt-2 text-gray-600 hovered-element">
+                    효과적인 후킹 멘트와 핵심 포인트 강조를 통해 고객의 관심을 이끌어내고, 공감과 불만 처리로 신뢰를 형성합니다.
+                </p>
+                <p class="mt-2 text-gray-600 hovered-element">
+                    또한 성공한 케이스를 이용한 재학습을 통해 고객 전환율을 높힙니다.
                 </p>
             </div>
             </div>
         </div>
     </div>
+    <!-- FAQ Section -->
+    <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">
+                <!-- FAQ Item 1 -->
+                <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가 전화를 걸 수 있습니다.<br>
+                            전화 발신의 경우 특정 문구를 수신자에게 보여주는 옵션(레터링)을 추가해 신뢰도를 높일 수 있습니다.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 2 -->
+                <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>
+                <!-- FAQ Item 3 -->
+                <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">
+                            통화 스크립트, 통화 녹음 파일은 기본적으로 세일즈콜 서버에 저장됩니다.<br>
+                            데이터 저장을 원하지 않을 시, 통화가 종료되는 순간 고객사 서버로 데이터 전달 후 세일즈콜은 데이터를 폐기합니다.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 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">
+                            구현 단계별로 전문 컨설턴트가 배정되어 설계부터 운영까지 전담 지원합니다.<br>
+                            24시간 기술 지원 서비스를 제공하여 안정적인 서비스 운영을 보장합니다.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 5 -->
+                <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>
+                <!-- FAQ Item 6 -->
+                <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% 비용 절감이 가능합니다.<br>
+                            월 5,000 통화 기준으로 기존 500만원에서 150만원으로 약 350만원의 비용 절감 효과를 얻을 수 있습니다.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 7 -->
+                <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>
+                <!-- FAQ Item 8 -->
+                <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 등 내부 시스템과의 원활한 통합을 지원합니다.<br>
+                            기존 시스템 연동이 필요한 경우 별도 협의를 통해 맞춤형 일정을 수립할 수 있습니다.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <!-- Footer -->
     <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>© 2025 Salescall. 모든 권리 보유.</p>
 </div>
         </div>
     </footer>
     <script>
         feather.replace();
         // Smooth scrolling for anchor links
+        // Accordion functionality
+        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({