You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@fory.apache.org by ch...@apache.org on 2025/07/06 10:39:01 UTC
(fory-site) branch main updated: feat: refine the design of homepage (#281)
This is an automated email from the ASF dual-hosted git repository.
chaokunyang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/fory-site.git
The following commit(s) were added to refs/heads/main by this push:
new 0bfe18af feat: refine the design of homepage (#281)
0bfe18af is described below
commit 0bfe18afeecf4d498f7c49d219afb64824dac662
Author: Twice <tw...@apache.org>
AuthorDate: Sun Jul 6 18:38:58 2025 +0800
feat: refine the design of homepage (#281)
The change is made by agent-mode GitHub copilot.
Before:
After:
---
src/pages/home/components/HomePageLanguageCard.tsx | 33 +++++++++++++---------
src/pages/home/components/HomepageFeatures.tsx | 12 +++++++-
src/pages/home/components/HomepageFoot.tsx | 9 +-----
src/pages/home/components/HomepageHeader.tsx | 17 +++++++----
src/pages/home/css/HomePageLanguageCard.module.css | 21 ++++++++++++++
src/pages/home/css/index.module.css | 9 ++++++
6 files changed, 74 insertions(+), 27 deletions(-)
diff --git a/src/pages/home/components/HomePageLanguageCard.tsx b/src/pages/home/components/HomePageLanguageCard.tsx
index 2b65efd1..cc280c42 100644
--- a/src/pages/home/components/HomePageLanguageCard.tsx
+++ b/src/pages/home/components/HomePageLanguageCard.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
import "../css/tailwind.css";
import { imageUrls } from "../../../constants";
+import styles from "../css/HomePageLanguageCard.module.css";
export default function HomePageLanguageCard() {
const [locale, setLocale] = useState("en-US");
@@ -28,27 +29,33 @@ export default function HomePageLanguageCard() {
};
return (
- <div className="text-center">
- <h2 className="text-2xl font-bold mb-5">Quick Start!</h2>
- <p className="text-lg mb-5">Choose a language to get started.</p>
- <div className="w-3/5 mx-auto rounded-md">
- <div className="grid md:grid-cols-2 sm:grid-cols-1 min-w-0 border-gray-400 rounded-md">
+ <div className="text-center p-8">
+ <h2 className="text-3xl font-bold mb-4 dark:text-white">Quick Start!</h2>
+ <p className="text-lg mb-8 text-gray-600 dark:text-gray-400">
+ Choose a language to get started.
+ </p>
+ <div className="max-w-4xl mx-auto">
+ <div className="grid md:grid-cols-3 sm:grid-cols-1 gap-6">
{processedImageUrls.map(({ key, src, label }) => (
<div
key={key}
- className="flex items-center justify-center h-24 text-lg font-bold border border-gray-400 rounded-md cursor-pointer transition-transform duration-300 transform hover:scale-105 active:scale-100 hover:bg-gray-100 hover:border-gray-200"
+ className={styles.languageCard}
onClick={() =>
- (window.location.href = getLanguageUrl(
- key === "java"
- ? "java-serialization"
- : key === "more"
+ (window.location.href = getLanguageUrl(
+ key === "java"
+ ? "java-serialization"
+ : key === "more"
? "crosslanguage-serialization"
: key
- ))
+ ))
}
>
- <img src={src} className="w-10 h-10 mr-2" alt={`${label} logo`} />
- <span>{label}</span>
+ <img
+ src={src}
+ className="w-16 h-16 mb-4"
+ alt={`${label} logo`}
+ />
+ <span className="text-xl font-semibold">{label}</span>
</div>
))}
</div>
diff --git a/src/pages/home/components/HomepageFeatures.tsx b/src/pages/home/components/HomepageFeatures.tsx
index 0bb24d26..f86729b6 100644
--- a/src/pages/home/components/HomepageFeatures.tsx
+++ b/src/pages/home/components/HomepageFeatures.tsx
@@ -88,7 +88,17 @@ function Feature({ title, Svg, description }: FeatureItem) {
return (
<div className={clsx("col col--4")}>
<div className="text--center">
- <Svg style={styles.featureSvg} role="img" />
+ <div
+ style={{
+ backgroundColor: "rgba(39, 174, 96, 0.1)",
+ borderRadius: "50%",
+ display: "inline-flex",
+ padding: "20px",
+ marginBottom: "20px",
+ }}
+ >
+ <Svg style={styles.featureSvg} role="img" />
+ </div>
</div>
<div className="text--center padding-horiz--md">
<Heading as="h3">{title}</Heading>
diff --git a/src/pages/home/components/HomepageFoot.tsx b/src/pages/home/components/HomepageFoot.tsx
index 3659f234..90437d93 100644
--- a/src/pages/home/components/HomepageFoot.tsx
+++ b/src/pages/home/components/HomepageFoot.tsx
@@ -1,12 +1,5 @@
import React from "react";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import "../css/tailwind.css";
export default function HomepageFoot() {
- const catImageUrl = useBaseUrl("/home/cat.svg");
- return (
- <div className="flex justify-center items-center w-full h-24">
- <img src={catImageUrl} className="w-24 h-24" />
- </div>
- );
+ return null;
}
diff --git a/src/pages/home/components/HomepageHeader.tsx b/src/pages/home/components/HomepageHeader.tsx
index ea2a6ca6..9f3420b4 100644
--- a/src/pages/home/components/HomepageHeader.tsx
+++ b/src/pages/home/components/HomepageHeader.tsx
@@ -17,13 +17,13 @@ export default function HomepageHeader() {
className={clsx("hero hero--primary", styles.heroBanner)}
data-aos="fade-up"
>
- <div className="container">
+ <div className={clsx("container", styles.container)}>
{/* 页面标题 */}
- <Heading as="h1" className="hero__title">
+ <Heading as="h1" className={clsx("hero__title", styles.title)}>
<Translate id="homepage.hero.title">{siteConfig.title}</Translate>
</Heading>
{/* 页面副标题 */}
- <p className="hero__subtitle">
+ <p className={clsx("hero__subtitle", styles.subtitle)}>
<Translate id="homepage.hero.subtitle">
{siteConfig.tagline}
</Translate>
@@ -31,7 +31,10 @@ export default function HomepageHeader() {
<div className={styles.buttons}>
{/* GitHub 按钮 */}
<Link
- className="button button--secondary button--lg"
+ className={clsx(
+ "button button--secondary button--lg",
+ styles.button
+ )}
to="https://github.com/apache/fory"
data-aos="fade-up"
data-aos-delay="200"
@@ -45,7 +48,11 @@ export default function HomepageHeader() {
</Link>
{/* 开始使用按钮 */}
<Link
- className="button button--secondary button--lg"
+ className={clsx(
+ "button button--primary button--lg",
+ styles.button,
+ styles.getStartedButton
+ )}
to="/docs/docs/start/install"
data-aos="fade-up"
data-aos-delay="400"
diff --git a/src/pages/home/css/HomePageLanguageCard.module.css b/src/pages/home/css/HomePageLanguageCard.module.css
new file mode 100644
index 00000000..65e38b9a
--- /dev/null
+++ b/src/pages/home/css/HomePageLanguageCard.module.css
@@ -0,0 +1,21 @@
+.languageCard {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 1.5rem;
+ background-color: var(--ifm-card-background-color);
+ border-radius: var(--ifm-card-border-radius);
+ box-shadow: var(--ifm-global-shadow-md);
+ cursor: pointer;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.languageCard:hover {
+ transform: scale(1.05);
+ box-shadow: var(--ifm-global-shadow-lg);
+}
+
+.languageCard span {
+ color: var(--ifm-font-color-base);
+}
diff --git a/src/pages/home/css/index.module.css b/src/pages/home/css/index.module.css
index 6809804a..8e965ba3 100644
--- a/src/pages/home/css/index.module.css
+++ b/src/pages/home/css/index.module.css
@@ -45,4 +45,13 @@
.buttonsGitHubButton {
overflow: hidden;
+}
+
+.button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.getStartedButton {
+ color: white !important;
}
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@fory.apache.org
For additional commands, e-mail: commits-help@fory.apache.org