Spaces:

nkjoy
/

premium-matchmakers

Running

App Files Files Community

premium-matchmakers / index.html

nkjoy

회사 소개 페이지 만들어

295f9b5 verified 6 months ago

raw

history blame contribute delete

16.5 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>
	<script src="https://unpkg.com/feather-icons"></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 id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
	<div class="absolute inset-0 z-0" id="vanta-bg"></div>
	<div class="container mx-auto px-4 relative z-10 text-center text-white">
	<h1 class="text-5xl md:text-7xl font-bold mb-6">남남북녀</h1>
	<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">프리미엄 매칭으로 당신의 인연을 책임지는 결혼정보회사</p>
	<div class="flex flex-col sm:flex-row gap-4 justify-center">
	<a href="#services" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">서비스 알아보기</a>
	<a href="#contact" class="bg-white hover:bg-gray-100 text-pink-500 font-bold py-3 px-8 rounded-full text-lg transition duration-300 transform hover:scale-105">상담 신청하기</a>
	</div>
	</div>
	</section>

	<!-- About Section -->
	<section id="about" 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/123" 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 class="flex items-center gap-4 mt-8">
	<div class="flex items-center">
	<i data-feather="check-circle" class="text-pink-500 mr-2"></i>
	<span class="text-gray-700">전문 상담사 1:1 매칭</span>
	</div>
	<div class="flex items-center">
	<i data-feather="check-circle" class="text-pink-500 mr-2"></i>
	<span class="text-gray-700">철저한 사전 검증</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Services Section -->
	<section id="services" 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 p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
	<div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
	<i data-feather="heart" class="text-pink-500 w-8 h-8"></i>
	</div>
	<h3 class="text-2xl font-bold text-gray-800 mb-4">정밀 매칭</h3>
	<p class="text-gray-600 mb-4">
	전문 상담사가 고객님의 조건과 성향을 분석하여 최적의 상대를 정밀하게 매칭해드립니다.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>1:1 전담 상담사 배정</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>심층 상담 및 분석</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>맞춤형 추천</span>
	</li>
	</ul>
	</div>
	<div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
	<div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
	<i data-feather="shield" class="text-pink-500 w-8 h-8"></i>
	</div>
	<h3 class="text-2xl font-bold text-gray-800 mb-4">철저한 검증</h3>
	<p class="text-gray-600 mb-4">
	모든 회원에 대한 신원확인과 자격검증을 통해 안전하고 신뢰할 수 있는 만남을 보장합니다.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>신분증 및 재직증명서 확인</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>SNS 및 소셜프로필 검증</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>면접식 상세 상담</span>
	</li>
	</ul>
	</div>
	<div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
	<div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
	<i data-feather="users" class="text-pink-500 w-8 h-8"></i>
	</div>
	<h3 class="text-2xl font-bold text-gray-800 mb-4">맞춤형 컨설팅</h3>
	<p class="text-gray-600 mb-4">
	개인별 특성과 목표에 맞춘 전략적인 컨설팅으로 성공적인 만남을 이끕니다.
	</p>
	<ul class="text-gray-600 space-y-2">
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>이미지 및 스타일 컨설팅</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>대화법 및 만남 전략</span>
	</li>
	<li class="flex items-start">
	<i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
	<span>관계 발전 전략</span>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials Section -->
	<section id="testimonials" 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-2 lg:grid-cols-3 gap-8">
	<div class="bg-gray-50 p-8 rounded-xl">
	<div class="flex items-center mb-6">
	<div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">김</div>
	<div>
	<h4 class="font-bold text-gray-800">김OO님 (30대)</h4>
	<p class="text-gray-600">회계사</p>
	</div>
	</div>
	<p class="text-gray-600 italic">
	"처음엔 망설였지만 전문 상담사의 꼼꼼한 분석과 철저한 관리 덕분에
	마음에 드는 분을 만날 수 있었습니다. 지금은 결혼 준비 중이에요!"
	</p>
	<div class="flex mt-4 text-yellow-400">
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	</div>
	</div>
	<div class="bg-gray-50 p-8 rounded-xl">
	<div class="flex items-center mb-6">
	<div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">이</div>
	<div>
	<h4 class="font-bold text-gray-800">이OO님 (30대)</h4>
	<p class="text-gray-600">마케팅 기획자</p>
	</div>
	</div>
	<p class="text-gray-600 italic">
	"다른 매칭업체에서 여러 번 실망한 후 남남북녀를 알게 되었어요.
	정말 다른 차원의 서비스였고, 덕분에 좋은 인연을 만나 결혼할 수 있었어요."
	</p>
	<div class="flex mt-4 text-yellow-400">
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	</div>
	</div>
	<div class="bg-gray-50 p-8 rounded-xl">
	<div class="flex items-center mb-6">
	<div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">박</div>
	<div>
	<h4 class="font-bold text-gray-800">박OO님 (40대)</h4>
	<p class="text-gray-600">IT 회사 대표</p>
	</div>
	</div>
	<p class="text-gray-600 italic">
	"바쁜 직장 생활로 인연을 찾기 어려웠는데,
	남남북녀의 프리미엄 서비스 덕분에 이상형과 만날 수 있었습니다.
	정말 감사합니다!"
	</p>
	<div class="flex mt-4 text-yellow-400">
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	<i data-feather="star"></i>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Contact Section -->
	<section id="contact" class="py-20 bg-pink-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="max-w-4xl mx-auto bg-white rounded-xl shadow-xl p-8">
	<form id="consultation-form" class="space-y-6">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label class="block text-gray-700 font-medium mb-2" for="name">이름</label>
	<input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" required>
	</div>
	<div>
	<label class="block text-gray-700 font-medium mb-2" for="age">나이</label>
	<input type="number" id="age" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" required>
	</div>
	</div>
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<div>
	<label class="block text-gray-700 font-medium mb-2" for="phone">연락처</label>
	<input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" required>
	</div>
	<div>
	<label class="block text-gray-700 font-medium mb-2" for="email">이메일</label>
	<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" required>
	</div>
	</div>
	<div>
	<label class="block text-gray-700 font-medium mb-2" for="message">상담 내용</label>
	<textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="궁금한 점이나 원하시는 상담 내용을 입력해주세요"></textarea>
	</div>
	<div class="text-center">
	<button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-4 px-12 rounded-full text-lg transition duration-300 transform hover:scale-105">
	무료 상담 신청하기
	</button>
	</div>
	</form>
	</div>
	</div>
	</section>

	<custom-footer></custom-footer>
	<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script src="script.js"></script>
	<script>feather.replace();</script>
	<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
	</body>
	</html>