Загрузка...
Создайте главную страницу сайта по продаже деталей LEGO в ярком стиле. Включает навигацию, баннер, категории, рекомендации и футер. Адаптивный дизайн.
# BRICKHUB - 乐高零件自选平台
创建一个乐高零件购买网站的首页，采用彩色活力风格（红、黄、蓝）搭配清爽简洁设计。包含：
1. 顶部导航栏 - Logo、分类菜单、搜索框、购物车图标
2. Hero banner - 大标题"发现无限创意"，吸引用户的主视觉，CTA按钮指向商品列表
3. 分类导航区 - 4-5个乐高主题分类（颗粒、板件、人仔、特殊零件等），使用乐高品牌色标签
4. 推荐零件展示 - 网格布局展示6-8个精选零件，每个产品卡片包含图片、名称、价格、"加入购物车"按钮
5. 特色亮点区 - 3个特色服务点（快速配送、品质保证、创意支持）
6. 底部Footer - 公司信息、快速链接、联系方式
设计要点：
- 使用乐高标志性的彩色：鲜红色(#E41E1F)、金黄色(#FFB81C)、天蓝色(#00A4EF) 作为主色调
- 白色背景，让产品和色彩更突出
- 简洁清爽，不要过度装饰
- 响应式设计，适配桌面和手机
- 所有交互按钮都应该有明确的视觉反馈
Here is a reference implementation:
~~~html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BrickHub | 发现无限创意 - 乐高零件专家</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<meta name="view-transition" content="same-origin">
<style>
:root {
--lego-red: #E41E1F;
--lego-yellow: #FFB81C;
--lego-blue: #00A4EF;
}
body {
font-family: 'Lexend', sans-serif;
background-color: #ffffff;
color: #1a1a1a;
}
.brick-shadow {
box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.05);
}
.hover-brick-shadow:hover {
box-shadow: 6px 6px 0px 0px rgba(0,0,0,0.1);
transform: translate(-2px, -2px);
}
.lego-pattern {
background-image: radial-gradient(#e5e7eb 2px, transparent 2px);
background-size: 30px 30px;
}
@view-transition {
navigation: auto;
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
legored: '#E41E1F',
legoyellow: '#FFB81C',
legoblue: '#00A4EF',
}
}
}
}
</script>
</head>
<body>
<div class="min-h-screen flex flex-col">
<!-- Top Navigation -->
<nav class="sticky top-0 z-50 bg-white/90 backdrop-blur-md border-b border-gray-100" style="view-transition-name: main-nav">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<!-- Logo -->
<div class="flex items-center gap-2">
<a href="#" id="nav-logo-link" class="flex items-center gap-1 group">
<div class="w-8 h-8 bg-legored rounded flex items-center justify-center text-white transition-transform group-hover:rotate-12">
<iconify-icon icon="mdi:toy-brick-plus" class="text-xl"></iconify-icon>
</div>
<span class="text-2xl font-black tracking-tighter text-gray-900">BRICK<span class="text-legored">HUB</span></span>
</a>
</div>
<!-- Desktop Menu -->
<div class="hidden md:flex items-center space-x-8">
<a href="#" id="nav-cat-bricks" class="text-sm font-medium hover:text-legored transition-colors">标准颗粒</a>
<a href="#" id="nav-cat-plates" class="text-sm font-medium hover:text-legoblue transition-colors">板件/底板</a>
<a href="#" id="nav-cat-minifigs" class="text-sm font-medium hover:text-legoyellow transition-colors">人仔零件</a>
<a href="#" id="nav-cat-technic" class="text-sm font-medium hover:text-gray-500 transition-colors">机械组</a>
</div>
<!-- Search & Tools -->
<div class="flex items-center gap-4">
<div class="hidden lg:flex items-center bg-gray-100 rounded-full px-4 py-2 w-64">
<iconify-icon icon="lucide:search" class="text-gray-400"></iconify-icon>
<input type="text" placeholder="搜索零件号或名称..." class="bg-transparent border-none focus:ring-0 text-sm w-full ml-2 outline-none">
</div>
<button id="btn-search-mobile" class="lg:hidden p-2 text-gray-600 hover:text-legored">
<iconify-icon icon="lucide:search" class="text-2xl"></iconify-icon>
</button>
<a href="#" id="nav-cart-btn" class="relative p-2 text-gray-700 hover:text-legoblue transition-colors">
<iconify-icon icon="lucide:shopping-cart" class="text-2xl"></iconify-icon>
<span class="absolute top-0 right-0 bg-legored text-white text-[10px] font-bold w-5 h-5 flex items-center justify-center rounded-full border-2 border-white">3</span>
</a>
<button id="nav-mobile-menu" class="md:hidden p-2 text-gray-600">
<iconify-icon icon="lucide:menu" class="text-2xl"></iconify-icon>
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="flex-grow" style="view-transition-name: main-content">
<!-- Hero Banner -->
<section class="relative bg-[#FAFAFA] overflow-hidden lego-pattern py-16 md:py-24">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 text-center md:text-left z-10">
<span class="inline-block px-4 py-1.5 mb-6 text-xs font-bold tracking-widest text-white uppercase bg-legoblue rounded-full">正品乐高零件库</span>
<h1 class="text-5xl md:text-7xl font-black text-gray-900 leading-tight mb-6">
发现<span class="text-legored underline decoration-8 decoration-legoyellow/30 underline-offset-8">无限</span>创意
</h1>
<p class="text-lg text-gray-600 mb-10 max-w-lg mx-auto md:mx-0">
从最小的 1x1 颗粒到极其罕见的机械组零件。我们为您提供最全、最快、最优质的散件选择方案。
</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
<a href="#" id="hero-cta-shop" class="px-8 py-4 bg-legored text-white font-bold rounded-lg shadow-lg hover:bg-red-700 transition-all text-center flex items-center justify-center gap-2">
立即开始选购
<iconify-icon icon="lucide:arrow-right"></iconify-icon>
</a>
<a href="#" id="hero-cta-search" class="px-8 py-4 bg-white text-gray-900 border-2 border-gray-200 font-bold rounded-lg hover:border-legoblue hover:text-legoblue transition-all text-center">
查找零件号
</a>
</div>
</div>
<div class="md:w-1/2 mt-12 md:mt-0 relative">
<div class="relative w-full aspect-square flex items-center justify-center">
<!-- Abstract Brick Elements -->
<div class="absolute w-40 h-40 bg-legoyellow rounded-3xl rotate-12 -top-10 -right-4 shadow-xl flex items-center justify-center">
<iconify-icon icon="mdi:toy-brick-outline" class="text-8xl text-white"></iconify-icon>
</div>
<div class="absolute w-32 h-32 bg-legored rounded-3xl -rotate-12 bottom-0 left-10 shadow-xl flex items-center justify-center">
<iconify-icon icon="mdi:toy-brick-marker" class="text-7xl text-white"></iconify-icon>
</div>
<div class="w-72 h-72 bg-legoblue rounded-[40px] shadow-2xl flex items-center justify-center rotate-6">
<iconify-icon icon="mdi:puzzle-outline" class="text-9xl text-white opacity-20 absolute"></iconify-icon>
<span class="text-white font-black text-4xl text-center px-4">MOC<br>RESOURCES</span>
</div>
</div>
</div>
</div>
</section>
<!-- Category Navigation -->
<section class="py-16 bg-white border-y border-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
<a href="#" id="cat-standard" class="group flex flex-col items-center p-6 rounded-2xl bg-gray-50 hover:bg-legored/5 transition-colors">
<div class="w-16 h-16 bg-legored/10 text-legored rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<iconify-icon icon="mdi:toy-brick" class="text-3xl"></iconify-icon>
</div>
<span class="font-bold text-gray-900">标准颗粒</span>
</a>
<a href="#" id="cat-plates" class="group flex flex-col items-center p-6 rounded-2xl bg-gray-50 hover:bg-legoblue/5 transition-colors">
<div class="w-16 h-16 bg-legoblue/10 text-legoblue rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<iconify-icon icon="mdi:cube-outline" class="text-3xl"></iconify-icon>
</div>
<span class="font-bold text-gray-900">各类板件</span>
</a>
<a href="#" id="cat-minifigs" class="group flex flex-col items-center p-6 rounded-2xl bg-gray-50 hover:bg-legoyellow/5 transition-colors">
<div class="w-16 h-16 bg-legoyellow/10 text-legoyellow rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<iconify-icon icon="mdi:account-group" class="text-3xl"></iconify-icon>
</div>
<span class="font-bold text-gray-900">人仔配件</span>
</a>
<a href="#" id="cat-special" class="group flex flex-col items-center p-6 rounded-2xl bg-gray-50 hover:bg-green-500/5 transition-colors">
<div class="w-16 h-16 bg-green-500/10 text-green-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<iconify-icon icon="mdi:star-four-points" class="text-3xl"></iconify-icon>
</div>
<span class="font-bold text-gray-900">特殊零件</span>
</a>
<a href="#" id="cat-all" class="group flex flex-col items-center p-6 rounded-2xl bg-gray-50 hover:bg-gray-900/5 transition-colors col-span-2 md:col-span-1">
<div class="w-16 h-16 bg-gray-200 text-gray-600 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
<iconify-icon icon="lucide:grid" class="text-3xl"></iconify-icon>
</div>
<span class="font-bold text-gray-900">全部分类</span>
</a>
</div>
</div>
</section>
<!-- Recommended Parts Grid -->
<section class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-end mb-12">
<div>
<h2 class="text-3xl font-black text-gray-900">精选零件</h2>
<p class="text-gray-500 mt-2">每周更新最受欢迎的零件组合</p>
</div>
<a href="#" id="view-all-parts" class="text-legoblue font-bold hover:underline flex items-center gap-1">
查看全部零件 <iconify-icon icon="lucide:chevron-right"></iconify-icon>
</a>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Product Card 1 -->
<div class="group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4 relative overflow-hidden">
<div class="w-32 h-32 bg-legored rounded-lg shadow-lg flex items-center justify-center transform group-hover:scale-110 transition-transform">
<span class="text-white font-bold opacity-30">2 x 4</span>
</div>
<span class="absolute top-2 left-2 bg-legoyellow text-[10px] font-black px-2 py-1 rounded">HOT</span>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">经典 2x4 红色颗粒</h3>
<p class="text-xs text-gray-400 mb-3">编号: 3001 | 红色</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥0.80</span>
<button id="add-cart-1" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-legored transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4 relative overflow-hidden">
<div class="w-32 h-8 bg-legoblue rounded-md shadow-lg transform group-hover:rotate-6 transition-transform"></div>
<span class="absolute top-2 left-2 bg-blue-100 text-legoblue text-[10px] font-black px-2 py-1 rounded">NEW</span>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">1x6 蓝色平滑板</h3>
<p class="text-xs text-gray-400 mb-3">编号: 6636 | 天蓝色</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥0.45</span>
<button id="add-cart-2" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-legoblue transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4 relative overflow-hidden">
<div class="w-24 h-24 bg-legoyellow rounded-full flex items-center justify-center transform group-hover:rotate-12 transition-transform shadow-lg">
<iconify-icon icon="mdi:face-man-profile" class="text-5xl text-gray-800 opacity-60"></iconify-icon>
</div>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">微笑表情人仔头部</h3>
<p class="text-xs text-gray-400 mb-3">编号: 3626 | 经典黄</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥2.50</span>
<button id="add-cart-3" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-legoyellow transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4 relative overflow-hidden">
<div class="w-32 h-32 flex items-center justify-center">
<iconify-icon icon="mdi:cog" class="text-7xl text-gray-400 animate-spin-slow"></iconify-icon>
</div>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">40齿齿轮 - 机械组</h3>
<p class="text-xs text-gray-400 mb-3">编号: 3649 | 深灰色</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥1.20</span>
<button id="add-cart-4" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-gray-700 transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
<!-- Product Card 5-8 Placeholder for Grid -->
<div class="hidden lg:block group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4">
<div class="w-24 h-12 bg-white border-2 border-legored rounded shadow-sm"></div>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">1x4 窗框零件</h3>
<p class="text-xs text-gray-400 mb-3">编号: 60594 | 白色</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥1.50</span>
<button id="add-cart-5" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-legored transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
<div class="hidden lg:block group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4">
<div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
<iconify-icon icon="lucide:leaf" class="text-white text-3xl"></iconify-icon>
</div>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">三叶植物装饰</h3>
<p class="text-xs text-gray-400 mb-3">编号: 37695 | 绿色</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥0.65</span>
<button id="add-cart-6" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-green-600 transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
<div class="hidden lg:block group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4">
<div class="w-24 h-4 bg-legoyellow rounded"></div>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">1x12 厚板</h3>
<p class="text-xs text-gray-400 mb-3">编号: 60479 | 黄色</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥1.10</span>
<button id="add-cart-7" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-legoyellow transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
<div class="hidden lg:block group bg-white rounded-2xl border border-gray-100 p-4 transition-all hover-brick-shadow overflow-hidden">
<div class="aspect-square bg-gray-50 rounded-xl flex items-center justify-center mb-4">
<iconify-icon icon="mdi:tire" class="text-7xl text-gray-800"></iconify-icon>
</div>
<h3 class="font-bold text-gray-900 mb-1 truncate">橡胶轮胎 中型</h3>
<p class="text-xs text-gray-400 mb-3">编号: 56908 | 黑色</p>
<div class="flex items-center justify-between">
<span class="text-lg font-black text-gray-900">¥3.20</span>
<button id="add-cart-8" class="w-10 h-10 bg-gray-900 text-white rounded-lg flex items-center justify-center hover:bg-gray-800 transition-colors">
<iconify-icon icon="lucide:plus"></iconify-icon>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Features Highlights -->
<section class="py-20 bg-legoblue text-white relative overflow-hidden">
<!-- Decorative circles -->
<div class="absolute -top-20 -left-20 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute -bottom-20 -right-20 w-96 h-96 bg-legoyellow/20 rounded-full blur-3xl"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid md:grid-cols-3 gap-12">
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mb-6">
<iconify-icon icon="lucide:zap" class="text-4xl text-legoyellow"></iconify-icon>
</div>
<h3 class="text-2xl font-bold mb-3">极速配送</h3>
<p class="text-white/80">全球范围闪电发货，无论您在哪里，创意都不会断档。24小时内处理订单。</p>
</div>
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mb-6">
<iconify-icon icon="lucide:shield-check" class="text-4xl text-white"></iconify-icon>
</div>
<h3 class="text-2xl font-bold mb-3">100% 正品品质</h3>
<p class="text-white/80">仅提供原装乐高新零件。每一块积木都经过严格质检，确保咬合完美。</p>
</div>
<div class="flex flex-col items-center text-center">
<div class="w-20 h-20 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center mb-6">
<iconify-icon icon="lucide:heart" class="text-4xl text-legored"></iconify-icon>
</div>
<h3 class="text-2xl font-bold mb-3">MOC 创意支持</h3>
<p class="text-white/80">专业的零件匹配建议与创意库。帮助您完成从草图到成品的所有挑战。</p>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-100 pt-20 pb-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-12 mb-16">
<div class="col-span-2">
<a href="#" id="footer-logo-link" class="flex items-center gap-1 mb-6">
<div class="w-6 h-6 bg-legored rounded flex items-center justify-center text-white">
<iconify-icon icon="mdi:toy-brick-plus" class="text-sm"></iconify-icon>
</div>
<span class="text-xl font-black tracking-tighter text-gray-900">BRICK<span class="text-legored">HUB</span></span>
</a>
<p class="text-gray-500 text-sm leading-relaxed mb-6 max-w-xs">
BrickHub 是全球领先的乐高爱好者零件交易平台，致力于为 MOC 玩家提供最高效的零件寻源解决方案。
</p>
<div class="flex gap-4">
<a href="#" id="footer-social-wechat" class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 hover:bg-legoyellow hover:text-white transition-all">
<iconify-icon icon="mdi:wechat" class="text-xl"></iconify-icon>
</a>
<a href="#" id="footer-social-ins" class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 hover:bg-legored hover:text-white transition-all">
<iconify-icon icon="mdi:instagram" class="text-xl"></iconify-icon>
</a>
<a href="#" id="footer-social-github" class="w-10 h-10 rounded-full bg-gray-50 flex items-center justify-center text-gray-400 hover:bg-legoblue hover:text-white transition-all">
<iconify-icon icon="mdi:github" class="text-xl"></iconify-icon>
</a>
</div>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-6">探索</h4>
<ul class="space-y-4 text-sm text-gray-500">
<li><a href="#" id="footer-link-new" class="hover:text-legored transition-colors">新品到货</a></li>
<li><a href="#" id="footer-link-bestseller" class="hover:text-legored transition-colors">畅销零件</a></li>
<li><a href="#" id="footer-link-sets" class="hover:text-legored transition-colors">停产套装</a></li>
<li><a href="#" id="footer-link-tools" class="hover:text-legored transition-colors">拼砌工具</a></li>
</ul>
</div>
<div>
<h4 class="font-bold text-gray-900 mb-6">支持</h4>
<ul class="space-y-4 text-sm text-gray-500">
<li><a href="#" id="footer-link-delivery" class="hover:text-legoblue transition-colors">配送说明</a></li>
<li><a href="#" id="footer-link-refund" class="hover:text-legoblue transition-colors">退换货政策</a></li>
<li><a href="#" id="footer-link-help" class="hover:text-legoblue transition-colors">帮助中心</a></li>
<li><a href="#" id="footer-link-privacy" class="hover:text-legoblue transition-colors">隐私协议</a></li>
</ul>
</div>
<div class="col-span-2">
<h4 class="font-bold text-gray-900 mb-6">订阅新闻邮件</h4>
<p class="text-sm text-gray-500 mb-4">订阅以获取零件补货通知和限时折扣。</p>
<div class="flex gap-2">
<input type="email" placeholder="您的邮箱地址" class="flex-grow px-4 py-2 bg-gray-50 border-none rounded-lg focus:ring-2 focus:ring-legoyellow text-sm outline-none">
<button id="footer-subscribe-btn" class="px-6 py-2 bg-gray-900 text-white font-bold rounded-lg hover:bg-legored transition-colors">订阅</button>
</div>
</div>
</div>
<div class="pt-10 border-t border-gray-100 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-xs text-gray-400">© 2024 BrickHub International. LEGO® is a trademark of the LEGO Group which does not sponsor, authorize or endorse this site.</p>
<div class="flex gap-6 items-center">
<iconify-icon icon="logos:visa" class="text-3xl grayscale opacity-50 hover:opacity-100 transition-opacity"></iconify-icon>
<iconify-icon icon="logos:mastercard" class="text-3xl grayscale opacity-50 hover:opacity-100 transition-opacity"></iconify-icon>
<iconify-icon icon="logos:alipay" class="text-3xl grayscale opacity-50 hover:opacity-100 transition-opacity"></iconify-icon>
</div>
</div>
</div>
</footer>
<!-- Mobile Bottom Nav -->
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-100 px-6 py-3 flex justify-between items-center z-50">
<a href="#" id="mobile-nav-home" class="flex flex-col items-center gap-1 text-legored">
<iconify-icon icon="lucide:home" class="text-xl"></iconify-icon>
<span class="text-[10px] font-bold">首页</span>
</a>
<a href="#" id="mobile-nav-search" class="flex flex-col items-center gap-1 text-gray-400">
<iconify-icon icon="lucide:search" class="text-xl"></iconify-icon>
<span class="text-[10px] font-bold">搜索</span>
</a>
<a href="#" id="mobile-nav-cart" class="flex flex-col items-center gap-1 text-gray-400">
<iconify-icon icon="lucide:shopping-cart" class="text-xl"></iconify-icon>
<span class="text-[10px] font-bold">购物车</span>
</a>
<a href="#" id="mobile-nav-user" class="flex flex-col items-center gap-1 text-gray-400">
<iconify-icon icon="lucide:user" class="text-xl"></iconify-icon>
<span class="text-[10px] font-bold">我的</span>
</a>
</div>
</div>
<style>
.animate-spin-slow {
animation: spin 8s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</body>
</html>
~~~