From dd6e369e6ad255ff27da563988ce6359f5a53215 Mon Sep 17 00:00:00 2001
From: chenkailing <632104866@qq.com>
Date: Sat, 11 Apr 2026 15:19:26 +0800
Subject: [PATCH] feat: polish demo portal pages

---
 .../web/controller/IndexController.java       |   5 +
 .../main/resources/static/css/main-pages.css  | 272 +++++++++++++++++-
 .../static/images/hero-icons/excel.svg        |   1 +
 .../static/images/hero-icons/pdf.svg          |   1 +
 .../static/images/hero-icons/powerpoint.svg   |   1 +
 .../static/images/hero-icons/word.svg         |   1 +
 .../src/main/resources/web/main/contact.ftl   | 104 +++++++
 server/src/main/resources/web/main/index.ftl  | 103 +++----
 .../main/resources/web/main/integrated.ftl    |   8 +-
 server/src/main/resources/web/main/record.ftl |  19 +-
 .../src/main/resources/web/main/sponsor.ftl   |   5 +-
 11 files changed, 434 insertions(+), 86 deletions(-)
 create mode 100644 server/src/main/resources/static/images/hero-icons/excel.svg
 create mode 100644 server/src/main/resources/static/images/hero-icons/pdf.svg
 create mode 100644 server/src/main/resources/static/images/hero-icons/powerpoint.svg
 create mode 100644 server/src/main/resources/static/images/hero-icons/word.svg
 create mode 100644 server/src/main/resources/web/main/contact.ftl

diff --git a/server/src/main/java/cn/keking/web/controller/IndexController.java b/server/src/main/java/cn/keking/web/controller/IndexController.java
index c33b235a..b7fbbe24 100644
--- a/server/src/main/java/cn/keking/web/controller/IndexController.java
+++ b/server/src/main/java/cn/keking/web/controller/IndexController.java
@@ -31,6 +31,11 @@ public class IndexController {
         return "/main/integrated";
     }
 
+    @GetMapping( "/contact")
+    public String go2Contact(){
+        return "/main/contact";
+    }
+
     @GetMapping( "/")
     public String root() {
         return "/main/index";
diff --git a/server/src/main/resources/static/css/main-pages.css b/server/src/main/resources/static/css/main-pages.css
index 2fdfbdb2..f44653b9 100644
--- a/server/src/main/resources/static/css/main-pages.css
+++ b/server/src/main/resources/static/css/main-pages.css
@@ -120,7 +120,7 @@ a:focus {
 }
 
 .page-shell {
-    padding: 118px 0 64px;
+    padding: 72px 0 64px;
 }
 
 .section-heading {
@@ -221,7 +221,7 @@ a:focus {
 
 .hero-title {
     margin: 20px 0 16px;
-    font-size: clamp(26px, 2.8vw, 40px);
+    font-size: clamp(24px, 2.4vw, 36px);
     line-height: 1.08;
     letter-spacing: -0.045em;
 }
@@ -234,6 +234,12 @@ a:focus {
     line-height: 1.8;
 }
 
+.hero-subtitle-inline {
+    max-width: none;
+    white-space: nowrap;
+    display: inline-block;
+}
+
 .hero-stats,
 .hero-actions,
 .feature-grid,
@@ -269,7 +275,11 @@ a:focus {
 }
 
 .hero-actions {
-    grid-template-columns: repeat(2, minmax(0, max-content));
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 4px;
 }
 
 .hero-link {
@@ -303,6 +313,147 @@ a:focus {
     padding: 28px;
 }
 
+.home-hero-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.18fr) minmax(320px, 0.82fr);
+    gap: 28px;
+    align-items: start;
+}
+
+.home-hero-copy .hero-subtitle {
+    max-width: 700px;
+}
+
+.home-hero-side {
+    display: flex;
+    justify-content: center;
+    transform: translateY(-10px);
+}
+
+.doc-stack {
+    position: relative;
+    height: 246px;
+    width: 100%;
+    max-width: 304px;
+}
+
+.doc-sheet {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 136px;
+    height: 174px;
+    padding: 14px 14px 12px;
+    border-radius: 24px;
+    border: 1px solid rgba(17, 19, 21, 0.1);
+    background: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 22px 40px rgba(17, 19, 21, 0.12);
+    overflow: hidden;
+}
+
+.doc-sheet img {
+    width: 38px;
+    height: 38px;
+}
+
+.doc-sheet::after {
+    content: "";
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    top: 64px;
+    bottom: 46px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M2 18 C20 8 40 28 60 18 S100 28 118 18' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 42 C20 32 40 52 60 42 S100 52 118 42' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 66 C20 56 40 76 60 66 S100 76 118 66' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 90 C20 80 40 100 60 90 S100 100 118 90' stroke='%23e6ebf2' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 118% 100%;
+    opacity: 0.9;
+    pointer-events: none;
+}
+
+.doc-sheet img,
+.doc-sheet span {
+    position: relative;
+    z-index: 1;
+}
+
+.doc-sheet span {
+    display: inline-flex;
+    align-items: center;
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: rgba(17, 19, 21, 0.06);
+    color: var(--text);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+}
+
+.sheet-word {
+    top: 16px;
+    left: 12px;
+    transform: rotate(-10deg);
+    z-index: 1;
+}
+
+.sheet-excel {
+    top: 68px;
+    left: 88px;
+    transform: rotate(-2deg);
+    z-index: 2;
+}
+
+.sheet-powerpoint {
+    top: 8px;
+    right: 10px;
+    transform: rotate(9deg);
+    z-index: 3;
+}
+
+.sheet-pdf {
+    top: 94px;
+    right: 48px;
+    transform: rotate(4deg);
+    z-index: 4;
+}
+
+.contact-hero-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.28fr) minmax(260px, 0.72fr);
+    gap: 44px;
+    align-items: start;
+}
+
+.contact-hero-copy .hero-title,
+.contact-hero-copy .hero-subtitle {
+    max-width: none;
+}
+
+.contact-hero-side {
+    justify-self: end;
+    width: 100%;
+    max-width: 360px;
+    padding-top: 26px;
+}
+
+.support-summary {
+    display: grid;
+    gap: 14px;
+    width: 100%;
+}
+
+.support-summary-item {
+    padding: 0;
+}
+
+.support-summary-item p {
+    margin: 12px 0 0;
+    color: var(--text-muted);
+    line-height: 1.7;
+}
+
 .hero-card h3,
 .workspace-card h3,
 .doc-card h3,
@@ -380,16 +531,39 @@ a:focus {
 }
 
 .preview-url {
+    display: flex;
+    align-items: center;
+    gap: 12px;
     margin-bottom: 14px;
 }
 
+.preview-url .form-control {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.preview-url .preview-submit {
+    flex: 0 0 168px;
+}
+
+.preview-options {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 14px;
+    overflow-x: auto;
+    padding-bottom: 4px;
+}
+
 .preview-grid {
     display: flex;
     flex-wrap: nowrap;
     gap: 12px;
-    margin-bottom: 14px;
-    overflow-x: auto;
-    padding-bottom: 4px;
+    margin-bottom: 0;
+    overflow: visible;
+    padding-bottom: 0;
+    flex: 1 1 auto;
+    min-width: 620px;
 }
 
 .preview-grid .form-control {
@@ -399,9 +573,12 @@ a:focus {
 
 .preview-switches {
     display: flex;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
     gap: 10px;
-    margin-bottom: 14px;
+    margin-bottom: 0;
+    overflow: visible;
+    padding-bottom: 0;
+    flex: 0 0 auto;
 }
 
 .preview-switches label {
@@ -414,6 +591,7 @@ a:focus {
     background: rgba(255, 255, 255, 0.76);
     border: 1px solid rgba(17, 19, 21, 0.08);
     font-weight: 600;
+    white-space: nowrap;
 }
 
 .preview-switches input {
@@ -441,8 +619,8 @@ a:focus {
 }
 
 .preview-submit {
-    width: 100%;
-    min-height: 52px;
+    width: 168px;
+    min-height: 48px;
 }
 
 .feature-section,
@@ -452,6 +630,16 @@ a:focus {
     margin-top: 34px;
 }
 
+.workspace-section .section-heading h2 {
+    font-size: 24px;
+    line-height: 1.15;
+}
+
+.feature-section .section-heading h2 {
+    font-size: 24px;
+    line-height: 1.15;
+}
+
 .feature-grid {
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
@@ -1031,10 +1219,13 @@ a:focus {
 
 @media (max-width: 1080px) {
     .hero-grid,
+    .home-hero-layout,
+    .contact-hero-layout,
     .docs-layout,
     .toolbar-grid,
     .release-columns,
-    .source-grid {
+    .source-grid,
+    .preview-options {
         grid-template-columns: 1fr;
     }
 
@@ -1042,6 +1233,31 @@ a:focus {
         position: static;
     }
 
+    .contact-hero-side {
+        padding-top: 0;
+    }
+
+    .home-hero-side {
+        justify-content: flex-start;
+    }
+
+    .doc-stack {
+        height: auto;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 14px;
+    }
+
+    .doc-sheet {
+        position: relative;
+        top: auto;
+        right: auto;
+        left: auto;
+        width: 100%;
+        height: 180px;
+        transform: none;
+    }
+
     .hero-stats,
     .feature-grid,
     .summary-grid,
@@ -1073,7 +1289,11 @@ a:focus {
     }
 
     .hero-title {
-        font-size: 24px;
+        font-size: 22px;
+    }
+
+    .hero-subtitle-inline {
+        white-space: normal;
     }
 
     .hero-stats,
@@ -1086,10 +1306,36 @@ a:focus {
 
     .preview-grid {
         flex-wrap: wrap;
+        min-width: 0;
+        overflow-x: visible;
+    }
+
+    .preview-options {
+        display: block;
+        overflow-x: visible;
+        padding-bottom: 0;
+    }
+
+    .preview-url {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .preview-url .preview-submit {
+        flex: 0 0 auto;
+    }
+
+    .preview-switches {
+        flex-wrap: wrap;
+        overflow-x: visible;
+        padding-bottom: 0;
+        margin-bottom: 14px;
     }
 
     .hero-actions {
-        grid-template-columns: 1fr;
+        flex-wrap: wrap;
+        overflow-x: visible;
+        padding-bottom: 0;
     }
 
     .workspace-header,
diff --git a/server/src/main/resources/static/images/hero-icons/excel.svg b/server/src/main/resources/static/images/hero-icons/excel.svg
new file mode 100644
index 00000000..9fc655db
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/excel.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Excel</title><path d="M23 1.5q.41 0 .7.3.3.29.3.7v19q0 .41-.3.7-.29.3-.7.3H7q-.41 0-.7-.3-.3-.29-.3-.7V18H1q-.41 0-.7-.3-.3-.29-.3-.7V7q0-.41.3-.7Q.58 6 1 6h5V2.5q0-.41.3-.7.29-.3.7-.3zM6 13.28l1.42 2.66h2.14l-2.38-3.87 2.34-3.8H7.46l-1.3 2.4-.05.08-.04.09-.64-1.28-.66-1.29H2.59l2.27 3.82-2.48 3.85h2.16zM14.25 21v-3H7.5v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3H7.5v3zm8.25 15v-3h-6.75v3zm0-4.5v-3.75h-6.75v3.75zm0-5.25V7.5h-6.75v3.75zm0-5.25V3h-6.75v3Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/static/images/hero-icons/pdf.svg b/server/src/main/resources/static/images/hero-icons/pdf.svg
new file mode 100644
index 00000000..2b0b1138
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/pdf.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Adobe Acrobat Reader</title><path d="M23.63 15.3c-.71-.745-2.166-1.17-4.224-1.17-1.1 0-2.377.106-3.761.354a19.443 19.443 0 0 1-2.307-2.661c-.532-.71-.994-1.49-1.42-2.236.817-2.484 1.207-4.507 1.207-5.962 0-1.632-.603-3.336-2.342-3.336-.532 0-1.065.32-1.349.781-.78 1.384-.425 4.4.923 7.381a60.277 60.277 0 0 1-1.703 4.507c-.568 1.349-1.207 2.733-1.917 4.01C2.834 18.53.314 20.34.03 21.758c-.106.533.071 1.03.462 1.42.142.107.639.533 1.49.533 2.59 0 5.323-4.188 6.707-6.707 1.065-.355 2.13-.71 3.194-.994a34.963 34.963 0 0 1 3.407-.745c2.732 2.448 5.145 2.839 6.352 2.839 1.49 0 2.023-.604 2.2-1.1.32-.64.106-1.349-.213-1.704zm-1.42 1.03c-.107.532-.64.887-1.384.887-.213 0-.39-.036-.604-.071-1.348-.32-2.626-.994-3.903-2.059a17.717 17.717 0 0 1 2.98-.248c.746 0 1.385.035 1.81.142.497.106 1.278.426 1.1 1.348zm-7.524-1.668a38.01 38.01 0 0 0-2.945.674 39.68 39.68 0 0 0-2.52.745 40.05 40.05 0 0 0 1.207-2.555c.426-.994.78-2.023 1.136-2.981.354.603.745 1.207 1.135 1.739a50.127 50.127 0 0 0 1.987 2.378zM10.038 1.46a.768.768 0 0 1 .674-.425c.745 0 .887.851.887 1.526 0 1.135-.355 2.874-.958 4.861-1.03-2.768-1.1-5.074-.603-5.962zM6.134 17.997c-1.81 2.981-3.549 4.826-4.613 4.826a.872.872 0 0 1-.532-.177c-.213-.213-.32-.461-.249-.745.213-1.065 2.271-2.555 5.394-3.904Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/static/images/hero-icons/powerpoint.svg b/server/src/main/resources/static/images/hero-icons/powerpoint.svg
new file mode 100644
index 00000000..294fbee3
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/powerpoint.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft PowerPoint</title><path d="M13.5 1.5q1.453 0 2.795.375 1.342.375 2.508 1.06 1.166.686 2.12 1.641.956.955 1.641 2.121.686 1.166 1.061 2.508Q24 10.547 24 12q0 1.453-.375 2.795-.375 1.342-1.06 2.508-.686 1.166-1.641 2.12-.955.956-2.121 1.641-1.166.686-2.508 1.061-1.342.375-2.795.375-1.29 0-2.52-.305-1.23-.304-2.337-.884-1.108-.58-2.063-1.418-.955-.838-1.693-1.893H.997q-.411 0-.704-.293T0 17.004V6.996q0-.41.293-.703T.996 6h3.89q.739-1.055 1.694-1.893.955-.837 2.063-1.418 1.107-.58 2.337-.884Q12.21 1.5 13.5 1.5zm.75 1.535v8.215h8.215q-.14-1.64-.826-3.076-.686-1.436-1.782-2.531-1.095-1.096-2.537-1.782-1.441-.685-3.07-.826zm-5.262 7.57q0-.68-.228-1.166-.229-.486-.627-.79-.399-.305-.938-.446-.539-.14-1.172-.14H2.848v7.863h1.84v-2.742H5.93q.574 0 1.119-.17t.978-.493q.434-.322.698-.802.263-.48.263-1.114zM13.5 21q1.172 0 2.262-.287t2.056-.82q.967-.534 1.776-1.278.808-.744 1.418-1.664.61-.92.984-1.986.375-1.067.469-2.227h-9.703V3.035q-1.735.14-3.27.908T6.797 6h4.207q.41 0 .703.293t.293.703v10.008q0 .41-.293.703t-.703.293H6.797q.644.715 1.412 1.271.768.557 1.623.944.855.387 1.781.586Q12.54 21 13.5 21zM5.812 9.598q.575 0 .915.228.34.229.34.838 0 .27-.124.44-.123.17-.31.275-.188.105-.422.146-.234.041-.445.041H4.687V9.598Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/static/images/hero-icons/word.svg b/server/src/main/resources/static/images/hero-icons/word.svg
new file mode 100644
index 00000000..2838d910
--- /dev/null
+++ b/server/src/main/resources/static/images/hero-icons/word.svg
@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Microsoft Word</title><path d="M23.004 1.5q.41 0 .703.293t.293.703v19.008q0 .41-.293.703t-.703.293H6.996q-.41 0-.703-.293T6 21.504V18H.996q-.41 0-.703-.293T0 17.004V6.996q0-.41.293-.703T.996 6H6V2.496q0-.41.293-.703t.703-.293zM6.035 11.203l1.442 4.735h1.64l1.57-7.876H9.036l-.937 4.653-1.325-4.5H5.38l-1.406 4.523-.938-4.675H1.312l1.57 7.874h1.641zM22.5 21v-3h-15v3zm0-4.5v-3.75H12v3.75zm0-5.25V7.5H12v3.75zm0-5.25V3h-15v3Z"/></svg>
\ No newline at end of file
diff --git a/server/src/main/resources/web/main/contact.ftl b/server/src/main/resources/web/main/contact.ftl
new file mode 100644
index 00000000..4c201c82
--- /dev/null
+++ b/server/src/main/resources/web/main/contact.ftl
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>kkFileView 技术支持</title>
+    <link rel="icon" href="./favicon.ico" type="image/x-icon">
+    <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=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="css/theme.css"/>
+    <link rel="stylesheet" href="css/main-pages.css"/>
+    <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
+    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
+</head>
+
+<body class="app-shell">
+<nav class="site-nav navbar navbar-inverse navbar-fixed-top">
+    <div class="container">
+        <div class="navbar-header">
+            <a class="navbar-brand" href="https://kkview.cn" target="_blank">kkFileView</a>
+        </div>
+        <ul class="nav navbar-nav">
+            <li><a href="./index">首页</a></li>
+            <li><a href="./integrated">接入说明</a></li>
+            <li><a href="./record">版本发布记录</a></li>
+            <li><a href="./sponsor">赞助开源</a></li>
+            <li class="active"><a href="./contact">技术支持</a></li>
+        </ul>
+    </div>
+</nav>
+
+<div class="page-shell">
+    <div class="container" role="main">
+        <section class="hero-section release-hero">
+            <div class="hero-copy">
+                <div class="contact-hero-layout">
+                    <div class="contact-hero-copy">
+                    <span class="eyebrow">Contact Us</span>
+                <h1 class="hero-title">技术支持</h1>
+                    <p class="hero-subtitle">
+                        如果你在部署、安装、接入或日常使用 kkFileView 时需要更直接的支持，
+                        可以加入我们的付费知识星球，获取安装使用技术支持。
+                    </p>
+                    <div class="hero-actions">
+                        <a class="hero-link primary" href="https://wx.zsxq.com/group/48844125114258" target="_blank">加入知识星球</a>
+                        <a class="hero-link secondary" href="./integrated">查看接入说明</a>
+                    </div>
+                    </div>
+                    <div class="contact-hero-side">
+                    <div class="support-summary">
+                        <div class="support-summary-item">
+                            <span class="tag brand">安装支持</span>
+                            <p>提供最新的安装发行包，公示安全补丁等。</p>
+                        </div>
+                        <div class="support-summary-item">
+                            <span class="tag">使用咨询</span>
+                            <p>围绕接入、配置和日常使用问题提供支持。</p>
+                        </div>
+                        <div class="support-summary-item">
+                            <span class="tag highlight">付费知识星球</span>
+                            <p>通过知识星球联系，我们提供更直接的技术支持。</p>
+                        </div>
+                    </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <div class="sponsor-grid">
+            <section class="doc-card">
+                <div class="doc-card-header">
+                    <div>
+                        <span class="eyebrow">Support Scope</span>
+                        <h3>支持内容</h3>
+                    </div>
+                </div>
+                <p>如果你希望更快完成部署和落地，可以通过知识星球联系我们，获得更直接的安装使用支持。</p>
+                <ul>
+                    <li>安装部署相关问题。</li>
+                    <li>配置、接入和常见使用问题。</li>
+                    <li>围绕实际使用场景的排查与建议。</li>
+                </ul>
+            </section>
+
+            <section class="doc-card">
+                <div class="doc-card-header">
+                    <div>
+                        <span class="eyebrow">Knowledge Planet</span>
+                        <h3>加入方式</h3>
+                    </div>
+                </div>
+                <p>知识星球地址：</p>
+                <p><a href="https://wx.zsxq.com/group/48844125114258" target="_blank">https://wx.zsxq.com/group/48844125114258</a></p>
+                <div class="note-row">
+                    <span class="tag brand"><a href="https://wx.zsxq.com/group/48844125114258" target="_blank">立即加入</a></span>
+                </div>
+            </section>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/server/src/main/resources/web/main/index.ftl b/server/src/main/resources/web/main/index.ftl
index fc9ecedf..71e3eb49 100644
--- a/server/src/main/resources/web/main/index.ftl
+++ b/server/src/main/resources/web/main/index.ftl
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
     <link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css"/>
     <link rel="stylesheet" href="css/theme.css"/>
-    <link rel="stylesheet" href="css/main-pages.css"/>
+    <link rel="stylesheet" href="css/main-pages.css?v=v1-polish-20260411-3"/>
     <script type="text/javascript" src="js/jquery-3.6.1.min.js"></script>
     <script type="text/javascript" src="js/jquery.form.min.js"></script>
     <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
@@ -75,6 +75,7 @@
             <li><a href="./integrated">接入说明</a></li>
             <li><a href="./record">版本发布记录</a></li>
             <li><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -84,33 +85,40 @@
         <section class="hero-section">
             <div class="hero-grid single">
                 <div class="hero-copy">
+                    <div class="home-hero-layout">
+                        <div class="home-hero-copy">
                     <span class="eyebrow">Preview Engine / Demo Portal</span>
-                    <h1 class="hero-title">把文件预览接进业务系统，像接一个 URL 一样直接。</h1>
+                <h1 class="hero-title">开源的万能文件预览系统</h1>
                     <p class="hero-subtitle">
-                        kkFileView 把文档、图片、CAD、3D、压缩包和音视频预览收敛成一套统一入口。
-                        这版演示页把“URL 预览”和“本地文件预览”并入同一个工作台，避免同类操作被拆成两段。
+                        kkFileView 提供统一的文件预览入口，覆盖 5 大文件族群、70+ 常见文件类型，支持文件链接预览、上传文件预览，以及业务系统里的常见接入方式。
                     </p>
-                    <div class="hero-stats">
-                        <div class="stat-chip">
-                            <strong>20+</strong>
-                            <span>文件族群覆盖</span>
-                        </div>
-                        <div class="stat-chip">
-                            <strong>JDK 21+</strong>
-                            <span>当前推荐运行环境</span>
-                        </div>
-                        <div class="stat-chip">
-                            <strong>API</strong>
-                            <span>URL 直连式接入</span>
-                        </div>
-                        <div class="stat-chip">
-                            <strong>Demo Lab</strong>
-                            <span>本地上传与目录试跑</span>
-                        </div>
-                    </div>
                     <div class="hero-actions">
                         <a class="hero-link primary" href="#demo-lab">开始体验</a>
                         <a class="hero-link secondary" href="./integrated">查看接入说明</a>
+                        <a class="hero-link secondary" href="./record">版本发布记录</a>
+                        <a class="hero-link secondary" href="./sponsor">赞助开源</a>
+                    </div>
+                        </div>
+                        <div class="home-hero-side">
+                    <div class="doc-stack" aria-hidden="true">
+                        <div class="doc-sheet sheet-word">
+                            <img src="images/hero-icons/word.svg" alt="Word">
+                            <span>DOCX</span>
+                        </div>
+                        <div class="doc-sheet sheet-excel">
+                            <img src="images/hero-icons/excel.svg" alt="Excel">
+                            <span>XLSX</span>
+                        </div>
+                        <div class="doc-sheet sheet-powerpoint">
+                            <img src="images/hero-icons/powerpoint.svg" alt="PowerPoint">
+                            <span>PPTX</span>
+                        </div>
+                        <div class="doc-sheet sheet-pdf">
+                            <img src="images/hero-icons/pdf.svg" alt="PDF">
+                            <span>PDF</span>
+                        </div>
+                    </div>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -120,11 +128,11 @@
             <div class="section-heading">
                 <div>
                     <span class="eyebrow">Capability Map</span>
-                    <h2>能力不止是“能打开”，而是覆盖业务里真正常见的文件流。</h2>
+                    <h2>支持丰富的文件类型预览</h2>
                 </div>
                 <p>
-                    我们把原来首页的长列表改成分类卡片，方便先扫边界，再判断适不适合接入你的系统。
-                    如果你有新增格式建议，欢迎到开源社区继续补充。
+                    你可以先快速扫一遍支持范围，再判断它是否适合接入你的业务系统。
+                    如果你有新增格式建议，也欢迎继续到开源社区补充。
                 </p>
             </div>
             <div class="feature-grid">
@@ -196,7 +204,7 @@
                 <div class="workspace-header">
                     <div>
                         <span class="eyebrow">Demo Lab</span>
-                        <h3>本地文件工作台</h3>
+                        <h3>文件链接预览</h3>
                         <p>这里统一承接两种预览来源：直接输入 URL，或者从本地文件目录里选择文件。参数和操作入口都尽量收在一起。</p>
                     </div>
                     <div class="note-row">
@@ -211,14 +219,6 @@
                     <div class="source-card">
                         <h4>输入 URL 直接试跑</h4>
                         <p>贴入文件地址，按需叠加页码、高亮、水印、AES 和跨域参数，直接在新窗口验证最终预览行为。</p>
-                        <div class="note-row">
-                            <span class="tag brand">URL 即入口</span>
-                            <span class="tag highlight">AES 可选</span>
-                            <span class="tag">页码 / 水印 / 高亮</span>
-                            <#if "${kkkey}" != "false" >
-                                <span class="tag warn">当前实例启用了访问秘钥</span>
-                            </#if>
-                        </div>
                         <#if "${kkkey}" != "false" >
                             <p>
                                 程序已启用秘钥访问。
@@ -232,24 +232,26 @@
                         <div class="preview-panel">
                             <form action="${baseUrl}onlinePreview" target="_blank" id="previewByUrl">
                                 <input type="hidden" name="url"/>
+                                <div class="preview-options">
+                                    <div class="preview-switches">
+                                        <label><input type="checkbox" name="forceUpdatedCache" value="true"/> 更新缓存</label>
+                                        <label><input type="checkbox" name="kkagent" value="true"/> 跨域代理</label>
+                                        <label><input type="checkbox" id="encryption" name="encryption" value="aes"/> AES 加密</label>
+                                    </div>
+                                    <div class="preview-grid">
+                                        <input type="text" id="filePassword" name="filePassword" class="form-control" placeholder="文件密码"/>
+                                        <input type="text" id="page" name="page" class="form-control" placeholder="页码"/>
+                                        <input type="text" id="highlightall" name="highlightall" class="form-control" placeholder="高亮关键字"/>
+                                        <input type="text" id="watermarkTxt" name="watermarkTxt" class="form-control" placeholder="水印文本"/>
+                                        <#if isshowkey>
+                                            <input type="text" id="kkkey" name="key" class="form-control" placeholder="KK 秘钥"/>
+                                        </#if>
+                                    </div>
+                                </div>
                                 <div class="preview-url">
                                     <input type="text" id="_url" class="form-control" placeholder="请输入预览文件 URL，例如 https://example.com/demo.pdf"/>
+                                    <input type="submit" value="立即预览" class="preview-submit">
                                 </div>
-                                <div class="preview-switches">
-                                    <label><input type="checkbox" name="forceUpdatedCache" value="true"/> 更新缓存</label>
-                                    <label><input type="checkbox" name="kkagent" value="true"/> 跨域代理</label>
-                                    <label><input type="checkbox" id="encryption" name="encryption" value="aes"/> AES 加密</label>
-                                </div>
-                                <div class="preview-grid">
-                                    <input type="text" id="filePassword" name="filePassword" class="form-control" placeholder="文件密码"/>
-                                    <input type="text" id="page" name="page" class="form-control" placeholder="页码"/>
-                                    <input type="text" id="highlightall" name="highlightall" class="form-control" placeholder="高亮关键字"/>
-                                    <input type="text" id="watermarkTxt" name="watermarkTxt" class="form-control" placeholder="水印文本"/>
-                                    <#if isshowkey>
-                                        <input type="text" id="kkkey" name="key" class="form-control" placeholder="KK 秘钥"/>
-                                    </#if>
-                                </div>
-                                <input type="submit" value="立即预览" class="preview-submit">
                             </form>
                             <div class="alert alert-danger alert-dismissable hide" role="alert" id="previewCheckAlert">
                                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
@@ -264,9 +266,8 @@
                 <div class="section-heading">
                     <div>
                         <span class="eyebrow">Local Source</span>
-                        <h2>本地文件与目录预览</h2>
+                        <h2>上传文件预览</h2>
                     </div>
-                    <p>上传文件、创建目录、按文件名搜索，然后直接从下面的文件表格里发起预览。这样本地入口和结果列表会贴在一起。</p>
                 </div>
 
                 <div class="toolbar-grid">
diff --git a/server/src/main/resources/web/main/integrated.ftl b/server/src/main/resources/web/main/integrated.ftl
index f32e9573..0231bb8e 100644
--- a/server/src/main/resources/web/main/integrated.ftl
+++ b/server/src/main/resources/web/main/integrated.ftl
@@ -27,6 +27,7 @@
             <li class="active"><a href="./integrated">接入说明</a></li>
             <li><a href="./record">版本发布记录</a></li>
             <li><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -36,10 +37,9 @@
         <section class="hero-section release-hero">
             <div class="hero-copy">
                 <span class="eyebrow">Integration Guide</span>
-                <h1 class="hero-title">5 分钟把 kkFileView 接进你的前端项目。</h1>
-                <p class="hero-subtitle">
-                    这页不再把所有方案平铺成一长段，而是按场景拆成独立卡片。
-                    默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>。
+                <h1 class="hero-title">5 分钟把 kkFileView 接进你的业务项目。</h1>
+                <p class="hero-subtitle hero-subtitle-inline">
+                    这里按常见接入场景提供示例，方便你直接按需选用。默认假设服务地址为 <span class="text-highlight">${baseUrl}</span>。
                 </p>
                 <div class="note-row">
                     <span class="tag brand">HTTP / HTTPS</span>
diff --git a/server/src/main/resources/web/main/record.ftl b/server/src/main/resources/web/main/record.ftl
index d228fa2c..8dc9b2e2 100644
--- a/server/src/main/resources/web/main/record.ftl
+++ b/server/src/main/resources/web/main/record.ftl
@@ -26,6 +26,7 @@
             <li><a href="./integrated">接入说明</a></li>
             <li class="active"><a href="./record">版本发布记录</a></li>
             <li><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -35,9 +36,9 @@
         <section class="hero-section release-hero">
             <div class="hero-copy">
                 <span class="eyebrow">Release Timeline</span>
-                <h1 class="hero-title">版本记录先看重点，再追历史。</h1>
+                <h1 class="hero-title">版本发布记录</h1>
                 <p class="hero-subtitle">
-                    这一版把发布记录拆成“最新摘要 + 年度时间轴 + 历史归档”。先看升级重点，再决定是否继续深入版本细节。
+                    你可以先看最新版本的升级重点，再顺着时间轴继续了解历史版本细节。
                 </p>
                 <div class="release-badge-row">
                     <span class="tag highlight">最新版本 v5.0</span>
@@ -45,20 +46,6 @@
                     <span class="tag warn">JDK 21+ 强制要求</span>
                     <span class="tag">PDF / TIF / CAD 异步化</span>
                 </div>
-                <div class="summary-grid">
-                    <div class="summary-panel">
-                        <strong>13</strong>
-                        <span>v5.0 新增能力条目</span>
-                    </div>
-                    <div class="summary-panel">
-                        <strong>4</strong>
-                        <span>v5.0 修复项，含 SSL 自签证书接入问题</span>
-                    </div>
-                    <div class="summary-panel">
-                        <strong>8</strong>
-                        <span>v5.0 更新项，核心是解析链路和异步转换升级</span>
-                    </div>
-                </div>
             </div>
         </section>
 
diff --git a/server/src/main/resources/web/main/sponsor.ftl b/server/src/main/resources/web/main/sponsor.ftl
index 8d5570e4..f0d3b029 100644
--- a/server/src/main/resources/web/main/sponsor.ftl
+++ b/server/src/main/resources/web/main/sponsor.ftl
@@ -26,6 +26,7 @@
             <li><a href="./integrated">接入说明</a></li>
             <li><a href="./record">版本发布记录</a></li>
             <li class="active"><a href="./sponsor">赞助开源</a></li>
+            <li><a href="./contact">技术支持</a></li>
         </ul>
     </div>
 </nav>
@@ -35,7 +36,7 @@
         <section class="hero-section release-hero">
             <div class="hero-copy">
                 <span class="eyebrow">Sponsor Open Source</span>
-                <h1 class="hero-title">如果这个项目帮你省下了成本，也欢迎反过来帮它继续跑下去。</h1>
+                <h1 class="hero-title">赞助开源</h1>
                 <p class="hero-subtitle">
                     kkFileView 已持续维护多年，被广泛用于金融、教育、银行、政务和企业内部系统。
                     赞助会直接用于文档站、演示站、服务器和 CDN 等基础开销。
@@ -70,7 +71,7 @@
                         <h3>赞助方式</h3>
                     </div>
                 </div>
-                <p>如果你觉得 kkFileView 对你有帮助，可以通过下面的方式赞助项目。页面信息会继续保留简洁，但视觉上统一到新的主站风格里。</p>
+                <p>如果你觉得 kkFileView 对你有帮助，可以通过下面的方式赞助项目，支持它继续长期维护。</p>
                 <ul>
                     <li>kkFileView 开源至今已多年，社区持续反馈并推动演进。</li>
                     <li>项目 star 与使用规模已经证明它不是“玩具 demo”，而是被真实系统接入的基础能力。</li>