SamProject/sam-docs
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
sam-docs/brochure/v9/slides/brochure-dashboard-1page.html
김보곤 7a73e6c5a9 docs: [brochure] v1~v9 contact 이메일/무료 데모 삭제, 도메인 sam.it.kr 변경 및 PPTX 재생성 
- contact@sam.co.kr 행 삭제
- 무료 데모 관련 행 삭제
- www.sam.co.kr → www.sam.it.kr 변경
- v1~v9 1page + 2page PPTX 전체 재생성
2026-03-03 19:11:01 +09:00

264 lines
17 KiB
HTML
Raw Permalink 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: 22pt 24pt 12pt 28pt;
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: 16pt;">
<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: 5.5pt; color: #CBD5E1; letter-spacing: 0.15em;">v9</p>
</div>
<!-- Hero -->
<div style="margin-bottom: 14pt;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 600; color: #6366F1; letter-spacing: 0.15em; margin-bottom: 5pt;">EXECUTIVE DASHBOARD</p>
<p style="white-space: nowrap; font-size: 15pt; font-weight: 300; color: #0F172A; margin-bottom: 2pt;">대표님, 우리 회사</p>
<p style="white-space: nowrap; font-size: 15pt; font-weight: 800; color: #0F172A; margin-bottom: 6pt;">지금 어떤 상태인가요?</p>
<p style="white-space: nowrap; font-size: 6.5pt; color: #64748B;">보고 대기 없이, 로그인 한 번이면 전사 현황이 한눈에.</p>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 12pt;"></div>
<!-- Dashboard Mock UI - compact -->
<div style="background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 7pt; margin-bottom: 12pt;">
<!-- Title bar -->
<div style="display: flex; align-items: center; gap: 2pt; margin-bottom: 5pt;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #EF4444;"></div>
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #F59E0B;"></div>
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #10B981;"></div>
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1; margin-left: 4pt;">SAM CEO Dashboard</p>
</div>
<!-- KPI cards -->
<div style="display: flex; gap: 3pt; margin-bottom: 5pt;">
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #6366F1;">5.2억</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">+15.3%</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">월 매출</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #10B981;">127건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">+8건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">누적 수주</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #818CF8;">96%</p>
<p style="white-space: nowrap; font-size: 4pt; color: #10B981; font-weight: 600;">목표 달성</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">납기 준수율</p>
</div>
<div style="flex: 1; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 9pt; font-weight: 800; color: #EF4444;">5건</p>
<p style="white-space: nowrap; font-size: 4pt; color: #EF4444; font-weight: 600;">즉시 처리</p>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B; margin-top: 1pt;">승인 대기</p>
</div>
</div>
<!-- Chart area -->
<div style="display: flex; gap: 3pt;">
<div style="flex: 3; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt;">
<p style="white-space: nowrap; font-size: 4pt; color: #CBD5E1; margin-bottom: 2pt;">월별 매출 추이</p>
<svg viewBox="0 0 150 28" width="100%" height="20pt" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="14" x2="150" y2="14" stroke="#F1F5F9" stroke-width="0.5"/>
<path d="M5 24 L20 18 L35 20 L50 14 L65 10 L80 7 L95 9 L110 4 L125 6 L140 2" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="140" cy="2" r="1.5" fill="#6366F1"/>
</svg>
</div>
<div style="flex: 2; background: #FFFFFF; border: 1pt solid #F1F5F9; border-radius: 3pt; padding: 4pt; display: flex; align-items: center; gap: 3pt;">
<svg viewBox="0 0 36 36" width="24pt" height="24pt" xmlns="http://www.w3.org/2000/svg">
<circle cx="18" cy="18" r="12" fill="none" stroke="#F1F5F9" stroke-width="3.5"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#6366F1" stroke-width="3.5" stroke-dasharray="29 47" stroke-dashoffset="19" stroke-linecap="round"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#10B981" stroke-width="3.5" stroke-dasharray="19 57" stroke-dashoffset="-10" stroke-linecap="round"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#818CF8" stroke-width="3.5" stroke-dasharray="16 60" stroke-dashoffset="-29" stroke-linecap="round"/>
<circle cx="18" cy="18" r="12" fill="none" stroke="#F59E0B" stroke-width="3.5" stroke-dasharray="10 66" stroke-dashoffset="-45" stroke-linecap="round"/>
</svg>
<div style="display: flex; flex-direction: column; gap: 1.5pt;">
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #6366F1; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">영업1팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #10B981; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">영업2팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #818CF8; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">생산팀</p>
</div>
<div style="display: flex; align-items: center; gap: 2pt;">
<div style="width: 3pt; height: 3pt; background: #F59E0B; border-radius: 1pt;"></div>
<p style="white-space: nowrap; font-size: 4pt; color: #64748B;">품질팀</p>
</div>
</div>
</div>
</div>
</div>
<!-- 3 value props - compact -->
<div style="display: flex; gap: 4pt; margin-bottom: 12pt;">
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="7" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.3"/>
<path d="M10 5 L10 10 L13 12.5" fill="none" stroke="#6366F1" stroke-width="0.8" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">즉시 현황 파악</p>
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">3초면 전사 현황</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<rect x="3" y="11" width="3" height="6" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.4"/>
<rect x="8" y="7" width="3" height="10" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.6"/>
<rect x="13" y="3" width="3" height="14" rx="0.5" fill="none" stroke="#6366F1" stroke-width="0.7"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">데이터로 판단</p>
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">KPI/팀 성과 비교</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 6pt 5pt; text-align: center;">
<svg viewBox="0 0 20 20" width="12pt" height="12pt" xmlns="http://www.w3.org/2000/svg" style="margin-bottom: 2pt;">
<circle cx="10" cy="10" r="6.5" fill="none" stroke="#6366F1" stroke-width="0.7" opacity="0.3"/>
<path d="M7 10 L9 12 L13 8" fill="none" stroke="#6366F1" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #0F172A;">모바일 승인</p>
<p style="font-size: 5pt; color: #64748B; margin-top: 1pt;">즉시 결재 처리</p>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
<!-- Features list - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">핵심 기능</p>
<div style="display: flex; flex-wrap: wrap; gap: 2pt;">
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">실시간 KPI 카드</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">조직 실적 트리</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">역할별 수당 현황</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">승인 대기 알림</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">기간별 트렌드</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">수익 시뮬레이터</p>
</div>
<div style="display: flex; align-items: center; gap: 3pt; width: 48%; padding: 3pt 0;">
<div style="width: 3pt; height: 3pt; border-radius: 50%; background: #6366F1; flex-shrink: 0;"></div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #0F172A;">모바일 대응</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
<!-- 4 role cards - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">역할별 맞춤 화면</p>
<div style="display: flex; gap: 3pt;">
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">CEO</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">전사 KPI</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #818CF8;">관리자</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">팀 실적</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #6366F1;">운영자</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">인력/승인</p>
</div>
<div style="flex: 1; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 4pt; padding: 5pt 3pt; text-align: center;">
<p style="white-space: nowrap; font-size: 6pt; font-weight: 700; color: #818CF8;">영업자</p>
<p style="white-space: nowrap; font-size: 4.5pt; color: #64748B; margin-top: 1pt;">내 실적</p>
</div>
</div>
</div>
<!-- Thin divider -->
<div style="height: 1pt; background: #F1F5F9; margin-bottom: 10pt;"></div>
<!-- Pricing - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 5pt;">투자 비용</p>
<div style="display: flex; align-items: baseline; gap: 6pt;">
<p style="white-space: nowrap; font-size: 13pt; font-weight: 800; color: #0F172A;">2,000만원</p>
<p style="white-space: nowrap; font-size: 6pt; color: #64748B;">+ 월 50만원 (유지보수)</p>
</div>
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 2pt;">CEO 대시보드 + 견적/수주 + 생산 + 인사/회계 포함</p>
</div>
<!-- Process - compact -->
<div style="margin-bottom: 10pt;">
<p style="white-space: nowrap; font-size: 6.5pt; font-weight: 700; color: #6366F1; margin-bottom: 4pt;">도입 프로세스</p>
<div style="display: flex; gap: 2pt; align-items: center;">
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">01</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">현장 인터뷰</p>
</div>
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">02</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">맞춤 개발</p>
</div>
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">03</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">데이터 이관</p>
</div>
<svg viewBox="0 0 6 6" width="4pt" height="4pt" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
<path d="M1 3 L5 3 M4 1.5 L5.5 3 L4 4.5" fill="none" stroke="#CBD5E1" stroke-width="0.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div style="flex: 1; text-align: center;">
<p style="white-space: nowrap; font-size: 10pt; font-weight: 300; color: #6366F1; opacity: 0.35;">04</p>
<p style="white-space: nowrap; font-size: 5.5pt; font-weight: 600; color: #0F172A;">교육/안정화</p>
</div>
</div>
</div>
<!-- CTA + Footer -->
<div style="margin-top: auto; background: #F8FAFC; border: 1pt solid #F1F5F9; border-radius: 5pt; padding: 8pt 10pt;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<p style="white-space: nowrap; font-size: 5.5pt; color: #64748B; margin-top: 1pt;">대표님 전용 대시보드를 직접 체험</p>
</div>
<div style="text-align: right; border-left: 2pt solid #6366F1; padding-left: 8pt;">
<p style="white-space: nowrap; font-size: 5pt; color: #CBD5E1; margin-top: 1pt;">www.sam.it.kr</p>
</div>
</div>
</div>
<div style="margin-top: 4pt; text-align: center;">
<p style="white-space: nowrap; font-size: 4.5pt; color: #CBD5E1;">SAM</p>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink