Update design of ecosystem page (#364)

* update: added new categories layout, data structure, filtering logic * Remove sections from what is celestia page (#362) (#363) * update: removed sections, updated categories scroll behavior, adjusted typography sizes * Update what-is-celestia.js --------- Co-authored-by: Gábor Tamás <[email protected]> --------- Co-authored-by: gabros20 <[email protected]> Co-authored-by: Gábor Tamás <[email protected]>
celestiaorg · Jan 23, 2024 · d5f2cb8 · d5f2cb8
1 parent 2fdf336
commit d5f2cb8
Show file tree

Hide file tree

Showing 7 changed files with 419 additions and 240 deletions.
diff --git a/src/components/ecosystem.js b/src/components/ecosystem.js
@@ -1,19 +1,28 @@
 import React from "react";
 import Image from "./imageComponent";
 
-export default class Ecosystem extends React.Component {
-	render() {
-		return (
-			<a href={this.props.ecosystem.url} target={"_blank"} rel={"noreferrer"} aria-label={this.props.ecosystem.title}>
-				<div className={"ecosystem"}>
-					<div className={"logo-container"}>
-						<Image alt={this.props.ecosystem.title} filename={this.props.ecosystem.image} />
-					</div>
-					{this.props.category.name && <div className={"category"}>{this.props.category.name}</div>}
-					{this.props.ecosystem.title && <div className={"title"}>{this.props.ecosystem.title}</div>}
-					{this.props.ecosystem.text && <div className={"text"}>{this.props.ecosystem.text}</div>}
+const Ecosystem = ({ ecosystem }) => {
+	console.log(ecosystem);
+	return (
+		<a href={ecosystem.url} target={"_blank"} rel={"noreferrer"} aria-label={ecosystem.title}>
+			<div className={"ecosystem d-flex flex-column"}>
+				<div className={"logo-container"}>
+					<Image alt={ecosystem.title} filename={ecosystem.image} />
+				</div>
+				{ecosystem.title && <div className={"title"}>{ecosystem.title}</div>}
+				<div className='category-container'>
+					{ecosystem.categories.map((category) => (
+						<div className={"category"}>{category}</div>
+					))}
 				</div>
-			</a>
-		);
-	}
-}
+				{ecosystem.description && (
+					<div className='description'>
+						{ecosystem.description.length > 250 ? `${ecosystem.description.substring(0, 250)}...` : ecosystem.description}
+					</div>
+				)}
+			</div>
+		</a>
+	);
+};
+
+export default Ecosystem;
diff --git a/src/components/header.js b/src/components/header.js
@@ -87,13 +87,12 @@ const Header = () => {
 
 	useEffect(() => {
 		const toggleHeaderClass = () => {
-			if (window.scrollY > 130) {
+			if (window.scrollY > 80) {
 				setIsBlur(true);
 			} else if (window.scrollY < 80) {
 				setIsBlur(false);
 			}
 		};
-
 		window.addEventListener("scroll", toggleHeaderClass);
 		toggleHeaderClass();
 

diff --git a/src/datas/ecosystem/content.js b/src/datas/ecosystem/content.js
@@ -1,21 +1,22 @@
 export const FooterBoxes = [
-    {
-        title: 'Join our growing ecosystem',
-        text: 'View job openings and career opportunities in our ecosystem.',
-        button: {
-            text: 'Current openings',
-            href: 'https://celestia.pallet.com/jobs/',
-            id: 'operator',
-            type: 'simple'
-        }
-    },{
-        title: 'Build on testnet',
-        text: 'Join a growing modular ecosystem of developers building on testnet.',
-        button: {
-            text: 'Get started',
-            href: 'https://docs.celestia.org/',
-            id: 'operator',
-            type: 'simple'
-        }
-    }
-]
+	{
+		title: "Join our growing ecosystem",
+		text: "View job openings and career opportunities in our ecosystem.",
+		button: {
+			text: "Current openings",
+			href: "https://celestia.pallet.com/jobs/",
+			id: "operator",
+			type: "simple",
+		},
+	},
+	{
+		title: "Build on testnet",
+		text: "Join a growing modular ecosystem of developers building on testnet.",
+		button: {
+			text: "Get started",
+			href: "https://docs.celestia.org/",
+			id: "operator",
+			type: "simple",
+		},
+	},
+];