's'

app/apps/[slug]/page.tsx

@@ -15,19 +15,28 @@ export default async function AppDetailPage({ params }: { params: Promise<{ slug
   const appResources = await getApps();
   const related = appResources.filter((i) => i.slug !== slug).slice(0, 3);
   return (
-    <div className="space-y-6 py-8">
+    <div className="space-y-5 py-6 md:space-y-6 md:py-8">
       <ScrollReveal>
-      <section className="card-glass relative overflow-hidden">
-        <div className="pointer-events-none absolute -right-8 -top-8 h-36 w-36 rounded-full bg-cyan-300/20 blur-3xl" />
-        <div className="flex items-center gap-4">
-          <div className="text-4xl">{app.icon}</div>
-          <div>
-            <h1 className="text-3xl font-bold">{app.name}</h1>
-            <p className="text-slate-300">{app.subtitle}</p>
+      <section className="panel-strong">
+        <div className="grid gap-4 md:grid-cols-12 md:items-center">
+          <div className="md:col-span-8">
+            <div className="flex items-center gap-4">
+              <div className="grid h-14 w-14 place-items-center rounded-2xl border border-white/10 bg-slate-900/45 text-3xl">{app.icon}</div>
+              <div>
+                <h1 className="text-2xl font-bold md:text-3xl">{app.name}</h1>
+                <p className="text-sm text-slate-300 md:text-base">{app.subtitle}</p>
+              </div>
+            </div>
+            <div className="mt-3 flex flex-wrap gap-2">
+              {app.tags.map((t) => <span key={t} className="pill">{t}</span>)}
+            </div>
+          </div>
+          <div className="md:col-span-4">
+            <div className="rounded-xl border border-cyan-300/25 bg-cyan-400/10 p-3 text-sm">
+              <p className="text-xs uppercase tracking-wide text-cyan-200/80">下载提示</p>
+              <p className="mt-2 text-slate-100">建议优先使用主线路，若下载慢可切换备用源或历史版本。</p>
+            </div>
           </div>
-        </div>
-        <div className="mt-3 flex flex-wrap gap-2">
-          {app.tags.map((t) => <span key={t} className="pill">{t}</span>)}
         </div>
       </section>
       </ScrollReveal>
@@ -46,31 +55,36 @@ export default async function AppDetailPage({ params }: { params: Promise<{ slug
       <ScrollReveal delay={0.1}>
         <ChangelogTimeline app={app} />
       </ScrollReveal>
-
-      <ScrollReveal delay={0.12}>
-      <section className="card-glass">
-        <h3 className="text-lg font-semibold">软件介绍</h3>
-        <p className="mt-2 text-sm text-slate-300">{app.description}</p>
-        <h4 className="mt-4 font-medium">使用说明</h4>
-        <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
-          {app.usage.map((u) => <li key={u}>{u}</li>)}
-        </ul>
+      <section className="grid gap-4 lg:grid-cols-12">
+        <div className="space-y-4 lg:col-span-8">
+          <ScrollReveal delay={0.12}>
+          <section className="panel">
+            <h3 className="text-base font-semibold">软件介绍</h3>
+            <p className="mt-2 text-sm text-slate-300">{app.description}</p>
+            <h4 className="mt-4 text-sm font-medium">使用说明</h4>
+            <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-slate-300">
+              {app.usage.map((u) => <li key={u}>{u}</li>)}
+            </ul>
+          </section>
+          </ScrollReveal>
+          <ScrollReveal delay={0.14}>
+            <ScreenshotGallery slug={app.slug} shots={app.screenshots} />
+          </ScrollReveal>
+        </div>
+        <div className="space-y-4 lg:col-span-4">
+          <ScrollReveal delay={0.16}>
+            <QRCodeSection />
+          </ScrollReveal>
+          <ScrollReveal delay={0.18}>
+            <UnlockSection />
+          </ScrollReveal>
+        </div>
       </section>
-      </ScrollReveal>
-      <ScrollReveal delay={0.14}>
-      <ScreenshotGallery slug={app.slug} shots={app.screenshots} />
-      </ScrollReveal>
-      <ScrollReveal delay={0.16}>
-        <QRCodeSection />
-      </ScrollReveal>
-      <ScrollReveal delay={0.18}>
-        <UnlockSection />
-      </ScrollReveal>
       <ScrollReveal delay={0.2}>
-      <section className="space-y-3">
-        <h3 className="text-lg font-semibold">相关推荐</h3>
-        <AppGrid apps={related} />
-      </section>
+        <section className="space-y-3">
+          <h3 className="text-base font-semibold">相关推荐</h3>
+          <AppGrid apps={related} />
+        </section>
       </ScrollReveal>
     </div>
   );

app/apps/page.tsx

@@ -4,9 +4,14 @@ import { getApps } from "@/services/apps.service";
 export default async function AppsPage() {
   const apps = await getApps();
   return (
-    <div className="space-y-6 py-8">
-      <h1 className="text-3xl font-bold">资源列表</h1>
-      <p className="text-sm text-slate-300">支持搜索、分类筛选、排序与加载更多（本地 mock 过滤）。</p>
+    <div className="space-y-5 py-6 md:space-y-6 md:py-8">
+      <section className="panel">
+        <p className="text-xs uppercase tracking-[0.25em] text-cyan-200/80">Download Center</p>
+        <h1 className="mt-2 text-2xl font-bold md:text-3xl">网盘资源下载站</h1>
+        <p className="mt-2 max-w-2xl text-sm text-slate-300 md:text-base">
+          聚合热门工具、影视和学习资源，支持多渠道下载与版本回溯，快速定位你需要的资源。
+        </p>
+      </section>
       <AppsExplorer apps={apps} />
     </div>
   );