diff --git a/design-demos/index.html b/design-demos/index.html index 2291f80..a4adf52 100644 --- a/design-demos/index.html +++ b/design-demos/index.html @@ -225,6 +225,30 @@ background-size: 72px 72px, 72px 72px, auto; } + .preview.pro-community { + background: #ffffff; + border: 1px solid #eff3f4; + } + + .preview.pro-community::before { + inset: 18px 18px auto 18px; + height: 60px; + background: #ffffff; + border-radius: 12px; + border: 1px solid #eff3f4; + } + + .preview.pro-community::after { + left: 18px; + right: 18px; + top: 90px; + bottom: 18px; + background: #ffffff; + border-radius: 12px; + border: 1px solid #eff3f4; + } + + .actions { display: flex; flex-wrap: wrap; @@ -277,6 +301,7 @@

现在增加了一版更接近正式发布站的候选稿，可与前面三 打开方案 A 打开方案 B 打开方案 C + 打开方案 D @@ -332,6 +357,16 @@

方案 B · 全球科技峰会型

方案 C · 现代会所会员型

更像高端会员社区或俱乐部网站，强调邀请制、归属感与身份感，适合放大“长期社群”的一面。

+ +
+
+ 内容承载力更强 + 进入 demo +
+
+

方案 D · 专业社区信息型

+

强调整体网站内容的模块化组织，呈现清晰、高端而且极具科技感的观感，适合作为内容丰富的平台。

+
diff --git a/design-demos/pro-community/index.html b/design-demos/pro-community/index.html new file mode 100644 index 0000000..a7e41f9 --- /dev/null +++ b/design-demos/pro-community/index.html @@ -0,0 +1,15 @@ + + + + + + 方案 D · 专业社区信息型 | TGO 风格 Demo + + + + + +
+ + + diff --git a/design-demos/pro-community/theme.css b/design-demos/pro-community/theme.css new file mode 100644 index 0000000..11c0bdb --- /dev/null +++ b/design-demos/pro-community/theme.css @@ -0,0 +1,167 @@ +:root { + --page-bg: #ffffff; + --page-ink: #0f1419; + --page-muted: #536471; + --page-line: #eff3f4; + --surface: #ffffff; + --surface-strong: #ffffff; + --surface-alt: #f7f9f9; + --shadow-soft: none; + --shadow-strong: none; + --accent: #1d9bf0; + --accent-strong: #1a8cd8; + --accent-soft: rgba(29, 155, 240, 0.1); + --button-ink: #ffffff; + --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --font-alt: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 16px; +} + +body { + background: var(--page-bg); +} + +.page-wrap::before { + display: none; +} + +h1, h2, h3 { + letter-spacing: -0.01em; + font-weight: 800; + color: var(--page-ink); +} + +.initial-badge, +.brand-mark { + border-radius: 8px; + background: var(--page-bg); + border: 1px solid var(--page-line); + box-shadow: none; +} + +.button { + border-radius: 9999px; + font-weight: 700; + border: 1px solid transparent; + transition: background-color 0.2s ease; +} + +.button-primary { + background: var(--page-ink); + color: #ffffff; + box-shadow: none; +} + +.button-primary:hover { + background: #272c30; + transform: none; +} + +.button-secondary { + background: var(--page-bg); + border-color: #cfd9de; + color: var(--page-ink); + box-shadow: none; +} + +.button-secondary:hover { + background: rgba(15, 20, 25, 0.1); + transform: none; +} + +.hero-frame { + background: var(--page-bg); + border: 1px solid var(--page-line); + box-shadow: none; + border-radius: var(--radius-lg); + padding: 40px; +} + +.hero-quote { + padding-left: 16px; + border-left: 4px solid var(--page-line); + color: var(--page-muted); + font-weight: 400; +} + +.hero-image { + border-radius: var(--radius-md); + border: 1px solid var(--page-line); + box-shadow: none; +} + +.hero-note { + background: var(--surface-alt); + border: 1px solid var(--page-line); + box-shadow: none; +} + +.surface-card, +.surface-subcard { + background: var(--page-bg); + backdrop-filter: none; + border: 1px solid var(--page-line); + box-shadow: none; +} + +.surface-card:hover, +.surface-subcard:hover { + background: rgba(0, 0, 0, 0.03); + border-color: var(--page-line); + box-shadow: none; + transform: none; + transition: background 0.2s ease; +} + +.section-head { + border-bottom: 1px solid var(--page-line); + padding-bottom: 24px; + margin-bottom: 32px; +} + +.intro-copy { + max-width: 100%; +} + +.experience-card, +.collection-card, +.article-card, +.testimonial-card, +.board-card { + background: var(--page-bg); + transition: background 0.2s ease; +} + +.board-card:hover, +.article-card:hover, +.testimonial-card:hover { + transform: none; + background: rgba(0, 0, 0, 0.03); +} + +.tag-pill, +.board-branch, +.eyebrow, +.section-kicker { + background: rgba(15, 20, 25, 0.08); + color: var(--page-ink); + border: none; + font-weight: 700; + letter-spacing: 0; + text-transform: none; +} + +.demo-modebar { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + border-bottom: 1px solid var(--page-line); +} + +.demo-header { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + border-bottom: 1px solid var(--page-line); +} diff --git a/design-demos/shared/content.js b/design-demos/shared/content.js index b5a68c7..c5421eb 100644 --- a/design-demos/shared/content.js +++ b/design-demos/shared/content.js @@ -26,6 +26,14 @@ export const demoThemes = { reference: "YPO × Chief × Soho House", summary: "更强调会籍感、邀请感与长期社群归属。", recommendation: "会员社区气质最强" + }, + "pro-community": { + id: "pro-community", + chineseName: "方案 D · 专业社区信息型", + englishName: "Pro Community", + reference: "Vercel × Stripe × Intercom", + summary: "强调整体网站内容的模块化组织，呈现清晰、高端而且极具科技感的观感，适合作为内容丰富的平台。", + recommendation: "内容承载力更强" } }; diff --git a/scripts/serve-design-demos.mjs b/scripts/serve-design-demos.mjs index aa18949..240f650 100644 --- a/scripts/serve-design-demos.mjs +++ b/scripts/serve-design-demos.mjs @@ -58,4 +58,5 @@ server.listen(port, "127.0.0.1", () => { console.log(`- Atlas Ink: ${baseUrl}atlas-ink/`); console.log(`- Summit Signal: ${baseUrl}summit-signal/`); console.log(`- Member House: ${baseUrl}member-house/`); + console.log(`- Pro Community: ${baseUrl}pro-community/`); });