Spaces:

nkjoy
/

kmeda

Running

App Files Files Community

kmeda / overview.html

nkjoy

- 회사개요 페이지 만들어줘 !

1392c5d verified 6 months ago

raw

history blame contribute delete

11.8 kB

	<!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);
	-webkit-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;
	}
	.mission-card {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	border-left: 4px solid #667eea;
	transform-style: preserve-3d;
	}
	.vision-card {
	background: linear-gradient(135deg, rgba(118, 75, 162, 0.1) 0%, rgba(102, 126, 234, 0.1) 100%);
	border-left: 4px solid #764ba2;
	transform-style: preserve-3d;
	}
	.box-3d {
	transform-style: preserve-3d;
	perspective: 1000px;
	transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1),
	0 0 0 1px rgba(255, 255, 255, 0.1),
	0 30px 30px rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	position: relative;
	}
	.box-3d::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3));
	opacity: 0;
	transition: opacity 0.5s ease;
	}
	.box-3d:hover {
	transform: translateY(-10px) rotateX(5deg) rotateY(5deg) scale(1.03);
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.2),
	0 0 0 1px rgba(255, 255, 255, 0.2),
	0 40px 40px rgba(0, 0, 0, 0.2);
	}
	.box-3d:hover::before {
	opacity: 1;
	}
	</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 -->
	<section class="pt-32 pb-20 bg-gradient-to-r from-purple-500 to-indigo-600 text-white">
	<div class="container mx-auto px-6 text-center">
	<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>

	<!-- Company Overview -->
	<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">
	<p class="text-lg text-gray-600 leading-relaxed">
	세계적으로 극심해지는 불경기속에서 최고의 위기가 최대의 기회가 될 수 있다는 적극적인 사고를 기초로 하여
	새로운 체계의 변화를 통해 각각의 전문성을 최대하고 경쟁력 향상과 효율의 극대화로 새로운 미래시장의
	선두기업이 되는 것을 목표로 하고 있습니다.
	</p>
	</div>
	</div>
	</section>

	<!-- Mission & Vision -->
	<section class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<div class="max-w-5xl mx-auto">
	<div class="grid md:grid-cols-2 gap-12">
	<!-- Mission -->
	<div class="mission-card p-8 box-3d" data-aos="fade-right">
	<h3 class="text-2xl font-bold mb-6 gradient-text">미션</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
	<span>디자인을 통해 감동을 전하는 브랜드 가치 실현</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
	<span>디지털 시대에 맞는 생활밀착형 콘텐츠와 공간 제공</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check-circle" class="text-green-500 mr-3 mt-1 flex-shrink-0"></i>
	<span>환경을 고려하고 지속가능한 디자인으로 사회에 기여</span>
	</li>
	</ul>
	</div>

	<!-- Vision -->
	<div class="vision-card p-8 box-3d" data-aos="fade-left">
	<h3 class="text-2xl font-bold mb-6 gradient-text">비젼</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<i data-feather="target" class="text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
	<span>사람과 기술, 환경이 조화를 이루는 디지털 융복합 디자인기업</span>
	</li>
	<li class="flex items-start">
	<i data-feather="target" class="text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
	<span>디지털 격차를 해소하고 모두가 소통 가능한 메타버스 기반 플랫폼 구축</span>
	</li>
	<li class="flex items-start">
	<i data-feather="target" class="text-purple-500 mr-3 mt-1 flex-shrink-0"></i>
	<span>환경과 공존하는 책임 있는 디자인으로 고객과 사회로부터 신뢰받는 기업</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Core Values -->
	<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-4">핵심 가치</h2>
	<p class="text-gray-600">케이미디어가 지향하는 가치와 신념</p>
	</div>

	<div class="grid md:grid-cols-3 gap-8">
	<div class="p-6 box-3d bg-white text-center" data-aos="zoom-in">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="heart" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">사람 중심</h3>
	<p class="text-gray-600">사용자 경험과 감동을 최우선으로 고려합니다</p>
	</div>

	<div class="p-6 box-3d bg-white text-center" data-aos="zoom-in" data-aos-delay="100">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="zap" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">창의력</h3>
	<p class="text-gray-600">혁신적인 아이디어와 독창적인 접근을 추구합니다</p>
	</div>

	<div class="p-6 box-3d bg-white text-center" data-aos="zoom-in" data-aos-delay="200">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="globe" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-xl font-semibold mb-2">융복합</h3>
	<p class="text-gray-600">다양한 분야의 지식과 기술을 융합합니다</p>
	</div>
	</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>
	// Initialize AOS
	AOS.init({
	duration: 1000,
	once: true
	});

	// Initialize Feather Icons
	feather.replace();
	</script>
	</body>
	</html>