feat(design): Variant UI style applied - layout maintained
Based on Variant ZIO Complete Website design (screenshot1-13): - tokens.css: color palette (#003366, #005A8C, #00A0C8), Pretendard font, 4px grid - global.css: section-label-v, section-title-v, v-card, v-stats-section, btn-v-* - Home.jsx: SVG icons for Business cards, Variant-style section labels, dark navy KPI section - Common.css: page-hero improved (navy gradient), section labels cyan, sub-nav refined Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
DESKTOP-TKLFCPRython
parent
06568073f2
commit
dfc8f1484b
@ -1,19 +1,82 @@
|
||||
.inner-page { padding-top: var(--header-h); }
|
||||
.inner-page { padding-top: var(--header-h); }
|
||||
|
||||
/* Variant 스타일 page-hero */
|
||||
.page-hero {
|
||||
background: linear-gradient(135deg, var(--secondary), var(--primary-dark));
|
||||
padding: 60px 0; color: #fff;
|
||||
background: linear-gradient(135deg, #002752 0%, #003366 60%, #005A8C 100%);
|
||||
padding: 64px 0 56px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-hero-title { font-size: 40px; font-weight: 900; margin: 8px 0 12px; }
|
||||
.page-hero p { color: rgba(255,255,255,.75); font-size: 16px; }
|
||||
.page-hero::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -80px; top: -80px;
|
||||
width: 320px; height: 320px;
|
||||
background: radial-gradient(circle, rgba(0,160,200,.18) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.section-label {
|
||||
display: inline-block;
|
||||
font-size: 12px; font-weight: 700; letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: #00A0C8;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.page-hero .section-label { color: #29B8D8; opacity: .9; }
|
||||
.page-hero-title {
|
||||
font-size: clamp(28px, 4vw, 42px);
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 6px 0 10px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.page-hero p { color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.7; }
|
||||
|
||||
/* 서브 네비게이션 Variant 스타일 */
|
||||
.sub-nav {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #E2E8F0;
|
||||
position: sticky; top: var(--header-h); z-index: 10;
|
||||
box-shadow: 0 2px 8px rgba(0,51,102,.06);
|
||||
}
|
||||
.sub-nav .container { display: flex; gap: 0; }
|
||||
.sub-nav-item {
|
||||
padding: 16px 20px;
|
||||
font-size: 14px; font-weight: 500;
|
||||
color: #475569;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 200ms;
|
||||
text-decoration: none;
|
||||
}
|
||||
.sub-nav-item:hover { color: #003366; background: #F8FAFC; }
|
||||
.sub-nav-item.active {
|
||||
color: #003366;
|
||||
border-bottom-color: #00A0C8;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 섹션 공통 */
|
||||
.section { padding: 80px 0; }
|
||||
.section-header { text-align: center; margin-bottom: 48px; }
|
||||
.section-title {
|
||||
font-size: clamp(24px, 3.5vw, 38px);
|
||||
font-weight: 800;
|
||||
color: #003366;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.25;
|
||||
}
|
||||
.section-title em { color: #00A0C8; font-style: normal; }
|
||||
.section-desc { font-size: 16px; color: #475569; margin-top: 12px; line-height: 1.7; }
|
||||
|
||||
/* ── 정책/약관 페이지 ─────────────────────────────────────── */
|
||||
.prose { color: var(--gray-700); line-height: 1.8; font-size: 15px; }
|
||||
.prose h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin: 32px 0 12px; border-left: 4px solid var(--accent); padding-left: 12px; }
|
||||
.prose h2 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin: 32px 0 12px; border-left: 4px solid #00A0C8; padding-left: 12px; }
|
||||
.prose p { margin-bottom: 14px; }
|
||||
.prose ul { margin: 0 0 14px 20px; }
|
||||
.prose ul li { margin-bottom: 6px; }
|
||||
.prose a { color: var(--accent); }
|
||||
.prose a { color: #00A0C8; }
|
||||
.policy-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
|
||||
.policy-table th, .policy-table td { padding: 10px 14px; border: 1px solid var(--gray-200); }
|
||||
.policy-table th { background: var(--gray-50); font-weight: 600; color: var(--gray-700); text-align: left; }
|
||||
.policy-footer { margin-top: 40px; padding: 20px; background: var(--gray-50); border-radius: 10px; font-size: 13px; color: var(--gray-500); line-height: 1.8; }
|
||||
.policy-table th, .policy-table td { padding: 10px 14px; border: 1px solid #E2E8F0; }
|
||||
.policy-table th { background: #F8FAFC; font-weight: 600; color: #475569; text-align: left; }
|
||||
.policy-footer { margin-top: 40px; padding: 20px; background: #F8FAFC; border-radius: 10px; font-size: 13px; color: #94A3B8; line-height: 1.8; }
|
||||
|
||||
@ -29,37 +29,70 @@ const SLIDES = [
|
||||
},
|
||||
];
|
||||
|
||||
/* ── 핵심 사업 영역 ──────────────────────────────────────── */
|
||||
/* ── 핵심 사업 영역 (Variant SVG 아이콘) ─────────────────── */
|
||||
const BUSINESS = [
|
||||
{
|
||||
icon: '🤖',
|
||||
svg: (
|
||||
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="4" width="10" height="10" rx="2.5" fill="#005A8C" opacity=".9"/>
|
||||
<rect x="18" y="4" width="10" height="10" rx="2.5" fill="#00A0C8" opacity=".8"/>
|
||||
<rect x="4" y="18" width="10" height="10" rx="2.5" fill="#00A0C8" opacity=".6"/>
|
||||
<rect x="18" y="18" width="10" height="10" rx="2.5" fill="#003366" opacity=".85"/>
|
||||
<path d="M14 9h4M9 14v4M23 14v4M14 23h4" stroke="#fff" strokeWidth="1.5" strokeLinecap="round"/>
|
||||
</svg>
|
||||
),
|
||||
title: 'AI 자동화',
|
||||
desc: 'GUARDiA ITSM 플랫폼으로 레거시 인프라 운영을 완전 자동화',
|
||||
path: '/solution/guardia',
|
||||
color: 'var(--primary)',
|
||||
},
|
||||
{
|
||||
icon: '🏗️',
|
||||
svg: (
|
||||
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16 3L28 9v14L16 29 4 23V9L16 3z" fill="#E8F0F8" stroke="#005A8C" strokeWidth="1.5"/>
|
||||
<path d="M16 3v26M4 9l12 6 12-6" stroke="#005A8C" strokeWidth="1.5" strokeLinecap="round"/>
|
||||
<circle cx="16" cy="15" r="3" fill="#00A0C8"/>
|
||||
</svg>
|
||||
),
|
||||
title: 'SI 구축',
|
||||
desc: '공공기관 정보화사업 시스템 통합 및 맞춤형 개발',
|
||||
path: '/business/reference',
|
||||
color: 'var(--accent)',
|
||||
},
|
||||
{
|
||||
icon: '💼',
|
||||
svg: (
|
||||
<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="3" y="5" width="26" height="22" rx="3" fill="#E8F0F8" stroke="#005A8C" strokeWidth="1.5"/>
|
||||
<path d="M9 22l4-6 4 3 4-8 4 5" stroke="#00A0C8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<circle cx="9" cy="22" r="2" fill="#003366"/>
|
||||
<circle cx="13" cy="16" r="2" fill="#005A8C"/>
|
||||
<circle cx="17" cy="19" r="2" fill="#00A0C8"/>
|
||||
<circle cx="21" cy="11" r="2" fill="#005A8C"/>
|
||||
<circle cx="25" cy="16" r="2" fill="#003366"/>
|
||||
</svg>
|
||||
),
|
||||
title: 'ERP·CRM·BI',
|
||||
desc: '기업 경영 효율화를 위한 통합 솔루션 패키지',
|
||||
path: '/solution/erp',
|
||||
color: '#10B981',
|
||||
},
|
||||
];
|
||||
|
||||
/* ── GUARDiA 핵심 기능 ───────────────────────────────────── */
|
||||
/* ── GUARDiA 핵심 기능 (SVG 아이콘) ─────────────────────── */
|
||||
const GUARDIA_FEATURES = [
|
||||
{ icon: '💬', label: 'ChatOps', desc: '메신저 명령으로 인프라 제어' },
|
||||
{ icon: '🔧', label: '에이전트리스', desc: 'SSH만으로 에이전트 설치 없음' },
|
||||
{ icon: '📊', label: '통합 ITSM', desc: 'SR·인시던트·변경·SLA 통합' },
|
||||
{ icon: '🔒', label: '엔터프라이즈 보안', desc: 'MFA·PAM·Zero Trust' },
|
||||
{
|
||||
svg: <svg viewBox="0 0 24 24" fill="none"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" stroke="#00A0C8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
|
||||
label: 'ChatOps', desc: '메신저 명령으로 인프라 제어',
|
||||
},
|
||||
{
|
||||
svg: <svg viewBox="0 0 24 24" fill="none"><rect x="2" y="3" width="20" height="14" rx="2" stroke="#00A0C8" strokeWidth="2"/><path d="M8 21h8M12 17v4" stroke="#00A0C8" strokeWidth="2" strokeLinecap="round"/><path d="M6 9h.01M9 9h6" stroke="#00A0C8" strokeWidth="2" strokeLinecap="round"/></svg>,
|
||||
label: '에이전트리스', desc: 'SSH만으로 에이전트 설치 없음',
|
||||
},
|
||||
{
|
||||
svg: <svg viewBox="0 0 24 24" fill="none"><path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z" stroke="#00A0C8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
|
||||
label: '통합 ITSM', desc: 'SR·인시던트·변경·SLA 통합',
|
||||
},
|
||||
{
|
||||
svg: <svg viewBox="0 0 24 24" fill="none"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke="#00A0C8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
|
||||
label: '엔터프라이즈 보안', desc: 'MFA·PAM·Zero Trust',
|
||||
},
|
||||
];
|
||||
|
||||
/* ── KPI 수치 ────────────────────────────────────────────── */
|
||||
@ -152,40 +185,43 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── 핵심 사업 영역 ───────────────────────────────── */}
|
||||
<section className="section section-business">
|
||||
{/* ── 핵심 사업 영역 (Variant 스타일) ─────────────────── */}
|
||||
<section className="section py-section bg-light">
|
||||
<div className="container">
|
||||
<div className="section-header">
|
||||
<span className="section-label">Our Business</span>
|
||||
<h2 className="section-title">기업과 기관을 위한<br/><em>맞춤형 IT 솔루션</em></h2>
|
||||
<div className="divider" />
|
||||
<div style={{ textAlign: 'center', marginBottom: '48px' }}>
|
||||
<span className="section-label-v">저희 서비스</span>
|
||||
<h2 className="section-title-v">핵심 전문성 및 솔루션</h2>
|
||||
<div className="section-underline" />
|
||||
</div>
|
||||
<div className="business-grid">
|
||||
<div className="grid-3">
|
||||
{BUSINESS.map((b, i) => (
|
||||
<Link to={b.path} key={i} className="business-card">
|
||||
<div className="business-icon" style={{ background: b.color + '18', color: b.color }}>
|
||||
{b.icon}
|
||||
<Link to={b.path} key={i} style={{ textDecoration: 'none' }}>
|
||||
<div className="v-card" style={{ height: '100%' }}>
|
||||
<div className="v-icon-box">{b.svg}</div>
|
||||
<h3 className="v-card-title">{b.title}</h3>
|
||||
<p className="v-card-desc">{b.desc}</p>
|
||||
<span style={{ display: 'inline-block', marginTop: '16px', fontSize: '14px',
|
||||
fontWeight: 700, color: 'var(--v-cyan-500)', letterSpacing: '.02em' }}>
|
||||
자세히 보기 →
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="business-title">{b.title}</h3>
|
||||
<p className="business-desc">{b.desc}</p>
|
||||
<span className="business-more" style={{ color: b.color }}>자세히 보기 →</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── GUARDiA 솔루션 하이라이트 ──────────────────────── */}
|
||||
<section className="section section-guardia">
|
||||
{/* ── GUARDiA 솔루션 하이라이트 (Variant 스타일) ────────── */}
|
||||
<section className="section section-guardia py-section">
|
||||
<div className="container">
|
||||
<div className="guardia-inner">
|
||||
<div className="guardia-text">
|
||||
<span className="section-label">대표 솔루션</span>
|
||||
<h2 className="section-title" style={{textAlign:'left'}}>
|
||||
<em>GUARDiA ITSM</em><br/>
|
||||
AI 기반 인프라 자율 운영
|
||||
<span className="section-label-v" style={{ textAlign: 'left' }}>대표 솔루션</span>
|
||||
<h2 className="section-title-v" style={{ textAlign: 'left' }}>
|
||||
GUARDiA ITSM<br/>
|
||||
<span style={{ color: 'var(--v-cyan-500)' }}>AI 기반 인프라 자율 운영</span>
|
||||
</h2>
|
||||
<div className="divider divider-left" />
|
||||
<div className="section-underline left" />
|
||||
<p className="guardia-desc">
|
||||
1,000개 이상의 관공서 레거시 인프라를 메신저 한 줄 명령으로 제어하는
|
||||
온프레미스 AI ChatOps 플랫폼. 에이전트 설치 없이 SSH/SFTP만으로
|
||||
@ -194,19 +230,21 @@ export default function Home() {
|
||||
<div className="guardia-features">
|
||||
{GUARDIA_FEATURES.map((f, i) => (
|
||||
<div key={i} className="guardia-feature">
|
||||
<span className="feature-icon">{f.icon}</span>
|
||||
<span className="feature-icon" style={{ background: 'var(--v-blue-100)', borderRadius: '8px', padding: '8px', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '40px', height: '40px', flexShrink: 0 }}>
|
||||
{f.svg}
|
||||
</span>
|
||||
<div>
|
||||
<strong>{f.label}</strong>
|
||||
<p>{f.desc}</p>
|
||||
<strong style={{ color: 'var(--v-navy-700)' }}>{f.label}</strong>
|
||||
<p style={{ color: 'var(--v-gray-600)' }}>{f.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="guardia-actions">
|
||||
<Link to="/solution/guardia" className="btn btn-primary">
|
||||
<div className="guardia-actions" style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
|
||||
<Link to="/solution/guardia" className="btn-v-primary">
|
||||
GUARDiA 상세보기
|
||||
</Link>
|
||||
<Link to="/support/contact" className="btn btn-outline">
|
||||
<Link to="/support/contact" className="btn-v-ghost">
|
||||
도입 문의
|
||||
</Link>
|
||||
</div>
|
||||
@ -242,27 +280,37 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── KPI 수치 ────────────────────────────────────────── */}
|
||||
<section className="section-kpi">
|
||||
{/* ── KPI 수치 (Variant 다크 네이비) ─────────────────── */}
|
||||
<section className="v-stats-section">
|
||||
<div className="container">
|
||||
<div className="kpi-grid">
|
||||
<div style={{ textAlign: 'center', marginBottom: '56px' }}>
|
||||
<span className="section-label-v" style={{ color: 'var(--v-cyan-400)' }}>숫자로 보는 지오정보기술</span>
|
||||
<h2 style={{ fontSize: 'clamp(24px,3vw,36px)', fontWeight: 800, color: '#fff', marginTop: '8px' }}>
|
||||
신뢰받는 IT 파트너
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid-4">
|
||||
{KPIS.map((k, i) => (
|
||||
<div key={i} className="kpi-item">
|
||||
<div className="kpi-value">{k.value}</div>
|
||||
<div className="kpi-label">{k.label}</div>
|
||||
<div key={i} style={{ textAlign: 'center', padding: '24px 16px',
|
||||
borderRight: i < KPIS.length - 1 ? '1px solid rgba(255,255,255,.1)' : 'none' }}>
|
||||
<div className="v-stat-number">
|
||||
{k.value.replace(/[+%년]/g, '')}
|
||||
<span className="v-stat-unit">{k.value.match(/[+%년]/)?.[0] || ''}</span>
|
||||
</div>
|
||||
<div className="v-stat-label">{k.label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── 최신 소식 ───────────────────────────────────────── */}
|
||||
<section className="section section-news">
|
||||
{/* ── 최신 소식 (Variant 스타일) ──────────────────────── */}
|
||||
<section className="section section-news py-section bg-white">
|
||||
<div className="container">
|
||||
<div className="section-header">
|
||||
<span className="section-label">Latest News</span>
|
||||
<h2 className="section-title">지오정보기술 <em>소식</em></h2>
|
||||
<div className="divider" />
|
||||
<div className="section-header" style={{ marginBottom: '48px' }}>
|
||||
<span className="section-label-v">최신 소식</span>
|
||||
<h2 className="section-title-v">지오정보기술 소식</h2>
|
||||
<div className="section-underline" />
|
||||
</div>
|
||||
<div className="news-grid">
|
||||
{news.length > 0 ? news.map(n => (
|
||||
@ -298,20 +346,28 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── CTA 배너 ────────────────────────────────────────── */}
|
||||
<section className="section-cta">
|
||||
{/* ── CTA 배너 (Variant v-cta-banner) ─────────────────── */}
|
||||
<section className="py-section bg-light">
|
||||
<div className="container">
|
||||
<div className="cta-inner">
|
||||
<div className="cta-text">
|
||||
<h2>GUARDiA ITSM 도입을 검토하고 계신가요?</h2>
|
||||
<p>전문 컨설턴트가 귀 기관 환경에 맞는 최적의 방안을 제안해 드립니다.</p>
|
||||
<div className="v-cta-banner">
|
||||
<div>
|
||||
<div className="v-cta-title">
|
||||
GUARDiA ITSM 도입을 검토하고 계신가요?
|
||||
</div>
|
||||
<p className="v-cta-sub">
|
||||
전문 컨설턴트가 귀 기관 환경에 맞는 최적의 방안을 제안해 드립니다.
|
||||
</p>
|
||||
</div>
|
||||
<div className="cta-actions">
|
||||
<Link to="/support/contact" className="btn btn-white btn-lg">
|
||||
<div style={{ display: 'flex', gap: '12px', flexShrink: 0, flexWrap: 'wrap' }}>
|
||||
<Link to="/support/contact" className="btn-v-primary btn-v-cyan">
|
||||
무료 상담 신청
|
||||
</Link>
|
||||
<Link to="/solution/guardia" className="btn btn-outline btn-lg" style={{color:'#fff',borderColor:'rgba(255,255,255,.5)'}}>
|
||||
제품 소개서 다운로드
|
||||
<Link to="/solution/guardia"
|
||||
style={{ display: 'inline-flex', alignItems: 'center', padding: '12px 24px',
|
||||
background: 'rgba(255,255,255,.15)', color: '#fff', fontWeight: 600, fontSize: '15px',
|
||||
borderRadius: '9999px', border: '1px solid rgba(255,255,255,.3)',
|
||||
textDecoration: 'none', transition: 'all 240ms' }}>
|
||||
제품 소개서 →
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/* ============================================================
|
||||
(주)지오정보기술 글로벌 스타일 — URP 스타일 기반
|
||||
(주)지오정보기술 글로벌 스타일 — Variant 디자인 적용
|
||||
============================================================ */
|
||||
@import './tokens.css';
|
||||
|
||||
:root {
|
||||
/* ── 브랜드 컬러 ── */
|
||||
@ -27,8 +28,8 @@
|
||||
--warning: #F59E0B;
|
||||
--danger: #EF4444;
|
||||
|
||||
/* ── 타이포그래피 ── */
|
||||
--font-sans: 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
|
||||
/* ── 타이포그래피 (Pretendard 우선) ── */
|
||||
--font-sans: 'Pretendard', 'Noto Sans KR', 'Inter', -apple-system, sans-serif;
|
||||
--font-en: 'Inter', sans-serif;
|
||||
|
||||
/* ── 레이아웃 ── */
|
||||
@ -213,3 +214,181 @@ button { cursor: pointer; border: none; background: none; font-family: inherit;
|
||||
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
|
||||
.container { padding: 0 16px; }
|
||||
}
|
||||
|
||||
/* ════════════════════════════════════════════════════
|
||||
Variant 디자인 시스템 — 공통 UI 요소
|
||||
════════════════════════════════════════════════════ */
|
||||
|
||||
/* ── 섹션 라벨 (시안 소문자 + 굵은 텍스트) ── */
|
||||
.section-label-v {
|
||||
display: inline-block;
|
||||
font-size: var(--v-label-size, 12px);
|
||||
font-weight: var(--v-label-weight, 700);
|
||||
letter-spacing: var(--v-label-spacing, 0.1em);
|
||||
text-transform: uppercase;
|
||||
color: var(--v-cyan-500, #00A0C8);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
/* ── 섹션 제목 (Variant 스타일) ── */
|
||||
.section-title-v {
|
||||
font-size: clamp(28px, 3.5vw, 42px);
|
||||
font-weight: 800;
|
||||
color: var(--v-navy-700, #003366);
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
/* ── 언더라인 강조 (시안) ── */
|
||||
.section-underline {
|
||||
width: 48px; height: 3px;
|
||||
background: var(--v-cyan-500, #00A0C8);
|
||||
border-radius: 2px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
.section-underline.left { margin-left: 0; }
|
||||
|
||||
/* ── 서비스 아이콘 카드 (Variant 스타일) ── */
|
||||
.v-icon-box {
|
||||
width: 64px; height: 64px;
|
||||
background: var(--v-blue-100, #E8F0F8);
|
||||
border-radius: var(--v-radius-md, 12px);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
transition: all var(--v-ease, 240ms);
|
||||
}
|
||||
.v-icon-box svg { width: 32px; height: 32px; }
|
||||
.v-card:hover .v-icon-box {
|
||||
background: var(--v-cyan-100, #E8F7FB);
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
/* ── 서비스 카드 (Variant 스타일) ── */
|
||||
.v-card {
|
||||
background: #fff;
|
||||
border-radius: var(--v-radius-lg, 16px);
|
||||
border: 1px solid var(--v-gray-200, #E2E8F0);
|
||||
padding: 32px 28px;
|
||||
box-shadow: var(--v-shadow-sm);
|
||||
transition: all var(--v-ease, 240ms);
|
||||
}
|
||||
.v-card:hover {
|
||||
box-shadow: var(--v-shadow-lg);
|
||||
transform: translateY(-4px);
|
||||
border-color: var(--v-blue-200, #C5D8EF);
|
||||
}
|
||||
.v-card-title {
|
||||
font-size: 18px; font-weight: 700;
|
||||
color: var(--v-navy-700, #003366);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.v-card-desc {
|
||||
font-size: 14px; line-height: 1.7;
|
||||
color: var(--v-gray-600, #475569);
|
||||
}
|
||||
|
||||
/* ── 통계 섹션 (다크 네이비) ── */
|
||||
.v-stats-section {
|
||||
background: var(--v-navy-800, #002752);
|
||||
padding: var(--v-section-py, 96px) 0;
|
||||
}
|
||||
.v-stat-number {
|
||||
font-size: clamp(32px, 4vw, 52px);
|
||||
font-weight: 900;
|
||||
color: #fff;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1;
|
||||
}
|
||||
.v-stat-label {
|
||||
font-size: 14px; color: rgba(255,255,255,.65);
|
||||
margin-top: 8px; font-weight: 500;
|
||||
}
|
||||
.v-stat-unit {
|
||||
font-size: 18px; font-weight: 700; color: var(--v-cyan-400, #29B8D8);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ── CTA 배너 (다크) ── */
|
||||
.v-cta-banner {
|
||||
background: linear-gradient(135deg, var(--v-navy-700), var(--v-navy-500));
|
||||
border-radius: var(--v-radius-xl, 24px);
|
||||
padding: 48px 56px;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 32px;
|
||||
box-shadow: var(--v-shadow-lg);
|
||||
}
|
||||
.v-cta-title {
|
||||
font-size: clamp(20px, 2.5vw, 28px);
|
||||
font-weight: 800; color: #fff;
|
||||
}
|
||||
.v-cta-sub {
|
||||
font-size: 15px; color: rgba(255,255,255,.7);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* ── Variant 버튼 스타일 ── */
|
||||
.btn-v-primary {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 13px 28px;
|
||||
background: var(--v-navy-700, #003366);
|
||||
color: #fff; font-weight: 700; font-size: 15px;
|
||||
border-radius: var(--v-radius-full, 9999px);
|
||||
border: none; cursor: pointer;
|
||||
transition: all var(--v-ease, 240ms);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-v-primary:hover {
|
||||
background: var(--v-navy-600, #004080);
|
||||
box-shadow: var(--v-shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.btn-v-ghost {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 12px 28px;
|
||||
background: transparent;
|
||||
color: var(--v-navy-700, #003366); font-weight: 600; font-size: 15px;
|
||||
border-radius: var(--v-radius-full, 9999px);
|
||||
border: 2px solid var(--v-navy-700, #003366);
|
||||
cursor: pointer; transition: all var(--v-ease, 240ms);
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn-v-ghost:hover {
|
||||
background: var(--v-blue-100, #E8F0F8);
|
||||
}
|
||||
.btn-v-cyan {
|
||||
background: var(--v-cyan-500, #00A0C8);
|
||||
}
|
||||
.btn-v-cyan:hover { background: var(--v-cyan-400, #29B8D8); }
|
||||
|
||||
/* ── 파트너 로고 바 ── */
|
||||
.v-partners-bar {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
gap: 40px; flex-wrap: wrap;
|
||||
padding: 32px 0;
|
||||
border-top: 1px solid var(--v-gray-200);
|
||||
border-bottom: 1px solid var(--v-gray-200);
|
||||
margin: 32px 0;
|
||||
}
|
||||
.v-partner-item {
|
||||
font-size: 15px; font-weight: 700;
|
||||
color: var(--v-gray-400, #94A3B8);
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
transition: color var(--v-ease);
|
||||
}
|
||||
.v-partner-item:hover { color: var(--v-navy-700); }
|
||||
|
||||
/* ── 섹션 배경 종류 ── */
|
||||
.bg-white { background: #fff; }
|
||||
.bg-light { background: var(--v-gray-50, #F8FAFC); }
|
||||
.bg-navy { background: var(--v-navy-800, #002752); }
|
||||
.bg-navy-dark { background: var(--v-navy-900, #001a33); }
|
||||
|
||||
/* ── 섹션 패딩 ── */
|
||||
.py-section { padding: var(--v-section-py, 96px) 0; }
|
||||
.py-section-sm { padding: var(--v-section-py-sm, 64px) 0; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.v-cta-banner { flex-direction: column; padding: 32px 24px; }
|
||||
.v-stat-number { font-size: 28px; }
|
||||
.v-section-py { padding: 60px 0; }
|
||||
}
|
||||
|
||||
50
frontend/src/styles/tokens.css
Normal file
50
frontend/src/styles/tokens.css
Normal file
@ -0,0 +1,50 @@
|
||||
/* ── zio Variant 디자인 토큰 ── */
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
|
||||
:root {
|
||||
/* Variant 색상 팔레트 */
|
||||
--v-navy-900: #001a33;
|
||||
--v-navy-800: #002752;
|
||||
--v-navy-700: #003366;
|
||||
--v-navy-600: #004080;
|
||||
--v-navy-500: #005A8C;
|
||||
--v-cyan-500: #00A0C8;
|
||||
--v-cyan-400: #29B8D8;
|
||||
--v-cyan-100: #E8F7FB;
|
||||
--v-blue-100: #E8F0F8;
|
||||
--v-blue-200: #C5D8EF;
|
||||
|
||||
/* 뉴트럴 */
|
||||
--v-gray-50: #F8FAFC;
|
||||
--v-gray-100: #F1F5F9;
|
||||
--v-gray-200: #E2E8F0;
|
||||
--v-gray-400: #94A3B8;
|
||||
--v-gray-600: #475569;
|
||||
--v-gray-800: #1E293B;
|
||||
--v-gray-900: #0F172A;
|
||||
|
||||
/* 섹션 라벨 */
|
||||
--v-label-color: var(--v-cyan-500);
|
||||
--v-label-size: 12px;
|
||||
--v-label-weight: 700;
|
||||
--v-label-spacing: 0.1em;
|
||||
|
||||
/* 간격 */
|
||||
--v-section-py: 96px;
|
||||
--v-section-py-sm: 64px;
|
||||
|
||||
/* 반경 */
|
||||
--v-radius-sm: 8px;
|
||||
--v-radius-md: 12px;
|
||||
--v-radius-lg: 16px;
|
||||
--v-radius-xl: 24px;
|
||||
--v-radius-full: 9999px;
|
||||
|
||||
/* 그림자 */
|
||||
--v-shadow-sm: 0 1px 3px rgba(0,51,102,.08), 0 1px 2px rgba(0,51,102,.06);
|
||||
--v-shadow-md: 0 4px 12px rgba(0,51,102,.10), 0 2px 6px rgba(0,51,102,.06);
|
||||
--v-shadow-lg: 0 10px 30px rgba(0,51,102,.12), 0 4px 10px rgba(0,51,102,.06);
|
||||
|
||||
/* 전환 */
|
||||
--v-ease: 240ms cubic-bezier(.4,0,.2,1);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user