鏍¤仛 - 鏍″洯鏁板瓧绛栧睍浜?/title> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> <script id="tailwind-config"> tailwind.config = { darkMode: "class", theme: { extend: { colors: { "secondary-fixed": "#e5e2e1", "on-primary-fixed": "#07006c", "on-primary-container": "#fffbff", "tertiary-container": "#b55d00", "primary": "#4648d4", "primary-fixed": "#e1e0ff", "background": "#fcf9f8", "outline-variant": "#c7c4d7", "on-secondary-fixed-variant": "#474646", "surface-container-highest": "#e5e2e1", "error": "#ba1a1a", "on-tertiary-container": "#fffbff", "error-container": "#ffdad6", "tertiary-fixed": "#ffdcc5", "tertiary": "#904900", "primary-fixed-dim": "#c0c1ff", "secondary-container": "#e5e2e1", "on-tertiary-fixed-variant": "#703700", "surface-dim": "#dcd9d9", "surface-container-low": "#f6f3f2", "on-secondary": "#ffffff", "outline": "#767586", "surface": "#fcf9f8", "surface-container-lowest": "#ffffff", "surface-container": "#f0edec", "secondary-fixed-dim": "#c8c6c5", "on-tertiary": "#ffffff", "on-primary-fixed-variant": "#2f2ebe", "on-secondary-container": "#656464", "on-secondary-fixed": "#1c1b1b", "on-error": "#ffffff", "on-error-container": "#93000a", "surface-tint": "#494bd6", "primary-container": "#6063ee", "tertiary-fixed-dim": "#ffb783", "secondary": "#5f5e5e", "on-surface": "#1c1b1b", "inverse-surface": "#313030", "inverse-primary": "#c0c1ff", "on-background": "#1c1b1b", "surface-variant": "#e5e2e1", "surface-bright": "#fcf9f8", "on-surface-variant": "#464554", "inverse-on-surface": "#f3f0ef", "on-tertiary-fixed": "#301400", "on-primary": "#ffffff", "surface-container-high": "#ebe7e7" }, borderRadius: { "DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px" }, fontFamily: { "headline": ["Plus Jakarta Sans", "PingFang SC", "sans-serif"], "display": ["Plus Jakarta Sans", "PingFang SC", "sans-serif"], "body": ["Manrope", "PingFang SC", "sans-serif"], "label": ["Manrope", "PingFang SC", "sans-serif"] } } } } </script> <style> .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .glass-panel { background: rgba(252, 249, 248, 0.7); backdrop-filter: blur(24px); border: 1px solid rgba(199, 196, 215, 0.15); } .signature-gradient { background: linear-gradient(135deg, #4648d4 0%, #6063ee 100%); } </style> <script type="module" crossorigin src="/assets/router-DotvL9z0.js"></script> </head> <body data-stitch-page="landing" class="bg-surface text-on-surface font-body antialiased selection:bg-primary-container selection:text-on-primary-container">  <header class="bg-slate-50/80 dark:bg-slate-950/80 backdrop-blur-xl docked full-width top-0 sticky z-50 transition-all"> <div class="flex justify-between items-center px-6 py-4 w-full max-w-screen-2xl mx-auto"> <div class="text-2xl font-black text-indigo-600 dark:text-indigo-400 tracking-tighter font-display"> 鏍¤仛 </div> <nav class="hidden md:flex gap-8 items-center"> <a class="text-indigo-600 dark:text-indigo-400 font-bold border-b-2 border-indigo-600 font-label tracking-wide pb-1" href="#">鎺㈢储</a> <a class="text-slate-500 dark:text-slate-400 hover:text-indigo-500 transition-colors duration-300 font-label tracking-wide pb-1" href="#">闆嗗競</a> <a class="text-slate-500 dark:text-slate-400 hover:text-indigo-500 transition-colors duration-300 font-label tracking-wide pb-1" href="#">绀惧洟</a> </nav> <div class="flex gap-4 items-center text-indigo-600 dark:text-indigo-400"> <button class="scale-95 active:opacity-80 transition-all hover:text-indigo-500 duration-300"> <span class="material-symbols-outlined text-[28px]">notifications</span> </button> <button class="scale-95 active:opacity-80 transition-all hover:text-indigo-500 duration-300"> <span class="material-symbols-outlined text-[28px]">add_circle</span> </button> <div class="w-10 h-10 rounded-full overflow-hidden ml-2 shadow-[0_4px_12px_rgba(28,27,27,0.06)] border border-outline-variant/15"> <img alt="User avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDH-pJUarexE-P4tAf_UfJhzZpSL3Xa-e0Ub93U72SSUEG06i7xMa2Hf8oqdz5YLzHDuUJO0Aa1w5sN2t38rZb99stV8j9Tr0jv9RouzruoMeeQkcHftqytMV2vWGkxMlZeCKYtw2MGY8uvr2JTSuRWXQXUxav614FGwlyKs-jCyt0t9jI-GrDwi7kBcBJKeZCuwo7Eodd1yqlTHgTp-eiEJifAAw5oMnlt-OQ403fSV4KFmYQoXLATf-sLo8TZ07vZHbLNKfmdwEA"/> </div> </div> </div> </header> <main class="w-full max-w-screen-2xl mx-auto overflow-hidden">  <section class="relative min-h-[921px] flex items-center px-6 md:px-12 lg:px-24 py-20 mt-8"> <div class="absolute inset-0 z-0 flex justify-end"> <div class="w-full md:w-3/4 h-[819px] bg-surface-container-highest rounded-l-[4rem] overflow-hidden relative"> <img alt="Campus Life" class="w-full h-full object-cover opacity-90" data-alt="students walking across modern university campus at sunset with striking modern architecture and dynamic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBnNJI-LagC0QXZ2WyWRLzUoRFNbu_nHouxHvPF0eThGtu0AXYTj_DnJXqftFdR5dK2Z5f7jDCV36u8UrdbbMYuIO9C_z9n2LXqinC1TwQFzvz-XMdaENEAy3R70SZW2mIysifZ4GWN4pMtHpP-1m3odZyfQUm9IGamIuAqF0j_GuVMdn-tkrmpLRRlV8fVqTd8VAMGTFWyI0mdLckU6J8ImC16DFi4E8MxXZjrqVtWo4XRsoI2bWsXlddi-l9hyXNk-34YqsaNDro"/> <div class="absolute inset-0 bg-gradient-to-r from-surface via-surface/50 to-transparent"></div> </div> </div> <div class="relative z-10 w-full md:w-1/2 flex flex-col items-start gap-8"> <div class="glass-panel px-6 py-2 rounded-full inline-flex items-center gap-2 text-primary font-label text-sm tracking-widest uppercase"> <span class="material-symbols-outlined text-base">auto_awesome</span> 涓浗楂樻牎鏍″洯绀句氦鍏ュ彛 </div> <h1 class="font-display text-6xl md:text-8xl font-extrabold tracking-tighter text-on-surface leading-[1.1]"> 杩炴帴鏍″洯锛?br/> <span class="text-primary relative inline-block mt-4">閲嶅鍙欎簨 <div class="absolute -bottom-2 left-0 w-full h-4 bg-primary-fixed -z-10 opacity-60"></div> </span> </h1> <p class="font-body text-xl md:text-2xl text-on-surface-variant max-w-lg leading-relaxed font-light mt-4"> 瓒呰秺浼犵粺鍔ㄦ€佹祦锛屼互楂樼鏁板瓧鏉傚織浣撻獙锛岄噸鏂板彂鐜板睘浜庝綘鐨勬牎鍥敓娲荤編瀛︺€? </p> <div class="flex gap-6 mt-8"> <button class="signature-gradient text-on-primary font-label text-lg px-10 py-5 rounded-full shadow-[0_20px_40px_rgba(70,72,212,0.25)] hover:scale-105 transition-transform duration-300"> 绔嬪嵆浣撻獙 </button> <button class="bg-surface-container-lowest text-primary font-label text-lg px-10 py-5 rounded-full border border-outline-variant/15 shadow-[0_10px_30px_rgba(28,27,27,0.04)] hover:bg-surface-container-low transition-colors duration-300"> 鎺㈢储鐏垫劅 </button> </div> </div> </section>  <section class="px-6 md:px-12 lg:px-24 py-32 bg-surface-container-low mt-20 rounded-[3rem] md:rounded-[4rem]"> <div class="flex flex-col items-center mb-24 text-center"> <h2 class="font-display text-4xl md:text-5xl font-bold tracking-tight text-on-surface mb-6">閲嶆柊瀹氫箟绀句氦杈圭晫</h2> <p class="font-body text-lg text-on-surface-variant max-w-2xl mx-auto">鎵撶牬鏍煎瓙闂寸殑璁捐鏉熺細锛屼互鎰忓浘椹卞姩鐨勬ā鍧楋紝鏋勫缓灞炰簬浣犵殑鏁板瓧鐢熸椿妗ｆ銆?/p> </div> <div class="grid grid-cols-1 md:grid-cols-12 gap-8 auto-rows-[400px]">  <div class="md:col-span-8 bg-surface-container-lowest rounded-lg p-12 relative overflow-hidden group shadow-[0_20px_60px_rgba(28,27,27,0.03)] border border-outline-variant/10"> <div class="relative z-10 w-2/3"> <div class="w-16 h-16 rounded-2xl bg-primary-fixed flex items-center justify-center mb-8"> <span class="material-symbols-outlined text-primary text-3xl" style="font-variation-settings: 'FILL' 1;">auto_awesome</span> </div> <h3 class="font-display text-3xl font-bold text-on-surface mb-4">鍐呭绛栧睍</h3> <p class="font-body text-on-surface-variant text-lg leading-relaxed">涓嶅啀鏄棤鎰忎箟鐨勪俊鎭祦鐎戝竷銆傛垜浠簿閫夐珮璐ㄩ噺鐨勬牎鍥灛闂达紝濡傚浘涔﹂鐨勮惤鏃ャ€佸疄楠屽鐨勬竻鏅紝涓轰綘鎻愪緵娌夋蹈寮忕殑闃呰浣撻獙銆?/p> </div> <div class="absolute -right-20 -bottom-20 w-3/4 h-3/4 rounded-tl-[4rem] overflow-hidden shadow-2xl transition-transform duration-700 group-hover:-translate-y-4 group-hover:-translate-x-4"> <img alt="Curated Feed Example" class="w-full h-full object-cover" data-alt="aesthetic shot of a university library at golden hour, student reading book, soft warm lighting, minimalist composition" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZL9NlRCD4KLdQM_-RFkJ8K5WhDlhVJsL9Doorel7NUF7f_Gc42wusI2CjImursNCDXCd7vP6qwtDqkG4HkTTPZ2aJz_DPO1rniZOeWcxr1GrqTLQkdO-z8VFxz1NkZvSkMvc_NgHOkADxQqmA1dB18BTHFnuhybpfjNId6jQFt1r9CQ3-vQCNo5IYW1-6fukKuRnLkaXd3ECWYCuxvLF426rDTyGt-sG38ocn1joKlfg0aEDOiLPk1-mccZO-r91-cMihTt7Mvwo"/> </div> </div>  <div class="md:col-span-4 bg-primary text-on-primary rounded-lg p-10 relative overflow-hidden group shadow-[0_20px_40px_rgba(70,72,212,0.2)]"> <div class="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-white via-transparent to-transparent"></div> <div class="relative z-10 flex flex-col h-full justify-between"> <div> <div class="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-md flex items-center justify-center mb-8"> <span class="material-symbols-outlined text-white text-3xl">storefront</span> </div> <h3 class="font-display text-3xl font-bold mb-4">鐏垫劅闆嗗競</h3> </div> <p class="font-body text-primary-fixed text-lg leading-relaxed mb-8">鎶€鑳戒氦鎹€侀棽缃祦杞€侀」鐩嫑鍕熴€備互鏇翠紭闆呯殑鍗＄墖褰㈠紡锛屽彂鐜版牎鍥唴鐨勯殣褰环鍊肩綉缁溿€?/p> <button class="self-start px-6 py-3 rounded-full bg-white text-primary font-label text-sm font-bold hover:scale-105 transition-transform"> 娴忚闆嗗競鈫? </button> </div> </div>  <div class="md:col-span-5 bg-surface-container-highest rounded-lg p-10 relative overflow-hidden group"> <div class="absolute inset-0 z-0"> <img alt="Clubs Background" class="w-full h-full object-cover opacity-40 mix-blend-multiply filter grayscale transition-all duration-700 group-hover:grayscale-0 group-hover:opacity-60" data-alt="group of university students collaborating around a table outdoors, bright sunny day, joyful atmosphere" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfZHu0RB3ON3o6K3ZesHWjSZ-_OrfdRAFcZM01QXcvkVCStFnZdjnx-iQqcUAAv4GPpIbQqK5tCCOwLIXEgRpHya4XZlQHiCUhkiSh39wkgOtKFK_LTYsdc5zLjbJ45Fbw7opD1qtILe0FrCXRTgIT2fmkNuM492iStaSHa_rVoNCq2cSM4hIpjOu5cCcMtOpPKLnR02_Rvbn-mTxxoa00-fw7EFTp0CzCIIXyH8tSlHge4AzcsYmgE3H8lGUkfDnh1qfZx0PJK2o"/> </div> <div class="relative z-10 flex flex-col justify-end h-full"> <div class="glass-panel p-8 rounded-[2rem]"> <div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center mb-4"> <span class="material-symbols-outlined text-white text-xl">groups</span> </div> <h3 class="font-display text-2xl font-bold text-on-surface mb-2">鍏遍福绀剧兢</h3> <p class="font-body text-on-surface-variant text-sm">瀵绘壘棰戠巼鐩稿悓鐨勫０闊炽€傞珮搴﹀畾鍒跺寲鐨勭ぞ鍥富椤碉紝灞曠ず鐙壒鏂囧寲銆?/p> </div> </div> </div>  <div class="md:col-span-7 bg-surface-container-lowest rounded-lg p-12 flex flex-col justify-center items-center text-center shadow-[0_20px_60px_rgba(28,27,27,0.03)] border border-outline-variant/10"> <h3 class="font-display text-xl text-on-surface-variant mb-12 tracking-widest uppercase">閲嶅鏍″洯鐢熸€?/h3> <div class="flex flex-wrap justify-center gap-16 w-full"> <div class="flex flex-col items-center"> <span class="font-display text-6xl font-black text-primary mb-2">12k+</span> <span class="font-label text-on-surface-variant text-sm font-semibold tracking-wide">娲昏穬鍒涗綔鑰?/span> </div> <div class="flex flex-col items-center"> <span class="font-display text-6xl font-black text-primary mb-2">450</span> <span class="font-label text-on-surface-variant text-sm font-semibold tracking-wide">鍏ラ┗绀惧洟</span> </div> <div class="flex flex-col items-center"> <span class="font-display text-6xl font-black text-primary mb-2">98%</span> <span class="font-label text-on-surface-variant text-sm font-semibold tracking-wide">濂借瘎鎺ㄨ崘</span> </div> </div> </div> </div> </section>  <section class="py-40 px-6 text-center relative overflow-hidden"> <div class="absolute inset-0 -z-10 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-primary-fixed/50 via-surface to-surface"></div> <div class="max-w-3xl mx-auto flex flex-col items-center"> <span class="material-symbols-outlined text-6xl text-primary mb-8" style="font-variation-settings: 'FILL' 1;">view_cozy</span> <h2 class="font-display text-5xl md:text-7xl font-extrabold text-on-surface tracking-tighter mb-8"> 鍑嗗濂藉紑鍚叏鏂颁綋楠屼簡鍚楋紵 </h2> <p class="font-body text-xl text-on-surface-variant mb-12 max-w-lg leading-relaxed"> 鍔犲叆銆屾牎鑱氥€嶏紝鎴愪负棣栨壒鏍″洯鏁板瓧绛栧睍浜恒€備綘鐨勬瘡涓€鍒嗙嫭鐗癸紝閮藉€煎緱琚紭闆呭憟鐜般€? </p> <button class="signature-gradient text-on-primary font-display text-xl font-bold px-12 py-6 rounded-full shadow-[0_20px_40px_rgba(70,72,212,0.3)] hover:scale-105 transition-transform duration-300"> 鍔犲叆鍐呮祴 </button> </div> </section> </main>  <footer class="bg-slate-50 dark:bg-slate-950 w-full py-12 border-t border-slate-100 dark:border-slate-900 transition-colors"> <div class="flex flex-col md:flex-row justify-between items-center px-12 max-w-screen-2xl mx-auto gap-8"> <div class="text-lg font-black text-slate-900 dark:text-white font-display tracking-tighter"> 鏍¤仛 </div> <nav class="flex gap-8 font-['Plus_Jakarta_Sans'] text-sm tracking-wide"> <a class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 underline decoration-indigo-500 underline-offset-4 transition-all" href="#">鍏充簬鎴戜滑</a> <a class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors" href="#">鏈嶅姟鍗忚</a> <a class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors" href="#">闅愮鏀跨瓥</a> <a class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors" href="#">鑱旂郴鎴戜滑</a> </nav> <div class="font-['Plus_Jakarta_Sans'] text-sm tracking-wide text-slate-400"> 漏 2026 鏍¤仛銆傛湇鍔′腑鍥介珮鏍℃牎鍥ぞ鍖恒€? </div> </div> </footer> </body></html>