Hugging Face's logo

Spaces:
nkjoy
/
kmeda
Running

App Files Community
kmeda / mbooth.html
nkjoy's picture
nkjoy
ํŒŒํŠธ ํŽ˜์ด์ง€ ๋งŒ๋“ค์–ด์ค˜
6d5a607 verified
raw
history blame contribute delete
18.4 kB
 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MBooth(์— ๋ถ€์Šค) ๊ฐ€๋งน์‚ฌ์—… - ์ผ€์ด๋ฏธ๋””์–ด</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 font-semibold hover:text-purple-200 transition">MBooth</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">MBooth ๊ฐ€๋งน์‚ฌ์—…</h1>
<p class="text-xl md:text-2xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
4์ฐจ์‚ฐ์—… ์ฒดํ—˜๊ด€๊ณผ ๋ฉ”ํƒ€๋ฒ„์Šค ๋†€์ดํ„ฐ๋กœ ์ƒˆ๋กœ์šด ์ฐฝ์—…์˜ ๊ธฐํšŒ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค
</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">
MBooth๋Š” ์˜จ์˜คํ”„๋ผ์ธ ์—ฐ๊ฒฐ์„ ์œ„ํ•œ ์˜ด๋‹ˆ์ฑ„๋„ ์†Œํ†ต๊ณต๊ฐ„์„ ์ œ๊ณตํ•˜๋Š” ํ˜์‹ ์ ์ธ ๊ฐ€๋งน์‚ฌ์—…์ž…๋‹ˆ๋‹ค.
4์ฐจ์‚ฐ์—… ๊ธฐ์ˆ ์„ ์ฒดํ—˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„๊ณผ ๋ฉ”ํƒ€๋ฒ„์Šค ๊ธฐ๋ฐ˜ ๋†€์ดํ„ฐ๋ฅผ ๊ฒฐํ•ฉํ•˜์—ฌ ์ฐจ๋ณ„ํ™”๋œ ์ฐฝ์—… ๊ธฐํšŒ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.
</p>
</div>
<div class="grid md:grid-cols-2 gap-12 items-center" data-aos="fade-up">
<div>
<img src="http://static.photos/technology/640x360/1" alt="MBooth Technology" 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="vr" class="text-purple-600 text-2xl mr-4 mt-1"></i>
<div>
<h3 class="text-xl font-semibold mb-2">4์ฐจ์‚ฐ์—… ์ฒดํ—˜๊ด€</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="globe" 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="wifi" 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>
</div>
</div>
</section>
<!-- Key Features -->
<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 lg:grid-cols-4 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="gift" 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="users" 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="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 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="video" 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>
<!-- Franchise Benefits -->
<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">MBooth ๊ฐ€๋งน์ ์ฃผ๋‹˜๋“ค์—๊ฒŒ ๋“œ๋ฆฌ๋Š” ํŠน๋ณ„ํ•œ ํ˜œํƒ</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl shadow-md box-3d" data-aos="fade-up">
<div class="bg-purple-600 text-white p-3 rounded-full inline-block mb-4">
<i data-feather="trending-up" class="text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">์ˆ˜์ต์„ฑ</h3>
<ul class="space-y-2 text-gray-600">
<li>โ€ข ๋‚ฎ์€ ์ดˆ๊ธฐ ํˆฌ์ž ๋น„์šฉ</li>
<li>โ€ข ๋น ๋ฅธ ์†์ต๋ถ„๊ธฐ์  ๋„๋‹ฌ</li>
<li>โ€ข ๋‹ค์–‘์ ์ธ ์ˆ˜์ต ๋ชจ๋ธ</li>
<li>โ€ข ์ง€์†์ ์ธ ๋กœ์—ดํ‹ฐ ์ง€์›</li>
</ul>
</div>
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl shadow-md box-3d" data-aos="fade-up" data-aos-delay="100">
<div class="bg-indigo-600 text-white p-3 rounded-full inline-block mb-4">
<i data-feather="shield" class="text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">์ง€์›์‹œ์Šคํ…œ</h3>
<ul class="space-y-2 text-gray-600">
<li>โ€ข ์ดˆ๊ธฐ ๊ต์œก ํ”„๋กœ๊ทธ๋žจ</li>
<li>โ€ข ๋งˆ์ผ€ํŒ… ์ง€์›</li>
<li>โ€ข ๊ธฐ์ˆ  ์ง€์›</li>
<li>โ€ข ์šด์˜ ์ปจ์„คํŒ…</li>
</ul>
</div>
<div class="bg-gradient-to-br from-purple-50 to-indigo-50 p-6 rounded-xl shadow-md box-3d" data-aos="fade-up" data-aos-delay="200">
<div class="bg-purple-600 text-white p-3 rounded-full inline-block mb-4">
<i data-feather="award" class="text-xl"></i>
</div>
<h3 class="text-xl font-semibold mb-3">๋ธŒ๋žœ๋“œ ํŒŒ์›Œ</h3>
<ul class="space-y-2 text-gray-600">
<li>โ€ข ์ธ์ง€๋„ ๋†’์€ ๋ธŒ๋žœ๋“œ</li>
<li>โ€ข ์ฐจ๋ณ„ํ™”๋œ ์ฝ˜์…‰ํŠธ</li>
<li>โ€ข ์ง€์†์ ์ธ R&D ํˆฌ์ž</li>
<li>โ€ข ์ „๊ตญ ๋„คํŠธ์›Œํฌ</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Franchise Process -->
<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="max-w-4xl mx-auto">
<div class="grid md:grid-cols-5 gap-6">
<div class="text-center box-3d bg-white p-4" 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-4" 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">์ž…์ง€์กฐ๊ฑด ๋ฐ ์ƒ๊ถŒ๋ถ„์„</p>
</div>
<div class="text-center box-3d bg-white p-4" 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-4" 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 class="text-center box-3d bg-white p-4" data-aos="zoom-in" data-aos-delay="400">
<div class="bg-purple-600 text-white w-12 h-12 rounded-full flex items-center justify-center mx-auto mb-3">5</div>
<h4 class="font-semibold mb-2">์˜คํ”ˆ</h4>
<p class="text-sm text-gray-600">๊ทธ๋žœ๋“œ ์˜คํ”„๋‹</p>
</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">MBooth ๊ฐ€๋งน์‚ฌ์—…์— ๊ด€์‹ฌ์ด ์žˆ์œผ์‹ ๊ฐ€์š”?</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="phone" 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="file-text" 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>