This is an automated email from the ASF dual-hosted git repository.
jark pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fluss.git
The following commit(s) were added to refs/heads/main by this push:
new f0f1e768b [website] Hero section update (#2002)
f0f1e768b is described below
commit f0f1e768b4a9b2a3676bcd53c7e08978a566b983
Author: MehulBatra <[email protected]>
AuthorDate: Sat Nov 22 21:20:43 2025 +0530
[website] Hero section update (#2002)
---
website/src/css/custom.css | 10 +++-
website/src/pages/index.module.css | 31 ++++++++++++-
website/src/pages/index.tsx | 91 +++++++++++++++++++++++++++++++++----
website/static/img/new_banner.png | Bin 0 -> 1393396 bytes
4 files changed, 119 insertions(+), 13 deletions(-)
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 42d4a9a86..8b7567905 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -21,6 +21,9 @@
* work well for content-centric websites.
*/
+/* Import Inter font from Google Fonts */
+@import
url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #0071e3;
@@ -46,10 +49,13 @@
.navbar__brand {
font-family: monaco;
+ color: inherit;
}
.hero__title {
- font-family: monaco;
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+ font-weight: 700;
+ letter-spacing: -0.03em;
}
.hero__subtitle {
@@ -249,4 +255,4 @@
.hidden {
display: none !important;
-}
\ No newline at end of file
+}
diff --git a/website/src/pages/index.module.css
b/website/src/pages/index.module.css
index b9e7d5e7a..1b9a0acb5 100644
--- a/website/src/pages/index.module.css
+++ b/website/src/pages/index.module.css
@@ -26,10 +26,14 @@
position: relative;
overflow: hidden;
margin-left: -1px;
+ margin-top: -60px;
+ padding-top: calc(5rem + 60px);
@media screen and (min-width: 997px) {
- background: url("@site/static/img/background.jpg");
+ background-image: url("@site/static/img/new_banner.png");
background-size: cover;
+ background-position: center center;
+ background-repeat: no-repeat;
}
@media screen and (max-width: 996px) {
@@ -42,6 +46,29 @@
.heroBanner {
padding: 2rem;
}
+
+ .heroBanner :global(.hero__title) {
+ font-size: 2.5rem;
+ }
+
+ .heroBanner :global(.hero__subtitle) {
+ font-size: 1.2rem;
+ }
+}
+
+.heroBanner :global(.hero__title) {
+ font-size: 4rem;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+}
+
+.heroBanner :global(.hero__subtitle) {
+ font-size: 1.5rem;
+ font-weight: 400;
+ letter-spacing: 0.01em;
+ text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
+ margin-top: 1rem;
}
.buttons {
@@ -50,6 +77,7 @@
justify-content: center;
flex-wrap: wrap;
gap: 20px;
+ margin-top: 2rem;
}
.buttonWidth {
@@ -67,3 +95,4 @@
width: 20px;
height: 20px;
}
+
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
index fdd0d14c5..06aa2fcfc 100644
--- a/website/src/pages/index.tsx
+++ b/website/src/pages/index.tsx
@@ -22,6 +22,7 @@ import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import HomepageIntroduce from '@site/src/components/HomepageIntroduce';
import Heading from '@theme/Heading';
+import {useEffect, useState} from 'react';
import styles from './index.module.css';
@@ -70,16 +71,86 @@ function HomepageHeader() {
export default function Home(): JSX.Element {
const {siteConfig} = useDocusaurusContext();
+ const [isScrolled, setIsScrolled] = useState(false);
+
+ useEffect(() => {
+ const handleScroll = () => {
+ // Change navbar style when scrolled past 500 (past most of the
hero section)
+ setIsScrolled(window.scrollY > 500);
+ };
+
+ window.addEventListener('scroll', handleScroll);
+ return () => window.removeEventListener('scroll', handleScroll);
+ }, []);
+
return (
- <Layout
- // leave empty to just display "Apache Fluss (Incubating)" in tab
on landing page
- title=""
- description="Streaming Storage for Real-Time Analytics">
- <HomepageHeader/>
- <main>
- <HomepageIntroduce/>
- <HomepageFeatures/>
- </main>
- </Layout>
+ <>
+ {/* Inline styles for homepage navbar with scroll-based
transitions */}
+ <style dangerouslySetInnerHTML={{__html: `
+ .navbar {
+ background-color: ${isScrolled ?
'var(--ifm-navbar-background-color)' : 'transparent'} !important;
+ backdrop-filter: ${isScrolled ? 'blur(8px)' : 'none'}
!important;
+ box-shadow: ${isScrolled ? 'var(--ifm-navbar-shadow)' :
'none'} !important;
+ transition: background-color 0.3s ease, backdrop-filter
0.3s ease, box-shadow 0.3s ease !important;
+ }
+ .navbar__link,
+ .navbar__brand,
+ .navbar__brand b,
+ .navbar__brand strong,
+ .navbar__title {
+ color: ${isScrolled ? 'var(--ifm-navbar-link-color)' :
'white'} !important;
+ text-shadow: ${isScrolled ? 'none' : '0 1px 3px rgba(0, 0,
0, 0.3)'};
+ transition: color 0.3s ease, text-shadow 0.3s ease
!important;
+ }
+ .navbar__brand * {
+ color: ${isScrolled ? 'var(--ifm-navbar-link-color)' :
'white'} !important;
+ }
+ .navbar__logo {
+ content: url('${isScrolled ?
'/img/logo/svg/colored_logo.svg' : '/img/logo/svg/white_color_logo.svg'}')
!important;
+ transition: content 0.3s ease !important;
+ }
+ .navbar__search-input {
+ background-color: rgba(255, 255, 255, 0.9) !important;
+ color: #1d1d1d !important;
+ }
+ .navbar__search-input::placeholder {
+ color: #666 !important;
+ opacity: 1 !important;
+ }
+ .DocSearch-Button {
+ background-color: rgba(255, 255, 255, 0.9) !important;
+ }
+ .DocSearch-Button-Placeholder {
+ color: #666 !important;
+ }
+ .DocSearch-Search-Icon {
+ color: #666 !important;
+ }
+ .navbar__toggle {
+ color: ${isScrolled ? 'var(--ifm-navbar-link-color)' :
'white'} !important;
+ transition: color 0.3s ease !important;
+ }
+ .navbar__toggle svg {
+ color: ${isScrolled ? 'var(--ifm-navbar-link-color)' :
'white'} !important;
+ fill: ${isScrolled ? 'var(--ifm-navbar-link-color)' :
'white'} !important;
+ transition: color 0.3s ease, fill 0.3s ease !important;
+ }
+ .header-github-link::before {
+ background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24
24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='${isScrolled ? 'black' :
'white'}' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205
11.385.6.113.82-.258.82-.577
0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633
17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236
1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.3
[...]
+ transition: background 0.3s ease !important;
+ }
+ `}} />
+ <Layout
+ // leave empty to just display "Apache Fluss (Incubating)" in
tab on landing page
+ title=""
+ description="Streaming Storage for Real-Time Analytics"
+ wrapperClassName={styles.homepageWrapper}>
+ <HomepageHeader/>
+ <main>
+ <HomepageIntroduce/>
+ <HomepageFeatures/>
+ </main>
+ </Layout>
+ </>
);
}
diff --git a/website/static/img/new_banner.png
b/website/static/img/new_banner.png
new file mode 100644
index 000000000..125f6642f
Binary files /dev/null and b/website/static/img/new_banner.png differ
