diff --git a/src/components/footer.js b/src/components/footer.js index d2867b277..79f0b12a0 100644 --- a/src/components/footer.js +++ b/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", diff --git a/src/components/header.js b/src/components/header.js index cd466790a..d3ed505e1 100644 --- a/src/components/header.js +++ b/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' }, diff --git a/src/components/modules/community-item.js b/src/components/modules/community-item.js new file mode 100644 index 000000000..5158f4e77 --- /dev/null +++ b/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 ( +
+
+
+ +
+ {content.title} +
+ +
+
+
{content.title}
+ {content.text &&
{content.text}
} +
+
+
+ ); + } else if (content.type === "external" || content.type === undefined) { + return ( +
+
+
+ +
+ {content.title} +
+ +
+
+
{content.title}
+ {content.text &&
{content.text}
} +
+
+
+ ); + } +} diff --git a/src/components/modules/press-item.js b/src/components/modules/press-item.js new file mode 100644 index 000000000..51dcf307f --- /dev/null +++ b/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 ( + + + + + + + + ); +}; + +const ArrowIcon = () => { + return ( + + + + + ); +}; + +export default function PressItem({ imageClass, content, className }) { + if (content.type === "internal") { + return ( +
+
+
+
+ {content.title} +
+
+ + + +
+
+
+
+
+ +
+
Figma
+
+
{content.title}
+ {content.text &&
{content.text}
} +
+
+
+ ); + } else if (content.type === "external" || content.type === undefined) { + return ( +
+
+
+
+ {content.title} +
+
+ + + +
+
+
+
+
+ +
+
Figma
+
+
{content.title}
+ {content.text &&
{content.text}
} +
+
+
+ ); + } +} \ No newline at end of file diff --git a/src/datas/community/content.js b/src/datas/community/content.js new file mode 100644 index 000000000..4e89cc60a --- /dev/null +++ b/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' + } + } +] diff --git a/src/datas/community/ecosystem.js b/src/datas/community/ecosystem.js new file mode 100644 index 000000000..069bfe12a --- /dev/null +++ b/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/", + }, +}; diff --git a/src/datas/community/explore.js b/src/datas/community/explore.js new file mode 100644 index 000000000..7315d2202 --- /dev/null +++ b/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/", + }, + ], +}; diff --git a/src/datas/community/hero-data.js b/src/datas/community/hero-data.js new file mode 100644 index 000000000..dd105b784 --- /dev/null +++ b/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: "/", + }, + ], +}; diff --git a/src/datas/community/social-channels.js b/src/datas/community/social-channels.js new file mode 100644 index 000000000..d2ad58d52 --- /dev/null +++ b/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/", + }, + ], +}; diff --git a/src/datas/press/content.js b/src/datas/press/content.js new file mode 100644 index 000000000..edfa2309d --- /dev/null +++ b/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' + } + } +] diff --git a/src/datas/press/press-data.js b/src/datas/press/press-data.js new file mode 100644 index 000000000..93504d2ef --- /dev/null +++ b/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", + }, + ], +}; diff --git a/src/images/community/blog.png b/src/images/community/blog.png new file mode 100644 index 000000000..a9e0d4c11 Binary files /dev/null and b/src/images/community/blog.png differ diff --git a/src/images/community/community.png b/src/images/community/community.png new file mode 100644 index 000000000..232dbdab2 Binary files /dev/null and b/src/images/community/community.png differ diff --git a/src/images/community/discord.png b/src/images/community/discord.png new file mode 100644 index 000000000..357ad5687 Binary files /dev/null and b/src/images/community/discord.png differ diff --git a/src/images/community/ecosystem.png b/src/images/community/ecosystem.png new file mode 100644 index 000000000..35c32346c Binary files /dev/null and b/src/images/community/ecosystem.png differ diff --git a/src/images/community/forum.png b/src/images/community/forum.png new file mode 100644 index 000000000..e423f4a16 Binary files /dev/null and b/src/images/community/forum.png differ diff --git a/src/images/community/github.png b/src/images/community/github.png new file mode 100644 index 000000000..d1db16532 Binary files /dev/null and b/src/images/community/github.png differ diff --git a/src/images/community/podcast.png b/src/images/community/podcast.png new file mode 100644 index 000000000..29cce0a63 Binary files /dev/null and b/src/images/community/podcast.png differ diff --git a/src/images/community/reddit.png b/src/images/community/reddit.png new file mode 100644 index 000000000..870df3688 Binary files /dev/null and b/src/images/community/reddit.png differ diff --git a/src/images/community/resources.png b/src/images/community/resources.png new file mode 100644 index 000000000..748372269 Binary files /dev/null and b/src/images/community/resources.png differ diff --git a/src/images/community/telegram.png b/src/images/community/telegram.png new file mode 100644 index 000000000..4a676fc11 Binary files /dev/null and b/src/images/community/telegram.png differ diff --git a/src/images/community/twitter.png b/src/images/community/twitter.png new file mode 100644 index 000000000..d08de2290 Binary files /dev/null and b/src/images/community/twitter.png differ diff --git a/src/images/community/youtube.png b/src/images/community/youtube.png new file mode 100644 index 000000000..b084d5e6a Binary files /dev/null and b/src/images/community/youtube.png differ diff --git a/src/images/press/branding.png b/src/images/press/branding.png new file mode 100644 index 000000000..39eb9c4ae Binary files /dev/null and b/src/images/press/branding.png differ diff --git a/src/images/press/enquiries.png b/src/images/press/enquiries.png new file mode 100644 index 000000000..87c66664a Binary files /dev/null and b/src/images/press/enquiries.png differ diff --git a/src/images/press/media-kit.png b/src/images/press/media-kit.png new file mode 100644 index 000000000..fd5e5e24a Binary files /dev/null and b/src/images/press/media-kit.png differ diff --git a/src/images/press/news.png b/src/images/press/news.png new file mode 100644 index 000000000..2ce67973a Binary files /dev/null and b/src/images/press/news.png differ diff --git a/src/images/press/social.png b/src/images/press/social.png new file mode 100644 index 000000000..3f15f3731 Binary files /dev/null and b/src/images/press/social.png differ diff --git a/src/pages/community.js b/src/pages/community.js new file mode 100644 index 000000000..16e49d1ec --- /dev/null +++ b/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 ( + + + Celestia - Community + +
+
+
+
+

{heroData.title}

+
+
+
+ {/* {heroData.buttons.map((button, index) => ( +
+
+
+
+ +
+
+
+
+

{socialChannels.title}

+ {socialChannels.description &&
{socialChannels.description}
} +
+
+
+ {socialChannels.items.map(function (item) { + return ; + })} +
+
+
+
+
+ +
+
+
+
+
+ {explore.items.map(function (item) { + return ; + })} +
+
+
+

{explore.title}

+ {explore.description &&
{explore.description}
} +
+
+
+
+ +
+
+
+
+
+ {ecosystem.title} +
+
+
+

{ecosystem.title}

+

{ecosystem.text}

+
+
+
+
+
+
+ + ); +}; + +export default Community; diff --git a/src/pages/press.js b/src/pages/press.js new file mode 100644 index 000000000..b24a64c95 --- /dev/null +++ b/src/pages/press.js @@ -0,0 +1,37 @@ +import * as React from "react"; + +import { pressData } from "../datas/press/press-data"; +import { FooterBoxes } from "../datas/press/content"; +import Layout from "../components/layout"; +import { Helmet } from "react-helmet"; +import PressItem from "../components/modules/press-item"; + +const Press = () => { + return ( + + + Celestia - Press + +
+
+
+

{pressData.title}

+

{pressData.text}

+
+ +
+
+
+ {pressData.items.map(function (item) { + return ; + })} +
+
+
+
+
+ + ); +}; + +export default Press; \ No newline at end of file diff --git a/src/scss/main.scss b/src/scss/main.scss index 5be3d9371..f0a4677c3 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -24,6 +24,8 @@ @import "modules/roadmapItem.scss"; @import "modules/learn.scss"; @import "modules/icon-card.scss"; +@import "modules/press-item.scss"; +@import "modules/community-item.scss"; @import "pages/page-home.scss"; @import "pages/page-resouces.scss"; @@ -34,6 +36,8 @@ @import "pages/page-what-is-celestia.scss"; @import "pages/page-ecosystem"; @import "pages/page-developer-portal.scss"; +@import "pages/page-press.scss"; +@import "pages/page-community.scss"; @import "components/team.scss"; @import "components/technology.scss"; diff --git a/src/scss/modules/community-item.scss b/src/scss/modules/community-item.scss new file mode 100644 index 000000000..36990fe40 --- /dev/null +++ b/src/scss/modules/community-item.scss @@ -0,0 +1,105 @@ +.community-item { + border-radius: 12px; + padding: 10px 0px; + width: 100%; + height: 100%; + display: flex; + align-items: center; + @include media-breakpoint-down(md) { + padding: 0px; + } + + .logo-container { + width: 60px; + height: 60px; + align-items: center; + display: flex; + + .gatsby-image-wrapper { + height: auto; + width: 60px; + } + + img { + max-height: 100%; + } + } + + .title { + font-family: $ruberoid; + font-weight: bold; + font-size: 28px; + color: #000000; + letter-spacing: 0; + margin-top: 32px; + @include media-breakpoint-down(md) { + margin-top: 24px; + } + } + .text { + font-family: $inter; + font-weight: 300; + font-size: 14px; + color: #393939; + letter-spacing: 0; + line-height: 20px; + margin-top: 26px; + max-width: 450px; + } + + .link-wrapper { + .link { + font-family: $ruberoid; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 1em; + padding: 8px 0; + margin: -8px 0; + color: #000000; + transition: all 0.2s ease-in-out; + &:hover { + color: #393939; + & svg { + margin-left: 16px; + } + } + } + svg { + margin-left: 8px; + transition: all 0.2s ease-in-out; + will-change: margin; + } + } + + @include media-breakpoint-down(md) { + display: block; + } + + & .logo-container { + margin-right: 20px; + margin-top: 0; + + &.top { + align-self: flex-start; + } + &.center { + align-self: center; + } + } + + & .title { + margin-top: 0; + @include media-breakpoint-down(md) { + margin-top: 24px; + } + } + + & .text { + margin-top: 4px; + } + + & .text-box { + display: block; + } +} diff --git a/src/scss/modules/press-item.scss b/src/scss/modules/press-item.scss new file mode 100644 index 000000000..23a496c57 --- /dev/null +++ b/src/scss/modules/press-item.scss @@ -0,0 +1,109 @@ +.press-item { + border-radius: 12px; + padding: 60px 50px; + width: 100%; + height: 100%; + @include media-breakpoint-down(md) { + padding: 0px; + } + + .image-container { + align-items: center; + display: flex; + + .gatsby-image-wrapper { + height: 110px; + width: 110px; + @include media-breakpoint-down(sm) { + height: 80px; + width: 80px; + } + } + + img { + max-height: 100%; + } + } + + .press-item-header { + height: 110px; + margin-bottom: 50px; + @include media-breakpoint-down(sm) { + margin-bottom: 20px; + } + } + + .press-item-title { + font-family: $ruberoid; + color: #000000; + font-style: normal; + font-weight: bold; + font-size: 40px; + line-height: 40px; + margin-top: 20px; + @include media-breakpoint-down(sm) { + font-size: 30px; + line-height: 30px; + margin-top: 20px; + } + } + .press-item-text { + font-family: $inter; + color: #414141; + font-style: normal; + font-weight: 300; + font-size: 18px; + line-height: 26px; + letter-spacing: -0.1125px; + margin-top: 15px; + @include media-breakpoint-down(sm) { + font-size: 16px; + line-height: 24px; + } + } + .link-wrapper { + .link { + display: flex; + align-items: center; + justify-content: center; + font-family: $ruberoid; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 1em; + color: #040109; + background-color: #ffffff; + transition: all 0.2s ease-in-out; + height: 62px; + width: 62px; + border-radius: 9999px; + transition: transform 0.2s ease-in-out; + &:hover { + transform: scale(1.1); + } + } + } + + .badge { + display: flex; + align-items: center; + background-color: #ffffff; + border-radius: 108px; + padding: 10px 15px; + width: fit-content; + .badge-icon { + height: 15px; + color: #1e1e1e; + margin-right: 10px; + } + .badge-text { + font-family: $ruberoid; + font-style: normal; + font-weight: bold; + font-size: 12px; + line-height: 1em; + color: #000000; + } + + } +} diff --git a/src/scss/pages/page-community.scss b/src/scss/pages/page-community.scss new file mode 100644 index 000000000..1f29cc4a0 --- /dev/null +++ b/src/scss/pages/page-community.scss @@ -0,0 +1,213 @@ +.community { + position: relative; + background: url(../images/BG/technology.png) no-repeat scroll top 400px right transparent; + background-size: 600px; + + @include media-breakpoint-down(xl) { + background-position: top 520px right; + background-size: 600px; + } + @include media-breakpoint-down(lg) { + background-position: top 250px right; + background-size: 800px; + } + @include media-breakpoint-down(md) { + background-position: top 600px right; + background-size: 600px; + } + @include media-breakpoint-down(sm) { + background-position: -100px 250px; + background-size: 800px; + } + &:before { + background: url(../images/community/community.png) no-repeat scroll top right transparent; + background-size: contain; + top: 30px; + right: 0; + left: 55%; + position: absolute; + content: ""; + width: 560px; + height: 560px; + z-index: 0; + + @include media-breakpoint-down(xl) { + width: 480px; + height: 480px; + top: 30px; + right: 60px; + left: unset; + } + @include media-breakpoint-down(lg) { + width: 380px; + height: 380px; + top: 70px; + right: 50px; + } + @include media-breakpoint-down(md) { + width: 72%; + height: 72%; + max-width: 450px; + right: unset; + left: 50%; + transform: translateX(-50%); + } + } + + main { + padding-top: 100px; + background: url(../images/BG/home.png) no-repeat scroll top 1000px left transparent; + background-size: 600px; + + @include media-breakpoint-down(xl) { + background-position: top 1000px left; + background-size: 600px; + } + @include media-breakpoint-down(lg) { + background-position: top 1600px left; + background-size: 600px; + } + @include media-breakpoint-down(md) { + background-position: top 1700px left; + background-size: 800px; + } + @include media-breakpoint-down(sm) { + background-position: top 1800px left; + background-size: 600px; + } + } + section { + padding-top: 50px; + padding-bottom: 50px; + @include media-breakpoint-down(sm) { + padding-top: 40px; + padding-bottom: 40px; + } + } + + .main { + max-width: 600px; + @include media-breakpoint-down(lg) { + max-width: 350px; + } + @include media-breakpoint-down(md) { + max-width: 100%; + } + @include media-breakpoint-down(sm) { + max-width: 100%; + } + } + + .subtitle { + font-family: $ruberoid; + font-weight: 500; + font-size: 18px; + color: #000000; + letter-spacing: 0; + line-height: 25px; + margin-bottom: 30px; + max-width: 400px; + @include media-breakpoint-down(sm) { + max-width: 100%; + } + } + + .description { + font-family: $inter; + font-weight: 300; + font-size: 16px; + color: #000000; + letter-spacing: 0; + line-height: 24px; + margin-top: 22px; + max-width: 400px; + @include media-breakpoint-down(sm) { + max-width: 100%; + } + } + + .hero { + @include media-breakpoint-down(md) { + padding-top: 455px; + } + @include media-breakpoint-down(sm) { + padding-top: 70vw; + } + } + + .social-channels { + padding-top: 100px; + @include media-breakpoint-down(md) { + padding-top: 60px; + } + .title { + max-width: 452px; + } + } + + .explore { + padding-top: 70px; + padding-bottom: 60px; + .title { + max-width: 452px; + } + } + + .ecosystem { + padding-bottom: 100px; + @include media-breakpoint-down(md) { + padding-bottom: 70px; + } + .title { + max-width: 452px; + margin-bottom: 30px; + @include media-breakpoint-down(md) { + margin-bottom: 16px; + } + } + .text { + margin-bottom: 30px; + } + .image-wrapper { + margin-left: auto; + margin-right: auto; + @include media-breakpoint-down(lg) { + max-width: 70%; + } + @include media-breakpoint-down(md) { + max-width: 80%; + } + @include media-breakpoint-down(sm) { + max-width: 90%; + } + } + } + + .connect, + .concepts, + .faqs { + .description { + max-width: 350px; + @include media-breakpoint-down(sm) { + max-width: 100%; + } + } + } + + .button-simple, + .button-white, + .button-icon, + .button-external { + margin-right: 20px; + @include media-breakpoint-down(sm) { + margin-bottom: 20px; + } + } + + .min-width-50 { + min-width: 50%; + } + .min-width-33 { + min-width: 33%; + } +} diff --git a/src/scss/pages/page-press.scss b/src/scss/pages/page-press.scss new file mode 100644 index 000000000..2253fbb76 --- /dev/null +++ b/src/scss/pages/page-press.scss @@ -0,0 +1,50 @@ +.press { + padding-bottom: 150px; + @include media-breakpoint-down(sm) { + padding-bottom: 100px; + } + .text { + font-family: $ruberoid; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 26px; + letter-spacing: 0.225px; + color: #000000; + width: 80%; + max-width: 478px; + margin-bottom: 0px; + + @include media-breakpoint-down(sm) { + font-size: 15px; + line-height: 23px; + width: 100%; + } + } + + .card-grid { + padding-top: 75px; + @include media-breakpoint-down(md) { + padding-top: 40px; + } + .two-col-grid { + grid-row-gap: 25px; + display: grid; + grid-template-columns: repeat(1, 1fr); + grid-auto-rows: auto; + grid-column-gap: 25px; + @include media-breakpoint-up(sm) { + grid-row-gap: 35px; + grid-template-columns: repeat(2, 1fr); + grid-column-gap: 35px; + grid-auto-rows: auto; + } + } + + & .press-item { + @include media-breakpoint-down(md) { + padding: 30px; + } + } + } +}