SamProject/sam-docs
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8e70987e42c5ff6f808dedd2d0236b924f100fbe
sam-docs/brochure/v9/slides/brochure-dashboard-back.html
김보곤 8e70987e42 docs: [brochure] v1~v9 브로슈어 SAM BI 브랜딩 통일 
- (주)코드브릿지엑스 → SAM
- www.codebridge-x.com → www.sam.co.kr
- contact@codebridge-x.com → contact@sam.co.kr
- 푸터 문구 SAM — Smart Automation Management 통일
2026-03-03 18:58:37 +09:00

229 lines
15 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
width: 405pt; height: 720pt;
font-family: 'Pretendard', sans-serif;
background: #FFFFFF;
padding: 24pt 28pt 14pt 32pt;
display: flex; flex-direction: column;
position: relative;
}
</style>
</head>
<body>
<!-- Left accent line -->
<div style="position: absolute; left: 0; top: 0; width: 3pt; height: 100%; background: #6366F1;"></div>
<!-- Header -->
<div style="display: flex; align-items: center; gap: 8pt; margin-bottom: 18pt;">
<img src="/home/aweso/sam/docs/assets/bi/sam_bi_black.png" style="height: 18pt;">
<div style="flex: 1;"></div>
<p style="white-space: nowrap; font-size: 6pt; color: #CBD5E1; letter-spacing: 0.15em;">FEATURES & PRICING</p>
</div>
<!-- Section: 7 features as text rows -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">대시보드 핵심 기능</p>
<div style="display: flex; flex-direction: column; gap: 3pt;">
<!-- 01 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">실시간 KPI 카드</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">매출, 수주, 납기율, 승인 대기</p>
</div>
<!-- 02 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">조직 실적 트리</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">계층별 팀/개인 실적 펼쳐보기</p>
</div>
<!-- 03 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">역할별 수당 현황</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">판매자/관리자/협업자 배분 확인</p>
</div>
<!-- 04 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">승인 대기 알림</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">가입/지급 미처리 빨간 뱃지</p>
</div>
<!-- 05 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">기간별 트렌드</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">당월/분기/연간 추이 차트</p>
</div>
<!-- 06 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">수익 시뮬레이터</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">가상 시나리오 수당/마진 계산</p>
</div>
<!-- 07 -->
<div style="display: flex; align-items: center; gap: 6pt; padding: 4pt 0;">
<div style="width: 4pt; height: 4pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #0F172A; width: 60pt;">모바일 대응</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">스마트폰으로 KPI 확인/승인</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
<!-- 4 role cards - ultra minimal -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 5pt;">
<!-- CEO -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="12" cy="8" r="4" fill="none" stroke="#6366F1" stroke-width="0.8"/>
<path d="M4 20 Q4 14 12 14 Q20 14 20 20" fill="none" stroke="#6366F1" stroke-width="0.8"/>
<path d="M8 4 L12 1 L16 4" fill="none" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #6366F1;">CEO</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">전사 KPI 총괄</p>
</div>
<!-- Manager -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="8" cy="8" r="3" fill="none" stroke="#818CF8" stroke-width="0.8"/>
<circle cx="16" cy="8" r="3" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.5"/>
<path d="M2 18 Q2 13 8 13 Q14 13 14 18" fill="none" stroke="#818CF8" stroke-width="0.8"/>
<path d="M12 18 Q12 13 16 13 Q22 13 22 18" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.5"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #818CF8;">관리자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">팀 실적 관리</p>
</div>
<!-- Operator -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<circle cx="12" cy="12" r="8" fill="none" stroke="#6366F1" stroke-width="0.8" opacity="0.3"/>
<circle cx="12" cy="12" r="3" fill="none" stroke="#6366F1" stroke-width="0.8"/>
<line x1="12" y1="4" x2="12" y2="6" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
<line x1="12" y1="18" x2="12" y2="20" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
<line x1="4" y1="12" x2="6" y2="12" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
<line x1="18" y1="12" x2="20" y2="12" stroke="#6366F1" stroke-width="0.7" stroke-linecap="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #6366F1;">운영자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">인력/승인 관리</p>
</div>
<!-- Sales -->
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 5pt; text-align: center;">
<svg viewBox="0 0 24 24" width="14pt" height="14pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 3pt;">
<rect x="4" y="3" width="16" height="18" rx="2" fill="none" stroke="#818CF8" stroke-width="0.8" opacity="0.4"/>
<line x1="7" y1="8" x2="17" y2="8" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
<line x1="7" y1="11" x2="14" y2="11" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
<line x1="7" y1="14" x2="12" y2="14" stroke="#818CF8" stroke-width="0.5" opacity="0.3"/>
<path d="M14 16 L16 18 L20 13" fill="none" stroke="#818CF8" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 7pt; font-weight: 700; color: #818CF8;">영업자</p>
<p style="white-space: nowrap; font-size: 5pt; color: #64748B; margin-top: 2pt;">내 실적 조회</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
<!-- Pricing - clean typography -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">투자 비용</p>
<div style="display: flex; gap: 6pt;">
<!-- Base package -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-bottom: 3pt;">대시보드 포함 기본 패키지</p>
<p style="white-space: nowrap; font-size: 15pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B; margin-top: 2pt;">+ 월 50만원 (유지보수)</p>
<div style="margin-top: 5pt; padding-top: 5pt; border-top: 1pt solid #F1F5F9;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">CEO 대시보드 + 견적/수주 + 생산</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1;">인사/회계 무료 포함</p>
</div>
</div>
<!-- Add-ons -->
<div style="flex: 1;">
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-bottom: 5pt;">추가 옵션 (선택)</p>
<div style="display: flex; flex-direction: column; gap: 4pt;">
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">생산공정 관리</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">+500만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">품질관리(인정검사)</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">+2,000만원</p>
</div>
<div style="display: flex; justify-content: space-between;">
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">AI 견적 자동 생성</p>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">월 10~20만원</p>
</div>
</div>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 14pt;"></div>
<!-- Process steps - simple numbered list -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #6366F1; margin-bottom: 8pt;">도입 프로세스</p>
<div style="display: flex; gap: 3pt; align-items: center;">
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">01</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">현장 인터뷰</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
</div>
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">02</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">맞춤 개발</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">2~4주</p>
</div>
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">03</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">데이터 이관</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
</div>
<svg viewBox="0 0 8 8" width="5pt" height="5pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M2 4 L6 4 M5 2.5 L6.5 4 L5 5.5" fill="none" stroke="#CBD5E1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 14pt; font-weight: 300; color: #6366F1; opacity: 0.4;">04</p>
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 600; color: #0F172A; margin-top: 2pt;">교육/안정화</p>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">1~2주</p>
</div>
</div>
</div>
<!-- CTA -->
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 6pt; padding: 12pt 14pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 10pt; font-weight: 800; color: #0F172A;">무료 데모를 신청하세요</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B; margin-top: 2pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1;">contact@sam.co.kr</p>
<p style="white-space: nowrap; font-size: 5.5pt; color: #CBD5E1; margin-top: 2pt;">www.sam.co.kr</p>
</div>
</div>
</div>
<!-- Footer -->
<div style="margin-top: 6pt; text-align: center;">
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1;">SAM</p>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink