From 4e675d70c13aeed0db9cd5f81a589d95058ae516 Mon Sep 17 00:00:00 2001
From: mini <afanamigo@gmail.com>
Date: Sun, 19 Apr 2026 21:01:10 +0800
Subject: [PATCH] feat(landing): Footer + sticky Nav styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 4-column footer (brand/产品/资源/联系), responsive 2-col on mobile
- Nav sticky with blur background, border-bottom
- nav-links hidden on mobile (<640px)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/landing/LandingView.vue | 111 +++++++++++++++++++++
 1 file changed, 111 insertions(+)

diff --git a/frontend/src/views/landing/LandingView.vue b/frontend/src/views/landing/LandingView.vue
index eef5eb6d..9fb8e46b 100644
--- a/frontend/src/views/landing/LandingView.vue
+++ b/frontend/src/views/landing/LandingView.vue
@@ -181,6 +181,33 @@ requires_openai_auth = <span class="kw">true</span></code></pre>
         </div>
       </div>
     </section>
+
+    <!-- ⑥ Footer -->
+    <footer class="puro-footer">
+      <div class="container footer-grid">
+        <div class="footer-brand">
+          <div class="brand"><span class="hex">⬢</span><span>PURO AI</span></div>
+          <p class="footer-tagline">Self-hosted on puro.im</p>
+          <p class="footer-meta">© 2026 puro.im · MIT License<br>fork of Wei-Shaw/sub2api</p>
+        </div>
+        <div class="footer-col">
+          <div class="footer-col-title">产品</div>
+          <a href="/docs">文档</a>
+          <a href="https://git.puro.im/purovps/sub2api/releases" target="_blank" rel="noopener">更新日志</a>
+        </div>
+        <div class="footer-col">
+          <div class="footer-col-title">资源</div>
+          <a href="https://git.puro.im/purovps/sub2api" target="_blank" rel="noopener">GitHub</a>
+          <a href="/docs#codex">Codex 配置示例</a>
+          <a href="https://status.puro.im" target="_blank" rel="noopener">API 状态</a>
+        </div>
+        <div class="footer-col">
+          <div class="footer-col-title">联系</div>
+          <a href="mailto:admin@puro.im">admin@puro.im</a>
+          <a href="https://git.puro.im" target="_blank" rel="noopener">git.puro.im</a>
+        </div>
+      </div>
+    </footer>
   </div>
 </template>
 
@@ -381,4 +408,88 @@ requires_openai_auth = <span class="kw">true</span></code></pre>
 }
 .chart-title { font-size: 12px; color: var(--text-2); margin-bottom: 12px; }
 .chart-svg { width: 100%; height: 120px; display: block; }
+
+/* Nav sticky + responsive tweaks (augments puro.css defaults) */
+.nav {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: rgba(10,14,26,0.75);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid var(--border);
+}
+.nav-inner {
+  display: flex;
+  align-items: center;
+  gap: 28px;
+  padding: 16px 24px;
+  max-width: 1120px;
+  margin: 0 auto;
+}
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 700;
+  font-size: 16px;
+}
+.brand .hex {
+  color: var(--cyan);
+  font-size: 20px;
+}
+.nav-links {
+  display: flex;
+  gap: 20px;
+  font-size: 14px;
+  color: var(--text-2);
+}
+.nav-links a:hover { color: var(--text-0); }
+.nav-cta {
+  display: flex;
+  gap: 10px;
+  margin-left: auto;
+}
+@media (max-width: 640px) {
+  .nav-links { display: none; }
+}
+
+/* Footer */
+.puro-footer {
+  margin-top: 80px;
+  padding: 60px 24px 40px;
+  border-top: 1px solid var(--border);
+}
+.footer-grid {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 36px;
+}
+@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
+.footer-brand .brand { margin-bottom: 12px; }
+.footer-tagline { color: var(--text-2); font-size: 13px; margin-bottom: 8px; }
+.footer-meta { color: var(--text-3); font-size: 12px; line-height: 1.7; }
+.footer-col-title {
+  color: var(--text-0);
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+.footer-col a {
+  display: block;
+  color: var(--text-2);
+  font-size: 13px;
+  padding: 4px 0;
+}
+.footer-col a:hover { color: var(--cyan); }
+
+/* pill */
+.pill {
+  display: inline-block;
+  padding: 6px 14px;
+  border: 1px solid var(--border-2);
+  border-radius: 999px;
+  font-size: 12px;
+  color: var(--text-2);
+  background: rgba(15,23,42,0.6);
+}
 </style>