Skip to content

Commit 946cb0b

Browse files
cuongdcdevcuongdcdev
committed
feat: enable nearcon banner
1 parent 5999a7e commit 946cb0b

File tree

4 files changed

+118
-46
lines changed

4 files changed

+118
-46
lines changed

‎app/layout.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Dragon from "@/components/ui/dragon/dragon";
88
import Navbar from "@/components/ui/navbar";
99
import site from "@/config/site";
1010
import SearchModal from "@/components/modals/search";
11-
// import Banner from "@/components/ui/banner/banner";
11+
import Banner from "@/components/ui/banner/banner";
1212

1313
// const manrope = Manrope({ subsets: ["latin"] });
1414

@@ -60,6 +60,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
6060
<Footer />
6161
<Dragon/>
6262
</div>
63+
<Banner/>
6364
</body>
6465
</html>
6566
);

‎components/ui/banner/banner.css‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,48 @@
22
z-index:9999;
33
position:fixed;
44
bottom:0;
5+
width: 100%;
56
}
67

7-
.near-event-banner img{ width: 100% }
8-
.near-event-banner a{
8+
.near-event-banner {
9+
position: relative;
10+
width: 100%;
11+
}
12+
13+
.near-event-banner-image img{
14+
width: 100%;
15+
height: auto;
16+
display: block;
17+
}
18+
19+
.near-event-banner-image a{
920
display: block;
1021
outline: none;
1122
transition: box-shadow .3s;
1223
position: relative;
1324
}
1425

26+
.near-event-banner-text {
27+
border-top: 1px solid rgba(255, 255, 255, 0.1);
28+
padding: 0;
29+
}
30+
31+
.near-event-banner-text .form-label-m {
32+
font-size: 16px;
33+
font-weight: 500;
34+
line-height: 1.5;
35+
color: #000000;
36+
}
37+
38+
@media screen and (max-width: 768px) {
39+
.near-event-banner-text .form-label-m {
40+
font-size: 13px;
41+
line-height: 1.3;
42+
}
43+
}
44+
1545
@media screen and (min-width: 1800px ) {
16-
.near-event-banner {
46+
.near-event-banner-image {
1747
max-width: 1200px;
1848
transform: translateX(-50%);
1949
left: 50%;

‎components/ui/banner/banner.tsx‎

Lines changed: 81 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,90 @@ import "./banner.css"
44

55
import { useState } from "react";
66

7-
export default function Banner() {
7+
type BannerType = "text" | "image";
8+
9+
interface BannerProps {
10+
type?: BannerType;
11+
}
12+
13+
export default function Banner({ type = "text" }: BannerProps) {
814
const [bannerVisible, setBannerVisible] = useState(true);
915

16+
if (!bannerVisible) return null;
17+
1018
return (
11-
bannerVisible && (
12-
<>
13-
<div id="near-event">
14-
<div className="near-event-banner">
15-
<button
16-
className=""
17-
style={{
18-
position: "absolute",
19-
top: "-15px",
20-
right: "0",
21-
background: "black",
22-
border: "none",
23-
color: "#00EC97",
24-
fontSize: "12px",
25-
cursor: "pointer",
26-
zIndex: 9999999,
27-
fontWeight: "bold",
28-
}}
29-
onClick={() => {
30-
console.log("set banner hide: ", bannerVisible);
31-
setBannerVisible(false);
32-
}}
33-
>
34-
[&times;]
35-
</button>
36-
<a
37-
href="https://onetrillionagents.com/"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
title="One Trillion Agents Hackathon - Bring order to chaos. Buidl the resistance"
41-
>
42-
<Image
43-
src="https://indexer.nearcatalog.org/wp-content/uploads/2025/01/nearaihackathon.jpeg"
44-
alt="One Trillion Agents Hackathon - Bring order to chaos. Buidl the resistance"
45-
/>
46-
</a>
19+
<div id="near-event">
20+
{type === "text" ? (
21+
<div className="near-event-banner near-event-banner-text" style={{background: "linear-gradient(90deg, #65D56E 0%, #59C2E8 50%, #F98372 75%, #F1B139 100%)"}}>
22+
<div className="w-full" style={{ opacity: 1 }}>
23+
<div className="block w-full mx-auto max-w-[1480px]">
24+
<div className="px-3 md:px-28 py-2 md:py-1 flex flex-row items-center justify-between gap-3">
25+
<div className="flex-grow flex flex-col md:flex-row md:items-center justify-start md:justify-between gap-2 md:gap-6">
26+
<h3 className="text-black text-sm md:text-base form-label-m text-center md:text-left">
27+
NEARCON, the flagship gathering of the NEAR ecosystem, February 23–24 in San Francisco
28+
</h3>
29+
<a
30+
target="_blank"
31+
className="animated-text-hover group relative block overflow-hidden font-grotesk text-xs md:text-base leading-normal no-underline transform transition-all duration-150 text-white font-medium rounded px-2 py-1 md:py-2 bg-black shrink-0 mx-auto md:mr-0 md:ml-auto text-center"
32+
rel="noopener noreferrer"
33+
href="https://nearcon.org/"
34+
>
35+
<div className="relative md:pl-2">
36+
<span className="anim-characters-span block py-0 md:py-1 pr-1 md:pr-2 relative transition-all duration-300 delay-150" aria-label="NEARCON 2026">
37+
NEARCON 2026
38+
</span>
39+
</div>
40+
</a>
41+
</div>
42+
<button
43+
onClick={() => setBannerVisible(false)}
44+
className="p-1 md:py-2 md:px-6 flex justify-center items-center relative bg-transparent border-none cursor-pointer text-white"
45+
aria-label="Close"
46+
>
47+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256" className="block">
48+
<path d="M204.24,195.76a6,6,0,1,1-8.48,8.48L128,136.49,60.24,204.24a6,6,0,0,1-8.48-8.48L119.51,128,51.76,60.24a6,6,0,0,1,8.48-8.48L128,119.51l67.76-67.75a6,6,0,0,1,8.48,8.48L136.49,128Z"></path>
49+
</svg>
50+
<span className="sr-only">Close</span>
51+
</button>
52+
</div>
4753
</div>
4854
</div>
49-
</>
50-
)
51-
);
55+
</div>
56+
) : (
57+
<div className="near-event-banner near-event-banner-image">
58+
<button
59+
className=""
60+
style={{
61+
position: "absolute",
62+
top: "-15px",
63+
right: "0",
64+
background: "black",
65+
border: "none",
66+
color: "#00EC97",
67+
fontSize: "12px",
68+
cursor: "pointer",
69+
zIndex: 9999999,
70+
fontWeight: "bold",
71+
}}
72+
onClick={() => setBannerVisible(false)}
73+
>
74+
[&times;]
75+
</button>
76+
<a
77+
href="https://onetrillionagents.com/"
78+
target="_blank"
79+
rel="noopener noreferrer"
80+
title="One Trillion Agents Hackathon - Bring order to chaos. Buidl the resistance"
81+
>
82+
<Image
83+
src="https://indexer.nearcatalog.org/wp-content/uploads/2025/01/nearaihackathon.jpeg"
84+
alt="One Trillion Agents Hackathon - Bring order to chaos. Buidl the resistance"
85+
width={1200}
86+
height={400}
87+
/>
88+
</a>
89+
</div>
90+
)}
91+
</div>
92+
);
5293
}

‎components/ui/dragon/dragon.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@
2929

3030
.ag-dragon:before {
3131
content: "";
32-
background: url("https://indexer.nearcatalog.org/wp-content/uploads/2025/08/JAMBO-1.png") no-repeat scroll 0 0;
33-
/* background: url("https://indexer.nearcatalog.org/wp-content/uploads/2025/08/dragon.png") no-repeat scroll 0 0; */
32+
/* background: url("https://indexer.nearcatalog.org/wp-content/uploads/2025/08/JAMBO-1.png") no-repeat scroll 0 0; */
33+
background: url("https://indexer.nearcatalog.org/wp-content/uploads/2025/08/dragon.png") no-repeat scroll 0 0;
3434
background-size: 100% auto;
3535

3636
position: absolute;

0 commit comments

Comments
 (0)