feat: [business-card] 명함신청 화면에 제작 일정 안내 배너 추가
- 그라데이션 배경 + SVG 장식 배너 디자인 - 신청 마감/제작 소요/배송 기간 일정 안내 - 컬러 아이콘 활용 시각적 구분
This commit is contained in:
김보곤
@@ -10,14 +10,85 @@
|
||||
<p class="text-sm text-gray-500 mt-1">명함 인쇄를 신청합니다. 신청 후 본사에서 처리합니다.</p>
|
||||
</div>
|
||||
|
||||
<!-- 회사 정보 안내 -->
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h3 class="text-sm font-semibold text-blue-800 mb-2">명함에 인쇄되는 회사 정보</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-blue-700">
|
||||
<div><span class="font-medium">회사명:</span> (주)코드브릿지엑스</div>
|
||||
<div><span class="font-medium">서비스:</span> SAM (Smart Automation Management)</div>
|
||||
<!-- 명함 제작 신청 및 일정 안내 -->
|
||||
<div class="bg-gradient-to-r from-indigo-50 to-blue-50 border border-indigo-200 rounded-xl p-5 relative overflow-hidden">
|
||||
{{-- 배경 장식 --}}
|
||||
<div class="absolute top-0 right-0 opacity-[0.07]" style="transform: translate(20px, -10px);">
|
||||
<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="10" y="30" width="140" height="85" rx="8" stroke="#4338ca" stroke-width="3"/>
|
||||
<rect x="20" y="40" width="55" height="10" rx="3" fill="#4338ca"/>
|
||||
<rect x="20" y="56" width="40" height="6" rx="2" fill="#4338ca" opacity="0.6"/>
|
||||
<rect x="20" y="68" width="50" height="6" rx="2" fill="#4338ca" opacity="0.4"/>
|
||||
<rect x="20" y="80" width="35" height="6" rx="2" fill="#4338ca" opacity="0.3"/>
|
||||
<rect x="95" y="50" width="35" height="35" rx="6" fill="#4338ca" opacity="0.15"/>
|
||||
<path d="M112.5 60 L112.5 78 M103.5 69 L121.5 69" stroke="#4338ca" stroke-width="2.5" stroke-linecap="round" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-xs text-blue-600 mt-2">* 아래 입력하신 정보가 명함에 인쇄됩니다.</p>
|
||||
|
||||
{{-- 제목 --}}
|
||||
<div class="flex items-center gap-2.5 mb-3">
|
||||
<div class="shrink-0 w-9 h-9 rounded-lg bg-indigo-600 flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-base font-bold text-indigo-900">명함 제작 신청 및 일정 안내</h3>
|
||||
</div>
|
||||
|
||||
{{-- 안내 문구 --}}
|
||||
<p class="text-sm text-indigo-700 mb-4 leading-relaxed">
|
||||
원활한 업무 지원을 위해 명함 제작 일정을 다음과 같이 안내드립니다.<br>
|
||||
일정에 맞춰 신청해 주시기 바랍니다.
|
||||
</p>
|
||||
|
||||
{{-- 일정 정보 --}}
|
||||
<div class="space-y-2.5">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="shrink-0 w-7 h-7 rounded-full bg-amber-100 flex items-center justify-center mt-0.5">
|
||||
<svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-gray-800">신청 마감</span>
|
||||
<p class="text-sm text-gray-600">매주 <span class="font-semibold text-indigo-700">월요일 오후 3시</span> <span class="text-xs text-gray-400">(이후 신청 건은 익주 접수)</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="shrink-0 w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center mt-0.5">
|
||||
<svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-gray-800">제작 소요</span>
|
||||
<p class="text-sm text-gray-600">접수 마감 후 영업일 기준 <span class="font-semibold text-indigo-700">1~2일</span></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="shrink-0 w-7 h-7 rounded-full bg-emerald-100 flex items-center justify-center mt-0.5">
|
||||
<svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm font-semibold text-gray-800">배송 기간</span>
|
||||
<p class="text-sm text-gray-600">제작 완료 후 <span class="font-semibold text-indigo-700">2~3일</span> 내 수령 <span class="text-xs text-gray-400">(택배사 사정에 따라 변동 가능)</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 회사 정보 안내 -->
|
||||
<div class="bg-gray-50 border border-gray-200 rounded-lg px-4 py-3">
|
||||
<div class="flex items-center gap-4 text-sm text-gray-600">
|
||||
<span class="font-medium text-gray-700">명함 인쇄 정보</span>
|
||||
<span>회사명: <span class="font-medium">(주)코드브릿지엑스</span></span>
|
||||
<span class="text-gray-300">|</span>
|
||||
<span>서비스: <span class="font-medium">SAM</span></span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1">* 아래 입력하신 정보가 명함에 인쇄됩니다.</p>
|
||||
</div>
|
||||
|
||||
<!-- 신청 폼 -->
|
||||
|
||||
Reference in New Issue
Block a user