Merge branch 'feature/community-page-v2' into dev

src/components/header.js

@@ -108,7 +108,7 @@ const navigation = [
             {
                 text: "Join the community",
                 subtext: "Social channels",
-                url: "/#join-our-global-community",
+                url: "/community/",
                 icon: "menu/forum.svg",
                 type: 'internal'
             },

src/components/modules/community-item.js

@@ -0,0 +1,43 @@
+import React from "react";
+import Image from "../imageComponent";
+import { Link } from "gatsby";
+
+export default function CommunityItem({ imageClass, content, className }) {
+	if (content.type === "internal") {
+		return (
+			<div className={className}>
+				<div className={`community-item`}>
+					<div className='link-wrapper'>
+						<Link className='link' to={`${content.url}`}>
+							<div className={`logo-container ${imageClass}`}>
+								<Image alt={content.title} filename={content.image} />
+							</div>
+						</Link>
+					</div>
+					<div className='text-box'>
+						<div className={"title"}>{content.title}</div>
+						{content.text && <div className={"text"}>{content.text}</div>}
+					</div>
+				</div>
+			</div>
+		);
+	} else if (content.type === "external" || content.type === undefined) {
+		return (
+			<div className={className}>
+				<div className={`community-item`}>
+					<div className='link-wrapper'>
+						<a className='link' href={content.url} target={"_blank"} rel={"noreferrer"} aria-label={content.text}>
+							<div className={`logo-container ${imageClass}`}>
+								<Image alt={content.title} filename={content.image} />
+							</div>
+						</a>
+					</div>
+					<div className='text-box'>
+						<div className={"title"}>{content.title}</div>
+						{content.text && <div className={"text"}>{content.text}</div>}
+					</div>
+				</div>
+			</div>
+		);
+	}
+}

src/datas/community/content.js

@@ -0,0 +1,21 @@
+export const FooterBoxes = [
+    {
+        title: 'Join our global community',
+        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 our developer beta',
+        text: 'Join a growing modular ecosystem of developers building on testnet.',
+        button: {
+            text: 'Get started',
+            href: 'https://docs.celestia.org/',
+            id: 'operator',
+            type: 'simple'
+        }
+    }
+]

src/datas/community/ecosystem.js

@@ -0,0 +1,11 @@
+export const ecosystem = {
+	title: "Ecosystem",
+	text: "Discover a wide range of apps and services built in the Celestia ecosystem.",
+	image: "community/ecosystem.png",
+	button: {
+		text: "Dive in",
+		class: "simple",
+		type: "internal",
+		url: "/ecosystem/",
+	},
+};

src/datas/community/explore.js

@@ -0,0 +1,38 @@
+export const explore = {
+	title: "Explore",
+	description: "Keep up with new resources and content.",
+	items: [
+        {
+			id: 1,
+			title: "Youtube",
+			text: "A library of tutorials, guides, and ecosystem interviews.",
+			image: "community/youtube.png",
+			type: "external",
+			url: "https://www.youtube.com/channel/UCLlvAEzXBFZ-P3zS6BF2Bjg",
+		},
+        {
+			id: 2,
+			title: "Podcast",
+			text: "Interviews and talks in audio form.",
+			image: "community/podcast.png",
+			type: "external",
+			url: "https://podcast.celestia.org/",
+		},
+        {
+			id: 3,
+			title: "Resources",
+			text: "A collection of videos, podcasts, and blog posts.",
+			image: "community/resources.png",
+			type: "external",
+			url: "https://celestia.org/resources/",
+		},
+        {
+			id: 4,
+			title: "Blog",
+			text: "News and updates from Celestia Labs.",
+			image: "community/blog.png",
+			type: "external",
+			url: "https://blog.celestia.org/",
+		},
+	],
+};

src/datas/community/hero-data.js

@@ -0,0 +1,18 @@
+export const heroData = {
+	title: "Celestia Community",
+	text: "Discover community hubs, discussion forums, and resources that are used by the global Celestia community.",
+	buttons: [
+    		{
+        	  text: "Build Modular",
+        	  class: "simple",
+        	  type: "internal",
+        	  url: "/",
+    		},
+    		{
+      		  text: "Ask a question",
+      		  class: "white",
+      		  type: "internal",
+      		  url: "/",
+    		},
+	],
+};

src/datas/community/social-channels.js

@@ -0,0 +1,54 @@
+export const socialChannels = {
+	title: "Social channels",
+	description: "Communication channels for the community, discussions, updates, and news.",
+	items: [
+        {
+			id: 1,
+			title: "Twitter",
+			text: "The latest news and updates.",
+			image: "community/twitter.png",
+			type: "external",
+			url: "https://twitter.com/CelestiaOrg",
+		},
+        {
+			id: 2,
+			title: "Discord",
+			text: "A hub for developers, node operators, and enthusiasts.",
+			image: "community/discord.png",
+			type: "external",
+			url: "https://discord.com/invite/YsnTPcSfWQ",
+		},
+        {
+			id: 3,
+			title: "Telegram",
+			text: "Chat with the worldwide community.",
+			image: "community/telegram.png",
+			type: "external",
+			url: "https://t.me/CelestiaCommunity",
+		},
+        {
+			id: 4,
+			title: "Reddit",
+			text: "The Celestia community on Reddit.",
+			image: "community/reddit.png",
+			type: "external",
+			url: "https://www.reddit.com/r/CelestiaNetwork/",
+		},
+        {
+			id: 5,
+			title: "Github",
+			text: "Developer discussions and protocol contributions.",
+			image: "community/github.png",
+			type: "external",
+			url: "https://github.com/celestiaorg",
+		},
+        {
+			id: 6,
+			title: "Forum",
+			text: "Ask questions and engage in research discussions.",
+			image: "community/forum.png",
+			type: "external",
+			url: "https://forum.celestia.org/",
+		},
+	],
+};

src/pages/community.js

@@ -0,0 +1,94 @@
+import * as React from "react";
+
+import { heroData } from "../datas/community/hero-data";
+import { socialChannels } from "../datas/community/social-channels";
+import { explore } from "../datas/community/explore";
+import { ecosystem } from "../datas/community/ecosystem";
+import { FooterBoxes } from "../datas/community/content";
+import Layout from "../components/layout";
+import { Helmet } from "react-helmet";
+import CommunityItem from "../components/modules/community-item";
+import Button from "../components/buttons/button";
+import Image from "../components/imageComponent";
+
+const Community = () => {
+	return (
+		<Layout footerBoxes={FooterBoxes}>
+			<Helmet>
+				<title>Celestia - Community</title>
+			</Helmet>
+			<div className={"community"}>
+				<main>
+					<section className='hero'>
+						<div className={"container"}>
+							<h1 className={"main mb-3 mb-md-4"}>{heroData.title}</h1>
+							<div className={"row"}>
+								<div className={"col-auto"}>
+									<div className={"subtitle"} dangerouslySetInnerHTML={{ __html: heroData.text }} />
+									{/* {heroData.buttons.map((button, index) => (
+										<Button key={index} class={button.class} type={button.type} text={button.text} url={button.url} />
+									))} */}
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className='social-channels'>
+						<div className={"container"}>
+							<div className={"row flex-wrap align-items-center justify-content-between gx-5"}>
+								<div className='col-12 col-lg-6 col-xl-4 mb-5 mb-lg-0'>
+									<h2 className={"title with-decor"}>{socialChannels.title}</h2>
+									{socialChannels.description && <div className={"description"}>{socialChannels.description}</div>}
+								</div>
+								<div className='col-12 col-lg-6 col-xl-6'>
+									<div className='gx-3 gy-4 gy-md-3 row'>
+										{socialChannels.items.map(function (item) {
+											return <CommunityItem className='icon-card-wrapper col-6 col-md-6' key={item.id} content={item} />;
+										})}
+									</div>
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className='explore'>
+						<div className={"container"}>
+							<div className={"row flex-wrap-reverse flex-lg-wrap align-items-center justify-content-between gx-5"}>
+								<div className='col-12 col-lg-6 col-xl-6'>
+									<div className='gx-3 gy-4 gy-md-3 row'>
+										{explore.items.map(function (item) {
+											return <CommunityItem className='icon-card-wrapper col-6 col-md-6' key={item.id} content={item} />;
+										})}
+									</div>
+								</div>
+								<div className='col-12 col-lg-6 col-xl-4 mb-5 mb-lg-0'>
+									<h2 className={"title with-decor"}>{explore.title}</h2>
+									{explore.description && <div className={"description"}>{explore.description}</div>}
+								</div>
+							</div>
+						</div>
+					</section>
+
+					<section className={"ecosystem"}>
+						<div className={"container"}>
+							<div className={"row justify-content-between align-items-center gx-5 gy-3"}>
+								<div className={"col-12 col-lg-6 col-xl-5 mb-4 mb-lg-0"}>
+									<div className="image-wrapper">
+										<Image style={{ width: `100%` }} alt={ecosystem.title} filename={ecosystem.image} />
+									</div>
+								</div>
+								<div className={"col-12 col-lg-6 col-xl-6 "}>
+									<h2 className='title'>{ecosystem.title}</h2>
+									<p className="text">{ecosystem.text}</p>
+									<Button class={ecosystem.button.class} type={ecosystem.button.type} text={ecosystem.button.text} url={ecosystem.button.url} />
+								</div>
+							</div>
+						</div>
+					</section>
+				</main>
+			</div>
+		</Layout>
+	);
+};
+
+export default Community;

src/scss/main.scss

@@ -24,6 +24,7 @@
 @import "modules/roadmapItem.scss";
 @import "modules/learn.scss";
 @import "modules/press-item.scss";
+@import "modules/community-item.scss";
 
 @import "pages/page-home.scss";
 @import "pages/page-resouces.scss";
@@ -34,6 +35,7 @@
 @import "pages/page-what-is-celestia.scss";
 @import "pages/page-ecosystem";
 @import "pages/page-press.scss";
+@import "pages/page-community.scss";
 
 @import "components/team.scss";
 @import "components/technology.scss";