Made more interactive

app/globals.css

@@ -68,3 +68,109 @@
 		line-height: 2.5rem;
 	}
 }
+
+.bg {
+  background: url("https://i.ibb.co/87GbbFP/2799006.jpg") no-repeat;
+  background-size: cover;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -3;
+}
+
+.bg:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: #000;
+  position: fixed;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  opacity: 0.3;
+}
+
+@keyframes sf-fly-by-1 {
+  from {
+    transform: translateZ(-600px);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateZ(0);
+    opacity: 0.5;
+  }
+}
+@keyframes sf-fly-by-2 {
+  from {
+    transform: translateZ(-1200px);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateZ(-600px);
+    opacity: 0.5;
+  }
+}
+@keyframes sf-fly-by-3 {
+  from {
+    transform: translateZ(-1800px);
+    opacity: 0.5;
+  }
+  to {
+    transform: translateZ(-1200px);
+    opacity: 0.5;
+  }
+}
+
+.star-field {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  perspective: 600px;
+  -webkit-perspective: 600px;
+  z-index: -2;
+}
+
+.star-field .layer {
+  box-shadow: -411px -476px #cccccc, 777px -407px #d4d4d4, -387px -477px #fcfcfc, -91px -235px #d4d4d4,
+    491px -460px #f7f7f7, 892px -128px #f7f7f7, 758px -277px #ededed, 596px 378px #cccccc, 647px 423px whitesmoke,
+    183px 389px #c7c7c7, 524px -237px #f0f0f0, 679px -535px #e3e3e3, 158px 399px #ededed, 157px 249px #ededed,
+    81px -450px #ebebeb, 719px -360px #c2c2c2, -499px 473px #e8e8e8, -158px -349px #d4d4d4, 870px -134px #cfcfcf,
+    446px 404px #c2c2c2, 440px 490px #d4d4d4, 414px 507px #e6e6e6, -12px 246px #fcfcfc, -384px 369px #e3e3e3,
+    641px -413px #fcfcfc, 822px 516px #dbdbdb, 449px 132px #c2c2c2, 727px 146px #f7f7f7, -315px -488px #e6e6e6,
+    952px -70px #e3e3e3, -869px -29px #dbdbdb, 502px 80px #dedede, 764px 342px #e0e0e0, -150px -380px #dbdbdb,
+    654px -426px #e3e3e3, -325px -263px #c2c2c2, 755px -447px #c7c7c7, 729px -177px #c2c2c2, -682px -391px #e6e6e6,
+    554px -176px #ededed, -85px -428px #d9d9d9, 714px 55px #e8e8e8, 359px -285px #cfcfcf, -362px -508px #dedede,
+    468px -265px #fcfcfc, 74px -500px #c7c7c7, -514px 383px #dbdbdb, 730px -92px #cfcfcf, -112px 287px #c9c9c9,
+    -853px 79px #d6d6d6, 828px 475px #d6d6d6, -681px 13px #fafafa, -176px 209px #f0f0f0, 758px 457px #fafafa,
+    -383px -454px #ededed, 813px 179px #d1d1d1, 608px 98px whitesmoke, -860px -65px #c4c4c4, -572px 272px #f7f7f7,
+    459px 533px #fcfcfc, 624px -481px #e6e6e6, 790px 477px #dedede, 731px -403px #ededed, 70px -534px #cccccc,
+    -23px 510px #cfcfcf, -652px -237px whitesmoke, -690px 367px #d1d1d1, 810px 536px #d1d1d1, 774px 293px #c9c9c9,
+    -362px 97px #c2c2c2, 563px 47px #dedede, 313px 475px #e0e0e0, 839px -491px #e3e3e3, -217px 377px #d4d4d4,
+    -581px 239px #c2c2c2, -857px 72px #cccccc, -23px 340px #dedede, -837px 246px white, 170px -502px #cfcfcf,
+    822px -443px #e0e0e0, 795px 497px #e0e0e0, -814px -337px #cfcfcf, 206px -339px #f2f2f2, -779px 108px #e6e6e6,
+    808px 2px #d4d4d4, 665px 41px #d4d4d4, -564px 64px #cccccc, -380px 74px #cfcfcf, -369px -60px #f7f7f7,
+    47px -495px #e3e3e3, -383px 368px #f7f7f7, 419px 288px #d1d1d1, -598px -50px #c2c2c2, -833px 187px #c4c4c4,
+    378px 325px whitesmoke, -703px 375px #d6d6d6, 392px 520px #d9d9d9, -492px -60px #c4c4c4, 759px 288px #ebebeb,
+    98px -412px #c4c4c4, -911px -277px #c9c9c9;
+  transform-style: preserve-3d;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  height: 4px;
+  width: 4px;
+  border-radius: 2px;
+}
+
+.star-field .layer:nth-child(1) {
+  animation: sf-fly-by-1 5s linear infinite;
+}
+.star-field .layer:nth-child(2) {
+  animation: sf-fly-by-2 5s linear infinite;
+}
+.star-field .layer:nth-child(3) {
+  animation: sf-fly-by-3 5s linear infinite;
+}

components/interactive-map/interactive-map.tsx

@@ -5,22 +5,22 @@ import NextLink from "next/link";
 const links: Link[] = [
 	{ href: "/event", children: "Event Information" },
 	{ href: "/event/schedule", children: "Schedule" },
-	{ href: "/announcements", children: "Announcements" },
 	{ href: "/event/prizes", children: "Prizes" },
-	{ href: "/resources", children: "Resources" },
 	{ href: "/last-year", children: "HackRPI X" },
 	{ href: "/sponsor-us", children: "Sponsor Us" },
+	{ href: "https://discord.com/invite/8vAQpFWCYH", children: "Discord" },
 ];
 
 export default function InteractiveNavigationMap() {
 	return (
-		<div className="relative w-full aspect-square flex items-center justify-center h-fit ">
+		<div className="relative w-full aspect-square flex items-center justify-center h-fit">
 			<div className="absolute z-10 flex flex-col text-[15px] lg:text-[20px] xl:text-[24px] 2xl:text-[25px] top-8 lg:top-10 2xl:top-12 left-[17.6%] lg:left-[16.1%] xl:left-[15.7%] 2xl:left-[14.5%]">
 				{links.map((link) => (
 					<NextLink
 						key={link.href}
 						href={link.href}
-						className= "font-bold font-retro flex items-center group mb-1 lg:mb-2 xl:mb-4 2xl:mb-5"
+						className="font-bold font-retro flex items-center group mb-1 lg:mb-2 xl:mb-4 2xl:mb-5 
+              transition-all duration-300 ease-in-out hover:scale-110 hover:translate-x-1"
 					>
 						{/* Add icons for specific links */}
 						{link.children === "Schedule" && (
@@ -29,7 +29,7 @@ export default function InteractiveNavigationMap() {
 								alt="Calendar"
 								width={60}
 								height={60}
-								className="mr-2"
+								className="mr-2 transition-transform duration-300 ease-in-out group-hover:scale-125"
 							/>
 						)}
 						{link.children === "Event Information" && (
@@ -38,40 +38,53 @@ export default function InteractiveNavigationMap() {
 								alt="Magnifying Glass"
 								width={60}
 								height={60}
-								className="mr-2"
+								className="mr-2 transition-transform duration-300 ease-in-out group-hover:scale-125"
 							/>
 						)}
-						{link.children === "Announcements" && (
+						{link.children === "Prizes" && (
 							<Image
-								src="/megaphone_pixel.png"
-								alt="Megaphone"
+								src="/pixel_trophy.png"
+								alt="Trophy"
 								width={60}
 								height={60}
-								className="mr-2"
+								className="mr-2 transition-transform duration-300 ease-in-out group-hover:scale-125"
 							/>
 						)}
-						{link.children === "Prizes" && (
+						{link.children === "HackRPI X" && (
 							<Image
-								src="/pixel_trophy.png"
-								alt="Trophy"
+								src="/resources_pixel.png"
+								alt="HackRPI X"
 								width={60}
 								height={60}
-								className="mr-2"
+								className="mr-2 transition-transform duration-300 ease-in-out group-hover:scale-125"
 							/>
 						)}
-						{link.children === "Resources" && (
+						{link.children === "Sponsor Us" && (
 							<Image
-								src="/resources_pixel.png"
-								alt="Resources"
+								src="/money_pixel.png"
+								alt="Sponsor Us"
 								width={60}
 								height={60}
-								className="mr-2"
+								className="mr-2 transition-transform duration-300 ease-in-out group-hover:scale-125"
 							/>
 						)}
-						<span>{link.children}</span>
+						{link.children === "Discord" && (
+							<Image
+								src="/discord_bot_pixel (2).png"
+								alt="Discord"
+								width={60}
+								height={60}
+								className="mr-2 transition-transform duration-300 ease-in-out group-hover:scale-125"
+							/>
+						)}
+
+						{/* Text moves farther right */}
+						<span className="transition-transform duration-300 ease-in-out group-hover:translate-x-4 group-hover:scale-110">
+							{link.children}
+						</span>
 					</NextLink>
 				))}
 			</div>
 		</div>
 	);
-}
+}

components/title-components/desktop-title.tsx

@@ -1,20 +1,27 @@
 "use client";
 
-import Timer from "./timer";
 import TitleText from "./title-text";
 import Image from "next/image";
+import RegistrationButton from "@/components/themed-components/registration-link";
 
 export default function DesktopTitleComponent() {
   return (
-    <div className="relative flex w-full h-screen">
-      {/* Full background container with GIF */}
-      <div
-        className="flex flex-col w-full h-full bg-cover bg-no-repeat bg-center p-8 items-start justify-start"
-        style={{ backgroundImage: "url('/star_gif.gif')" }}
-      >
-        <TitleText />
+    <div className="relative w-full h-screen overflow-hidden">
+      {/* Background image */}
+      <div className="bg" />
+
+      {/* Starfield */}
+      <div className="star-field">
+        <div className="layer"></div>
+        <div className="layer"></div>
+        <div className="layer"></div>
       </div>
 
+      {/* Foreground content */}
+      <div className="relative z-10 flex flex-col w-full h-full p-8 items-start justify-start">
+        <TitleText />
+      </div>
+
       {/* Bottom-right SVG */}
       <div
         className="absolute"
@@ -32,9 +39,15 @@ export default function DesktopTitleComponent() {
           height={1000} // height of the SVG in pixels (adjust as needed)
         />
       </div>
+
+      {/* Registration button */}
+        <div className="absolute bottom-10 right-3">
+          <RegistrationButton className="text-[35px]" />
+        </div>
     </div>
   );
 }
 
 
 
+

components/title-components/mobile-title.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import Timer from "./timer";
 import TitleText from "./title-text";
 
 export default function MobileTitleComponent() {
 	return (
 		<div className="w-full h-fit flex flex-col items-start justify-start mb-8 pl-8">
 			<div className="h-28 w-full"></div>
 			<TitleText />
-			<Timer />
 		</div>
 	);
 }

components/title-components/title-text.tsx

@@ -74,10 +74,16 @@ export default function TitleText() {
           <span className="animate-pulse">|</span>
         </h1>
 
-        {/* Registration button */}
-        <div className="absolute bottom-8 left-8">
-          <RegistrationButton className="text-3xl" />
-        </div>
+        <h1>
+          <span className="absolute text-[20px] lg:text-[20px] font-modern font-extrabold drop-shadow-lg text-white" style={{ top: "50px", left: "20px" }}>
+            November 15-16, 2025 &#8226; Troy, NY
+          </span>
+        </h1>
+        <h1>
+          <span className="absolute text-[20px] lg:text-[40px] font-modern font-extrabold drop-shadow-lg text-white" style={{ top: "250px", left: "268px" }}>
+            Retro V. Modern
+          </span>
+        </h1>
       </div>
 
       {/* Right side: Map overlapping the box */}