Hugging Face's logo

Spaces:
nkjoy
/
onekorea
Running

App Files Community
nkjoy commited on
Commit
e6182dc
·
verified ·
1 Parent(s): 6d4ff51

서비스 페이지도 만들어줘 - Initial Deployment

Browse files
Files changed (7) hide show
  1. README.md +6 -4
  2. about.html +312 -0
  3. contact.html +229 -0
  4. index.html +385 -18
  5. portfolio.html +322 -0
  6. prompts.txt +13 -0
  7. service.html +436 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Onekorea
3
- emoji: 🌖
4
- colorFrom: green
5
  colorTo: pink
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: onekorea
3
+ emoji: 🐳
4
+ colorFrom: red
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
about.html ADDED
@@ -0,0 +1,312 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
16
+ }
17
+ .team-card:hover {
18
+ transform: translateY(-10px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .value-card {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .value-card:hover {
25
+ transform: scale(1.05);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-sans antialiased text-gray-800">
30
+ <!-- Navigation -->
31
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-md z-50 shadow-sm">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-20 items-center">
34
+ <div class="flex-shrink-0 flex items-center">
35
+ <span class="text-2xl font-bold text-indigo-600">원코리아미디컴</span>
36
+ </div>
37
+ <div class="hidden md:block">
38
+ <div class="ml-10 flex items-baseline space-x-8">
39
+ <a href="index.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">홈</a>
40
+ <a href="service.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">서비스</a>
41
+ <a href="portfolio.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">포트폴리오</a>
42
+ <a href="about.html" class="text-indigo-600 font-bold">회사소개</a>
43
+ <a href="contact.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">문의하기</a>
44
+ </div>
45
+ </div>
46
+ <div class="md:hidden">
47
+ <button class="text-gray-600 hover:text-indigo-600 focus:outline-none">
48
+ <i data-feather="menu"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Hero Section -->
56
+ <section class="hero-gradient pt-32 pb-20">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="text-center" data-aos="fade-up">
59
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">회사 소개</h1>
60
+ <p class="text-xl text-indigo-200 max-w-3xl mx-auto">
61
+ 창의성과 기술력으로 새로운 시각을 제시하는 원코리아미디컴입니다.
62
+ </p>
63
+ </div>
64
+ </div>
65
+ </section>
66
+
67
+ <!-- About Company -->
68
+ <section class="py-20 bg-white">
69
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
+ <div class="grid md:grid-cols-2 gap-12 items-center">
71
+ <div data-aos="fade-right">
72
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">미디어의 미래를 선도하는<br>크리에이티브 파트너</h2>
73
+ <p class="text-lg text-gray-600 mb-6">
74
+ 원코리아미디컴은 2010년 설립以来, 영상과 사진 분야에서 전문성을 인정받은 크리에이티브 에이전시입니다.
75
+ 우리는 단순한 콘텐츠 제작을 넘어, 고객의 브랜드 가치를 높이고 메시지를 효과적으로 전달할 수 있는
76
+ 전략적 파트너로서의 역할을 수행하고 있습니다.
77
+ </p>
78
+ <p class="text-lg text-gray-600 mb-6">
79
+ 최신 기술과 트렌디한 감각을 바탕으로, 우리는 기업의 스토리를 시각적으로 재해석하여
80
+ 고객과의 감정적 연결을 만들어냅니다. 다양한 산업 분야의 경험을 바탕으로 한 전문성과
81
+ 창의적인 접근 방식으로 고객의 비즈니스 성장을 지원합니다.
82
+ </p>
83
+ <div class="grid grid-cols-3 gap-4 mt-8">
84
+ <div class="text-center">
85
+ <div class="text-3xl font-bold text-indigo-600">13+</div>
86
+ <div class="text-gray-600">업력</div>
87
+ </div>
88
+ <div class="text-center">
89
+ <div class="text-3xl font-bold text-indigo-600">500+</div>
90
+ <div class="text-gray-600">프로젝트</div>
91
+ </div>
92
+ <div class="text-center">
93
+ <div class="text-3xl font-bold text-indigo-600">50+</div>
94
+ <div class="text-gray-600">전문가</div>
95
+ </div>
96
+ </div>
97
+ </div>
98
+ <div class="relative" data-aos="fade-left">
99
+ <div class="absolute -inset-4 bg-indigo-500 rounded-2xl opacity-20 blur-xl"></div>
100
+ <div class="relative rounded-2xl overflow-hidden">
101
+ <img src="http://static.photos/office/1024x576/1" alt="회사 소개" class="w-full h-auto">
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Our Values -->
109
+ <section class="py-20 bg-gray-50">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="text-center mb-16" data-aos="fade-up">
112
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">우리의 핵심 가치</h2>
113
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
114
+ 원코리아미디컴이 지키고 실천하는 가치들입니다.
115
+ </p>
116
+ </div>
117
+
118
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
119
+ <div class="bg-white p-8 rounded-xl shadow-md value-card" data-aos="fade-up" data-aos-delay="100">
120
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
121
+ <i data-feather="star" class="text-indigo-600 w-8 h-8"></i>
122
+ </div>
123
+ <h3 class="text-xl font-bold text-gray-900 mb-4">창의성</h3>
124
+ <p class="text-gray-600">
125
+ 독창적인 아이디어와 창의적인 접근으로 고객의 브랜드를 특별하게 만들어갑니다.
126
+ </p>
127
+ </div>
128
+
129
+ <div class="bg-white p-8 rounded-xl shadow-md value-card" data-aos="fade-up" data-aos-delay="200">
130
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
131
+ <i data-feather="award" class="text-indigo-600 w-8 h-8"></i>
132
+ </div>
133
+ <h3 class="text-xl font-bold text-gray-900 mb-4">전문성</h3>
134
+ <p class="text-gray-600">
135
+ 다양한 경험과 전문 지식을 바탕으로 최고의 결과물을 만들어냅니다.
136
+ </p>
137
+ </div>
138
+
139
+ <div class="bg-white p-8 rounded-xl shadow-md value-card" data-aos="fade-up" data-aos-delay="300">
140
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
141
+ <i data-feather="heart" class="text-indigo-600 w-8 h-8"></i>
142
+ </div>
143
+ <h3 class="text-xl font-bold text-gray-900 mb-4">정성</h3>
144
+ <p class="text-gray-600">
145
+ 고객의 성공을 위해 최선을 다하고, 모든 작업에 정성을 다합니다.
146
+ </p>
147
+ </div>
148
+
149
+ <div class="bg-white p-8 rounded-xl shadow-md value-card" data-aos="fade-up" data-aos-delay="400">
150
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6">
151
+ <i data-feather="refresh-cw" class="text-indigo-600 w-8 h-8"></i>
152
+ </div>
153
+ <h3 class="text-xl font-bold text-gray-900 mb-4">혁신</h3>
154
+ <p class="text-gray-600">
155
+ 끊임없는 도전과 혁신으로 미디어 산업의 변화를 선도합니다.
156
+ </p>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </section>
161
+
162
+ <!-- Team Section -->
163
+ <section class="py-20 bg-white">
164
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
165
+ <div class="text-center mb-16" data-aos="fade-up">
166
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">우리의 전문가 팀</h2>
167
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
168
+ 다양한 분야의 전문가들이 모여 고객의 성공을 위해 노력합니다.
169
+ </p>
170
+ </div>
171
+
172
+ <div class="grid md:grid-cols-3 gap-8">
173
+ <div class="bg-gray-50 rounded-xl overflow-hidden team-card" data-aos="fade-up" data-aos-delay="100">
174
+ <div class="h-64 overflow-hidden">
175
+ <img src="http://static.photos/people/640x360/1" alt="팀원" class="w-full h-full object-cover">
176
+ </div>
177
+ <div class="p-6">
178
+ <h3 class="text-xl font-bold text-gray-900 mb-2">김현우 대표</h3>
179
+ <p class="text-indigo-600 mb-4">CEO & Creative Director</p>
180
+ <p class="text-gray-600">
181
+ 15년 이상의 영상 제작 경험을 바탕으로 창의적인 방향성을 제시합니다.
182
+ </p>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="bg-gray-50 rounded-xl overflow-hidden team-card" data-aos="fade-up" data-aos-delay="200">
187
+ <div class="h-64 overflow-hidden">
188
+ <img src="http://static.photos/people/640x360/2" alt="팀원" class="w-full h-full object-cover">
189
+ </div>
190
+ <div class="p-6">
191
+ <h3 class="text-xl font-bold text-gray-900 mb-2">이수진 PD</h3>
192
+ <p class="text-indigo-600 mb-4">Executive Producer</p>
193
+ <p class="text-gray-600">
194
+ 다양한 프로젝트를 성공적으로 이끈 경험으로 고객의 요구를 정확히 이해합니다.
195
+ </p>
196
+ </div>
197
+ </div>
198
+
199
+ <div class="bg-gray-50 rounded-xl overflow-hidden team-card" data-aos="fade-up" data-aos-delay="300">
200
+ <div class="h-64 overflow-hidden">
201
+ <img src="http://static.photos/people/640x360/3" alt="팀원" class="w-full h-full object-cover">
202
+ </div>
203
+ <div class="p-6">
204
+ <h3 class="text-xl font-bold text-gray-900 mb-2">박준영 감독</h3>
205
+ <p class="text-indigo-600 mb-4">Director of Photography</p>
206
+ <p class="text-gray-600">
207
+ 뛰어난 촬영 기술과 감각으로 고객의 스토리를 시각적으로 완성합니다.
208
+ </p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </div>
213
+ </section>
214
+
215
+ <!-- CTA Section -->
216
+ <section class="py-20 bg-indigo-600">
217
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
218
+ <div class="text-center" data-aos="fade-up">
219
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">함께 성장할 파트너를 찾고 계신가요?</h2>
220
+ <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">
221
+ 원코리아미디컴과 함께라면 당신의 브랜드 스토리를 특별하게 만들어드립니다.
222
+ </p>
223
+ <a href="contact.html" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-100 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
224
+ 무료 상담 신청하기
225
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
226
+ </a>
227
+ </div>
228
+ </div>
229
+ </section>
230
+
231
+ <!-- Footer -->
232
+ <footer class="bg-gray-900 text-white py-12">
233
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
234
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
235
+ <div class="mb-8 md:mb-0">
236
+ <h3 class="text-2xl font-bold mb-4">원코리아미디컴</h3>
237
+ <p class="text-gray-400">
238
+ 영상과 사진의 전문가로 크리에이티브한 솔루션을 제공합니다.
239
+ </p>
240
+ </div>
241
+
242
+ <div>
243
+ <h4 class="text-lg font-semibold mb-4">서비스</h4>
244
+ <ul class="space-y-2">
245
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">영상 제작</a></li>
246
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">사진 촬영</a></li>
247
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">VR/AR 콘텐츠</a></li>
248
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">드론 촬영</a></li>
249
+ </ul>
250
+ </div>
251
+
252
+ <div>
253
+ <h4 class="text-lg font-semibold mb-4">회사</h4>
254
+ <ul class="space-y-2">
255
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">회사 소개</a></li>
256
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">팀 소개</a></li>
257
+ <li><a href="#" class="text-gray-400 hover:text-white transition">포트폴리오</a></li>
258
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">연락처</a></li>
259
+ </ul>
260
+ </div>
261
+
262
+ <div>
263
+ <h4 class="text-lg font-semibold mb-4">연락처</h4>
264
+ <ul class="space-y-2">
265
+ <li class="flex items-center">
266
+ <i data-feather="map-pin" class="w-5 h-5 mr-2"></i>
267
+ <span class="text-gray-400">서울특별시 강남구 테헤란로 123</span>
268
+ </li>
269
+ <li class="flex items-center">
270
+ <i data-feather="phone" class="w-5 h-5 mr-2"></i>
271
+ <span class="text-gray-400">02-1234-5678</span>
272
+ </li>
273
+ <li class="flex items-center">
274
+ <i data-feather="mail" class="w-5 h-5 mr-2"></i>
275
+ <span class="text-gray-400">contact@onekoreamediacom.com</span>
276
+ </li>
277
+ </ul>
278
+ </div>
279
+ </div>
280
+
281
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
282
+ <p class="text-gray-400 mb-4 md:mb-0">
283
+ © 2023 원코리아미디컴. All rights reserved.
284
+ </p>
285
+ <div class="flex space-x-6">
286
+ <a href="#" class="text-gray-400 hover:text-white transition">
287
+ <i data-feather="facebook" class="w-5 h-5"></i>
288
+ </a>
289
+ <a href="#" class="text-gray-400 hover:text-white transition">
290
+ <i data-feather="instagram" class="w-5 h-5"></i>
291
+ </a>
292
+ <a href="#" class="text-gray-400 hover:text-white transition">
293
+ <i data-feather="youtube" class="w-5 h-5"></i>
294
+ </a>
295
+ <a href="#" class="text-gray-400 hover:text-white transition">
296
+ <i data-feather="linkedin" class="w-5 h-5"></i>
297
+ </a>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </footer>
302
+
303
+ <script>
304
+ AOS.init({
305
+ duration: 800,
306
+ easing: 'ease-in-out',
307
+ once: true
308
+ });
309
+ feather.replace();
310
+ </script>
311
+ </body>
312
+ </html>
contact.html ADDED
@@ -0,0 +1,229 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
16
+ }
17
+ .form-input {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .form-input:focus {
21
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
22
+ }
23
+ </style>
24
+ </head>
25
+ <body class="font-sans antialiased text-gray-800">
26
+ <!-- Navigation -->
27
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-md z-50 shadow-sm">
28
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
29
+ <div class="flex justify-between h-20 items-center">
30
+ <div class="flex-shrink-0 flex items-center">
31
+ <span class="text-2xl font-bold text-indigo-600">원코리아미디컴</span>
32
+ </div>
33
+ <div class="hidden md:block">
34
+ <div class="ml-10 flex items-baseline space-x-8">
35
+ <a href="index.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">홈</a>
36
+ <a href="service.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">서비스</a>
37
+ <a href="portfolio.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">포트폴리오</a>
38
+ <a href="about.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">회사소개</a>
39
+ <a href="contact.html" class="text-indigo-600 font-bold">문의하기</a>
40
+ </div>
41
+ </div>
42
+ <div class="md:hidden">
43
+ <button class="text-gray-600 hover:text-indigo-600 focus:outline-none">
44
+ <i data-feather="menu"></i>
45
+ </button>
46
+ </div>
47
+ </div>
48
+ </div>
49
+ </nav>
50
+
51
+ <!-- Hero Section -->
52
+ <section class="hero-gradient pt-32 pb-20">
53
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
54
+ <div class="text-center" data-aos="fade-up">
55
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">무료 상담 신청</h1>
56
+ <p class="text-xl text-indigo-200 max-w-3xl mx-auto">
57
+ 원코리아미디컴의 전문가와 무료로 상담하세요. 24시간 내로 답변 드립니다.
58
+ </p>
59
+ </div>
60
+ </div>
61
+ </section>
62
+
63
+ <!-- Contact Form -->
64
+ <section class="py-20 bg-white">
65
+ <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
66
+ <div class="bg-gray-50 rounded-xl shadow-lg p-8 md:p-12" data-aos="fade-up">
67
+ <form>
68
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
69
+ <div>
70
+ <label for="name" class="block text-gray-700 font-medium mb-2">이름</label>
71
+ <input type="text" id="name" class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500">
72
+ </div>
73
+ <div>
74
+ <label for="company" class="block text-gray-700 font-medium mb-2">회사명</label>
75
+ <input type="text" id="company" class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500">
76
+ </div>
77
+ <div>
78
+ <label for="email" class="block text-gray-700 font-medium mb-2">이메일</label>
79
+ <input type="email" id="email" class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500">
80
+ </div>
81
+ <div>
82
+ <label for="phone" class="block text-gray-700 font-medium mb-2">전화번호</label>
83
+ <input type="tel" id="phone" class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500">
84
+ </div>
85
+ </div>
86
+
87
+ <div class="mb-8">
88
+ <label for="service" class="block text-gray-700 font-medium mb-2">관심 서비스</label>
89
+ <select id="service" class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500">
90
+ <option value="">서비스를 선택해주세요</option>
91
+ <option value="video">프리미엄 영상 제작</option>
92
+ <option value="photo">프로페셔널 사진 촬영</option>
93
+ <option value="vr">VR/AR 콘텐츠 제작</option>
94
+ <option value="drone">드론 촬영</option>
95
+ <option value="etc">기타 문의</option>
96
+ </select>
97
+ </div>
98
+
99
+ <div class="mb-8">
100
+ <label for="message" class="block text-gray-700 font-medium mb-2">상담 내용</label>
101
+ <textarea id="message" rows="6" class="form-input w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500"></textarea>
102
+ </div>
103
+
104
+ <div class="text-center">
105
+ <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-10 py-4 rounded-lg font-bold text-lg transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
106
+ 상담 신청하기
107
+ <i data-feather="send" class="w-5 h-5 ml-2 inline"></i>
108
+ </button>
109
+ </div>
110
+ </form>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Contact Info -->
116
+ <section class="py-16 bg-gray-50">
117
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
118
+ <div class="grid md:grid-cols-3 gap-8">
119
+ <div class="bg-white p-8 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="100">
120
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
121
+ <i data-feather="map-pin" class="text-indigo-600 w-6 h-6"></i>
122
+ </div>
123
+ <h3 class="text-xl font-bold text-gray-900 mb-2">주소</h3>
124
+ <p class="text-gray-600">서울특별시 강남구 테헤란로 123 원코리아미디컴 빌딩 5층</p>
125
+ </div>
126
+
127
+ <div class="bg-white p-8 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="200">
128
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
129
+ <i data-feather="phone" class="text-indigo-600 w-6 h-6"></i>
130
+ </div>
131
+ <h3 class="text-xl font-bold text-gray-900 mb-2">전화</h3>
132
+ <p class="text-gray-600">02-1234-5678</p>
133
+ <p class="text-gray-600">평일 09:00 ~ 18:00</p>
134
+ </div>
135
+
136
+ <div class="bg-white p-8 rounded-xl shadow-md text-center" data-aos="fade-up" data-aos-delay="300">
137
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
138
+ <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i>
139
+ </div>
140
+ <h3 class="text-xl font-bold text-gray-900 mb-2">이메일</h3>
141
+ <p class="text-gray-600">contact@onekoreamediacom.com</p>
142
+ <p class="text-gray-600">24시간 내 답변</p>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Footer -->
149
+ <footer class="bg-gray-900 text-white py-12">
150
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
151
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
152
+ <div class="mb-8 md:mb-0">
153
+ <h3 class="text-2xl font-bold mb-4">원코리아미디컴</h3>
154
+ <p class="text-gray-400">
155
+ 영상과 사진의 전문가로 크리에이티브한 솔루션을 제공합니다.
156
+ </p>
157
+ </div>
158
+
159
+ <div>
160
+ <h4 class="text-lg font-semibold mb-4">서비스</h4>
161
+ <ul class="space-y-2">
162
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">영상 제작</a></li>
163
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">사진 촬영</a></li>
164
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">VR/AR 콘텐츠</a></li>
165
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">드론 촬영</a></li>
166
+ </ul>
167
+ </div>
168
+
169
+ <div>
170
+ <h4 class="text-lg font-semibold mb-4">회사</h4>
171
+ <ul class="space-y-2">
172
+ <li><a href="#" class="text-gray-400 hover:text-white transition">회사 소개</a></li>
173
+ <li><a href="#" class="text-gray-400 hover:text-white transition">팀 소개</a></li>
174
+ <li><a href="#" class="text-gray-400 hover:text-white transition">포트폴리오</a></li>
175
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">연락처</a></li>
176
+ </ul>
177
+ </div>
178
+
179
+ <div>
180
+ <h4 class="text-lg font-semibold mb-4">연락처</h4>
181
+ <ul class="space-y-2">
182
+ <li class="flex items-center">
183
+ <i data-feather="map-pin" class="w-5 h-5 mr-2"></i>
184
+ <span class="text-gray-400">서울특별시 강남구 테헤란로 123</span>
185
+ </li>
186
+ <li class="flex items-center">
187
+ <i data-feather="phone" class="w-5 h-5 mr-2"></i>
188
+ <span class="text-gray-400">02-1234-5678</span>
189
+ </li>
190
+ <li class="flex items-center">
191
+ <i data-feather="mail" class="w-5 h-5 mr-2"></i>
192
+ <span class="text-gray-400">contact@onekoreamediacom.com</span>
193
+ </li>
194
+ </ul>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
199
+ <p class="text-gray-400 mb-4 md:mb-0">
200
+ © 2023 원코리아미디컴. All rights reserved.
201
+ </p>
202
+ <div class="flex space-x-6">
203
+ <a href="#" class="text-gray-400 hover:text-white transition">
204
+ <i data-feather="facebook" class="w-5 h-5"></i>
205
+ </a>
206
+ <a href="#" class="text-gray-400 hover:text-white transition">
207
+ <i data-feather="instagram" class="w-5 h-5"></i>
208
+ </a>
209
+ <a href="#" class="text-gray-400 hover:text-white transition">
210
+ <i data-feather="youtube" class="w-5 h-5"></i>
211
+ </a>
212
+ <a href="#" class="text-gray-400 hover:text-white transition">
213
+ <i data-feather="linkedin" class="w-5 h-5"></i>
214
+ </a>
215
+ </div>
216
+ </div>
217
+ </div>
218
+ </footer>
219
+
220
+ <script>
221
+ AOS.init({
222
+ duration: 800,
223
+ easing: 'ease-in-out',
224
+ once: true
225
+ });
226
+ feather.replace();
227
+ </script>
228
+ </body>
229
+ </html>
index.html CHANGED
@@ -1,19 +1,386 @@
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
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
16
+ }
17
+ .service-card:hover {
18
+ transform: translateY(-10px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .text-stroke {
22
+ -webkit-text-stroke: 1px white;
23
+ color: transparent;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="font-sans antialiased text-gray-800">
28
+ <!-- Navigation -->
29
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-md z-50 shadow-sm">
30
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
31
+ <div class="flex justify-between h-20 items-center">
32
+ <div class="flex-shrink-0 flex items-center">
33
+ <span class="text-2xl font-bold text-indigo-600">원코리아미디컴</span>
34
+ </div>
35
+ <div class="hidden md:block">
36
+ <div class="ml-10 flex items-baseline space-x-8">
37
+ <a href="#" class="text-indigo-600 font-bold">홈</a>
38
+ <a href="service.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">서비스</a>
39
+ <a href="portfolio.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">포트폴리오</a>
40
+ <a href="about.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">회사소개</a>
41
+ <a href="contact.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">문의하기</a>
42
+ </div>
43
+ </div>
44
+ <div class="md:hidden">
45
+ <button class="text-gray-600 hover:text-indigo-600 focus:outline-none">
46
+ <i data-feather="menu"></i>
47
+ </button>
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </nav>
52
+
53
+ <!-- Hero Section -->
54
+ <section class="hero-gradient min-h-screen flex items-center pt-20">
55
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
56
+ <div class="grid md:grid-cols-2 gap-12 items-center">
57
+ <div class="text-white" data-aos="fade-right">
58
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
59
+ <span class="text-stroke">프리미엄</span> 영상과 사진의<br>전문가
60
+ </h1>
61
+ <p class="text-xl md:text-2xl mb-8 text-gray-300">
62
+ 크리에이티브한 시각으로 당신의 스토리를 완성합니다.<br>
63
+ 원코리아미디컴과 함께 특별한 순간을 기록하세요.
64
+ </p>
65
+ <div class="flex space-x-4">
66
+ <a href="contact.html" class="bg-indigo-600 hover:bg-indigo-700 text-white px-8 py-4 rounded-lg font-medium transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
67
+ 문의하기
68
+ </a>
69
+ <a href="portfolio.html" class="border-2 border-white hover:bg-white hover:text-gray-900 text-white px-8 py-4 rounded-lg font-medium transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
70
+ 포트폴리오 보기
71
+ </a>
72
+ </div>
73
+ </div>
74
+ <div class="relative" data-aos="fade-left">
75
+ <div class="absolute -inset-4 bg-indigo-500 rounded-2xl opacity-20 blur-xl"></div>
76
+ <div class="relative rounded-2xl overflow-hidden">
77
+ <img src="http://static.photos/technology/1024x576/1" alt="미디어 제작" class="w-full h-auto">
78
+ </div>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ </section>
83
+
84
+ <!-- Services Section -->
85
+ <section class="py-20 bg-gray-50">
86
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
87
+ <div class="text-center mb-16" data-aos="fade-up">
88
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">우리의 전문 서비스</h2>
89
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
90
+ 다양한 분야에서 최고의 품질을 제공하는 원코리아미디컴의 서비스를 만나보세요
91
+ </p>
92
+ </div>
93
+
94
+ <div class="grid md:grid-cols-3 gap-8">
95
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden service-card transition duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="100">
96
+ <div class="h-48 overflow-hidden">
97
+ <img src="http://static.photos/studio/640x360/1" alt="영상 제작" class="w-full h-full object-cover">
98
+ </div>
99
+ <div class="p-6">
100
+ <div class="flex items-center mb-4">
101
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
102
+ <i data-feather="video" class="text-indigo-600"></i>
103
+ </div>
104
+ <h3 class="text-xl font-bold text-gray-900">프리미엄 영상 제작</h3>
105
+ </div>
106
+ <p class="text-gray-600 mb-4">
107
+ 고퀄리티의 영상 콘텐츠 제작부터 편집까지 원스톱 솔루션을 제공합니다.
108
+ </p>
109
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
110
+ 자세히 보기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
111
+ </a>
112
+ </div>
113
+ </div>
114
+
115
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden service-card transition duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="200">
116
+ <div class="h-48 overflow-hidden">
117
+ <img src="http://static.photos/workspace/640x360/2" alt="사진 촬영" class="w-full h-full object-cover">
118
+ </div>
119
+ <div class="p-6">
120
+ <div class="flex items-center mb-4">
121
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
122
+ <i data-feather="camera" class="text-indigo-600"></i>
123
+ </div>
124
+ <h3 class="text-xl font-bold text-gray-900">프로페셔널 사진 촬영</h3>
125
+ </div>
126
+ <p class="text-gray-600 mb-4">
127
+ 전문 장비와 크리에이티브한 시각으로 완성도 높은 이미지를 제작합니다.
128
+ </p>
129
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
130
+ 자세히 보기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
131
+ </a>
132
+ </div>
133
+ </div>
134
+
135
+ <div class="bg-white rounded-xl shadow-lg overflow-hidden service-card transition duration-300 transform hover:-translate-y-2" data-aos="fade-up" data-aos-delay="300">
136
+ <div class="h-48 overflow-hidden">
137
+ <img src="http://static.photos/technology/640x360/3" alt="VR 콘텐츠" class="w-full h-full object-cover">
138
+ </div>
139
+ <div class="p-6">
140
+ <div class="flex items-center mb-4">
141
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
142
+ <i data-feather="globe" class="text-indigo-600"></i>
143
+ </div>
144
+ <h3 class="text-xl font-bold text-gray-900">VR/AR 콘텐츠 제작</h3>
145
+ </div>
146
+ <p class="text-gray-600 mb-4">
147
+ 최신 기술을 활용한 몰입형 가상현실 콘텐츠로 새로운 경험을 제공합니다.
148
+ </p>
149
+ <a href="#" class="text-indigo-600 font-medium flex items-center">
150
+ 자세히 보기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
151
+ </a>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+ </section>
157
+
158
+ <!-- Portfolio Section -->
159
+ <section class="py-20 bg-white">
160
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
161
+ <div class="text-center mb-16" data-aos="fade-up">
162
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">우리의 작품</h2>
163
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
164
+ 원코리아미디컴이 만들어낸 크리에이티브한 결과물을 확인해보세요
165
+ </p>
166
+ </div>
167
+
168
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
169
+ <div class="relative group overflow-hidden rounded-xl hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="100">
170
+ <img src="http://static.photos/workspace/640x360/4" alt="포트폴리오 1" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
171
+ <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">
172
+ <div>
173
+ <h3 class="text-white text-xl font-bold mb-2">기업 홍보 영상</h3>
174
+ <p class="text-gray-300">A기업 브랜드 영상 제작</p>
175
+ </div>
176
+ </div>
177
+ </div>
178
+
179
+ <div class="relative group overflow-hidden rounded-xl hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="200">
180
+ <img src="http://static.photos/workspace/640x360/5" alt="포트폴리오 2" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
181
+ <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">
182
+ <div>
183
+ <h3 class="text-white text-xl font-bold mb-2">제품 사진 촬영</h3>
184
+ <p class="text-gray-300">B브랜드 뷰티 제품 라인</p>
185
+ </div>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="relative group overflow-hidden rounded-xl hover:shadow-xl transition duration-300" data-aos="fade-up" data-aos-delay="300">
190
+ <img src="http://static.photos/workspace/640x360/6" alt="포트폴리오 3" class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
191
+ <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">
192
+ <div>
193
+ <h3 class="text-white text-xl font-bold mb-2">이벤트 영상</h3>
194
+ <p class="text-gray-300">C기업 연말 파티 기록</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <div class="text-center mt-12" data-aos="fade-up">
201
+ <a href="#" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
202
+ 더 많은 작품 보기
203
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
204
+ </a>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- Testimonials Section -->
210
+ <section class="py-20 bg-gray-50">
211
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
212
+ <div class="text-center mb-16" data-aos="fade-up">
213
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">고객들의 이야기</h2>
214
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
215
+ 원코리아미디컴과 함께한 파트너들의 생생한 후기
216
+ </p>
217
+ </div>
218
+
219
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
220
+ <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
221
+ <div class="flex items-center mb-4">
222
+ <div class="text-yellow-400 mr-2 flex space-x-1">
223
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
224
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
225
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
226
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
227
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
228
+ </div>
229
+ </div>
230
+ <p class="text-gray-600 mb-6">
231
+ "원코리아미디컴과 함께한 홍보 영상 제작은 정말 만족스러웠습니다. 크리에이티브한 아이디어와 전문적인 기술력이 돋보였어요."
232
+ </p>
233
+ <div class="flex items-center">
234
+ <img src="http://static.photos/people/200x200/1" alt="클라이언트" class="w-12 h-12 rounded-full mr-4 object-cover">
235
+ <div>
236
+ <h4 class="font-bold text-gray-900">김대표</h4>
237
+ <p class="text-sm text-gray-500">A기업 대표이사</p>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
243
+ <div class="flex items-center mb-4">
244
+ <div class="text-yellow-400 mr-2 flex space-x-1">
245
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
246
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
247
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
248
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
249
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
250
+ </div>
251
+ </div>
252
+ <p class="text-gray-600 mb-6">
253
+ "제품 사진 촬영을 의뢰했는데 결과물이 너무 훌륭해서 매출 증가에도 도움이 되었습니다. 세심한 부분까지 신경 써주셔서 감사합니다."
254
+ </p>
255
+ <div class="flex items-center">
256
+ <img src="http://static.photos/people/200x200/2" alt="클라이언트" class="w-12 h-12 rounded-full mr-4 object-cover">
257
+ <div>
258
+ <h4 class="font-bold text-gray-900">이마케팅팀장</h4>
259
+ <p class="text-sm text-gray-500">B브랜드 마케팅팀</p>
260
+ </div>
261
+ </div>
262
+ </div>
263
+
264
+ <div class="bg-white p-8 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="300">
265
+ <div class="flex items-center mb-4">
266
+ <div class="text-yellow-400 mr-2 flex space-x-1">
267
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
268
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
269
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
270
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
271
+ <i data-feather="star" class="w-5 h-5 fill-current"></i>
272
+ </div>
273
+ </div>
274
+ <p class="text-gray-600 mb-6">
275
+ "VR 콘텐츠 제작을 통해 고객들에게 새로운 경험을 제공할 수 있었습니다. 기술력과 창의성이 결합된 훌륭한 결과물이었습니다."
276
+ </p>
277
+ <div class="flex items-center">
278
+ <img src="http://static.photos/people/200x200/3" alt="클라이언트" class="w-12 h-12 rounded-full mr-4 object-cover">
279
+ <div>
280
+ <h4 class="font-bold text-gray-900">박이사</h4>
281
+ <p class="text-sm text-gray-500">C기업 전략기획팀</p>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- CTA Section -->
290
+ <section class="py-20 bg-indigo-600">
291
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
292
+ <div class="text-center" data-aos="fade-up">
293
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">당신의 스토리를 완성시켜 드립니다</h2>
294
+ <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">
295
+ 원코리아미디컴과 함께 특별한 순간을 영원히 간직하세요. 지금 바로 문의해보세요.
296
+ </p>
297
+ <a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-100 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
298
+ 무료 상담 신청하기
299
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
300
+ </a>
301
+ </div>
302
+ </div>
303
+ </section>
304
+
305
+ <!-- Footer -->
306
+ <footer class="bg-gray-900 text-white py-12">
307
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
308
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
309
+ <div class="mb-8 md:mb-0">
310
+ <h3 class="text-2xl font-bold mb-4">원코리아미디컴</h3>
311
+ <p class="text-gray-400">
312
+ 영상과 사진의 전문가로 크리에이티브한 솔루션을 제공합니다.
313
+ </p>
314
+ </div>
315
+
316
+ <div>
317
+ <h4 class="text-lg font-semibold mb-4">서비스</h4>
318
+ <ul class="space-y-2">
319
+ <li><a href="#" class="text-gray-400 hover:text-white transition">영상 제작</a></li>
320
+ <li><a href="#" class="text-gray-400 hover:text-white transition">사진 촬영</a></li>
321
+ <li><a href="#" class="text-gray-400 hover:text-white transition">VR/AR 콘텐츠</a></li>
322
+ <li><a href="#" class="text-gray-400 hover:text-white transition">드론 촬영</a></li>
323
+ </ul>
324
+ </div>
325
+
326
+ <div>
327
+ <h4 class="text-lg font-semibold mb-4">회사</h4>
328
+ <ul class="space-y-2">
329
+ <li><a href="#" class="text-gray-400 hover:text-white transition">회사 소개</a></li>
330
+ <li><a href="#" class="text-gray-400 hover:text-white transition">팀 소개</a></li>
331
+ <li><a href="#" class="text-gray-400 hover:text-white transition">포트폴리오</a></li>
332
+ <li><a href="#" class="text-gray-400 hover:text-white transition">연락처</a></li>
333
+ </ul>
334
+ </div>
335
+
336
+ <div>
337
+ <h4 class="text-lg font-semibold mb-4">연락처</h4>
338
+ <ul class="space-y-2">
339
+ <li class="flex items-center">
340
+ <i data-feather="map-pin" class="w-5 h-5 mr-2"></i>
341
+ <span class="text-gray-400">서울특별시 강남구 테헤란로 123</span>
342
+ </li>
343
+ <li class="flex items-center">
344
+ <i data-feather="phone" class="w-5 h-5 mr-2"></i>
345
+ <span class="text-gray-400">02-1234-5678</span>
346
+ </li>
347
+ <li class="flex items-center">
348
+ <i data-feather="mail" class="w-5 h-5 mr-2"></i>
349
+ <span class="text-gray-400">contact@onekoreamediacom.com</span>
350
+ </li>
351
+ </ul>
352
+ </div>
353
+ </div>
354
+
355
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
356
+ <p class="text-gray-400 mb-4 md:mb-0">
357
+ © 2023 원코리아미디컴. All rights reserved.
358
+ </p>
359
+ <div class="flex space-x-6">
360
+ <a href="#" class="text-gray-400 hover:text-white transition">
361
+ <i data-feather="facebook" class="w-5 h-5"></i>
362
+ </a>
363
+ <a href="#" class="text-gray-400 hover:text-white transition">
364
+ <i data-feather="instagram" class="w-5 h-5"></i>
365
+ </a>
366
+ <a href="#" class="text-gray-400 hover:text-white transition">
367
+ <i data-feather="youtube" class="w-5 h-5"></i>
368
+ </a>
369
+ <a href="#" class="text-gray-400 hover:text-white transition">
370
+ <i data-feather="linkedin" class="w-5 h-5"></i>
371
+ </a>
372
+ </div>
373
+ </div>
374
+ </div>
375
+ </footer>
376
+
377
+ <script>
378
+ AOS.init({
379
+ duration: 800,
380
+ easing: 'ease-in-out',
381
+ once: true
382
+ });
383
+ feather.replace();
384
+ </script>
385
+ </body>
386
  </html>
portfolio.html ADDED
@@ -0,0 +1,322 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
16
+ }
17
+ .portfolio-card:hover {
18
+ transform: translateY(-10px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .video-container {
22
+ position: relative;
23
+ padding-bottom: 56.25%;
24
+ height: 0;
25
+ overflow: hidden;
26
+ }
27
+ .video-container iframe {
28
+ position: absolute;
29
+ top: 0;
30
+ left: 0;
31
+ width: 100%;
32
+ height: 100%;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="font-sans antialiased text-gray-800">
37
+ <!-- Navigation -->
38
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-md z-50 shadow-sm">
39
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
40
+ <div class="flex justify-between h-20 items-center">
41
+ <div class="flex-shrink-0 flex items-center">
42
+ <span class="text-2xl font-bold text-indigo-600">원코리아미디컴</span>
43
+ </div>
44
+ <div class="hidden md:block">
45
+ <div class="ml-10 flex items-baseline space-x-8">
46
+ <a href="index.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">홈</a>
47
+ <a href="service.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">서비스</a>
48
+ <a href="portfolio.html" class="text-indigo-600 font-bold">포트폴리오</a>
49
+ <a href="about.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">회사소개</a>
50
+ <a href="contact.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">문의하기</a>
51
+ </div>
52
+ </div>
53
+ <div class="md:hidden">
54
+ <button class="text-gray-600 hover:text-indigo-600 focus:outline-none">
55
+ <i data-feather="menu"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Hero Section -->
63
+ <section class="hero-gradient pt-32 pb-20">
64
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
65
+ <div class="text-center" data-aos="fade-up">
66
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">포트폴리오</h1>
67
+ <p class="text-xl text-indigo-200 max-w-3xl mx-auto">
68
+ 원코리아미디컴이 만들어낸 다양한 프로젝트들을 만나보세요.
69
+ </p>
70
+ </div>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Portfolio Gallery -->
75
+ <section class="py-20 bg-white">
76
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
77
+ <div class="text-center mb-16" data-aos="fade-up">
78
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">영상 및 사진 작업물</h2>
79
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
80
+ 다양한 분야와 스타일의 작업물들을 확인하실 수 있습니다.
81
+ </p>
82
+ </div>
83
+
84
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
85
+ <!-- Video Portfolio 1 -->
86
+ <div class="bg-gray-50 rounded-xl overflow-hidden portfolio-card" data-aos="fade-up" data-aos-delay="100">
87
+ <div class="video-container">
88
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
89
+ </div>
90
+ <div class="p-6">
91
+ <h3 class="text-xl font-bold text-gray-900 mb-2">기업 홍보 영상</h3>
92
+ <p class="text-gray-600">
93
+ A기업의 브랜드 이미지를 담은 프리미엄 홍보 영상입니다.
94
+ </p>
95
+ </div>
96
+ </div>
97
+
98
+ <!-- Video Portfolio 2 -->
99
+ <div class="bg-gray-50 rounded-xl overflow-hidden portfolio-card" data-aos="fade-up" data-aos-delay="200">
100
+ <div class="video-container">
101
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
102
+ </div>
103
+ <div class="p-6">
104
+ <h3 class="text-xl font-bold text-gray-900 mb-2">제품 런칭 영상</h3>
105
+ <p class="text-gray-600">
106
+ B브랜드의 신제품을 소개하는 창의적인 런칭 영상입니다.
107
+ </p>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Photo Portfolio 1 -->
112
+ <div class="bg-gray-50 rounded-xl overflow-hidden portfolio-card" data-aos="fade-up" data-aos-delay="300">
113
+ <div class="h-48 overflow-hidden">
114
+ <img src="http://static.photos/workspace/640x360/1" alt="제품 사진" class="w-full h-full object-cover">
115
+ </div>
116
+ <div class="p-6">
117
+ <h3 class="text-xl font-bold text-gray-900 mb-2">제품 사진 촬영</h3>
118
+ <p class="text-gray-600">
119
+ C브랜드의 뷰티 제품 라인 전용 사진 콘텐츠입니다.
120
+ </p>
121
+ </div>
122
+ </div>
123
+
124
+ <!-- Video Portfolio 3 -->
125
+ <div class="bg-gray-50 rounded-xl overflow-hidden portfolio-card" data-aos="fade-up" data-aos-delay="400">
126
+ <div class="video-container">
127
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
128
+ </div>
129
+ <div class="p-6">
130
+ <h3 class="text-xl font-bold text-gray-900 mb-2">이벤트 영상</h3>
131
+ <p class="text-gray-600">
132
+ D기업 연말 파티를 기록한 감동적인 이벤트 영상입니다.
133
+ </p>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Photo Portfolio 2 -->
138
+ <div class="bg-gray-50 rounded-xl overflow-hidden portfolio-card" data-aos="fade-up" data-aos-delay="500">
139
+ <div class="h-48 overflow-hidden">
140
+ <img src="http://static.photos/office/640x360/2" alt="기업 사진" class="w-full h-full object-cover">
141
+ </div>
142
+ <div class="p-6">
143
+ <h3 class="text-xl font-bold text-gray-900 mb-2">기업 이미지 사진</h3>
144
+ <p class="text-gray-600">
145
+ E기업의 사내 문화와 업무 환경을 담은 사진 콘텐츠입니다.
146
+ </p>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Video Portfolio 4 -->
151
+ <div class="bg-gray-50 rounded-xl overflow-hidden portfolio-card" data-aos="fade-up" data-aos-delay="600">
152
+ <div class="video-container">
153
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
154
+ </div>
155
+ <div class="p-6">
156
+ <h3 class="text-xl font-bold text-gray-900 mb-2">VR 콘텐츠</h3>
157
+ <p class="text-gray-600">
158
+ F쇼핑몰의 가상 쇼핑 환경을 구현한 VR 콘텐츠입니다.
159
+ </p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+
164
+ <div class="text-center mt-12" data-aos="fade-up">
165
+ <a href="contact.html" class="inline-flex items-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
166
+ 프로젝트 문의하기
167
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
168
+ </a>
169
+ </div>
170
+ </div>
171
+ </section>
172
+
173
+ <!-- Featured Projects -->
174
+ <section class="py-20 bg-gray-50">
175
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
176
+ <div class="text-center mb-16" data-aos="fade-up">
177
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">주요 프로젝트</h2>
178
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
179
+ 원코리아미디컴이 참여한 대표적인 프로젝트들입니다.
180
+ </p>
181
+ </div>
182
+
183
+ <div class="grid md:grid-cols-2 gap-12 items-center">
184
+ <div class="relative" data-aos="fade-right">
185
+ <div class="absolute -inset-4 bg-indigo-500 rounded-2xl opacity-20 blur-xl"></div>
186
+ <div class="relative rounded-2xl overflow-hidden">
187
+ <div class="video-container">
188
+ <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
189
+ </div>
190
+ </div>
191
+ </div>
192
+ <div data-aos="fade-left">
193
+ <h3 class="text-2xl font-bold text-gray-900 mb-4">G글로벌 브랜드 리뉴얼 프로젝트</h3>
194
+ <p class="text-gray-600 mb-6">
195
+ 세계적인 브랜드인 G글로벌의 브랜드 리뉴얼을 위한 전사적 영상 및 사진 콘텐츠 제작 프로젝트입니다.
196
+ 전 세계 15개국에서 사용될 브랜드 영상과 제품 사진을 제작하였습니다.
197
+ </p>
198
+ <ul class="space-y-2 mb-6">
199
+ <li class="flex items-center">
200
+ <i data-feather="check-circle" class="text-green-500 mr-2"></i>
201
+ <span>전사 브랜드 영상 제작 (3편)</span>
202
+ </li>
203
+ <li class="flex items-center">
204
+ <i data-feather="check-circle" class="text-green-500 mr-2"></i>
205
+ <span>제품 라인 전용 사진 콘텐츠 (500+ 컷)</span>
206
+ </li>
207
+ <li class="flex items-center">
208
+ <i data-feather="check-circle" class="text-green-500 mr-2"></i>
209
+ <span>SNS용 짧은 영상 콘텐츠 (20편)</span>
210
+ </li>
211
+ </ul>
212
+ <div class="flex items-center">
213
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
214
+ <i data-feather="award" class="text-indigo-600"></i>
215
+ </div>
216
+ <p class="text-gray-600">
217
+ <span class="font-bold">수상</span> - 2023년 대한민국 콘텐츠 어워드 우수상
218
+ </p>
219
+ </div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ </section>
224
+
225
+ <!-- CTA Section -->
226
+ <section class="py-20 bg-indigo-600">
227
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
228
+ <div class="text-center" data-aos="fade-up">
229
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">당신의 스토리를 함께 만들어갈 준비가 되셨나요?</h2>
230
+ <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">
231
+ 원코리아미디컴과 함께라면 특별한 순간을 영상과 사진으로 완벽하게 기록할 수 있습니다.
232
+ </p>
233
+ <a href="contact.html" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-100 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
234
+ 무료 상담 신청하기
235
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
236
+ </a>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Footer -->
242
+ <footer class="bg-gray-900 text-white py-12">
243
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
244
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
245
+ <div class="mb-8 md:mb-0">
246
+ <h3 class="text-2xl font-bold mb-4">원코리아미디컴</h3>
247
+ <p class="text-gray-400">
248
+ 영상과 사진의 전문가로 크리에이티브한 솔루션을 제공합니다.
249
+ </p>
250
+ </div>
251
+
252
+ <div>
253
+ <h4 class="text-lg font-semibold mb-4">서비스</h4>
254
+ <ul class="space-y-2">
255
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">영상 제작</a></li>
256
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">사진 촬영</a></li>
257
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">VR/AR 콘텐츠</a></li>
258
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">드론 촬영</a></li>
259
+ </ul>
260
+ </div>
261
+
262
+ <div>
263
+ <h4 class="text-lg font-semibold mb-4">회사</h4>
264
+ <ul class="space-y-2">
265
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">회사 소개</a></li>
266
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">팀 소개</a></li>
267
+ <li><a href="portfolio.html" class="text-gray-400 hover:text-white transition">포트폴리오</a></li>
268
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">연락처</a></li>
269
+ </ul>
270
+ </div>
271
+
272
+ <div>
273
+ <h4 class="text-lg font-semibold mb-4">연락처</h4>
274
+ <ul class="space-y-2">
275
+ <li class="flex items-center">
276
+ <i data-feather="map-pin" class="w-5 h-5 mr-2"></i>
277
+ <span class="text-gray-400">서울특별시 강남구 테헤란로 123</span>
278
+ </li>
279
+ <li class="flex items-center">
280
+ <i data-feather="phone" class="w-5 h-5 mr-2"></i>
281
+ <span class="text-gray-400">02-1234-5678</span>
282
+ </li>
283
+ <li class="flex items-center">
284
+ <i data-feather="mail" class="w-5 h-5 mr-2"></i>
285
+ <span class="text-gray-400">contact@onekoreamediacom.com</span>
286
+ </li>
287
+ </ul>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
292
+ <p class="text-gray-400 mb-4 md:mb-0">
293
+ © 2023 원코리아미디컴. All rights reserved.
294
+ </p>
295
+ <div class="flex space-x-6">
296
+ <a href="#" class="text-gray-400 hover:text-white transition">
297
+ <i data-feather="facebook" class="w-5 h-5"></i>
298
+ </a>
299
+ <a href="#" class="text-gray-400 hover:text-white transition">
300
+ <i data-feather="instagram" class="w-5 h-5"></i>
301
+ </a>
302
+ <a href="#" class="text-gray-400 hover:text-white transition">
303
+ <i data-feather="youtube" class="w-5 h-5"></i>
304
+ </a>
305
+ <a href="#" class="text-gray-400 hover:text-white transition">
306
+ <i data-feather="linkedin" class="w-5 h-5"></i>
307
+ </a>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </footer>
312
+
313
+ <script>
314
+ AOS.init({
315
+ duration: 800,
316
+ easing: 'ease-in-out',
317
+ once: true
318
+ });
319
+ feather.replace();
320
+ </script>
321
+ </body>
322
+ </html>
prompts.txt ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ 영상과 사진 전문 다르는 홈페이지
2
+ 회사명은 원코리아미디컴
3
+ 디자인은 프리미엄 디자인과 현대적으로
4
+ 한국어로
5
+ 버튼들과 박스들에 애니메이션 효과 줘 !
6
+ <!-- Testimonials Section --> 이부분<i data-feather="star" class="w-5 h-5 fill-current"></i> 애네들 가로 한줄로 나오도록 ~
7
+ 서비스 페이지 만들어줘
8
+ 메뉴 글씨는 조금 굵게 해줘
9
+ 무료 상담 신청하기 버튼에 연결된 페이지 만들어줘
10
+ 회사 소개 페이지도 만들어줘~!
11
+ 회사 소개 페이지도 만들어줘~!
12
+ 포트폴리오 페이지 만들어줘 ! 유튜브 영상 넣어서
13
+ 서비스 페이지도 만들어줘
service.html ADDED
@@ -0,0 +1,436 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <style>
14
+ .hero-gradient {
15
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
16
+ }
17
+ .service-card:hover {
18
+ transform: translateY(-10px);
19
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
20
+ }
21
+ .process-step {
22
+ transition: all 0.3s ease;
23
+ }
24
+ .process-step:hover {
25
+ transform: scale(1.05);
26
+ }
27
+ </style>
28
+ </head>
29
+ <body class="font-sans antialiased text-gray-800">
30
+ <!-- Navigation -->
31
+ <nav class="fixed w-full bg-white bg-opacity-90 backdrop-blur-md z-50 shadow-sm">
32
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
33
+ <div class="flex justify-between h-20 items-center">
34
+ <div class="flex-shrink-0 flex items-center">
35
+ <span class="text-2xl font-bold text-indigo-600">원코리아미디컴</span>
36
+ </div>
37
+ <div class="hidden md:block">
38
+ <div class="ml-10 flex items-baseline space-x-8">
39
+ <a href="index.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">홈</a>
40
+ <a href="service.html" class="text-indigo-600 font-bold">서비스</a>
41
+ <a href="portfolio.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">포트폴리오</a>
42
+ <a href="about.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">회사소개</a>
43
+ <a href="contact.html" class="text-gray-600 hover:text-indigo-600 font-bold transition">문의하기</a>
44
+ </div>
45
+ </div>
46
+ <div class="md:hidden">
47
+ <button class="text-gray-600 hover:text-indigo-600 focus:outline-none">
48
+ <i data-feather="menu"></i>
49
+ </button>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Hero Section -->
56
+ <section class="hero-gradient pt-32 pb-20">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="text-center" data-aos="fade-up">
59
+ <h1 class="text-4xl md:text-5xl font-bold text-white mb-6">우리의 서비스</h1>
60
+ <p class="text-xl text-indigo-200 max-w-3xl mx-auto">
61
+ 창의성과 기술력을 바탕으로 고객의 브랜드를 시각적으로 완성해드립니다.
62
+ </p>
63
+ </div>
64
+ </div>
65
+ </section>
66
+
67
+ <!-- Services Section -->
68
+ <section class="py-20 bg-white">
69
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
+ <div class="text-center mb-16" data-aos="fade-up">
71
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">전문 서비스</h2>
72
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
73
+ 원코리아미디컴이 제공하는 다양한 미디어 제작 서비스를 확인해보세요.
74
+ </p>
75
+ </div>
76
+
77
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
78
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden service-card" data-aos="fade-up" data-aos-delay="100">
79
+ <div class="h-48 overflow-hidden">
80
+ <img src="http://static.photos/studio/640x360/1" alt="영상 제작" class="w-full h-full object-cover">
81
+ </div>
82
+ <div class="p-6">
83
+ <div class="flex items-center mb-4">
84
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
85
+ <i data-feather="video" class="text-indigo-600"></i>
86
+ </div>
87
+ <h3 class="text-xl font-bold text-gray-900">프리미엄 영상 제작</h3>
88
+ </div>
89
+ <p class="text-gray-600 mb-4">
90
+ 기업 홍보, 제품 런칭, 이벤트 기록 등 다양한 목적에 맞는 고퀄리티 영상을 제작합니다.
91
+ </p>
92
+ <ul class="text-gray-600 space-y-2 mb-6">
93
+ <li class="flex items-center">
94
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
95
+ <span>기획 및 콘셉트 개발</span>
96
+ </li>
97
+ <li class="flex items-center">
98
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
99
+ <span>프리미엄 촬영</span>
100
+ </li>
101
+ <li class="flex items-center">
102
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
103
+ <span>전문 편집 및 후보정</span>
104
+ </li>
105
+ </ul>
106
+ <a href="contact.html" class="text-indigo-600 font-medium flex items-center">
107
+ 상담 신청하기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
108
+ </a>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden service-card" data-aos="fade-up" data-aos-delay="200">
113
+ <div class="h-48 overflow-hidden">
114
+ <img src="http://static.photos/workspace/640x360/2" alt="사진 촬영" class="w-full h-full object-cover">
115
+ </div>
116
+ <div class="p-6">
117
+ <div class="flex items-center mb-4">
118
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
119
+ <i data-feather="camera" class="text-indigo-600"></i>
120
+ </div>
121
+ <h3 class="text-xl font-bold text-gray-900">프로페셔널 사진 촬영</h3>
122
+ </div>
123
+ <p class="text-gray-600 mb-4">
124
+ 제품, 인물, 공간 등 다양한 주제의 프로페셔널한 사진 콘텐츠를 제공합니다.
125
+ </p>
126
+ <ul class="text-gray-600 space-y-2 mb-6">
127
+ <li class="flex items-center">
128
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
129
+ <span>라이팅 및 조명 설계</span>
130
+ </li>
131
+ <li class="flex items-center">
132
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
133
+ <span>고급 장비를 활용한 촬영</span>
134
+ </li>
135
+ <li class="flex items-center">
136
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
137
+ <span>전문 보정 및 편집</span>
138
+ </li>
139
+ </ul>
140
+ <a href="contact.html" class="text-indigo-600 font-medium flex items-center">
141
+ 상담 신청하기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
142
+ </a>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden service-card" data-aos="fade-up" data-aos-delay="300">
147
+ <div class="h-48 overflow-hidden">
148
+ <img src="http://static.photos/technology/640x360/3" alt="VR 콘텐츠" class="w-full h-full object-cover">
149
+ </div>
150
+ <div class="p-6">
151
+ <div class="flex items-center mb-4">
152
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
153
+ <i data-feather="globe" class="text-indigo-600"></i>
154
+ </div>
155
+ <h3 class="text-xl font-bold text-gray-900">VR/AR 콘텐츠 제작</h3>
156
+ </div>
157
+ <p class="text-gray-600 mb-4">
158
+ 몰입형 가상현실 콘텐츠로 고객에게 새로운 경험을 제공합니다.
159
+ </p>
160
+ <ul class="text-gray-600 space-y-2 mb-6">
161
+ <li class="flex items-center">
162
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
163
+ <span>3D 모델링 및 설계</span>
164
+ </li>
165
+ <li class="flex items-center">
166
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
167
+ <span>인터랙티브 기능 개발</span>
168
+ </li>
169
+ <li class="flex items-center">
170
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
171
+ <span>크로스플랫폼 배포</span>
172
+ </li>
173
+ </ul>
174
+ <a href="contact.html" class="text-indigo-600 font-medium flex items-center">
175
+ 상담 신청하기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
176
+ </a>
177
+ </div>
178
+ </div>
179
+
180
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden service-card" data-aos="fade-up" data-aos-delay="400">
181
+ <div class="h-48 overflow-hidden">
182
+ <img src="http://static.photos/aerial/640x360/4" alt="드론 촬영" class="w-full h-full object-cover">
183
+ </div>
184
+ <div class="p-6">
185
+ <div class="flex items-center mb-4">
186
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
187
+ <i data-feather="airplay" class="text-indigo-600"></i>
188
+ </div>
189
+ <h3 class="text-xl font-bold text-gray-900">드론 촬영</h3>
190
+ </div>
191
+ <p class="text-gray-600 mb-4">
192
+ 공중에서의 독특한 시각으로 장소의 전반적인 이미지를 담아냅니다.
193
+ </p>
194
+ <ul class="text-gray-600 space-y-2 mb-6">
195
+ <li class="flex items-center">
196
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
197
+ <span>고급 드론 장비 사용</span>
198
+ </li>
199
+ <li class="flex items-center">
200
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
201
+ <span>안전하고 전문적인 촬영</span>
202
+ </li>
203
+ <li class="flex items-center">
204
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
205
+ <span>4K 고화질 영상 제공</span>
206
+ </li>
207
+ </ul>
208
+ <a href="contact.html" class="text-indigo-600 font-medium flex items-center">
209
+ 상담 신청하기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
210
+ </a>
211
+ </div>
212
+ </div>
213
+
214
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden service-card" data-aos="fade-up" data-aos-delay="500">
215
+ <div class="h-48 overflow-hidden">
216
+ <img src="http://static.photos/bokeh/640x360/5" alt="광고 콘텐츠" class="w-full h-full object-cover">
217
+ </div>
218
+ <div class="p-6">
219
+ <div class="flex items-center mb-4">
220
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
221
+ <i data-feather="target" class="text-indigo-600"></i>
222
+ </div>
223
+ <h3 class="text-xl font-bold text-gray-900">광고 콘텐츠 제작</h3>
224
+ </div>
225
+ <p class="text-gray-600 mb-4">
226
+ 브랜드 메시지를 효과적으로 전달하는 창의적인 광고 콘텐츠를 제작합니다.
227
+ </p>
228
+ <ul class="text-gray-600 space-y-2 mb-6">
229
+ <li class="flex items-center">
230
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
231
+ <span>타겟 분석 및 전략 수립</span>
232
+ </li>
233
+ <li class="flex items-center">
234
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
235
+ <span>크리에이티브 방향 설정</span>
236
+ </li>
237
+ <li class="flex items-center">
238
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
239
+ <span>SNS 및 미디어 최적화</span>
240
+ </li>
241
+ </ul>
242
+ <a href="contact.html" class="text-indigo-600 font-medium flex items-center">
243
+ 상담 신청하기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
244
+ </a>
245
+ </div>
246
+ </div>
247
+
248
+ <div class="bg-gray-50 rounded-xl shadow-lg overflow-hidden service-card" data-aos="fade-up" data-aos-delay="600">
249
+ <div class="h-48 overflow-hidden">
250
+ <img src="http://static.photos/industry/640x360/6" alt="산업별 솔루션" class="w-full h-full object-cover">
251
+ </div>
252
+ <div class="p-6">
253
+ <div class="flex items-center mb-4">
254
+ <div class="bg-indigo-100 p-3 rounded-full mr-4">
255
+ <i data-feather="briefcase" class="text-indigo-600"></i>
256
+ </div>
257
+ <h3 class="text-xl font-bold text-gray-900">산업별 맞춤 솔루션</h3>
258
+ </div>
259
+ <p class="text-gray-600 mb-4">
260
+ 다양한 산업 분야에 최적화된 맞춤형 미디어 솔루션을 제공합니다.
261
+ </p>
262
+ <ul class="text-gray-600 space-y-2 mb-6">
263
+ <li class="flex items-center">
264
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
265
+ <span>의료, 교육, 제조 등 전 분야</span>
266
+ </li>
267
+ <li class="flex items-center">
268
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
269
+ <span>산업 특성에 맞는 기획</span>
270
+ </li>
271
+ <li class="flex items-center">
272
+ <i data-feather="check-circle" class="text-green-500 mr-2 w-4 h-4"></i>
273
+ <span>전문가 컨설팅 제공</span>
274
+ </li>
275
+ </ul>
276
+ <a href="contact.html" class="text-indigo-600 font-medium flex items-center">
277
+ 상담 신청하기 <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
278
+ </a>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+ </section>
284
+
285
+ <!-- Process Section -->
286
+ <section class="py-20 bg-gray-50">
287
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
288
+ <div class="text-center mb-16" data-aos="fade-up">
289
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">서비스 프로세스</h2>
290
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
291
+ 원코리아미디컴은 체계적인 프로세스로 고객의 만족을 실현합니다.
292
+ </p>
293
+ </div>
294
+
295
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
296
+ <div class="bg-white p-8 rounded-xl shadow-md text-center process-step" data-aos="fade-up" data-aos-delay="100">
297
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
298
+ <span class="text-2xl font-bold text-indigo-600">1</span>
299
+ </div>
300
+ <h3 class="text-xl font-bold text-gray-900 mb-4">상담 및 분석</h3>
301
+ <p class="text-gray-600">
302
+ 고객의 요구사항을 정확히 파악하고 프로젝트 목표를 설정합니다.
303
+ </p>
304
+ </div>
305
+
306
+ <div class="bg-white p-8 rounded-xl shadow-md text-center process-step" data-aos="fade-up" data-aos-delay="200">
307
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
308
+ <span class="text-2xl font-bold text-indigo-600">2</span>
309
+ </div>
310
+ <h3 class="text-xl font-bold text-gray-900 mb-4">기획 및 제안</h3>
311
+ <p class="text-gray-600">
312
+ 창의적인 기획안과 전문적인 제안서를 제공합니다.
313
+ </p>
314
+ </div>
315
+
316
+ <div class="bg-white p-8 rounded-xl shadow-md text-center process-step" data-aos="fade-up" data-aos-delay="300">
317
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
318
+ <span class="text-2xl font-bold text-indigo-600">3</span>
319
+ </div>
320
+ <h3 class="text-xl font-bold text-gray-900 mb-4">제작 및 실행</h3>
321
+ <p class="text-gray-600">
322
+ 전문 팀이 프로젝트를 실행하고 고품질 결과물을 만들어냅니다.
323
+ </p>
324
+ </div>
325
+
326
+ <div class="bg-white p-8 rounded-xl shadow-md text-center process-step" data-aos="fade-up" data-aos-delay="400">
327
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-6">
328
+ <span class="text-2xl font-bold text-indigo-600">4</span>
329
+ </div>
330
+ <h3 class="text-xl font-bold text-gray-900 mb-4">검수 및 전달</h3>
331
+ <p class="text-gray-600">
332
+ 완성된 결과물을 검수하고 고��에게 전달합니다.
333
+ </p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+ </section>
338
+
339
+ <!-- CTA Section -->
340
+ <section class="py-20 bg-indigo-600">
341
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
342
+ <div class="text-center" data-aos="fade-up">
343
+ <h2 class="text-3xl md:text-4xl font-bold text-white mb-6">당신의 프로젝트를 함께 만들어갈 준비가 되셨나요?</h2>
344
+ <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">
345
+ 원코리아미디컴과 함께라면 특별한 스토리를 시각적으로 완성할 수 있습니다.
346
+ </p>
347
+ <a href="contact.html" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-100 transition duration-300 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl">
348
+ 무료 상담 신청하기
349
+ <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i>
350
+ </a>
351
+ </div>
352
+ </div>
353
+ </section>
354
+
355
+ <!-- Footer -->
356
+ <footer class="bg-gray-900 text-white py-12">
357
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
358
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
359
+ <div class="mb-8 md:mb-0">
360
+ <h3 class="text-2xl font-bold mb-4">원코리아미디컴</h3>
361
+ <p class="text-gray-400">
362
+ 영상과 사진의 전문가로 크리에이티브한 솔루션을 제공합니다.
363
+ </p>
364
+ </div>
365
+
366
+ <div>
367
+ <h4 class="text-lg font-semibold mb-4">서비스</h4>
368
+ <ul class="space-y-2">
369
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">영상 제작</a></li>
370
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">사진 촬영</a></li>
371
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">VR/AR 콘텐츠</a></li>
372
+ <li><a href="service.html" class="text-gray-400 hover:text-white transition">드론 촬영</a></li>
373
+ </ul>
374
+ </div>
375
+
376
+ <div>
377
+ <h4 class="text-lg font-semibold mb-4">회사</h4>
378
+ <ul class="space-y-2">
379
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">회사 소개</a></li>
380
+ <li><a href="about.html" class="text-gray-400 hover:text-white transition">팀 소개</a></li>
381
+ <li><a href="portfolio.html" class="text-gray-400 hover:text-white transition">포트폴리오</a></li>
382
+ <li><a href="contact.html" class="text-gray-400 hover:text-white transition">연락처</a></li>
383
+ </ul>
384
+ </div>
385
+
386
+ <div>
387
+ <h4 class="text-lg font-semibold mb-4">연락처</h4>
388
+ <ul class="space-y-2">
389
+ <li class="flex items-center">
390
+ <i data-feather="map-pin" class="w-5 h-5 mr-2"></i>
391
+ <span class="text-gray-400">서울특별시 강남구 테헤란로 123</span>
392
+ </li>
393
+ <li class="flex items-center">
394
+ <i data-feather="phone" class="w-5 h-5 mr-2"></i>
395
+ <span class="text-gray-400">02-1234-5678</span>
396
+ </li>
397
+ <li class="flex items-center">
398
+ <i data-feather="mail" class="w-5 h-5 mr-2"></i>
399
+ <span class="text-gray-400">contact@onekoreamediacom.com</span>
400
+ </li>
401
+ </ul>
402
+ </div>
403
+ </div>
404
+
405
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
406
+ <p class="text-gray-400 mb-4 md:mb-0">
407
+ © 2023 원코리아미디컴. All rights reserved.
408
+ </p>
409
+ <div class="flex space-x-6">
410
+ <a href="#" class="text-gray-400 hover:text-white transition">
411
+ <i data-feather="facebook" class="w-5 h-5"></i>
412
+ </a>
413
+ <a href="#" class="text-gray-400 hover:text-white transition">
414
+ <i data-feather="instagram" class="w-5 h-5"></i>
415
+ </a>
416
+ <a href="#" class="text-gray-400 hover:text-white transition">
417
+ <i data-feather="youtube" class="w-5 h-5"></i>
418
+ </a>
419
+ <a href="#" class="text-gray-400 hover:text-white transition">
420
+ <i data-feather="linkedin" class="w-5 h-5"></i>
421
+ </a>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </footer>
426
+
427
+ <script>
428
+ AOS.init({
429
+ duration: 800,
430
+ easing: 'ease-in-out',
431
+ once: true
432
+ });
433
+ feather.replace();
434
+ </script>
435
+ </body>
436
+ </html>