gahusb
2c9af41631
- app/api/projects, link/route: Cookie + Bearer 토큰 이중 인증 지원 (E2E 테스트 대응) - app/mypage: 로또 기록 탭 제거, 구독 빈 상태 프롬프트 서비스로 변경 - scripts/test-flow.mjs: 견적서 발송→연결→마일스톤 진행 E2E 테스트 스크립트 - supabase/migrations/003: quotes RLS 비활성화 (관리자 서버 전용 접근) - marketing/kmong-images: 크몽 서비스 A 상세 이미지 5장 (HTML 스크린샷용) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
210 lines
6.0 KiB
HTML
210 lines
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { width: 652px; font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; background: #0f172a; }
|
|
|
|
.hero {
|
|
padding: 40px 40px 28px;
|
|
text-align: center;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
background: #1e3a5f;
|
|
color: #60a5fa;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 4px 14px;
|
|
border-radius: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.hero h1 {
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
line-height: 1.4;
|
|
margin-bottom: 8px;
|
|
}
|
|
.hero p { font-size: 13px; color: #64748b; }
|
|
|
|
.faq-list { padding: 8px 40px 32px; display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
.faq-item {
|
|
background: #1e293b;
|
|
border: 1px solid #2d3f55;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
.faq-q {
|
|
padding: 14px 18px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
.faq-q-icon {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 6px;
|
|
background: #1e3a5f;
|
|
color: #60a5fa;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
margin-top: 1px;
|
|
}
|
|
.faq-q-text {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #f1f5f9;
|
|
line-height: 1.5;
|
|
}
|
|
.faq-a {
|
|
padding: 0 18px 14px 50px;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
line-height: 1.7;
|
|
}
|
|
.faq-a strong { color: #60a5fa; }
|
|
|
|
.cta {
|
|
margin: 0 28px 32px;
|
|
background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%);
|
|
border-radius: 16px;
|
|
padding: 32px 28px;
|
|
text-align: center;
|
|
}
|
|
.cta h2 {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
}
|
|
.cta p {
|
|
font-size: 12.5px;
|
|
color: rgba(255,255,255,0.75);
|
|
margin-bottom: 20px;
|
|
line-height: 1.6;
|
|
}
|
|
.cta-pills {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.pill {
|
|
background: rgba(255,255,255,0.15);
|
|
border: 1px solid rgba(255,255,255,0.25);
|
|
color: #fff;
|
|
font-size: 11.5px;
|
|
font-weight: 600;
|
|
padding: 6px 14px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.promise {
|
|
margin: 0 28px 32px;
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
.promise-item {
|
|
flex: 1;
|
|
background: #1e293b;
|
|
border: 1px solid #2d3f55;
|
|
border-radius: 12px;
|
|
padding: 16px 14px;
|
|
text-align: center;
|
|
}
|
|
.promise-icon { font-size: 22px; margin-bottom: 8px; }
|
|
.promise-title { font-size: 12px; font-weight: 700; color: #f1f5f9; margin-bottom: 4px; }
|
|
.promise-desc { font-size: 10.5px; color: #64748b; line-height: 1.5; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="hero">
|
|
<div class="badge">자주 묻는 질문</div>
|
|
<h1>궁금한 점을<br>먼저 확인해 보세요</h1>
|
|
<p>추가 질문은 채팅으로 언제든지 문의해 주세요</p>
|
|
</div>
|
|
|
|
<div class="faq-list">
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-q">
|
|
<div class="faq-q-icon">Q</div>
|
|
<div class="faq-q-text">개발 경험이 없어도 의뢰할 수 있나요?</div>
|
|
</div>
|
|
<div class="faq-a">네, 가능합니다. 아이디어나 해결하고 싶은 문제만 있으면 충분합니다. <strong>요구사항 정리부터 함께 도와드립니다.</strong></div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-q">
|
|
<div class="faq-q-icon">Q</div>
|
|
<div class="faq-q-text">패키지에 없는 기능도 추가할 수 있나요?</div>
|
|
</div>
|
|
<div class="faq-a">가능합니다. 사전 상담 시 말씀해 주시면 <strong>추가 비용을 포함한 맞춤 견적</strong>을 드립니다. 먼저 채팅으로 문의해 주세요.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-q">
|
|
<div class="faq-q-icon">Q</div>
|
|
<div class="faq-q-text">작업 중 진행 상황을 확인할 수 있나요?</div>
|
|
</div>
|
|
<div class="faq-a"><strong>매일 카카오톡으로 진행 현황을 공유</strong>해 드립니다. 중간 완성본은 스테이징 URL로 직접 확인하실 수 있습니다.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-q">
|
|
<div class="faq-q-icon">Q</div>
|
|
<div class="faq-q-text">납품 후 직접 수정할 수 있나요?</div>
|
|
</div>
|
|
<div class="faq-a"><strong>소스코드 전체를 인도</strong>해 드리므로 개발 지식이 있으시면 직접 수정하실 수 있습니다. 비개발자분은 유지보수 연장 계약으로 지원받으실 수 있습니다.</div>
|
|
</div>
|
|
|
|
<div class="faq-item">
|
|
<div class="faq-q">
|
|
<div class="faq-q-icon">Q</div>
|
|
<div class="faq-q-text">서버·호스팅 비용은 별도인가요?</div>
|
|
</div>
|
|
<div class="faq-a">네, 서버 및 도메인 비용은 의뢰인 부담입니다. 저렴하고 안정적인 호스팅 구성을 추천해 드리며, 초기 설정을 도와드립니다. <strong>(월 1~5만원 수준 구성 가능)</strong></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="promise">
|
|
<div class="promise-item">
|
|
<div class="promise-icon">💬</div>
|
|
<div class="promise-title">24시간 내 답변</div>
|
|
<div class="promise-desc">상담 문의는 24시간 내에 답변드립니다</div>
|
|
</div>
|
|
<div class="promise-item">
|
|
<div class="promise-icon">📋</div>
|
|
<div class="promise-title">범위 문서화</div>
|
|
<div class="promise-desc">확정된 작업 범위를 문서로 공유합니다</div>
|
|
</div>
|
|
<div class="promise-item">
|
|
<div class="promise-icon">🔒</div>
|
|
<div class="promise-title">비밀 유지</div>
|
|
<div class="promise-desc">요청 시 NDA 작성 가능합니다</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta">
|
|
<h2>지금 바로 무료 상담을<br>시작해 보세요</h2>
|
|
<p>어떤 서비스든 채팅으로 먼저 물어보세요.<br>24시간 내에 답변, 상담은 무료입니다.</p>
|
|
<div class="cta-pills">
|
|
<span class="pill">💻 웹·앱 개발</span>
|
|
<span class="pill">⚙️ 업무 자동화</span>
|
|
<span class="pill">🤖 AI 프롬프트</span>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|