샘플 홈페이지 기업 페이지 고도화
This commit is contained in:
@@ -3,19 +3,34 @@ import Link from 'next/link';
|
||||
export default function CorporateSample() {
|
||||
const services = [
|
||||
{
|
||||
icon: '🔧',
|
||||
title: 'IT 인프라 구축',
|
||||
desc: '기업 맞춤형 서버 환경 설계부터 클라우드 마이그레이션까지, 안정적인 IT 기반을 구축해드립니다.',
|
||||
desc: '기업 맞춤형 서버 환경 설계부터 클라우드 마이그레이션까지, 안정적인 IT 기반을 구축합니다.',
|
||||
detail: '온프레미스 · 하이브리드 클라우드 · AWS · Azure',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} style={{ width: 28, height: 28 }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M5 12H3a9 9 0 1018 0h-2M12 3v4m0 10v4M4.22 4.22l2.83 2.83m9.9 9.9l2.83 2.83M3 12h.01M20.99 12H21M4.22 19.78l2.83-2.83m9.9-9.9l2.83-2.83" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: '🔒',
|
||||
title: '보안 솔루션',
|
||||
desc: '최신 사이버 위협에 대응하는 엔터프라이즈급 보안 시스템을 제공합니다.',
|
||||
title: '사이버 보안 솔루션',
|
||||
desc: '최신 위협에 대응하는 엔터프라이즈급 보안 시스템. 침해사고 예방부터 대응까지 통합 관리합니다.',
|
||||
detail: 'ISMS · 취약점 분석 · 보안 모니터링 · 컴플라이언스',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} style={{ width: 28, height: 28 }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
{
|
||||
icon: '📡',
|
||||
title: '디지털 전환',
|
||||
desc: '레거시 시스템을 현대화하고 비즈니스 프로세스를 효율화하는 DX 컨설팅을 제공합니다.',
|
||||
title: '디지털 전환 (DX)',
|
||||
desc: '레거시 시스템을 현대화하고 비즈니스 프로세스를 자동화하는 DX 컨설팅을 제공합니다.',
|
||||
detail: 'ERP 연동 · 프로세스 자동화 · 데이터 시각화 · AI 도입',
|
||||
icon: (
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5} style={{ width: 28, height: 28 }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
@@ -23,197 +38,196 @@ export default function CorporateSample() {
|
||||
{ num: '15+', label: '년 업력' },
|
||||
{ num: '340+', label: '완료 프로젝트' },
|
||||
{ num: '180+', label: '기업 고객사' },
|
||||
{ num: '98%', label: '고객 만족도' },
|
||||
{ num: '99.9%', label: '서비스 가동률' },
|
||||
];
|
||||
|
||||
const certs = ['AWS Partner', 'ISO 27001', 'ISMS-P 인증', 'Microsoft Partner', 'Google Cloud'];
|
||||
|
||||
const clients = ['삼성전자', 'LG유플러스', '현대모비스', 'SK하이닉스', 'KT', '신한은행', 'NH농협', '롯데정보통신'];
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
quote: '마이그레이션 기간 동안 단 한 번의 서비스 중단도 없었습니다. 완벽한 이전이었습니다.',
|
||||
name: '이○○ CTO',
|
||||
company: '핀테크 스타트업',
|
||||
},
|
||||
{
|
||||
quote: '보안 감사 이후 취약점 제로. 컴플라이언스 대응이 이렇게 빠를 수 있다는 게 놀라웠습니다.',
|
||||
name: '박○○ IT팀장',
|
||||
company: '중견 제조사',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div style={{ background: '#ffffff', minHeight: '100vh', color: '#1e293b', fontFamily: "'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif" }}>
|
||||
<div style={{ background: '#ffffff', minHeight: '100vh', color: '#1e293b', fontFamily: 'system-ui, sans-serif' }}>
|
||||
<style>{`
|
||||
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
|
||||
.corp-nav-link:hover { color: #1d4ed8 !important; }
|
||||
.corp-service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.1); }
|
||||
.corp-service-card { transition: transform 0.3s, box-shadow 0.3s; }
|
||||
.corp-btn:hover { background: #1d4ed8 !important; }
|
||||
.corp-btn { transition: background 0.2s; }
|
||||
.corp-client:hover { background: #eff6ff !important; color: #1d4ed8 !important; }
|
||||
.corp-client { transition: background 0.2s, color 0.2s; }
|
||||
@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes floatDot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
|
||||
@keyframes gridPan { from { background-position: 0 0; } to { background-position: 60px 60px; } }
|
||||
.corp-card:hover { transform: translateY(-5px); box-shadow: 0 24px 64px rgba(29,78,216,0.1); }
|
||||
.corp-card { transition: transform 0.3s, box-shadow 0.3s; }
|
||||
.corp-client:hover { background: #eff6ff !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
|
||||
.corp-client { transition: all 0.2s; }
|
||||
.corp-cert:hover { border-color: #93c5fd !important; }
|
||||
.corp-cert { transition: border-color 0.2s; }
|
||||
.corp-btn-primary:hover { background: #1d4ed8 !important; box-shadow: 0 8px 24px rgba(29,78,216,0.4) !important; }
|
||||
.corp-btn-primary { transition: all 0.2s; }
|
||||
`}</style>
|
||||
|
||||
{/* Back Banner */}
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #1e1b4b, #312e81)',
|
||||
padding: '10px 24px',
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
}}>
|
||||
<Link href="/services/website" style={{
|
||||
color: '#a5b4fc', fontSize: 13, textDecoration: 'none', fontFamily: "'Noto Sans KR', sans-serif",
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
}}>
|
||||
<div style={{ background: 'linear-gradient(135deg, #1e1b4b, #312e81)', padding: '10px 24px', display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<Link href="/services/website" style={{ color: '#a5b4fc', fontSize: 13, textDecoration: 'none', fontFamily: "'Noto Sans KR', sans-serif", display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
← 홈페이지 제작 서비스로 돌아가기
|
||||
</Link>
|
||||
<span style={{ color: '#4c1d95', fontSize: 13 }}>|</span>
|
||||
<span style={{ color: '#6366f1', fontSize: 12, fontFamily: 'Montserrat, sans-serif', fontWeight: 700 }}>
|
||||
SAMPLE · 기업 홈페이지
|
||||
</span>
|
||||
<span style={{ color: '#4c1d95' }}>|</span>
|
||||
<span style={{ color: '#6366f1', fontSize: 12, fontFamily: 'Montserrat, sans-serif', fontWeight: 700 }}>SAMPLE · 기업 홈페이지</span>
|
||||
</div>
|
||||
|
||||
{/* Navbar */}
|
||||
<nav style={{
|
||||
background: '#ffffff', borderBottom: '1px solid #e2e8f0',
|
||||
padding: '0 48px', display: 'flex', alignItems: 'center',
|
||||
justifyContent: 'space-between', height: 64, position: 'sticky', top: 0, zIndex: 100,
|
||||
boxShadow: '0 2px 20px rgba(0,0,0,0.06)',
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<div style={{
|
||||
width: 36, height: 36, borderRadius: 8,
|
||||
background: 'linear-gradient(135deg, #1d4ed8, #1e40af)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'white', fontSize: 16, fontWeight: 800, fontFamily: 'Montserrat, sans-serif',
|
||||
}}>T</div>
|
||||
<nav style={{ background: '#fff', borderBottom: '1px solid #e2e8f0', padding: '0 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68, position: 'sticky', top: 0, zIndex: 100, boxShadow: '0 2px 16px rgba(0,0,0,0.05)' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<div style={{ width: 38, height: 38, borderRadius: 10, background: 'linear-gradient(135deg, #1d4ed8, #1e40af)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 16, fontWeight: 800, fontFamily: 'Montserrat, sans-serif' }}>T</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 15, fontWeight: 700, color: '#0f172a', fontFamily: 'Montserrat, sans-serif', lineHeight: 1 }}>
|
||||
TechSolution
|
||||
</div>
|
||||
<div style={{ fontSize: 10, color: '#64748b', letterSpacing: '0.05em' }}>㈜테크솔루션</div>
|
||||
<div style={{ fontSize: 15, fontWeight: 800, color: '#0f172a', fontFamily: 'Montserrat, sans-serif', lineHeight: 1 }}>TechSolution</div>
|
||||
<div style={{ fontSize: 10, color: '#94a3b8', letterSpacing: '0.1em', fontFamily: 'Montserrat, sans-serif' }}>ENTERPRISE IT</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
|
||||
{['회사소개', '서비스', '포트폴리오', '고객사', '채용', '연락처'].map((item) => (
|
||||
<span key={item} className="corp-nav-link" style={{
|
||||
fontSize: 14, color: '#475569', cursor: 'pointer',
|
||||
fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500,
|
||||
}}>{item}</span>
|
||||
<span key={item} style={{ fontSize: 13, color: '#475569', cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif", fontWeight: 500 }}>{item}</span>
|
||||
))}
|
||||
<button style={{
|
||||
background: '#1d4ed8', color: 'white', border: 'none',
|
||||
padding: '8px 20px', borderRadius: 8, fontSize: 13, fontWeight: 700,
|
||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||
}}>
|
||||
<button className="corp-btn-primary" style={{ background: '#2563eb', color: 'white', border: 'none', padding: '9px 22px', borderRadius: 8, fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif", boxShadow: '0 4px 16px rgba(37,99,235,0.3)' }}>
|
||||
문의하기
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero */}
|
||||
<section style={{
|
||||
background: 'linear-gradient(150deg, #0a192f 0%, #112240 45%, #0d3b7e 100%)',
|
||||
padding: '100px 48px', position: 'relative', overflow: 'hidden',
|
||||
}}>
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0,
|
||||
backgroundImage: 'radial-gradient(circle at 80% 50%, rgba(59,130,246,0.15) 0%, transparent 60%)',
|
||||
}} />
|
||||
<div style={{
|
||||
position: 'absolute', right: 80, top: '50%', transform: 'translateY(-50%)',
|
||||
width: 360, height: 360,
|
||||
background: 'linear-gradient(135deg, rgba(59,130,246,0.12), rgba(139,92,246,0.08))',
|
||||
borderRadius: '50%', border: '1px solid rgba(59,130,246,0.2)',
|
||||
}} />
|
||||
<div style={{ maxWidth: 700, position: 'relative', animation: 'fadeInUp 0.8s ease forwards' }}>
|
||||
<div style={{
|
||||
display: 'inline-block', fontSize: 11, fontWeight: 700, letterSpacing: '0.2em',
|
||||
color: '#60a5fa', textTransform: 'uppercase',
|
||||
border: '1px solid rgba(96,165,250,0.3)', padding: '5px 14px', borderRadius: 4,
|
||||
marginBottom: 24, fontFamily: 'Montserrat, sans-serif',
|
||||
}}>
|
||||
Enterprise IT Solutions
|
||||
<section style={{ background: 'linear-gradient(150deg, #0a192f 0%, #0d2757 50%, #0a2060 100%)', padding: '96px 48px 80px', position: 'relative', overflow: 'hidden' }}>
|
||||
{/* Animated grid */}
|
||||
<div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(59,130,246,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.08) 1px, transparent 1px)', backgroundSize: '60px 60px', animation: 'gridPan 12s linear infinite' }} />
|
||||
<div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 70% 60% at 75% 50%, rgba(59,130,246,0.12) 0%, transparent 70%)' }} />
|
||||
|
||||
{/* Floating tech nodes */}
|
||||
{[
|
||||
{ x: '68%', y: '20%', delay: '0s', size: 6, color: '#60a5fa' },
|
||||
{ x: '78%', y: '55%', delay: '1s', size: 4, color: '#a78bfa' },
|
||||
{ x: '85%', y: '35%', delay: '2s', size: 8, color: '#34d399' },
|
||||
{ x: '72%', y: '72%', delay: '0.5s', size: 5, color: '#60a5fa' },
|
||||
].map((dot, i) => (
|
||||
<div key={i} style={{ position: 'absolute', left: dot.x, top: dot.y, width: dot.size, height: dot.size, borderRadius: '50%', background: dot.color, boxShadow: `0 0 12px ${dot.color}`, animation: `floatDot 3s ease-in-out ${dot.delay} infinite` }} />
|
||||
))}
|
||||
|
||||
{/* SVG Tech Illustration */}
|
||||
<svg style={{ position: 'absolute', right: 60, top: '50%', transform: 'translateY(-50%)', width: 320, height: 280, opacity: 0.12 }} viewBox="0 0 320 280">
|
||||
<rect x="40" y="40" width="100" height="70" rx="8" stroke="#60a5fa" strokeWidth="1.5" fill="none"/>
|
||||
<rect x="180" y="40" width="100" height="70" rx="8" stroke="#a78bfa" strokeWidth="1.5" fill="none"/>
|
||||
<rect x="110" y="170" width="100" height="70" rx="8" stroke="#34d399" strokeWidth="1.5" fill="none"/>
|
||||
<line x1="140" y1="110" x2="160" y2="170" stroke="#60a5fa" strokeWidth="1" strokeDasharray="4 4"/>
|
||||
<line x1="180" y1="110" x2="160" y2="170" stroke="#a78bfa" strokeWidth="1" strokeDasharray="4 4"/>
|
||||
<circle cx="90" cy="75" r="16" stroke="#60a5fa" strokeWidth="1" fill="rgba(96,165,250,0.1)"/>
|
||||
<circle cx="230" cy="75" r="16" stroke="#a78bfa" strokeWidth="1" fill="rgba(167,139,250,0.1)"/>
|
||||
<circle cx="160" cy="205" r="20" stroke="#34d399" strokeWidth="1" fill="rgba(52,211,153,0.1)"/>
|
||||
</svg>
|
||||
|
||||
<div style={{ maxWidth: 680, position: 'relative', animation: 'fadeInUp 0.8s ease forwards' }}>
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(96,165,250,0.1)', border: '1px solid rgba(96,165,250,0.25)', padding: '6px 16px', borderRadius: 4, marginBottom: 28, fontFamily: 'Montserrat, sans-serif' }}>
|
||||
<div style={{ width: 6, height: 6, borderRadius: '50%', background: '#34d399', boxShadow: '0 0 8px rgba(52,211,153,0.8)' }} />
|
||||
<span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', color: '#60a5fa', textTransform: 'uppercase' }}>Enterprise IT Solutions</span>
|
||||
</div>
|
||||
<h1 style={{
|
||||
fontFamily: 'Montserrat, sans-serif', fontSize: 'clamp(36px, 4vw, 54px)',
|
||||
fontWeight: 800, color: 'white', lineHeight: 1.2, marginBottom: 20,
|
||||
}}>
|
||||
<h1 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 'clamp(34px, 4vw, 54px)', fontWeight: 800, color: 'white', lineHeight: 1.2, marginBottom: 20 }}>
|
||||
디지털 혁신으로<br />
|
||||
<span style={{ color: '#60a5fa' }}>비즈니스의 미래</span>를<br />
|
||||
<span style={{ background: 'linear-gradient(90deg, #60a5fa, #a78bfa)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>비즈니스의 미래</span>를<br />
|
||||
설계합니다
|
||||
</h1>
|
||||
<p style={{
|
||||
color: '#94a3b8', fontSize: 17, lineHeight: 1.8, marginBottom: 36,
|
||||
fontFamily: "'Noto Sans KR', sans-serif",
|
||||
}}>
|
||||
15년의 경험과 기술력으로 기업의 IT 인프라를 혁신합니다.<br />
|
||||
<p style={{ color: '#94a3b8', fontSize: 16, lineHeight: 1.85, marginBottom: 36, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
15년의 경험과 검증된 기술력으로 기업의 IT 인프라를 혁신합니다.<br />
|
||||
클라우드, 보안, 디지털 전환까지 원스톱으로 제공합니다.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
|
||||
<button className="corp-btn" style={{
|
||||
background: '#2563eb', color: 'white', border: 'none',
|
||||
padding: '14px 32px', borderRadius: 8, fontSize: 15, fontWeight: 700,
|
||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||
}}>
|
||||
<button className="corp-btn-primary" style={{ background: '#2563eb', color: 'white', border: 'none', padding: '14px 32px', borderRadius: 8, fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif", boxShadow: '0 8px 24px rgba(37,99,235,0.35)' }}>
|
||||
서비스 상담 신청 →
|
||||
</button>
|
||||
<button style={{
|
||||
background: 'transparent', color: 'white',
|
||||
border: '1px solid rgba(255,255,255,0.25)',
|
||||
padding: '14px 32px', borderRadius: 8, fontSize: 15, fontWeight: 600,
|
||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||
}}>
|
||||
<button style={{ background: 'transparent', color: '#cbd5e1', border: '1px solid rgba(255,255,255,0.18)', padding: '14px 32px', borderRadius: 8, fontSize: 15, fontWeight: 600, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
회사 소개서 다운로드
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Stats */}
|
||||
<section style={{
|
||||
background: '#1d4ed8', padding: '40px 48px',
|
||||
display: 'flex', justifyContent: 'center', gap: 0, flexWrap: 'wrap',
|
||||
}}>
|
||||
{stats.map((s, i) => (
|
||||
<div key={i} style={{
|
||||
textAlign: 'center', padding: '16px 48px',
|
||||
borderRight: i < stats.length - 1 ? '1px solid rgba(255,255,255,0.2)' : 'none',
|
||||
}}>
|
||||
<div style={{ fontSize: 36, fontWeight: 800, color: 'white', fontFamily: 'Montserrat, sans-serif' }}>
|
||||
{s.num}
|
||||
{/* Stats Bar */}
|
||||
<section style={{ background: '#1d4ed8', padding: '36px 48px' }}>
|
||||
<div style={{ maxWidth: 1100, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
|
||||
{stats.map((s, i) => (
|
||||
<div key={i} style={{ textAlign: 'center', padding: '12px 24px', borderRight: i < 3 ? '1px solid rgba(255,255,255,0.2)' : 'none' }}>
|
||||
<div style={{ fontSize: 38, fontWeight: 800, color: 'white', fontFamily: 'Montserrat, sans-serif', lineHeight: 1 }}>{s.num}</div>
|
||||
<div style={{ fontSize: 13, color: '#bfdbfe', fontFamily: "'Noto Sans KR', sans-serif", marginTop: 6 }}>{s.label}</div>
|
||||
</div>
|
||||
<div style={{ fontSize: 13, color: '#bfdbfe', fontFamily: "'Noto Sans KR', sans-serif", marginTop: 4 }}>
|
||||
{s.label}
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Certifications */}
|
||||
<section style={{ background: '#f8fafc', padding: '28px 48px', borderBottom: '1px solid #e2e8f0' }}>
|
||||
<div style={{ maxWidth: 1100, margin: '0 auto', display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: '#94a3b8', letterSpacing: '0.15em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', flexShrink: 0 }}>인증 · 파트너십</span>
|
||||
{certs.map((c) => (
|
||||
<div key={c} className="corp-cert" style={{ padding: '8px 18px', border: '1px solid #e2e8f0', borderRadius: 6, background: 'white', fontSize: 12, fontWeight: 700, color: '#475569', fontFamily: 'Montserrat, sans-serif', letterSpacing: '0.03em' }}>
|
||||
{c}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Services */}
|
||||
<section style={{ padding: '80px 48px', background: '#f8fafc' }}>
|
||||
<section style={{ padding: '88px 48px', background: 'white' }}>
|
||||
<div style={{ maxWidth: 1100, margin: '0 auto' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 52 }}>
|
||||
<div style={{ fontSize: 12, color: '#2563eb', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>
|
||||
Our Services
|
||||
</div>
|
||||
<h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 36, fontWeight: 800, color: '#0f172a', marginBottom: 14 }}>
|
||||
핵심 서비스
|
||||
</h2>
|
||||
<p style={{ color: '#64748b', fontSize: 16, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
기업의 성장을 이끄는 IT 솔루션을 제공합니다
|
||||
</p>
|
||||
<div style={{ textAlign: 'center', marginBottom: 56 }}>
|
||||
<div style={{ fontSize: 11, color: '#2563eb', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>Our Services</div>
|
||||
<h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 36, fontWeight: 800, color: '#0f172a', marginBottom: 14 }}>핵심 서비스</h2>
|
||||
<p style={{ color: '#64748b', fontSize: 16, fontFamily: "'Noto Sans KR', sans-serif" }}>기업의 성장을 이끄는 검증된 IT 솔루션</p>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 28 }}>
|
||||
{services.map((svc) => (
|
||||
<div key={svc.title} className="corp-service-card" style={{
|
||||
padding: 36, borderRadius: 16, background: 'white',
|
||||
border: '1px solid #e2e8f0', boxShadow: '0 4px 24px rgba(0,0,0,0.05)',
|
||||
}}>
|
||||
<div style={{
|
||||
width: 56, height: 56, borderRadius: 14,
|
||||
background: 'linear-gradient(135deg, #eff6ff, #dbeafe)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
fontSize: 26, marginBottom: 20,
|
||||
}}>
|
||||
{services.map((svc, i) => (
|
||||
<div key={svc.title} className="corp-card" style={{ padding: 36, borderRadius: 18, background: 'white', border: '1px solid #e2e8f0', boxShadow: '0 4px 24px rgba(0,0,0,0.05)', position: 'relative', overflow: 'hidden' }}>
|
||||
<div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: ['linear-gradient(90deg, #2563eb, #60a5fa)', 'linear-gradient(90deg, #7c3aed, #a78bfa)', 'linear-gradient(90deg, #059669, #34d399)'][i] }} />
|
||||
<div style={{ width: 56, height: 56, borderRadius: 14, background: ['#eff6ff', '#f5f3ff', '#f0fdf4'][i], border: `1px solid ${['#bfdbfe', '#ddd6fe', '#bbf7d0'][i]}`, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 22, color: ['#2563eb', '#7c3aed', '#059669'][i] }}>
|
||||
{svc.icon}
|
||||
</div>
|
||||
<h3 style={{ fontSize: 20, fontWeight: 700, color: '#0f172a', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>
|
||||
{svc.title}
|
||||
</h3>
|
||||
<p style={{ fontSize: 14, color: '#64748b', lineHeight: 1.75, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
{svc.desc}
|
||||
</p>
|
||||
<div style={{ marginTop: 20, color: '#2563eb', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'Montserrat, sans-serif' }}>
|
||||
자세히 보기 →
|
||||
<h3 style={{ fontSize: 19, fontWeight: 700, color: '#0f172a', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>{svc.title}</h3>
|
||||
<p style={{ fontSize: 14, color: '#64748b', lineHeight: 1.8, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 16 }}>{svc.desc}</p>
|
||||
<div style={{ padding: '10px 14px', background: '#f8fafc', borderRadius: 8, fontSize: 12, color: '#94a3b8', fontFamily: 'Montserrat, sans-serif', letterSpacing: '0.02em' }}>{svc.detail}</div>
|
||||
<div style={{ marginTop: 20, color: '#2563eb', fontSize: 13, fontWeight: 700, cursor: 'pointer', fontFamily: 'Montserrat, sans-serif', display: 'flex', alignItems: 'center', gap: 6 }}>
|
||||
자세히 보기
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials */}
|
||||
<section style={{ padding: '80px 48px', background: 'linear-gradient(135deg, #f0f7ff, #f8f5ff)' }}>
|
||||
<div style={{ maxWidth: 900, margin: '0 auto' }}>
|
||||
<div style={{ textAlign: 'center', marginBottom: 48 }}>
|
||||
<div style={{ fontSize: 11, color: '#2563eb', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>Client Reviews</div>
|
||||
<h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 32, fontWeight: 800, color: '#0f172a' }}>고객 후기</h2>
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
|
||||
{testimonials.map((t, i) => (
|
||||
<div key={i} style={{ background: 'white', borderRadius: 16, padding: '32px 28px', border: '1px solid #e2e8f0', boxShadow: '0 4px 20px rgba(0,0,0,0.05)' }}>
|
||||
<div style={{ fontSize: 32, color: '#bfdbfe', fontFamily: 'Georgia, serif', lineHeight: 1, marginBottom: 16 }}>"</div>
|
||||
<p style={{ fontSize: 15, color: '#475569', lineHeight: 1.8, fontFamily: "'Noto Sans KR', sans-serif", marginBottom: 20 }}>{t.quote}</p>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 40, height: 40, borderRadius: '50%', background: 'linear-gradient(135deg, #2563eb, #7c3aed)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white', fontSize: 15, fontWeight: 700 }}>
|
||||
{t.name[0]}
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: '#0f172a', fontFamily: "'Noto Sans KR', sans-serif" }}>{t.name}</div>
|
||||
<div style={{ fontSize: 12, color: '#94a3b8', fontFamily: "'Noto Sans KR', sans-serif" }}>{t.company}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -224,52 +238,31 @@ export default function CorporateSample() {
|
||||
{/* Clients */}
|
||||
<section style={{ padding: '72px 48px', background: 'white' }}>
|
||||
<div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
|
||||
<div style={{ fontSize: 12, color: '#2563eb', fontWeight: 700, letterSpacing: '0.15em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 12 }}>
|
||||
Trusted By
|
||||
</div>
|
||||
<h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 32, fontWeight: 800, color: '#0f172a', marginBottom: 40 }}>
|
||||
함께하는 고객사
|
||||
</h2>
|
||||
<div style={{ fontSize: 11, color: '#94a3b8', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 36 }}>Trusted By Leading Companies</div>
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 12 }}>
|
||||
{clients.map((c) => (
|
||||
<div key={c} className="corp-client" style={{
|
||||
padding: '12px 24px', borderRadius: 10,
|
||||
border: '1px solid #e2e8f0', background: '#f8fafc',
|
||||
fontSize: 14, fontWeight: 600, color: '#475569',
|
||||
fontFamily: "'Noto Sans KR', sans-serif", cursor: 'pointer',
|
||||
}}>{c}</div>
|
||||
<div key={c} className="corp-client" style={{ padding: '14px 28px', borderRadius: 10, border: '1px solid #e2e8f0', background: '#f8fafc', fontSize: 14, fontWeight: 600, color: '#475569', fontFamily: "'Noto Sans KR', sans-serif", cursor: 'pointer' }}>{c}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact */}
|
||||
<section style={{
|
||||
background: 'linear-gradient(135deg, #0f172a, #1e293b)',
|
||||
padding: '80px 48px', textAlign: 'center',
|
||||
}}>
|
||||
{/* Contact CTA */}
|
||||
<section style={{ background: 'linear-gradient(150deg, #0a192f, #0d2757)', padding: '88px 48px', textAlign: 'center' }}>
|
||||
<div style={{ maxWidth: 600, margin: '0 auto' }}>
|
||||
<h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 36, fontWeight: 800, color: 'white', marginBottom: 16 }}>
|
||||
<div style={{ fontSize: 11, color: '#60a5fa', fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', fontFamily: 'Montserrat, sans-serif', marginBottom: 20 }}>Get Started</div>
|
||||
<h2 style={{ fontFamily: 'Montserrat, sans-serif', fontSize: 38, fontWeight: 800, color: 'white', marginBottom: 16, lineHeight: 1.2 }}>
|
||||
프로젝트를 시작하세요
|
||||
</h2>
|
||||
<p style={{ color: '#94a3b8', fontSize: 16, lineHeight: 1.7, marginBottom: 32, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
<p style={{ color: '#94a3b8', fontSize: 16, lineHeight: 1.8, marginBottom: 36, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
IT 솔루션이 필요하시면 언제든지 연락해주세요.<br />
|
||||
전담 컨설턴트가 최적의 방안을 제안해드립니다.
|
||||
</p>
|
||||
<div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
|
||||
<button style={{
|
||||
background: '#2563eb', color: 'white', border: 'none',
|
||||
padding: '14px 36px', borderRadius: 8, fontSize: 15, fontWeight: 700,
|
||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||
}}>
|
||||
<button className="corp-btn-primary" style={{ background: '#2563eb', color: 'white', border: 'none', padding: '15px 40px', borderRadius: 8, fontSize: 15, fontWeight: 700, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif", boxShadow: '0 8px 24px rgba(37,99,235,0.4)' }}>
|
||||
무료 상담 신청
|
||||
</button>
|
||||
<button style={{
|
||||
background: 'transparent', color: 'white',
|
||||
border: '1px solid rgba(255,255,255,0.2)',
|
||||
padding: '14px 36px', borderRadius: 8, fontSize: 15, fontWeight: 600,
|
||||
cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif",
|
||||
}}>
|
||||
<button style={{ background: 'transparent', color: '#cbd5e1', border: '1px solid rgba(255,255,255,0.18)', padding: '15px 40px', borderRadius: 8, fontSize: 15, fontWeight: 600, cursor: 'pointer', fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
02-1234-5678
|
||||
</button>
|
||||
</div>
|
||||
@@ -277,15 +270,9 @@ export default function CorporateSample() {
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer style={{ background: '#020817', padding: '32px 48px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
|
||||
<div style={{ color: '#475569', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>
|
||||
© 2024 ㈜테크솔루션. All rights reserved.
|
||||
</div>
|
||||
<div style={{ color: '#334155', fontSize: 12, fontFamily: 'Montserrat, sans-serif' }}>
|
||||
서울특별시 강남구 테헤란로 123 테크타워 15F
|
||||
</div>
|
||||
</div>
|
||||
<footer style={{ background: '#020817', padding: '28px 48px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
|
||||
<div style={{ color: '#334155', fontSize: 13, fontFamily: "'Noto Sans KR', sans-serif" }}>© 2024 ㈜테크솔루션. All rights reserved.</div>
|
||||
<div style={{ color: '#1e293b', fontSize: 12, fontFamily: 'Montserrat, sans-serif' }}>서울특별시 강남구 테헤란로 123 테크타워 15F</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user