Files
jaengseung-made/public/marketing/banner-homepage.svg
gahusb 3ed2e60dc6 feat: 프롬프트 패키지 3종 추가 + 마케팅 SVG 에셋 전면 재작성
- 프롬프트 엔지니어링 페이지에 비즈니스 이메일/마케팅 카피/업무 보고서 패키지 3종 추가
- 각 상품 할인가(10,900~12,900원), 7가지 기능 설명, 프롬프트 미리보기 포함
- 마케팅 SVG 에셋 8개 전면 재작성:
  - 이모지 제거 → SVG path 기반 아이콘으로 교체
  - 배경에 유기적 bezier 곡선 블롭 형태 추가
  - 자동화 플로우 직선 연결 → 곡선 bezier path로 교체
  - 로또 공 3D 하이라이트/그림자 강화
  - 주식 차트 polyline → smooth bezier 곡선 개선
  - 말풍선 꼬리 path 추가로 자연스러운 대화 표현

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-25 04:17:24 +09:00

232 lines
14 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="400" viewBox="0 0 1200 400">
<defs>
<linearGradient id="bn-bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#04102b"/>
<stop offset="100%" stop-color="#1e1b4b"/>
</linearGradient>
<radialGradient id="bn-blueGlow" cx="30%" cy="50%" r="50%">
<stop offset="0%" stop-color="#2563eb" stop-opacity="0.12"/>
<stop offset="100%" stop-color="#2563eb" stop-opacity="0.0"/>
</radialGradient>
<linearGradient id="bn-badgeGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1e3a8a"/>
<stop offset="100%" stop-color="#1d4ed8"/>
</linearGradient>
<linearGradient id="bn-priceBadge" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1d4ed8"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<linearGradient id="bn-bottomBar" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#1d4ed8"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<linearGradient id="bn-browserChrome" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#1e2535"/>
<stop offset="100%" stop-color="#141c2e"/>
</linearGradient>
<linearGradient id="bn-sidebar" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#0f172a"/>
<stop offset="100%" stop-color="#111827"/>
</linearGradient>
</defs>
<!-- Background -->
<rect width="1200" height="400" fill="url(#bn-bgGrad)"/>
<rect width="1200" height="400" fill="url(#bn-blueGlow)"/>
<!-- Organic background shapes -->
<path d="M 0 0 C 200 -30 400 80 600 50 C 800 20 1000 100 1200 80 L 1200 0 Z" fill="rgba(37,99,235,0.05)"/>
<path d="M 0 400 C 150 360 350 390 500 370 C 650 350 800 380 1000 360 L 1200 350 L 1200 400 Z" fill="rgba(124,58,237,0.05)"/>
<!-- Dot pattern background -->
<pattern id="bn-dots" x="0" y="0" width="36" height="36" patternUnits="userSpaceOnUse">
<circle cx="18" cy="18" r="1.0" fill="rgba(255,255,255,0.05)"/>
</pattern>
<rect width="1200" height="400" fill="url(#bn-dots)"/>
<!-- ===== LEFT CONTENT ===== -->
<!-- Badge row -->
<rect x="44" y="32" width="318" height="28" rx="14" fill="url(#bn-badgeGrad)" stroke="rgba(59,130,246,0.5)" stroke-width="1"/>
<text x="203" y="51" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11.5" fill="#93c5fd" text-anchor="middle" font-weight="600">납기 100% · 무료 AS · 연락두절 없음</text>
<!-- Headline -->
<text x="44" y="108" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="38" fill="white" font-weight="800" letter-spacing="-0.5">납기 지키고 연락 끊지 않는</text>
<text x="44" y="156" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="38" fill="#60a5fa" font-weight="800" letter-spacing="-0.5">개발자가 만드는 홈페이지</text>
<!-- Subtext -->
<text x="44" y="186" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="14" fill="rgba(255,255,255,0.5)">기획 · 디자인 · 개발 · 배포 원스톱 · 납기 보장</text>
<!-- Price badge -->
<rect x="44" y="200" width="116" height="36" rx="18" fill="url(#bn-priceBadge)"/>
<text x="102" y="223" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="800">50만원~</text>
<!-- Checklist items (SVG check icons, no emojis) -->
<g>
<!-- Item 1: 반응형 디자인 -->
<g transform="translate(44, 250)">
<rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
<path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="68" y="263" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">반응형 디자인</text>
<!-- Item 2: SEO 최적화 -->
<g transform="translate(44, 278)">
<rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
<path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="68" y="291" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">SEO 최적화</text>
<!-- Item 3: 납기 보장 -->
<g transform="translate(196, 250)">
<rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
<path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="220" y="263" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">납기 보장</text>
<!-- Item 4: 무료 AS -->
<g transform="translate(196, 278)">
<rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
<path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="220" y="291" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">무료 AS</text>
<!-- Item 5: Next.js 풀스택 -->
<g transform="translate(44, 306)">
<rect x="0" y="0" width="16" height="16" rx="4" fill="#1d4ed8"/>
<path d="M 3 8 L 6 11 L 13 4" stroke="white" stroke-width="1.8" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="68" y="319" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.75)">Next.js 풀스택</text>
</g>
<!-- URL text -->
<text x="44" y="353" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="12" fill="rgba(255,255,255,0.3)">jaengseungmade.vercel.app</text>
<!-- ===== RIGHT: BROWSER MOCKUP ===== -->
<!-- Browser outer frame -->
<rect x="636" y="24" width="524" height="330" rx="12" fill="url(#bn-browserChrome)" stroke="rgba(99,102,241,0.3)" stroke-width="1.5"/>
<!-- Browser tab bar -->
<rect x="636" y="24" width="524" height="36" rx="12" fill="#1a2235"/>
<rect x="636" y="44" width="524" height="16" fill="#1a2235"/>
<!-- Window buttons -->
<circle cx="660" cy="42" r="6" fill="#ef4444" fill-opacity="0.8"/>
<circle cx="680" cy="42" r="6" fill="#f59e0b" fill-opacity="0.8"/>
<circle cx="700" cy="42" r="6" fill="#22c55e" fill-opacity="0.8"/>
<!-- Tab -->
<rect x="720" y="30" width="140" height="24" rx="6" fill="#0f172a"/>
<text x="790" y="47" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.6)" text-anchor="middle">쟁승메이드</text>
<!-- URL bar -->
<rect x="636" y="60" width="524" height="28" fill="#141c2e"/>
<rect x="730" y="66" width="330" height="16" rx="8" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
<text x="895" y="78" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.35)" text-anchor="middle">jaengseungmade.vercel.app</text>
<!-- Browser body content area -->
<rect x="636" y="88" width="524" height="266" rx="0" fill="#0d1120"/>
<!-- Browser sidebar -->
<rect x="636" y="88" width="100" height="266" fill="url(#bn-sidebar)"/>
<!-- Sidebar nav items (geometric icons) -->
<!-- Home icon -->
<g transform="translate(654, 108)">
<path d="M 8 1 L 1 7 L 1 15 L 6 15 L 6 10 L 10 10 L 10 15 L 15 15 L 15 7 Z" stroke="rgba(255,255,255,0.5)" stroke-width="1.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<text x="676" y="120" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.5)"></text>
<!-- Services icon -->
<g transform="translate(654, 134)">
<rect x="0" y="0" width="7" height="7" rx="1.5" stroke="#60a5fa" stroke-width="1.2" fill="none"/>
<rect x="9" y="0" width="7" height="7" rx="1.5" stroke="rgba(255,255,255,0.4)" stroke-width="1.2" fill="none"/>
<rect x="0" y="9" width="7" height="7" rx="1.5" stroke="rgba(255,255,255,0.4)" stroke-width="1.2" fill="none"/>
<rect x="9" y="9" width="7" height="7" rx="1.5" stroke="rgba(255,255,255,0.4)" stroke-width="1.2" fill="none"/>
</g>
<text x="676" y="146" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="#60a5fa">서비스</text>
<!-- Portfolio icon -->
<g transform="translate(654, 162)">
<rect x="0" y="0" width="16" height="12" rx="2" stroke="rgba(255,255,255,0.35)" stroke-width="1.2" fill="none"/>
<line x1="0" y1="4" x2="16" y2="4" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
<line x1="4" y1="0" x2="4" y2="12" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>
</g>
<text x="676" y="173" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">포트폴리오</text>
<!-- Contact icon -->
<g transform="translate(654, 188)">
<rect x="0" y="2" width="16" height="12" rx="2" stroke="rgba(255,255,255,0.35)" stroke-width="1.2" fill="none"/>
<path d="M 0 4 L 8 9 L 16 4" stroke="rgba(255,255,255,0.35)" stroke-width="1.2" fill="none"/>
</g>
<text x="676" y="199" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">문의</text>
<!-- Active indicator bar on sidebar -->
<rect x="636" y="128" width="3" height="28" rx="1.5" fill="#2563eb"/>
<!-- Main content area -->
<!-- Hero section in browser -->
<rect x="740" y="96" width="408" height="84" rx="8" fill="rgba(37,99,235,0.12)" stroke="rgba(37,99,235,0.2)" stroke-width="1"/>
<text x="750" y="118" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="11.5" fill="white" font-weight="700">쟁승메이드 서비스</text>
<text x="750" y="136" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="10" fill="rgba(255,255,255,0.45)">전문 개발자가 만드는 맞춤형 솔루션</text>
<rect x="750" y="148" width="80" height="22" rx="11" fill="#1d4ed8"/>
<text x="790" y="163" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="white" text-anchor="middle" font-weight="600">서비스 보기</text>
<!-- Service cards row -->
<!-- Card 1 -->
<rect x="740" y="190" width="124" height="72" rx="8" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
<!-- Chart bar icon -->
<g transform="translate(752, 204)">
<rect x="0" y="8" width="6" height="8" rx="1" fill="#22c55e" fill-opacity="0.8"/>
<rect x="8" y="4" width="6" height="12" rx="1" fill="#22c55e"/>
<rect x="16" y="6" width="6" height="10" rx="1" fill="#22c55e" fill-opacity="0.7"/>
</g>
<text x="752" y="236" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.7)" font-weight="600">주식 자동매매</text>
<text x="752" y="250" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">텔레그램 연동</text>
<!-- Card 2 (active/highlighted) -->
<rect x="872" y="190" width="124" height="72" rx="8" fill="rgba(37,99,235,0.15)" stroke="rgba(37,99,235,0.35)" stroke-width="1.5"/>
<!-- Globe/web icon -->
<g transform="translate(884, 204)">
<circle cx="10" cy="8" r="8" stroke="#60a5fa" stroke-width="1.2" fill="none"/>
<ellipse cx="10" cy="8" rx="4" ry="8" stroke="#60a5fa" stroke-width="1" fill="none"/>
<line x1="2" y1="8" x2="18" y2="8" stroke="#60a5fa" stroke-width="1"/>
<line x1="3" y1="4" x2="17" y2="4" stroke="#60a5fa" stroke-width="0.8" stroke-opacity="0.5"/>
<line x1="3" y1="12" x2="17" y2="12" stroke="#60a5fa" stroke-width="0.8" stroke-opacity="0.5"/>
</g>
<text x="884" y="236" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="white" font-weight="600">홈페이지 제작</text>
<text x="884" y="250" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.5)">Next.js 풀스택</text>
<!-- Card 3 -->
<rect x="1004" y="190" width="124" height="72" rx="8" fill="rgba(255,255,255,0.05)" stroke="rgba(255,255,255,0.1)" stroke-width="1"/>
<!-- Sparkle/AI icon -->
<g transform="translate(1016, 202)">
<circle cx="10" cy="10" r="6" stroke="#a78bfa" stroke-width="1.2" fill="none"/>
<line x1="10" y1="1" x2="10" y2="4" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
<line x1="10" y1="16" x2="10" y2="19" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
<line x1="1" y1="10" x2="4" y2="10" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
<line x1="16" y1="10" x2="19" y2="10" stroke="#a78bfa" stroke-width="1.2" stroke-linecap="round"/>
</g>
<text x="1016" y="236" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.7)" font-weight="600">AI 사주 분석</text>
<text x="1016" y="250" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="8.5" fill="rgba(255,255,255,0.4)">Gemini 연동</text>
<!-- Bottom section in browser -->
<rect x="740" y="274" width="408" height="72" rx="8" fill="rgba(255,255,255,0.03)" stroke="rgba(255,255,255,0.07)" stroke-width="1"/>
<text x="750" y="294" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.35)">최근 완성 프로젝트</text>
<!-- Project item 1 -->
<circle cx="756" cy="314" r="4" fill="rgba(37,99,235,0.6)"/>
<text x="766" y="318" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.5)">소상공인 예약 관리 시스템</text>
<!-- Project item 2 -->
<circle cx="756" cy="330" r="4" fill="rgba(124,58,237,0.6)"/>
<text x="766" y="334" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="9" fill="rgba(255,255,255,0.5)">부동산 매물 분석 대시보드</text>
<!-- ===== BOTTOM BAR ===== -->
<rect x="0" y="368" width="1200" height="32" fill="url(#bn-bottomBar)"/>
<line x1="0" y1="368" x2="1200" y2="368" stroke="rgba(99,102,241,0.5)" stroke-width="1"/>
<text x="600" y="389" font-family="'Malgun Gothic','Apple SD Gothic Neo',sans-serif" font-size="13" fill="rgba(255,255,255,0.85)" text-anchor="middle" font-weight="700">지금 무료 상담 받기 → jaengseungmade.vercel.app</text>
</svg>