Spaces:

nkjoy
/

onekorea

Running

App Files Files Community

onekorea / index.html

nkjoy

서비스 페이지도 만들어줘 - Initial Deployment

e6182dc verified 8 months ago

raw

history blame contribute delete

23 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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<style>
	.hero-gradient {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
	}
	.service-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.text-stroke {
	-webkit-text-stroke: 1px white;
	color: transparent;
	}
	</style>
	</head>
	<body class="font-sans antialiased text-gray-800">
	<!-- Navigation -->
	<nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-md z-50 shadow-sm">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between h-20 items-center">
	<div class="flex-shrink-0 flex items-center">
	<span class="text-2xl font-bold text-indigo-600">원코리아미디컴</span>
	</div>
	<div class="hidden md:block">
	<div class="ml-10 flex items-baseline space-x-8">
	<a href="#" class="text-indigo-600 font-bold">홈</a>
	<a href="service.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">서비스</a>
	<a href="portfolio.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">포트폴리오</a>
	<a href="about.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">회사소개</a>
	<a href="contact.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">문의하기</a>
	</div>
	</div>
	<div class="md:hidden">
	<button class="text-gray-600 hover:text-indigo-600 focus:outline-none">
	<i data-feather="menu"></i>
	</button>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="hero-gradient min-h-screen flex items-center pt-20">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
	<div class="grid md:grid-cols-2 gap-12 items-center">
	<div class="text-white" data-aos="fade-right">
	<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
	<span class="text-stroke">프리미엄</span> 영상과 사진의<br>전문가
	</h1>
	<p class="text-xl md:text-2xl mb-8 text-gray-300">
	크리에이티브한 시각으로 당신의 스토리를 완성합니다.<br>
	원코리아미디컴과 함께 특별한 순간을 기록하세요.
	</p>
	<div class="flex space-x-4">
	<a href="contact.html" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-lg font-medium transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
	문의하기
	</a>
	<a href="portfolio.html" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-4 rounded-lg font-medium transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
	포트폴리오 보기
	</a>
	</div>
	</div>
	<div class="relative" data-aos="fade-left">
	<div class="absolute -inset-4 bg-indigo-500 rounded-2xl opacity-20 blur-xl"></div>
	<div class="relative rounded-2xl overflow-hidden">
	<img src="http://static.photos/technology/1024x576/1" alt="미디어 제작" class="w-full h-auto">
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Services Section -->
	<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-3xl md:text-4xl font-bold text-gray-900 mb-4">우리의 전문 서비스</h2>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">
	다양한 분야에서 최고의 품질을 제공하는 원코리아미디컴의 서비스를 만나보세요
	</p>
	</div>

	<div class="grid md:grid-cols-3 gap-8">
	<div class="bg-white rounded-xl shadow-lg overflow-hidden service-card transition duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="100">
	<div class="h-48 overflow-hidden">
	<img src="http://static.photos/studio/640x360/1" alt="영상 제작" class="w-full h-full object-cover">
	</div>
	<div class="p-6">
	<div class="flex items-center mb-4">
	<div class="bg-indigo-100 p-3 rounded-full mr-4">
	<i data-feather="video" class="text-indigo-600"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900">프리미엄 영상 제작</h3>
	</div>
	<p class="text-gray-600 mb-4">
	고퀄리티의 영상 콘텐츠 제작부터 편집까지 원스톱 솔루션을 제공합니다.
	</p>
	<a href="#" class="text-indigo-600 font-medium flex items-center">
	자세히 보기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
	</a>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-lg overflow-hidden service-card transition duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="200">
	<div class="h-48 overflow-hidden">
	<img src="http://static.photos/workspace/640x360/2" alt="사진 촬영" class="w-full h-full object-cover">
	</div>
	<div class="p-6">
	<div class="flex items-center mb-4">
	<div class="bg-indigo-100 p-3 rounded-full mr-4">
	<i data-feather="camera" class="text-indigo-600"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900">프로페셔널 사진 촬영</h3>
	</div>
	<p class="text-gray-600 mb-4">
	전문 장비와 크리에이티브한 시각으로 완성도 높은 이미지를 제작합니다.
	</p>
	<a href="#" class="text-indigo-600 font-medium flex items-center">
	자세히 보기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
	</a>
	</div>
	</div>

	<div class="bg-white rounded-xl shadow-lg overflow-hidden service-card transition duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="300">
	<div class="h-48 overflow-hidden">
	<img src="http://static.photos/technology/640x360/3" alt="VR 콘텐츠" class="w-full h-full object-cover">
	</div>
	<div class="p-6">
	<div class="flex items-center mb-4">
	<div class="bg-indigo-100 p-3 rounded-full mr-4">
	<i data-feather="globe" class="text-indigo-600"></i>
	</div>
	<h3 class="text-xl font-bold text-gray-900">VR/AR 콘텐츠 제작</h3>
	</div>
	<p class="text-gray-600 mb-4">
	최신 기술을 활용한 몰입형 가상현실 콘텐츠로 새로운 경험을 제공합니다.
	</p>
	<a href="#" class="text-indigo-600 font-medium flex items-center">
	자세히 보기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
	</a>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Portfolio 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-3xl md:text-4xl font-bold text-gray-900 mb-4">우리의 작품</h2>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">
	원코리아미디컴이 만들어낸 크리에이티브한 결과물을 확인해보세요
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
	<div class="relative group overflow-hidden rounded-xl hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="100">
	<img src="http://static.photos/workspace/640x360/4" alt="포트폴리오 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
	<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6">
	<div>
	<h3 class="text-white text-xl font-bold mb-2">기업 홍보 영상</h3>
	<p class="text-gray-300">A기업 브랜드 영상 제작</p>
	</div>
	</div>
	</div>

	<div class="relative group overflow-hidden rounded-xl hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="200">
	<img src="http://static.photos/workspace/640x360/5" alt="포트폴리오 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
	<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6">
	<div>
	<h3 class="text-white text-xl font-bold mb-2">제품 사진 촬영</h3>
	<p class="text-gray-300">B브랜드 뷰티 제품 라인</p>
	</div>
	</div>
	</div>

	<div class="relative group overflow-hidden rounded-xl hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="300">
	<img src="http://static.photos/workspace/640x360/6" alt="포트폴리오 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
	<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6">
	<div>
	<h3 class="text-white text-xl font-bold mb-2">이벤트 영상</h3>
	<p class="text-gray-300">C기업 연말 파티 기록</p>
	</div>
	</div>
	</div>
	</div>

	<div class="text-center mt-12" data-aos="fade-up">
	<a href="#" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
	더 많은 작품 보기
	<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
	</a>
	</div>
	</div>
	</section>

	<!-- Testimonials Section -->
	<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-3xl md:text-4xl font-bold text-gray-900 mb-4">고객들의 이야기</h2>
	<p class="text-xl text-gray-600 max-w-3xl mx-auto">
	원코리아미디컴과 함께한 파트너들의 생생한 후기
	</p>
	</div>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
	<div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
	<div class="flex items-center mb-4">
	<div class="text-yellow-400 mr-2 flex space-x-1">
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	</div>
	</div>
	<p class="text-gray-600 mb-6">
	"원코리아미디컴과 함께한 홍보 영상 제작은 정말 만족스러웠습니다. 크리에이티브한 아이디어와 전문적인 기술력이 돋보였어요."
	</p>
	<div class="flex items-center">
	<img src="http://static.photos/people/200x200/1" alt="클라이언트" class="w-12 h-12 rounded-full mr-4 object-cover">
	<div>
	<h4 class="font-bold text-gray-900">김대표</h4>
	<p class="text-sm text-gray-500">A기업 대표이사</p>
	</div>
	</div>
	</div>

	<div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
	<div class="flex items-center mb-4">
	<div class="text-yellow-400 mr-2 flex space-x-1">
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	</div>
	</div>
	<p class="text-gray-600 mb-6">
	"제품 사진 촬영을 의뢰했는데 결과물이 너무 훌륭해서 매출 증가에도 도움이 되었습니다. 세심한 부분까지 신경 써주셔서 감사합니다."
	</p>
	<div class="flex items-center">
	<img src="http://static.photos/people/200x200/2" alt="클라이언트" class="w-12 h-12 rounded-full mr-4 object-cover">
	<div>
	<h4 class="font-bold text-gray-900">이마케팅팀장</h4>
	<p class="text-sm text-gray-500">B브랜드 마케팅팀</p>
	</div>
	</div>
	</div>

	<div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300">
	<div class="flex items-center mb-4">
	<div class="text-yellow-400 mr-2 flex space-x-1">
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	<i data-feather="star" class="w-5 h-5 fill-current"></i>
	</div>
	</div>
	<p class="text-gray-600 mb-6">
	"VR 콘텐츠 제작을 통해 고객들에게 새로운 경험을 제공할 수 있었습니다. 기술력과 창의성이 결합된 훌륭한 결과물이었습니다."
	</p>
	<div class="flex items-center">
	<img src="http://static.photos/people/200x200/3" alt="클라이언트" class="w-12 h-12 rounded-full mr-4 object-cover">
	<div>
	<h4 class="font-bold text-gray-900">박이사</h4>
	<p class="text-sm text-gray-500">C기업 전략기획팀</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- CTA Section -->
	<section class="py-20 bg-indigo-600">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center" data-aos="fade-up">
	<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">당신의 스토리를 완성시켜 드립니다</h2>
	<p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">
	원코리아미디컴과 함께 특별한 순간을 영원히 간직하세요. 지금 바로 문의해보세요.
	</p>
	<a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-100 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
	무료 상담 신청하기
	<i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
	</a>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white py-12">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div class="mb-8 md:mb-0">
	<h3 class="text-2xl font-bold mb-4">원코리아미디컴</h3>
	<p class="text-gray-400">
	영상과 사진의 전문가로 크리에이티브한 솔루션을 제공합니다.
	</p>
	</div>

	<div>
	<h4 class="text-lg font-semibold mb-4">서비스</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">영상 제작</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">사진 촬영</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">VR/AR 콘텐츠</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">드론 촬영</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-lg font-semibold mb-4">회사</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white transition">회사 소개</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">팀 소개</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">포트폴리오</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white transition">연락처</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-lg font-semibold mb-4">연락처</h4>
	<ul class="space-y-2">
	<li class="flex items-center">
	<i data-feather="map-pin" class="w-5 h-5 mr-2"></i>
	<span class="text-gray-400">서울특별시 강남구 테헤란로 123</span>
	</li>
	<li class="flex items-center">
	<i data-feather="phone" class="w-5 h-5 mr-2"></i>
	<span class="text-gray-400">02-1234-5678</span>
	</li>
	<li class="flex items-center">
	<i data-feather="mail" class="w-5 h-5 mr-2"></i>
	<span class="text-gray-400">contact@onekoreamediacom.com</span>
	</li>
	</ul>
	</div>
	</div>

	<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
	<p class="text-gray-400 mb-4 md:mb-0">
	© 2023 원코리아미디컴. All rights reserved.
	</p>
	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="facebook" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="instagram" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="youtube" class="w-5 h-5"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white transition">
	<i data-feather="linkedin" class="w-5 h-5"></i>
	</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	AOS.init({
	duration: 800,
	easing: 'ease-in-out',
	once: true
	});
	feather.replace();
	</script>
	</body>
	</html>