diff --git a/public/img/s2/zkl-claim.png b/public/img/s2/zkl-claim.png
new file mode 100644
index 00000000..d868b1c2
Binary files /dev/null and b/public/img/s2/zkl-claim.png differ
diff --git a/src/components/DashboardS2/ZKLClaimAd.tsx b/src/components/DashboardS2/ZKLClaimAd.tsx
new file mode 100644
index 00000000..9b43431e
--- /dev/null
+++ b/src/components/DashboardS2/ZKLClaimAd.tsx
@@ -0,0 +1,150 @@
+import { GradientBox } from "@/styles/common";
+import { Button } from "@nextui-org/react";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+
+const Container = styled.div`
+ position: fixed;
+ top: 120px;
+ right: 32px;
+ background: #181d20;
+ color: #fff;
+ font-family: Satoshi;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ z-index: 999;
+ transition: all 0.3s;
+
+ .progress-bar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+
+ @keyframes shrinkWidth {
+ from {
+ width: 100%;
+ }
+ to {
+ width: 0%;
+ }
+ }
+
+ .progress {
+ height: 4px;
+ background: var(
+ --Button-Rainbow,
+ linear-gradient(
+ 90deg,
+ #4ba790 0%,
+ rgba(251, 251, 251, 0.6) 50.31%,
+ #9747ff 100%
+ )
+ );
+ width: 100%;
+ animation: shrinkWidth 30.3s linear;
+ }
+ }
+`;
+
+const DefaultButton = styled(Button)`
+ border-radius: 8px;
+ background: #282828;
+ .btn-text {
+ font-family: Satoshi;
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+ background: var(
+ --Button-Rainbow,
+ linear-gradient(
+ 90deg,
+ #4ba790 0%,
+ rgba(251, 251, 251, 0.6) 50.31%,
+ #9747ff 100%
+ )
+ );
+ background-clip: text;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+`;
+
+export default function ZKLClaimAd() {
+ const [isOpen, setIsOpen] = useState(true);
+
+ // useEffect(() => {
+ // const premius_ts = localStorage.getItem("premius_ts");
+ // const now = new Date().getTime();
+
+ // console.log("premius_ts", premius_ts, now, now - Number(premius_ts));
+
+ // if (!premius_ts || now - Number(premius_ts) > 12 * 60 * 60 * 1000) {
+ // setIsOpen(true);
+ // }
+ // }, []);
+
+ // useEffect(() => {
+ // if (!isOpen) return;
+ // const timer = setTimeout(() => {
+ // setIsOpen(false);
+ // }, 30000);
+
+ // return () => clearTimeout(timer);
+ // }, [isOpen]);
+
+ const handleClose = () => {
+ setIsOpen(false);
+ // const now = new Date().getTime();
+ // localStorage.setItem("premius_ts", now.toString());
+ };
+
+ const handleJump = () => {
+ handleClose();
+ window.open("https://zklink.io/novadrop/", "_blank");
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ Claim Now
+
+
+
+ {/* {isOpen && (
+
+ )} */}
+
+
+ );
+}
diff --git a/src/pages/DashboardS2/index2.tsx b/src/pages/DashboardS2/index2.tsx
index 5a82361b..446f5b7c 100644
--- a/src/pages/DashboardS2/index2.tsx
+++ b/src/pages/DashboardS2/index2.tsx
@@ -26,6 +26,7 @@ import DailyRoulette from "@/components/DashboardS2/DailyRoulette";
import { Tooltip } from "@nextui-org/react";
import { epochList } from "@/constants/epoch";
import PremiusAd from "@/components/DashboardS2/PremiusAd";
+import ZKLClaimAd from "@/components/DashboardS2/ZKLClaimAd";
export type TotalTvlItem = {
symbol: string;
tokenAddress: string;
@@ -596,7 +597,8 @@ export default function Dashboard() {
return (
-
+ {/* */}
+