现在开始构建完整的音乐学院首页HTML代码。
```json
{
"summary": "为音乐学院设计奢华古典风格的首页，采用深色背景与金色点缀的配色体系，Playfair Display与DM Sans字体组合营造优雅杂志感。包含Hero全屏区域、学院介绍、三大特色亮点、师资展示、专业课程网格、数据统计、CTA招生及页脚，所有区块均配有滚动渐入动画和精致的悬停交互。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>维也纳国际音乐学院 | Vienna International Conservatory</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,4…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --gold: #C9A84C;\n --gold-light: #DFC06B;\n --gold-dark: #A8882F;\n --ebony: #0a0a0a;\n --ebony-light: #111;\n --charcoal: #1a1a1a;\n --cream: #F5F0E8;\n --text-muted: #888;\n }\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n body {\n font-family: 'DM Sans', sans-serif;\n background-color: var(--ebony);\n color: var(--cream);\n overflow-x: hidden;\n }\n h1, h2, h3, h4, .font-serif {\n font-family: 'Playfair Display', serif;\n }\n \n /* 自定义滚动条 */\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: var(--ebony);\n }\n ::-webkit-scrollbar-thumb {\n background: var(--gold-dark);\n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: var(--gold);\n }\n\n /* 金色装饰线 */\n .gold-line {\n width: 60px;\n height: 2px;\n background: linear-gradient(90deg, var(--gold), transparent);\n display: block;\n }\n .gold-line-center {\n width: 80px;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n display: block;\n margin: 0 auto;\n }\n .gold-line-vertical {\n width: 2px;\n height: 60px;\n background: linear-gradient(180deg, var(--gold), transparent);\n display: block;\n }\n\n /* Hero 背景 */\n .hero-bg {\n position: absolute;\n inset: 0;\n background: \n radial-gradient(ellipse 80% 60% at 70% 40%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),\n radial-gradient(ellipse 50% 50% at 20% 70%, rgba(100, 120, 200, 0.05) 0%, transparent 50%),\n linear-gradient(135deg, #0a0a0a 0%, #0d0d0d 40%, #0a0a0a 100%);\n }\n .hero-bg::before {\n content: '';\n position: absolute;\n inset: 0;\n background: url('/assets/images/abstract/abstract-8.jpg') center 30% / cover no-repeat;\n opacity: 0.15;\n mix-blend-mode: screen;\n }\n .hero-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: \n repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 40px,\n rgba(201, 168, 76, 0.02) 40px,\n rgba(201, 168, 76, 0.02) 41px\n );\n pointer-events: none;\n }\n\n /* 粒子装饰 */\n .particle {\n position: absolute;\n width: 3px;\n height: 3px;\n background: var(--gold);\n border-radius: 50%;\n opacity: 0;\n animation: floatParticle 8s infinite ease-in-out;\n }\n @keyframes floatParticle {\n 0%, 100% { opacity: 0; transform: translateY(0) scale(0); }\n 10% { opacity: 0.6; }\n 50% { opacity: 0.2; transform: translateY(-30px) scale(1); }\n 90% { opacity: 0.6; }\n }\n\n /* 导航栏动画 */\n .nav-scrolled {\n background: rgba(10, 10, 10, 0.92) !important;\n backdrop-filter: blur(20px) !important;\n border-bottom: 1px solid rgba(201, 168, 76, 0.15) !important;\n }\n\n /* 卡片悬停效果 */\n .feature-card {\n position: relative;\n background: linear-gradient(145deg, rgba(26, 26, 26, 0.8), rgba(17, 17, 17, 0.8));\n border: 1px solid rgba(201, 168, 76, 0.08);\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n overflow: hidden;\n }\n .feature-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n .feature-card:hover {\n border-color: rgba(201, 168, 76, 0.3);\n transform: translateY(-8px);\n box-shadow: 0 20px 60px rgba(0,0,0,0.4), 0 0 40px rgba(201, 168, 76, 0.05);\n }\n .feature-card:hover::before {\n opacity: 1;\n }\n .feature-card .icon-wrapper {\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n }\n .feature-card:hover .icon-wrapper {\n transform: scale(1.1);\n color: var(--gold-light);\n }\n\n /* 教授卡片 */\n .faculty-card {\n position: relative;\n overflow: hidden;\n border-radius: 0;\n transition: all 0.5s ease;\n }\n .faculty-card .faculty-img-wrapper {\n position: relative;\n overflow: hidden;\n aspect-ratio: 3/4;\n }\n .faculty-card .faculty-img-wrapper img {\n transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n .faculty-card:hover .faculty-img-wrapper img {\n transform: scale(1.05);\n }\n .faculty-card .faculty-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.95) 100%);\n opacity: 0;\n transition: opacity 0.5s ease;\n }\n .faculty-card:hover .faculty-overlay {\n opacity: 1;\n }\n .faculty-card .faculty-social {\n position: absolute;\n bottom: 20px;\n left: 0;\n right: 0;\n display: flex;\n justify-content: center;\n gap: 16px;\n transform: translateY(20px);\n opacity: 0;\n transition: all 0.5s ease 0.1s;\n }\n .faculty-card:hover .faculty-social {\n transform: translateY(0);\n opacity: 1;\n }\n .faculty-card .faculty-social a {\n color: var(--cream);\n font-size: 1.1rem;\n transition: color 0.3s ease;\n }\n .faculty-card .faculty-social a:hover {\n color: var(--gold);\n }\n\n /* 课程卡片 */\n .program-card {\n position: relative;\n background: linear-gradient(145deg, rgba(26, 26, 26, 0.6), rgba(17, 17, 17, 0.6));\n border: 1px solid rgba(255,255,255,0.04);\n transition: all 0.4s ease;\n overflow: hidden;\n }\n .program-card::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 0.5s ease;\n }\n .program-card:hover {\n border-color: rgba(201, 168, 76, 0.2);\n transform: translateY(-4px);\n }\n .program-card:hover::after {\n transform: scaleX(1);\n }\n .program-icon {\n font-size: 1.8rem;\n color: var(--gold);\n transition: all 0.4s ease;\n }\n .program-card:hover .program-icon {\n transform: scale(1.15);\n }\n\n /* 统计数据 */\n .stat-item {\n text-align: center;\n padding: 2rem 1rem;\n }\n .stat-number {\n font-family: 'Playfair Display', serif;\n font-size: 3.5rem;\n font-weight: 700;\n color: var(--gold);\n line-height: 1;\n letter-spacing: -1px;\n }\n @media (max-width: 768px) {\n .stat-number {\n font-size: 2.5rem;\n }\n }\n\n /* CTA区域 */\n .cta-section {\n position: relative;\n background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0a0a0a 100%);\n overflow: hidden;\n }\n .cta-section::before {\n content: '';\n position: absolute;\n inset: 0;\n background: url('/assets/images/hero/bg-pattern-hero.png') center / cover no-repeat;\n opacity: 0.06;\n mix-blend-mode: screen;\n }\n .cta-gold-border {\n position: relative;\n border: 1px solid rgba(201, 168, 76, 0.2);\n }\n .cta-gold-border::before {\n content: '';\n position: absolute;\n top: -1px;\n left: 20%;\n right: 20%;\n height: 2px;\n background: linear-gradient(90deg, transparent, var(--gold), transparent);\n }\n\n /* 按钮样式 */\n .btn-gold {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 14px 36px;\n background: linear-gradient(135deg, var(--gold), var(--gold-dark));\n color: #0a0a0a;\n font-weight: 600;\n font-size: 0.95rem;\n letter-spacing: 0.5px;\n border: none;\n cursor: pointer;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\n position: relative;\n overflow: hidden;\n text-decoration: none;\n font-family: 'DM Sans', sans-serif;\n }\n .btn-gold::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, var(--gold-light), var(--gold));\n opacity: 0;\n transition: opacity 0.4s ease;\n }\n .btn-gold:hover {\n transform: translateY(-2px);\n box-shadow: 0 12px 40px rgba(201, 168, 76, 0.25);\n }\n .btn-gold:hover::before {\n opacity: 1;\n }\n .btn-gold span {\n position: relative;\n z-index: 1;\n }\n .btn-gold i {\n position: relative;\n z-index: 1;\n transition: transform 0.3s ease;\n }\n .btn-gold:hover i {\n transform: translateX(4px);\n }\n\n .btn-outline {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 12px 32px;\n background: transparent;\n color: var(--gold);\n font-weight: 500;\n font-size: 0.9rem;\n letter-spacing: 0.5px;\n border: 1px solid rgba(201, 168, 76, 0.4);\n cursor: pointer;\n transition: all 0.4s ease;\n text-decoration: none;\n font-family: 'DM Sans', sans-serif;\n }\n .btn-outline:hover {\n background: rgba(201, 168, 76, 0.08);\n border-color: var(--gold);\n transform: translateY(-2px);\n }\n\n /* 滚动动画 */\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n }\n .reveal.active {\n opacity: 1;\n transform: translateY(0);\n }\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n .reveal-delay-4 { transition-delay: 0.4s; }\n .reveal-delay-5 { transition-delay: 0.5s; }\n\n /* 下划线动画 */\n .nav-link {\n position: relative;\n color: rgba(245, 240, 232, 0.7);\n text-decoration: none;\n transition: color 0.3s ease;\n font-size: 0.85rem;\n letter-spacing: 1px;\n text-transform: uppercase;\n }\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 1px;\n background: var(--gold);\n transition: width 0.4s ease;\n }\n .nav-link:hover {\n color: var(--cream);\n }\n .nav-link:hover::after {\n width: 100%;\n }\n\n /* Section标题 */\n .section-title {\n font-family: 'Playfair Display', serif;\n font-size: 2.8rem;\n font-weight: 700;\n letter-spacing: -0.5px;\n line-height: 1.2;\n }\n .section-subtitle {\n font-size: 1.05rem;\n color: var(--text-muted);\n line-height: 1.8;\n max-width: 540px;\n }\n @media (max-width: 768px) {\n .section-title {\n font-size: 2rem;\n }\n }\n\n /* Hero 文字动画 */\n .hero-title {\n font-family: 'Playfair Display', serif;\n font-size: clamp(3.2rem, 8vw, 7rem);\n font-weight: 700;\n line-height: 1.05;\n letter-spacing: -1.5px;\n }\n .hero-subtitle {\n font-size: 1.1rem;\n color: rgba(245, 240, 232, 0.6);\n line-height: 1.8;\n max-width: 480px;\n }\n\n /* 滚动指示器 */\n .scroll-indicator {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n color: rgba(245, 240, 232, 0.3);\n font-size: 0.7rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n animation: scrollPulse 2s ease-in-out infinite;\n }\n .scroll-indicator .line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(201, 168, 76, 0.5), transparent);\n }\n @keyframes scrollPulse {\n 0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }\n 50% { opacity: 1; transform: translateX(-50%) translateY(8px); }\n }\n\n /* 汉堡菜单 */\n .hamburger {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n padding: 4px;\n }\n .hamburger span {\n width: 24px;\n height: 1.5px;\n background: var(--cream);\n transition: all 0.3s ease;\n }\n .hamburger.active span:nth-child(1) {\n transform: rotate(45deg) translate(5px, 5px);\n }\n .hamburger.active span:nth-child(2) {\n opacity: 0;\n }\n .hamburger.active span:nth-child(3) {\n transform: rotate(-45deg) translate(5px, -5px);\n }\n @media (max-width: 768px) {\n .hamburger {\n display: flex;\n }\n .nav-menu {\n display: none;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: rgba(10, 10, 10, 0.98);\n backdrop-filter: blur(20px);\n flex-direction: column;\n padding: 20px 30px;\n border-bottom: 1px solid rgba(201, 168, 76, 0.1);\n }\n .nav-menu.open {\n display: flex;\n }\n }\n\n /* 装饰性音符（纯CSS） */\n .music-note-deco {\n position: absolute;\n font-family: 'Playfair Display', serif;\n color: rgba(201, 168, 76, 0.04);\n font-size: 12rem;\n pointer-events: none;\n user-select: none;\n line-height: 1;\n }\n\n /* Footer */\n .footer-link {\n color: rgba(245, 240, 232, 0.5);\n text-decoration: none;\n transition: color 0.3s ease;\n font-size: 0.9rem;\n }\n .footer-link:hover {\n color: var(--gold);\n }\n\n /* Tag装饰 */\n .tag-gold {\n display: inline-block;\n font-size: 0.75rem;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--gold);\n font-weight: 500;\n margin-bottom: 1rem;\n }\n\n /* 区块间隔装饰 */\n .section-divider {\n width: 100%;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(201, 168, 76, 0.1), transparent);\n }\n\n /* 移动端适配 */\n @media (max-width: 640px) {\n .hero-title {\n font-size: 2.8rem;\n }\n .section-title {\n font-size: 1.8rem;\n }\n }\n </style>\n</head>\n<body>\n <!-- 导航栏 -->\n <header class=\"fixed top-0 left-0 right-0 z-50 transition-all duration-500\" id=\"navbar\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"flex items-center justify-between h-20\">\n <!-- Logo -->\n <a href=\"#\" class=\"flex items-center gap-3 text-decoration-none group\">\n <div class=\"w-10 h-10 border border-[var(--gold)] flex items-center justify-center\">\n <i class=\"fa-solid fa-music text-[var(--gold)] text-lg\"></i>\n </div>\n <div>\n <span class=\"font-serif text-lg font-bold text-[var(--cream)] tracking-wide block leading-tight\">维也纳国际</span>\n <span class=\"text-[10px] tracking-[3px] text-[var(--gold)] uppercase block\">音乐学院</span>\n </div>\n </a>\n\n <!-- 导航链接 -->\n <nav class=\"flex items-center gap-10 nav-menu\" id=\"navMenu\">\n <a href=\"#about\" class=\"nav-link\">关于</a>\n <a href=\"#features\" class=\"nav-link\">特色</a>\n <a href=\"#faculty\" class=\"nav-link\">师资</a>\n <a href=\"#programs\" class=\"nav-link\">课程</a>\n <a href=\"#cta\" class=\"btn-outline !py-2 !px-6 !text-sm\">\n 申请入学 <i class=\"fa-solid fa-arrow-right text-xs\"></i>\n </a>\n </nav>\n\n <!-- 汉堡菜单按钮 -->\n <div class=\"hamburger\" id=\"hamburger\" onclick=\"toggleMenu()\">\n <span></span>\n <span></span>\n <span></span>\n </div>\n </div>\n </div>\n </header>\n\n <!-- Hero 区域 -->\n <section class=\"relative min-h-screen flex items-center overflow-hidden\" id=\"hero\">\n <div class=\"hero-bg\"></div>\n \n <!-- 装饰粒子 -->\n <div class=\"particle\" style=\"top:20%;left:10%;animation-delay:0s;\"></div>\n <div class=\"particle\" style=\"top:30%;left:85%;animation-delay:1.5s;\"></div>\n <div class=\"particle\" style=\"top:60%;left:15%;animation-delay:3s;\"></div>\n <div class=\"particle\" style=\"top:70%;left:75%;animation-delay:4.5s;\"></div>\n <div class=\"particle\" style=\"top:40%;left:50%;animation-delay:2s;\"></div>\n <div class=\"particle\" style=\"top:80%;left:30%;animation-delay:5.5s;\"></div>\n\n <!-- 装饰性音符 -->\n <div class=\"music-note-deco\" style=\"top:5%;right:8%;transform:rotate(15deg);\">♫</div>\n <div class=\"music-note-deco\" style=\"bottom:10%;left:5%;transform:rotate(-10deg);font-size:8rem;\">♪</div>\n\n <!-- 主内容 -->\n <div class=\"relative z-10 max-w-7xl mx-auto px-6 lg:px-10 w-full pt-24 pb-20\">\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div class=\"space-y-8\">\n <div class=\"flex items-center gap-4 reveal active\">\n <span class=\"gold-line\"></span>\n <span class=\"text-xs tracking-[4px] text-[var(--gold)] uppercase font-medium\">Est. 1898</span>\n </div>\n \n <h1 class=\"hero-title reveal active\" style=\"transition-delay:0.1s\">\n 音乐<br>\n <span class=\"text-[var(--gold)] italic\">即是永恒</span>\n </h1>\n \n <div class=\"gold-line-vertical reveal active\" style=\"transition-delay:0.2s\"></div>\n \n <p class=\"hero-subtitle reveal active\" style=\"transition-delay:0.3s\">\n 百年传承的音乐殿堂，汇聚世界级大师的智慧光芒。\n 在维也纳国际音乐学院，让每一个音符找到灵魂的共鸣。\n </p>\n \n <div class=\"flex flex-wrap gap-4 pt-4 reveal active\" style=\"transition-delay:0.4s\">\n <a href=\"#cta\" class=\"btn-gold\">\n <span>探索音乐之旅</span>\n <i class=\"fa-solid fa-arrow-right\"></i>\n </a>\n <a href=\"#about\" class=\"btn-outline\">\n <i class=\"fa-solid fa-circle-play\"></i>\n <span>了解更多</span>\n </a>\n </div>\n </div>\n\n <!-- 右侧装饰区域（桌面端显示） -->\n <div class=\"hidden lg:flex justify-center items-center reveal active\" style=\"transition-delay:0.5s\">\n <div class=\"relative\">\n <div class=\"w-80 h-80 rounded-full border border-[rgba(201,168,76,0.1)] flex items-center justify-center\">\n <div class=\"w-60 h-60 rounded-full border border-[rgba(201,168,76,0.15)] flex items-center justify-center\">\n <div class=\"w-40 h-40 rounded-full border border-[rgba(201,168,76,0.25)] flex items-center justify-center\">\n <div class=\"w-20 h-20 rounded-full bg-[rgba(201,168,76,0.06)] flex items-center justify-center\">\n <i class=\"fa-solid fa-music text-3xl text-[var(--gold)]\"></i>\n </div>\n </div>\n </div>\n </div>\n <!-- 装饰弧线 -->\n <svg class=\"absolute -top-10 -right-10 w-40 h-40 text-[rgba(201,168,76,0.06)]\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.5\">\n <path d=\"M10,50 Q30,10 50,50 Q70,90 90,50\" />\n </svg>\n <svg class=\"absolute -bottom-8 -left-8 w-32 h-32 text-[rgba(201,168,76,0.04)]\" viewBox=\"0 0 100 100\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"0.5\">\n <path d=\"M10,80 Q30,30 50,60 Q70,10 90,40\" />\n </svg>\n </div>\n </div>\n </div>\n </div>\n\n <!-- 滚动指示器 -->\n <div class=\"scroll-indicator\">\n <span>Scroll</span>\n <div class=\"line\"></div>\n </div>\n </section>\n\n <!-- 简介区域 -->\n <section id=\"about\" class=\"relative py-28 lg:py-36\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"grid lg:grid-cols-5 gap-16 lg:gap-20\">\n <div class=\"lg:col-span-2 reveal\">\n <span class=\"tag-gold\">\n <i class=\"fa-solid fa-minus mr-2 text-[10px]\"></i> 学院使命\n </span>\n <h2 class=\"section-title text-4xl lg:text-5xl\">\n 让古典音乐\n <span class=\"text-[var(--gold)] italic\">在现代回响</span>\n </h2>\n <div class=\"gold-line mt-8\"></div>\n </div>\n <div class=\"lg:col-span-3 reveal reveal-delay-1\">\n <p class=\"text-lg leading-[1.9] text-[rgba(245,240,232,0.7)] mb-6\">\n 维也纳国际音乐学院坐落于音乐之都维也纳，自1898年建校以来，\n 始终致力于传承欧洲古典音乐精髓，同时拥抱当代音乐教育的创新。\n 我们相信，音乐教育不仅是技艺的传授，更是灵魂的塑造。\n </p>\n <p class=\"text-lg leading-[1.9] text-[rgba(245,240,232,0.5)]\">\n 学院汇聚来自全球30余个国家的顶尖音乐家与教育家，\n 提供涵盖钢琴、弦乐、管乐、声乐、作曲与指挥等十余个专业的完整教学体系。\n 每年举办超过200场公开音乐会和大师班，为学子搭建通往世界舞台的桥梁。\n </p>\n \n <!-- 签名 -->\n <div class=\"flex items-center gap-6 mt-10\">\n <div class=\"w-14 h-14 rounded-full overflow-hidden border border-[rgba(201,168,76,0.2)]\">\n <img src=\"/assets/images/avatar/02.jpeg\" alt=\"院长\" class=\"w-full h-full object-cover\">\n </div>\n <div>\n <p class=\"font-serif text-lg text-[var(--cream)]\">亚历山大·冯·海因里希</p>\n <p class=\"text-sm text-[var(--text-muted)]\">院长 · 指挥家</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"section-divider\"></div>\n </div>\n\n <!-- 特色亮点 -->\n <section id=\"features\" class=\"relative py-28 lg:py-36\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"text-center mb-16 lg:mb-20\">\n <span class=\"tag-gold\">\n <i class=\"fa-solid fa-minus mr-2 text-[10px]\"></i> 卓越特色\n </span>\n <h2 class=\"section-title text-4xl lg:text-5xl mb-4\">\n 为什么选择<span class=\"text-[var(--gold)]\">我们</span>\n </h2>\n <div class=\"gold-line-center mt-6\"></div>\n </div>\n\n <div class=\"grid md:grid-cols-3 gap-6 lg:gap-8\">\n <!-- 特色1 -->\n <div class=\"feature-card p-8 lg:p-10 reveal\">\n <div class=\"icon-wrapper text-4xl text-[var(--gold)] mb-6\">\n <i class=\"fa-solid fa-graduation-cap\"></i>\n </div>\n <h3 class=\"font-serif text-2xl font-semibold mb-4\">大师引领</h3>\n <p class=\"text-[rgba(245,240,232,0.55)] leading-relaxed\">\n 来自柏林爱乐、维也纳爱乐等世界顶级乐团的首席音乐家亲自授课，\n 每学期举办一对一大师班，传承最纯正的演奏技艺。\n </p>\n <div class=\"mt-6 flex items-center gap-2 text-sm text-[var(--gold)]\">\n <span>了解更多</span>\n <i class=\"fa-solid fa-arrow-right text-xs\"></i>\n </div>\n </div>\n\n <!-- 特色2 -->\n <div class=\"feature-card p-8 lg:p-10 reveal reveal-delay-1\">\n <div class=\"icon-wrapper text-4xl text-[var(--gold)] mb-6\">\n <i class=\"fa-solid fa-globe\"></i>\n </div>\n <h3 class=\"font-serif text-2xl font-semibold mb-4\">国际舞台</h3>\n <p class=\"text-[rgba(245,240,232,0.55)] leading-relaxed\">\n 与全球40余所顶尖音乐学院建立交换项目，\n 每年提供超过60场国际巡演与比赛机会，让才华在世界绽放。\n </p>\n <div class=\"mt-6 flex items-center gap-2 text-sm text-[var(--gold)]\">\n <span>了解更多</span>\n <i class=\"fa-solid fa-arrow-right text-xs\"></i>\n </div>\n </div>\n\n <!-- 特色3 -->\n <div class=\"feature-card p-8 lg:p-10 reveal reveal-delay-2\">\n <div class=\"icon-wrapper text-4xl text-[var(--gold)] mb-6\">\n <i class=\"fa-solid fa-landmark\"></i>\n </div>\n <h3 class=\"font-serif text-2xl font-semibold mb-4\">百年传承</h3>\n <p class=\"text-[rgba(245,240,232,0.55)] leading-relaxed\">\n 跨越三个世纪的音乐教育积淀，\n 培养出无数享誉世界的音乐家，延续古典音乐的不朽传奇。\n </p>\n <div class=\"mt-6 flex items-center gap-2 text-sm text-[var(--gold)]\">\n <span>了解更多</span>\n <i class=\"fa-solid fa-arrow-right text-xs\"></i>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <!-- 统计数据 -->\n <section class=\"relative py-20 border-y border-[rgba(201,168,76,0.06)]\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-8\">\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\">126</div>\n <div class=\"gold-line-center my-4 !w-8\"></div>\n <p class=\"text-sm text-[var(--text-muted)] tracking-wider uppercase\">年历史传承</p>\n </div>\n <div class=\"stat-item reveal reveal-delay-1\">\n <div class=\"stat-number\">2800</div>\n <div class=\"gold-line-center my-4 !w-8\"></div>\n <p class=\"text-sm text-[var(--text-muted)] tracking-wider uppercase\">在校学生</p>\n </div>\n <div class=\"stat-item reveal reveal-delay-2\">\n <div class=\"stat-number\">320</div>\n <div class=\"gold-line-center my-4 !w-8\"></div>\n <p class=\"text-sm text-[var(--text-muted)] tracking-wider uppercase\">国际教授</p>\n </div>\n <div class=\"stat-item reveal reveal-delay-3\">\n <div class=\"stat-number\">200+</div>\n <div class=\"gold-line-center my-4 !w-8\"></div>\n <p class=\"text-sm text-[var(--text-muted)] tracking-wider uppercase\">年度音乐会</p>\n </div>\n </div>\n </div>\n </section>\n\n <!-- 师资团队 -->\n <section id=\"faculty\" class=\"relative py-28 lg:py-36\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"grid lg:grid-cols-5 gap-12 lg:gap-16 mb-16\">\n <div class=\"lg:col-span-2 reveal\">\n <span class=\"tag-gold\">\n <i class=\"fa-solid fa-minus mr-2 text-[10px]\"></i> 师资团队\n </span>\n <h2 class=\"section-title text-4xl lg:text-5xl\">\n 与世界级的\n <span class=\"text-[var(--gold)] italic\">大师同行</span>\n </h2>\n </div>\n <div class=\"lg:col-span-3 reveal reveal-delay-1 flex items-end\">\n <p class=\"text-lg leading-[1.9] text-[rgba(245,240,232,0.55)] max-w-xl\">\n 每一位教授都是其领域的翘楚，他们不仅是技艺超凡的演奏家，\n 更是启迪心灵的导师。在这里，你将与大师面对面，感受音乐最纯粹的感动。\n </p>\n </div>\n </div>\n\n <div class=\"grid md:grid-cols-3 gap-8 lg:gap-10\">\n <!-- 教授1 -->\n <div class=\"faculty-card reveal\">\n <div class=\"faculty-img-wrapper\">\n <img src=\"/assets/images/avatar/02.jpeg\" alt=\"亚历山大·冯·海因里希\" class=\"w-full h-full object-cover\">\n <div class=\"faculty-overlay\"></div>\n <div class=\"faculty-social\">\n <a href=\"#\"><i class=\"fa-brands fa-linkedin-in\"></i></a>\n <a href=\"#\"><i class=\"fa-brands fa-twitter\"></i></a>\n <a href=\"#\"><i class=\"fa-solid fa-envelope\"></i></a>\n </div>\n </div>\n <div class=\"py-6\">\n <div class=\"gold-line mb-4\"></div>\n <h3 class=\"font-serif text-xl font-semibold mb-1\">亚历山大·冯·海因里希</h3>\n <p class=\"text-sm text-[var(--gold)] mb-3\">院长 · 指挥系教授</p>\n <p class=\"text-sm text-[rgba(245,240,232,0.45)] leading-relaxed\">\n 前柏林爱乐乐团首席指挥，国际柴可夫斯基指挥大赛金奖得主。\n </p>\n </div>\n </div>\n\n <!-- 教授2 -->\n <div class=\"faculty-card reveal reveal-delay-1\">\n <div class=\"faculty-img-wrapper\">\n <img src=\"/assets/images/avatar/05.jpeg\" alt=\"克里斯蒂安·贝尔纳\" class=\"w-full h-full object-cover\">\n <div class=\"faculty-overlay\"></div>\n <div class=\"faculty-social\">\n <a href=\"#\"><i class=\"fa-brands fa-linkedin-in\"></i></a>\n <a href=\"#\"><i class=\"fa-brands fa-twitter\"></i></a>\n <a href=\"#\"><i class=\"fa-solid fa-envelope\"></i></a>\n </div>\n </div>\n <div class=\"py-6\">\n <div class=\"gold-line mb-4\"></div>\n <h3 class=\"font-serif text-xl font-semibold mb-1\">克里斯蒂安·贝尔纳</h3>\n <p class=\"text-sm text-[var(--gold)] mb-3\">钢琴系主任 · 国际钢琴家</p>\n <p class=\"text-sm text-[rgba(245,240,232,0.45)] leading-relaxed\">\n 肖邦国际钢琴大赛评委会主席，发行专辑逾30张，格莱美提名艺术家。\n </p>\n </div>\n </div>\n\n <!-- 教授3 -->\n <div class=\"faculty-card reveal reveal-delay-2\">\n <div class=\"faculty-img-wrapper\">\n <img src=\"/assets/images/avatar/06.jpeg\" alt=\"伊莎贝拉·莫雷蒂\" class=\"w-full h-full object-cover\">\n <div class=\"faculty-overlay\"></div>\n <div class=\"faculty-social\">\n <a href=\"#\"><i class=\"fa-brands fa-linkedin-in\"></i></a>\n <a href=\"#\"><i class=\"fa-brands fa-twitter\"></i></a>\n <a href=\"#\"><i class=\"fa-solid fa-envelope\"></i></a>\n </div>\n </div>\n <div class=\"py-6\">\n <div class=\"gold-line mb-4\"></div>\n <h3 class=\"font-serif text-xl font-semibold mb-1\">伊莎贝拉·莫雷蒂</h3>\n <p class=\"text-sm text-[var(--gold)] mb-3\">声乐系主任 · 女高音歌唱家</p>\n <p class=\"text-sm text-[rgba(245,240,232,0.45)] leading-relaxed\">\n 维也纳国家歌剧院首席女高音，欧洲声乐大赛大满贯得主。\n </p>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"section-divider\"></div>\n </div>\n\n <!-- 课程专业 -->\n <section id=\"programs\" class=\"relative py-28 lg:py-36\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"text-center mb-16 lg:mb-20\">\n <span class=\"tag-gold\">\n <i class=\"fa-solid fa-minus mr-2 text-[10px]\"></i> 专业设置\n </span>\n <h2 class=\"section-title text-4xl lg:text-5xl mb-4\">\n 探索<span class=\"text-[var(--gold)]\">音乐</span>的无限可能\n </h2>\n <div class=\"gold-line-center mt-6\"></div>\n </div>\n\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-5\">\n <div class=\"program-card p-7 reveal\">\n <div class=\"flex items-center gap-4 mb-4\">\n <div class=\"program-icon\"><i class=\"fa-solid fa-piano-keyboard\"></i></div>\n <h3 class=\"font-serif text-lg font-semibold\">钢琴演奏</h3>\n </div>\n <p class=\"text-sm text-[rgba(245,240,232,0.5)] leading-relaxed\">\n 从古典到现代，全面系统的钢琴演奏训练体系\n </p>\n </div>\n\n <div class=\"program-card p-7 reveal reveal-delay-1\">\n <div class=\"flex items-center gap-4 mb-4\">\n <div class=\"program-icon\"><i class=\"fa-solid fa-violin\"></i></div>\n <h3 class=\"font-serif text-lg font-semibold\">弦乐演奏</h3>\n </div>\n <p class=\"text-sm text-[rgba(245,240,232,0.5)] leading-relaxed\">\n 小提琴、中提琴、大提琴与低音提琴的专业深造\n </p>\n </div>\n\n <div class=\"program-card p-7 reveal reveal-delay-2\">\n <div class=\"flex items-center gap-4 mb-4\">\n <div class=\"program-icon\"><i class=\"fa-solid fa-drum\"></i></div>\n <h3 class=\"font-serif text-lg font-semibold\">管乐与打击乐</h3>\n </div>\n <p class=\"text-sm text-[rgba(245,240,232,0.5)] leading-relaxed\">\n 木管、铜管与打击乐器的全方位技艺培养\n </p>\n </div>\n\n <div class=\"program-card p-7 reveal reveal-delay-3\">\n <div class=\"flex items-center gap-4 mb-4\">\n <div class=\"program-icon\"><i class=\"fa-solid fa-microphone\"></i></div>\n <h3 class=\"font-serif text-lg font-semibold\">声乐与歌剧</h3>\n </div>\n <p class=\"text-sm text-[rgba(245,240,232,0.5)] leading-relaxed\">\n 美声、艺术歌曲与歌剧表演的系统训练\n </p>\n </div>\n\n <div class=\"program-card p-7 reveal reveal-delay-4\">\n <div class=\"flex items-center gap-4 mb-4\">\n <div class=\"program-icon\"><i class=\"fa-solid fa-pen-nib\"></i></div>\n <h3 class=\"font-serif text-lg font-semibold\">作曲与理论</h3>\n </div>\n <p class=\"text-sm text-[rgba(245,240,232,0.5)] leading-relaxed\">\n 和声学、对位法、配器法与电子音乐创作\n </p>\n </div>\n\n <div class=\"program-card p-7 reveal reveal-delay-5\">\n <div class=\"flex items-center gap-4 mb-4\">\n <div class=\"program-icon\"><i class=\"fa-solid fa-baton\"></i></div>\n <h3 class=\"font-serif text-lg font-semibold\">指挥</h3>\n </div>\n <p class=\"text-sm text-[rgba(245,240,232,0.5)] leading-relaxed\">\n 管弦乐指挥与合唱指挥的深度培养项目\n </p>\n </div>\n </div>\n\n <div class=\"text-center mt-12 reveal\">\n <a href=\"#\" class=\"btn-outline\">\n 查看全部课程 <i class=\"fa-solid fa-arrow-right text-xs\"></i>\n </a>\n </div>\n </div>\n </section>\n\n <!-- CTA 招生区域 -->\n <section id=\"cta\" class=\"cta-section py-28 lg:py-36\">\n <div class=\"relative z-10 max-w-5xl mx-auto px-6 lg:px-10 text-center\">\n <div class=\"cta-gold-border p-10 lg:p-16 reveal\">\n <span class=\"tag-gold\">\n <i class=\"fa-solid fa-minus mr-2 text-[10px]\"></i> 招生进行中\n </span>\n <h2 class=\"section-title text-4xl lg:text-5xl mb-6\">\n 让你的音乐梦想\n <span class=\"text-[var(--gold)] italic block mt-2\">从这里启航</span>\n </h2>\n <p class=\"text-lg text-[rgba(245,240,232,0.55)] max-w-2xl mx-auto mb-10 leading-relaxed\">\n 2025年秋季招生现已开放申请。加入我们，\n 在音乐之都维也纳，与来自世界各地的才华洋溢者一同谱写人生的华彩乐章。\n </p>\n <div class=\"flex flex-wrap justify-center gap-4\">\n <a href=\"#\" class=\"btn-gold text-base\">\n <span>立即申请</span>\n <i class=\"fa-solid fa-arrow-right\"></i>\n </a>\n <a href=\"#\" class=\"btn-outline text-base\">\n <i class=\"fa-solid fa-file-pdf\"></i>\n <span>下载招生简章</span>\n </a>\n </div>\n </div>\n </div>\n </section>\n\n <!-- Footer -->\n <footer class=\"relative border-t border-[rgba(201,168,76,0.06)]\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10 py-16 lg:py-20\">\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-12\">\n <!-- 品牌 -->\n <div class=\"reveal\">\n <div class=\"flex items-center gap-3 mb-6\">\n <div class=\"w-10 h-10 border border-[var(--gold)] flex items-center justify-center flex-shrink-0\">\n <i class=\"fa-solid fa-music text-[var(--gold)]\"></i>\n </div>\n <div>\n <p class=\"font-serif text-lg font-bold text-[var(--cream)] leading-tight\">维也纳国际</p>\n <p class=\"text-[10px] tracking-[3px] text-[var(--gold)] uppercase\">音乐学院</p>\n </div>\n </div>\n <p class=\"text-sm text-[rgba(245,240,232,0.4)] leading-relaxed max-w-xs\">\n 音乐之都维也纳的百年名校，培养世界级音乐家的摇篮。\n </p>\n </div>\n\n <!-- 快速链接 -->\n <div class=\"reveal reveal-delay-1\">\n <h4 class=\"font-serif text-base font-semibold mb-6 text-[var(--cream)]\">快速链接</h4>\n <ul class=\"space-y-3\">\n <li><a href=\"#about\" class=\"footer-link\">关于学院</a></li>\n <li><a href=\"#faculty\" class=\"footer-link\">师资团队</a></li>\n <li><a href=\"#programs\" class=\"footer-link\">课程设置</a></li>\n <li><a href=\"#\" class=\"footer-link\">招生信息</a></li>\n </ul>\n </div>\n\n <!-- 联系方式 -->\n <div class=\"reveal reveal-delay-2\">\n <h4 class=\"font-serif text-base font-semibold mb-6 text-[var(--cream)]\">联系方式</h4>\n <ul class=\"space-y-4\">\n <li class=\"flex items-start gap-3 text-sm text-[rgba(245,240,232,0.5)]\">\n <i class=\"fa-solid fa-location-dot text-[var(--gold)] mt-1\"></i>\n <span>维也纳市音乐厅大道 1-3 号</span>\n </li>\n <li class=\"flex items-center gap-3 text-sm text-[rgba(245,240,232,0.5)]\">\n <i class=\"fa-solid fa-phone text-[var(--gold)]\"></i>\n <span>+43 1 588 688 0</span>\n </li>\n <li class=\"flex items-center gap-3 text-sm text-[rgba(245,240,232,0.5)]\">\n <i class=\"fa-solid fa-envelope text-[var(--gold)]\"></i>\n <span>admission@vienna-conservatory.at</span>\n </li>\n </ul>\n </div>\n\n <!-- 社交媒体 -->\n <div class=\"reveal reveal-delay-3\">\n <h4 class=\"font-serif text-base font-semibold mb-6 text-[var(--cream)]\">关注我们</h4>\n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"w-11 h-11 border border-[rgba(201,168,76,0.2)] flex items-center justify-center text-[var(--gold)] hover:bg-[var(--gold)] hover:text-[var(--ebony)] transition-all duration-300\">\n <i class=\"fa-brands fa-facebook-f\"></i>\n </a>\n <a href=\"#\" class=\"w-11 h-11 border border-[rgba(201,168,76,0.2)] flex items-center justify-center text-[var(--gold)] hover:bg-[var(--gold)] hover:text-[var(--ebony)] transition-all duration-300\">\n <i class=\"fa-brands fa-instagram\"></i>\n </a>\n <a href=\"#\" class=\"w-11 h-11 border border-[rgba(201,168,76,0.2)] flex items-center justify-center text-[var(--gold)] hover:bg-[var(--gold)] hover:text-[var(--ebony)] transition-all duration-300\">\n <i class=\"fa-brands fa-youtube\"></i>\n </a>\n <a href=\"#\" class=\"w-11 h-11 border border-[rgba(201,168,76,0.2)] flex items-center justify-center text-[var(--gold)] hover:bg-[var(--gold)] hover:text-[var(--ebony)] transition-all duration-300\">\n <i class=\"fa-brands fa-spotify\"></i>\n </a>\n </div>\n </div>\n </div>\n\n <div class=\"section-divider my-10\"></div>\n\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-[rgba(245,240,232,0.3)]\">\n <p>© 2025 维也纳国际音乐学院 Vienna International Conservatory. All rights reserved.</p>\n <div class=\"flex gap-6\">\n <a href=\"#\" class=\"text-[rgba(245,240,232,0.3)] hover:text-[var(--gold)] transition-colors\">隐私政策</a>\n <a href=\"#\" class=\"text-[rgba(245,240,232,0.3)] hover:text-[var(--gold)] transition-colors\">使用条款</a>\n </div>\n </div>\n </div>\n </footer>\n\n <script>\n // 导航栏滚动效果\n const navbar = document.getElementById('navbar');\n let lastScroll = 0;\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n if (currentScroll > 80) {\n navbar.classList.add('nav-scrolled');\n } else {\n navbar.classList.remove('nav-scrolled');\n }\n lastScroll = currentScroll;\n });\n\n // 汉堡菜单\n function toggleMenu() {\n const hamburger = document.getElementById('hamburger');\n const navMenu = document.getElementById('navMenu');\n hamburger.classList.toggle('active');\n navMenu.classList.toggle('open');\n }\n\n // 点击导航链接后关闭菜单\n document.querySelectorAll('.nav-menu a').forEach(link => {\n link.addEventListener('click', () => {\n const hamburger = document.getElementById('hamburger');\n const navMenu = document.getElementById('navMenu');\n hamburger.classList.remove('active');\n navMenu.classList.remove('open');\n });\n });\n\n // 滚动渐入动画 (Intersection Observer)\n const revealElements = document.querySelectorAll('.reveal');\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('active');\n observer.unobserve(entry.target);\n }\n });\n }, {\n threshold: 0.1,\n rootMargin: '0px 0px -50px 0px'\n });\n\n revealElements.forEach(el => observer.observe(el));\n\n // 平滑滚动\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\n anchor.addEventListener('click', function(e) {\n e.preventDefault();\n const target = document.querySelector(this.getAttribute('href'));\n if (target) {\n target.scrollIntoView({\n behavior: 'smooth',\n block: 'start'\n });\n }\n });\n });\n </script>\n</body>\n</html>"
},
"next": ["查看课程详情", "申请入学流程", "校园虚拟导览", "大师班排期", "奖学金政策"],
"breakpoint": "none"
}
```