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

AdminLTE3

Browse Source
This commit is contained in:
Andrey K. Choi
2025-10-26 22:14:47 +09:00
parent 291fc63a4c
commit 9974811a3e
226 changed files with 88284 additions and 3406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

797
.history/views/LandingDemo_20251026210326.tsx Normal file
View File

@@ -0,0 +1,797 @@
import React, { useEffect, useState } from "react";
import {
ArrowRight, Calculator, Code2, Smartphone, Palette, LineChart, Eye, Menu, X,
Sun, Moon, ChevronDown, Phone, Mail, MessageCircle, Rocket, Users, Clock,
Headphones, Award
} from "lucide-react";
import AOS from "aos";
import "aos/dist/aos.css";
// Korean i18n strings to replace <%- __('...') %>
const t = {
navigation: {
home: "홈",
about: "회사소개",
services: "서비스",
portfolio: "포트폴리오",
contact: "연락처",
calculator: "비용계산기"
},
language: {
korean: "한국어",
english: "English",
russian: "Русский",
kazakh: "Қазақша"
},
hero: {
title: { smart: "스마트", solutions: "솔루션" },
subtitle: "혁신적인 기술로 비즈니스를 성장시키세요",
description: "비즈니스의 디지털 전환을 이끄는 혁신적인 웹개발, 모바일 앱, UI/UX 디자인",
cta: { start: "시작하기", portfolio: "포트폴리오 보기" },
},
services: {
title: { our: "우리의", services: "서비스" },
subtitle: "아이디어를 현실로 만드는 전문 개발 서비스",
description: "최첨단 기술과 창의적 아이디어로 완성하는 디지털 솔루션",
view_all: "모든 서비스 보기",
web: { title: "웹 개발", description: "반응형 웹사이트 및 웹 애플리케이션 개발", price: "500,000원부터" },
mobile: { title: "모바일 앱", description: "iOS 및 Android 네이티브 앱 개발", price: "1,000,000원부터" },
design: { title: "UI/UX 디자인", description: "사용자 중심의 인터페이스 및 경험 디자인", price: "300,000원부터" },
marketing: { title: "디지털 마케팅", description: "SEO, 소셜미디어 마케팅, 광고 관리", price: "200,000원부터" },
hero: {
title: "우리의",
title_highlight: "서비스",
subtitle: "혁신적인 기술로 비즈니스 성장 지원"
},
cards: {
starting_price: "시작 가격",
consultation: "상담",
calculate_cost: "비용 계산",
popular: "인기"
},
process: {
title: "프로젝트 수행 과정",
subtitle: "체계적이고 전문적인 프로세스로 프로젝트를 진행합니다",
step1: { title: "상담 및 기획", description: "고객의 요구사항을 정확히 파악하고 최적의 솔루션을 기획합니다" },
step2: { title: "디자인 및 설계", description: "사용자 중심의 직관적인 디자인과 견고한 시스템 아키텍처를 설계합니다" },
step3: { title: "개발 및 구현", description: "최신 기술과 모범 사례를 활용하여 효율적이고 확장 가능한 솔루션을 개발합니다" },
step4: { title: "테스트 및 배포", description: "철저한 테스트를 통해 품질을 보장하고 안정적인 배포를 진행합니다" }
},
why_choose: {
title: "왜 SmartSolTech를 선택해야 할까요?",
modern_tech: { title: "최신 기술 활용", description: "항상 최신 기술 트렌드를 파악하고, 검증된 기술 스택을 활용하여 미래 지향적인 솔루션을 제공합니다." },
expert_team: { title: "전문가 팀", description: "각 분야의 전문가들로 구성된 팀이 협력하여 최고 품질의 결과물을 보장합니다." },
fast_response: { title: "빠른 대응", description: "신속한 의사소통과 빠른 피드백을 통해 프로젝트를 효율적으로 진행합니다." },
continuous_support: { title: "지속적인 지원", description: "프로젝트 완료 후에도 지속적인 유지보수와 기술 지원을 제공합니다." },
quality_guarantee: { title: "품질 보장", subtitle: "최고 품질의 결과물을 약속드립니다" }
},
cta: {
title: "프로젝트를 시작할 준비가 되셨나요?",
subtitle: "지금 바로 무료 상담을 받아보세요",
calculate_cost: "비용 계산하기",
view_portfolio: "포트폴리오 보기"
}
},
portfolio: {
title: { recent: "최근", projects: "프로젝트" },
subtitle: "웹, 모바일, 브랜딩 분야의 선별된 작업들",
view_all: "전체 포트폴리오 보기",
},
calculator: {
cta: { title: "프로젝트 비용 계산기", subtitle: "몇 가지 질문에 답하여 빠른 견적을 받아보세요", button: "계산기 열기" },
},
contact: {
cta: { ready: "시작할", start: "준비가", question: " 되셨나요?", subtitle: "프로젝트에 대해 알려주세요 - 하루 안에 답변드리겠습니다" },
phone: { title: "전화", number: "+82 10-1234-5678" },
email: { title: "이메일", address: "hello@smartsoltech.kr" },
telegram: { title: "텔레그램", subtitle: "@smartsoltech" },
form: {
title: "빠른 연락",
name: "성함",
email: "이메일",
phone: "전화번호 (선택사항)",
service: {
select: "어떤 서비스에 관심이 있으신가요?",
web: "웹 개발",
mobile: "모바일 앱",
design: "UI/UX 디자인",
branding: "브랜딩",
consulting: "컨설팅",
other: "기타",
},
message: "프로젝트에 대해 알려주세요",
submit: "메시지 보내기",
},
},
common: { view_details: "자세히 보기" },
theme: { toggle: "테마 변경" }
};
const services = [
{ icon: <Code2 className="w-10 h-10" />, title: t.services.web.title, description: t.services.web.description, price: t.services.web.price, delay: 0, category: "개발" },
{ icon: <Smartphone className="w-10 h-10" />, title: t.services.mobile.title, description: t.services.mobile.description, price: t.services.mobile.price, delay: 100, category: "모바일" },
{ icon: <Palette className="w-10 h-10" />, title: t.services.design.title, description: t.services.design.description, price: t.services.design.price, delay: 200, category: "디자인" },
{ icon: <LineChart className="w-10 h-10" />, title: t.services.marketing.title, description: t.services.marketing.description, price: t.services.marketing.price, delay: 300, category: "마케팅" },
];
const demoPortfolio = [
{
_id: "p1",
title: "핀테크 대시보드",
category: "웹앱",
images: [{ url: "https://picsum.photos/seed/fin/800/450", isPrimary: true }],
technologies: ["React", "Tailwind", "Node"],
description: "역할 기반 접근 제어를 갖춘 실시간 분석",
shortDescription: "역할 기반 접근 제어를 갖춘 실시간 분석",
viewCount: 423,
},
{
_id: "p2",
title: "웰니스 트래커",
category: "모바일",
images: [{ url: "https://picsum.photos/seed/well/800/450", isPrimary: true }],
technologies: ["Kotlin", "Compose"],
description: "개인 건강 지표 및 알림",
shortDescription: "개인 건강 지표 및 알림",
viewCount: 1189,
},
{
_id: "p3",
title: "브랜드 리뉴얼",
category: "브랜딩",
images: [{ url: "https://picsum.photos/seed/brand/800/450", isPrimary: true }],
technologies: ["Figma", "Design System"],
description: "아이덴티티, 컴포넌트 및 마케팅 사이트",
shortDescription: "아이덴티티, 컴포넌트 및 마케팅 사이트",
viewCount: 762,
},
];
export default function LandingDemo() {
const [darkMode, setDarkMode] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const [currentLanguage, setCurrentLanguage] = useState('ko');
useEffect(() => {
AOS.init({ duration: 800, easing: "ease-in-out", once: true });
// Check for saved theme preference or default to light mode
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
setDarkMode(true);
document.documentElement.classList.add('dark');
}
}, []);
const toggleTheme = () => {
setDarkMode(!darkMode);
if (!darkMode) {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
}
};
const toggleMobileMenu = () => {
setMobileMenuOpen(!mobileMenuOpen);
};
return (
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
{/* Global styles for blob animation */}
<style jsx global>{`
@keyframes blob { 0% { transform: translate(0px,0px) scale(1); } 33% { transform: translate(20px,-30px) scale(1.1);} 66% { transform: translate(-10px,20px) scale(0.9);} 100% { transform: translate(0px,0px) scale(1);} }
.animate-blob { animation: blob 12s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.glass-effect { backdrop-filter: blur(6px); }
.hero-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(1200px 600px at 10% -10%, rgba(99,102,241,.35), transparent 60%), radial-gradient(1000px 500px at 110% 10%, rgba(168,85,247,.35), transparent 60%); pointer-events:none; }
.cta-section { background: radial-gradient(1200px 600px at 10% 10%, rgba(59,130,246,.25), transparent 60%), linear-gradient(90deg, #3730a3, #7c3aed); }
.form-input { outline: none; }
.theme-toggle-slider { transform: translateX(0); }
.dark .theme-toggle-slider { transform: translateX(1.75rem); }
.theme-sun-icon { opacity: 1; }
.dark .theme-sun-icon { opacity: 0; transform: rotate(180deg); }
.theme-moon-icon { opacity: 0; transform: rotate(-180deg); }
.dark .theme-moon-icon { opacity: 1; transform: rotate(0deg); }
`}</style>
{/* Navigation */}
<nav className="bg-white dark:bg-gray-900 shadow-lg fixed w-full z-50 top-0 transition-colors duration-300">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16">
<div className="flex items-center">
{/* Logo */}
<a href="/" className="flex-shrink-0 flex items-center">
<img className="h-8 w-auto" src="/images/logo.png" alt="SmartSolTech" />
<span className="ml-2 text-xl font-bold text-gray-900 dark:text-white">SmartSolTech</span>
</a>
</div>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-6">
{/* Navigation Links */}
<a href="#hero" className="text-blue-600 border-b-2 border-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
{t.navigation.home}
</a>
<a href="#services" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
{t.navigation.services}
</a>
<a href="#portfolio" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
{t.navigation.portfolio}
</a>
<a href="#calculator" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
{t.navigation.calculator}
</a>
<a href="#contact" className="text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors nav-link">
{t.navigation.contact}
</a>
{/* Language Dropdown */}
<div className="relative group">
<button className="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-600 px-3 py-2 text-sm font-medium transition-colors">
<span className="mr-2">🇰🇷</span>
{t.language.korean}
<ChevronDown className="ml-1 w-4 h-4" />
</button>
<div className="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-800 rounded-lg shadow-lg border dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-t-lg">
🇰🇷 {t.language.korean}
</a>
<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
🇺🇸 {t.language.english}
</a>
<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
🇷🇺 {t.language.russian}
</a>
<a href="#" className="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-b-lg">
🇰🇿 {t.language.kazakh}
</a>
</div>
</div>
{/* Animated Theme Toggle */}
<div className="relative inline-block ml-4" title={t.theme.toggle}>
<input
type="checkbox"
id="theme-toggle"
className="sr-only"
checked={darkMode}
onChange={toggleTheme}
/>
<label htmlFor="theme-toggle" className="flex items-center cursor-pointer">
<div className="relative w-14 h-7 bg-gradient-to-r from-blue-200 to-yellow-200 dark:from-gray-700 dark:to-gray-600 rounded-full border-2 border-gray-300 dark:border-gray-500 transition-all duration-300 shadow-sm">
<div className="absolute top-0.5 left-1 w-5 h-5 bg-white dark:bg-gray-200 rounded-full shadow-md transform transition-all duration-300 flex items-center justify-center theme-toggle-slider">
<div className="relative w-full h-full flex items-center justify-center">
{/* Sun Icon */}
<Sun className="absolute w-3 h-3 text-yellow-500 theme-sun-icon transition-all duration-300 transform" />
{/* Moon Icon */}
<Moon className="absolute w-3 h-3 text-blue-500 theme-moon-icon transition-all duration-300 transform" />
</div>
</div>
</div>
</label>
</div>
</div>
{/* Mobile menu button */}
<div className="md:hidden flex items-center space-x-2">
<button
onClick={toggleMobileMenu}
className="p-2 text-gray-700 dark:text-gray-300 hover:text-blue-600 transition-colors"
>
{mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</button>
</div>
</div>
</div>
{/* Mobile Navigation Menu */}
{mobileMenuOpen && (
<div className="md:hidden bg-white dark:bg-gray-900 border-t dark:border-gray-700">
<div className="px-2 pt-2 pb-3 space-y-1">
<a href="#hero" className="bg-blue-50 dark:bg-blue-900 text-blue-600 block px-3 py-2 rounded-md text-base font-medium">
{t.navigation.home}
</a>
<a href="#services" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
{t.navigation.services}
</a>
<a href="#portfolio" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
{t.navigation.portfolio}
</a>
<a href="#calculator" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
{t.navigation.calculator}
</a>
<a href="#contact" className="text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
{t.navigation.contact}
</a>
</div>
</div>
)}
</nav>
<div className="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>
{/* Animated blobs */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-40 -right-32 w-80 h-80 bg-purple-500 dark:bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div className="absolute -bottom-40 -left-32 w-80 h-80 bg-blue-500 dark:bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div className="absolute top-40 left-40 w-80 h-80 bg-indigo-500 dark:bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
</div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 w-full">
<div className="text-center">
<h1 className="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight" data-aos="fade-up">
{t.hero.title.smart} <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">{t.hero.title.solutions}</span>
</h1>
<p className="text-xl md:text-2xl text-gray-300 dark:text-gray-200 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
{t.hero.subtitle}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="400">
<a href="#contact" className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
{t.hero.cta.start}
</a>
<a href="#portfolio" className="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
{t.hero.cta.portfolio}
</a>
</div>
</div>
{/* Scroll indicator */}
<div className="absolute bottom-20 left-1/2 -translate-x-1/2 animate-bounce">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</div>
</section>
)}
</nav>
{/* Hero */}
<section id="hero" className="relative bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 dark:from-gray-900 dark:via-blue-900 dark:to-purple-900 min-h-screen flex items-center overflow-hidden hero-section">
<div className="absolute inset-0 bg-black opacity-50 dark:opacity-70"></div>
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-purple-600/20"></div>
{/* Animated blobs */}
<div className="absolute inset-0 overflow-hidden">
<div className="absolute -top-40 -right-32 w-80 h-80 bg-purple-500 dark:bg-purple-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div>
<div className="absolute -bottom-40 -left-32 w-80 h-80 bg-blue-500 dark:bg-blue-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div>
<div className="absolute top-40 left-40 w-80 h-80 bg-indigo-500 dark:bg-indigo-400 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div>
</div>
<div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 w-full">
<div className="text-center">
<h1 className="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight" data-aos="fade-up">
{t.hero.title.smart} <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">{t.hero.title.solutions}</span>
</h1>
<p className="text-xl md:text-2xl text-gray-300 dark:text-gray-200 mb-8 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
{t.hero.subtitle}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="400">
<a href="#contact" className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
{t.hero.cta.start}
</a>
<a href="#portfolio" className="border-2 border-white text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-white hover:text-gray-900 transition-all duration-300 transform hover:scale-105">
{t.hero.cta.portfolio}
</a>
</div>
</div>
{/* Scroll indicator */}
<div className="absolute bottom-20 left-1/2 -translate-x-1/2 animate-bounce">
<svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</div>
</section>
{/* Services Section */}
<section id="services" className="py-20 bg-white dark:bg-gray-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Hero Section */}
<div className="text-center mb-16" data-aos="fade-up">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
{t.services.hero.title} <span className="text-yellow-300">{t.services.hero.title_highlight}</span>
</h2>
<p className="text-xl md:text-2xl mb-8 text-gray-700 dark:text-gray-300">
{t.services.hero.subtitle}
</p>
</div>
{/* Services Grid */}
<div className="space-y-12">
{services.map((service, index) => (
<div
key={index}
className="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 className={`relative h-64 overflow-hidden ${
index % 4 === 0 ? 'bg-gradient-to-r from-blue-600 to-purple-600' :
index % 4 === 1 ? 'bg-gradient-to-r from-green-500 to-teal-600' :
index % 4 === 2 ? 'bg-gradient-to-r from-purple-600 to-pink-600' :
'bg-gradient-to-r from-orange-500 to-red-600'
}`}>
{/* Service Image/Icon Area */}
<div className="absolute left-0 top-0 w-2/5 h-full flex items-center justify-center px-6 py-4">
<div className="relative z-10 text-white">
{service.icon}
{/* Decorative elements */}
<div className="absolute -top-8 -left-8 w-24 h-24 bg-white bg-opacity-10 rounded-full animate-pulse"></div>
<div className="absolute -bottom-4 -right-4 w-16 h-16 bg-white bg-opacity-10 rounded-full animate-pulse" style={{animationDelay: '1s'}}></div>
</div>
{/* Gradient fade to center */}
<div className="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 className="absolute right-0 top-0 w-3/5 h-full flex items-center pr-16 pl-6 py-4">
<div className="text-right w-full text-white">
{/* Service Category Badge */}
<div className="inline-block mb-4">
<span className="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 className="text-3xl font-bold mb-4 leading-tight">
{service.title}
</h3>
{/* Service Description */}
<p className="text-white text-opacity-90 mb-6 leading-relaxed text-lg">
{service.description}
</p>
{/* Pricing */}
<div className="mb-6">
<div className="text-white text-opacity-75 text-sm mb-1">{t.services.cards.starting_price}</div>
<div className="text-3xl font-bold text-white">
{service.price}
</div>
</div>
{/* Action Buttons */}
<div className="flex flex-col gap-3 items-end">
<a href="#calculator"
className="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">
{t.services.cards.calculate_cost}
</a>
</div>
</div>
</div>
</div>
</div>
))}
</div>
{/* Process Section */}
<div className="mt-32">
<div className="text-center mb-16" data-aos="fade-up">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
{t.services.process.title}
</h2>
<p className="text-lg text-gray-700 dark:text-gray-300 text-center mb-12 max-w-3xl mx-auto">
{t.services.process.subtitle}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Step 1 */}
<div className="text-center" data-aos="fade-up" data-aos-delay="100">
<div className="w-20 h-20 bg-blue-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span className="text-white text-2xl font-bold">1</span>
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step1.title}</h3>
<p className="text-gray-700 dark:text-gray-300 text-center">
{t.services.process.step1.description}
</p>
</div>
{/* Step 2 */}
<div className="text-center" data-aos="fade-up" data-aos-delay="200">
<div className="w-20 h-20 bg-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span className="text-white text-2xl font-bold">2</span>
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step2.title}</h3>
<p className="text-gray-700 dark:text-gray-300 text-center">
{t.services.process.step2.description}
</p>
</div>
{/* Step 3 */}
<div className="text-center" data-aos="fade-up" data-aos-delay="300">
<div className="w-20 h-20 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span className="text-white text-2xl font-bold">3</span>
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step3.title}</h3>
<p className="text-gray-700 dark:text-gray-300 text-center">
{t.services.process.step3.description}
</p>
</div>
{/* Step 4 */}
<div className="text-center" data-aos="fade-up" data-aos-delay="400">
<div className="w-20 h-20 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-6">
<span className="text-white text-2xl font-bold">4</span>
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-4">{t.services.process.step4.title}</h3>
<p className="text-gray-700 dark:text-gray-300 text-center">
{t.services.process.step4.description}
</p>
</div>
</div>
</div>
{/* Why Choose Us Section */}
<div className="mt-32">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Content */}
<div data-aos="fade-right">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-6">
{t.services.why_choose.title}
</h2>
<div className="space-y-6">
{/* Feature 1 */}
<div className="flex items-start">
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<Rocket className="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.modern_tech.title}</h3>
<p className="text-gray-600 dark:text-gray-300">
{t.services.why_choose.modern_tech.description}
</p>
</div>
</div>
{/* Feature 2 */}
<div className="flex items-start">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<Users className="w-6 h-6 text-green-600 dark:text-green-400" />
</div>
<div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.expert_team.title}</h3>
<p className="text-gray-600 dark:text-gray-300">
{t.services.why_choose.expert_team.description}
</p>
</div>
</div>
{/* Feature 3 */}
<div className="flex items-start">
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<Clock className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.fast_response.title}</h3>
<p className="text-gray-600 dark:text-gray-300">
{t.services.why_choose.fast_response.description}
</p>
</div>
</div>
{/* Feature 4 */}
<div className="flex items-start">
<div className="w-12 h-12 bg-orange-100 dark:bg-orange-900 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<Headphones className="w-6 h-6 text-orange-600 dark:text-orange-400" />
</div>
<div>
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{t.services.why_choose.continuous_support.title}</h3>
<p className="text-gray-600 dark:text-gray-300">
{t.services.why_choose.continuous_support.description}
</p>
</div>
</div>
</div>
</div>
{/* Image/Visual */}
<div className="relative" data-aos="fade-left">
<div className="bg-gradient-to-br from-blue-100 to-purple-100 dark:from-blue-900 dark:to-purple-900 rounded-2xl p-8 h-96 flex items-center justify-center">
<div className="text-center">
<Award className="w-24 h-24 text-blue-600 dark:text-blue-400 mx-auto mb-4" />
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">{t.services.why_choose.quality_guarantee.title}</h3>
<p className="text-gray-600 dark:text-gray-300">
{t.services.why_choose.quality_guarantee.subtitle}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* Portfolio */}
<section id="portfolio" className="py-20 bg-gray-50 dark:bg-gray-800">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16" data-aos="fade-up">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">
{t.portfolio.title.recent} <span className="text-purple-600 dark:text-purple-400">{t.portfolio.title.projects}</span>
</h2>
<p className="text-lg text-gray-600 dark:text-gray-300 text-center max-w-3xl mx-auto">
{t.portfolio.subtitle}
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{demoPortfolio.map((project, index) => (
<div key={project._id} className="group bg-white dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay={index * 100}>
<div className="relative overflow-hidden">
<img src={project.images?.[0]?.url} alt={project.title} className="w-full h-48 object-cover" />
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<div className="absolute bottom-4 left-4 right-4 translate-y-4 group-hover:translate-y-0 transition-transform duration-300 opacity-0 group-hover:opacity-100">
<div className="flex flex-wrap gap-2">
{project.technologies?.slice(0, 3).map((tech) => (
<span key={tech} className="px-2 py-1 bg-white/20 glass-effect text-white text-xs rounded-full">{tech}</span>
))}
</div>
</div>
</div>
<div className="p-6">
<div className="flex items-center justify-between mb-2">
<span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 text-sm rounded-full font-medium">{project.category}</span>
<span className="text-gray-500 dark:text-gray-400 text-sm flex items-center"><Eye className="w-4 h-4 mr-1" />{project.viewCount ?? 0}</span>
</div>
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">{project.title}</h3>
<p className="text-gray-600 dark:text-gray-300 mb-4">{project.shortDescription ?? project.description}</p>
<a href="#" className="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:text-blue-700 dark:hover:text-blue-300 transition-colors">
{t.common.view_details}
<ArrowRight className="ml-1 w-4 h-4" />
</a>
</div>
</div>
))}
</div>
<div className="text-center mt-12" data-aos="fade-up">
<a href="#portfolio" className="inline-flex items-center px-6 py-3 bg-purple-600 dark:bg-purple-500 text-white font-semibold rounded-lg hover:bg-purple-700 dark:hover:bg-purple-400 transition-colors">
{t.portfolio.view_all}
<ArrowRight className="ml-2 w-5 h-5" />
</a>
</div>
</div>
</section>
{/* Calculator CTA */}
<section id="calculator" className="py-20 cta-section">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
<div data-aos="fade-up">
<h2 className="text-2xl md:text-3xl font-bold text-white mb-6">{t.calculator.cta.title}</h2>
<p className="text-lg text-blue-100 mb-8 max-w-3xl mx-auto">{t.calculator.cta.subtitle}</p>
<a href="#calculator" className="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-bold rounded-full text-lg hover:bg-gray-100 transition-colors transform hover:scale-105">
<Calculator className="mr-3" />
{t.calculator.cta.button}
</a>
</div>
</div>
</section>
{/* Services CTA */}
<section className="py-20 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">
{t.services.cta.title}
</h2>
<p className="text-xl mb-8 opacity-90" data-aos="fade-up" data-aos-delay="200">
{t.services.cta.subtitle}
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="400">
<a href="#calculator" className="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white hover:text-blue-600 transition-colors font-semibold">
{t.services.cta.calculate_cost}
</a>
<a href="#portfolio" className="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white hover:text-blue-600 transition-colors font-semibold">
{t.services.cta.view_portfolio}
</a>
</div>
</div>
</section>
{/* Contact */}
<section id="contact" className="py-20 bg-white dark:bg-gray-900">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div data-aos="fade-right">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-6">
{t.contact.cta.ready} <span className="text-blue-600 dark:text-blue-400">{t.contact.cta.start}</span>
{t.contact.cta.question}
</h2>
<p className="text-lg text-gray-600 dark:text-gray-300 mb-8">{t.contact.cta.subtitle}</p>
<div className="space-y-4">
<div className="flex items-center">
<div className="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mr-4">
<Phone className="w-6 h-6 text-blue-600 dark:text-blue-400" />
</div>
<div>
<div className="font-semibold text-gray-900 dark:text-white">{t.contact.phone.title}</div>
<div className="text-gray-600 dark:text-gray-300">{t.contact.phone.number}</div>
</div>
</div>
<div className="flex items-center">
<div className="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center mr-4">
<Mail className="w-6 h-6 text-purple-600 dark:text-purple-400" />
</div>
<div>
<div className="font-semibold text-gray-900 dark:text-white">{t.contact.email.title}</div>
<div className="text-gray-600 dark:text-gray-300">{t.contact.email.address}</div>
</div>
</div>
<div className="flex items-center">
<div className="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mr-4">
<MessageCircle className="w-6 h-6 text-green-600 dark:text-green-400" />
</div>
<div>
<div className="font-semibold text-gray-900 dark:text-white">{t.contact.telegram.title}</div>
<div className="text-gray-600 dark:text-gray-300">{t.contact.telegram.subtitle}</div>
</div>
</div>
</div>
</div>
<div data-aos="fade-left">
<div className="p-8 rounded-2xl shadow-lg bg-white dark:bg-gray-800">
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">{t.contact.form.title}</h3>
<form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
<input
type="text"
placeholder={t.contact.form.name}
required
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
/>
<input
type="email"
placeholder={t.contact.form.email}
required
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
/>
<input
type="tel"
placeholder={t.contact.form.phone}
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
/>
<select
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white"
title={t.contact.form.service.select}
>
<option value="">{t.contact.form.service.select}</option>
<option value="web">{t.contact.form.service.web}</option>
<option value="mobile">{t.contact.form.service.mobile}</option>
<option value="design">{t.contact.form.service.design}</option>
<option value="branding">{t.contact.form.service.branding}</option>
<option value="consulting">{t.contact.form.service.consulting}</option>
<option value="other">{t.contact.form.service.other}</option>
</select>
<textarea
rows={4}
placeholder={t.contact.form.message}
required
className="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none dark:bg-gray-700 dark:text-white"
></textarea>
<button
type="submit"
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold py-3 rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-300 transform hover:scale-105"
>
{t.contact.form.submit}
</button>
</form>
</div>
</div>
</div>
</div>
</section>
</div>
);
}