491 lines
27 KiB
Plaintext
491 lines
27 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>연락처 - SmartSolTech</title>
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="SmartSolTech에 연락하세요. 프로젝트 문의, 상담 요청, 파트너십 제안 등 언제든지 연락 주시면 빠르게 답변드리겠습니다.">
|
|
<meta name="keywords" content="연락처, 문의, 상담, 프로젝트, SmartSolTech, 컨설팅">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:title" content="연락처 - SmartSolTech">
|
|
<meta property="og:description" content="SmartSolTech에 연락하세요. 프로젝트 문의 및 상담 요청">
|
|
<meta property="og:type" content="website">
|
|
|
|
<!-- PWA -->
|
|
<meta name="theme-color" content="#3B82F6">
|
|
<link rel="manifest" href="/manifest.json">
|
|
<link rel="apple-touch-icon" href="/images/icons/icon-192x192.png">
|
|
|
|
<!-- Styles -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
<link href="/css/main.css" rel="stylesheet">
|
|
<link href="/css/fixes.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<%- include('partials/navigation') %>
|
|
|
|
<!-- Contact Hero Section -->
|
|
<section class="hero-section bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800 pt-20">
|
|
<div class="container mx-auto px-4 py-20 text-center text-white">
|
|
<h1 class="text-5xl md:text-6xl font-bold mb-6" data-aos="fade-up">
|
|
<span class="text-yellow-300">연락처</span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200">
|
|
프로젝트 문의부터 기술 상담까지, 언제든 연락주세요
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Contact Content -->
|
|
<section class="section-padding">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
|
|
<!-- Contact Form -->
|
|
<div class="bg-white rounded-2xl shadow-xl p-8" data-aos="fade-right">
|
|
<div class="mb-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4">
|
|
프로젝트 문의하기
|
|
</h2>
|
|
<p class="text-gray-600">
|
|
아래 양식을 작성해 주시면 24시간 내에 답변드리겠습니다.
|
|
</p>
|
|
</div>
|
|
|
|
<form id="contact-form" class="space-y-6">
|
|
<!-- Name & Email Row -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">
|
|
이름 *
|
|
</label>
|
|
<input type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
placeholder="홍길동">
|
|
</div>
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
|
|
이메일 *
|
|
</label>
|
|
<input type="email"
|
|
id="email"
|
|
name="email"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
placeholder="example@email.com">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phone & Company -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="phone" class="block text-sm font-medium text-gray-700 mb-2">
|
|
전화번호
|
|
</label>
|
|
<input type="tel"
|
|
id="phone"
|
|
name="phone"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
placeholder="010-1234-5678">
|
|
</div>
|
|
<div>
|
|
<label for="company" class="block text-sm font-medium text-gray-700 mb-2">
|
|
회사명
|
|
</label>
|
|
<input type="text"
|
|
id="company"
|
|
name="company"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
|
|
placeholder="회사명을 입력하세요">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Service Type -->
|
|
<div>
|
|
<label for="service" class="block text-sm font-medium text-gray-700 mb-2">
|
|
관심 있는 서비스 *
|
|
</label>
|
|
<select id="service"
|
|
name="service"
|
|
required
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
|
<option value="">서비스를 선택해 주세요</option>
|
|
<option value="web-development">웹 개발</option>
|
|
<option value="mobile-app">모바일 앱 개발</option>
|
|
<option value="ui-ux-design">UI/UX 디자인</option>
|
|
<option value="branding">브랜딩</option>
|
|
<option value="digital-marketing">디지털 마케팅</option>
|
|
<option value="consulting">기술 컨설팅</option>
|
|
<option value="other">기타</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Budget -->
|
|
<div>
|
|
<label for="budget" class="block text-sm font-medium text-gray-700 mb-2">
|
|
예산 범위
|
|
</label>
|
|
<select id="budget"
|
|
name="budget"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors">
|
|
<option value="">예산을 선택해 주세요</option>
|
|
<option value="under-500">50만원 미만</option>
|
|
<option value="500-1000">50-100만원</option>
|
|
<option value="1000-3000">100-300만원</option>
|
|
<option value="3000-5000">300-500만원</option>
|
|
<option value="5000-10000">500-1000만원</option>
|
|
<option value="over-10000">1000만원 이상</option>
|
|
<option value="discuss">상담 후 결정</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Message -->
|
|
<div>
|
|
<label for="message" class="block text-sm font-medium text-gray-700 mb-2">
|
|
프로젝트 상세 내용 *
|
|
</label>
|
|
<textarea id="message"
|
|
name="message"
|
|
required
|
|
rows="6"
|
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors resize-vertical"
|
|
placeholder="프로젝트에 대한 자세한 내용, 요구사항, 일정 등을 알려주세요..."></textarea>
|
|
</div>
|
|
|
|
<!-- Privacy Agreement -->
|
|
<div class="flex items-start">
|
|
<input type="checkbox"
|
|
id="privacy"
|
|
name="privacy"
|
|
required
|
|
class="mt-1 mr-3 h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
|
|
<label for="privacy" class="text-sm text-gray-600">
|
|
개인정보 수집 및 이용에 동의합니다.
|
|
<a href="/privacy" class="text-blue-600 hover:underline">개인정보처리방침 보기</a>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button type="submit"
|
|
class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 px-6 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 focus:ring-4 focus:ring-blue-300">
|
|
<i class="fas fa-paper-plane mr-2"></i>
|
|
문의 보내기
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Form Status Messages -->
|
|
<div id="form-success" class="hidden mt-6 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg">
|
|
<i class="fas fa-check-circle mr-2"></i>
|
|
문의가 성공적으로 접수되었습니다. 빠른 시일 내에 답변드리겠습니다.
|
|
</div>
|
|
|
|
<div id="form-error" class="hidden mt-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
|
|
<i class="fas fa-exclamation-circle mr-2"></i>
|
|
<span id="error-message">문의 전송 중 오류가 발생했습니다. 다시 시도해 주세요.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contact Information -->
|
|
<div class="space-y-8" data-aos="fade-left">
|
|
|
|
<!-- Contact Cards -->
|
|
<div class="bg-white rounded-2xl shadow-xl p-8">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-6">
|
|
연락처 정보
|
|
</h3>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Email -->
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
|
|
<i class="fas fa-envelope text-blue-600 text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">이메일</h4>
|
|
<a href="mailto:info@smartsoltech.kr" class="text-blue-600 hover:underline">
|
|
info@smartsoltech.kr
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Phone -->
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
|
|
<i class="fas fa-phone text-green-600 text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">전화번호</h4>
|
|
<a href="tel:+82-10-1234-5678" class="text-green-600 hover:underline">
|
|
+82-10-1234-5678
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Location -->
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
|
|
<i class="fas fa-map-marker-alt text-purple-600 text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">주소</h4>
|
|
<p class="text-gray-600">Seoul, South Korea</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Business Hours -->
|
|
<div class="flex items-center">
|
|
<div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4">
|
|
<i class="fas fa-clock text-orange-600 text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h4 class="font-semibold text-gray-900">운영시간</h4>
|
|
<p class="text-gray-600">평일 09:00 - 18:00</p>
|
|
<p class="text-gray-600 text-sm">주말 및 공휴일 휴무</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Media -->
|
|
<div class="bg-white rounded-2xl shadow-xl p-8">
|
|
<h3 class="text-2xl font-bold text-gray-900 mb-6">
|
|
소셜 미디어
|
|
</h3>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<a href="#" class="flex items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors group">
|
|
<i class="fab fa-facebook text-blue-600 text-2xl group-hover:scale-110 transition-transform"></i>
|
|
</a>
|
|
<a href="#" class="flex items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors group">
|
|
<i class="fab fa-twitter text-blue-400 text-2xl group-hover:scale-110 transition-transform"></i>
|
|
</a>
|
|
<a href="#" class="flex items-center justify-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors group">
|
|
<i class="fab fa-linkedin text-blue-700 text-2xl group-hover:scale-110 transition-transform"></i>
|
|
</a>
|
|
<a href="#" class="flex items-center justify-center p-4 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors group">
|
|
<i class="fab fa-instagram text-pink-600 text-2xl group-hover:scale-110 transition-transform"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions -->
|
|
<div class="bg-gradient-to-br from-blue-600 to-purple-600 rounded-2xl shadow-xl p-8 text-white">
|
|
<h3 class="text-2xl font-bold mb-6">빠른 시작</h3>
|
|
|
|
<div class="space-y-4">
|
|
<a href="/calculator" class="block bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4 hover:bg-opacity-30 transition-all">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-calculator text-2xl mr-4"></i>
|
|
<div>
|
|
<h4 class="font-semibold">비용 계산하기</h4>
|
|
<p class="text-sm opacity-80">프로젝트 예상 비용을 즉시 확인</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/portfolio" class="block bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4 hover:bg-opacity-30 transition-all">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-folder-open text-2xl mr-4"></i>
|
|
<div>
|
|
<h4 class="font-semibold">포트폴리오 보기</h4>
|
|
<p class="text-sm opacity-80">우리의 작업 사례 확인</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/services" class="block bg-white bg-opacity-20 backdrop-blur-sm rounded-lg p-4 hover:bg-opacity-30 transition-all">
|
|
<div class="flex items-center">
|
|
<i class="fas fa-cogs text-2xl mr-4"></i>
|
|
<div>
|
|
<h4 class="font-semibold">서비스 살펴보기</h4>
|
|
<p class="text-sm opacity-80">제공하는 서비스 정보</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ Section -->
|
|
<section class="section-padding bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-12" data-aos="fade-up">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
자주 묻는 질문
|
|
</h2>
|
|
<p class="text-xl text-gray-600">
|
|
프로젝트와 관련된 궁금한 점들을 확인해보세요
|
|
</p>
|
|
</div>
|
|
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="space-y-4" data-aos="fade-up">
|
|
<!-- FAQ Item 1 -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-gray-900">프로젝트는 얼마나 걸리나요?</h3>
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
|
|
</div>
|
|
</button>
|
|
<div class="faq-content hidden px-6 pb-6">
|
|
<p class="text-gray-600">
|
|
프로젝트 규모와 복잡도에 따라 다르지만, 일반적으로 웹사이트는 2-8주, 모바일 앱은 4-16주,
|
|
UI/UX 디자인은 1-6주 정도 소요됩니다. 정확한 일정은 상담을 통해 안내드립니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 2 -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-gray-900">비용은 어떻게 책정되나요?</h3>
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
|
|
</div>
|
|
</button>
|
|
<div class="faq-content hidden px-6 pb-6">
|
|
<p class="text-gray-600">
|
|
프로젝트의 범위, 기능, 디자인 복잡도, 개발 기간 등을 종합적으로 고려하여 책정합니다.
|
|
온라인 계산기를 통해 예상 비용을 확인하시거나, 직접 상담을 통해 정확한 견적을 받아보세요.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 3 -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-gray-900">유지보수는 어떻게 진행되나요?</h3>
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
|
|
</div>
|
|
</button>
|
|
<div class="faq-content hidden px-6 pb-6">
|
|
<p class="text-gray-600">
|
|
프로젝트 완료 후 6개월간 무료 유지보수를 제공합니다. 이후에는 월 단위 또는 연 단위
|
|
유지보수 계약을 통해 지속적인 관리와 업데이트를 지원합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- FAQ Item 4 -->
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<button class="faq-button w-full text-left p-6 focus:outline-none hover:bg-gray-50 transition-colors" type="button">
|
|
<div class="flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-gray-900">원격으로도 작업이 가능한가요?</h3>
|
|
<i class="fas fa-chevron-down text-gray-400 transform transition-transform"></i>
|
|
</div>
|
|
</button>
|
|
<div class="faq-content hidden px-6 pb-6">
|
|
<p class="text-gray-600">
|
|
네, 전 세계 어디서든 원격으로 프로젝트를 진행할 수 있습니다.
|
|
온라인 미팅, 협업 도구, 프로젝트 관리 시스템을 통해 효율적으로 소통하며 작업합니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<%- include('partials/footer') %>
|
|
|
|
<!-- Scripts -->
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script src="/js/main.js"></script>
|
|
|
|
<script>
|
|
// Contact form handling
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const contactForm = document.getElementById('contact-form');
|
|
const successMessage = document.getElementById('form-success');
|
|
const errorMessage = document.getElementById('form-error');
|
|
const errorText = document.getElementById('error-message');
|
|
|
|
contactForm.addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const submitButton = contactForm.querySelector('button[type="submit"]');
|
|
const originalText = submitButton.innerHTML;
|
|
|
|
// Show loading state
|
|
submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 전송 중...';
|
|
submitButton.disabled = true;
|
|
|
|
try {
|
|
const formData = new FormData(contactForm);
|
|
const response = await fetch('/contact', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
successMessage.classList.remove('hidden');
|
|
errorMessage.classList.add('hidden');
|
|
contactForm.reset();
|
|
|
|
// Scroll to success message
|
|
successMessage.scrollIntoView({ behavior: 'smooth' });
|
|
} else {
|
|
throw new Error(result.message || '전송에 실패했습니다.');
|
|
}
|
|
} catch (error) {
|
|
errorText.textContent = error.message;
|
|
errorMessage.classList.remove('hidden');
|
|
successMessage.classList.add('hidden');
|
|
|
|
// Scroll to error message
|
|
errorMessage.scrollIntoView({ behavior: 'smooth' });
|
|
} finally {
|
|
// Restore button state
|
|
submitButton.innerHTML = originalText;
|
|
submitButton.disabled = false;
|
|
}
|
|
});
|
|
|
|
// FAQ functionality
|
|
const faqButtons = document.querySelectorAll('.faq-button');
|
|
|
|
faqButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const content = this.nextElementSibling;
|
|
const icon = this.querySelector('i');
|
|
|
|
// Close all other FAQs
|
|
faqButtons.forEach(otherButton => {
|
|
if (otherButton !== this) {
|
|
const otherContent = otherButton.nextElementSibling;
|
|
const otherIcon = otherButton.querySelector('i');
|
|
|
|
otherContent.classList.add('hidden');
|
|
otherIcon.classList.remove('rotate-180');
|
|
}
|
|
});
|
|
|
|
// Toggle current FAQ
|
|
if (content.classList.contains('hidden')) {
|
|
content.classList.remove('hidden');
|
|
icon.classList.add('rotate-180');
|
|
} else {
|
|
content.classList.add('hidden');
|
|
icon.classList.remove('rotate-180');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |