Merge pull request #218 from celestiaorg/release/community-and-press-…

…page

Release/community and press page

src/components/footer.js

@@ -48,6 +48,10 @@ const navigation = [
         text: "Brand",
         url: "https://company-223625.frontify.com/d/JoSwaZS4Mjpj",
         type: 'external'
+    },{
+        text: "Press",
+        url: "/press/",
+        type: 'internal'
     },{
         text: "Forum",
         url: "https://forum.celestia.org",

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/components/modules/press-item.js

@@ -0,0 +1,102 @@
+import React from "react";
+import Image from "../imageComponent";
+import { Link } from "gatsby";
+
+const FigmaIcon = () => {
+	return (
+		<svg xmlns='http://www.w3.org/2000/svg' width='12' height='17' fill='none'>
+			<path
+				stroke='currentColor'
+				stroke-width='2'
+				d='M6 8.5C6 7.83696 6.26339 7.20107 6.73223 6.73223C7.20107 6.26339 7.83696 6 8.5 6C9.16304 6 9.79893 6.26339 10.2678 6.73223C10.7366 7.20107 11 7.83696 11 8.5C11 9.16304 10.7366 9.79893 10.2678 10.2678C9.79893 10.7366 9.16304 11 8.5 11C7.83696 11 7.20107 10.7366 6.73223 10.2678C6.26339 9.79893 6 9.16304 6 8.5V8.5Z'
+			/>
+			<path
+				stroke='currentColor'
+				stroke-width='2'
+				d='M1 13.5C1 12.837 1.26339 12.2011 1.73223 11.7322C2.20107 11.2634 2.83696 11 3.5 11H6V13.5C6 14.163 5.73661 14.7989 5.26777 15.2678C4.79893 15.7366 4.16304 16 3.5 16C2.83696 16 2.20107 15.7366 1.73223 15.2678C1.26339 14.7989 1 14.163 1 13.5Z'
+			/>
+			<path
+				stroke='currentColor'
+				stroke-width='2'
+				d='M6 1V6H8.5C9.16304 6 9.79893 5.73661 10.2678 5.26777C10.7366 4.79893 11 4.16304 11 3.5C11 2.83696 10.7366 2.20107 10.2678 1.73223C9.79893 1.26339 9.16304 1 8.5 1L6 1Z'
+			/>
+			<path
+				stroke='currentColor'
+				stroke-width='2'
+				d='M1 3.5C1 4.16304 1.26339 4.79893 1.73223 5.26777C2.20107 5.73661 2.83696 6 3.5 6H6V1H3.5C2.83696 1 2.20107 1.26339 1.73223 1.73223C1.26339 2.20107 1 2.83696 1 3.5Z'
+			/>
+			<path
+				stroke='currentColor'
+				stroke-width='2'
+				d='M1 8.5C1 9.16304 1.26339 9.79893 1.73223 10.2678C2.20107 10.7366 2.83696 11 3.5 11H6V6H3.5C2.83696 6 2.20107 6.26339 1.73223 6.73223C1.26339 7.20107 1 7.83696 1 8.5Z'
+			/>
+		</svg>
+	);
+};
+
+const ArrowIcon = () => {
+	return (
+		<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'>
+			<path stroke='currentColor' stroke-linecap='round' stroke-width='1.5' d='M6.94723 21.499L20.3823 8.06396' />
+			<path stroke='currentColor' stroke-linecap='square' stroke-linejoin='bevel' stroke-width='1.5' d='M21.1895 19.7061V6.97813H8.46153' />
+		</svg>
+	);
+};
+
+export default function PressItem({ imageClass, content, className }) {
+	if (content.type === "internal") {
+		return (
+			<div className={className}>
+				<div className={`press-item`} style={{ backgroundColor: `${content.color}` }}>
+					<div className='press-item-header row justify-content-between'>
+						<div className={`col-auto image-container ${imageClass}`}>
+							<Image alt={content.title} filename={content.image} />
+						</div>
+						<div className='col-auto link-wrapper'>
+							<Link className='link' to={`${content.url}`}>
+								<ArrowIcon />
+							</Link>
+						</div>
+					</div>
+					<div className='text-box'>
+						<div className='badge' style={{ opacity: `${content.figma ? 1 : 0}`}} >
+							<div className={"badge-icon"}>
+								<FigmaIcon />
+							</div>
+							<div className={"badge-text"}>Figma</div>
+						</div>
+						<div className={"press-item-title"}>{content.title}</div>
+						{content.text && <div className={"press-item-text"}>{content.text}</div>}
+					</div>
+				</div>
+			</div>
+		);
+	} else if (content.type === "external" || content.type === undefined) {
+		return (
+			<div className={className}>
+				<div className={`press-item`} style={{ backgroundColor: `${content.color}` }}>
+					<div className='press-item-header row justify-content-between'>
+						<div className={`col-auto image-container ${imageClass}`}>
+							<Image alt={content.title} filename={content.image} />
+						</div>
+						<div className='col-auto link-wrapper'>
+							<a className='link' href={content.url} target={"_blank"} rel={"noreferrer"} aria-label={content.text}>
+								<ArrowIcon />
+							</a>
+						</div>
+					</div>
+					<div className='text-box'>
+							<div className='badge' style={{ opacity: `${content.figma ? 1 : 0}`}}>
+								<div className={"badge-icon"}>
+									<FigmaIcon />
+								</div>
+								<div className={"badge-text"}>Figma</div>
+							</div>
+						<div className={"press-item-title"}>{content.title}</div>
+						{content.text && <div className={"press-item-text"}>{content.text}</div>}
+					</div>
+				</div>
+			</div>
+		);
+	}
+}

src/datas/community/content.js

@@ -0,0 +1,21 @@
+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://celestia.org/developer-portal/',
+            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/datas/press/content.js

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

src/datas/press/press-data.js

@@ -0,0 +1,46 @@
+export const pressData = {
+	title: "Press & Media",
+	text: "",
+	items: [
+        	{
+			id: 1,
+			title: "Branding",
+			text: "",
+			image: "press/branding.png",
+			type: "external",
+			figma: false,
+			color: "#F3ECFF",
+			url: "https://company-223625.frontify.com/d/JoSwaZS4Mjpj/guidelines",
+		},
+        	{
+			id: 2,
+			title: "News",
+			text: "",
+			image: "press/news.png",
+			type: "external",
+			figma: false,
+			color: "#DEF7FF",
+			url: "https://blog.celestia.org/",
+		},
+        	{
+			id: 3,
+			title: "Social channels",
+			text: "",
+			image: "press/social.png",
+			type: "internal",
+			figma: false,
+			color: "#E7FFD4",
+			url: "/community/",
+		},
+		{
+			id: 4,
+			title: "Enquiries",
+			text: "",
+			image: "press/enquiries.png",
+			type: "external",
+			figma: false,
+			color: "#FFF2E1",
+			url: "mailto:press@celestia.org",
+		},
+	],
+};