Skip to content

Commit 5a037c5

Browse files
WhiteHoodHackerWhiteHoodHacker
committed
Add /cif, /grainger, /siebel routes
1 parent 6692a3a commit 5a037c5

File tree

3 files changed

+290
-0
lines changed

3 files changed

+290
-0
lines changed

‎src/app/(signage)/signage/cif/page.tsx renamed to ‎src/app/(signage)/cif/page.tsx

File renamed without changes.

‎src/app/(signage)/grainger/page.tsx

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
"use client";
2+
import { useEffect, useState } from "react";
3+
import { motion, useAnimate } from "framer-motion";
4+
import Countdown from "@/components/Countdown";
5+
import LogoReveal from "@/components/LogoReveal";
6+
7+
async function seqFromRight(scope: any, animate: any, delay: number = 0) {
8+
await animate(scope.current, {
9+
translateX: "2rem",
10+
}, {
11+
duration: 0.0
12+
});
13+
await new Promise(resolve => setTimeout(resolve, delay));
14+
await animate(scope.current, {
15+
translateX: "0%",
16+
}, {
17+
duration: 0.2
18+
});
19+
}
20+
21+
async function seqFadeIn(scope: any, animate: any, delay: number = 0) {
22+
await animate(scope.current, {
23+
opacity: 0,
24+
}, {
25+
duration: 0.0
26+
});
27+
await new Promise(resolve => setTimeout(resolve, delay));
28+
await animate(scope.current, {
29+
opacity: 1,
30+
}, {
31+
duration: 0.2
32+
});
33+
}
34+
35+
export default function SignagePage() {
36+
const time_start = "2023-09-23T12:00:00-05:00"
37+
const time_close = "2023-09-23T18:00:00-05:00"
38+
const [loaded, setLoaded] = useState(false);
39+
const [scopeHeader, animateScopeHeader] = useAnimate();
40+
const [scopeTimer, animateScopeTimer] = useAnimate();
41+
const [scopeBody, animateScopeBody] = useAnimate();
42+
const [scopeDetails, animateScopeDetails] = useAnimate();
43+
useEffect(() => {
44+
setTimeout(() => {
45+
setLoaded(true);
46+
seqFromRight(scopeHeader, animateScopeHeader, 300);
47+
seqFadeIn(scopeHeader, animateScopeHeader, 300);
48+
seqFadeIn(scopeBody, animateScopeBody, 500);
49+
seqFadeIn(scopeTimer, animateScopeTimer, 1000);
50+
seqFadeIn(scopeDetails, animateScopeDetails, 1000);
51+
}, 4000);
52+
// Automatically refresh the page
53+
setTimeout(() => {
54+
location.reload();
55+
}, 1000 * 120);
56+
}, []);
57+
58+
return (
59+
<motion.div
60+
layout="position"
61+
className="m-auto w-[92vw] h-[88vh] flex flex-col grow-1 shrink-0 relative"
62+
>
63+
<div className="flex flex-row justify-between">
64+
<div className="flex flex-col">
65+
<motion.div
66+
layout="position"
67+
className="opacity-0 h-fit w-fit"
68+
ref={scopeHeader}
69+
>
70+
<p className="font-medium text-[4rem] leading-none">
71+
SIGPwny Presents
72+
</p>
73+
</motion.div>
74+
<motion.div
75+
layout="position"
76+
className={`flex h-fit ${loaded ? "" : "absolute inset-0 m-auto"}`}
77+
variants={{
78+
initial: {
79+
width: "60vw",
80+
},
81+
animate: {
82+
width: "50vw",
83+
}
84+
}}
85+
initial="initial"
86+
animate={(loaded ? "animate" : "initial")}
87+
transition={{
88+
duration: 0.3,
89+
ease: "easeInOut",
90+
}}
91+
>
92+
<LogoReveal />
93+
</motion.div>
94+
</div>
95+
<motion.div
96+
layout="position"
97+
className="opacity-0 text-5xl font-medium"
98+
ref={scopeTimer}
99+
>
100+
<Countdown time_start={time_start} time_close={time_close} />
101+
</motion.div>
102+
</div>
103+
<motion.div
104+
layout="position"
105+
className="opacity-0 flex flex-row flex-grow-1 flex-shrink-0 mt-[6rem] grainger:mt-[2rem] items-center"
106+
ref={scopeBody}
107+
>
108+
<div className="flex flex-col">
109+
<p className="text-[8rem] grainger:text-[7rem] mb-4 leading-none font-medium">
110+
A beginner-friendly<br /> <span className="text-yellow-dark">hacking</span> competition.
111+
</p>
112+
<p className="text-[4rem] leading-none">
113+
Register at <span className="text-yellow-dark font-medium">sigpwny.com/fallctf</span>.
114+
</p>
115+
</div>
116+
<div className="flex flex-col ml-auto">
117+
<img
118+
src="/assets/qr-fallctf.png"
119+
className="pointer-events-none h-[400px] grainger:h-[350px] w-auto"
120+
alt="https://sigpwny.com/fallctf"
121+
/>
122+
</div>
123+
</motion.div>
124+
<motion.div
125+
layout="position"
126+
className="opacity-0 mt-auto flex flex-col"
127+
ref={scopeDetails}
128+
>
129+
<span className="grainger:hidden">
130+
<p className="text-[4rem] font-medium">
131+
September 23rd, 12–6 PM
132+
</p>
133+
<p className="text-[4rem] leading-none font-medium">
134+
CIF 3039
135+
</p>
136+
</span>
137+
<span className="hidden grainger:flex">
138+
<p className="text-[4rem] leading-none font-medium">
139+
September 23rd, 12–6 PM @ CIF 3039
140+
</p>
141+
</span>
142+
</motion.div>
143+
</motion.div>
144+
);
145+
};

‎src/app/(signage)/siebel/page.tsx

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
"use client";
2+
import { useEffect, useState } from "react";
3+
import { motion, useAnimate } from "framer-motion";
4+
import Countdown from "@/components/Countdown";
5+
import LogoReveal from "@/components/LogoReveal";
6+
7+
async function seqFromRight(scope: any, animate: any, delay: number = 0) {
8+
await animate(scope.current, {
9+
translateX: "2rem",
10+
}, {
11+
duration: 0.0
12+
});
13+
await new Promise(resolve => setTimeout(resolve, delay));
14+
await animate(scope.current, {
15+
translateX: "0%",
16+
}, {
17+
duration: 0.2
18+
});
19+
}
20+
21+
async function seqFadeIn(scope: any, animate: any, delay: number = 0) {
22+
await animate(scope.current, {
23+
opacity: 0,
24+
}, {
25+
duration: 0.0
26+
});
27+
await new Promise(resolve => setTimeout(resolve, delay));
28+
await animate(scope.current, {
29+
opacity: 1,
30+
}, {
31+
duration: 0.2
32+
});
33+
}
34+
35+
export default function SignagePage() {
36+
const time_start = "2023-09-23T12:00:00-05:00"
37+
const time_close = "2023-09-23T18:00:00-05:00"
38+
const [loaded, setLoaded] = useState(false);
39+
const [scopeHeader, animateScopeHeader] = useAnimate();
40+
const [scopeTimer, animateScopeTimer] = useAnimate();
41+
const [scopeBody, animateScopeBody] = useAnimate();
42+
const [scopeDetails, animateScopeDetails] = useAnimate();
43+
useEffect(() => {
44+
setTimeout(() => {
45+
setLoaded(true);
46+
seqFromRight(scopeHeader, animateScopeHeader, 300);
47+
seqFadeIn(scopeHeader, animateScopeHeader, 300);
48+
seqFadeIn(scopeBody, animateScopeBody, 500);
49+
seqFadeIn(scopeTimer, animateScopeTimer, 1000);
50+
seqFadeIn(scopeDetails, animateScopeDetails, 1000);
51+
}, 4000);
52+
// Automatically refresh the page
53+
setTimeout(() => {
54+
location.reload();
55+
}, 1000 * 120);
56+
}, []);
57+
58+
return (
59+
<motion.div
60+
layout="position"
61+
className="m-auto w-[92vw] h-[88vh] flex flex-col grow-1 shrink-0 relative"
62+
>
63+
<div className="flex flex-row justify-between">
64+
<div className="flex flex-col">
65+
<motion.div
66+
layout="position"
67+
className="opacity-0 h-fit w-fit"
68+
ref={scopeHeader}
69+
>
70+
<p className="font-medium text-[4rem] leading-none">
71+
SIGPwny Presents
72+
</p>
73+
</motion.div>
74+
<motion.div
75+
layout="position"
76+
className={`flex h-fit ${loaded ? "" : "absolute inset-0 m-auto"}`}
77+
variants={{
78+
initial: {
79+
width: "60vw",
80+
},
81+
animate: {
82+
width: "50vw",
83+
}
84+
}}
85+
initial="initial"
86+
animate={(loaded ? "animate" : "initial")}
87+
transition={{
88+
duration: 0.3,
89+
ease: "easeInOut",
90+
}}
91+
>
92+
<LogoReveal />
93+
</motion.div>
94+
</div>
95+
<motion.div
96+
layout="position"
97+
className="opacity-0 text-5xl font-medium"
98+
ref={scopeTimer}
99+
>
100+
<Countdown time_start={time_start} time_close={time_close} />
101+
</motion.div>
102+
</div>
103+
<motion.div
104+
layout="position"
105+
className="opacity-0 flex flex-row flex-grow-1 flex-shrink-0 mt-[6rem] grainger:mt-[2rem] items-center"
106+
ref={scopeBody}
107+
>
108+
<div className="flex flex-col">
109+
<p className="text-[8rem] grainger:text-[7rem] mb-4 leading-none font-medium">
110+
A beginner-friendly<br /> <span className="text-yellow-dark">hacking</span> competition.
111+
</p>
112+
<p className="text-[4rem] leading-none">
113+
Register at <span className="text-yellow-dark font-medium">sigpwny.com/fallctf</span>.
114+
</p>
115+
</div>
116+
<div className="flex flex-col ml-auto">
117+
<img
118+
src="/assets/qr-fallctf.png"
119+
className="pointer-events-none h-[400px] grainger:h-[350px] w-auto"
120+
alt="https://sigpwny.com/fallctf"
121+
/>
122+
</div>
123+
</motion.div>
124+
<motion.div
125+
layout="position"
126+
className="opacity-0 mt-auto flex flex-col"
127+
ref={scopeDetails}
128+
>
129+
<span className="grainger:hidden">
130+
<p className="text-[4rem] font-medium">
131+
September 23rd, 12–6 PM
132+
</p>
133+
<p className="text-[4rem] leading-none font-medium">
134+
CIF 3039
135+
</p>
136+
</span>
137+
<span className="hidden grainger:flex">
138+
<p className="text-[4rem] leading-none font-medium">
139+
September 23rd, 12–6 PM @ CIF 3039
140+
</p>
141+
</span>
142+
</motion.div>
143+
</motion.div>
144+
);
145+
};

0 commit comments

Comments
 (0)