Spaces:

nkjoy
/

kmeda

Running

App Files Files Community

kmeda / support.html

nkjoy

파트 페이지 만들어줘

6d5a607 verified 6 months ago

raw

history blame contribute delete

18.9 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;
	}
	.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;
	}
	.feature-card {
	background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
	border-left: 4px solid #764ba2;
	}
	</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="overview.html" class="text-white hover:text-purple-200 transition">회사개요</a>
	<a href="history.html" class="text-white hover:text-purple-200 transition">연혁</a>
	<a href="organization.html" class="text-white hover:text-purple-200 transition">조직도</a>
	<a href="location.html" class="text-white hover:text-purple-200 transition">찾아오시는 길</a>
	<a href="mbooth.html" class="text-white hover:text-purple-200 transition">MBooth</a>
	<a href="support.html" class="text-white font-semibold 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>

	<!-- Business 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">
	<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-2 gap-12 items-center" data-aos="fade-up">
	<div>
	<img src="http://static.photos/office/640x360/2" alt="Small Business Support" class="rounded-lg shadow-lg w-full">
	</div>
	<div class="space-y-6">
	<div class="feature-card p-6 box-3d">
	<div class="flex items-start">
	<i data-feather="monitor" class="text-purple-600 text-2xl mr-4 mt-1"></i>
	<div>
	<h3 class="text-xl font-semibold mb-2">디지털 콘텐츠 제작</h3>
	<p class="text-gray-600">웹사이트, SNS 콘텐츠, 영상 콘텐츠 등 맞춤형 디지털 콘텐츠 제작</p>
	</div>
	</div>
	</div>
	<div class="feature-card p-6 box-3d">
	<div class="flex items-start">
	<i data-feather="bar-chart-2" class="text-purple-600 text-2xl mr-4 mt-1"></i>
	<div>
	<h3 class="text-xl font-semibold mb-2">마케팅 전략 지원</h3>
	<p class="text-gray-600">효과적인 온라인 마케팅 전략 수립 및 실행 지원</p>
	</div>
	</div>
	</div>
	<div class="feature-card p-6 box-3d">
	<div class="flex items-start">
	<i data-feather="users" class="text-purple-600 text-2xl mr-4 mt-1"></i>
	<div>
	<h3 class="text-xl font-semibold mb-2">전문가 컨설팅</h3>
	<p class="text-gray-600">디지털 전환을 위한 전문가의 1:1 컨설팅 서비스</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Support Programs -->
	<section class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">지원 프로그램</h2>
	<div class="grid md:grid-cols-3 gap-8">
	<div class="bg-white p-6 rounded-xl shadow-md text-center box-3d" data-aos="zoom-in">
	<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-lg font-semibold mb-2">웹사이트 구축</h3>
	<p class="text-gray-600 text-sm">소상공인을 위한 맞춤형 웹사이트 제작 및 운영 지원</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md text-center box-3d" data-aos="zoom-in" data-aos-delay="100">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="camera" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-lg font-semibold mb-2">영상 콘텐츠</h3>
	<p class="text-gray-600 text-sm">상품 홍보 영상, 브랜드 스토리 영상 등 제작 지원</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md text-center box-3d" data-aos="zoom-in" data-aos-delay="200">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="smartphone" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-lg font-semibold mb-2">SNS 마케팅</h3>
	<p class="text-gray-600 text-sm">인스타그램, 페이스북 등 SNS 채널 운영 지원</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md text-center box-3d" data-aos="zoom-in" data-aos-delay="300">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="shopping-cart" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-lg font-semibold mb-2">이커머스 연동</h3>
	<p class="text-gray-600 text-sm">온라인 쇼핑몰 연동 및 판매 전략 지원</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md text-center box-3d" data-aos="zoom-in" data-aos-delay="400">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="search" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-lg font-semibold mb-2">SEO 최적화</h3>
	<p class="text-gray-600 text-sm">검색엔진 최적화를 통한 노출력 향상</p>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md text-center box-3d" data-aos="zoom-in" data-aos-delay="500">
	<div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
	<i data-feather="book-open" class="text-purple-600 text-2xl"></i>
	</div>
	<h3 class="text-lg font-semibold mb-2">교육 프로그램</h3>
	<p class="text-gray-600 text-sm">디지털 마케팅, 콘텐츠 제작 교육 제공</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Support Process -->
	<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">간편하고 체계적인 지원 절차로 디지털 전환을 경험하세요</p>
	</div>

	<div class="grid md:grid-cols-4 gap-6">
	<div class="text-center box-3d bg-white p-6" data-aos="zoom-in" data-aos-delay="0">
	<div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">1</div>
	<h4 class="font-semibold mb-2">신청접수</h4>
	<p class="text-sm text-gray-600">온라인 또는 방문 신청</p>
	</div>
	<div class="text-center box-3d bg-white p-6" data-aos="zoom-in" data-aos-delay="100">
	<div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">2</div>
	<h4 class="font-semibold mb-2">컨설팅</h4>
	<p class="text-sm text-gray-600">전문가의 1:1 맞춤 컨설팅</p>
	</div>
	<div class="text-center box-3d bg-white p-6" data-aos="zoom-in" data-aos-delay="200">
	<div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">3</div>
	<h4 class="font-semibold mb-2">솔루션 제공</h4>
	<p class="text-sm text-gray-600">맞춤형 콘텐츠 솔루션 제작</p>
	</div>
	<div class="text-center box-3d bg-white p-6" data-aos="zoom-in" data-aos-delay="300">
	<div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">4</div>
	<h4 class="font-semibold mb-2">후속지원</h4>
	<p class="text-sm text-gray-600">지속적인 운영 및 관리 지원</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Success Stories -->
	<section class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<h2 class="text-3xl font-bold text-center mb-16" data-aos="fade-up">성공 사례</h2>
	<div class="grid md:grid-cols-2 gap-8">
	<div class="bg-white p-6 rounded-xl shadow-md box-3d" data-aos="fade-up">
	<div class="flex items-center mb-4">
	<img src="http://static.photos/food/320x240/1" alt="Restaurant" class="w-16 h-16 rounded-full mr-4">
	<div>
	<h3 class="text-xl font-semibold">한식당 "맛있는집"</h3>
	<p class="text-gray-600">서울시 강남구</p>
	</div>
	</div>
	<p class="text-gray-600 mb-4">
	케이미디어의 웹사이트 구축 및 SNS 마케팅 지원을 통해
	온라인 예약 고객이 300% 증가했고, 매출도 40% 상승했습니다.
	</p>
	<div class="flex items-center text-purple-600">
	<i data-feather="trending-up" class="mr-2"></i>
	<span>매출 40% 증가</span>
	</div>
	</div>

	<div class="bg-white p-6 rounded-xl shadow-md box-3d" data-aos="fade-up" data-aos-delay="100">
	<div class="flex items-center mb-4">
	<img src="http://static.photos/retail/320x240/2" alt="Retail" class="w-16 h-16 rounded-full mr-4">
	<div>
	<h3 class="text-xl font-semibold">의류브랜드 "스타일샵"</h3>
	<p class="text-gray-600">경기도 수원시</p>
	</div>
	</div>
	<p class="text-gray-600 mb-4">
	브랜드 리뉴얼과 영상 콘텐츠 제작, 인플루언서 마케팅을 통해
	브랜드 인지도가 크게 향상되었고, 온라인 쇼핑몰 매출이 200% 증가했습니다.
	</p>
	<div class="flex items-center text-purple-600">
	<i data-feather="trending-up" class="mr-2"></i>
	<span>매출 200% 증가</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- CTA Section -->
	<section class="py-20 bg-gradient-to-r from-purple-500 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">
	<a href="#" class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-purple-100 transition flex items-center justify-center">
	<i data-feather="edit" class="mr-2"></i>
	지원 신청하기
	</a>
	<a href="#" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition flex items-center justify-center">
	<i data-feather="phone" class="mr-2"></i>
	상담 문의
	</a>
	</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>