Feat/homepage

docs/astro.config.mjs

@@ -10,7 +10,7 @@ export default defineConfig({
   integrations: [
     starlight({
       title: {
-        'zh-CN': 'Vide 文档',
+        'zh-CN': 'VIDE',
         en: 'Vide Docs',
       },
       description:

docs/src/assets/landing.css

@@ -1,11 +1,11 @@
 :root {
-  --vide-accent-hsl: 186, 74%, 52%;
+  --vide-accent-hsl: 200, 100%, 50%;
   --vide-accent: hsl(var(--vide-accent-hsl));
   --vide-overlay: hsla(var(--vide-accent-hsl), 0.18);
 }
 
 :root[data-theme='light'] {
-  --vide-accent-hsl: 190, 84%, 38%;
+  --vide-accent-hsl: 202, 92%, 44%;
   --vide-overlay: hsla(var(--vide-accent-hsl), 0.14);
 }
 
@@ -32,18 +32,48 @@
   padding-block-start: clamp(3rem, 8vw, 7rem);
 }
 
-[data-has-hero] .hero h1 {
-  letter-spacing: 0;
+[data-has-hero] .hero .stack {
+  gap: clamp(2.25rem, 4vw, 3.5rem);
+}
+
+@media (min-width: 50rem) {
+  [data-has-hero] .hero {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  [data-has-hero] .hero .stack,
+  [data-has-hero] .hero .copy {
+    align-items: flex-start;
+    text-align: start;
+    width: 100%;
+  }
+
+  [data-has-hero] .hero .actions {
+    justify-content: flex-start;
+  }
 }
 
 [data-has-hero] .hero .tagline {
   color: var(--sl-color-gray-2);
 }
 
-[data-has-hero] .sl-link-button.primary {
+[data-has-hero] .hero .actions {
+  gap: 1.25rem;
+}
+
+[data-has-hero] .hero .actions .sl-link-button.primary {
+  color: #fff;
   box-shadow: 0 0 2rem hsla(var(--vide-accent-hsl), 0.28);
 }
 
+[data-has-hero] .hero .actions .sl-link-button.primary:hover {
+  color: #fff;
+}
+
+[data-has-hero] .hero .actions .sl-link-button.primary p {
+  color: inherit;
+}
+
 [data-has-hero] .card {
   background:
     linear-gradient(180deg, hsla(var(--vide-accent-hsl), 0.08), transparent),

docs/src/components/HomepageComparisonSection.astro

@@ -0,0 +1,25 @@
+---
+import HomepageComparisonTable from './HomepageComparisonTable.astro';
+import { homepageComparison } from '../data/homepage';
+---
+
+<section class="vide-comparison-section">
+  <h2>特性对比</h2>
+
+  <p>
+    当 EDA 的编辑体验仍停留在接近记事本的阶段时，Vide 已经把现代 IDE 体验带进了 HDL 世界。<br/>
+    从「定义跳转」到「引用搜索」，从「悬停提示」到「代码补全」，Vide 提供了完整的 Verilog/SystemVerilog 开发体验。
+  </p>
+
+  <HomepageComparisonTable
+    columns={homepageComparison.columns}
+    products={homepageComparison.products}
+  />
+</section>
+
+<style>
+  .vide-comparison-section {
+    width: min(64rem, calc(100vw - 2rem));
+    margin-inline: calc(50% - min(32rem, calc(50vw - 1rem)));
+  }
+</style>

docs/src/components/HomepageComparisonTable.astro

@@ -0,0 +1,167 @@
+---
+import type {
+  ComparisonFeatureKey,
+  ComparisonFeatureValue,
+  ComparisonProduct,
+} from '../data/homepage';
+
+type FeatureStatus = 'yes' | 'partial' | 'no';
+
+interface FeatureColumn {
+  key: ComparisonFeatureKey;
+  label: string;
+}
+
+interface Props {
+  columns: readonly FeatureColumn[];
+  products: readonly ComparisonProduct[];
+}
+
+const { columns, products } = Astro.props as Props;
+
+const statusMap: Record<FeatureStatus, { className: string; label: string; symbol: string }> = {
+  yes: { className: 'vide-comparison-table__true', label: 'Yes', symbol: '✓' },
+  partial: { className: 'vide-comparison-table__partial', label: 'Partial', symbol: '△' },
+  no: { className: 'vide-comparison-table__false', label: 'No', symbol: '✕' },
+};
+
+const getStatus = (value: ComparisonFeatureValue): FeatureStatus => {
+  if (value === 'partial') return 'partial';
+  return value ? 'yes' : 'no';
+};
+---
+
+<table class="vide-comparison-table">
+  <thead>
+    <tr>
+      <th></th>
+      {
+        products.map((product) => (
+          <th>
+            <strong class:list={{ 'vide-comparison-table__brand': product.highlighted }}>
+              {product.name}
+            </strong>
+            <br />
+            <span class="vide-comparison-table__meta">{product.meta}</span>
+          </th>
+        ))
+      }
+    </tr>
+  </thead>
+  <tbody>
+    {
+      columns.map((column) => (
+        <tr>
+          <th scope="row">{column.label}</th>
+          {products.map((product) => {
+            const status = statusMap[getStatus(product.features[column.key])];
+            const isBeta = product.betaFeatureKeys?.includes(column.key);
+            return (
+              <td>
+                <span class={status.className} aria-label={status.label}>
+                  {status.symbol}
+                  {isBeta && <span class="vide-comparison-table__beta">BETA</span>}
+                </span>
+              </td>
+            );
+          })}
+        </tr>
+      ))
+    }
+  </tbody>
+</table>
+
+<style>
+  .vide-comparison-table {
+    display: table;
+    width: 100%;
+    min-width: 100%;
+    table-layout: fixed;
+    margin: 1rem auto 0;
+    border-collapse: collapse;
+    border-spacing: 0;
+    overflow: hidden;
+  }
+
+  .vide-comparison-table th:first-child,
+  .vide-comparison-table td:first-child {
+    width: 24%;
+  }
+
+  .vide-comparison-table th,
+  .vide-comparison-table td {
+    padding: 0.9rem 0.45rem;
+    border-bottom: 1px solid var(--sl-color-gray-5);
+  }
+
+  .vide-comparison-table thead th,
+  .vide-comparison-table tbody th {
+    color: var(--sl-color-white);
+    font-weight: 700;
+    text-align: left;
+  }
+
+  .vide-comparison-table th:not(:first-child),
+  .vide-comparison-table td:not(:first-child) {
+    text-align: center;
+  }
+
+  .vide-comparison-table strong {
+    font-size: 1.22rem;
+    font-weight: 700;
+    line-height: 1.15;
+  }
+
+  .vide-comparison-table__brand {
+    color: var(--vide-accent);
+  }
+
+  .vide-comparison-table__meta {
+    display: inline-block;
+    margin-top: 0.35rem;
+    color: var(--sl-color-gray-3);
+    font-size: 0.82rem;
+    line-height: 1.2;
+  }
+
+  .vide-comparison-table__true,
+  .vide-comparison-table__false,
+  .vide-comparison-table__partial {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 999px;
+    font-size: 1.7rem;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  .vide-comparison-table__true {
+    color: #22c55e;
+  }
+
+  .vide-comparison-table__false {
+    color: #f87171;
+  }
+
+  .vide-comparison-table__partial {
+    color: #fbbf24;
+  }
+
+  .vide-comparison-table__beta {
+    position: absolute;
+    top: -0.35rem;
+    right: -1.05rem;
+    padding: 0.08rem 0.22rem;
+    border-radius: 0.2rem;
+    background: var(--vide-accent);
+    color: #fff;
+    font-size: 0.52rem;
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: 0;
+  }
+</style>

docs/src/components/HomepageCta.astro

@@ -0,0 +1,48 @@
+---
+import { LinkButton } from '@astrojs/starlight/components';
+import { homepageCtaActions } from '../data/homepage';
+---
+
+<section class="vide-cta">
+  <h2>立刻体验</h2>
+  <p>直接打开文档快速上手，或者先去 Playground 里实际试一遍补全、跳转和诊断体验。</p>
+  <div class="sl-flex actions vide-cta__actions">
+    {
+      homepageCtaActions.map((action) => (
+        <LinkButton href={action.href} variant={action.variant} icon={action.icon}>
+          {action.label}
+        </LinkButton>
+      ))
+    }
+  </div>
+</section>
+
+<style>
+  .vide-cta {
+    margin-block: 3rem 1rem;
+  }
+
+  .vide-cta p {
+    max-width: 42rem;
+    color: var(--sl-color-gray-2);
+  }
+
+  .vide-cta__actions {
+    gap: 1rem;
+    margin-top: 1.25rem;
+    justify-content: flex-start;
+  }
+
+  .vide-cta__actions :global(.sl-link-button.primary) {
+    color: #fff;
+    box-shadow: 0 0 2rem hsla(var(--vide-accent-hsl), 0.28);
+  }
+
+  .vide-cta__actions :global(.sl-link-button.primary:hover) {
+    color: #fff;
+  }
+
+  .vide-cta__actions :global(.sl-link-button.primary p) {
+    color: inherit;
+  }
+</style>