- 관리자 견적서 CRUD (WBS/항목/향후관리/특이사항 5탭 편집기) - 고객용 공개 견적서 페이지 (optional 항목 선택 + 실시간 총액 + 수락) - 마케팅 SVG 에셋 6종 (썸네일 5개 + 배너 1개) + 관리자 에셋 페이지 - 전체 카피 강화: 크레덴셜 제거 → URL증거/환불보장/계약서/납기패널티 중심 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
187 lines
11 KiB
XML
187 lines
11 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 1200 675">
|
|
<defs>
|
|
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
|
<stop offset="55%" style="stop-color:#1e1b4b"/>
|
|
<stop offset="100%" style="stop-color:#1e3a8a"/>
|
|
</linearGradient>
|
|
<linearGradient id="headGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#60a5fa"/>
|
|
<stop offset="100%" style="stop-color:#a78bfa"/>
|
|
</linearGradient>
|
|
<linearGradient id="priceGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#7c3aed"/>
|
|
<stop offset="100%" style="stop-color:#6d28d9"/>
|
|
</linearGradient>
|
|
<linearGradient id="btnGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:#2563eb"/>
|
|
<stop offset="100%" style="stop-color:#7c3aed"/>
|
|
</linearGradient>
|
|
<radialGradient id="glow1" cx="70%" cy="30%" r="45%">
|
|
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:0.22"/>
|
|
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:0"/>
|
|
</radialGradient>
|
|
<radialGradient id="glow2" cx="85%" cy="75%" r="35%">
|
|
<stop offset="0%" style="stop-color:#7c3aed;stop-opacity:0.18"/>
|
|
<stop offset="100%" style="stop-color:#7c3aed;stop-opacity:0"/>
|
|
</radialGradient>
|
|
<filter id="shadow">
|
|
<feDropShadow dx="0" dy="12" stdDeviation="20" flood-color="#000" flood-opacity="0.55"/>
|
|
</filter>
|
|
<filter id="glowFilter">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
|
|
</filter>
|
|
<clipPath id="browserClip">
|
|
<rect x="620" y="60" width="550" height="530" rx="16"/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<!-- 배경 -->
|
|
<rect width="1200" height="675" fill="url(#bg)"/>
|
|
<rect width="1200" height="675" fill="url(#glow1)"/>
|
|
<rect width="1200" height="675" fill="url(#glow2)"/>
|
|
|
|
<!-- 격자 패턴 -->
|
|
<defs>
|
|
<pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
|
|
<path d="M 48 0 L 0 0 0 48" fill="none" stroke="#334155" stroke-width="0.5" opacity="0.4"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="1200" height="675" fill="url(#grid)"/>
|
|
|
|
<!-- 왼쪽 콘텐츠 -->
|
|
<!-- 상단 뱃지 -->
|
|
<rect x="60" y="72" width="296" height="38" rx="19" fill="#1d4ed8" opacity="0.9"/>
|
|
<circle cx="82" cy="91" r="5" fill="#fbbf24"/>
|
|
<text x="98" y="96" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" font-weight="700" fill="#ffffff">대기업 현직 개발자 직접 제작</text>
|
|
|
|
<!-- 메인 헤드라인 -->
|
|
<text x="60" y="170" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="#ffffff">7년차 대기업</text>
|
|
<text x="60" y="232" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="#ffffff">개발자가 직접</text>
|
|
<text x="60" y="294" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="52" font-weight="800" fill="url(#headGrad)">만드는 홈페이지</text>
|
|
|
|
<!-- 서브텍스트 -->
|
|
<text x="60" y="346" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="20" fill="#94a3b8">기획 · 디자인 · 개발 · 배포 원스톱</text>
|
|
|
|
<!-- 가격 뱃지 -->
|
|
<rect x="60" y="376" width="230" height="62" rx="14" fill="url(#priceGrad)" filter="url(#glowFilter)"/>
|
|
<text x="175" y="400" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" font-weight="600" fill="#ddd6fe">시작 가격</text>
|
|
<text x="175" y="428" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="26" font-weight="800" fill="#ffffff">스타터 50만원~</text>
|
|
|
|
<!-- 체크리스트 -->
|
|
<rect x="60" y="462" width="490" height="50" rx="10" fill="#0f172a" opacity="0.6"/>
|
|
<!-- 체크1 -->
|
|
<circle cx="84" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
|
<text x="84" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
|
<text x="100" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">반응형</text>
|
|
<!-- 체크2 -->
|
|
<circle cx="198" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
|
<text x="198" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
|
<text x="214" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">SEO 최적화</text>
|
|
<!-- 체크3 -->
|
|
<circle cx="328" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
|
<text x="328" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
|
<text x="344" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">납기 보장</text>
|
|
<!-- 체크4 -->
|
|
<circle cx="440" cy="487" r="10" fill="#22c55e" opacity="0.2"/>
|
|
<text x="440" y="492" text-anchor="middle" font-family="sans-serif" font-size="12" font-weight="900" fill="#22c55e">✓</text>
|
|
<text x="456" y="492" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="15" fill="#e2e8f0">무료 AS</text>
|
|
|
|
<!-- 문의 버튼 -->
|
|
<rect x="60" y="534" width="200" height="52" rx="13" fill="url(#btnGrad)"/>
|
|
<text x="160" y="566" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="17" font-weight="700" fill="#ffffff">무료 상담 신청 →</text>
|
|
|
|
<!-- URL -->
|
|
<text x="60" y="628" font-family="sans-serif" font-size="14" fill="#475569">jaengseung-made.com</text>
|
|
|
|
<!-- 오른쪽 브라우저 목업 -->
|
|
<g filter="url(#shadow)">
|
|
<rect x="620" y="60" width="550" height="530" rx="16" fill="#1e293b" stroke="#334155" stroke-width="1.5"/>
|
|
<!-- 탭바 -->
|
|
<rect x="620" y="60" width="550" height="44" rx="16" fill="#0f172a"/>
|
|
<rect x="620" y="92" width="550" height="12" fill="#0f172a"/>
|
|
<!-- 창 버튼 -->
|
|
<circle cx="650" cy="82" r="7" fill="#ef4444"/>
|
|
<circle cx="674" cy="82" r="7" fill="#f59e0b"/>
|
|
<circle cx="698" cy="82" r="7" fill="#22c55e"/>
|
|
<!-- URL 바 -->
|
|
<rect x="724" y="70" width="380" height="24" rx="12" fill="#1e293b" stroke="#475569" stroke-width="1"/>
|
|
<text x="914" y="87" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#64748b">jaengseung-made.com</text>
|
|
|
|
<!-- 브라우저 내부 -->
|
|
<g clip-path="url(#browserClip)">
|
|
<rect x="620" y="104" width="550" height="486" fill="#f8fafc"/>
|
|
|
|
<!-- 네비 -->
|
|
<rect x="620" y="104" width="550" height="48" fill="#1d4ed8"/>
|
|
<rect x="638" y="118" width="70" height="20" rx="10" fill="#fff" opacity="0.25"/>
|
|
<rect x="900" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
|
<rect x="952" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
|
<rect x="1004" y="118" width="45" height="20" rx="10" fill="#fff" opacity="0.15"/>
|
|
<rect x="1100" y="114" width="56" height="28" rx="14" fill="#7c3aed"/>
|
|
<text x="1128" y="133" text-anchor="middle" font-family="sans-serif" font-size="11" font-weight="700" fill="#fff">문의</text>
|
|
|
|
<!-- 히어로 섹션 -->
|
|
<rect x="620" y="152" width="550" height="160" fill="#eff6ff"/>
|
|
<!-- 히어로 텍스트 블록 -->
|
|
<rect x="642" y="174" width="180" height="18" rx="9" fill="#bfdbfe"/>
|
|
<rect x="642" y="200" width="240" height="22" rx="11" fill="#93c5fd"/>
|
|
<rect x="642" y="230" width="200" height="18" rx="9" fill="#bfdbfe"/>
|
|
<rect x="642" y="260" width="110" height="34" rx="17" fill="#2563eb"/>
|
|
<text x="697" y="283" text-anchor="middle" font-family="sans-serif" font-size="12" fill="#fff">문의하기</text>
|
|
<!-- 히어로 이미지 -->
|
|
<rect x="950" y="164" width="196" height="134" rx="10" fill="#dbeafe"/>
|
|
<rect x="970" y="184" width="100" height="12" rx="6" fill="#93c5fd"/>
|
|
<rect x="970" y="204" width="140" height="12" rx="6" fill="#bfdbfe"/>
|
|
<rect x="970" y="224" width="120" height="12" rx="6" fill="#bfdbfe"/>
|
|
<rect x="970" y="254" width="80" height="26" rx="13" fill="#2563eb"/>
|
|
|
|
<!-- 서비스 카드 영역 -->
|
|
<rect x="620" y="312" width="550" height="20" fill="#f1f5f9"/>
|
|
<text x="895" y="327" text-anchor="middle" font-family="'Malgun Gothic',sans-serif" font-size="11" fill="#94a3b8">주요 서비스</text>
|
|
|
|
<!-- 카드 1 -->
|
|
<rect x="634" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
|
<rect x="634" y="344" width="162" height="5" rx="2" fill="#2563eb"/>
|
|
<rect x="648" y="362" width="50" height="50" rx="10" fill="#eff6ff"/>
|
|
<text x="673" y="394" text-anchor="middle" font-size="22">🏢</text>
|
|
<rect x="648" y="424" width="90" height="12" rx="6" fill="#e2e8f0"/>
|
|
<rect x="648" y="444" width="120" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="648" y="458" width="60" height="8" rx="4" fill="#f1f5f9"/>
|
|
|
|
<!-- 카드 2 -->
|
|
<rect x="808" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#ede9fe" stroke-width="1.5"/>
|
|
<rect x="808" y="344" width="162" height="5" rx="2" fill="#7c3aed"/>
|
|
<rect x="820" y="338" width="50" height="20" rx="10" fill="#7c3aed"/>
|
|
<text x="845" y="353" text-anchor="middle" font-family="sans-serif" font-size="10" font-weight="700" fill="#fff">추천</text>
|
|
<rect x="822" y="362" width="50" height="50" rx="10" fill="#ede9fe"/>
|
|
<text x="847" y="394" text-anchor="middle" font-size="22">⚡</text>
|
|
<rect x="822" y="424" width="90" height="12" rx="6" fill="#ddd6fe"/>
|
|
<rect x="822" y="444" width="120" height="10" rx="5" fill="#ede9fe"/>
|
|
<rect x="822" y="458" width="60" height="8" rx="4" fill="#f5f3ff"/>
|
|
|
|
<!-- 카드 3 -->
|
|
<rect x="982" y="344" width="162" height="130" rx="10" fill="#fff" stroke="#e2e8f0" stroke-width="1"/>
|
|
<rect x="982" y="344" width="162" height="5" rx="2" fill="#059669"/>
|
|
<rect x="996" y="362" width="50" height="50" rx="10" fill="#ecfdf5"/>
|
|
<text x="1021" y="394" text-anchor="middle" font-size="22">🚀</text>
|
|
<rect x="996" y="424" width="90" height="12" rx="6" fill="#e2e8f0"/>
|
|
<rect x="996" y="444" width="120" height="10" rx="5" fill="#f1f5f9"/>
|
|
<rect x="996" y="458" width="60" height="8" rx="4" fill="#f1f5f9"/>
|
|
|
|
<!-- 하단 푸터 영역 -->
|
|
<rect x="620" y="486" width="550" height="104" fill="#0f172a"/>
|
|
<rect x="642" y="502" width="80" height="14" rx="7" fill="#334155"/>
|
|
<rect x="642" y="524" width="120" height="10" rx="5" fill="#1e293b"/>
|
|
<rect x="642" y="540" width="100" height="10" rx="5" fill="#1e293b"/>
|
|
<rect x="1050" y="502" width="96" height="34" rx="8" fill="#2563eb"/>
|
|
<text x="1098" y="524" text-anchor="middle" font-family="sans-serif" font-size="11" fill="#fff">상담 신청</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- 하단 바 -->
|
|
<rect x="0" y="635" width="1200" height="40" fill="#1d4ed8"/>
|
|
<text x="600" y="660" text-anchor="middle" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" font-weight="600" fill="#ffffff">7년차 대기업 백엔드 개발자 박재오 · 기획부터 배포까지 원스톱 · jaengseung-made.com</text>
|
|
</svg>
|