Spaces:

dongil77
/

retro-game-master

Running

App Files Files Community

retro-game-master / index.html

dongil77

Add 2 files

29175d1 verified about 2 months ago

raw

history blame contribute delete

55.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>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
	<style>
	:root {
	--neon-blue: #00f0ff;
	--neon-pink: #ff00f5;
	--deep-purple: #2a0057;
	--neon-green: #00ff57;
	--dark-bg: #0a0a12;
	}

	body {
	font-family: 'Noto Sans KR', sans-serif;
	background-color: var(--dark-bg);
	color: white;
	overflow-x: hidden;
	}

	.pixel-font {
	font-family: 'DotGothic16', sans-serif;
	letter-spacing: 1px;
	}

	.logo-text {
	background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 15px rgba(255, 0, 245, 0.5);
	}

	.neon-border {
	border: 2px solid var(--neon-blue);
	box-shadow: 0 0 15px var(--neon-blue),
	inset 0 0 10px var(--neon-blue);
	}

	.glow-btn {
	background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue));
	box-shadow: 0 0 15px var(--neon-pink);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	}

	.glow-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 25px var(--neon-pink);
	}

	.glow-btn::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
	to bottom right,
	rgba(255,255,255,0.3) 0%,
	rgba(255,255,255,0) 50%
	);
	transform: rotate(30deg);
	}

	.glow-btn:hover::after {
	animation: shine 1.5s infinite;
	}

	@keyframes shine {
	0% { transform: rotate(30deg) translate(-30%, -30%); }
	100% { transform: rotate(30deg) translate(30%, 30%); }
	}

	.hero-section {
	background: radial-gradient(
	circle at 70% 30%,
	var(--deep-purple) 0%,
	var(--dark-bg) 60%
	);
	}

	.pixel-corners {
	clip-path: polygon(
	0% 5px, 5px 5px, 5px 0%, calc(100% - 5px) 0%,
	calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px),
	calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%,
	5px 100%, 5px calc(100% - 5px), 0% calc(100% - 5px)
	);
	}

	.pixel-card {
	background: rgba(20, 20, 30, 0.8);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 240, 255, 0.2);
	transition: all 0.3s ease;
	}

	.pixel-card:hover {
	transform: translateY(-5px);
	border-color: var(--neon-blue);
	box-shadow: 0 10px 30px rgba(0, 240, 255, 0.1);
	}

	.hover-glow:hover {
	text-shadow: 0 0 10px var(--neon-blue);
	}

	.form-input {
	background: rgba(10, 10, 20, 0.8);
	border: 1px solid rgba(0, 240, 255, 0.3);
	transition: all 0.3s ease;
	}

	.form-input:focus {
	outline: none;
	border-color: var(--neon-blue);
	box-shadow: 0 0 10px var(--neon-blue);
	}

	/* 모바일 메뉴 */
	.mobile-menu {
	transform: translateX(100%);
	transition: transform 0.3s ease;
	background: rgba(10, 10, 20, 0.95);
	backdrop-filter: blur(10px);
	}

	.mobile-menu.open {
	transform: translateX(0);
	}

	/* 타이머 */
	.timer-block {
	background: rgba(255, 0, 245, 0.1);
	border: 1px solid var(--neon-pink);
	}

	/* 데스크탑 사이드 CTA */
	.side-cta {
	right: -180px;
	transition: right 0.3s ease;
	}

	.side-cta:hover {
	right: -10px;
	}

	@media (max-width: 768px) {
	.pixel-font {
	font-size: 1.5rem;
	}

	.hero-heading {
	font-size: 2.5rem;
	line-height: 1.2;
	}

	.side-cta {
	display: none;
	}
	}

	/* Game Controller Logo */
	.game-controller-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(45deg, var(--neon-pink), var(--neon-blue));
	margin-right: 10px;
	position: relative;
	overflow: hidden;
	}

	.game-controller-logo i {
	color: #000;
	font-size: 20px;
	z-index: 2;
	}

	.game-controller-logo::after {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: linear-gradient(
	to bottom right,
	rgba(255,255,255,0.3) 0%,
	rgba(255,255,255,0) 50%
	);
	transform: rotate(30deg);
	}
	</style>
	</head>
	<body class="min-h-screen">
	<!-- 상단 알림 배너 -->
	<div class="bg-gradient-to-r from-purple-900 to-pink-800 text-white text-center py-2 px-4 flex items-center justify-center sticky top-0 z-50">
	<span class="font-bold mr-2 animate-pulse">🎮 30명 한정!</span>
	<span>지금 등록시 희귀 게임 에뮬레이션 가이드북 무료 증정</span>
	</div>

	<!-- 네비게이션 -->
	<nav class="bg-black bg-opacity-80 backdrop-blur-md sticky top-8 z-40 border-b border-purple-900">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center">
	<div class="game-controller-logo">
	<i class="fas fa-gamepad"></i>
	</div>
	<div class="pixel-font logo-text text-3xl">레게</div>
	<div class="ml-4 hidden md:flex space-x-8">
	<a href="#about" class="text-white hover:text-cyan-400 transition hover-glow">소개</a>
	<a href="#curriculum" class="text-white hover:text-cyan-400 transition hover-glow">커리큘럼</a>
	<a href="#instructor" class="text-white hover:text-cyan-400 transition hover-glow">강사진</a>
	<a href="#pricing" class="text-white hover:text-cyan-400 transition hover-glow">가격</a>
	</div>
	</div>
	<div class="hidden md:block">
	<button class="glow-btn text-black font-bold py-2 px-6 rounded-full">
	등록하기 <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	<button id="mobile-menu-button" class="md:hidden text-white focus:outline-none">
	<i class="fas fa-bars text-2xl"></i>
	</button>
	</div>

	<!-- 모바일 메뉴 -->
	<div id="mobile-menu" class="mobile-menu fixed inset-y-0 right-0 w-64 p-6 z-50">
	<div class="flex justify-between items-center mb-8">
	<div class="game-controller-logo">
	<i class="fas fa-gamepad"></i>
	</div>
	<div class="pixel-font logo-text text-2xl">레게</div>
	<button id="close-menu" class="text-white focus:outline-none">
	<i class="fas fa-times text-xl"></i>
	</button>
	</div>
	<div class="flex flex-col space-y-6">
	<a href="#about" class="text-white text-lg hover:text-cyan-400 transition">소개</a>
	<a href="#curriculum" class="text-white text-lg hover:text-cyan-400 transition">커리큘럼</a>
	<a href="#instructor" class="text-white text-lg hover:text-cyan-400 transition">강사진</a>
	<a href="#pricing" class="text-white text-lg hover:text-cyan-400 transition"> 가격</a>
	<button class="glow-btn text-black font-bold py-3 px-6 rounded-full mt-4">
	등록하기 <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>
	</nav>

	<!-- 히어로 섹션 -->
	<section class="hero-section min-h-screen flex items-center relative overflow-hidden">
	<div class="absolute inset-0 opacity-20" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>

	<!-- 배경 요소 -->
	<div class="absolute -bottom-20 -left-40 w-80 h-80 bg-purple-900 rounded-full filter blur-3xl opacity-40"></div>
	<div class="absolute -top-20 -right-40 w-80 h-80 bg-cyan-900 rounded-full filter blur-3xl opacity-40"></div>

	<div class="container mx-auto px-4 z-10 py-20">
	<div class="flex flex-col lg:flex-row items-center gap-12">
	<div class="lg:w-1/2">
	<div class="inline-block mb-6 px-4 py-2 bg-black bg-opacity-50 rounded-full border border-cyan-400">
	<span class="text-cyan-400 text-sm font-bold">30명 한정 특별 혜택</span>
	</div>
	<h1 class="pixel-font text-4xl md:text-5xl font-bold mb-6 text-white hero-heading">
	<span class="logo-text">레트로 게임</span><br>
	<span class="text-cyan-400">디지털 보존의 모든 것</span>
	</h1>
	<p class="text-lg md:text-xl text-gray-300 mb-8 leading-relaxed">
	신회장과 함께 30년 된 게임들을 현대 기술로 보존하고,<br> 어디서나 즐길 수 있는
	실용적인 셋팅 기술을 단 6주 만에 마스터하세요.
	</p>

	<!-- 타이머 -->
	<div class="mb-8">
	<div class="text-gray-400 mb-2">얼리버드 할인 종료까지:</div>
	<div class="flex gap-2">
	<div class="timer-block px-4 py-2 rounded">
	<div id="hours" class="text-2xl font-bold text-pink-500">03</div>
	<div class="text-xs text-gray-400">시간</div>
	</div>
	<div class="timer-block px-4 py-2 rounded">
	<div id="minutes" class="text-2xl font-bold text-pink-500">00</div>
	<div class="text-xs text-gray-400">분</div>
	</div>
	<div class="timer-block px-4 py-2 rounded">
	<div id="seconds" class="text-2xl font-bold text-pink-500">00</div>
	<div class="text-xs text-gray-400">초</div>
	</div>
	</div>
	</div>

	<!-- 이메일 수집 폼 -->
	<div class="max-w-md">
	<form id="lead-form" class="mb-4">
	<div class="flex flex-col sm:flex-row gap-2">
	<input type="email" required placeholder="이메일 주소를 입력하세요"
	class="form-input flex-grow px-4 py-3 rounded-full text-white">
	<button type="submit" class="glow-btn text-black font-bold px-6 py-3 rounded-full whitespace-nowrap">
	무료 가이드 받기
	</button>
	</div>
	</form>
	<p class="text-xs text-gray-500">등록 시 무료 강의 샘플과 체크리스트를 보내드립니다.</p>
	</div>
	</div>

	<div class="lg:w-1/2 relative">
	<div class="pixel-card rounded-2xl overflow-hidden border border-cyan-400/30 shadow-xl shadow-cyan-400/10">
	<img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
	alt="레트로 게임 콘솔"
	class="w-full h-auto object-cover">
	<div class="absolute inset-0 flex items-center justify-center">
	<button class="w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center shadow-lg hover:scale-110 transition">
	<i class="fas fa-play text-white text-xl"></i>
	</button>
	</div>
	</div>

	<!-- 픽셀 요소 -->
	<div class="absolute -top-5 -left-5 w-12 h-12 bg-cyan-400 pixel-corners z-10"></div>
	<div class="absolute -bottom-5 -right-5 w-16 h-16 bg-pink-500 pixel-corners z-10"></div>
	</div>
	</div>
	</div>

	<!-- 상단 이동 버튼 -->
	<a href="#" class="fixed bottom-8 right-8 w-12 h-12 bg-black bg-opacity-70 border border-cyan-400 rounded-full flex items-center justify-center text-cyan-400 z-40 hover:bg-cyan-400 hover:text-black transition">
	<i class="fas fa-arrow-up"></i>
	</a>
	</section>

	<!-- 문제 해결 섹션 -->
	<section id="about" class="py-20 bg-gradient-to-b from-black to-gray-900 relative">
	<div class="absolute inset-0 opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
	<div class="container mx-auto px-4 relative">
	<div class="text-center mb-16">
	<h2 class="pixel-font text-3xl md:text-4xl mb-6 text-cyan-400">
	레트로 게임 애호가라면<br>이런 문제를 겪어보셨죠?
	</h2>
	<p class="text-lg text-gray-400 max-w-2xl mx-auto">
	카트리지가 노후화되면서 소중한 추억이 사라질까 봐 걱정이신가요?
	저희가 모든 문제를 해결해드립니다.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
	<!-- 카드 1 -->
	<div class="pixel-card p-6 rounded-xl">
	<div class="text-pink-500 text-3xl mb-4">
	<i class="fas fa-microchip"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">기술적 복잡성</h3>
	<p class="text-gray-400 mb-4">
	낡은 하드웨어에서 데이터를 추출하는 과정이 너무 복잡하고 어렵습니다.
	</p>
	<div class="h-1 bg-gradient-to-r from-pink-500 to-transparent rounded-full mb-4"></div>
	<div class="text-sm text-cyan-400">"도저히 혼자 하기 힘들었어요"</div>
	</div>

	<!-- 카드 2 -->
	<div class="pixel-card p-6 rounded-xl">
	<div class="text-cyan-400 text-3xl mb-4">
	<i class="fas fa-unlink"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">호환성 문제</h3>
	<p class="text-gray-400 mb-4">
	현대 기기에서 어떻게 실행해야 할지 몰라서 포기한 적이 많습니다.
	</p>
	<div class="h-1 bg-gradient-to-r from-cyan-400 to-transparent rounded-full mb-4"></div>
	<div class="text-sm text-pink-500">"새 컴퓨터에서 안 돌아가서 난감했어요"</div>
	</div>

	<!-- 카드 3 -->
	<div class="pixel-card p-6 rounded-xl">
	<div class="text-yellow-400 text-3xl mb-4">
	<i class="fas fa-balance-scale"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">법적 우려</h3>
	<p class="text-gray-400 mb-4">
	게임 데이터를 보존하고 공유하는게 법적으로 문제가 될까 봐 걱정됩니다.
	</p>
	<div class="h-1 bg-gradient-to-r from-yellow-400 to-transparent rounded-full mb-4"></div>
	<div class="text-sm text-cyan-400">"법적 문제가 생길까 항상 불안했어요"</div>
	</div>

	<!-- 카드 4 -->
	<div class="pixel-card p-6 rounded-xl">
	<div class="text-green-400 text-3xl mb-4">
	<i class="fas fa-share-alt"></i>
	</div>
	<h3 class="text-xl font-bold mb-4">공유 어려움</h3>
	<p class="text-gray-400 mb-4">
	소중한 컬렉션을 다른 팬들과 안전하게 공유할 방법이 마땅치 않습니다.
	</p>
	<div class="h-1 bg-gradient-to-r from-green-400 to-transparent rounded-full mb-4"></div>
	<div class="text-sm text-pink-500">"제 보물을 누구와 나눌 수 없었어요"</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 해결책 섹션 -->
	<section class="py-20 relative" style="background-color: #0f0f1a;">
	<div class="absolute inset-0 opacity-20" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
	<div class="container mx-auto px-4 relative">
	<div class="flex flex-col lg:flex-row items-center gap-12 mb-20">
	<div class="lg:w-1/2">
	<h2 class="pixel-font text-3xl md:text-4xl mb-6 text-pink-500">
	레게 마스터 클래스로<br>완벽한 해결책을 얻으세요
	</h2>
	<p class="text-lg text-gray-300 mb-8 leading-relaxed">
	단순히 이론만이 아닌, 실제로 적용 가능한 실용적인 기술을 단계별로 배웁니다.
	복잡한 기술을 쉽게 설명하여 초보자도 쉽게 따라할 수 있습니다.
	</p>

	<div class="space-y-4 mb-8">
	<div class="flex items-start">
	<div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
	<i class="fas fa-check text-black"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">기술적 장벽 없는 쉬운 방법</h4>
	<p class="text-gray-400">초보자도 이해할 수 있는 명확한 가이드</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
	<i class="fas fa-check text-black"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">모든 기기 호환성 보장</h4>
	<p class="text-gray-400">PC, 모바일, 모든 콘솔에서 작동</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
	<i class="fas fa-check text-black"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">법적 문제 완벽 가이드</h4>
	<p class="text-gray-400">합법적인 범위에서의 보존 기술</p>
	</div>
	</div>
	</div>

	<button class="glow-btn text-black font-bold py-3 px-8 rounded-full flex items-center">
	커리큘럼 보기 <i class="fas fa-arrow-down ml-2"></i>
	</button>
	</div>

	<div class="lg:w-1/2 relative">
	<div class="pixel-card rounded-2xl overflow-hidden border border-pink-500/30 shadow-xl shadow-pink-500/10">
	<video poster="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" class="w-full h-auto">
	<source src="#" type="video/mp4">
	</video>
	</div>
	</div>
	</div>

	<!-- 성공 스토리 -->
	<div class="bg-gradient-to-r from-purple-900/50 to-cyan-900/50 border border-cyan-400/20 rounded-2xl p-8 md:p-12 mt-12">
	<div class="flex flex-col md:flex-row items-center gap-8">
	<div class="md:w-1/4 flex justify-center">
	<img src="https://images.unsplash.com/photo-1603415526960-f7e0328c63b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
	alt="수강생"
	class="w-32 h-32 rounded-full object-cover border-4 border-cyan-400">
	</div>
	<div class="md:w-3/4 text-center md:text-left">
	<p class="text-lg italic text-white mb-4">
	"레게 마스터 클래스를 통해 200개가 넘는 게임 콜렉션을 디지털화할 수 있었습니다.
	이제 어디서든 제 소중한 추억을 즐길 수 있어요. 정말 감사합니다!"
	</p>
	<div class="flex flex-col md:flex-row md:items-center justify-center md:justify-between">
	<div">
	<h4 class="font-bold text-cyan-400">박보존</h4>
	<p class="text-sm text-gray-400">300개 이상의 레트로 게임 소장</p>
	</div>
	<div class="flex mt-4 md:mt-0 justify-center">
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<i class="fas fa-star text-yellow-400"></i>
	<span class="ml-2 text-white">5.0</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 커리큘럼 섹션 -->
	<section id="curriculum" class="py-20 bg-black bg-opacity-60 relative">
	<div class="container mx-auto px-4 relative">
	<div class="text-center mb-16">
	<h2 class="pixel-font text-3xl md:text-4xl mb-6 text-pink-500">
	체계적인 6주 커리큘럼
	</h2>
	<p class="text-lg text-gray-400 max-w-2xl mx-auto">
	레트로 게임 보존부터 공유까지, 단계별로 체계적으로 배웁니다.
	</p>
	</div>

	<div class="max-w-4xl mx-auto">
	<!-- 모듈 1 -->
	<div class="pixel-card mb-6 rounded-xl overflow-hidden">
	<div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
	<div class="flex items-center">
	<div class="w-8 h-8 bg-cyan-400 rounded-full flex items-center justify-center mr-4 font-bold text-black">1</div>
	<h3 class="text-xl font-bold">기초: 레트로 게임 데이터 구조 이해</h3>
	</div>
	<i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
	</div>
	<div class="accordion-content px-6 pb-6 hidden">
	<p class="text-gray-300 mb-4">
	게임 데이터가 어떻게 저장되고 구성되는지 이해하는 것이 보존의 첫걸음입니다.
	</p>
	<ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
	<li>게임 카트리지의 물리적 구성 분석</li>
	<li>ROM과 데이터 구조의 이해</li>
	<li>데이터 손상 진단 방법</li>
	<li>보존 가치 판단 기준</li>
	</ul>
	</div>
	</div>

	<!-- 모듈 2 -->
	<div class="pixel-card mb-6 rounded-xl overflow-hidden">
	<div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
	<div class="flex items-center">
	<div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center mr-4 font-bold text-black">2</div>
	<h3 class="text-xl font-bold">데이터 추출: 하드웨어 & 소프트웨어</h3>
	</div>
	<i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
	</div>
	<div class="accordion-content px-6 pb-6 hidden">
	<p class="text-gray-300 mb-4">
	안전하게 게임 데이터를 추출하는 모든 방법을 학습합니다.
	</p>
	<ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
	<li>필요한 장비 및 도구 소개</li>
	<li>하드웨어 연결과 설정</li>
	<li>추출 소프트웨어 사용 방법</li>
	<li>데이터 무결성 검증</li>
	</ul>
	</div>
	</div>

	<!-- 모듈 3 -->
	<div class="pixel-card mb-6 rounded-xl overflow-hidden">
	<div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
	<div class="flex items-center">
	<div class="w-8 h-8 bg-cyan-400 rounded-full flex items-center justify-center mr-4 font-bold text-black">3</div>
	<h3 class="text-xl font-bold">에뮬레이션 환경 최적화</h3>
	</div>
	<i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
	</div>
	<div class="accordion-content px-6 pb-6 hidden">
	<p class="text-gray-300 mb-4">
	다양한 기기에서 최적의 게임 환경을 구축하는 방법을 배웁니다.
	</p>
	<ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
	<li>주요 에뮬레이터 비교</li>
	<li>설정 최적화 방법</li>
	<li>컨트롤러 매핑</li>
	<li>화질 개선 기술</li>
	</ul>
	</div>
	</div>

	<!-- 모듈 4 -->
	<div class="pixel-card mb-6 rounded-xl overflow-hidden">
	<div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
	<div class="flex items-center">
	<div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center mr-4 font-bold text-black">4</div>
	<h3 class="text-xl font-bold">데이터 관리 및 큐레이션</h3>
	</div>
	<i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
	</div>
	<div class="accordion-content px-6 pb-6 hidden">
	<p class="text-gray-300 mb-4">
	추출한 게임 데이터를 체계적으로 관리하고 편집하는 방법을 학습합니다.
	</p>
	<ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
	<li>메타데이터 추가 및 관리</li>
	<li>사용자 인터페이스 커스터마이징</li>
	<li>백업 및 버전 관리</li>
	<li>게임별 특수 설정 저장</li>
	</ul>
	</div>
	</div>

	<!-- 모듈 5 -->
	<div class="pixel-card mb-6 rounded-xl overflow-hidden">
	<div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
	<div class="flex items-center">
	<div class="w-8 h-8 bg-cyan-400 rounded-full flex items-center justify-center mr-4 font-bold text-black">5</div>
	<h3 class="text-xl font-bold">공유와 커뮤니티</h3>
	</div>
	<i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
	</div>
	<div class="accordion-content px-6 pb-6 hidden">
	<p class="text-gray-300 mb-4">
	합법적이고 안전하게 게임을 공유하는 방법을 배웁니다.
	</p>
	<ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
	<li>법적 문제 회피 방법</li>
	<li>개인용 서버 구축</li>
	<li>커뮤니티에 기여하는 방법</li>
	<li>패치 및 번역 프로젝트 참여</li>
	</ul>
	</div>
	</div>

	<!-- 모듈 6 -->
	<div class="pixel-card rounded-xl overflow-hidden">
	<div class="flex items-center justify-between p-6 cursor-pointer module-toggle">
	<div class="flex items-center">
	<div class="w-8 h-8 bg-pink-500 rounded-full flex items-center justify-center mr-4 font-bold text-black">6</div>
	<h3 class="text-xl font-bold">고급 하드웨어 솔루션</h3>
	</div>
	<i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 module-arrow"></i>
	</div>
	<div class="accordion-content px-6 pb-6 hidden">
	<p class="text-gray-300 mb-4">
	특수한 경우에 필요한 고급 기술을 학습합니다.
	</p>
	<ul class="list-disc list-inside text-gray-400 space-y-2 pl-4">
	<li>커스텀 하드웨어 솔루션</li>
	<li>데이터 복구 기술</li>
	<li>희귀 하드웨어 처리</li>
	<li>버그 수정 및 패칭</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 강사 소개 섹션 -->
	<section id="instructor" class="py-20 bg-black bg-opacity-80 relative">
	<div class="absolute inset-0 opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
	<div class="container mx-auto px-4 relative">
	<div class="flex flex-col lg:flex-row items-center gap-12 max-w-6xl mx-auto">
	<div class="lg:w-2/5 relative">
	<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80"
	alt="강사 프로필"
	class="w-full rounded-2xl border-4 border-cyan-400 shadow-xl">
	<div class="absolute -bottom-4 -right-4 bg-black px-4 py-2 rounded-full border border-pink-500 shadow-lg">
	<span class="text-pink-500 font-bold">10년 경력</span>
	</div>
	</div>

	<div class="lg:w-3/5">
	<h2 class="pixel-font text-3xl md:text-4xl mb-6 text-cyan-400">
	전문 강사와 함께 배우는<br>레트로 게임 보존 기술
	</h2>
	<h3 class="text-2xl font-bold mb-2">김레트로</h3>
	<div class="text-gray-400 mb-6">게임 보존 기술 전문가</div>

	<p class="text-gray-300 mb-6 leading-relaxed">
	10년이 넘도록 레트로 게임 보존 기술을 연구해 온 전문가로, 국내외에서 500개가 넘는 희귀 게임 데이터 복원 프로젝트를 완료했습니다.
	복잡한 기술을 초보자도 이해하기 쉽게 설명하는 능력으로 유명하며,
	많은 수강생들이 그의 강의를 통해 성공적으로 게임 보존 기술을 습득했습니다.
	</p>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
	<div class="flex items-center">
	<div class="w-10 h-10 bg-pink-500 rounded-full flex items-center justify-center mr-4 text-black">
	<i class="fas fa-gamepad"></i>
	</div>
	<div>
	<h4 class="font-bold">500+ 게임 복원</h4>
	<p class="text-sm text-gray-400">국내외 희귀 게임 데이터 보존</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 text-black">
	<i class="fas fa-users"></i>
	</div>
	<div>
	<h4 class="font-bold">10년+ 경력</h4>
	<p class="text-sm text-gray-400">게임 보존 기술 연구</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-4 text-black">
	<i class="fas fa-award"></i>
	</div>
	<div>
	<h4 class="font-bold">국제 인증</h4>
	<p class="text-sm text-gray-400">게임 보존 협회 인증 전문가</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-10 h-10 bg-yellow-400 rounded-full flex items-center justify-center mr-4 text-black">
	<i class="fas fa-graduation-cap"></i>
	</div>
	<div>
	<h4 class="font-bold">1,000+ 수강생</h4>
	<p class="text-sm text-gray-400">성공적인 기술 전수</p>
	</div>
	</div>
	</div>

	<button class="glow-btn text-black font-bold py-3 px-8 rounded-full inline-flex items-center">
	강사 상세 프로필 보기 <i class="fas fa-arrow-right ml-2"></i>
	</button>
	</div>
	</div>
	</div>
	</section>

	<!-- 가격 섹션 -->
	<section id="pricing" class="py-20 bg-gradient-to-b from-black to-purple-900 relative">
	<div class="absolute inset-0 opacity-10" style="background-image: url('https://grainy-gradients.vercel.app/noise.svg');"></div>
	<div class="container mx-auto px-4 relative">
	<div class="text-center mb-16">
	<h2 class="pixel-font text-3xl md:text-4xl mb-6 text-pink-500">
	당신의 레트로 게임 여행을<br>지금 시작하세요
	</h2>
	<p class="text-lg text-gray-400 max-w-2xl mx-auto">
	레트로 게임 보존 기술은 시간이 갈수록 가치가 올라갑니다. 지금 투자하세요!
	</p>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
	<!-- 가격 카드 -->
	<div class="pixel-card rounded-2xl overflow-hidden bg-gradient-to-b from-gray-900 to-black border border-cyan-400/30 relative">
	<div class="absolute top-4 right-4 bg-yellow-400 text-black text-xs font-bold px-3 py-1 rounded-full">
	베스트 초이스
	</div>
	<div class="p-8">
	<h3 class="text-2xl font-bold mb-2 text-cyan-400">얼리버드 할인</h3>
	<div class="flex items-end mb-4">
	<span class="text-4xl md:text-5xl font-bold">299,000</span>
	<span class="text-lg ml-1 text-gray-400">원</span>
	</div>
	<div class="flex items-center text-gray-400 mb-6">
	<span class="line-through mr-2">정가 399,000원</span>
	<span class="bg-green-900 text-green-400 text-xs px-2 py-1 rounded">25% 할인</span>
	</div>

	<div class="mb-8">
	<div class="flex items-center mb-3">
	<i class="fas fa-check-circle text-cyan-400 mr-2"></i>
	<span class="text-gray-300">6주 완성 풀 패키지</span>
	</div>
	<div class="flex items-center mb-3">
	<i class="fas fa-check-circle text-cyan-400 mr-2"></i>
	<span class="text-gray-300">평생 업데이트 지원</span>
	</div>
	<div class="flex items-center mb-3">
	<i class="fas fa-check-circle text-cyan-400 mr-2"></i>
	<span class="text-gray-300">전용 툴킷 제공</span>
	</div>
	<div class="flex items-center mb-3">
	<i class="fas fa-check-circle text-cyan-400 mr-2"></i>
	<span class="text-gray-300">커뮤니티 멤버십</span>
	</div>
	<div class="flex items-center">
	<i class="fas fa-check-circle text-cyan-400 mr-2"></i>
	<span class="text-gray-300">1:1 멘토링 2회</span>
	</div>
	</div>

	<button class="glow-btn text-black font-bold py-4 px-6 rounded-full w-full">
	지금 할인가로 등록하기
	</button>
	</div>
	</div>

	<!-- 할인 혜택 -->
	<div>
	<div class="pixel-card p-8 rounded-2xl mb-6">
	<h3 class="text-xl font-bold mb-6 text-pink-500">지금 등록시 특별 혜택</h3>

	<div class="space-y-4">
	<div class="flex items-start">
	<div class="w-10 h-10 bg-pink-500 rounded-full flex items-center justify-center mr-4 mt-1 text-black">
	<i class="fas fa-gift"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">무료 보너스 1</h4>
	<p class="text-gray-400 text-sm">레트로 게임 에뮬레이션 가이드북 (가치: 59,000원)</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="w-10 h-10 bg-cyan-400 rounded-full flex items-center justify-center mr-4 mt-1 text-black">
	<i class="fas fa-tools"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">무료 보너스 2</h4>
	<p class="text-gray-400 text-sm">전용 데이터 추출 도구 세트 (가치: 89,000원)</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="w-10 h-10 bg-purple-500 rounded-full flex items-center justify-center mr-4 mt-1 text-black">
	<i class="fas fa-users"></i>
	</div>
	<div>
	<h4 class="font-bold mb-1">무료 보너스 3</h4>
	<p class="text-gray-400 text-sm">VIP 커뮤니티 초대권 (가치: 49,000원)</p>
	</div>
	</div>
	</div>
	</div>

	<!-- 타이머 -->
	<div class="pixel-card p-6 rounded-2xl text-center">
	<div class="text-gray-300 mb-3">할인 마감까지:</div>
	<div class="flex justify-center gap-3 mb-4">
	<div class="timer-block px-4 py-2 rounded-lg">
	<div id="hours2" class="text-3xl font-bold text-pink-500">03</div>
	<div class="text-xs text-gray-400">시간</div>
	</div>
	<div class="timer-block px-4 py-2 rounded-lg">
	<div id="minutes2" class="text-3xl font-bold text-pink-500">00</div>
	<div class="text-xs text-gray-400">분</div>
	</div>
	<div class="timer-block px-4 py-2 rounded-lg">
	<div id="seconds2" class="text-3xl font-bold text-pink-500">00</div>
	<div class="text-xs text-gray-400">초</div>
	</div>
	</div>
	<p class="text-sm text-gray-400">지금 등록하면 총 <span class="text-cyan-400 font-bold">197,000원</span> 상당의 혜택을 받을 수 있습니다</p>
	</div>
	</div>
	</div>

	<!-- 환불 보장 -->
	<div class="mt-16 max-w-4xl mx-auto">
	<div class="pixel-card p-8 rounded-2xl text-center">
	<div class="flex flex-col md:flex-row items-center justify-center gap-4">
	<div class="w-16 h-16 bg-green-900 rounded-full flex items-center justify-center text-green-400">
	<i class="fas fa-shield-alt text-2xl"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold mb-2">30일 환불 보장</h3>
	<p class="text-gray-400">
	강의가 마음에 들지 않으면 30일 이내에 전액 환불해 드립니다.
	리스크 없이 시작하실 수 있습니다.
	</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 최종 CTA 섹션 -->
	<section class="py-20 bg-gradient-to-r from-purple-900/70 to-black/70 relative">
	<div class="container mx-auto px-4 relative">
	<div class="max-w-4xl mx-auto text-center">
	<h2 class="pixel-font text-3xl md:text-4xl mb-6 text-white">
	소중한 게임 컬렉션이<br>사라지기 전에 보존하세요!
	</h2>
	<p class="text-lg text-gray-300 mb-10 max-w-2xl mx-auto leading-relaxed">
	시간이 갈수록 카트리지와 디스크가 손상됩니다. 지금이 보존 기술을 배우기에 가장 좋은 시기입니다.
	</p>

	<div class="flex flex-col sm:flex-row justify-center gap-4 max-w-sm mx-auto">
	<button class="glow-btn text-black font-bold py-4 px-8 rounded-full text-lg">
	지금 등록하기
	</button>
	</div>

	<div class="mt-6 text-sm text-gray-500">
	<div class="flex items-center justify-center gap-2">
	<i class="fas fa-lock"></i>
	<span>안전한 결제</span>
	<i class="fas fa-shield-alt ml-2"></i>
	<span>개인정보 보호</span>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- 푸터 -->
	<footer class="bg-black bg-opacity-90 py-12 border-t border-gray-800">
	<div class="container mx-auto px-4">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<div class="mb-6 md:mb-0">
	<div class="flex items-center">
	<div class="game-controller-logo">
	<i class="fas fa-gamepad"></i>
	</div>
	<div class="pixel-font logo-text text-2xl ml-2">레게</div>
	</div>
	<p class="text-gray-400 text-sm mt-4">
	레트로 게임 보존 기술의 모든 것<br>
	© 2025 레게 마스터 클래스. All rights reserved.
	</p>
	</div>

	<div class="flex flex-col md:flex-row gap-8">
	<div>
	<h4 class="text-gray-300 font-bold mb-3">정보</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">이용약관</a></li>
	<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">개인정보 처리방침</a></li>
	<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">환불 정책</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-gray-300 font-bold mb-3">문의하기</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">고객 지원</a></li>
	<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">강사 초빙</a></li>
	<li><a href="#" class="text-gray-400 hover:text-cyan-400 transition text-sm">파트너십</a></li>
	</ul>
	</div>

	<div>
	<h4 class="text-gray-300 font-bold mb-3">소셜 미디어</h4>
	<div class="flex gap-4">
	<a href="#" class="text-gray-400 hover:text-cyan-400 transition text-xl"><i class="fab fa-youtube"></i></a>
	<a href="#" class="text-gray-400 hover:text-cyan-400 transition text-xl"><i class="fab fa-discord"></i></a>
	<a href="#" class="text-gray-400 hover:text-cyan-400 transition text-xl"><i class="fab fa-twitter"></i></a>
	</div>
	</div>
	</div>
	</div>
	</div>
	</footer>

	<!-- 사이드 플로팅 CTA -->
	<div class="side-cta fixed top-1/2 transform -translate-y-1/2 z-30">
	<div class="bg-gradient-to-r from-pink-600 to-purple-600 text-white p-3 rounded-l-lg shadow-lg flex items-center cursor-pointer" id="side-cta">
	<span class="whitespace-nowrap font-bold mr-2">할인 마감 임박!</span>
	<i class="fas fa-arrow-right"></i>
	</div>
	</div>

	<script>
	// 모바일 메뉴 토글
	const mobileMenuButton = document.getElementById('mobile-menu-button');
	const closeMenuButton = document.getElementById('close-menu');
	const mobileMenu = document.getElementById('mobile-menu');

	mobileMenuButton.addEventListener('click', () => {
	mobileMenu.classList.add('open');
	document.body.style.overflow = 'hidden';
	});

	closeMenuButton.addEventListener('click', () => {
	mobileMenu.classList.remove('open');
	document.body.style.overflow = '';
	});

	// FAQ 아코디언
	const accordionItems = document.querySelectorAll('.module-toggle');

	accordionItems.forEach(item => {
	item.addEventListener('click', () => {
	const content = item.parentElement.querySelector('.accordion-content');
	const arrow = item.querySelector('.module-arrow');

	content.classList.toggle('hidden');
	content.classList.toggle('block');
	arrow.classList.toggle('rotate-180');
	});
	});

	// 사이드 CTA
	const sideCta = document.getElementById('side-cta');

	sideCta.addEventListener('click', () => {
	document.getElementById('pricing').scrollIntoView({
	behavior: 'smooth'
	});
	});

	// 이메일 폼 제출
	const leadForm = document.getElementById('lead-form');

	leadForm.addEventListener('submit', (e) => {
	e.preventDefault();
	const email = e.target.querySelector('input[type="email"]').value;
	alert(`${email} 주소로 무료 가이드 링크를 보냈습니다!`);
	e.target.reset();
	});

	// 카운트다운 타이머 수정
	function updateCountdown() {
	// 종료 시간 설정 (현재 시간 + 3시간)
	const now = new Date();
	const endTime = new Date(now.getTime() + 3 * 60 * 60 * 1000);

	const timeLeft = endTime - now;

	// 시간, 분, 초 계산
	const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
	const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
	const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);

	// 두 타이머 모두 업데이트
	document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
	document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0');
	document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');

	document.getElementById('hours2').textContent = hours.toString().padStart(2, '0');
	document.getElementById('minutes2').textContent = minutes.toString().padStart(2, '0');
	document.getElementById('seconds2').textContent = seconds.toString().padStart(2, '0');

	if (timeLeft <= 0) {
	clearInterval(countdownTimer);
	document.querySelectorAll('.timer-block').forEach(el => {
	el.innerHTML = '<div class="text-red-500 font-bold">할인 기간이 종료되었습니다</div>';
	});
	}
	}

	// 초기 호출 및 인터벌 설정
	updateCountdown();
	const countdownTimer = setInterval(updateCountdown, 1000);
	</script>
	<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=dongil77/retro-game-master" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
	</html>