Spaces:

nkjoy
/

kmeda

Running

App Files Files Community

kmeda / about.html

nkjoy

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

1392c5d verified 6 months ago

raw

history blame contribute delete

10.7 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;
	}
	.ceo-card {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	border-left: 4px solid #764ba2;
	transform-style: preserve-3d;
	}
	.ceo-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3));
	opacity: 0;
	transition: opacity 0.5s ease;
	}
	.ceo-card:hover {
	transform: translateY(-5px) rotateX(2deg) rotateY(2deg);
	box-shadow: 0 15px 45px 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);
	}
	.ceo-card: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 font-semibold hover:text-purple-200 transition">회사소개</a>
	<a href="overview.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 Intro -->
	<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="max-w-4xl mx-auto bg-gray-50 p-8 rounded-xl shadow-sm" data-aos="fade-up">
	<p class="text-gray-600 leading-relaxed">
	시장의 변화를 한 걸음 앞서 읽는 통찰, 사용자 행동에 대한 깊은 이해, 그리고 지속가능성을 고려한 책임 있는 선택이 케이미디어의 기준입니다.
	한 프로젝트, 한 디자인에도 최선을 다하며, 고객의 니즈를 넘어 고객이 아직 상상하지 못한 가치를 발견합니다.
	</p>
	</div>
	</div>
	</section>

	<!-- CEO Message -->
	<section class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<div class="max-w-5xl mx-auto grid md:grid-cols-3 gap-12 items-center">
	<div class="md:col-span-1" data-aos="fade-right">
	<img src="http://static.photos/office/640x360/1" alt="CEO" class="rounded-lg shadow-lg w-full">
	</div>
	<div class="md:col-span-2 ceo-card p-8 box-3d" data-aos="fade-left">
	<h3 class="text-2xl font-bold mb-4 gradient-text">CEO 인사말</h3>
	<p class="text-lg font-semibold mb-6">케이미디어는 사람을 가장 먼저 생각하는 디자인 기업입니다.</p>
	<div class="space-y-4 text-gray-700">
	<p>
	케이미디어는 단순히 아름다움을 추구하는 것을 넘어 디자인에 생명력을 불어넣는 것이 곧 브랜드의 힘이 된다고 믿고 있습니다.
	</p>
	<p>
	디자인은 기술이 아니라 창의력의 결정체입니다. 우리는 디자이너의 가치를 존중하며 다양한 전문가들과의 시너지를 통해
	깊이있는 분석과 전략을 담은 디자인을 제안합니다.
	</p>
	<p>
	케이미디어는 '좋은생각, 좋은방향'이라는 슬로건 아래 고객의 NEEDS보다 한걸음 앞서 시장을 분석하고 트랜드를 읽으며
	한 프로젝트, 한 디자인에도 최선을 다하는 크리에이티브 그룹입니다.
	</p>
	</div>
	</div>
	</div>
	</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" data-aos="fade-up">
	<h2 class="text-3xl font-bold mb-6">케이미디어의 핵심 가치</h2>
	<div class="grid md:grid-cols-3 gap-8 mt-12">
	<div class="p-6 box-3d bg-white" data-aos="zoom-in">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="users" 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 rounded-lg hover:shadow-md transition" 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 rounded-lg hover:shadow-md transition" 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>
	</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>