Merge pull request #304 from celestiaorg/feature/new-homepage

Feature/new homepage

src/components/footer.js

@@ -11,6 +11,11 @@ const navigation = {
 	column1: {
 		title: "Developers",
 		links: [
+			{
+				text: "Developer portal",
+				url: "/developer-portal",
+				type: "internal",
+			},
 			{
 				text: "Docs",
 				url: "https://docs.celestia.org/",
@@ -27,20 +32,15 @@ const navigation = {
 		title: "Resources",
 		links: [
 			{
-				text: "FAQ",
-				url: "/faq",
+				text: "Technology",
+				url: "/technology",
 				type: "internal",
 			},
 			{
 				text: "Glossary",
 				url: "/glossary",
 				type: "internal",
 			},
-			{
-				text: "Learn modular",
-				url: "/learn",
-				type: "internal",
-			},
 			{
 				text: "Blog",
 				url: "https://blog.celestia.org",
@@ -51,6 +51,11 @@ const navigation = {
 				url: "https://podcast.celestia.org/",
 				type: "external",
 			},
+			{
+				text: "Resources",
+				url: "/resources",
+				type: "internal",
+			},
 		],
 	},
 	column3: {
@@ -231,7 +236,7 @@ class Footer extends React.Component {
 								</div>
 								<div className={"col col-12 col-sm-3 align-right"}>
 									<div className={"col-title text-right"}>Follow us</div>
-									<AnchorLink to={`/#community`} className={"button button-footer"} stripHash>
+									<AnchorLink to={`/community`} className={"button button-footer"} stripHash>
 										Community
 									</AnchorLink>
 								</div>

src/components/glossary-nav.js

@@ -28,7 +28,7 @@ const GlossaryNav = ({url}) => {
 
         return (
             <div>
-            {prev && next ? <div className={'row glossary-nav mt-5'}>
+            {prev && next ? <div className={'row glossary-nav pt-5 pt-md-0 mt-5'}>
                 <div className={'col col-12 col-md-6 border-right'}>
                     {prev && <Link to={'/glossary/'+prev.url+'/'} state={{url: prev.url}}>
                         <div className={'glossary'}>

src/components/header.js

@@ -66,31 +66,9 @@ const navigation = [
             }
         ]
     },{
-        text: "Explore",
-        url: "",
-        submenus: [
-            {
-                text: "Run a light node",
-                subtext: "Node operator",
-                url: "/run-a-light-node/",
-                icon: "menu/technology-svg.svg",
-                type: 'internal'
-            },
-            {
-                text: "Join the community",
-                subtext: "Social channels",
-                url: "/community/",
-                icon: "menu/forum.svg",
-                type: 'internal'
-            },
-            {
-                text: "Explore the ecosystem",
-                subtext: "Celestia ecosystem",
-                url: "/ecosystem/",
-                icon: "menu/careers.svg",
-                type: 'internal'
-            },
-        ]
+        text: "Run a node",
+        url: "/run-a-light-node/",
+        type: 'internal'
     },
 ]
 

src/components/modules/anchorMenu.js

@@ -1,5 +1,5 @@
 import * as React from "react"
-
+import { AnchorLink } from "gatsby-plugin-anchor-links";
 export default class AnchorMenu extends React.Component {
     render() {
         return <div className={'anchorMenu mt-4'}>
@@ -9,8 +9,7 @@ export default class AnchorMenu extends React.Component {
                         <tbody>
                             {this.props.anchors.map((anchor,index) => (
                                 <tr key={index}>
-                                    <td><a href={'#'+anchor.anchor}>{anchor.text} </a></td>
-                                    <td><a href={'#'+anchor.anchor}><i className={'icon-arrow-down ms-3'}/> </a></td>
+                                    <td><AnchorLink to={'#'+anchor.anchor} className="anchor-link" stripHash>{anchor.text} <i className={'icon-arrow-down ms-3'}/></AnchorLink></td>
                                 </tr>
                             ))}
                         </tbody>

src/components/modules/featured-learn.js

@@ -38,7 +38,7 @@ export default function FeaturedLearn(props) {
                                     const next = index === data.allMarkdownRemark.edges.length - 1 ? 0 : index+1;
 
                                     return (
-                                        <div className={'row pb-5 learn-modules learn-modules-footer smaller'}>
+                                        <div className={'row pb-md-5 learn-modules learn-modules-footer smaller'}>
                                             <div className={`col col-12 col-md-6 pt-5 prev order-2 order-md-1 ${next === 0 ? 'border-0' : ''}`}>
                                                 <LearnBox
                                                     type={'prev'}

src/components/modules/icon-card.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Image from "../imageComponent";
 import { Link } from "gatsby";
+import Button from "../buttons/button";
 import { AnchorLink } from "gatsby-plugin-anchor-links";
 
 export default function IconCard({ imageClass, content, variant, iconPosition = "top", className }) {
@@ -17,19 +18,7 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
 						<div className={"title"}>{content.title}</div>
 						{content.text && <div className={"text"}>{content.text}</div>}
 						<div className='link-wrapper'>
-							<Link className='link' to={`${content.link.url}`}>
-								{content.link.text}
-								<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
-									<path stroke='#7B2BF9' stroke-linecap='square' stroke-width='1.5' d='M3.61218 12.0721L11.0761 4.60823' />
-									<path
-										stroke='#7B2BF9'
-										stroke-linecap='square'
-										stroke-linejoin='bevel'
-										stroke-width='1.5'
-										d='M11.5254 11.0752V4.00413H4.45432'
-									/>
-								</svg>
-							</Link>
+							<Button type={"internal"} class={"external"} text={content.link.text} url={content.link.url} />
 						</div>
 					</div>
 				</div>
@@ -48,19 +37,7 @@ export default function IconCard({ imageClass, content, variant, iconPosition =
 						<div className={"title"}>{content.title}</div>
 						{content.text && <div className={"text"}>{content.text}</div>}
 						<div className='link-wrapper'>
-							<a className='link' href={content.link.url} target={"_blank"} rel={"noreferrer"} aria-label={content.text}>
-								{content.link.text}
-								<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'>
-									<path stroke='#7B2BF9' stroke-linecap='square' stroke-width='1.5' d='M3.61218 12.0721L11.0761 4.60823' />
-									<path
-										stroke='#7B2BF9'
-										stroke-linecap='square'
-										stroke-linejoin='bevel'
-										stroke-width='1.5'
-										d='M11.5254 11.0752V4.00413H4.45432'
-									/>
-								</svg>
-							</a>
+							<Button type={"external"} class={"external"} text={content.link.text} url={content.link.url} />
 						</div>
 					</div>
 				</div>

src/datas/developer-portal/frameworks.js

@@ -10,7 +10,7 @@ export const frameworks = {
 			type: "external",
 			link: {
 				text:"Explore Caldera",
-				url: "https://docs.celestia.org/developers/taro-testnet/",
+				url: "https://calderaxyz.gitbook.io/caldera-documentation/getting-started/create-a-mainnet-chain",
 			},
 		},
         	{

src/datas/home/explore-celestia.js

@@ -1,18 +1,18 @@
 export const exploreCelestia = [
     {
-        title: 'Use an app',
-        text: "Explore Celestia's ecosystem of applications and services",
+        title: 'Explore the ecosystem',
+        text: "Explore Celestia’s ecosystem of rollups and modular infrastructure",
         image: 'home/explore-1.png',
-        link: "/ecosystem/",
+        link: "/ecosystem",
     },{
-        title: 'What is TIA?',
-        text: 'Learn about the token powering Celestia',
+        title: 'Use TIA',
+        text: 'Pay for blobspace, secure the network, and participate in governance',
         image: 'home/explore-2.png',
-        link: "/what-is-tia/",
+        link: "/what-is-tia",
     },{
         title: 'Run a light node',
-        text: 'Help contribute to Celestia’s decentralization in as little as 2 clicks',
+        text: 'Join the first modular data availability network in as little as 2 clicks',
         image: 'home/explore-3.png',
-        link: "/run-a-light-node/",
+        link: "/run-a-light-node",
     }
 ]

src/datas/team/content.js

@@ -1,7 +1,7 @@
 export const content = {
         title : 'Meet the team',
-        subtitle: 'We\'re building the Celestia network',
-        text: 'Our team has deep experience building and scaling blockchains from projects like Ethereum, Cosmos and Harmony.<br/><br/>We are on a mission to change the way that blockchains and decentralized applications are built—making them more secure, scalable and sovereign. We envision a world where global communities have the power to self-organize without being burdened by existing power structures.',
+        subtitle: '',
+        text: 'We are on a mission to change the way that blockchains and decentralized applications are built—making them more secure, scalable and sovereign. We envision a world where global communities have the power to self-organize without being burdened by existing power structures.',
         menus: [
             {
                 id : 'team',

src/pages/careers.js

@@ -54,16 +54,16 @@ const CareersPage = () => {
                     <div className={'container'}>
 
                         <div className={'row mb-5 pb-5'}>
-                            <div className={'col col-12 col-md-6 pe-0 pe-md-5'}>
+                            <div className={'col col-12 col-md-6 pb-5 pe-md-5'}>
                                 <h1 className={'main mb-4'}>{content.title}</h1>
-                                <div className={'subtitle'}>{content.subtitle}</div>
-                                <div className={'text'}>
+                                <div className={'text'}>{content.subtitle}</div>
+                                <div className={'paragraph'}>
                                     {content.text}
-                                    {content.button && <Button type={'external'} class={'simple'} text={content.button.text} url={content.button.url}/>}
                                 </div>
+                                {content.button && <Button type={'external'} class={'simple'} text={content.button.text} url={content.button.url}/>}
                             </div>
-                            <div className={'col col-12 col-md-6 ps-0 ps-md-5 pt-4 pt-xl-5'}>
-                                <h4 className={'main mb-3'}>{content.perks.title}</h4>
+                            <div className={'col col-12 col-md-6 ps-md-5 pt-5'}>
+                                <h4 className={'main mb-4 md:mb-3'}>{content.perks.title}</h4>
 
                                 <div className={'row'}>
                                     {content.perks.perks.map((perk,index) => (

src/pages/community.js

@@ -29,7 +29,7 @@ const Community = () => {
 							<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 }} />
+									<div className={"text"} dangerouslySetInnerHTML={{ __html: heroData.text }} />
 									{/* {heroData.buttons.map((button, index) => (
 										<Button key={index} class={button.class} type={button.type} text={button.text} url={button.url} />
 									))} */}

src/pages/developer-portal.js

@@ -33,7 +33,7 @@ const DevPortal = () => {
 							<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 }} />
+									<div className={"text"} dangerouslySetInnerHTML={{ __html: heroData.text }} />
 									<AnchorLink to={`/developer-portal#${heroData.buttons[0].url}`} className={'button button-'+heroData.buttons[0].class} stripHash>{heroData.buttons[0].text}</AnchorLink>
 									<a href={`${heroData.buttons[1].url}`} className={'button button-'+heroData.buttons[1].class} target={"_blank"} rel={"noreferrer"}>{heroData.buttons[1].text}</a>
 								</div>
@@ -81,7 +81,7 @@ const DevPortal = () => {
 
 					<section className='connect' id={`${getStarted.items[1].title.replace(/\s+/g, "-").toLowerCase()}`}>
 						<div className={"connect-container"}>
-							<div className={"row align-items-center justify-content-between my-2 py-2 py-lg-5"}>
+							<div className={"row align-items-center justify-content-between my-2 py-2 py-md-5"}>
 								<div className='col-12 col-xl-4 mb-5 mb-md-0'>
 									<h2 className={"with-decor"}>{connect.title}</h2>
 									{connect.description && <div className={"description"}>{connect.description}</div>}

src/pages/ecosystem.js

@@ -52,11 +52,11 @@ const EcosystemPage = () => {
 			/>
 			<div className={"ecosystem-page"}>
 				<main>
-					<div className={"container"}>
+					<div className={"hero container"}>
 						<h1 className={"main mb-3 mb-md-5"}>Celestia Ecosystem</h1>
 						<div className={"row"}>
 							<div className={"col-auto"}>
-								<div className={"subtitle"}>Discover a wide range of apps and services built in the Celestia ecosystem.</div>
+								<div className={"text"}>Discover a wide range of apps and services built in the Celestia ecosystem.</div>
 								<a
 									href={"https://drive.google.com/drive/folders/1qx2BJze6oO-TLfaVdmMLC79VjKLzBmLR?usp=share_link"}
 									target={"_blank"}