Hugging Face's logo

Spaces:
kjaylee
/
pipln
Running

App Files Community
pipln / index.html
kjaylee's picture
kjaylee
undefined - Initial Deployment
fc106f7 verified
Raw
History Blame Contribute Delete
34.2 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Creative Web Solution</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">
 <style>
 /* ์ปค์Šคํ…€ ์• ๋‹ˆ๋ฉ”์ด์…˜ */
 @keyframes float {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-20px); }
 }
 .floating { animation: float 6s ease-in-out infinite; }
/* ์ปค์Šคํ…€ ์Šคํฌ๋กค๋ฐ” */
 ::-webkit-scrollbar {
 width: 8px;
 }
 ::-webkit-scrollbar-track {
 background: #f1f1f1;
 }
 ::-webkit-scrollbar-thumb {
 background: #4f46e5;
 border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
 background: #4338ca;
 }
/* ๊ธ€๋ž˜์Šค๋ชจํ”ผ์ฆ˜ ํšจ๊ณผ */
 .glass {
 background: rgba(255, 255, 255, 0.15);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid rgba(255, 255, 255, 0.18);
 }
 </style>
</head>
<body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 text-white min-h-screen font-sans">
 <!-- ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” -->
 <nav class="glass fixed w-full z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex items-center justify-between h-16">
 <div class="flex items-center">
 <div class="flex-shrink-0">
 <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-indigo-300">CreativeWeb</span>
 </div>
 <div class="hidden md:block">
 <div class="ml-10 flex items-baseline space-x-4">
 <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">ํ™ˆ</a>
 <a href="#services" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">์„œ๋น„์Šค</a>
 <a href="#portfolio" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">ํฌํŠธํด๋ฆฌ์˜ค</a>
 <a href="#about" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">์†Œ๊ฐœ</a>
 <a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition duration-300">์—ฐ๋ฝ์ฒ˜</a>
 </div>
 </div>
 </div>
 <div class="hidden md:block">
 <button class="bg-pink-500 hover:bg-pink-600 px-4 py-2 rounded-md text-sm font-medium transition duration-300">
 ๋ฌธ์˜ํ•˜๊ธฐ
 </button>
 </div>
 <div class="-mr-2 flex md:hidden">
 <button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
 </svg>
 </button>
 </div>
 </div>
 </div>
<!-- ๋ชจ๋ฐ”์ผ ๋ฉ”๋‰ด -->
 <div id="mobile-menu" class="hidden md:hidden">
 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
 <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-700">ํ™ˆ</a>
 <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-700">์„œ๋น„์Šค</a>
 <a href="#portfolio" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-700">ํฌํŠธํด๋ฆฌ์˜ค</a>
 <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-700">์†Œ๊ฐœ</a>
 <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-indigo-700">์—ฐ๋ฝ์ฒ˜</a>
 <button class="block w-full text-left px-3 py-2 rounded-md text-base font-medium bg-pink-500 hover:bg-pink-600 mt-2">
 ๋ฌธ์˜ํ•˜๊ธฐ
 </button>
 </div>
 </div>
 </nav>
<!-- ํ—ค๋กœ ์„น์…˜ -->
 <section id="home" class="pt-32 pb-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
 <div class="flex flex-col md:flex-row items-center">
 <div class="md:w-1/2 mb-10 md:mb-0">
 <h1 class="text-4xl md:text-6xl font-bold leading-tight mb-6">
 <span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-indigo-300">์ฐฝ์˜์ ์ธ ์›น ์†”๋ฃจ์…˜</span><br>
 <span class="text-xl md:text-2xl font-normal">๋‹น์‹ ์˜ ๋น„์ „์„ ํ˜„์‹ค๋กœ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค</span>
 </h1>
 <p class="text-lg text-gray-300 mb-8">
 ์šฐ๋ฆฌ๋Š” ํ˜์‹ ์ ์ธ ์›น ๋””์ž์ธ๊ณผ ๊ฐœ๋ฐœ ์„œ๋น„์Šค๋ฅผ ์ œ๊ณตํ•˜์—ฌ ๋น„์ฆˆ๋‹ˆ์Šค์˜ ์„ฑ์žฅ์„ ๋•์Šต๋‹ˆ๋‹ค.
์ตœ์‹  ๊ธฐ์ˆ ๊ณผ ์ฐฝ์˜์ ์ธ ์ ‘๊ทผ ๋ฐฉ์‹์œผ๋กœ ๊ณ ๊ฐ์˜ ์š”๊ตฌ๋ฅผ ์ถฉ์กฑ์‹œํ‚ต๋‹ˆ๋‹ค.
 </p>
 <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
 <button class="bg-pink-500 hover:bg-pink-600 px-6 py-3 rounded-lg text-lg font-medium transition duration-300 transform hover:scale-105">
 ํ”„๋กœ์ ํŠธ ์‹œ์ž‘ํ•˜๊ธฐ
 </button>
 <button class="border border-white hover:bg-white hover:text-indigo-900 px-6 py-3 rounded-lg text-lg font-medium transition duration-300 transform hover:scale-105">
 ๋” ์•Œ์•„๋ณด๊ธฐ
 </button>
 </div>
 </div>
 <div class="md:w-1/2 flex justify-center">
 <div class="relative w-full max-w-md">
 <div class="absolute -top-10 -left-10 w-32 h-32 bg-pink-500 rounded-full opacity-20 animate-pulse"></div>
 <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-indigo-500 rounded-full opacity-20 animate-pulse delay-300"></div>
 <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt="์›น ๊ฐœ๋ฐœ"
class="relative rounded-2xl shadow-2xl floating border-4 border-white">
 </div>
 </div>
 </div>
 </section>
<!-- ์„œ๋น„์Šค ์„น์…˜ -->
 <section id="services" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">์šฐ๋ฆฌ์˜ ์ „๋ฌธ ์„œ๋น„์Šค</h2>
 <p class="text-xl text-gray-300 max-w-3xl mx-auto">
 ๋‹ค์–‘ํ•œ ์‚ฐ์—… ๋ถ„์•ผ์— ๋งž์ถคํ˜• ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•˜์—ฌ ๋น„์ฆˆ๋‹ˆ์Šค์˜ ๋””์ง€ํ„ธ ์ „ํ™˜์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- ์„œ๋น„์Šค 1 -->
 <div class="glass p-8 rounded-xl hover:shadow-lg transition duration-500 transform hover:-translate-y-2">
 <div class="w-16 h-16 bg-pink-500 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-laptop-code text-2xl text-white"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">์›น ๊ฐœ๋ฐœ</h3>
 <p class="text-gray-300 mb-4">
 ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ๊ฐœ๋ฐœ๋ถ€ํ„ฐ ๋ณต์žกํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜๊นŒ์ง€ ๋ชจ๋“  ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑ์‹œํ‚ต๋‹ˆ๋‹ค.
 </p>
 <a href="#" class="text-pink-400 hover:text-pink-300 font-medium flex items-center">
 ๋” ์•Œ์•„๋ณด๊ธฐ <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
<!-- ์„œ๋น„์Šค 2 -->
 <div class="glass p-8 rounded-xl hover:shadow-lg transition duration-500 transform hover:-translate-y-2">
 <div class="w-16 h-16 bg-indigo-500 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-mobile-alt text-2xl text-white"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">๋ชจ๋ฐ”์ผ ์•ฑ</h3>
 <p class="text-gray-300 mb-4">
 iOS ๋ฐ Android ํ”Œ๋žซํผ์„ ์œ„ํ•œ ๊ณ ์„ฑ๋Šฅ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•ฉ๋‹ˆ๋‹ค.
 </p>
 <a href="#" class="text-indigo-400 hover:text-indigo-300 font-medium flex items-center">
 ๋” ์•Œ์•„๋ณด๊ธฐ <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
<!-- ์„œ๋น„์Šค 3 -->
 <div class="glass p-8 rounded-xl hover:shadow-lg transition duration-500 transform hover:-translate-y-2">
 <div class="w-16 h-16 bg-purple-500 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-paint-brush text-2xl text-white"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">UI/UX ๋””์ž์ธ</h3>
 <p class="text-gray-300 mb-4">
 ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ค‘์‹ฌ์œผ๋กœ ํ•œ ์ง๊ด€์ ์ด๊ณ  ์•„๋ฆ„๋‹ค์šด ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.
 </p>
 <a href="#" class="text-purple-400 hover:text-purple-300 font-medium flex items-center">
 ๋” ์•Œ์•„๋ณด๊ธฐ <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
<!-- ์„œ๋น„์Šค 4 -->
 <div class="glass p-8 rounded-xl hover:shadow-lg transition duration-500 transform hover:-translate-y-2">
 <div class="w-16 h-16 bg-blue-500 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-search-dollar text-2xl text-white"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">๋””์ง€ํ„ธ ๋งˆ์ผ€ํŒ…</h3>
 <p class="text-gray-300 mb-4">
 ๊ฒ€์ƒ‰ ์—”์ง„ ์ตœ์ ํ™”์™€ ์†Œ์…œ ๋ฏธ๋””์–ด ์ „๋žต์œผ๋กœ ์˜จ๋ผ์ธ ๊ฐ€์‹œ์„ฑ์„ ๋†’์ž…๋‹ˆ๋‹ค.
 </p>
 <a href="#" class="text-blue-400 hover:text-blue-300 font-medium flex items-center">
 ๋” ์•Œ์•„๋ณด๊ธฐ <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
<!-- ์„œ๋น„์Šค 5 -->
 <div class="glass p-8 rounded-xl hover:shadow-lg transition duration-500 transform hover:-translate-y-2">
 <div class="w-16 h-16 bg-green-500 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-chart-line text-2xl text-white"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">๋ฐ์ดํ„ฐ ๋ถ„์„</h3>
 <p class="text-gray-300 mb-4">
 ๋น…๋ฐ์ดํ„ฐ ๋ถ„์„์„ ํ†ตํ•ด ๋น„์ฆˆ๋‹ˆ์Šค ์ธ์‚ฌ์ดํŠธ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์˜์‚ฌ ๊ฒฐ์ •์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
 </p>
 <a href="#" class="text-green-400 hover:text-green-300 font-medium flex items-center">
 ๋” ์•Œ์•„๋ณด๊ธฐ <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
<!-- ์„œ๋น„์Šค 6 -->
 <div class="glass p-8 rounded-xl hover:shadow-lg transition duration-500 transform hover:-translate-y-2">
 <div class="w-16 h-16 bg-yellow-500 rounded-lg flex items-center justify-center mb-6">
 <i class="fas fa-cloud text-2xl text-white"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">ํด๋ผ์šฐ๋“œ ์†”๋ฃจ์…˜</h3>
 <p class="text-gray-300 mb-4">
 ์•ˆ์ „ํ•˜๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ํด๋ผ์šฐ๋“œ ์ธํ”„๋ผ ๊ตฌ์ถ•์œผ๋กœ ๋น„์ฆˆ๋‹ˆ์Šค ์šด์˜์„ ์ตœ์ ํ™”ํ•ฉ๋‹ˆ๋‹ค.
 </p>
 <a href="#" class="text-yellow-400 hover:text-yellow-300 font-medium flex items-center">
 ๋” ์•Œ์•„๋ณด๊ธฐ <i class="fas fa-arrow-right ml-2"></i>
 </a>
 </div>
 </div>
 </section>
<!-- ํฌํŠธํด๋ฆฌ์˜ค ์„น์…˜ -->
 <section id="portfolio" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-black bg-opacity-20">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">์šฐ๋ฆฌ์˜ ์ž‘์—…</h2>
 <p class="text-xl text-gray-300 max-w-3xl mx-auto">
 ๋‹ค์–‘ํ•œ ์‚ฐ์—… ๋ถ„์•ผ์˜ ๊ณ ๊ฐ๋“ค๊ณผ ํ•จ๊ป˜ํ•œ ์„ฑ๊ณต์ ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.
 </p>
 </div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
 <!-- ํ”„๋กœ์ ํŠธ 1 -->
 <div class="relative group overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt="์ด์ปค๋จธ์Šค ์›น์‚ฌ์ดํŠธ"
class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6">
 <div>
 <h3 class="text-xl font-bold text-white mb-2">์ด์ปค๋จธ์Šค ํ”Œ๋žซํผ</h3>
 <p class="text-gray-300">์˜จ๋ผ์ธ ํ•‘๋ชฐ ๊ตฌ์ถ• ๋ฐ ํ†ตํ•ฉ ๊ฒฐ์ œ ์‹œ์Šคํ…œ ๊ฐœ๋ฐœ</p>
 <button class="mt-3 px-4 py-2 bg-pink-500 text-white rounded-md text-sm font-medium hover:bg-pink-600 transition duration-300">
 ์ž์„ธํžˆ ๋ณด๊ธฐ
 </button>
 </div>
 </div>
 </div>
<!-- ํ”„๋กœ์ ํŠธ 2 -->
 <div class="relative group overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt="๊ธฐ์—… ์›น์‚ฌ์ดํŠธ"
class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6">
 <div>
 <h3 class="text-xl font-bold text-white mb-2">๊ธฐ์—… ์›น์‚ฌ์ดํŠธ</h3>
 <p class="text-gray-300">๊ธฐ์—… ๋ธŒ๋žœ๋”ฉ์„ ์œ„ํ•œ ํ˜„๋Œ€์ ์ธ ์›น์‚ฌ์ดํŠธ ๋””์ž์ธ ๋ฐ ๊ฐœ๋ฐœ</p>
 <button class="mt-3 px-4 py-2 bg-indigo-500 text-white rounded-md text-sm font-medium hover:bg-indigo-600 transition duration-300">
 ์ž์„ธํžˆ ๋ณด๊ธฐ
 </button>
 </div>
 </div>
 </div>
<!-- ํ”„๋กœ์ ํŠธ 3 -->
 <div class="relative group overflow-hidden rounded-xl">
 <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt="๋ชจ๋ฐ”์ผ ์•ฑ"
class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
 <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-0 group-hover:opacity-100 transition duration-300 flex items-end p-6">
 <div>
 <h3 class="text-xl font-bold text-white mb-2">ํ”ผํŠธ๋‹ˆ์Šค ์•ฑ</h3>
 <p class="text-gray-300">๊ฑด๊ฐ• ๊ด€๋ฆฌ ๋ฐ ์šด๋™ ์ถ”์ ์„ ์œ„ํ•œ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜</p>
 <button class="mt-3 px-4 py-2 bg-purple-500 text-white rounded-md text-sm font-medium hover:bg-purple-600 transition duration-300">
 ์ž์„ธํžˆ ๋ณด๊ธฐ
 </button>
 </div>
 </div>
 </div>
 </div>
<div class="text-center mt-12">
 <button class="border-2 border-white hover:bg-white hover:text-indigo-900 px-8 py-3 rounded-lg text-lg font-medium transition duration-300 transform hover:scale-105">
 ๋” ๋งŽ์€ ํ”„๋กœ์ ํŠธ ๋ณด๊ธฐ
 </button>
 </div>
 </section>
<!-- ์†Œ๊ฐœ ์„น์…˜ -->
 <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
 <div class="flex flex-col lg:flex-row items-center">
 <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12">
 <h2 class="text-3xl md:text-4xl font-bold mb-6">์šฐ๋ฆฌ์— ๋Œ€ํ•ด</h2>
 <p class="text-lg text-gray-300 mb-6">
 10๋…„ ์ด์ƒ์˜ ๊ฒฝํ—˜์„ ๊ฐ€์ง„ ์ „๋ฌธ๊ฐ€๋“ค๋กœ ๊ตฌ์„ฑ๋œ ์šฐ๋ฆฌ ํŒ€์€ ๋””์ง€ํ„ธ ํ˜์‹ ์„ ์„ ๋„ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
๊ธฐ์ˆ  ์ „๋ฌธ์„ฑ๊ณผ ์ฐฝ์˜์ ์ธ ์ ‘๊ทผ ๋ฐฉ์‹์„ ๊ฒฐํ•ฉํ•˜์—ฌ ๊ณ ๊ฐ์˜ ๋น„์ฆˆ๋‹ˆ์Šค ๋ชฉํ‘œ๋ฅผ ๋‹ฌ์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
 </p>
 <p class="text-lg text-gray-300 mb-8">
 ์šฐ๋ฆฌ๋Š” ๊ฐ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ณ ์œ ํ•œ ๋„์ „์œผ๋กœ ๋ฐ›์•„๋“ค์ด๋ฉฐ, ์ตœ์‹  ๊ธฐ์ˆ  ํŠธ๋ Œ๋“œ์™€ ์—…๊ณ„ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ
์ ์šฉํ•˜์—ฌ ํƒ์›”ํ•œ ๊ฒฐ๊ณผ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ณ ๊ฐ๊ณผ์˜ ํ˜‘๋ ฅ์„ ์ตœ์šฐ์„ ์œผ๋กœ ์ƒ๊ฐํ•˜๋ฉฐ,
ํˆฌ๋ช…ํ•œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜๊ณผ ์ฑ…์ž„๊ฐ ์žˆ๋Š” ํ”„๋กœ์ ํŠธ ๊ด€๋ฆฌ๋ฅผ ์•ฝ์†ํ•ฉ๋‹ˆ๋‹ค.
 </p>
 <div class="grid grid-cols-2 gap-6">
 <div class="bg-white bg-opacity-10 p-4 rounded-lg">
 <div class="text-3xl font-bold text-pink-400 mb-2">150+</div>
 <div class="text-gray-300">์™„๋ฃŒ๋œ ํ”„๋กœ์ ํŠธ</div>
 </div>
 <div class="bg-white bg-opacity-10 p-4 rounded-lg">
 <div class="text-3xl font-bold text-indigo-400 mb-2">50+</div>
 <div class="text-gray-300">๋งŒ์กฑํ•œ ๊ณ ๊ฐ</div>
 </div>
 <div class="bg-white bg-opacity-10 p-4 rounded-lg">
 <div class="text-3xl font-bold text-purple-400 mb-2">10+</div>
 <div class="text-gray-300">์‚ฐ์—… ๋ถ„์•ผ</div>
 </div>
 <div class="bg-white bg-opacity-10 p-4 rounded-lg">
 <div class="text-3xl font-bold text-blue-400 mb-2">24/7</div>
 <div class="text-gray-300">์ง€์› ์„œ๋น„์Šค</div>
 </div>
 </div>
 </div>
 <div class="lg:w-1/2 relative">
 <div class="relative z-10">
 <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80"
alt="์šฐ๋ฆฌ ํŒ€"
class="rounded-xl shadow-2xl border-4 border-white">
 </div>
 <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-pink-500 rounded-full opacity-20 z-0"></div>
 <div class="absolute -top-10 -left-10 w-64 h-64 bg-indigo-500 rounded-full opacity-20 z-0"></div>
 </div>
 </div>
 </section>
<!-- ์—ฐ๋ฝ์ฒ˜ ์„น์…˜ -->
 <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-black bg-opacity-20">
 <div class="text-center mb-16">
 <h2 class="text-3xl md:text-4xl font-bold mb-4">์—ฐ๋ฝํ•˜๊ธฐ</h2>
 <p class="text-xl text-gray-300 max-w-3xl mx-auto">
 ํ”„๋กœ์ ํŠธ์— ๋Œ€ํ•ด ๋ฌธ์˜ํ•˜๊ฑฐ๋‚˜ ์ž์„ธํ•œ ์ƒ๋‹ด์„ ์›ํ•˜์‹œ๋ฉด ์•„๋ž˜ ์–‘์‹์„ ์ž‘์„ฑํ•ด์ฃผ์„ธ์š”.
 </p>
 </div>
<div class="flex flex-col lg:flex-row gap-12">
 <div class="lg:w-1/2">
 <form class="space-y-6">
 <div>
 <label for="name" class="block text-sm font-medium text-gray-300 mb-1">์ด๋ฆ„</label>
 <input type="text" id="name" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-gray-600 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500 transition duration-300" placeholder="์ด๋ฆ„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”">
 </div>
 <div>
 <label for="email" class="block text-sm font-medium text-gray-300 mb-1">์ด๋ฉ”์ผ</label>
 <input type="email" id="email" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-gray-600 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500 transition duration-300" placeholder="์ด๋ฉ”์ผ์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”">
 </div>
 <div>
 <label for="subject" class="block text-sm font-medium text-gray-300 mb-1">์ฃผ์ œ</label>
 <input type="text" id="subject" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-gray-600 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500 transition duration-300" placeholder="๋ฌธ์˜ ์ฃผ์ œ๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”">
 </div>
 <div>
 <label for="message" class="block text-sm font-medium text-gray-300 mb-1">๋ฉ”์‹œ์ง€</label>
 <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg bg-white bg-opacity-10 border border-gray-600 focus:border-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-500 transition duration-300" placeholder="๋ฉ”์‹œ์ง€๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”"></textarea>
 </div>
 <button type="submit" class="w-full bg-pink-500 hover:bg-pink-600 px-6 py-3 rounded-lg text-lg font-medium transition duration-300 transform hover:scale-105">
 ๋ฉ”์‹œ์ง€ ๋ณด๋‚ด๊ธฐ
 </button>
 </form>
 </div>
 <div class="lg:w-1/2">
 <div class="glass p-8 rounded-xl h-full">
 <h3 class="text-2xl font-bold mb-6">์—ฐ๋ฝ์ฒ˜ ์ •๋ณด</h3>
<div class="space-y-6">
 <div class="flex items-start">
 <div class="flex-shrink-0 bg-pink-500 rounded-lg p-3">
 <i class="fas fa-map-marker-alt text-white"></i>
 </div>
 <div class="ml-4">
 <h4 class="text-lg font-medium">์ฃผ์†Œ</h4>
 <p class="text-gray-300">์„œ์šธํŠน๋ณ„์‹œ ๊ฐ•๋‚จ๊ตฌ ํ…Œํ—ค๋ž€๋กœ 123, ํฌ๋ฆฌ์—์ดํ‹ฐ๋ธŒ ๋นŒ๋”ฉ 10์ธต</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 bg-indigo-500 rounded-lg p-3">
 <i class="fas fa-envelope text-white"></i>
 </div>
 <div class="ml-4">
 <h4 class="text-lg font-medium">์ด๋ฉ”์ผ</h4>
 <p class="text-gray-300">contact@creativeweb.com</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 bg-purple-500 rounded-lg p-3">
 <i class="fas fa-phone-alt text-white"></i>
 </div>
 <div class="ml-4">
 <h4 class="text-lg font-medium">์ „ํ™”๋ฒˆํ˜ธ</h4>
 <p class="text-gray-300">+82 2-1234-5678</p>
 </div>
 </div>
<div class="flex items-start">
 <div class="flex-shrink-0 bg-blue-500 rounded-lg p-3">
 <i class="fas fa-clock text-white"></i>
 </div>
 <div class="ml-4">
 <h4 class="text-lg font-medium">๊ทผ๋ฌด ์‹œ๊ฐ„</h4>
 <p class="text-gray-300">์›”-๊ธˆ: 9:00 - 18:00<br>ํ† -์ผ: ๋ฌด</p>
 </div>
 </div>
 </div>
<div class="mt-8">
 <h4 class="text-lg font-medium mb-4">์†Œ์…œ ๋ฏธ๋””์–ด</h4>
 <div class="flex space-x-4">
 <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-pink-500 transition duration-300">
 <i class="fab fa-facebook-f"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-blue-400 transition duration-300">
 <i class="fab fa-twitter"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-gradient-to-r from-pink-500 to-yellow-500 transition duration-300">
 <i class="fab fa-instagram"></i>
 </a>
 <a href="#" class="w-10 h-10 bg-white bg-opacity-10 rounded-full flex items-center justify-center hover:bg-blue-600 transition duration-300">
 <i class="fab fa-linkedin-in"></i>
 </a>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- ํ„ฐ -->
 <footer class="bg-black bg-opacity-40 py-12 px-4 sm:px-6 lg:px-8">
 <div class="max-w-7xl mx-auto">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-pink-400 to-indigo-300">CreativeWeb</h3>
 <p class="text-gray-400">
 ํ˜์‹ ์ ์ธ ๋””์ง€ํ„ธ ์†”๋ฃจ์…˜์œผ๋กœ ๋น„์ฆˆ๋‹ˆ์Šค์˜ ์„ฑ์žฅ์„ ๋•๋Š” ํฌ๋ฆฌ์—์ดํ‹ฐ๋ธŒ ์›น ๊ฐœ๋ฐœ์‚ฌ์ž…๋‹ˆ๋‹ค.
 </p>
 </div>
<div>
 <h4 class="text-lg font-medium mb-4">๋น ๋ฅธ ๋งํฌ</h4>
 <ul class="space-y-2">
 <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">ํ™ˆ</a></li>
 <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">์„œ๋น„์Šค</a></li>
 <li><a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">ํฌํŠธํด๋ฆฌ์˜ค</a></li>
 <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">์†Œ๊ฐœ</a></li>
 <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">์—ฐ๋ฝ์ฒ˜</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-medium mb-4">์„œ๋น„์Šค</h4>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">์›น ๊ฐœ๋ฐœ</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">๋ชจ๋ฐ”์ผ ์•ฑ</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">UI/UX ๋””์ž์ธ</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">๋””์ง€ํ„ธ ๋งˆ์ผ€ํŒ…</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">๋ฐ์ดํ„ฐ ๋ถ„์„</a></li>
 </ul>
 </div>
<div>
 <h4 class="text-lg font-medium mb-4">๋‰ด์Šค๋ ˆํ„ฐ ๊ตฌ๋…</h4>
 <p class="text-gray-400 mb-4">
 ์ตœ์‹  ์†Œ์‹๊ณผ ํ”„๋กœ๋ชจ์…˜์„ ์ด๋ฉ”์ผ๋กœ ๋ฐ›์•„๋ณด์„ธ์š”.
 </p>
 <div class="flex">
 <input type="email" placeholder="์ด๋ฉ”์ผ ์ฃผ์†Œ" class="px-4 py-2 rounded-l-lg bg-white bg-opacity-10 border border-gray-600 focus:outline-none focus:border-pink-500 w-full">
 <button class="bg-pink-500 hover:bg-pink-600 px-4 py-2 rounded-r-lg transition duration-300">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
 <p class="text-gray-500 text-sm mb-4 md:mb-0">
 &copy; 2023 CreativeWeb. All rights reserved.
 </p>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-500 hover:text-white transition duration-300">๊ฐœ์ธ์ •๋ณด ์ฒ˜๋ฆฌ๋ฐฉ์นจ</a>
 <a href="#" class="text-gray-500 hover:text-white transition duration-300">์ด์šฉ์•ฝ๊ด€</a>
 <a href="#" class="text-gray-500 hover:text-white transition duration-300">์ฟ ํ‚ค ์ •์ฑ…</a>
 </div>
 </div>
 </div>
 </footer>
<!-- ๋’ค๋กœ ๊ฐ€๊ธฐ ๋ฒ„ํŠผ -->
 <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center shadow-lg hover:bg-pink-600 transition duration-300 opacity-0 invisible">
 <i class="fas fa-arrow-up text-white"></i>
 </button>
<script>
 // ๋ชจ๋ฐ”์ผ ๋ฉ”๋‰ด ํ† ๊ธ€
 const mobileMenuButton = document.getElementById('mobile-menu-button');
 const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
 mobileMenu.classList.toggle('hidden');
 });
// ์Šคํฌ๋กค ์‹œ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ” ์Šคํƒ€์ผ ๋ณ€๊ฒฝ
 window.addEventListener('scroll', () => {
 const nav = document.querySelector('nav');
 if (window.scrollY > 50) {
 nav.classList.add('shadow-lg');
 nav.classList.remove('glass');
 nav.classList.add('bg-indigo-900');
 nav.classList.add('bg-opacity-90');
 } else {
 nav.classList.remove('shadow-lg');
 nav.classList.add('glass');
 nav.classList.remove('bg-indigo-900');
 nav.classList.remove('bg-opacity-90');
 }
// ๋’ค๋กœ ๊ฐ€๊ธฐ ๋ฒ„ํŠผ ํ‘œ์‹œ
 const backToTopButton = document.getElementById('back-to-top');
 if (window.scrollY > 300) {
 backToTopButton.classList.remove('opacity-0', 'invisible');
 backToTopButton.classList.add('opacity-100', 'visible');
 } else {
 backToTopButton.classList.remove('opacity-100', 'visible');
 backToTopButton.classList.add('opacity-0', 'invisible');
 }
 });
// ๋’ค๋กœ ๊ฐ€๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ ์ด๋ฒคํŠธ
 document.getElementById('back-to-top').addEventListener('click', () => {
 window.scrollTo({
 top: 0,
 behavior: 'smooth'
 });
 });
// ๋ถ€๋“œ๋Ÿฌ์šด ์Šคํฌ๋กค
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
 anchor.addEventListener('click', function (e) {
 e.preventDefault();
const targetId = this.getAttribute('href');
 if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
 if (targetElement) {
 window.scrollTo({
 top: targetElement.offsetTop - 80,
 behavior: 'smooth'
 });
// ๋ชจ๋ฐ”์ผ ๋ฉ”๋‰ด ๋‹ซ๊ธฐ
 mobileMenu.classList.add('hidden');
 }
 });
 });
// ํผ ์ œ์ถœ ๋ฐฉ์ง€ (๋ฐ๋ชจ์šฉ)
 document.querySelector('form').addEventListener('submit', (e) => {
 e.preventDefault();
 alert('๋ฐ๋ชจ ๋ฒ„์ „์—์„œ๋Š” ํผ ์ œ์ถœ์ด ๋น„ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!');
 });
 </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=kjaylee/pipln" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>