Maas2-group
/
Maas-Model-platform


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327
							<!DOCTYPE html>

<html lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    colors: {
                        "primary": "#137fec",
                        "background-light": "#f6f7f8",
                        "background-dark": "#101922",
                    },
                    fontFamily: {
                        "display": ["Lexend"]
                    },
                    borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
                },
            },
        }
    </script>
<title>前台：课程中心</title>
</head>
<body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100">
<div class="relative flex h-auto min-h-screen w-full flex-col group/design-root overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-primary/10 px-6 py-4 lg:px-20 bg-background-light dark:bg-background-dark sticky top-0 z-50">
<div class="flex items-center gap-8">
<div class="flex items-center gap-3 text-primary">
<span class="material-symbols-outlined text-3xl font-bold">school</span>
<h2 class="text-slate-900 dark:text-slate-100 text-xl font-bold leading-tight tracking-tight">学无止境</h2>
</div>
<nav class="hidden md:flex items-center gap-6">
<a class="text-primary text-sm font-semibold leading-normal border-b-2 border-primary pb-1" href="#">浏览课程</a>
<a class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors text-sm font-medium leading-normal" href="#">我的课程</a>
</nav>
</div>
<div class="flex flex-1 justify-end gap-6 items-center">
<label class="hidden sm:flex flex-col min-w-40 h-10 max-w-64">
<div class="flex w-full flex-1 items-stretch rounded-lg h-full">
<div class="text-slate-500 flex border-none bg-primary/5 dark:bg-primary/10 items-center justify-center pl-4 rounded-l-lg">
<span class="material-symbols-outlined text-xl">search</span>
</div>
<input class="form-input flex w-full min-w-0 flex-1 border-none bg-primary/5 dark:bg-primary/10 text-slate-900 dark:text-slate-100 focus:ring-0 h-full placeholder:text-slate-500 px-4 rounded-r-lg pl-2 text-sm font-normal" placeholder="搜索课程..."/>
</div>
</label>
<div class="flex items-center gap-3">
<button class="text-slate-600 dark:text-slate-400 p-2 rounded-full hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined">notifications</span>
</button>
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-primary/20" data-alt="Student profile avatar portrait" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAF3r47zxQ2C59K_2AYE38EKEXSoEeQfC7RNRSAvcpy6bs3BZ3DSYHXHsPveW1bl88JZjKSU_yBe-Pm4dBpOjOaTZiXAgd3-Ra2WfN9o39RbehymeOHmFn_JfxvxVMFtdFP8mAsqusGKAwMCGypaLTK3_Cu2GVAP3yfvBgomU5cor1FHipkWgBUrVPgoevLGfHeP6JAglXtHT6O-nT98rLAD6u5-MGEAntRdLR9pnuu_koHE_Q1uXh9NVPpdeCVsF9byKbjqUFoRyQ");'></div>
</div>
</div>
</header>
<main class="flex-1 px-6 lg:px-20 py-8">
<div class="max-w-[1200px] mx-auto">
<section class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-10">
<div class="flex flex-col gap-2">
<p class="text-primary font-bold text-sm uppercase tracking-widest">探索课程库</p>
<h1 class="text-slate-900 dark:text-slate-100 text-4xl font-extrabold leading-tight tracking-tight">开拓您的视野</h1>
<p class="text-slate-600 dark:text-slate-400 text-lg max-w-xl">由行业专家精心设计的课程路径，助您从初学者成长为专业人士。</p>
</div>
<div class="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
<button class="bg-primary text-white px-5 py-2 rounded-full text-sm font-semibold whitespace-nowrap">全部课程</button>
<button class="bg-primary/10 text-slate-700 dark:text-slate-300 hover:bg-primary/20 px-5 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-colors">设计</button>
<button class="bg-primary/10 text-slate-700 dark:text-slate-300 hover:bg-primary/20 px-5 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-colors">开发</button>
<button class="bg-primary/10 text-slate-700 dark:text-slate-300 hover:bg-primary/20 px-5 py-2 rounded-full text-sm font-semibold whitespace-nowrap transition-colors">商业</button>
</div>
</section>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div class="group flex flex-col bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-xl overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer">
<div class="relative w-full aspect-video overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity z-10 flex items-center justify-center">
<span class="bg-primary text-white p-3 rounded-full scale-75 group-hover:scale-100 transition-transform">
<span class="material-symbols-outlined">play_arrow</span>
</span>
</div>
<div class="w-full h-full bg-center bg-no-repeat bg-cover group-hover:scale-105 transition-transform duration-500" data-alt="UI design interface visual with geometric shapes" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCL_jGHo3NQbW0_Jfh1u655w24s4j5u1NtjVDXehSkt531s70hM_iuk0i897DFMK1F_QAuPZlen2RD1WtJfRyy7h8YinlW-zQbl3SfYa4ILKk_3BZ7ihtXDKoYhP6AVTvQHtInLO-XpYttTJ1j2nhwPRPYWauZCEqjOYZ1QfgSaD-KnW33vtpKiFJrE3wY0qnN_nOL6s2FTXKP_LU9ITgeUTjLfy-4wA-nFdCSLiOGmpuHA7IanbNEM15PMlf4YIaDNdiV-hM9SdqM");'></div>
</div>
<div class="p-5 flex flex-col gap-3">
<div class="flex justify-between items-start">
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">设计</span>
<div class="flex items-center gap-1 text-amber-500">
<span class="material-symbols-outlined text-sm fill-1">star</span>
<span class="text-xs font-bold">4.8</span>
</div>
</div>
<div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-snug group-hover:text-primary transition-colors">高级 UI 设计大师课</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">讲师：莎拉·约翰逊</p>
</div>
<div class="flex items-center gap-4 mt-2 pt-4 border-t border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">schedule</span>
<span class="text-xs">12h 30m</span>
</div>
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">groups</span>
<span class="text-xs">1.2k</span>
</div>
</div>
</div>
</div>
<div class="group flex flex-col bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-xl overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer">
<div class="relative w-full aspect-video overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity z-10 flex items-center justify-center">
<span class="bg-primary text-white p-3 rounded-full scale-75 group-hover:scale-100 transition-transform">
<span class="material-symbols-outlined">play_arrow</span>
</span>
</div>
<div class="w-full h-full bg-center bg-no-repeat bg-cover group-hover:scale-105 transition-transform duration-500" data-alt="Code abstract representation with syntax highlighting" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAMbQVVtek3N03XS3xXnvslTDHENGMg1qF7u56BI4Z--f1kp-HH7J7AUC9aOWEMlYhKiiTi4-oXmzip-f21Yein0Fo4QiO-t4GqKMBjpBc9riW0nuxsMimO9f4cqLplOfA5WJO9SH0PDRbTbZGFW3h5IRbN1zKRfsewS33NX2K6NzqTzVwIyqBLXdF7EAZpUjSNeDT3uOT8AdFYbg8U-FTzENuEuGAbJxtkQocsUcEKym13CNS78ggzPIf0cYAs5se9Jf9cvmu_T-U");'></div>
</div>
<div class="p-5 flex flex-col gap-3">
<div class="flex justify-between items-start">
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">开发</span>
<div class="flex items-center gap-1 text-amber-500">
<span class="material-symbols-outlined text-sm fill-1">star</span>
<span class="text-xs font-bold">4.9</span>
</div>
</div>
<div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-snug group-hover:text-primary transition-colors">全栈 Web 架构师</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">讲师：陈迈克</p>
</div>
<div class="flex items-center gap-4 mt-2 pt-4 border-t border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">schedule</span>
<span class="text-xs">45h 15m</span>
</div>
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">groups</span>
<span class="text-xs">2.5k</span>
</div>
</div>
</div>
</div>
<div class="group flex flex-col bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-xl overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer">
<div class="relative w-full aspect-video overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity z-10 flex items-center justify-center">
<span class="bg-primary text-white p-3 rounded-full scale-75 group-hover:scale-100 transition-transform">
<span class="material-symbols-outlined">play_arrow</span>
</span>
</div>
<div class="w-full h-full bg-center bg-no-repeat bg-cover group-hover:scale-105 transition-transform duration-500" data-alt="Graphs and data charts in a dark theme" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAY1EwurA27ROrtaGOO8pnaqH_uQHwLPeApmzu9baCc8kGJ5mHwbgOcqbRIqgPANuC80Av8RyXxpvQG8rtUwRPGT-T3c52YvGrJQFVihWBo99yr-Ecig7y6hexf6Jz_VQu8aX7Mh7kl0e2zAYJknUGU44mY2M0IQsleQL1iZlbrwFnxz-FKLlwLCqu2i-znagZkWhXhB4DXLV9spdSJIT-aJ8lJUooDsBAiZllMVSXcq1qQ_9fomoaf8y0okrFIaUJw-Ji2IabiupQ");'></div>
</div>
<div class="p-5 flex flex-col gap-3">
<div class="flex justify-between items-start">
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">商业</span>
<div class="flex items-center gap-1 text-amber-500">
<span class="material-symbols-outlined text-sm fill-1">star</span>
<span class="text-xs font-bold">4.7</span>
</div>
</div>
<div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-snug group-hover:text-primary transition-colors">数据驱动策略</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">讲师：艾米莉·怀特博士</p>
</div>
<div class="flex items-center gap-4 mt-2 pt-4 border-t border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">schedule</span>
<span class="text-xs">18h 45m</span>
</div>
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">groups</span>
<span class="text-xs">840</span>
</div>
</div>
</div>
</div>
<div class="group flex flex-col bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-xl overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer">
<div class="relative w-full aspect-video overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity z-10 flex items-center justify-center">
<span class="bg-primary text-white p-3 rounded-full scale-75 group-hover:scale-100 transition-transform">
<span class="material-symbols-outlined">play_arrow</span>
</span>
</div>
<div class="w-full h-full bg-center bg-no-repeat bg-cover group-hover:scale-105 transition-transform duration-500" data-alt="Social media icons and marketing patterns" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDtsPvyjIbG_fwnv1zRJza_maCXeIVfrRbpmfyQnTSqfYZpo3YmLBA1LL01lVICK-mYpQGu-PySCuigG3CNKuYj4uTtppkfxXzFx0IDfgadEV6HUvIkR_Zu_w3wIhgvYfrrzeTcpPgziFqTpcj4WmFy-GY6PBSxEEU6GQtF3AYk8_QWCAJmxOLirBvlI3UI0CutkccWvKfLvmD0gZLX2p5jSmKyYVEQb6FmsHLGmA5Y2eMZv_ftGoZo3l8P1yrvYRACZBs-WVwYhi8");'></div>
</div>
<div class="p-5 flex flex-col gap-3">
<div class="flex justify-between items-start">
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">营销</span>
<div class="flex items-center gap-1 text-amber-500">
<span class="material-symbols-outlined text-sm fill-1">star</span>
<span class="text-xs font-bold">4.6</span>
</div>
</div>
<div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-snug group-hover:text-primary transition-colors">增长黑客 2024</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">讲师：张伟</p>
</div>
<div class="flex items-center gap-4 mt-2 pt-4 border-t border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">schedule</span>
<span class="text-xs">8h 20m</span>
</div>
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">groups</span>
<span class="text-xs">3.2k</span>
</div>
</div>
</div>
</div>
<div class="group flex flex-col bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-xl overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer">
<div class="relative w-full aspect-video overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity z-10 flex items-center justify-center">
<span class="bg-primary text-white p-3 rounded-full scale-75 group-hover:scale-100 transition-transform">
<span class="material-symbols-outlined">play_arrow</span>
</span>
</div>
<div class="w-full h-full bg-center bg-no-repeat bg-cover group-hover:scale-105 transition-transform duration-500" data-alt="Camera lens and photography studio equipment" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAvYIQExMFFnIKHGIQN5bfDa-zPMz92WVm8B-YEHjt397fH3dDkFYeT4M8OesmYeIafC9fjNHFrP2qmUV1sdDS6MvUgN8r2MenlLgFbuyxI7xX4uTPKVoZT4FEGxTfYSbrY0umtNzs5t5hDgjOalk3Yu8b6mUxNXLJHf0mZo1X96QqTKWeoU_-5g0hUVWrsNgqmbBo3KX_DCDJyfYQw0CyFZ0QqziUGKB4PqNSAIYIDtMDZgY3_Tm0_xxvn7hUlXIplxsjlL3JtjgQ");'></div>
</div>
<div class="p-5 flex flex-col gap-3">
<div class="flex justify-between items-start">
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">创意</span>
<div class="flex items-center gap-1 text-amber-500">
<span class="material-symbols-outlined text-sm fill-1">star</span>
<span class="text-xs font-bold">4.9</span>
</div>
</div>
<div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-snug group-hover:text-primary transition-colors">摄影摄像基础</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">讲师：大卫·林奇</p>
</div>
<div class="flex items-center gap-4 mt-2 pt-4 border-t border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">schedule</span>
<span class="text-xs">22h 10m</span>
</div>
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">groups</span>
<span class="text-xs">1.5k</span>
</div>
</div>
</div>
</div>
<div class="group flex flex-col bg-white dark:bg-slate-800/50 border border-slate-200 dark:border-slate-700/50 rounded-xl overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-pointer">
<div class="relative w-full aspect-video overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity z-10 flex items-center justify-center">
<span class="bg-primary text-white p-3 rounded-full scale-75 group-hover:scale-100 transition-transform">
<span class="material-symbols-outlined">play_arrow</span>
</span>
</div>
<div class="w-full h-full bg-center bg-no-repeat bg-cover group-hover:scale-105 transition-transform duration-500" data-alt="Cybersecurity lock icon with circuit pattern" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDHBtmi5pq2OveyCMN_TJ6CT31sbxQOI6Mbk7pfd0OnqD_SjgwrUnjxlFTe-2yXsexZ0dk_nh2An-zK_iwJrKPM3BMSDFo1sOjYRCNrK1PNCfqxjVhHqBV1xyH3JpuKb51di9YeghEGgm6qJDhTorU8U-zOp1MELYj_ijLu6f9SocXMxJShnZ1Irnroyn5z40w-J73ExUdLXiMyPHHZ33eerAiCwINN2fzjr0BGGF-PcZ_GXCH6FqcvjxT3jyyz2Umd8iIIOtVMwzA");'></div>
</div>
<div class="p-5 flex flex-col gap-3">
<div class="flex justify-between items-start">
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-1 rounded uppercase tracking-wider">信息技术</span>
<div class="flex items-center gap-1 text-amber-500">
<span class="material-symbols-outlined text-sm fill-1">star</span>
<span class="text-xs font-bold">5.0</span>
</div>
</div>
<div>
<h3 class="text-slate-900 dark:text-slate-100 text-lg font-bold leading-snug group-hover:text-primary transition-colors">道德黑客基础</h3>
<p class="text-slate-500 dark:text-slate-400 text-sm mt-1">讲师：詹姆斯·史密斯</p>
</div>
<div class="flex items-center gap-4 mt-2 pt-4 border-t border-slate-100 dark:border-slate-700">
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">schedule</span>
<span class="text-xs">34h 50m</span>
</div>
<div class="flex items-center gap-1 text-slate-500 dark:text-slate-400">
<span class="material-symbols-outlined text-sm">groups</span>
<span class="text-xs">5k</span>
</div>
</div>
</div>
</div>
</div>
<div class="mt-12 flex justify-center">
<button class="flex items-center gap-2 border-2 border-primary text-primary px-8 py-3 rounded-lg font-bold hover:bg-primary hover:text-white transition-all">加载更多课程 <span class="material-symbols-outlined">expand_more</span></button>
</div>
</div>
</main>
<footer class="mt-auto py-12 px-6 lg:px-20 border-t border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900/50">
<div class="max-w-[1200px] mx-auto grid grid-cols-1 md:grid-cols-4 gap-10">
<div class="flex flex-col gap-4">
<div class="flex items-center gap-2 text-primary">
<span class="material-symbols-outlined text-2xl font-bold">school</span>
<h2 class="text-slate-900 dark:text-slate-100 text-lg font-bold">学无止境</h2>
</div>
<p class="text-slate-500 dark:text-slate-400 text-sm">The leading platform for professionals to master new skills and accelerate their careers through world-class courses.</p>
</div>
<div>
<h4 class="text-slate-900 dark:text-slate-100 font-bold mb-4">平台信息</h4>
<ul class="flex flex-col gap-2 text-slate-500 dark:text-slate-400 text-sm">
<li><a class="hover:text-primary transition-colors" href="#">浏览课程</a></li>
<li><a class="hover:text-primary transition-colors" href="#">学习路径</a></li>
<li><a class="hover:text-primary transition-colors" href="#">讲师团队</a></li>
<li><a class="hover:text-primary transition-colors" href="#">企业服务</a></li>
</ul>
</div>
<div>
<h4 class="text-slate-900 dark:text-slate-100 font-bold mb-4">支持中心</h4>
<ul class="flex flex-col gap-2 text-slate-500 dark:text-slate-400 text-sm">
<li><a class="hover:text-primary transition-colors" href="#">帮助中心</a></li>
<li><a class="hover:text-primary transition-colors" href="#">联系我们</a></li>
<li><a class="hover:text-primary transition-colors" href="#">服务条款</a></li>
<li><a class="hover:text-primary transition-colors" href="#">隐私政策</a></li>
</ul>
</div>
<div>
<h4 class="text-slate-900 dark:text-slate-100 font-bold mb-4">订阅邮件</h4>
<div class="flex flex-col gap-3">
<p class="text-slate-500 dark:text-slate-400 text-sm">每周更新最新课程资讯。</p>
<div class="flex overflow-hidden rounded-lg">
<input class="bg-primary/5 border-none w-full text-sm px-4 focus:ring-0" placeholder="请输入邮箱地址" type="email"/>
<button class="bg-primary text-white p-2">
<span class="material-symbols-outlined">send</span>
</button>
</div>
</div>
</div>
</div>
<div class="max-w-[1200px] mx-auto mt-12 pt-8 border-t border-slate-100 dark:border-slate-800 text-center text-slate-400 text-xs">
                © 2024 EduLearn Inc. All rights reserved.
            </div>
</footer>
</div>
</div>
</body></html>