From beb1727886110169b00271111f8ab6662adccb04 Mon Sep 17 00:00:00 2001 From: TwilightLogic <82878302+TwilightLogic@users.noreply.github.com> Date: Sat, 1 Jun 2024 23:07:27 +0800 Subject: [PATCH] website UI (#1788) * feat: update the hero title * feat: add logic on rendering slogan * feat: complete the website layout * feat: add some props to the landing page * feat: add some contents to landing page * feat: add some props to the landing page * feat: complete the features page * feat: complete the Explore page * feat: complete the Ecosystem page * feat: complete the Ecosystem page on mobile devices * feat: complete the Blogs layout * feat: complete the Blogs component * feat: update the display style on Explore component * refactor: remove background and update hovering styles on Blog * feat: complete the dark mode on Features * feat: complete the dark mode on Explore * feat: improve the dark mode UI on Explore * feat: complete the dark mode on Blog * feat: update some styles on landing page * feat: complete the Chinese version * feat: complete the UI design * feat: add "antialiased" style * feat: highlight the specific Chinese * feat: add specific highlight color * refactor: update the icons on features * rewrite the learn docs * refactor: complete the hero page * refactor: complete the feature page * refactor: complete the explpore page * refactor: complete the hero page * refactor: complete the features page * refactor: complete the explore page * refactor: complete the features page * refactor: complete the features page * refactor: complete the navbar * refactor: update some styles * feat: update some content * feat: add some content * feat: update the highlight title * feat: update the highlight title * feat: add button for features section * feat: update some UI for features section * feat: update the logo for Babylon --------- Co-authored-by: Mine77 --- docs/website/components/index/index.tsx | 168 +++++++++++------- docs/website/pages/index.en-US.mdx | 50 +++--- docs/website/pages/index.zh-CN.mdx | 35 ++-- docs/website/public/logo/blogs/blog_1.jpeg | Bin 0 -> 529138 bytes docs/website/public/logo/blogs/blog_2.jpg | Bin 0 -> 84519 bytes docs/website/public/logo/blogs/blog_3.jpeg | Bin 0 -> 112714 bytes .../public/logo/ecosystem/avail_logo.svg | 9 + .../public/logo/ecosystem/babylon_logo.svg | 14 ++ .../public/logo/explore/explore_logo.svg | 16 +- .../public/logo/explore/explore_logo_dark.svg | 9 + .../public/logo/features/enable_logo.svg | 30 ++-- 11 files changed, 196 insertions(+), 135 deletions(-) create mode 100644 docs/website/public/logo/blogs/blog_1.jpeg create mode 100644 docs/website/public/logo/blogs/blog_2.jpg create mode 100644 docs/website/public/logo/blogs/blog_3.jpeg create mode 100644 docs/website/public/logo/ecosystem/avail_logo.svg create mode 100644 docs/website/public/logo/ecosystem/babylon_logo.svg create mode 100644 docs/website/public/logo/explore/explore_logo_dark.svg diff --git a/docs/website/components/index/index.tsx b/docs/website/components/index/index.tsx index fa3d2cf3c3..d796cff3eb 100644 --- a/docs/website/components/index/index.tsx +++ b/docs/website/components/index/index.tsx @@ -37,6 +37,7 @@ interface IndexProps { // EXPLORE exploreTitle: string exploreContent: string + exploreButtonHref: string explores: Card[] // ECOSYSTEM @@ -60,9 +61,10 @@ const Index = ({ features, exploreTitle, exploreContent, + exploreButtonHref, explores, ecosystemTitle, - ecosystemContent, + // ecosystemContent, ecosystemBrand, blogsTitle, blogs, @@ -70,51 +72,60 @@ const Index = ({ // Function to check if the string contains Chinese characters const containsChinese = (text: string) => /[\u4e00-\u9fa5]/.test(text) - const highlightSpecificWords = ( + const highlightSpecificPhrases = ( text: string, - wordsToHighlight: string[], + phrasesToHighlight: string[], highlightColor: string, ) => { - if (!containsChinese(text)) return text // Only process if it's Chinese text - return ( - <> - {text.split('').map((char, index) => - wordsToHighlight.includes(char) ? ( - - {char} - - ) : ( - char - ), - )} - - ) + let result = text + phrasesToHighlight.forEach((phrase) => { + const regex = new RegExp(`(${phrase})`, 'g') + result = result.replace(regex, `$1`) + }) + return } - const highlightTitle = (title: string, wordsToHighlight: string[], highlightColor: string) => { + const highlightTitle = ( + title: string, + phrasesToHighlightChinese: string[], + phrasesToHighlightEnglish: string[], + highlightColor: string, + ) => { if (containsChinese(title)) { - return highlightSpecificWords(title, wordsToHighlight, highlightColor) } else { const words = title.split(' ') return ( <> - {words.slice(0, -1).join(' ')}{' '} - {words.slice(-1).join(' ')} + {words.map((word, index) => + phrasesToHighlightEnglish.includes(word) ? ( + + {word}{' '} + + ) : ( + word + ' ' + ), + )} ) } } - const handleFeaturesButtonOnClick = (href: string) => { + const handleButtonOnClick = (href: string) => { console.log(href) window.open(href) } - // Define words to highlight for Chinese text - const wordsToHighlightForFeatures = ['比', '特', '币'] - const wordsToHighlightForExplore = ['新', '型', '架', '构'] - const wordsToHighlightForEcosystem = ['生', '态'] - const wordsToHighlightForBlogs = ['博', '客'] + // Define phrases to highlight for Chinese text + const phrasesToHighlightForFeaturesChinese = ['比特币生态'] + const phrasesToHighlightForExploreChinese = ['状态', '应用'] + const phrasesToHighlightForEcosystemChinese = ['合作伙伴'] + const phrasesToHighlightForBlogsChinese = ['博客'] + + // Define phrases to highlight for English text + const phrasesToHighlightForFeaturesEnglish = ['Bitcoin', 'Ecosystem'] + const phrasesToHighlightForExploreEnglish = ['State', 'App'] + const phrasesToHighlightForEcosystemEnglish = ['Partnerships'] + const phrasesToHighlightForBlogsEnglish = ['Blog'] const highlightColor = '#FF914B' const highlightColorForExplore = '#46977E' @@ -126,7 +137,7 @@ const Index = ({
-

+

{heroTitle}

{heroSlogan ? ( @@ -155,7 +166,7 @@ const Index = ({
-
+
hero
@@ -164,14 +175,18 @@ const Index = ({

- {highlightTitle(featuresTitle, wordsToHighlightForFeatures, highlightColor)} + {highlightTitle( + featuresTitle, + phrasesToHighlightForFeaturesChinese, + phrasesToHighlightForFeaturesEnglish, + highlightColor, + )}

{features?.map((feature) => (
handleFeaturesButtonOnClick(feature.buttonHref)} + className="flex flex-col items-center md:items-start justify-center md:justify-start space-y-3 bg-white dark:bg-[#333] p-6 rounded-2xl shadow-md overflow-hidden h-full hover:cursor-default" >
{feature.title} -

- {feature.description} -

- {/*
*/} - {/* */} - {/* */} - {/* */} - {/*
*/} +
+

{feature.description}

+
+
+
handleButtonOnClick(feature.buttonHref)} + > + {feature.buttonDesc} + + + +
+
))}
@@ -221,7 +242,12 @@ const Index = ({

- {highlightTitle(exploreTitle, wordsToHighlightForExplore, highlightColorForExplore)} + {highlightTitle( + exploreTitle, + phrasesToHighlightForExploreChinese, + phrasesToHighlightForExploreEnglish, + highlightColorForExplore, + )}

@@ -230,10 +256,18 @@ const Index = ({ explore logo + explore logo
-
@@ -261,16 +295,21 @@ const Index = ({

- {highlightTitle(ecosystemTitle, wordsToHighlightForEcosystem, highlightColor)} + {highlightTitle( + ecosystemTitle, + phrasesToHighlightForEcosystemChinese, + phrasesToHighlightForEcosystemEnglish, + highlightColor, + )}

- {ecosystemContent} + {/*{ecosystemContent}*/}

{ecosystemBrand.map((brand) => ( -