Hugging Face's logo

Spaces:
nkjoy
/
dday
Running

App Files Community
dday / premium.html
nkjoy's picture
nkjoy
๋””๋ฐ์ด ๊ด€๋ฆฌ ํŽ˜์ด์ง€ ๋งŒ๋“ค์ž. ๋””๋ฐ์ด ๋“ฑ๋กํ•˜๋ฉด ๋‚จ์€๋‚ ์งœ ๋“ฑ๋“ฑ ์•Œ๋ ค์ฃผ๊ณ  ๋ณด์—ฌ์ฃผ์ž ๋””์ž์ธ์€ ์ปคํ”Œ์ „์šฉ์ด๋‹ˆ ์•Œ์ฝฉ๋‹ฌ์ฝฉ ์ด์˜๊ฒŒ. ํ”„๋ฆฌ๋ฏธ์—„์œผ๋กœ - Initial Deployment
09a8f56 verified
raw
history blame contribute delete
16.7 kB
 <!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ํ”„๋ฆฌ๋ฏธ์—„ | Sweet D-Day</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>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&family=Poor+Story&display=swap');
.love-font {
font-family: 'Nanum Pen Script', cursive;
}
.count-font {
font-family: 'Poor Story', cursive;
}
.gradient-text {
background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.premium-gradient {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
</style>
</head>
<body class="premium-gradient">
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white bg-opacity-80 backdrop-blur-sm shadow-sm py-4 px-6">
<div class="container mx-auto flex justify-between items-center">
<a href="index.html" class="text-3xl love-font text-pink-600 flex items-center">
<i data-feather="heart" class="mr-2 text-red-500"></i>
Sweet D-Day
</a>
<a href="index.html" class="px-4 py-2 bg-pink-500 text-white rounded-full hover:bg-pink-600 transition flex items-center">
<i data-feather="arrow-left" class="mr-2"></i>
๋Œ์•„๊ฐ€๊ธฐ
</a>
</div>
</header>
<!-- Main Content -->
<main class="flex-1 py-12 px-6">
<div class="container mx-auto max-w-4xl">
<div class="text-center mb-12" data-aos="fade-up">
<h2 class="text-4xl love-font gradient-text mb-4">
<i data-feather="award" class="mr-2"></i>
ํ”„๋ฆฌ๋ฏธ์—„ ๋ฉค๋ฒ„์‹ญ
</h2>
<p class="text-xl count-font text-gray-700">
ํŠน๋ณ„ํ•œ ๊ธฐ๋Šฅ๊ณผ ๋””์ž์ธ์œผ๋กœ ๋”์šฑ ๋กœ๋งจํ‹ฑํ•œ ๋””๋ฐ์ด๋ฅผ ๊ฒฝํ—˜ํ•ด๋ณด์„ธ์š”
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
<!-- Free Plan -->
<div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-md" data-aos="fade-up">
<div class="text-center mb-6">
<h3 class="text-2xl love-font text-gray-700 mb-2">๋ฌด๋ฃŒ ๋ฒ„์ „</h3>
<p class="count-font text-gray-500">๊ธฐ๋ณธ ๊ธฐ๋Šฅ ์ œ๊ณต</p>
</div>
<div class="text-center mb-6">
<span class="text-4xl font-bold count-font text-gray-800">โ‚ฉ0</span>
<span class="count-font text-gray-500">/ ์˜์›ํžˆ ๋ฌด๋ฃŒ</span>
</div>
<ul class="space-y-3 mb-8 count-font text-gray-600">
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
๊ธฐ๋ณธ ๋””์ž์ธ 6์ข…
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
๋””๋ฐ์ด 5๊ฐœ๊นŒ์ง€ ๋“ฑ๋ก
</li>
<li class="flex items-center">
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
ํ”„๋ฆฌ๋ฏธ์—„ ๋””์ž์ธ
</li>
<li class="flex items-center">
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
์‚ฌ์ง„ ๋“ฑ๋ก ๊ธฐ๋Šฅ
</li>
<li class="flex items-center">
<i data-feather="x" class="w-5 h-5 text-red-500 mr-2"></i>
์ปคํ”Œ ์—ฐ๋™ ๊ธฐ๋Šฅ
</li>
</ul>
<button class="w-full py-3 bg-gray-200 text-gray-700 rounded-lg count-font">
ํ˜„์žฌ ์‚ฌ์šฉ ์ค‘
</button>
</div>
<!-- Premium Plan -->
<div class="bg-gradient-to-br from-pink-400 to-purple-500 rounded-2xl p-8 shadow-lg transform scale-105 relative" data-aos="fade-up" data-aos-delay="100">
<div class="absolute top-0 right-0 bg-yellow-400 text-yellow-900 px-3 py-1 rounded-bl-lg rounded-tr-2xl text-sm count-font">
์ธ๊ธฐ ํ”Œ๋žœ
</div>
<div class="text-center mb-6">
<h3 class="text-2xl love-font text-white mb-2">ํ”„๋ฆฌ๋ฏธ์—„</h3>
<p class="count-font text-white text-opacity-80">๋ชจ๋“  ๊ธฐ๋Šฅ ์ œ๊ณต</p>
</div>
<div class="text-center mb-6">
<span class="text-4xl font-bold count-font text-white">โ‚ฉ3,900</span>
<span class="count-font text-white text-opacity-80">/ ์›”</span>
</div>
<ul class="space-y-3 mb-8 count-font text-white text-opacity-90">
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
๋ชจ๋“  ๊ธฐ๋ณธ ๋””์ž์ธ
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
๋ฌด์ œํ•œ ๋””๋ฐ์ด ๋“ฑ๋ก
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
ํ”„๋ฆฌ๋ฏธ์—„ ๋””์ž์ธ 10+
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
์‚ฌ์ง„ ๋“ฑ๋ก ๋ฐ ๊ณต์œ 
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
์ปคํ”Œ ์—ฐ๋™ ๋ฐ ์•Œ๋ฆผ
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-white mr-2"></i>
ํŠน๋ณ„ํ•œ ๊ธฐ๋…์ผ ์นด๋“œ
</li>
</ul>
<button class="w-full py-3 bg-white text-pink-600 rounded-lg count-font font-bold hover:bg-opacity-90 transition">
๊ตฌ๋…ํ•˜๊ธฐ
</button>
</div>
<!-- Couple Plan -->
<div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-md" data-aos="fade-up" data-aos-delay="200">
<div class="text-center mb-6">
<h3 class="text-2xl love-font text-gray-700 mb-2">์—ฐ๊ฐ„ ํ”„๋ฆฌ๋ฏธ์—„</h3>
<p class="count-font text-gray-500">20% ํ• ์ธ</p>
</div>
<div class="text-center mb-6">
<span class="text-4xl font-bold count-font text-gray-800">โ‚ฉ37,900</span>
<span class="count-font text-gray-500">/ ์—ฐ (์›” โ‚ฉ3,158)</span>
</div>
<ul class="space-y-3 mb-8 count-font text-gray-600">
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
๋ชจ๋“  ํ”„๋ฆฌ๋ฏธ์—„ ๊ธฐ๋Šฅ
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
1๋…„๊ฐ„ ๋ฌด์ œํ•œ ์ด์šฉ
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
ํŠน๋ณ„ ๊ธฐ๋…์ผ ์•Œ๋ฆผ
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
์ปคํ”Œ ์ถ”์–ต ์•จ๋ฒ”
</li>
<li class="flex items-center">
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i>
์—ฐ๊ฐ„ ๋ฆฌํฌํŠธ ์ œ๊ณต
</li>
</ul>
<button class="w-full py-3 bg-pink-500 text-white rounded-lg count-font hover:bg-pink-600 transition">
์—ฐ๊ฐ„ ๊ตฌ๋…
</button>
</div>
</div>
<!-- Premium Features -->
<div class="bg-white bg-opacity-90 rounded-2xl p-8 shadow-lg mb-12" data-aos="fade-up">
<h3 class="text-2xl love-font text-center mb-8 gradient-text">
<i data-feather="zap" class="mr-2"></i>
ํ”„๋ฆฌ๋ฏธ์—„ ๊ธฐ๋Šฅ
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="flex items-start">
<div class="bg-pink-100 p-3 rounded-full mr-4">
<i data-feather="image" class="w-6 h-6 text-pink-500"></i>
</div>
<div>
<h4 class="text-xl love-font text-pink-600 mb-2">์‚ฌ์ง„ ๋“ฑ๋ก</h4>
<p class="count-font text-gray-600">ํŠน๋ณ„ํ•œ ์ˆœ๊ฐ„์„ ์‚ฌ์ง„์œผ๋กœ ๊ธฐ๋กํ•˜๊ณ  ์ถ”์–ต์„ ๊ณต์œ ํ•˜์„ธ์š”</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-purple-100 p-3 rounded-full mr-4">
<i data-feather="users" class="w-6 h-6 text-purple-500"></i>
</div>
<div>
<h4 class="text-xl love-font text-purple-600 mb-2">์ปคํ”Œ ์—ฐ๋™</h4>
<p class="count-font text-gray-600">์—ฐ์ธ๊ณผ ๊ณ„์ •์„ ์—ฐ๋™ํ•ด ํ•จ๊ป˜ ๋””๋ฐ์ด๋ฅผ ๊ด€๋ฆฌํ•˜์„ธ์š”</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-red-100 p-3 rounded-full mr-4">
<i data-feather="gift" class="w-6 h-6 text-red-500"></i>
</div>
<div>
<h4 class="text-xl love-font text-red-600 mb-2">ํŠน๋ณ„ ์นด๋“œ</h4>
<p class="count-font text-gray-600">๊ธฐ๋…์ผ์— ๋งž์ถค ๋””์ง€ํ„ธ ์นด๋“œ๋ฅผ ๋ฐ›์•„๋ณด์„ธ์š”</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i data-feather="bell" class="w-6 h-6 text-blue-500"></i>
</div>
<div>
<h4 class="text-xl love-font text-blue-600 mb-2">์•Œ๋ฆผ ์„ค์ •</h4>
<p class="count-font text-gray-600">๋””๋ฐ์ด๋ฅผ ๋†“์น˜์ง€ ์•Š๋„๋ก ๋ฏธ๋ฆฌ ์•Œ๋ฆผ์„ ๋ฐ›์œผ์„ธ์š”</p>
</div>
</div>
</div>
</div>
<!-- Testimonials -->
<div class="text-center" data-aos="fade-up">
<h3 class="text-2xl love-font mb-8 gradient-text">
<i data-feather="heart" class="mr-2"></i>
์‚ฌ์šฉ์ž ํ›„๊ธฐ
</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white bg-opacity-90 p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<img src="http://static.photos/people/200x200/1" class="w-12 h-12 rounded-full mr-4" alt="User">
<div>
<h4 class="love-font text-pink-600">์ง€ํ˜„ โ™ก ๋ฏผ์ค€</h4>
<p class="text-xs count-font text-gray-500">1๋…„ ์ฐจ ์ปคํ”Œ</p>
</div>
</div>
<p class="count-font text-gray-600 text-left">
"ํ”„๋ฆฌ๋ฏธ์—„ ๋””์ž์ธ์ด ๋„ˆ๋ฌด ์˜ˆ๋ป์„œ ๋งค์ผ ๋“ค์–ด๊ฐ€๊ฒŒ ๋ผ์š”! 100์ผ๋ถ€ํ„ฐ 1์ฃผ๋…„๊นŒ์ง€ ๋ชจ๋“  ์ˆœ๊ฐ„์„ ๊ธฐ๋กํ•˜๊ณ  ์žˆ์–ด์š”."
</p>
</div>
<div class="bg-white bg-opacity-90 p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<img src="http://static.photos/people/200x200/2" class="w-12 h-12 rounded-full mr-4" alt="User">
<div>
<h4 class="love-font text-purple-600">์ˆ˜๋นˆ โ™ก ํ˜„์šฐ</h4>
<p class="text-xs count-font text-gray-500">3๋…„ ์ฐจ ์ปคํ”Œ</p>
</div>
</div>
<p class="count-font text-gray-600 text-left">
"์ปคํ”Œ ์—ฐ๋™ ๊ธฐ๋Šฅ์ด ์ตœ๊ณ ์˜ˆ์š”! ์„œ๋กœ์˜ ๊ธฐ๋…์ผ์„ ๋†“์น˜์ง€ ์•Š๊ณ  ์ฑ™๊ธธ ์ˆ˜ ์žˆ์–ด์„œ ์ •๋ง ์ข‹์•„์š”."
</p>
</div>
<div class="bg-white bg-opacity-90 p-6 rounded-xl shadow-md">
<div class="flex items-center mb-4">
<img src="http://static.photos/people/200x200/3" class="w-12 h-12 rounded-full mr-4" alt="User">
<div>
<h4 class="love-font text-red-600">์˜ˆ์€ โ™ก ์ค€ํ˜ธ</h4>
<p class="text-xs count-font text-gray-500">6๊ฐœ์›” ์ฐจ ์ปคํ”Œ</p>
</div>
</div>
<p class="count-font text-gray-600 text-left">
"ํŠน๋ณ„ ์นด๋“œ ๊ธฐ๋Šฅ์œผ๋กœ ๊ธฐ๋…์ผ๋งˆ๋‹ค ์„œํ”„๋ผ์ด์ฆˆ๋ฅผ ์ค€๋น„ํ•  ์ˆ˜ ์žˆ์–ด์š”. ์—ฐ์ธ๋„ ๋„ˆ๋ฌด ์ข‹์•„ํ•ด์š”!"
</p>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-white bg-opacity-80 py-6 px-6">
<div class="container mx-auto text-center">
<p class="text-gray-600 count-font">
<i data-feather="heart" class="inline w-4 h-4 text-red-500"></i>
Sweet D-Day - ์ปคํ”Œ์„ ์œ„ํ•œ ํŠน๋ณ„ํ•œ ๋””๋ฐ์ด ๊ด€๋ฆฌ ์„œ๋น„์Šค
</p>
</div>
</footer>
</div>
<script>
AOS.init();
feather.replace();
</script>
</body>
</html>