Spaces:

nkjoy
/

unified-art-symphony

Running

App Files Files Community

unified-art-symphony / index.html

nkjoy

예매하기 페이지 만들어줘 멋지게

ee8a987 verified about 19 hours ago

raw

history blame contribute delete

8.97 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Harmony Art Nexus \| 남북한민족예술단</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
	</style>
	</head>
	<body class="bg-gradient-to-b from-blue-50 to-purple-50 font-['Noto_Sans_KR']">
	<custom-navbar></custom-navbar>

	<main class="min-h-screen">
	<!-- Hero Section -->
	<section class="relative h-screen flex items-center justify-center overflow-hidden">
	<div class="absolute inset-0 bg-black/30 z-10"></div>
	<video autoplay muted loop class="absolute w-full h-full object-cover">
	<source src="https://assets.mixkit.co/videos/preview/mixkit-traditional-korean-dance-performance-17703-large.mp4" type="video/mp4">
	</video>
	<div class="relative z-20 text-center px-4">
	<h1 class="text-5xl md:text-7xl font-bold text-white mb-6 font-['Nanum_Myeongjo']">남북한민족예술단</h1>
	<p class="text-xl md:text-2xl text-white mb-10 max-w-3xl mx-auto">통일의 꿈을 예술로 풀어내는 우리 민족의 화합</p>
	<div class="flex gap-4 justify-center">
	<a href="#about" class="glass-btn animate-pulse">더 알아보기</a>
	<a href="#performances" class="glass-btn animate-bounce">공연 보기</a>
	</div>
	</div>
	</section>

	<!-- About Section -->
	<section id="about" class="py-20 px-4">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 font-['Nanum_Myeongjo']">예술로 하나되는 민족</h2>
	<div class="grid md:grid-cols-2 gap-12 items-center">
	<div>
	<img src="http://static.photos/culture/1200x630/42" alt="Korean Traditional Performance" class="rounded-xl shadow-2xl">
	</div>
	<div>
	<h3 class="text-2xl font-semibold mb-6">남북한민족예술단 소개</h3>
	<p class="text-gray-700 mb-6 leading-relaxed">남북한민족예술단은 1995년 설립된 이래로 남과 북의 예술인들이 함께 어우러져 민족의 화합과 통일을 예술로 표현해 왔습니다. 전통과 현대를 아우르는 다양한 장르의 공연을 통해 우리 민족의 아름다움을 세계에 알리고 있습니다.</p>
	<p class="text-gray-700 mb-8 leading-relaxed">우리는 예술이 가진 힘을 믿습니다. 춤과 음악, 연극을 통해 남과 북의 벽을 허물고 하나되는 민족의 미래를 그려나가고 있습니다.</p>
	<a href="/about.html" class="glass-btn">자세히 보기</a>
	</div>
	</div>
	</div>
	</section>

	<!-- Performances Section -->
	<section id="performances" class="py-20 bg-white px-4">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 font-['Nanum_Myeongjo']">대표 공연 작품</h2>
	<div class="grid md:grid-cols-3 gap-8">
	<!-- Performance 1 -->
	<div class="performance-card">
	<div class="performance-img">
	<img src="http://static.photos/culture/640x360/1" alt="Performance 1">
	</div>
	<h3 class="text-xl font-semibold mt-4">아리랑 연가</h3>
	<p class="text-gray-600 mt-2">남과 북의 아리랑을 하나로 엮은 감동의 무대</p>
	<a href="/performance/arirang" class="glass-btn mt-4">상세 정보</a>
	</div>

	<!-- Performance 2 -->
	<div class="performance-card">
	<div class="performance-img">
	<img src="http://static.photos/culture/640x360/2" alt="Performance 2">
	</div>
	<h3 class="text-xl font-semibold mt-4">통일의 꿈</h3>
	<p class="text-gray-600 mt-2">분단의 아픔을 딛고 하나되는 미래를 그리는 작품</p>
	<a href="/performance/dream" class="glass-btn mt-4">상세 정보</a>
	</div>

	<!-- Performance 3 -->
	<div class="performance-card">
	<div class="performance-img">
	<img src="http://static.photos/culture/640x360/3" alt="Performance 3">
	</div>
	<h3 class="text-xl font-semibold mt-4">한반도의 봄</h3>
	<p class="text-gray-600 mt-2">평화와 화합의 봄을 맞이하는 우리 민족의 이야기</p>
	<a href="/performance/spring" class="glass-btn mt-4">상세 정보</a>
	</div>
	</div>
	<div class="text-center mt-12">
	<a href="/performances" class="glass-btn px-8">모든 공연 보기</a>
	</div>
	</div>
	</section>

	<!-- Gallery Section -->
	<section class="py-20 px-4">
	<div class="max-w-6xl mx-auto">
	<h2 class="text-3xl md:text-4xl font-bold text-center mb-16 font-['Nanum_Myeongjo']">갤러리</h2>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/1" alt="Gallery 1" class="w-full h-full object-cover">
	</div>
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/2" alt="Gallery 2" class="w-full h-full object-cover">
	</div>
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/3" alt="Gallery 3" class="w-full h-full object-cover">
	</div>
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/4" alt="Gallery 4" class="w-full h-full object-cover">
	</div>
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/5" alt="Gallery 5" class="w-full h-full object-cover">
	</div>
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/6" alt="Gallery 6" class="w-full h-full object-cover">
	</div>
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/7" alt="Gallery 7" class="w-full h-full object-cover">
	</div>
	<div class="gallery-item">
	<img src="http://static.photos/culture/320x240/8" alt="Gallery 8" class="w-full h-full object-cover">
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section class="py-20 bg-white px-4">
	<div class="max-w-4xl mx-auto text-center">
	<h2 class="text-3xl md:text-4xl font-bold mb-6 font-['Nanum_Myeongjo']">함께 하고 싶으신가요?</h2>
	<p class="text-xl text-gray-600 mb-10">남북한민족예술단은 언제나 새로운 인재와 파트너를 기다립니다.</p>
	<div class="flex flex-wrap justify-center gap-4">
	<a href="/contact" class="glass-btn px-8">문의하기</a>
	<a href="/join" class="glass-btn px-8">지원하기</a>
	<a href="/sponsor" class="glass-btn px-8">후원하기</a>
	<a href="/booking.html" class="glass-btn px-8">티켓 예매</a>
	<a href="/videos.html" class="glass-btn px-8">영상 보기</a>
	</div>
	</div>
	</section>
	</main>

	<custom-footer></custom-footer>

	<!-- Components -->
	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script src="script.js"></script>
	<script>
	feather.replace();
	</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>