Hugging Face's logo

Spaces:
nkjoy
/
premium-matchmakers
Running

App Files Community
premium-matchmakers / about.html
nkjoy's picture
nkjoy
νšŒμ‚¬ μ†Œκ°œ νŽ˜μ΄μ§€ λ§Œλ“€μ–΄
295f9b5 verified
raw
history blame contribute delete
10.8 kB
<!DOCTYPE html>
<html lang="ko">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>νšŒμ‚¬μ†Œκ°œ - 남남뢁녀</title>
 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
 <link rel="stylesheet" href="style.css">
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
 <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body class="font-sans">
 <custom-navbar></custom-navbar>
<!-- Hero Section -->
 <section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-pink-50 to-purple-50">
 <div class="container mx-auto px-4 relative z-10 text-center">
 <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">남남뢁녀 μ†Œκ°œ</h1>
 <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">프리미엄 맀칭으둜 λ‹Ήμ‹ μ˜ 인연을 μ±…μž„μ§€λŠ” κ²°ν˜Όμ •λ³΄νšŒμ‚¬</p>
 </div>
 </section>
<!-- Company Story Section -->
 <section class="py-20 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="text-4xl font-bold text-gray-800 mb-4">λ‚¨λ‚¨λΆλ…€μ˜ μ‹œμž‘</h2>
 <div class="w-20 h-1 bg-pink-500 mx-auto"></div>
 </div>
 <div class="flex flex-col md:flex-row items-center gap-12">
 <div class="md:w-1/2">
 <img src="http://static.photos/people/640x360/456" alt="남남뢁녀 μ°½μ—… μŠ€ν† λ¦¬" class="rounded-xl shadow-xl">
 </div>
 <div class="md:w-1/2">
 <h3 class="text-3xl font-bold text-gray-800 mb-6">믿을 수 μžˆλŠ” μΈμ—°μ˜ 닀리</h3>
 <p class="text-gray-600 mb-6 text-lg leading-relaxed">
 λ‚¨λ‚¨λΆλ…€λŠ” ν˜„λŒ€ μ‚¬νšŒμ—μ„œ λ°”μ˜κ²Œ μ‚΄μ•„κ°€λŠ” λΆ„λ“€κ»˜ μ§„μ •ν•œ 인연을 μ°Ύμ•„λ“œλ¦¬κΈ° μœ„ν•΄ νƒ„μƒν–ˆμŠ΅λ‹ˆλ‹€.
 λ‹¨μˆœν•œ λ§Œλ‚¨μ΄ μ•„λ‹Œ, ν‰μƒμ˜ νŒŒνŠΈλ„ˆλ₯Ό μ°ΎλŠ” μ—¬μ •μ—μ„œ ν•¨κ»˜ν•˜λŠ” λ™λ°˜μžλ‘œμ„œμ˜ 역할을 ν•˜κ³ μž ν•©λ‹ˆλ‹€.
 </p>
 <p class="text-gray-600 mb-6 text-lg leading-relaxed">
 μ „λ¬Έ 상담사듀이 고객 ν•œ λΆ„ ν•œ λΆ„μ˜ 쑰건과 μ„±ν–₯을 깊이 있게 λΆ„μ„ν•˜μ—¬,
 λ‹¨μˆœν•œ ν”„λ‘œν•„ 맀칭이 μ•„λ‹Œ μ§„μ •ν•œ ꢁ합을 κ³ λ €ν•œ μ •λ°€ 맀칭을 μ œκ³΅ν•©λ‹ˆλ‹€.
 </p>
 </div>
 </div>
 </div>
 </section>
<!-- Mission & Vision Section -->
 <section class="py-20 bg-gray-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="text-4xl font-bold text-gray-800 mb-4">λ―Έμ…˜ & λΉ„μ „</h2>
 <div class="w-20 h-1 bg-pink-500 mx-auto"></div>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
 <div class="bg-white p-8 rounded-xl shadow-lg">
 <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6 mx-auto">
 <i data-feather="target" class="text-pink-500 w-8 h-8"></i>
 </div>
 <h3 class="text-2xl font-bold text-center text-gray-800 mb-4">λ―Έμ…˜</h3>
 <p class="text-gray-600 text-center text-lg">
 μ§„μ •ν•œ 인연을 μ°ΎλŠ” μ—¬μ •μ—μ„œ κ³ κ°λ‹˜κ³Ό ν•¨κ»˜ν•˜λ©°,<br>
 신뒰와 전문성을 λ°”νƒ•μœΌλ‘œ<br>
 ν–‰λ³΅ν•œ 결싀을 이루도둝 λ•μŠ΅λ‹ˆλ‹€.
 </p>
 </div>
 <div class="bg-white p-8 rounded-xl shadow-lg">
 <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
 <i data-feather="eye" class="text-purple-500 w-8 h-8"></i>
 </div>
 <h3 class="text-2xl font-bold text-center text-gray-800 mb-4">λΉ„μ „</h3>
 <p class="text-gray-600 text-center text-lg">
 λŒ€ν•œλ―Όκ΅­ 1λ“± 프리미엄 맀칭 λΈŒλžœλ“œλ‘œ,<br>
 고객 ν•œ λΆ„ ν•œ λΆ„μ—κ²Œ λ§žμΆ€ν˜• 행볡을<br>
 μ „λ‹¬ν•˜λŠ” νŒŒνŠΈλ„ˆκ°€ λ˜κ² μŠ΅λ‹ˆλ‹€.
 </p>
 </div>
 </div>
 </div>
 </section>
<!-- Values Section -->
 <section class="py-20 bg-white">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="text-4xl font-bold text-gray-800 mb-4">핡심 κ°€μΉ˜</h2>
 <p class="text-gray-600 max-w-2xl mx-auto text-lg">남남뢁녀가 지킀고 μ‹€μ²œν•˜λŠ” 약속</p>
 <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="text-center">
 <div class="w-20 h-20 bg-pink-100 rounded-full flex items-center justify-center mb-6 mx-auto">
 <i data-feather="shield" class="text-pink-500 w-10 h-10"></i>
 </div>
 <h3 class="text-2xl font-bold text-gray-800 mb-4">μ‹ λ’°</h3>
 <p class="text-gray-600">
 λͺ¨λ“  νšŒμ›μ— λŒ€ν•œ μ² μ €ν•œ 신원 검증과 자격 확인을 톡해<br>
 μ•ˆμ „ν•˜κ³  μ‹ λ’°ν•  수 μžˆλŠ” ν™˜κ²½μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
 </p>
 </div>
 <div class="text-center">
 <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
 <i data-feather="heart" class="text-blue-500 w-10 h-10"></i>
 </div>
 <h3 class="text-2xl font-bold text-gray-800 mb-4">μ „λ¬Έμ„±</h3>
 <p class="text-gray-600">
 μ „λ¬Έ μƒλ‹΄μ‚¬μ˜ 심측 상담과 뢄석을 톡해<br>
 κ³ κ°λ‹˜κ»˜ 졜적의 μƒλŒ€λ₯Ό μ •λ°€ν•˜κ²Œ λ§€μΉ­ν•΄λ“œλ¦½λ‹ˆλ‹€.
 </p>
 </div>
 <div class="text-center">
 <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
 <i data-feather="users" class="text-purple-500 w-10 h-10"></i>
 </div>
 <h3 class="text-2xl font-bold text-gray-800 mb-4">λ§žμΆ€ν˜• μ„œλΉ„μŠ€</h3>
 <p class="text-gray-600">
 고객 ν•œ λΆ„ ν•œ λΆ„μ˜ νŠΉμ„±κ³Ό μš”κ΅¬μ— 맞좘<br>
 κ°œμΈλ³„ λ§žμΆ€ν˜• μ»¨μ„€νŒ…κ³Ό 맀칭 μ„œλΉ„μŠ€λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.
 </p>
 </div>
 </div>
 </div>
 </section>
<!-- Team Section -->
 <section class="py-20 bg-gray-50">
 <div class="container mx-auto px-4">
 <div class="text-center mb-16">
 <h2 class="text-4xl font-bold text-gray-800 mb-4">μ „λ¬Έ 상담사 νŒ€</h2>
 <p class="text-gray-600 max-w-2xl mx-auto text-lg">κ³ κ°λ‹˜μ˜ 인연을 μ±…μž„μ§€λŠ” μ „λ¬Έκ°€λ“€</p>
 <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
 </div>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <img src="http://static.photos/people/320x240/789" alt="상담사" class="w-full h-64 object-cover">
 <div class="p-6 text-center">
 <h3 class="text-xl font-bold text-gray-800 mb-2">κΉ€μˆ˜μ§„ 상담사</h3>
 <p class="text-pink-500 mb-3">맀칭 μ „λ¬Έκ°€</p>
 <p class="text-gray-600">
 심리학 석사 μΆœμ‹ μœΌλ‘œ, 10λ…„ μ΄μƒμ˜ 상담 κ²½ν—˜μ„ λ°”νƒ•μœΌλ‘œ<br>
 κ³ κ°λ‹˜μ˜ 심리λ₯Ό μ •ν™•νžˆ λΆ„μ„ν•˜κ³  졜적의 μƒλŒ€λ₯Ό λ§€μΉ­ν•©λ‹ˆλ‹€.
 </p>
 </div>
 </div>
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <img src="http://static.photos/people/320x240/101" alt="상담사" class="w-full h-64 object-cover">
 <div class="p-6 text-center">
 <h3 class="text-xl font-bold text-gray-800 mb-2">μ΄ν˜„μš° 상담사</h3>
 <p class="text-pink-500 mb-3">이미지 μ»¨μ„€ν„΄νŠΈ</p>
 <p class="text-gray-600">
 νŒ¨μ…˜ 및 이미지 μ „λ¬Έκ°€λ‘œμ„œ, κ³ κ°λ‹˜μ˜ 외적 맀λ ₯을<br>
 κ·ΉλŒ€ν™”ν•˜λŠ” μ „λž΅μ  μ»¨μ„€νŒ…μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
 </p>
 </div>
 </div>
 <div class="bg-white rounded-xl shadow-lg overflow-hidden">
 <img src="http://static.photos/people/320x240/112" alt="상담사" class="w-full h-64 object-cover">
 <div class="p-6 text-center">
 <h3 class="text-xl font-bold text-gray-800 mb-2">λ°•μ§€μ˜ 상담사</h3>
 <p class="text-pink-500 mb-3">관계 μ „λ¬Έκ°€</p>
 <p class="text-gray-600">
 μ—°μ•  심리 μ „λ¬Έκ°€λ‘œ, κ³ κ°λ‹˜μ˜ 관계 λ°œμ „μ„ μœ„ν•œ<br>
 μ „λž΅μ  κ°€μ΄λ“œμ™€ μ»¨μ„€νŒ…μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
 </p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- CTA Section -->
 <section class="py-20 bg-gradient-to-r from-pink-500 to-purple-600 text-white">
 <div class="container mx-auto px-4 text-center">
 <h2 class="text-4xl font-bold mb-6">λ‹Ήμ‹ μ˜ 인연을 μ°Ύμ•„λ“œλ¦¬κ² μŠ΅λ‹ˆλ‹€</h2>
 <p class="text-xl mb-8 max-w-2xl mx-auto">μ „λ¬Έ 상담사와 ν•¨κ»˜ν•˜λŠ” 프리미엄 맀칭 μ„œλΉ„μŠ€λ₯Ό κ²½ν—˜ν•΄λ³΄μ„Έμš”</p>
 <a href="index.html#contact" class="bg-white text-pink-500 hover:bg-gray-100 font-bold py-4 px-12 rounded-full text-lg transition duration-300 inline-block">
 무료 상담 μ‹ μ²­ν•˜κΈ°
 </a>
 </div>
 </section>
<custom-footer></custom-footer>
 <script src="components/navbar.js"></script>
 <script src="components/footer.js"></script>
 <script src="script.js"></script>
 <script>feather.replace();</script>
</body>
</html>