gahusb
e05def83d6
- Resend API 통합 (이메일 발송) - ContactForm 클라이언트 컴포넌트 생성 - API Route (/api/contact) 구현 - 입력 검증 및 에러 처리 - 성공/실패 메시지 표시 - 환경변수 설정 (.env.local, .env.example) - 배포 가이드 작성 (DEPLOYMENT.md) - Resend 설정 방법 - Vercel 배포 가이드 - 가비아 도메인 연결 방법 - 트러블슈팅 가이드 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
379 lines
20 KiB
TypeScript
379 lines
20 KiB
TypeScript
import ContactForm from './components/ContactForm';
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Navigation */}
|
|
<nav className="fixed top-0 w-full bg-white/90 backdrop-blur-sm z-50 border-b border-gray-200">
|
|
<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 md:flex space-x-8">
|
|
<a href="#services" className="text-gray-700 hover:text-blue-700 transition">서비스</a>
|
|
<a href="#portfolio" className="text-gray-700 hover:text-blue-700 transition">포트폴리오</a>
|
|
<a href="#about" className="text-gray-700 hover:text-blue-700 transition">소개</a>
|
|
<a href="#contact" className="bg-blue-700 text-white px-6 py-2 rounded-lg hover:bg-blue-800 transition">문의하기</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<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">
|
|
🤖 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">
|
|
무료 상담 신청
|
|
</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>
|
|
<div className="text-4xl font-bold text-blue-700">100+</div>
|
|
<div className="text-gray-600 mt-2">프로젝트 경험</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-bold text-blue-700">24h</div>
|
|
<div className="text-gray-600 mt-2">평균 응답 시간</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-bold text-blue-700">98%</div>
|
|
<div className="text-gray-600 mt-2">고객 만족도</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-4xl font-bold text-blue-700">5년+</div>
|
|
<div className="text-gray-600 mt-2">개발 경력</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>
|
|
|
|
{/* Portfolio Section */}
|
|
<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 */}
|
|
<div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
|
|
<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">
|
|
<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>
|
|
</div>
|
|
|
|
{/* Portfolio Item 2 */}
|
|
<div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
|
|
<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>
|
|
|
|
{/* Portfolio Item 3 */}
|
|
<div className="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition">
|
|
<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">웹 스크래핑 봇</h3>
|
|
<p className="text-gray-600 mb-4">
|
|
실시간 데이터 수집 및 분석 자동화 시스템 구축
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
<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">Selenium</span>
|
|
<span className="px-3 py-1 bg-purple-100 text-purple-700 rounded-full text-sm">BeautifulSoup</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>
|
|
|
|
{/* About Section */}
|
|
<section id="about" className="py-20 px-4 bg-slate-900 text-white">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="grid md:grid-cols-2 gap-12 items-center">
|
|
<div>
|
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">신뢰할 수 있는<br />전문 개발자</h2>
|
|
<p className="text-xl text-gray-300 mb-8 leading-relaxed">
|
|
대기업에서 쌓은 5년 이상의 실무 경험을 바탕으로,
|
|
고품질의 비즈니스 솔루션을 제공합니다.
|
|
단순한 개발이 아닌, 비즈니스 성장을 위한 파트너가 되겠습니다.
|
|
</p>
|
|
<div className="space-y-4">
|
|
<div className="flex items-start">
|
|
<div className="text-2xl mr-4">🏢</div>
|
|
<div>
|
|
<div className="font-bold text-lg">대기업 개발자 출신</div>
|
|
<div className="text-gray-400">검증된 개발 역량과 프로젝트 관리 능력</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="text-2xl mr-4">⚡</div>
|
|
<div>
|
|
<div className="font-bold text-lg">빠른 커뮤니케이션</div>
|
|
<div className="text-gray-400">평균 24시간 이내 응답, 실시간 진행상황 공유</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start">
|
|
<div className="text-2xl mr-4">🎯</div>
|
|
<div>
|
|
<div className="font-bold text-lg">결과 중심</div>
|
|
<div className="text-gray-400">고객의 ROI를 최우선으로 생각하는 솔루션 제공</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-800 rounded-2xl p-8">
|
|
<h3 className="text-2xl font-bold mb-6">기술 스택</h3>
|
|
<div className="space-y-6">
|
|
<div>
|
|
<div className="text-sm text-gray-400 mb-2">Backend</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">Python</span>
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">Node.js</span>
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">Java</span>
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">C/C++/C#</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-gray-400 mb-2">Frontend</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">React</span>
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">Next.js</span>
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">TypeScript</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-gray-400 mb-2">RPA & Automation</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="px-4 py-2 bg-emerald-900 rounded-lg">Selenium</span>
|
|
<span className="px-4 py-2 bg-emerald-900 rounded-lg">Pandas</span>
|
|
<span className="px-4 py-2 bg-emerald-900 rounded-lg">Playwright</span>
|
|
<span className="px-4 py-2 bg-emerald-900 rounded-lg">RPA</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm text-gray-400 mb-2">Database & Cloud</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">PostgreSQL</span>
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">MongoDB</span>
|
|
<span className="px-4 py-2 bg-blue-900 rounded-lg">AWS</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<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>
|
|
</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="#about" 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>bgg8988@gmail.com</li>
|
|
<li>010-3907-1392</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-gray-800 pt-8 text-center text-gray-400">
|
|
<p>© 2025 쟁승메이드. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|