gahusb
09656696f1
- Enhanced navigation bar with all requested sections - Added "이런 걱정 하고 계셨나요?" section - Added "차별점" section with comparison table - Added "MY STORY" section - Added "이렇게 진행됩니다" (HOW WE WORK) section - Added pricing details section - Added automatic quote calculator section - Added tech stack showcase section - Added customer reviews section - Added "멈추지 않는 진화" section - Added enhanced portfolio section - Added "AFTER SERVICE" section - Added comprehensive FAQ section - Improved overall design and user experience Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1521 lines
82 KiB
TypeScript
1521 lines
82 KiB
TypeScript
import ContactForm from './components/ContactForm';
|
||
|
||
export default function Home() {
|
||
return (
|
||
<div className="min-h-screen">
|
||
{/* Enhanced Navigation */}
|
||
<nav className="fixed top-0 w-full bg-white/95 backdrop-blur-md z-50 border-b border-gray-200 shadow-sm">
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
<div className="flex justify-between items-center h-16">
|
||
<div className="text-2xl font-bold text-blue-900">쟁승메이드</div>
|
||
<div className="hidden lg:flex space-x-6 items-center">
|
||
<a href="#services" className="text-gray-700 hover:text-blue-700 transition font-medium">서비스</a>
|
||
<a href="#pricing" className="text-gray-700 hover:text-blue-700 transition font-medium">비용안내</a>
|
||
<a href="#tech" className="text-gray-700 hover:text-blue-700 transition font-medium">기술소개</a>
|
||
<a href="#quote" className="text-gray-700 hover:text-blue-700 transition font-medium">자동견적</a>
|
||
<a href="#portfolio" className="text-gray-700 hover:text-blue-700 transition font-medium">포트폴리오</a>
|
||
<a href="#faq" className="text-gray-700 hover:text-blue-700 transition font-medium">FAQ</a>
|
||
<a href="#contact" className="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800 transition font-semibold shadow-md">
|
||
무료 상담
|
||
</a>
|
||
</div>
|
||
{/* Mobile menu button */}
|
||
<div className="lg:hidden">
|
||
<button className="text-gray-700 hover:text-blue-700">
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* Hero Section - Enhanced */}
|
||
<section className="pt-32 pb-20 px-4 bg-gradient-to-br from-blue-50 via-white to-emerald-50">
|
||
<div className="max-w-7xl mx-auto text-center">
|
||
<div className="inline-block mb-4 px-4 py-2 bg-blue-100 text-blue-700 rounded-full text-sm font-semibold animate-pulse">
|
||
🤖 대기업 출신 개발자의 RPA 자동화 전문
|
||
</div>
|
||
<h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
|
||
반복 업무를 <span className="text-blue-700">자동화</span>하고<br />
|
||
생산성을 <span className="text-emerald-600">극대화</span>하세요
|
||
</h1>
|
||
<p className="text-xl text-gray-600 mb-10 max-w-3xl mx-auto leading-relaxed">
|
||
대기업 출신 개발자가 제공하는 RPA 자동화, 웹/앱 개발 솔루션.<br />
|
||
엑셀 자동화부터 복잡한 업무 프로세스까지, 비즈니스 성장을 가속화합니다.
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<a href="#contact" className="bg-blue-700 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-800 transition shadow-lg hover:shadow-xl">
|
||
무료 상담 신청
|
||
</a>
|
||
<a href="#services" className="border-2 border-blue-700 text-blue-700 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-50 transition">
|
||
서비스 둘러보기
|
||
</a>
|
||
</div>
|
||
|
||
<div className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||
<div className="transform hover:scale-105 transition">
|
||
<div className="text-4xl font-bold text-blue-700">100+</div>
|
||
<div className="text-gray-600 mt-2">프로젝트 경험</div>
|
||
</div>
|
||
<div className="transform hover:scale-105 transition">
|
||
<div className="text-4xl font-bold text-blue-700">24h</div>
|
||
<div className="text-gray-600 mt-2">평균 응답 시간</div>
|
||
</div>
|
||
<div className="transform hover:scale-105 transition">
|
||
<div className="text-4xl font-bold text-blue-700">98%</div>
|
||
<div className="text-gray-600 mt-2">고객 만족도</div>
|
||
</div>
|
||
<div className="transform hover:scale-105 transition">
|
||
<div className="text-4xl font-bold text-blue-700">5년+</div>
|
||
<div className="text-gray-600 mt-2">개발 경력</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 이런 걱정 하고 계셨나요? */}
|
||
<section className="py-20 px-4 bg-gray-50">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">이런 걱정 하고 계셨나요?</h2>
|
||
<p className="text-xl text-gray-600">많은 고객들이 같은 고민을 하셨습니다</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
|
||
<div className="text-4xl mb-4">😰</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">외주 업체를 못 믿겠어요</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
"프로젝트 맡겼는데 연락 두절... 이런 경험 다시는 하기 싫어요."
|
||
</p>
|
||
<div className="text-blue-700 font-semibold">
|
||
✓ 대기업 출신 검증된 개발자<br />
|
||
✓ 실시간 진행상황 공유<br />
|
||
✓ 투명한 커뮤니케이션
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
|
||
<div className="text-4xl mb-4">💸</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">비용이 너무 비싸요</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
"대형 업체는 견적이 수천만원... 중소기업 예산으로는 불가능해요."
|
||
</p>
|
||
<div className="text-blue-700 font-semibold">
|
||
✓ 합리적인 가격<br />
|
||
✓ 불필요한 중간 마진 없음<br />
|
||
✓ 분할 납부 가능
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
|
||
<div className="text-4xl mb-4">⏰</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">프로젝트가 너무 오래 걸려요</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
"6개월 걸린다고 했는데 1년 넘게... 언제 완성될지 모르겠어요."
|
||
</p>
|
||
<div className="text-blue-700 font-semibold">
|
||
✓ 명확한 일정 제시<br />
|
||
✓ 단계별 검수 및 피드백<br />
|
||
✓ 신속한 개발 프로세스
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
|
||
<div className="text-4xl mb-4">🤔</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">기술을 잘 몰라요</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
"개발 용어가 너무 어려워요. 무엇을 요구해야 할지 모르겠어요."
|
||
</p>
|
||
<div className="text-blue-700 font-semibold">
|
||
✓ 쉬운 언어로 설명<br />
|
||
✓ 요구사항 정리 도움<br />
|
||
✓ 최적의 솔루션 제안
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
|
||
<div className="text-4xl mb-4">🔧</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">완성 후 유지보수가 걱정돼요</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
"프로젝트 끝나면 연락 안 돼요. 오류 나면 어떻게 하죠?"
|
||
</p>
|
||
<div className="text-blue-700 font-semibold">
|
||
✓ 1개월 무상 기술지원<br />
|
||
✓ 평생 유지보수 가능<br />
|
||
✓ 빠른 응대 (24시간 이내)
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition">
|
||
<div className="text-4xl mb-4">📝</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">계약이 복잡해요</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
"계약서 조항이 너무 많고 어려워요. 불리한 조건은 없을까요?"
|
||
</p>
|
||
<div className="text-blue-700 font-semibold">
|
||
✓ 명확하고 간단한 계약서<br />
|
||
✓ 공정한 계약 조건<br />
|
||
✓ 지적재산권 고객 이전
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 차별점 */}
|
||
<section className="py-20 px-4 bg-white">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">쟁승메이드는 다릅니다</h2>
|
||
<p className="text-xl text-gray-600">대형 업체도, 작은 외주도 아닌, 전문가의 1:1 맞춤 서비스</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
<div className="text-center p-8 bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl">
|
||
<div className="text-6xl mb-4">🎯</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4">대기업 퀄리티</h3>
|
||
<p className="text-gray-700 leading-relaxed">
|
||
5년 이상 대기업에서 검증된 개발 프로세스와 코드 품질을 그대로 적용합니다.
|
||
엔터프라이즈급 품질을 합리적인 가격에 경험하세요.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center p-8 bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-2xl">
|
||
<div className="text-6xl mb-4">⚡</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4">스타트업 속도</h3>
|
||
<p className="text-gray-700 leading-relaxed">
|
||
불필요한 회의와 절차 없이, 빠르게 개발하고 배포합니다.
|
||
MVP부터 완제품까지, 시장 진입 속도를 최대한 단축합니다.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center p-8 bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl">
|
||
<div className="text-6xl mb-4">💡</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-4">컨설팅 마인드</h3>
|
||
<p className="text-gray-700 leading-relaxed">
|
||
단순 개발이 아닌, 비즈니스 성과를 위한 솔루션을 제안합니다.
|
||
ROI를 최대화하는 최적의 기술 스택과 아키텍처를 선택합니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 비교표 */}
|
||
<div className="mt-16 overflow-x-auto">
|
||
<table className="w-full bg-white rounded-xl overflow-hidden shadow-lg">
|
||
<thead>
|
||
<tr className="bg-gradient-to-r from-blue-600 to-blue-800 text-white">
|
||
<th className="py-4 px-6 text-left">비교 항목</th>
|
||
<th className="py-4 px-6 text-center">대형 외주업체</th>
|
||
<th className="py-4 px-6 text-center">작은 외주</th>
|
||
<th className="py-4 px-6 text-center bg-emerald-600">쟁승메이드</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="divide-y divide-gray-200">
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="py-4 px-6 font-semibold">가격</td>
|
||
<td className="py-4 px-6 text-center">💰💰💰</td>
|
||
<td className="py-4 px-6 text-center">💰</td>
|
||
<td className="py-4 px-6 text-center text-emerald-700 font-bold">💰💰 합리적</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="py-4 px-6 font-semibold">품질</td>
|
||
<td className="py-4 px-6 text-center">⭐⭐⭐⭐⭐</td>
|
||
<td className="py-4 px-6 text-center">⭐⭐⭐</td>
|
||
<td className="py-4 px-6 text-center text-emerald-700 font-bold">⭐⭐⭐⭐⭐</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="py-4 px-6 font-semibold">개발 속도</td>
|
||
<td className="py-4 px-6 text-center">🐢 느림</td>
|
||
<td className="py-4 px-6 text-center">⚡ 빠름</td>
|
||
<td className="py-4 px-6 text-center text-emerald-700 font-bold">⚡⚡ 매우 빠름</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="py-4 px-6 font-semibold">커뮤니케이션</td>
|
||
<td className="py-4 px-6 text-center">😐 보통</td>
|
||
<td className="py-4 px-6 text-center">😕 느림</td>
|
||
<td className="py-4 px-6 text-center text-emerald-700 font-bold">😊 실시간</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="py-4 px-6 font-semibold">유지보수</td>
|
||
<td className="py-4 px-6 text-center">✓ 계약 시</td>
|
||
<td className="py-4 px-6 text-center">❌ 어려움</td>
|
||
<td className="py-4 px-6 text-center text-emerald-700 font-bold">✓ 평생 가능</td>
|
||
</tr>
|
||
<tr className="hover:bg-gray-50">
|
||
<td className="py-4 px-6 font-semibold">맞춤 개발</td>
|
||
<td className="py-4 px-6 text-center">△ 제한적</td>
|
||
<td className="py-4 px-6 text-center">✓ 가능</td>
|
||
<td className="py-4 px-6 text-center text-emerald-700 font-bold">✓✓ 완전 맞춤</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* MY STORY */}
|
||
<section className="py-20 px-4 bg-gradient-to-br from-slate-900 to-blue-900 text-white">
|
||
<div className="max-w-5xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold mb-4">MY STORY</h2>
|
||
<p className="text-xl text-blue-200">왜 쟁승메이드를 시작했을까요?</p>
|
||
</div>
|
||
|
||
<div className="bg-white/10 backdrop-blur-md rounded-2xl p-8 md:p-12">
|
||
<div className="space-y-6 text-lg leading-relaxed">
|
||
<p className="text-blue-100">
|
||
<span className="text-2xl font-bold text-white">"</span>
|
||
대기업 개발자로 5년간 일하면서 수백 개의 프로젝트를 진행했습니다.
|
||
하지만 항상 아쉬웠던 점이 있었습니다.
|
||
</p>
|
||
|
||
<p className="text-blue-100">
|
||
중소기업과 소상공인 분들은 <span className="text-yellow-300 font-bold">합리적인 가격에 좋은 개발자를 만나기 어렵다</span>는 것.
|
||
대형 외주업체는 너무 비싸고, 작은 업체는 품질이 불안정했습니다.
|
||
</p>
|
||
|
||
<p className="text-blue-100">
|
||
반복 업무에 시달리며 <span className="text-yellow-300 font-bold">"이걸 자동화할 수 있는데..."</span> 하고 생각하시는 분들.
|
||
웹사이트가 필요한데 <span className="text-yellow-300 font-bold">수천만원 견적</span>에 포기하시는 분들.
|
||
</p>
|
||
|
||
<p className="text-white font-bold text-xl">
|
||
이런 분들을 위해 쟁승메이드를 시작했습니다.
|
||
</p>
|
||
|
||
<p className="text-blue-100">
|
||
대기업에서 쌓은 노하우와 품질은 그대로,
|
||
불필요한 비용은 없애고 <span className="text-emerald-300 font-bold">정말 필요한 가치</span>만 제공합니다.
|
||
</p>
|
||
|
||
<p className="text-blue-100">
|
||
단순한 외주가 아닌, <span className="text-emerald-300 font-bold">비즈니스 성장을 함께 고민하는 파트너</span>가 되고 싶습니다.
|
||
<span className="text-2xl font-bold text-white">"</span>
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mt-8 pt-8 border-t border-white/20">
|
||
<div className="flex items-center justify-between">
|
||
<div>
|
||
<div className="text-2xl font-bold">박재오 (쟁승메이드 대표)</div>
|
||
<div className="text-blue-200">대기업 출신 풀스택 개발자</div>
|
||
</div>
|
||
<div className="text-6xl">👨💻</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* HOW WE WORK - 이렇게 진행됩니다 */}
|
||
<section className="py-20 px-4 bg-gray-50">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">이렇게 진행됩니다</h2>
|
||
<p className="text-xl text-gray-600">투명하고 체계적인 프로세스로 프로젝트를 진행합니다</p>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
{/* Timeline line */}
|
||
<div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200"></div>
|
||
|
||
<div className="space-y-12">
|
||
{/* Step 1 */}
|
||
<div className="relative grid md:grid-cols-2 gap-8 items-center">
|
||
<div className="md:text-right">
|
||
<div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">
|
||
<div className="text-blue-700 font-bold mb-2">STEP 1</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">무료 상담 및 요구사항 분석</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
전화, 이메일, 화상회의를 통해 프로젝트 목표와 요구사항을 상세히 분석합니다.
|
||
현재 업무 프로세스를 파악하고 최적의 솔루션을 제안합니다.
|
||
</p>
|
||
<div className="text-sm text-blue-700 font-semibold">
|
||
⏱️ 소요 시간: 1~2일
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-start">
|
||
<div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-3xl font-bold shadow-lg z-10">
|
||
1
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 2 */}
|
||
<div className="relative grid md:grid-cols-2 gap-8 items-center">
|
||
<div className="md:col-start-2">
|
||
<div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">
|
||
<div className="text-blue-700 font-bold mb-2">STEP 2</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">견적서 및 제안서 전달</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
상세한 개발 범위, 일정, 비용이 포함된 견적서를 제공합니다.
|
||
기술 스택, 구현 방법, 기대 효과를 명확하게 설명합니다.
|
||
</p>
|
||
<div className="text-sm text-blue-700 font-semibold">
|
||
⏱️ 소요 시간: 1~3일
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-end md:col-start-1 md:row-start-1">
|
||
<div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-3xl font-bold shadow-lg z-10">
|
||
2
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 3 */}
|
||
<div className="relative grid md:grid-cols-2 gap-8 items-center">
|
||
<div className="md:text-right">
|
||
<div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">
|
||
<div className="text-blue-700 font-bold mb-2">STEP 3</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">계약 체결 및 계약금 입금</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
명확한 계약서를 작성하고, 계약금(30%)을 입금하시면 개발을 시작합니다.
|
||
모든 조건은 투명하게 문서화됩니다.
|
||
</p>
|
||
<div className="text-sm text-blue-700 font-semibold">
|
||
⏱️ 소요 시간: 1일
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-start">
|
||
<div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-3xl font-bold shadow-lg z-10">
|
||
3
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 4 */}
|
||
<div className="relative grid md:grid-cols-2 gap-8 items-center">
|
||
<div className="md:col-start-2">
|
||
<div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">
|
||
<div className="text-blue-700 font-bold mb-2">STEP 4</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">개발 진행 및 중간 검수</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
주간 진행상황을 공유하고, 주요 마일스톤마다 중간 검수를 진행합니다.
|
||
피드백을 즉시 반영하여 원하시는 결과물을 만들어갑니다.
|
||
</p>
|
||
<div className="text-sm text-blue-700 font-semibold">
|
||
⏱️ 소요 시간: 프로젝트에 따라 상이
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-end md:col-start-1 md:row-start-1">
|
||
<div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-3xl font-bold shadow-lg z-10">
|
||
4
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 5 */}
|
||
<div className="relative grid md:grid-cols-2 gap-8 items-center">
|
||
<div className="md:text-right">
|
||
<div className="bg-white p-6 rounded-xl shadow-lg hover:shadow-xl transition">
|
||
<div className="text-blue-700 font-bold mb-2">STEP 5</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">최종 납품 및 교육</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
완성된 솔루션을 납품하고, 사용 방법을 교육합니다.
|
||
소스코드, 문서, 설치 가이드 모두 제공합니다.
|
||
</p>
|
||
<div className="text-sm text-blue-700 font-semibold">
|
||
⏱️ 소요 시간: 1~2일
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-start">
|
||
<div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center text-3xl font-bold shadow-lg z-10">
|
||
5
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 6 */}
|
||
<div className="relative grid md:grid-cols-2 gap-8 items-center">
|
||
<div className="md:col-start-2">
|
||
<div className="bg-gradient-to-br from-emerald-500 to-emerald-700 p-6 rounded-xl shadow-lg hover:shadow-xl transition text-white">
|
||
<div className="text-emerald-200 font-bold mb-2">STEP 6</div>
|
||
<h3 className="text-2xl font-bold mb-3">애프터 서비스</h3>
|
||
<p className="mb-4">
|
||
1개월 무상 기술지원과 평생 유지보수가 가능합니다.
|
||
추가 기능이 필요하시면 언제든지 문의해주세요.
|
||
</p>
|
||
<div className="text-sm text-emerald-200 font-semibold">
|
||
⏱️ 소요 시간: 평생
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex justify-center md:justify-end md:col-start-1 md:row-start-1">
|
||
<div className="w-16 h-16 bg-emerald-600 text-white rounded-full flex items-center justify-center text-3xl font-bold shadow-lg z-10">
|
||
✓
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Services Section */}
|
||
<section id="services" className="py-20 px-4 bg-white">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">제공 서비스</h2>
|
||
<p className="text-xl text-gray-600">비즈니스 목표에 맞는 맞춤형 솔루션을 제공합니다</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{/* RPA 자동화 - Featured */}
|
||
<div className="relative bg-gradient-to-br from-blue-700 to-blue-900 rounded-2xl p-8 text-white shadow-2xl transform hover:scale-105 transition">
|
||
<div className="absolute -top-4 -right-4 bg-emerald-500 text-white px-4 py-2 rounded-full text-sm font-bold">
|
||
추천
|
||
</div>
|
||
<div className="text-5xl mb-4">🤖</div>
|
||
<h3 className="text-2xl font-bold mb-3">RPA 자동화</h3>
|
||
<p className="text-blue-100 mb-6">
|
||
반복적인 업무를 자동화하여 시간과 비용을 절감하세요
|
||
</p>
|
||
<div className="space-y-3 mb-6">
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 엑셀/데이터 자동화
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 웹 스크래핑
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 업무 프로세스 자동화
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 데이터 수집/처리
|
||
</div>
|
||
</div>
|
||
<div className="border-t border-blue-600 pt-4">
|
||
<div className="text-3xl font-bold mb-2">50만원~</div>
|
||
<div className="text-blue-200 text-sm">프로젝트 규모에 따라 상이</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 웹 개발 */}
|
||
<div className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-blue-500 hover:shadow-xl transition">
|
||
<div className="text-5xl mb-4">💻</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">웹 개발</h3>
|
||
<p className="text-gray-600 mb-6">
|
||
현대적이고 반응형인 웹사이트/웹앱을 구축합니다
|
||
</p>
|
||
<div className="space-y-3 mb-6 text-gray-700">
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 랜딩 페이지
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 기업 홈페이지
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 관리자 대시보드
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> E-Commerce
|
||
</div>
|
||
</div>
|
||
<div className="border-t border-gray-200 pt-4">
|
||
<div className="text-3xl font-bold text-gray-900 mb-2">200만원~</div>
|
||
<div className="text-gray-500 text-sm">기능에 따라 상이</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 앱 개발 */}
|
||
<div className="bg-white border-2 border-gray-200 rounded-2xl p-8 hover:border-blue-500 hover:shadow-xl transition">
|
||
<div className="text-5xl mb-4">📱</div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-3">앱 개발</h3>
|
||
<p className="text-gray-600 mb-6">
|
||
iOS/Android 크로스 플랫폼 앱을 개발합니다
|
||
</p>
|
||
<div className="space-y-3 mb-6 text-gray-700">
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 모바일 앱
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 하이브리드 앱
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 업무용 앱
|
||
</div>
|
||
<div className="flex items-center">
|
||
<span className="mr-2">✓</span> 커스텀 기능
|
||
</div>
|
||
</div>
|
||
<div className="border-t border-gray-200 pt-4">
|
||
<div className="text-3xl font-bold text-gray-900 mb-2">300만원~</div>
|
||
<div className="text-gray-500 text-sm">복잡도에 따라 상이</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Custom Solution */}
|
||
<div className="mt-12 bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl p-8 border border-gray-200">
|
||
<div className="flex flex-col md:flex-row items-center justify-between">
|
||
<div className="mb-4 md:mb-0">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-2">🔧 맞춤형 솔루션</h3>
|
||
<p className="text-gray-600">특별한 요구사항이 있으신가요? 무엇이든 상담해주세요.</p>
|
||
</div>
|
||
<a href="#contact" className="bg-gray-900 text-white px-8 py-3 rounded-lg font-semibold hover:bg-gray-800 transition whitespace-nowrap">
|
||
견적 문의
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 가격 안내 */}
|
||
<section id="pricing" className="py-20 px-4 bg-gradient-to-br from-blue-50 to-emerald-50">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">투명한 가격 안내</h2>
|
||
<p className="text-xl text-gray-600">숨겨진 비용 없이 명확한 가격을 제시합니다</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8 mb-12">
|
||
{/* RPA Basic */}
|
||
<div className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition">
|
||
<div className="text-center mb-6">
|
||
<div className="text-blue-700 font-bold mb-2">RPA BASIC</div>
|
||
<div className="text-5xl font-bold text-gray-900 mb-2">50만원~</div>
|
||
<div className="text-gray-600">간단한 자동화</div>
|
||
</div>
|
||
<ul className="space-y-3 mb-8">
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>엑셀 데이터 처리</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>파일 자동 정리</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>간단한 웹 스크래핑</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>1개월 무상 지원</span>
|
||
</li>
|
||
</ul>
|
||
<a href="#contact" className="block w-full bg-blue-700 text-white text-center py-3 rounded-lg font-semibold hover:bg-blue-800 transition">
|
||
문의하기
|
||
</a>
|
||
</div>
|
||
|
||
{/* RPA PRO */}
|
||
<div className="bg-gradient-to-br from-blue-700 to-blue-900 rounded-2xl p-8 shadow-2xl transform scale-105 relative">
|
||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2 bg-emerald-500 text-white px-6 py-2 rounded-full text-sm font-bold">
|
||
인기
|
||
</div>
|
||
<div className="text-center mb-6 text-white">
|
||
<div className="text-blue-200 font-bold mb-2">RPA PRO</div>
|
||
<div className="text-5xl font-bold mb-2">200만원~</div>
|
||
<div className="text-blue-200">중급 자동화</div>
|
||
</div>
|
||
<ul className="space-y-3 mb-8 text-white">
|
||
<li className="flex items-start">
|
||
<span className="text-emerald-400 mr-2">✓</span>
|
||
<span>복잡한 업무 프로세스 자동화</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-emerald-400 mr-2">✓</span>
|
||
<span>API 연동</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-emerald-400 mr-2">✓</span>
|
||
<span>데이터 분석 및 리포트</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-emerald-400 mr-2">✓</span>
|
||
<span>GUI 프로그램 개발</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-emerald-400 mr-2">✓</span>
|
||
<span>3개월 무상 지원</span>
|
||
</li>
|
||
</ul>
|
||
<a href="#contact" className="block w-full bg-white text-blue-900 text-center py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||
문의하기
|
||
</a>
|
||
</div>
|
||
|
||
{/* RPA ENTERPRISE */}
|
||
<div className="bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition">
|
||
<div className="text-center mb-6">
|
||
<div className="text-blue-700 font-bold mb-2">RPA ENTERPRISE</div>
|
||
<div className="text-5xl font-bold text-gray-900 mb-2">500만원~</div>
|
||
<div className="text-gray-600">대규모 자동화</div>
|
||
</div>
|
||
<ul className="space-y-3 mb-8">
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>전사 업무 프로세스 자동화</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>기존 시스템 연동</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>관리자 대시보드</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>DB 설계 및 구축</span>
|
||
</li>
|
||
<li className="flex items-start">
|
||
<span className="text-green-500 mr-2">✓</span>
|
||
<span>6개월 무상 지원</span>
|
||
</li>
|
||
</ul>
|
||
<a href="#contact" className="block w-full bg-blue-700 text-white text-center py-3 rounded-lg font-semibold hover:bg-blue-800 transition">
|
||
문의하기
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 지급 조건 */}
|
||
<div className="bg-white rounded-2xl p-8 shadow-lg">
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">💳 지급 조건</h3>
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
<div className="text-center p-6 bg-blue-50 rounded-xl">
|
||
<div className="text-4xl font-bold text-blue-700 mb-2">30%</div>
|
||
<div className="font-semibold text-gray-900 mb-2">계약금</div>
|
||
<div className="text-sm text-gray-600">계약 체결 시</div>
|
||
</div>
|
||
<div className="text-center p-6 bg-blue-50 rounded-xl">
|
||
<div className="text-4xl font-bold text-blue-700 mb-2">40%</div>
|
||
<div className="font-semibold text-gray-900 mb-2">중도금</div>
|
||
<div className="text-sm text-gray-600">개발 완료 시</div>
|
||
</div>
|
||
<div className="text-center p-6 bg-emerald-50 rounded-xl">
|
||
<div className="text-4xl font-bold text-emerald-700 mb-2">30%</div>
|
||
<div className="font-semibold text-gray-900 mb-2">잔금</div>
|
||
<div className="text-sm text-gray-600">최종 인수 시</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 자동 견적 */}
|
||
<section id="quote" className="py-20 px-4 bg-white">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">💰 자동 견적 계산기</h2>
|
||
<p className="text-xl text-gray-600">프로젝트 유형과 규모를 선택하면 예상 견적을 확인할 수 있습니다</p>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-br from-blue-50 to-emerald-50 rounded-2xl p-8 shadow-lg">
|
||
<div className="bg-white rounded-xl p-6 mb-6">
|
||
<label className="block text-lg font-bold text-gray-900 mb-3">프로젝트 유형</label>
|
||
<select className="w-full p-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none">
|
||
<option>RPA 자동화 - 엑셀/데이터 처리</option>
|
||
<option>RPA 자동화 - 웹 스크래핑</option>
|
||
<option>RPA 자동화 - 업무 프로세스 전체</option>
|
||
<option>웹 개발 - 랜딩 페이지</option>
|
||
<option>웹 개발 - 기업 홈페이지</option>
|
||
<option>웹 개발 - 웹 서비스/플랫폼</option>
|
||
<option>앱 개발 - 간단한 앱</option>
|
||
<option>앱 개발 - 일반 앱</option>
|
||
<option>앱 개발 - 복잡한 앱</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-xl p-6 mb-6">
|
||
<label className="block text-lg font-bold text-gray-900 mb-3">프로젝트 규모</label>
|
||
<div className="space-y-3">
|
||
<label className="flex items-center p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 cursor-pointer">
|
||
<input type="radio" name="scale" className="mr-3" />
|
||
<div>
|
||
<div className="font-semibold">소규모 (1~2주)</div>
|
||
<div className="text-sm text-gray-600">기본 기능만 포함</div>
|
||
</div>
|
||
</label>
|
||
<label className="flex items-center p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 cursor-pointer">
|
||
<input type="radio" name="scale" className="mr-3" defaultChecked />
|
||
<div>
|
||
<div className="font-semibold">중규모 (3~6주)</div>
|
||
<div className="text-sm text-gray-600">추가 기능 및 커스터마이징</div>
|
||
</div>
|
||
</label>
|
||
<label className="flex items-center p-4 border-2 border-gray-300 rounded-lg hover:border-blue-500 cursor-pointer">
|
||
<input type="radio" name="scale" className="mr-3" />
|
||
<div>
|
||
<div className="font-semibold">대규모 (2개월 이상)</div>
|
||
<div className="text-sm text-gray-600">복잡한 기능 및 시스템 연동</div>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-r from-blue-600 to-blue-800 text-white rounded-xl p-8 text-center">
|
||
<div className="text-lg mb-2">예상 견적</div>
|
||
<div className="text-5xl font-bold mb-4">200만원 ~ 300만원</div>
|
||
<div className="text-blue-200 mb-6">부가세 포함 / 정확한 견적은 상담 후 제공</div>
|
||
<a href="#contact" className="inline-block bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
|
||
정확한 견적 받기
|
||
</a>
|
||
</div>
|
||
|
||
<p className="text-center text-gray-600 mt-6 text-sm">
|
||
* 실제 견적은 요구사항에 따라 달라질 수 있습니다
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 기술 소개 */}
|
||
<section id="tech" className="py-20 px-4 bg-slate-900 text-white">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold mb-4">최신 기술 스택</h2>
|
||
<p className="text-xl text-gray-300">검증된 기술로 안정적이고 확장 가능한 솔루션을 제공합니다</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12">
|
||
<div className="bg-slate-800 rounded-2xl p-8">
|
||
<h3 className="text-2xl font-bold mb-6 flex items-center">
|
||
<span className="text-3xl mr-3">🤖</span> RPA & Automation
|
||
</h3>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🐍</div>
|
||
<div className="font-bold mb-1">Python</div>
|
||
<div className="text-sm text-gray-400">범용 자동화</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">📊</div>
|
||
<div className="font-bold mb-1">Pandas</div>
|
||
<div className="text-sm text-gray-400">데이터 처리</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🌐</div>
|
||
<div className="font-bold mb-1">Selenium</div>
|
||
<div className="text-sm text-gray-400">웹 자동화</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🎭</div>
|
||
<div className="font-bold mb-1">Playwright</div>
|
||
<div className="text-sm text-gray-400">브라우저 제어</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-slate-800 rounded-2xl p-8">
|
||
<h3 className="text-2xl font-bold mb-6 flex items-center">
|
||
<span className="text-3xl mr-3">💻</span> Web Development
|
||
</h3>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">⚛️</div>
|
||
<div className="font-bold mb-1">React</div>
|
||
<div className="text-sm text-gray-400">UI 라이브러리</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">▲</div>
|
||
<div className="font-bold mb-1">Next.js</div>
|
||
<div className="text-sm text-gray-400">풀스택 프레임워크</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">📘</div>
|
||
<div className="font-bold mb-1">TypeScript</div>
|
||
<div className="text-sm text-gray-400">타입 안정성</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🎨</div>
|
||
<div className="font-bold mb-1">Tailwind CSS</div>
|
||
<div className="text-sm text-gray-400">스타일링</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-slate-800 rounded-2xl p-8">
|
||
<h3 className="text-2xl font-bold mb-6 flex items-center">
|
||
<span className="text-3xl mr-3">🔧</span> Backend & API
|
||
</h3>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🟢</div>
|
||
<div className="font-bold mb-1">Node.js</div>
|
||
<div className="text-sm text-gray-400">서버 사이드</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">☕</div>
|
||
<div className="font-bold mb-1">Java/Spring</div>
|
||
<div className="text-sm text-gray-400">엔터프라이즈</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🔥</div>
|
||
<div className="font-bold mb-1">FastAPI</div>
|
||
<div className="text-sm text-gray-400">고성능 API</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🗄️</div>
|
||
<div className="font-bold mb-1">PostgreSQL</div>
|
||
<div className="text-sm text-gray-400">관계형 DB</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-slate-800 rounded-2xl p-8">
|
||
<h3 className="text-2xl font-bold mb-6 flex items-center">
|
||
<span className="text-3xl mr-3">☁️</span> Cloud & DevOps
|
||
</h3>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🚀</div>
|
||
<div className="font-bold mb-1">Vercel</div>
|
||
<div className="text-sm text-gray-400">배포 플랫폼</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">☁️</div>
|
||
<div className="font-bold mb-1">AWS</div>
|
||
<div className="text-sm text-gray-400">클라우드 서비스</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">🐳</div>
|
||
<div className="font-bold mb-1">Docker</div>
|
||
<div className="text-sm text-gray-400">컨테이너화</div>
|
||
</div>
|
||
<div className="bg-slate-700 p-4 rounded-lg hover:bg-slate-600 transition">
|
||
<div className="text-2xl mb-2">📦</div>
|
||
<div className="font-bold mb-1">Git</div>
|
||
<div className="text-sm text-gray-400">버전 관리</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 고객 리뷰 */}
|
||
<section className="py-20 px-4 bg-white">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">고객 후기</h2>
|
||
<p className="text-xl text-gray-600">실제 고객들의 생생한 경험담을 확인하세요</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
<div className="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
|
||
<div className="flex items-center mb-4">
|
||
<div className="text-yellow-500 text-xl">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
<p className="text-gray-700 mb-4 leading-relaxed">
|
||
"엑셀 파일 50개를 매월 수작업으로 합치던 업무를 자동화했습니다.
|
||
5시간 걸리던 일이 10초로 단축됐어요. 정말 감사합니다!"
|
||
</p>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
|
||
김
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-gray-900">김철수 과장</div>
|
||
<div className="text-sm text-gray-600">제조업 / RPA 자동화</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
|
||
<div className="flex items-center mb-4">
|
||
<div className="text-yellow-500 text-xl">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
<p className="text-gray-700 mb-4 leading-relaxed">
|
||
"홈페이지 제작을 맡겼는데 대형 업체는 너무 비싸고...
|
||
쟁승메이드는 퀄리티도 좋고 가격도 합리적이었어요. 완전 만족합니다!"
|
||
</p>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
|
||
이
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-gray-900">이영희 대표</div>
|
||
<div className="text-sm text-gray-600">온라인 쇼핑몰 / 웹 개발</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
|
||
<div className="flex items-center mb-4">
|
||
<div className="text-yellow-500 text-xl">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
<p className="text-gray-700 mb-4 leading-relaxed">
|
||
"개발 과정 내내 소통이 빠르고 명확했습니다.
|
||
원하는 걸 정확히 이해하고 구현해주셔서 수정 사항이 거의 없었어요."
|
||
</p>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
|
||
박
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-gray-900">박민수 팀장</div>
|
||
<div className="text-sm text-gray-600">IT 스타트업 / 앱 개발</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
|
||
<div className="flex items-center mb-4">
|
||
<div className="text-yellow-500 text-xl">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
<p className="text-gray-700 mb-4 leading-relaxed">
|
||
"Gmail 자동 분류 프로그램 덕분에 업무 효율이 150% 증가했습니다.
|
||
이메일 정리하는 시간을 다른 업무에 쓸 수 있게 됐어요."
|
||
</p>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
|
||
최
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-gray-900">최지원 실장</div>
|
||
<div className="text-sm text-gray-600">컨설팅 / RPA 자동화</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
|
||
<div className="flex items-center mb-4">
|
||
<div className="text-yellow-500 text-xl">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
<p className="text-gray-700 mb-4 leading-relaxed">
|
||
"프로젝트 완료 후에도 유지보수가 잘 되고 있습니다.
|
||
작은 수정 사항도 24시간 이내에 바로 대응해주셔서 믿음이 갑니다."
|
||
</p>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
|
||
정
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-gray-900">정수진 이사</div>
|
||
<div className="text-sm text-gray-600">유통업 / 웹 개발</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition">
|
||
<div className="flex items-center mb-4">
|
||
<div className="text-yellow-500 text-xl">⭐⭐⭐⭐⭐</div>
|
||
</div>
|
||
<p className="text-gray-700 mb-4 leading-relaxed">
|
||
"기술을 잘 모르는 저에게도 쉽게 설명해주시고,
|
||
최적의 솔루션을 제안해주셨어요. 전문가의 컨설팅을 받는 느낌이었습니다."
|
||
</p>
|
||
<div className="flex items-center">
|
||
<div className="w-12 h-12 bg-purple-600 rounded-full flex items-center justify-center text-white font-bold mr-3">
|
||
강
|
||
</div>
|
||
<div>
|
||
<div className="font-bold text-gray-900">강태훈 대표</div>
|
||
<div className="text-sm text-gray-600">소호 사업자 / RPA 자동화</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-12 bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl p-8 text-white text-center">
|
||
<div className="text-5xl font-bold mb-2">98%</div>
|
||
<div className="text-xl mb-4">고객 만족도</div>
|
||
<div className="text-blue-200">100개 이상의 프로젝트를 성공적으로 완수했습니다</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* 멈추지 않는 진화 */}
|
||
<section className="py-20 px-4 bg-gradient-to-br from-purple-900 to-blue-900 text-white">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold mb-4">멈추지 않는 진화</h2>
|
||
<p className="text-xl text-purple-200">지속적인 학습과 개선으로 최고의 솔루션을 제공합니다</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6 hover:bg-white/20 transition">
|
||
<div className="text-4xl mb-4">📚</div>
|
||
<h3 className="text-xl font-bold mb-3">최신 기술 학습</h3>
|
||
<p className="text-purple-200">
|
||
매월 새로운 기술과 프레임워크를 학습하여
|
||
최신 트렌드를 반영한 솔루션을 제공합니다.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6 hover:bg-white/20 transition">
|
||
<div className="text-4xl mb-4">🔄</div>
|
||
<h3 className="text-xl font-bold mb-3">프로세스 개선</h3>
|
||
<p className="text-purple-200">
|
||
프로젝트마다 회고를 진행하고,
|
||
더 나은 개발 프로세스를 위해 지속적으로 개선합니다.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6 hover:bg-white/20 transition">
|
||
<div className="text-4xl mb-4">🎯</div>
|
||
<h3 className="text-xl font-bold mb-3">고객 피드백 반영</h3>
|
||
<p className="text-purple-200">
|
||
고객의 피드백을 적극적으로 수렴하여
|
||
서비스 품질을 지속적으로 향상시킵니다.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6 hover:bg-white/20 transition">
|
||
<div className="text-4xl mb-4">🚀</div>
|
||
<h3 className="text-xl font-bold mb-3">자동화 도구 개발</h3>
|
||
<p className="text-purple-200">
|
||
개발 효율을 높이는 자체 도구를 개발하여
|
||
더 빠르고 정확한 납품을 실현합니다.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-12 grid md:grid-cols-3 gap-6 text-center">
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
|
||
<div className="text-3xl font-bold mb-2">500+</div>
|
||
<div className="text-purple-200">시간의 학습 시간 (연간)</div>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
|
||
<div className="text-3xl font-bold mb-2">20+</div>
|
||
<div className="text-purple-200">기술 스택 보유</div>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
|
||
<div className="text-3xl font-bold mb-2">100%</div>
|
||
<div className="text-purple-200">프로젝트 완수율</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Portfolio Section - Enhanced */}
|
||
<section id="portfolio" className="py-20 px-4 bg-gray-50">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">프로젝트 포트폴리오</h2>
|
||
<p className="text-xl text-gray-600">실제 구현한 프로젝트를 확인해보세요</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
{/* Portfolio Item 1 - Excel Merger RPA */}
|
||
<a
|
||
href="https://gitea.gahusb.synology.me/gahusb/excel-merge-rpa"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all transform hover:scale-105 block"
|
||
>
|
||
<div className="bg-gradient-to-br from-blue-500 to-blue-700 h-48 flex items-center justify-center">
|
||
<div className="text-white text-6xl">📊</div>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="text-sm text-blue-700 font-semibold mb-2">RPA 자동화</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-2">엑셀 데이터 통합 자동화</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
여러 엑셀 파일을 클릭 한 번으로 자동 통합. 5시간 → 10초로 단축
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 mb-3">
|
||
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Python</span>
|
||
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Pandas</span>
|
||
<span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-sm">Openpyxl</span>
|
||
</div>
|
||
<div className="text-blue-600 text-sm font-semibold flex items-center">
|
||
<span className="mr-1">→</span> GitHub에서 보기
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Portfolio Item 2 - Gmail Automation */}
|
||
<a
|
||
href="https://gitea.gahusb.synology.me/gahusb/gmail-automation-rpa"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all transform hover:scale-105 block"
|
||
>
|
||
<div className="bg-gradient-to-br from-purple-500 to-purple-700 h-48 flex items-center justify-center">
|
||
<div className="text-white text-6xl">📧</div>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="text-sm text-purple-700 font-semibold mb-2">RPA 자동화</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-2">Gmail 이메일 자동화</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
Gmail API로 이메일 자동 분류/답장. 업무 효율 150% 증가
|
||
</p>
|
||
<div className="flex flex-wrap gap-2 mb-3">
|
||
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Python</span>
|
||
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">Gmail API</span>
|
||
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">OAuth</span>
|
||
</div>
|
||
<div className="text-purple-600 text-sm font-semibold flex items-center">
|
||
<span className="mr-1">→</span> GitHub에서 보기
|
||
</div>
|
||
</div>
|
||
</a>
|
||
|
||
{/* Portfolio Item 3 */}
|
||
<div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all transform hover:scale-105">
|
||
<div className="bg-gradient-to-br from-emerald-500 to-emerald-700 h-48 flex items-center justify-center">
|
||
<div className="text-white text-6xl">🌐</div>
|
||
</div>
|
||
<div className="p-6">
|
||
<div className="text-sm text-emerald-700 font-semibold mb-2">웹 개발</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-2">기업 홈페이지 제작</h3>
|
||
<p className="text-gray-600 mb-4">
|
||
반응형 디자인과 SEO 최적화로 방문자 200% 증가
|
||
</p>
|
||
<div className="flex flex-wrap gap-2">
|
||
<span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Next.js</span>
|
||
<span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">React</span>
|
||
<span className="px-3 py-1 bg-emerald-100 text-emerald-700 rounded-full text-sm">Tailwind</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="text-center mt-12">
|
||
<p className="text-gray-600 mb-4">더 많은 프로젝트는 GitHub에서 확인하세요</p>
|
||
<a href="#contact" className="inline-block border-2 border-blue-700 text-blue-700 px-8 py-3 rounded-lg font-semibold hover:bg-blue-50 transition">
|
||
전체 포트폴리오 보기
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* AFTER SERVICE */}
|
||
<section className="py-20 px-4 bg-white">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">완벽한 애프터 서비스</h2>
|
||
<p className="text-xl text-gray-600">프로젝트 완료 후에도 책임지고 관리합니다</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||
<div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-8">
|
||
<div className="flex items-start mb-4">
|
||
<div className="text-4xl mr-4">🎁</div>
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-2">무상 기술 지원</h3>
|
||
<p className="text-gray-700 mb-4">
|
||
납품 후 <span className="text-blue-700 font-bold">1개월간 무상</span>으로 기술 지원을 제공합니다.
|
||
</p>
|
||
<ul className="space-y-2 text-gray-700">
|
||
<li className="flex items-center">
|
||
<span className="text-blue-700 mr-2">✓</span>
|
||
프로그램 사용법 안내
|
||
</li>
|
||
<li className="flex items-center">
|
||
<span className="text-blue-700 mr-2">✓</span>
|
||
오류 및 버그 수정
|
||
</li>
|
||
<li className="flex items-center">
|
||
<span className="text-blue-700 mr-2">✓</span>
|
||
간단한 설정 변경
|
||
</li>
|
||
<li className="flex items-center">
|
||
<span className="text-blue-700 mr-2">✓</span>
|
||
24시간 이내 응답
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-2xl p-8">
|
||
<div className="flex items-start mb-4">
|
||
<div className="text-4xl mr-4">🔧</div>
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-2">평생 유지보수</h3>
|
||
<p className="text-gray-700 mb-4">
|
||
무상 기간 종료 후에도 <span className="text-emerald-700 font-bold">평생 유지보수</span>가 가능합니다.
|
||
</p>
|
||
<ul className="space-y-2 text-gray-700">
|
||
<li className="flex items-center">
|
||
<span className="text-emerald-700 mr-2">✓</span>
|
||
지속적인 기술 지원
|
||
</li>
|
||
<li className="flex items-center">
|
||
<span className="text-emerald-700 mr-2">✓</span>
|
||
기능 추가 개발 (유상)
|
||
</li>
|
||
<li className="flex items-center">
|
||
<span className="text-emerald-700 mr-2">✓</span>
|
||
버전 업그레이드
|
||
</li>
|
||
<li className="flex items-center">
|
||
<span className="text-emerald-700 mr-2">✓</span>
|
||
합리적인 유지보수 비용
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-gradient-to-r from-gray-900 to-blue-900 rounded-2xl p-8 text-white">
|
||
<div className="text-center">
|
||
<h3 className="text-3xl font-bold mb-4">🛡️ 안심 보증</h3>
|
||
<p className="text-xl text-gray-300 mb-8">
|
||
프로젝트 완료 후에도 책임지고 관리합니다
|
||
</p>
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
|
||
<div className="text-4xl mb-3">📞</div>
|
||
<div className="font-bold text-lg mb-2">빠른 응답</div>
|
||
<div className="text-gray-300">문의사항 24시간 이내 응답</div>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
|
||
<div className="text-4xl mb-3">🔒</div>
|
||
<div className="font-bold text-lg mb-2">소스코드 제공</div>
|
||
<div className="text-gray-300">모든 소스코드와 문서 제공</div>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
|
||
<div className="text-4xl mb-3">🤝</div>
|
||
<div className="font-bold text-lg mb-2">장기 파트너십</div>
|
||
<div className="text-gray-300">비즈니스 성장을 함께 합니다</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ */}
|
||
<section id="faq" className="py-20 px-4 bg-gray-50">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">자주 묻는 질문</h2>
|
||
<p className="text-xl text-gray-600">궁금하신 점을 빠르게 확인하세요</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>💰 프로젝트 비용은 어떻게 결정되나요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
프로젝트 규모, 기능 복잡도, 개발 기간을 종합적으로 고려하여 견적을 산정합니다.
|
||
무료 상담을 통해 요구사항을 분석한 후, 상세한 견적서를 제공해드립니다.
|
||
대형 업체 대비 30~50% 저렴하면서도 동일한 품질을 보장합니다.
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>⏱️ 프로젝트 기간은 얼마나 걸리나요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
<ul className="space-y-2">
|
||
<li>• <strong>간단한 RPA 자동화:</strong> 1~2주</li>
|
||
<li>• <strong>중급 RPA/웹 개발:</strong> 3~6주</li>
|
||
<li>• <strong>복잡한 프로젝트:</strong> 2~3개월</li>
|
||
</ul>
|
||
정확한 일정은 요구사항 분석 후 견적서에 명시됩니다.
|
||
긴급한 경우 특급 개발도 가능합니다 (추가 비용 발생).
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>🔧 기술을 잘 몰라도 상담 가능한가요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
네, 전혀 문제없습니다! 기술 용어를 사용하지 않고,
|
||
비즈니스 목표와 현재 불편한 점만 말씀해주시면 됩니다.
|
||
제가 요구사항을 정리하고 최적의 솔루션을 제안해드립니다.
|
||
"엑셀 파일 합치는 게 너무 번거로워요" 정도만 말씀하셔도 충분합니다.
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>📝 계약 과정은 어떻게 되나요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
<ol className="space-y-2 list-decimal list-inside">
|
||
<li>무료 상담 및 요구사항 분석</li>
|
||
<li>견적서 및 제안서 제공</li>
|
||
<li>계약서 작성 (명확하고 공정한 조건)</li>
|
||
<li>계약금(30%) 입금</li>
|
||
<li>개발 시작</li>
|
||
</ol>
|
||
모든 조건은 계약서에 명시되며, 불리한 조항은 없습니다.
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>💳 지급은 어떻게 하나요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
<strong>3회 분할 납부</strong>가 기본입니다:
|
||
<ul className="mt-2 space-y-1">
|
||
<li>• 계약금 30% - 계약 체결 시</li>
|
||
<li>• 중도금 40% - 개발 완료 시 (검수 전)</li>
|
||
<li>• 잔금 30% - 최종 인수 및 검수 완료 시</li>
|
||
</ul>
|
||
소규모 프로젝트는 2회 분할(50% + 50%)도 가능합니다.
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>🛠️ 완성 후 유지보수는 어떻게 되나요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
<ul className="space-y-2">
|
||
<li>• <strong>1개월 무상 기술지원:</strong> 버그 수정, 사용법 안내</li>
|
||
<li>• <strong>평생 유지보수 가능:</strong> 유상으로 지속적인 관리 가능</li>
|
||
<li>• <strong>합리적인 비용:</strong> 월 계약금의 5~10%</li>
|
||
<li>• <strong>빠른 대응:</strong> 24시간 이내 응답 보장</li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>📂 소스코드를 받을 수 있나요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
네, <strong>모든 소스코드와 문서를 제공</strong>합니다.
|
||
계약 완료 후 GitHub/Gitea 저장소로 전달되며,
|
||
소스코드에 대한 소유권은 고객에게 이전됩니다.
|
||
필요하면 다른 개발자에게 인계도 가능합니다.
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>🔒 보안은 어떻게 보장되나요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
<ul className="space-y-2">
|
||
<li>• <strong>비밀 유지 계약(NDA):</strong> 요청 시 체결 가능</li>
|
||
<li>• <strong>데이터 암호화:</strong> 민감한 정보는 암호화 처리</li>
|
||
<li>• <strong>접근 권한 관리:</strong> 필요한 권한만 최소로 요청</li>
|
||
<li>• <strong>개인정보보호:</strong> 프로젝트 완료 후 데이터 삭제</li>
|
||
</ul>
|
||
고객의 비즈니스 기밀은 절대 보호됩니다.
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>🌍 원격으로도 가능한가요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
네, <strong>전국 어디서나 가능</strong>합니다.
|
||
화상회의(Zoom, Google Meet), 이메일, 전화로 소통하며,
|
||
필요 시 방문 미팅도 가능합니다 (수도권 기준).
|
||
실제로 지방 고객도 많이 계십니다.
|
||
</div>
|
||
</details>
|
||
|
||
<details className="bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition cursor-pointer group">
|
||
<summary className="text-lg font-bold text-gray-900 flex justify-between items-center">
|
||
<span>❓ 프로젝트 중간에 요구사항이 변경되면요?</span>
|
||
<span className="text-blue-700 group-open:rotate-180 transition-transform">▼</span>
|
||
</summary>
|
||
<div className="mt-4 text-gray-700 leading-relaxed">
|
||
<strong>합리적인 범위 내 수정은 무상</strong>으로 반영합니다.
|
||
단, 프로젝트 범위를 크게 벗어나는 변경 사항은
|
||
추가 견적을 협의 후 진행합니다.
|
||
중간 검수 단계에서 피드백을 받아 조기에 조정하므로,
|
||
큰 변경이 발생하는 경우는 거의 없습니다.
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div className="mt-12 text-center bg-white rounded-2xl p-8 shadow-md">
|
||
<p className="text-gray-700 mb-4 text-lg">
|
||
더 궁금하신 점이 있으신가요?
|
||
</p>
|
||
<a href="#contact" className="inline-block bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-800 transition">
|
||
직접 문의하기
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Section */}
|
||
<section id="contact" className="py-20 px-4 bg-gradient-to-br from-blue-50 to-emerald-50">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">프로젝트 문의</h2>
|
||
<p className="text-xl text-gray-600">무엇이든 편하게 상담해주세요. 24시간 이내 답변드립니다.</p>
|
||
</div>
|
||
|
||
<ContactForm />
|
||
|
||
<div className="mt-12 grid md:grid-cols-3 gap-6 text-center">
|
||
<div className="bg-white rounded-xl p-6 shadow-md">
|
||
<div className="text-4xl mb-3">📧</div>
|
||
<div className="font-bold text-gray-900 mb-1">이메일</div>
|
||
<div className="text-gray-600">bgg8988@gmail.com</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl p-6 shadow-md">
|
||
<div className="text-4xl mb-3">📞</div>
|
||
<div className="font-bold text-gray-900 mb-1">전화</div>
|
||
<div className="text-gray-600">010-3907-1392</div>
|
||
</div>
|
||
<div className="bg-white rounded-xl p-6 shadow-md">
|
||
<div className="text-4xl mb-3">⏰</div>
|
||
<div className="font-bold text-gray-900 mb-1">응답 시간</div>
|
||
<div className="text-gray-600">24시간 이내</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer - Enhanced */}
|
||
<footer className="bg-slate-900 text-white py-12 px-4">
|
||
<div className="max-w-7xl mx-auto">
|
||
<div className="grid md:grid-cols-4 gap-8 mb-8">
|
||
<div>
|
||
<div className="text-2xl font-bold mb-4">쟁승메이드</div>
|
||
<p className="text-gray-400">비즈니스 성장을 위한<br />전문 개발 솔루션</p>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold mb-4">서비스</h4>
|
||
<ul className="space-y-2 text-gray-400">
|
||
<li><a href="#services" className="hover:text-white transition">RPA 자동화</a></li>
|
||
<li><a href="#services" className="hover:text-white transition">웹 개발</a></li>
|
||
<li><a href="#services" className="hover:text-white transition">앱 개발</a></li>
|
||
<li><a href="#pricing" className="hover:text-white transition">가격 안내</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold mb-4">정보</h4>
|
||
<ul className="space-y-2 text-gray-400">
|
||
<li><a href="#portfolio" className="hover:text-white transition">포트폴리오</a></li>
|
||
<li><a href="#tech" className="hover:text-white transition">기술 스택</a></li>
|
||
<li><a href="#faq" className="hover:text-white transition">FAQ</a></li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h4 className="font-bold mb-4">문의</h4>
|
||
<ul className="space-y-2 text-gray-400">
|
||
<li>bgg8988@gmail.com</li>
|
||
<li>010-3907-1392</li>
|
||
<li>평일 09:00~18:00</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div className="border-t border-gray-800 pt-8 text-center text-gray-400">
|
||
<p>© 2025 쟁승메이드 (JaengSeung Made). All rights reserved.</p>
|
||
<p className="mt-2 text-sm">대기업 출신 개발자가 제공하는 전문 비즈니스 솔루션</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
);
|
||
}
|