lotti anim homepage (#369)

* feat: lotti anim merge everyting into one commit

* fix: anim size

* fix: change anim position

* fix: cached package json fix

---------

Co-authored-by: SeraGabor <[email protected]>

package.json

@@ -48,6 +48,7 @@
 		"gatsby-transformer-remark": "6.12.3",
 		"gatsby-transformer-sharp": "5.12.3",
 		"jquery": "^3.6.0",
+		"lottie-react": "^2.4.0",
 		"qs": "^6.11.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

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

@@ -1,6 +1,9 @@
 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";
 
 const TwoColumnH2 = ({
 	direction,
@@ -13,17 +16,42 @@ const TwoColumnH2 = ({
 	buttonSecondaryUrl,
 	buttonSecondaryClass,
 	buttonSecondaryTitle,
+	anim,
+	animVersion,
+	animSegment
 }) => {
+
+	const lottieRef = useRef(null);
+
+	const myRef = useRef();
+
+	const {
+		inViewport,
+		enterCount,
+		leaveCount,
+	} = useInViewport(
+		myRef
+	);
+
+	enterCount === 1 && lottieRef.current && lottieRef.current.play();
+
+
+
 	return (
 		<section className={`two-column-h2 ${direction}`}>
 			<div className={"row align-items-center"}>
-				<div className={`col col-12 col-lg-6 ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
-					<Image alt={title} filename={image} />
+
+				<div className={`col col-12 col-lg-6 anim-col ${animVersion === 2 && 'px-2'} ${direction === "rtl" ? "order-lg-2" : "order-lg-1"}`}>
+					{anim && <Lottie lottieRef={lottieRef} animationData={anim} loop={false} autoplay={false}
+									 renderer={"canvas"} style={{width: animVersion === 2 ? 680 : 700, height: animVersion ? 450 : 450}}
+					/>}
+					{!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={'position-absolute'} style={{marginTop:'25vh'}} ref={myRef}/>
 						<div className={"flex mt-4"}>
 							<Link to={buttonPrimaryUrl} className={`button button-simple me-4 ${buttonPrimaryClass}`}>
 								{buttonPrimaryTitle}

src/pages/index.js

@@ -22,6 +22,8 @@ import Seo from "../components/seo";
 import HomeHeroSection from "../components/sections/home-hero-section";
 
 import TwoColumnH2 from "../components/sections/two-column-h2";
+import lottiAnim1 from "../anim/trans-anim-1.json";
+import lottiAnim2 from "../anim/trans-anim-2.json";
 
 const IndexPage = () => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
@@ -57,7 +59,8 @@ const IndexPage = () => {
 							image={"graph-scale.png"}
 							buttonPrimaryTitle={"Learn Celestia"}
 							buttonPrimaryUrl={"/what-is-celestia/"}
-							buttonPrimaryClass={"plausible-event-name=Learn_Celestia_Button-Homepage--Access_abundance_section"}
+							anim={lottiAnim1}
+							animVersion={1}
 						/>
 						<TwoColumnH2
 							direction={"rtl"}
@@ -72,7 +75,8 @@ const IndexPage = () => {
 							buttonPrimaryClass={"plausible-event-name=Build_Modular_Button-Homepage--Build_whatever_section"}
 							buttonSecondaryTitle={"Deploy"}
 							buttonSecondaryUrl={"/build#deploy"}
-							buttonSecondaryClass={"plausible-event-name=Deploy_Button-Homepage--Build_whatever_section"}
+							anim={lottiAnim2}
+							animVersion={2}
 						/>
 
 						<section id={`${heroData.buttons[1]?.url.replace(/\s+/g, "-").toLowerCase()}`} className='explore-celestia'>