feat: expose portfolio product entry points

Author: maikebing

components/footer/index.tsx

@@ -11,6 +11,7 @@ const linkGroups = [
     title: "核心项目",
     links: [
       {label: "IoTSharp", link: "https://iotsharp.net/IoTSharp/"},
+      {label: "SonnetDB", link: "https://www.sonnetdb.com/"},
       {label: "IoTCoWork", link: "https://iotsharp.net/IoTCoWork/"},
       {label: "IoTEdge", link: "https://iotsharp.net/IoTEdge/"},
       {label: "IoTEmBASIC", link: "https://iotsharp.net/IoTEmBASIC/"}
@@ -22,6 +23,7 @@ const linkGroups = [
       {label: "GitHub", link: "https://github.com/IoTSharp"},
       {label: "文档", link: "https://iotsharp.net/docs/"},
       {label: "AI 服务", link: "https://iotsharp.net/ai"},
+      {label: "IoTSharp 在线演示", link: "https://iotsharp.online/"},
       {label: "平台控制台", link: "https://iotsharp.net/console"},
       {label: "组织主页", link: "https://iotsharp.net"}
     ]

components/footer/styles.module.scss

@@ -45,7 +45,7 @@
   color: #50e6ff;
   font-size: 0.82rem;
   font-weight: 700;
-  letter-spacing: 0.12em;
+  letter-spacing: 0;
   line-height: 1.25rem;
   text-transform: uppercase;
 }

components/navbar/index.tsx

@@ -13,11 +13,12 @@ export interface INavBarProps {
 
 const navLinks = [
   {label: "IoTSharp", href: "https://iotsharp.net/IoTSharp/"},
+  {label: "SonnetDB", href: "https://www.sonnetdb.com/"},
   {label: "IoTCoWork", href: "https://iotsharp.net/IoTCoWork/"},
   {label: "IoTEdge", href: "https://iotsharp.net/IoTEdge/"},
   {label: "IoTEmBASIC", href: "https://iotsharp.net/IoTEmBASIC/"},
   {label: "更多项目", href: "#projects"},
-  {label: "商业服务", href: "https://iotsharp.net/console"}
+  {label: "组合商业服务", href: "https://iotsharp.net/console"}
 ];
 
 const NavBar: FC<INavBarProps> = ({}) => {
@@ -28,7 +29,7 @@ const NavBar: FC<INavBarProps> = ({}) => {
   const iconTheme = theme === Themes.light ? <Moon size={24}/> : <Sun size={24}/>;
   return (
     <div className={styles.navBar}>
-      <a href="https://iotsharp.net/">
+      <a href="https://iotsharp.net/" aria-label="IoTSharp 首页">
         <Image src={logoIcon} alt="" width={35} height={35}/>
         <Image src={icon} alt="" width={135} height={40}/>
       </a>

components/navbar/styles.module.scss

@@ -99,7 +99,7 @@
   }
 }
 
-@media screen and (max-width: 47.9375rem) {
+@media screen and (max-width: 68.75rem) {
   .navBar {
     height: auto;
     min-height: 4rem;

pages/_document.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 export default function Document() {
   return (
-    <Html>
+    <Html lang="zh-CN">
       <Head/>
       <body>
       <Main/>

pages/index.module.scss

@@ -11,23 +11,32 @@
   color: #512bd4;
   font-size: 0.78rem;
   font-weight: 700;
-  letter-spacing: 0.18em;
+  letter-spacing: 0;
   line-height: 1.4;
   text-transform: uppercase;
 }
 
 .hero {
   position: relative;
   display: grid;
-  min-height: calc(100vh - 4rem);
+  min-height: calc(100svh - 7rem);
   grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 0.75fr);
   gap: 4rem;
   align-items: center;
-  padding: 7rem 8rem 6rem;
+  padding: 5.5rem 8rem 5rem;
   color: #ffffff;
-  background:
-    radial-gradient(circle at 78% 20%, rgba(80, 230, 255, 0.28), transparent 28%),
-    linear-gradient(115deg, #32145a 0%, #512bd4 58%, #764abc 100%);
+  background-color: #32145a;
+  background-image: url("/banner_dark.png");
+  background-position: center;
+  background-size: cover;
+
+  &:before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(38, 15, 69, 0.9);
+    pointer-events: none;
+  }
 
   &:after {
     content: "";
@@ -50,7 +59,7 @@
   h1 {
     max-width: 52rem;
     margin: 1.4rem 0 0;
-    font-size: clamp(3rem, 7vw, 6.2rem);
+    font-size: 5rem;
     font-weight: 700;
     line-height: 1.02;
   }
@@ -71,6 +80,29 @@
   margin-top: 2.5rem;
 }
 
+.utilityLinks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem 1.4rem;
+  margin-top: 1.25rem;
+
+  a {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+    color: #ffffff;
+    font-size: 0.9rem;
+    font-weight: 650;
+    line-height: 1.8;
+    transition: border-color 0.2s ease, color 0.2s ease;
+
+    &:hover,
+    &:focus-visible {
+      border-color: #50e6ff;
+      color: #50e6ff;
+      outline: none;
+    }
+  }
+}
+
 .primaryAction,
 .secondaryAction {
   display: inline-flex;
@@ -88,6 +120,11 @@
   }
 }
 
+.actionIcon {
+  flex: 0 0 auto;
+  margin-right: 0.45rem;
+}
+
 .primaryAction {
   color: #512bd4;
   background: #ffffff;
@@ -123,7 +160,7 @@
     color: #50e6ff;
     font-size: 0.76rem;
     font-weight: 700;
-    letter-spacing: 0.16em;
+    letter-spacing: 0;
     text-transform: uppercase;
   }
 
@@ -159,7 +196,7 @@
   h2 {
     margin: 1rem 0 0;
     color: #20133a;
-    font-size: clamp(2rem, 4vw, 3.4rem);
+    font-size: 3rem;
     font-weight: 700;
     line-height: 1.12;
   }
@@ -371,7 +408,7 @@
 
   h2 {
     margin: 1rem 0 0;
-    font-size: clamp(1.9rem, 4vw, 3rem);
+    font-size: 2.7rem;
     line-height: 1.12;
   }
 
@@ -424,8 +461,17 @@
     grid-template-columns: 1fr;
   }
 
+  .heroContent h1 {
+    font-size: 3.75rem;
+  }
+
+  .sectionIntro h2,
+  .boundary h2 {
+    font-size: 2.5rem;
+  }
+
   .heroPanel {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   .capabilityGrid,
@@ -452,28 +498,36 @@
     min-height: auto;
     grid-template-columns: 1fr;
     gap: 2.5rem;
-    padding-top: 5rem;
+    padding-top: 4rem;
     padding-bottom: 4rem;
   }
 
+  .heroContent h1 {
+    font-size: 2.65rem;
+    line-height: 1.08;
+  }
+
+  .sectionIntro h2,
+  .boundary h2 {
+    font-size: 2rem;
+  }
+
   .heroText {
     font-size: 1rem;
     line-height: 1.75rem;
   }
 
-  .actions {
-    flex-direction: column;
-  }
-
   .primaryAction,
   .secondaryAction {
     width: 100%;
   }
 
+  .utilityLinks {
+    gap: 0.55rem 1rem;
+  }
+
   .heroPanel {
-    div {
-      padding-left: 1rem;
-    }
+    display: none;
   }
 
   .capabilities,

pages/index.tsx

@@ -3,6 +3,7 @@ import type {NextPage} from "next";
 import NavBar from "@/components/navbar";
 import Footer from "@/components/footer";
 import styles from "./index.module.scss";
+import {ArrowUpRight} from "lucide-react";
 
 const projectGroups = [
   {
@@ -27,7 +28,7 @@ const projectGroups = [
         name: "SonnetDB",
         role: "C# 时序数据库",
         description: "面向高频遥测、指标写入、SQL 查询和边缘部署的 .NET 10 时序数据库。",
-        page: "https://sonnetdb.com/",
+        page: "https://www.sonnetdb.com/",
         repo: "https://github.com/IoTSharp/SonnetDB"
       },
       {
@@ -182,12 +183,22 @@ const Home: NextPage = () => {
             <p className={styles.eyebrow}>iotsharp.net · Open Source Home</p>
             <h1>IoTSharp 开源产品矩阵</h1>
             <p className={styles.heroText}>
-              这里是 IoTSharp 组织的开源门面：从物联网主平台、IoTCoWork 工作台、IoTEdge 与 IoTEmbedded 边缘产品线，到协议 SDK、嵌入式工具和开发者组件。
+              这里是 IoTSharp 产品组合的开源门面：以 IoTSharp 物联网平台连接现场，以 SonnetDB 承载时序与智能数据，再延伸到边缘、协议 SDK 和开发者工具。
             </p>
             <div className={styles.actions}>
-              <a href="#projects" className={styles.primaryAction}>浏览开源项目</a>
-              <a href="https://github.com/IoTSharp" className={styles.secondaryAction} target="_blank" rel="noreferrer">GitHub 组织</a>
-              <a href="https://iotsharp.net/console" className={styles.secondaryAction}>平台控制台</a>
+              <a href="https://iotsharp.online/" className={styles.primaryAction} target="_blank" rel="noreferrer">
+                <ArrowUpRight size={17} aria-hidden="true" className={styles.actionIcon}/>
+                IoTSharp 在线演示
+              </a>
+              <a href="https://www.sonnetdb.com/" className={styles.secondaryAction} target="_blank" rel="noreferrer">
+                <ArrowUpRight size={17} aria-hidden="true" className={styles.actionIcon}/>
+                SonnetDB 产品
+              </a>
+            </div>
+            <div className={styles.utilityLinks}>
+              <a href="#projects">浏览开源项目</a>
+              <a href="https://github.com/IoTSharp" target="_blank" rel="noreferrer">GitHub 组织</a>
+              <a href="https://iotsharp.net/console">组合商业服务</a>
             </div>
           </div>
           <div className={styles.heroPanel} aria-label="IoTSharp open source map">
@@ -206,6 +217,11 @@ const Home: NextPage = () => {
               <strong>IoTEdge · IoTEmbedded</strong>
               <small>C# AOT / Embedded BASIC+C</small>
             </div>
+            <div>
+              <span>Data platform</span>
+              <strong>SonnetDB</strong>
+              <small>时序 / 向量 / 全文 / 对象数据</small>
+            </div>
           </div>
         </section>
 
@@ -283,9 +299,9 @@ const Home: NextPage = () => {
             <h2>一个域名连接开源生态、文档、AI 与商业平台</h2>
           </div>
           <p>
-            开源项目、产品文档和行业内容从 iotsharp.net 统一进入；平台控制台、AI 服务、演示环境与商业交付分别通过 /console、/ai、/demo 和企业服务流程承载。
+            开源项目、产品文档和行业内容从 iotsharp.net 统一进入；IoTSharp 与 SonnetDB 的演示、平台控制台、AI 服务和企业交付分别通过独立入口承载。
           </p>
-          <a href="https://iotsharp.net/console">进入平台控制台</a>
+          <a href="https://iotsharp.net/console">进入组合商业服务</a>
         </section>
       </main>
       <Footer/>