<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>회사 소개 - SmartSolTech</title>
    
    <!-- SEO Meta Tags -->
    <meta name="description" content="SmartSolTech 회사 소개 - 혁신적인 기술로 고객의 성공을 이끌어가는 디지털 솔루션 전문 기업입니다.">
    <meta name="keywords" content="SmartSolTech, 회사소개, 기업정보, 디지털솔루션, 웹개발, 모바일앱">
    
    <!-- Open Graph -->
    <meta property="og:title" content="회사 소개 - SmartSolTech">
    <meta property="og:description" content="혁신적인 기술로 고객의 성공을 이끌어가는 디지털 솔루션 전문 기업">
    <meta property="og:type" content="website">
    
    <!-- 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">
    <link href="/css/fixes.css" rel="stylesheet">
</head>
<body class="font-sans">
    <%- include('partials/navigation') %>

    <!-- Hero Section -->
    <section class="relative bg-gradient-to-br from-blue-900 via-purple-900 to-indigo-900 py-32">
        <div class="absolute inset-0 bg-black opacity-40"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h1 class="text-5xl md:text-6xl font-bold text-white mb-6" data-aos="fade-up">
                About <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">SmartSolTech</span>
            </h1>
            <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="200">
                혁신적인 기술로 고객의 성공을 이끌어가는 디지털 솔루션 전문 기업
            </p>
        </div>
    </section>

    <!-- Company Overview -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
                <div data-aos="fade-right">
                    <h2 class="text-4xl font-bold text-gray-900 mb-6">
                        <span class="text-blue-600">혁신</span>과 <span class="text-purple-600">창의</span>로 만드는 미래
                    </h2>
                    <p class="text-lg text-gray-600 mb-6">
                        SmartSolTech는 2020년 설립된 디지털 솔루션 전문 기업으로, 웹 개발, 모바일 앱, UI/UX 디자인 분야에서 
                        혁신적인 기술과 창의적인 아이디어를 바탕으로 고객의 비즈니스 성공을 지원합니다.
                    </p>
                    <p class="text-lg text-gray-600 mb-8">
                        우리는 단순히 기술을 제공하는 것이 아니라, 고객의 목표를 이해하고 그에 맞는 최적의 솔루션을 
                        제안하여 함께 성장하는 파트너가 되고자 합니다.
                    </p>
                    <div class="grid grid-cols-3 gap-8">
                        <div class="text-center">
                            <div class="text-3xl font-bold text-blue-600 mb-2">100+</div>
                            <div class="text-gray-600">완료 프로젝트</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-purple-600 mb-2">50+</div>
                            <div class="text-gray-600">만족한 고객</div>
                        </div>
                        <div class="text-center">
                            <div class="text-3xl font-bold text-green-600 mb-2">4년</div>
                            <div class="text-gray-600">업계 경험</div>
                        </div>
                    </div>
                </div>
                <div data-aos="fade-left">
                    <div class="relative">
                        <div class="bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl p-8 text-white">
                            <h3 class="text-2xl font-bold mb-4">우리의 미션</h3>
                            <p class="text-lg mb-6">
                                "기술을 통해 모든 비즈니스가 디지털 시대에서 성공할 수 있도록 돕는 것"
                            </p>
                            <h3 class="text-2xl font-bold mb-4">우리의 비전</h3>
                            <p class="text-lg">
                                "한국을 대표하는 글로벌 디지털 솔루션 기업으로 성장하여 
                                전 세계 고객들의 디지털 혁신을 주도하는 것"
                            </p>
                        </div>
                        <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-yellow-400 rounded-full opacity-20"></div>
                        <div class="absolute -top-6 -left-6 w-16 h-16 bg-pink-400 rounded-full opacity-20"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Values -->
    <section class="py-20 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                    Core <span class="text-blue-600">Values</span>
                </h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    SmartSolTech가 추구하는 핵심 가치들
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="text-center p-8 bg-white rounded-2xl shadow-lg card-hover" data-aos="fade-up">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-lightbulb text-2xl text-blue-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">혁신 (Innovation)</h3>
                    <p class="text-gray-600">
                        끊임없는 연구개발과 최신 기술 도입으로 혁신적인 솔루션을 제공합니다.
                    </p>
                </div>

                <div class="text-center p-8 bg-white rounded-2xl shadow-lg card-hover" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-users text-2xl text-purple-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">협력 (Collaboration)</h3>
                    <p class="text-gray-600">
                        고객과의 긴밀한 소통과 협력을 통해 최상의 결과를 만들어냅니다.
                    </p>
                </div>

                <div class="text-center p-8 bg-white rounded-2xl shadow-lg card-hover" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-award text-2xl text-green-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">품질 (Quality)</h3>
                    <p class="text-gray-600">
                        높은 품질 기준을 유지하며 고객이 만족할 수 있는 완성도 높은 제품을 제공합니다.
                    </p>
                </div>

                <div class="text-center p-8 bg-white rounded-2xl shadow-lg card-hover" data-aos="fade-up" data-aos-delay="300">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-rocket text-2xl text-yellow-600"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">성장 (Growth)</h3>
                    <p class="text-gray-600">
                        고객과 함께 성장하며, 지속적인 학습과 발전을 추구합니다.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                    Our <span class="text-purple-600">Team</span>
                </h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    전문성과 열정을 갖춘 SmartSolTech 팀을 소개합니다
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="text-center p-8 bg-gray-50 rounded-2xl card-hover" data-aos="fade-up">
                    <div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <span class="text-white text-2xl font-bold">KH</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">김현우</h3>
                    <p class="text-blue-600 font-semibold mb-4">CEO & Founder</p>
                    <p class="text-gray-600 mb-4">
                        10년 이상의 웹 개발 경험을 바탕으로 SmartSolTech를 설립하여 
                        혁신적인 디지털 솔루션을 제공하고 있습니다.
                    </p>
                    <div class="flex justify-center space-x-4">
                        <a href="#" class="text-gray-400 hover:text-blue-600 transition-colors">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-blue-600 transition-colors">
                            <i class="fab fa-github text-xl"></i>
                        </a>
                    </div>
                </div>

                <div class="text-center p-8 bg-gray-50 rounded-2xl card-hover" data-aos="fade-up" data-aos-delay="100">
                    <div class="w-24 h-24 bg-gradient-to-br from-purple-500 to-pink-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <span class="text-white text-2xl font-bold">LJ</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">이정민</h3>
                    <p class="text-purple-600 font-semibold mb-4">CTO & Lead Developer</p>
                    <p class="text-gray-600 mb-4">
                        풀스택 개발자로서 최신 기술 트렌드를 적용하여 
                        확장 가능하고 안정적인 시스템을 구축합니다.
                    </p>
                    <div class="flex justify-center space-x-4">
                        <a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-purple-600 transition-colors">
                            <i class="fab fa-github text-xl"></i>
                        </a>
                    </div>
                </div>

                <div class="text-center p-8 bg-gray-50 rounded-2xl card-hover" data-aos="fade-up" data-aos-delay="200">
                    <div class="w-24 h-24 bg-gradient-to-br from-green-500 to-teal-600 rounded-full flex items-center justify-center mx-auto mb-6">
                        <span class="text-white text-2xl font-bold">PS</span>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-2">박서연</h3>
                    <p class="text-green-600 font-semibold mb-4">UI/UX Designer</p>
                    <p class="text-gray-600 mb-4">
                        사용자 중심의 디자인 철학을 바탕으로 직관적이고 
                        아름다운 인터페이스를 설계합니다.
                    </p>
                    <div class="flex justify-center space-x-4">
                        <a href="#" class="text-gray-400 hover:text-green-600 transition-colors">
                            <i class="fab fa-linkedin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-green-600 transition-colors">
                            <i class="fab fa-dribbble text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technology Stack -->
    <section class="py-20 bg-gray-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl md:text-5xl font-bold text-white mb-4">
                    Technology <span class="text-blue-400">Stack</span>
                </h2>
                <p class="text-xl text-gray-300 max-w-3xl mx-auto">
                    최신 기술과 검증된 도구들로 최고의 솔루션을 제공합니다
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="text-center p-8 bg-gray-800 rounded-2xl" data-aos="fade-up">
                    <h3 class="text-xl font-bold text-white mb-6">Frontend</h3>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-react text-3xl text-blue-400 mb-2"></i>
                            <div class="text-white text-sm">React</div>
                        </div>
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-vuejs text-3xl text-green-400 mb-2"></i>
                            <div class="text-white text-sm">Vue.js</div>
                        </div>
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-angular text-3xl text-red-400 mb-2"></i>
                            <div class="text-white text-sm">Angular</div>
                        </div>
                    </div>
                </div>

                <div class="text-center p-8 bg-gray-800 rounded-2xl" data-aos="fade-up" data-aos-delay="100">
                    <h3 class="text-xl font-bold text-white mb-6">Backend</h3>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-node-js text-3xl text-green-500 mb-2"></i>
                            <div class="text-white text-sm">Node.js</div>
                        </div>
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-python text-3xl text-yellow-400 mb-2"></i>
                            <div class="text-white text-sm">Python</div>
                        </div>
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-java text-3xl text-orange-400 mb-2"></i>
                            <div class="text-white text-sm">Java</div>
                        </div>
                    </div>
                </div>

                <div class="text-center p-8 bg-gray-800 rounded-2xl" data-aos="fade-up" data-aos-delay="200">
                    <h3 class="text-xl font-bold text-white mb-6">Mobile</h3>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-react text-3xl text-blue-400 mb-2"></i>
                            <div class="text-white text-sm">React Native</div>
                        </div>
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fas fa-mobile-alt text-3xl text-blue-500 mb-2"></i>
                            <div class="text-white text-sm">Flutter</div>
                        </div>
                        <div class="p-4 bg-gray-700 rounded-lg">
                            <i class="fab fa-swift text-3xl text-orange-500 mb-2"></i>
                            <div class="text-white text-sm">Swift</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 cta-section">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div data-aos="fade-up">
                <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">
                    함께 성공하는 파트너가 되어보세요
                </h2>
                <p class="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
                    SmartSolTech와 함께 여러분의 비즈니스를 다음 단계로 발전시켜보세요
                </p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="/contact" class="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">
                        <i class="fas fa-handshake mr-3"></i>
                        파트너십 문의
                    </a>
                    <a href="/portfolio" class="inline-flex items-center px-8 py-4 border-2 border-white text-white font-bold rounded-full text-lg hover:bg-white hover:text-blue-600 transition-colors transform hover:scale-105">
                        <i class="fas fa-eye mr-3"></i>
                        포트폴리오 보기
                    </a>
                </div>
            </div>
        </div>
    </section>

    <%- include('partials/footer') %>

    <!-- Scripts -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="/js/main.js"></script>
    <script>
        // Initialize AOS
        AOS.init({
            duration: 800,
            once: true,
            offset: 100
        });
    </script>
</body>
</html>