You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@doris.apache.org by mo...@apache.org on 2026/05/05 21:55:32 UTC
(doris-website) branch master updated: [refactor](next) landing page (#3606)
This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 967255ab288 [refactor](next) landing page (#3606)
967255ab288 is described below
commit 967255ab28811b1b84c436b194c7437f3736ab1a
Author: Mingyu Chen (Rayner) <mo...@163.com>
AuthorDate: Tue May 5 14:55:27 2026 -0700
[refactor](next) landing page (#3606)
---
.../alternatives/alternative-to-clickhouse.mdx | 291 ----
.../alternatives/alternative-to-elasticsearch.mdx | 223 ---
.../alternatives/alternative-to-trino.mdx | 213 ---
docusaurus.config.js | 25 +-
.../alternatives/alternative-to-clickhouse.mdx | 291 ----
.../alternatives/alternative-to-elasticsearch.mdx | 224 ---
.../alternatives/alternative-to-trino.mdx | 214 ---
local_dev.sh | 52 +
plan-doc/homepage-architecture.md | 306 ++++
plan-doc/homepage-redesign.md | 129 ++
sidebars-next.ts | 9 -
src/components/blogs-next/blogs-next.scss | 27 +
src/components/blogs-next/index.tsx | 263 ++++
.../download-form-next/DownloadFormNext.tsx | 419 ++++++
.../home-classic/HomeClassic.tsx} | 50 +-
src/components/home-next/HomeNext.scss | 69 +
src/components/home-next/HomeNext.tsx | 30 +
src/components/home-next/LayoutNext.tsx | 73 +
src/components/home-next/NavbarNext.scss | 483 ++++++
src/components/home-next/NavbarNext.tsx | 359 +++++
.../home-next/sections/CommunitySection.scss | 220 +++
.../home-next/sections/CommunitySection.tsx | 97 ++
.../home-next/sections/DeploymentSection.scss | 343 +++++
.../home-next/sections/DeploymentSection.tsx | 106 ++
.../home-next/sections/EcosystemSection.scss | 754 ++++++++++
.../home-next/sections/EcosystemSection.tsx | 592 ++++++++
.../home-next/sections/FeaturesSection.scss | 788 ++++++++++
.../home-next/sections/FeaturesSection.tsx | 373 +++++
src/components/home-next/sections/HeroSection.scss | 1582 ++++++++++++++++++++
src/components/home-next/sections/HeroSection.tsx | 829 ++++++++++
.../home-next/sections/StatsSection.scss | 407 +++++
src/components/home-next/sections/StatsSection.tsx | 249 +++
.../home-next/sections/UseCasesSection.scss | 163 ++
.../home-next/sections/UseCasesSection.tsx | 69 +
.../home-transition/HomeTransition.module.css | 209 +++
src/components/home-transition/HomeTransition.tsx | 61 +
.../HomeVersionToggle.module.css | 46 +
.../home-version-toggle/HomeVersionToggle.tsx | 19 +
src/components/shared/_typography.scss | 74 +
src/components/use-cases-next/AIAnalyticsNext.scss | 1446 ++++++++++++++++++
src/components/use-cases-next/AIAnalyticsNext.tsx | 797 ++++++++++
.../CustomerFacingAnalyticsNext.scss | 1302 ++++++++++++++++
.../use-cases-next/CustomerFacingAnalyticsNext.tsx | 700 +++++++++
.../use-cases-next/DataWarehousingNext.scss | 1151 ++++++++++++++
.../use-cases-next/DataWarehousingNext.tsx | 718 +++++++++
.../use-cases-next/ObservabilityNext.scss | 1159 ++++++++++++++
.../use-cases-next/ObservabilityNext.tsx | 746 +++++++++
src/components/why-doris-next/CompareNext.scss | 363 +++++
src/components/why-doris-next/CompareNext.tsx | 141 ++
src/components/why-doris-next/_responsive.scss | 149 ++
src/components/why-doris-next/content.tsx | 537 +++++++
.../sections/ComparisonTableSection.scss | 288 ++++
.../sections/ComparisonTableSection.tsx | 112 ++
.../why-doris-next/sections/CoverFlowSection.scss | 407 +++++
.../why-doris-next/sections/CoverFlowSection.tsx | 257 ++++
.../why-doris-next/sections/WhyChooseSection.scss | 129 ++
.../why-doris-next/sections/WhyChooseSection.tsx | 42 +
src/pages/blogs-next/index.tsx | 6 +
src/pages/download-next/index.tsx | 6 +
src/pages/index.tsx | 576 +------
src/pages/use-cases/ai/index.tsx | 6 +
.../use-cases/customer-facing-analytics/index.tsx | 6 +
src/pages/use-cases/data-warehousing/index.tsx | 6 +
src/pages/use-cases/observability/index.tsx | 6 +
src/pages/why-doris/compare/index.tsx | 6 +
src/scss/components/navbar.scss | 27 +
src/theme/BlogFooter/index.tsx | 6 +-
src/theme/Layout/index.tsx | 18 +-
src/theme/Navbar/Content/components/NavbarDocs.tsx | 43 +-
src/utils/locale.ts | 15 +
static/animations/what-is-apache-doris-intro.html | 81 +-
static/home-next/hybrid-search.html | 554 +++++++
static/home-next/lake-analytics.html | 309 ++++
static/home-next/realtime-analytics.html | 578 +++++++
static/images/ecomsystem-log/ai-agent.svg | 1 +
static/images/ecomsystem-log/clickhouse-small.svg | 1 +
static/images/ecomsystem-log/delta-lake.svg | 3 +
static/images/ecomsystem-log/doris-small.webp | Bin 0 -> 6278 bytes
static/images/ecomsystem-log/es-small.svg | 1 +
static/images/ecomsystem-log/grafana.png | Bin 0 -> 25355 bytes
static/images/ecomsystem-log/hudi.png | Bin 0 -> 83606 bytes
static/images/ecomsystem-log/iceberg.png | Bin 0 -> 21854 bytes
static/images/ecomsystem-log/kafka.svg | 1 +
static/images/ecomsystem-log/longfuse.png | Bin 0 -> 9566 bytes
static/images/ecomsystem-log/mcp.png | Bin 0 -> 124824 bytes
static/images/ecomsystem-log/metabase.svg | 1 +
static/images/ecomsystem-log/mysql.png | Bin 0 -> 150308 bytes
static/images/ecomsystem-log/paimon.svg | 1 +
static/images/ecomsystem-log/postgresql.svg | 22 +
static/images/ecomsystem-log/pulsar.png | Bin 0 -> 10080 bytes
static/images/ecomsystem-log/superset.webp | Bin 0 -> 5446 bytes
static/images/ecomsystem-log/trino-small.png | Bin 0 -> 20897 bytes
static/images/next/home-page/cs-coupled.jpg | Bin 0 -> 146534 bytes
static/images/next/home-page/cs-decoupled.jpg | Bin 0 -> 189461 bytes
94 files changed, 21350 insertions(+), 2105 deletions(-)
diff --git a/docs-next/getting-started/alternatives/alternative-to-clickhouse.mdx b/docs-next/getting-started/alternatives/alternative-to-clickhouse.mdx
deleted file mode 100644
index e0d79caf7aa..00000000000
--- a/docs-next/getting-started/alternatives/alternative-to-clickhouse.mdx
+++ /dev/null
@@ -1,291 +0,0 @@
----
-{
- "title": "Apache Doris vs ClickHouse: Selection Guide and Performance Comparison",
- "language": "en",
- "description": "A detailed comparison of Apache Doris and ClickHouse across Join performance, real-time updates, concurrency, storage-compute separation, and more, with real-world cases and performance benchmarks.",
- "keywords": ["Apache Doris vs ClickHouse", "ClickHouse alternative", "OLAP database comparison", "real-time analytics database", "storage-compute separation"],
- "sidebar_label": "Apache Doris vs ClickHouse"
-}
----
----
-
-Apache Doris and ClickHouse are both leading real-time analytical databases worldwide, and both support columnar storage and high-speed queries. Apache Doris has significant advantages in three key areas: **2-10x faster Join queries** (powered by an advanced MPP architecture and a cost-based query optimizer), **up to 70% lower infrastructure cost through storage-compute separation** (compute and storage scale independently), and **superior real-time update performance** (the Merge-on-Wri [...]
-
-
-## When to Choose Apache Doris
-
-| Scenario | Recommendation | Reason |
-|------|----------|------|
-| Complex multi-table Joins required | **Apache Doris** | The MPP architecture natively supports distributed Joins, while ClickHouse relies on wide-table modeling |
-| High-concurrency queries (100+ concurrent) | **Apache Doris** | Supports thousands of concurrent queries, while ClickHouse usually handles fewer than 100 |
-| High-frequency real-time updates + UPSERT | **Apache Doris** | The Merge-on-Write engine preserves query performance, while ClickHouse incurs heavy merge overhead |
-| Mainly single-table aggregation queries | Either works | Choose based on team familiarity |
-| ClickHouse already running stably | Stay with ClickHouse | Migration has costs; benefits need to be evaluated |
-
-
-## Featured Cases
-
-<div className="case-studies">
-
-<section>
-
-### Kuaishou
-
-
-
-> "After replacing ClickHouse with Apache Doris, Kuaishou successfully upgraded to a unified lakehouse architecture, achieving unified storage and a simplified data pipeline. With no need for data ingestion, Doris can directly access lakehouse data. Combined with Doris's materialized view rewriting and automatic materialization service, this delivers high-performance queries and flexible data governance."
-
-- Directly queries data lake data, shortening the data pipeline
-- Improved query performance, meeting query acceleration needs across multiple scenarios
-- Enables more flexible data governance through materialized views
-
-</section>
-
-<section>
-
-### Tencent Music
-
-
-
-> "After the content library data platform migrated its analytical engine from ClickHouse to Apache Doris, and progressed from initially introducing the data architecture semantic layer to its in-depth application, the platform effectively improved data timeliness, reduced operational costs, and resolved fragmented data management."
-
-- Strong multi-table query and federated query performance
-- Compatible with the MySQL protocol, reducing operational costs
-- Supports partial-column updates, accommodating multiple data update patterns
-
-</section>
-
-<section>
-
-### YouZan
-
-
-
-> "Apache Doris has faster query response times than ClickHouse in the vast majority of scenarios, especially in complex join scenarios, where its performance is significantly superior to that of ClickHouse."
-
-- Core business queries 2-3x
-- Complex join queries 2-10x
-- Can run all ClickHouse OOM queries
-
-</section>
-
-</div>
-
-
-## Core Differences
-
-<table border="1">
- <thead>
- <tr>
- <th></th>
- <th>Apache Doris</th>
- <th>ClickHouse</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><strong>System Architecture</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**MPP distributed architecture**</li>
- <li style={{fontSize:'14px'}}>**MySQL-protocol compatible, standard SQL**</li>
- <li style={{fontSize:'14px'}}>**CBO automatic optimization**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Scatter-Gather architecture</li>
- <li style={{fontSize:'14px'}}>SQL-like syntax, non-standard</li>
- <li style={{fontSize:'14px'}}>Requires manual tuning</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Join Query Performance</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**2-10x faster, with cross-node distributed execution**</li>
- <li style={{fontSize:'14px'}}>**CBO automatically chooses Join strategy**</li>
- <li style={{fontSize:'14px'}}>**Can run the full TPC-DS query suite**</li>
- <li style={{fontSize:'14px'}}>**Efficient memory management, avoids OOM**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Relies on subqueries and wide-table modeling</li>
- <li style={{fontSize:'14px'}}>No CBO, requires manual tuning</li>
- <li style={{fontSize:'14px'}}>About 50% of TPC-DS queries fail</li>
- <li style={{fontSize:'14px'}}>Frequent OOM on large queries</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Real-time Updates</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Merge-on-Write**</li>
- <li style={{fontSize:'14px'}}>**Strong consistency, updates visible immediately**</li>
- <li style={{fontSize:'14px'}}>**High-throughput UPSERT without performance degradation**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>ReplacingMergeTree, eventual consistency</li>
- <li style={{fontSize:'14px'}}>Using `FINAL` causes 2-10x performance degradation</li>
- <li style={{fontSize:'14px'}}>High-frequency updates lead to heavy merge overhead</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Transaction Support</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Full ACID transactions**</li>
- <li style={{fontSize:'14px'}}>**Atomic batch ingestion**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>No transaction support</li>
- <li style={{fontSize:'14px'}}>Partial data may become visible</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Query Concurrency</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Thousands of concurrent queries, 10x or more**</li>
- <li style={{fontSize:'14px'}}>**Efficient memory management**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Usually below 100 concurrent queries</li>
- <li style={{fontSize:'14px'}}>Memory-intensive workloads cause cluster instability</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Data API and Lakehouse</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Arrow-Flight high-throughput protocol**</li>
- <li style={{fontSize:'14px'}}>**Supports Hive/Hudi/Iceberg/Parquet**</li>
- <li style={{fontSize:'14px'}}>**Automatic scaling and multi-replica balancing**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>JDBC only</li>
- <li style={{fontSize:'14px'}}>Limited lakehouse integration</li>
- <li style={{fontSize:'14px'}}>Scaling requires manual rebalancing</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Cost Efficiency (Storage-Compute Separation)</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Supported in open-source 3.0+**</li>
- <li style={{fontSize:'14px'}}>**Elastic compute, no rebalancing on node add/remove**</li>
- <li style={{fontSize:'14px'}}>**Up to 70% cost reduction**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Commercial Cloud edition only</li>
- <li style={{fontSize:'14px'}}>Tightly coupled, scaling requires data rebalancing</li>
- <li style={{fontSize:'14px'}}>Requires over-provisioning to handle peaks</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Open-Source License</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Hosted by the Apache Foundation, maintained collaboratively by the community</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Controlled by a commercial company</li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
-
-## Performance Comparison
-
-
-
-### ClickBench
-
-ClickBench is a benchmark dedicated to evaluating analytical database performance, with its core validation focused on processing efficiency over massive wide tables.
-
-**Test scenarios**: clickstream analysis, structured log processing, and other typical OLAP workloads.
-
-### TPC-H SF100
-
-An industry-recognized standard for database performance testing, consisting of 22 complex SQL queries that simulate real-world enterprise scenarios.
-
-:::note Note
-ClickHouse failed to complete 7 queries during the test. The final total elapsed time reflects Doris completing all 22 queries, while ClickHouse only completed 15.
-:::
-
-### TPC-DS 1TB
-
-An authoritative performance benchmark for data warehouses and analytical databases, covering 99 complex queries that simulate real business scenarios such as online sales and store sales.
-
-:::note Note
-The TPC-DS benchmark uses a large number of correlated subqueries, which ClickHouse did not yet support at the time of testing (September 2024), causing about half of the queries to fail.
-:::
-
-
-## FAQ
-
-### Q: What are the core differences between Doris and ClickHouse?
-
-Apache Doris is built on an MPP architecture and provides full distributed Join capabilities, whereas ClickHouse uses a Scatter-Gather architecture and relies on wide-table modeling for complex multi-table joins.
-
-- **Apache Doris**: Under the MPP architecture, complex queries can be executed in a distributed fashion across nodes, and the query optimizer automatically selects the best Join strategy.
-- **ClickHouse**: Under the Scatter-Gather architecture, data must be processed independently on each node and then aggregated, and cross-node distributed Joins cannot be executed natively.
-
-**Recommended scenarios**:
-- Frequent multi-table joins: choose Apache Doris
-- Mainly single-table aggregation queries: either works
-
-### Q: Is Doris's Join performance really faster than ClickHouse's?
-
-Yes. Based on the standard TPC-H and TPC-DS benchmarks:
-
-| Benchmark | Apache Doris | ClickHouse |
-|----------|-------------|------------|
-| TPC-H SF100 | All 22 queries completed | 7 queries failed with OOM |
-| TPC-DS | All 99 queries completed | About 50% of queries failed due to lack of correlated subquery support |
-
-Doris's CBO query optimizer automatically chooses the best Join strategy (Broadcast/Shuffle/Colocate), while ClickHouse requires manual tuning.
-
-### Q: What should I watch out for when migrating from ClickHouse to Doris?
-
-1. **SQL syntax differences**: Doris is compatible with the MySQL protocol, while ClickHouse syntax needs adjustment.
-2. **Data modeling**: ClickHouse's wide-table modeling approach is not necessarily optimal in Doris.
-3. **Ingestion tools**: Data ingestion scripts need to be replaced; Doris provides multiple ingestion methods.
-4. **Recommendation**: First validate SQL compatibility on a small-scale scenario, then migrate gradually.
-
-### Q: How does Doris's storage-compute separation differ from ClickHouse Cloud?
-
-| Feature | Apache Doris | ClickHouse Cloud |
-|------|-------------|------------------|
-| Storage-compute separation | Supported in the open-source version (since 3.0) | Commercial edition only |
-| Scaling behavior | Elastic compute, no data rebalancing when nodes are added or removed | Scaling requires data rebalancing |
-| Cost model | Pay-as-you-go, only pay for actual compute resources | Pay per instance |
-
-### Q: Can Doris query the data lake?
-
-Yes. Apache Doris has built-in data lake query capabilities:
-
-- Directly queries formats such as **Hive, Hudi, Iceberg, and Parquet**
-- Achieves a unified lakehouse without data ingestion
-- Supports the Arrow-Flight protocol for integration with other engines (such as AI and data science tools)
diff --git a/docs-next/getting-started/alternatives/alternative-to-elasticsearch.mdx b/docs-next/getting-started/alternatives/alternative-to-elasticsearch.mdx
deleted file mode 100644
index dd633be8f38..00000000000
--- a/docs-next/getting-started/alternatives/alternative-to-elasticsearch.mdx
+++ /dev/null
@@ -1,223 +0,0 @@
----
-{
- "title": "Apache Doris vs Elasticsearch: Selection Guide and Performance Comparison",
- "sidebar_label": "Apache Doris vs Elasticsearch",
- "language": "en",
- "description": "A comparison guide between Apache Doris and Elasticsearch. Learn about architectural differences, performance comparisons, storage costs, and migration cases in observability, cybersecurity, and real-time analytics scenarios to help you make technology selection decisions.",
- "keywords": [
- "Apache Doris vs Elasticsearch",
- "Doris Elasticsearch comparison",
- "log analytics database selection",
- "observability solution",
- "real-time analytics database"
- ]
-}
----
-
-Elasticsearch and Apache Doris are widely used in observability, cybersecurity, and real-time analytics. Elasticsearch incurs high overhead in storage resources and write costs. By contrast, Apache Doris significantly reduces resource consumption through its efficient storage architecture and high storage compression ratio, while providing more comprehensive analytical capabilities and better query performance.
-
-
-## When to Choose Apache Doris
-
-| Scenario | Recommended Choice | Reason |
-|------|----------|------|
-| Need lower storage costs | **Apache Doris** | Compression ratio of 1:5-1:10, far better than Elasticsearch's 1:1.5 |
-| Need complex analytical capabilities | **Apache Doris** | Supports multi-table joins, materialized views, and standard SQL, with no need to learn a dedicated DSL |
-| Need lower total cost of ownership | **Apache Doris** | Supports a separation of storage and compute architecture, with more flexible elastic scaling |
-| Need higher write throughput | **Apache Doris** | Write performance overhead is below 10%, while Elasticsearch can be up to 3x |
-| Mainly performing log search and simple aggregation | Either works | Choose based on team familiarity |
-| Existing Elasticsearch running stably | Continue with Elasticsearch | Migration has costs, and the benefits need to be evaluated |
-
-
-## Featured Case Studies
-
-<div className="case-studies">
-
-<section>
-
-### True Watch
-
-
-
-> "By replacing Elasticsearch with VeloDB(Powered by Apache Doris), GuanceDB showcases a big stride in improving data processing speed and reducing costs."
-
-- 70% Cost Reduction
-- 2-3x Faster full-text search performanc
-- Variant Data type is flexible to handle semi-structured data in log tracing
-
-</section>
-
-<section>
-
-### Bestpay
-
-
-
-> "Previously, multiple components were used to build the security analysis system, which had issues such as redundant data storage. After unifying the architecture with Apache Doris, the system achieved significant optimization in data write throughput, complex query response speed, and storage efficiency."
-
-- 4x improvement in write speed
-- 3x improvement in query performance
-- 50% reduction in storage space
-
-</section>
-
-<section>
-
-### ZTO Express
-
-
-
-> "After introducing Doris to replace the original OLAP database, query performance improved by 5 to 10 times, and concurrent processing capability doubled. In 90% of analytical scenarios, processing time was shortened from the original 10 minutes to within 1 minute. In addition, resource consumption was reduced to one-third of the original."
-
-- 2x improvement in high-concurrency report analysis
-- 65% reduction in storage space
-- Supports standard SQL, simplifying operations and usage costs
-
-</section>
-
-</div>
-
-
-## Core Differences
-
-<table border="1">
- <thead>
- <tr>
- <th></th>
- <th>Apache Doris</th>
- <th>Elasticsearch</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><strong>Open Source</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Apache License 2.0**</li>
- <li style={{fontSize:'14px'}}>**Operated by the Apache Software Foundation**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>License has changed multiple times, from Apache License 2.0 to Elastic License, and then to AGPL License</li>
- <li style={{fontSize:'14px'}}>Operated by Elastic</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>System Architecture</strong></td>
- <td>
- <ul>
- <p><strong>More flexible and elastic:</strong></p>
- <li style={{fontSize:'14px'}}>**Meets strict read/write separation needs and isolated workload requirements across different businesses**</li>
- <li style={{fontSize:'14px'}}>**Supports both integrated storage and compute, and separation of storage and compute**</li>
- </ul>
- </td>
- <td>
- <ul>
- <p><strong>Limited elasticity:</strong></p>
- <li style={{fontSize:'14px'}}>Uses a thread group approach, only achieving weak compute isolation</li>
- <li style={{fontSize:'14px'}}>Only supports integrated storage and compute</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Real-time Ingestion</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**High write throughput, low overhead: indexing once across multiple replicas**</li>
- <li style={{fontSize:'14px'}}>**Two write methods, more user-friendly: supports both external Push writes and active Pull from message queues, without the need for external tools**</li>
- <li style={{fontSize:'14px'}}>**Supports tools such as Logstash and Beats for data pulling**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Low write throughput, high overhead: indexing multiple times across multiple replicas</li>
- <li style={{fontSize:'14px'}}>Only supports external Push writes; Pull writes require external tools such as Logstash</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Real-time Storage</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Low storage footprint, with an overall compression ratio of up to 1:5 - 1:10**</li>
- <li style={{fontSize:'14px'}}>**The primary key model supports both Merge-on-Write (MoW) and Merge-on-Read (MoR). When deduplicating data, write performance overhead is below 10%**</li>
- <li style={{fontSize:'14px'}}>**The aggregation model supports strongly consistent synchronization and updates to aggregated data, and allows coexistence with raw data**</li>
- <li style={{fontSize:'14px'}}>**Provides more flexible Schema Change to meet dynamic business needs**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>High storage footprint, with an overall compression ratio of 1:1.5</li>
- <li style={{fontSize:'14px'}}>The primary key model only supports Merge-on-Write (MoW). When deduplicating data, write performance overhead is up to 3x</li>
- <li style={{fontSize:'14px'}}>The aggregation model only supports asynchronous eventual consistency, aggregated data cannot be updated, and does not coexist with raw data</li>
- <li style={{fontSize:'14px'}}>Limited Schema Change</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Real-time Query</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Fast response across various query workloads**</li>
- <li style={{fontSize:'14px'}}>**Supports complex analytical capabilities such as full multi-table joins, materialized views, UDFs, and lakehouse integration**</li>
- <li style={{fontSize:'14px'}}>**Standard SQL queries, easy to use**</li>
- <li style={{fontSize:'14px'}}>**Open MySQL ecosystem**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>High point query performance, but low analytical performance</li>
- <li style={{fontSize:'14px'}}>Does not support multi-table joins or more complex analytical capabilities, only meeting simple query workloads</li>
- <li style={{fontSize:'14px'}}>Dedicated query interface, with a steep learning curve due to a custom DSL</li>
- <li style={{fontSize:'14px'}}>Proprietary Elasticsearch ecosystem</li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
-
-## Performance Comparison
-
-### Observability and Cybersecurity
-
-
-<div style={{ display:'flex', justifyContent:'space-between', flexDirection:'row', paddingTop:'0.5rem',paddingBottom:'0.5rem'}}>
- <div style={{marginRight:'2rem'}}>
- <p>[HTTP Logs Benchmark](https://elasticsearch-benchmarks.elastic.co/) is a log storage and analysis performance verification testing tool officially released by Elasticsearch. It uses real HTTP Logs datasets to **systematically evaluate index build efficiency, storage resource utilization, and query response capability.**</p>
- <p>The test includes 11 typical log analysis operations (keyword search, time range filtering, aggregation computation, sorting, and so on). Its test scenarios and metric system precisely match the core requirements of observability monitoring and cybersecurity auditing, making it an important performance reference for OLAP system selection in related fields.</p>
- </div>
- <div>
- <img alt="ClickBench Benchmark" loading="lazy" width="800" height="338" decoding="async" data-nimg="1" src="/images/next/doris-vs-es/http-logs-benchmark.jpg" style={{color: 'transparent', marginTop:0}} />
- </div>
-</div>
-
-
-### Real-time Analytics
-
-<div style={{ display:'flex', justifyContent:'space-between', flexDirection:'row', paddingTop:'0.5rem',paddingBottom:'0.5rem'}}>
- <div style={{marginRight:'2rem'}}>
- <p>ClickBench is a benchmark tool dedicated to evaluating the performance of analytical databases. Its core verification scenarios focus on the processing efficiency of massive wide tables, rather than complex multi-table join scenarios. The performance test is built using real business data from leading web analytics platforms, covering typical OLAP application scenarios such as clickstream analysis and structured log processing.</p>
- <p>The test framework consists of a specific set of queries that focus on verifying aggregation computation capabilities and single-table processing performance (without involving complex table join operations). Therefore, this test has become one of the standards for evaluating real-time databases, and is especially suitable for verifying the data processing and real-time analytics capabilities of systems at the PB-scale data level.</p>
- <p>Note: The test results on the right are taken from December 2024 data.</p>
- </div>
- <div>
- <img alt="ClickBench Benchmark" loading="lazy" width="950" height="338" decoding="async" data-nimg="1" src="/images/next/doris-vs-es/clickbench-es.jpg" style={{color: 'transparent', marginTop:0}} />
- </div>
-</div>
-
-## FAQ
-
-### Q: How to migrate from Elasticsearch to Apache Doris?
-
-Apache Doris provides multiple data import solutions and supports full data migration from Elasticsearch. For specific steps, refer to the [data import documentation](../../data-operate/import/load-manual).
-
-### Q: What is the learning curve for Doris?
-
-Doris supports standard SQL and connects via the MySQL protocol. Engineers familiar with SQL do not need to learn an additional query language.
-
-### Q: What is the difference in log search performance between Doris and Elasticsearch?
-
-The two have similar performance in simple keyword search scenarios. However, Apache Doris performs better in aggregation analysis and time-series data analysis scenarios, and supports a richer set of analytical functions.
-
diff --git a/docs-next/getting-started/alternatives/alternative-to-trino.mdx b/docs-next/getting-started/alternatives/alternative-to-trino.mdx
deleted file mode 100644
index 64b0e0fa657..00000000000
--- a/docs-next/getting-started/alternatives/alternative-to-trino.mdx
+++ /dev/null
@@ -1,213 +0,0 @@
----
-{
- "title": "Apache Doris vs Trino/Presto: Selection Guide and Performance Comparison",
- "sidebar_label": "Apache Doris vs Trino/Presto",
- "language": "en",
- "description": "Comparison between Apache Doris and Trino/Presto, covering performance benchmarks, architectural differences, and selection recommendations. Doris delivers up to 10x faster internal table queries and 2-3x faster lakehouse queries.",
- "keywords": ["Apache Doris", "Trino", "Presto", "data lake", "lakehouse", "performance comparison", "selection guide"]
-}
----
-
-Apache Doris and Trino/Presto are both mainstream lakehouse query engines, but Doris has a clear performance advantage. Trino/Presto focuses primarily on query acceleration, while Doris not only accelerates queries but also serves as a standalone data warehouse. Enterprises can use Doris to unify the data warehouse and lakehouse query engine, simplifying their data architecture.
-
-- **Unified**: Apache Doris unifies the data warehouse and the lakehouse query engine, effectively simplifying the enterprise technology stack.
-
-- **10x performance gains**: Compared with Presto/Trino, Doris delivers up to 10x faster internal table query performance.
-
-- **2-3x execution efficiency**: As a lakehouse engine, Doris executes 2-3x faster than Presto/Trino.
-
-
-## When to Choose Apache Doris
-
-| Scenario | Recommended Choice | Reason |
-|------|----------|------|
-| High-concurrency real-time analytics (QPS > 1000) | **Apache Doris** | Supports thousands of concurrent queries with excellent real-time analytics performance |
-| Unified data warehouse + lakehouse queries | **Apache Doris** | Integrated architecture that simplifies the technology stack |
-| Maximum internal table query performance | **Apache Doris** | Fully vectorized engine delivers up to 10x performance gains |
-| Transparent acceleration via automatic materialized views | **Apache Doris** | The query optimizer automatically matches the optimal materialized view |
-| Federated query capability only | **Trino/Presto** | Strong at querying across heterogeneous data sources |
-| Mature data warehouse already in place, no migration desired | **Trino/Presto** | No need to replace the existing architecture |
-
-
-## Featured Case Studies
-
-<div className="case-studies">
-
-<section>
-
-### Cisco
-
-
-
-> "In the early days, we built our data platform with multiple systems such as Trino, Pinot, Iceberg, and Kyuubi, which led to a complex architecture, duplicated data storage, difficult operations, low resource utilization, and poor data timeliness. By introducing Apache Doris to replace several technology stacks, we achieved a unified lakehouse, significantly improved query performance and system stability, and reduced resource costs by 30%."
-
-- Unified lakehouse architecture
-- Significantly improved query performance and system stability
-- 30% reduction in resource costs
-
-</section>
-
-<section>
-
-### NetEase Games
-
-
-
-> "After migrating to Doris, overall query performance improved substantially. With Presto, multidimensional analysis queries previously took 20 to 40 seconds, while Doris reduced this to 1 to 2 seconds. In addition, a major advantage of Doris is its ability to automatically identify and match the optimal materialized view for queries, which further enhances performance for complex analytics."
-
-- Query time reduced from 20-40 seconds to 1-2 seconds
-- Automatic materialized view matching optimizes performance for complex analytics
-- Substantial improvement in multidimensional analytics performance
-
-</section>
-
-<section>
-
-### ZTO Express
-
-
-
-> "With Trino and SparkSQL, query latency stayed at the minute level, presenting a clear performance bottleneck. After migrating to Apache Doris, overall query performance improved by more than 2x. The unified Doris architecture effectively addressed data silos and resource redundancy in our hybrid setup, and accelerated response times for real-time analytics and interactive ad hoc queries."
-
-- More than 2x improvement in query performance
-- Eliminated data silos and resource redundancy
-- Accelerated response for real-time analytics and ad hoc queries
-
-</section>
-
-</div>
-
-
-## Core Differences
-
-<table border="1">
- <thead>
- <tr>
- <th></th>
- <th>Apache Doris</th>
- <th>Trino / Presto</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><strong>System Architecture</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Unified architecture:** Combines data warehouse and data lake query capabilities</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Federated queries:** Strong at querying across heterogeneous data sources, but lacks a built-in storage layer</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Execution Engine</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Fully vectorized execution engine implemented in C++, delivering high-performance data processing**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>The vectorized engine is primarily implemented in Java and is currently under development as part of the Hummingbird project</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Query Optimization</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Provides a cost-based optimizer (CBO) that optimizes complex queries, including JOIN, aggregation analytics, and sorting**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Supports cost-based optimization, but the statistics collection mechanism is incomplete and requires manual full collection</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Caching</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Metadata cache:** In-memory metadata cache with TTL, automatic refresh, and incremental synchronization</li>
- <li style={{fontSize:'14px'}}>**Data cache:** Local SSD hot data cache reduces network I/O</li>
- <li style={{fontSize:'14px'}}>**Query cache:** Supports SQL cache and partition cache</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Data cache:** Relies on external caching solutions such as Alluxio</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Materialized Views</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Incremental refresh:** Supports incremental refresh and multiple data refresh strategies</li>
- <li style={{fontSize:'14px'}}>**Transparent query acceleration:** The query optimizer automatically identifies and matches the optimal materialized view for queries</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Manual refresh:** Only supports manual full refresh</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Use Cases</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**High-concurrency real-time analytics**</li>
- <li style={{fontSize:'14px'}}>**Interactive analytics**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Supports interactive analytics only</li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
-
-## Performance Comparison
-
-### TPC-DS 1TB Benchmark
-
-The TPC-DS 1TB benchmark uses a 1TB dataset with 24 tables and 6.35 billion records, evaluating data warehouse performance through 99 complex queries that cover correlated queries, aggregation, and nested subqueries. Built on a snowflake schema, the benchmark simulates a real-world e-commerce sales scenario, and the complexity of the queries makes processing 1TB of data a significant challenge.
-
-**Test environment:**
-
-- 1 FE/Coordinator node and 5 BE/Worker nodes
-- 64-core CPU, 1.5TB memory, and SSD storage per node
-- HDFS deployed on the compute nodes, with Hive tables created
-
-**Test results:**
-
-- When data is loaded into Doris internal tables and queried by Doris, overall query latency is the lowest.
-- When Doris and Trino each query external Hive tables, Doris delivers better query acceleration in data lake scenarios.
-
-
-
-
-## FAQ
-
-### Q: Can Doris and Trino coexist?
-
-In terms of functionality, Doris can replace Trino as long as the required data source types are supported. The actual decision depends on the migration plan and compatibility with existing workloads.
-
-### Q: How long does migration to Doris take?
-
-Doris provides a rich set of ETL tools and Hive-compatible APIs. Migration typically takes 2 to 4 weeks.
-
-### Q: Is Doris really 2-3x faster than Trino for lakehouse queries?
-
-Yes. According to the TPC-DS 1TB benchmark, Doris delivers better query acceleration than Trino in data lake scenarios when querying external Hive tables.
-
-### Q: How do I choose the right materialized view strategy?
-
-Doris supports multiple materialized view refresh strategies. Choose incremental refresh or full refresh based on data update frequency and query patterns. The query optimizer automatically matches the optimal materialized view.
diff --git a/docusaurus.config.js b/docusaurus.config.js
index c96facbaaec..50cfed6f2b6 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -15,6 +15,19 @@ const ONLY_VERSIONS = process.env.DOCS_VERSIONS
? process.env.DOCS_VERSIONS.split(',').map(v => v.trim()).filter(Boolean)
: null;
+// Landing-only dev mode: when working on src/components/home-next or
+// use-cases-next, no docs/blog/search routes need to load. Setting
+// LANDING_ONLY=true disables every heavy content plugin, which drops
+// `yarn start` peak memory from ~20GB to ~1-2GB. Individual SKIP_* env
+// vars allow finer-grained control.
+const LANDING_ONLY = process.env.LANDING_ONLY === 'true';
+const SKIP_DOCS = LANDING_ONLY || process.env.SKIP_DOCS === 'true';
+const SKIP_BLOG = LANDING_ONLY || process.env.SKIP_BLOG === 'true';
+const SKIP_COMMUNITY = LANDING_ONLY || process.env.SKIP_COMMUNITY === 'true';
+const SKIP_RELEASES = LANDING_ONLY || process.env.SKIP_RELEASES === 'true';
+const SKIP_DOCS_NEXT = LANDING_ONLY || process.env.SKIP_DOCS_NEXT === 'true';
+const SKIP_SEARCH = LANDING_ONLY || process.env.SKIP_SEARCH === 'true';
+
const LINK_BEHAVIOR_VALUES = new Set(['ignore', 'log', 'warn', 'throw']);
function getBrokenLinkBehavior(envName, fallback) {
const value = process.env[envName];
@@ -130,7 +143,7 @@ const config = {
'docusaurus-plugin-matomo',
// Use custom blog plugin
versionsPlugin,
- [
+ SKIP_COMMUNITY ? null : [
'content-docs',
/** @type {import('@docusaurus/plugin-content-docs').Options} */
({
@@ -140,7 +153,7 @@ const config = {
sidebarPath: require.resolve('./sidebarsCommunity.json'),
}),
],
- [
+ SKIP_RELEASES ? null : [
'content-docs',
/** @type {import('@docusaurus/plugin-content-docs').Options} */
({
@@ -150,7 +163,7 @@ const config = {
sidebarPath: require.resolve('./sidebarsReleases.json'),
}),
],
- process.env.SKIP_DOCS_NEXT ? null : [
+ SKIP_DOCS_NEXT ? null : [
'content-docs',
/** @type {import('@docusaurus/plugin-content-docs').Options} */
({
@@ -248,7 +261,7 @@ const config = {
'classic',
/** @type {import('@docusaurus/preset-classic').Options} */
({
- docs: {
+ docs: SKIP_DOCS ? false : {
...(ONLY_VERSIONS && { onlyIncludeVersions: ONLY_VERSIONS }),
// When filtering versions, lastVersion must be in the
// included list. Fall back to the first included version.
@@ -275,7 +288,7 @@ const config = {
]
]
},
- blog: {
+ blog: SKIP_BLOG ? false : {
blogTitle: 'Apache Doris - Blog | Latest news and events ',
blogDescription:
'Explore how Doris empower lakehouse, adhoc analysis, customer-facing analysis and various scenarios',
@@ -319,7 +332,7 @@ const config = {
}),
],
],
- themes: [
+ themes: SKIP_SEARCH ? [] : [
[
'@yang1666204/docusaurus-search-local',
{
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-clickhouse.mdx b/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-clickhouse.mdx
deleted file mode 100644
index 2334445a4aa..00000000000
--- a/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-clickhouse.mdx
+++ /dev/null
@@ -1,291 +0,0 @@
----
-{
- "title": "Apache Doris 对比 ClickHouse：选型指南与性能对比",
- "language": "zh-CN",
- "description": "详细对比 Apache Doris 与 ClickHouse 在 Join 性能、实时更新、并发能力、存算分离等维度的差异，包含实际案例与性能基准测试。",
- "keywords": ["Apache Doris vs ClickHouse", "ClickHouse 替代", "OLAP 数据库对比", "实时分析数据库", "存算分离"],
- "sidebar_label": "Apache Doris vs ClickHouse"
-}
----
----
-
-Apache Doris 和 ClickHouse 都是全球领先的实时分析型数据库，均支持列式存储与极速查询。Apache Doris 在三个关键领域具有显著优势：**Join 查询性能提升 2-10 倍**（基于先进的 MPP 架构与基于成本的查询优化器）、**通过存算分离降低高达 70% 的基础设施成本**（支持计算与存储资源独立扩缩）、以及**卓越的实时更新性能**（写时合并引擎在高频数据更新时仍能保持稳定的查询性能）。
-
-
-## 何时选择 Apache Doris
-
-| 场景 | 推荐选择 | 原因 |
-|------|----------|------|
-| 需要复杂多表 Join | **Apache Doris** | MPP 架构原生支持分布式 Join，ClickHouse 依赖宽表建模 |
-| 高并发查询 (100+ 并发) | **Apache Doris** | 支持数千并发，ClickHouse 通常少于 100 |
-| 高频实时更新 + UPSERT | **Apache Doris** | 写时合并引擎保证查询性能，ClickHouse 合并开销大 |
-| 主要做单表聚合查询 | 两者皆可 | 根据团队熟悉度选择 |
-| 已有 ClickHouse 稳定运行 | 继续用 ClickHouse | 迁移有成本，收益需评估 |
-
-
-## 精选案例
-
-<div className="case-studies">
-
-<section>
-
-### 快手
-
-
-
-> "利用 Apache Doris 替换 ClickHouse 后，快手成功升级为湖仓一体架构，实现统一存储并简化数据链路，无需数据导入，Doris 可直接访问湖仓数据。结合 Doris 的物化视图改写与自动物化服务，实现了高性能查询与灵活的数据治理。"
-
-- 直接查询数据湖数据，缩短数据链路
-- 查询性能提升，满足多场景查询加速
-- 借助物化视图，实现更灵活数据治理
-
-</section>
-
-<section>
-
-### 腾讯音乐
-
-
-
-> "内容库数据平台经过分析引擎从 ClickHouse 到 Apache Doris 的替换、数据架构语义层的初步引入到深度应用，有效提高了数据时效性、降低了运维成本、解决了数据管理割裂等问题。"
-
-- 具备多表查询和联邦查询性能特性
-- 兼容 MySQL 协议，降低运维成本
-- 支持部分列更新，满足多种数据更新方式
-
-</section>
-
-<section>
-
-### 网易云音乐
-
-
-
-> "我们用 Apache Doris 替换了 ClickHouse，构建了新的日志平台，目前规模已达 50 台服务器、2PB 数据量。此次架构升级后，系统在查询响应、并发处理、稳定性及运维效率等多方面均取得了显著提升。"
-
-- 全文检索性能提升 3-7 倍
-- 峰值写入吞吐达 6GB/s
-- 支持 500+ 并发查询，较 ClickHouse 提升超 2 倍
-
-</section>
-
-</div>
-
-
-## 核心差异对比
-
-<table border="1">
- <thead>
- <tr>
- <th></th>
- <th>Apache Doris</th>
- <th>ClickHouse</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><strong>系统架构</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**MPP 分布式架构**</li>
- <li style={{fontSize:'14px'}}>**兼容 MySQL 协议，标准 SQL**</li>
- <li style={{fontSize:'14px'}}>**CBO 自动优化**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Scatter-Gather 架构</li>
- <li style={{fontSize:'14px'}}>类 SQL 语法，非标准</li>
- <li style={{fontSize:'14px'}}>需手动调优</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>Join 查询性能</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**2-10 倍提升，跨节点分布式执行**</li>
- <li style={{fontSize:'14px'}}>**CBO 自动选择 Join 策略**</li>
- <li style={{fontSize:'14px'}}>**可执行 TPC-DS 全套查询**</li>
- <li style={{fontSize:'14px'}}>**高效内存管理，避免 OOM**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>依赖子查询和宽表建模</li>
- <li style={{fontSize:'14px'}}>无 CBO，需手动调优</li>
- <li style={{fontSize:'14px'}}>约 50% TPC-DS 查询失败</li>
- <li style={{fontSize:'14px'}}>大型查询频繁 OOM</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>实时更新</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**写时合并（Merge-on-Write）**</li>
- <li style={{fontSize:'14px'}}>**强一致性，更新立即可见**</li>
- <li style={{fontSize:'14px'}}>**高吞吐 UPSERT，性能不下降**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>ReplacingMergeTree 最终一致</li>
- <li style={{fontSize:'14px'}}>使用 `FINAL` 导致 2-10 倍性能下降</li>
- <li style={{fontSize:'14px'}}>高频更新导致合并开销大</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>事务支持</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**完整 ACID 事务**</li>
- <li style={{fontSize:'14px'}}>**批量导入原子性**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>不支持事务</li>
- <li style={{fontSize:'14px'}}>部分数据可能可见</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>查询并发</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**数千并发，支持 10 倍以上**</li>
- <li style={{fontSize:'14px'}}>**高效内存管理**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>通常低于 100 并发</li>
- <li style={{fontSize:'14px'}}>内存密集型导致集群不稳定</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>数据 API 与湖仓</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Arrow-Flight 高吞吐协议**</li>
- <li style={{fontSize:'14px'}}>**支持 Hive/Hudi/Iceberg/Parquet**</li>
- <li style={{fontSize:'14px'}}>**自动扩缩容与多副本平衡**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>仅 JDBC</li>
- <li style={{fontSize:'14px'}}>湖仓集成能力有限</li>
- <li style={{fontSize:'14px'}}>扩缩容需手动平衡</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>成本效益（存算分离）</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**开源版 3.0+ 已支持**</li>
- <li style={{fontSize:'14px'}}>**弹性计算，节点增减无需重平衡**</li>
- <li style={{fontSize:'14px'}}>**成本最高可降低 70%**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>仅商业版 Cloud</li>
- <li style={{fontSize:'14px'}}>紧耦合，扩容需数据重平衡</li>
- <li style={{fontSize:'14px'}}>需过度配置应对峰值</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>开源协议</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>Apache 基金会托管，社区共同维护</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>商业公司控制</li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
-
-## 性能对比
-
-
-
-### ClickBench
-
-ClickBench 是专用于评估分析型数据库性能的基准测试工具，其核心验证场景聚焦于海量宽表处理效能。
-
-**测试场景**：点击流分析、结构化日志处理等典型 OLAP 应用。
-
-### TPC-H SF100
-
-业界公认的数据库性能测试标准，包含 22 条模拟真实企业场景的复杂 SQL 查询。
-
-:::note 注意
-ClickHouse 在测试过程中存在 7 个未能完成的查询，最终测试的总耗时结果为 Doris 完整执行 22 个查询的时间、ClickHouse 仅为成功执行 15 个查询的时间。
-:::
-
-### TPC-DS 1TB
-
-数据仓库与分析型数据库的权威性能测试，涵盖 99 条复杂查询，模拟网络销售、门店销售等真实业务场景。
-
-:::note 注意
-TPC-DS 性能测试中使用了大量关联子查询，而 ClickHouse 在测试时（2024 年 9 月）尚未支持该功能，导致约半数查询无法执行。
-:::
-
-
-## 常见问题
-
-### Q: Doris 和 ClickHouse 的核心区别是什么？
-
-Apache Doris 基于 MPP 架构提供完整的分布式 Join 能力，而 ClickHouse 采用 Scatter-Gather 架构，复杂多表关联需要依赖宽表建模。
-
-- **Apache Doris**：MPP 架构下，复杂查询可跨节点分布式执行，查询优化器自动选择最优 Join 策略
-- **ClickHouse**：Scatter-Gather 架构下，数据需要在各节点独立处理后汇总，无法原生执行跨节点分布式 Join
-
-**适用场景建议**：
-- 频繁多表关联 → 选择 Apache Doris
-- 主要是单表聚合查询 → 两者皆可
-
-### Q: Doris 的 Join 性能真的比 ClickHouse 快吗？
-
-是的。基于标准 TPC-H 和 TPC-DS 基准测试：
-
-| 基准测试 | Apache Doris | ClickHouse |
-|----------|-------------|------------|
-| TPC-H SF100 | 22 个查询全部完成 | 7 个查询 OOM 失败 |
-| TPC-DS | 99 个查询全部完成 | 约 50% 查询因不支持关联子查询失败 |
-
-Doris 的 CBO 查询优化器会自动选择最优 Join 策略（Broadcast/Shuffle/Colocate），而 ClickHouse 需要手动调优。
-
-### Q: 从 ClickHouse 迁移到 Doris 需要注意什么？
-
-1. **SQL 语法差异**：Doris 兼容 MySQL 协议，ClickHouse 语法需调整
-2. **数据模型**：ClickHouse 的宽表建模方式在 Doris 中不一定最优
-3. **导入工具**：需要替换数据导入脚本，Doris 提供多种导入方式
-4. **建议**：先在小规模场景验证 SQL 兼容性，再逐步迁移
-
-### Q: Doris 的存算分离和 ClickHouse Cloud 有什么区别？
-
-| 特性 | Apache Doris | ClickHouse Cloud |
-|------|-------------|------------------|
-| 存算分离 | 开源版本已支持（自 3.0） | 仅商业版 |
-| 扩容行为 | 弹性计算，节点增减无需数据重平衡 | 扩容需数据重平衡 |
-| 成本模型 | 按需付费，只为实际计算资源买单 | 按实例付费 |
-
-### Q: Doris 能否查询数据湖？
-
-能。Apache Doris 内置数据湖查询能力：
-
-- 支持直接查询 **Hive、Hudi、Iceberg、Parquet** 等格式
-- 无需数据导入，即可实现湖仓一体
-- 支持 Arrow-Flight 协议与其他引擎集成（如 AI/数据科学工具）
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-elasticsearch.mdx b/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-elasticsearch.mdx
deleted file mode 100644
index b57a38b37e7..00000000000
--- a/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-elasticsearch.mdx
+++ /dev/null
@@ -1,224 +0,0 @@
----
-{
- "title": "Apache Doris 对比 Elasticsearch：选型指南与性能对比",
- "sidebar_label": "Apache Doris vs Elasticsearch",
- "language": "zh-CN",
- "description": "Apache Doris 与 Elasticsearch 对比指南。了解两者在可观测性、网络安全、实时分析场景下的架构差异、性能对比、存储成本及迁移案例，助您做出技术选型决策。",
- "keywords": [
- "Apache Doris vs Elasticsearch",
- "Doris Elasticsearch 对比",
- "日志分析数据库选型",
- "可观测性方案",
- "实时分析数据库"
- ]
-}
----
-
-Elasticsearch 与 Apache Doris 在可观测性、网络安全和实时分析领域均有广泛应用。Elasticsearch 在存储资源与写入成本方面存在较高开销，相比之下，Apache Doris 利用其高效存储架构、存储压缩比等特性显著降低了资源消耗，并提供了更完善的分析能力以及更优的查询性能。
-
-
-## 何时选择 Apache Doris
-
-| 场景 | 推荐选择 | 原因 |
-|------|----------|------|
-| 需要更低的存储成本 | **Apache Doris** | 压缩比 1:5-1:10，远优于 Elasticsearch 的 1:1.5 |
-| 需要复杂分析能力 | **Apache Doris** | 支持多表 Join、物化视图、标准 SQL，无需学习专用 DSL |
-| 需要更低的总体拥有成本 | **Apache Doris** | 支持存算分离架构，弹性扩展更灵活 |
-| 需要更高写入吞吐量 | **Apache Doris** | 写入性能损耗低于 10%，Elasticsearch 可高达 3 倍 |
-| 主要做日志检索和简单聚合 | 两者皆可 | 根据团队熟悉度选择 |
-| 已有 Elasticsearch 稳定运行 | 继续用 Elasticsearch | 迁移有成本，收益需评估 |
-
-
-## 精选案例
-
-<div className="case-studies">
-
-<section>
-
-### 中信银行
-
-
-
-> "基于 Apache Doris 构建的日志存储与分析平台上线后，相较于原有的 Elasticsearch 架构，成功减少了日志冗余存储，提高了日志数据存储效率，同时提供了强大且高效的日志检索与分析服务。"
-
-- 节省 50% 资源投入
-- 提升 2-4 倍查询效率
-- 支持 Join，满足多种复杂的数据处理分析需求
-
-</section>
-
-<section>
-
-### 翼支付
-
-
-
-> "之前采用了多个组件构建安全分析系统，存在数据冗余存储等问题，借助 Apache Doris 统一架构后，系统在数据写入吞吐量、复杂查询响应速度以及存储效率等方面均实现显著优化。"
-
-- 提升 4 倍写入速度
-- 提升 3 倍查询性能
-- 节省 50% 存储空间
-
-</section>
-
-<section>
-
-### 中通快递
-
-
-
-> "在引入 Doris 替换原有的 OLAP 数据库后，查询性能提升了 5 到 10 倍，同时并发处理能力达 2 倍提升。在 90% 的分析场景中，处理时间从原来的 10 分钟缩短到了 1 分钟以内。此外，资源消耗还减少到了原来的三分之一。"
-
-- 提升 2 倍高并发报表分析
-- 节省 65% 存储空间
-- 支持标准 SQL，简化运维与使用成本
-
-</section>
-
-</div>
-
-
-## 核心差异对比
-
-
-<table border="1">
- <thead>
- <tr>
- <th></th>
- <th>Apache Doris</th>
- <th>Elasticsearch</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><strong>开源开放</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**Apache License 2.0**</li>
- <li style={{fontSize:'14px'}}>**由 Apache 开源软件基金会运营**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>License 多次变更，从 Apache License 2.0 到 Elastic License，再到 AGPL License</li>
- <li style={{fontSize:'14px'}}>由 Elastic 公司运营</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>系统架构</strong></td>
- <td>
- <ul>
- <p><strong>更灵活、更弹性：</strong></p>
- <li style={{fontSize:'14px'}}>**可满足严格的读写分离需求、不同业务隔离负载需求**</li>
- <li style={{fontSize:'14px'}}>**支持存算一体和存算分离**</li>
- </ul>
- </td>
- <td>
- <ul>
- <p><strong>有限弹性：</strong></p>
- <li style={{fontSize:'14px'}}>采用线程组方式，仅可实现较弱的计算隔离</li>
- <li style={{fontSize:'14px'}}>仅支持存算一体</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>实时写入</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**写入吞吐高，开销低：多副本一次索引**</li>
- <li style={{fontSize:'14px'}}>**两种写入方式，更易用：既支持外部 Push 写入也支持从消息队列中主动 Pull，无需借助外围工具**</li>
- <li style={{fontSize:'14px'}}>**支持 Logstash and Beats 等工具进行数据拉取**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>写入吞吐低，开销高：多副本多次索引</li>
- <li style={{fontSize:'14px'}}>仅支持外部 Push 写入，Pull 写入方式需要借助 Logstash 外围工具</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>实时存储</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**存储空间占用率低，整体压缩率高达 1:5 - 1:10**</li>
- <li style={{fontSize:'14px'}}>**主键模型支持写优化（MoW）与读优化（MoR）, 数据去重时，写入性能损耗仅低于 10%**</li>
- <li style={{fontSize:'14px'}}>**聚合模型支持强一致同步、聚合数据更新，并支持与原始数据共存**</li>
- <li style={{fontSize:'14px'}}>**提供更灵活的 Schema Change，满足业务动态需求**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>存储空间占用率高，整体压缩率为 1:1.5</li>
- <li style={{fontSize:'14px'}}>主键模型仅支持写优化（MoW），数据去重时，写入性能损耗高达 3 倍</li>
- <li style={{fontSize:'14px'}}>聚合模型仅支持异步最终一致，聚合数据不可更新，不与原始数据共存</li>
- <li style={{fontSize:'14px'}}>有限 Schema Change</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>实时查询</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**多种查询负载均有极速响应**</li>
- <li style={{fontSize:'14px'}}>**支持完整多表 Join 和物化视图、UDF、湖仓一体等复杂分析能力**</li>
- <li style={{fontSize:'14px'}}>**标准 SQL 查询，易于使用**</li>
- <li style={{fontSize:'14px'}}>**开放的 MySQL 生态**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>点查性能高，但分析性能低</li>
- <li style={{fontSize:'14px'}}>不支持多表 Join 或更复杂的查询分析能力，仅能满足简单查询负载</li>
- <li style={{fontSize:'14px'}}>专用查询接口，使用定制 DSL 学习门槛高</li>
- <li style={{fontSize:'14px'}}>私有 Elasticsearch 生态</li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
-
-## 性能对比
-
-### 可观测性与网络安全
-
-
-<div style={{ display:'flex', justifyContent:'space-between', flexDirection:'row', paddingTop:'0.5rem',paddingBottom:'0.5rem'}}>
- <div style={{marginRight:'2rem'}}>
- <p>[HTTP Logs Benchmark](https://elasticsearch-benchmarks.elastic.co/) 是 Elasticsearch 官方推出的日志存储与分析性能验证测试工具，采用真实 HTTP Logs 数据集，**系统化评估索引构建效率、存储资源利用率及查询响应能力。**</p>
- <p>该测试包含 11 项典型日志分析操作（关键词检索、时间范围过滤、聚合计算、排序等），其测试场景与指标体系精准匹配可观测性监控与网络安全审计的核心需求，可作为相关领域 OLAP 系统选型的重要性能参照。</p>
- </div>
- <div>
- <img alt="ClickBench Benchmark" loading="lazy" width="800" height="338" decoding="async" data-nimg="1" src="/zh-CN/images/next/doris-vs-es/http-logs-benchmark.jpg" style={{color: 'transparent', marginTop:0}} />
- </div>
-</div>
-
-
-### 实时分析
-
-<div style={{ display:'flex', justifyContent:'space-between', flexDirection:'row', paddingTop:'0.5rem',paddingBottom:'0.5rem'}}>
- <div style={{marginRight:'2rem'}}>
- <p>ClickBench 是专用于评估分析型数据库性能的基准测试工具，其核心验证场景聚焦于海量宽表处理效能，而非复杂多表关联场景。该性能测试采用头部网络分析平台真实业务数据构建，覆盖点击流分析、结构化日志处理等典型 OLAP 应用场景。</p>
- <p>测试体系由特定查询集合构成，重点验证聚合运算能力与单表处理性能（不涉及复杂表关联操作），因此该测试成为评估实时数据库的标准之一，尤其适用于验证系统在 PB 级数据规模下的数据处理与实时分析能力。</p>
- <p>注：右侧测试结果取自于 2024 年 12 月数据。</p>
- </div>
- <div>
- <img alt="ClickBench Benchmark" loading="lazy" width="950" height="338" decoding="async" data-nimg="1" src="/zh-CN/images/next/doris-vs-es/clickbench-es.jpg" style={{color: 'transparent', marginTop:0}} />
- </div>
-</div>
-
-## 常见问题
-
-### Q: 如何从 Elasticsearch 迁移到 Apache Doris？
-
-Apache Doris 提供多种数据导入方案，支持从 Elasticsearch 全量迁移数据。具体步骤请参考[数据导入文档](../../data-operate/import/load-manual)。
-
-### Q: Doris 的学习曲线如何？
-
-Doris 支持标准 SQL，使用 MySQL 协议连接，对于熟悉 SQL 的工程师无需额外学习查询语言。
-
-### Q: Doris 和 Elasticsearch 的日志检索性能差异？
-
-两者在简单关键词检索场景性能相近，但 Apache Doris 在聚合分析、时序数据分析场景下性能更优，且支持更丰富的分析函数。
-
diff --git a/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-trino.mdx b/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-trino.mdx
deleted file mode 100644
index 823f5e9c083..00000000000
--- a/i18n/zh-CN/docusaurus-plugin-content-docs-next/current/getting-started/alternatives/alternative-to-trino.mdx
+++ /dev/null
@@ -1,214 +0,0 @@
----
-{
- "title": "Apache Doris 对比 Trino/Presto：选型指南与性能对比",
- "sidebar_label": "Apache Doris vs Trino/Presto",
- "language": "zh-CN",
- "description": "Apache Doris 与 Trino/Presto 对比分析，涵盖性能测试、架构差异、选型建议。Doris 内表查询性能最高提升 10 倍，湖仓查询快 2-3 倍。",
- "keywords": ["Apache Doris", "Trino", "Presto", "数据湖", "湖仓", "性能对比", "选型指南"]
-}
----
-
-Apache Doris 和 Trino/Presto 均为主流数据湖仓查询引擎，但 Doris 在性能上表现更具优势。Trino/Presto 主要专注于查询加速，而 Doris 不仅能够加速查询，还具备作为独立数据仓库的能力。企业可以利用 Doris 实现数据仓库和湖仓查询引擎的统一，从而简化其数据架构。
-
-- **统一**: Apache Doris 实现数据仓库与湖仓查询引擎统一，有效简化企业技术栈
-
-- **10 倍性能提升**: 相较于 Presto/Trino，Doris 内表查询性能最高提升达 10 倍。
-
-- **2~3 倍 执行效率**: 作为湖仓引擎，Doris 执行效率较 Presto/Trino快 2-3 倍。
-
-
-## 何时选择 Apache Doris
-
-| 场景 | 推荐选择 | 原因 |
-|------|----------|------|
-| 高并发实时分析 (QPS > 1000) | **Apache Doris** | 支持数千并发，实时分析性能优异 |
-| 统一数据仓库 + 湖仓查询 | **Apache Doris** | 一体化架构，简化技术栈 |
-| 内表查询性能最大化 | **Apache Doris** | 全向量引擎，性能最高提升 10 倍 |
-| 自动物化视图透明加速 | **Apache Doris** | 查询优化器自动匹配最优物化视图 |
-| 仅需要联邦查询能力 | **Trino/Presto** | 擅长跨异构数据源查询 |
-| 已有成熟数据仓库不希望迁移 | **Trino/Presto** | 不需要替换现有架构 |
-
-
-## 精选案例
-
-<div className="case-studies">
-
-<section>
-
-### Cisco
-
-
-
-> "早期我们使用多个系统（如 Trino、Pinot、Iceberg 和 Kyuubi）构建数据平台，导致架构复杂、数据重复存储、运维困难、资源利用率低和数据时效性差。通过引入 Apache Doris 替换多个技术栈，实现湖仓一体化，显著提高了查询性能和系统稳定性，并降低了 30% 的资源成本。"
-
-- 实现湖仓一体化架构统一
-- 查询性能与系统稳定性显著提升
-- 资源成本降低 30%
-
-</section>
-
-<section>
-
-### 网易游戏
-
-
-
-> "迁移到 Doris 后，整体查询性能得到大幅提升。之前使用 Presto 进行多维分析时，查询时间长达 20-40 秒，而 Doris 将这一时间缩短至 1-2 秒。此外，Doris 的一大优势在于能够自动识别并匹配最优物化视图进行查询，这进一步增强了系统复杂分析的性能。"
-
-- 查询时间从 20-40 秒缩短至 1-2 秒
-- 自动物化视图匹配优化复杂分析性能
-- 多维分析性能大幅提升
-
-</section>
-
-<section>
-
-### 中通快递
-
-
-
-> "使用 Trino 和 SparkSQL 时，系统查询延迟普遍维持在分钟级别，存在明显的性能瓶颈。迁移至 Apache Doris 后，整体查询性能提升 2 倍以上。通过 Doris 统一架构，有效解决了混合架构下的数据孤岛与资源冗余问题，更加速了实时分析与交互式即席查询响应。"
-
-- 查询性能提升 2 倍以上
-- 解决数据孤岛与资源冗余问题
-- 加速实时分析与即席查询响应
-
-</section>
-
-</div>
-
-
-## 核心差异对比
-
-
-<table border="1">
- <thead>
- <tr>
- <th></th>
- <th>Apache Doris</th>
- <th>Trino / Presto</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><strong>系统架构</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**统一架构:** 融合数据仓库与数据湖查询能力</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**联邦查询:** 擅长跨异构数据源查询，但无内置存储层</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>执行引擎</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**基于 C++ 实现的全向量化执行引擎，提供高性能数据处理**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>向量化引擎主要基于 Java 实现，目前作为 Hummingbird 项目的一部分处于开发中</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>查询优化</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**提供基于成本的查询优化器（CBO），可优化复杂查询，包括 JOIN、聚合分析、排序等**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>支持基于成本优化，但统计信息收集机制不完善，需手动全量收集</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>缓存机制</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**元数据缓存：** 具备 TTL、自动刷新和增量同步的内存元数据缓存能力</li>
- <li style={{fontSize:'14px'}}>**数据缓存：** 通过本地 SSD 热数据缓存减少网络 I/O</li>
- <li style={{fontSize:'14px'}}>**查询缓存：** 支持 SQL 缓存与分区缓存</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**数据缓存：** 依赖于 Alluxio 等外部缓存方案</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>物化视图</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**增量刷新：** 支持增量刷新和多种数据刷新策略</li>
- <li style={{fontSize:'14px'}}>**查询透明加速：** 查询优化器能够自动识别并匹配最优物化视图进行查询</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**手动刷新：** 仅支持人工全量刷新</li>
- </ul>
- </td>
- </tr>
- <tr>
- <td><strong>应用场景</strong></td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>**高并发实时分析**</li>
- <li style={{fontSize:'14px'}}>**交互式分析**</li>
- </ul>
- </td>
- <td>
- <ul>
- <li style={{fontSize:'14px'}}>仅支持交互式分析</li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
-
-## 性能对比
-
-### TPC-DS 1TB 性能测试
-
-TPC-DS 1TB Benchmark 包含 24 张表、63.5 亿条记录的 1TB 数据集，通过 99 条复杂查询（涵盖关联查询、聚合运算及嵌套子查询）评估数据仓库的性能。该测试基于雪花模型构建，模拟真实电商销售场景，由于查询的复杂性，在处理 1TB 规模数据时是一项挑战。
-
-**测试环境配置：**
-
-- 1 个 FE/Coordinator 节点 and 5 个 BE/Worker 节点
-- 单节点 64 核 CPU、1.5TB 内存以及 SSD 存储
-- HDFS 部署在计算节点上，并创建 Hive 表
-
-**测试结果：**
-
-- 当数据导入 Doris 内表并使用 Doris 执行查询时，整体查询耗时最短
-- 当 Doris 与 Trino 分别对外部 Hive 表查询时，Doris 在数据湖场景展现更优的查询加速性能
-
-
-
-
-## 常见问题
-
-### Q: Doris 与 Trino 可以共存吗？
-
-功能上，在 Doris 满足数据源类型要求的情况下，可以代替 Trino。但需根据迁移情况和现有业务的兼容情况而定。
-
-### Q: 迁移到 Doris 需要多长时间？
-
-Doris 提供丰富的 ETL 工具和 Hive 兼容 API，迁移周期通常为 2-4 周。
-
-### Q: Doris 的湖仓查询性能真的比 Trino 快 2-3 倍吗？
-
-是的。根据 TPC-DS 1TB 性能测试，当对外部 Hive 表进行查询时，Doris 在数据湖场景下展现出更优的查询加速性能。
-
-### Q: 如何选择合适的物化视图策略？
-
-Doris 支持多种物化视图刷新策略，建议根据数据更新频率和查询模式选择增量刷新或全量刷新。查询优化器会自动匹配最优物化视图。
diff --git a/local_dev.sh b/local_dev.sh
index 6d92ac4ecd3..0c57c9f44b6 100755
--- a/local_dev.sh
+++ b/local_dev.sh
@@ -24,10 +24,15 @@
#
# Commands:
# start Start dev server (English, default)
+# start-landing Start dev server with ONLY landing pages
+# (home-next, use-cases-next, etc.). Docs/blog/
+# community/releases/search are all disabled.
+# Drops peak memory from ~20GB to ~1-2GB.
# start-zh Start dev server (Chinese)
# build Full production build (en + zh-CN)
# build-en Production build (English only)
# build-docs-next Start docs-next dev server (hot reload, current only)
+# build-docs-next-all Build docs-next only (en + zh-CN)
# serve Serve a previous production build
# install Install dependencies only
# clean Clean build artifacts and caches
@@ -49,6 +54,7 @@
# ./local_dev.sh build # full build (slow)
# ./local_dev.sh build --versions "4.x" # build only 4.x version
# ./local_dev.sh build-docs-next # start docs-next dev server (hot reload)
+# ./local_dev.sh build-docs-next-all # build docs-next only (en + zh-CN)
# ./local_dev.sh clean # clean caches
##############################################################
@@ -207,6 +213,29 @@ cmd_start() {
"${YARN_BIN}" docusaurus start --no-open --host "${host}" --port "${port}"
}
+cmd_start_landing() {
+ local port="${OPT_PORT}"
+ local host="${OPT_HOST}"
+
+ validate_env
+ if [[ "${OPT_SKIP_INSTALL}" != "true" ]]; then
+ do_install
+ fi
+
+ export LANDING_ONLY=true
+ export NODE_OPTIONS="--max-old-space-size=${OPT_MAX_MEM}"
+
+ step "Starting LANDING-ONLY dev server on ${host}:${port}"
+ info "Disabled: docs, blog, community, releases, docs-next, search."
+ info "Only landing pages (home-next, use-cases-next, etc.) render."
+ info "Cross-links to /docs/* etc. will 404 — that's expected."
+ info "Press Ctrl+C to stop"
+ echo ""
+
+ cd "${PROJECT_ROOT}"
+ "${YARN_BIN}" docusaurus start --no-open --host "${host}" --port "${port}"
+}
+
cmd_start_zh() {
local port="${OPT_PORT}"
local host="${OPT_HOST}"
@@ -278,6 +307,27 @@ cmd_build_docs_next_only() {
"${YARN_BIN}" docusaurus start --no-open --locale zh-CN --host "${host}" --port "${port}"
}
+cmd_build_docs_next_all() {
+ validate_env
+ if [[ "${OPT_SKIP_INSTALL}" != "true" ]]; then
+ do_install
+ fi
+
+ apply_versions_env "current"
+ export NODE_OPTIONS="--max-old-space-size=${OPT_MAX_MEM}"
+
+ step "Building docs-next only (locales: en zh-CN)"
+ info "NODE_OPTIONS=--max-old-space-size=${OPT_MAX_MEM}"
+ info "This may take a few minutes..."
+ echo ""
+
+ cd "${PROJECT_ROOT}"
+ "${YARN_BIN}" docusaurus build --locale en --locale zh-CN
+
+ ok "Build completed! Output in: ${PROJECT_ROOT}/build/"
+ info "Run './local_dev.sh serve' to preview the build."
+}
+
cmd_serve() {
validate_env
@@ -367,11 +417,13 @@ done
# ─── Dispatch command ────────────────────────────────────────
case "${COMMAND}" in
start) cmd_start ;;
+ start-landing) cmd_start_landing ;;
start-zh) cmd_start_zh ;;
build) cmd_build "en" ;;
build-all) cmd_build "en zh-CN" ;;
build-en) cmd_build "en" ;;
build-docs-next) cmd_build_docs_next_only ;;
+ build-docs-next-all) cmd_build_docs_next_all ;;
serve) cmd_serve ;;
install) cmd_install ;;
clean) cmd_clean ;;
diff --git a/plan-doc/homepage-architecture.md b/plan-doc/homepage-architecture.md
new file mode 100644
index 00000000000..e766fe6e096
--- /dev/null
+++ b/plan-doc/homepage-architecture.md
@@ -0,0 +1,306 @@
+# New Homepage Architecture
+
+> Reference doc for the redesigned Apache Doris homepage. When the user says
+> "optimize the new Doris homepage", use this as the map of where to make changes.
+>
+> Companion to `homepage-redesign.md` (the original *plan*); this doc describes
+> the actual *implemented* code.
+
+---
+
+## TL;DR — where things live
+
+| Concern | File |
+| -------------------------------- | --------------------------------------------------------------------- |
+| URL → version selection | `src/pages/index.tsx` |
+| Floating "Try New Design" button | `src/components/home-version-toggle/HomeVersionToggle.tsx` |
+| **New homepage entry point** | `src/components/home-next/HomeNext.tsx` |
+| **New homepage layout shell** | `src/components/home-next/LayoutNext.tsx` |
+| **New navbar** | `src/components/home-next/NavbarNext.tsx` + `NavbarNext.scss` |
+| **Hero section (V1, designed)** | `src/components/home-next/sections/HeroSection.tsx` + `.scss` |
+| Other sections (placeholders) | `src/components/home-next/sections/*.tsx` |
+| Classic homepage (legacy) | `src/components/home-classic/HomeClassic.tsx` |
+| Visual reference for new design | `prototype/heroes.jsx`, `prototype/heroes.css`, `prototype/styles.css` |
+
+---
+
+## 1. Routing — how `/` picks a version
+
+The new homepage does **not** live at a separate URL. The route stays `/`,
+and `src/pages/index.tsx` chooses which component to render based on a
+`localStorage` flag.
+
+### `src/pages/index.tsx` (the switch)
+
+```tsx
+const HOME_VERSION_KEY = 'doris-home-version';
+
+export default function Home(): JSX.Element {
+ const [isNext, setIsNext] = useState(false);
+ const [mounted, setMounted] = useState(false);
+
+ useEffect(() => {
+ // SSR-safe: read localStorage only on the client
+ setIsNext(localStorage.getItem(HOME_VERSION_KEY) === 'next');
+ setMounted(true);
+ }, []);
+
+ const handleToggle = (next: boolean) => {
+ if (next) localStorage.setItem(HOME_VERSION_KEY, 'next');
+ else localStorage.removeItem(HOME_VERSION_KEY);
+ setIsNext(next);
+ };
+
+ return (
+ <>
+ {isNext
+ ? <HomeNext onSwitchBack={() => handleToggle(false)} />
+ : <HomeClassic onTryNew={() => handleToggle(true)} />}
+ {mounted && <HomeVersionToggle isV2={isNext} onToggle={() => handleToggle(!isNext)} />}
+ </>
+ );
+}
+```
+
+Rules:
+
+- **localStorage key**: `doris-home-version`
+- **Value `'next'`** → render `HomeNext`
+- **Anything else / missing** → render `HomeClassic` (the existing homepage)
+- The toggle button only mounts after the first client render (`mounted` flag)
+ to avoid SSR hydration mismatches.
+
+> Note: the original plan doc (`homepage-redesign.md`) calls the value `'v2'`.
+> The implementation uses `'next'`. If you need to switch versions in DevTools:
+> `localStorage.setItem('doris-home-version', 'next')` then refresh.
+
+### `HomeVersionToggle`
+
+`src/components/home-version-toggle/HomeVersionToggle.tsx` — a single
+`<button>` fixed to the bottom-right corner. Two visual states:
+
+- Classic view: green pill — *"✨ Try New Design"*
+- New view: outline — *"← Back to Classic"*
+
+Styles in the sibling `HomeVersionToggle.module.css`. The button itself is
+trivial; the toggle *logic* lives entirely in `index.tsx`.
+
+---
+
+## 2. New homepage component tree
+
+```
+HomeNext.tsx ← root, assembles sections
+└── LayoutNext.tsx ← Docusaurus shell + navbar + footer
+ ├── LayoutProvider (Docusaurus theme provider)
+ ├── PageMetadata (title / description for SEO)
+ ├── AnnouncementBar (Docusaurus theme component)
+ ├── NavbarNext.tsx ← custom dark-green navbar
+ ├── <main> ← sections render here
+ │ ├── HeroSection.tsx ✅ designed (V1 from prototype/)
+ │ ├── StatsSection.tsx ⏳ placeholder
+ │ ├── FeaturesSection.tsx ⏳ placeholder
+ │ ├── UseCasesSection.tsx ⏳ placeholder
+ │ ├── CommunitySection.tsx ⏳ placeholder
+ │ └── GetStartedSection.tsx ⏳ placeholder
+ └── Footer (Docusaurus theme component)
+```
+
+### `HomeNext.tsx`
+
+Just a thin wrapper that imports `LayoutNext` and the section components in
+order. Keep this file boring — section composition only.
+
+```tsx
+<LayoutNext title="..." description="...">
+ <HeroSection />
+ <StatsSection />
+ <FeaturesSection />
+ <UseCasesSection />
+ <CommunitySection />
+ <GetStartedSection />
+</LayoutNext>
+```
+
+### `LayoutNext.tsx`
+
+The Docusaurus chrome: `LayoutProvider` + `PageMetadata` + `AnnouncementBar` +
+`NavbarNext` + `<main>{children}</main>` + `Footer`. Don't add page-level
+styling here; styling belongs in the section components.
+
+### `NavbarNext.tsx` + `NavbarNext.scss`
+
+Custom navbar (intentionally not the Docusaurus default). Dark-green theme
+(`#06805F`) with cream text, JetBrains Mono typography, a yellow "Get Started"
+CTA, and a **live GitHub star pill** on the right.
+
+GitHub stars are fetched at runtime:
+
+```tsx
+function useGitHubStars(repo: string, fallback: string): string {
+ // GET https://api.github.com/repos/<repo>
+ // → reads stargazers_count → formats "14237" → "14.2k"
+ // → silently falls back to `fallback` on network/CORS/rate-limit errors
+}
+```
+
+The fallback string `"14.2k"` is rendered server-side and during the initial
+client render, then replaced once the fetch resolves. Fallback is
+hard-coded as the constant `FALLBACK_STARS` at the top of the file.
+
+`NAV_ITEMS` (Why Doris / Use Cases / Docs / Blogs / Community) is also a
+constant at the top of the file — edit there to change the menu structure.
+
+---
+
+## 3. Hero section — the only fully-designed section
+
+### Files
+
+- `sections/HeroSection.tsx` — component + animations
+- `sections/HeroSection.scss` — all hero styles (scoped under `.hero-next`)
+
+### Visual structure
+
+```
+.hero-next
+├── .hero-next__bg-glow (radial gradients, decorative)
+├── .hero-next__bg-grid (dot grid pattern, decorative)
+├── .hero-next__bolt-bg (large ghost lightning SVG, top-right)
+├── .hero-next__content (the actual 2-column grid)
+│ ├── .hero-next__left
+│ │ ├── eyebrow: "APACHE DORIS · v3.0 RELEASED"
+│ │ ├── title: LIGHTNING / FAST⚡ / ANALYTICS AND / SEARCH DATABASE
+│ │ ├── sub: one-paragraph product description
+│ │ ├── ctas: Download (yellow) · Get Started (cream) · Join Slack (ghost)
+│ │ └── meta: 600+ Contributors · 5,000+ Companies · Apache 2.0
+│ └── .hero-next__right
+│ └── .hero-next__card-wrap
+│ ├── .hero-next__sql-wrap
+│ │ ├── <SqlCard> ← animated SQL terminal
+│ │ └── .hero-next__perf-pill ← floating yellow banner
+│ └── <SearchResults> ← animated ranked results
+└── .hero-next__shape (×N) (floating yellow diamond / ring)
+```
+
+### Animations
+
+Two interlocking loops, both written as React hooks/components inside
+`HeroSection.tsx`:
+
+1. **`useTypewriter(SQL_LINES, speed, finalPause)`**
+ Drives the SQL card. Treats every line as an array of typed `[class, text]`
+ tokens, advances one character per tick (`setInterval`), pauses, then loops.
+ The cursor renders on the currently-active line; the "Executing query…"
+ footer flips to "5 docs · scanned 18.4M vectors · 0.043s" when finished.
+
+2. **`SearchResults` cycle**
+ Reveals rows one by one (`setTimeout` staggered), then fills the score bars
+ with a CSS `width` transition, holds for ~6.5s, restarts.
+
+Both can be tuned by editing the constants at the top of their respective
+sections (`SQL_LINES`, `SEARCH_RESULTS`, hard-coded ms values).
+
+### The floating perf banner — non-obvious layout
+
+The yellow *"Structured + Full-text + Vector — all in one SQL."* pill needs to
+sit visually **between** the SQL card and the search results without taking
+layout space. The trick:
+
+- It lives inside `.hero-next__sql-wrap` (a `position: relative` wrapper around
+ `<SqlCard>`).
+- It is `position: absolute; right: 16px; bottom: -18px; z-index: 20`.
+- This makes it hang ~18px below the SQL card, straddling the 12px flex gap
+ and dipping slightly into both panels — without affecting either card's
+ height or the column flow.
+
+If you change card spacing, re-tune `bottom` and `right` here. Don't try to
+make it a flex item — that breaks the overlay.
+
+---
+
+## 4. Design tokens
+
+There is no global design-token file. Tokens are **scoped per component** so
+the new design can't leak into the rest of the site (Docusaurus pages, classic
+homepage, docs, etc.):
+
+- Hero tokens: declared on `.hero-next` in `HeroSection.scss` (`--hn-*`).
+- Navbar tokens: declared on `.navbar-next` in `NavbarNext.scss` (`--nb-*`).
+
+If you need a token in a new section, follow the same pattern — declare it on
+the section's root class, prefix it (`--<component>-…`), and don't promote it
+to `:root` until at least two components share it.
+
+The visual reference for all tokens is `prototype/styles.css` (the original
+HTML prototype). Colors, fonts, and the dark-green palette all come from
+there.
+
+---
+
+## 5. Common change recipes
+
+### "Optimize the new homepage" → starting points
+
+1. **Hero copy / wording** → `sections/HeroSection.tsx`, the JSX inside
+ `<HeroSection>`.
+2. **Hero spacing / sizes** → `sections/HeroSection.scss`. The hero is
+ currently tuned for above-the-fold density; check the `--hn-*` tokens and
+ the `&__title`, `&__content`, `&__meta` blocks.
+3. **SQL animation content** → `SQL_LINES` constant in `HeroSection.tsx`.
+4. **Search results data** → `SEARCH_RESULTS` constant in `HeroSection.tsx`.
+5. **Navbar links** → `NAV_ITEMS` constant in `NavbarNext.tsx`.
+6. **GitHub repo / fallback star count** → `GITHUB_REPO` and `FALLBACK_STARS`
+ constants in `NavbarNext.tsx`.
+7. **A new section** → create `sections/NewSection.tsx` (+ optional `.scss`),
+ add it to `HomeNext.tsx`'s render tree. Keep styles scoped under a unique
+ class.
+
+### Adding a new section (from placeholder to designed)
+
+The placeholders (`StatsSection`, `FeaturesSection`, etc.) currently use
+generic `home-next-*` classes defined in `HomeNext.scss`. When promoting one
+to a real design:
+
+1. Replace the placeholder JSX with the real markup.
+2. Create `sections/<Name>Section.scss` and import it from the `.tsx` file.
+3. Scope all styles under the section's root class (e.g. `.stats-next`).
+4. Drop the placeholder class from `HomeNext.scss` once nothing references it.
+
+### Switching the default version
+
+Currently classic is the default. To make `HomeNext` the default for everyone:
+
+```tsx
+// src/pages/index.tsx — flip the read condition:
+setIsNext(localStorage.getItem(HOME_VERSION_KEY) !== 'classic');
+```
+
+This treats the absence of the key (and any value other than `'classic'`) as
+"new". Users who explicitly set `'classic'` keep the old homepage.
+
+### Removing the toggle (final cleanup)
+
+Once the new homepage is the permanent default:
+
+1. Replace `src/pages/index.tsx` with a re-export of `HomeNext`.
+2. Delete `src/components/home-classic/`.
+3. Delete `src/components/home-version-toggle/`.
+4. Drop the `onSwitchBack` prop from `HomeNext`.
+
+---
+
+## 6. Conventions to keep
+
+- **Class naming**: BEM-style with a per-component prefix (`hero-next__…`,
+ `navbar-next__…`, `hn-sql-card__…`). Prefixes prevent style leakage to / from
+ Docusaurus and the classic homepage.
+- **Heading overrides**: Docusaurus has aggressive global `h1`/`h2` rules.
+ When a hero/section heading needs custom typography, override with
+ `!important` on `font-family`, `font-weight`, `line-height`, `color`, and
+ `margin` (see `.hero-next__title` for the pattern).
+- **SSR safety**: anything reading `window` / `localStorage` / `fetch` must
+ live inside `useEffect`. Initial state should be a stable fallback so the
+ server-rendered HTML matches the first client render.
+- **No new global CSS**: don't add rules to `:root` or to bare element
+ selectors; everything goes under a scoped class.
diff --git a/plan-doc/homepage-redesign.md b/plan-doc/homepage-redesign.md
new file mode 100644
index 00000000000..43035a9db50
--- /dev/null
+++ b/plan-doc/homepage-redesign.md
@@ -0,0 +1,129 @@
+# Homepage Redesign Plan
+
+## Goal
+
+Redesign the Apache Doris official homepage while keeping the existing homepage intact during development.
+The final URL must remain `/` (no redirects, no SEO impact).
+
+---
+
+## Architecture: localStorage Version Toggle
+
+The same `/` route renders either the classic or new homepage based on a localStorage flag.
+
+```
+URL: / (unchanged throughout all phases)
+ ├─ Default (no flag): Classic homepage + floating "Try New Design" button
+ └─ Flag set: New homepage + floating "Back to Classic" button
+
+localStorage key: doris-home-version
+localStorage value: 'v2' → new | anything else → classic
+```
+
+### Why localStorage (not URL params or separate route)
+
+- URL stays `/` → SEO continuity, no redirects needed at launch
+- Persists across page refreshes → consistent UX for testers
+- Zero impact on existing pages/routing
+- Clean removal: delete toggle logic + classic component when done
+
+---
+
+## File Structure
+
+```
+src/
+├── pages/
+│ └── index.tsx ← Modified: version toggle logic added
+│
+└── components/
+ ├── home-next/ ← New homepage (built incrementally)
+ │ ├── HomeNext.tsx ← Root component, assembles all sections
+ │ ├── HomeNext.scss ← Global styles for new homepage
+ │ └── sections/
+ │ ├── HeroSection.tsx ← Banner / headline
+ │ ├── StatsSection.tsx ← Key metrics / achievement banner
+ │ ├── FeaturesSection.tsx ← Core capabilities
+ │ ├── UseCasesSection.tsx ← Unified data warehouse use cases
+ │ ├── CommunitySection.tsx ← Connect with community
+ │ └── GetStartedSection.tsx ← CTA / get started
+ │
+ └── home-version-toggle/
+ └── HomeVersionToggle.tsx ← Floating toggle button (fixed position)
+```
+
+---
+
+## index.tsx Toggle Logic
+
+```tsx
+export default function Home(): JSX.Element {
+ const [isV2, setIsV2] = useState(false);
+
+ useEffect(() => {
+ // SSR-safe: only read localStorage on client
+ setIsV2(localStorage.getItem('doris-home-version') === 'v2');
+ }, []);
+
+ const handleToggle = (v2: boolean) => {
+ if (v2) {
+ localStorage.setItem('doris-home-version', 'v2');
+ } else {
+ localStorage.removeItem('doris-home-version');
+ }
+ setIsV2(v2);
+ };
+
+ if (isV2) {
+ return <HomeV2 onSwitchBack={() => handleToggle(false)} />;
+ }
+ return <HomeClassic onTryNew={() => handleToggle(true)} />;
+}
+```
+
+- `HomeClassic` = the existing homepage code, extracted verbatim into its own component
+- `HomeV2` = new homepage, built section by section
+- Both receive a callback prop to trigger the switch
+
+---
+
+## Phased Development
+
+### Phase 1 — Skeleton (current)
+- Extract existing homepage into `HomeClassic`
+- Create `HomeV2` with placeholder sections (correct layout, no real content yet)
+- Add `HomeVersionToggle` floating button
+- Wire up `index.tsx` toggle logic
+
+### Phase 2 — Section-by-section redesign
+- Replace each placeholder in `HomeV2/sections/` with real design
+- Work one section at a time; test via "Try New Design" button
+
+### Phase 3 — Launch
+Make `HomeV2` the default by flipping one line in `index.tsx`:
+
+```tsx
+// Change from:
+setIsV2(localStorage.getItem('doris-home-version') === 'v2');
+
+// To:
+setIsV2(localStorage.getItem('doris-home-version') !== 'classic');
+```
+
+### Phase 4 — Cleanup (after soak period)
+1. Replace `index.tsx` export entirely:
+ ```tsx
+ export { default } from '../components/home-v2/HomeV2';
+ ```
+2. Delete `src/components/home-classic/`
+3. Delete `src/components/home-version-toggle/`
+4. Remove toggle props from `HomeV2`
+
+---
+
+## Toggle Button Design
+
+- **Position**: fixed, bottom-right corner (`fixed bottom-6 right-6`)
+- **Classic view**: green pill button — "✨ Try New Design"
+- **New view**: subtle outline button — "← Back to Classic"
+- Not rendered during SSR (avoids hydration mismatch)
diff --git a/sidebars-next.ts b/sidebars-next.ts
index bc645bcbe38..0504fd1d950 100644
--- a/sidebars-next.ts
+++ b/sidebars-next.ts
@@ -11,15 +11,6 @@ const sidebars: SidebarsConfig = {
'getting-started/what-is-apache-doris',
'getting-started/quick-start',
'getting-started/before-you-start-the-poc',
- {
- type: 'category',
- label: 'Tech Alternatives',
- items: [
- 'getting-started/alternatives/alternative-to-clickhouse',
- 'getting-started/alternatives/alternative-to-elasticsearch',
- 'getting-started/alternatives/alternative-to-trino',
- ],
- },
],
},
{
diff --git a/src/components/blogs-next/blogs-next.scss b/src/components/blogs-next/blogs-next.scss
new file mode 100644
index 00000000000..46158d57846
--- /dev/null
+++ b/src/components/blogs-next/blogs-next.scss
@@ -0,0 +1,27 @@
+@use '../shared/typography' as type;
+
+.blogs-next {
+ padding-bottom: 48px;
+ scroll-margin-top: 80px;
+
+ .page-header {
+ margin-bottom: 10px;
+ padding-top: 40px;
+ padding-bottom: 12px;
+
+ .title {
+ @include type.section-title;
+ text-align: left;
+ margin: 0;
+ }
+
+ .subtitle {
+ text-align: left;
+ }
+ }
+
+ button:focus-visible {
+ outline: 2px solid var(--ifm-color-primary);
+ outline-offset: 3px;
+ }
+}
diff --git a/src/components/blogs-next/index.tsx b/src/components/blogs-next/index.tsx
new file mode 100644
index 00000000000..ec9c86b06f8
--- /dev/null
+++ b/src/components/blogs-next/index.tsx
@@ -0,0 +1,263 @@
+import React, { JSX, useEffect, useState } from 'react';
+import { useHistory, useLocation } from '@docusaurus/router';
+import { LayoutNext } from '@site/src/components/home-next/LayoutNext';
+import PageHeader from '@site/src/components/PageHeader';
+import HeadBlogs from '@site/src/components/blogs/components/head-blogs';
+import BlogListItem from '@site/src/theme/BlogListItem';
+import BlogListFooter from '@site/src/theme/BlogFooter';
+import blogIndexMetadata from '../../../.docusaurus/docusaurus-plugin-content-blog/default/p/blog-3ce.json';
+import './blogs-next.scss';
+import '@site/src/components/home-next/HomeNext.scss';
+
+declare const require: {
+ context: (
+ directory: string,
+ useSubdirectories: boolean,
+ regExp: RegExp,
+ ) => {
+ keys: () => string[];
+ <T = any>(id: string): T;
+ };
+};
+
+type BlogTag = {
+ label: string;
+ permalink: string;
+ inline?: boolean;
+};
+
+type BlogFrontMatter = {
+ title: string;
+ summary?: string;
+ description?: string;
+ date: string;
+ author?: string;
+ externalLink?: string;
+ tags?: string[];
+ image?: string;
+ picked?: string;
+ order?: string;
+};
+
+type RawBlogPost = {
+ permalink: string;
+ title: string;
+ description: string;
+ date: string;
+ tags: BlogTag[];
+ hasTruncateMarker: boolean;
+ authors: Array<{ name?: string; key?: string | null; page?: string | null }>;
+ frontMatter: BlogFrontMatter & {
+ picked?: string;
+ order?: string;
+ };
+ unlisted: boolean;
+};
+
+type BlogCard = {
+ frontMatter: RawBlogPost['frontMatter'];
+ metadata: {
+ permalink: string;
+ date: string;
+ title: string;
+ tags: BlogTag[];
+ authors: RawBlogPost['authors'];
+ truncated: boolean;
+ };
+ assets: {
+ image?: string;
+ };
+ content: React.ComponentType;
+};
+
+const ALL_TEXT = 'All';
+const HIDDEN_BLOG_TABS = new Set(['Release Notes', 'Top News']);
+const FIXED_BLOG_TABS = ['Glossary'];
+const PAGE_SIZE = 9;
+
+function loadBlogCards(): BlogCard[] {
+ const context = require.context(
+ '../../../.docusaurus/docusaurus-plugin-content-blog/default',
+ false,
+ /^\.\/site-blog-.*\.json$/,
+ );
+
+ return context
+ .keys()
+ .map((key: string) => context(key) as RawBlogPost)
+ .filter((post: RawBlogPost) => !post.unlisted)
+ .sort((a: RawBlogPost, b: RawBlogPost) => new Date(b.date).getTime() - new Date(a.date).getTime())
+ .map((post: RawBlogPost) => ({
+ frontMatter: post.frontMatter,
+ metadata: {
+ permalink: post.permalink,
+ date: post.date,
+ title: post.title,
+ tags: post.tags,
+ authors: post.authors,
+ truncated: post.hasTruncateMarker,
+ },
+ assets: {
+ image: post.frontMatter.image,
+ },
+ content: (() => null) as React.ComponentType,
+ }));
+}
+
+const BLOG_CARDS = loadBlogCards();
+
+function getCategories(posts: BlogCard[]) {
+ const allCategory = { label: ALL_TEXT, values: [] as BlogCard[] };
+ const categories = [allCategory];
+
+ posts.forEach(post => {
+ const tags = post.frontMatter.tags || [];
+
+ if (allCategory.values.every(val => val.metadata.permalink !== post.metadata.permalink)) {
+ allCategory.values.push(post);
+ }
+
+ tags.forEach(tagLabel => {
+ if (!tagLabel || HIDDEN_BLOG_TABS.has(tagLabel)) {
+ return;
+ }
+
+ const index = categories.findIndex(category => category.label === tagLabel);
+ if (index > -1) {
+ categories[index].values.push(post);
+ return;
+ }
+
+ categories.push({
+ label: tagLabel,
+ values: [post],
+ });
+ });
+ });
+
+ FIXED_BLOG_TABS.forEach(tabLabel => {
+ if (!categories.some(category => category.label === tabLabel)) {
+ categories.push({ label: tabLabel, values: [] });
+ }
+ });
+
+ const glossaryIndex = categories.findIndex(category => category.label === 'Glossary');
+ if (glossaryIndex > -1 && glossaryIndex !== categories.length - 1) {
+ const [glossaryCategory] = categories.splice(glossaryIndex, 1);
+ categories.push(glossaryCategory);
+ }
+
+ return categories;
+}
+
+function parseQuery(search: string) {
+ const params = new URLSearchParams(search);
+ const page = Number(params.get('currentPage') || '1');
+ const category = params.get('currentCategory') || ALL_TEXT;
+
+ return {
+ page: Number.isFinite(page) && page > 0 ? page : 1,
+ category,
+ };
+}
+
+export default function BlogsNext(): JSX.Element {
+ const location = useLocation();
+ const history = useHistory();
+ const blogCategories = getCategories(BLOG_CARDS);
+ const allCards = blogCategories.find(item => item.label === ALL_TEXT)?.values ?? [];
+
+ const initialQuery = parseQuery(location.search);
+ const [active, setActive] = useState(() => initialQuery.category || ALL_TEXT);
+ const [currentPage, setCurrentPage] = useState(initialQuery.page);
+
+ useEffect(() => {
+ if (initialQuery.category && initialQuery.category !== ALL_TEXT) {
+ return;
+ }
+
+ const storedTag = sessionStorage.getItem('tag');
+ if (storedTag) {
+ setActive(storedTag);
+ }
+ }, []);
+
+ useEffect(() => {
+ const query = parseQuery(location.search);
+ setActive(query.category || ALL_TEXT);
+ setCurrentPage(query.page);
+ }, [location.search]);
+
+ useEffect(() => {
+ const nextSearch = `?currentPage=${currentPage}¤tCategory=${encodeURIComponent(active)}#blog`;
+ if (location.search !== nextSearch.replace('#blog', '')) {
+ history.push(`${location.pathname}${nextSearch}`, location.state);
+ }
+
+ sessionStorage.setItem('tag', active);
+ }, [active, currentPage, history, location.pathname, location.search, location.state]);
+
+ const currentCategory = blogCategories.find(item => item.label === active) ?? blogCategories[0];
+ const currentCards = currentCategory.values.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+ const featuredTop = allCards.find(card => Number(card.frontMatter.order) === 1) ?? allCards[0];
+
+ return (
+ <LayoutNext title={blogIndexMetadata.metadata.blogTitle} description={blogIndexMetadata.metadata.blogDescription}>
+ <section id="blog" className="blogs-next">
+ <div className="home-next-container">
+ <PageHeader title="Blog" className="bg-white" />
+
+ <div className="flex flex-col lg:max-w-7xl">
+ {featuredTop && (
+ <HeadBlogs
+ blogs={allCards.map(card => ({
+ frontMatter: card.frontMatter,
+ assets: card.assets,
+ metadata: card.metadata,
+ truncated: card.metadata.truncated,
+ content: card.content,
+ }))}
+ />
+ )}
+
+ <ul className="scrollbar-none w-[100%] mt-6 custom-scrollbar m-auto flex gap-3 overflow-auto text-[#4C576C] lg:mt-[5.5rem] lg:justify-center lg:gap-6">
+ {blogCategories.map((item, index) => (
+ <li className="py-px" key={index}>
+ <button
+ type="button"
+ aria-pressed={active === item.label}
+ className={`block cursor-pointer whitespace-nowrap rounded-[2.5rem] px-4 py-2 text-sm shadow-[0px_1px_4px_0px_rgba(0,89,68,0.10)] hover:bg-primary hover:text-white lg:px-6 lg:py-3 lg:text-base ${
+ active === item.label ? 'bg-primary text-white' : ''
+ }`}
+ onClick={() => {
+ setActive(item.label);
+ setCurrentPage(1);
+ }}
+ >
+ {item.label}
+ </button>
+ </li>
+ ))}
+ </ul>
+
+ <ul className="mt-6 grid gap-6 lg:mt-10 lg:grid-cols-3 m-auto">
+ {currentCards.map((card, i) => (
+ <BlogListItem
+ key={card.metadata.permalink + i}
+ frontMatter={card.frontMatter}
+ assets={card.assets}
+ metadata={card.metadata}
+ truncated={card.metadata.truncated}
+ >
+ <card.content />
+ </BlogListItem>
+ ))}
+ </ul>
+
+ <BlogListFooter total={currentCategory.values.length} currentPage={currentPage} currentCategory={active} />
+ </div>
+ </div>
+ </section>
+ </LayoutNext>
+ );
+}
diff --git a/src/components/download-form-next/DownloadFormNext.tsx b/src/components/download-form-next/DownloadFormNext.tsx
new file mode 100644
index 00000000000..afcef53d27e
--- /dev/null
+++ b/src/components/download-form-next/DownloadFormNext.tsx
@@ -0,0 +1,419 @@
+import Translate, { translate } from '@docusaurus/Translate';
+import React, { useEffect, useState } from 'react';
+import PageHeader from '@site/src/components/PageHeader';
+import DownloadFormAllRelease from '@site/src/components/download-form/download-form-all-release';
+import DownloadFormTools from '@site/src/components/download-form/download-form-tools';
+import {
+ CPUEnum,
+ DORIS_VERSIONS,
+ DownloadTypeEnum,
+ ORIGIN,
+ RUN_ANYWHERE,
+ VersionEnum,
+} from '@site/src/constant/download.data';
+import Link from '@docusaurus/Link';
+import '@site/src/pages/download/index.scss';
+import LinkWithArrow from '@site/src/components/link-arrow';
+import PageColumn from '@site/src/components/PageColumn';
+import clsx from 'clsx';
+import { ALL_VERSIONS, TOOL_VERSIONS } from '@site/src/constant/download.data';
+import * as semver from 'semver';
+import { CheckedIcon } from '@site/src/components/Icons/checked-icon';
+import { LayoutNext } from '@site/src/components/home-next/LayoutNext';
+
+const BINARY_VERSION = [
+ { label: `${VersionEnum.Latest} ( Latest )`, value: VersionEnum.Latest },
+ { label: `${VersionEnum.Prev} ( Stable )`, value: VersionEnum.Prev },
+];
+
+export default function DownloadFormNext(): JSX.Element {
+ const [version, setVersion] = useState<string>(VersionEnum.Latest);
+ const [cpus, setCpus] = useState<any[]>([]);
+ const [cpu, setCPU] = useState<string>(CPUEnum.X64);
+ const [downloadInfo, setDownloadInfo] = useState<any>({});
+ const [releaseFlag, setReleaseFlag] = useState<boolean>(true);
+ const [downloadType, setDownloadType] = useState(DownloadTypeEnum.Binary);
+ const [releaseNote, setReleaseNote] = useState('/docs/dev/releasenotes/v4.0/release-4.0.0');
+
+ const changeVersion = (val: string) => {
+ setVersion(val);
+ };
+
+ const changeCPU = (val: string) => {
+ setCPU(val);
+ const nextDownloadInfo = cpus.find(item => item.value === val);
+ if (!nextDownloadInfo || typeof nextDownloadInfo.gz !== 'string') {
+ setDownloadInfo({});
+ return;
+ }
+ const filename = nextDownloadInfo.gz.split(ORIGIN)[1];
+ nextDownloadInfo.filename = filename;
+ setDownloadInfo(nextDownloadInfo);
+ };
+
+ const getIssueCode = (code: string) => {
+ switch (code) {
+ case '1.2.1':
+ return 15508;
+ case '1.2.2':
+ return 16446;
+ case '1.2.3':
+ return 17748;
+ case '1.2.4':
+ return 18762;
+ case '1.2.5':
+ return 20827;
+ case '1.2.6':
+ return 21805;
+ case '1.2.7':
+ return 23711;
+ case '1.2.8':
+ return 31673;
+ default:
+ return null;
+ }
+ };
+
+ function toDocsRelease(version: string) {
+ const SUPPORTED_VERSION = '>=1.1.0';
+ const versionNumber = version.match(/[0-9].[0-9].[0-9]*/)?.[0] || '0.0.0';
+ return semver.satisfies(versionNumber, SUPPORTED_VERSION);
+ }
+
+ function onValuesChange(values: any) {
+ setReleaseFlag(values.version[0] === '1.1' ? false : true);
+ if (!toDocsRelease(values.version[1])) {
+ setReleaseNote('https://github.com/apache/doris/releases');
+ } else if (values.version[0] === '1.2') {
+ setReleaseNote(`https://github.com/apache/doris/issues/${getIssueCode(values.version[1])}`);
+ } else if (['3.0', '2.0', '3.1', '2.1'].includes(values.version[0])) {
+ setReleaseNote(
+ `/docs/${values.version[0] === '3.0' || values.version[0] === '3.1' ? '3.x' : values.version[0]}/releasenotes/v${
+ values.version[0]
+ }/release-${values.version[1]}`,
+ );
+ } else if (values.version[0] === '4.0') {
+ setReleaseNote(`/docs/dev/releasenotes/v${values.version[0]}/release-${values.version[1]}`);
+ } else {
+ setReleaseNote(`/docs/releasenotes/v${values.version[0]}/release-${values.version[1]}`);
+ }
+ }
+
+ useEffect(() => {
+ const currentVersion = DORIS_VERSIONS.find(doris_version => doris_version.value === version);
+ if (!currentVersion || !Array.isArray(currentVersion.children)) {
+ setCpus([]);
+ setCPU(CPUEnum.X64);
+ setDownloadInfo({});
+ return;
+ }
+ setCpus(currentVersion.children);
+ setCPU(CPUEnum.X64);
+ const nextDownloadInfo: any = currentVersion.children.find(item => item.value === CPUEnum.X64);
+ if (!nextDownloadInfo || typeof nextDownloadInfo.gz !== 'string') {
+ setDownloadInfo({});
+ return;
+ }
+ const filename = nextDownloadInfo.gz.split(ORIGIN)[1];
+ nextDownloadInfo.filename = filename;
+ setDownloadInfo(nextDownloadInfo);
+ }, [version]);
+
+ return (
+ <LayoutNext
+ title={translate({
+ id: 'download.title',
+ message: 'Apache Doris - Download | Easily deploy Doris anywhere',
+ })}
+ description={translate({
+ id: 'homepage.banner.subTitle',
+ message:
+ 'Download and explore precompiled binaries of different verisons. Apache Doris connects any device, at any scale, anywhere.',
+ })}
+ >
+ <div className="download">
+ <PageHeader className="lg:pt-[5rem] g-white" title="Quick Download & Easy Deployment" />
+ <section className="quick-download">
+ <PageColumn align="center">
+ <div className="download-box">
+ <div className="download-type">
+ <label>
+ <Translate id="download.version" description="Binary Version">
+ Version
+ </Translate>
+ </label>
+ <div className="tabs-radio">
+ {BINARY_VERSION.map(item => (
+ <div
+ className={clsx('radio', {
+ checked: version === item.value,
+ })}
+ key={item.value}
+ onClick={() => changeVersion(item.value)}
+ >
+ {item.label}
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className="download-type">
+ <label>
+ <Translate id="download.cpu.model" description="Architecture">
+ Architecture
+ </Translate>
+ </label>
+ <div className="tabs-radio">
+ {cpus.map(item => (
+ <div
+ className={clsx('radio', {
+ checked: cpu === item.value,
+ })}
+ key={item.value}
+ onClick={() => changeCPU(item.value)}
+ >
+ {item.label}
+ </div>
+ ))}
+ </div>
+ </div>
+ <div className="download-type">
+ <label>
+ <Translate id="download.download.link" description="Download">
+ Tarball
+ </Translate>
+ </label>
+ <div className="tabs-radio">
+ <div
+ onClick={() => {
+ setDownloadType(DownloadTypeEnum.Binary);
+ }}
+ className={clsx('radio', {
+ checked: downloadType === DownloadTypeEnum.Binary,
+ })}
+ >
+ <span>Binary</span>
+ </div>
+
+ <div
+ onClick={() => {
+ setDownloadType(DownloadTypeEnum.Source);
+ }}
+ className={clsx('radio', {
+ checked: downloadType === DownloadTypeEnum.Source,
+ })}
+ >
+ <span>Source</span>
+ </div>
+ </div>
+ </div>
+
+ <div className="download-type way">
+ <label></label>
+ <div className={clsx('download-way all-in-one show')}>
+ {downloadInfo && (
+ <div className="tabs-radio">
+ <div className="radio">
+ {downloadType === DownloadTypeEnum.Binary ? (
+ <div className="inner" key={downloadInfo.filename}>
+ <Link to={downloadInfo.gz}>{downloadInfo.filename}</Link>
+ <span> ( </span>
+ <Link to={downloadInfo.asc}>ASC</Link>,{' '}
+ <Link to={downloadInfo.sha512}>SHA-512</Link>
+ <span> )</span>
+ </div>
+ ) : (
+ <div className="inner" key={downloadInfo.filename}>
+ <Link
+ to={`${downloadInfo.source}apache-doris-${downloadInfo.version}-src.tar.gz`}
+ >{`apache-doris-${downloadInfo.version}-src.tar.gz`}</Link>
+ <span> ( </span>
+ <Link
+ to={`${downloadInfo.source}apache-doris-${downloadInfo.version}-src.tar.gz.asc`}
+ >
+ ASC
+ </Link>
+ ,{' '}
+ <Link
+ to={`${downloadInfo.source}apache-doris-${downloadInfo.version}-src.tar.gz.sha512`}
+ >
+ SHA-512
+ </Link>
+ <span> )</span>
+ </div>
+ )}
+ </div>
+ </div>
+ )}
+ </div>
+ </div>
+ <div className="all-download-note" style={{ textAlign: 'center', marginTop: '24px' }}>
+ Note: For Apache Doris version specifics, please refer to the{' '}
+ <Link
+ to="https://doris.apache.org/community/release-versioning"
+ style={{
+ color: 'var(--ifm-color-primary)',
+ cursor: 'pointer',
+ textDecoration: 'underline',
+ }}
+ >
+ release versioning.
+ </Link>
+ </div>
+ </div>
+ </PageColumn>
+ </section>
+ <PageColumn
+ title={
+ <span
+ className="font-normal"
+ style={{ display: 'block', lineHeight: '64px', marginTop: 40, fontSize: 40 }}
+ >
+ Doris All Releases
+ </span>
+ }
+ >
+ <div className="all-download">
+ <div className="all-download-intro">
+ <div className="all-download-intro-text">
+ <div>
+ Doris is released as source code tarballs with corresponding binary tarballs for
+ convenience. The downloads should be verified for tampering using ASC or SHA-512.
+ </div>
+ <div className="mt-[32px]">
+ For more information on the latest release, please refer to the Docs.
+ </div>
+ <div className="mt-[32px]">
+ Kindly note that older releases (v1.2, v1.1, v0.x) are provided for archival
+ purposes only, and are no longer supported.
+ </div>
+ </div>
+ {releaseFlag && (
+ <div>
+ <LinkWithArrow to={releaseNote} text="Release note" />
+ </div>
+ )}
+ <div className="all-download-note">
+ Note: For detailed upgrade precautions, please refer to the{' '}
+ <Link
+ to="/docs/install/deploy-manually/storage-compute-coupled-deploy-manually"
+ style={{
+ color: 'var(--ifm-color-primary)',
+ cursor: 'pointer',
+ }}
+ >
+ deployment
+ </Link>{' '}
+ manual and cluster{' '}
+ <Link
+ style={{
+ color: 'var(--ifm-color-primary)',
+ cursor: 'pointer',
+ }}
+ to="/docs/admin-manual/cluster-management/upgrade"
+ >
+ upgrade
+ </Link>{' '}
+ manual.
+ </div>
+ </div>
+ <div className="all-download-card">
+ <DownloadFormAllRelease
+ versions={ALL_VERSIONS}
+ onValuesChange={(values: any) => onValuesChange(values)}
+ />
+ </div>
+ </div>
+ </PageColumn>
+ <a id="doris-ecosystem" className="scroll-mt-20"></a>
+ <PageColumn
+ title={
+ <span
+ className="font-normal"
+ style={{ display: 'block', lineHeight: '64px', marginTop: 40, fontSize: 40 }}
+ >
+ Doris Ecosystem
+ </span>
+ }
+ >
+ <div className="all-download">
+ <div className="all-download-intro">
+ <div className="all-download-intro-text">
+ <div>Streamline integration and data loading with Doris tools</div>
+ </div>
+ <div className="flex">
+ <ul>
+ <li className="mt-2 flex items-center space-x-2">
+ <CheckedIcon />
+ <div className="text-[#4C576C] text-base">Kafka Doris Connector</div>
+ </li>
+ <li className="mt-2 flex items-center space-x-2">
+ <CheckedIcon />
+ <div className="text-[#4C576C] text-base">Flink Doris Connector</div>
+ </li>
+ <li className="mt-2 flex items-center space-x-2">
+ <CheckedIcon />
+ <div className="text-[#4C576C] text-base">Spark Doris Connector</div>
+ </li>
+ <li className="mt-2 flex items-center space-x-2">
+ <CheckedIcon />
+ <div className="text-[#4C576C] text-base">Doris Streamloader</div>
+ </li>
+ </ul>
+ </div>
+ <div>
+ <LinkWithArrow to="/docs/ecosystem/datax" text="More Tools" />
+ </div>
+ <div className="all-download-note">
+ Note: For detailed upgrade precautions, please refer to the{' '}
+ <Link
+ to="/docs/install/deploy-manually/storage-compute-coupled-deploy-manually"
+ style={{
+ color: 'var(--ifm-color-primary)',
+ cursor: 'pointer',
+ }}
+ >
+ deployment
+ </Link>{' '}
+ manual and cluster{' '}
+ <Link
+ style={{
+ color: 'var(--ifm-color-primary)',
+ cursor: 'pointer',
+ }}
+ to="/docs/admin-manual/cluster-management/upgrade"
+ >
+ upgrade
+ </Link>{' '}
+ manual.
+ </div>
+ </div>
+ <div className="all-download-card">
+ <DownloadFormTools data={TOOL_VERSIONS} />
+ </div>
+ </div>
+ </PageColumn>
+ <a id="runAnywhere" className="scroll-mt-20"></a>
+ <div className="run-anywhere bg-[#F7FAFC] pt-[5.5rem] pb-[7.5rem] mt-[80px]">
+ <div className="container mx-auto">
+ <h3 className="text-center text-[#1D1D1D] text-[2.5rem] font-medium">Run anywhere</h3>
+ <ul className="mt-10 grid gap-x-6 gap-y-3 lg:grid-cols-3 lg:gap-y-0">
+ {RUN_ANYWHERE.map(item => (
+ <div
+ onClick={() => window.open(item.link, '_blank', 'noopener,noreferrer')}
+ key={item.title}
+ className="run-anywhere-card relative bg-white flex cursor-pointer flex-col items-center justify-center overflow-hidden rounded-lg border-b-4 border-b-primary py-[2rem] px-4 lg:px-[1.5rem] shadow-[inset_0_0_0_1px_#11A679] hover:no-underline"
+ >
+ <div className="text-2xl text-[#1D1D1D]">{item.title}</div>
+ <div className="mt-4 text-base text-center text-[#4C576C]">{item.description}</div>
+ <div className="flex items-center mt-4 text-primary">
+ <LinkWithArrow to={item.link} text="Learn more" />
+ </div>
+ </div>
+ ))}
+ </ul>
+ </div>
+ </div>
+ </div>
+ </LayoutNext>
+ );
+}
diff --git a/src/pages/index.tsx b/src/components/home-classic/HomeClassic.tsx
similarity index 93%
copy from src/pages/index.tsx
copy to src/components/home-classic/HomeClassic.tsx
index b6dbc825ab3..f2fa878523b 100644
--- a/src/pages/index.tsx
+++ b/src/components/home-classic/HomeClassic.tsx
@@ -1,26 +1,24 @@
import clsx from 'clsx';
-import Layout from '../theme/Layout';
+import Layout from '@site/src/theme/Layout';
import Link from '@docusaurus/Link';
-import PageBanner, { ButtonProps } from '../components/PageBanner';
-import PageColumn from '../components/PageColumn';
+import PageBanner, { ButtonProps } from '@site/src/components/PageBanner';
+import PageColumn from '@site/src/components/PageColumn';
import React, { JSX } from 'react';
import Translate, { translate } from '@docusaurus/Translate';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import usePhone from '../hooks/use-phone';
-import './index.scss';
+import usePhone from '@site/src/hooks/use-phone';
+import '@site/src/pages/index.scss';
import LinkWithArrow from '@site/src/components/link-arrow';
-import { AchievementBanner } from '../components/achievement-banner/achievement-banner';
-import { CoreCapabilitiesData } from '../constant/core-capabilities.data';
-import { CoreCapabilitiesCard } from '../components/core-capabilities-card/core-capabilities-card';
+import { AchievementBanner } from '@site/src/components/achievement-banner/achievement-banner';
+import { CoreCapabilitiesData } from '@site/src/constant/core-capabilities.data';
+import { CoreCapabilitiesCard } from '@site/src/components/core-capabilities-card/core-capabilities-card';
import GetStarted from '@site/src/components/get-started/get-started';
-import HomeEvenStarIcon from '@site/static/images/home-event-star.svg';
-import { HomeEventStarIcon } from '../components/Icons/home-event-star-icon';
-import { WarningIcon } from '../components/Icons/warning-icon';
-import { UserCaseCarousel } from '../components/user-case-carousel';
-import { NewsLetterSwiper } from '../components/newsletter-swiper';
+import { HomeEventStarIcon } from '@site/src/components/Icons/home-event-star-icon';
+import { UserCaseCarousel } from '@site/src/components/user-case-carousel';
+import { NewsLetterSwiper } from '@site/src/components/newsletter-swiper';
import { DEFAULT_VERSION } from '@site/src/constant/version';
-export default function Home(): JSX.Element {
+export default function HomeClassic(): JSX.Element {
const { siteConfig } = useDocusaurusContext();
const { isPhone } = usePhone();
@@ -100,25 +98,6 @@ export default function Home(): JSX.Element {
community is here to stay.
</p>
</div>
- // <p
- // style={{
- // background:
- // 'linear-gradient(0deg, var(--Doris-Green-Doris-green-50, #F0FFF7) 0%, var(--Doris-Green-Doris-green-50, #F0FFF7) 100%), #FFF',
- // textDecoration: 'none',
- // }}
- // className="homepage-warning-banner lg:rounded-full rounded-[1.625rem] mb-8 group lg:w-[45rem] mx-auto py-4 px-[2.25rem]"
- // >
- // <span className="homepage-warning-banner__content">
- // <WarningIcon className="homepage-warning-banner__icon" />
- // <span>
- // Slack community removed due to a Slack-side issue. Awaiting their resolution. Pls reach us on{' '}
- // <Link className="homepage-warning-banner__link" to="https://discord.com/invite/tGTh2SQV">
- // Discord
- // </Link>{' '}
- // in the meantime.
- // </span>
- // </span>
- // </p>
),
bannerImg: require('@site/static/images/home-banner.png').default,
buttons,
@@ -425,6 +404,7 @@ export default function Home(): JSX.Element {
href: 'https://www.youtube.com/hashtag/apachedoris',
},
];
+
return (
<Layout
title={translate({
@@ -449,7 +429,6 @@ export default function Home(): JSX.Element {
</section>
<section className="apache-doris">
<PageColumn
- // wrapperStyle={{ paddingBottom: '7.5rem' }}
className="lg:pb-[7.5rem] py-16"
title={
<Translate id="homepage.what" description="What is Apache Doris">
@@ -503,8 +482,7 @@ export default function Home(): JSX.Element {
<p>
<Translate
id="homepage.unified"
- description="Unified data warehouse
- for various analytics use cases"
+ description="Unified data warehouse for various analytics use cases"
>
Unified data warehouse
</Translate>
diff --git a/src/components/home-next/HomeNext.scss b/src/components/home-next/HomeNext.scss
new file mode 100644
index 00000000000..1627a0451a7
--- /dev/null
+++ b/src/components/home-next/HomeNext.scss
@@ -0,0 +1,69 @@
+// Home Next — global layout
+
+.home-next-container {
+ width: min(1180px, calc(100vw - 112px));
+ margin: 0 auto;
+ box-sizing: border-box;
+}
+
+@media (max-width: 820px) {
+ .home-next-container {
+ width: calc(100vw - 48px);
+ }
+}
+
+@media (max-width: 640px) {
+ .home-next-container {
+ width: calc(100vw - 40px);
+ }
+}
+
+.home-next-main {
+ min-width: 0;
+ overflow-x: clip;
+}
+
+.home-next-preview-banner {
+ position: sticky;
+ top: 0;
+ z-index: 110;
+ width: 100%;
+ background: #FFD23F;
+ color: #0F1A14;
+ text-align: center;
+ padding: 8px 16px;
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ font-size: 13px;
+ font-weight: 500;
+ line-height: 1.4;
+ letter-spacing: 0.01em;
+ border-bottom: 1px solid rgba(15, 26, 20, 0.12);
+
+ &__text {
+ display: inline-block;
+ max-width: 1180px;
+ }
+
+ &__link {
+ background: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+ font: inherit;
+ color: inherit;
+ text-decoration: underline;
+ text-underline-offset: 2px;
+ cursor: pointer;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .home-next-preview-banner {
+ font-size: 12px;
+ padding: 8px 12px;
+ }
+}
diff --git a/src/components/home-next/HomeNext.tsx b/src/components/home-next/HomeNext.tsx
new file mode 100644
index 00000000000..50ce993f63a
--- /dev/null
+++ b/src/components/home-next/HomeNext.tsx
@@ -0,0 +1,30 @@
+import React, { JSX } from 'react';
+import { LayoutNext } from './LayoutNext';
+import { HeroSection } from './sections/HeroSection';
+import { FeaturesSection } from './sections/FeaturesSection';
+import { UseCasesSection } from './sections/UseCasesSection';
+import { EcosystemSection } from './sections/EcosystemSection';
+import { DeploymentSection } from './sections/DeploymentSection';
+import { CommunitySection } from './sections/CommunitySection';
+import './HomeNext.scss';
+
+interface HomeNextProps {
+ onSwitchBack: () => void;
+}
+
+export default function HomeNext({ onSwitchBack }: HomeNextProps): JSX.Element {
+ return (
+ <LayoutNext
+ title="Apache Doris: Open Source, Real-Time Analytics and Search Database for the AI Era"
+ description="Apache Doris is an open-source, real-time analytics database built on MPP architecture. Run OLAP queries, lakehouse analytics, and hybrid search at petabyte scale on a single engine."
+ onSwitchBack={onSwitchBack}
+ >
+ <HeroSection />
+ <FeaturesSection />
+ <UseCasesSection />
+ <EcosystemSection />
+ <DeploymentSection />
+ <CommunitySection />
+ </LayoutNext>
+ );
+}
diff --git a/src/components/home-next/LayoutNext.tsx b/src/components/home-next/LayoutNext.tsx
new file mode 100644
index 00000000000..158b53400b6
--- /dev/null
+++ b/src/components/home-next/LayoutNext.tsx
@@ -0,0 +1,73 @@
+import React, { JSX, useEffect, useRef } from 'react';
+import { PageMetadata } from '@docusaurus/theme-common';
+import LayoutProvider from '@theme/Layout/Provider';
+import Footer from '@theme/Footer';
+import AnnouncementBar from '@theme/AnnouncementBar';
+import { NavbarNext } from './NavbarNext';
+
+interface LayoutNextProps {
+ title?: string;
+ description?: string;
+ keywords?: string;
+ onSwitchBack?: () => void;
+ children: React.ReactNode;
+}
+
+export function LayoutNext({ title, description, onSwitchBack, children }: LayoutNextProps): JSX.Element {
+ const bannerRef = useRef<HTMLDivElement>(null);
+
+ useEffect(() => {
+ const el = bannerRef.current;
+ if (!el) return;
+ const update = () => {
+ document.documentElement.style.setProperty(
+ '--home-next-banner-height',
+ `${el.offsetHeight}px`,
+ );
+ };
+ update();
+ const ro = new ResizeObserver(update);
+ ro.observe(el);
+ return () => {
+ ro.disconnect();
+ document.documentElement.style.removeProperty('--home-next-banner-height');
+ };
+ }, []);
+
+ return (
+ <LayoutProvider>
+ <PageMetadata title={title} description={description} />
+ <AnnouncementBar />
+ <div ref={bannerRef} className="home-next-preview-banner" role="status">
+ <span className="home-next-preview-banner__text">
+ You're viewing the preview version of this page. For the full experience, please return to the
+ {' '}
+ <button
+ type="button"
+ className="home-next-preview-banner__link"
+ onClick={() => {
+ if (onSwitchBack) {
+ onSwitchBack();
+ return;
+ }
+ if (typeof window !== 'undefined') {
+ try {
+ window.localStorage.removeItem('doris-home-version');
+ } catch {
+ // localStorage may be unavailable (private mode / disabled cookies)
+ }
+ window.location.assign('/');
+ }
+ }}
+ >
+ classic homepage
+ </button>
+ .
+ </span>
+ </div>
+ <NavbarNext />
+ <main className="home-next-main">{children}</main>
+ <Footer />
+ </LayoutProvider>
+ );
+}
diff --git a/src/components/home-next/NavbarNext.scss b/src/components/home-next/NavbarNext.scss
new file mode 100644
index 00000000000..2b5d72e1a73
--- /dev/null
+++ b/src/components/home-next/NavbarNext.scss
@@ -0,0 +1,483 @@
+// NavbarNext — dark green theme, matches the hero section background.
+
+@use '../shared/typography' as type;
+
+.navbar-next {
+ --nb-green-dark: #06805F;
+ --nb-green-deep: #054C39;
+ --nb-green-glow: #2DDFA8;
+ --nb-cream-light: #FAF6EE;
+ --nb-yellow: #FFD23F;
+ --nb-ink: #0F1A14;
+ --nb-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+ position: sticky;
+ top: var(--home-next-banner-height, 0px);
+ z-index: 100;
+ width: 100%;
+ background: var(--nb-green-dark);
+ border-bottom: 1px solid rgba(245, 239, 228, 0.08);
+
+ &__inner {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 56px;
+ height: 64px;
+ display: flex;
+ align-items: center;
+ gap: 48px;
+ }
+
+ // Override the global Docusaurus navbar styles we inherit on docs-next.
+ &.navbar {
+ display: block;
+ height: 64px;
+ min-height: 64px;
+ padding: 0;
+ border-bottom: 1px solid rgba(245, 239, 228, 0.08);
+ background-color: var(--nb-green-dark);
+ box-shadow: none;
+ }
+
+ // ── Logo ───────────────────────────────────────────────────────────────
+
+ &__logo {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ text-decoration: none !important;
+ flex-shrink: 0;
+ color: var(--nb-cream-light) !important;
+
+ img {
+ height: 30px;
+ width: auto;
+ filter: brightness(0) invert(1);
+ }
+
+ span {
+ @include type.mono-text(17px, 700, 1.2, 0.01em);
+ color: var(--nb-cream-light);
+ }
+
+ &:hover span {
+ color: var(--nb-cream-light);
+ text-decoration: none;
+ }
+ }
+
+ // ── Nav items ──────────────────────────────────────────────────────────
+
+ &__nav {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+ flex: 1;
+ }
+
+ &__item {
+ position: relative;
+
+ &:hover .navbar-next__dropdown {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+ pointer-events: auto;
+ }
+
+ &:hover .navbar-next__trigger {
+ color: var(--nb-cream-light);
+ }
+ }
+
+ &__trigger {
+ display: flex;
+ align-items: center;
+ gap: 0.3rem;
+ padding: 0.5rem 0.75rem;
+ border: none;
+ background: none;
+ cursor: pointer;
+ @include type.mono-text(type.$label, 500, 1.2, 0.02em);
+ color: rgba(245, 239, 228, 0.78);
+ border-radius: 4px;
+ transition: color 0.15s, background 0.15s;
+ white-space: nowrap;
+
+ &:hover {
+ background: rgba(245, 239, 228, 0.08);
+ color: var(--nb-cream-light);
+ }
+ }
+
+ &__chevron {
+ width: 14px;
+ height: 14px;
+ transition: transform 0.15s;
+ color: rgba(245, 239, 228, 0.5);
+ flex-shrink: 0;
+ }
+
+ &__item:hover &__chevron {
+ transform: rotate(180deg);
+ color: var(--nb-cream-light);
+ }
+
+ // ── Dropdown ───────────────────────────────────────────────────────────
+
+ &__dropdown {
+ position: absolute;
+ top: calc(100% + 8px);
+ left: 0;
+ min-width: 200px;
+ background: #054C39;
+ border: 1px solid rgba(245, 239, 228, 0.12);
+ border-radius: 8px;
+ box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2);
+ padding: 6px;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-6px);
+ transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
+ pointer-events: none;
+
+ // Invisible bridge over the 8px gap
+ &::after {
+ content: '';
+ position: absolute;
+ top: -8px;
+ left: 0;
+ right: 0;
+ height: 8px;
+ }
+
+ // Arrow notch
+ &::before {
+ content: '';
+ position: absolute;
+ top: -5px;
+ left: 18px;
+ width: 9px;
+ height: 9px;
+ background: #054C39;
+ border-left: 1px solid rgba(245, 239, 228, 0.12);
+ border-top: 1px solid rgba(245, 239, 228, 0.12);
+ transform: rotate(45deg);
+ }
+ }
+
+ &__dropdown-link {
+ display: block;
+ padding: 0.5rem 0.875rem;
+ border-radius: 4px;
+ @include type.mono-text(type.$label, 500, 1.2, 0.02em);
+ color: rgba(245, 239, 228, 0.82);
+ text-decoration: none !important;
+ transition: background 0.12s, color 0.12s;
+ white-space: nowrap;
+
+ &:hover {
+ background: rgba(245, 239, 228, 0.08);
+ color: var(--nb-cream-light);
+ text-decoration: none !important;
+ }
+ }
+
+ // ── Right actions ──────────────────────────────────────────────────────
+
+ &__actions {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ flex-shrink: 0;
+ margin-left: auto;
+ }
+
+ &__locale-dropdown {
+ &.navbar__link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.2rem;
+ box-sizing: border-box;
+ height: 32px;
+ margin-left: 0;
+ padding: 0 10px;
+ border: 1px solid rgba(245, 239, 228, 0.22);
+ border-radius: 4px;
+ background: rgba(245, 239, 228, 0.06);
+ color: var(--nb-cream-light) !important;
+ text-decoration: none !important;
+ @include type.mono-text(12px, 700, 1.2, 0.02em);
+ transition: border-color 0.15s, background 0.15s, transform 0.15s;
+ white-space: nowrap;
+
+ &:hover {
+ border-color: rgba(245, 239, 228, 0.45);
+ background: rgba(245, 239, 228, 0.1);
+ transform: translateY(-1px);
+ text-decoration: none !important;
+ }
+ }
+
+ .navbar-next__locale-icon {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ flex-shrink: 0;
+ color: var(--nb-cream-light);
+ }
+ }
+
+ &__star-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ box-sizing: border-box;
+ height: 32px;
+ padding: 0 12px 0 10px;
+ border: 1px solid rgba(245, 239, 228, 0.22);
+ border-radius: 4px;
+ @include type.mono-text(12px, 500, 1.2, 0.02em);
+ color: var(--nb-cream-light) !important;
+ text-decoration: none !important;
+ transition: border-color 0.15s, background 0.15s;
+
+ &:hover {
+ border-color: rgba(245, 239, 228, 0.45);
+ background: rgba(245, 239, 228, 0.06);
+ text-decoration: none !important;
+ }
+
+ svg {
+ color: var(--nb-yellow);
+ flex-shrink: 0;
+ }
+ }
+
+ .navbar-next__star-link svg {
+ display: inline-block;
+ }
+
+ .navbar-next__logo img {
+ display: block;
+ }
+
+ &__star-divider {
+ width: 1px;
+ height: 14px;
+ background: rgba(245, 239, 228, 0.22);
+ }
+
+ &__star-count {
+ font-weight: 700;
+ }
+
+ &__cta {
+ padding: 0.45rem 1.1rem;
+ background: var(--nb-yellow);
+ color: var(--nb-ink) !important;
+ border: none;
+ border-radius: 4px;
+ @include type.mono-text(type.$label, 700, 1.2, 0.02em);
+ cursor: pointer;
+ text-decoration: none !important;
+ transition: background 0.15s, transform 0.15s;
+ white-space: nowrap;
+
+ &:hover {
+ background: #FFE066;
+ color: var(--nb-ink) !important;
+ text-decoration: none !important;
+ transform: translateY(-1px);
+ }
+ }
+
+ &__menu-button {
+ display: none;
+ align-items: center;
+ justify-content: center;
+ width: 40px;
+ height: 40px;
+ flex: 0 0 40px;
+ border: 1px solid rgba(245, 239, 228, 0.22);
+ border-radius: 4px;
+ background: rgba(245, 239, 228, 0.06);
+ color: var(--nb-cream-light);
+ cursor: pointer;
+ appearance: none;
+ transition: border-color 0.15s, background 0.15s;
+
+ &:hover {
+ border-color: rgba(245, 239, 228, 0.45);
+ background: rgba(245, 239, 228, 0.1);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--nb-yellow);
+ outline-offset: 3px;
+ }
+ }
+
+ &__mobile-panel {
+ position: absolute;
+ top: 64px;
+ left: 0;
+ right: 0;
+ z-index: 99;
+ display: none;
+ max-height: calc(100vh - 64px);
+ overflow: auto;
+ padding: 12px 24px 20px;
+ border-top: 1px solid rgba(245, 239, 228, 0.1);
+ border-bottom: 1px solid rgba(245, 239, 228, 0.16);
+ background: var(--nb-green-dark);
+ box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
+ }
+
+ &__mobile-sections {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ max-width: 720px;
+ margin: 0 auto;
+ }
+
+ &__mobile-section {
+ border-bottom: 1px solid rgba(245, 239, 228, 0.1);
+ }
+
+ &__mobile-trigger {
+ display: flex;
+ width: 100%;
+ min-height: 46px;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ border: 0;
+ background: transparent;
+ color: var(--nb-cream-light);
+ cursor: pointer;
+ @include type.mono-text(type.$label, 700, 1.2, 0.08em, uppercase);
+ text-align: left;
+ appearance: none;
+
+ &[aria-expanded='true'] .navbar-next__chevron {
+ transform: rotate(180deg);
+ color: var(--nb-yellow);
+ }
+ }
+
+ &__mobile-links {
+ display: grid;
+ gap: 4px;
+ padding: 0 0 12px;
+ }
+
+ &__mobile-link {
+ display: block;
+ padding: 10px 12px;
+ border-radius: 4px;
+ color: rgba(245, 239, 228, 0.78);
+ @include type.mono-text(type.$label, 500, 1.2, 0.02em);
+ text-decoration: none !important;
+
+ &:hover {
+ background: rgba(245, 239, 228, 0.08);
+ color: var(--nb-cream-light);
+ text-decoration: none !important;
+ }
+ }
+
+ &__mobile-actions {
+ display: none;
+ max-width: 720px;
+ margin: 16px auto 0;
+ gap: 12px;
+ }
+}
+
+@media (max-width: 1180px) {
+ .navbar-next {
+ &__inner {
+ gap: 18px;
+ padding: 0 32px;
+ }
+
+ &__trigger {
+ padding: 0.5rem 0.55rem;
+ font-size: 12px;
+ }
+ }
+}
+
+@media (max-width: 1020px) {
+ .navbar-next {
+ &__inner {
+ padding: 0 24px;
+ gap: 14px;
+ }
+
+ &__nav {
+ display: none;
+ }
+
+ &__menu-button {
+ display: inline-flex;
+ }
+
+ &--mobile-open &__mobile-panel {
+ display: block;
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .navbar-next {
+ &__inner {
+ padding: 0 20px;
+ gap: 10px;
+ }
+
+ &__logo img {
+ height: 27px;
+ }
+
+ &__actions {
+ gap: 8px;
+ }
+
+ &__cta {
+ padding: 0.45rem 0.8rem;
+ font-size: 12px;
+ }
+
+ &__mobile-panel {
+ padding: 10px 20px 18px;
+ }
+
+ &__mobile-actions {
+ display: grid;
+ grid-template-columns: 1fr;
+
+ .navbar-next__star-link,
+ .navbar-next__cta {
+ justify-content: center;
+ width: 100%;
+ }
+ }
+ }
+}
+
+@media (max-width: 390px) {
+ .navbar-next {
+ &__actions {
+ display: none;
+ }
+
+ &__mobile-actions {
+ display: grid;
+ gap: 10px;
+ }
+ }
+}
diff --git a/src/components/home-next/NavbarNext.tsx b/src/components/home-next/NavbarNext.tsx
new file mode 100644
index 00000000000..7d34f7eae4e
--- /dev/null
+++ b/src/components/home-next/NavbarNext.tsx
@@ -0,0 +1,359 @@
+import React, { JSX, useState, useEffect } from 'react';
+import Link from '@docusaurus/Link';
+import { useLocation } from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem';
+import { getLocalePrefix, isDocsNextPath, isReleasesPath, normalizePathname } from '@site/src/utils/locale';
+import './NavbarNext.scss';
+
+const GITHUB_REPO = 'apache/doris';
+const FALLBACK_STARS = '-';
+const HOME_VERSION_KEY = 'doris-home-version';
+
+function safeSetLocalStorage(key: string, value: string): void {
+ try {
+ window.localStorage.setItem(key, value);
+ } catch {
+ // localStorage may be unavailable (Safari private mode, disabled cookies, quota errors)
+ }
+}
+
+function formatStars(n: number): string {
+ if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
+ return String(n);
+}
+
+function useGitHubStars(repo: string, fallback: string): string {
+ const [stars, setStars] = useState(fallback);
+ useEffect(() => {
+ let cancelled = false;
+ const timer = window.setTimeout(() => {
+ fetch(`https://api.github.com/repos/${repo}`)
+ .then(r => (r.ok ? r.json() : null))
+ .then(data => {
+ if (!cancelled && data && typeof data.stargazers_count === 'number') {
+ setStars(formatStars(data.stargazers_count));
+ }
+ })
+ .catch(() => { /* keep fallback on network/CORS/rate-limit errors */ });
+ }, 1200);
+ return () => {
+ cancelled = true;
+ window.clearTimeout(timer);
+ };
+ }, [repo]);
+ return stars;
+}
+
+interface DropdownItem {
+ label: string;
+ href: string;
+ external?: boolean;
+}
+
+interface NavItem {
+ label: string;
+ items: DropdownItem[];
+}
+
+function buildNavItems(docsHref: string, releasesHref: string): NavItem[] {
+ return [
+ {
+ label: 'Why Doris',
+ items: [
+ { label: 'Key Features (coming soon)', href: '#' },
+ { label: 'Doris vs. Others', href: '/why-doris/compare' },
+ { label: 'Benchmarks (coming soon)', href: '#' },
+ { label: 'User Stories (coming soon)', href: '#' },
+ ],
+ },
+ {
+ label: 'Use Cases',
+ items: [
+ { label: 'Customer-Facing Analytics', href: '/use-cases/customer-facing-analytics' },
+ { label: 'Data Warehousing', href: '/use-cases/data-warehousing' },
+ { label: 'Observability', href: '/use-cases/observability' },
+ { label: 'Doris for AI', href: '/use-cases/ai' },
+ ],
+ },
+ {
+ label: 'Docs',
+ items: [{ label: 'dev', href: docsHref }],
+ },
+ {
+ label: 'Resouces',
+ items: [
+ { label: 'Release Notes', href: releasesHref },
+ { label: 'Blogs', href: '/blogs-next' },
+ { label: 'News and Events', href: '/events' },
+ ],
+ },
+ {
+ label: 'Community',
+ items: [
+ { label: 'Join GitHub Discussions', href: 'https://github.com/apache/doris/discussions', external: true },
+ ],
+ },
+ ];
+}
+
+function ChevronDown(): JSX.Element {
+ return (
+ <svg className="navbar-next__chevron" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+ <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+ </svg>
+ );
+}
+
+function StarIcon(): JSX.Element {
+ return (
+ <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+ <path d="M8 0l2.4 5.5L16 6.2l-4 3.9 1 5.9L8 13.2l-5 2.8 1-5.9-4-3.9 5.6-.7L8 0z" />
+ </svg>
+ );
+}
+
+function GitHubIcon(): JSX.Element {
+ return (
+ <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+ <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.2 [...]
+ </svg>
+ );
+}
+
+function MenuIcon({ open }: { open: boolean }): JSX.Element {
+ return (
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+ {open ? (
+ <path d="M5 5l10 10M15 5L5 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+ ) : (
+ <path d="M4 6h12M4 10h12M4 14h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+ )}
+ </svg>
+ );
+}
+
+export function NavbarNext(): JSX.Element {
+ const {
+ i18n: { currentLocale, defaultLocale, localeConfigs },
+ } = useDocusaurusContext();
+ const { pathname, search, hash } = useLocation();
+ const stars = useGitHubStars(GITHUB_REPO, FALLBACK_STARS);
+ const [mobileOpen, setMobileOpen] = useState(false);
+ const localePrefix = getLocalePrefix(currentLocale, defaultLocale);
+ const docsHref = `${localePrefix}/docs-next/dev/getting-started/what-is-apache-doris`;
+ const releasesHref = `${localePrefix}/releases/all-release`;
+ const navItems = buildNavItems(docsHref, releasesHref);
+ const [expandedMobileItem, setExpandedMobileItem] = useState(navItems[0]?.label ?? '');
+ const isDocsNextPage = isDocsNextPath(pathname, [defaultLocale, 'zh-CN']);
+ const isReleasesPage = isReleasesPath(pathname, [defaultLocale, 'zh-CN']);
+ const showLocaleSwitcher = isDocsNextPage || isReleasesPage;
+ const homeHref = `${getLocalePrefix(currentLocale, defaultLocale)}/`;
+ const localeSwitchLabel = currentLocale === 'zh-CN' ? localeConfigs[defaultLocale]?.label ?? 'English' : '中文';
+ const currentLocalizedPath = normalizePathname(pathname, [defaultLocale, 'zh-CN']);
+ const buildLocaleHref = (locale: string) =>
+ `${locale === defaultLocale ? '' : `/${locale}`}${currentLocalizedPath}${search}${hash}`;
+ const localeItems = [defaultLocale, 'zh-CN']
+ .filter((locale, index, arr) => arr.indexOf(locale) === index)
+ .map(locale => ({
+ label: localeConfigs[locale]?.label ?? locale,
+ lang: localeConfigs[locale]?.htmlLang,
+ to: buildLocaleHref(locale),
+ target: '_self',
+ autoAddBaseUrl: false,
+ className: locale === currentLocale ? 'dropdown__link--active' : '',
+ }));
+
+ useEffect(() => {
+ if (!mobileOpen) return undefined;
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.key === 'Escape') setMobileOpen(false);
+ };
+
+ window.addEventListener('keydown', onKeyDown);
+ return () => window.removeEventListener('keydown', onKeyDown);
+ }, [mobileOpen]);
+
+ return (
+ <nav className={`navbar navbar--fixed-top navbar-next${mobileOpen ? ' navbar-next--mobile-open' : ''}`}>
+ <div className="navbar-next__inner">
+ <Link
+ to={homeHref}
+ className="navbar-next__logo"
+ aria-label="Apache Doris"
+ onClick={() => {
+ safeSetLocalStorage(HOME_VERSION_KEY, 'next');
+ }}
+ >
+ <img src="/images/logo-doris.svg" alt="Apache Doris" />
+ </Link>
+
+ <div className="navbar-next__nav">
+ {navItems.map(item => (
+ <div key={item.label} className="navbar-next__item">
+ <button className="navbar-next__trigger" type="button" aria-haspopup="true">
+ {item.label}
+ <ChevronDown />
+ </button>
+ <div className="navbar-next__dropdown">
+ {item.items.map(sub => (
+ <Link
+ key={sub.label}
+ to={sub.href}
+ className="navbar-next__dropdown-link"
+ {...(sub.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+ >
+ {sub.label}
+ </Link>
+ ))}
+ </div>
+ </div>
+ ))}
+ </div>
+
+ <div className="navbar-next__actions">
+ {showLocaleSwitcher && (
+ <DropdownNavbarItem
+ mobile={false}
+ label={
+ <>
+ <svg
+ className="icon-language navbar-next__locale-icon"
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ fill="none"
+ aria-hidden="true"
+ >
+ <path
+ d="M7.75756 14.3L10.5816 6.91667H11.8759L14.7 14.3H13.4057L12.7501 12.4167H9.74113L9.06873 14.3H7.75756ZM10.1109 11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908 12.45L1.97498 11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302 7.14133C3.80165 6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111 5.00635 6.39711 5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571 7.61667C6.43519 7.12778 6.81621 6.62511 7.11879 6.1086 [...]
+ fill="currentColor"
+ />
+ </svg>
+ </>
+ }
+ items={localeItems}
+ position="right"
+ className="navbar-next__locale-dropdown"
+ aria-label={localeSwitchLabel}
+ />
+ )}
+ <a
+ href={`https://github.com/${GITHUB_REPO}`}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="navbar-next__star-link"
+ aria-label={`Star Apache Doris on GitHub (${stars} stars)`}
+ >
+ <StarIcon />
+ <span>Star</span>
+ <span className="navbar-next__star-divider" />
+ <span className="navbar-next__star-count">{stars}</span>
+ <span className="navbar-next__star-divider" />
+ <GitHubIcon />
+ </a>
+ <Link to="/download-next" className="navbar-next__cta">
+ DOWNLOAD
+ </Link>
+ </div>
+
+ <button
+ type="button"
+ className="navbar-next__menu-button"
+ aria-label={mobileOpen ? 'Close navigation menu' : 'Open navigation menu'}
+ aria-expanded={mobileOpen}
+ aria-controls="navbar-next-mobile-panel"
+ onClick={() => setMobileOpen(open => !open)}
+ >
+ <MenuIcon open={mobileOpen} />
+ </button>
+ </div>
+
+ <div id="navbar-next-mobile-panel" className="navbar-next__mobile-panel" hidden={!mobileOpen}>
+ <div className="navbar-next__mobile-sections">
+ {navItems.map(item => {
+ const expanded = expandedMobileItem === item.label;
+ const sectionId = `navbar-next-mobile-${item.label.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`;
+
+ return (
+ <div className="navbar-next__mobile-section" key={item.label}>
+ <button
+ type="button"
+ className="navbar-next__mobile-trigger"
+ aria-expanded={expanded}
+ aria-controls={sectionId}
+ onClick={() => setExpandedMobileItem(current => (current === item.label ? '' : item.label))}
+ >
+ {item.label}
+ <ChevronDown />
+ </button>
+ <div id={sectionId} className="navbar-next__mobile-links" hidden={!expanded}>
+ {item.items.map(sub => (
+ <Link
+ key={sub.label}
+ to={sub.href}
+ className="navbar-next__mobile-link"
+ onClick={() => setMobileOpen(false)}
+ {...(sub.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+ >
+ {sub.label}
+ </Link>
+ ))}
+ </div>
+ </div>
+ );
+ })}
+ </div>
+
+ <div className="navbar-next__mobile-actions">
+ {showLocaleSwitcher && (
+ <DropdownNavbarItem
+ mobile={false}
+ label={
+ <>
+ <svg
+ className="icon-language navbar-next__locale-icon"
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 16 16"
+ fill="none"
+ aria-hidden="true"
+ >
+ <path
+ d="M7.75756 14.3L10.5816 6.91667H11.8759L14.7 14.3H13.4057L12.7501 12.4167H9.74113L9.06873 14.3H7.75756ZM10.1109 11.35H12.3467L11.254 8.3H11.2036L10.1109 11.35ZM2.84908 12.45L1.97498 11.5833L5.11841 8.48333C4.72618 8.05 4.38439 7.60267 4.09302 7.14133C3.80165 6.68044 3.54389 6.19444 3.31976 5.68333H4.61412C4.80463 6.06111 5.00635 6.39711 5.21927 6.69133C5.43219 6.986 5.68434 7.29444 5.97571 7.61667C6.43519 7.12778 6.81621 6.62511 7.11879 6.1086 [...]
+ fill="currentColor"
+ />
+ </svg>
+ </>
+ }
+ items={localeItems}
+ position="right"
+ className="navbar-next__locale-dropdown"
+ aria-label={localeSwitchLabel}
+ />
+ )}
+ <a
+ href={`https://github.com/${GITHUB_REPO}`}
+ target="_blank"
+ rel="noopener noreferrer"
+ className="navbar-next__star-link"
+ aria-label={`Star Apache Doris on GitHub (${stars} stars)`}
+ >
+ <StarIcon />
+ <span>Star</span>
+ <span className="navbar-next__star-divider" />
+ <span className="navbar-next__star-count">{stars}</span>
+ <span className="navbar-next__star-divider" />
+ <GitHubIcon />
+ </a>
+ <Link to="/download-next" className="navbar-next__cta" onClick={() => setMobileOpen(false)}>
+ DOWNLOAD
+ </Link>
+ </div>
+ </div>
+ </nav>
+ );
+}
diff --git a/src/components/home-next/sections/CommunitySection.scss b/src/components/home-next/sections/CommunitySection.scss
new file mode 100644
index 00000000000..181b086ca8d
--- /dev/null
+++ b/src/components/home-next/sections/CommunitySection.scss
@@ -0,0 +1,220 @@
+@use '../../shared/typography' as type;
+
+.community-next {
+ --cn-green: #06805F;
+ --cn-green-deep: #054C39;
+ --cn-green-glow: #2DDFA8;
+ --cn-cream: #FAF6EE;
+ --cn-cream-muted: rgba(245, 239, 228, 0.72);
+ --cn-yellow: #FFD23F;
+ --cn-yellow-bright: #FFE066;
+ --cn-ink: #0F1A14;
+ --cn-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ --cn-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+ position: relative;
+ overflow: hidden;
+ background: var(--cn-green);
+ color: var(--cn-cream);
+ padding: 72px 0 78px;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ pointer-events: none;
+ }
+
+ &::before {
+ z-index: 1;
+ background-image: radial-gradient(rgba(245, 239, 228, 0.08) 1.3px, transparent 1.3px);
+ background-size: 28px 28px;
+ mask-image: linear-gradient(180deg, transparent, black 14%, black 86%, transparent);
+ }
+
+ &::after {
+ z-index: 2;
+ background:
+ radial-gradient(ellipse at 50% 0%, rgba(255, 210, 63, 0.12), transparent 58%),
+ radial-gradient(ellipse at 18% 100%, rgba(45, 223, 168, 0.12), transparent 52%),
+ linear-gradient(180deg, rgba(5, 76, 57, 0.08), rgba(5, 76, 57, 0.18));
+ }
+
+ &__inner {
+ position: relative;
+ z-index: 10;
+ max-width: 1120px;
+ margin: 0 auto;
+ padding: 0 56px;
+ }
+
+ // ── Header ────────────────────────────────────────────────────────────────
+
+ &__header {
+ max-width: 1120px;
+ margin: 0 auto 34px;
+ text-align: left;
+ }
+
+ &__eyebrow {
+ display: inline-block;
+ @include type.micro-label;
+ color: rgba(245, 239, 228, 0.64);
+ margin-bottom: 12px;
+ }
+
+ &__title {
+ @include type.section-title;
+ color: var(--cn-cream);
+ margin: 0;
+ }
+
+ &__title-accent {
+ color: var(--cn-yellow);
+ }
+
+ &__title-line {
+ display: block;
+ }
+
+ // ── Grid ──────────────────────────────────────────────────────────────────
+
+ &__grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 10px;
+ }
+
+ // ── Card ──────────────────────────────────────────────────────────────────
+
+ &__card {
+ position: relative;
+ display: flex;
+ align-items: center;
+ min-height: 0;
+ height: 54px;
+ background: rgba(245, 239, 228, 0.08);
+ border: 1.5px solid rgba(245, 239, 228, 0.22);
+ border-radius: 8px;
+ padding: 9px 38px 9px 12px;
+ text-decoration: none !important;
+ transition:
+ transform 0.18s ease,
+ background 0.18s ease,
+ box-shadow 0.18s ease,
+ border-color 0.18s ease;
+ color: var(--cn-cream);
+ box-shadow: 0 18px 44px -28px rgba(15, 26, 20, 0.72);
+
+ &:hover {
+ transform: translateY(-3px);
+ background: rgba(245, 239, 228, 0.13);
+ box-shadow: 0 24px 54px -30px rgba(15, 26, 20, 0.9);
+ border-color: rgba(255, 210, 63, 0.58);
+ text-decoration: none !important;
+ }
+
+ &:hover .community-next__card-arrow {
+ transform: translate(3px, -50%);
+ color: var(--cn-yellow);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--cn-yellow);
+ outline-offset: 4px;
+ }
+ }
+
+ &__card-main {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+ }
+
+ &__card-icon {
+ width: 28px;
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex: 0 0 28px;
+ border-radius: 6px;
+ background: var(--cn-yellow);
+ color: var(--cn-ink);
+ box-shadow: 0 12px 26px -18px rgba(15, 26, 20, 0.7);
+
+ svg {
+ display: block;
+ flex-shrink: 0;
+ width: 17px;
+ height: 17px;
+ }
+ }
+
+ &__card-name {
+ @include type.mono-text(13.5px, 700, 1.2, -0.015em);
+ color: var(--cn-cream);
+ margin: 0;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__card-arrow {
+ position: absolute;
+ top: 50%;
+ right: 16px;
+ transform: translateY(-50%);
+ font-size: 15px;
+ color: rgba(245, 239, 228, 0.52);
+ transition: transform 0.18s ease, color 0.18s ease;
+ display: block;
+ }
+}
+
+@media (max-width: 960px) {
+ .community-next {
+ padding: 64px 0 70px;
+
+ &__inner {
+ padding: 0 32px;
+ }
+
+ &__grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .community-next {
+ padding: 54px 0 60px;
+
+ &__inner {
+ padding: 0 24px;
+ }
+
+ &__header {
+ margin-bottom: 28px;
+ text-align: left;
+ }
+
+ &__title {
+ font-size: clamp(26px, 8vw, 34px);
+ line-height: 1.08;
+ }
+
+ &__grid {
+ grid-template-columns: 1fr;
+ gap: 14px;
+ }
+
+ &__card {
+ height: 52px;
+ padding: 9px 38px 9px 12px;
+ }
+ }
+}
diff --git a/src/components/home-next/sections/CommunitySection.tsx b/src/components/home-next/sections/CommunitySection.tsx
new file mode 100644
index 00000000000..d9518b39d85
--- /dev/null
+++ b/src/components/home-next/sections/CommunitySection.tsx
@@ -0,0 +1,97 @@
+import React, { JSX } from 'react';
+import './CommunitySection.scss';
+
+interface Channel {
+ name: string;
+ href: string;
+ icon: JSX.Element;
+}
+
+const CHANNELS: Channel[] = [
+ {
+ name: 'GitHub Discussions',
+ href: 'https://github.com/apache/doris/discussions',
+ icon: (
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+ <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.6 [...]
+ </svg>
+ ),
+ },
+ {
+ name: 'Slack',
+ href: 'https://doris.apache.org/slack',
+ icon: (
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+ <path d="M5.042 15.165a2.528 2.528 0 01-2.52 2.523A2.528 2.528 0 010 15.165a2.527 2.527 0 012.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 012.521-2.52 2.527 2.527 0 012.521 2.52v6.313A2.528 2.528 0 018.834 24a2.528 2.528 0 01-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 01-2.521-2.52A2.528 2.528 0 018.834 0a2.528 2.528 0 012.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 012.521 2.521 2.528 2.528 0 01-2.521 2.521H2.522A2.528 2.528 0 010 8.834a2.528 2.528 0 012.522-2.521h6.312 [...]
+ </svg>
+ ),
+ },
+ {
+ name: 'Dev Mailing List',
+ href: '/community/subscribe-mail-list',
+ icon: (
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true">
+ <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" />
+ <polyline points="22,6 12,13 2,6" />
+ </svg>
+ ),
+ },
+ {
+ name: 'X (Twitter)',
+ href: 'https://twitter.com/doris_apache',
+ icon: (
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+ <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+ </svg>
+ ),
+ },
+ {
+ name: 'LinkedIn',
+ href: 'https://www.linkedin.com/company/doris-apache/',
+ icon: (
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+ <path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z" />
+ <circle cx="4" cy="4" r="2" />
+ </svg>
+ ),
+ },
+ {
+ name: 'YouTube',
+ href: 'https://www.youtube.com/hashtag/apachedoris',
+ icon: (
+ <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+ <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+ </svg>
+ ),
+ },
+];
+
+export function CommunitySection(): JSX.Element {
+ return (
+ <section className="community-next">
+ <div className="community-next__inner">
+ <header className="community-next__header">
+ <span className="community-next__eyebrow">Community</span>
+ <h2 className="community-next__title">
+ <span className="community-next__title-line">
+ Connect with <span className="community-next__title-accent">5,000+ teams</span>
+ </span>
+ <span className="community-next__title-line">building on Apache Doris</span>
+ </h2>
+ </header>
+
+ <div className="community-next__grid">
+ {CHANNELS.map((ch, i) => (
+ <a key={i} className="community-next__card" href={ch.href} target="_blank" rel="noopener noreferrer">
+ <div className="community-next__card-main">
+ <div className="community-next__card-icon">{ch.icon}</div>
+ <h3 className="community-next__card-name">{ch.name}</h3>
+ </div>
+ <span className="community-next__card-arrow" aria-hidden="true">→</span>
+ </a>
+ ))}
+ </div>
+ </div>
+ </section>
+ );
+}
diff --git a/src/components/home-next/sections/DeploymentSection.scss b/src/components/home-next/sections/DeploymentSection.scss
new file mode 100644
index 00000000000..faa1dea2829
--- /dev/null
+++ b/src/components/home-next/sections/DeploymentSection.scss
@@ -0,0 +1,343 @@
+@use '../../shared/typography' as type;
+
+.deployment-next {
+ --dn-green: #11A679;
+ --dn-green-deep: #0B7A58;
+ --dn-green-dark: #06805F;
+ --dn-green-darker: #054C39;
+ --dn-cream: #F5EFE4;
+ --dn-cream-light: #FAF6EE;
+ --dn-cream-warm: #EFE6D2;
+ --dn-yellow: #FFD23F;
+ --dn-ink: #0F1A14;
+ --dn-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ --dn-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+ position: relative;
+ padding: 84px 0 140px;
+ background: var(--dn-cream);
+ color: var(--dn-ink);
+ font-family: var(--dn-sans);
+
+ &__header {
+ width: 100%;
+ margin: 0;
+ padding-bottom: 56px;
+ text-align: left;
+ }
+
+ &__eyebrow {
+ @include type.eyebrow;
+ color: var(--dn-green-deep);
+ margin-bottom: 28px;
+ }
+
+ &__headline {
+ @include type.section-title;
+ color: var(--dn-ink);
+ margin: 0;
+ text-align: left;
+ }
+
+ &__headline-line {
+ display: block;
+
+ &--accent {
+ color: var(--dn-green-deep);
+ }
+ }
+
+ &__grid {
+ width: 100%;
+ margin: 0;
+ display: grid;
+ gap: 32px;
+ }
+
+ &__card {
+ position: relative;
+ min-height: 380px;
+ border-radius: 8px;
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
+ background: var(--dn-cream-light);
+ color: var(--dn-ink);
+ box-shadow:
+ 0 30px 60px -20px rgba(6, 70, 50, 0.3),
+ 0 8px 24px -8px rgba(6, 70, 50, 0.18),
+ 0 0 0 1px rgba(6, 70, 50, 0.06);
+ transform-origin: center center;
+ transition:
+ box-shadow 0.3s ease,
+ transform 0.32s cubic-bezier(0.2, 0.9, 0.18, 1);
+ will-change: transform;
+
+ &:hover {
+ z-index: 1;
+ box-shadow:
+ 0 40px 80px -20px rgba(6, 70, 50, 0.38),
+ 0 12px 32px -8px rgba(6, 70, 50, 0.22),
+ 0 0 0 1px rgba(6, 70, 50, 0.1);
+ transform: translateY(-3px) scale(1.012);
+ }
+
+ &--green {
+ background: var(--dn-green-dark);
+ color: var(--dn-cream-light);
+ }
+
+ &--ink {
+ background: var(--dn-ink);
+ color: var(--dn-cream-light);
+ }
+ }
+
+ &__copy {
+ position: relative;
+ padding: 56px 48px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ min-width: 0;
+ }
+
+ &__card-title {
+ @include type.card-title;
+ margin: 0 0 24px;
+ color: inherit;
+ }
+
+ &__card-title-line {
+ display: block;
+
+ &--accent {
+ color: var(--dn-yellow);
+ }
+ }
+
+ &__card-subtitle {
+ @include type.body-copy-strong;
+ opacity: 0.78;
+ margin: 0;
+ max-width: 420px;
+ }
+
+ &__card-cta {
+ margin-top: 34px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: fit-content;
+ padding: 14px 24px;
+ border: 1.5px solid var(--dn-yellow);
+ border-radius: 6px;
+ background: var(--dn-yellow);
+ color: var(--dn-ink) !important;
+ @include type.mono-text(16px, 800, 1, 0.04em);
+ text-decoration: none !important;
+ box-shadow: 0 14px 30px -18px rgba(15, 26, 20, 0.5);
+ transition:
+ background 0.18s ease,
+ box-shadow 0.18s ease,
+ transform 0.18s ease;
+
+ &:hover {
+ transform: translateY(-1px);
+ background: #FFE066;
+ box-shadow: 0 18px 34px -18px rgba(15, 26, 20, 0.58);
+ text-decoration: none !important;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--dn-cream-light);
+ outline-offset: 3px;
+ }
+ }
+
+ &__visual {
+ position: relative;
+ min-height: 380px;
+ padding: 28px;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background:
+ repeating-linear-gradient(
+ 135deg,
+ rgba(45, 223, 168, 0.06) 0,
+ rgba(45, 223, 168, 0.06) 14px,
+ rgba(45, 223, 168, 0.1) 14px,
+ rgba(45, 223, 168, 0.1) 28px
+ ),
+ var(--dn-green-darker);
+ }
+
+ &__visual-image {
+ position: relative;
+ width: auto;
+ height: min(100%, 312px);
+ max-width: 100%;
+ max-height: 100%;
+ display: block;
+ border: 2px solid var(--dn-cream-light);
+ border-radius: 8px;
+ box-sizing: border-box;
+ object-fit: contain;
+ }
+
+ &__card--ink &__visual {
+ background:
+ repeating-linear-gradient(
+ 135deg,
+ rgba(255, 210, 63, 0.04) 0,
+ rgba(255, 210, 63, 0.04) 14px,
+ rgba(255, 210, 63, 0.08) 14px,
+ rgba(255, 210, 63, 0.08) 28px
+ ),
+ var(--dn-ink);
+ }
+}
+
+@media (max-width: 1300px) {
+ .deployment-next {
+ &__headline {
+ font-size: 48px;
+ }
+ }
+}
+
+@media (max-width: 1100px) {
+ .deployment-next {
+ padding: 80px 0 112px;
+
+ &__headline {
+ font-size: 42px;
+ }
+
+ &__copy {
+ padding: 52px 40px;
+ }
+
+ &__card-title {
+ font-size: 32px;
+ }
+ }
+}
+
+@media (max-width: 820px) {
+ .deployment-next {
+ padding: 64px 0 88px;
+
+ &__header {
+ padding-bottom: 36px;
+ }
+
+ &__headline {
+ font-size: 30px;
+ line-height: 1.05;
+ }
+ &__grid {
+ gap: 24px;
+ }
+
+ &__card {
+ min-height: auto;
+ grid-template-columns: 1fr;
+ grid-template-rows: minmax(0, 1fr) 230px;
+ }
+
+ &__copy {
+ padding: 48px 24px 24px;
+ justify-content: flex-start;
+ }
+
+ &__card-title {
+ font-size: 30px;
+ }
+
+ &__card-subtitle {
+ font-size: 15px;
+ margin-bottom: 24px;
+ }
+
+ &__card-cta {
+ margin-top: 24px;
+ padding: 12px 20px;
+ font-size: 14px;
+ letter-spacing: 0.03em;
+ }
+
+ &__visual {
+ min-height: 230px;
+ padding: 20px;
+ }
+
+ &__visual-image {
+ height: min(100%, 190px);
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .deployment-next {
+ padding: 64px 0 80px;
+
+ &__header {
+ padding-bottom: 36px;
+ }
+
+ &__eyebrow {
+ margin-bottom: 16px;
+ font-size: 12px;
+ }
+
+ &__headline-line--accent {
+ white-space: normal;
+ }
+ }
+}
+
+@media (max-width: 460px) {
+ .deployment-next {
+ &__headline {
+ font-size: 28px;
+ }
+
+ &__card {
+ grid-template-rows: minmax(0, 1fr) 180px;
+ }
+
+ &__copy {
+ padding: 42px 20px 20px;
+ }
+
+ &__card-title {
+ font-size: 26px;
+ }
+
+ &__visual {
+ min-height: 180px;
+ padding: 16px;
+ }
+
+ &__visual-image {
+ height: min(100%, 148px);
+ }
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .deployment-next {
+ &__card,
+ &__card-cta {
+ transition: none;
+ }
+
+ &__card:hover,
+ &__card-cta:hover {
+ transform: none;
+ }
+ }
+}
diff --git a/src/components/home-next/sections/DeploymentSection.tsx b/src/components/home-next/sections/DeploymentSection.tsx
new file mode 100644
index 00000000000..4db6d3043ae
--- /dev/null
+++ b/src/components/home-next/sections/DeploymentSection.tsx
@@ -0,0 +1,106 @@
+import React, { JSX } from 'react';
+import './DeploymentSection.scss';
+
+type DeploymentTone = 'green' | 'ink';
+
+interface DeploymentCardItem {
+ tone: DeploymentTone;
+ title: {
+ first: string;
+ second: string;
+ accent: string;
+ };
+ subtitle: string;
+ image: {
+ src: string;
+ alt: string;
+ };
+ cta: {
+ label: string;
+ href: string;
+ };
+}
+
+const DEPLOYMENT_CARDS: DeploymentCardItem[] = [
+ {
+ tone: 'green',
+ title: {
+ first: 'Compute',
+ second: 'Storage',
+ accent: 'COUPLED',
+ },
+ subtitle: 'Classic MPP, with compute and storage co-located on each node for maximum local I/O and the lowest query latency.',
+ image: {
+ src: '/images/next/home-page/cs-coupled.jpg',
+ alt: 'Apache Doris compute-storage coupled mode architecture diagram',
+ },
+ cta: {
+ label: 'Deploy Now!',
+ href: '/docs-next/dev/install/intro',
+ },
+ },
+ {
+ tone: 'ink',
+ title: {
+ first: 'Compute',
+ second: 'Storage',
+ accent: 'DECOUPLED',
+ },
+ subtitle: 'Cloud-native architecture with stateless compute groups over shared object storage. Scale compute on demand and isolate workloads from one another.',
+ image: {
+ src: '/images/next/home-page/cs-decoupled.jpg',
+ alt: 'Apache Doris compute-storage decoupled mode architecture diagram',
+ },
+ cta: {
+ label: 'Deploy Now!',
+ href: '/docs-next/dev/install/intro',
+ },
+ },
+];
+
+function DeploymentCard({ card }: { card: DeploymentCardItem }): JSX.Element {
+ return (
+ <article className={`deployment-next__card deployment-next__card--${card.tone}`}>
+ <div className="deployment-next__copy">
+ <h3 className="deployment-next__card-title">
+ <span className="deployment-next__card-title-line">{card.title.first}</span>
+ <span className="deployment-next__card-title-line">{card.title.second}</span>
+ <span className="deployment-next__card-title-line deployment-next__card-title-line--accent">
+ {card.title.accent}
+ </span>
+ </h3>
+ <p className="deployment-next__card-subtitle">{card.subtitle}</p>
+ <a className="deployment-next__card-cta" href={card.cta.href}>
+ {card.cta.label}
+ </a>
+ </div>
+ <div className="deployment-next__visual">
+ <img className="deployment-next__visual-image" src={card.image.src} alt={card.image.alt} />
+ </div>
+ </article>
+ );
+}
+
+export function DeploymentSection(): JSX.Element {
+ return (
+ <section className="deployment-next">
+ <div className="home-next-container">
+ <div className="deployment-next__header">
+ <div className="deployment-next__eyebrow">Deployment</div>
+ <h2 className="deployment-next__headline">
+ <span className="deployment-next__headline-line">Choose Your Architecture</span>
+ <span className="deployment-next__headline-line deployment-next__headline-line--accent">
+ One Engine, Two Modes
+ </span>
+ </h2>
+ </div>
+
+ <div className="deployment-next__grid">
+ {DEPLOYMENT_CARDS.map(card => (
+ <DeploymentCard key={card.title.accent} card={card} />
+ ))}
+ </div>
+ </div>
+ </section>
+ );
+}
diff --git a/src/components/home-next/sections/EcosystemSection.scss b/src/components/home-next/sections/EcosystemSection.scss
new file mode 100644
index 00000000000..979799283e5
--- /dev/null
+++ b/src/components/home-next/sections/EcosystemSection.scss
@@ -0,0 +1,754 @@
+@use '../../shared/typography' as type;
+
+.ecosystem-next {
+ --ecosystem-doris-offset-y: 0px;
+ --ecosystem-engine-label-offset-y: 0px;
+ --en-green: #11A679;
+ --en-green-deep: #0B7A58;
+ --en-green-dark: #06805F;
+ --en-green-darker: #054C39;
+ --en-green-darkest: #033A2C;
+ --en-green-glow: #2DDFA8;
+ --en-cream: #F5EFE4;
+ --en-cream-light: #FAF6EE;
+ --en-panel: #FBF7EE;
+ --en-mint-shell: #DCE9DF;
+ --en-node: #FFFEFC;
+ --en-node-soft: #F8F2E7;
+ --en-yellow: #FFD23F;
+ --en-yellow-bright: #FFE066;
+ --en-ink: #0F1A14;
+ --en-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ --en-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+
+ position: relative;
+ padding: 120px 56px 148px;
+ overflow: hidden;
+ isolation: isolate;
+ background: var(--en-cream);
+ color: var(--en-ink);
+ font-family: var(--en-sans);
+
+ &::before {
+ content: none;
+ }
+
+ &__header {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ margin: 0 0 60px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ gap: 40px;
+ flex-wrap: wrap;
+ text-align: left;
+ }
+
+ &__header-left {
+ max-width: 760px;
+ text-align: left;
+ }
+
+ &__eyebrow {
+ margin-bottom: 28px;
+ color: var(--en-green-deep);
+ @include type.eyebrow;
+ }
+
+ &__header-right {
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-start;
+ flex: 1 1 280px;
+ min-width: 280px;
+ padding-top: calc(13px * 1.2 + 28px);
+ }
+
+ &__headline {
+ margin: 0;
+ color: var(--en-ink);
+ @include type.section-title;
+ text-align: left;
+
+ span {
+ display: block;
+ }
+ }
+
+ &__headline-accent {
+ color: var(--en-green-deep);
+ }
+
+ &__coverage-text {
+ width: min(100%, 420px);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ gap: 6px;
+ padding: 0;
+ color: var(--en-ink);
+ font-family: type.$font-mono;
+ text-align: left;
+ }
+
+ &__coverage-line {
+ display: block;
+ @include type.mono-text(18px, 700, 1.12, -0.02em);
+ }
+
+ &__coverage-line--lead {
+ color: var(--en-green-deep);
+ @include type.mono-text(24px, 800, 1.04, -0.03em);
+ }
+
+ &__coverage-line--subtle {
+ color: rgba(15, 26, 20, 0.58);
+ @include type.mono-text(15px, 600, 1.28, 0);
+ }
+
+ &__stage {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ perspective: 1800px;
+ perspective-origin: 50% 50%;
+ }
+
+ &__card {
+ position: relative;
+ padding: 56px;
+ border: 1px solid rgba(17, 166, 121, 0.22);
+ border-radius: 8px;
+ background:
+ radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.5), transparent 42%),
+ linear-gradient(180deg, rgba(232, 242, 232, 0.96) 0%, var(--en-mint-shell) 100%);
+ box-shadow:
+ 0 38px 90px -44px rgba(6, 70, 50, 0.45),
+ 0 18px 48px -30px rgba(6, 70, 50, 0.28),
+ inset 0 1px 0 rgba(255, 255, 255, 0.75);
+ transform-style: preserve-3d;
+ transition: transform 0.5s cubic-bezier(0.18, 0.9, 0.25, 1.15);
+ will-change: transform;
+ }
+
+ &__panel {
+ position: relative;
+ padding: 36px 36px 32px;
+ overflow: hidden;
+ border: 1px solid rgba(6, 70, 50, 0.08);
+ border-radius: 8px;
+ background: var(--en-panel);
+ box-shadow:
+ 0 26px 56px -34px rgba(6, 70, 50, 0.28),
+ inset 0 1px 0 rgba(255, 255, 255, 0.82);
+ backdrop-filter: blur(14px);
+ -webkit-backdrop-filter: blur(14px);
+ }
+
+ &__grid {
+ position: relative;
+ display: grid;
+ grid-template-columns: minmax(220px, 1fr) minmax(168px, 1.05fr) minmax(220px, 1fr);
+ gap: 0;
+ align-items: stretch;
+ min-height: 420px;
+ }
+
+ &__col {
+ position: relative;
+ z-index: 2;
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+ justify-content: center;
+ }
+
+ &__col--center {
+ align-items: center;
+ }
+
+ &__col-head {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 0;
+ color: rgba(15, 26, 20, 0.48);
+ @include type.mono-text(11px, 700, 1.25, 0.18em, uppercase);
+ }
+
+ &__col-head--center {
+ left: 50%;
+ transform: translateX(-50%);
+ white-space: nowrap;
+ }
+
+ &__col-head--right {
+ left: auto;
+ right: 0;
+ justify-content: flex-end;
+ text-align: right;
+ }
+
+ &__col-num {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 22px;
+ height: 22px;
+ flex: 0 0 22px;
+ border-radius: 4px;
+ background: rgba(17, 166, 121, 0.12);
+ color: var(--en-green-deep);
+ @include type.micro-label;
+ }
+
+ &__block {
+ position: relative;
+ z-index: 3;
+ padding: 16px 18px 18px;
+ border: 1px solid rgba(15, 26, 20, 0.08);
+ border-radius: 8px;
+ background: var(--en-node);
+ box-shadow: 0 8px 20px -16px rgba(15, 26, 20, 0.28);
+ transition:
+ transform 0.18s ease,
+ background 0.18s ease,
+ border-color 0.18s ease,
+ box-shadow 0.18s ease;
+
+ &:hover {
+ transform: translateY(-2px) scale(1.02);
+ border-color: rgba(17, 166, 121, 0.28);
+ background: #FFFFFF;
+ box-shadow:
+ 0 16px 34px -22px rgba(6, 70, 50, 0.32),
+ 0 0 0 1px rgba(17, 166, 121, 0.1);
+ }
+ }
+
+ &__block-label {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ margin-bottom: 12px;
+ }
+
+ &__block-title {
+ color: var(--en-ink);
+ @include type.mono-text(11px, 800, 1.2, 0.16em, uppercase);
+ }
+
+ &__block-tag {
+ color: rgba(15, 26, 20, 0.42);
+ @include type.mono-text(9px, 600, 1.2, 0.12em, uppercase);
+ text-align: right;
+ white-space: nowrap;
+ }
+
+ &__logos {
+ display: flex;
+ gap: 8px;
+ flex-wrap: wrap;
+ }
+
+ &__logo {
+ min-width: 0;
+ flex: 1 1 0;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 9px 10px;
+ border: 1px solid rgba(15, 26, 20, 0.08);
+ border-radius: 8px;
+ background: var(--en-node-soft);
+ color: var(--en-ink);
+ @include type.mono-text(11px, 650, 1.2, 0);
+ white-space: nowrap;
+ }
+
+ &__logo-mark {
+ width: 22px;
+ height: 22px;
+ flex: 0 0 22px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 4px;
+ background: rgba(255, 255, 255, 0.4);
+ overflow: hidden;
+ }
+
+ &__logo-image {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ object-position: center;
+ }
+
+ &__logo-name {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ &__logo--mysql .ecosystem-next__logo-image {
+ padding: 2px;
+ }
+
+ &__logo--postgresql .ecosystem-next__logo-image {
+ padding: 2px;
+ }
+
+ &__logo--kafka .ecosystem-next__logo-image {
+ padding: 1px;
+ }
+
+ &__logo--pulsar .ecosystem-next__logo-image {
+ padding: 0;
+ }
+
+ &__logo--iceberg .ecosystem-next__logo-image {
+ padding: 1px;
+ }
+
+ &__logo--delta-lake .ecosystem-next__logo-image,
+ &__logo--hudi .ecosystem-next__logo-image {
+ padding: 1px;
+ }
+
+ &__logo--superset .ecosystem-next__logo-image {
+ padding: 1px;
+ }
+
+ &__logo--metabase .ecosystem-next__logo-image,
+ &__logo--grafana .ecosystem-next__logo-image,
+ &__logo--langfuse .ecosystem-next__logo-image {
+ padding: 0;
+ }
+
+ &__logo--ai-agents .ecosystem-next__logo-image,
+ &__logo--mcp .ecosystem-next__logo-image {
+ padding: 0;
+ }
+
+ &__doris {
+ position: relative;
+ z-index: 4;
+ width: 148px;
+ height: 148px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 8px;
+ transform: translateY(var(--ecosystem-doris-offset-y));
+ transition: transform 0.2s ease;
+
+ &:hover {
+ transform: translateY(var(--ecosystem-doris-offset-y)) scale(1.03);
+ }
+ }
+
+ &__doris-core {
+ position: relative;
+ z-index: 2;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ border: 1.5px solid var(--en-green-glow);
+ border-radius: 8px;
+ background: var(--en-green-deep);
+ box-shadow:
+ 0 22px 40px -22px rgba(6, 70, 50, 0.55),
+ 0 0 34px -16px rgba(45, 223, 168, 0.8);
+ }
+
+ &__doris-mark {
+ width: 36px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 7px;
+ background: var(--en-yellow);
+ color: var(--en-ink);
+ @include type.mono-text(20px, 800, 1, 0);
+ }
+
+ &__doris-name {
+ color: var(--en-cream-light);
+ @include type.mono-text(12px, 800, 1.2, 0.14em, uppercase);
+ text-align: center;
+ }
+
+ &__flows {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ width: 100%;
+ height: 100%;
+ overflow: visible;
+ pointer-events: none;
+ }
+
+ &__flow-pipe {
+ fill: none;
+ stroke: rgba(17, 166, 121, 0.16);
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 10;
+ }
+
+ &__flow-stream {
+ fill: none;
+ animation: ecosystem-next-flow-dash 1.6s linear infinite;
+ filter: drop-shadow(0 0 5px rgba(17, 166, 121, 0.45));
+ stroke: var(--en-green);
+ stroke-dasharray: 18 26;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ stroke-width: 5;
+ }
+}
+
+// ── Thumbnail mode (small screens) ────────────────────────────────────────
+// Chained selector keeps specificity ahead of the responsive `.ecosystem-next`
+// rules in the media queries below.
+.ecosystem-next.ecosystem-next--compact {
+ padding: 64px 24px 80px;
+
+ .ecosystem-next__header {
+ margin-bottom: 28px;
+ }
+
+ .ecosystem-next__compact-card {
+ position: relative;
+ z-index: 2;
+ max-width: 560px;
+ margin: 0 auto;
+ padding: 22px 18px 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 6px;
+ border-radius: 8px;
+ background: var(--en-panel);
+ border: 1px solid rgba(6, 70, 50, 0.08);
+ box-shadow:
+ 0 18px 48px -30px rgba(6, 70, 50, 0.28),
+ inset 0 1px 0 rgba(255, 255, 255, 0.75);
+ }
+
+ .ecosystem-next__compact-tier {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .ecosystem-next__compact-tier-label {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ color: rgba(15, 26, 20, 0.48);
+ @include type.mono-text(10px, 700, 1.25, 0.16em, uppercase);
+ }
+
+ .ecosystem-next__compact-row {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 8px;
+ }
+
+ .ecosystem-next__compact-block {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 4px;
+ padding: 14px 6px;
+ min-height: 64px;
+ border: 1px solid rgba(15, 26, 20, 0.08);
+ border-radius: 8px;
+ background: var(--en-node);
+ box-shadow: 0 8px 20px -16px rgba(15, 26, 20, 0.28);
+ text-align: center;
+ }
+
+ .ecosystem-next__compact-block-title {
+ color: var(--en-ink);
+ @include type.mono-text(11px, 800, 1.2, 0.1em, uppercase);
+ }
+
+ .ecosystem-next__compact-block-tag {
+ color: rgba(15, 26, 20, 0.42);
+ @include type.mono-text(8px, 600, 1.2, 0.08em, uppercase);
+ }
+
+ .ecosystem-next__compact-flow {
+ display: block;
+ width: 100%;
+ height: 36px;
+ overflow: visible;
+ }
+
+ .ecosystem-next__compact-flow-pipe {
+ fill: none;
+ stroke: rgba(17, 166, 121, 0.18);
+ stroke-linecap: round;
+ stroke-width: 4;
+ vector-effect: non-scaling-stroke;
+ }
+
+ .ecosystem-next__compact-flow-stream {
+ fill: none;
+ stroke: var(--en-green);
+ stroke-linecap: round;
+ stroke-width: 2;
+ stroke-dasharray: 6 10;
+ vector-effect: non-scaling-stroke;
+ animation: ecosystem-next-flow-dash 1.6s linear infinite;
+ filter: drop-shadow(0 0 4px rgba(17, 166, 121, 0.45));
+ }
+
+ .ecosystem-next__compact-engine {
+ display: flex;
+ justify-content: center;
+ padding: 2px 0;
+ }
+}
+
+@keyframes ecosystem-next-flow-dash {
+ to {
+ stroke-dashoffset: -44;
+ }
+}
+
+@media (max-width: 1180px) {
+ .ecosystem-next {
+ padding: 104px 0 128px;
+
+ &__headline {
+ font-size: 48px;
+ }
+
+ &__header-right {
+ min-width: 250px;
+ }
+
+ &__coverage-text {
+ width: min(100%, 360px);
+ gap: 5px;
+ }
+
+ &__coverage-line {
+ font-size: 17px;
+ }
+
+ &__coverage-line--lead {
+ font-size: 22px;
+ }
+
+ &__card {
+ padding: 36px;
+ }
+
+ &__panel {
+ padding: 28px;
+ }
+
+ &__grid {
+ grid-template-columns: minmax(200px, 1fr) 180px minmax(200px, 1fr);
+ min-height: 390px;
+ }
+ }
+}
+
+@media (max-width: 920px) {
+ .ecosystem-next {
+ --ecosystem-doris-offset-y: 0;
+ --ecosystem-engine-label-offset-y: 0;
+
+ padding: 80px 0 96px;
+
+ &__header {
+ margin-bottom: 40px;
+ align-items: flex-start;
+ }
+
+ &__eyebrow {
+ margin-bottom: 16px;
+ font-size: 12px;
+ }
+
+ &__header-right {
+ display: none;
+ }
+
+ &__headline {
+ font-size: 36px;
+ line-height: 1.08;
+ }
+
+ &__coverage-text {
+ display: none;
+ }
+
+ &__stage {
+ perspective: none;
+ }
+
+ &__card {
+ padding: 22px;
+ transform: none !important;
+ }
+
+ &__panel {
+ padding: 22px;
+ }
+
+ &__grid {
+ grid-template-columns: 1fr;
+ gap: 28px;
+ min-height: 0;
+ }
+
+ &__col {
+ gap: 12px;
+ justify-content: flex-start;
+ }
+
+ &__col--sources {
+ order: 1;
+ }
+
+ &__col--center {
+ order: 2;
+ padding: 6px 0;
+ }
+
+ &__col--consumers {
+ order: 3;
+ }
+
+ &__col-head,
+ &__col-head--right,
+ &__col-head--center {
+ position: static;
+ left: auto;
+ right: auto;
+ align-self: flex-start;
+ justify-content: flex-start;
+ text-align: left;
+ margin-bottom: 8px;
+ transform: none;
+ white-space: normal;
+ }
+
+ &__flows {
+ display: none;
+ }
+
+ &__doris {
+ width: 136px;
+ height: 136px;
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .ecosystem-next {
+ padding: 64px 0 80px;
+
+ &__headline {
+ font-size: 30px;
+ }
+
+ &__card {
+ padding: 14px;
+ }
+
+ &__panel {
+ padding: 18px;
+ }
+
+ &__block {
+ padding: 14px;
+ }
+
+ &__block-label {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 5px;
+ }
+
+ &__block-tag {
+ text-align: left;
+ white-space: normal;
+ }
+
+ &__logos {
+ flex-direction: column;
+ }
+
+ &__logo {
+ flex-basis: auto;
+ }
+ }
+}
+
+@media (max-width: 420px) {
+ .ecosystem-next {
+ &__headline {
+ font-size: 28px;
+ }
+
+ &__card {
+ padding: 10px;
+ }
+
+ &__panel {
+ padding: 14px;
+ }
+
+ &__doris {
+ width: 124px;
+ height: 124px;
+ }
+
+ &__doris-name {
+ font-size: 10px;
+ }
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .ecosystem-next {
+ &__card,
+ &__block,
+ &__doris {
+ transition: none;
+ }
+
+ &__doris:hover {
+ transform: translateY(var(--ecosystem-doris-offset-y)) !important;
+ }
+
+ &__card,
+ &__block:hover {
+ transform: none !important;
+ }
+
+ &__flow-stream {
+ animation: none;
+ }
+ }
+}
diff --git a/src/components/home-next/sections/EcosystemSection.tsx b/src/components/home-next/sections/EcosystemSection.tsx
new file mode 100644
index 00000000000..ca8cc24e9b5
--- /dev/null
+++ b/src/components/home-next/sections/EcosystemSection.tsx
@@ -0,0 +1,592 @@
+import React, {
+ JSX,
+ MutableRefObject,
+ RefObject,
+ useEffect,
+ useRef,
+ useState,
+} from 'react';
+import './EcosystemSection.scss';
+
+type EcosystemSide = 'left' | 'right';
+
+interface EcosystemLogo {
+ name: string;
+ logoSrc?: string;
+ className?: string;
+}
+
+interface EcosystemGroup {
+ id: string;
+ title: string;
+ tag: string;
+ logos: EcosystemLogo[];
+}
+
+interface FlowPath {
+ id: string;
+ d: string;
+}
+
+interface TiltState {
+ rx: number;
+ ry: number;
+}
+
+interface EcosystemBlockProps {
+ data: EcosystemGroup;
+ side: EcosystemSide;
+ refMap: MutableRefObject<Record<string, HTMLElement | null>>;
+}
+
+const SOURCES: EcosystemGroup[] = [
+ {
+ id: 'db',
+ title: 'Database',
+ tag: 'OLTP / CDC',
+ logos: [
+ {
+ name: 'MySQL',
+ logoSrc: '/images/ecomsystem-log/mysql.png',
+ className: 'ecosystem-next__logo--mysql',
+ },
+ {
+ name: 'PostgreSQL',
+ logoSrc: '/images/ecomsystem-log/postgresql.svg',
+ className: 'ecosystem-next__logo--postgresql',
+ },
+ ],
+ },
+ {
+ id: 'stream',
+ title: 'Datastream',
+ tag: 'Pub/Sub',
+ logos: [
+ {
+ name: 'Kafka',
+ logoSrc: '/images/ecomsystem-log/kafka.svg',
+ className: 'ecosystem-next__logo--kafka',
+ },
+ {
+ name: 'Pulsar',
+ logoSrc: '/images/ecomsystem-log/pulsar.png',
+ className: 'ecosystem-next__logo--pulsar',
+ },
+ ],
+ },
+ {
+ id: 'lake',
+ title: 'Datalake',
+ tag: 'Open Tables',
+ logos: [
+ {
+ name: 'Iceberg',
+ logoSrc: '/images/ecomsystem-log/iceberg.png',
+ className: 'ecosystem-next__logo--iceberg',
+ },
+ {
+ name: 'Delta Lake',
+ logoSrc: '/images/ecomsystem-log/delta-lake.svg',
+ className: 'ecosystem-next__logo--delta-lake',
+ },
+ {
+ name: 'Hudi',
+ logoSrc: '/images/ecomsystem-log/hudi.png',
+ className: 'ecosystem-next__logo--hudi',
+ },
+ ],
+ },
+];
+
+const CONSUMERS: EcosystemGroup[] = [
+ {
+ id: 'bi',
+ title: 'BI & Visualization',
+ tag: 'Dashboards',
+ logos: [
+ {
+ name: 'Superset',
+ logoSrc: '/images/ecomsystem-log/superset.webp',
+ className: 'ecosystem-next__logo--superset',
+ },
+ {
+ name: 'Metabase',
+ logoSrc: '/images/ecomsystem-log/metabase.svg',
+ className: 'ecosystem-next__logo--metabase',
+ },
+ ],
+ },
+ {
+ id: 'ai',
+ title: 'AI & Analytics',
+ tag: 'LLM / Agents',
+ logos: [
+ {
+ name: 'AI Agents',
+ logoSrc: '/images/ecomsystem-log/ai-agent.svg',
+ className: 'ecosystem-next__logo--ai-agents',
+ },
+ {
+ name: 'MCP',
+ logoSrc: '/images/ecomsystem-log/mcp.png',
+ className: 'ecosystem-next__logo--mcp',
+ },
+ ],
+ },
+ {
+ id: 'obs',
+ title: 'Observability',
+ tag: 'Monitoring',
+ logos: [
+ {
+ name: 'Grafana',
+ logoSrc: '/images/ecomsystem-log/grafana.png',
+ className: 'ecosystem-next__logo--grafana',
+ },
+ {
+ name: 'Langfuse',
+ logoSrc: '/images/ecomsystem-log/longfuse.png',
+ className: 'ecosystem-next__logo--langfuse',
+ },
+ ],
+ },
+];
+
+function EcosystemHeader({ showCoverage = false }: { showCoverage?: boolean }): JSX.Element {
+ return (
+ <div className="ecosystem-next__header">
+ <div className="ecosystem-next__header-left">
+ <div className="ecosystem-next__eyebrow">Ecosystem</div>
+ <h2 className="ecosystem-next__headline" id="ecosystem-next-title">
+ <span>At the Heart of the</span>
+ <span className="ecosystem-next__headline-accent">Modern Data Stack.</span>
+ </h2>
+ </div>
+ {showCoverage ? (
+ <div className="ecosystem-next__header-right" aria-label="Connector coverage summary">
+ <div className="ecosystem-next__coverage-text">
+ <span className="ecosystem-next__coverage-line ecosystem-next__coverage-line--lead">
+ 50+ Connectors
+ </span>
+ <span className="ecosystem-next__coverage-line ecosystem-next__coverage-line--subtle">
+ Databases, streaming, lakehouse, BI, AI, and observability.
+ </span>
+ </div>
+ </div>
+ ) : null}
+ </div>
+ );
+}
+
+function EcosystemBlock({ data, side, refMap }: EcosystemBlockProps): JSX.Element {
+ return (
+ <article
+ className="ecosystem-next__block"
+ data-ecosystem-id={data.id}
+ data-ecosystem-side={side}
+ ref={(el) => {
+ refMap.current[data.id] = el;
+ }}
+ >
+ <div className="ecosystem-next__block-label">
+ <span className="ecosystem-next__block-title">{data.title}</span>
+ <span className="ecosystem-next__block-tag">{data.tag}</span>
+ </div>
+ <div className="ecosystem-next__logos">
+ {data.logos.map(logo => (
+ <div
+ className={`ecosystem-next__logo ${logo.className || ''}`}
+ key={logo.name}
+ >
+ {logo.logoSrc ? (
+ <span className="ecosystem-next__logo-mark">
+ <img
+ className="ecosystem-next__logo-image"
+ src={logo.logoSrc}
+ alt=""
+ aria-hidden="true"
+ draggable={false}
+ />
+ </span>
+ ) : null}
+ <span className="ecosystem-next__logo-name">{logo.name}</span>
+ </div>
+ ))}
+ </div>
+ </article>
+ );
+}
+
+function FlowLines({ paths }: { paths: FlowPath[] }): JSX.Element {
+ return (
+ <svg className="ecosystem-next__flows" preserveAspectRatio="none" aria-hidden="true" focusable="false">
+ {paths.map(path => (
+ <path key={`pipe-${path.id}`} d={path.d} className="ecosystem-next__flow-pipe" />
+ ))}
+ {paths.map((path, i) => (
+ <path
+ key={`stream-${path.id}`}
+ d={path.d}
+ className="ecosystem-next__flow-stream"
+ style={{ animationDelay: `${(i % 6) * 0.18}s` }}
+ />
+ ))}
+ </svg>
+ );
+}
+
+function useGravityTilt(ref: RefObject<HTMLElement>): void {
+ const current = useRef<TiltState>({ rx: 0, ry: 0 });
+ const target = useRef<TiltState>({ rx: 0, ry: 0 });
+ const frame = useRef<number | null>(null);
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return undefined;
+
+ const applyTransform = (state: TiltState) => {
+ el.style.transform = `rotateX(${state.rx.toFixed(3)}deg) rotateY(${state.ry.toFixed(3)}deg)`;
+ };
+
+ function tick() {
+ const next = {
+ rx: current.current.rx + (target.current.rx - current.current.rx) * 0.14,
+ ry: current.current.ry + (target.current.ry - current.current.ry) * 0.14,
+ };
+ const closeEnough =
+ Math.abs(next.rx - target.current.rx) < 0.015 &&
+ Math.abs(next.ry - target.current.ry) < 0.015;
+
+ current.current = closeEnough ? target.current : next;
+ applyTransform(current.current);
+
+ if (closeEnough) {
+ frame.current = null;
+ return;
+ }
+
+ frame.current = window.requestAnimationFrame(tick);
+ }
+
+ function scheduleTick() {
+ if (frame.current === null) {
+ frame.current = window.requestAnimationFrame(tick);
+ }
+ }
+
+ function onMove(e: MouseEvent) {
+ const rect = el.getBoundingClientRect();
+ const px = (e.clientX - rect.left) / rect.width;
+ const py = (e.clientY - rect.top) / rect.height;
+ const maxTilt = 6.5;
+
+ target.current = {
+ rx: ((py - 0.5) * 2) * maxTilt,
+ ry: -((px - 0.5) * 2) * maxTilt,
+ };
+ scheduleTick();
+ }
+
+ function onLeave() {
+ target.current = { rx: 0, ry: 0 };
+ scheduleTick();
+ }
+
+ applyTransform(current.current);
+ el.addEventListener('mousemove', onMove);
+ el.addEventListener('mouseleave', onLeave);
+
+ return () => {
+ if (frame.current !== null) {
+ window.cancelAnimationFrame(frame.current);
+ }
+ el.style.transform = '';
+ el.removeEventListener('mousemove', onMove);
+ el.removeEventListener('mouseleave', onLeave);
+ };
+ }, [ref]);
+
+}
+
+function createPipePath(fromX: number, fromY: number, toX: number, toY: number): string {
+ if (Math.abs(toY - fromY) < 2) {
+ return `M ${fromX} ${fromY} L ${toX} ${toY}`;
+ }
+
+ const midX = fromX + (toX - fromX) * 0.5;
+ const radius = 10;
+ const dxSign = Math.sign(toX - fromX) || 1;
+ const dySign = Math.sign(toY - fromY) || 1;
+ const startRadius = Math.min(radius, Math.abs(midX - fromX));
+ const endRadius = Math.min(radius, Math.abs(toX - midX));
+ const verticalRadius = Math.min(radius, Math.abs(toY - fromY) / 2);
+
+ return [
+ `M ${fromX} ${fromY}`,
+ `L ${midX - startRadius * dxSign} ${fromY}`,
+ `Q ${midX} ${fromY} ${midX} ${fromY + verticalRadius * dySign}`,
+ `L ${midX} ${toY - verticalRadius * dySign}`,
+ `Q ${midX} ${toY} ${midX + endRadius * dxSign} ${toY}`,
+ `L ${toX} ${toY}`,
+ ].join(' ');
+}
+
+function useFlowPaths(
+ panelRef: RefObject<HTMLElement>,
+ refMap: MutableRefObject<Record<string, HTMLElement | null>>,
+ dorisRef: RefObject<HTMLElement>,
+): FlowPath[] {
+ const [paths, setPaths] = useState<FlowPath[]>([]);
+ const lastPathsRef = useRef<FlowPath[]>([]);
+
+ useEffect(() => {
+ function recompute() {
+ const panel = panelRef.current;
+ const doris = dorisRef.current;
+ if (!panel || !doris) return;
+
+ const panelRect = panel.getBoundingClientRect();
+ const dorisRect = doris.getBoundingClientRect();
+ const dorisTop = dorisRect.top - panelRect.top;
+ const dorisHeight = dorisRect.height;
+ const dorisLeftX = dorisRect.left - panelRect.left;
+ const dorisRightX = dorisRect.right - panelRect.left;
+
+ interface BlockInfo {
+ id: string;
+ isLeft: boolean;
+ blockX: number;
+ blockY: number;
+ }
+ const leftBlocks: BlockInfo[] = [];
+ const rightBlocks: BlockInfo[] = [];
+ Object.entries(refMap.current).forEach(([id, el]) => {
+ if (!el) return;
+ const rect = el.getBoundingClientRect();
+ const isLeft = el.dataset.ecosystemSide === 'left';
+ const blockX = (isLeft ? rect.right : rect.left) - panelRect.left;
+ const blockY = rect.top + rect.height / 2 - panelRect.top;
+ (isLeft ? leftBlocks : rightBlocks).push({ id, isLeft, blockX, blockY });
+ });
+ leftBlocks.sort((a, b) => a.blockY - b.blockY);
+ rightBlocks.sort((a, b) => a.blockY - b.blockY);
+
+ const buildSidePaths = (blocks: BlockInfo[]): FlowPath[] =>
+ blocks.map((block, index) => {
+ const dorisEdgeX = block.isLeft ? dorisLeftX : dorisRightX;
+ const dorisEdgeY = dorisTop + ((index + 1) / (blocks.length + 1)) * dorisHeight;
+ const fromX = block.isLeft ? block.blockX : dorisEdgeX;
+ const fromY = block.isLeft ? block.blockY : dorisEdgeY;
+ const toX = block.isLeft ? dorisEdgeX : block.blockX;
+ const toY = block.isLeft ? dorisEdgeY : block.blockY;
+ return { id: block.id, d: createPipePath(fromX, fromY, toX, toY) };
+ });
+
+ const nextPaths = [...buildSidePaths(leftBlocks), ...buildSidePaths(rightBlocks)];
+ const prevPaths = lastPathsRef.current;
+ const sameLength = prevPaths.length === nextPaths.length;
+ const sameContent =
+ sameLength &&
+ prevPaths.every((path, index) => path.id === nextPaths[index].id && path.d === nextPaths[index].d);
+
+ if (!sameContent) {
+ lastPathsRef.current = nextPaths;
+ setPaths(nextPaths);
+ }
+ }
+
+ recompute();
+
+ const timers = [
+ window.setTimeout(recompute, 80),
+ window.setTimeout(recompute, 400),
+ ];
+ let resizeObserver: ResizeObserver | null = null;
+
+ if (typeof window.ResizeObserver !== 'undefined') {
+ resizeObserver = new window.ResizeObserver(recompute);
+ if (panelRef.current) resizeObserver.observe(panelRef.current);
+ if (dorisRef.current) resizeObserver.observe(dorisRef.current);
+ Object.values(refMap.current).forEach((el) => {
+ if (el) resizeObserver?.observe(el);
+ });
+ }
+
+ window.addEventListener('resize', recompute);
+
+ return () => {
+ resizeObserver?.disconnect();
+ window.removeEventListener('resize', recompute);
+ timers.forEach(timer => window.clearTimeout(timer));
+ };
+ }, [panelRef, refMap, dorisRef]);
+
+ return paths;
+}
+
+function useIsCompactEcosystem(): boolean {
+ const [compact, setCompact] = useState(false);
+
+ useEffect(() => {
+ const query = window.matchMedia('(max-width: 768px)');
+ const update = () => setCompact(query.matches);
+
+ update();
+ query.addEventListener('change', update);
+ return () => query.removeEventListener('change', update);
+ }, []);
+
+ return compact;
+}
+
+function CompactTier({
+ label,
+ num,
+ groups,
+}: {
+ label: string;
+ num: string;
+ groups: EcosystemGroup[];
+}): JSX.Element {
+ return (
+ <div className="ecosystem-next__compact-tier">
+ <div className="ecosystem-next__compact-tier-label">
+ <span className="ecosystem-next__col-num">{num}</span>
+ {label}
+ </div>
+ <div className="ecosystem-next__compact-row">
+ {groups.map(group => (
+ <div className="ecosystem-next__compact-block" key={group.id}>
+ <span className="ecosystem-next__compact-block-title">{group.title}</span>
+ <span className="ecosystem-next__compact-block-tag">{group.tag}</span>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+function CompactConnector(): JSX.Element {
+ const lanes = [16.6, 50, 83.4];
+ return (
+ <svg
+ className="ecosystem-next__compact-flow"
+ viewBox="0 0 100 40"
+ preserveAspectRatio="none"
+ aria-hidden="true"
+ focusable="false"
+ >
+ {lanes.map(x => (
+ <line
+ key={`pipe-${x}`}
+ x1={x}
+ x2={x}
+ y1={0}
+ y2={40}
+ className="ecosystem-next__compact-flow-pipe"
+ />
+ ))}
+ {lanes.map((x, i) => (
+ <line
+ key={`stream-${x}`}
+ x1={x}
+ x2={x}
+ y1={0}
+ y2={40}
+ className="ecosystem-next__compact-flow-stream"
+ style={{ animationDelay: `${i * 0.2}s` }}
+ />
+ ))}
+ </svg>
+ );
+}
+
+function CompactEcosystem(): JSX.Element {
+ return (
+ <section
+ className="ecosystem-next ecosystem-next--compact"
+ aria-labelledby="ecosystem-next-title"
+ >
+ <EcosystemHeader />
+ <div className="ecosystem-next__compact-card">
+ <CompactTier label="Upstream — Sources" num="01" groups={SOURCES} />
+ <CompactConnector />
+ <div className="ecosystem-next__compact-engine">
+ <div className="ecosystem-next__doris">
+ <div className="ecosystem-next__doris-core">
+ <span className="ecosystem-next__doris-mark">D</span>
+ <span className="ecosystem-next__doris-name">Apache Doris</span>
+ </div>
+ </div>
+ </div>
+ <CompactConnector />
+ <CompactTier label="Downstream — Consumers" num="03" groups={CONSUMERS} />
+ </div>
+ </section>
+ );
+}
+
+export function EcosystemSection(): JSX.Element {
+ const compact = useIsCompactEcosystem();
+ const cardRef = useRef<HTMLDivElement>(null);
+ const panelRef = useRef<HTMLDivElement>(null);
+ const dorisRef = useRef<HTMLDivElement>(null);
+ const blockRefs = useRef<Record<string, HTMLElement | null>>({});
+ useGravityTilt(cardRef);
+ const paths = useFlowPaths(panelRef, blockRefs, dorisRef);
+
+ if (compact) {
+ return <CompactEcosystem />;
+ }
+
+ return (
+ <section className="ecosystem-next" aria-labelledby="ecosystem-next-title">
+ <div className="home-next-container">
+ <EcosystemHeader showCoverage />
+
+ <div className="ecosystem-next__stage">
+ <div className="ecosystem-next__card" ref={cardRef}>
+ <div className="ecosystem-next__panel" ref={panelRef}>
+ <FlowLines paths={paths} />
+
+ <div className="ecosystem-next__grid">
+ <div className="ecosystem-next__col ecosystem-next__col--sources">
+ <div className="ecosystem-next__col-head">
+ <span className="ecosystem-next__col-num">01</span>
+ Upstream - Sources
+ </div>
+ {SOURCES.map(source => (
+ <EcosystemBlock key={source.id} data={source} side="left" refMap={blockRefs} />
+ ))}
+ </div>
+
+ <div className="ecosystem-next__col ecosystem-next__col--center">
+ <div className="ecosystem-next__col-head ecosystem-next__col-head--center">
+ <span className="ecosystem-next__col-num">02</span>
+ The Engine
+ </div>
+ <div className="ecosystem-next__doris" ref={dorisRef}>
+ <div className="ecosystem-next__doris-core">
+ <span className="ecosystem-next__doris-mark">D</span>
+ <span className="ecosystem-next__doris-name">Apache Doris</span>
+ </div>
+ </div>
+ </div>
+
+ <div className="ecosystem-next__col ecosystem-next__col--consumers">
+ <div className="ecosystem-next__col-head ecosystem-next__col-head--right">
+ <span className="ecosystem-next__col-num">03</span>
+ Downstream - Consumers
+ </div>
+ {CONSUMERS.map(consumer => (
+ <EcosystemBlock key={consumer.id} data={consumer} side="right" refMap={blockRefs} />
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ );
+}
diff --git a/src/components/home-next/sections/FeaturesSection.scss b/src/components/home-next/sections/FeaturesSection.scss
new file mode 100644
index 00000000000..42526b1c228
--- /dev/null
+++ b/src/components/home-next/sections/FeaturesSection.scss
@@ -0,0 +1,788 @@
+@use '../../shared/typography' as type;
+
+.features-next {
+ --fn-green: #11A679;
+ --fn-green-deep: #0B7A58;
+ --fn-green-dark: #06805F;
+ --fn-green-darker: #054C39;
+ --fn-green-darkest: #033A2C;
+ --fn-green-glow: #2DDFA8;
+ --fn-cream: #F5EFE4;
+ --fn-cream-light: #FAF6EE;
+ --fn-cream-warm: #EFE6D2;
+ --fn-yellow: #FFD23F;
+ --fn-coral: #FF5C39;
+ --fn-ink: #0F1A14;
+ --fn-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ --fn-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --fn-card-stage-y: 38%;
+
+ position: relative;
+ background: var(--fn-cream);
+ color: var(--fn-ink);
+ font-family: var(--fn-sans);
+
+ &__header {
+ width: 100%;
+ margin: 0;
+ padding: 84px 0 16px;
+ text-align: left;
+ }
+
+ &__eyebrow {
+ @include type.eyebrow;
+ color: var(--fn-green-deep);
+ margin-bottom: 28px;
+ }
+
+ &__headline {
+ @include type.section-title;
+ color: var(--fn-ink);
+ margin: 0;
+ text-align: left;
+ }
+
+ &__headline-line {
+ display: block;
+
+ &--accent {
+ color: var(--fn-green-deep);
+ white-space: nowrap;
+ }
+ }
+
+ &__stack-container {
+ position: relative;
+ width: 100%;
+ }
+
+ &__stage {
+ position: sticky;
+ top: 0;
+ height: 100vh;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ padding: 0 20px;
+ box-sizing: border-box;
+ }
+
+ &__card {
+ position: absolute;
+ left: 50%;
+ top: var(--fn-card-stage-y);
+ width: min(1180px, calc(100% - 40px));
+ min-height: 540px;
+ border-radius: 8px;
+ overflow: hidden;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ box-shadow:
+ 0 30px 60px -20px rgba(6, 70, 50, 0.3),
+ 0 8px 24px -8px rgba(6, 70, 50, 0.18),
+ 0 0 0 1px rgba(6, 70, 50, 0.06);
+ transform-origin: center center;
+ transition: box-shadow 0.3s ease;
+ background: var(--fn-cream-light);
+ will-change: transform, opacity;
+
+ &:hover {
+ box-shadow:
+ 0 40px 80px -20px rgba(6, 70, 50, 0.38),
+ 0 12px 32px -8px rgba(6, 70, 50, 0.22),
+ 0 0 0 1px rgba(6, 70, 50, 0.1);
+ }
+
+ &--green {
+ background: var(--fn-green-dark);
+ color: var(--fn-cream-light);
+ }
+
+ &--cream {
+ background: var(--fn-cream-light);
+ color: var(--fn-ink);
+ border: 1px solid rgba(6, 70, 50, 0.08);
+ }
+
+ &--ink {
+ background: var(--fn-ink);
+ color: var(--fn-cream-light);
+ }
+ }
+
+ &__copy {
+ padding: 56px 52px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ position: relative;
+ }
+
+ &__card-num {
+ position: absolute;
+ top: 32px;
+ left: 52px;
+ @include type.micro-label;
+ opacity: 0.55;
+ }
+
+ &__card-title {
+ @include type.card-title;
+ margin: 0 0 14px;
+ color: inherit;
+ }
+
+ &__card-subtitle {
+ @include type.body-copy-strong;
+ opacity: 0.78;
+ margin: 0 0 32px;
+ max-width: 460px;
+ }
+
+ &__card--cream &__card-subtitle {
+ color: var(--fn-green-deep);
+ opacity: 1;
+ font-weight: 600;
+ }
+
+ &__list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+ }
+
+ &__list-item {
+ display: grid;
+ grid-template-columns: 22px 1fr;
+ gap: 14px;
+ align-items: start;
+ }
+
+ &__list-icon {
+ width: 22px;
+ height: 22px;
+ border-radius: 5px;
+ background: var(--fn-yellow);
+ color: var(--fn-ink);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 2px;
+ flex-shrink: 0;
+
+ svg {
+ width: 12px;
+ height: 12px;
+ }
+ }
+
+ &__card--cream &__list-icon {
+ background: var(--fn-green-deep);
+ color: var(--fn-cream-light);
+ }
+
+ &__list-term {
+ @include type.body-copy-strong;
+ margin-bottom: 2px;
+ display: block;
+ }
+
+ &__list-desc {
+ @include type.small-copy;
+ opacity: 0.72;
+ display: block;
+ }
+
+ &__card-cta {
+ margin-top: 36px;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ @include type.mono-text(12px, 700, 1.2, 0.14em, uppercase);
+ color: inherit !important;
+ text-decoration: none !important;
+ width: fit-content;
+ padding-bottom: 4px;
+ border-bottom: 1.5px solid currentColor;
+ opacity: 0.85;
+ transition: opacity 0.2s ease, gap 0.2s ease;
+
+ &:hover {
+ opacity: 1;
+ gap: 12px;
+ text-decoration: none !important;
+ }
+ }
+
+ &__visual {
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &--green {
+ background:
+ repeating-linear-gradient(
+ 135deg,
+ rgba(45, 223, 168, 0.06) 0,
+ rgba(45, 223, 168, 0.06) 14px,
+ rgba(45, 223, 168, 0.1) 14px,
+ rgba(45, 223, 168, 0.1) 28px
+ ),
+ var(--fn-green-darker);
+ }
+
+ &--cream {
+ background:
+ repeating-linear-gradient(
+ 135deg,
+ rgba(6, 70, 50, 0.04) 0,
+ rgba(6, 70, 50, 0.04) 14px,
+ rgba(6, 70, 50, 0.07) 14px,
+ rgba(6, 70, 50, 0.07) 28px
+ ),
+ var(--fn-cream-warm);
+ }
+
+ &--ink {
+ background:
+ repeating-linear-gradient(
+ 135deg,
+ rgba(255, 210, 63, 0.04) 0,
+ rgba(255, 210, 63, 0.04) 14px,
+ rgba(255, 210, 63, 0.08) 14px,
+ rgba(255, 210, 63, 0.08) 28px
+ ),
+ var(--fn-ink);
+ }
+ }
+
+ &__visual-tag {
+ position: absolute;
+ top: 24px;
+ right: 24px;
+ @include type.micro-label;
+ padding: 6px 10px;
+ background: var(--fn-yellow);
+ color: var(--fn-ink);
+ border-radius: 4px;
+ z-index: 5;
+ }
+
+ &__visual-content {
+ width: min(72%, 380px);
+ min-height: 300px;
+ position: relative;
+ color: var(--fn-cream-light);
+ }
+
+ &__visual-content--realtime {
+ width: 100%;
+ height: 100%;
+ min-height: 0;
+ max-width: none;
+ padding: 56px 52px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ &__realtime-frame {
+ width: 100%;
+ height: 100%;
+ border: 0;
+ display: block;
+ background: transparent;
+ }
+
+ &__visual-content--pipeline {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 30px;
+ }
+
+ &__pipeline-lane {
+ display: grid;
+ grid-template-columns: 88px 1fr 88px;
+ align-items: center;
+ gap: 14px;
+ }
+
+ &__pipeline-core {
+ display: grid;
+ grid-template-columns: 70px 1fr 108px 1fr 70px;
+ align-items: center;
+ gap: 12px;
+ }
+
+ &__pipeline-lane span,
+ &__pipeline-core span,
+ &__pipeline-core strong {
+ min-height: 46px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ @include type.mono-text(12px, 800, 1.2, 0.08em, uppercase);
+ }
+
+ &__pipeline-lane span {
+ color: var(--fn-green-darker);
+ background: var(--fn-cream-light);
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
+ }
+
+ &__pipeline-lane i,
+ &__pipeline-core i {
+ display: block;
+ height: 2px;
+ border-radius: 999px;
+ background: linear-gradient(90deg, transparent, var(--fn-yellow), transparent);
+ }
+
+ &__pipeline-core strong {
+ background: var(--fn-yellow);
+ color: var(--fn-ink);
+ min-height: 72px;
+ font-size: 16px;
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
+ }
+
+ &__pipeline-core span {
+ background: rgba(250, 246, 238, 0.12);
+ border: 1px solid rgba(250, 246, 238, 0.24);
+ }
+
+ &__visual-content--lakehouse {
+ min-height: 360px;
+ }
+
+ &__lake-core {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 126px;
+ height: 126px;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--fn-green-deep);
+ color: var(--fn-cream-light);
+ font-family: var(--fn-mono);
+ font-size: 18px;
+ font-weight: 800;
+ box-shadow:
+ 0 18px 48px rgba(6, 70, 50, 0.25),
+ 0 0 0 28px rgba(6, 70, 50, 0.08),
+ 0 0 0 68px rgba(6, 70, 50, 0.05);
+ }
+
+ &__lake-node {
+ position: absolute;
+ min-width: 76px;
+ min-height: 38px;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 6px;
+ background: var(--fn-cream-light);
+ color: var(--fn-green-darker);
+ border: 1px solid rgba(6, 70, 50, 0.08);
+ box-shadow: 0 12px 30px rgba(6, 70, 50, 0.12);
+ font-family: var(--fn-mono);
+ font-size: 11px;
+ font-weight: 800;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+
+ &--1 {
+ left: 2%;
+ top: 20%;
+ }
+
+ &--2 {
+ right: 0;
+ top: 16%;
+ }
+
+ &--3 {
+ left: 11%;
+ bottom: 15%;
+ }
+
+ &--4 {
+ right: 7%;
+ bottom: 13%;
+ }
+
+ &--5 {
+ left: 50%;
+ top: 4%;
+ transform: translateX(-50%);
+ }
+
+ &--6 {
+ left: 50%;
+ bottom: 2%;
+ transform: translateX(-50%);
+ }
+ }
+
+ &__visual-content--search {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 24px;
+ }
+
+ &__search-query {
+ align-self: center;
+ max-width: 290px;
+ padding: 16px 20px;
+ border-radius: 6px;
+ background: rgba(250, 246, 238, 0.1);
+ border: 1px solid rgba(250, 246, 238, 0.18);
+ color: var(--fn-yellow);
+ @include type.mono-text(12px, 800, 1.2, 0.08em, uppercase);
+ text-align: center;
+ }
+
+ &__search-stack {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ &__search-row {
+ display: grid;
+ grid-template-columns: 72px 1fr 42px;
+ align-items: center;
+ gap: 12px;
+ padding: 13px 14px;
+ border-radius: 6px;
+ background: rgba(250, 246, 238, 0.1);
+ border: 1px solid rgba(250, 246, 238, 0.16);
+ @include type.mono-text(11px, 800, 1.2, 0.08em, uppercase);
+
+ i {
+ height: 8px;
+ border-radius: 999px;
+ background: linear-gradient(90deg, var(--fn-green-glow), var(--fn-yellow));
+ }
+
+ strong {
+ color: var(--fn-yellow);
+ text-align: right;
+ }
+ }
+
+ &__stage-progress {
+ position: absolute;
+ bottom: 36px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ gap: 10px;
+ z-index: 100;
+ }
+
+ &__stage-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: rgba(6, 70, 50, 0.18);
+ transition: background 0.3s ease, width 0.3s ease;
+
+ &--on {
+ width: 28px;
+ border-radius: 4px;
+ background: var(--fn-green-deep);
+ }
+ }
+}
+
+@media (max-width: 1300px) {
+ .features-next {
+ &__headline {
+ font-size: 48px;
+ }
+ }
+}
+
+@media (max-width: 1100px) {
+ .features-next {
+ &__headline {
+ font-size: 42px;
+ }
+
+ &__card {
+ min-height: 560px;
+ }
+
+ &__copy {
+ padding: 52px 40px;
+ }
+
+ &__card-num {
+ left: 40px;
+ }
+ }
+}
+
+@media (max-width: 820px) {
+ .features-next {
+ &__header {
+ padding: 64px 0 28px;
+ }
+
+ &__headline {
+ font-size: 30px;
+ line-height: 1.05;
+ }
+
+ &__stack-container {
+ height: auto !important;
+ padding: 0 0 72px;
+ }
+
+ &__stage {
+ position: relative;
+ top: auto;
+ height: auto;
+ max-width: 720px;
+ margin: 0 auto;
+ padding: 0;
+ display: grid;
+ gap: 24px;
+ align-items: stretch;
+ justify-content: stretch;
+ overflow: visible;
+ padding-top: 0;
+ }
+
+ &__card {
+ position: relative;
+ left: auto;
+ top: auto;
+ width: 100%;
+ min-height: 0;
+ max-height: none;
+ grid-template-columns: 1fr;
+ grid-template-rows: minmax(0, 1fr) 210px;
+ overflow: hidden;
+ opacity: 1 !important;
+ transform: none !important;
+ }
+
+ &__copy {
+ padding: 48px 24px 22px;
+ justify-content: flex-start;
+ overflow: visible;
+ }
+
+ &__card-num {
+ top: 22px;
+ left: 24px;
+ }
+
+ &__card-title {
+ font-size: 30px;
+ }
+
+ &__card-subtitle {
+ font-size: 15px;
+ margin-bottom: 22px;
+ }
+
+ &__list {
+ gap: 14px;
+ }
+
+ &__list-term {
+ font-size: 14px;
+ }
+
+ &__list-desc {
+ font-size: 13px;
+ }
+
+ &__card-cta {
+ margin-top: 22px;
+ font-size: 10px;
+ letter-spacing: 0.1em;
+ }
+
+ &__visual {
+ min-height: 210px;
+ }
+
+ &__visual-tag {
+ top: 14px;
+ right: 14px;
+ font-size: 9px;
+ }
+
+ &__visual-content {
+ width: min(82%, 320px);
+ min-height: 160px;
+ }
+
+ &__visual-content--lakehouse {
+ min-height: 190px;
+ }
+
+ &__visual-content--realtime {
+ padding: 48px 24px 24px;
+ }
+
+ &__pipeline-lane {
+ grid-template-columns: 68px 1fr 68px;
+ gap: 8px;
+ }
+
+ &__pipeline-core {
+ grid-template-columns: 48px 1fr 78px 1fr 48px;
+ gap: 6px;
+ }
+
+ &__pipeline-lane span,
+ &__pipeline-core span,
+ &__pipeline-core strong {
+ min-height: 34px;
+ font-size: 9px;
+ }
+
+ &__pipeline-core strong {
+ min-height: 48px;
+ font-size: 12px;
+ }
+
+ &__lake-core {
+ width: 86px;
+ height: 86px;
+ font-size: 13px;
+ box-shadow:
+ 0 14px 34px rgba(6, 70, 50, 0.25),
+ 0 0 0 18px rgba(6, 70, 50, 0.08),
+ 0 0 0 42px rgba(6, 70, 50, 0.05);
+ }
+
+ &__lake-node {
+ min-width: 58px;
+ min-height: 30px;
+ font-size: 9px;
+ }
+
+ &__search-query {
+ max-width: 240px;
+ padding: 12px 14px;
+ font-size: 10px;
+ }
+
+ &__search-row {
+ grid-template-columns: 58px 1fr 34px;
+ gap: 8px;
+ padding: 10px;
+ font-size: 9px;
+ }
+
+ &__stage-progress {
+ display: none;
+ }
+ }
+}
+
+@media (max-width: 640px) {
+ .features-next {
+ &__headline-line--accent {
+ white-space: normal;
+ }
+ }
+}
+
+@media (max-width: 460px) {
+ .features-next {
+ &__headline {
+ font-size: 28px;
+ }
+
+ &__stack-container {
+ padding: 0 0 64px;
+ }
+
+ &__card {
+ grid-template-rows: minmax(0, 1fr) 166px;
+ }
+
+ &__copy {
+ padding: 42px 20px 18px;
+ }
+
+ &__card-num {
+ left: 20px;
+ }
+
+ &__card-title {
+ font-size: 26px;
+ }
+
+ &__visual {
+ min-height: 166px;
+ }
+
+ &__visual-tag {
+ display: none;
+ }
+
+ &__visual-content {
+ width: 86%;
+ min-height: 132px;
+ }
+
+ &__visual-content--pipeline {
+ gap: 16px;
+ }
+
+ &__visual-content--lakehouse {
+ min-height: 144px;
+ }
+
+ &__lake-node--5,
+ &__lake-node--6 {
+ display: none;
+ }
+ }
+}
+
+// Small-screen: drop the visual side and show text only.
+@media (max-width: 768px) {
+ .features-next {
+ &__card {
+ grid-template-rows: minmax(0, 1fr);
+ }
+
+ &__visual {
+ display: none;
+ }
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .features-next {
+ &__card,
+ &__card-cta,
+ &__stage-dot {
+ transition: none;
+ }
+ }
+}
diff --git a/src/components/home-next/sections/FeaturesSection.tsx b/src/components/home-next/sections/FeaturesSection.tsx
new file mode 100644
index 00000000000..124e99ff257
--- /dev/null
+++ b/src/components/home-next/sections/FeaturesSection.tsx
@@ -0,0 +1,373 @@
+import React, { CSSProperties, JSX, useEffect, useRef, useState } from 'react';
+import './FeaturesSection.scss';
+
+type CapabilityTone = 'green' | 'cream' | 'ink';
+type CapabilityVisual = 'pipeline' | 'lakehouse' | 'search' | 'realtime';
+
+interface CapabilityItem {
+ term: string;
+ desc: string;
+}
+
+interface Capability {
+ num: string;
+ title: string;
+ subtitle: string;
+ tone: CapabilityTone;
+ visual: CapabilityVisual;
+ illoTag: string;
+ rotation: number;
+ cta: {
+ label: string;
+ href: string;
+ };
+ items: CapabilityItem[];
+}
+
+const CAPABILITIES: Capability[] = [
+ {
+ num: '01',
+ title: 'Real-Time Analytics',
+ subtitle: 'The fastest end-to-end engine from ingestion to insight.',
+ tone: 'green',
+ visual: 'realtime',
+ illoTag: 'High Concurrency / Low Latency',
+ rotation: -2.2,
+ cta: {
+ label: 'Explore real-time analytics(Comming Soon)',
+ href: '#',
+ },
+ items: [
+ { term: 'Streaming Ingestion', desc: 'Ingest from Kafka and database CDC with second-level freshness.' },
+ { term: 'Incremental Transform', desc: 'Materialized views refresh complex transforms in minutes, not hours.' },
+ { term: 'Sub-Second Queries', desc: 'Stay sub-second under high concurrency, even on petabyte-scale data.' },
+ ],
+ },
+ {
+ num: '02',
+ title: 'Lakehouse Analytics',
+ subtitle: 'Real-time analytics, applied directly to your open lakehouse.',
+ tone: 'cream',
+ visual: 'lakehouse',
+ illoTag: 'Iceberg / Delta Lake / Hudi',
+ rotation: 1.6,
+ cta: {
+ label: 'Explore lakehouse analytics(Comming Soon)',
+ href: '#',
+ },
+ items: [
+ { term: 'Extensive Catalog Support', desc: 'Query Iceberg, Delta Lake, and Hudi tables in place, with no data copy.' },
+ { term: 'Lightning-Fast Query Engine', desc: 'Vectorized execution and smart metadata caching make lake queries fast.' },
+ { term: 'Incremental Bi-directional Sync', desc: 'Stream data both ways between open lake formats and Doris internal storage.' },
+ ],
+ },
+ {
+ num: '03',
+ title: 'Hybrid Search',
+ subtitle: 'First-class search across structured, text, and vector data.',
+ tone: 'ink',
+ visual: 'search',
+ illoTag: 'JSON / Text / Vector',
+ rotation: -1.4,
+ cta: {
+ label: 'Explore hybrid search(Comming Soon)',
+ href: '#',
+ },
+ items: [
+ { term: 'JSON Analytics', desc: 'Auto-columnar storage for agent traces and tool-call metadata, with 50x faster analysis.' },
+ { term: 'Text Search', desc: 'Fast BM25 retrieval for RAG, agent memory, and observability logs.' },
+ { term: 'Vector Search', desc: 'Built-in HNSW and IVF indexes for semantic retrieval over embeddings.' },
+ ],
+ },
+];
+
+interface CapabilityCardStyle extends CSSProperties {
+ zIndex: number;
+}
+
+function clamp(value: number, min: number, max: number): number {
+ return Math.max(min, Math.min(max, value));
+}
+
+function easeOut(value: number): number {
+ return 1 - Math.pow(1 - value, 2.5);
+}
+
+function useContainerProgress(ref: React.RefObject<HTMLElement>): number {
+ const [progress, setProgress] = useState(0);
+
+ useEffect(() => {
+ const el = ref.current;
+ if (!el) return undefined;
+
+ let frame = 0;
+
+ function update() {
+ window.cancelAnimationFrame(frame);
+ frame = window.requestAnimationFrame(() => {
+ const rect = el.getBoundingClientRect();
+ const viewportHeight = window.innerHeight;
+ const scrollable = rect.height - viewportHeight;
+
+ if (scrollable <= 0) {
+ setProgress(rect.top <= 0 ? 1 : 0);
+ return;
+ }
+
+ setProgress(clamp(-rect.top / scrollable, 0, 1));
+ });
+ }
+
+ update();
+ window.addEventListener('scroll', update, { passive: true });
+ window.addEventListener('resize', update);
+
+ return () => {
+ window.cancelAnimationFrame(frame);
+ window.removeEventListener('scroll', update);
+ window.removeEventListener('resize', update);
+ };
+ }, [ref]);
+
+ return progress;
+}
+
+function useIsNarrowViewport(): boolean {
+ const [isNarrowViewport, setIsNarrowViewport] = useState(false);
+
+ useEffect(() => {
+ const query = window.matchMedia('(max-width: 820px)');
+ const update = () => setIsNarrowViewport(query.matches);
+
+ update();
+ query.addEventListener('change', update);
+ return () => query.removeEventListener('change', update);
+ }, []);
+
+ return isNarrowViewport;
+}
+
+function getCardStyle(capability: Capability, idx: number, total: number, progress: number): CapabilityCardStyle {
+ const transitions = Math.max(1, total - 1);
+ const slice = 1 / transitions;
+ const activeAt = idx * slice;
+ const previousAt = (idx - 1) * slice;
+
+ let translateY = 0;
+ let opacity = 1;
+ let scale = 1;
+ let rotation = capability.rotation;
+
+ if (idx === 0) {
+ const coveredBy = clamp(progress / slice, 0, 1);
+ const coveredByNext = total > 2 ? clamp((progress - slice) / slice, 0, 1) : 0;
+ const coverAmount = coveredBy + coveredByNext;
+
+ translateY = -coverAmount * 18;
+ scale = 1 - coverAmount * 0.035;
+ rotation = capability.rotation - coverAmount * 0.6;
+ } else {
+ const slideProgress = clamp((progress - previousAt) / slice, 0, 1);
+ const eased = easeOut(slideProgress);
+
+ translateY = (1 - eased) * 720;
+ scale = 0.94 + eased * 0.06;
+ rotation = capability.rotation + (1 - eased) * (capability.rotation > 0 ? 4 : -4);
+ opacity = slideProgress < 0.02 ? 0 : 1;
+
+ if (idx < total - 1) {
+ const coveredBy = clamp((progress - activeAt) / slice, 0, 1);
+ translateY -= coveredBy * 18;
+ scale -= coveredBy * 0.035;
+ rotation -= coveredBy * 0.6;
+ }
+ }
+
+ return {
+ transform: `translate(-50%, -50%) translateY(${translateY}px) scale(${scale}) rotate(${rotation}deg)`,
+ opacity,
+ zIndex: 10 + idx,
+ };
+}
+
+function ArrowIcon(): JSX.Element {
+ return (
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+ <path d="M5 12h14M13 5l7 7-7 7" />
+ </svg>
+ );
+}
+
+function PipelineVisual(): JSX.Element {
+ return (
+ <div className="features-next__visual-content features-next__visual-content--pipeline" aria-hidden="true">
+ <div className="features-next__pipeline-lane">
+ <span>Kafka</span>
+ <i />
+ <span>CDC</span>
+ </div>
+ <div className="features-next__pipeline-core">
+ <span>MV</span>
+ <i />
+ <strong>Doris</strong>
+ <i />
+ <span>10 ms</span>
+ </div>
+ <div className="features-next__pipeline-lane">
+ <span>BI</span>
+ <i />
+ <span>Apps</span>
+ </div>
+ </div>
+ );
+}
+
+function LakehouseVisual(): JSX.Element {
+ return (
+ <div className="features-next__visual-content features-next__visual-content--realtime" aria-hidden="true">
+ <iframe
+ className="features-next__realtime-frame"
+ src="/home-next/lake-analytics.html"
+ title="Lakehouse Analytics animation"
+ loading="lazy"
+ tabIndex={-1}
+ />
+ </div>
+ );
+}
+
+function SearchVisual(): JSX.Element {
+ return (
+ <div className="features-next__visual-content features-next__visual-content--realtime" aria-hidden="true">
+ <iframe
+ className="features-next__realtime-frame"
+ src="/home-next/hybrid-search.html"
+ title="Hybrid Search animation"
+ loading="lazy"
+ tabIndex={-1}
+ />
+ </div>
+ );
+}
+
+function RealtimeAnalyticsVisual(): JSX.Element {
+ return (
+ <div className="features-next__visual-content features-next__visual-content--realtime" aria-hidden="true">
+ <iframe
+ className="features-next__realtime-frame"
+ src="/home-next/realtime-analytics.html"
+ title="Real-Time Analytics animation"
+ loading="lazy"
+ tabIndex={-1}
+ />
+ </div>
+ );
+}
+
+function CapabilityVisual({ capability }: { capability: Capability }): JSX.Element {
+ return (
+ <div className={`features-next__visual features-next__visual--${capability.tone}`}>
+ <div className="features-next__visual-tag">{capability.illoTag}</div>
+ {capability.visual === 'realtime' && <RealtimeAnalyticsVisual />}
+ {capability.visual === 'pipeline' && <PipelineVisual />}
+ {capability.visual === 'lakehouse' && <LakehouseVisual />}
+ {capability.visual === 'search' && <SearchVisual />}
+ </div>
+ );
+}
+
+interface CapabilityCardProps {
+ capability: Capability;
+ idx: number;
+ total: number;
+ progress: number;
+ isNarrowViewport: boolean;
+}
+
+function CapabilityCard({ capability, idx, total, progress, isNarrowViewport }: CapabilityCardProps): JSX.Element {
+ return (
+ <article
+ className={`features-next__card features-next__card--${capability.tone}`}
+ style={isNarrowViewport ? undefined : getCardStyle(capability, idx, total, progress)}
+ >
+ <div className="features-next__copy">
+ <div className="features-next__card-num">
+ {capability.num} / 0{total}
+ </div>
+ <h3 className="features-next__card-title">{capability.title}</h3>
+ <p className="features-next__card-subtitle">{capability.subtitle}</p>
+ <ul className="features-next__list">
+ {capability.items.map(item => (
+ <li className="features-next__list-item" key={item.term}>
+ <span className="features-next__list-icon" aria-hidden="true">
+ <ArrowIcon />
+ </span>
+ <span>
+ <span className="features-next__list-term">{item.term}</span>
+ <span className="features-next__list-desc">{item.desc}</span>
+ </span>
+ </li>
+ ))}
+ </ul>
+ <a className="features-next__card-cta" href={capability.cta.href}>
+ {capability.cta.label}
+ <ArrowIcon />
+ </a>
+ </div>
+ <CapabilityVisual capability={capability} />
+ </article>
+ );
+}
+
+export function FeaturesSection(): JSX.Element {
+ const containerRef = useRef<HTMLDivElement>(null);
+ const isNarrowViewport = useIsNarrowViewport();
+ const progress = useContainerProgress(containerRef);
+
+ return (
+ <section className="features-next">
+ <div className="home-next-container">
+ <div className="features-next__header">
+ <div className="features-next__eyebrow">Core Capabilities</div>
+ <h2 className="features-next__headline">
+ <span className="features-next__headline-line">Build For</span>
+ <span className="features-next__headline-line features-next__headline-line--accent">
+ Every Kind of Modern Analytics Workload
+ </span>
+ </h2>
+ </div>
+ <div
+ className="features-next__stack-container"
+ ref={containerRef}
+ style={isNarrowViewport ? undefined : { height: `${CAPABILITIES.length * 100}vh` }}
+ >
+ <div className="features-next__stage">
+ {CAPABILITIES.map((capability, i) => (
+ <CapabilityCard
+ key={capability.num}
+ capability={capability}
+ idx={i}
+ total={CAPABILITIES.length}
+ progress={progress}
+ isNarrowViewport={isNarrowViewport}
+ />
+ ))}
+ <div className="features-next__stage-progress" aria-hidden="true">
+ {CAPABILITIES.map((capability, i) => {
+ const transitions = Math.max(1, CAPABILITIES.length - 1);
+ const isOn = progress >= i / transitions - 0.001;
+
+ return (
+ <span
+ key={capability.num}
+ className={isOn ? 'features-next__stage-dot features-next__stage-dot--on' : 'features-next__stage-dot'}
+ />
+ );
+ })}
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ );
+}
diff --git a/src/components/home-next/sections/HeroSection.scss b/src/components/home-next/sections/HeroSection.scss
new file mode 100644
index 00000000000..50d67d855d5
--- /dev/null
+++ b/src/components/home-next/sections/HeroSection.scss
@@ -0,0 +1,1582 @@
+// ─── Design tokens (scoped to hero) ──────────────────────────────────────────
+
+@use '../../shared/typography' as type;
+
+.hero-next {
+ --hn-green-dark: #06805F;
+ --hn-green-darker: #054C39;
+ --hn-green-glow: #2DDFA8;
+ --hn-cream-light: #FAF6EE;
+ --hn-yellow: #FFD23F;
+ --hn-yellow-bright: #FFE066;
+ --hn-coral: #FF5C39;
+ --hn-ink: #0F1A14;
+ --hn-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ --hn-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+// ─── Hero wrapper ─────────────────────────────────────────────────────────────
+
+.hero-next {
+ position: relative;
+ overflow: hidden;
+ background: var(--hn-green-dark);
+ color: var(--hn-cream-light);
+ font-family: var(--hn-sans);
+ padding-bottom: 2.5rem;
+
+ // ── Background layers ──────────────────────────────────────────────────
+
+ &__bg-glow {
+ position: absolute;
+ inset: 0;
+ z-index: 1;
+ background:
+ radial-gradient(ellipse at 75% 15%, rgba(45, 223, 168, 0.20), transparent 55%),
+ radial-gradient(ellipse at 0% 100%, rgba(255, 210, 63, 0.06), transparent 55%);
+ pointer-events: none;
+ }
+
+ &__bg-grid {
+ position: absolute;
+ inset: 0;
+ z-index: 2;
+ background-image: radial-gradient(rgba(245, 239, 228, 0.09) 1.2px, transparent 1.2px);
+ background-size: 28px 28px;
+ mask-image: linear-gradient(180deg, black, black 70%, transparent);
+ pointer-events: none;
+ }
+
+ &__bolt-bg {
+ position: absolute;
+ top: -80px;
+ right: -160px;
+ z-index: 3;
+ opacity: 0.85;
+ pointer-events: none;
+ }
+
+ // ── Content grid ───────────────────────────────────────────────────────
+
+ &__content {
+ position: relative;
+ z-index: 10;
+ display: grid;
+ grid-template-columns: 1fr 1.05fr;
+ gap: 48px;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 36px 56px 0;
+ align-items: stretch;
+ }
+
+ &__left {
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ justify-content: flex-start;
+ }
+
+ &__intro {
+ width: 100%;
+ }
+
+ // ── Eyebrow ────────────────────────────────────────────────────────────
+
+ &__eyebrow {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ @include type.mono-text(11.5px, 500, 1.2, 0.14em, uppercase);
+ color: rgba(245, 239, 228, 0.7);
+ margin-bottom: 18px;
+ flex-wrap: wrap;
+ width: fit-content;
+ }
+
+ &__eyebrow-line {
+ display: inline-block;
+ width: 28px;
+ height: 1.5px;
+ background: var(--hn-yellow);
+ flex-shrink: 0;
+ }
+
+ &__ver-pill {
+ padding: 3px 8px;
+ border: 1px solid rgba(255, 210, 63, 0.4);
+ color: var(--hn-yellow);
+ border-radius: 3px;
+ letter-spacing: 0.06em;
+ flex-shrink: 0;
+ }
+
+ // ── Title ──────────────────────────────────────────────────────────────
+
+ &__title {
+ // override Docusaurus heading defaults
+ @include type.hero-title;
+ font-family: var(--hn-mono) !important;
+ color: var(--hn-cream-light) !important;
+ margin: 0 !important;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ &__title-line {
+ display: block;
+ }
+
+ &__title-fast {
+ display: inline-flex;
+ align-items: center;
+ gap: 14px;
+ width: fit-content;
+ }
+
+ &__title-accent {
+ color: var(--hn-yellow);
+ }
+
+ // ── Subtitle ───────────────────────────────────────────────────────────
+
+ &__sub {
+ @include type.body-copy;
+ color: rgba(245, 239, 228, 0.82);
+ margin: 18px 0 22px !important;
+ max-width: 480px;
+ }
+
+ // ── CTA buttons ────────────────────────────────────────────────────────
+
+ &__ctas {
+ display: flex;
+ gap: 12px;
+ align-items: center;
+ flex-wrap: wrap;
+ }
+
+ &__btn {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.55rem;
+ padding: 0.75rem 1.25rem;
+ @include type.mono-text(12.5px, 600, 1.2, 0.04em, uppercase);
+ border-radius: 4px;
+ border: 1.5px solid transparent;
+ cursor: pointer;
+ transition: transform 0.15s ease, background 0.15s ease;
+ text-decoration: none !important;
+ white-space: nowrap;
+
+ &:hover {
+ transform: translateY(-1px);
+ text-decoration: none !important;
+ }
+
+ &--yellow {
+ background: var(--hn-yellow);
+ color: var(--hn-ink) !important;
+ border-color: var(--hn-yellow);
+
+ &:hover {
+ background: var(--hn-yellow-bright);
+ color: var(--hn-ink) !important;
+ }
+ }
+
+ &--primary {
+ background: var(--hn-cream-light);
+ color: var(--hn-green-darker) !important;
+ border-color: var(--hn-cream-light);
+
+ &:hover {
+ background: #FFFCF5;
+ color: var(--hn-green-darker) !important;
+ }
+ }
+
+ &--ghost {
+ background: transparent;
+ color: var(--hn-cream-light) !important;
+ border-color: rgba(245, 239, 228, 0.4);
+
+ &:hover {
+ background: rgba(245, 239, 228, 0.08);
+ border-color: var(--hn-cream-light);
+ color: var(--hn-cream-light) !important;
+ }
+ }
+ }
+
+ // ── Right column ───────────────────────────────────────────────────────
+
+ &__right {
+ padding-top: 0;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ }
+
+ &__card-wrap {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 0;
+ margin-top: 0;
+ }
+
+ &__result-wrap {
+ margin-top: 22px;
+ animation: hn-result-wrap-in 0.5s ease both;
+ }
+
+ &__sql-wrap {
+ position: relative;
+ }
+
+ &__perf-pill {
+ position: absolute;
+ right: 16px;
+ bottom: -18px;
+ z-index: 30;
+
+ background: var(--hn-yellow);
+ color: var(--hn-ink);
+ font-family: var(--hn-mono);
+ font-size: 11px;
+ font-weight: 700;
+ padding: 8px 12px;
+ border-radius: 4px;
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ letter-spacing: 0.02em;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+ transform: rotate(-1.5deg);
+ white-space: nowrap;
+ transform-origin: 80% 50%;
+ animation: hn-pill-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s both;
+
+ strong {
+ font-weight: 800;
+ }
+ }
+
+ // ── Floating shapes ────────────────────────────────────────────────────
+
+ &__shape {
+ position: absolute;
+ pointer-events: none;
+ z-index: 5;
+
+ &--diamond {
+ width: 16px;
+ height: 16px;
+ background: var(--hn-yellow);
+ transform: rotate(45deg);
+ }
+
+ &--circle {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ background: var(--hn-coral);
+ }
+
+ &--ring {
+ width: 22px;
+ height: 22px;
+ border-radius: 50%;
+ border: 2px solid var(--hn-yellow);
+ }
+
+ &--cross {
+ width: 18px;
+ height: 18px;
+ position: relative;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ background: var(--hn-cream-light);
+ }
+
+ &::before {
+ width: 100%;
+ height: 2px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ &::after {
+ height: 100%;
+ width: 2px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+ }
+ }
+}
+
+// ─── Lightning SVG ────────────────────────────────────────────────────────────
+
+.hero-next-lightning {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+// ─── SQL Card ─────────────────────────────────────────────────────────────────
+
+.hn-sql-card {
+ background: #0F1A14;
+ border-radius: 10px;
+ border: 1px solid rgba(245, 239, 228, 0.1);
+ overflow: hidden;
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ box-shadow:
+ 0 30px 60px -20px rgba(0, 0, 0, 0.5),
+ 0 0 0 1px rgba(255, 210, 63, 0.05);
+
+ &__bar {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 5px 10px 5px 14px;
+ min-height: 34px;
+ background: rgba(245, 239, 228, 0.04);
+ border-bottom: 1px solid rgba(245, 239, 228, 0.08);
+ @include type.micro-label;
+ color: rgba(245, 239, 228, 0.5);
+
+ &--executing {
+ background: rgba(255, 210, 63, 0.06);
+
+ .hn-sql-card__result-text {
+ color: var(--hn-yellow);
+ animation: hn-result-pulse 1.0s ease-in-out infinite;
+ }
+ }
+
+ &--done {
+ background: rgba(17, 166, 121, 0.10);
+ }
+ }
+
+ &__bar-actions {
+ margin-left: auto;
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+ min-width: 0;
+ flex-shrink: 1;
+ }
+
+ &__status {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+ min-width: 0;
+ flex-shrink: 1;
+ }
+
+ &__dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ flex-shrink: 0;
+
+ &--r { background: #FF5F57; }
+ &--y { background: #FEBC2E; }
+ &--g { background: #28C840; }
+ }
+
+ &__title {
+ margin-left: 8px;
+ font-size: 12px;
+ flex-shrink: 1;
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__body {
+ padding: 10px 16px 12px;
+ @include type.sans-text(13px, 400, 1.6);
+ color: #D8DCD0;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ &__line {
+ display: flex;
+ gap: 14px;
+ height: 20px;
+ align-items: baseline;
+ overflow: visible;
+ white-space: nowrap;
+ }
+
+ &__content {
+ white-space: pre;
+ display: inline-block;
+ }
+
+ &__ln {
+ color: rgba(245, 239, 228, 0.25);
+ user-select: none;
+ min-width: 18px;
+ text-align: right;
+ flex-shrink: 0;
+ }
+
+ // Syntax tokens
+ &__tok {
+ &--kw { color: #FF8FA3; font-weight: 500; }
+ &--fn { color: #FFD23F; }
+ &--str { color: #98D9A0; }
+ &--num { color: #C7B5FF; }
+ &--op { color: rgba(216, 220, 208, 0.7); }
+ &--cmt { color: rgba(216, 220, 208, 0.4); font-style: italic; }
+ }
+
+ &__cursor {
+ display: inline-block;
+ width: 8px;
+ height: 16px;
+ background: #FFD23F;
+ vertical-align: text-bottom;
+ margin-left: 2px;
+ animation: hn-blink 1s steps(2) infinite;
+ }
+
+ &__result-text {
+ @include type.micro-label;
+ color: rgba(245, 239, 228, 0.65);
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__result-time {
+ @include type.mono-text(11.5px, 700, 1.2, 0);
+ color: #2DDFA8;
+ flex-shrink: 0;
+ }
+
+ &__run {
+ flex-shrink: 0;
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ padding: 4px 10px;
+ background: var(--hn-yellow);
+ color: var(--hn-ink);
+ border: 0;
+ border-radius: 4px;
+ font-family: var(--hn-mono);
+ font-size: 10.5px;
+ font-weight: 800;
+ letter-spacing: 0.12em;
+ cursor: pointer;
+ transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+
+ &:hover {
+ background: var(--hn-yellow-bright);
+ }
+
+ &:active {
+ transform: scale(0.96);
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--hn-yellow);
+ outline-offset: 2px;
+ }
+
+ &:disabled {
+ opacity: 0.45;
+ cursor: not-allowed;
+ animation: none;
+
+ &:hover {
+ background: var(--hn-yellow);
+ }
+ }
+
+ &--pulse {
+ animation: hn-run-pulse 1.6s ease-in-out infinite;
+ }
+
+ &--reset {
+ background: rgba(245, 239, 228, 0.14);
+ color: var(--hn-cream-light);
+ animation: none;
+
+ &:hover {
+ background: rgba(245, 239, 228, 0.24);
+ }
+ }
+ }
+
+ &__run-glyph {
+ font-size: 9px;
+ line-height: 1;
+ display: inline-block;
+ }
+}
+
+@keyframes hn-run-pulse {
+ 0%, 100% {
+ transform: scale(1);
+ box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.55);
+ }
+ 50% {
+ transform: scale(1.08);
+ box-shadow: 0 0 0 7px rgba(255, 210, 63, 0);
+ }
+}
+
+@keyframes hn-result-pulse {
+ 50% { opacity: 0.55; }
+}
+
+@keyframes hn-pill-in {
+ from {
+ opacity: 0;
+ transform: rotate(-1.5deg) translateY(8px) scale(0.9);
+ }
+ to {
+ opacity: 1;
+ transform: rotate(-1.5deg) translateY(0) scale(1);
+ }
+}
+
+@keyframes hn-result-wrap-in {
+ from { opacity: 0; transform: translateY(6px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+// ─── Result Table ─────────────────────────────────────────────────────────────
+
+.hn-result-table {
+ background: var(--hn-cream-light);
+ border: 1px solid rgba(15, 26, 20, 0.08);
+ border-radius: 10px;
+ overflow: hidden;
+ font-family: var(--hn-mono);
+ box-shadow:
+ 0 24px 48px -22px rgba(0, 0, 0, 0.45),
+ 0 0 0 1px rgba(15, 26, 20, 0.04);
+
+ &__head {
+ display: grid;
+ grid-template-columns: 32px minmax(0, 1fr) 110px 80px;
+ gap: 12px;
+ padding: 7px 16px;
+ background: rgba(15, 26, 20, 0.04);
+ border-bottom: 1px solid rgba(15, 26, 20, 0.08);
+ }
+
+ &__head-cell {
+ @include type.micro-label;
+ color: rgba(15, 26, 20, 0.5);
+ font-size: 9.5px;
+
+ &--rank {
+ text-align: center;
+ }
+
+ &--num {
+ text-align: right;
+ }
+ }
+
+ &__body {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__row {
+ display: grid;
+ grid-template-columns: 32px minmax(0, 1fr) 110px 80px;
+ gap: 12px;
+ padding: 7px 16px;
+ align-items: center;
+ border-bottom: 1px solid rgba(15, 26, 20, 0.06);
+ opacity: 0;
+ transform: translateY(6px);
+ animation: hn-row-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+ transition: background 0.18s ease, box-shadow 0.18s ease;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &:hover {
+ background: rgba(255, 210, 63, 0.18);
+ box-shadow: inset 3px 0 0 var(--hn-yellow);
+
+ .hn-result-table__cell--rank {
+ color: var(--hn-green-darker);
+ }
+
+ .hn-result-table__cell--num {
+ color: var(--hn-green-darker);
+ }
+ }
+ }
+
+ &__cell {
+ font-size: 12px;
+ color: rgba(15, 26, 20, 0.85);
+ line-height: 1.3;
+ transition: color 0.15s ease;
+
+ &--rank {
+ color: rgba(15, 26, 20, 0.55);
+ font-weight: 700;
+ text-align: center;
+ font-variant-numeric: tabular-nums;
+ }
+
+ &--title {
+ font-family: var(--hn-sans);
+ font-size: 12.5px;
+ color: var(--hn-ink);
+ font-weight: 600;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &--date {
+ color: rgba(15, 26, 20, 0.55);
+ font-size: 11px;
+ letter-spacing: 0.02em;
+ }
+
+ &--num {
+ color: var(--hn-green-dark);
+ text-align: right;
+ font-weight: 700;
+ font-variant-numeric: tabular-nums;
+ }
+ }
+
+ &__footer {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 7px 16px;
+ background: rgba(15, 26, 20, 0.05);
+ border-top: 1px solid rgba(15, 26, 20, 0.08);
+ }
+
+ &__footer-text {
+ @include type.micro-label;
+ color: rgba(15, 26, 20, 0.7);
+ font-size: 9.5px;
+ }
+}
+
+@keyframes hn-row-in {
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes hn-blink {
+ 50% { opacity: 0; }
+}
+
+// ─── Search Results ───────────────────────────────────────────────────────────
+
+.hn-search-results {
+ background: #054C39;
+ border: 1px solid rgba(245, 239, 228, 0.1);
+ border-radius: 10px;
+ overflow: hidden;
+ box-shadow:
+ 0 30px 60px -20px rgba(0, 0, 0, 0.45),
+ 0 0 0 1px rgba(255, 210, 63, 0.04);
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+
+ &__head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 18px;
+ background: rgba(0, 0, 0, 0.18);
+ border-bottom: 1px solid rgba(245, 239, 228, 0.08);
+ }
+
+ &__head-label {
+ @include type.micro-label;
+ color: rgba(245, 239, 228, 0.5);
+ }
+
+ &__legend {
+ display: flex;
+ gap: 14px;
+ @include type.micro-label;
+ color: rgba(245, 239, 228, 0.65);
+ }
+
+ &__legend-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ }
+
+ &__dot {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ border-radius: 2px;
+ flex-shrink: 0;
+
+ &--text { background: #FFD23F; }
+ &--vec { background: #2DDFA8; }
+ &--str { background: #C7B5FF; }
+ }
+
+ &__rows {
+ display: flex;
+ flex-direction: column;
+ }
+
+ &__row {
+ position: relative;
+ display: grid;
+ grid-template-columns: 26px 1fr 160px 42px;
+ gap: 10px;
+ padding: 8px 16px;
+ align-items: center;
+ border-bottom: 1px solid rgba(245, 239, 228, 0.05);
+ opacity: 0;
+ transform: translateX(-6px);
+ transition:
+ opacity 0.35s ease,
+ transform 0.35s ease,
+ background 0.18s ease,
+ border-color 0.18s ease,
+ box-shadow 0.18s ease;
+
+ &:last-child {
+ border-bottom: none;
+ }
+
+ &--visible {
+ opacity: 1;
+ transform: translateX(0);
+
+ &:hover {
+ background: rgba(255, 210, 63, 0.10);
+ border-bottom-color: rgba(255, 210, 63, 0.22);
+ box-shadow:
+ inset 3px 0 0 #FFD23F,
+ 0 10px 28px rgba(0, 0, 0, 0.18);
+ transform: translateX(3px);
+ z-index: 1;
+
+ .hn-search-results__rank,
+ .hn-search-results__score {
+ color: #FFD23F;
+ }
+
+ .hn-search-results__title {
+ color: #FFFFFF;
+ }
+
+ .hn-search-results__bar-track {
+ background: rgba(245, 239, 228, 0.16);
+ }
+
+ .hn-search-results__bar-fill {
+ box-shadow: 0 0 10px rgba(255, 210, 63, 0.28);
+ }
+ }
+ }
+ }
+
+ &__rank {
+ font-size: 11px;
+ color: rgba(245, 239, 228, 0.4);
+ font-weight: 700;
+ letter-spacing: 0.02em;
+ transition: color 0.18s ease;
+ }
+
+ &__info {
+ min-width: 0;
+ }
+
+ &__title {
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ font-size: 12.5px;
+ font-weight: 600;
+ color: #FAF6EE;
+ letter-spacing: 0.005em;
+ margin-bottom: 2px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ transition: color 0.18s ease;
+ }
+
+ &__meta {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ font-size: 10.5px;
+ color: rgba(245, 239, 228, 0.5);
+ letter-spacing: 0.04em;
+
+ strong {
+ color: #FFD23F;
+ font-weight: 600;
+ }
+ }
+
+ &__meta-dot {
+ opacity: 0.5;
+ }
+
+ &__bars {
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ }
+
+ &__bar-track {
+ width: 100%;
+ height: 4px;
+ background: rgba(245, 239, 228, 0.07);
+ border-radius: 2px;
+ overflow: hidden;
+ transition: background 0.18s ease;
+ }
+
+ &__bar-fill {
+ height: 100%;
+ border-radius: 2px;
+ transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.18s ease;
+
+ &--text { background: #FFD23F; }
+ &--vec { background: #2DDFA8; }
+ &--str { background: #C7B5FF; }
+ }
+
+ &__score {
+ font-size: 13px;
+ font-weight: 700;
+ color: #FAF6EE;
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+ transition: color 0.18s ease;
+ }
+}
+
+// ─── Report Carousel ─────────────────────────────────────────────────────────
+
+.hn-report-carousel {
+ position: relative;
+ min-height: 280px;
+
+ &__pane {
+ transition: opacity 0.5s ease;
+ }
+
+ &__pane--active {
+ opacity: 1;
+ }
+
+ &__pane--inactive {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ &__dots {
+ position: absolute;
+ bottom: -22px;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ z-index: 5;
+ }
+
+ &__dot {
+ width: 6px !important;
+ height: 6px !important;
+ border-radius: 50% !important;
+ background: rgba(255, 210, 63, 0.35);
+ transition: background 0.2s ease, width 0.3s ease, height 0.3s ease, transform 0.2s ease;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ cursor: pointer;
+ appearance: none;
+ box-shadow: none;
+ font: inherit;
+ color: inherit;
+ line-height: 0;
+
+ &:hover {
+ background: rgba(255, 210, 63, 0.65);
+ transform: scale(1.15);
+ }
+
+ &:focus-visible {
+ outline: 2px solid #FFD23F;
+ outline-offset: 3px;
+ }
+
+ &--active {
+ background: #FFD23F;
+ width: 12px !important;
+ height: 12px !important;
+ border-radius: 50% !important;
+
+ &:hover {
+ background: #FFD23F;
+ transform: none;
+ }
+ }
+ }
+}
+
+// ─── Node Graph + Bars Report ────────────────────────────────────────────────
+
+.hn-node-bars {
+ display: grid;
+ grid-template-columns: 1.05fr 1fr;
+ gap: 12px;
+ background: #054C39;
+ border: 1px solid rgba(245, 239, 228, 0.1);
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 14px;
+ box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
+
+ &__pane {
+ background: rgba(0, 0, 0, 0.18);
+ border-radius: 8px;
+ border: 1px solid rgba(245, 239, 228, 0.06);
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ }
+}
+
+.hn-node-graph {
+ height: 280px;
+ display: flex;
+ flex-direction: column;
+
+ &__head {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px 14px;
+ border-bottom: 1px solid rgba(245, 239, 228, 0.06);
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ font-size: 9.5px;
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ }
+
+ &__head-label {
+ color: rgba(245, 239, 228, 0.55);
+ font-weight: 600;
+ }
+
+ &__canvas {
+ position: relative;
+ flex: 1;
+ perspective: 800px;
+ cursor: grab;
+ user-select: none;
+ touch-action: none;
+
+ &--dragging {
+ cursor: grabbing;
+ }
+ }
+
+ &__svg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+
+ line {
+ transition: stroke 0.15s, stroke-width 0.15s, stroke-opacity 0.15s;
+ }
+ }
+
+ &__node {
+ position: absolute;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: box-shadow 0.2s ease, opacity 0.15s ease;
+ cursor: pointer;
+ appearance: none;
+ background-image: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%);
+
+ &:focus-visible {
+ outline: 2px solid #FFD23F;
+ outline-offset: 3px;
+ }
+
+ &--hovered {
+ z-index: 9999 !important;
+ }
+ }
+}
+
+.hn-bar-chart {
+ height: 280px;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ padding: 10px 14px 12px;
+
+ &__head {
+ display: flex;
+ justify-content: space-between;
+ align-items: baseline;
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ margin-bottom: 6px;
+ }
+
+ &__head-label {
+ font-size: 9.5px;
+ letter-spacing: 0.14em;
+ color: rgba(245, 239, 228, 0.55);
+ font-weight: 600;
+ text-transform: uppercase;
+ }
+
+ &__head-num {
+ display: flex;
+ gap: 8px;
+ align-items: baseline;
+ }
+
+ &__head-val {
+ font-size: 18px;
+ font-weight: 800;
+ color: #FAF6EE;
+ }
+
+ &__head-delta {
+ font-size: 10px;
+ color: #2DDFA8;
+ font-weight: 700;
+ }
+
+ &__grid {
+ position: absolute;
+ left: 14px;
+ right: 14px;
+ top: 38px;
+ bottom: 56px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ pointer-events: none;
+ }
+
+ &__grid-line {
+ height: 1px;
+ background: rgba(245, 239, 228, 0.06);
+ }
+
+ &__bars {
+ flex: 1;
+ display: grid;
+ grid-template-columns: repeat(7, 1fr);
+ gap: 6px;
+ align-items: end;
+ padding-top: 6px;
+ position: relative;
+ z-index: 1;
+ }
+
+ &__bar-col {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 6px;
+ height: 100%;
+ }
+
+ &__bar-track {
+ flex: 1;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ }
+
+ &__bar-fill {
+ width: 100%;
+ background: linear-gradient(180deg, #FFD23F 0%, rgba(255, 210, 63, 0.65) 100%);
+ border-radius: 3px 3px 0 0;
+ transition: height 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
+ position: relative;
+
+ &--glow {
+ background: linear-gradient(180deg, #2DDFA8 0%, rgba(45, 223, 168, 0.7) 100%);
+ box-shadow: 0 0 12px rgba(45, 223, 168, 0.5);
+
+ .hn-bar-chart__bar-tip {
+ opacity: 1;
+ color: #FAF6EE;
+ }
+ }
+ }
+
+ &__bar-tip {
+ position: absolute;
+ top: -16px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ font-size: 9px;
+ color: rgba(245, 239, 228, 0.5);
+ opacity: 0;
+ transition: opacity 0.2s;
+ white-space: nowrap;
+ }
+
+ &__bar-label {
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ font-size: 9px;
+ color: rgba(245, 239, 228, 0.45);
+ letter-spacing: 0.06em;
+ }
+
+ &__foot {
+ display: flex;
+ gap: 10px;
+ margin-top: 8px;
+ flex-wrap: wrap;
+ }
+
+ &__foot-chip {
+ display: inline-flex;
+ align-items: center;
+ gap: 5px;
+ font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
+ font-size: 9px;
+ color: rgba(245, 239, 228, 0.6);
+ letter-spacing: 0.04em;
+ text-transform: uppercase;
+
+ i {
+ width: 7px;
+ height: 7px;
+ border-radius: 2px;
+ flex-shrink: 0;
+ }
+ }
+}
+
+@media (max-width: 1180px) {
+ .hero-next {
+ &__content {
+ grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
+ gap: 32px;
+ padding: 34px 32px 0;
+ }
+
+ &__title {
+ font-size: clamp(38px, 4.8vw, 54px);
+ }
+ }
+
+ .hn-search-results {
+ &__row {
+ grid-template-columns: 26px 1fr 118px 38px;
+ gap: 8px;
+ }
+ }
+}
+
+@media (max-width: 960px) {
+ .hero-next {
+ padding-bottom: 4rem;
+
+ &__bolt-bg,
+ &__shape {
+ display: none;
+ }
+
+ &__content {
+ grid-template-columns: 1fr;
+ gap: 32px;
+ padding: 40px 32px 0;
+ }
+
+ &__left {
+ justify-content: flex-start;
+ }
+
+ &__intro {
+ max-width: 720px;
+ }
+
+ &__title {
+ max-width: 720px;
+ font-size: clamp(42px, 8vw, 62px);
+ line-height: 0.96 !important;
+ }
+
+ &__sub {
+ max-width: 640px;
+ }
+
+ &__right {
+ width: 100%;
+ }
+
+ &__card-wrap {
+ max-width: 720px;
+ margin-top: 0;
+ }
+
+ &__perf-pill {
+ right: 12px;
+ bottom: -16px;
+ max-width: calc(100% - 24px);
+ }
+ }
+}
+
+@media (max-width: 700px) {
+ .hero-next {
+ padding-bottom: 3.5rem;
+
+ &__content {
+ padding: 34px 24px 0;
+ }
+
+ &__eyebrow {
+ gap: 8px;
+ font-size: 10.5px;
+ letter-spacing: 0.1em;
+ }
+
+ &__eyebrow-line {
+ width: 22px;
+ }
+
+ &__title {
+ font-size: clamp(36px, 11vw, 48px);
+ gap: 4px;
+ }
+
+ &__title-fast {
+ gap: 10px;
+
+ .hero-next-lightning {
+ width: 42px;
+ height: 42px;
+ }
+ }
+
+ &__sub {
+ font-size: 14px;
+ margin: 16px 0 20px !important;
+ }
+
+ &__ctas {
+ display: grid;
+ grid-template-columns: 1fr;
+ width: 100%;
+ max-width: 360px;
+ }
+
+ &__btn {
+ justify-content: center;
+ min-height: 44px;
+ white-space: normal;
+ text-align: center;
+ }
+
+ &__perf-pill {
+ position: relative;
+ right: auto;
+ bottom: auto;
+ margin: 10px 0 0;
+ transform: none;
+ animation: none;
+ white-space: nowrap;
+ display: flex;
+ width: 100%;
+ max-width: none;
+ justify-content: center;
+ text-align: center;
+ box-sizing: border-box;
+ font-size: clamp(8px, 2.4vw, 11px);
+ letter-spacing: 0;
+ gap: 6px;
+ }
+ }
+
+ .hero-next__result-wrap {
+ margin-top: 12px;
+ }
+
+ .hn-sql-card {
+ border-radius: 8px;
+
+ &__bar {
+ flex-wrap: wrap;
+ row-gap: 6px;
+ padding: 7px 10px;
+ min-height: 0;
+ }
+
+ &__title {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+
+ &__body {
+ overflow-x: auto;
+ padding: 10px 14px 12px;
+ font-size: 12px;
+ }
+
+ &__line {
+ width: max-content;
+ min-width: 430px;
+ }
+
+ &__bar-actions {
+ gap: 8px;
+ flex-wrap: wrap;
+ justify-content: flex-end;
+ }
+
+ &__status {
+ font-size: 10px;
+ gap: 6px;
+ }
+
+ &__result-text {
+ min-width: 0;
+ font-size: 10px;
+ letter-spacing: 0.08em;
+ }
+
+ &__result-time {
+ font-size: 11px;
+ }
+
+ &__run {
+ padding: 5px 10px;
+ font-size: 10px;
+ letter-spacing: 0.1em;
+ }
+ }
+
+ .hn-result-table {
+ &__head {
+ grid-template-columns: 28px minmax(0, 1fr) 90px 60px;
+ gap: 8px;
+ padding: 7px 12px;
+ }
+
+ &__row {
+ grid-template-columns: 28px minmax(0, 1fr) 90px 60px;
+ gap: 8px;
+ padding: 7px 12px;
+ }
+
+ &__cell {
+ font-size: 11.5px;
+
+ &--title {
+ font-size: 12px;
+ }
+
+ &--date {
+ font-size: 10px;
+ }
+ }
+
+ &__footer {
+ padding: 6px 12px;
+ }
+
+ &__footer-text {
+ font-size: 9px;
+ letter-spacing: 0.08em;
+ }
+ }
+
+ .hn-search-results {
+ &__head {
+ align-items: flex-start;
+ flex-direction: column;
+ gap: 8px;
+ padding: 12px 14px;
+ }
+
+ &__legend {
+ flex-wrap: wrap;
+ gap: 8px 12px;
+ }
+
+ &__row {
+ grid-template-columns: 24px minmax(0, 1fr) 38px;
+ padding: 9px 12px;
+ }
+
+ &__bars {
+ display: none;
+ }
+
+ &__title {
+ font-size: 12px;
+ }
+
+ &__meta {
+ gap: 6px;
+ font-size: 10px;
+ }
+ }
+
+ .hn-report-carousel {
+ min-height: 260px;
+
+ &__dots {
+ bottom: -24px;
+ }
+ }
+
+ .hn-node-bars {
+ grid-template-columns: 1fr;
+ padding: 12px;
+ }
+
+ .hn-node-graph,
+ .hn-bar-chart {
+ height: 220px;
+ }
+}
+
+@media (max-width: 480px) {
+ .hero-next {
+ &__content {
+ padding: 30px 20px 0;
+ }
+
+ &__title {
+ font-size: clamp(34px, 12vw, 44px);
+ line-height: 1 !important;
+ }
+
+ &__sub {
+ max-width: none;
+ }
+ }
+
+ .hn-sql-card {
+ &__line {
+ min-width: 390px;
+ }
+
+ &__run-glyph {
+ display: none;
+ }
+ }
+
+ .hn-result-table {
+ &__head {
+ grid-template-columns: 24px minmax(0, 1fr) 56px;
+ gap: 6px;
+ padding: 7px 10px;
+ }
+
+ &__row {
+ grid-template-columns: 24px minmax(0, 1fr) 56px;
+ gap: 6px;
+ padding: 7px 10px;
+ }
+
+ &__head-cell--date,
+ &__cell--date {
+ display: none;
+ }
+
+ &__cell {
+ &--title {
+ font-size: 11.5px;
+ }
+ }
+
+ &__footer {
+ padding: 6px 10px;
+ }
+ }
+
+ .hn-search-results {
+ &__legend {
+ display: none;
+ }
+
+ &__row {
+ grid-template-columns: 22px minmax(0, 1fr) 34px;
+ gap: 7px;
+ }
+
+ &__score {
+ font-size: 12px;
+ }
+ }
+
+ .hn-node-graph,
+ .hn-bar-chart {
+ height: 190px;
+ }
+
+ .hn-bar-chart {
+ &__foot {
+ gap: 6px;
+ }
+ }
+}
+
+// Small-screen: hide the dashboard/report animation under the SQL card.
+@media (max-width: 768px) {
+ .hero-next .hn-report-carousel {
+ display: none;
+ }
+}
diff --git a/src/components/home-next/sections/HeroSection.tsx b/src/components/home-next/sections/HeroSection.tsx
new file mode 100644
index 00000000000..76b14c38d38
--- /dev/null
+++ b/src/components/home-next/sections/HeroSection.tsx
@@ -0,0 +1,829 @@
+import React, { JSX, useState, useEffect, useMemo } from 'react';
+import './HeroSection.scss';
+
+// ─── SVG atoms ───────────────────────────────────────────────────────────────
+
+function LightningSvg({ size = 24, color = '#FFD23F' }: { size?: number; color?: string }): JSX.Element {
+ return (
+ <svg
+ className="hero-next-lightning"
+ width={size}
+ height={size}
+ viewBox="0 0 24 24"
+ fill="none"
+ aria-hidden="true"
+ >
+ <path
+ d="M13 2L3 14h7l-1 8 11-13h-7l1-7z"
+ fill={color}
+ stroke={color}
+ strokeWidth="0.5"
+ strokeLinejoin="round"
+ />
+ </svg>
+ );
+}
+
+function DownloadIcon(): JSX.Element {
+ return (
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+ <path d="M12 4v12m0 0l-5-5m5 5l5-5M4 20h16" />
+ </svg>
+ );
+}
+
+function SlackIcon(): JSX.Element {
+ return (
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+ <path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 [...]
+ </svg>
+ );
+}
+
+const GET_STARTED_HREF = '/docs-next/dev/getting-started/intro';
+
+// ─── SQL Typewriter ───────────────────────────────────────────────────────────
+
+type TokenClass = 'kw' | 'fn' | 'str' | 'num' | 'op' | 'cmt';
+type SqlToken = [TokenClass, string];
+type SqlLine = SqlToken[];
+type SqlRunState = 'typing' | 'ready' | 'executing' | 'done';
+
+const SQL_LINES: SqlLine[] = [
+ [['kw', 'SELECT '], ['fn', 'title']],
+ [['kw', 'FROM '], ['fn', 'docs']],
+ [['kw', 'WHERE '], ['fn', 'category'], ['op', ' = '], ['str', "'AI'"]],
+ [['op', ' '], ['kw', 'AND '], ['fn', 'MATCH'], ['op', '('], ['fn', 'content'], ['op', ', '], ['str', "'hybrid search'"], ['op', ')']],
+ [['op', ' '], ['kw', 'AND '], ['fn', 'COSINE_SIMILARITY'], ['op', '('], ['fn', 'embedding'], ['op', ', '], ['num', '[0.12, ...]'], ['op', ') > '], ['num', '0.8']],
+ [['kw', 'ORDER BY '], ['fn', 'publish_time'], ['kw', ' DESC']],
+ [['kw', 'LIMIT '], ['num', '3'], ['op', ';']],
+];
+
+interface FlatSeg {
+ cls: TokenClass;
+ text: string;
+ start: number;
+ end: number;
+}
+
+interface FlatLine {
+ segs: FlatSeg[];
+ total: number;
+}
+
+function flattenLines(lines: SqlLine[]): FlatLine[] {
+ return lines.map(line => {
+ let total = 0;
+ const segs: FlatSeg[] = line.map(([cls, text]) => {
+ const seg: FlatSeg = { cls, text, start: total, end: total + text.length };
+ total += text.length;
+ return seg;
+ });
+ return { segs, total };
+ });
+}
+
+interface TypewriterResult {
+ rendered: Array<Array<{ cls: TokenClass; text: string }>>;
+ isDone: boolean;
+ activeLine: number;
+}
+
+function useTypewriter(lines: SqlLine[], resetKey: number, speed = 11): TypewriterResult {
+ const flat = useMemo(() => flattenLines(lines), [lines]);
+ const totalChars = useMemo(() => flat.reduce((s, l) => s + l.total, 0), [flat]);
+ const [tick, setTick] = useState(0);
+
+ useEffect(() => {
+ setTick(0);
+ let current = 0;
+ const id = window.setInterval(() => {
+ current += 1;
+ setTick(current);
+ if (current >= totalChars) {
+ window.clearInterval(id);
+ }
+ }, speed);
+ return () => window.clearInterval(id);
+ }, [totalChars, speed, resetKey]);
+
+ const typed = Math.min(tick, totalChars);
+ const isDone = tick >= totalChars;
+
+ const lineProgress: number[] = [];
+ let remaining = typed;
+ let activeLine = 0;
+ for (let i = 0; i < flat.length; i++) {
+ const t = Math.min(remaining, flat[i].total);
+ lineProgress.push(t);
+ remaining -= t;
+ if (t > 0 && t < flat[i].total) activeLine = i;
+ else if (t === flat[i].total && i < flat.length - 1 && remaining === 0) activeLine = i + 1;
+ }
+
+ const rendered = flat.map((line, i) => {
+ const limit = lineProgress[i];
+ const out: Array<{ cls: TokenClass; text: string }> = [];
+ for (const seg of line.segs) {
+ if (seg.start >= limit) break;
+ const visibleEnd = Math.min(seg.end, limit);
+ out.push({ cls: seg.cls, text: seg.text.slice(0, visibleEnd - seg.start) });
+ }
+ return out;
+ });
+
+ return { rendered, isDone, activeLine };
+}
+
+// ─── SQL Card ────────────────────────────────────────────────────────────────
+
+interface SqlCardProps {
+ rendered: Array<Array<{ cls: TokenClass; text: string }>>;
+ isDone: boolean;
+ activeLine: number;
+ runState: SqlRunState;
+ onRun: () => void;
+ onReset: () => void;
+}
+
+function SqlCard({ rendered, isDone, activeLine, runState, onRun, onReset }: SqlCardProps): JSX.Element {
+ const showStatus = runState === 'executing' || runState === 'done';
+
+ return (
+ <div className="hn-sql-card">
+ <div className={`hn-sql-card__bar hn-sql-card__bar--${runState}`}>
+ <span className="hn-sql-card__dot hn-sql-card__dot--r" />
+ <span className="hn-sql-card__dot hn-sql-card__dot--y" />
+ <span className="hn-sql-card__dot hn-sql-card__dot--g" />
+ <span className="hn-sql-card__title">~/realtime.sql</span>
+ <div className="hn-sql-card__bar-actions">
+ {showStatus && (
+ <div className="hn-sql-card__status">
+ <LightningSvg size={14} />
+ {runState === 'executing' && (
+ <span className="hn-sql-card__result-text" role="status" aria-live="polite">
+ EXECUTING QUERY ...
+ </span>
+ )}
+ {runState === 'done' && (
+ <span className="hn-sql-card__result-time">0.043s</span>
+ )}
+ </div>
+ )}
+ {runState === 'done' ? (
+ <button
+ type="button"
+ className="hn-sql-card__run hn-sql-card__run--reset"
+ onClick={onReset}
+ aria-label="Reset"
+ >
+ <span className="hn-sql-card__run-glyph" aria-hidden="true">↺</span>
+ RESET
+ </button>
+ ) : (
+ <button
+ type="button"
+ className={`hn-sql-card__run${runState === 'ready' ? ' hn-sql-card__run--pulse' : ''}`}
+ onClick={onRun}
+ disabled={runState !== 'ready'}
+ aria-label="Run query"
+ >
+ <span className="hn-sql-card__run-glyph" aria-hidden="true">▶</span>
+ RUN
+ </button>
+ )}
+ </div>
+ </div>
+ <div className="hn-sql-card__body">
+ {SQL_LINES.map((_, i) => (
+ <div className="hn-sql-card__line" key={i}>
+ <span className="hn-sql-card__ln">{String(i + 1).padStart(2, '0')}</span>
+ <span className="hn-sql-card__content">
+ {rendered[i].map((seg, j) => (
+ <span key={j} className={seg.cls ? `hn-sql-card__tok--${seg.cls}` : ''}>
+ {seg.text}
+ </span>
+ ))}
+ {!isDone && i === activeLine && (
+ <span className="hn-sql-card__cursor" />
+ )}
+ </span>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+// ─── Result Table ────────────────────────────────────────────────────────────
+
+interface QueryRow {
+ rank: number;
+ title: string;
+ date: string;
+ sim: number;
+}
+
+const QUERY_RESULTS: QueryRow[] = [
+ { rank: 1, title: 'A Practical Guide to Hybrid Search in Production', date: '2026-04-22', sim: 0.96 },
+ { rank: 2, title: 'Vector + BM25: Lessons from Re-ranking 1B Documents', date: '2026-04-15', sim: 0.93 },
+ { rank: 3, title: 'Why Apache Doris Beats Bolt-On Vector Stores', date: '2026-04-09', sim: 0.91 },
+];
+
+function ResultTable(): JSX.Element {
+ return (
+ <div className="hn-result-table">
+ <div className="hn-result-table__head">
+ <span className="hn-result-table__head-cell hn-result-table__head-cell--rank">#</span>
+ <span className="hn-result-table__head-cell">title</span>
+ <span className="hn-result-table__head-cell hn-result-table__head-cell--date">publish_time</span>
+ <span className="hn-result-table__head-cell hn-result-table__head-cell--num">cosine_sim</span>
+ </div>
+ <div className="hn-result-table__body">
+ {QUERY_RESULTS.map((r, i) => (
+ <div
+ key={r.rank}
+ className="hn-result-table__row"
+ style={{ animationDelay: `${80 + i * 90}ms` }}
+ >
+ <span className="hn-result-table__cell hn-result-table__cell--rank">{r.rank}</span>
+ <span className="hn-result-table__cell hn-result-table__cell--title">{r.title}</span>
+ <span className="hn-result-table__cell hn-result-table__cell--date">{r.date}</span>
+ <span className="hn-result-table__cell hn-result-table__cell--num">{r.sim.toFixed(3)}</span>
+ </div>
+ ))}
+ </div>
+ <div className="hn-result-table__footer">
+ <LightningSvg size={13} color="#0F1A14" />
+ <span className="hn-result-table__footer-text">3 docs · scanned 18.4M vectors</span>
+ </div>
+ </div>
+ );
+}
+
+// ─── SQL Editor Panel ────────────────────────────────────────────────────────
+
+function SqlEditorPanel(): JSX.Element {
+ const [runState, setRunState] = useState<SqlRunState>('typing');
+ const [runKey, setRunKey] = useState(0);
+ const { rendered, isDone, activeLine } = useTypewriter(SQL_LINES, runKey);
+
+ useEffect(() => {
+ if (isDone && runState === 'typing') {
+ setRunState('ready');
+ }
+ }, [isDone, runState]);
+
+ useEffect(() => {
+ if (runState !== 'executing') return undefined;
+ const id = window.setTimeout(() => setRunState('done'), 43);
+ return () => window.clearTimeout(id);
+ }, [runState]);
+
+ const onRun = () => {
+ if (runState === 'ready') setRunState('executing');
+ };
+
+ const onReset = () => {
+ setRunState('typing');
+ setRunKey(k => k + 1);
+ };
+
+ const isResultVisible = runState === 'done';
+
+ return (
+ <div className="hero-next__card-wrap">
+ <div className="hero-next__sql-wrap">
+ <SqlCard
+ rendered={rendered}
+ isDone={isDone}
+ activeLine={activeLine}
+ runState={runState}
+ onRun={onRun}
+ onReset={onReset}
+ />
+ {isResultVisible && (
+ <div className="hero-next__perf-pill">
+ <LightningSvg size={14} color="#0F1A14" />
+ <span>
+ <strong>Structured, full-text, and vector</strong> search, all in one SQL.
+ </span>
+ </div>
+ )}
+ </div>
+ {isResultVisible && (
+ <div className="hero-next__result-wrap">
+ <ResultTable />
+ </div>
+ )}
+ </div>
+ );
+}
+
+// ─── Search Results ───────────────────────────────────────────────────────────
+
+interface SearchResult {
+ title: string;
+ date: string;
+ text: number;
+ vec: number;
+ str: number;
+}
+
+const SEARCH_RESULTS: SearchResult[] = [
+ { title: 'A Practical Guide to Hybrid Search in Production', date: '2026-04-22', text: 0.94, vec: 0.96, str: 1.00 },
+ { title: 'Vector + BM25: Lessons from Re-ranking 1B Documents', date: '2026-04-15', text: 0.88, vec: 0.93, str: 1.00 },
+ { title: 'Why Apache Doris Beats Bolt-On Vector Stores', date: '2026-04-09', text: 0.81, vec: 0.91, str: 1.00 },
+ { title: 'Hybrid Search Patterns for RAG-Heavy Workloads', date: '2026-04-02', text: 0.79, vec: 0.86, str: 1.00 },
+ { title: 'Tuning COSINE_SIMILARITY Thresholds for AI Pipelines', date: '2026-03-28', text: 0.74, vec: 0.83, str: 1.00 },
+];
+
+function SearchResults(): JSX.Element {
+ const [step, setStep] = useState(0);
+
+ useEffect(() => {
+ const holdSteps = 31;
+ const cycleLength = SEARCH_RESULTS.length + holdSteps;
+ const id = window.setInterval(() => {
+ setStep(current => (current >= cycleLength ? 0 : current + 1));
+ }, 180);
+
+ return () => window.clearInterval(id);
+ }, []);
+
+ const revealed = Math.min(step, SEARCH_RESULTS.length);
+ const filled = step >= SEARCH_RESULTS.length;
+
+ return (
+ <div className="hn-search-results">
+ <div className="hn-search-results__head">
+ <span className="hn-search-results__head-label">RESULT · 5 DOCS · RANKED</span>
+ <span className="hn-search-results__legend">
+ <span className="hn-search-results__legend-chip">
+ <i className="hn-search-results__dot hn-search-results__dot--text" />
+ Full-text
+ </span>
+ <span className="hn-search-results__legend-chip">
+ <i className="hn-search-results__dot hn-search-results__dot--vec" />
+ Vector
+ </span>
+ <span className="hn-search-results__legend-chip">
+ <i className="hn-search-results__dot hn-search-results__dot--str" />
+ Filter
+ </span>
+ </span>
+ </div>
+ <div className="hn-search-results__rows">
+ {SEARCH_RESULTS.map((r, i) => {
+ const visible = i < revealed;
+ const composite = (r.text + r.vec + r.str) / 3;
+ return (
+ <div
+ key={i}
+ className={`hn-search-results__row${visible ? ' hn-search-results__row--visible' : ''}`}
+ style={{ transitionDelay: `${i * 30}ms` }}
+ >
+ <span className="hn-search-results__rank">#{i + 1}</span>
+ <div className="hn-search-results__info">
+ <div className="hn-search-results__title">{r.title}</div>
+ <div className="hn-search-results__meta">
+ <span>category=<strong>AI</strong></span>
+ <span className="hn-search-results__meta-dot">·</span>
+ <span>{r.date}</span>
+ </div>
+ </div>
+ <div className="hn-search-results__bars">
+ {(['text', 'vec', 'str'] as const).map(type => (
+ <div key={type} className="hn-search-results__bar-track">
+ <div
+ className={`hn-search-results__bar-fill hn-search-results__bar-fill--${type}`}
+ style={{ width: filled && visible ? `${r[type] * 100}%` : '0%' }}
+ />
+ </div>
+ ))}
+ </div>
+ <span className="hn-search-results__score">{composite.toFixed(2)}</span>
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ );
+}
+
+// ─── Node Graph + Bar Chart ─────────────────────────────────────────────────
+
+type GraphNodeId = 'docs' | 'ai' | 'rag' | 'search' | 'vec' | 'embed';
+type Vector3 = [number, number, number];
+
+interface GraphNode {
+ id: GraphNodeId;
+ pos: Vector3;
+ r: number;
+ color: string;
+}
+
+interface ProjectedPoint {
+ x: number;
+ y: number;
+ z: number;
+ scale: number;
+}
+
+interface ProjectedNode extends ProjectedPoint {
+ node: GraphNode;
+}
+
+interface DragState {
+ x: number;
+ y: number;
+ rx: number;
+ ry: number;
+}
+
+const NODES_3D: GraphNode[] = [
+ { id: 'docs', pos: [ 0.00, 0.00, 0.00], r: 22, color: '#FAF6EE' },
+ { id: 'ai', pos: [ 0.85, 0.55, -0.30], r: 18, color: '#2DDFA8' },
+ { id: 'rag', pos: [-0.80, 0.50, 0.40], r: 16, color: '#FF8FA3' },
+ { id: 'search', pos: [ 0.55, -0.75, 0.55], r: 18, color: '#7DD3FF' },
+ { id: 'vec', pos: [-0.65, -0.55, -0.55], r: 14, color: '#C7B5FF' },
+ { id: 'embed', pos: [ 0.10, 0.85, 0.70], r: 14, color: '#FFD23F' },
+];
+
+const EDGES_3D: Array<[GraphNodeId, GraphNodeId]> = [
+ ['docs', 'ai'], ['docs', 'search'], ['docs', 'vec'], ['docs', 'rag'],
+ ['ai', 'rag'], ['ai', 'search'], ['ai', 'embed'],
+ ['rag', 'embed'],
+ ['search', 'vec'], ['search', 'embed'],
+];
+
+function projectPoint([x, y, z]: Vector3, rx: number, ry: number): ProjectedPoint {
+ const cy = Math.cos(ry);
+ const sy = Math.sin(ry);
+ const x1 = x * cy + z * sy;
+ const z1 = -x * sy + z * cy;
+ const cx = Math.cos(rx);
+ const sx = Math.sin(rx);
+ const y1 = y * cx - z1 * sx;
+ const z2 = y * sx + z1 * cx;
+ const fov = 2.4;
+ const perspective = fov / (fov - z2);
+ return { x: x1 * perspective, y: y1 * perspective, z: z2, scale: perspective };
+}
+
+function toGraphSvgPoint(point: Pick<ProjectedPoint, 'x' | 'y'>): { x: number; y: number } {
+ return { x: 50 + point.x * 32, y: 50 + point.y * 32 };
+}
+
+function NodeGraph(): JSX.Element {
+ const [hovered, setHovered] = useState<GraphNodeId | null>(null);
+ const [rotation, setRotation] = useState({ rx: -0.25, ry: 0.4 });
+ const [drag, setDrag] = useState<DragState | null>(null);
+ const containerRef = useRef<HTMLDivElement | null>(null);
+ const autoRotateRef = useRef(true);
+
+ useEffect(() => {
+ let raf = 0;
+ let last = performance.now();
+ const tick = (time: number) => {
+ const dt = (time - last) / 1000;
+ last = time;
+ if (autoRotateRef.current && !drag && hovered === null) {
+ setRotation(r => ({
+ rx: r.rx + Math.sin(time * 0.0003) * 0.0008,
+ ry: r.ry + dt * 0.18,
+ }));
+ }
+ raf = requestAnimationFrame(tick);
+ };
+ raf = requestAnimationFrame(tick);
+ return () => cancelAnimationFrame(raf);
+ }, [drag, hovered]);
+
+ const onPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
+ containerRef.current?.setPointerCapture(event.pointerId);
+ setDrag({ x: event.clientX, y: event.clientY, rx: rotation.rx, ry: rotation.ry });
+ autoRotateRef.current = false;
+ };
+
+ const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
+ if (!drag) return;
+ const dx = event.clientX - drag.x;
+ const dy = event.clientY - drag.y;
+ setRotation({
+ rx: Math.max(-1.2, Math.min(1.2, drag.rx + dy * 0.01)),
+ ry: drag.ry + dx * 0.012,
+ });
+ };
+
+ const onPointerEnd = (event: React.PointerEvent<HTMLDivElement>) => {
+ if (containerRef.current?.hasPointerCapture(event.pointerId)) {
+ containerRef.current.releasePointerCapture(event.pointerId);
+ }
+ setDrag(null);
+ window.setTimeout(() => {
+ autoRotateRef.current = true;
+ }, 1800);
+ };
+
+ const projected: ProjectedNode[] = NODES_3D.map(node => ({
+ node,
+ ...projectPoint(node.pos, rotation.rx, rotation.ry),
+ }));
+ const projectedById = new Map(projected.map(point => [point.node.id, point]));
+ const sortedNodes = [...projected].sort((a, b) => a.z - b.z);
+
+ return (
+ <div className="hn-node-graph">
+ <div className="hn-node-graph__head">
+ <span className="hn-node-graph__head-label">KNOWLEDGE GRAPH</span>
+ </div>
+ <div
+ className={`hn-node-graph__canvas${drag ? ' hn-node-graph__canvas--dragging' : ''}`}
+ ref={containerRef}
+ onPointerDown={onPointerDown}
+ onPointerMove={onPointerMove}
+ onPointerUp={onPointerEnd}
+ onPointerCancel={onPointerEnd}
+ >
+ <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" className="hn-node-graph__svg" aria-hidden="true">
+ <defs>
+ <radialGradient id="hn-node-graph-floor" cx="50%" cy="50%" r="50%">
+ <stop offset="0%" stopColor="rgba(255,210,63,0.10)" />
+ <stop offset="70%" stopColor="rgba(255,210,63,0)" />
+ </radialGradient>
+ </defs>
+ <ellipse cx="50" cy="58" rx="36" ry="6" fill="url(#hn-node-graph-floor)" />
+ {EDGES_3D.map(([a, b], i) => {
+ const nodeA = projectedById.get(a);
+ const nodeB = projectedById.get(b);
+ if (!nodeA || !nodeB) return null;
+ const pointA = toGraphSvgPoint(nodeA);
+ const pointB = toGraphSvgPoint(nodeB);
+ const active = hovered !== null && (hovered === a || hovered === b);
+ const avgZ = (nodeA.z + nodeB.z) / 2;
+ const opacity = active ? 0.95 : Math.max(0.08, 0.18 + (avgZ + 0.6) * 0.25);
+ return (
+ <line
+ key={`${a}-${b}-${i}`}
+ x1={pointA.x}
+ y1={pointA.y}
+ x2={pointB.x}
+ y2={pointB.y}
+ stroke={active ? '#FFD23F' : 'rgba(245,239,228,1)'}
+ strokeOpacity={opacity}
+ strokeWidth={active ? 0.45 : 0.22}
+ vectorEffect="non-scaling-stroke"
+ />
+ );
+ })}
+ </svg>
+ {sortedNodes.map(({ node, x, y, z, scale }) => {
+ const isHovered = hovered === node.id;
+ const svgPoint = toGraphSvgPoint({ x, y });
+ const size = node.r * scale * (isHovered ? 1.35 : 1);
+ const depthAlpha = 0.55 + Math.max(0, Math.min(1, (z + 1) / 2)) * 0.45;
+ return (
+ <button
+ type="button"
+ key={node.id}
+ className={`hn-node-graph__node${isHovered ? ' hn-node-graph__node--hovered' : ''}`}
+ aria-label={`${node.id} node`}
+ style={{
+ left: `${svgPoint.x}%`,
+ top: `${svgPoint.y}%`,
+ width: `${size}px`,
+ height: `${size}px`,
+ background: node.color,
+ opacity: depthAlpha,
+ zIndex: Math.round((z + 2) * 100),
+ boxShadow: isHovered
+ ? '0 0 0 3px rgba(255,210,63,0.55), 0 8px 22px rgba(255,210,63,0.45)'
+ : `0 ${4 * scale}px ${10 * scale}px rgba(0,0,0,${0.35 * scale})`,
+ }}
+ onPointerEnter={() => {
+ if (!drag) setHovered(node.id);
+ }}
+ onPointerLeave={() => {
+ if (!drag) setHovered(null);
+ }}
+ />
+ );
+ })}
+ </div>
+ </div>
+ );
+}
+
+const BAR_DATA_SETS: number[][] = [
+ [62, 78, 45, 91, 70, 84, 58],
+ [80, 55, 92, 48, 76, 88, 65],
+ [70, 88, 62, 80, 54, 95, 72],
+ [55, 72, 88, 60, 82, 70, 92],
+];
+const BAR_LABELS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+function BarChart(): JSX.Element {
+ const [dataSetIndex, setDataSetIndex] = useState(0);
+ const [hoverIndex, setHoverIndex] = useState(-1);
+
+ useEffect(() => {
+ const id = window.setInterval(() => {
+ setDataSetIndex(i => (i + 1) % BAR_DATA_SETS.length);
+ }, 1800);
+ return () => window.clearInterval(id);
+ }, []);
+
+ const data = BAR_DATA_SETS[dataSetIndex];
+ const max = Math.max(...data);
+
+ return (
+ <div className="hn-bar-chart">
+ <div className="hn-bar-chart__head">
+ <span className="hn-bar-chart__head-label">QUERIES / DAY</span>
+ <span className="hn-bar-chart__head-num">
+ <span className="hn-bar-chart__head-val">2.4M</span>
+ <span className="hn-bar-chart__head-delta">▲ 12%</span>
+ </span>
+ </div>
+ <div className="hn-bar-chart__grid" aria-hidden="true">
+ {[0, 1, 2, 3].map(i => <div key={i} className="hn-bar-chart__grid-line" />)}
+ </div>
+ <div className="hn-bar-chart__bars">
+ {data.map((value, i) => (
+ <div
+ key={BAR_LABELS[i]}
+ className="hn-bar-chart__bar-col"
+ onMouseEnter={() => setHoverIndex(i)}
+ onMouseLeave={() => setHoverIndex(-1)}
+ >
+ <div className="hn-bar-chart__bar-track">
+ <div
+ className={`hn-bar-chart__bar-fill${i === hoverIndex ? ' hn-bar-chart__bar-fill--glow' : ''}`}
+ style={{ height: `${(value / max) * 100}%` }}
+ >
+ <span className="hn-bar-chart__bar-tip">{value}k</span>
+ </div>
+ </div>
+ <span className="hn-bar-chart__bar-label">{BAR_LABELS[i]}</span>
+ </div>
+ ))}
+ </div>
+ <div className="hn-bar-chart__foot">
+ <span className="hn-bar-chart__foot-chip"><i style={{ background: '#FFD23F' }} />P50 18ms</span>
+ <span className="hn-bar-chart__foot-chip"><i style={{ background: '#2DDFA8' }} />P99 43ms</span>
+ <span className="hn-bar-chart__foot-chip"><i style={{ background: '#C7B5FF' }} />error 0.00%</span>
+ </div>
+ </div>
+ );
+}
+
+function NodeGraphAndBars(): JSX.Element {
+ return (
+ <div className="hn-node-bars">
+ <div className="hn-node-bars__pane"><NodeGraph /></div>
+ <div className="hn-node-bars__pane"><BarChart /></div>
+ </div>
+ );
+}
+
+const REPORT_SLIDES = [
+ { label: 'Show search results' },
+ { label: 'Show knowledge graph and query chart' },
+];
+
+function ReportCarousel(): JSX.Element {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [timerVersion, setTimerVersion] = useState(0);
+ const [isPaused, setIsPaused] = useState(false);
+
+ useEffect(() => {
+ if (isPaused) return undefined;
+ const id = window.setInterval(() => {
+ setActiveIndex(index => (index + 1) % REPORT_SLIDES.length);
+ }, 9000);
+ return () => window.clearInterval(id);
+ }, [isPaused, timerVersion]);
+
+ const selectSlide = (index: number) => {
+ setActiveIndex(index);
+ setTimerVersion(version => version + 1);
+ };
+
+ return (
+ <div
+ className="hn-report-carousel"
+ onMouseEnter={() => setIsPaused(true)}
+ onMouseLeave={() => setIsPaused(false)}
+ >
+ <div
+ id="hero-report-search"
+ role="tabpanel"
+ aria-hidden={activeIndex !== 0}
+ className={`hn-report-carousel__pane${activeIndex === 0 ? ' hn-report-carousel__pane--active' : ' hn-report-carousel__pane--inactive'}`}
+ >
+ <SearchResults />
+ </div>
+ <div
+ id="hero-report-graph"
+ role="tabpanel"
+ aria-hidden={activeIndex !== 1}
+ className={`hn-report-carousel__pane${activeIndex === 1 ? ' hn-report-carousel__pane--active' : ' hn-report-carousel__pane--inactive'}`}
+ >
+ <NodeGraphAndBars />
+ </div>
+ <div className="hn-report-carousel__dots" role="tablist" aria-label="Switch report animation">
+ {REPORT_SLIDES.map((slide, index) => (
+ <button
+ key={slide.label}
+ type="button"
+ role="tab"
+ aria-label={slide.label}
+ aria-selected={activeIndex === index}
+ aria-controls={index === 0 ? 'hero-report-search' : 'hero-report-graph'}
+ className={activeIndex === index ? 'hn-report-carousel__dot hn-report-carousel__dot--active' : 'hn-report-carousel__dot'}
+ onClick={() => selectSlide(index)}
+ />
+ ))}
+ </div>
+ </div>
+ );
+}
+
+// ─── HeroSection ─────────────────────────────────────────────────────────────
+
+export function HeroSection(): JSX.Element {
+ return (
+ <section className="hero-next">
+ {/* Layered backgrounds */}
+ <div className="hero-next__bg-glow" aria-hidden="true" />
+ <div className="hero-next__bg-grid" aria-hidden="true" />
+ <div className="hero-next__bolt-bg" aria-hidden="true">
+ <svg viewBox="0 0 600 600" width="600" height="600">
+ <path
+ d="M340 60 L160 340 L290 340 L240 540 L440 240 L310 240 L370 60 Z"
+ fill="rgba(255, 210, 63, 0.08)"
+ stroke="rgba(255, 210, 63, 0.25)"
+ strokeWidth="2"
+ />
+ </svg>
+ </div>
+
+ {/* Main content grid */}
+ <div className="hero-next__content">
+ {/* ── Left column ── */}
+ <div className="hero-next__left">
+ <div className="hero-next__intro">
+ <h1 className="hero-next__title">
+ <span className="hero-next__title-line">Lightning</span>
+ <span className="hero-next__title-line hero-next__title-fast">
+ <span className="hero-next__title-accent">Fast</span>
+ <LightningSvg size={56} />
+ </span>
+ <span className="hero-next__title-line">
+ <span className="hero-next__title-accent">Analytics</span> and
+ </span>
+ <span className="hero-next__title-line">
+ <span className="hero-next__title-accent">Search</span> Database
+ </span>
+ </h1>
+
+ <p className="hero-next__sub">
+ Apache Doris is an open-source, real-time database for modern analytics
+ and AI. Run it shared-nothing on bare metal, or disaggregated on
+ cloud object storage.
+ </p>
+
+ <div className="hero-next__ctas">
+ <a className="hero-next__btn hero-next__btn--yellow" href="/download-next">
+ <DownloadIcon />
+ Download
+ </a>
+ <a className="hero-next__btn hero-next__btn--primary" href={GET_STARTED_HREF}>
+ Get Started
+ </a>
+ <a
+ className="hero-next__btn hero-next__btn--ghost"
+ href="https://doris.apache.org/slack"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <SlackIcon />
+ Join Slack
+ </a>
+ </div>
+ </div>
+ </div>
+
+ {/* ── Right column ── */}
+ <div className="hero-next__right">
+ <SqlEditorPanel />
+ </div>
+ </div>
+
+ {/* Floating decorative shapes */}
+ <div className="hero-next__shape hero-next__shape--diamond" style={{ top: '120px', right: '460px' }} />
+ <div className="hero-next__shape hero-next__shape--ring" style={{ top: '160px', left: '52%' }} />
+ </section>
+ );
+}
diff --git a/src/components/home-next/sections/StatsSection.scss b/src/components/home-next/sections/StatsSection.scss
new file mode 100644
index 00000000000..963ef1e2348
--- /dev/null
+++ b/src/components/home-next/sections/StatsSection.scss
@@ -0,0 +1,407 @@
+@use '../../shared/typography' as type;
+
+.stats-next {
+ --stats-next-bg: #057657;
+ --stats-next-content-edge: max(56px, calc((100vw - 1280px) / 2 + 56px));
+ --stats-next-tile-width: 176px;
+ --stats-next-tile-height: 40px;
+ --stats-next-tile-radius: 16px;
+ --stats-next-expand-shift: 76px;
+
+ position: relative;
+ width: 100%;
+ height: 80px;
+ background: var(--stats-next-bg);
+ border-top: 1px solid rgba(245, 239, 228, 0.08);
+ border-bottom: 1px solid rgba(245, 239, 228, 0.08);
+ overflow: visible;
+ z-index: 20;
+
+ &::before {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background-image: radial-gradient(rgba(245, 239, 228, 0.06) 1px, transparent 1px);
+ background-size: 22px 22px;
+ mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
+ pointer-events: none;
+ }
+
+ &__viewport {
+ position: absolute;
+ right: var(--stats-next-content-edge);
+ top: 50%;
+ left: var(--stats-next-content-edge);
+ z-index: 3;
+ height: 44px;
+ transform: translateY(-50%);
+ overflow: visible;
+ clip-path: inset(-180px 0 -180px 0);
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ z-index: 4;
+ width: 96px;
+ pointer-events: none;
+ }
+
+ &::before {
+ left: -1px;
+ background: linear-gradient(90deg, var(--stats-next-bg), rgba(5, 118, 87, 0));
+ }
+
+ &::after {
+ right: -1px;
+ background: linear-gradient(270deg, var(--stats-next-bg), rgba(5, 118, 87, 0));
+ }
+ }
+
+ &__track {
+ display: flex;
+ align-items: center;
+ gap: 22px;
+ width: max-content;
+ height: 100%;
+ padding: 0 11px;
+ animation: stats-next-logo-scroll 50s linear infinite;
+ will-change: transform;
+ position: relative;
+ z-index: 1;
+ }
+
+ &:hover &__track,
+ &:focus-within &__track {
+ animation-play-state: paused;
+ }
+
+ &__track--expanded &__card {
+ transform: translateX(calc(var(--stats-next-expand-shift) * -1));
+ }
+
+ &__card {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex: 0 0 auto;
+ align-items: center;
+ justify-content: center;
+ width: var(--stats-next-tile-width);
+ height: var(--stats-next-tile-height);
+ overflow: hidden;
+ border-radius: var(--stats-next-tile-radius);
+ background: #ffffff;
+ box-shadow: 0 12px 24px -20px rgba(0, 0, 0, 0.35);
+ cursor: pointer;
+ outline: none;
+ transform: translateX(0);
+ transition:
+ width 0.45s cubic-bezier(0.22, 0.9, 0.22, 1),
+ height 0.45s cubic-bezier(0.22, 0.9, 0.22, 1),
+ transform 0.45s cubic-bezier(0.22, 0.9, 0.22, 1),
+ border-radius 0.3s ease,
+ box-shadow 0.3s ease,
+ z-index 0s linear 0.45s;
+
+ &:focus-visible {
+ box-shadow:
+ 0 0 0 3px rgba(255, 210, 63, 0.55),
+ 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+ 0 14px 28px -12px rgba(0, 0, 0, 0.38);
+ }
+
+ &--expanded {
+ z-index: 100;
+ width: 320px;
+ height: 320px;
+ padding: 0;
+ border-radius: 14px;
+ box-shadow:
+ 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+ 0 24px 48px -12px rgba(0, 0, 0, 0.45),
+ 0 8px 18px -6px rgba(0, 0, 0, 0.35);
+ cursor: default;
+ transition:
+ width 0.45s cubic-bezier(0.22, 0.9, 0.22, 1),
+ height 0.45s cubic-bezier(0.22, 0.9, 0.22, 1),
+ transform 0.45s cubic-bezier(0.22, 0.9, 0.22, 1),
+ border-radius 0.3s ease,
+ box-shadow 0.3s ease,
+ z-index 0s linear 0s;
+ }
+ }
+
+ &__card-logo {
... 14446 lines suppressed ...
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@doris.apache.org
For additional commands, e-mail: commits-help@doris.apache.org