diff --git a/src/app/(signage)/signage/cif/page.tsx b/src/app/(signage)/signage/cif/page.tsx index 4fdd469..a89f619 100644 --- a/src/app/(signage)/signage/cif/page.tsx +++ b/src/app/(signage)/signage/cif/page.tsx @@ -4,6 +4,7 @@ import { useEffect, useState } from "react"; import { motion, useAnimate } from "framer-motion"; import Countdown from "@/components/Countdown"; import LogoReveal from "@/components/LogoReveal"; +import QRCode from "@/components/QRCode"; async function seqFromRight(scope: any, animate: any, delay: number = 0) { await animate(scope.current, { @@ -46,16 +47,20 @@ export default function SignagePage() { setLoaded(true); seqFromRight(scopeHeader, animateScopeHeader, 300); seqFadeIn(scopeHeader, animateScopeHeader, 300); - seqFadeIn(scopeTimer, animateScopeTimer, 500); - seqFadeIn(scopeBody, animateScopeBody, 750); - seqFadeIn(scopeDetails, animateScopeDetails, 1200); + seqFadeIn(scopeBody, animateScopeBody, 500); + seqFadeIn(scopeTimer, animateScopeTimer, 1000); + seqFadeIn(scopeDetails, animateScopeDetails, 1000); }, 4000); + // Automatically refresh the page + setTimeout(() => { + location.reload(); + }, 1000 * 60); }, []); return (
@@ -99,17 +104,20 @@ export default function SignagePage() {
-
+

- A beginner-friendly
hacking competition. + A beginner-friendly
hacking competition.

Capture the flags. Teams of two.

+
+ +
+ {/* */} + {/* */} + +
+ {/* Navbar */} + {children} +
+ {/* Footer */} + + + ); +}; diff --git a/src/components/Countdown/index.tsx b/src/components/Countdown/index.tsx index 015e9b7..be45326 100644 --- a/src/components/Countdown/index.tsx +++ b/src/components/Countdown/index.tsx @@ -82,14 +82,14 @@ export default function Countdown({ time_start, time_close }: Props) { {timer.days > 0 ? ( <>
-
+
{formatNumber(timer.days)}

{timer.days === 1 ? "Day" : "Days"}

- + : @@ -97,31 +97,31 @@ export default function Countdown({ time_start, time_close }: Props) { {timer.days > 0 || timer.hours > 0 ? ( <>
-
+
{formatNumber(timer.hours)}

{timer.hours === 1 ? "Hour" : "Hours"}

- + : ) : null}
-
+
{formatNumber(timer.minutes)}

{timer.minutes === 1 ? "Min" : "Mins"}

- + :
-
+
{formatNumber(timer.seconds)}

diff --git a/src/components/LogoReveal/index.tsx b/src/components/LogoReveal/index.tsx index 393b19b..53775ec 100644 --- a/src/components/LogoReveal/index.tsx +++ b/src/components/LogoReveal/index.tsx @@ -14,15 +14,22 @@ export default function LogoReveal() { }; const char_variant = { hidden: { - fill: "rgb(0, 0, 0)" + fill: "rgba(0, 0, 0, 0.0)" }, visible: { - fill: "rgb(255, 255, 255)", + fill: "url(#YellowGradient)", transition: { duration: 0.2 } } }; + const transition = { + duration: 5, + repeat: Infinity, + repeatType: "loop" + }; + const dark_yellow = "rgba(255, 178, 0, 1.0)"; + const light_yellow = "rgba(255, 255, 0, 1.0)"; return ( + + + + + + + {string.split("").map((char, i) => ( diff --git a/src/components/QRCode.tsx b/src/components/QRCode.tsx new file mode 100644 index 0000000..6c5975a --- /dev/null +++ b/src/components/QRCode.tsx @@ -0,0 +1,131 @@ +export default function QRCode() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 180bc5a..a9cdee9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,6 +13,10 @@ const config: Config = { 'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', }, + colors: { + "yellow-dark": "rgba(255, 178, 0, 1.0)", + "yellow-light": "rgba(255, 255, 0, 1.0)", + }, container: { center: true, },