ai-hyundai/index.html at main · plannermango/ai-hyundai · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>현대자동차 브랜딩</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @keyframes float {
            0%, 100% { transform: translateY(0px) translateX(0px); }
            50% { transform: translateY(-20px) translateX(10px); }
        }
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
            animation: fade-in 0.8s ease-out forwards;
            opacity: 0;
        }
        @keyframes scale-in {
            from {
                opacity: 0;
                transform: scale(0.9);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        .animate-scale-in {
            animation: scale-in 0.3s ease-out;
        }
    </style>
</head>
<body>
    <div id="root"></div>

    <script type="text/babel">
        const { useState, useEffect, createElement: h } = React;

        // SVG 아이콘 컴포넌트들
        const ChevronRight = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
            </svg>
        );

        const Zap = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
            </svg>
        );

        const Globe = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        );

        const Leaf = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
            </svg>
        );

        const Award = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
            </svg>
        );

        const X = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
        );

        const Menu = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        );

        const ArrowRight = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14 5l7 7m0 0l-7 7m7-7H3" />
            </svg>
        );

        const Sparkles = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
            </svg>
        );

        const TrendingUp = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
            </svg>
        );

        const Users = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
        );

        const Target = (props) => (
            <svg {...props} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
        );

        function HyundaiBranding() {
            const [scrolled, setScrolled] = useState(false);
            const [activeSection, setActiveSection] = useState(0);
            const [showModal, setShowModal] = useState(false);
            const [modalContent, setModalContent] = useState(null);
            const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
            const [detailPage, setDetailPage] = useState(null);
            const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

            useEffect(() => {
                const handleScroll = () => {
                    setScrolled(window.scrollY > 50);
                };

                const handleMouseMove = (e) => {
                    setMousePosition({ x: e.clientX, y: e.clientY });
                };

                window.addEventListener('scroll', handleScroll);
                window.addEventListener('mousemove', handleMouseMove);

                return () => {
                    window.removeEventListener('scroll', handleScroll);
                    window.removeEventListener('mousemove', handleMouseMove);
                };
            }, []);

            const openModal = (content) => {
                setModalContent(content);
                setShowModal(true);
                document.body.style.overflow = 'hidden';
            };

            const closeModal = () => {
                setShowModal(false);
                setModalContent(null);
                document.body.style.overflow = 'unset';
            };

            const openDetailPage = (page) => {
                setDetailPage(page);
                window.scrollTo({ top: 0, behavior: 'smooth' });
            };

            const closeDetailPage = () => {
                setDetailPage(null);
            };

            const pillars = [
                {
                    icon: <Zap className="w-8 h-8 sm:w-12 sm:h-12" />,
                    title: "전동화 선도",
                    description: "IONIQ 라인업을 중심으로 전기차 시장을 선도하며, 지속 가능한 모빌리티의 미래를 만들어갑니다.",
                    stat: "2030년까지 17종의 전기차 출시",
                    detailContent: {
                        title: "전동화 혁신",
                        sections: [
                            {
                                subtitle: "IONIQ 라인업",
                                text: "IONIQ 5, IONIQ 6, IONIQ 7을 통해 다양한 고객의 니즈를 충족시키는 전기차 포트폴리오를 구축하고 있습니다."
                            },
                            {
                                subtitle: "E-GMP 플랫폼",
                                text: "전기차 전용 플랫폼으로 800V 초고속 충전, 500km 이상의 주행거리, 뛰어난 공간 효율성을 실현합니다."
                            },
                            {
                                subtitle: "배터리 기술",
                                text: "차세대 배터리 기술 개발을 통해 충전 시간 단축, 주행거리 증대, 안전성 향상을 지속적으로 추구합니다."
                            }
                        ]
                    }
                },
                {
                    icon: <Globe className="w-8 h-8 sm:w-12 sm:h-12" />,
                    title: "글로벌 혁신",
                    description: "전 세계 200여 개국에서 사랑받는 글로벌 브랜드로, 각 지역의 니즈를 반영한 혁신을 추구합니다.",
                    stat: "200개국 이상 진출",
                    detailContent: {
                        title: "글로벌 네트워크",
                        sections: [
                            {
                                subtitle: "글로벌 생산기지",
                                text: "한국, 미국, 체코, 터키, 인도 등 전 세계 주요 거점에 생산시설을 운영하며 현지화 전략을 실현합니다."
                            },
                            {
                                subtitle: "R&D 센터",
                                text: "한국, 미국, 독일, 인도, 중국에 R&D 센터를 두고 각 지역의 특성에 맞는 기술 개발을 진행합니다."
                            },
                            {
                                subtitle: "현지화 전략",
                                text: "각 시장의 문화와 선호도를 반영한 맞춤형 제품과 서비스를 제공하여 글로벌 경쟁력을 강화합니다."
                            }
                        ]
                    }
                },
                {
                    icon: <Leaf className="w-8 h-8 sm:w-12 sm:h-12" />,
                    title: "지속가능성",
                    description: "탄소 중립을 목표로 친환경 제조 공정과 재생 에너지 사용을 확대하고 있습니다.",
                    stat: "2045년 탄소 중립 달성 목표",
                    detailContent: {
                        title: "지속가능 경영",
                        sections: [
                            {
                                subtitle: "탄소 중립 로드맵",
                                text: "2045년까지 전체 밸류체인에서 탄소 중립을 달성하기 위한 구체적인 실행 계획을 수립하고 이행 중입니다."
                            },
                            {
                                subtitle: "순환 경제",
                                text: "재활용 소재 사용 확대, 재제조 프로그램 운영 등을 통해 순환 경제 체제를 구축하고 있습니다."
                            },
                            {
                                subtitle: "재생 에너지",
                                text: "전 세계 사업장에서 재생 에너지 사용을 확대하며, 2050년까지 RE100 달성을 목표로 합니다."
                            }
                        ]
                    }
                },
                {
                    icon: <Award className="w-8 h-8 sm:w-12 sm:h-12" />,
                    title: "디자인 철학",
                    description: "센슈어스 스포티니스(Sensuous Sportiness)를 통해 감각적이고 역동적인 디자인을 구현합니다.",
                    stat: "다수의 국제 디자인 어워드 수상",
                    detailContent: {
                        title: "디자인 혁신",
                        sections: [
                            {
                                subtitle: "센슈어스 스포티니스",
                                text: "비율의 아름다움과 역동성을 결합한 현대자동차만의 독창적인 디자인 철학입니다."
                            },
                            {
                                subtitle: "파라메트릭 디자인",
                                text: "IONIQ 시리즈에 적용된 파라메트릭 픽셀은 디지털 시대를 상징하는 현대적이고 미래지향적인 디자인입니다."
                            },
                            {
                                subtitle: "글로벌 디자인 센터",
                                text: "한국, 미국, 독일, 중국, 인도에 디자인 센터를 운영하며 다양한 관점을 융합한 디자인을 창출합니다."
                            }
                        ]
                    }
                }
            ];

            const brandStory = {
                title: "현대자동차 브랜드 스토리",
                intro: "1967년 창립 이후, 현대자동차는 '인류를 위한 진보'라는 비전 아래 끊임없는 혁신을 거듭해왔습니다.",
                timeline: [
                    { year: "1967", event: "현대자동차 설립" },
                    { year: "1975", event: "최초 고유모델 '포니' 출시" },
                    { year: "1986", event: "미국 시장 진출" },
                    { year: "1998", event: "10년 10만 마일 보증 프로그램 도입" },
                    { year: "2009", event: "제네시스 브랜드 런칭" },
                    { year: "2016", event: "IONIQ 하이브리드 출시" },
                    { year: "2021", event: "IONIQ 5 출시, 유럽 올해의 차 수상" },
                    { year: "2023", event: "글로벌 전기차 판매 3위 달성" }
                ],
                vision: "Progress for Humanity - 인류의 더 나은 삶을 위한 모빌리티 솔루션을 제공하며, 지속 가능한 미래를 만들어갑니다."
            };

            return (
                <div className="min-h-screen bg-white font-sans">
                    {/* Modal */}
                    {showModal && (
                        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black bg-opacity-60 backdrop-blur-md animate-fade-in" onClick={closeModal}>
                            <div className="relative bg-white rounded-3xl max-w-3xl w-full max-h-[90vh] overflow-hidden shadow-2xl animate-scale-in" onClick={(e) => e.stopPropagation()}>
                                <div className="sticky top-0 z-20 bg-gradient-to-r from-blue-600 to-cyan-500 p-5 sm:p-6 flex justify-between items-center">
                                    <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-white flex items-center gap-3">
                                        <Sparkles className="w-5 h-5 sm:w-6 sm:h-6" />
                                        {modalContent?.title}
                                    </h3>
                                    <button onClick={closeModal} className="p-2 hover:bg-white hover:bg-opacity-20 rounded-full transition-all transform hover:scale-110 active:scale-95">
                                        <X className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                                    </button>
                                </div>

                                <div className="overflow-y-auto max-h-[calc(90vh-80px)] p-5 sm:p-8">
                                    {modalContent?.type === 'brandStory' && (
                                        <div className="space-y-6 sm:space-y-8">
                                            <div className="bg-gradient-to-br from-blue-50 to-cyan-50 p-5 sm:p-6 rounded-2xl border border-blue-200">
                                                <p className="text-base sm:text-lg text-gray-800 leading-relaxed">{brandStory.intro}</p>
                                            </div>

                                            <div>
                                                <div className="flex items-center gap-3 mb-4 sm:mb-6">
                                                    <div className="h-1 w-12 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-full"></div>
                                                    <h4 className="text-xl sm:text-2xl font-bold" style={{ color: '#002C5F' }}>주요 연혁</h4>
                                                </div>

                                                <div className="space-y-3 sm:space-y-4">
                                                    {brandStory.timeline.map((item, index) => (
                                                        <div key={index} className="group flex gap-3 sm:gap-4 items-start p-3 sm:p-4 rounded-xl hover:bg-gradient-to-r hover:from-blue-50 hover:to-transparent transition-all duration-300">
                                                            <div className="relative">
                                                                <div className="text-base sm:text-lg font-bold min-w-[60px] sm:min-w-[80px] bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
                                                                    {item.year}
                                                                </div>
                                                                <div className="absolute left-full top-1/2 transform -translate-y-1/2 ml-2 w-2 h-2 bg-blue-500 rounded-full group-hover:scale-150 transition-transform"></div>
                                                            </div>
                                                            <div className="text-sm sm:text-base text-gray-700 flex-1 pt-0.5">{item.event}</div>
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>

                                            <div className="relative overflow-hidden bg-gradient-to-br from-blue-600 via-blue-700 to-cyan-600 p-5 sm:p-8 rounded-2xl shadow-xl">
                                                <div className="absolute top-0 right-0 w-32 h-32 bg-white rounded-full blur-3xl opacity-10"></div>
                                                <div className="relative z-10">
                                                    <div className="flex items-center gap-2 mb-3 sm:mb-4">
                                                        <Target className="w-5 h-5 sm:w-6 sm:h-6 text-cyan-300" />
                                                        <h4 className="text-lg sm:text-xl font-bold text-white">우리의 비전</h4>
                                                    </div>
                                                    <p className="text-sm sm:text-base text-white leading-relaxed opacity-95">{brandStory.vision}</p>
                                                </div>
                                            </div>
                                        </div>
                                    )}

                                    {modalContent?.type === 'vision' && (
                                        <div className="space-y-6 sm:space-y-8">
                                            <div className="bg-gradient-to-br from-blue-50 to-cyan-50 p-5 sm:p-6 rounded-2xl border border-blue-200">
                                                <p className="text-base sm:text-lg text-gray-800 leading-relaxed">
                                                    현대자동차는 2045년까지 전체 밸류체인에서 탄소 중립을 달성하고,
                                                    모빌리티의 경계를 넘어 인류의 삶을 풍요롭게 하는 혁신적인 솔루션을 제공합니다.
                                                </p>
                                            </div>

                                            <div className="grid sm:grid-cols-2 gap-4 sm:gap-6">
                                                {[
                                                    { title: "제품 전동화", desc: "2035년까지 유럽 시장 100% 전동화", icon: <Zap className="w-6 h-6" />, gradient: "from-yellow-400 to-orange-500" },
                                                    { title: "재생 에너지", desc: "2050년까지 RE100 달성", icon: <Leaf className="w-6 h-6" />, gradient: "from-green-400 to-emerald-500" },
                                                    { title: "순환 경제", desc: "재활용 소재 사용 확대", icon: <TrendingUp className="w-6 h-6" />, gradient: "from-blue-400 to-cyan-500" },
                                                    { title: "수소 사회", desc: "수소 모빌리티 생태계 구축", icon: <Globe className="w-6 h-6" />, gradient: "from-purple-400 to-pink-500" }
                                                ].map((item, index) => (
                                                    <div key={index} className="group relative bg-white p-5 sm:p-6 rounded-2xl border-2 border-gray-100 hover:border-blue-300 transition-all duration-300 hover:shadow-xl overflow-hidden">
                                                        <div className={`absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br ${item.gradient} rounded-full blur-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-500`}></div>
                                                        <div className="relative z-10">
                                                            <div className={`inline-flex p-3 rounded-xl bg-gradient-to-br ${item.gradient} text-white mb-3 sm:mb-4 group-hover:scale-110 transition-transform duration-300`}>
                                                                {item.icon}
                                                            </div>
                                                            <h4 className="font-bold mb-2 text-base sm:text-lg" style={{ color: '#002C5F' }}>{item.title}</h4>
                                                            <p className="text-xs sm:text-sm text-gray-700 leading-relaxed">{item.desc}</p>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    )}
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Detail Page */}
                    {detailPage && (
                        <div className="fixed inset-0 z-[100] bg-white overflow-y-auto">
                            <div className="sticky top-0 bg-white shadow-md z-10">
                                <div className="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex items-center gap-4">
                                    <button onClick={closeDetailPage} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
                                        <X className="w-5 h-5 sm:w-6 sm:h-6" />
                                    </button>
                                    <h2 className="text-xl sm:text-2xl font-bold" style={{ color: '#002C5F' }}>
                                        {detailPage.title}
                                    </h2>
                                </div>
                            </div>

                            <div className="max-w-4xl mx-auto px-4 sm:px-6 py-8 sm:py-12">
                                <div className="space-y-8 sm:space-y-12">
                                    {detailPage.sections.map((section, index) => (
                                        <div key={index} className="space-y-4">
                                            <h3 className="text-xl sm:text-2xl font-bold" style={{ color: '#00AAD2' }}>
                                                {section.subtitle}
                                            </h3>
                                            <p className="text-base sm:text-lg text-gray-700 leading-relaxed">
                                                {section.text}
                                            </p>
                                            <div className="h-px bg-gradient-to-r from-blue-200 to-transparent"></div>
                                        </div>
                                    ))}
                                </div>

                                <button onClick={closeDetailPage} className="mt-8 sm:mt-12 bg-gradient-to-r from-blue-900 to-blue-700 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-full font-semibold hover:shadow-lg transition-all flex items-center gap-2 mx-auto">
                                    돌아가기
                                </button>
                            </div>
                        </div>
                    )}

                    {/* Navigation */}
                    <nav className={`fixed w-full z-50 transition-all duration-300 ${scrolled ? 'bg-white shadow-lg' : 'bg-transparent'}`}>
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex justify-between items-center">
                            <div className="text-xl sm:text-2xl font-bold" style={{ color: '#002C5F' }}>HYUNDAI</div>
                            <div className="hidden md:flex gap-6 lg:gap-8 text-sm font-medium">
                                <a href="#about" className="hover:text-blue-600 transition-colors" style={{ color: scrolled ? '#002C5F' : 'white' }}>브랜드 소개</a>
                                <a href="#pillars" className="hover:text-blue-600 transition-colors" style={{ color: scrolled ? '#002C5F' : 'white' }}>핵심 가치</a>
                                <a href="#vision" className="hover:text-blue-600 transition-colors" style={{ color: scrolled ? '#002C5F' : 'white' }}>비전</a>
                            </div>
                            <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors" style={{ color: scrolled ? '#002C5F' : 'white' }}>
                                <Menu className="w-6 h-6" />
                            </button>
                        </div>
                        {mobileMenuOpen && (
                            <div className="md:hidden bg-white border-t border-gray-200 shadow-lg">
                                <div className="px-4 py-3 space-y-3">
                                    <a href="#about" className="block py-2 text-sm font-medium hover:text-blue-600 transition-colors" style={{ color: '#002C5F' }} onClick={() => setMobileMenuOpen(false)}>브랜드 소개</a>
                                    <a href="#pillars" className="block py-2 text-sm font-medium hover:text-blue-600 transition-colors" style={{ color: '#002C5F' }} onClick={() => setMobileMenuOpen(false)}>핵심 가치</a>
                                    <a href="#vision" className="block py-2 text-sm font-medium hover:text-blue-600 transition-colors" style={{ color: '#002C5F' }} onClick={() => setMobileMenuOpen(false)}>비전</a>
                                </div>
                            </div>
                        )}
                    </nav>

                    {/* Hero Section */}
                    <section className="relative min-h-screen flex items-center justify-center overflow-hidden" style={{ background: 'linear-gradient(135deg, #001a3d 0%, #002C5F 50%, #00AAD2 100%)' }}>
                        <div className="absolute inset-0">
                            <div className="absolute top-1/4 left-1/4 w-48 h-48 sm:w-96 sm:h-96 bg-blue-400 rounded-full blur-3xl opacity-20 animate-pulse" style={{ transform: `translate(${mousePosition.x * 0.02}px, ${mousePosition.y * 0.02}px)` }}></div>
                            <div className="absolute bottom-1/4 right-1/4 w-48 h-48 sm:w-96 sm:h-96 bg-cyan-300 rounded-full blur-3xl opacity-20 animate-pulse" style={{ transform: `translate(${mousePosition.x * -0.02}px, ${mousePosition.y * -0.02}px)`, animationDelay: '1s' }}></div>
                            <div className="absolute top-1/2 left-1/2 w-64 h-64 bg-blue-500 rounded-full blur-3xl opacity-10 animate-pulse" style={{ transform: `translate(-50%, -50%) translate(${mousePosition.x * 0.01}px, ${mousePosition.y * 0.01}px)`, animationDelay: '0.5s' }}></div>
                        </div>
                        <div className="absolute inset-0 overflow-hidden pointer-events-none">
                            {[...Array(20)].map((_, i) => (
                                <div key={i} className="absolute w-1 h-1 bg-white rounded-full opacity-30" style={{ left: `${Math.random() * 100}%`, top: `${Math.random() * 100}%`, animation: `float ${5 + Math.random() * 10}s linear infinite`, animationDelay: `${Math.random() * 5}s` }}></div>
                            ))}
                        </div>

                        <div className="relative z-10 text-center text-white px-4 sm:px-6 max-w-6xl py-20 sm:py-0">
                            <div className="inline-flex items-center gap-2 bg-white bg-opacity-10 backdrop-blur-md border border-white border-opacity-20 rounded-full px-4 sm:px-6 py-2 sm:py-3 mb-6 sm:mb-8 animate-fade-in">
                                <Sparkles className="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300" />
                                <span className="text-xs sm:text-sm font-medium">Global Top 3 Automotive Brand</span>
                            </div>
                            <h1 className="text-4xl sm:text-6xl md:text-7xl lg:text-8xl font-bold mb-4 sm:mb-6 leading-tight bg-clip-text text-transparent bg-gradient-to-r from-white via-blue-100 to-cyan-200 animate-fade-in" style={{ animationDelay: '0.2s' }}>Progress for Humanity</h1>
                            <p className="text-base sm:text-xl md:text-2xl mb-8 sm:mb-12 opacity-90 leading-relaxed max-w-3xl mx-auto animate-fade-in" style={{ animationDelay: '0.4s' }}>인류를 위한 진보, 현대자동차가 만들어가는 더 나은 미래</p>

                            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fade-in" style={{ animationDelay: '0.6s' }}>
                                <button onClick={() => openModal({ title: brandStory.title, type: 'brandStory' })} className="group relative bg-white text-blue-900 px-6 sm:px-8 py-3 sm:py-4 rounded-full font-semibold text-base sm:text-lg overflow-hidden transition-all transform hover:scale-105 flex items-center gap-2 shadow-2xl">
                                    <span className="relative z-10 flex items-center gap-2">브랜드 스토리 보기 <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform" /></span>
                                    <div className="absolute inset-0 bg-gradient-to-r from-blue-50 to-cyan-50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                                </button>
                                <button onClick={() => { document.getElementById('pillars').scrollIntoView({ behavior: 'smooth' }); }} className="group bg-white bg-opacity-10 backdrop-blur-md border-2 border-white border-opacity-30 text-white px-6 sm:px-8 py-3 sm:py-4 rounded-full font-semibold text-base sm:text-lg hover:bg-opacity-20 transition-all flex items-center gap-2">
                                    핵심 가치 탐색 <ArrowRight className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform" />
                                </button>
                            </div>
                        </div>
                        <div className="absolute bottom-6 sm:bottom-10 left-1/2 transform -translate-x-1/2 hidden sm:block">
                            <div className="flex flex-col items-center gap-2 animate-bounce">
                                <div className="w-6 h-10 border-2 border-white border-opacity-50 rounded-full flex justify-center">
                                    <div className="w-1 h-3 bg-white rounded-full mt-2 animate-pulse"></div>
                                </div>
                                <span className="text-white text-xs opacity-70">Scroll</span>
                            </div>
                        </div>
                    </section>

                    {/* About Section */}
                    <section id="about" className="py-12 sm:py-16 md:py-24 bg-gradient-to-br from-gray-50 via-blue-50 to-gray-50 relative overflow-hidden">
                        <div className="absolute inset-0 opacity-5">
                            <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, #002C5F 1px, transparent 0)', backgroundSize: '40px 40px' }}></div>
                        </div>
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
                            <div className="grid md:grid-cols-2 gap-8 sm:gap-12 md:gap-16 items-center">
                                <div className="space-y-6">
                                    <div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 rounded-full px-4 py-2 text-sm font-semibold">
                                        <Target className="w-4 h-4" />Brand Identity
                                    </div>
                                    <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6 leading-tight" style={{ color: '#002C5F' }}>차별화된<br /><span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-500">브랜드 가치</span></h2>
                                    <div className="space-y-4">
                                        <p className="text-base sm:text-lg text-gray-700 leading-relaxed">현대자동차는 단순한 자동차 제조사를 넘어, <strong className="text-blue-700">스마트 모빌리티 솔루션 프로바이더</strong>로 진화하고 있습니다.</p>
                                        <p className="text-base sm:text-lg text-gray-700 leading-relaxed">우리는 고객의 삶을 더욱 편리하고 지속 가능하게 만드는 혁신적인 기술과 서비스를 제공하며, 전 세계인의 일상에 긍정적인 변화를 만들어갑니다.</p>
                                    </div>
                                    <div className="flex flex-wrap gap-3 pt-4">
                                        <div className="flex items-center gap-2 bg-white border border-blue-200 rounded-full px-4 py-2 text-sm">
                                            <TrendingUp className="w-4 h-4 text-blue-600" /><span className="font-medium text-gray-700">지속 성장</span>
                                        </div>
                                        <div className="flex items-center gap-2 bg-white border border-blue-200 rounded-full px-4 py-2 text-sm">
                                            <Users className="w-4 h-4 text-blue-600" /><span className="font-medium text-gray-700">고객 중심</span>
                                        </div>
                                        <div className="flex items-center gap-2 bg-white border border-blue-200 rounded-full px-4 py-2 text-sm">
                                            <Sparkles className="w-4 h-4 text-blue-600" /><span className="font-medium text-gray-700">혁신 기술</span>
                                        </div>
                                    </div>
                                </div>
                                <div className="grid grid-cols-2 gap-3 sm:gap-4 md:gap-6">
                                    {[
                                        { number: "78년", label: "혁신의 역사", gradient: "from-blue-500 to-blue-600" },
                                        { number: "7백만대+", label: "연간 판매량", gradient: "from-cyan-500 to-blue-500" },
                                        { number: "120,000명+", label: "글로벌 임직원", gradient: "from-blue-600 to-cyan-600" },
                                        { number: "Top 3", label: "글로벌 자동차 기업", gradient: "from-cyan-600 to-blue-700" }
                                    ].map((stat, index) => (
                                        <div key={index} className="group relative bg-white backdrop-blur-lg p-4 sm:p-6 md:p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 overflow-hidden">
                                            <div className={`absolute inset-0 bg-gradient-to-br ${stat.gradient} opacity-0 group-hover:opacity-5 transition-opacity duration-500`}></div>
                                            <div className="relative z-10">
                                                <div className="text-2xl sm:text-3xl md:text-4xl font-bold mb-1 sm:mb-2 bg-clip-text text-transparent bg-gradient-to-br from-blue-600 to-cyan-500">{stat.number}</div>
                                                <div className="text-xs sm:text-sm md:text-base text-gray-600 font-medium">{stat.label}</div>
                                            </div>
                                            <div className="absolute -bottom-2 -right-2 w-20 h-20 bg-gradient-to-br from-blue-100 to-cyan-100 rounded-full blur-2xl opacity-0 group-hover:opacity-50 transition-opacity duration-500"></div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </section>

                    {/* Pillars Section */}
                    <section id="pillars" className="py-12 sm:py-16 md:py-24 bg-white relative overflow-hidden">
                        <div className="absolute inset-0 opacity-30">
                            <div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-blue-100 to-transparent rounded-full blur-3xl"></div>
                            <div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-tr from-cyan-100 to-transparent rounded-full blur-3xl"></div>
                        </div>
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
                            <div className="text-center mb-12 sm:mb-16">
                                <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-full px-4 sm:px-6 py-2 sm:py-3 mb-4 sm:mb-6">
                                    <Sparkles className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600" /><span className="text-xs sm:text-sm font-semibold text-blue-800">Core Values</span>
                                </div>
                                <h2 className="text-3xl sm:text-4xl md:text-5xl font-bold mb-3 sm:mb-4" style={{ color: '#002C5F' }}>4가지 핵심 가치</h2>
                                <p className="text-base sm:text-lg text-gray-600 max-w-2xl mx-auto">현대자동차만의 차별화된 경쟁력</p>
                            </div>
                            <div className="grid sm:grid-cols-2 gap-6 sm:gap-8">
                                {pillars.map((pillar, index) => (
                                    <div key={index} className="group relative" onMouseEnter={() => setActiveSection(index)}>
                                        <div className="absolute -inset-0.5 bg-gradient-to-r from-blue-400 to-cyan-400 rounded-2xl sm:rounded-3xl blur opacity-0 group-hover:opacity-30 transition duration-500"></div>
                                        <div className="relative bg-white p-6 sm:p-8 rounded-2xl sm:rounded-3xl border border-gray-200 group-hover:border-transparent transition-all duration-500 shadow-lg group-hover:shadow-2xl overflow-hidden">
                                            <div className="absolute inset-0 opacity-0 group-hover:opacity-5 transition-opacity duration-500">
                                                <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle at 2px 2px, #00AAD2 1px, transparent 0)', backgroundSize: '30px 30px' }}></div>
                                            </div>
                                            <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-blue-100 to-transparent rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                                            <div className="relative z-10">
                                                <div className="mb-5 sm:mb-6 relative inline-block">
                                                    <div className="absolute inset-0 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-2xl blur-lg opacity-0 group-hover:opacity-50 transition-opacity duration-500"></div>
                                                    <div className="relative bg-gradient-to-br from-blue-50 to-cyan-50 p-3 sm:p-4 rounded-2xl text-blue-600 transform group-hover:scale-110 group-hover:rotate-3 transition-all duration-500">{pillar.icon}</div>
                                                </div>
                                                <h3 className="text-xl sm:text-2xl font-bold mb-3 sm:mb-4 group-hover:text-blue-600 transition-colors duration-300" style={{ color: '#002C5F' }}>{pillar.title}</h3>
                                                <p className="text-sm sm:text-base text-gray-700 mb-5 sm:mb-6 leading-relaxed">{pillar.description}</p>
                                                <div className="flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4">
                                                    <div className="inline-flex items-center text-xs sm:text-sm font-semibold px-3 sm:px-4 py-2 bg-gradient-to-r from-blue-50 to-cyan-50 border border-blue-200 rounded-full text-blue-700 group-hover:border-blue-400 transition-colors duration-300">
                                                        <TrendingUp className="w-3 h-3 sm:w-4 sm:h-4 mr-2" />{pillar.stat}
                                                    </div>
                                                    <button onClick={() => openDetailPage(pillar.detailContent)} className="inline-flex items-center text-xs sm:text-sm font-semibold text-blue-600 hover:text-blue-700 gap-1 group-hover:gap-2 transition-all duration-300 hover:underline">
                                                        자세히 보기 <ArrowRight className="w-3 h-3 sm:w-4 sm:h-4 group-hover:translate-x-1 transition-transform" />
                                                    </button>
                                                </div>
                                            </div>
                                            <div className="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 via-cyan-500 to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </section>

                    {/* Vision Section */}
                    <section id="vision" className="py-12 sm:py-16 md:py-24 relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #001a3d 0%, #002C5F 50%, #00AAD2 100%)' }}>
                        <div className="absolute inset-0">
                            <div className="absolute top-0 right-0 w-48 h-48 sm:w-96 sm:h-96 bg-blue-400 rounded-full blur-3xl opacity-20 animate-pulse"></div>
                            <div className="absolute bottom-0 left-0 w-48 h-48 sm:w-96 sm:h-96 bg-cyan-400 rounded-full blur-3xl opacity-20 animate-pulse" style={{ animationDelay: '1s' }}></div>
                            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 sm:w-96 h-64 sm:h-96 bg-blue-500 rounded-full blur-3xl opacity-10"></div>
                        </div>
                        <div className="absolute inset-0 opacity-5">
                            <div className="absolute inset-0" style={{ backgroundImage: 'linear-gradient(to right, rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.1) 1px, transparent 1px)', backgroundSize: '60px 60px' }}></div>
                        </div>
                        <div className="max-w-6xl mx-auto px-4 sm:px-6 relative z-10">
                            <div className="text-center mb-8 sm:mb-12">
                                <div className="inline-flex items-center gap-2 bg-white bg-opacity-10 backdrop-blur-md border border-white border-opacity-20 rounded-full px-4 sm:px-6 py-2 sm:py-3 mb-4 sm:mb-6">
                                    <Target className="w-4 h-4 sm:w-5 sm:h-5 text-cyan-300" /><span className="text-xs sm:text-sm font-semibold text-white">Future Vision</span>
                                </div>
                                <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 sm:mb-6 md:mb-8">
                                    <span className="bg-clip-text text-transparent bg-gradient-to-r from-white via-cyan-200 to-blue-200">2045 비전</span>
                                </h2>
                                <p className="text-base sm:text-xl md:text-2xl text-white mb-8 sm:mb-10 md:mb-12 leading-relaxed opacity-90 max-w-4xl mx-auto">
                                    현대자동차는 탄소 중립 달성과 함께<br className="hidden sm:block" />
                                    <strong className="text-cyan-300">모빌리티의 경계를 넘어 새로운 가치를 창출</strong>하며<br className="hidden sm:block" />
                                    인류의 더 나은 삶에 기여하겠습니다.
                                </p>
                            </div>
                            <div className="grid sm:grid-cols-3 gap-4 sm:gap-6 mb-10 sm:mb-12">
                                {[
                                    { value: "100%", label: "전동화 전환", icon: <Zap className="w-6 h-6 sm:w-8 sm:h-8" /> },
                                    { value: "RE100", label: "재생에너지 사용", icon: <Leaf className="w-6 h-6 sm:w-8 sm:h-8" /> },
                                    { value: "Zero", label: "탄소 배출", icon: <Globe className="w-6 h-6 sm:w-8 sm:h-8" /> }
                                ].map((item, index) => (
                                    <div key={index} className="group relative">
                                        <div className="absolute -inset-0.5 bg-gradient-to-r from-cyan-400 to-blue-400 rounded-2xl sm:rounded-3xl blur opacity-0 group-hover:opacity-50 transition duration-500"></div>
                                        <div className="relative bg-white bg-opacity-10 backdrop-blur-xl p-6 sm:p-8 rounded-2xl sm:rounded-3xl border border-white border-opacity-20 group-hover:bg-opacity-20 transition-all duration-500 transform group-hover:-translate-y-2">
                                            <div className="flex flex-col items-center text-center">
                                                <div className="mb-3 sm:mb-4 text-cyan-300 group-hover:scale-110 transition-transform duration-500">{item.icon}</div>
                                                <div className="text-3xl sm:text-4xl md:text-5xl font-bold text-white mb-2 sm:mb-3 bg-clip-text text-transparent bg-gradient-to-br from-white to-cyan-200">{item.value}</div>
                                                <div className="text-xs sm:text-sm md:text-base text-white opacity-90 font-medium">{item.label}</div>
                                            </div>
                                            <div className="absolute inset-0 rounded-2xl sm:rounded-3xl border-2 border-transparent group-hover:border-cyan-400 group-hover:border-opacity-50 transition-all duration-500"></div>
                                        </div>
                                    </div>
                                ))}
                            </div>
                            <div className="text-center">
                                <button onClick={() => openModal({ title: '2045 비전 상세', type: 'vision' })} className="group relative inline-flex items-center gap-2 sm:gap-3 bg-white text-blue-900 px-6 sm:px-10 py-3 sm:py-4 rounded-full font-semibold text-sm sm:text-base md:text-lg shadow-2xl overflow-hidden transition-all transform hover:scale-105">
                                    <span className="relative z-10 flex items-center gap-2">비전 자세히 보기 <ChevronRight className="w-4 h-4 sm:w-5 sm:h-5 group-hover:translate-x-1 transition-transform" /></span>
                                    <div className="absolute inset-0 bg-gradient-to-r from-blue-50 to-cyan-50 opacity-0 group-hover:opacity-100 transition-opacity"></div>
                                    <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 bg-gradient-to-r from-transparent via-white to-transparent opacity-20"></div>
                                </button>
                            </div>
                        </div>
                        <div className="absolute bottom-0 left-0 right-0">
                            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-auto">
                                <path d="M0 120L60 110C120 100 240 80 360 70C480 60 600 60 720 65C840 70 960 80 1080 85C1200 90 1320 90 1380 90L1440 90V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0V120Z" fill="white" fillOpacity="0.1"/>
                            </svg>
                        </div>
                    </section>

                    {/* Footer */}
                    <footer className="bg-gray-900 text-white py-8 sm:py-10 md:py-12">
                        <div className="max-w-7xl mx-auto px-4 sm:px-6 text-center">
                            <div className="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4">HYUNDAI</div>
                            <p className="text-sm sm:text-base text-gray-400 mb-4 sm:mb-6">Progress for Humanity</p>
                            <div className="text-xs sm:text-sm text-gray-500">© 2024 Hyundai Motor Company. All Rights Reserved.</div>
                        </div>
                    </footer>
                </div>
            );
        }

        ReactDOM.render(<HyundaiBranding />, document.getElementById('root'));
    </script>
</body>
</html>