cusec · carsonSgit · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026 · Feb 17, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "class-variance-authority": "^0.7.1",
     "cloudinary": "^2.8.0",
     "clsx": "^2.1.1",
+    "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.6",
     "lucide-react": "^0.539.0",

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -18,6 +18,7 @@
 
   --font-jost: var(--font-jost);
   --font-space-grotesk: var(--font-space-grotesk);
+  --font-bebas-neue: var(--font-bebas-neue);
 
   --text-body: rgba(250, 250, 250, 0.562);
   --detail-medium-contrast: rgba(89, 83, 172, 0.452);
@@ -283,6 +284,10 @@ html {
   animation: pulse-subtle 5s ease-in-out infinite;
 }
 
+.cta-border-spin {
+  background: conic-gradient(from 90deg at 50% 50%, #04000f 0%, #dadadaa9 35%, #905aee 40%, #04000f 100%);
+}
+
 .animate-sparkle-1 {
   animation: sparkle-1 8s ease-in-out infinite;
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import connectMongoDB from "@/lib/mongodb";
-import { Jost, Space_Grotesk } from "next/font/google";
+import { Jost, Space_Grotesk, Bebas_Neue } from "next/font/google";
 import { Analytics } from "@vercel/analytics/next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 
@@ -19,6 +19,13 @@ const spaceGrotesk = Space_Grotesk({
   display: "swap",
 });
 
+const bebasNeue = Bebas_Neue({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-bebas-neue",
+  display: "swap",
+});
+
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 config.autoAddCss = false;
@@ -108,7 +115,7 @@ export default function RootLayout({
     <html
       lang="en-CA"
       dir="ltr"
-      className={`${jost.variable} ${spaceGrotesk.variable}`}
+      className={`${jost.variable} ${spaceGrotesk.variable} ${bebasNeue.variable}`}
       data-scroll-behavior="smooth"
     >
       <head>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,7 +4,6 @@ import {
   Hero,
   OceanSurface,
   Particles,
-  LoadingScreen,
   SmoothFollower,
   Navbar,
   About,
@@ -19,7 +18,6 @@ const Home = () => {
   return (
     <div className="bg-linear-[180deg] from-sea from-0% via-sea via-20% to-dark-mode to-100% bg-cover bg-center h-full">
       <div className="overflow-x-hidden w-full h-full bg-linear-[45deg] from-accent/25 from-0% via-accent/5 via-10% to-dark-mode/0 to-100%">
-        <LoadingScreen />
         <div className="relative">
           <Particles desktopParticleCount={400} sizeMultiplier={1.5} />
           <Navbar />

diff --git a/src/components/general/LoadingScreen.tsx b/src/components/general/LoadingScreen.tsx
@@ -54,8 +54,7 @@ export default function LoadingScreen() {
 
     // checks if we need to show splashpage (only shows on intial load)
     if (typeof window !== "undefined") {
-      const splashShown = sessionStorage.getItem("splashShown");
-      if (!splashShown) {
+      if (false) { // if (!sessionStorage.getItem("splashShown"))
         setShowSplash(true);
         sessionStorage.setItem("splashShown", "true");
         lockScroll();

diff --git a/src/components/general/Navbar.tsx b/src/components/general/Navbar.tsx
@@ -14,12 +14,12 @@ const Navbar: React.FC = () => {
 
   // Filter nav items based on enabled features
   const navItems: Record<string, string> = {
-    Home: "/#Hero",
+    // Home: "/#Hero",
     About: "/#About",
-    Gallery: "/#Gallery",
+    // Gallery: "/#Gallery",
     Sponsors: "/#Sponsors",
-    Pricing: "/#Pricing",
-    Faq: "/#Faq",
+    // Pricing: "/#Pricing",
+    // Faq: "/#Faq",
     Speakers: "/speakers",
     "The Team": "/team",
   };

diff --git a/src/components/home/Hero.tsx b/src/components/home/Hero.tsx
@@ -2,11 +2,6 @@
 
 import React from "react";
 import Image from "next/image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faMicrophone } from "@fortawesome/free-solid-svg-icons";
-import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
-import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
-import Link from "next/link";
 
 const Hero: React.FC = () => {
   return (
@@ -60,7 +55,7 @@ const Hero: React.FC = () => {
         </h3>
       </div>
       <div className="px-4 md:justify-center text-xl md:text-2xl flex flex-col lg:flex-row gap-6 lg:gap-12 items-center">
-        <div className="text-sm md:text-2xl flex flex-wrap justify-center gap-2 xs:gap-6 bg-transparent">
+        {/* <div className="text-sm md:text-2xl flex flex-wrap justify-center gap-2 xs:gap-6 bg-transparent">
           <a
             className="font-space-grotesk! w-fit lg:p-2 border-b-2 border-light-mode/40 email-hover"
             href="mailto:talks@cusec.net"
@@ -100,7 +95,23 @@ const Hero: React.FC = () => {
             size="xs"
             className="ml-2"
           />
-        </Link>
+        </Link> */}
+        <a
+          className="relative inline-flex w-full overflow-hidden rounded-2xl p-[1.5px] focus-visible:outline-none"
+          href="https://forms.gle/SLSRzfstSLETexj4A"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <span
+            className="absolute inset-[-1000%] animate-[spin_5s_linear_infinite] cta-border-spin"
+            aria-hidden="true"
+          />
+          <span className="relative inline-flex w-full items-center justify-center rounded-[14px] bg-[#4433a1ee] px-6 py-3 overflow-hidden">
+            <span className="font-bebas-neue! relative z-10 text-2xl tracking-[0.3em] text-white">
+              Join the 2027 CUSEC team
+            </span>
+          </span>
+        </a>
       </div>
     </div>
   );

diff --git a/src/components/home/gallery/Gallery.tsx b/src/components/home/gallery/Gallery.tsx
@@ -1,7 +1,8 @@
 "use server";
 
-import EmblaCarousel from "./embla/EmblaCarousel";
+import React from "react";
 import { EmblaOptionsType } from "embla-carousel";
+import EmblaCarousel from "./embla/EmblaCarousel";
 import "../../../app/embla.css";
 
 const slideImages: string[] = [

diff --git a/src/components/home/gallery/embla/EmblaCarousel.tsx b/src/components/home/gallery/embla/EmblaCarousel.tsx
@@ -101,7 +101,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
       .on("reInit", tweenParallax)
       .on("scroll", tweenParallax)
       .on("slideFocus", tweenParallax);
-  }, [emblaApi, tweenParallax]);
+  }, [emblaApi, tweenParallax, setTweenFactor, setTweenNodes]);
 
   return (
     <div className="embla">
@@ -111,6 +111,7 @@ const EmblaCarousel: React.FC<PropType> = (props) => {
             <div className="embla__slide" key={index}>
               <div className="embla__parallax">
                 <div className="embla__parallax__layer">
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
                   <img
                     className="embla__slide__img embla__parallax__img"
                     src={slideImages[index]}