Skip to content

Commit c73b020

Browse files
nikosanagnikosanag
committed
feat: add centered green 'Giveaways gate' button with mobile-elegant styling
1 parent 46df716 commit c73b020

3 files changed

Lines changed: 215 additions & 2 deletions

File tree

‎app/components/GiveawaysButton.jsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
5+
export default function GiveawaysButton() {
6+
const [showPrompt, setShowPrompt] = useState(false);
7+
8+
return (
9+
<>
10+
<button className="giveaways-launcher" type="button" onClick={() => setShowPrompt(true)}>
11+
<span>Giveaways gate</span>
12+
<small>Exclusive perks</small>
13+
</button>
14+
15+
{showPrompt && (
16+
<div className="giveaways-prompt" role="dialog" aria-modal="true" aria-labelledby="giveaways-prompt-title" onClick={() => setShowPrompt(false)}>
17+
<div className="giveaways-prompt-panel" onClick={(e) => e.stopPropagation()}>
18+
<div className="giveaways-status-indicator">
19+
<div className="status-dot"></div>
20+
<span>Status: Incoming</span>
21+
</div>
22+
<h2 id="giveaways-prompt-title">Giveaways Gate</h2>
23+
<div className="giveaways-content">
24+
<p className="coming-soon-text">
25+
The gates are currently preparing for deployment.
26+
Exclusive rewards and community perks will be accessible here soon.
27+
</p>
28+
<div className="placeholder-grid">
29+
{[1, 2, 3, 4].map((i) => (
30+
<div key={i} className="placeholder-item">
31+
<div className="placeholder-line long"></div>
32+
<div className="placeholder-line short"></div>
33+
</div>
34+
))}
35+
</div>
36+
</div>
37+
<div className="giveaways-prompt-actions">
38+
<button type="button" onClick={() => setShowPrompt(false)}>Close</button>
39+
</div>
40+
</div>
41+
</div>
42+
)}
43+
</>
44+
);
45+
}

‎app/components/HomeVideoScrubber.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { withBasePath } from "../lib/basePath";
66
import ScrollRevealText from "./ScrollRevealText";
77
import { isAndroid } from "../lib/isAndroid";
88
import HomeEventAppButton from "./HomeEventAppButton";
9+
import GiveawaysButton from "./GiveawaysButton";
910

1011
const storyBeats = [
1112
"Reforn the circle.",
@@ -280,7 +281,10 @@ export default function HomeVideoScrubber({ heroTitleClassName = "" }) {
280281
className="h-[2px] md:h-[3px] bg-green-500 mt-6 md:mt-10 shadow-[0_0_15px_rgba(34,197,94,0.8)] transition-all duration-1000 ease-out"
281282
style={{ width: heroReveal ? (isNarrowViewport ? '160px' : '320px') : '0px', opacity: heroReveal ? 1 : 0 }}
282283
/>
283-
<HomeEventAppButton />
284+
<div className="flex flex-col items-center gap-4 mt-8 md:mt-10">
285+
<HomeEventAppButton />
286+
<GiveawaysButton />
287+
</div>
284288
</div>
285289
</div>
286290
</section>

‎app/globals.css‎

Lines changed: 165 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -785,7 +785,6 @@ body.compact-site-footer .site-footer .pt-6 {
785785
}
786786

787787
.event-app-launcher {
788-
margin-top: 1.5rem;
789788
display: inline-flex;
790789
min-width: min(78vw, 18rem);
791790
align-items: center;
@@ -812,6 +811,8 @@ body.compact-site-footer .site-footer .pt-6 {
812811
font-size: clamp(0.84rem, 2.4vw, 1rem);
813812
font-weight: 900;
814813
letter-spacing: 0.08em;
814+
white-space: nowrap;
815+
flex-shrink: 0;
815816
}
816817

817818
.event-app-launcher small {
@@ -821,6 +822,169 @@ body.compact-site-footer .site-footer .pt-6 {
821822
font-weight: 800;
822823
letter-spacing: 0.1em;
823824
padding-left: 0.65rem;
825+
white-space: nowrap;
826+
flex-shrink: 0;
827+
}
828+
829+
/* Giveaways Launcher - Green Variant */
830+
.giveaways-launcher {
831+
display: inline-flex;
832+
min-width: min(78vw, 18rem);
833+
align-items: center;
834+
justify-content: center;
835+
gap: 0.65rem;
836+
border: 1px solid rgba(34, 197, 94, 0.58);
837+
border-radius: 999px;
838+
background: linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(12, 12, 12, 0.92));
839+
color: #fff;
840+
box-shadow: 0 16px 45px rgba(34, 197, 94, 0.28);
841+
font-family: "Avenir Next", "Segoe UI", sans-serif;
842+
padding: 0.78rem 1.15rem;
843+
text-transform: uppercase;
844+
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
845+
cursor: pointer;
846+
}
847+
848+
.giveaways-launcher:hover {
849+
border-color: rgba(255, 255, 255, 0.8);
850+
box-shadow: 0 20px 55px rgba(34, 197, 94, 0.36);
851+
transform: translateY(-2px);
852+
}
853+
854+
.giveaways-launcher span {
855+
font-size: clamp(0.84rem, 2.4vw, 1rem);
856+
font-weight: 900;
857+
letter-spacing: 0.08em;
858+
white-space: nowrap;
859+
flex-shrink: 0;
860+
}
861+
862+
.giveaways-launcher small {
863+
border-left: 1px solid rgba(255, 255, 255, 0.28);
864+
color: rgba(255, 255, 255, 0.68);
865+
font-size: 0.66rem;
866+
font-weight: 800;
867+
letter-spacing: 0.1em;
868+
padding-left: 0.65rem;
869+
white-space: nowrap;
870+
flex-shrink: 0;
871+
}
872+
873+
.giveaways-prompt {
874+
position: fixed;
875+
inset: 0;
876+
z-index: 2100;
877+
display: grid;
878+
place-items: center;
879+
padding: 1.5rem;
880+
background: rgba(0, 0, 0, 0.85);
881+
backdrop-filter: blur(10px);
882+
animation: fadeIn 300ms ease-out;
883+
}
884+
885+
.giveaways-prompt-panel {
886+
width: 100%;
887+
max-width: 400px;
888+
background: #0c0c0c;
889+
border: 1px solid rgba(34, 197, 94, 0.3);
890+
border-radius: 1.5rem;
891+
padding: 2rem;
892+
position: relative;
893+
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(34, 197, 94, 0.1);
894+
}
895+
896+
.giveaways-status-indicator {
897+
display: flex;
898+
align-items: center;
899+
gap: 0.5rem;
900+
margin-bottom: 1rem;
901+
}
902+
903+
.status-dot {
904+
width: 8px;
905+
height: 8px;
906+
background: #22c55e;
907+
border-radius: 50%;
908+
box-shadow: 0 0 8px #22c55e;
909+
animation: pulse 2s infinite;
910+
}
911+
912+
@keyframes pulse {
913+
0% { opacity: 0.4; }
914+
50% { opacity: 1; }
915+
100% { opacity: 0.4; }
916+
}
917+
918+
.giveaways-status-indicator span {
919+
font-size: 0.7rem;
920+
text-transform: uppercase;
921+
letter-spacing: 0.15em;
922+
color: rgba(34, 197, 94, 0.8);
923+
font-weight: 700;
924+
}
925+
926+
.giveaways-prompt-panel h2 {
927+
font-family: var(--font-copixel), sans-serif;
928+
font-size: 1.75rem;
929+
color: #fff;
930+
margin-bottom: 1.25rem;
931+
letter-spacing: 0.05em;
932+
}
933+
934+
.coming-soon-text {
935+
color: rgba(255, 255, 255, 0.7);
936+
font-size: 0.95rem;
937+
line-height: 1.6;
938+
margin-bottom: 2rem;
939+
}
940+
941+
.placeholder-grid {
942+
display: grid;
943+
grid-template-columns: 1fr 1fr;
944+
gap: 1rem;
945+
margin-bottom: 2rem;
946+
}
947+
948+
.placeholder-item {
949+
background: rgba(255, 255, 255, 0.03);
950+
border: 1px dashed rgba(34, 197, 94, 0.2);
951+
border-radius: 0.75rem;
952+
padding: 1rem;
953+
display: flex;
954+
flex-direction: column;
955+
gap: 0.5rem;
956+
}
957+
958+
.placeholder-line {
959+
height: 6px;
960+
background: rgba(255, 255, 255, 0.05);
961+
border-radius: 3px;
962+
}
963+
964+
.placeholder-line.long { width: 80%; }
965+
.placeholder-line.short { width: 40%; }
966+
967+
.giveaways-prompt-actions {
968+
display: flex;
969+
justify-content: flex-end;
970+
}
971+
972+
.giveaways-prompt-actions button {
973+
background: transparent;
974+
border: 1px solid rgba(255, 255, 255, 0.2);
975+
color: #fff;
976+
padding: 0.6rem 1.5rem;
977+
border-radius: 999px;
978+
font-size: 0.85rem;
979+
font-weight: 600;
980+
transition: all 180ms ease;
981+
cursor: pointer;
982+
}
983+
984+
.giveaways-prompt-actions button:hover {
985+
border-color: #22c55e;
986+
color: #22c55e;
987+
background: rgba(34, 197, 94, 0.05);
824988
}
825989

826990
.event-app-prompt {

0 commit comments

Comments
 (0)