Beta

app/components/ScrollRevealWrapper.tsx

@@ -14,31 +14,36 @@ export default function ScrollRevealWrapper({ children, instant = false }: Scrol
   useEffect(() => {
     if (instant) return;
 
+    const current = domRef.current;
+    if (!current) return;
+
     const observer = new IntersectionObserver(
       ([entry]) => {
-        setIsVisible(entry.isIntersecting);
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(entry.target);
+        }
       },
       {
-        threshold: 0.05,
-        rootMargin: "-6% 0px -6% 0px",
+        threshold: 0.02,
+        rootMargin: "0px 0px -50px 0px",
       }
     );
 
-    const current = domRef.current;
-    if (current) observer.observe(current);
+    observer.observe(current);
 
     return () => {
-      if (current) observer.unobserve(current);
+      observer.disconnect();
     };
   }, [instant]);
 
   return (
     <div
       ref={domRef}
-      className={`transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] transform will-change-[transform,opacity,filter] ${
+      className={`transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] ${
         isVisible
-          ? "opacity-100 translate-y-0 scale-100 filter blur-0"
-          : "opacity-0 translate-y-16 scale-[0.97] filter blur-[4px]"
+          ? "opacity-100 translate-y-0 scale-100"
+          : "opacity-0 translate-y-8 scale-[0.98]"
       }`}
     >
       {children}

app/globals.css

@@ -1255,6 +1255,7 @@ main>div {
   animation-delay: 0.5s;
   opacity: 0;
 }
+
 /* ─── Signed-in avatar in the navbar ────────────────────────────────
  * Replaces the Login pill once a session is restored, matching what the
  * previous navbar did. Sized to the pill's height so swapping between the
@@ -1316,9 +1317,15 @@ main>div {
  * Applies only below the tablet breakpoint, so the compact desktop styling of
  * the admin forms is untouched. */
 @media (max-width: 768px) {
+
   input,
   select,
   textarea {
     font-size: 16px;
   }
 }
+
+input[type="checkbox"],
+input[type="radio"] {
+  accent-color: #ff5500;
+}

next.config.ts

@@ -54,6 +54,19 @@ const nextConfig: NextConfig = {
     ];
   },
 
+  async redirects() {
+    return [
+      // Permanent redirect for printed QR code that points to the old event.
+      // The QR is already in circulation so we redirect server-side (308) so
+      // every scanner, browser and search engine follows it automatically.
+      {
+        source: "/Events/6a74c22b4a467d7a0aac0cc6",
+        destination: "/Events/6a7797c26a9a4d018da54ba1",
+        permanent: true,
+      },
+    ];
+  },
+
   // Note: legacy capitalised URLs (/Events, /Team, /SignUp …) are *not*
   // redirected here. Next matches a redirect `source` case-insensitively, so a
   // rule from "/Events" to "/events" also matches "/events" and loops

src/components/Core/Input.jsx

@@ -143,7 +143,7 @@ const Input = (props) => {
     containerStyle,
     style,
     placeholder,
-    value,
+    value = "",
     onChange,
     label,
     options,
@@ -169,6 +169,8 @@ const Input = (props) => {
     return currentDate.getTime() < selectedDate.getTime();
   };
 
+  const safeValue = value ?? "";
+
   const getInputTypes = () => {
     switch (type) {
       case "text":
@@ -179,7 +181,7 @@ const Input = (props) => {
             type={type}
             style={style || {}}
             placeholder={placeholder}
-            value={value}
+            value={safeValue}
             onChange={onChange}
             {...rest}
           />
@@ -193,7 +195,7 @@ const Input = (props) => {
             type={type}
             style={style || {}}
             placeholder={placeholder}
-            value={value}
+            value={safeValue}
             onChange={onChange}
             {...rest}
           />
@@ -207,7 +209,7 @@ const Input = (props) => {
             type={type}
             style={style || {}}
             placeholder={placeholder}
-            value={value}
+            value={safeValue}
             onChange={onChange}
             {...rest}
           />
@@ -281,63 +283,41 @@ const Input = (props) => {
         );
       case "radio":
         return (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-            }}
-          >
+          <div className={styles.checkboxWrapper}>
             <input
               name={name}
-              className={styles.input}
-              type={type}
-              style={{ width: "auto" }}
+              className={styles.checkboxInput}
+              type="radio"
               placeholder={placeholder}
               value={value}
               onChange={onChange}
+              id={rest.id || `${name}-${value}`}
               {...rest}
             />
             <label
-              style={{
-                color: "#fff",
-                fontSize: ".8em",
-                marginLeft: "2px",
-                marginTop: "-5px",
-              }}
-              htmlFor={name}
+              className={styles.checkboxLabel}
+              htmlFor={rest.id || `${name}-${value}`}
             >
               {label}
             </label>
           </div>
         );
       case "checkbox":
         return (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              alignItems: "center",
-            }}
-          >
+          <div className={styles.checkboxWrapper}>
             <input
               name={name}
-              className={styles.input}
-              type={type}
-              style={{ width: "auto" }}
+              className={styles.checkboxInput}
+              type="checkbox"
               placeholder={placeholder}
               value={value}
               onChange={onChange}
+              id={rest.id || `${name}-${value}`}
               {...rest}
             />
             <label
-              style={{
-                color: "#fff",
-                fontSize: ".8em",
-                marginLeft: "2px",
-                marginTop: "-5px",
-              }}
-              htmlFor={name}
+              className={styles.checkboxLabel}
+              htmlFor={rest.id || `${name}-${value}`}
             >
               {label}
             </label>
@@ -360,7 +340,7 @@ const Input = (props) => {
                 type={showPassword ? "text" : "password"}
                 style={style || {}}
                 placeholder={placeholder}
-                value={value}
+                value={safeValue}
                 onChange={onChange}
                 {...rest}
               />
@@ -515,7 +495,7 @@ const Input = (props) => {
             type={type}
             style={style || {}}
             placeholder={placeholder}
-            value={value}
+            value={safeValue}
             onChange={onChange}
             {...rest}
           />

src/components/Core/styles/Core.module.scss

@@ -54,10 +54,89 @@
   font-weight: normal;
 }
 
-.containerInput {
+.checkboxWrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 12px 0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.checkboxInput {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 20px !important;
+  height: 20px !important;
+  min-width: 20px !important;
+  min-height: 20px !important;
+  max-width: 20px !important;
+  max-height: 20px !important;
+  border-radius: 6px !important;
+  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
+  background-color: rgba(255, 255, 255, 0.05) !important;
+  margin: 2px 0 0 0 !important;
+  padding: 0 !important;
+  cursor: pointer;
   position: relative;
-  width: auto;
+  outline: none;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: #ff8a00 !important;
+  }
+
+  &:checked {
+    background-color: #ff5500 !important;
+    border-color: #ff5500 !important;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 6px;
+      top: 2px;
+      width: 5px;
+      height: 10px;
+      border: solid #ffffff;
+      border-width: 0 2.5px 2.5px 0;
+      transform: rotate(45deg);
+    }
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 138, 0, 0.4);
+  }
+}
+
+:global(input[type="radio"].checkboxInput),
+.checkboxInput[type="radio"] {
+  border-radius: 50% !important;
+
+  &:checked::after {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 8px;
+    height: 8px;
+    border: none;
+    border-radius: 50%;
+    background-color: #ffffff;
+    transform: none;
+  }
 }
+
+.checkboxLabel {
+  color: #ffffff;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  cursor: pointer;
+  margin: 0;
+  user-select: none;
+}
+
 .input {
   display: flex;
   outline: none;

src/features/Modals/Profile/Admin/PreviewForm.jsx

@@ -654,7 +654,7 @@ const PreviewForm = ({
             <strong style={{ color: "#ff8a00", fontSize: 16 }}>&#8377;{eventAmount}</strong>
           </p>
 
-          <div style={{ display: "flex", gap: "12px", flexWrap: "wrap", justifyContent: "center", alignItems: "center" }}>
+          <div className={styles.paymentActionButtons}>
             {safeLink ? (
               <a
                 href={safeLink}
@@ -764,7 +764,7 @@ const PreviewForm = ({
           )}
 
           {/* ✅ Download & Copy Link Buttons */}
-          <div style={{ display: "flex", gap: "12px", marginTop: 14, flexWrap: "wrap", justifyContent: "center", alignItems: "center" }}>
+          <div className={styles.paymentActionButtons}>
             <button
               type="button"
               onClick={handleDownloadQR}