made language virtual instead of in-perosn

Author: AryanM24

app/page.tsx

@@ -4,10 +4,16 @@ import { ScheduleSection } from "@/components/schedule-section"
 import { SponsorsSection } from "@/components/sponsors-section"
 import { ArchiveSection } from "@/components/archive-section"
 import { FAQSection } from "@/components/faq-section"
+import { StickyBanner } from "@/components/ui/sticky-banner"
 
 export default function Home() {
   return (
     <main className="h-screen snap-y snap-mandatory overflow-y-auto bg-black text-foreground">
+      <StickyBanner className="bg-accent">
+        <p className="mx-0 max-w-[90%] text-accent-foreground drop-shadow-md">
+          Venue Update: HackJPS 2026 will now be held entirely virtual due to unspecified venue issues.
+        </p>
+      </StickyBanner>
       <div className="flex min-h-screen flex-col snap-start">
         <HeroSection />
       </div>

components/sticky-banner-demo.tsx

@@ -0,0 +1,27 @@
+import { StickyBanner } from "@/components/ui/sticky-banner";
+
+export default function StickyBannerDemo() {
+  return (
+    <div className="relative flex h-[60vh] w-full flex-col overflow-y-auto">
+      <StickyBanner className="bg-gradient-to-b from-blue-500 to-blue-600">
+        <p className="mx-0 max-w-[90%] text-white drop-shadow-md">
+          Announcing $10M seed funding from project mayhem ventures.{" "}
+          <a href="#" className="transition duration-200 hover:underline">
+            Read announcement
+          </a>
+        </p>
+      </StickyBanner>
+      <DummyContent />
+    </div>
+  );
+}
+
+const DummyContent = () => {
+  return (
+    <div className="relative mx-auto flex w-full max-w-7xl flex-col gap-10 py-8">
+      <div className="h-96 w-full animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
+      <div className="h-96 w-full animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
+      <div className="h-96 w-full animate-pulse rounded-lg bg-neutral-100 dark:bg-neutral-800" />
+    </div>
+  );
+};

components/ui/sticky-banner.tsx

@@ -0,0 +1,83 @@
+"use client";
+import React, { SVGProps, useState } from "react";
+import { motion, useMotionValueEvent, useScroll } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export const StickyBanner = ({
+  className,
+  children,
+  hideOnScroll = false,
+}: {
+  className?: string;
+  children: React.ReactNode;
+  hideOnScroll?: boolean;
+}) => {
+  const [open, setOpen] = useState(true);
+  const { scrollY } = useScroll();
+
+  useMotionValueEvent(scrollY, "change", (latest) => {
+    console.log(latest);
+    if (hideOnScroll && latest > 40) {
+      setOpen(false);
+    } else {
+      setOpen(true);
+    }
+  });
+
+  return (
+    <motion.div
+      className={cn(
+        "sticky inset-x-0 top-0 z-40 flex min-h-10 w-full items-center justify-center bg-transparent px-4 py-1",
+        className,
+      )}
+      initial={{
+        y: -100,
+        opacity: 0,
+      }}
+      animate={{
+        y: open ? 0 : -100,
+        opacity: open ? 1 : 0,
+      }}
+      transition={{
+        duration: 0.3,
+        ease: "easeInOut",
+      }}
+    >
+      {children}
+
+      <motion.button
+        initial={{
+          scale: 0,
+        }}
+        animate={{
+          scale: 1,
+        }}
+        className="absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer"
+        onClick={() => setOpen(!open)}
+      >
+        <CloseIcon className="h-5 w-5 text-white" />
+      </motion.button>
+    </motion.div>
+  );
+};
+
+const CloseIcon = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      {...props}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <path d="M18 6l-12 12" />
+      <path d="M6 6l12 12" />
+    </svg>
+  );
+};