Spaces:

nkjoy
/

kmeda

Running

File size: 14,382 Bytes
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>시각디자인업 - 케이미디어</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Noto Sans KR', sans-serif; scroll-behavior: smooth; }
        .glass-effect { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }
        .gradient-text { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .mosaic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
        .mosaic-item { border-radius: 1rem; overflow: hidden; position: relative; transition: transform .4s ease; }
        .mosaic-item:hover { transform: scale(1.05) rotate(-1deg); }
        .mosaic-item::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(102,126,234,.2), rgba(118,75,162,.2)); opacity: 0; transition: opacity .4s; }
        .mosaic-item:hover::after { opacity: 1; }
        .morph-card { background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); border-radius: 2rem; padding: 2.5rem; position: relative; overflow: hidden; }
        .morph-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(102,126,234,.1) 0%, transparent 70%); transform: rotate(30deg); transition: transform .6s; }
        .morph-card:hover::before { transform: rotate(0deg) scale(1.2); }
        .neon-btn { background: linear-gradient(45deg, #667eea, #764ba2); color: #fff; border: none; padding: .75rem 1.5rem; border-radius: 999px; font-weight: 600; position: relative; overflow: hidden; z-index: 1; }
        .neon-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(45deg, #fff, #fff); opacity: 0; transition: opacity .3s; z-index: -1; }
        .neon-btn:hover::before { opacity: .2; }
        .floating { animation: float 4s ease-in-out infinite; }
        @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-8px); } 100% { transform: translateY(0); } }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <!-- Navigation -->
    <nav class="fixed w-full z-50 glass-effect py-4 px-6">
        <div class="container mx-auto flex justify-between items-center">
            <a href="index.html" class="text-2xl font-bold text-white">KMedia</a>
            <div class="hidden md:flex space-x-8">
                <a href="about.html" class="text-white hover:text-purple-200 transition">회사소개</a>
                <a href="index.html#business" class="text-white hover:text-purple-200 transition">사업영역</a>
                <a href="index.html#promotion" class="text-white hover:text-purple-200 transition">홍보마당</a>
                <a href="index.html#communication" class="text-white hover:text-purple-200 transition">소통마당</a>
            </div>
            <button class="md:hidden text-white"><i data-feather="menu"></i></button>
        </div>
    </nav>

    <!-- Hero -->
    <section class="relative pt-32 pb-20 bg-gradient-to-br from-purple-600 via-indigo-600 to-indigo-700 text-white overflow-hidden">
        <div class="absolute -top-20 -left-20 w-96 h-96 bg-purple-500 rounded-full opacity-20 blur-3xl floating"></div>
        <div class="absolute -bottom-16 -right-16 w-80 h-80 bg-indigo-500 rounded-full opacity-20 blur-3xl floating" style="animation-delay: 2s;"></div>
        <div class="container mx-auto px-6 text-center relative z-10">
            <h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up">시각디자인업</h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
                기업과 상품의 브랜드 가치를 시각적으로 표현하고 감동을 전합니다
            </p>
        </div>
    </section>

    <!-- Philosophy -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <div class="max-w-4xl mx-auto text-center mb-16" data-aos="fade-up">
                <h2 class="text-3xl font-bold mb-6">시각으로 전하는 감동</h2>
                <p class="text-lg text-gray-600 leading-relaxed">
                    케이미디어는 단순히 예쁜 디자인을 넘어, 브랜드의 이야기와 가치를
                    시각적 언어로 풀어내어 타깃에게 깊은 감동을 전달합니다.
                </p>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="morph-card text-center box-3d" data-aos="zoom-in">
                    <div class="relative z-10">
                        <div class="inline-block p-4 rounded-2xl bg-indigo-100 mb-4"><i data-feather="eye" class="text-indigo-600 text-2xl"></i></div>
                        <h3 class="text-xl font-bold mb-2">심미적 완성도</h3>
                        <p class="text-gray-600 text-sm">완성도 높은 시각 표현으로 브랜드 품격을 높입니다</p>
                    </div>
                </div>
                <div class="morph-card text-center box-3d" data-aos="zoom-in" data-aos-delay="100">
                    <div class="relative z-10">
                        <div class="inline-block p-4 rounded-2xl bg-purple-100 mb-4"><i data-feather="target" class="text-purple-600 text-2xl"></i></div>
                        <h3 class="text-xl font-bold mb-2">전략적 접근</h3>
                        <p class="text-gray-600 text-sm">브랜드 전략에 기반한 효과적 시각 커뮤니케이션</p>
                    </div>
                </div>
                <div class="morph-card text-center box-3d" data-aos="zoom-in" data-aos-delay="200">
                    <div class="relative z-10">
                        <div class="inline-block p-4 rounded-2xl bg-pink-100 mb-4"><i data-feather="heart" class="text-pink-600 text-2xl"></i></div>
                        <h3 class="text-xl font-bold mb-2">감성적 연결</h3>
                        <p class="text-gray-600 text-sm">감성을 자극하는 디자인으로 소비자와의 깊은 연결</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Mosaic Portfolio -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Portfolio Mosaic</h2>
            <div class="mosaic-grid" data-aos="fade-up">
                <div class="mosaic-item h-40 bg-gradient-to-br from-purple-400 to-indigo-500 flex items-end p-4 text-white font-semibold">Brand Identity</div>
                <div class="mosaic-item h-56 bg-gradient-to-br from-indigo-400 to-purple-500 flex items-end p-4 text-white font-semibold">Package Design</div>
                <div class="mosaic-item h-40 bg-gradient-to-br from-pink-400 to-purple-500 flex items-end p-4 text-white font-semibold">Editorial Design</div>
                <div class="mosaic-item h-48 bg-gradient-to-br from-indigo-500 to-pink-400 flex items-end p-4 text-white font-semibold">Web Graphic</div>
                <div class="mosaic-item h-56 bg-gradient-to-br from-purple-500 to-indigo-400 flex items-end p-4 text-white font-semibold">Poster Design</div>
                <div class="mosaic-item h-40 bg-gradient-to-br from-pink-500 to-indigo-500 flex items-end p-4 text-white font-semibold">Logo Design</div>
                <div class="mosaic-item h-48 bg-gradient-to-br from-indigo-400 to-pink-500 flex items-end p-4 text-white font-semibold">UI/UX Design</div>
                <div class="mosaic-item h-48 bg-gradient-to-br from-purple-400 to-pink-500 flex items-end p-4 text-white font-semibold">Motion Graphic</div>
            </div>
        </div>
    </section>

    <!-- Service Spectrum -->
    <section class="py-20 bg-white">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Design Spectrum</h2>
            <div class="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
                <div data-aos="fade-right">
                    <img src="http://static.photos/studio/640x360/1" alt="Studio" class="rounded-2xl shadow-lg w-full">
                </div>
                <div class="flex flex-col justify-center space-y-4" data-aos="fade-left">
                    <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-indigo-100 text-indigo-700 text-xs font-bold mr-3 mt-1">01</span><div><h4 class="font-bold">Brand Identity</h4><p class="text-gray-600 text-sm">로고, 컬러, 타이포, 패턴까지 통합 브랜드 시스템 설계</p></div></div>
                    <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-purple-100 text-purple-700 text-xs font-bold mr-3 mt-1">02</span><div><h4 class="font-bold">Package Design</h4><p class="text-gray-600 text-sm">제품의 매력을 극대화하는 창의적 패키지 디자인</p></div></div>
                    <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-pink-100 text-pink-700 text-xs font-bold mr-3 mt-1">03</span><div><h4 class="font-bold">Promotion Design</h4><p class="text-gray-600 text-sm">포스터, 배너, 브로셔 등 프로모션 전반의 시각물</p></div></div>
                    <div class="flex items-start"><span class="inline-block px-3 py-1 rounded-full bg-gray-100 text-gray-700 text-xs font-bold mr-3 mt-1">04</span><div><h4 class="font-bold">UI/UX Design</h4><p class="text-gray-600 text-sm">사용자 경험을 고려한 인터페이스 디자인</p></div></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Work Flow -->
    <section class="py-20 bg-gray-50">
        <div class="container mx-auto px-6">
            <h2 class="text-3xl font-bold text-center mb-12" data-aos="fade-up">Design Journey</h2>
            <div class="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in"><div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="edit-3" class="text-indigo-600"></i></div><h4 class="font-bold">Sketch</h4><p class="text-xs text-gray-500">아이디어 스케치</p></div>
                <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="100"><div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="layout" class="text-purple-600"></i></div><h4 class="font-bold">Design</h4><p class="text-xs text-gray-500">시각적 구현</p></div>
                <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="200"><div class="w-14 h-14 bg-pink-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="message-circle" class="text-pink-600"></i></div><h4 class="font-bold">Feedback</h4><p class="text-xs text-gray-500">피드백 반영</p></div>
                <div class="text-center box-3d bg-white p-4 rounded-2xl" data-aos="zoom-in" data-aos-delay="300"><div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"><i data-feather="check-circle" class="text-green-600"></i></div><h4 class="font-bold">Launch</h4><p class="text-xs text-gray-500">최종 완성</p></div>
            </div>
        </div>
    </section>

    <!-- CTA -->
    <section class="py-20 bg-gradient-to-r from-purple-600 to-indigo-600 text-white">
        <div class="container mx-auto px-6 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">당신의 브랜드를 빛나게 할 디자인을 만나보세요</h2>
            <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">지금 바로 상담을 신청하시면 전문 디자이너가 함께합니다.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
                <button class="neon-btn">무료 상담 신청</button>
                <button class="neon-btn bg-transparent border-2 border-white">포트폴리오 보기</button>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6">
            <div class="grid md:grid-cols-4 gap-8">
                <div><h4 class="text-lg font-semibold mb-4">KMedia</h4><p class="text-gray-400">사람 중심의 창의적인 미디어 솔루션</p></div>
                <div><h4 class="text-lg font-semibold mb-4">연락처</h4><p class="text-gray-400">Tel: 02-1234-5678</p><p class="text-gray-400">Email: info@kmedia.com</p></div>
                <div><h4 class="text-lg font-semibold mb-4">주소</h4><p class="text-gray-400">서울특별시 강남구 테헤란로 123</p></div>
                <div><h4 class="text-lg font-semibold mb-4">Follow Us</h4><div class="flex space-x-4"><a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a><a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a></div></div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400"><p>© 2023 KMedia. All rights reserved.</p></div>
        </div>
    </footer>

    <script>
        AOS.init({ duration: 1000, once: true });
        feather.replace();
    </script>
</body>
</html>