Hugging Face's logo

Spaces:
nkjoy
/
premium-matchmakers
Running

App Files Community
nkjoy commited on
Commit
295f9b5
·
verified ·
1 Parent(s): 63ebd54

회사 소개 페이지 만들어

Browse files
Files changed (7) hide show
  1. README.md +9 -5
  2. about.html +190 -0
  3. components/footer.js +273 -0
  4. components/navbar.js +123 -0
  5. index.html +274 -19
  6. script.js +96 -0
  7. style.css +52 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Premium Matchmakers
3
- emoji: 😻
4
- colorFrom: pink
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: Premium Matchmakers 💕
3
+ colorFrom: purple
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
about.html ADDED
@@ -0,0 +1,190 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>회사소개 - 남남북녀</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
12
+ </head>
13
+ <body class="font-sans">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- Hero Section -->
17
+ <section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-pink-50 to-purple-50">
18
+ <div class="container mx-auto px-4 relative z-10 text-center">
19
+ <h1 class="text-4xl md:text-6xl font-bold text-gray-800 mb-6">남남북녀 소개</h1>
20
+ <p class="text-xl md:text-2xl text-gray-600 mb-8 max-w-3xl mx-auto">프리미엄 매칭으로 당신의 인연을 책임지는 결혼정보회사</p>
21
+ </div>
22
+ </section>
23
+
24
+ <!-- Company Story Section -->
25
+ <section class="py-20 bg-white">
26
+ <div class="container mx-auto px-4">
27
+ <div class="text-center mb-16">
28
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">남남북녀의 시작</h2>
29
+ <div class="w-20 h-1 bg-pink-500 mx-auto"></div>
30
+ </div>
31
+ <div class="flex flex-col md:flex-row items-center gap-12">
32
+ <div class="md:w-1/2">
33
+ <img src="http://static.photos/people/640x360/456" alt="남남북녀 창업 스토리" class="rounded-xl shadow-xl">
34
+ </div>
35
+ <div class="md:w-1/2">
36
+ <h3 class="text-3xl font-bold text-gray-800 mb-6">믿을 수 있는 인연의 다리</h3>
37
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">
38
+ 남남북녀는 현대 사회에서 바쁘게 살아가는 분들께 진정한 인연을 찾아드리기 위해 탄생했습니다.
39
+ 단순한 만남이 아닌, 평생의 파트너를 찾는 여정에서 함께하는 동반자로서의 역할을 하고자 합니다.
40
+ </p>
41
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">
42
+ 전문 상담사들이 고객 한 분 한 분의 조건과 성향을 깊이 있게 분석하여,
43
+ 단순한 프로필 매칭이 아닌 진정한 궁합을 고려한 정밀 매칭을 제공합니다.
44
+ </p>
45
+ </div>
46
+ </div>
47
+ </div>
48
+ </section>
49
+
50
+ <!-- Mission & Vision Section -->
51
+ <section class="py-20 bg-gray-50">
52
+ <div class="container mx-auto px-4">
53
+ <div class="text-center mb-16">
54
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">미션 & 비전</h2>
55
+ <div class="w-20 h-1 bg-pink-500 mx-auto"></div>
56
+ </div>
57
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
58
+ <div class="bg-white p-8 rounded-xl shadow-lg">
59
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6 mx-auto">
60
+ <i data-feather="target" class="text-pink-500 w-8 h-8"></i>
61
+ </div>
62
+ <h3 class="text-2xl font-bold text-center text-gray-800 mb-4">미션</h3>
63
+ <p class="text-gray-600 text-center text-lg">
64
+ 진정한 인연을 찾는 여정에서 고객님과 함께하며,<br>
65
+ 신뢰와 전문성을 바탕으로<br>
66
+ 행복한 결실을 이루도록 돕습니다.
67
+ </p>
68
+ </div>
69
+ <div class="bg-white p-8 rounded-xl shadow-lg">
70
+ <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
71
+ <i data-feather="eye" class="text-purple-500 w-8 h-8"></i>
72
+ </div>
73
+ <h3 class="text-2xl font-bold text-center text-gray-800 mb-4">비전</h3>
74
+ <p class="text-gray-600 text-center text-lg">
75
+ 대한민국 1등 프리미엄 매칭 브랜드로,<br>
76
+ 고객 한 분 한 분에게 맞춤형 행복을<br>
77
+ 전달하는 파트너가 되겠습니다.
78
+ </p>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Values Section -->
85
+ <section class="py-20 bg-white">
86
+ <div class="container mx-auto px-4">
87
+ <div class="text-center mb-16">
88
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">핵심 가치</h2>
89
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">남남북녀가 지키고 실천하는 약속</p>
90
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
91
+ </div>
92
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
93
+ <div class="text-center">
94
+ <div class="w-20 h-20 bg-pink-100 rounded-full flex items-center justify-center mb-6 mx-auto">
95
+ <i data-feather="shield" class="text-pink-500 w-10 h-10"></i>
96
+ </div>
97
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">신뢰</h3>
98
+ <p class="text-gray-600">
99
+ 모든 회원에 대한 철저한 신원 검증과 자격 확인을 통해<br>
100
+ 안전하고 신뢰할 수 있는 환경을 제공합니다.
101
+ </p>
102
+ </div>
103
+ <div class="text-center">
104
+ <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-6 mx-auto">
105
+ <i data-feather="heart" class="text-blue-500 w-10 h-10"></i>
106
+ </div>
107
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">전문성</h3>
108
+ <p class="text-gray-600">
109
+ 전문 상담사의 심층 상담과 분석을 통해<br>
110
+ 고객님께 최적의 상대를 정밀하게 매칭해드립니다.
111
+ </p>
112
+ </div>
113
+ <div class="text-center">
114
+ <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center mb-6 mx-auto">
115
+ <i data-feather="users" class="text-purple-500 w-10 h-10"></i>
116
+ </div>
117
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">맞춤형 서비스</h3>
118
+ <p class="text-gray-600">
119
+ 고객 한 분 한 분의 특성과 요구에 맞춘<br>
120
+ 개인별 맞춤형 컨설팅과 매칭 서비스를 제공합니다.
121
+ </p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Team Section -->
128
+ <section class="py-20 bg-gray-50">
129
+ <div class="container mx-auto px-4">
130
+ <div class="text-center mb-16">
131
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">전문 상담사 팀</h2>
132
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">고객님의 인연을 책임지는 전문가들</p>
133
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
134
+ </div>
135
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
136
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
137
+ <img src="http://static.photos/people/320x240/789" alt="상담사" class="w-full h-64 object-cover">
138
+ <div class="p-6 text-center">
139
+ <h3 class="text-xl font-bold text-gray-800 mb-2">김수진 상담사</h3>
140
+ <p class="text-pink-500 mb-3">매칭 전문가</p>
141
+ <p class="text-gray-600">
142
+ 심리학 석사 출신으로, 10년 이상의 상담 경험을 바탕으로<br>
143
+ 고객님의 심리를 정확히 분석하고 최적의 상대를 매칭합니다.
144
+ </p>
145
+ </div>
146
+ </div>
147
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
148
+ <img src="http://static.photos/people/320x240/101" alt="상담사" class="w-full h-64 object-cover">
149
+ <div class="p-6 text-center">
150
+ <h3 class="text-xl font-bold text-gray-800 mb-2">이현우 상담사</h3>
151
+ <p class="text-pink-500 mb-3">이미지 컨설턴트</p>
152
+ <p class="text-gray-600">
153
+ 패션 및 이미지 전문가로서, 고객님의 외적 매력을<br>
154
+ 극대화하는 전략적 컨설팅을 제공합니다.
155
+ </p>
156
+ </div>
157
+ </div>
158
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden">
159
+ <img src="http://static.photos/people/320x240/112" alt="상담사" class="w-full h-64 object-cover">
160
+ <div class="p-6 text-center">
161
+ <h3 class="text-xl font-bold text-gray-800 mb-2">박지영 상담사</h3>
162
+ <p class="text-pink-500 mb-3">관계 전문가</p>
163
+ <p class="text-gray-600">
164
+ 연애 심리 전문가로, 고객님의 관계 발전을 위한<br>
165
+ 전략적 가이드와 컨설팅을 제공합니다.
166
+ </p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- CTA Section -->
174
+ <section class="py-20 bg-gradient-to-r from-pink-500 to-purple-600 text-white">
175
+ <div class="container mx-auto px-4 text-center">
176
+ <h2 class="text-4xl font-bold mb-6">당신의 인연을 찾아드리겠습니다</h2>
177
+ <p class="text-xl mb-8 max-w-2xl mx-auto">전문 상담사와 함께하는 프리미엄 매칭 서비스를 경험해보세요</p>
178
+ <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">
179
+ 무료 상담 신청하기
180
+ </a>
181
+ </div>
182
+ </section>
183
+
184
+ <custom-footer></custom-footer>
185
+ <script src="components/navbar.js"></script>
186
+ <script src="components/footer.js"></script>
187
+ <script src="script.js"></script>
188
+ <script>feather.replace();</script>
189
+ </body>
190
+ </html>
components/footer.js ADDED
@@ -0,0 +1,273 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>남남북녀 - 프리미엄 매칭 서비스</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
13
+ </head>
14
+ <body class="font-sans">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <!-- Hero Section -->
18
+ <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
19
+ <div class="absolute inset-0 z-0" id="vanta-bg"></div>
20
+ <div class="container mx-auto px-4 relative z-10 text-center text-white">
21
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">남남북녀</h1>
22
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">프리미엄 매칭으로 당신의 인연을 책임지는 결혼정보회사</p>
23
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
24
+ <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>
25
+ <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>
26
+ </div>
27
+ </div>
28
+ </section>
29
+
30
+ <!-- About Section -->
31
+ <section id="about" class="py-20 bg-white">
32
+ <div class="container mx-auto px-4">
33
+ <div class="text-center mb-16">
34
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">남남북녀란?</h2>
35
+ <div class="w-20 h-1 bg-pink-500 mx-auto"></div>
36
+ </div>
37
+ <div class="flex flex-col md:flex-row items-center gap-12">
38
+ <div class="md:w-1/2">
39
+ <img src="http://static.photos/people/640x360/123" alt="남남북녀 소개" class="rounded-xl shadow-xl">
40
+ </div>
41
+ <div class="md:w-1/2">
42
+ <h3 class="text-3xl font-bold text-gray-800 mb-6">프리미엄 매칭 서비스</h3>
43
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">
44
+ 남남북녀는 전문 상담사가 직접 만나뵙고 고객님의 조건과 성향을 분석하여
45
+ 가장 적합한 상대를 정밀하게 매칭해드리는 프리미엄 결혼정보 서비스입니다.
46
+ </p>
47
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">
48
+ 단순한 만남이 아닌, 진정한 인연을 찾아드리기 위해
49
+ 철저한 사전 검증과 맞춤형 컨설팅을 제공합니다.
50
+ </p>
51
+ <div class="flex items-center gap-4 mt-8">
52
+ <div class="flex items-center">
53
+ <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
54
+ <span class="text-gray-700">전문 상담사 1:1 매칭</span>
55
+ </div>
56
+ <div class="flex items-center">
57
+ <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
58
+ <span class="text-gray-700">철저한 사전 검증</span>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </section>
65
+
66
+ <!-- Services Section -->
67
+ <section id="services" class="py-20 bg-gray-50">
68
+ <div class="container mx-auto px-4">
69
+ <div class="text-center mb-16">
70
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">서비스 소개</h2>
71
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">프리미엄 매칭을 위한 다양한 서비스를 제공합니다</p>
72
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
73
+ </div>
74
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
75
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
76
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
77
+ <i data-feather="heart" class="text-pink-500 w-8 h-8"></i>
78
+ </div>
79
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">정밀 매칭</h3>
80
+ <p class="text-gray-600 mb-4">
81
+ 전문 상담사가 고객님의 조건과 성향을 분석하여 최적의 상대를 정밀하게 매칭해드립니다.
82
+ </p>
83
+ <ul class="text-gray-600 space-y-2">
84
+ <li class="flex items-start">
85
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
86
+ <span>1:1 전담 상담사 배정</span>
87
+ </li>
88
+ <li class="flex items-start">
89
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
90
+ <span>심층 상담 및 분석</span>
91
+ </li>
92
+ <li class="flex items-start">
93
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
94
+ <span>맞춤형 추천</span>
95
+ </li>
96
+ </ul>
97
+ </div>
98
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
99
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
100
+ <i data-feather="shield" class="text-pink-500 w-8 h-8"></i>
101
+ </div>
102
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">철저한 검증</h3>
103
+ <p class="text-gray-600 mb-4">
104
+ 모든 회원에 대한 신원확인과 자격검증을 통해 안전하고 신뢰할 수 있는 만남을 보장합니다.
105
+ </p>
106
+ <ul class="text-gray-600 space-y-2">
107
+ <li class="flex items-start">
108
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
109
+ <span>신분증 및 재직증명서 확인</span>
110
+ </li>
111
+ <li class="flex items-start">
112
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
113
+ <span>SNS 및 소셜프로필 검증</span>
114
+ </li>
115
+ <li class="flex items-start">
116
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
117
+ <span>면접식 상세 상담</span>
118
+ </li>
119
+ </ul>
120
+ </div>
121
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
122
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
123
+ <i data-feather="users" class="text-pink-500 w-8 h-8"></i>
124
+ </div>
125
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">맞춤형 컨설팅</h3>
126
+ <p class="text-gray-600 mb-4">
127
+ 개인별 특성과 목표에 맞춘 전략적인 컨설팅으로 성공적인 만남을 이끕니다.
128
+ </p>
129
+ <ul class="text-gray-600 space-y-2">
130
+ <li class="flex items-start">
131
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
132
+ <span>이미지 및 스타일 컨설팅</span>
133
+ </li>
134
+ <li class="flex items-start">
135
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
136
+ <span>대화법 및 만남 전략</span>
137
+ </li>
138
+ <li class="flex items-start">
139
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
140
+ <span>관계 발전 전략</span>
141
+ </li>
142
+ </ul>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Testimonials Section -->
149
+ <section id="testimonials" class="py-20 bg-white">
150
+ <div class="container mx-auto px-4">
151
+ <div class="text-center mb-16">
152
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">성공 스토리</h2>
153
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">남남북녀를 통해 인연을 찾은 고객님들의 이야기</p>
154
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
155
+ </div>
156
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
157
+ <div class="bg-gray-50 p-8 rounded-xl">
158
+ <div class="flex items-center mb-6">
159
+ <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">김</div>
160
+ <div>
161
+ <h4 class="font-bold text-gray-800">김OO님 (30대)</h4>
162
+ <p class="text-gray-600">회계사</p>
163
+ </div>
164
+ </div>
165
+ <p class="text-gray-600 italic">
166
+ "처음엔 망설였지만 전문 상담사의 꼼꼼한 분석과 철저한 관리 덕분에
167
+ 마음에 드는 분을 만날 수 있었습니다. 지금은 결혼 준비 중이에요!"
168
+ </p>
169
+ <div class="flex mt-4 text-yellow-400">
170
+ <i data-feather="star"></i>
171
+ <i data-feather="star"></i>
172
+ <i data-feather="star"></i>
173
+ <i data-feather="star"></i>
174
+ <i data-feather="star"></i>
175
+ </div>
176
+ </div>
177
+ <div class="bg-gray-50 p-8 rounded-xl">
178
+ <div class="flex items-center mb-6">
179
+ <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">이</div>
180
+ <div>
181
+ <h4 class="font-bold text-gray-800">이OO님 (30대)</h4>
182
+ <p class="text-gray-600">마케팅 기획자</p>
183
+ </div>
184
+ </div>
185
+ <p class="text-gray-600 italic">
186
+ "다른 매칭업체에서 여러 번 실망한 후 남남북녀를 알게 되었어요.
187
+ 정말 다른 차원의 서비스였고, 덕분에 좋은 인연을 만나 결혼할 수 있었어요."
188
+ </p>
189
+ <div class="flex mt-4 text-yellow-400">
190
+ <i data-feather="star"></i>
191
+ <i data-feather="star"></i>
192
+ <i data-feather="star"></i>
193
+ <i data-feather="star"></i>
194
+ <i data-feather="star"></i>
195
+ </div>
196
+ </div>
197
+ <div class="bg-gray-50 p-8 rounded-xl">
198
+ <div class="flex items-center mb-6">
199
+ <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">박</div>
200
+ <div>
201
+ <h4 class="font-bold text-gray-800">박OO님 (40대)</h4>
202
+ <p class="text-gray-600">IT 회사 대표</p>
203
+ </div>
204
+ </div>
205
+ <p class="text-gray-600 italic">
206
+ "바쁜 직장 생활로 인연을 찾기 어려웠는데,
207
+ 남남북녀의 프리미엄 서비스 덕분에 이상형과 만날 수 있었습니다.
208
+ 정말 감사합니다!"
209
+ </p>
210
+ <div class="flex mt-4 text-yellow-400">
211
+ <i data-feather="star"></i>
212
+ <i data-feather="star"></i>
213
+ <i data-feather="star"></i>
214
+ <i data-feather="star"></i>
215
+ <i data-feather="star"></i>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- Contact Section -->
223
+ <section id="contact" class="py-20 bg-pink-50">
224
+ <div class="container mx-auto px-4">
225
+ <div class="text-center mb-16">
226
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">상담 신청</h2>
227
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">전문 상담사를 통해 무료 상담을 받아보세요</p>
228
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
229
+ </div>
230
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl p-8">
231
+ <form id="consultation-form" class="space-y-6">
232
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
233
+ <div>
234
+ <label class="block text-gray-700 font-medium mb-2" for="name">이름</label>
235
+ <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>
236
+ </div>
237
+ <div>
238
+ <label class="block text-gray-700 font-medium mb-2" for="age">나이</label>
239
+ <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>
240
+ </div>
241
+ </div>
242
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
243
+ <div>
244
+ <label class="block text-gray-700 font-medium mb-2" for="phone">연락처</label>
245
+ <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>
246
+ </div>
247
+ <div>
248
+ <label class="block text-gray-700 font-medium mb-2" for="email">이메일</label>
249
+ <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>
250
+ </div>
251
+ </div>
252
+ <div>
253
+ <label class="block text-gray-700 font-medium mb-2" for="message">상담 내용</label>
254
+ <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>
255
+ </div>
256
+ <div class="text-center">
257
+ <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">
258
+ 무료 상담 신청하기
259
+ </button>
260
+ </div>
261
+ </form>
262
+ </div>
263
+ </div>
264
+ </section>
265
+
266
+ <custom-footer></custom-footer>
267
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
268
+ <script src="components/navbar.js"></script>
269
+ <script src="components/footer.js"></script>
270
+ <script src="script.js"></script>
271
+ <script>feather.replace();</script>
272
+ </body>
273
+ </html>
components/navbar.js ADDED
@@ -0,0 +1,123 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: rgba(255, 255, 255, 0.95);
8
+ backdrop-filter: blur(10px);
9
+ padding: 1rem 2rem;
10
+ display: flex;
11
+ justify-content: space-between;
12
+ align-items: center;
13
+ position: fixed;
14
+ top: 0;
15
+ left: 0;
16
+ right: 0;
17
+ z-index: 1000;
18
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
19
+ }
20
+ .logo {
21
+ color: #ec4899;
22
+ font-weight: 700;
23
+ font-size: 1.75rem;
24
+ text-decoration: none;
25
+ display: flex;
26
+ align-items: center;
27
+ }
28
+ .logo i {
29
+ margin-right: 8px;
30
+ color: #ec4899;
31
+ }
32
+ ul {
33
+ display: flex;
34
+ gap: 2rem;
35
+ list-style: none;
36
+ margin: 0;
37
+ padding: 0;
38
+ }
39
+ a {
40
+ color: #4b5563;
41
+ text-decoration: none;
42
+ font-weight: 500;
43
+ transition: all 0.3s ease;
44
+ position: relative;
45
+ }
46
+ a:hover {
47
+ color: #ec4899;
48
+ }
49
+ a::after {
50
+ content: '';
51
+ position: absolute;
52
+ bottom: -5px;
53
+ left: 0;
54
+ width: 0;
55
+ height: 2px;
56
+ background-color: #ec4899;
57
+ transition: width 0.3s ease;
58
+ }
59
+ a:hover::after {
60
+ width: 100%;
61
+ }
62
+ .mobile-menu-btn {
63
+ display: none;
64
+ background: none;
65
+ border: none;
66
+ font-size: 1.5rem;
67
+ cursor: pointer;
68
+ color: #4b5563;
69
+ }
70
+ @media (max-width: 768px) {
71
+ ul {
72
+ display: none;
73
+ position: absolute;
74
+ top: 100%;
75
+ left: 0;
76
+ right: 0;
77
+ background: white;
78
+ flex-direction: column;
79
+ padding: 1rem;
80
+ gap: 1rem;
81
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
82
+ }
83
+ ul.active {
84
+ display: flex;
85
+ }
86
+ .mobile-menu-btn {
87
+ display: block;
88
+ }
89
+ }
90
+ </style>
91
+ <nav>
92
+ <a href="/" class="logo">
93
+ <i data-feather="heart"></i>
94
+ 남남북녀
95
+ </a>
96
+ <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
97
+ <ul id="menu">
98
+ <li><a href="/">홈</a></li>
99
+ <li><a href="#about">회사소개</a></li>
100
+ <li><a href="#services">서비스</a></li>
101
+ <li><a href="#testimonials">성공스토리</a></li>
102
+ <li><a href="#contact">상담신청</a></li>
103
+ </ul>
104
+ </nav>
105
+ `;
106
+
107
+ // Mobile menu toggle
108
+ const mobileMenuBtn = this.shadowRoot.getElementById('mobileMenuBtn');
109
+ const menu = this.shadowRoot.getElementById('menu');
110
+
111
+ mobileMenuBtn.addEventListener('click', () => {
112
+ menu.classList.toggle('active');
113
+ });
114
+
115
+ // Close menu when clicking on a link
116
+ this.shadowRoot.querySelectorAll('a').forEach(link => {
117
+ link.addEventListener('click', () => {
118
+ menu.classList.remove('active');
119
+ });
120
+ });
121
+ }
122
+ }
123
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,274 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>남남북녀 - 프리미엄 매칭 서비스</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
13
+ </head>
14
+ <body class="font-sans">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <!-- Hero Section -->
18
+ <section id="hero" class="relative min-h-screen flex items-center justify-center overflow-hidden">
19
+ <div class="absolute inset-0 z-0" id="vanta-bg"></div>
20
+ <div class="container mx-auto px-4 relative z-10 text-center text-white">
21
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">남남북녀</h1>
22
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">프리미엄 매칭으로 당신의 인연을 책임지는 결혼정보회사</p>
23
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
24
+ <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>
25
+ <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>
26
+ </div>
27
+ </div>
28
+ </section>
29
+
30
+ <!-- About Section -->
31
+ <section id="about" class="py-20 bg-white">
32
+ <div class="container mx-auto px-4">
33
+ <div class="text-center mb-16">
34
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">남남북녀란?</h2>
35
+ <div class="w-20 h-1 bg-pink-500 mx-auto"></div>
36
+ </div>
37
+ <div class="flex flex-col md:flex-row items-center gap-12">
38
+ <div class="md:w-1/2">
39
+ <img src="http://static.photos/people/640x360/123" alt="남남북녀 소개" class="rounded-xl shadow-xl">
40
+ </div>
41
+ <div class="md:w-1/2">
42
+ <h3 class="text-3xl font-bold text-gray-800 mb-6">프리미엄 매칭 서비스</h3>
43
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">
44
+ 남남북녀는 전문 상담사가 직접 만나뵙고 고객님의 조건과 성향을 분석하여
45
+ 가장 적합한 상대를 정밀하게 매칭해드리는 프리미엄 결혼정보 서비스입니다.
46
+ </p>
47
+ <p class="text-gray-600 mb-6 text-lg leading-relaxed">
48
+ 단순한 만남이 아닌, 진정한 인연을 찾아드리기 위해
49
+ 철저한 사전 검증과 맞춤형 컨설팅을 제공합니다.
50
+ </p>
51
+ <div class="flex items-center gap-4 mt-8">
52
+ <div class="flex items-center">
53
+ <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
54
+ <span class="text-gray-700">전문 상담사 1:1 매칭</span>
55
+ </div>
56
+ <div class="flex items-center">
57
+ <i data-feather="check-circle" class="text-pink-500 mr-2"></i>
58
+ <span class="text-gray-700">철저한 사전 검증</span>
59
+ </div>
60
+ </div>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </section>
65
+
66
+ <!-- Services Section -->
67
+ <section id="services" class="py-20 bg-gray-50">
68
+ <div class="container mx-auto px-4">
69
+ <div class="text-center mb-16">
70
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">서비스 소개</h2>
71
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">프리미엄 매칭을 위한 다양한 서비스를 제공합니다</p>
72
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
73
+ </div>
74
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
75
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
76
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
77
+ <i data-feather="heart" class="text-pink-500 w-8 h-8"></i>
78
+ </div>
79
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">정밀 매칭</h3>
80
+ <p class="text-gray-600 mb-4">
81
+ 전문 상담사가 고객님의 조건과 성향을 분석하여 최적의 상대를 정밀하게 매칭해드립니다.
82
+ </p>
83
+ <ul class="text-gray-600 space-y-2">
84
+ <li class="flex items-start">
85
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
86
+ <span>1:1 전담 상담사 배정</span>
87
+ </li>
88
+ <li class="flex items-start">
89
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
90
+ <span>심층 상담 및 분석</span>
91
+ </li>
92
+ <li class="flex items-start">
93
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
94
+ <span>맞춤형 추천</span>
95
+ </li>
96
+ </ul>
97
+ </div>
98
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
99
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
100
+ <i data-feather="shield" class="text-pink-500 w-8 h-8"></i>
101
+ </div>
102
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">철저한 검증</h3>
103
+ <p class="text-gray-600 mb-4">
104
+ 모든 회원에 대한 신원확인과 자격검증을 통해 안전하고 신뢰할 수 있는 만남을 보장합니다.
105
+ </p>
106
+ <ul class="text-gray-600 space-y-2">
107
+ <li class="flex items-start">
108
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
109
+ <span>신분증 및 재직증명서 확인</span>
110
+ </li>
111
+ <li class="flex items-start">
112
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
113
+ <span>SNS 및 소셜프로필 검증</span>
114
+ </li>
115
+ <li class="flex items-start">
116
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
117
+ <span>면접식 상세 상담</span>
118
+ </li>
119
+ </ul>
120
+ </div>
121
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
122
+ <div class="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-6">
123
+ <i data-feather="users" class="text-pink-500 w-8 h-8"></i>
124
+ </div>
125
+ <h3 class="text-2xl font-bold text-gray-800 mb-4">맞춤형 컨설팅</h3>
126
+ <p class="text-gray-600 mb-4">
127
+ 개인별 특성과 목표에 맞춘 전략적인 컨설팅으로 성공적인 만남을 이끕니다.
128
+ </p>
129
+ <ul class="text-gray-600 space-y-2">
130
+ <li class="flex items-start">
131
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
132
+ <span>이미지 및 스타일 컨설팅</span>
133
+ </li>
134
+ <li class="flex items-start">
135
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
136
+ <span>대화법 및 만남 전략</span>
137
+ </li>
138
+ <li class="flex items-start">
139
+ <i data-feather="check" class="text-pink-500 mr-2 mt-1 w-4 h-4"></i>
140
+ <span>관계 발전 전략</span>
141
+ </li>
142
+ </ul>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Testimonials Section -->
149
+ <section id="testimonials" class="py-20 bg-white">
150
+ <div class="container mx-auto px-4">
151
+ <div class="text-center mb-16">
152
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">성공 스토리</h2>
153
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">남남북녀를 통해 인연을 찾은 고객님들의 이야기</p>
154
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
155
+ </div>
156
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
157
+ <div class="bg-gray-50 p-8 rounded-xl">
158
+ <div class="flex items-center mb-6">
159
+ <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">김</div>
160
+ <div>
161
+ <h4 class="font-bold text-gray-800">김OO님 (30대)</h4>
162
+ <p class="text-gray-600">회계사</p>
163
+ </div>
164
+ </div>
165
+ <p class="text-gray-600 italic">
166
+ "처음엔 망설였지만 전문 상담사의 꼼꼼한 분석과 철저한 관리 덕분에
167
+ 마음에 드는 분을 만날 수 있었습니다. 지금은 결혼 준비 중이에요!"
168
+ </p>
169
+ <div class="flex mt-4 text-yellow-400">
170
+ <i data-feather="star"></i>
171
+ <i data-feather="star"></i>
172
+ <i data-feather="star"></i>
173
+ <i data-feather="star"></i>
174
+ <i data-feather="star"></i>
175
+ </div>
176
+ </div>
177
+ <div class="bg-gray-50 p-8 rounded-xl">
178
+ <div class="flex items-center mb-6">
179
+ <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">이</div>
180
+ <div>
181
+ <h4 class="font-bold text-gray-800">이OO님 (30대)</h4>
182
+ <p class="text-gray-600">마케팅 기획자</p>
183
+ </div>
184
+ </div>
185
+ <p class="text-gray-600 italic">
186
+ "다른 매칭업체에서 여러 번 실망한 후 남남북녀를 알게 되었어요.
187
+ 정말 다른 차원의 서비스였고, 덕분에 좋은 인연을 만나 결혼할 수 있었어요."
188
+ </p>
189
+ <div class="flex mt-4 text-yellow-400">
190
+ <i data-feather="star"></i>
191
+ <i data-feather="star"></i>
192
+ <i data-feather="star"></i>
193
+ <i data-feather="star"></i>
194
+ <i data-feather="star"></i>
195
+ </div>
196
+ </div>
197
+ <div class="bg-gray-50 p-8 rounded-xl">
198
+ <div class="flex items-center mb-6">
199
+ <div class="w-12 h-12 bg-pink-500 rounded-full flex items-center justify-center text-white font-bold mr-4">박</div>
200
+ <div>
201
+ <h4 class="font-bold text-gray-800">박OO님 (40대)</h4>
202
+ <p class="text-gray-600">IT 회사 대표</p>
203
+ </div>
204
+ </div>
205
+ <p class="text-gray-600 italic">
206
+ "바쁜 직장 생활로 인연을 찾기 어려웠는데,
207
+ 남남북녀의 프리미엄 서비스 덕분에 이상형과 만날 수 있었습니다.
208
+ 정말 감사합니다!"
209
+ </p>
210
+ <div class="flex mt-4 text-yellow-400">
211
+ <i data-feather="star"></i>
212
+ <i data-feather="star"></i>
213
+ <i data-feather="star"></i>
214
+ <i data-feather="star"></i>
215
+ <i data-feather="star"></i>
216
+ </div>
217
+ </div>
218
+ </div>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- Contact Section -->
223
+ <section id="contact" class="py-20 bg-pink-50">
224
+ <div class="container mx-auto px-4">
225
+ <div class="text-center mb-16">
226
+ <h2 class="text-4xl font-bold text-gray-800 mb-4">상담 신청</h2>
227
+ <p class="text-gray-600 max-w-2xl mx-auto text-lg">전문 상담사를 통해 무료 상담을 받아보세요</p>
228
+ <div class="w-20 h-1 bg-pink-500 mx-auto mt-4"></div>
229
+ </div>
230
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl p-8">
231
+ <form id="consultation-form" class="space-y-6">
232
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
233
+ <div>
234
+ <label class="block text-gray-700 font-medium mb-2" for="name">이름</label>
235
+ <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>
236
+ </div>
237
+ <div>
238
+ <label class="block text-gray-700 font-medium mb-2" for="age">나이</label>
239
+ <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>
240
+ </div>
241
+ </div>
242
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
243
+ <div>
244
+ <label class="block text-gray-700 font-medium mb-2" for="phone">연락처</label>
245
+ <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>
246
+ </div>
247
+ <div>
248
+ <label class="block text-gray-700 font-medium mb-2" for="email">이메일</label>
249
+ <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>
250
+ </div>
251
+ </div>
252
+ <div>
253
+ <label class="block text-gray-700 font-medium mb-2" for="message">상담 내용</label>
254
+ <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>
255
+ </div>
256
+ <div class="text-center">
257
+ <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">
258
+ 무료 상담 신청하기
259
+ </button>
260
+ </div>
261
+ </form>
262
+ </div>
263
+ </div>
264
+ </section>
265
+
266
+ <custom-footer></custom-footer>
267
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
268
+ <script src="components/navbar.js"></script>
269
+ <script src="components/footer.js"></script>
270
+ <script src="script.js"></script>
271
+ <script>feather.replace();</script>
272
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
273
+ </body>
274
+ </html>
script.js ADDED
@@ -0,0 +1,96 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared JavaScript across all pages
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ // Initialize Vanta.js background
4
+ if (document.getElementById('vanta-bg')) {
5
+ VANTA.GLOBE({
6
+ el: "#vanta-bg",
7
+ mouseControls: true,
8
+ touchControls: true,
9
+ gyroControls: false,
10
+ minHeight: 200.00,
11
+ minWidth: 200.00,
12
+ scale: 1.00,
13
+ scaleMobile: 1.00,
14
+ color: 0xec4899,
15
+ color2: 0xfbcfe8,
16
+ backgroundColor: 0xfffdfd
17
+ });
18
+ }
19
+
20
+ // Smooth scrolling for anchor links
21
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
22
+ anchor.addEventListener('click', function (e) {
23
+ e.preventDefault();
24
+ const target = document.querySelector(this.getAttribute('href'));
25
+ if (target) {
26
+ window.scrollTo({
27
+ top: target.offsetTop - 80,
28
+ behavior: 'smooth'
29
+ });
30
+ }
31
+ });
32
+ });
33
+
34
+ // Form submission handling
35
+ const form = document.getElementById('consultation-form');
36
+ if (form) {
37
+ form.addEventListener('submit', function(e) {
38
+ e.preventDefault();
39
+
40
+ // Get form values
41
+ const name = document.getElementById('name').value;
42
+ const age = document.getElementById('age').value;
43
+ const phone = document.getElementById('phone').value;
44
+ const email = document.getElementById('email').value;
45
+
46
+ // In a real application, you would send this data to a server
47
+ console.log('Form submitted:', { name, age, phone, email });
48
+
49
+ // Show success message
50
+ alert(`${name}님, 상담 신청이 완료되었습니다. 빠른 시일 내에 연락드리겠습니다.`);
51
+
52
+ // Reset form
53
+ form.reset();
54
+ });
55
+ }
56
+
57
+ // Intersection Observer for animations
58
+ const observerOptions = {
59
+ root: null,
60
+ rootMargin: '0px',
61
+ threshold: 0.1
62
+ };
63
+
64
+ const observer = new IntersectionObserver((entries) => {
65
+ entries.forEach(entry => {
66
+ if (entry.isIntersecting) {
67
+ entry.target.classList.add('animate-fade-in-up');
68
+ }
69
+ });
70
+ }, observerOptions);
71
+
72
+ // Observe sections for animation
73
+ document.querySelectorAll('section').forEach(section => {
74
+ section.classList.add('opacity-0', 'translate-y-10', 'transition-all', 'duration-700');
75
+ observer.observe(section);
76
+ });
77
+
78
+ // Animation classes
79
+ const style = document.createElement('style');
80
+ style.textContent = `
81
+ @keyframes fade-in-up {
82
+ from {
83
+ opacity: 0;
84
+ transform: translateY(20px);
85
+ }
86
+ to {
87
+ opacity: 1;
88
+ transform: translateY(0);
89
+ }
90
+ }
91
+ .animate-fade-in-up {
92
+ animation: fade-in-up 0.7s ease-out forwards;
93
+ }
94
+ `;
95
+ document.head.appendChild(style);
96
+ });
style.css CHANGED
@@ -1,28 +1,62 @@
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
1
+ /* Shared styles across all pages */
2
+ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
3
+
4
  body {
5
+ font-family: 'Noto Sans KR', sans-serif;
6
+ scroll-behavior: smooth;
7
+ }
8
+
9
+ #hero {
10
+ height: 100vh;
11
+ min-height: 700px;
12
+ }
13
+
14
+ #vanta-bg {
15
+ background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
16
+ }
17
+
18
+ .feather {
19
+ width: 20px;
20
+ height: 20px;
21
+ }
22
+
23
+ /* Responsive adjustments */
24
+ @media (max-width: 768px) {
25
+ #hero h1 {
26
+ font-size: 2.5rem;
27
+ }
28
+
29
+ #hero p {
30
+ font-size: 1.2rem;
31
+ }
32
  }
33
 
34
+ /* Form styling */
35
+ #consultation-form input,
36
+ #consultation-form textarea {
37
+ transition: all 0.3s ease;
38
  }
39
 
40
+ #consultation-form input:focus,
41
+ #consultation-form textarea:focus {
42
+ border-color: #ec4899;
43
+ box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
 
44
  }
45
 
46
+ /* Card hover effects */
47
+ .grid div.bg-white {
48
+ transition: all 0.3s ease;
 
 
 
49
  }
50
 
51
+ .grid div.bg-white:hover {
52
+ transform: translateY(-5px);
53
  }
54
+
55
+ /* Testimonial cards */
56
+ #testimonials .bg-gray-50 {
57
+ transition: all 0.3s ease;
58
+ }
59
+
60
+ #testimonials .bg-gray-50:hover {
61
+ transform: translateY(-3px);
62
+ }