Hugging Face's logo

Spaces:
ginipick
/
retane
Running

App Files Community
ginipick commited on
Commit
6ded754
ยท
verified ยท
1 Parent(s): 3bcd0e2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1422 -19
index.html CHANGED
@@ -1,19 +1,1422 @@
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>RETANE - Rentless Life Plan</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --primary-brown: #8B7355;
13
+ --dark-brown: #5C4A3A;
14
+ --light-brown: #A68B6A;
15
+ --beige: #D4C4B0;
16
+ --cream: #F5F0EB;
17
+ --pink-accent: #E8D4D4;
18
+ --white: #FFFFFF;
19
+ --text-dark: #2C2C2C;
20
+ --text-gray: #666666;
21
+ --text-light: #999999;
22
+ --border-light: #E5E5E5;
23
+ }
24
+
25
+ * {
26
+ margin: 0;
27
+ padding: 0;
28
+ box-sizing: border-box;
29
+ }
30
+
31
+ body {
32
+ font-family: 'Noto Sans KR', sans-serif;
33
+ color: var(--text-dark);
34
+ background: var(--white);
35
+ line-height: 1.6;
36
+ }
37
+
38
+ /* Header */
39
+ .header {
40
+ position: fixed;
41
+ top: 0;
42
+ left: 0;
43
+ right: 0;
44
+ z-index: 1000;
45
+ background: rgba(255,255,255,0.95);
46
+ backdrop-filter: blur(10px);
47
+ border-bottom: 1px solid var(--border-light);
48
+ }
49
+
50
+ .header-inner {
51
+ max-width: 1400px;
52
+ margin: 0 auto;
53
+ padding: 15px 40px;
54
+ display: flex;
55
+ align-items: center;
56
+ justify-content: space-between;
57
+ }
58
+
59
+ .logo {
60
+ display: flex;
61
+ align-items: center;
62
+ gap: 12px;
63
+ }
64
+
65
+ .logo-icon {
66
+ width: 40px;
67
+ height: 40px;
68
+ background: linear-gradient(135deg, var(--primary-brown), var(--dark-brown));
69
+ border-radius: 8px;
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ }
74
+
75
+ .logo-icon svg {
76
+ width: 24px;
77
+ height: 24px;
78
+ fill: white;
79
+ }
80
+
81
+ .logo-text {
82
+ font-family: 'Montserrat', sans-serif;
83
+ font-weight: 700;
84
+ font-size: 22px;
85
+ color: var(--dark-brown);
86
+ letter-spacing: 2px;
87
+ }
88
+
89
+ .logo-subtitle {
90
+ font-size: 10px;
91
+ color: var(--text-gray);
92
+ letter-spacing: 1px;
93
+ margin-top: 2px;
94
+ }
95
+
96
+ .nav {
97
+ display: flex;
98
+ gap: 40px;
99
+ }
100
+
101
+ .nav a {
102
+ text-decoration: none;
103
+ color: var(--text-dark);
104
+ font-size: 14px;
105
+ font-weight: 500;
106
+ transition: color 0.3s;
107
+ }
108
+
109
+ .nav a:hover {
110
+ color: var(--primary-brown);
111
+ }
112
+
113
+ .header-actions {
114
+ display: flex;
115
+ align-items: center;
116
+ gap: 20px;
117
+ }
118
+
119
+ .header-btn {
120
+ padding: 10px 24px;
121
+ background: var(--primary-brown);
122
+ color: white;
123
+ border: none;
124
+ border-radius: 25px;
125
+ font-size: 13px;
126
+ font-weight: 500;
127
+ cursor: pointer;
128
+ transition: all 0.3s;
129
+ }
130
+
131
+ .header-btn:hover {
132
+ background: var(--dark-brown);
133
+ transform: translateY(-2px);
134
+ }
135
+
136
+ /* Hero Section */
137
+ .hero {
138
+ margin-top: 70px;
139
+ background: linear-gradient(135deg, var(--primary-brown) 0%, var(--dark-brown) 100%);
140
+ padding: 80px 40px;
141
+ text-align: center;
142
+ position: relative;
143
+ overflow: hidden;
144
+ }
145
+
146
+ .hero::before {
147
+ content: '';
148
+ position: absolute;
149
+ top: 0;
150
+ left: 0;
151
+ right: 0;
152
+ bottom: 0;
153
+ background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
154
+ opacity: 0.5;
155
+ }
156
+
157
+ .hero-brand {
158
+ position: relative;
159
+ z-index: 1;
160
+ margin-bottom: 30px;
161
+ }
162
+
163
+ .hero-logo {
164
+ font-family: 'Montserrat', sans-serif;
165
+ font-size: 48px;
166
+ font-weight: 700;
167
+ color: white;
168
+ letter-spacing: 8px;
169
+ margin-bottom: 10px;
170
+ }
171
+
172
+ .hero-tagline {
173
+ font-family: 'Playfair Display', serif;
174
+ font-size: 20px;
175
+ color: rgba(255,255,255,0.9);
176
+ font-style: italic;
177
+ letter-spacing: 2px;
178
+ }
179
+
180
+ .hero-divider {
181
+ width: 60px;
182
+ height: 2px;
183
+ background: rgba(255,255,255,0.5);
184
+ margin: 20px auto;
185
+ }
186
+
187
+ .hero-sub {
188
+ font-size: 13px;
189
+ color: rgba(255,255,255,0.7);
190
+ letter-spacing: 1px;
191
+ }
192
+
193
+ /* Concept Section */
194
+ .concept-section {
195
+ padding: 100px 40px;
196
+ background: var(--cream);
197
+ }
198
+
199
+ .concept-title {
200
+ text-align: center;
201
+ font-family: 'Playfair Display', serif;
202
+ font-size: 32px;
203
+ color: var(--text-dark);
204
+ margin-bottom: 60px;
205
+ font-weight: 500;
206
+ }
207
+
208
+ .concept-title span {
209
+ color: var(--primary-brown);
210
+ }
211
+
212
+ .concept-showcase {
213
+ max-width: 900px;
214
+ margin: 0 auto 60px;
215
+ border-radius: 20px;
216
+ overflow: hidden;
217
+ box-shadow: 0 30px 60px rgba(0,0,0,0.1);
218
+ }
219
+
220
+ .concept-image {
221
+ width: 100%;
222
+ height: 400px;
223
+ background: linear-gradient(135deg, #D4C4B0 0%, #E8DDD0 100%);
224
+ position: relative;
225
+ display: flex;
226
+ align-items: center;
227
+ justify-content: center;
228
+ }
229
+
230
+ .concept-image-inner {
231
+ display: flex;
232
+ gap: 20px;
233
+ padding: 40px;
234
+ }
235
+
236
+ .concept-img-item {
237
+ width: 200px;
238
+ height: 280px;
239
+ background: white;
240
+ border-radius: 12px;
241
+ box-shadow: 0 10px 30px rgba(0,0,0,0.1);
242
+ display: flex;
243
+ align-items: center;
244
+ justify-content: center;
245
+ font-size: 14px;
246
+ color: var(--text-gray);
247
+ }
248
+
249
+ .concept-cards {
250
+ display: flex;
251
+ justify-content: center;
252
+ gap: 30px;
253
+ flex-wrap: wrap;
254
+ }
255
+
256
+ .concept-card {
257
+ background: white;
258
+ padding: 40px 30px;
259
+ border-radius: 16px;
260
+ text-align: center;
261
+ width: 220px;
262
+ box-shadow: 0 10px 40px rgba(0,0,0,0.05);
263
+ transition: all 0.3s;
264
+ }
265
+
266
+ .concept-card:hover {
267
+ transform: translateY(-10px);
268
+ box-shadow: 0 20px 50px rgba(0,0,0,0.1);
269
+ }
270
+
271
+ .concept-icon {
272
+ width: 70px;
273
+ height: 70px;
274
+ margin: 0 auto 20px;
275
+ background: var(--cream);
276
+ border-radius: 50%;
277
+ display: flex;
278
+ align-items: center;
279
+ justify-content: center;
280
+ }
281
+
282
+ .concept-icon svg {
283
+ width: 32px;
284
+ height: 32px;
285
+ stroke: var(--primary-brown);
286
+ }
287
+
288
+ .concept-card h3 {
289
+ font-size: 16px;
290
+ font-weight: 600;
291
+ margin-bottom: 10px;
292
+ color: var(--text-dark);
293
+ }
294
+
295
+ .concept-card p {
296
+ font-size: 13px;
297
+ color: var(--text-gray);
298
+ line-height: 1.6;
299
+ }
300
+
301
+ /* Feature Section - RETAIN */
302
+ .feature-section {
303
+ padding: 100px 40px;
304
+ background: white;
305
+ }
306
+
307
+ .feature-grid {
308
+ max-width: 1200px;
309
+ margin: 0 auto;
310
+ display: grid;
311
+ grid-template-columns: 1fr 1fr;
312
+ gap: 60px;
313
+ align-items: center;
314
+ }
315
+
316
+ .feature-content h2 {
317
+ font-size: 14px;
318
+ color: var(--primary-brown);
319
+ text-transform: uppercase;
320
+ letter-spacing: 3px;
321
+ margin-bottom: 15px;
322
+ }
323
+
324
+ .feature-content h3 {
325
+ font-family: 'Playfair Display', serif;
326
+ font-size: 42px;
327
+ color: var(--text-dark);
328
+ margin-bottom: 25px;
329
+ line-height: 1.2;
330
+ }
331
+
332
+ .feature-content h3 span {
333
+ color: var(--primary-brown);
334
+ font-weight: 600;
335
+ }
336
+
337
+ .feature-content p {
338
+ font-size: 15px;
339
+ color: var(--text-gray);
340
+ line-height: 1.8;
341
+ margin-bottom: 30px;
342
+ }
343
+
344
+ .feature-btn {
345
+ display: inline-block;
346
+ padding: 14px 36px;
347
+ border: 2px solid var(--primary-brown);
348
+ color: var(--primary-brown);
349
+ text-decoration: none;
350
+ font-size: 14px;
351
+ font-weight: 500;
352
+ border-radius: 30px;
353
+ transition: all 0.3s;
354
+ }
355
+
356
+ .feature-btn:hover {
357
+ background: var(--primary-brown);
358
+ color: white;
359
+ }
360
+
361
+ .feature-images {
362
+ display: grid;
363
+ grid-template-columns: repeat(2, 1fr);
364
+ gap: 20px;
365
+ }
366
+
367
+ .feature-img {
368
+ background: var(--cream);
369
+ border-radius: 16px;
370
+ aspect-ratio: 1;
371
+ display: flex;
372
+ align-items: center;
373
+ justify-content: center;
374
+ transition: all 0.3s;
375
+ position: relative;
376
+ overflow: hidden;
377
+ }
378
+
379
+ .feature-img:hover {
380
+ transform: scale(1.02);
381
+ }
382
+
383
+ .feature-img.large {
384
+ grid-column: span 2;
385
+ aspect-ratio: 2/1;
386
+ }
387
+
388
+ .feature-img-placeholder {
389
+ font-size: 13px;
390
+ color: var(--text-light);
391
+ }
392
+
393
+ /* Big Deal Section */
394
+ .bigdeal-section {
395
+ padding: 100px 40px;
396
+ background: linear-gradient(180deg, var(--cream) 0%, white 100%);
397
+ }
398
+
399
+ .bigdeal-grid {
400
+ max-width: 1200px;
401
+ margin: 0 auto;
402
+ display: grid;
403
+ grid-template-columns: 1fr 1fr;
404
+ gap: 60px;
405
+ align-items: center;
406
+ }
407
+
408
+ .bigdeal-images {
409
+ display: grid;
410
+ grid-template-columns: repeat(3, 1fr);
411
+ gap: 15px;
412
+ }
413
+
414
+ .bigdeal-img {
415
+ background: white;
416
+ border-radius: 12px;
417
+ aspect-ratio: 1;
418
+ display: flex;
419
+ align-items: center;
420
+ justify-content: center;
421
+ box-shadow: 0 5px 20px rgba(0,0,0,0.05);
422
+ transition: all 0.3s;
423
+ }
424
+
425
+ .bigdeal-img:hover {
426
+ transform: translateY(-5px);
427
+ box-shadow: 0 15px 30px rgba(0,0,0,0.1);
428
+ }
429
+
430
+ .bigdeal-content h2 {
431
+ font-size: 14px;
432
+ color: var(--primary-brown);
433
+ text-transform: uppercase;
434
+ letter-spacing: 3px;
435
+ margin-bottom: 15px;
436
+ }
437
+
438
+ .bigdeal-content h3 {
439
+ font-family: 'Playfair Display', serif;
440
+ font-size: 42px;
441
+ color: var(--text-dark);
442
+ margin-bottom: 25px;
443
+ line-height: 1.2;
444
+ }
445
+
446
+ .bigdeal-content p {
447
+ font-size: 15px;
448
+ color: var(--text-gray);
449
+ line-height: 1.8;
450
+ margin-bottom: 30px;
451
+ }
452
+
453
+ /* Promo Banner */
454
+ .promo-banner {
455
+ background: linear-gradient(135deg, var(--pink-accent) 0%, #F0E6E6 100%);
456
+ padding: 60px 40px;
457
+ }
458
+
459
+ .promo-inner {
460
+ max-width: 1200px;
461
+ margin: 0 auto;
462
+ display: flex;
463
+ align-items: center;
464
+ justify-content: space-between;
465
+ gap: 40px;
466
+ }
467
+
468
+ .promo-text h3 {
469
+ font-size: 28px;
470
+ color: var(--text-dark);
471
+ margin-bottom: 10px;
472
+ }
473
+
474
+ .promo-text h3 span {
475
+ color: var(--primary-brown);
476
+ font-weight: 700;
477
+ }
478
+
479
+ .promo-text p {
480
+ font-size: 14px;
481
+ color: var(--text-gray);
482
+ }
483
+
484
+ .promo-images {
485
+ display: flex;
486
+ gap: 20px;
487
+ }
488
+
489
+ .promo-img {
490
+ width: 150px;
491
+ height: 180px;
492
+ background: white;
493
+ border-radius: 12px;
494
+ display: flex;
495
+ align-items: center;
496
+ justify-content: center;
497
+ box-shadow: 0 10px 30px rgba(0,0,0,0.08);
498
+ }
499
+
500
+ .promo-btn {
501
+ padding: 14px 36px;
502
+ background: var(--primary-brown);
503
+ color: white;
504
+ border: none;
505
+ border-radius: 30px;
506
+ font-size: 14px;
507
+ font-weight: 500;
508
+ cursor: pointer;
509
+ transition: all 0.3s;
510
+ }
511
+
512
+ .promo-btn:hover {
513
+ background: var(--dark-brown);
514
+ }
515
+
516
+ /* Featured Listings */
517
+ .featured-section {
518
+ padding: 80px 40px;
519
+ background: white;
520
+ }
521
+
522
+ .section-header {
523
+ text-align: center;
524
+ margin-bottom: 50px;
525
+ }
526
+
527
+ .section-header h2 {
528
+ font-family: 'Playfair Display', serif;
529
+ font-size: 32px;
530
+ color: var(--text-dark);
531
+ margin-bottom: 15px;
532
+ }
533
+
534
+ .section-header p {
535
+ font-size: 14px;
536
+ color: var(--text-gray);
537
+ }
538
+
539
+ .featured-grid {
540
+ max-width: 1200px;
541
+ margin: 0 auto;
542
+ display: grid;
543
+ grid-template-columns: repeat(4, 1fr);
544
+ gap: 25px;
545
+ }
546
+
547
+ .featured-card {
548
+ background: white;
549
+ border-radius: 16px;
550
+ overflow: hidden;
551
+ box-shadow: 0 5px 20px rgba(0,0,0,0.05);
552
+ transition: all 0.3s;
553
+ }
554
+
555
+ .featured-card:hover {
556
+ transform: translateY(-8px);
557
+ box-shadow: 0 15px 40px rgba(0,0,0,0.1);
558
+ }
559
+
560
+ .featured-card-img {
561
+ height: 180px;
562
+ background: var(--cream);
563
+ display: flex;
564
+ align-items: center;
565
+ justify-content: center;
566
+ }
567
+
568
+ .featured-card-content {
569
+ padding: 20px;
570
+ }
571
+
572
+ .featured-card-content h4 {
573
+ font-size: 15px;
574
+ font-weight: 600;
575
+ margin-bottom: 8px;
576
+ color: var(--text-dark);
577
+ }
578
+
579
+ .featured-card-content p {
580
+ font-size: 12px;
581
+ color: var(--text-gray);
582
+ margin-bottom: 12px;
583
+ }
584
+
585
+ .featured-price {
586
+ font-size: 18px;
587
+ font-weight: 700;
588
+ color: var(--primary-brown);
589
+ }
590
+
591
+ .featured-price span {
592
+ font-size: 13px;
593
+ font-weight: 400;
594
+ color: var(--text-gray);
595
+ }
596
+
597
+ /* Category Tabs */
598
+ .category-section {
599
+ padding: 80px 40px;
600
+ background: var(--cream);
601
+ }
602
+
603
+ .category-tabs {
604
+ max-width: 1200px;
605
+ margin: 0 auto 40px;
606
+ display: flex;
607
+ gap: 10px;
608
+ flex-wrap: wrap;
609
+ justify-content: center;
610
+ }
611
+
612
+ .category-tab {
613
+ padding: 12px 28px;
614
+ background: white;
615
+ border: none;
616
+ border-radius: 25px;
617
+ font-size: 14px;
618
+ font-weight: 500;
619
+ color: var(--text-gray);
620
+ cursor: pointer;
621
+ transition: all 0.3s;
622
+ }
623
+
624
+ .category-tab:hover,
625
+ .category-tab.active {
626
+ background: var(--primary-brown);
627
+ color: white;
628
+ }
629
+
630
+ .product-grid {
631
+ max-width: 1200px;
632
+ margin: 0 auto;
633
+ display: grid;
634
+ grid-template-columns: repeat(4, 1fr);
635
+ gap: 25px;
636
+ }
637
+
638
+ .product-card {
639
+ background: white;
640
+ border-radius: 16px;
641
+ overflow: hidden;
642
+ transition: all 0.3s;
643
+ }
644
+
645
+ .product-card:hover {
646
+ transform: translateY(-5px);
647
+ box-shadow: 0 15px 40px rgba(0,0,0,0.1);
648
+ }
649
+
650
+ .product-img {
651
+ height: 200px;
652
+ background: #F8F8F8;
653
+ display: flex;
654
+ align-items: center;
655
+ justify-content: center;
656
+ position: relative;
657
+ }
658
+
659
+ .product-badge {
660
+ position: absolute;
661
+ top: 12px;
662
+ left: 12px;
663
+ padding: 5px 12px;
664
+ background: var(--primary-brown);
665
+ color: white;
666
+ font-size: 11px;
667
+ font-weight: 600;
668
+ border-radius: 20px;
669
+ }
670
+
671
+ .product-content {
672
+ padding: 20px;
673
+ }
674
+
675
+ .product-brand {
676
+ font-size: 11px;
677
+ color: var(--text-light);
678
+ text-transform: uppercase;
679
+ letter-spacing: 1px;
680
+ margin-bottom: 5px;
681
+ }
682
+
683
+ .product-name {
684
+ font-size: 14px;
685
+ font-weight: 600;
686
+ color: var(--text-dark);
687
+ margin-bottom: 10px;
688
+ line-height: 1.4;
689
+ }
690
+
691
+ .product-price {
692
+ font-size: 18px;
693
+ font-weight: 700;
694
+ color: var(--primary-brown);
695
+ }
696
+
697
+ .product-price span {
698
+ font-size: 12px;
699
+ font-weight: 400;
700
+ color: var(--text-gray);
701
+ }
702
+
703
+ .product-original {
704
+ font-size: 12px;
705
+ color: var(--text-light);
706
+ text-decoration: line-through;
707
+ margin-left: 8px;
708
+ }
709
+
710
+ /* Sub Category Sections */
711
+ .subcategory-section {
712
+ padding: 80px 40px;
713
+ background: white;
714
+ }
715
+
716
+ .subcategory-header {
717
+ max-width: 1200px;
718
+ margin: 0 auto 40px;
719
+ display: flex;
720
+ justify-content: space-between;
721
+ align-items: center;
722
+ }
723
+
724
+ .subcategory-header h3 {
725
+ font-family: 'Playfair Display', serif;
726
+ font-size: 28px;
727
+ color: var(--text-dark);
728
+ }
729
+
730
+ .view-all {
731
+ font-size: 14px;
732
+ color: var(--primary-brown);
733
+ text-decoration: none;
734
+ display: flex;
735
+ align-items: center;
736
+ gap: 5px;
737
+ }
738
+
739
+ .view-all:hover {
740
+ text-decoration: underline;
741
+ }
742
+
743
+ /* Footer */
744
+ .footer {
745
+ background: var(--dark-brown);
746
+ color: white;
747
+ padding: 60px 40px 30px;
748
+ }
749
+
750
+ .footer-inner {
751
+ max-width: 1200px;
752
+ margin: 0 auto;
753
+ }
754
+
755
+ .footer-top {
756
+ display: grid;
757
+ grid-template-columns: 2fr 1fr 1fr 1fr;
758
+ gap: 60px;
759
+ margin-bottom: 50px;
760
+ }
761
+
762
+ .footer-brand h4 {
763
+ font-family: 'Montserrat', sans-serif;
764
+ font-size: 24px;
765
+ font-weight: 700;
766
+ letter-spacing: 3px;
767
+ margin-bottom: 15px;
768
+ }
769
+
770
+ .footer-brand p {
771
+ font-size: 13px;
772
+ color: rgba(255,255,255,0.7);
773
+ line-height: 1.8;
774
+ }
775
+
776
+ .footer-links h5 {
777
+ font-size: 14px;
778
+ font-weight: 600;
779
+ margin-bottom: 20px;
780
+ letter-spacing: 1px;
781
+ }
782
+
783
+ .footer-links ul {
784
+ list-style: none;
785
+ }
786
+
787
+ .footer-links li {
788
+ margin-bottom: 12px;
789
+ }
790
+
791
+ .footer-links a {
792
+ color: rgba(255,255,255,0.7);
793
+ text-decoration: none;
794
+ font-size: 13px;
795
+ transition: color 0.3s;
796
+ }
797
+
798
+ .footer-links a:hover {
799
+ color: white;
800
+ }
801
+
802
+ .footer-bottom {
803
+ padding-top: 30px;
804
+ border-top: 1px solid rgba(255,255,255,0.1);
805
+ display: flex;
806
+ justify-content: space-between;
807
+ align-items: center;
808
+ }
809
+
810
+ .footer-copyright {
811
+ font-size: 12px;
812
+ color: rgba(255,255,255,0.5);
813
+ }
814
+
815
+ .footer-social {
816
+ display: flex;
817
+ gap: 15px;
818
+ }
819
+
820
+ .footer-social a {
821
+ width: 36px;
822
+ height: 36px;
823
+ background: rgba(255,255,255,0.1);
824
+ border-radius: 50%;
825
+ display: flex;
826
+ align-items: center;
827
+ justify-content: center;
828
+ transition: all 0.3s;
829
+ }
830
+
831
+ .footer-social a:hover {
832
+ background: var(--primary-brown);
833
+ }
834
+
835
+ .footer-social svg {
836
+ width: 16px;
837
+ height: 16px;
838
+ fill: white;
839
+ }
840
+
841
+ /* Animations */
842
+ @keyframes fadeInUp {
843
+ from {
844
+ opacity: 0;
845
+ transform: translateY(30px);
846
+ }
847
+ to {
848
+ opacity: 1;
849
+ transform: translateY(0);
850
+ }
851
+ }
852
+
853
+ .animate-in {
854
+ animation: fadeInUp 0.6s ease forwards;
855
+ }
856
+
857
+ /* Responsive */
858
+ @media (max-width: 1024px) {
859
+ .feature-grid,
860
+ .bigdeal-grid {
861
+ grid-template-columns: 1fr;
862
+ gap: 40px;
863
+ }
864
+
865
+ .featured-grid,
866
+ .product-grid {
867
+ grid-template-columns: repeat(2, 1fr);
868
+ }
869
+
870
+ .footer-top {
871
+ grid-template-columns: repeat(2, 1fr);
872
+ }
873
+ }
874
+
875
+ @media (max-width: 768px) {
876
+ .header-inner {
877
+ padding: 15px 20px;
878
+ }
879
+
880
+ .nav {
881
+ display: none;
882
+ }
883
+
884
+ .hero {
885
+ padding: 60px 20px;
886
+ }
887
+
888
+ .hero-logo {
889
+ font-size: 32px;
890
+ }
891
+
892
+ .concept-section,
893
+ .feature-section,
894
+ .bigdeal-section {
895
+ padding: 60px 20px;
896
+ }
897
+
898
+ .concept-cards {
899
+ flex-direction: column;
900
+ align-items: center;
901
+ }
902
+
903
+ .featured-grid,
904
+ .product-grid {
905
+ grid-template-columns: 1fr;
906
+ }
907
+
908
+ .promo-inner {
909
+ flex-direction: column;
910
+ text-align: center;
911
+ }
912
+
913
+ .footer-top {
914
+ grid-template-columns: 1fr;
915
+ gap: 30px;
916
+ }
917
+ }
918
+
919
+ /* Product Images Placeholder Styles */
920
+ .img-placeholder {
921
+ width: 80%;
922
+ height: 80%;
923
+ background: linear-gradient(135deg, #E8E8E8 0%, #F5F5F5 100%);
924
+ border-radius: 8px;
925
+ display: flex;
926
+ align-items: center;
927
+ justify-content: center;
928
+ font-size: 12px;
929
+ color: var(--text-light);
930
+ }
931
+
932
+ .img-placeholder.washer {
933
+ background: linear-gradient(135deg, #E0E5E8 0%, #F0F3F5 100%);
934
+ }
935
+
936
+ .img-placeholder.fridge {
937
+ background: linear-gradient(135deg, #F5E8E8 0%, #FFF0F0 100%);
938
+ }
939
+
940
+ .img-placeholder.ac {
941
+ background: linear-gradient(135deg, #E8F0E8 0%, #F0F8F0 100%);
942
+ }
943
+
944
+ .img-placeholder.car {
945
+ background: linear-gradient(135deg, #E8E8F0 0%, #F0F0F8 100%);
946
+ }
947
+ </style>
948
+ </head>
949
+ <body>
950
+ <!-- Header -->
951
+ <header class="header">
952
+ <div class="header-inner">
953
+ <div class="logo">
954
+ <div class="logo-icon">
955
+ <svg viewBox="0 0 24 24">
956
+ <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
957
+ </svg>
958
+ </div>
959
+ <div>
960
+ <div class="logo-text">RETANE</div>
961
+ <div class="logo-subtitle">Rentless Life Plan</div>
962
+ </div>
963
+ </div>
964
+ <nav class="nav">
965
+ <a href="#">์ „์ฒด์ƒํ’ˆ</a>
966
+ <a href="#">๊ฐ€์ „์ œํ’ˆ</a>
967
+ <a href="#">์ž๋™์ฐจ</a>
968
+ <a href="#">๊ฐ€๊ตฌ/์ธํ…Œ๋ฆฌ์–ด</a>
969
+ <a href="#">์ด๋ฒคํŠธ</a>
970
+ <a href="#">๊ณ ๊ฐ์„ผํ„ฐ</a>
971
+ </nav>
972
+ <div class="header-actions">
973
+ <button class="header-btn">์‹œ์ž‘ํ•˜๊ธฐ</button>
974
+ </div>
975
+ </div>
976
+ </header>
977
+
978
+ <!-- Hero Section -->
979
+ <section class="hero">
980
+ <div class="hero-brand">
981
+ <div class="hero-logo">RETANE</div>
982
+ <div class="hero-tagline">Rentless Life Plan</div>
983
+ <div class="hero-divider"></div>
984
+ <div class="hero-sub">Rent + Retain | ์žƒ์ง€ ์•Š๋Š” ์†Œ๋น„์˜ ์‹œ์ž‘</div>
985
+ </div>
986
+ </section>
987
+
988
+ <!-- Concept Section -->
989
+ <section class="concept-section">
990
+ <h2 class="concept-title">"์†Œ๋น„์˜ ๊ณต์‹์ด ๋ฐ”๋€๋‹ค, ์ด์  , <span>๋ˆ์ด ๋Œ์•„์˜จ๋‹ค</span>."</h2>
991
+
992
+ <div class="concept-showcase">
993
+ <div class="concept-image">
994
+ <div class="concept-image-inner">
995
+ <div class="concept-img-item">๊ฑฐ์‹ค ์ธํ…Œ๋ฆฌ์–ด</div>
996
+ <div class="concept-img-item">์นจ์‹ค ์ธํ…Œ๋ฆฌ์–ด</div>
997
+ <div class="concept-img-item">์ฃผ๋ฐฉ ์ธํ…Œ๋ฆฌ์–ด</div>
998
+ </div>
999
+ </div>
1000
+ </div>
1001
+
1002
+ <div class="concept-cards">
1003
+ <div class="concept-card">
1004
+ <div class="concept-icon">
1005
+ <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
1006
+ <path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
1007
+ </svg>
1008
+ </div>
1009
+ <h3>์ง€์ถœ์—†๋Š” ์†Œ๋น„</h3>
1010
+ <p>๋ Œํƒˆ ๋น„์šฉ์ด ์ž์‚ฐ์œผ๋กœ ์ ๋ฆฝ๋˜์–ด ์‹ค์งˆ์ ์ธ ์ง€์ถœ์ด ์—†์Šต๋‹ˆ๋‹ค</p>
1011
+ </div>
1012
+ <div class="concept-card">
1013
+ <div class="concept-icon">
1014
+ <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
1015
+ <path d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
1016
+ </svg>
1017
+ </div>
1018
+ <h3>์†Œ์œ ๊ถŒ์˜ ์ „ํ™˜</h3>
1019
+ <p>์ผ์ • ๊ธฐ๊ฐ„ ํ›„ ์ œํ’ˆ์˜ ์™„์ „ํ•œ ์†Œ์œ ๊ถŒ์„ ๊ฐ€์ ธ๊ฐ‘๋‹ˆ๋‹ค</p>
1020
+ </div>
1021
+ <div class="concept-card">
1022
+ <div class="concept-icon">
1023
+ <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
1024
+ <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
1025
+ </svg>
1026
+ </div>
1027
+ <h3>์žƒ์ง€์•Š๋Š” ์†Œ๋น„</h3>
1028
+ <p>์ค‘๋„ํ•ด์ง€ ์‹œ์—๋„ ์ ๋ฆฝ๊ธˆ์„ ๋ณด์žฅ๋ฐ›์Šต๋‹ˆ๋‹ค</p>
1029
+ </div>
1030
+ </div>
1031
+ </section>
1032
+
1033
+ <!-- Feature Section - RETAIN -->
1034
+ <section class="feature-section">
1035
+ <div class="feature-grid">
1036
+ <div class="feature-content">
1037
+ <h2>Premium Lifestyle</h2>
1038
+ <h3>์ž๋™์ฐจ๊นŒ์ง€ ๋ฎ๋Š”<br>์†Œ๋น„์˜ <span>RETAIN</span></h3>
1039
+ <p>๊ฐ€์ „์ œํ’ˆ๋ถ€ํ„ฐ ์ž๋™์ฐจ๊นŒ์ง€, ์ƒํ™œ์— ํ•„์š”ํ•œ ๋ชจ๋“  ๊ฒƒ์„ ๋ฆฌํ…Œ์ธ์œผ๋กœ ๋ˆ„๋ฆฌ์„ธ์š”.
1040
+ ์›” ๋ Œํƒˆ๋ฃŒ๊ฐ€ ์ž์‚ฐ์œผ๋กœ ์Œ“์ด๊ณ , ๊ณ„์•ฝ ์ข…๋ฃŒ ์‹œ 100% ์†Œ์œ ๊ถŒ ์ด์ „์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.</p>
1041
+ <a href="#" class="feature-btn">์ž์„ธํžˆ ๋ณด๊ธฐ</a>
1042
+ </div>
1043
+ <div class="feature-images">
1044
+ <div class="feature-img large">
1045
+ <div class="img-placeholder car">ํ”„๋ฆฌ๋ฏธ์—„ ์ž๋™์ฐจ</div>
1046
+ </div>
1047
+ <div class="feature-img">
1048
+ <div class="img-placeholder washer">์„ธํƒ๊ธฐ</div>
1049
+ </div>
1050
+ <div class="feature-img">
1051
+ <div class="img-placeholder fridge">๋ƒ‰์žฅ๊ณ </div>
1052
+ </div>
1053
+ <div class="feature-img">
1054
+ <div class="img-placeholder">๊ฑด์กฐ๊ธฐ</div>
1055
+ </div>
1056
+ <div class="feature-img">
1057
+ <div class="img-placeholder ac">์—์–ด์ปจ</div>
1058
+ </div>
1059
+ </div>
1060
+ </div>
1061
+ </section>
1062
+
1063
+ <!-- Big Deal Section -->
1064
+ <section class="bigdeal-section">
1065
+ <div class="bigdeal-grid">
1066
+ <div class="bigdeal-images">
1067
+ <div class="bigdeal-img"><div class="img-placeholder washer">์„ธํƒ๊ธฐ</div></div>
1068
+ <div class="bigdeal-img"><div class="img-placeholder fridge">๋ƒ‰์žฅ๊ณ </div></div>
1069
+ <div class="bigdeal-img"><div class="img-placeholder">๊ฑด์กฐ๊ธฐ</div></div>
1070
+ <div class="bigdeal-img"><div class="img-placeholder ac">์—์–ด์ปจ</div></div>
1071
+ <div class="bigdeal-img"><div class="img-placeholder">TV</div></div>
1072
+ <div class="bigdeal-img"><div class="img-placeholder">์ฒญ์†Œ๊ธฐ</div></div>
1073
+ </div>
1074
+ <div class="bigdeal-content">
1075
+ <h2>Special Package</h2>
1076
+ <h3>์‹ ํ˜ผ๋ถ€๋ถ€ ๋น„๊ต์‹œ<br>BIG DEAL</h3>
1077
+ <p>์‹ ํ˜ผ๋ถ€๋ถ€๋ฅผ ์œ„ํ•œ ํŠน๋ณ„ ํŒจํ‚ค์ง€! ์ƒํ™œ์— ํ•„์š”ํ•œ ํ•„์ˆ˜ ๊ฐ€์ „์„
1078
+ ํ•œ ๋ฒˆ์— ๊ตฌ์„ฑํ•˜๊ณ  ์ถ”๊ฐ€ ํ• ์ธ ํ˜œํƒ๊นŒ์ง€ ๋ฐ›์•„๋ณด์„ธ์š”.</p>
1079
+ <a href="#" class="feature-btn">ํŒจํ‚ค์ง€ ๋ณด๊ธฐ</a>
1080
+ </div>
1081
+ </div>
1082
+ </section>
1083
+
1084
+ <!-- Promo Banner -->
1085
+ <section class="promo-banner">
1086
+ <div class="promo-inner">
1087
+ <div class="promo-text">
1088
+ <h3><span>ํ”„๋กœ๋ชจ์…˜</span> ๊ธฐ๊ฐ„ ์ถ”๊ฐ€ ํ• ์ธ</h3>
1089
+ <p>์ง€๊ธˆ ๊ฐ€์ž…ํ•˜์‹œ๋ฉด ์ฒซ 3๊ฐœ์›” ๋ Œํƒˆ๋ฃŒ 50% ํ• ์ธ + ์„ค์น˜๋น„ ๋ฌด๋ฃŒ</p>
1090
+ </div>
1091
+ <div class="promo-images">
1092
+ <div class="promo-img"><div class="img-placeholder">๊ณต๊ธฐ์ฒญ์ •๊ธฐ</div></div>
1093
+ <div class="promo-img"><div class="img-placeholder washer">๋“œ๋Ÿผ์„ธํƒ๊ธฐ</div></div>
1094
+ <div class="promo-img"><div class="img-placeholder fridge">์–‘๋ฌธํ˜•๋ƒ‰์žฅ๊ณ </div></div>
1095
+ </div>
1096
+ <button class="promo-btn">ํ˜œํƒ ํ™•์ธํ•˜๊ธฐ</button>
1097
+ </div>
1098
+ </section>
1099
+
1100
+ <!-- Featured Listings -->
1101
+ <section class="featured-section">
1102
+ <div class="section-header">
1103
+ <h2>Featured Listings</h2>
1104
+ <p>์ด๋ฒˆ ์ฃผ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ์ œํ’ˆ์„ ๋งŒ๋‚˜๋ณด์„ธ์š”</p>
1105
+ </div>
1106
+ <div class="featured-grid">
1107
+ <div class="featured-card">
1108
+ <div class="featured-card-img"><div class="img-placeholder fridge">์–‘๋ฌธํ˜• ๋ƒ‰์žฅ๊ณ </div></div>
1109
+ <div class="featured-card-content">
1110
+ <h4>LG DIOS ์–‘๋ฌธํ˜• ๋ƒ‰์žฅ๊ณ </h4>
1111
+ <p>821L / ๋งค์ง์ŠคํŽ˜์ด์Šค</p>
1112
+ <div class="featured-price">์›” 45,900์› <span>/36๊ฐœ์›”</span></div>
1113
+ </div>
1114
+ </div>
1115
+ <div class="featured-card">
1116
+ <div class="featured-card-img"><div class="img-placeholder washer">๋“œ๋Ÿผ์„ธํƒ๊ธฐ</div></div>
1117
+ <div class="featured-card-content">
1118
+ <h4>์‚ผ์„ฑ ๊ทธ๋ž‘๋ฐ AI ์„ธํƒ๊ธฐ</h4>
1119
+ <p>24kg / ๋ฒ„๋ธ”์›Œ์‹œ</p>
1120
+ <div class="featured-price">์›” 32,900์› <span>/36๊ฐœ์›”</span></div>
1121
+ </div>
1122
+ </div>
1123
+ <div class="featured-card">
1124
+ <div class="featured-card-img"><div class="img-placeholder ac">์Šคํƒ ๋“œ ์—์–ด์ปจ</div></div>
1125
+ <div class="featured-card-content">
1126
+ <h4>LG ํœ˜์„ผ ์Šคํƒ ๋“œ ์—์–ด์ปจ</h4>
1127
+ <p>18ํ‰ํ˜• / ์ธ๋ฒ„ํ„ฐ</p>
1128
+ <div class="featured-price">์›” 38,900์› <span>/48๊ฐœ์›”</span></div>
1129
+ </div>
1130
+ </div>
1131
+ <div class="featured-card">
1132
+ <div class="featured-card-img"><div class="img-placeholder">๊ฑด์กฐ๊ธฐ</div></div>
1133
+ <div class="featured-card-content">
1134
+ <h4>LG ํŠธ๋กฌ ๊ฑด์กฐ๊ธฐ</h4>
1135
+ <p>19kg / ํžˆํŠธํŽŒํ”„</p>
1136
+ <div class="featured-price">์›” 29,900์› <span>/36๊ฐœ์›”</span></div>
1137
+ </div>
1138
+ </div>
1139
+ </div>
1140
+ </section>
1141
+
1142
+ <!-- Category Section -->
1143
+ <section class="category-section">
1144
+ <div class="category-tabs">
1145
+ <button class="category-tab active">์ „์ฒด์ƒํ’ˆ</button>
1146
+ <button class="category-tab">์„ธํƒ๊ธฐ</button>
1147
+ <button class="category-tab">๋ƒ‰์žฅ๊ณ </button>
1148
+ <button class="category-tab">๊ฑด์กฐ๊ธฐ/๊ด€๋ฆฌ๊ธฐ</button>
1149
+ <button class="category-tab">์—์–ด์ปจ</button>
1150
+ <button class="category-tab">๊ณต๊ธฐ์ฒญ์ •๊ธฐ</button>
1151
+ <button class="category-tab">์‹๊ธฐ์„ธ์ฒ™๊ธฐ</button>
1152
+ <button class="category-tab">์ •์ˆ˜๊ธฐ</button>
1153
+ <button class="category-tab">์•ˆ๋งˆ์˜์ž</button>
1154
+ </div>
1155
+ <div class="product-grid">
1156
+ <div class="product-card">
1157
+ <div class="product-img">
1158
+ <span class="product-badge">์ธ๊ธฐ</span>
1159
+ <div class="img-placeholder washer">๋“œ๋Ÿผ์„ธํƒ๊ธฐ</div>
1160
+ </div>
1161
+ <div class="product-content">
1162
+ <div class="product-brand">SAMSUNG</div>
1163
+ <div class="product-name">์‚ผ์„ฑ ๊ทธ๋ž‘๋ฐ AI ๋“œ๋Ÿผ์„ธํƒ๊ธฐ 24kg</div>
1164
+ <div class="product-price">์›” 32,900์›<span class="product-original">์›” 42,900์›</span></div>
1165
+ </div>
1166
+ </div>
1167
+ <div class="product-card">
1168
+ <div class="product-img">
1169
+ <span class="product-badge">์‹ ์ƒํ’ˆ</span>
1170
+ <div class="img-placeholder fridge">๊น€์น˜๋ƒ‰์žฅ๊ณ </div>
1171
+ </div>
1172
+ <div class="product-content">
1173
+ <div class="product-brand">LG</div>
1174
+ <div class="product-name">LG DIOS ๊น€์น˜ํ†กํ†ก ์Šคํƒ ๋“œํ˜•</div>
1175
+ <div class="product-price">์›” 28,900์›<span class="product-original">์›” 35,900์›</span></div>
1176
+ </div>
1177
+ </div>
1178
+ <div class="product-card">
1179
+ <div class="product-img">
1180
+ <div class="img-placeholder">๊ฑด์กฐ๊ธฐ</div>
1181
+ </div>
1182
+ <div class="product-content">
1183
+ <div class="product-brand">LG</div>
1184
+ <div class="product-name">LG ํŠธ๋กฌ ์˜ค๋ธŒ์ œ ๊ฑด์กฐ๊ธฐ 19kg</div>
1185
+ <div class="product-price">์›” 35,900์›<span class="product-original">์›” 45,900์›</span></div>
1186
+ </div>
1187
+ </div>
1188
+ <div class="product-card">
1189
+ <div class="product-img">
1190
+ <span class="product-badge">ํŠน๊ฐ€</span>
1191
+ <div class="img-placeholder ac">๋ฒฝ๊ฑธ์ด์—์–ด์ปจ</div>
1192
+ </div>
1193
+ <div class="product-content">
1194
+ <div class="product-brand">SAMSUNG</div>
1195
+ <div class="product-name">์‚ผ์„ฑ ๋ฌดํ’ ๋ฒฝ๊ฑธ์ด ์—์–ด์ปจ 11ํ‰ํ˜•</div>
1196
+ <div class="product-price">์›” 24,900์›<span class="product-original">์›” 32,900์›</span></div>
1197
+ </div>
1198
+ </div>
1199
+ <div class="product-card">
1200
+ <div class="product-img">
1201
+ <div class="img-placeholder fridge">๋ƒ‰์žฅ๊ณ </div>
1202
+ </div>
1203
+ <div class="product-content">
1204
+ <div class="product-brand">LG</div>
1205
+ <div class="product-name">LG ์˜ค๋ธŒ์ œ์ปฌ๋ ‰์…˜ 4๋„์–ด ๋ƒ‰์žฅ๊ณ </div>
1206
+ <div class="product-price">์›” 52,900์›<span class="product-original">์›” 62,900์›</span></div>
1207
+ </div>
1208
+ </div>
1209
+ <div class="product-card">
1210
+ <div class="product-img">
1211
+ <div class="img-placeholder washer">ํ†ต๋Œ์ด์„ธํƒ๊ธฐ</div>
1212
+ </div>
1213
+ <div class="product-content">
1214
+ <div class="product-brand">SAMSUNG</div>
1215
+ <div class="product-name">์‚ผ์„ฑ ์•กํ‹ฐ๋ธŒ์›Œ์‹œ ํ†ต๋Œ์ด 18kg</div>
1216
+ <div class="product-price">์›” 19,900์›<span class="product-original">์›” 25,900์›</span></div>
1217
+ </div>
1218
+ </div>
1219
+ <div class="product-card">
1220
+ <div class="product-img">
1221
+ <span class="product-badge">๋ฒ ์ŠคํŠธ</span>
1222
+ <div class="img-placeholder">์Šคํƒ€์ผ๋Ÿฌ</div>
1223
+ </div>
1224
+ <div class="product-content">
1225
+ <div class="product-brand">LG</div>
1226
+ <div class="product-name">LG ์Šคํƒ€์ผ๋Ÿฌ ์˜ค๋ธŒ์ œ S5BOC</div>
1227
+ <div class="product-price">์›” 42,900์›<span class="product-original">์›” 52,900์›</span></div>
1228
+ </div>
1229
+ </div>
1230
+ <div class="product-card">
1231
+ <div class="product-img">
1232
+ <div class="img-placeholder car">ํ”„๋ฆฌ๋ฏธ์—„ SUV</div>
1233
+ </div>
1234
+ <div class="product-content">
1235
+ <div class="product-brand">GENESIS</div>
1236
+ <div class="product-name">์ œ๋„ค์‹œ์Šค GV80 3.0D AWD</div>
1237
+ <div class="product-price">์›” 890,000์›<span class="product-original">์›” 1,050,000์›</span></div>
1238
+ </div>
1239
+ </div>
1240
+ </div>
1241
+ </section>
1242
+
1243
+ <!-- Subcategory - ๋ƒ‰์žฅ/๊ฐ€์ „ -->
1244
+ <section class="subcategory-section">
1245
+ <div class="subcategory-header">
1246
+ <h3>๋ƒ‰์žฅ/๊ฐ€์ „</h3>
1247
+ <a href="#" class="view-all">์ „์ฒด๋ณด๊ธฐ โ†’</a>
1248
+ </div>
1249
+ <div class="product-grid">
1250
+ <div class="product-card">
1251
+ <div class="product-img"><div class="img-placeholder fridge">์–‘๋ฌธํ˜•๋ƒ‰์žฅ๊ณ </div></div>
1252
+ <div class="product-content">
1253
+ <div class="product-brand">LG</div>
1254
+ <div class="product-name">LG DIOS ์–‘๋ฌธํ˜• ๋ƒ‰์žฅ๊ณ  821L</div>
1255
+ <div class="product-price">์›” 45,900์›</div>
1256
+ </div>
1257
+ </div>
1258
+ <div class="product-card">
1259
+ <div class="product-img"><div class="img-placeholder fridge">๊น€์น˜๋ƒ‰์žฅ๊ณ </div></div>
1260
+ <div class="product-content">
1261
+ <div class="product-brand">SAMSUNG</div>
1262
+ <div class="product-name">์‚ผ์„ฑ ๋น„์Šคํฌํฌ ๊น€์น˜ํ”Œ๋Ÿฌ์Šค 4๋„์–ด</div>
1263
+ <div class="product-price">์›” 38,900์›</div>
1264
+ </div>
1265
+ </div>
1266
+ <div class="product-card">
1267
+ <div class="product-img"><div class="img-placeholder">๋ฏธ๋‹ˆ๋ƒ‰์žฅ๊ณ </div></div>
1268
+ <div class="product-content">
1269
+ <div class="product-brand">LG</div>
1270
+ <div class="product-name">LG ์˜ค๋ธŒ์ œ ์›๋„์–ด ๋ƒ‰์žฅ๊ณ  407L</div>
1271
+ <div class="product-price">์›” 25,900์›</div>
1272
+ </div>
1273
+ </div>
1274
+ <div class="product-card">
1275
+ <div class="product-img"><div class="img-placeholder fridge">์™€์ธ์…€๋Ÿฌ</div></div>
1276
+ <div class="product-content">
1277
+ <div class="product-brand">SAMSUNG</div>
1278
+ <div class="product-name">์‚ผ์„ฑ ๋น„์Šคํฌํฌ ์™€์ธ & ๋น„๋ฒ„๋ฆฌ์ง€</div>
1279
+ <div class="product-price">์›” 32,900์›</div>
1280
+ </div>
1281
+ </div>
1282
+ </div>
1283
+ </section>
1284
+
1285
+ <!-- Subcategory - ๊ณ„์ ˆ๊ฐ€์ „ -->
1286
+ <section class="subcategory-section" style="background: var(--cream);">
1287
+ <div class="subcategory-header">
1288
+ <h3>๊ณ„์ ˆ๊ฐ€์ „</h3>
1289
+ <a href="#" class="view-all">์ „์ฒด๋ณด๊ธฐ โ†’</a>
1290
+ </div>
1291
+ <div class="product-grid">
1292
+ <div class="product-card">
1293
+ <div class="product-img"><div class="img-placeholder ac">์Šคํƒ ๋“œ์—์–ด์ปจ</div></div>
1294
+ <div class="product-content">
1295
+ <div class="product-brand">LG</div>
1296
+ <div class="product-name">LG ํœ˜์„ผ ์˜ค๋ธŒ์ œ ์Šคํƒ ๋“œ ์—์–ด์ปจ</div>
1297
+ <div class="product-price">์›” 48,900์›</div>
1298
+ </div>
1299
+ </div>
1300
+ <div class="product-card">
1301
+ <div class="product-img"><div class="img-placeholder">๊ณต๊ธฐ์ฒญ์ •๊ธฐ</div></div>
1302
+ <div class="product-content">
1303
+ <div class="product-brand">SAMSUNG</div>
1304
+ <div class="product-name">์‚ผ์„ฑ ๋น„์Šคํฌํฌ ํ๋ธŒ ๊ณต๊ธฐ์ฒญ์ •๊ธฐ</div>
1305
+ <div class="product-price">์›” 18,900์›</div>
1306
+ </div>
1307
+ </div>
1308
+ <div class="product-card">
1309
+ <div class="product-img"><div class="img-placeholder">์ œ์Šต๊ธฐ</div></div>
1310
+ <div class="product-content">
1311
+ <div class="product-brand">LG</div>
1312
+ <div class="product-name">LG ํœ˜์„ผ ์ œ์Šต๊ธฐ 20L</div>
1313
+ <div class="product-price">์›” 15,900์›</div>
1314
+ </div>
1315
+ </div>
1316
+ <div class="product-card">
1317
+ <div class="product-img"><div class="img-placeholder">์˜จํ’๊ธฐ</div></div>
1318
+ <div class="product-content">
1319
+ <div class="product-brand">DYSON</div>
1320
+ <div class="product-name">๋‹ค์ด์Šจ ํ•ซ์•ค์ฟจ ๊ณต๊ธฐ์ฒญ์ •๊ธฐ</div>
1321
+ <div class="product-price">์›” 28,900์›</div>
1322
+ </div>
1323
+ </div>
1324
+ </div>
1325
+ </section>
1326
+
1327
+ <!-- Footer -->
1328
+ <footer class="footer">
1329
+ <div class="footer-inner">
1330
+ <div class="footer-top">
1331
+ <div class="footer-brand">
1332
+ <h4>RETANE</h4>
1333
+ <p>Rentless Life Plan<br>
1334
+ ์žƒ์ง€ ์•Š๋Š” ์†Œ๋น„์˜ ์‹œ์ž‘.<br>
1335
+ ๋ Œํƒˆ์˜ ์ƒˆ๋กœ์šด ํŒจ๋Ÿฌ๋‹ค์ž„์„ ๊ฒฝํ—˜ํ•˜์„ธ์š”.</p>
1336
+ </div>
1337
+ <div class="footer-links">
1338
+ <h5>์„œ๋น„์Šค</h5>
1339
+ <ul>
1340
+ <li><a href="#">์ „์ฒด์ƒํ’ˆ</a></li>
1341
+ <li><a href="#">๊ฐ€์ „์ œํ’ˆ</a></li>
1342
+ <li><a href="#">์ž๋™์ฐจ</a></li>
1343
+ <li><a href="#">๊ฐ€๊ตฌ/์ธํ…Œ๋ฆฌ์–ด</a></li>
1344
+ </ul>
1345
+ </div>
1346
+ <div class="footer-links">
1347
+ <h5>๊ณ ๊ฐ์ง€์›</h5>
1348
+ <ul>
1349
+ <li><a href="#">์ž์ฃผ๋ฌป๋Š”์งˆ๋ฌธ</a></li>
1350
+ <li><a href="#">1:1 ๋ฌธ์˜</a></li>
1351
+ <li><a href="#">์ด์šฉ์•ฝ๊ด€</a></li>
1352
+ <li><a href="#">๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ</a></li>
1353
+ </ul>
1354
+ </div>
1355
+ <div class="footer-links">
1356
+ <h5>ํšŒ์‚ฌ์ •๋ณด</h5>
1357
+ <ul>
1358
+ <li><a href="#">ํšŒ์‚ฌ์†Œ๊ฐœ</a></li>
1359
+ <li><a href="#">์ œํœด๋ฌธ์˜</a></li>
1360
+ <li><a href="#">์ฑ„์šฉ์•ˆ๋‚ด</a></li>
1361
+ <li><a href="#">๊ณต์ง€์‚ฌํ•ญ</a></li>
1362
+ </ul>
1363
+ </div>
1364
+ </div>
1365
+ <div class="footer-bottom">
1366
+ <div class="footer-copyright">
1367
+ ยฉ 2025 RETANE. All rights reserved. | ์‚ฌ์—…์ž๋“ฑ๋ก๋ฒˆํ˜ธ: 123-45-67890
1368
+ </div>
1369
+ <div class="footer-social">
1370
+ <a href="#">
1371
+ <svg viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
1372
+ </a>
1373
+ <a href="#">
1374
+ <svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
1375
+ </a>
1376
+ <a href="#">
1377
+ <svg viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
1378
+ </a>
1379
+ </div>
1380
+ </div>
1381
+ </div>
1382
+ </footer>
1383
+
1384
+ <script>
1385
+ // Tab functionality
1386
+ document.querySelectorAll('.category-tab').forEach(tab => {
1387
+ tab.addEventListener('click', function() {
1388
+ document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
1389
+ this.classList.add('active');
1390
+ });
1391
+ });
1392
+
1393
+ // Scroll animation
1394
+ const observerOptions = {
1395
+ threshold: 0.1,
1396
+ rootMargin: '0px 0px -50px 0px'
1397
+ };
1398
+
1399
+ const observer = new IntersectionObserver((entries) => {
1400
+ entries.forEach(entry => {
1401
+ if (entry.isIntersecting) {
1402
+ entry.target.classList.add('animate-in');
1403
+ }
1404
+ });
1405
+ }, observerOptions);
1406
+
1407
+ document.querySelectorAll('.concept-card, .featured-card, .product-card').forEach(el => {
1408
+ observer.observe(el);
1409
+ });
1410
+
1411
+ // Header scroll effect
1412
+ window.addEventListener('scroll', () => {
1413
+ const header = document.querySelector('.header');
1414
+ if (window.scrollY > 100) {
1415
+ header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
1416
+ } else {
1417
+ header.style.boxShadow = 'none';
1418
+ }
1419
+ });
1420
+ </script>
1421
+ </body>
1422
+ </html>