Homepage updates (#380)

* update: image and styles changes * update: changed anim order * updated Access abundance anim * updated hero and anim * updated header css * updated text subheading tetx nd button color --------- Co-authored-by: Gábor Tamás <[email protected]>
celestiaorg · Mar 7, 2024 · aa326af · aa326af
1 parent d777a2a
commit aa326af
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 92 deletions.
diff --git a/src/anim/trans-anim-1-old.json b/src/anim/trans-anim-1-old.json
diff --git a/src/anim/trans-anim-1.json b/src/anim/trans-anim-1.json
diff --git a/src/anim/trans-anim-10newold.json b/src/anim/trans-anim-10newold.json
diff --git a/src/components/sections/home-hero-section.js b/src/components/sections/home-hero-section.js
@@ -1,26 +1,26 @@
-import * as React from "react"
+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>
-        )
-    }
+	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>
+		);
+	}
 }
diff --git a/src/components/sections/two-column-h2.js b/src/components/sections/two-column-h2.js
@@ -2,10 +2,11 @@ import * as React from "react";
 import Image from "../imageComponent";
 import { Link } from "gatsby";
 import Lottie from "lottie-react";
-import {useEffect, useMemo, useRef, useState} from "react";
-import handleViewport, {useInViewport} from "react-in-viewport";
+import { useEffect, useMemo, useRef, useState } from "react";
+import handleViewport, { useInViewport } from "react-in-viewport";
 
 const TwoColumnH2 = ({
+	className,
 	direction,
 	title,
 	image,
@@ -18,41 +19,41 @@ const TwoColumnH2 = ({
 	buttonSecondaryTitle,
 	anim,
 	animVersion,
-	animSegment
+	animSegment,
 }) => {
-
 	const lottieRef = useRef(null);
 
 	const myRef = useRef();
 
-	const {
-		inViewport,
-		enterCount,
-		leaveCount,
-	} = useInViewport(
-		myRef
-	);
+	const { inViewport, enterCount, leaveCount } = useInViewport(myRef);
 
 	enterCount === 1 && lottieRef.current && lottieRef.current.play();
-
-
-
+	console.log(anim);
 	return (
-		<section className={`two-column-h2 ${direction}`}>
+		<section className={`two-column-h2 ${direction} ${className}`}>
 			<div className={"row align-items-center"}>
-
-				<div className={`col col-12 col-lg-6 anim-col ${animVersion === 2 && 'px-2'} ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
-					{anim && <Lottie
-						resizeMode="cover" className={`lottie-anim-${animVersion}`} lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
-									 renderer={"canvas"}
-					/>}
+				<div className={`col col-12 col-lg-6 anim-col ${animVersion === 2 && "px-2"} ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
+					{anim && (
+						<Lottie
+							width='100%'
+							height='100%'
+							resizeMode='cover'
+							className={`lottie-anim-${animVersion}`}
+							lottieRef={lottieRef}
+							quality={"high"}
+							animationData={anim}
+							loop={false}
+							autoplay={false}
+							renderer={"canvas"}
+						/>
+					)}
 					{!anim && <Image alt={title} filename={image} />}
 				</div>
 				<div className={`d-table-cell align-middle col col-12 col-lg-6 ${direction === "rtl" ? "order-lg-1" : "order-lg-2"}`}>
 					<div className={"text"}>
 						<h2 className={"with-decor mt-4 mt-lg-0"}>{title}</h2>
 						<div className='paragraph' dangerouslySetInnerHTML={{ __html: text }} />
-						<div className={'lottie-anchor'} ref={myRef}/>
+						<div className={"lottie-anchor"} ref={myRef} />
 						<div className={"flex mt-4"}>
 							<Link to={buttonPrimaryUrl} className={`button button-simple me-4 ${buttonPrimaryClass}`}>
 								{buttonPrimaryTitle}

diff --git a/src/images/BG/homepage-bg-mobile.png b/src/images/BG/homepage-bg-mobile.png
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -49,19 +49,6 @@ const IndexPage = () => {
 					<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 scales while maintaining verifiability for any user.</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"}
-							buttonPrimaryTitle={"Learn Celestia"}
-							buttonPrimaryUrl={"/what-is-celestia/"}
-							anim={lottiAnim1}
-							animVersion={1}
-						/>
 						<TwoColumnH2
 							direction={"rtl"}
 							title={"Build whatever"}
@@ -79,6 +66,21 @@ const IndexPage = () => {
 							animVersion={2}
 						/>
 
+						<TwoColumnH2
+							className={"mt-5"}
+							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 scales while maintaining verifiability for any user.</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"}
+							buttonPrimaryTitle={"Learn Celestia"}
+							buttonPrimaryUrl={"/what-is-celestia/"}
+							anim={lottiAnim1}
+							animVersion={1}
+						/>
+
 						<section id={`${heroData.buttons[1]?.url.replace(/\s+/g, "-").toLowerCase()}`} className='explore-celestia'>
 							<div className='d-flex justify-content-center'>
 								<h2 className='with-decor pb-2'>Explore Celestia</h2>

diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss
@@ -4,7 +4,7 @@
 .button-simple {
 	height: auto;
 	line-height: 1.25em;
-	padding: 15px 15px;
+	padding: 15px 25px;
 	background: #000000;
 	border-radius: 6px;
 	font-family: $ruberoid;
@@ -41,7 +41,7 @@
 	text-align: center;
 	transition: 300ms all ease-in-out;
 	text-decoration: none;
-	padding: 0 15px;
+	padding: 0 25px;
 	display: inline-block;
 	height: 50px;
 	line-height: 50px;
@@ -53,6 +53,30 @@
 		color: #fff;
 	}
 }
+
+.button-ghost {
+	border-radius: 6px;
+	font-family: $ruberoid;
+	font-weight: 500;
+	font-size: 16px;
+	color: #000000;
+	border: 1px solid #000;
+	letter-spacing: 0.2px;
+	text-align: center;
+	transition: 300ms all ease-in-out;
+	text-decoration: none;
+	padding: 0px 25px;
+	display: inline-block;
+	height: 50px;
+	line-height: 50px;
+	background: transparent;
+
+	&:hover {
+		background: #000;
+		color: #fff;
+	}
+}
+
 .button-footer {
 	border-radius: 6px;
 	font-family: $ruberoid;

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -87,7 +87,12 @@ body {
 		left: 0;
 		z-index: -1;
 		@include media-breakpoint-down(sm) {
-			background-size: 200%;
+			background-size: 300%;
+			top: -20px;
+			left: 0;
+			z-index: -1;
+			background-position: 0% top;
+			opacity: 0.7;
 		}
 	}
 }

diff --git a/src/scss/pages/page-home.scss b/src/scss/pages/page-home.scss
@@ -24,10 +24,12 @@
 			background-position: center top;
 		}
 		@include media-breakpoint-down(sm) {
-			background-size: 200%;
-			background-position: center top;
-			top: -26vw;
-			opacity: 0.8;
+			background: url(../images/BG/homepage-bg-mobile.png) no-repeat scroll top center transparent;
+			background-size: 1180px;
+			background-position: 30% top;
+			top: -390px;
+			left: -50%;
+			transform: translateX(50%);
 		}
 	}
 

diff --git a/src/scss/sections/home-hero-section.scss b/src/scss/sections/home-hero-section.scss
@@ -3,7 +3,16 @@
 	position: relative;
 
 	@include media-breakpoint-down(sm) {
-		padding-bottom: 60px;
+		// padding-top: 120px;
+		// padding-bottom: 180px;
+		height: 90vh;
+		max-height: 932px;
+		display: flex;
+		align-items: center;
+		padding: 0px;
+		.container {
+			padding-bottom: 30px;
+		}
 	}
 
 	h1 {
@@ -27,8 +36,8 @@
 		}
 
 		@include media-breakpoint-down(sm) {
-			font-size: 42px;
-			max-width: 340px;
+			font-size: 43px;
+			max-width: 350px;
 			letter-spacing: -2px;
 		}
 	}
@@ -46,11 +55,13 @@
 		letter-spacing: 0.22px;
 		text-align: center;
 
-		@include media-breakpoint-down(md) {
-			font-size: 14px;
+		@include media-breakpoint-down(sm) {
+			font-size: 17px;
 			line-height: 21px;
 			width: 100%;
 			margin-bottom: 30px;
+			max-width: 350px;
+			text-wrap: pretty;
 		}
 	}
 

diff --git a/src/scss/sections/two-column-h2-section.scss b/src/scss/sections/two-column-h2-section.scss
@@ -66,53 +66,52 @@
 	}
 }
 
-.anim-col{
-	.lottie-anim-1{
-		width:700px;
-		height:450px;
+.anim-col {
+	.lottie-anim-1 {
+		width: 700px;
+		height: 450px;
 
 		@media (max-width: 1380px) {
-			width:100%;
-			height:unset;
+			width: 100%;
+			height: unset;
 
-			canvas{
-				max-width:100%;
+			canvas {
+				max-width: 100%;
 			}
 		}
 
 		@include media-breakpoint-down(sm) {
 			transform: scale(1.5);
 			transform-origin: center !important;
-			margin-bottom:30px;
+			margin-bottom: 30px;
 		}
 	}
-	.lottie-anim-2{
-		width:680px;
-		height:450px;
+	.lottie-anim-2 {
+		width: 680px;
+		height: 450px;
 
 		@media (max-width: 1380px) {
-			width:100%;
-			height:unset;
+			width: 100%;
+			height: unset;
 
-			canvas{
-				max-width:100%;
+			canvas {
+				max-width: 100%;
 			}
 		}
 
 		@include media-breakpoint-down(sm) {
 			transform: scale(1.5);
 			transform-origin: center !important;
-			margin-bottom:30px;
+			margin-bottom: 30px;
 		}
 	}
 }
 
-
-.lottie-anchor{
-	position:absolute;
-	margin-top:25vh;
+.lottie-anchor {
+	position: absolute;
+	margin-top: 25vh;
 
 	@media (max-width: 1380px) {
-		margin-top:0;
+		margin-top: 0;
 	}
 }