This is an automated email from the ASF dual-hosted git repository.
xushiyan pushed a commit to branch asf-site
in repository https://gitbox.apache.org/repos/asf/hudi.git
The following commit(s) were added to refs/heads/asf-site by this push:
new eb8e1ecf7b45 chore(site): update design of Home and Get Involved pages
(#14258)
eb8e1ecf7b45 is described below
commit eb8e1ecf7b454428366871dc3f9a3440e2cf62a9
Author: pintusoliya <[email protected]>
AuthorDate: Sun Nov 23 03:35:24 2025 +0530
chore(site): update design of Home and Get Involved pages (#14258)
---
website/community/get-involved.mdx | 19 +--
website/docusaurus.config.js | 66 ++++-----
website/src/components/BlogsSlider/BlogCard.js | 3 -
website/src/components/BlogsSlider/index.js | 2 +-
.../src/components/BlogsSlider/styles.module.css | 7 +-
website/src/components/DataLakes/index.js | 20 ++-
website/src/components/DataLakes/styles.module.css | 18 +++
website/src/components/EventFeature/index.js | 43 +++---
.../src/components/EventFeature/styles.module.css | 93 ++++++++-----
website/src/components/GetInvolvedGrid/index.js | 100 +++++++++++++
.../components/GetInvolvedGrid/styles.module.css | 103 ++++++++++++++
.../src/components/HomepageFeatures/FeaturesBox.js | 2 +-
website/src/components/HomepageFeatures/index.js | 2 +-
.../components/HomepageFeatures/styles.module.css | 28 +++-
.../src/components/HomepageHeader/FeatureRender.js | 5 +-
website/src/components/HomepageHeader/index.js | 20 +--
.../components/HomepageHeader/styles.module.css | 95 ++++++++++---
.../src/components/Integrations/Icons/Parquet.png | Bin 0 -> 903 bytes
.../components/Integrations/Icons/airflow-sq.png | Bin 0 -> 1111 bytes
.../Integrations/Icons/alibaba-cloud-sq.png | Bin 0 -> 1382 bytes
.../components/Integrations/Icons/alluxio-sq.png | Bin 0 -> 957 bytes
.../components/Integrations/Icons/athena-sq.png | Bin 0 -> 725 bytes
.../src/components/Integrations/Icons/avro-sq.png | Bin 0 -> 881 bytes
.../Integrations/Icons/azure-lake-sq.png | Bin 0 -> 779 bytes
.../components/Integrations/Icons/bigquery-sq.png | Bin 0 -> 986 bytes
.../components/Integrations/Icons/cassandra-sq.png | Bin 0 -> 1571 bytes
.../src/components/Integrations/Icons/csv-sq.png | Bin 0 -> 770 bytes
.../components/Integrations/Icons/datahub-sq.png | Bin 0 -> 1460 bytes
.../src/components/Integrations/Icons/dbt-sq.png | Bin 0 -> 786 bytes
.../src/components/Integrations/Icons/doris-sq.png | Bin 0 -> 592 bytes
.../src/components/Integrations/Icons/flink-sq.png | Bin 0 -> 2282 bytes
.../Integrations/Icons/gcp-cloud-storage-sq.png | Bin 0 -> 615 bytes
.../src/components/Integrations/Icons/glue-sq.png | Bin 0 -> 527 bytes
.../components/Integrations/Icons/hadoop-sq.png | Bin 0 -> 1299 bytes
.../src/components/Integrations/Icons/hive-sq.png | Bin 0 -> 1914 bytes
.../src/components/Integrations/Icons/hudi-sq.png | Bin 0 -> 1100 bytes
.../components/Integrations/Icons/impala-sq.png | Bin 0 -> 822 bytes
.../src/components/Integrations/Icons/json-sq.png | Bin 0 -> 713 bytes
.../src/components/Integrations/Icons/kafka-sq.png | Bin 0 -> 1029 bytes
.../src/components/Integrations/Icons/minio.png | Bin 0 -> 795 bytes
.../components/Integrations/Icons/mongodb-sq.png | Bin 0 -> 690 bytes
.../src/components/Integrations/Icons/mysql-sq.png | Bin 0 -> 790 bytes
.../components/Integrations/Icons/oracle-sq.png | Bin 0 -> 446 bytes
.../components/Integrations/Icons/parquet-sq.png | Bin 0 -> 1006 bytes
.../components/Integrations/Icons/postgres-sq.png | Bin 0 -> 1431 bytes
.../src/components/Integrations/Icons/presto.png | Bin 0 -> 1202 bytes
.../src/components/Integrations/Icons/pulsar.png | Bin 0 -> 779 bytes
.../components/Integrations/Icons/redshift-sq.png | Bin 0 -> 578 bytes
.../components/Integrations/Icons/rocket-mq.png | Bin 0 -> 1098 bytes
.../src/components/Integrations/Icons/s3-sq.png | Bin 0 -> 775 bytes
.../src/components/Integrations/Icons/spark-sq.png | Bin 0 -> 1026 bytes
.../components/Integrations/Icons/starrocks-sq.png | Bin 0 -> 1858 bytes
.../src/components/Integrations/Icons/trino-sq.png | Bin 0 -> 1731 bytes
.../src/components/Integrations/Icons/upload.png | Bin 0 -> 775 bytes
website/src/components/Integrations/Services.js | 28 ++++
website/src/components/Integrations/data.js | 107 ++++++++++++++
website/src/components/Integrations/index.js | 59 ++++++++
.../src/components/Integrations/styles.module.css | 94 +++++++++++++
.../src/components/JoinCommunity/CommunityCard.js | 5 +-
website/src/components/JoinCommunity/index.js | 45 +++---
.../src/components/JoinCommunity/styles.module.css | 64 +++++----
website/src/components/SidebarVersions/index.js | 59 ++++++++
.../components/SidebarVersions/styles.module.css | 83 +++++++++++
website/src/components/Title/styles.module.css | 13 +-
.../src/components/UI/LinkButton/styles.module.css | 25 +++-
website/src/components/WhyHudi/index.js | 4 +-
website/src/components/WhyHudi/styles.module.css | 20 ++-
.../src/components/WhyHudiCards/styles.module.css | 11 +-
website/src/css/custom.css | 155 ++++++++++++++-------
website/src/css/fonts/Montserrat-Bold.ttf | Bin 0 -> 440125 bytes
website/src/css/fonts/Montserrat-SemiBold.ttf | Bin 0 -> 435496 bytes
website/src/css/fonts/ZalandoSans-Bold.ttf | Bin 0 -> 91487 bytes
website/src/css/fonts/ZalandoSans-Medium.ttf | Bin 0 -> 90558 bytes
website/src/css/fonts/ZalandoSans-Regular.ttf | Bin 0 -> 89710 bytes
website/src/pages/index.js | 33 ++---
.../DocSidebar/Desktop/CollapseButton/index.js | 28 ++++
.../Desktop/CollapseButton/styles.module.css | 40 ++++++
.../src/theme/DocSidebar/Desktop/Content/index.js | 48 +++++++
.../DocSidebar/Desktop/Content/styles.module.css | 16 +++
website/src/theme/DocSidebar/Desktop/index.js | 28 ++++
.../src/theme/DocSidebar/Desktop/styles.module.css | 37 +++++
website/src/theme/DocSidebar/Mobile/index.js | 44 ++++++
website/src/theme/DocSidebar/index.js | 18 +++
website/src/theme/Footer/Copyright/index.js | 11 ++
website/src/theme/Footer/Layout/index.js | 25 ++++
website/src/theme/Footer/Layout/styles.module.css | 80 +++++++++++
website/src/theme/Footer/LinkItem/index.js | 26 ++++
.../src/theme/Footer/Links/MultiColumn/index.js | 44 ++++++
website/src/theme/Footer/Links/Simple/index.js | 32 +++++
website/src/theme/Footer/Links/index.js | 11 ++
website/src/theme/Footer/Logo/index.js | 35 +++++
website/src/theme/Footer/Logo/styles.module.css | 9 ++
website/src/theme/Footer/index.js | 22 +++
website/src/theme/Navbar/Layout/styles.module.css | 3 +-
.../MobileSidebar/PrimaryMenu/styles.module.css | 16 +--
website/src/theme/SearchBar/Icons/search.svg | 4 +-
website/src/theme/SearchBar/index.js | 3 -
website/static/assets/images/home-background.png | Bin 0 -> 587865 bytes
.../assets/images/hudi-lake-overview-mobile.png | Bin 0 -> 1365236 bytes
.../static/assets/images/hudi-lake-overview.png | Bin 308545 -> 2465242
bytes
website/static/assets/images/hudi-logo.png | Bin 0 -> 9690 bytes
website/static/assets/images/hudi.png | Bin 14848 -> 2737 bytes
102 files changed, 1678 insertions(+), 333 deletions(-)
diff --git a/website/community/get-involved.mdx
b/website/community/get-involved.mdx
index ad051a028c06..e1d93941118d 100644
--- a/website/community/get-involved.mdx
+++ b/website/community/get-involved.mdx
@@ -3,23 +3,10 @@ sidebar_position: 1
title: "Get Involved"
toc: true
last_modified_at: 2020-09-01T15:59:57-04:00
+hide_title: true
---
-import SlackCommunity from '@site/src/components/SlackCommunity';
+import GetInvolvedGrid from '@site/src/components/GetInvolvedGrid';
-## Engage with us
+<GetInvolvedGrid/>
-There are several ways to get in touch with the Hudi community.
-
-| When? | Channel to use
|
-|-------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| For development discussions | [Github
Discussions](https://github.com/apache/hudi/discussions) or Dev Mailing list
([Subscribe](mailto:[email protected]),
[Unsubscribe](mailto:[email protected]),
[Archives](https://lists.apache.org/[email protected])). Empty email
works for subscribe/unsubscribe. |
-| For any general questions, user support | [Github
Discussions](https://github.com/apache/hudi/discussions) or Users Mailing list
([Subscribe](mailto:[email protected]),
[Unsubscribe](mailto:[email protected]),
[Archives](https://lists.apache.org/[email protected])). Empty email
works for subscribe/unsubscribe. |
-| For reporting bugs or issues or discover known issues | Use Github
[Issues](https://github.com/apache/hudi/issues), please read guidelines
[here](/contribute/how-to-contribute#filing-issues)
|
-| For quick pings & 1-1 chats | Join our
<SlackCommunity title="slack group" />. In case the link does not work, please
start a GH discussion or file a community support issue or drop an email to
[email protected] |
-| For proposing large features, changes | Start a RFC.
Instructions [here](/contribute/rfc-process).
|
-| Join sync-up meetings | [Community
sync](/community/syncs) and [Dev Sync](/contribute/developer-sync-call).
|
-| For stream of commits, pull requests etc | Commits Mailing list
([Subscribe](mailto:[email protected]),
[Unsubscribe](mailto:[email protected]),
[Archives](https://lists.apache.org/[email protected]))
|
-
-If you wish to report a security vulnerability, please contact
[[email protected]](mailto:[email protected]).
-Apache Hudi follows the typical Apache vulnerability handling
[process](https://apache.org/security/committers#vulnerability-handling).
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 90b97cacb29b..9c459536a09b 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -30,8 +30,8 @@ module.exports = {
tagline:
"Hudi brings transactions, record-level updates/deletes and change
streams to data lakes!",
taglineConfig: {
- prefix: "Hudi brings ",
- suffix: " to data lakes!",
+ prefix: "Apache Hudi™ brings",
+ suffix: " to data lakes",
content: [
"transactions",
"row-level updates/deletes",
@@ -261,51 +261,31 @@ module.exports = {
to: "/community/team",
},
{
- label: 'Join Our Slack Space',
+ label: 'Github',
+ href: 'https://github.com/apache/hudi',
+ },
+ {
+ label: 'Slack',
href: slackUrl,
},
+ {
+ label: 'Linkdin',
+ href:
'https://www.linkedin.com/company/apache-hudi/?viewAsMember=true',
+ },
+ {
+ label: 'Youtube',
+ href: 'https://www.youtube.com/channel/UCs7AhE0BWaEPZSChrBR-Muw',
+ },
+ {
+ label: 'X',
+ href: 'https://x.com/ApacheHudi',
+ },
],
},
{ to: "/ecosystem", label: "Ecosystem", position: "left" },
{ to: "/powered-by", label: "Who's Using", position: "left" },
{ to: "/roadmap", label: "Roadmap", position: "left" },
{ to: "/releases/download", label: "Download", position: "left" },
- // right
- {
- type: "docsVersionDropdown",
- position: "right",
- dropdownActiveClassDisabled: true,
- },
- {
- href: "https://github.com/apache/hudi";,
- position: "right",
- className: "header-github-link",
- "aria-label": "GitHub repository",
- },
- {
- href: "https://x.com/ApacheHudi";,
- position: "right",
- className: "header-twitter-link",
- "aria-label": "Hudi Twitter Handle",
- },
- {
- href: slackUrl,
- position: "right",
- className: "header-slack-link",
- "aria-label": "Hudi Slack Channel",
- },
- {
- href: "https://www.youtube.com/channel/UCs7AhE0BWaEPZSChrBR-Muw";,
- position: "right",
- className: "header-youtube-link",
- "aria-label": "Hudi YouTube Channel",
- },
- {
- href:
"https://www.linkedin.com/company/apache-hudi/?viewAsMember=true";,
- position: "right",
- className: "header-linkedin-link",
- "aria-label": "Hudi Linkedin Page",
- },
],
},
footer: {
@@ -475,11 +455,11 @@ module.exports = {
],
logo: {
alt: "Apache Hudi™",
- src: "/assets/images/logo-big.png",
+ src: "/assets/images/hudi.png",
href: "https://hudi.apache.org/";,
},
copyright:
- 'Copyright © 2021 <a href="https://apache.org";>The Apache Software
Foundation</a>, Licensed under the <a
href="https://www.apache.org/licenses/LICENSE-2.0";> Apache License, Version
2.0</a>. <br />Hudi, Apache and the Apache feather logo are trademarks of The
Apache Software Foundation.<img referrerpolicy="no-referrer-when-downgrade"
src="https://static.scarf.sh/a.png?x-pxid=8f594acf-9b77-44fb-9475-3e82ead1910c";
/><img referrerpolicy="no-referrer-when-downgrade" src="https://analy [...]
+ 'Copyright © 2021 <a href="https://apache.org";>The Apache Software
Foundation</a>, Licensed under the <a
href="https://www.apache.org/licenses/LICENSE-2.0";> Apache License, Version
2.0</a>. Hudi, Apache and the Apache feather logo are trademarks of The Apache
Software Foundation.<img referrerpolicy="no-referrer-when-downgrade"
src="https://static.scarf.sh/a.png?x-pxid=8f594acf-9b77-44fb-9475-3e82ead1910c";
/><img referrerpolicy="no-referrer-when-downgrade" src="https://analytics.a
[...]
},
prism: {
theme: themes.dracula,
@@ -574,7 +554,7 @@ module.exports = {
"data-button-text": "Ask AI",
"data-consent-required": "true",
"data-consent-screen-title": "Help us improve our AI assistant",
- "data-consent-screen-disclaimer" : "By clicking "Allow
tracking", you consent to the use of the AI assistant in accordance with
kapa.ai's [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This
service uses reCAPTCHA, which requires your consent to Google's [Privacy
Policy](https://policies.google.com/privacy) and [Terms of
Service](https://policies.google.com/terms). By proceeding, you explicitly
agree to both kapa.ai's and Google's privacy policies.",
+ "data-consent-screen-disclaimer" : "By clicking "Allow
tracking", you consent to the use of the AI assistant in accordance with
kapa.ai's [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This
service uses reCAPTCHA, which requires your consent to Google's [Privacy
Policy](https://policies.google.com/privacy) and [Terms of
Service](https://policies.google.com/terms). By proceeding, you explicitly
agree to both kapa.ai's and Google's privacy policies.",
"data-consent-screen-accept-button-text": "Allow tracking",
"data-modal-disclaimer-font-size" : "0.80rem",
"data-query-input-placeholder-text-color": "#29557a",
@@ -607,5 +587,7 @@ module.exports = {
stylesheets: [
"https://fonts.googleapis.com/css?family=Comfortaa|Ubuntu|Roboto|Source+Code+Pro",
"https://at-ui.github.io/feather-font/css/iconfont.css";,
+
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap";,
+
"https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap";
],
};
diff --git a/website/src/components/BlogsSlider/BlogCard.js
b/website/src/components/BlogsSlider/BlogCard.js
index b918a087508e..cd41d75e86fd 100644
--- a/website/src/components/BlogsSlider/BlogCard.js
+++ b/website/src/components/BlogsSlider/BlogCard.js
@@ -41,9 +41,6 @@ const BlogCard = ({ blog }) => {
</div>
<div className={styles.cardTitleWrapper}>
<h5 className={styles.blogTitle}>{title}</h5>
- <div>
- <ArrowRight />
- </div>
</div>
</div>
</div>
diff --git a/website/src/components/BlogsSlider/index.js
b/website/src/components/BlogsSlider/index.js
index dbd36ef41ee9..b942c80421d4 100644
--- a/website/src/components/BlogsSlider/index.js
+++ b/website/src/components/BlogsSlider/index.js
@@ -69,7 +69,7 @@ const BlogsSlider = () => {
<section className={styles.cardBlogWrapper}>
<div className="container">
<div className={styles.titleWrapper}>
- <Title primaryText="Hudi" secondaryText="Blogs" />
+ <Title primaryText="Hudi Blogs"/>
</div>
<div className={styles.embla} ref={emblaRef}>
diff --git a/website/src/components/BlogsSlider/styles.module.css
b/website/src/components/BlogsSlider/styles.module.css
index 8b56494bf192..5777d642b540 100644
--- a/website/src/components/BlogsSlider/styles.module.css
+++ b/website/src/components/BlogsSlider/styles.module.css
@@ -1,6 +1,6 @@
.cardBlogWrapper {
padding: 80px 20px;
- background: var(--ifm-color-primary-light-grey);
+ background: var(--ifm-background-gray-50);
}
.blogsWrapper {
padding: 10px;
@@ -61,6 +61,7 @@
.authorName {
color: var(--ifm-color-secondary-text);
+ font-family: var(--ifm-heading-font-family);
}
.date {
@@ -69,10 +70,12 @@
}
.blogTitle {
- font-weight: 500;
+ font-weight: 600;
font-size: 20px;
line-height: 24px;
margin: 0;
+ color: var(--ifm-blue-900);
+ font-family: var(--ifm-heading-font-family);
}
.dots {
margin: 0 7px;
diff --git a/website/src/components/DataLakes/index.js
b/website/src/components/DataLakes/index.js
index a56890e566ee..acf3e007faf0 100644
--- a/website/src/components/DataLakes/index.js
+++ b/website/src/components/DataLakes/index.js
@@ -1,22 +1,32 @@
import React from "react";
import Title from "@site/src/components/Title";
+import clsx from "classnames";
+import styles from "./styles.module.css";
const DataLake = () => {
return (
<section className="data-lake">
<div className="container">
- <Title primaryText="What is" secondaryText="Hudi" />
+ <Title primaryText="What is Hudi"/>
<div className="sub-title text--center text--semibold
margin-bottom--md">
Apache Hudi is an open data lakehouse platform, built on a
high-performance open table format
- to bring database functionality to your data lakes. <br/>
+ to bring database functionality to your data lakes.
Hudi reimagines slow old-school batch data processing with
a
powerful new incremental processing framework for low
latency minute-level analytics.
</div>
+ {/*desktop view*/}
<img
- className="hudi-lake text-center"
-
src={require("/assets/images/hudi-lake-overview.png").default}
- alt="Hudi Data Lake"
+ className={clsx("hudi-lake text-center md:",
styles.lakeOverviewImage)}
+
src={require("/assets/images/hudi-lake-overview.png").default}
+ alt="Hudi Data Lake"
+ />
+
+ {/* mobile view*/}
+ <img
+ className={clsx("hudi-lake text-center",
styles.lakeOverviewImageMobile)}
+
src={require("/assets/images/hudi-lake-overview-mobile.png").default}
+ alt="Hudi Data Lake"
/>
</div>
</section>
diff --git a/website/src/components/DataLakes/styles.module.css
b/website/src/components/DataLakes/styles.module.css
new file mode 100644
index 000000000000..748eabb37132
--- /dev/null
+++ b/website/src/components/DataLakes/styles.module.css
@@ -0,0 +1,18 @@
+.lakeOverviewImage {
+ display: block;
+ margin-top: 40px;
+}
+
+.lakeOverviewImageMobile {
+ display: none;
+ margin-top: 60px;
+}
+
+@media only screen and (max-width: 767px) {
+ .lakeOverviewImage {
+ display: none;
+ }
+ .lakeOverviewImageMobile {
+ display: block;
+ }
+}
diff --git a/website/src/components/EventFeature/index.js
b/website/src/components/EventFeature/index.js
index 85bbedb082e1..cd1d8f5256eb 100644
--- a/website/src/components/EventFeature/index.js
+++ b/website/src/components/EventFeature/index.js
@@ -6,27 +6,28 @@ import Microphone from "./Icons/microphone.svg";
const Events = () => {
return (
- <section>
- <div className={styles.banner}>
- <div className="container">
- <div className={styles.flexContainer}>
- <div className={styles.bannercontent}>
- <h3>Apache Hudi Meetup | ASIA (Chinese)</h3>
- <p>Next-Generation Lakehouse: The Intelligent
Future Engine</p>
- <p className= {styles. flexParagraph}>
- <span
className={styles.sideCalendar}><Calendar/></span>
- Oct 23 (Thursday) 14:00 - 17:30 (China Standard
Time) |
- Beijing JD.com Headquarters</p>
- </div>
- <div className={styles.joinButton}>
- <LinkButton class={styles.registerbutton}
type="secondary" to="https://www.bagevent.com/event/9098955";>
- Join Now
- </LinkButton>
- </div>
- </div>
- </div>
- </div>
- </section>
+ <section className={styles.eventWrapper}>
+ <div className="container">
+ <div className={styles.eventContainer}>
+ <p className={styles.upcomingEventTitle}>
+ UPCOMING EVENT
+ </p>
+ <div className={styles.eventContent}>
+ <div className={styles.textContainer}>
+ <h1 className={styles.title}>Apache Hudi Meetup | ASIA
(Chinese)</h1>
+ <h3 className={styles.subTitle}>Next-Generation Lakehouse: The
Intelligent Future Engine</h3>
+ <p className={styles.timeText}>Oct 23 (Thursday) 14:00 - 17:30
(China Standard Time) | Beijing JD.com
+ Headquarters</p>
+ </div>
+ <div className={styles.rsvpTodayBtn}>
+ <LinkButton class={styles.blogBtn}
to="https://www.bagevent.com/event/9098955";>
+ RSVP Today
+ </LinkButton>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
);
}
export default Events;
diff --git a/website/src/components/EventFeature/styles.module.css
b/website/src/components/EventFeature/styles.module.css
index 90dadb585d2a..c74edb56b854 100644
--- a/website/src/components/EventFeature/styles.module.css
+++ b/website/src/components/EventFeature/styles.module.css
@@ -1,47 +1,68 @@
-.banner {
+.eventWrapper {
+ padding-bottom: 150px;
+}
+
+.eventContainer {
+ padding: 30px 40px;
+ border: 2px solid var(--ifmyellow-500);
+ border-radius: 20px;
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: space-between;
- background: linear-gradient(to right, #2F93EF 0%, #1E5FBD 100%);
- color: white;
- padding-bottom: 0px;
- padding-top: 20px;
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-}
-.sideMicrophone {
- margin-right: 10px;
- height: 20px;
-}
-.sideCalendar {
- margin-right: 10px;
- margin-left: 5px;
- height: 20px;
+ gap: 20px;
+ background: #fff;
+ background: #fff;
+ position: relative;
+ z-index: 10;
+ box-shadow: 0px 9px 18px 0px #082C541C;
}
-
-.joinButton {
- margin-bottom: 20px;
+.eventContent {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 16px;
}
-
-.registerbutton {
- background-color: #ffffff;
- color: #074D86;
- border: none;
- padding: 10px 30px;
- border-radius: 10px;
- cursor: pointer;
- text-transform: uppercase;
- font-weight: bold;
- display: inline-block;
- text-align: center;
- min-width: 140px
+.upcomingEventTitle {
+ color: var(--ifm-blue-700);
+ font-size: 14px;
+ font-weight: 600;
+ margin: 0;
+ font-family: var(--ifm-font-family-base);
}
-.flexContainer {
+
+.textContainer {
display: flex;
- justify-content: space-between;
+ flex-direction: column;
+ gap:6px;
align-items: center;
+ text-align: center;
}
-.flexParagraph {
+.title, .subTitle {
+ font-weight: 700;
+ color: var(--ifm-blue-800);
+ margin: 0;
+ font-family: var(--ifm-font-family-base);
+}
+
+.title {
+ font-size: 24px;
+}
+
+.subTitle {
+ font-size: 18px;
+}
+
+.timeText {
+ font-weight: 400;
+ color: var(--ifm-blue-900);
+ font-size: 16px;
+ margin: 0;
+ font-family: var(--ifm-heading-font-family);
+}
+
+.rsvpTodayBtn {
display: flex;
align-items: center;
-}
\ No newline at end of file
+ justify-content: center;
+}
diff --git a/website/src/components/GetInvolvedGrid/index.js
b/website/src/components/GetInvolvedGrid/index.js
new file mode 100644
index 000000000000..7cf7a69caf3e
--- /dev/null
+++ b/website/src/components/GetInvolvedGrid/index.js
@@ -0,0 +1,100 @@
+import React from 'react';
+import styles from './styles.module.css';
+import Title from "@site/src/components/Title";
+
+const GetInvolvedGrid = () => {
+ const data = [
+ {
+ title: 'For development discussions',
+ content: (
+ <>
+ <a href="https://github.com/apache/hudi/discussions";>Github
Discussions</a> or Dev Mailing list (
+ <a href="mailto:[email protected]";>Subscribe</a>,{' '}
+ <a href="mailto:[email protected]";>Unsubscribe</a>,{'
'}
+ <a
href="https://lists.apache.org/[email protected]";>Archives</a>).
+ <br />
+ Empty email works for subscribe/unsubscribe.
+ </>
+ ),
+ },
+ {
+ title: 'For any general questions, user support',
+ content: (
+ <>
+ <a href="https://github.com/apache/hudi/discussions";>Github
Discussions</a> or Users Mailing list (
+ <a href="mailto:[email protected]";>Subscribe</a>,{' '}
+ <a
href="mailto:[email protected]";>Unsubscribe</a>,{' '}
+ <a
href="https://lists.apache.org/[email protected]";>Archives</a>).
+ <br />
+ Empty email works for subscribe/unsubscribe.
+ </>
+ ),
+ },
+ {
+ title: 'For reporting bugs or known issues',
+ content: (
+ <>
+ Use Github <a
href="https://github.com/apache/hudi/issues";>Issues</a>, please read
guidelines{' '}
+ <a href="/contribute/how-to-contribute#filing-issues">here</a>.
+ </>
+ ),
+ },
+ {
+ title: 'For quick pings & 1-1 chats',
+ content: (
+ <>
+ Join our <a
href="https://hudi.apache.org/community/join-slack";>Slack group</a>. Or drop an
email to{' '}
+ <a href="mailto:[email protected]";>[email protected]</a>.
+ </>
+ ),
+ },
+ {
+ title: 'For proposing large features, changes',
+ content: (
+ <>
+ Start a RFC. Instructions <a href="/contribute/rfc-process">here</a>.
+ </>
+ ),
+ },
+ {
+ title: 'Join sync-up meetings',
+ content: (
+ <>
+ <a href="/community/syncs">Community sync</a> and <a
href="/contribute/developer-sync-call">Dev Sync</a>.
+ </>
+ ),
+ },
+ {
+ title: 'For stream of commits, pull requests etc',
+ content: (
+ <>
+ Commits Mailing list (
+ <a href="mailto:[email protected]";>Subscribe</a>,{'
'}
+ <a
href="mailto:[email protected]";>Unsubscribe</a>,{' '}
+ <a
href="https://lists.apache.org/[email protected]";>Archives</a>).
+ </>
+ ),
+ },
+ ];
+
+ return (
+ <div>
+ <div className={styles.getInvloved}>
+ <Title primaryText="Get Involved"/>
+ <div className={styles.subTitle}>
+ There are several ways to get in touch with the Hudi community.
+ </div>
+ </div>
+ <div className={styles.container}>
+ {data.map((item, idx) => (
+ <div key={idx} className={styles.card}>
+ <h3 className={styles.cardTitle}>{item.title}</h3>
+ <p className={styles.cardDesc}>{item.content}</p>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+export default GetInvolvedGrid
diff --git a/website/src/components/GetInvolvedGrid/styles.module.css
b/website/src/components/GetInvolvedGrid/styles.module.css
new file mode 100644
index 000000000000..19a3e250a443
--- /dev/null
+++ b/website/src/components/GetInvolvedGrid/styles.module.css
@@ -0,0 +1,103 @@
+.container {
+ display: grid;
+ grid-template-columns: repeat(3,1fr);
+ gap: 1.5rem;
+ margin-top: 2rem;
+}
+
+.card {
+ border-radius: 10px;
+ padding: 1.5rem;
+ box-shadow: 0 1px 3px #06376D1A;
+}
+
+.card:hover {
+ box-shadow: 0px 5px 12px 0px #06376D1A;
+}
+
+
+.card p,
+.card a {
+ color: #1e293b;
+ font-size: 0.95rem;
+ line-height: 1.6;
+}
+
+.card a {
+ color: #0078e7;
+ text-decoration: none;
+}
+
+.card a:hover {
+ text-decoration: underline;
+}
+
+.getInvloved {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ align-items: center;
+}
+
+.subTitle {
+ font-size: 22px;
+ font-weight: 400;
+ color: var(--ifm-blue-900);
+ font-family: var(--ifm-heading-font-family);
+ text-align: center;
+}
+
+.cardTitle {
+ color: var(--ifm-blue-900);
+ font-weight: 600;
+ font-size: 18px;
+ border-bottom: 1px solid var(--ifm-gray-500);
+ padding-bottom: 8px;
+}
+
+.cardDesc {
+ color: var(--ifm-blue-900) !important;
+ font-size: 16px;
+ font-weight: 400;
+ font-family: var(--ifm-heading-font-family);
+}
+
+.cardDesc a {
+ color: var(--ifm-blue-900) !important;
+ font-size: 16px;
+ font-weight: 400;
+ text-decoration: underline;
+ font-family: var(--ifm-heading-font-family);
+}
+
+@media screen and (max-width: 1200px) {
+ .container {
+ grid-template-columns: repeat(2,1fr);
+ }
+
+ .subTitle {
+ font-size: 18px;
+ font-weight: 400;
+ color: var(--ifm-blue-900);
+ font-family: var(--ifm-heading-font-family);
+ text-align: center;
+ }
+}
+
+@media screen and (max-width: 1000px) {
+ .container {
+ grid-template-columns: repeat(2,1fr);
+ }
+}
+
+
+@media screen and (max-width: 600px) {
+ .container {
+ grid-template-columns: repeat(1,1fr);
+ }
+}
+
+.docMainContainer {
+ flex-grow: 1;
+ max-width: calc(100% - var(--doc-sidebar-width));
+}
diff --git a/website/src/components/HomepageFeatures/FeaturesBox.js
b/website/src/components/HomepageFeatures/FeaturesBox.js
index 79cba07bb4b4..e2556bde13fd 100644
--- a/website/src/components/HomepageFeatures/FeaturesBox.js
+++ b/website/src/components/HomepageFeatures/FeaturesBox.js
@@ -11,7 +11,7 @@ const FeaturesBox = ({ data }) => {
<Link to={link}>
{data.icon && <Icon />}
<h4 className={styles.featuresTitle}>{title}</h4>
- <p>{description}</p>
+ <p className={styles.featuresSubTitle}>{description}</p>
</Link>
</div>
);
diff --git a/website/src/components/HomepageFeatures/index.js
b/website/src/components/HomepageFeatures/index.js
index 89307ec1fa8c..f12a1cb4fd1e 100644
--- a/website/src/components/HomepageFeatures/index.js
+++ b/website/src/components/HomepageFeatures/index.js
@@ -84,7 +84,7 @@ const HomepageFeatures = () => {
<section className={styles.featuresWrapper}>
<div className="container">
<div className={styles.titleWrapper}>
- <Title primaryText="Hudi" secondaryText="Features" />
+ <Title primaryText="Hudi Features"/>
</div>
<div className={styles.wrapperContainer}>
{features.map((data, i) => (
diff --git a/website/src/components/HomepageFeatures/styles.module.css
b/website/src/components/HomepageFeatures/styles.module.css
index dbaaa18ad965..e8db78256238 100644
--- a/website/src/components/HomepageFeatures/styles.module.css
+++ b/website/src/components/HomepageFeatures/styles.module.css
@@ -1,8 +1,8 @@
/*@import "../../css/custom.css";*/
.featuresWrapper {
- background: var(--ifm-color-primary-light-grey);
- padding: 80px 20px;
+ background: var(--ifm-background-gray-50);
+ padding: 100px 20px;
}
.titleWrapper {
text-align: center;
@@ -17,7 +17,13 @@
background: var(--ifm-color-white);
border-radius: 12px;
padding: 25px;
+}
+.boxWrapper:hover {
+ box-shadow: 0px 5px 12px 0px #06376D1A;
+}
+.featuresWrapper > div {
+ padding: 0px !important;
}
.boxWrapper a {
@@ -44,11 +50,17 @@
font-weight: 700;
font-size: 20px;
line-height: 24px;
- color: var(--ifm-color-gray-900);
+ color: var(--ifm-blue-900);
margin: 0 0 10px;
+ font-family: var(--ifm-heading-font-family);
}
-
+.featuresSubTitle{
+ font-weight: 400;
+ font-size: 16px;
+ color: var(--ifm-blue-900);
+ font-family: var(--ifm-heading-font-family);
+}
@media only screen and (max-width: 992px) {
.wrapperContainer {
@@ -60,5 +72,13 @@
.wrapperContainer {
grid-template-columns: auto;
}
+
+ .featuresTitle {
+ font-size: 18px !important;
+ }
+
+ .featuresSubTitle{
+ font-size: 14px !important;
+ }
}
diff --git a/website/src/components/HomepageHeader/FeatureRender.js
b/website/src/components/HomepageHeader/FeatureRender.js
index 6a9848556e24..21e8d16a9758 100644
--- a/website/src/components/HomepageHeader/FeatureRender.js
+++ b/website/src/components/HomepageHeader/FeatureRender.js
@@ -7,11 +7,10 @@ import styles from "./styles.module.css";
const FeatureRender = () => {
const { siteConfig } = useDocusaurusContext();
const {
- taglineConfig: { prefix, suffix, content },
+ taglineConfig: { suffix, content }
} = siteConfig.customFields;
return (
<div className={styles.headlineWrapper}>
- <div>{prefix}</div>
<TypeAnimation
sequence={[
content[0],
@@ -26,7 +25,7 @@ const FeatureRender = () => {
repeat={Infinity}
className={styles.typingText}
/>
- <div>{suffix}</div>
+ <div>{suffix}</div>
</div>
);
};
diff --git a/website/src/components/HomepageHeader/index.js
b/website/src/components/HomepageHeader/index.js
index 7d7767018f0e..6cf9fb4a6cc2 100644
--- a/website/src/components/HomepageHeader/index.js
+++ b/website/src/components/HomepageHeader/index.js
@@ -35,29 +35,33 @@ function addElement() {
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
- const [firstHalf, secondHaf] = siteConfig.title.split(" ");
+ const {
+ taglineConfig: { prefix }
+ } = siteConfig.customFields;
+ const [firstHalf, secondHaf] = prefix.split('™');
return (
- <header className={clsx("hero hero--primary", styles.heroBanner)}>
+ <header className={clsx("", styles.heroBanner)}>
<div className="container">
<div className={styles.contentWrapper}>
<div className={styles.content}>
<div className={styles.leftContent}>
<h1 className={clsx("hero__title", styles.heroTitle)}>
- <span>{firstHalf}</span> {secondHaf}
+ {firstHalf}
+ <sup className={styles.textTm}>TM</sup>
+ {secondHaf}
</h1>
- <FeatureRender />
+ <FeatureRender/>
<div className={styles.buttons}>
<LinkButton to="/releases/release-1.0.2">
- Latest releases
+ Get Started
</LinkButton>
<LinkButton type="secondary" to="/docs/quick-start-guide">
- Documentation
+ Read Docs
</LinkButton>
</div>
</div>
<div className={styles.videoWrapper}>
- <div id={styles.ytContainer} onClick={addElement}></div>
- <div><i>Clicking on and playing the video above will load and
send data from and to Google.</i></div>
+ <img src={require("/assets/images/hudi-logo.png").default}
alt={'hudi-logo'}/>
</div>
</div>
</div>
diff --git a/website/src/components/HomepageHeader/styles.module.css
b/website/src/components/HomepageHeader/styles.module.css
index e6b24789592a..93313ee5daeb 100644
--- a/website/src/components/HomepageHeader/styles.module.css
+++ b/website/src/components/HomepageHeader/styles.module.css
@@ -1,9 +1,8 @@
.heroBanner {
- padding: 4rem 0;
+ padding: 146px 0;
text-align: center;
position: relative;
overflow: hidden;
- background: var(--ifm-color-primary-light-grey);
}
.heroImg {
@@ -22,6 +21,7 @@
text-align: left;
display: flex;
align-items: center;
+ justify-content: space-between;
}
.imageWrapper {
@@ -46,26 +46,58 @@
height: 315px;
}
-.leftContent {
- width: 50%;
-}
-
.heroTitle {
+ font-size: 54px;
width: unset;
- color: var(--ifm-color-secondary-text);
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-font-family-base);
+ margin: 0;
+}
+
+.textTm {
+ font-size: 13px;
+ line-height: 0;
+ vertical-align: super;
+ position: relative;
+ top: -0.9rem;
+}
+
+
+.headlineWrapper {
+ font-size: 54px;
+ line-height: 67px;
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-font-family-base);
+ font-weight: 700;
}
-.heroTitle span {
- color: var(--ifm-color-primary-text);
+@media only screen and (max-width: 1165px) {
+ .videoWrapper {
+ width: 350px;
+ }
+ .heroTitle, .headlineWrapper {
+ font-size: 44px !important;
+ }
+ .textTm {
+ top: -0.6rem !important;
+ }
}
@media screen and (max-width: 966px) {
.heroBanner {
- padding: 2rem;
+ padding: 100px 0;
+ text-align: center;
+ position: relative;
+ overflow: hidden;
+ }
+ .textTm {
+ top: -0.5rem !important;
}
+
.content {
flex-direction: column;
align-items: center;
+ gap: 20px;
}
@@ -81,6 +113,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ order:1;
}
#ytContainer {
@@ -99,13 +132,40 @@
display: flex;
flex-direction: column;
align-items: center;
- margin-bottom: 30px;
+ order:2;
+ }
+
+ .heroTitle, .headlineWrapper {
+ font-size: 40px !important;
+ line-height: 50px !important;
+ }
+
+ .headlineWrapper {
+ text-align: center;
}
}
@media screen and (max-width: 480px) {
+ .videoWrapper {
+ width: 270px;
+ }
.buttons {
flex-direction: column;
+ width: 100%;
+ }
+ .textTm {
+ font-size: 11px;
+ top: -0.3rem !important;
+ }
+
+ .buttons a {
+ width: 100% !important;
+ text-align: center;
+ }
+
+ .heroTitle, .headlineWrapper {
+ font-size: 32px !important;
+ line-height: 40px !important;
}
}
@@ -116,15 +176,8 @@
margin-top: 40px;
}
-.headlineWrapper {
- display: flex;
- color: var(--ifm-color-black);
- font-size: 26px;
- line-height: 30px;
- flex-wrap: wrap;
-}
-
.typingText {
- color: var(--ifm-color-primary-text);
- font-weight: bold;
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-font-family-base);
+ font-weight: 700;
}
diff --git a/website/src/components/Integrations/Icons/Parquet.png
b/website/src/components/Integrations/Icons/Parquet.png
new file mode 100644
index 000000000000..8f8c56705257
Binary files /dev/null and
b/website/src/components/Integrations/Icons/Parquet.png differ
diff --git a/website/src/components/Integrations/Icons/airflow-sq.png
b/website/src/components/Integrations/Icons/airflow-sq.png
new file mode 100644
index 000000000000..06fd0b51dd0d
Binary files /dev/null and
b/website/src/components/Integrations/Icons/airflow-sq.png differ
diff --git a/website/src/components/Integrations/Icons/alibaba-cloud-sq.png
b/website/src/components/Integrations/Icons/alibaba-cloud-sq.png
new file mode 100644
index 000000000000..0bf0e9a79f3f
Binary files /dev/null and
b/website/src/components/Integrations/Icons/alibaba-cloud-sq.png differ
diff --git a/website/src/components/Integrations/Icons/alluxio-sq.png
b/website/src/components/Integrations/Icons/alluxio-sq.png
new file mode 100644
index 000000000000..2f60cc2e35a5
Binary files /dev/null and
b/website/src/components/Integrations/Icons/alluxio-sq.png differ
diff --git a/website/src/components/Integrations/Icons/athena-sq.png
b/website/src/components/Integrations/Icons/athena-sq.png
new file mode 100644
index 000000000000..7dc4f94cc593
Binary files /dev/null and
b/website/src/components/Integrations/Icons/athena-sq.png differ
diff --git a/website/src/components/Integrations/Icons/avro-sq.png
b/website/src/components/Integrations/Icons/avro-sq.png
new file mode 100644
index 000000000000..7d6290aada2d
Binary files /dev/null and
b/website/src/components/Integrations/Icons/avro-sq.png differ
diff --git a/website/src/components/Integrations/Icons/azure-lake-sq.png
b/website/src/components/Integrations/Icons/azure-lake-sq.png
new file mode 100644
index 000000000000..3ec34fb59172
Binary files /dev/null and
b/website/src/components/Integrations/Icons/azure-lake-sq.png differ
diff --git a/website/src/components/Integrations/Icons/bigquery-sq.png
b/website/src/components/Integrations/Icons/bigquery-sq.png
new file mode 100644
index 000000000000..198eb86a91fe
Binary files /dev/null and
b/website/src/components/Integrations/Icons/bigquery-sq.png differ
diff --git a/website/src/components/Integrations/Icons/cassandra-sq.png
b/website/src/components/Integrations/Icons/cassandra-sq.png
new file mode 100644
index 000000000000..29cccfdd8ac1
Binary files /dev/null and
b/website/src/components/Integrations/Icons/cassandra-sq.png differ
diff --git a/website/src/components/Integrations/Icons/csv-sq.png
b/website/src/components/Integrations/Icons/csv-sq.png
new file mode 100644
index 000000000000..15f9f1165ed9
Binary files /dev/null and
b/website/src/components/Integrations/Icons/csv-sq.png differ
diff --git a/website/src/components/Integrations/Icons/datahub-sq.png
b/website/src/components/Integrations/Icons/datahub-sq.png
new file mode 100644
index 000000000000..1fddd8d64537
Binary files /dev/null and
b/website/src/components/Integrations/Icons/datahub-sq.png differ
diff --git a/website/src/components/Integrations/Icons/dbt-sq.png
b/website/src/components/Integrations/Icons/dbt-sq.png
new file mode 100644
index 000000000000..3c0d410ee0ba
Binary files /dev/null and
b/website/src/components/Integrations/Icons/dbt-sq.png differ
diff --git a/website/src/components/Integrations/Icons/doris-sq.png
b/website/src/components/Integrations/Icons/doris-sq.png
new file mode 100644
index 000000000000..0a6d9cfe029a
Binary files /dev/null and
b/website/src/components/Integrations/Icons/doris-sq.png differ
diff --git a/website/src/components/Integrations/Icons/flink-sq.png
b/website/src/components/Integrations/Icons/flink-sq.png
new file mode 100644
index 000000000000..7fe5b38d618f
Binary files /dev/null and
b/website/src/components/Integrations/Icons/flink-sq.png differ
diff --git a/website/src/components/Integrations/Icons/gcp-cloud-storage-sq.png
b/website/src/components/Integrations/Icons/gcp-cloud-storage-sq.png
new file mode 100644
index 000000000000..d49fedc06f02
Binary files /dev/null and
b/website/src/components/Integrations/Icons/gcp-cloud-storage-sq.png differ
diff --git a/website/src/components/Integrations/Icons/glue-sq.png
b/website/src/components/Integrations/Icons/glue-sq.png
new file mode 100644
index 000000000000..072eab5c7506
Binary files /dev/null and
b/website/src/components/Integrations/Icons/glue-sq.png differ
diff --git a/website/src/components/Integrations/Icons/hadoop-sq.png
b/website/src/components/Integrations/Icons/hadoop-sq.png
new file mode 100644
index 000000000000..be03aeab8de3
Binary files /dev/null and
b/website/src/components/Integrations/Icons/hadoop-sq.png differ
diff --git a/website/src/components/Integrations/Icons/hive-sq.png
b/website/src/components/Integrations/Icons/hive-sq.png
new file mode 100644
index 000000000000..6993c7ef0468
Binary files /dev/null and
b/website/src/components/Integrations/Icons/hive-sq.png differ
diff --git a/website/src/components/Integrations/Icons/hudi-sq.png
b/website/src/components/Integrations/Icons/hudi-sq.png
new file mode 100644
index 000000000000..1f0780213b8b
Binary files /dev/null and
b/website/src/components/Integrations/Icons/hudi-sq.png differ
diff --git a/website/src/components/Integrations/Icons/impala-sq.png
b/website/src/components/Integrations/Icons/impala-sq.png
new file mode 100644
index 000000000000..3cb210be711c
Binary files /dev/null and
b/website/src/components/Integrations/Icons/impala-sq.png differ
diff --git a/website/src/components/Integrations/Icons/json-sq.png
b/website/src/components/Integrations/Icons/json-sq.png
new file mode 100644
index 000000000000..538899b16ffc
Binary files /dev/null and
b/website/src/components/Integrations/Icons/json-sq.png differ
diff --git a/website/src/components/Integrations/Icons/kafka-sq.png
b/website/src/components/Integrations/Icons/kafka-sq.png
new file mode 100644
index 000000000000..29dc7dd57559
Binary files /dev/null and
b/website/src/components/Integrations/Icons/kafka-sq.png differ
diff --git a/website/src/components/Integrations/Icons/minio.png
b/website/src/components/Integrations/Icons/minio.png
new file mode 100644
index 000000000000..a2e769cafac4
Binary files /dev/null and
b/website/src/components/Integrations/Icons/minio.png differ
diff --git a/website/src/components/Integrations/Icons/mongodb-sq.png
b/website/src/components/Integrations/Icons/mongodb-sq.png
new file mode 100644
index 000000000000..7195219d1b0c
Binary files /dev/null and
b/website/src/components/Integrations/Icons/mongodb-sq.png differ
diff --git a/website/src/components/Integrations/Icons/mysql-sq.png
b/website/src/components/Integrations/Icons/mysql-sq.png
new file mode 100644
index 000000000000..8c9c5ce8b337
Binary files /dev/null and
b/website/src/components/Integrations/Icons/mysql-sq.png differ
diff --git a/website/src/components/Integrations/Icons/oracle-sq.png
b/website/src/components/Integrations/Icons/oracle-sq.png
new file mode 100644
index 000000000000..b2c27544691d
Binary files /dev/null and
b/website/src/components/Integrations/Icons/oracle-sq.png differ
diff --git a/website/src/components/Integrations/Icons/parquet-sq.png
b/website/src/components/Integrations/Icons/parquet-sq.png
new file mode 100644
index 000000000000..f65f5404a862
Binary files /dev/null and
b/website/src/components/Integrations/Icons/parquet-sq.png differ
diff --git a/website/src/components/Integrations/Icons/postgres-sq.png
b/website/src/components/Integrations/Icons/postgres-sq.png
new file mode 100644
index 000000000000..9306ba4e727a
Binary files /dev/null and
b/website/src/components/Integrations/Icons/postgres-sq.png differ
diff --git a/website/src/components/Integrations/Icons/presto.png
b/website/src/components/Integrations/Icons/presto.png
new file mode 100644
index 000000000000..09208d9e19f6
Binary files /dev/null and
b/website/src/components/Integrations/Icons/presto.png differ
diff --git a/website/src/components/Integrations/Icons/pulsar.png
b/website/src/components/Integrations/Icons/pulsar.png
new file mode 100644
index 000000000000..b087c34f746b
Binary files /dev/null and
b/website/src/components/Integrations/Icons/pulsar.png differ
diff --git a/website/src/components/Integrations/Icons/redshift-sq.png
b/website/src/components/Integrations/Icons/redshift-sq.png
new file mode 100644
index 000000000000..473943c737b9
Binary files /dev/null and
b/website/src/components/Integrations/Icons/redshift-sq.png differ
diff --git a/website/src/components/Integrations/Icons/rocket-mq.png
b/website/src/components/Integrations/Icons/rocket-mq.png
new file mode 100644
index 000000000000..b5a9f197107c
Binary files /dev/null and
b/website/src/components/Integrations/Icons/rocket-mq.png differ
diff --git a/website/src/components/Integrations/Icons/s3-sq.png
b/website/src/components/Integrations/Icons/s3-sq.png
new file mode 100644
index 000000000000..c993f645536b
Binary files /dev/null and
b/website/src/components/Integrations/Icons/s3-sq.png differ
diff --git a/website/src/components/Integrations/Icons/spark-sq.png
b/website/src/components/Integrations/Icons/spark-sq.png
new file mode 100644
index 000000000000..cca2d96735aa
Binary files /dev/null and
b/website/src/components/Integrations/Icons/spark-sq.png differ
diff --git a/website/src/components/Integrations/Icons/starrocks-sq.png
b/website/src/components/Integrations/Icons/starrocks-sq.png
new file mode 100644
index 000000000000..db15cad78a4a
Binary files /dev/null and
b/website/src/components/Integrations/Icons/starrocks-sq.png differ
diff --git a/website/src/components/Integrations/Icons/trino-sq.png
b/website/src/components/Integrations/Icons/trino-sq.png
new file mode 100644
index 000000000000..0f4b2a317dc0
Binary files /dev/null and
b/website/src/components/Integrations/Icons/trino-sq.png differ
diff --git a/website/src/components/Integrations/Icons/upload.png
b/website/src/components/Integrations/Icons/upload.png
new file mode 100644
index 000000000000..6c030fc89ddf
Binary files /dev/null and
b/website/src/components/Integrations/Icons/upload.png differ
diff --git a/website/src/components/Integrations/Services.js
b/website/src/components/Integrations/Services.js
new file mode 100644
index 000000000000..2a7d92de142f
--- /dev/null
+++ b/website/src/components/Integrations/Services.js
@@ -0,0 +1,28 @@
+import styles from "./styles.module.css";
+
+const Services = ({ name, serviceData }) => {
+
+ return(
+ <div className={styles.serviceWrapper}>
+ <div className={styles.title}>
+ {name}
+ </div>
+ <div className={styles.serviceListContainer}>
+ {
+ serviceData?.map((elem) => {
+ return (
+ <div className={styles.serviceList}>
+ <img src={elem.icon} alt={elem.title}/>
+ <div className={styles.serviceTitle}>
+ {elem.title}
+ </div>
+ </div>
+ )
+ })
+ }
+ </div>
+ </div>
+ )
+}
+
+export default Services
diff --git a/website/src/components/Integrations/data.js
b/website/src/components/Integrations/data.js
new file mode 100644
index 000000000000..6d648565c804
--- /dev/null
+++ b/website/src/components/Integrations/data.js
@@ -0,0 +1,107 @@
+import KafkaIcon from "./Icons/kafka-sq.png";
+import RocketMqIcon from "./Icons/rocket-mq.png";
+import PulsorIcon from "./Icons/pulsar.png";
+import PostgresIcon from "./Icons/postgres-sq.png";
+import CassandraIcon from "./Icons/cassandra-sq.png";
+import MongoDbIcon from "./Icons/mongodb-sq.png";
+import MySqlIcon from "./Icons/mysql-sq.png";
+import ParQuetIcon from "./Icons/parquet-sq.png";
+import HudiIcon from "./Icons/hudi-sq.png";
+import ArvoIcon from "./Icons/avro-sq.png";
+import JsonIcon from "./Icons/json-sq.png";
+import CsvIcon from "./Icons/csv-sq.png";
+import OracleIcon from "./Icons/oracle-sq.png";
+import HadoopIcon from "./Icons/hadoop-sq.png"
+import S3Icon from "./Icons/s3-sq.png"
+import CloudStorageIcon from "./Icons/gcp-cloud-storage-sq.png";
+import AzureIcon from "./Icons/azure-lake-sq.png";
+import AlibabaIcon from "./Icons/alibaba-cloud-sq.png";
+import MinioIcon from "./Icons/minio.png";
+import AlluxioIcon from "./Icons/alluxio-sq.png";
+import NativeUplodIcon from "./Icons/upload.png";
+import GluerIcon from "./Icons/glue-sq.png";
+import HiveIcon from "./Icons/hive-sq.png";
+import DatahubIcon from "./Icons/datahub-sq.png"
+import RedshiftIcon from "./Icons/redshift-sq.png";
+import BigQueryIcon from "./Icons/bigquery-sq.png";
+import ApacheDorisIcon from "./Icons/doris-sq.png"
+import TrinoIcon from "./Icons/trino-sq.png";
+import AthenaIcon from "./Icons/athena-sq.png";
+import PrestoIcopn from "./Icons/presto.png";
+import ApacheSparkIcon from "./Icons/spark-sq.png";
+import ApacheImpalaIcon from "./Icons/impala-sq.png";
+import StarRockIcon from "./Icons/starrocks-sq.png";
+import FlinkIcon from "./Icons/flink-sq.png";
+import DbtIcon from "./Icons/dbt-sq.png";
+import ApacheAirFlow from "./Icons/airflow-sq.png"
+
+
+export const dataStream = [
+ {title: "Apache Kafka", icon:KafkaIcon},
+ {title: "Rocket MQ", icon:RocketMqIcon},
+ {title: "Pulsar", icon:PulsorIcon}
+]
+
+export const cloudStorage = [
+ {title: "Parquet", icon: ParQuetIcon},
+ {title: "Hudi", icon: HudiIcon},
+ {title: "Arvo", icon: ArvoIcon},
+ {title: "JSON files", icon: JsonIcon},
+ {title: "CSV files", icon: CsvIcon},
+ {title: "Oracle Cloud", icon: OracleIcon}
+]
+
+export const databasesData = [
+ {title: "Postgress", icon: PostgresIcon},
+ {title: "Cassandra", icon: CassandraIcon},
+ {title: "MongoDB", icon: MongoDbIcon},
+ {title: "MySQL", icon: MySqlIcon}
+]
+
+export const lakehousePlateformData = [
+ {title: "Hadoop", icon: HadoopIcon},
+ {title: "S3", icon: S3Icon},
+ {title: "Google Cloud Storage", icon: CloudStorageIcon},
+ {title: "Azure Data Lake", icon: AzureIcon},
+ {title: "Alibaba Cloud", icon: AlibabaIcon},
+ {title: "Minio", icon: MinioIcon},
+ {title: "Alluxio", icon: AlluxioIcon},
+ {title: "Native Uploads", icon: NativeUplodIcon}
+]
+
+export const metastoreData = [
+ {title: "Glue", icon: GluerIcon},
+ {title: "Hive", icon: HiveIcon},
+ {title: "DataHub", icon: DatahubIcon},
+]
+
+export const biAnalytics = [
+ {title: "Redshift", icon: RedshiftIcon},
+ {title: "BigQuery", icon: BigQueryIcon},
+ {title: "Apache Doris", icon: ApacheDorisIcon},
+]
+
+export const interactiveAnalytics = [
+ {title: "Trino", icon: TrinoIcon},
+ {title: "Athena", icon: AthenaIcon},
+ {title: "Presto", icon: PrestoIcopn},
+]
+
+export const batchAnalytics = [
+ {title: "Hive", icon: HiveIcon},
+ {title: "Apache Spark", icon: ApacheSparkIcon},
+ {title: "Apache Impala", icon: ApacheImpalaIcon},
+]
+
+export const streamAnalytics = [
+ {title: "Apache Spark", icon: ApacheSparkIcon},
+ {title: "StarRocks", icon: StarRockIcon},
+ {title: "Flink", icon: FlinkIcon},
+]
+
+export const orchestrationData = [
+ {title: "dbt", icon: DbtIcon},
+ {title: "Apache Airflow", icon: ApacheAirFlow},
+]
+
+
diff --git a/website/src/components/Integrations/index.js
b/website/src/components/Integrations/index.js
new file mode 100644
index 000000000000..1687fc9ba167
--- /dev/null
+++ b/website/src/components/Integrations/index.js
@@ -0,0 +1,59 @@
+import React from "react";
+import {
+ batchAnalytics,
+ biAnalytics,
+ cloudStorage,
+ databasesData,
+ dataStream,
+ interactiveAnalytics,
+ lakehousePlateformData,
+ metastoreData, orchestrationData, streamAnalytics
+} from "./data";
+import Services from "./Services";
+import styles from "./styles.module.css";
+import Title from "@site/src/components/Title";
+
+const Integrations = () => {
+return(
+ <section className={'container'}>
+ <div className={styles.integrationWrapper}>
+ <Title primaryText="Integrations" />
+ <div className={styles.integrationContainer}>
+ <div className={styles.serviceGroup}>
+ <div className={styles.serviceLeft}>
+ <Services name={"Data Stream"} serviceData={dataStream}/>
+ <Services name={"Databases"} serviceData={databasesData}/>
+ </div>
+ <div className={styles.serviceLeft}>
+ <Services name={"Cloud Storage"} serviceData={cloudStorage}/>
+ </div>
+ </div>
+ <div className={styles.serviceGroup}>
+ <div className={styles.serviceLeft}>
+ <Services name={"Lakehouse Platform"}
serviceData={lakehousePlateformData}/>
+ </div>
+ </div>
+ <div className={styles.serviceGroup}>
+ <div className={styles.serviceLeft}>
+ <Services name={"Metastore"} serviceData={metastoreData}/>
+ </div>
+ </div>
+
+ <div className={styles.serviceGroup}>
+ <div className={styles.serviceLeft}>
+ <Services name={"BI Analytics"} serviceData={biAnalytics}/>
+ <Services name={"Interactive Analytics"}
serviceData={interactiveAnalytics}/>
+ <Services name={"Batch Analyitics"}
serviceData={batchAnalytics}/>
+ </div>
+ <div className={styles.serviceLeft}>
+ <Services name={"Stream Analytics"}
serviceData={streamAnalytics}/>
+ <Services name={"Orchestration"}
serviceData={orchestrationData}/>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+)
+}
+
+export default Integrations
diff --git a/website/src/components/Integrations/styles.module.css
b/website/src/components/Integrations/styles.module.css
new file mode 100644
index 000000000000..accb55984e5c
--- /dev/null
+++ b/website/src/components/Integrations/styles.module.css
@@ -0,0 +1,94 @@
+.integrationWrapper {
+ padding: 100px 0;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+ align-items: center;
+}
+.integrationContainer {
+ display: grid;
+ grid-template-columns: repeat(4,1fr);
+ gap: 17px;
+}
+
+.serviceWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ width: 190px;
+}
+
+.title {
+ color: var(--ifm-blue-900);
+ font-size: 16px;
+ font-family: var(--ifm-heading-font-family);
+ border-bottom: 1px solid var(--ifm-gray-500);
+ font-weight: 500;
+}
+
+.serviceListContainer {
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+}
+
+.serviceList {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.serviceTitle {
+ color: var(--ifm-blue-900);
+ font-weight: 400;
+ font-size: 14px;
+ font-family: var(--ifm-heading-font-family);
+}
+
+.serviceGroup {
+ display: flex;
+ gap: 30px;
+ padding: 20px;
+ background: var(--ifm-background-gray-50);
+ border-radius: 16px;
+ height: fit-content
+}
+
+.serviceLeft {
+ display: flex;
+ flex-direction: column;
+ gap: 30px;
+ flex:1;
+}
+
+@media(max-width:1440px){
+ .integrationContainer {
+ display: grid;
+ grid-template-columns: repeat(2,1fr);
+ gap: 17px;
+ }
+
+ .serviceWrapper {
+ width:100% !important;
+ }
+}
+
+@media(max-width:767px){
+ .integrationContainer {
+ display: grid;
+ grid-template-columns: repeat(1,1fr);
+ gap: 17px;
+ }
+
+ .serviceWrapper {
+ width:100% !important;
+ }
+
+ .title {
+ font-size: 14px !important;
+ }
+
+ .serviceGroup {
+ gap: 20px !important;
+ }
+}
diff --git a/website/src/components/JoinCommunity/CommunityCard.js
b/website/src/components/JoinCommunity/CommunityCard.js
index f84945e3751e..e650d43c0add 100644
--- a/website/src/components/JoinCommunity/CommunityCard.js
+++ b/website/src/components/JoinCommunity/CommunityCard.js
@@ -10,12 +10,9 @@ const CommunityCard = ({ media }) => {
className={styles.communityCard}
onClick={() => window.open(url, "_blank")}
>
- <Icon />
+ <Icon className={styles.socialLogo} />
<div className={styles.mediaTitle}>
<p className={styles.title}>{title}</p>
- <p className={styles.linkText}>
- {linkText} <ArrowRight />
- </p>
</div>
</div>
);
diff --git a/website/src/components/JoinCommunity/index.js
b/website/src/components/JoinCommunity/index.js
index 15274d8e8e58..d94bd5aa7153 100644
--- a/website/src/components/JoinCommunity/index.js
+++ b/website/src/components/JoinCommunity/index.js
@@ -16,6 +16,18 @@ const JoinCommunity = () => {
const { slackUrl } = siteConfig.customFields;
const communityData = [
+ {
+ icon: YoutubeIcon,
+ title: "Youtube",
+ linkText: "Subscribe",
+ url: "https://www.youtube.com/channel/UCs7AhE0BWaEPZSChrBR-Muw";,
+ },
+ {
+ icon: LinkedinIcon,
+ title: "Linkedin",
+ linkText: "Join community",
+ url: "https://www.linkedin.com/company/apache-hudi/?viewAsMember=true";,
+ },
{
icon: GitHubIcon,
title: "GitHub",
@@ -29,10 +41,10 @@ const JoinCommunity = () => {
url: slackUrl,
},
{
- icon: LinkedinIcon,
- title: "Linkedin",
- linkText: "Join community",
- url: "https://www.linkedin.com/company/apache-hudi/?viewAsMember=true";,
+ icon: MailIcon,
+ title: "Mailing",
+ linkText: "Subscribe",
+ url: "mailto:[email protected]?Subject=SubscribeToHudi";,
},
{
icon: XIcon,
@@ -40,29 +52,15 @@ const JoinCommunity = () => {
linkText: "Join community",
url: "https://x.com/ApacheHudi";,
},
- {
- icon: YoutubeIcon,
- title: "Youtube",
- linkText: "Subscribe",
- url: "https://www.youtube.com/channel/UCs7AhE0BWaEPZSChrBR-Muw";,
- },
- {
- icon: MailIcon,
- title: "Mailing",
- linkText: "Subscribe",
- url: "mailto:[email protected]?Subject=SubscribeToHudi";,
- },
- ];
- const firstRow = communityData.slice(0, 3);
- const secondRow = communityData.slice(3, 6);
+ ];
return (
<div className={styles.joinCommunityWrapper}>
<div className="container">
<div className={styles.communityContent}>
<div className={styles.leftSideWrapper}>
- <Title primaryText="Join our" secondaryText="Community" />
+ <Title primaryText="Join our Community" />
<p className={styles.communityDescription}>
Get technical help, influence the product roadmap & see what’s
new
with Hudi!
@@ -70,12 +68,7 @@ const JoinCommunity = () => {
</div>
<div className={styles.communityCardWrapper}>
<div className={styles.communityCardChildWrapper}>
- {firstRow.map((media, i) => (
- <CommunityCard key={i} media={media} />
- ))}
- </div>
- <div className={styles.communityCardChildWrapper}>
- {secondRow.map((media, i) => (
+ {communityData.map((media, i) => (
<CommunityCard key={i} media={media} />
))}
</div>
diff --git a/website/src/components/JoinCommunity/styles.module.css
b/website/src/components/JoinCommunity/styles.module.css
index c48adeb33a2c..4680284b331a 100644
--- a/website/src/components/JoinCommunity/styles.module.css
+++ b/website/src/components/JoinCommunity/styles.module.css
@@ -5,17 +5,16 @@
padding: 100px 0;
}
.communityContent {
- display: grid;
- grid-template-columns: 50% 50%;
align-items: center;
gap: 2%;
margin: 0 auto;
}
.communityDescription {
+ color: var(--ifm-blue-900);
font-weight: 400;
- font-size: 20px;
+ font-size: 16px;
line-height: 26px;
- max-width: 480px;
+ margin-top: 10px;
}
.communityCardWrapper {
@@ -26,21 +25,14 @@
}
.communityCardChildWrapper {
- display: flex;
- justify-content: center;
-}
-
-.communityCardChildWrapper > div {
- margin-right: 25px;
- width: calc(33% - 16px);
-}
-
-.communityCardChildWrapper :last-child {
- margin-right: 0;
+ display: grid;
+ grid-template-columns: repeat(6,1fr);
+ width: 100%;
+ align-items: center;
+ gap:20px;
}
.communityCard {
- background: var(--ifm-color-primary-light-grey);
padding: 20px;
text-align: center;
cursor: pointer;
@@ -49,15 +41,23 @@
flex-direction: column;
align-items: center;
justify-content: center;
+ gap:16px;
+}
+
+.communityCard:hover{
+ box-shadow: 0px 8px 18px 0px #082C541A;
+ border-radius: 10px;
}
+
.mediaTitle {
padding-top: 5px;
}
.title {
font-weight: 400;
- font-size: 20px;
- line-height: 26px;
- margin-bottom: 10px;
+ font-size: 14px;
+ margin-bottom: 0px;
+ color: var(--ifm-blue-900);
+ font-family: var(--ifm-font-family-base);
}
.linkText {
display: flex;
@@ -72,6 +72,7 @@
.leftSideWrapper {
width: fit-content;
margin: 0 auto;
+ text-align: center;
}
@media only screen and (max-width: 992px) {
@@ -82,32 +83,35 @@
display: flex;
flex-direction: column;
align-items: center;
+ text-align: center;
}
.communityDescription {
text-align: center;
+ font-family: var(--ifm-heading-font-family);
+ }
+ .communityCardChildWrapper {
+ grid-template-columns: repeat(3,1fr) !important;
}
}
@media only screen and (max-width: 600px) {
.communityCardWrapper {
gap: 0;
+ padding: 15px;
}
.communityCardChildWrapper {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
+ grid-template-columns: repeat(2,1fr) !important;
}
- .communityCardChildWrapper > div {
- margin-right: 0;
- margin-bottom: 25px;
- width: 100%;
+ .communityCard{
+ box-shadow: 0px 8px 18px 0px #082C541A;
+ border-radius: 10px;
}
+}
- .communityCardChildWrapper :last-child {
- margin-bottom: 25px;
- }
+.socialLogo {
+ height: 50px !important;
+ width: 50px !important;
}
diff --git a/website/src/components/SidebarVersions/index.js
b/website/src/components/SidebarVersions/index.js
new file mode 100644
index 000000000000..9d81981563df
--- /dev/null
+++ b/website/src/components/SidebarVersions/index.js
@@ -0,0 +1,59 @@
+import React, {useState} from 'react';
+import Link from '@docusaurus/Link';
+import {
+ useVersions,
+ useActiveDocContext,
+ useDocsPreferredVersion,
+} from '@docusaurus/plugin-content-docs/client';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+import {useLocation} from '@docusaurus/router';
+
+function getTargetPath(version, ctx) {
+ return (ctx.alternateDocVersions?.[version.name] ?? version.mainDoc).path;
+}
+
+const SidebarVersions = ({docsPluginId = 'default'}) => {
+ const {pathname} = useLocation();
+ const [open, setOpen] = useState(false);
+ const versions = useVersions(docsPluginId);
+ const ctx = useActiveDocContext(docsPluginId);
+ const {savePreferredVersionName} = useDocsPreferredVersion(docsPluginId);
+
+ if (!versions?.length || !pathname.startsWith('/docs')) return null;
+
+ const sorted = [...versions].sort((a, b) => (a.label < b.label ? 1 : -1));
+ const headerLabel = `Version ${ctx.activeVersion?.label ?? sorted[0].label}`;
+
+ return (
+ <div className={styles.versions}>
+ <hr className={styles.divider}/>
+ <button className={styles.header} onClick={() => setOpen(o => !o)}>
+ {headerLabel}
+ <span className={clsx(styles.caret, open && styles.caretOpen)}/>
+ </button>
+
+ {open && (
+ <ul className={styles.list}>
+ {sorted.map(v => {
+ const to = getTargetPath(v, ctx);
+ const isActive = v.name === ctx.activeVersion?.name;
+ return (
+ <li key={v.name} className="menu__list-item">
+ <Link
+ to={to}
+ className={clsx(styles.link, isActive && styles.linkActive)}
+ onClick={() => savePreferredVersionName(v.name)}
+ >
+ {v.label}
+ </Link>
+ </li>
+ );
+ })}
+ </ul>
+ )}
+ </div>
+ );
+}
+
+export default SidebarVersions
diff --git a/website/src/components/SidebarVersions/styles.module.css
b/website/src/components/SidebarVersions/styles.module.css
new file mode 100644
index 000000000000..89062c28ba6a
--- /dev/null
+++ b/website/src/components/SidebarVersions/styles.module.css
@@ -0,0 +1,83 @@
+.versions {
+ padding: 2px 16px;
+ margin-top: 8px;
+}
+
+.divider {
+ border: 0;
+ border-top: 1px solid var(--ifm-gray-500, #eaecef);
+ margin: 6px 0;
+}
+
+.header {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: transparent;
+ border: 0;
+ padding: 6px 0px;
+ font-weight: 500;
+ font-size: 0.95rem;
+ cursor: pointer;
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-heading-font-family);
+}
+
+.caret {
+ content: '';
+ margin-left: auto;
+ min-width: 10px;
+ background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 2rem;
+ filter: var(--ifm-menu-link-sublist-icon-filter);
+ height: 10px;
+ transform: rotate(90deg);
+ width: 10px;
+ transition: transform var(--ifm-transition-fast)
+ linear;
+}
+.caretOpen { transform: rotate(180deg); }
+
+.list {
+ margin: 6px 0 8px;
+ padding-left: 16px;
+ display: grid;
+ gap: 6px;
+ overflow: hidden;
+ max-height: 0;
+ animation: expandHeight 1s ease-in-out forwards;
+}
+
+@keyframes expandHeight {
+ from { max-height: 0;}
+ to { max-height: 1000px;}
+}
+
+.list li {
+ list-style: none !important;
+}
+
+.list li a {
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-heading-font-family);
+ transition: all 0.4s ease;
+}
+
+.link {
+ display: inline-block;
+ padding: 4px 16px;
+ border-radius: var(--ifm-global-radius);
+ color: var(--ifm-font-color-base);
+ text-decoration: none;
+ width: 100%;
+ font-weight: 500;
+}
+.link:hover {
+ background: var(--ifm-menu-color-background-hover, rgba(2, 132, 199,
0.08));
+ color: var(--ifm-menu-color);
+}
+.linkActive {
+ color: var(--ifm-blue-800);
+ font-weight: 600;
+ background: var(--ifm-menu-color-background-hover, rgba(2, 132, 199,
0.08));
+}
diff --git a/website/src/components/Title/styles.module.css
b/website/src/components/Title/styles.module.css
index b5c4f4dca063..26eecd96a1a5 100644
--- a/website/src/components/Title/styles.module.css
+++ b/website/src/components/Title/styles.module.css
@@ -1,11 +1,20 @@
.titleWrapper {
display: block;
- font-size: 2.5em;
+ font-size: 44px;
font-weight: bold;
+ margin: 0 !important;
}
.primaryTxt {
- color: var(--ifm-color-secondary-text);
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-font-family-base);
}
.secondaryTxt {
color: var(--ifm-color-primary-text);
+ font-family: var(--ifm-font-family-base);
+}
+
+@media(max-width:600px) {
+ .titleWrapper {
+ font-size: 34px !important;
+ }
}
diff --git a/website/src/components/UI/LinkButton/styles.module.css
b/website/src/components/UI/LinkButton/styles.module.css
index a54d7b456abd..48845615fa41 100644
--- a/website/src/components/UI/LinkButton/styles.module.css
+++ b/website/src/components/UI/LinkButton/styles.module.css
@@ -6,20 +6,37 @@
transition: 0.3s;
font-weight: 500;
text-decoration: none;
+ font-family: var(--ifm-heading-font-family);
}
.button:hover {
text-decoration: none;
}
+.primary, .secondary {
+ font-size: 18px !important;
+}
+
+.primary {
+ background: var(--ifm-blue-500);
+ color: var(--ifm-color-white);
+ border: 2px solid var(--ifm-blue-500);
+}
+
.primary:hover, .secondary {
- color: var(--ifm-color-primary-text);
+ color: var(--ifm-color-white);
+ background: var(--ifm-blue-600);
+ border: 2px solid var(--ifm-blue-600);
+}
+
+.secondary {
background: var(--ifm-color-white);
- border: 2px solid var(--ifm-color-primary-text);
+ border: 2px solid var(--ifm-blue-500);
+ color: var(--ifm-blue-800);
}
-.primary, .secondary:hover {
+.secondary:hover {
color: var(--ifm-color-white);
- background: var(--ifm-color-primary-text);
+ background: var(--ifm-blue-500);
border: 2px solid transparent;
}
diff --git a/website/src/components/WhyHudi/index.js
b/website/src/components/WhyHudi/index.js
index 1c0341475ffd..8dd99b99e3ed 100644
--- a/website/src/components/WhyHudi/index.js
+++ b/website/src/components/WhyHudi/index.js
@@ -41,10 +41,10 @@ const WhyHudi = () => {
<div className={styles.wrapper}>
<div className={styles.title}>
<div className={styles.whyHudiTitle}>
- <Title primaryText="Why" secondaryText="Hudi" />
+ <Title primaryText="Why Hudi" />
</div>
<div className={styles.textWrapper}>
- <div className="text--center text--semibold">
+ <div className="text--center">
The most innovative and completely open data lakehouse platform
in the industry!
</div>
</div>
diff --git a/website/src/components/WhyHudi/styles.module.css
b/website/src/components/WhyHudi/styles.module.css
index 4b54316f9e7d..d27f4a48bc22 100644
--- a/website/src/components/WhyHudi/styles.module.css
+++ b/website/src/components/WhyHudi/styles.module.css
@@ -4,13 +4,13 @@
}
.cardsWrapper {
display: grid;
- gap: 20px;
+ gap: 30px;
grid-template-columns: auto auto auto auto;
margin-top: 60px;
}
.whyHudiTitle {
text-align: center;
- margin-bottom: 15px;
+ margin-bottom: 10px;
}
.textWrapper {
@@ -21,6 +21,10 @@
.textWrapper > div {
max-width: 720px;
+ color: var(--ifm-blue-900);
+ font-weight: 400 !important;
+ font-size: 18px;
+ font-family: var(--ifm-heading-font-family);
}
@media screen and (max-width: 992px) {
@@ -33,3 +37,15 @@
grid-template-columns: auto;
}
}
+
+
+@media (max-width: 767px) {
+ .textWrapper > div {
+ font-size: 16px !important;
+ }
+
+ .wrapper {
+ width: 100%;
+ padding: 100px 20px;
+ }
+}
diff --git a/website/src/components/WhyHudiCards/styles.module.css
b/website/src/components/WhyHudiCards/styles.module.css
index c2bc6142091f..7db09fcf339c 100644
--- a/website/src/components/WhyHudiCards/styles.module.css
+++ b/website/src/components/WhyHudiCards/styles.module.css
@@ -3,7 +3,6 @@
height: 100%;
border-radius: 12px;
padding: 25px 0 25px 0;
- background-color: var(--ifm-color-primary-light-grey);
display: flex;
flex-direction: column;
align-items: center;
@@ -14,17 +13,17 @@
line-height: 34px;
margin-top: 20px;
margin-bottom: 0;
- color: var(--ifm-color-gray-900);
- padding: 0 25px;
+ color: var(--ifm-blue-900);
+ text-align: center;
+ font-family: var(--ifm-heading-font-family);
}
.subtitle {
font-size: 16px;
margin-top: 10px;
font-weight: 400;
- line-height: 20px;
- padding: 0 25px;
- color: var(--ifm-color-gray-900);
+ color: var(--ifm-blue-900);
text-align: center;
+ font-family: var(--ifm-heading-font-family);
}
.iconWrapper {
background-color: var(--ifm-color-secondary-text);
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index b99b566be3d2..f84cb66da5f7 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -32,6 +32,19 @@
--ifm-color-icon-backgroung: rgba(206, 238, 247, 0.5);
--ifm-code-font-size: 95%;
--ifm-navbar-height: 5rem;
+ --ifm-blue-500: #228EDE;
+ --ifm-blue-600: #0478C0;
+ --ifm-blue-700: #205792;
+ --ifm-blue-800: #15467D;
+ --ifm-blue-900: #082C54;
+ --ifmyellow-500: #FFAA00;
+ --ifm-gray-500: #C0CED5;
+ --ifm-gray-600: #ABBDC7;
+ --ifm-gray-800: #69818E;
+ --ifm-gray-900: #50646E;
+ --ifm-background-gray-50: #F8F9FB;
+ --ifm-font-family-base: 'Montserrat';
+ --ifm-heading-font-family: 'Zalando Sans';
}
.dropdown__link--active, .dropdown__link--active:hover {
@@ -58,6 +71,10 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
}
+.data-lake .sub-title {
+ margin-top: 10px !important;
+}
+
@media (max-width: 767px) {
.hero__img, .header-github-link, .header-slack-link, .header-twitter-link,
.header-youtube-link, .header-linkedin-link {
display: none;
@@ -69,58 +86,27 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
.button--lg {
--ifm-button-size-multiplier: 1;
}
-}
-
-@media only screen and (max-width: 1460px){
- .navbar__item, .navbar__link {
- font-size: 0.65em !important;
+ .data-lake .sub-title {
+ width: 90% !important;
+ font-size: 16px !important;
}
-
-
}
-@media only screen and (max-width: 1250px){
- .navbar__item {
- font-size: 0.6em !important;
- padding: 5px;
- }
- .navbar__link {
- font-size: 0.6em !important;
- }
+
+.dropdown__link, .menu__link {
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-heading-font-family);
}
-@media only screen and (max-width: 1055px){
- .navbar__item {
- font-size: 0.5em !important;
- padding: 5px;
- }
- .navbar__link {
- font-size: 0.5em !important;
- }
+.navbar__item, .navbar__link {
+ font-size: 16px !important;
+ color: var(--ifm-blue-800);
+ font-family: var(--ifm-heading-font-family);
}
+
.navbar__link {
width: max-content;
}
-@media(max-width:1820px){
- .navbar__item, .navbar__link {
- font-size:90% !important;
- }
-}
-@media(max-width:1602px){
- .navbar__item, .navbar__link {
- font-size:80% !important;
- }
-}
-@media(max-width:1440px){
- .navbar__item, .navbar__link {
- font-size:70% !important;
- }
-}
-@media(max-width:1440px){
- .navbar__item, .navbar__link {
- font-size:70% !important;
- }
-}
@media(max-width:1350px){
a.menu__link.navbarFontSize_src-theme-Navbar-MobileSidebar-PrimaryMenu-styles-module
{
@@ -222,8 +208,27 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
.data-lake .sub-title {
text-align: center;
+ width: 80%;
+ font-size: 18px;
+ color: var(--ifm-blue-900);
+ font-weight: 400 !important;
+ font-family: var(--ifm-heading-font-family);
+}
+
+.data-lake {
+ background: #fff;
+ border-radius: 20px;
+ position: relative;
+ z-index: 10;
}
+.data-lake .container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+
table.features {
display: inline-table;
border-collapse: separate;
@@ -443,6 +448,17 @@ h1.blogPostTitle_src-theme-BlogPostItem-styles-module{
margin-left: 8px;
}
+.navbar-sidebar__back {
+ color: var(--ifm-blue-900) !important;;
+}
+
+.menu__link--sublist-caret:after {
+ min-width: 10px !important;
+ height: 10px !important;
+ width: 10px !important;
+ margin-left: auto !important;
+}
+
.locale-dropdown-wrapper {
display: flex;
align-items: center;
@@ -462,15 +478,6 @@ h1.blogPostTitle_src-theme-BlogPostItem-styles-module{
}
}
-@media(max-width:1350px){
- .navbar__item {
- display: none !important;
- }
- .navbar__toggle {
- display: inherit !important;
- }
-}
-
.theme-doc-sidebar-item-link .menu__link{
padding-left: 1rem !important;
padding-right: 1rem !important;
@@ -540,3 +547,47 @@ div[class^="announcementBar"][role="banner"] {
.markdown a {
font-size: inherit !important;
}
+
+.footer__title {
+ color: var(--ifm-gray-800);
+ font-size: 18px;
+ font-weight: 700;
+ margin-bottom: 0px;
+ font-family: var(--ifm-heading-font-family);
+}
+
+.footer__link-item {
+ color: var(--ifm-gray-900);
+ font-weight: 400;
+ font-family: var(--ifm-heading-font-family);
+}
+
+.dropdown > .navbar__link::after {
+ border: solid var(--ifm-blue-900);
+ border-width: 0 2px 2px 0;
+}
+
+.home_background_img {
+ position: absolute;
+ right: 0;
+}
+
+.row:has(.docItemCol_VOVn):not(:has(.theme-doc-toc-desktop)) .docItemCol_VOVn {
+ max-width: 100% !important;
+}
+
+@media screen and (max-width: 966px) {
+ .home_background_img {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 930px) {
+ .navbar__item {
+ display: none !important;
+ }
+ .navbar__toggle {
+ display: inherit !important;
+ }
+}
+
diff --git a/website/src/css/fonts/Montserrat-Bold.ttf
b/website/src/css/fonts/Montserrat-Bold.ttf
new file mode 100644
index 000000000000..830952e68280
Binary files /dev/null and b/website/src/css/fonts/Montserrat-Bold.ttf differ
diff --git a/website/src/css/fonts/Montserrat-SemiBold.ttf
b/website/src/css/fonts/Montserrat-SemiBold.ttf
new file mode 100644
index 000000000000..96d0dfb4a95e
Binary files /dev/null and b/website/src/css/fonts/Montserrat-SemiBold.ttf
differ
diff --git a/website/src/css/fonts/ZalandoSans-Bold.ttf
b/website/src/css/fonts/ZalandoSans-Bold.ttf
new file mode 100644
index 000000000000..cbed65e84fba
Binary files /dev/null and b/website/src/css/fonts/ZalandoSans-Bold.ttf differ
diff --git a/website/src/css/fonts/ZalandoSans-Medium.ttf
b/website/src/css/fonts/ZalandoSans-Medium.ttf
new file mode 100644
index 000000000000..56c37b44a286
Binary files /dev/null and b/website/src/css/fonts/ZalandoSans-Medium.ttf differ
diff --git a/website/src/css/fonts/ZalandoSans-Regular.ttf
b/website/src/css/fonts/ZalandoSans-Regular.ttf
new file mode 100644
index 000000000000..32b54cd6b209
Binary files /dev/null and b/website/src/css/fonts/ZalandoSans-Regular.ttf
differ
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 7fb9d0af7812..58116ad18fd4 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -8,18 +8,9 @@ import JoinCommunity from "@site/src/components/JoinCommunity";
import WhyHudi from "@site/src/components/WhyHudi";
import HomepageHeader from "@site/src/components/HomepageHeader";
import BlogsSlider from "@site/src/components/BlogsSlider";
+import Integrations from "@site/src/components/Integrations";
import styles from './styles.module.css';
-function NewReleaseMessage() {
- return (
- <div className="container">
- <div className="wrapper">
- <br />
- </div>
- </div>
- );
-}
-
export default function Home() {
const { siteConfig } = useDocusaurusContext();
return (
@@ -27,16 +18,18 @@ export default function Home() {
title={`Apache Hudi | An Open Source Data Lake Platform`}
shouldShowOnlyTitle={true}
description="Description will go into a meta tag in <head />">
- <NewReleaseMessage />
- <HomepageHeader />
- {/* <Events /> */}
- <main>
- <DataLake />
- <HomepageFeatures />
- <WhyHudi />
- <BlogsSlider />
- <JoinCommunity />
- </main>
+ <img src={require("/assets/images/home-background.png").default}
alt={'bg-image'} className={'home_background_img'} />
+ <HomepageHeader />
+ {/*<Events />*/}
+ <main>
+ <DataLake />
+ <Integrations/>
+ <HomepageFeatures />
+ <WhyHudi />
+ <BlogsSlider />
+ <JoinCommunity />
+ </main>
+
</Layout>
);
}
diff --git a/website/src/theme/DocSidebar/Desktop/CollapseButton/index.js
b/website/src/theme/DocSidebar/Desktop/CollapseButton/index.js
new file mode 100644
index 000000000000..2df337b581d2
--- /dev/null
+++ b/website/src/theme/DocSidebar/Desktop/CollapseButton/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import {translate} from '@docusaurus/Translate';
+import IconArrow from '@theme/Icon/Arrow';
+import styles from './styles.module.css';
+export default function CollapseButton({onClick}) {
+ return (
+ <button
+ type="button"
+ title={translate({
+ id: 'theme.docs.sidebar.collapseButtonTitle',
+ message: 'Collapse sidebar',
+ description: 'The title attribute for collapse button of doc sidebar',
+ })}
+ aria-label={translate({
+ id: 'theme.docs.sidebar.collapseButtonAriaLabel',
+ message: 'Collapse sidebar',
+ description: 'The title attribute for collapse button of doc sidebar',
+ })}
+ className={clsx(
+ 'button button--secondary button--outline',
+ styles.collapseSidebarButton,
+ )}
+ onClick={onClick}>
+ <IconArrow className={styles.collapseSidebarButtonIcon} />
+ </button>
+ );
+}
diff --git
a/website/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
b/website/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
new file mode 100644
index 000000000000..df46519f224f
--- /dev/null
+++ b/website/src/theme/DocSidebar/Desktop/CollapseButton/styles.module.css
@@ -0,0 +1,40 @@
+:root {
+ --docusaurus-collapse-button-bg: transparent;
+ --docusaurus-collapse-button-bg-hover: rgb(0 0 0 / 10%);
+}
+
+[data-theme='dark']:root {
+ --docusaurus-collapse-button-bg: rgb(255 255 255 / 5%);
+ --docusaurus-collapse-button-bg-hover: rgb(255 255 255 / 10%);
+}
+
+@media (min-width: 997px) {
+ .collapseSidebarButton {
+ display: block !important;
+ background-color: var(--docusaurus-collapse-button-bg);
+ height: 40px;
+ position: sticky;
+ bottom: 0;
+ border-radius: 0;
+ border: 1px solid var(--ifm-toc-border-color);
+ }
+
+ .collapseSidebarButtonIcon {
+ transform: rotate(180deg);
+ margin-top: 4px;
+ }
+
+ [dir='rtl'] .collapseSidebarButtonIcon {
+ transform: rotate(0);
+ }
+
+ .collapseSidebarButton:hover,
+ .collapseSidebarButton:focus {
+ background-color: var(--docusaurus-collapse-button-bg-hover);
+ }
+}
+
+.collapseSidebarButton {
+ display: none;
+ margin: 0;
+}
diff --git a/website/src/theme/DocSidebar/Desktop/Content/index.js
b/website/src/theme/DocSidebar/Desktop/Content/index.js
new file mode 100644
index 000000000000..0bac0eab4206
--- /dev/null
+++ b/website/src/theme/DocSidebar/Desktop/Content/index.js
@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import {
+ useAnnouncementBar,
+ useScrollPosition,
+} from '@docusaurus/theme-common/internal';
+import {translate} from '@docusaurus/Translate';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import SidebarVersions from "@site/src/components/SidebarVersions";
+import styles from './styles.module.css';
+function useShowAnnouncementBar() {
+ const {isActive} = useAnnouncementBar();
+ const [showAnnouncementBar, setShowAnnouncementBar] = useState(isActive);
+ useScrollPosition(
+ ({scrollY}) => {
+ if (isActive) {
+ setShowAnnouncementBar(scrollY === 0);
+ }
+ },
+ [isActive],
+ );
+ return isActive && showAnnouncementBar;
+}
+export default function DocSidebarDesktopContent({path, sidebar, className}) {
+ const showAnnouncementBar = useShowAnnouncementBar();
+ return (
+ <nav
+ aria-label={translate({
+ id: 'theme.docs.sidebar.navAriaLabel',
+ message: 'Docs sidebar',
+ description: 'The ARIA label for the sidebar navigation',
+ })}
+ className={clsx(
+ 'menu thin-scrollbar',
+ styles.menu,
+ showAnnouncementBar && styles.menuWithAnnouncementBar,
+ className,
+ )}>
+ <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+ <DocSidebarItems items={sidebar} activePath={path} level={1}/>
+ <li className="menu__list-item" style={{marginTop: 8}}>
+ <SidebarVersions />
+ </li>
+ </ul>
+ </nav>
+ );
+}
diff --git a/website/src/theme/DocSidebar/Desktop/Content/styles.module.css
b/website/src/theme/DocSidebar/Desktop/Content/styles.module.css
new file mode 100644
index 000000000000..0c43a4e40fe9
--- /dev/null
+++ b/website/src/theme/DocSidebar/Desktop/Content/styles.module.css
@@ -0,0 +1,16 @@
+@media (min-width: 997px) {
+ .menu {
+ flex-grow: 1;
+ padding: 0.5rem;
+ }
+ @supports (scrollbar-gutter: stable) {
+ .menu {
+ padding: 0.5rem 0 0.5rem 0.5rem;
+ scrollbar-gutter: stable;
+ }
+ }
+
+ .menuWithAnnouncementBar {
+ margin-bottom: var(--docusaurus-announcement-bar-height);
+ }
+}
diff --git a/website/src/theme/DocSidebar/Desktop/index.js
b/website/src/theme/DocSidebar/Desktop/index.js
new file mode 100644
index 000000000000..07f1464f8ff8
--- /dev/null
+++ b/website/src/theme/DocSidebar/Desktop/index.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import Logo from '@theme/Logo';
+import CollapseButton from '@theme/DocSidebar/Desktop/CollapseButton';
+import Content from '@theme/DocSidebar/Desktop/Content';
+import styles from './styles.module.css';
+function DocSidebarDesktop({path, sidebar, onCollapse, isHidden}) {
+ const {
+ navbar: {hideOnScroll},
+ docs: {
+ sidebar: {hideable},
+ },
+ } = useThemeConfig();
+ return (
+ <div
+ className={clsx(
+ styles.sidebar,
+ hideOnScroll && styles.sidebarWithHideableNavbar,
+ isHidden && styles.sidebarHidden,
+ )}>
+ {hideOnScroll && <Logo tabIndex={-1} className={styles.sidebarLogo} />}
+ <Content path={path} sidebar={sidebar} />
+ {hideable && <CollapseButton onClick={onCollapse} />}
+ </div>
+ );
+}
+export default React.memo(DocSidebarDesktop);
diff --git a/website/src/theme/DocSidebar/Desktop/styles.module.css
b/website/src/theme/DocSidebar/Desktop/styles.module.css
new file mode 100644
index 000000000000..c5d5e50e16fb
--- /dev/null
+++ b/website/src/theme/DocSidebar/Desktop/styles.module.css
@@ -0,0 +1,37 @@
+@media (min-width: 997px) {
+ .sidebar {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ padding-top: var(--ifm-navbar-height);
+ width: var(--doc-sidebar-width);
+ }
+
+ .sidebarWithHideableNavbar {
+ padding-top: 0;
+ }
+
+ .sidebarHidden {
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ .sidebarLogo {
+ display: flex !important;
+ align-items: center;
+ margin: 0 var(--ifm-navbar-padding-horizontal);
+ min-height: var(--ifm-navbar-height);
+ max-height: var(--ifm-navbar-height);
+ color: inherit !important;
+ text-decoration: none !important;
+ }
+
+ .sidebarLogo img {
+ margin-right: 0.5rem;
+ height: 2rem;
+ }
+}
+
+.sidebarLogo {
+ display: none;
+}
diff --git a/website/src/theme/DocSidebar/Mobile/index.js
b/website/src/theme/DocSidebar/Mobile/index.js
new file mode 100644
index 000000000000..a5c9139b577e
--- /dev/null
+++ b/website/src/theme/DocSidebar/Mobile/index.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+ NavbarSecondaryMenuFiller,
+ ThemeClassNames,
+} from '@docusaurus/theme-common';
+import {useNavbarMobileSidebar} from '@docusaurus/theme-common/internal';
+import DocSidebarItems from '@theme/DocSidebarItems';
+import SidebarVersions from "@site/src/components/SidebarVersions";
+// eslint-disable-next-line react/function-component-definition
+const DocSidebarMobileSecondaryMenu = ({sidebar, path}) => {
+ const mobileSidebar = useNavbarMobileSidebar();
+ return (
+ <ul className={clsx(ThemeClassNames.docs.docSidebarMenu, 'menu__list')}>
+ <DocSidebarItems
+ items={sidebar}
+ activePath={path}
+ onItemClick={(item) => {
+ // Mobile sidebar should only be closed if the category has a link
+ if (item.type === 'category' && item.href) {
+ mobileSidebar.toggle();
+ }
+ if (item.type === 'link') {
+ mobileSidebar.toggle();
+ }
+ }}
+ level={1}
+ />
+ <li className="menu__list-item" style={{marginTop: 8}}>
+ <SidebarVersions/>
+ </li>
+ </ul>
+ );
+};
+
+function DocSidebarMobile(props) {
+ return (
+ <NavbarSecondaryMenuFiller
+ component={DocSidebarMobileSecondaryMenu}
+ props={props}
+ />
+ );
+}
+export default React.memo(DocSidebarMobile);
diff --git a/website/src/theme/DocSidebar/index.js
b/website/src/theme/DocSidebar/index.js
new file mode 100644
index 000000000000..d0f4e7e759d0
--- /dev/null
+++ b/website/src/theme/DocSidebar/index.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {useWindowSize} from '@docusaurus/theme-common';
+import DocSidebarDesktop from '@theme/DocSidebar/Desktop';
+import DocSidebarMobile from '@theme/DocSidebar/Mobile';
+export default function DocSidebar(props) {
+ const windowSize = useWindowSize();
+ // Desktop sidebar visible on hydration: need SSR rendering
+ const shouldRenderSidebarDesktop =
+ windowSize === 'desktop' || windowSize === 'ssr';
+ // Mobile sidebar not visible on hydration: can avoid SSR rendering
+ const shouldRenderSidebarMobile = windowSize === 'mobile';
+ return (
+ <>
+ {shouldRenderSidebarDesktop && <DocSidebarDesktop {...props} />}
+ {shouldRenderSidebarMobile && <DocSidebarMobile {...props} />}
+ </>
+ );
+}
diff --git a/website/src/theme/Footer/Copyright/index.js
b/website/src/theme/Footer/Copyright/index.js
new file mode 100644
index 000000000000..d239a7a26064
--- /dev/null
+++ b/website/src/theme/Footer/Copyright/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+export default function FooterCopyright({copyright}) {
+ return (
+ <div
+ className="footer__copyright"
+ // Developer provided the HTML, so assume it's safe.
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{__html: copyright}}
+ />
+ );
+}
diff --git a/website/src/theme/Footer/Layout/index.js
b/website/src/theme/Footer/Layout/index.js
new file mode 100644
index 000000000000..f22028fcc7f6
--- /dev/null
+++ b/website/src/theme/Footer/Layout/index.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import styles from './styles.module.css'
+
+export default function FooterLayout({style, links, logo, copyright}) {
+ return (
+ <footer
+ className={clsx(
+ ThemeClassNames.layout.footer.container,
+ 'footer',
+ styles.footerCustom, // module class
+ {'footer--dark': style === 'dark'}
+ )}
+ >
+ <div className={clsx('container', 'container-fluid', styles.container)}>
+ <div className={styles.brand}>{logo}</div>
+ <div className={styles.links}>{links}</div>
+ {copyright && (
+ <div className={styles.legal}>{copyright}</div>
+ )}
+ </div>
+ </footer>
+ );
+}
diff --git a/website/src/theme/Footer/Layout/styles.module.css
b/website/src/theme/Footer/Layout/styles.module.css
new file mode 100644
index 000000000000..6ea3b6dcf3db
--- /dev/null
+++ b/website/src/theme/Footer/Layout/styles.module.css
@@ -0,0 +1,80 @@
+.footerCustom {
+ background: var(--ifm-background-gray-50);
+ color: var(--ifm-blue-900);
+}
+
+.container {
+ display: grid;
+ grid-template-columns: 220px 1fr;
+ grid-template-rows: auto auto;
+ column-gap: 40px;
+ row-gap: 18px;
+ align-items: start;
+}
+
+.brand {
+ grid-column: 1;
+ grid-row: 1;
+ display: flex;
+ align-items: flex-start;
+}
+
+.links {
+ grid-column: 2;
+ grid-row: 1;
+ display: grid;
+}
+.links :global(.footer__links) {
+ display: grid !important;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 12px 36px;
+}
+
+.brand a {
+ opacity: 1 !important;
+}
+
+.legal {
+ grid-column: 1 / -1;
+ grid-row: 2;
+ margin-top: 8px;
+ padding-top: 14px;
+ text-align: left;
+ font-size: 14px;
+ color: var(--ifm-gray-800);
+ text-align: center;
+}
+
+.footer__copyright{
+color: var(--ifm-gray-600);
+ font-weight: 400;
+ font-size: 12px;
+}
+
+:global(.footer__copyright), :global(.footer__copyright a) {
+ color: var(--ifm-gray-600) !important;
+ font-weight: 400 !important;
+ font-size: 12px !important;
+}
+
+:global(.footer__logo) {
+ margin: 0px !important;
+}
+
+@media (max-width: 1200px) {
+ .links :global(.footer__links) {
+ grid-template-columns: repeat(4, 1fr);
+ }
+}
+
+@media (max-width: 900px) {
+ .container { grid-template-columns: 1fr; row-gap: 16px; }
+ .brand { grid-column: 1; grid-row: 1; }
+ .links { grid-column: 1; grid-row: 2; }
+ .links :global(.footer__links) { grid-template-columns: repeat(3, 1fr); }
+ .legal { grid-row: 3; }
+}
+
+@media (max-width: 560px) {
+ .links :global(.footer__links) { grid-template-columns: repeat(2, 1fr); }
+}
diff --git a/website/src/theme/Footer/LinkItem/index.js
b/website/src/theme/Footer/LinkItem/index.js
new file mode 100644
index 000000000000..bb1b8398735c
--- /dev/null
+++ b/website/src/theme/Footer/LinkItem/index.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import isInternalUrl from '@docusaurus/isInternalUrl';
+import IconExternalLink from '@theme/Icon/ExternalLink';
+export default function FooterLinkItem({item}) {
+ const {to, href, label, prependBaseUrlToHref, className, ...props} = item;
+ const toUrl = useBaseUrl(to);
+ const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
+ return (
+ <Link
+ className={clsx('footer__link-item', className)}
+ {...(href
+ ? {
+ href: prependBaseUrlToHref ? normalizedHref : href,
+ }
+ : {
+ to: toUrl,
+ })}
+ {...props}>
+ {label}
+ {href && !isInternalUrl(href) && <IconExternalLink />}
+ </Link>
+ );
+}
diff --git a/website/src/theme/Footer/Links/MultiColumn/index.js
b/website/src/theme/Footer/Links/MultiColumn/index.js
new file mode 100644
index 000000000000..48e19c5ed703
--- /dev/null
+++ b/website/src/theme/Footer/Links/MultiColumn/index.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import {ThemeClassNames} from '@docusaurus/theme-common';
+import LinkItem from '@theme/Footer/LinkItem';
+function ColumnLinkItem({item}) {
+ return item.html ? (
+ <li
+ className={clsx('footer__item', item.className)}
+ // Developer provided the HTML, so assume it's safe.
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{__html: item.html}}
+ />
+ ) : (
+ <li key={item.href ?? item.to} className="footer__item">
+ <LinkItem item={item} />
+ </li>
+ );
+}
+function Column({column}) {
+ return (
+ <div
+ className={clsx(
+ ThemeClassNames.layout.footer.column,
+ 'col footer__col',
+ column.className,
+ )}>
+ <div className="footer__title">{column.title}</div>
+ <ul className="footer__items clean-list">
+ {column.items.map((item, i) => (
+ <ColumnLinkItem key={i} item={item} />
+ ))}
+ </ul>
+ </div>
+ );
+}
+export default function FooterLinksMultiColumn({columns}) {
+ return (
+ <div className="row footer__links">
+ {columns.map((column, i) => (
+ <Column key={i} column={column} />
+ ))}
+ </div>
+ );
+}
diff --git a/website/src/theme/Footer/Links/Simple/index.js
b/website/src/theme/Footer/Links/Simple/index.js
new file mode 100644
index 000000000000..f5df2affa750
--- /dev/null
+++ b/website/src/theme/Footer/Links/Simple/index.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import clsx from 'clsx';
+import LinkItem from '@theme/Footer/LinkItem';
+function Separator() {
+ return <span className="footer__link-separator">·</span>;
+}
+function SimpleLinkItem({item}) {
+ return item.html ? (
+ <span
+ className={clsx('footer__link-item', item.className)}
+ // Developer provided the HTML, so assume it's safe.
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{__html: item.html}}
+ />
+ ) : (
+ <LinkItem item={item} />
+ );
+}
+export default function FooterLinksSimple({links}) {
+ return (
+ <div className="footer__links text--center">
+ <div className="footer__links">
+ {links.map((item, i) => (
+ <React.Fragment key={i}>
+ <SimpleLinkItem item={item} />
+ {links.length !== i + 1 && <Separator />}
+ </React.Fragment>
+ ))}
+ </div>
+ </div>
+ );
+}
diff --git a/website/src/theme/Footer/Links/index.js
b/website/src/theme/Footer/Links/index.js
new file mode 100644
index 000000000000..5da2258b8654
--- /dev/null
+++ b/website/src/theme/Footer/Links/index.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import {isMultiColumnFooterLinks} from '@docusaurus/theme-common';
+import FooterLinksMultiColumn from '@theme/Footer/Links/MultiColumn';
+import FooterLinksSimple from '@theme/Footer/Links/Simple';
+export default function FooterLinks({links}) {
+ return isMultiColumnFooterLinks(links) ? (
+ <FooterLinksMultiColumn columns={links} />
+ ) : (
+ <FooterLinksSimple links={links} />
+ );
+}
diff --git a/website/src/theme/Footer/Logo/index.js
b/website/src/theme/Footer/Logo/index.js
new file mode 100644
index 000000000000..2fdd1ab6a399
--- /dev/null
+++ b/website/src/theme/Footer/Logo/index.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import styles from './styles.module.css';
+function LogoImage({logo}) {
+ const {withBaseUrl} = useBaseUrlUtils();
+ const sources = {
+ light: withBaseUrl(logo.src),
+ dark: withBaseUrl(logo.srcDark ?? logo.src),
+ };
+ return (
+ <ThemedImage
+ className={clsx('footer__logo', logo.className)}
+ alt={logo.alt}
+ sources={sources}
+ width={logo.width}
+ height={logo.height}
+ style={logo.style}
+ />
+ );
+}
+export default function FooterLogo({logo}) {
+ return logo.href ? (
+ <Link
+ href={logo.href}
+ className={styles.footerLogoLink}
+ target={logo.target}>
+ <LogoImage logo={logo} />
+ </Link>
+ ) : (
+ <LogoImage logo={logo} />
+ );
+}
diff --git a/website/src/theme/Footer/Logo/styles.module.css
b/website/src/theme/Footer/Logo/styles.module.css
new file mode 100644
index 000000000000..faf0e60f3e16
--- /dev/null
+++ b/website/src/theme/Footer/Logo/styles.module.css
@@ -0,0 +1,9 @@
+.footerLogoLink {
+ opacity: 0.5;
+ transition: opacity var(--ifm-transition-fast)
+ var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+ opacity: 1;
+}
diff --git a/website/src/theme/Footer/index.js
b/website/src/theme/Footer/index.js
new file mode 100644
index 000000000000..0b91cc91882a
--- /dev/null
+++ b/website/src/theme/Footer/index.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {useThemeConfig} from '@docusaurus/theme-common';
+import FooterLinks from '@theme/Footer/Links';
+import FooterLogo from '@theme/Footer/Logo';
+import FooterCopyright from '@theme/Footer/Copyright';
+import FooterLayout from '@theme/Footer/Layout';
+function Footer() {
+ const {footer} = useThemeConfig();
+ if (!footer) {
+ return null;
+ }
+ const {copyright, links, logo, style} = footer;
+ return (
+ <FooterLayout
+ style={style}
+ links={links && links.length > 0 && <FooterLinks links={links} />}
+ logo={logo && <FooterLogo logo={logo} />}
+ copyright={copyright && <FooterCopyright copyright={copyright} />}
+ />
+ );
+}
+export default React.memo(Footer);
diff --git a/website/src/theme/Navbar/Layout/styles.module.css
b/website/src/theme/Navbar/Layout/styles.module.css
index 1fe91200cb86..f10774c559d4 100644
--- a/website/src/theme/Navbar/Layout/styles.module.css
+++ b/website/src/theme/Navbar/Layout/styles.module.css
@@ -19,8 +19,7 @@
.navbarWrapper {
padding-left: 80px !important;
padding-right: 80px !important;
- box-shadow: none;
- background: var(--ifm-color-primary-light-grey);
+ box-shadow: 0px 2px 2px 0px #06376D14;
}
@media(min-width: 1300px) {
diff --git
a/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css
b/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css
index 4639b97a3d7e..5a22084ad01d 100644
--- a/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css
+++ b/website/src/theme/Navbar/MobileSidebar/PrimaryMenu/styles.module.css
@@ -1,15 +1,3 @@
-@media(max-width:1820px){
- .navbarFontSize{
- font-size:90% !important;
- }
-}
-@media(max-width:1602px){
- .navbarFontSize{
- font-size:80% !important;
- }
-}
-@media(max-width:1440px){
- .navbarFontSize{
- font-size:70% !important;
- }
+.navbarFontSize{
+ font-size: 14px !important;
}
diff --git a/website/src/theme/SearchBar/Icons/search.svg
b/website/src/theme/SearchBar/Icons/search.svg
index 78dc6e93be8f..fad4f5eb78fd 100644
--- a/website/src/theme/SearchBar/Icons/search.svg
+++ b/website/src/theme/SearchBar/Icons/search.svg
@@ -1,4 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none"
xmlns="http://www.w3.org/2000/svg";>
-<circle cx="6.86381" cy="6.86393" r="5.24333" stroke="#1C1E21"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M10.5106 10.783L12.5663 12.8333" stroke="#1C1E21" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="6.86381" cy="6.86393" r="5.24333" stroke="#15467D"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.5106 10.783L12.5663 12.8333" stroke="#15467D" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
diff --git a/website/src/theme/SearchBar/index.js
b/website/src/theme/SearchBar/index.js
index f162736e13df..b0a50603d0f6 100644
--- a/website/src/theme/SearchBar/index.js
+++ b/website/src/theme/SearchBar/index.js
@@ -156,9 +156,6 @@ function DocSearch({contextualSearch, externalUrlRegex,
...props}) {
<div role="button" onTouchStart={importDocSearchModalIfNeeded}
onFocus={importDocSearchModalIfNeeded}
onMouseOver={importDocSearchModalIfNeeded} onClick={openModal}
ref={searchButtonRef}
className={styles.searchButton}
aria-label={translations.button.buttonAriaLabel}>
- <span className={styles.searchText}>
- {translations.button.buttonText}
- </span>
<Search/>
</div>
</div>
diff --git a/website/static/assets/images/home-background.png
b/website/static/assets/images/home-background.png
new file mode 100644
index 000000000000..6eb725de5b65
Binary files /dev/null and b/website/static/assets/images/home-background.png
differ
diff --git a/website/static/assets/images/hudi-lake-overview-mobile.png
b/website/static/assets/images/hudi-lake-overview-mobile.png
new file mode 100644
index 000000000000..916326df55a0
Binary files /dev/null and
b/website/static/assets/images/hudi-lake-overview-mobile.png differ
diff --git a/website/static/assets/images/hudi-lake-overview.png
b/website/static/assets/images/hudi-lake-overview.png
index 7ea95b18cfc0..525fdf6611ec 100644
Binary files a/website/static/assets/images/hudi-lake-overview.png and
b/website/static/assets/images/hudi-lake-overview.png differ
diff --git a/website/static/assets/images/hudi-logo.png
b/website/static/assets/images/hudi-logo.png
new file mode 100644
index 000000000000..e6afe76b6a51
Binary files /dev/null and b/website/static/assets/images/hudi-logo.png differ
diff --git a/website/static/assets/images/hudi.png
b/website/static/assets/images/hudi.png
index 96ae05e396fc..b6408ccdb700 100644
Binary files a/website/static/assets/images/hudi.png and
b/website/static/assets/images/hudi.png differ
![https://static.scarf.sh/a.png?x-pxid=8f594acf-9b77-44fb-9475-3e82ead1910c"](https://static.scarf.sh/a.png?x-pxid=8f594acf-9b77-44fb-9475-3e82ead1910c"){kind=link}