284 lines
16 KiB
Plaintext
284 lines
16 KiB
Plaintext
<!-- Services page content starts here -->
|
|
<link href="/css/fixes.css" rel="stylesheet">
|
|
|
|
|
|
<!-- Services Hero Section - Компактный -->
|
|
<section class="hero-section-compact bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800">
|
|
<div class="container mx-auto px-4 py-16 text-center text-white">
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-4" data-aos="fade-up">
|
|
<%- __('services.hero.title') %> <span class="text-yellow-300"><%- __('services.hero.title_highlight') %></span>
|
|
</h1>
|
|
<p class="text-xl md:text-2xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200">
|
|
<%- __('services.hero.subtitle') %>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Grid -->
|
|
<section class="section-padding">
|
|
<div class="container mx-auto px-4">
|
|
<div class="space-y-12">
|
|
<% if (services && services.length > 0) { %>
|
|
<% services.forEach((service, index) => { %>
|
|
<div class="relative overflow-hidden rounded-3xl shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:-translate-y-1"
|
|
data-aos="fade-up"
|
|
data-aos-delay="<%= index * 150 %>">
|
|
|
|
<!-- 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-2/5 h-full flex items-center justify-center px-6 py-4">
|
|
<div class="relative z-10">
|
|
<!-- Service illustration -->
|
|
|
|
|
|
<!-- 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 Content Area -->
|
|
<div class="absolute right-0 top-5 bottom-5 w-1/5 h-half flex items-center pr-8 pl-4 py-2">
|
|
<div class="text-right w-full">
|
|
|
|
<!-- Featured Badge - moved above category -->
|
|
<% if (service.featured) { %>
|
|
<div class="mb-3">
|
|
<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>
|
|
<% } %>
|
|
|
|
<!-- Service Category Badge -->
|
|
<div class="inline-block mb-4">
|
|
<span class="bg-white bg-opacity-90 text-gray-800 px-4 py-2 rounded-full text-sm font-medium backdrop-blur-sm shadow-sm">
|
|
<%= service.category %>
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% }) %>
|
|
<% } else { %>
|
|
<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>
|
|
</div>
|
|
<% } %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process Section -->
|
|
<section class="section-padding bg-gray-50">
|
|
<div class="container mx-auto px-4">
|
|
<div class="text-center mb-16" data-aos="fade-up">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
<%- __('services.process.title') %>
|
|
</h2>
|
|
<p class="text-lg text-gray-700 text-center mb-12 max-w-3xl mx-auto">
|
|
<%- __('services.process.subtitle') %>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<!-- Step 1 -->
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="100">
|
|
<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"><%- __('services.process.step1.title') %></h3>
|
|
<p class="text-gray-700 text-center">
|
|
<%- __('services.process.step1.description') %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="200">
|
|
<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"><%- __('services.process.step2.title') %></h3>
|
|
<p class="text-gray-700 text-center">
|
|
<%- __('services.process.step2.description') %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="300">
|
|
<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"><%- __('services.process.step3.title') %></h3>
|
|
<p class="text-gray-700 text-center">
|
|
<%- __('services.process.step3.description') %>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Step 4 -->
|
|
<div class="text-center" data-aos="fade-up" data-aos-delay="400">
|
|
<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"><%- __('services.process.step4.title') %></h3>
|
|
<p class="text-gray-700 text-center">
|
|
<%- __('services.process.step4.description') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why Choose Us Section -->
|
|
<section class="section-padding">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<!-- Content -->
|
|
<div data-aos="fade-right">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">
|
|
<%- __('services.why_choose.title') %>
|
|
</h2>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Feature 1 -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fas fa-rocket text-blue-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
|
|
<!-- Feature 2 -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fas fa-users text-green-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
|
|
<!-- Feature 3 -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fas fa-clock text-purple-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
|
|
<!-- Feature 4 -->
|
|
<div class="flex items-start">
|
|
<div class="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
|
|
<i class="fas fa-headset text-orange-600 text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image/Visual -->
|
|
<div class="relative" data-aos="fade-left">
|
|
<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"><%- __('services.why_choose.quality_guarantee.title') %></h3>
|
|
<p class="text-gray-600">
|
|
<%- __('services.why_choose.quality_guarantee.subtitle') %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<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>
|
|
|
|
<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>
|
|
|
|
<!-- Services page content ends here -->
|
|
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<script src="/js/main.js"></script> |