Hugging Face's logo

Spaces:
kms7530
/
undefined
Running

App Files Community
undefined / index.html
kms7530's picture
kms7530
Manual changes saved
88bf5ad verified
Raw History Blame Contribute Delete
23 kB
<!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%; /* 16:9 */
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%; /* 16:9 Aspect Ratio */
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">
<!-- Navigation -->
<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>
<!-- Hero Section -->
<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>
<!-- 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">์ง„์งœ ์ƒ๋‹ด์› ์Œ์„ฑ์„ ํ†ตํ•œ<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>
<!-- 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๊ฐ€ ์ „ํ™”๋ฅผ ๊ฑธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ „ํ™” ๋ฐœ์‹ ์˜ ๊ฒฝ์šฐ ํŠน์ • ๋ฌธ๊ตฌ๋ฅผ ์ˆ˜์‹ ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ์˜ต์…˜(๋ ˆํ„ฐ๋ง)์„ ์ถ”๊ฐ€ํ•ด ์‹ ๋ขฐ๋„๋ฅผ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
</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">
ํ†ตํ™” ์Šคํฌ๋ฆฝํŠธ, ํ†ตํ™” ๋…น์Œ ํŒŒ์ผ์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์„ธ์ผ์ฆˆ์ฝœ ์„œ๋ฒ„์— ์ €์žฅ๋ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ์ €์žฅ์„ ์›ํ•˜์ง€ ์•Š์„ ์‹œ, ํ†ตํ™”๊ฐ€ ์ข…๋ฃŒ๋˜๋Š” ์ˆœ๊ฐ„ ๊ณ ๊ฐ์‚ฌ ์„œ๋ฒ„๋กœ ๋ฐ์ดํ„ฐ ์ „๋‹ฌ ํ›„ ์„ธ์ผ์ฆˆ์ฝœ์€ ๋ฐ์ดํ„ฐ๋ฅผ ํ๊ธฐํ•ฉ๋‹ˆ๋‹ค.
</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">
๊ตฌํ˜„ ๋‹จ๊ณ„๋ณ„๋กœ ์ „๋ฌธ ์ปจ์„คํ„ดํŠธ๊ฐ€ ๋ฐฐ์ •๋˜์–ด ์„ค๊ณ„๋ถ€ํ„ฐ ์šด์˜๊นŒ์ง€ ์ „๋‹ด ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. 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% ๋น„์šฉ ์ ˆ๊ฐ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์›” 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 ๋“ฑ ๋‚ด๋ถ€ ์‹œ์Šคํ…œ๊ณผ์˜ ์›ํ™œํ•œ ํ†ตํ•ฉ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์กด ์‹œ์Šคํ…œ ์—ฐ๋™์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ ๋ณ„๋„ ํ˜‘์˜๋ฅผ ํ†ตํ•ด ๋งž์ถคํ˜• ์ผ์ •์„ ์ˆ˜๋ฆฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- CTA Section -->
<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 -->
<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();
// 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({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>