Merge pull request #303 from celestiaorg/feature/new-home

new homepage build

package.json

@@ -25,7 +25,7 @@
 		"axios": "^1.6.2",
 		"bootstrap": "^5.1.0",
 		"canvas": "^2.11.2",
-		"gatsby": "^5.12.10",
+		"gatsby": "^5.12.11",
 		"gatsby-plugin-anchor-links": "^1.2.1",
 		"gatsby-plugin-gatsby-cloud": "5.12.2",
 		"gatsby-plugin-google-analytics": "5.12.0",

src/components/imageComponent.js

@@ -11,7 +11,7 @@ const Image = (props) => {
 						relativePath
 						name
 						childImageSharp {
-							gatsbyImageData(layout: CONSTRAINED, width: 800)
+							gatsbyImageData(layout: FULL_WIDTH, quality: 100)
 						}
 						extension
 						publicURL

src/components/layout.js

@@ -6,7 +6,7 @@ export default function Layout({ children, footerBoxes, footerBoxes2 }) {
 	const [loaded, setLoaded] = useState(false);
 
 	useEffect(() => {
-		if (typeof window !== `undefined` && loaded) {
+		if (typeof window !== `undefined` && typeof window.plausible !== `undefined` && loaded) {
 			const elements = document.querySelectorAll("[class*=plausible-event-name]");
 
 			elements.forEach(function (element) {

src/components/sections/home-hero-section.js

@@ -0,0 +1,26 @@
+import * as React from "react"
+import Button from "../buttons/button";
+
+export default class HomeHeroSection extends React.Component {
+    render() {
+        return (
+            <section className={'home-hero-section'}>
+                <div className={'container'}>
+                    <div className={'row justify-content-center'}>
+                        <div className={'col-auto'}>
+                            <h1>{this.props.heroData.title}</h1>
+                        </div>
+                        <div className={'col-auto'}>
+                            <div className={'text'} dangerouslySetInnerHTML={{__html: this.props.heroData.text}}/>
+                        </div>
+                        <div className={'col-12 justify-content-center d-flex'}>
+                            {this.props.heroData.buttons.map((button,index) => (
+                                <Button key={index} class={button.class} type={button.type} text={button.text} url={button.url}/>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </section>
+        )
+    }
+}

src/components/sections/two-column-h2.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Image from "../imageComponent";
+
+export default class TwoColumnH2 extends React.Component {
+	render() {
+		return (
+			<section className={`two-column-h2 ${this.props.direction}`}>
+				<div className={"row align-items-center"}>
+					<div className={`col col-12 col-lg-6 ${this.props.direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
+						<Image alt={this.props.title} filename={this.props.image} />
+					</div>
+					<div className={`d-table-cell align-middle col col-12 col-lg-6 ${this.props.direction === "rtl" ? "order-lg-1" : "order-lg-2"}`}>
+						<div className={"text"}>
+							<h2 className={"with-decor mt-4 mt-lg-0"}>{this.props.title}</h2>
+							<div className='paragraph' dangerouslySetInnerHTML={{ __html: this.props.text }} />
+							<div className={"flex mt-4"}>
+								<a href={this.props.btnUrl} className={"button button-simple"}>
+									{this.props.btnTitle}
+								</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</section>
+		);
+	}
+}

src/datas/home/explore-celestia.js

@@ -2,12 +2,12 @@ export const exploreCelestia = [
     {
         title: 'Explore the ecosystem',
         text: "Explore Celestia’s ecosystem of rollups and modular infrastructure",
-        image: 'home/explore-1.png',
+        image: 'home/explore-1.svg',
         link: "/ecosystem/",
     },{
         title: 'Use Tia',
         text: 'Pay for blobspace, secure the network, and participate in governance',
-        image: 'home/explore-2.png',
+        image: 'home/explore-2.svg',
         link: "/what-is-tia/",
     },{
         title: 'Run a light node',

src/pages/index.js

@@ -22,6 +22,11 @@ import CommunityItem from "../components/modules/community-item";
 
 import { seoContent } from "../datas/home/seoContent";
 import Seo from "../components/seo";
+import HomeHeroSection from "../components/sections/home-hero-section";
+import TwoColumn from "../components/sections/two-column";
+
+import scaleImage from "../images/scale.png";
+import TwoColumnH2 from "../components/sections/two-column-h2";
 
 const IndexPage = () => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
@@ -44,11 +49,32 @@ const IndexPage = () => {
 			<Seo title={seoContent.title} description={seoContent.description} ogTitle={seoContent.ogTitle} image={seoContent.image} />
 			<div id='index-page' className='index-page'>
 				<main>
-					<HeroSection heroData={heroData} />
-					<div className='advantages-section'>
-						<AdvantagesSection advantages={advantages} />
-					</div>
+					<HomeHeroSection heroData={heroData} />
+
 					<div className='container'>
+						<TwoColumnH2
+							direction={"ltr"}
+							title={"Access abundance"}
+							text={`
+								<p>Tap into the abundant throughput enabled by <a href='https://celestia.org/what-is-celestia/#what-is-data-availability-sampling' target='_blank' rel='noopener noreferrer'>Data Availability Sampling (DAS)</a>, the first architecture that securely scales with the number of users.</p>
+								<p>Anyone can directly verify and contribute to Celestia by <a href='https://celestia.org/run-a-light-node/' target='_blank' rel='noopener noreferrer'>running a light node</a>.</p>
+							`}
+							image={"graph-scale.png"}
+							btnTitle={"Learn Celestia"}
+							btnUrl={"/what-is-celestia/"}
+						/>
+						<TwoColumnH2
+							direction={"rtl"}
+							title={"Build whatever"}
+							text={`
+								<p>Deploy fast. Launch a blockchain with leading Ethereum rollup frameworks or transform nearly any VM into your own sovereign chain.</p>
+								<p>With Celestia underneath, a customizable blockchain becomes as easy to deploy as a smart contract.</p>
+							`}
+							image={"graph-ecosystem.png"}
+							btnTitle={"Build modular"}
+							btnUrl={"/developer-portal/"}
+						/>
+
 						<section id='explore-celestia' className='explore-celestia'>
 							<div className='d-flex justify-content-center'>
 								<h2 className='with-decor pb-2'>Explore Celestia</h2>
@@ -84,7 +110,7 @@ const IndexPage = () => {
 												</defs>
 											</svg>
 											<div className={"image-wrapper"}>
-												<Image alt={exploreCelestia[0].title} filename={exploreCelestia[0].image} />
+												<Image alt={exploreCelestia[0].title} height={"40px"} filename={exploreCelestia[0].image} />
 											</div>
 											<h3>{exploreCelestia[0].title}</h3>
 											<p>{exploreCelestia[0].text} </p>
@@ -170,45 +196,6 @@ const IndexPage = () => {
 							</div>
 						</section>
 
-						<section className='cards-section'>
-							<h2 className='with-decor pb-2'>How it works</h2>
-							<div className='subtitle'>
-								Celestia is a minimal blockchain that only orders and publishes transactions but does not execute them. By decoupling
-								the consensus and application execution layers, Celestia modularizes the blockchain technology stack and unlocks new
-								possibilities for decentralized application builders.
-							</div>
-
-							<div className='row mt-5'>
-								<div className='col col-12 col-lg-6 pe-lg-4'>
-									<Card
-										image='home/architecture.png'
-										title='Traditional monolithic architecture'
-										text={
-											"<ul><li>Developers can only use programming languages supported by chain's execution environment</li><li>All applications run on the same process (the world computer model), with shared gas resources</li><li>Smart contracts cannot be updated without a hard fork</li></ul>"
-										}
-									/>
-								</div>
-								<div className='col col-12 col-lg-6 ps-lg-4'>
-									<Card
-										image='home/celestia-architecture.png'
-										title='Celestia-enabled modular architecture'
-										text={
-											"<ul><li>Developers can effortlessly define their own virtual execution environments; similar to virtual machines</li><li>Each application gets its own sovereign execution space, while inheriting the security of Celestia's consensus</li><li>Applications can be updated without main chain hard forks</li></ul>"
-										}
-									/>
-								</div>
-							</div>
-							<div className='row justify-content-center pt-5'>
-								<div className='col-auto'>
-									<a href='/what-is-celestia/' target='_blank'>
-										<button className='button button-simple button-internal' tabIndex={0} id='developer'>
-											Learn More
-										</button>
-									</a>
-								</div>
-							</div>
-						</section>
-
 						<section id='community' className='join-the-community'>
 							<h2 className='with-decor pb-2'>Join the community</h2>
 							<div className='subtitle'>Join the Celestia community online or hang out at one of the grassroots Modular Meetups</div>

src/scss/buttons.scss

@@ -32,7 +32,6 @@
 }
 
 .button-white {
-	border: 1px solid #000000;
 	border-radius: 6px;
 	font-family: $ruberoid;
 	font-weight: 500;
@@ -46,6 +45,8 @@
 	display: inline-block;
 	height: 50px;
 	line-height: 50px;
+	background: #fff;
+	box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.16);
 
 	&:hover {
 		background: #000;

src/scss/main.scss

@@ -47,13 +47,15 @@
 
 @import "sections/image-with-text.scss";
 @import "sections/two-column-section.scss";
+@import "sections/two-column-h2-section.scss";
 @import "sections/podcast-section.scss";
 @import "sections/whitepapers-section.scss";
 @import "sections/advantages-section.scss";
 @import "sections/cards-section.scss";
 @import "sections/purple-section.scss";
 @import "sections/image-section.scss";
 @import "sections/hero-section.scss";
+@import "sections/home-hero-section.scss";
 @import "sections/videos-section.scss";
 @import "sections/backers-section.scss";
 @import "sections/roadmap-section.scss";
@@ -207,7 +209,7 @@ h2,
 	letter-spacing: 0.2px;
 	position: relative;
 
-	&.with-decor {
+	/*&.with-decor {
 		&:before {
 			position: absolute;
 			left: -6px;
@@ -217,53 +219,53 @@ h2,
 			height: 118px;
 			background: url(../images/h2-decor.svg) no-repeat scroll center left transparent;
 		}
-	}
+	}*/
 
 	@include media-breakpoint-down(lg) {
 		font-size: 66px;
 		line-height: 70px;
 		letter-spacing: 0.15px;
 
-		&.with-decor {
+		/*&.with-decor {
 			&:before {
 				width: 88px;
 				height: 104px;
 				background-size: contain;
 				top: -27px;
 				left: -11px;
 			}
-		}
+		}*/
 	}
 
 	@include media-breakpoint-down(md) {
 		font-size: 46px;
 		line-height: 48px;
 		letter-spacing: 0.125px;
 
-		&.with-decor {
+		/*&.with-decor {
 			&:before {
 				width: 58px;
 				height: 72px;
 				background-size: contain;
 				top: -20px;
 				left: -12px;
 			}
-		}
+		}*/
 	}
 
 	@include media-breakpoint-down(sm) {
 		font-size: 36px;
 		line-height: 38px;
 		letter-spacing: 0.1px;
 
-		&.with-decor {
+		/*&.with-decor {
 			&:before {
 				width: 50px;
 				height: 59px;
 				top: -17px;
 				left: -10px;
 			}
-		}
+		}*/
 	}
 }
 
@@ -276,7 +278,7 @@ h3 {
 	line-height: 60px;
 	position: relative;
 
-	&.with-decor {
+	/*&.with-decor {
 		&:before {
 			position: absolute;
 			left: -6px;
@@ -287,38 +289,38 @@ h3 {
 			background: url(../images/h2-decor.svg) no-repeat scroll center left transparent;
 			background-size: contain;
 		}
-	}
+	}*/
 
 	@include media-breakpoint-down(md) {
 		font-size: 42px;
 		letter-spacing: 0.12px;
 		line-height: 50px;
 
-		&.with-decor {
+		/*&.with-decor {
 			&:before {
 				left: -10px;
 				top: -18px;
 				content: "";
 				width: 50px;
 				height: 66px;
 			}
-		}
+		}*/
 	}
 
 	@include media-breakpoint-down(sm) {
 		font-size: 32px;
 		letter-spacing: 0.09px;
 		line-height: 40px;
 
-		&.with-decor {
+		/*&.with-decor {
 			&:before {
 				width: 40px;
 				height: 50px;
 				background-size: contain;
 				top: -12px;
 				left: -8px;
 			}
-		}
+		}*/
 	}
 }
 

src/scss/pages/page-home.scss

@@ -1,6 +1,40 @@
 .index-page {
+
+	&:before{
+		position:absolute;
+		left:0;
+		top:0;
+		width:100%;
+		height:100%;
+		content:'';
+		z-index:-1;
+		background: url(../images/BG/homepage-bg.png) no-repeat scroll top center transparent;
+		background-size:1900px;
+
+		@include media-breakpoint-down(xl) {
+			background-size:130%;
+			background-position: center top;
+		}
+		@include media-breakpoint-down(lg) {
+			background-size:150%;
+			background-position: center top;
+		}
+		@include media-breakpoint-down(md) {
+			background-size:250%;
+			background-position: center top;
+		}
+		@include media-breakpoint-down(sm) {
+			background-size:200%;
+			background-position: center top;
+		}
+	}
+
 	main {
 		padding-top: 100px;
+
+		@include media-breakpoint-down(sm) {
+			padding-top:0;
+		}
 	}
 	.hero-section {
 		.text {