feat(landing-page): add ecoboost card

sites/crossbell.io/components/pages/landing-page/components/ecoboost-card/index.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import Image from "next/image";
+import classNames from "classnames";
+
+import logoGIF from "./crossbell_logo.gif";
+
+const KEY = "isHideEcoBoostCard";
+
+export function EcoBoostCard() {
+	const [isActive, setIsActive] = React.useState(false);
+
+	React.useEffect(() => {
+		if (localStorage.getItem(KEY) !== "true") {
+			setIsActive(true);
+		}
+	}, []);
+
+	return (
+		<div
+			className={classNames(
+				"px-6 z-10 absolute top-18 right-1/2 translate-x-1/2 w-full pointer-events-none transition",
+				isActive ? "opacity-100" : "opacity-0"
+			)}
+		>
+			<div className="max-w-[1920px] mx-auto w-full flex justify-center sm:justify-end">
+				<div
+					className={classNames(
+						"relative",
+						isActive ? "pointer-events-auto" : "pointer-events-none"
+					)}
+				>
+					<a
+						href="https://ecoboost.crossbell.io/"
+						target="_blank"
+						className="flex w-[346px] gap-3 max-w-full items-center p-3 rounded-[20px] bg-[#F4F4F4]"
+					>
+						<Image
+							src={logoGIF}
+							alt="Crossbell Logo"
+							className="w-[80px] h-[80px] object-fit"
+						/>
+
+						<div>
+							<h4 className="w-44 text-black text-xl font-medium m-0">
+								Become the EcoBoost star now
+							</h4>
+
+							<div className="text-black text-opacity-20 text-sm font-normal mt-[15px]">
+								Crossbell Grants
+							</div>
+						</div>
+					</a>
+
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="20"
+						height="20"
+						viewBox="0 0 20 20"
+						fill="none"
+						className="transition absolute right-3 top-3 cursor-pointer bg-[#E9E9E9] rounded-[10px] hover:bg-[#e1e1e1] active:bg-[#d1d1d1]"
+						onClick={() => {
+							localStorage.setItem(KEY, `${isActive}`);
+							setIsActive(false);
+						}}
+					>
+						<path
+							d="M6.25 13.75L13.75 6.25"
+							stroke="#B9BABC"
+							strokeWidth="2"
+							strokeLinecap="round"
+						/>
+						<path
+							d="M6.25 6.25L13.75 13.75"
+							stroke="#B9BABC"
+							strokeWidth="2"
+							strokeLinecap="round"
+						/>
+					</svg>
+				</div>
+			</div>
+		</div>
+	);
+}

sites/crossbell.io/components/pages/landing-page/components/header/index.tsx

@@ -11,7 +11,6 @@ import {
 	XSyncLogo,
 	XLogLogo,
 	breakpoints,
-	CrossbellChainLogo,
 } from "@crossbell/ui";
 import { useMediaQuery } from "@mantine/hooks";
 import { useDisclosure } from "@crossbell/util-hooks";
@@ -74,15 +73,6 @@ function AppsBtn() {
 					<XLogLogo className="w-[36px] h-[36px] text-[#000]" />
 					<div className="text-[#000]">xLog</div>
 				</a>
-
-				<a
-					className="flex flex-col items-center justify-center gap-[4px]"
-					href="https://ecoboost.crossbell.io"
-					target="_blank"
-				>
-					<CrossbellChainLogo className="w-[36px] h-[36px] text-[#E6B65B]" />
-					<div className="text-[#000]">EcoBoost</div>
-				</a>
 			</div>
 		</div>
 	);

sites/crossbell.io/components/pages/landing-page/index.tsx

@@ -18,6 +18,7 @@ import { useMediaQuery } from "@mantine/hooks";
 import { breakpoints } from "~/scripts/unocss/breakpoints";
 
 import styles from "./index.module.css";
+import { EcoBoostCard } from "@/components/pages/landing-page/components/ecoboost-card";
 
 export function LandingPage() {
 	const isMD = useMediaQuery(`(min-width: ${breakpoints.md}px)`);
@@ -35,6 +36,7 @@ export function LandingPage() {
 				ref={containerRef}
 			>
 				<Header />
+				<EcoBoostCard />
 
 				<Scroll.Section className="max-w-[1920px] mx-auto">
 					<IntroSection