This is an automated email from the ASF dual-hosted git repository.
visoar pushed a commit to branch apache-site-build
in repository https://gitbox.apache.org/repos/asf/bifromq-sites.git
The following commit(s) were added to refs/heads/apache-site-build by this push:
new 6c78119 fix:logo cloud/add:ChevronDownIcon
6c78119 is described below
commit 6c78119a30ff5f7ae2eede49212548b938a1f18a
Author: Visoar <[email protected]>
AuthorDate: Sat Jun 7 21:26:31 2025 +0800
fix:logo cloud/add:ChevronDownIcon
---
website/src/components/homepage/CallToAction.tsx | 2 +-
website/src/components/homepage/HomeFooter.tsx | 107 +++++++++++------------
website/src/components/homepage/HomeSection.tsx | 57 ++++++++++--
website/src/css/custom.css | 2 +-
4 files changed, 104 insertions(+), 64 deletions(-)
diff --git a/website/src/components/homepage/CallToAction.tsx
b/website/src/components/homepage/CallToAction.tsx
index 46d4c1c..5fcdd7b 100644
--- a/website/src/components/homepage/CallToAction.tsx
+++ b/website/src/components/homepage/CallToAction.tsx
@@ -51,7 +51,7 @@ const CallToAction: React.FC<CallToActionProps> = ({
</p>
{/* CTA Buttons */}
- <div className="flex flex-col sm:flex-row gap-6 justify-center
mb-16">
+ <div className="flex flex-col md:flex-row gap-6 justify-center
mb-16">
<Link
to="/docs"
className="group relative inline-flex items-center px-8 py-4
rounded-2xl bg-white text-gray-900 font-semibold hover:bg-gray-100
transition-all duration-300 hover:shadow-2xl hover:shadow-white/25
hover:-translate-y-1 overflow-hidden"
diff --git a/website/src/components/homepage/HomeFooter.tsx
b/website/src/components/homepage/HomeFooter.tsx
index d0eceef..0174011 100644
--- a/website/src/components/homepage/HomeFooter.tsx
+++ b/website/src/components/homepage/HomeFooter.tsx
@@ -12,24 +12,17 @@ const HomeFooter: React.FC = () => {
return (
<footer className="bg-gray-900 dark:bg-gray-950">
<div className="mx-auto max-w-7xl px-6 py-16 lg:px-8">
- <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
+ <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8
lg:gap-6">
{/* Company Info */}
- <div className="lg:col-span-1">
- <div className="flex items-center mb-4">
- {/* <div className="p-2 rounded-lg bg-blue-600 mr-3">
- <img
- src="./img/logo.svg"
- alt="BifroMQ"
- className="h-5 w-5 filter brightness-0 invert"
- />
- </div> */}
+ <div className="sm:col-span-2 lg:col-span-1 flex flex-col">
+ <div className="flex items-center mb-6">
<span className="text-xl font-bold text-white">
BifroMQ
</span>
</div>
- <p className="text-gray-400 mb-6 text-sm leading-relaxed">
+ <p className="text-gray-400 mb-4 text-sm leading-relaxed">
<Translate>
- Open-source, high-performance MQTT broker with
enterprise-grade reliability. Trusted by industry leaders for mission-critical
messaging systems.
+ Open-source, high-performance MQTT broker with
enterprise-grade reliability. Applicable to IoT, IM and other scenarios.
</Translate>
</p>
@@ -37,7 +30,7 @@ const HomeFooter: React.FC = () => {
<div className="flex space-x-3">
<a
href="mailto:[email protected]";
- className="p-2 rounded-lg bg-gray-800 text-gray-400
hover:text-blue-400 hover:bg-gray-700 transition-all duration-200"
+ className="size-10 flex items-center justify-center rounded-lg
bg-gray-800 text-gray-400 hover:text-blue-400 hover:bg-gray-700 transition-all
duration-200"
aria-label="Email"
>
<EnvelopeIcon className="h-4 w-4" />
@@ -46,7 +39,7 @@ const HomeFooter: React.FC = () => {
href="https://discord.gg/Pfs3QRadRB";
target="_blank"
rel="noopener noreferrer"
- className="p-2 rounded-lg bg-gray-800 text-gray-400
hover:text-purple-400 hover:bg-gray-700 transition-all duration-200"
+ className="size-10 flex items-center justify-center rounded-lg
bg-gray-800 text-gray-400 hover:text-blue-400 hover:bg-gray-700 transition-all
duration-200"
aria-label="Discord"
>
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24
24">
@@ -57,7 +50,7 @@ const HomeFooter: React.FC = () => {
href="https://github.com/apache/bifromq";
target="_blank"
rel="noopener noreferrer"
- className="p-2 rounded-lg bg-gray-800 text-gray-400
hover:text-white hover:bg-gray-700 transition-all duration-200"
+ className="size-10 flex items-center justify-center rounded-lg
bg-gray-800 text-gray-400 hover:text-blue-400 hover:bg-gray-700 transition-all
duration-200"
aria-label="GitHub"
>
<svg className="h-4 w-4" fill="currentColor" viewBox="0 0 24
24">
@@ -65,25 +58,16 @@ const HomeFooter: React.FC = () => {
</svg>
</a>
</div>
- <div className="flex flex-col lg:flex-row justify-between
items-center space-y-4 lg:space-y-0 mt-6">
- <div className="text-center lg:text-left">
- <p className="text-xs text-gray-400">
- © {new Date().getFullYear()} <span className="text-white
font-medium">Apache BifroMQ (Incubating)</span>.
- <br />
- <Translate>All rights reserved.</Translate>
- </p>
- </div>
- </div>
</div>
{/* Resources */}
- <div>
- <h3 className="text-sm font-semibold text-white mb-4 flex
items-center">
+ <div className="flex flex-col h-full">
+ <h3 className="text-sm font-semibold text-white mb-6 flex
items-center">
<NewspaperIcon className="h-4 w-4 mr-2 text-green-400" />
<Translate>Resources</Translate>
</h3>
- <ul className="space-y-3">
- <li className="group">
+ <div className="space-y-4 flex-grow">
+ <div className="group">
<Link
to="/blog"
className="text-sm text-gray-400 hover:text-white
transition-all duration-200 flex items-center group-hover:translate-x-1"
@@ -91,8 +75,8 @@ const HomeFooter: React.FC = () => {
<span className="w-1 h-1 bg-green-400 rounded-full mr-2
opacity-0 group-hover:opacity-100 transition-opacity duration-200"></span>
<Translate>Blog</Translate>
</Link>
- </li>
- <li className="group">
+ </div>
+ <div className="group">
<a
href="https://github.com/apache/bifromq";
target="_blank"
@@ -102,8 +86,8 @@ const HomeFooter: React.FC = () => {
<span className="w-1 h-1 bg-green-400 rounded-full mr-2
opacity-0 group-hover:opacity-100 transition-opacity duration-200"></span>
<Translate>GitHub</Translate>
</a>
- </li>
- <li className="group">
+ </div>
+ <div className="group">
<a
href="https://github.com/apache/bifromq/releases";
target="_blank"
@@ -113,8 +97,8 @@ const HomeFooter: React.FC = () => {
<span className="w-1 h-1 bg-green-400 rounded-full mr-2
opacity-0 group-hover:opacity-100 transition-opacity duration-200"></span>
<Translate>Releases</Translate>
</a>
- </li>
- <li className="group">
+ </div>
+ <div className="group">
<a
href="https://github.com/apache/bifromq/issues";
target="_blank"
@@ -124,18 +108,18 @@ const HomeFooter: React.FC = () => {
<span className="w-1 h-1 bg-green-400 rounded-full mr-2
opacity-0 group-hover:opacity-100 transition-opacity duration-200"></span>
<Translate>Issues</Translate>
</a>
- </li>
- </ul>
+ </div>
+ </div>
</div>
{/* Apache */}
- <div>
- <h3 className="text-sm font-semibold text-white mb-4 flex
items-center">
+ <div className="flex flex-col h-full">
+ <h3 className="text-sm font-semibold text-white mb-6 flex
items-center">
<DocumentTextIcon className="h-4 w-4 mr-2 text-blue-400" />
<Translate>Apache</Translate>
</h3>
- <ul className="space-y-3">
- <li className="group">
+ <div className="space-y-4 flex-grow">
+ <div className="group">
<Link
to="https://incubator.apache.org/";
className="text-sm text-gray-400 hover:text-white
transition-all duration-200 flex items-center group-hover:translate-x-1"
@@ -143,8 +127,8 @@ const HomeFooter: React.FC = () => {
<span className="w-1 h-1 bg-blue-400 rounded-full mr-2
opacity-0 group-hover:opacity-100 transition-opacity duration-200"></span>
<Translate>Apache Incubator</Translate>
</Link>
- </li>
- <li className="group">
+ </div>
+ <div className="group">
<Link
to="https://www.apache.org/foundation/policies/conduct";
className="text-sm text-gray-400 hover:text-white
transition-all duration-200 flex items-center group-hover:translate-x-1"
@@ -152,8 +136,8 @@ const HomeFooter: React.FC = () => {
<span className="w-1 h-1 bg-blue-400 rounded-full mr-2
opacity-0 group-hover:opacity-100 transition-opacity duration-200"></span>
<Translate>Code of Conduct</Translate>
</Link>
- </li>
- <li className="group">
+ </div>
+ <div className="group">
<Link
to="https://www.apache.org/licenses/LICENSE-2.0";
className="text-sm text-gray-400 hover:text-white
transition-all duration-200 flex items-center group-hover:translate-x-1"
@@ -161,29 +145,38 @@ const HomeFooter: React.FC = () => {
<span className="w-1 h-1 bg-blue-400 rounded-full mr-2
opacity-0 group-hover:opacity-100 transition-opacity duration-200"></span>
<Translate>Apache 2.0 License</Translate>
</Link>
- </li>
- </ul>
+ </div>
+ </div>
</div>
{/* Apache Incubator */}
- <div className="lg:col-span-2">
- <h3 className="text-sm font-semibold text-white mb-4 flex
items-center">
- <TagIcon className="h-4 w-4 mr-2 text-blue-400" />
+ <div className="sm:col-span-2 lg:col-span-2 flex flex-col h-full">
+ <h3 className="text-sm font-semibold text-white mb-6 flex
items-center">
+ <TagIcon className="h-4 w-4 mr-2 text-orange-400" />
<Translate>Apache Incubator</Translate>
</h3>
- <div className="space-y-3">
- <div className="p-4 rounded-lg bg-gradient-to-br
from-blue-900/30 to-indigo-900/30 border border-blue-600/20">
- <p className="text-gray-300 text-xs leading-relaxed">
- <strong className="text-blue-400">Apache BifroMQ</strong> is
an effort undergoing incubation at The Apache Software Foundation (ASF),
sponsored by the Apache Incubator.
- </p>
- <p className="text-gray-400 text-xs leading-relaxed -mb-0">
- Incubation is required of all newly accepted projects until
a further review indicates that the infrastructure, communications, and
decision making process have stabilized in a manner consistent with other
successful ASF projects.
+ <div className="space-y-4 flex-grow flex flex-col">
+ <div className="p-4 rounded-lg bg-gradient-to-br
from-blue-900/30 to-indigo-900/30 border border-blue-600/20 flex-grow">
+ <p className="text-gray-300 text-xs leading-relaxed -mb-0">
+ <strong className="text-blue-400">Apache BifroMQ</strong> is
an effort undergoing incubation at The Apache Software Foundation (ASF),
sponsored by the Apache Incubator. Incubation is required of all newly accepted
projects until a further review indicates that the infrastructure,
communications, and decision making process have stabilized in a manner
consistent with other successful ASF projects. While incubation status is not
necessarily a reflection of the completenes [...]
</p>
</div>
-
+ <div className="flex justify-center mt-auto">
+ <img src="https://fury.apache.org/img/apache-incubator.svg";
alt="Apache Incubator" className="w-32 h-auto rounded-lg opacity-80
hover:opacity-100 transition-opacity duration-200" />
+ </div>
</div>
</div>
</div>
+
+ {/* Copyright */}
+ <div className="pt-8 border-t border-gray-800">
+ <div className="text-center">
+ <p className="text-xs text-gray-400">
+ © {new Date().getFullYear()} <span className="text-white">Apache
BifroMQ (Incubating)</span>.
+ <Translate> All rights reserved. </Translate>
+ </p>
+ </div>
+ </div>
</div>
</footer>
);
diff --git a/website/src/components/homepage/HomeSection.tsx
b/website/src/components/homepage/HomeSection.tsx
index 419c9da..d71d430 100644
--- a/website/src/components/homepage/HomeSection.tsx
+++ b/website/src/components/homepage/HomeSection.tsx
@@ -21,7 +21,8 @@ import {
WifiIcon,
DevicePhoneMobileIcon,
ComputerDesktopIcon,
- SparklesIcon
+ SparklesIcon,
+ ChevronDownIcon
} from '@heroicons/react/24/outline';
import {
CpuChipIcon as CpuChipIconSolid,
@@ -382,10 +383,10 @@ export default function HomeSection() {
))}
</div> */}
- {/* CTA 按钮 */}
- <div className="flex flex-col sm:flex-row items-center
justify-center gap-6 mb-16">
+ {/* hero 按钮 */}
+ <div className="flex flex-col md:flex-row items-center
justify-center gap-6 mb-16">
<a
- href="./docs/Readme/"
+ href="./docs/get_started/intro/"
className="group relative inline-flex items-center px-8 py-4
text-lg font-semibold text-white bg-gradient-to-r from-blue-600 to-purple-600
hover:from-blue-700 hover:to-purple-700 rounded-2xl shadow-lg hover:shadow-2xl
transition-all duration-300 transform hover:scale-105 overflow-hidden"
>
{/* 按钮光效 */}
@@ -430,6 +431,27 @@ export default function HomeSection() {
</div>
</div>
</div>
+
+ {/* 向下指引箭头 */}
+ <div className="absolute bottom-12 left-1/2 -translate-x-1/2 z-20">
+ <div className="group relative flex h-14 w-14 cursor-pointer
items-center justify-center rounded-full border border-gray-200/60 bg-white/90
shadow-lg backdrop-blur-sm transition-all duration-300 hover:scale-110
hover:shadow-xl dark:border-gray-700/50 dark:bg-gray-800/90"
+ onClick={() => {
+ const nextSection =
document.querySelector('section:nth-of-type(2)');
+ nextSection?.scrollIntoView({ behavior: 'smooth' });
+ }}
+ >
+ <div className="absolute -top-[4.25rem] left-1/2 -translate-x-1/2
whitespace-nowrap rounded-lg bg-gray-900 px-3 py-1.5 text-sm text-white
opacity-0 transition-opacity duration-300 group-hover:opacity-100
dark:bg-gray-100 dark:text-gray-900">
+ <Translate>Scroll to explore</Translate>
+ <div className="absolute top-full left-1/2 h-2 w-2
-translate-x-1/2 rotate-45 bg-gray-900 dark:bg-gray-100"></div>
+ </div>
+
+ <div className="absolute h-full w-full animate-ping rounded-full
border-2 border-sky-400/50"></div>
+ <div className="absolute h-full w-full animate-pulse rounded-full
border border-sky-400/50"></div>
+
+ <ChevronDownIcon className="mt-2 relative h-7 w-7 animate-bounce
text-sky-600 transition-colors group-hover:text-sky-500 dark:text-sky-400
dark:group-hover:text-sky-300 translate-y-0.5" />
+ </div>
+ </div>
+
</section>
{/* 客户信任区域 - 重新设计 */}
@@ -459,7 +481,7 @@ export default function HomeSection() {
{/* 悬停光效 */}
<div className="absolute inset-0 bg-gradient-to-br
from-blue-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 rounded-2xl
transition-opacity duration-300"></div>
- <div className="relative">
+ <div className="relative flex items-center justify-center">
<img
className="max-h-12 w-auto object-contain opacity-60
group-hover:opacity-100 transition-all duration-300 mx-auto filter grayscale
group-hover:grayscale-0"
src={customer.logo}
@@ -617,6 +639,31 @@ export default function HomeSection() {
</div>
</div>
</div>
+
+ {/* 向下指引箭头 */}
+ <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2
z-20">
+ <div className="group cursor-pointer" onClick={() => {
+ const nextSection =
document.querySelector('section:nth-of-type(2)');
+ nextSection?.scrollIntoView({ behavior: 'smooth' });
+ }}>
+ <div className="relative">
+ {/* 外圈动画环 */}
+ <div className="absolute inset-0 w-12 h-12 rounded-full border-2
border-blue-400/30 dark:border-blue-500/30 animate-ping"></div>
+ <div className="absolute inset-0 w-12 h-12 rounded-full border
border-blue-300/50 dark:border-blue-600/50 animate-pulse"></div>
+
+ {/* 主按钮 */}
+ <div className="relative w-12 h-12 rounded-full bg-white/90
dark:bg-gray-800/90 backdrop-blur-sm border border-gray-200/50
dark:border-gray-700/50 shadow-lg group-hover:shadow-xl transition-all
duration-300 flex items-center justify-center group-hover:scale-110">
+ <ChevronDownIcon className="w-6 h-6 text-blue-600
dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300
transition-colors animate-bounce" />
+ </div>
+
+ {/* 悬停提示 */}
+ <div className="absolute -top-12 left-1/2 transform
-translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity
duration-300 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs
px-3 py-1 rounded-lg whitespace-nowrap">
+ <Translate>Scroll to explore</Translate>
+ <div className="absolute top-full left-1/2 transform
-translate-x-1/2 w-2 h-2 bg-gray-900 dark:bg-gray-100 rotate-45"></div>
+ </div>
+ </div>
+ </div>
+ </div>
</section>
{/* 使用案例区域 - 新增 */}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 0c7517d..d71aa27 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -10,7 +10,7 @@
html[data-theme='dark'] {
--ifm-navbar-background-color: transparent;
--ifm-toc-border-color: #2f2f2f;
- background-color: #172439;
+ background-color: #111827;
}
dd {
![https://fury.apache.org/img/apache-incubator.svg"](https://fury.apache.org/img/apache-incubator.svg"){kind=link}