first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,443 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- Corporate Professional Layout -->
|
||||
<div class="corporate-pro-container">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<div class="hero-pattern"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">TRUSTED BY 500+ COMPANIES</span>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-main">Enterprise Solutions</span>
|
||||
<span class="title-sub">for Modern Business</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
신뢰할 수 있는 파트너와 함께 비즈니스의 성장을 가속화하세요.
|
||||
검증된 기술과 전문성을 바탕으로 한 솔루션을 제공합니다.
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#contact" class="btn-primary">무료 상담 신청</a>
|
||||
<a href="#solutions" class="btn-secondary">솔루션 보기</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">500+</span>
|
||||
<span class="stat-label">기업 고객</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">99.9%</span>
|
||||
<span class="stat-label">서비스 가동률</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">24/7</span>
|
||||
<span class="stat-label">기술 지원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="dashboard-preview">
|
||||
<div class="dashboard-header">
|
||||
<div class="dashboard-title">Enterprise Dashboard</div>
|
||||
<div class="dashboard-controls">
|
||||
<span class="control-dot"></span>
|
||||
<span class="control-dot"></span>
|
||||
<span class="control-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-content">
|
||||
<div class="dashboard-sidebar">
|
||||
<div class="sidebar-item active">대시보드</div>
|
||||
<div class="sidebar-item">분석</div>
|
||||
<div class="sidebar-item">보고서</div>
|
||||
<div class="sidebar-item">설정</div>
|
||||
</div>
|
||||
<div class="dashboard-main">
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">성과 지표</div>
|
||||
<div class="chart-placeholder">
|
||||
<div class="chart-bar" style="height: 60%"></div>
|
||||
<div class="chart-bar" style="height: 80%"></div>
|
||||
<div class="chart-bar" style="height: 45%"></div>
|
||||
<div class="chart-bar" style="height: 90%"></div>
|
||||
<div class="chart-bar" style="height: 70%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">₩2.4M</div>
|
||||
<div class="metric-label">월 매출</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">+15%</div>
|
||||
<div class="metric-label">성장률</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="services-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">SERVICES</span>
|
||||
<h2 class="section-title">전문 서비스</h2>
|
||||
<p class="section-subtitle">다양한 비즈니스 요구사항에 맞는 맞춤형 솔루션을 제공합니다.</p>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9 9H15V15H9V9Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>시스템 통합</h3>
|
||||
<p>기존 시스템과의 완벽한 연동을 통한 효율적인 업무 프로세스 구축</p>
|
||||
<ul class="service-features">
|
||||
<li>레거시 시스템 현대화</li>
|
||||
<li>API 통합 및 연동</li>
|
||||
<li>데이터 마이그레이션</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>클라우드 마이그레이션</h3>
|
||||
<p>안전하고 효율적인 클라우드 환경으로의 전환을 지원합니다</p>
|
||||
<ul class="service-features">
|
||||
<li>AWS/Azure/GCP 마이그레이션</li>
|
||||
<li>보안 및 규정 준수</li>
|
||||
<li>비용 최적화</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>데이터 분석</h3>
|
||||
<p>빅데이터를 활용한 인사이트 도출 및 의사결정 지원</p>
|
||||
<ul class="service-features">
|
||||
<li>데이터 시각화</li>
|
||||
<li>예측 분석</li>
|
||||
<li>실시간 모니터링</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>보안 솔루션</h3>
|
||||
<p>엔터프라이즈급 보안 체계 구축으로 데이터와 시스템을 보호합니다</p>
|
||||
<ul class="service-features">
|
||||
<li>멀티팩터 인증</li>
|
||||
<li>암호화 및 키 관리</li>
|
||||
<li>보안 감사 및 모니터링</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies Section -->
|
||||
<section class="case-studies-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">CASE STUDIES</span>
|
||||
<h2 class="section-title">성공 사례</h2>
|
||||
<p class="section-subtitle">다양한 산업 분야에서 검증된 성과를 확인해보세요.</p>
|
||||
</div>
|
||||
<div class="case-studies-grid">
|
||||
<div class="case-study-card">
|
||||
<div class="case-study-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="금융업계 디지털 전환">
|
||||
<div class="case-study-overlay">
|
||||
<span class="case-study-industry">금융업계</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-content">
|
||||
<h3>대형 은행 디지털 전환</h3>
|
||||
<p>전통적인 은행 시스템을 클라우드 기반 모바일 뱅킹으로 전환하여 고객 만족도를 40% 향상시켰습니다.</p>
|
||||
<div class="case-study-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-value">40%</span>
|
||||
<span class="metric-label">고객 만족도 향상</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-value">60%</span>
|
||||
<span class="metric-label">운영 비용 절감</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-card">
|
||||
<div class="case-study-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1581092916376-02c94835b179?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="제조업계 스마트 팩토리">
|
||||
<div class="case-study-overlay">
|
||||
<span class="case-study-industry">제조업계</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-content">
|
||||
<h3>스마트 팩토리 구축</h3>
|
||||
<p>IoT와 AI를 활용한 스마트 팩토리 구축으로 생산성과 품질을 동시에 향상시켰습니다.</p>
|
||||
<div class="case-study-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-value">25%</span>
|
||||
<span class="metric-label">생산성 향상</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-value">30%</span>
|
||||
<span class="metric-label">불량률 감소</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-card">
|
||||
<div class="case-study-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="리테일업계 오므니채널">
|
||||
<div class="case-study-overlay">
|
||||
<span class="case-study-industry">리테일업계</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-content">
|
||||
<h3>오므니채널 플랫폼</h3>
|
||||
<p>온라인과 오프라인을 통합한 오므니채널 플랫폼으로 고객 경험을 혁신했습니다.</p>
|
||||
<div class="case-study-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-value">50%</span>
|
||||
<span class="metric-label">매출 증가</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-value">35%</span>
|
||||
<span class="metric-label">고객 유지율 향상</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="team-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">OUR TEAM</span>
|
||||
<h2 class="section-title">전문가 팀</h2>
|
||||
<p class="section-subtitle">다양한 분야의 전문가들이 함께 최고의 솔루션을 제공합니다.</p>
|
||||
</div>
|
||||
<div class="team-grid">
|
||||
<div class="team-member">
|
||||
<div class="member-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="김대표">
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3>김대표</h3>
|
||||
<p class="member-position">CEO & Founder</p>
|
||||
<p class="member-description">15년간의 IT 업계 경험을 바탕으로 혁신적인 솔루션을 제공합니다.</p>
|
||||
<div class="member-social">
|
||||
<a href="#" class="social-link">LinkedIn</a>
|
||||
<a href="#" class="social-link">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="member-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="이CTO">
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3>이CTO</h3>
|
||||
<p class="member-position">Chief Technology Officer</p>
|
||||
<p class="member-description">최신 기술 트렌드를 선도하며 안정적인 시스템 아키텍처를 설계합니다.</p>
|
||||
<div class="member-social">
|
||||
<a href="#" class="social-link">LinkedIn</a>
|
||||
<a href="#" class="social-link">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="member-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1542744095-291d1f67b221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="박이사">
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3>박이사</h3>
|
||||
<p class="member-position">Head of Solutions</p>
|
||||
<p class="member-description">고객의 비즈니스 요구사항을 정확히 파악하여 맞춤형 솔루션을 제공합니다.</p>
|
||||
<div class="member-social">
|
||||
<a href="#" class="social-link">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>지금 시작하세요</h2>
|
||||
<p>전문가와의 무료 상담을 통해 비즈니스에 최적화된 솔루션을 찾아보세요.</p>
|
||||
</div>
|
||||
<div class="cta-form">
|
||||
<form class="consultation-form">
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="회사명" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="담당자명" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" placeholder="이메일" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="tel" placeholder="연락처" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="form-select" required>
|
||||
<option value="">관심 분야를 선택하세요</option>
|
||||
<option value="system">시스템 통합</option>
|
||||
<option value="cloud">클라우드 마이그레이션</option>
|
||||
<option value="data">데이터 분석</option>
|
||||
<option value="security">보안 솔루션</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-submit">무료 상담 신청</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Corporate Professional JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Dashboard animation
|
||||
animateDashboard();
|
||||
|
||||
// Form handling
|
||||
initConsultationForm();
|
||||
|
||||
// Smooth scrolling
|
||||
initSmoothScrolling();
|
||||
|
||||
// Intersection Observer for animations
|
||||
initScrollAnimations();
|
||||
});
|
||||
|
||||
function animateDashboard() {
|
||||
const chartBars = document.querySelectorAll('.chart-bar');
|
||||
const metrics = document.querySelectorAll('.metric-value');
|
||||
|
||||
// Animate chart bars
|
||||
chartBars.forEach((bar, index) => {
|
||||
setTimeout(() => {
|
||||
bar.style.transform = 'scaleY(1)';
|
||||
bar.style.opacity = '1';
|
||||
}, index * 200);
|
||||
});
|
||||
|
||||
// Animate metrics
|
||||
metrics.forEach((metric, index) => {
|
||||
setTimeout(() => {
|
||||
metric.style.transform = 'scale(1)';
|
||||
metric.style.opacity = '1';
|
||||
}, index * 300);
|
||||
});
|
||||
}
|
||||
|
||||
function initConsultationForm() {
|
||||
const form = document.querySelector('.consultation-form');
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Form validation
|
||||
const inputs = form.querySelectorAll('.form-input, .form-select');
|
||||
let isValid = true;
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
input.classList.add('error');
|
||||
isValid = false;
|
||||
} else {
|
||||
input.classList.remove('error');
|
||||
}
|
||||
});
|
||||
|
||||
if (isValid) {
|
||||
// Show success message
|
||||
alert('상담 신청이 완료되었습니다. 빠른 시일 내에 연락드리겠습니다.');
|
||||
form.reset();
|
||||
} else {
|
||||
alert('모든 필드를 올바르게 입력해주세요.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initSmoothScrolling() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.querySelectorAll('.service-card, .case-study-card, .team-member').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,841 @@
|
||||
/* Corporate Professional Theme Styles */
|
||||
|
||||
/* CSS Variables for Corporate Theme */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #1e40af;
|
||||
--accent-color: #3b82f6;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--error-color: #ef4444;
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--text-light: #9ca3af;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f9fafb;
|
||||
--bg-tertiary: #f3f4f6;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e5e7eb;
|
||||
--border-light: #f3f4f6;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 25% 25%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
|
||||
background-size: 400px 400px;
|
||||
animation: pattern-move 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes pattern-move {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(400px, 400px); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--primary-color);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.title-main {
|
||||
display: block;
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.title-sub {
|
||||
display: block;
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-preview {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dashboard-controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.control-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.control-dot:nth-child(1) { background: #ef4444; }
|
||||
.control-dot:nth-child(2) { background: #f59e0b; }
|
||||
.control-dot:nth-child(3) { background: #10b981; }
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.dashboard-sidebar {
|
||||
width: 120px;
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--spacing-md);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.dashboard-main {
|
||||
flex: 1;
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: var(--spacing-sm);
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
flex: 1;
|
||||
background: linear-gradient(to top, var(--primary-color), var(--accent-color));
|
||||
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
transition: all 0.6s ease;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.services-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--primary-color);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.service-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.service-features li {
|
||||
padding: var(--spacing-xs) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.service-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--success-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Case Studies Section */
|
||||
.case-studies-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.case-studies-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.case-study-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.case-study-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.case-study-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.case-study-image {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-study-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.case-study-card:hover .case-study-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.case-study-overlay {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
left: var(--spacing-sm);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.case-study-content {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.case-study-content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.case-study-content p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.case-study-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.metric {
|
||||
text-align: center;
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Team Section */
|
||||
.team-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.team-member {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.team-member.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.team-member:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.member-photo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4px solid var(--border-color);
|
||||
}
|
||||
|
||||
.member-photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.member-info h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.member-position {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.member-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.member-social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.social-link {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-text p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.consultation-form {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-input, .form-select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.form-input:focus, .form-select:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-input.error {
|
||||
border-color: var(--error-color);
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.services-grid,
|
||||
.case-studies-grid,
|
||||
.team-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-pattern {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.case-study-card,
|
||||
.team-member {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.hero-cta,
|
||||
.cta-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user