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>