Skip to content

Commit

Permalink
website UI (rooch-network#1788)
Browse files Browse the repository at this point in the history 
* 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 <haichaozhu77@gmail.com>
  • Loading branch information
@TwilightLogic @Mine77 @geometryolife
2 people authored and geometryolife committed Jun 4, 2024
1 parent a8f7e05 commit 0050115
Show file tree
Hide file tree
Showing 11 changed files with 196 additions and 135 deletions.
168 changes: 105 additions & 63 deletions docs/website/components/index/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ interface IndexProps {
// EXPLORE
exploreTitle: string
exploreContent: string
exploreButtonHref: string
explores: Card[]

// ECOSYSTEM
Expand All @@ -60,61 +61,71 @@ const Index = ({
features,
exploreTitle,
exploreContent,
exploreButtonHref,
explores,
ecosystemTitle,
ecosystemContent,
// ecosystemContent,
ecosystemBrand,
blogsTitle,
blogs,
}: IndexProps) => {
// 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) ? (
<span key={index} style={{ color: highlightColor }}>
{char}
</span>
) : (
char
),
)}
</>
)
let result = text
phrasesToHighlight.forEach((phrase) => {
const regex = new RegExp(`(${phrase})`, 'g')
result = result.replace(regex, `<span style="color: ${highlightColor};">$1</span>`)
})
return <span dangerouslySetInnerHTML={{ __html: result }} />
}

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(' ')}{' '}
<span style={{ color: highlightColor }}>{words.slice(-1).join(' ')}</span>
{words.map((word, index) =>
phrasesToHighlightEnglish.includes(word) ? (
<span key={index} style={{ color: highlightColor }}>
{word}{' '}
</span>
) : (
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'
Expand All @@ -126,7 +137,7 @@ const Index = ({
<div className="mt-28 md:mt-0 flex flex-col md:flex-row items-center justify-center md:justify-between h-full md:h-[90vh] px-4 sm:px-6 md:px-8 lg:px-20 dark:border-b dark:border-b-zinc-800">
<div className="flex flex-col items-center justify-center">
<div className="mt-5 max-w-3xl text-center mx-auto">
<p className="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-5xl dark:text-gray-200">
<p className="block font-bold text-gray-800 text-4xl md:text-5xl lg:text-6xl dark:text-gray-200">
{heroTitle}
</p>
{heroSlogan ? (
Expand Down Expand Up @@ -155,7 +166,7 @@ const Index = ({
</Link>
</div>
</div>
<div className="md:w-3/5 w-full my-12 md:my-0">
<div className="md:w-1/2 w-full my-12 md:my-0">
<img src="/logo/hero/hero.svg" alt="hero" />
</div>
</div>
Expand All @@ -164,14 +175,18 @@ const Index = ({
<div className="py-16 md:py-20 px-4 sm:px-6 md:px-8 lg:px-20 bg-[#F5F5F5] dark:bg-inherit flex flex-col md:flex-row items-center justify-between gap-12 md:gap-8 dark:border-b dark:border-b-zinc-800">
<div className="px-4 max-w-[900px] w-full h-full">
<h2 className="text-4xl md:text-6xl font-semibold text-center md:text-start text-[#2E2929] dark:text-[#EEEBEB]">
{highlightTitle(featuresTitle, wordsToHighlightForFeatures, highlightColor)}
{highlightTitle(
featuresTitle,
phrasesToHighlightForFeaturesChinese,
phrasesToHighlightForFeaturesEnglish,
highlightColor,
)}
</h2>
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{features?.map((feature) => (
<div
key={feature.title}
className="flex flex-col items-center md:items-start justify-center md:justify-start bg-white dark:bg-[#333] p-6 rounded-2xl shadow-md hover:shadow-lg overflow-hidden hover:cursor-pointer h-full dark:hover:bg-[#555] transition-all relative"
onClick={() => 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"
>
<div className="w-12 h-12 md:w-16 md:h-16 mb-4">
<Image
Expand All @@ -185,25 +200,31 @@ const Index = ({
<h3 className="md:text-2xl text-[#FF914B] text-center md:text-start mb-2 font-bold text-2xl leading-7">
{feature.title}
</h3>
<p className="text-gray-600 text-center md:text-start dark:text-[#EAEAEA]">
{feature.description}
</p>
{/*<div className="hidden md:block md:absolute bottom-5 left-6">*/}
{/* <svg*/}
{/* className="w-5 h-5 md:w-4 md:h-4 text-gray-400"*/}
{/* width="16"*/}
{/* height="16"*/}
{/* viewBox="0 0 16 16"*/}
{/* fill="none"*/}
{/* >*/}
{/* <path*/}
{/* d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"*/}
{/* stroke="currentColor"*/}
{/* strokeWidth="2"*/}
{/* strokeLinecap="round"*/}
{/* />*/}
{/* </svg>*/}
{/*</div>*/}
<div className="text-gray-600 text-center md:text-start dark:text-[#EAEAEA]">
<p>{feature.description}</p>
</div>
<div className="flex items-end justify-end h-full w-full">
<div
className="font-semibold text-[#2E2929] dark:text-[#EEEBEB] hover:cursor-pointer flex items-center justify-center space-x-2 hover:underline transition-all"
onClick={() => handleButtonOnClick(feature.buttonHref)}
>
<span>{feature.buttonDesc}</span>
<svg
className="w-3 h-3"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
</svg>
</div>
</div>
</div>
))}
</div>
Expand All @@ -221,7 +242,12 @@ const Index = ({
<div className="py-20 px-4 sm:px-6 md:px-8 lg:px-20 bg-white dark:bg-inherit flex flex-col md:flex-row items-center justify-center gap-6 md:gap-8 dark:border-b dark:border-b-zinc-800">
<div className="px-4 max-w-[854px] w-full h-full">
<h2 className="text-4xl md:text-6xl font-semibold text-center text-[#2E2929] dark:text-[#E4E4E4]">
{highlightTitle(exploreTitle, wordsToHighlightForExplore, highlightColorForExplore)}
{highlightTitle(
exploreTitle,
phrasesToHighlightForExploreChinese,
phrasesToHighlightForExploreEnglish,
highlightColorForExplore,
)}
</h2>
<div className="flex flex-col items-center justify-center md:justify-start gap-6 mt-8">
<h3 className="text-[#737B7D] dark:text-[#81888A] text-base font-normal max-w-2xl text-center">
Expand All @@ -230,10 +256,18 @@ const Index = ({
<img
src="/logo/explore/explore_logo.svg"
alt="explore logo"
className="w-full md:w-9/12 h-full"
className="w-full md:w-9/12 h-full dark:hidden block"
/>
<img
src="/logo/explore/explore_logo_dark.svg"
alt="explore logo"
className="w-full md:w-9/12 h-full hidden dark:block"
/>
<div className="mt-8 h-12">
<button className="px-8 py-4 bg-[#FF914B] font-bold text-lg text-center rounded-full border border-1 border-b-[6px] border-black active:border-b-4 active:transform active:translate-y-0.5 hover:shadow-custom1 dark:border-white dark:shadow-custom1 transition-all">
<button
className="px-8 py-4 bg-[#FF914B] font-bold text-lg text-center rounded-full border border-1 border-b-[6px] border-black active:border-b-4 active:transform active:translate-y-0.5 hover:shadow-custom1 dark:border-white dark:shadow-custom1 transition-all"
onClick={() => handleButtonOnClick(exploreButtonHref)}
>
{featuresButton}
</button>
</div>
Expand Down Expand Up @@ -261,16 +295,21 @@ const Index = ({
<div className="py-20 px-4 sm:px-6 md:px-8 lg:px-20 flex flex-col items-center justify-center gap-6 md:gap-0 bg-[#F5F5F5] dark:bg-inherit w-full dark:border-b dark:border-b-zinc-800">
<div className="flex flex-col items-center justify-center h-full gap-2">
<h2 className="text-4xl md:text-6xl font-semibold text-center md:text-start text-[#2E2929] dark:text-[#E6E6E6]">
{highlightTitle(ecosystemTitle, wordsToHighlightForEcosystem, highlightColor)}
{highlightTitle(
ecosystemTitle,
phrasesToHighlightForEcosystemChinese,
phrasesToHighlightForEcosystemEnglish,
highlightColor,
)}
</h2>
<p className="mt-4 text-[#737B7D] dark:text-[#81888A] text-center md:text-start">
{ecosystemContent}
{/*{ecosystemContent}*/}
</p>
</div>
<div className="flex items-center justify-center w-full mt-2">
<div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 justify-items-center">
{ecosystemBrand.map((brand) => (
<button className="relative bg-white dark:bg-inherit rounded-full md:rounded-lg p-4 flex flex-row md:flex-col items-center md:justify-center justify-start border border-1 border-b-[6px] border-black dark:border-white active:border-b-4 active:transform active:translate-y-0.5 transition-all shadow-sm w-full h-14 md:w-52 md:h-32 gap-2 hover:cursor-pointer hover:shadow-md">
<button className="relative bg-white dark:bg-inherit rounded-full md:rounded-lg p-4 flex flex-row md:flex-col items-center md:justify-center justify-start border border-1 border-b-[6px] border-black dark:border-white active:border-b-4 active:transform active:translate-y-0.5 transition-all shadow-sm w-full h-14 md:w-52 md:h-32 gap-2 hover:cursor-default hover:shadow-md">
<Image
src={brand.brandLogo}
alt={brand.brandTitle}
Expand All @@ -291,19 +330,22 @@ const Index = ({
<div className="py-16 md:py-20 px-4 sm:px-6 md:px-8 lg:px-20 bg-white dark:bg-inherit flex flex-col md:flex-row items-center justify-center gap-6 md:gap-8">
<div className="px-4 w-full h-full">
<h2 className="text-4xl md:text-6xl font-semibold text-center md:text-start text-[#2E2929] dark:text-[#E9E9E9]">
{highlightTitle(blogsTitle, wordsToHighlightForBlogs, highlightColor)}
{highlightTitle(
blogsTitle,
phrasesToHighlightForBlogsChinese,
phrasesToHighlightForBlogsEnglish,
highlightColor,
)}
</h2>
<div className="mt-8 flex flex-col gap-8">
{blogs?.map((blog) => (
<Link key={blog.title} href={blog.link} className="block">
<div className="bg-inherit md:bg-white dark:bg-[#333] shadow-xl md:shadow-md hover:shadow-xl rounded-lg md:border border-gray-200 dark:border-[#333] transition-all duration-300 flex flex-col md:flex-row overflow-hidden">
<div className="bg-inherit md:bg-white dark:bg-[#333] shadow-md hover:shadow-lg dark:hover:border-[#555] rounded-lg md:border border-gray-200 dark:border-[#333] transition-all duration-300 flex flex-col md:flex-row overflow-hidden">
<div className="md:w-1/3 w-full h-auto">
<Image
<img
src={blog.image}
alt={blog.title}
height={501}
width={236}
className="h-full w-full object-cover md:rounded-lg dark:scale-105"
className="h-[200px] w-full object-fill rounded-lg"
/>
</div>
<div className="flex flex-col p-6 md:p-8 w-full justify-between">
Expand Down
Loading

0 comments on commit 0050115

Please sign in to comment.