trevor/sst_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init commit

Browse Source
This commit is contained in:
Andrew K. Choi
2025-10-19 18:27:00 +09:00
commit 150891b29d
219 changed files with 70016 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

491
.history/views/contact_20251019163807.ejs Normal file
View File

@@ -0,0 +1,491 @@
<!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">
<meta property="og:url" content="<%= `${req.protocol}://${req.get('host')}/contact` %>">
<!-- 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">
</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>