trevor/sst_site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main functions

Browse Source
This commit is contained in:
Andrey K. Choi
2025-10-26 14:44:10 +09:00
parent 6ff35e26f4
commit 291fc63a4c
901 changed files with 79783 additions and 201383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
views/services.ejs
View File

@@ -1,29 +1,6 @@
<!DOCTYPE html>
<html lang="<%= locale || 'ko' %>" class="<%= theme === 'dark' ? 'dark' : '' %>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><%- __('services.meta.title') %> - SmartSolTech</title>
<!-- SEO Meta Tags -->
<meta name="description" content="<%- __('services.meta.description') %>">
<meta name="keywords" content="<%- __('services.meta.keywords') %>">
<!-- PWA -->
<meta name="theme-color" content="#3B82F6">
<link rel="manifest" href="/manifest.json">
<link rel="apple-touch-icon" href="/images/icons/icon-192x192.png">
<!-- Styles -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link href="/css/main.css" rel="stylesheet">
<!-- Services page content starts here -->
<link href="/css/fixes.css" rel="stylesheet">
<link href="/css/dark-theme.css" rel="stylesheet">
</head>
<body class="font-sans dark:bg-gray-900 dark:text-gray-100">
<%- include('partials/navigation') %>
<!-- Services Hero Section - Компактный -->
<section class="hero-section-compact bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800">
@@ -40,70 +17,99 @@
<!-- Services Grid -->
<section class="section-padding">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="max-w-4xl mx-auto space-y-8">
<% if (services && services.length > 0) { %>
<% services.forEach((service, index) => { %>
<div class="bg-white rounded-2xl shadow-xl p-8 hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2"
<div class="relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-1 mx-auto max-w-3xl"
data-aos="fade-up"
data-aos-delay="<%= index * 100 %>">
data-aos-delay="<%= index * 150 %>">
<!-- Service Icon -->
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center mb-6">
<i class="<%= service.icon || 'fas fa-cog' %> text-white text-2xl"></i>
</div>
<!-- Background with Gradient -->
<div class="relative h-64 bg-gradient-to-r
<% if (index % 4 === 0) { %>from-blue-600 to-purple-600<% } %>
<% if (index % 4 === 1) { %>from-green-500 to-teal-600<% } %>
<% if (index % 4 === 2) { %>from-purple-600 to-pink-600<% } %>
<% if (index % 4 === 3) { %>from-orange-500 to-red-600<% } %>
overflow-hidden">
<!-- Service Image/Icon Area -->
<div class="absolute left-0 top-0 w-1/2 h-full flex items-center justify-center">
<div class="relative z-10">
<!-- Large service icon -->
<div class="w-32 h-32 bg-white bg-opacity-20 rounded-full flex items-center justify-center mb-6 backdrop-blur-sm">
<i class="<%= service.icon || 'fas fa-cog' %> text-white text-6xl"></i>
</div>
<!-- Decorative elements -->
<div class="absolute -top-8 -left-8 w-24 h-24 bg-white bg-opacity-10 rounded-full animate-pulse"></div>
<div class="absolute -bottom-4 -right-4 w-16 h-16 bg-white bg-opacity-10 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
</div>
<!-- Gradient fade to center -->
<div class="absolute right-0 top-0 w-1/2 h-full bg-gradient-to-r from-transparent to-current opacity-30"></div>
</div>
<!-- Service Info -->
<h3 class="text-2xl font-bold text-gray-900 mb-4">
<%= service.name %>
</h3>
<p class="text-gray-600 mb-6 leading-relaxed">
<%= service.shortDescription || service.description %>
</p>
<!-- Service Content Area -->
<div class="absolute right-0 top-0 w-1/2 h-full flex items-center">
<div class="p-8 text-right w-full">
<!-- Service Category Badge -->
<div class="inline-block mb-4">
<span class="bg-white bg-opacity-20 text-white px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm">
<%= service.category %>
</span>
</div>
<!-- Pricing -->
<% if (service.pricing) { %>
<div class="mb-6">
<div class="text-sm text-gray-500 mb-1"><%- __('services.cards.starting_price') %></div>
<div class="text-2xl font-bold text-blue-600">
<%= service.pricing.basePrice ? service.pricing.basePrice.toLocaleString() : __('services.cards.consultation') %>
<% if (service.pricing.basePrice) { %>
<span class="text-sm text-gray-500">원~</span>
<!-- Service Title -->
<h3 class="text-3xl font-bold text-white mb-4 leading-tight">
<%= service.name %>
</h3>
<!-- Service Description -->
<p class="text-white text-opacity-90 mb-6 leading-relaxed text-lg">
<%= service.shortDescription || service.description %>
</p>
<!-- Pricing -->
<% if (service.pricing) { %>
<div class="mb-6">
<div class="text-white text-opacity-75 text-sm mb-1"><%- __('services.cards.starting_price') %></div>
<div class="text-3xl font-bold text-white">
<%= service.pricing.basePrice ? service.pricing.basePrice.toLocaleString() : __('services.cards.consultation') %>
<% if (service.pricing.basePrice) { %>
<span class="text-lg text-white text-opacity-75">원~</span>
<% } %>
</div>
</div>
<% } %>
<!-- Action Buttons -->
<div class="flex flex-col gap-3 items-end">
<a href="/contact?service=<%= service._id %>"
class="bg-white text-gray-900 px-6 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-lg">
<%- __('services.cards.contact') %>
</a>
<a href="/calculator?service=<%= service._id %>"
class="border-2 border-white text-white px-6 py-3 rounded-xl font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
<%- __('services.cards.calculate_cost') %>
</a>
</div>
<!-- Featured Badge -->
<% if (service.featured) { %>
<div class="absolute top-4 right-4">
<span class="bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-sm font-bold shadow-lg">
<i class="fas fa-star"></i> <%- __('services.cards.popular') %>
</span>
</div>
<% } %>
</div>
<% if (service.pricing.priceRange) { %>
<div class="text-sm text-gray-500">
<%= service.pricing.priceRange.min.toLocaleString() %>원 -
<%= service.pricing.priceRange.max.toLocaleString() %>원
</div>
<% } %>
</div>
<% } %>
<!-- Action Buttons -->
<div class="flex flex-col gap-3">
<a href="/contact?service=<%= service._id %>"
class="block w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300">
<%- __('services.cards.contact') %>
</a>
<a href="/calculator?service=<%= service._id %>"
class="block w-full border-2 border-blue-600 text-blue-600 text-center py-3 rounded-lg font-semibold hover:bg-blue-600 hover:text-white transition-all duration-300">
<%- __('services.cards.calculate_cost') %>
</a>
</div>
<!-- Featured Badge -->
<% if (service.featured) { %>
<div class="absolute top-4 right-4">
<span class="bg-yellow-500 text-white px-2 py-1 rounded-full text-xs font-bold">
<i class="fas fa-star"></i> <%- __('services.cards.popular') %>
</span>
</div>
<% } %>
</div>
<% }) %>
<% } else { %>
<div class="col-span-full text-center py-12">
<div class="text-center py-12">
<i class="fas fa-cogs text-6xl text-gray-300 mb-4"></i>
<h3 class="text-2xl font-bold text-gray-500 mb-2"><%- __('services.cards.coming_soon') %></h3>
<p class="text-gray-400"><%- __('services.cards.coming_soon_desc') %></p>
@@ -120,7 +126,7 @@
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
<%- __('services.process.title') %>
</h2>
<p class="text-lg text-gray-600 mb-12 max-w-3xl mx-auto">
<p class="text-lg text-gray-700 text-center mb-12 max-w-3xl mx-auto">
<%- __('services.process.subtitle') %>
</p>
</div>
@@ -131,10 +137,9 @@
<div class="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">1</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">상담 및 기획</h3>
<p class="text-gray-600">
고객의 요구사항을 정확히 파악하고
최적의 솔루션을 기획합니다
<h3 class="text-xl font-bold text-gray-900 mb-4"><%- __('services.process.step1.title') %></h3>
<p class="text-gray-700 text-center">
<%- __('services.process.step1.description') %>
</p>
</div>
@@ -143,10 +148,9 @@
<div class="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">2</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">디자인 및 설계</h3>
<p class="text-gray-600">
사용자 중심의 직관적인 디자인과
견고한 시스템 아키텍처를 설계합니다
<h3 class="text-xl font-bold text-gray-900 mb-4"><%- __('services.process.step2.title') %></h3>
<p class="text-gray-700 text-center">
<%- __('services.process.step2.description') %>
</p>
</div>
@@ -155,10 +159,9 @@
<div class="w-20 h-20 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">3</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">개발 및 구현</h3>
<p class="text-gray-600">
최신 기술과 모범 사례를 활용하여
효율적이고 확장 가능한 솔루션을 개발합니다
<h3 class="text-xl font-bold text-gray-900 mb-4"><%- __('services.process.step3.title') %></h3>
<p class="text-gray-700 text-center">
<%- __('services.process.step3.description') %>
</p>
</div>
@@ -167,10 +170,9 @@
<div class="w-20 h-20 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-white text-2xl font-bold">4</span>
</div>
<h3 class="text-xl font-bold text-gray-900 mb-4">테스트 및 배포</h3>
<p class="text-gray-600">
철저한 테스트를 통해 품질을 보장하고
안정적인 배포를 진행합니다
<h3 class="text-xl font-bold text-gray-900 mb-4"><%- __('services.process.step4.title') %></h3>
<p class="text-gray-700 text-center">
<%- __('services.process.step4.description') %>
</p>
</div>
</div>
@@ -184,7 +186,7 @@
<!-- Content -->
<div data-aos="fade-right">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
왜 SmartSolTech를 선택해야 할까요?
<%- __('services.why_choose.title') %>
</h2>
<div class="space-y-6">
@@ -194,10 +196,9 @@
<i class="fas fa-rocket text-blue-600 text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">최신 기술 활용</h3>
<h3 class="text-xl font-semibold text-gray-900 mb-2"><%- __('services.why_choose.modern_tech.title') %></h3>
<p class="text-gray-600">
항상 최신 기술 트렌드를 파악하고, 검증된 기술 스택을 활용하여
미래 지향적인 솔루션을 제공합니다.
<%- __('services.why_choose.modern_tech.description') %>
</p>
</div>
</div>
@@ -208,10 +209,9 @@
<i class="fas fa-users text-green-600 text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">전문가 팀</h3>
<h3 class="text-xl font-semibold text-gray-900 mb-2"><%- __('services.why_choose.expert_team.title') %></h3>
<p class="text-gray-600">
각 분야의 전문가들로 구성된 팀이 협력하여
최고 품질의 결과물을 보장합니다.
<%- __('services.why_choose.expert_team.description') %>
</p>
</div>
</div>
@@ -222,10 +222,9 @@
<i class="fas fa-clock text-purple-600 text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">빠른 대응</h3>
<h3 class="text-xl font-semibold text-gray-900 mb-2"><%- __('services.why_choose.fast_response.title') %></h3>
<p class="text-gray-600">
신속한 커뮤니케이션과 효율적인 프로젝트 관리로
정해진 일정 내에 프로젝트를 완료합니다.
<%- __('services.why_choose.fast_response.description') %>
</p>
</div>
</div>
@@ -236,10 +235,9 @@
<i class="fas fa-headset text-orange-600 text-xl"></i>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 mb-2">지속적인 지원</h3>
<h3 class="text-xl font-semibold text-gray-900 mb-2"><%- __('services.why_choose.continuous_support.title') %></h3>
<p class="text-gray-600">
프로젝트 완료 후에도 지속적인 유지보수와 기술 지원을
통해 장기적인 파트너십을 유지합니다.
<%- __('services.why_choose.continuous_support.description') %>
</p>
</div>
</div>
@@ -251,10 +249,9 @@
<div class="bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl p-8 h-96 flex items-center justify-center">
<div class="text-center">
<i class="fas fa-award text-6xl text-blue-600 mb-4"></i>
<h3 class="text-2xl font-bold text-gray-900 mb-2">품질 보장</h3>
<h3 class="text-2xl font-bold text-gray-900 mb-2"><%- __('services.why_choose.quality_guarantee.title') %></h3>
<p class="text-gray-600">
고객 만족을 위한<br>
최고 품질의 서비스
<%- __('services.why_choose.quality_guarantee.subtitle') %>
</p>
</div>
</div>
@@ -267,29 +264,23 @@
<section class="section-padding bg-gradient-to-r from-blue-600 to-purple-600 text-white">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">
프로젝트를 시작할 준비가 되셨나요?
<%- __('services.cta.title') %>
</h2>
<p class="text-xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200">
무료 상담을 통해 최적의 솔루션을 제안해드리겠습니다
<%- __('services.cta.subtitle') %>
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center" data-aos="fade-up" data-aos-delay="400">
<a href="/contact" class="bg-white text-blue-600 px-8 py-3 rounded-full hover:bg-gray-100 transition-colors font-semibold">
무료 상담 신청
</a>
<a href="/calculator" class="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white hover:text-blue-600 transition-colors font-semibold">
비용 계산하기
<%- __('services.cta.calculate_cost') %>
</a>
<a href="/portfolio" class="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white hover:text-blue-600 transition-colors font-semibold">
포트폴리오 보기
<%- __('services.cta.view_portfolio') %>
</a>
</div>
</div>
</section>
<%- include('partials/footer') %>
<!-- Services page content ends here -->
<!-- Scripts -->
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="/js/main.js"></script>