Increased size of label region (#1019)

Author: loris-olivier-obi

src/components/LandingPage/layout/Menu/Menu.tsx

@@ -17,12 +17,43 @@ interface MenuProps {
 
 export default function Menu({ className, scrollHasStarted, section }: MenuProps) {
   const [showMenu, setShowMenu] = React.useState(false);
+  const [showMenuComponent, setShowMenuComponent] = React.useState(true);
+  const [lastScrollY, setLastScrollY] = React.useState(0);
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY > lastScrollY && currentScrollY > 50) {
+        // Scrolling down
+        setShowMenuComponent(false);
+      } else if (currentScrollY < lastScrollY) {
+        // Scrolling up
+        setShowMenuComponent(true);
+      }
+
+      setLastScrollY(currentScrollY);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [lastScrollY]);
 
   return (
     <>
       <div
         id={ID_MENU}
-        className={classNames(className, styles.menuContainer, scrollHasStarted && styles.stuck)}
+        className={classNames(
+          className,
+          styles.menuContainer,
+          scrollHasStarted && styles.stuck,
+          !showMenuComponent && styles.hidden
+        )}
+        style={{
+          transform: showMenuComponent ? 'translateY(0)' : 'translateY(-100%)',
+          transition: 'transform 0.3s ease-in-out',
+        }}
       >
         <Link href="/" className={styles.logo}>
           <h2>Open Brain Institute</h2>

src/env.ts

@@ -26,7 +26,7 @@ export const env = createEnv({
     CI_COMMIT_SHORT_SHA: z.string().optional(),
     npm_package_version: z.string().optional(),
 
-    AUTH_MANAGER_URI: z.string().url(),
+    AUTH_MANAGER_URI: z.string().url().optional(),
   },
 
   client: {
@@ -74,6 +74,7 @@ export const env = createEnv({
     NEXT_PUBLIC_CORE_WEB_APP_VERSION: z.string().optional(),
     NEXT_PUBLIC_NOTEBOOK_SERVICE_BASE_URL: z.string().optional(),
     NEXT_PUBLIC_OBI_ONE_URL: z.string().optional(),
+    NEXT_PUBLIC_AUTH_MANAGER_URI: z.string().url().optional(),
   },
 
   experimental__runtimeEnv: {
@@ -117,6 +118,8 @@ export const env = createEnv({
     NEXT_PUBLIC_CDN_URI: process.env.NEXT_PUBLIC_CDN_URI,
     NEXT_PUBLIC_CORE_WEB_APP_VERSION: process.env.NEXT_PUBLIC_CORE_WEB_APP_VERSION,
 
+    NEXT_PUBLIC_AUTH_MANAGER_URI: process.env.NEXT_PUBLIC_AUTH_MANAGER_URI,
+
     NEXT_PUBLIC_NOTEBOOK_SERVICE_BASE_URL: process.env.NEXT_PUBLIC_NOTEBOOK_SERVICE_BASE_URL,
     NEXT_PUBLIC_OBI_ONE_URL: process.env.NEXT_PUBLIC_OBI_ONE_URL,
   },

src/features/brain-region-hierarchy/region-banner.tsx

@@ -2,8 +2,8 @@
 
 import { CloseOutlined } from '@ant-design/icons';
 
-import { useGetSelectedBrainRegion } from '@/features/brain-region-hierarchy/context';
 import { HierarchySquare } from '@/components/icons/buttons';
+import { useGetSelectedBrainRegion } from '@/features/brain-region-hierarchy/context';
 import { Button } from '@/ui/molecules/button';
 import { cn } from '@/utils/css-class';
 
@@ -54,14 +54,16 @@ export function RegionBanner({ view, onSwitchView }: Props) {
         <div className="flex items-center justify-center gap-2">
           {selectedBrainRegion && (
             <div className="flex items-center justify-center gap-1 select-none">
-              <span className="text-label text-base">Region:</span>
+              <span className="text-neutral-5 mr-2 text-lg">Region:</span>
               <div className="text-primary-9/90 flex items-center justify-center gap-1.5">
                 <div
                   key={`color-${selectedBrainRegion.id}-${selectedBrainRegion.color_hex_triplet}`}
                   className="block h-3! w-3! min-w-3! rounded-full"
                   style={{ backgroundColor: `#${selectedBrainRegion.color_hex_triplet}` }}
                 />
-                <span className="line-clamp-2 leading-5 font-bold">{selectedBrainRegion.name}</span>
+                <span className="line-clamp-2 text-lg leading-5 font-bold">
+                  {selectedBrainRegion.name}
+                </span>
               </div>
             </div>
           )}

src/ui/segments/sfn-2025/content/experience.tsx

@@ -16,7 +16,7 @@ export default function SFNExperience() {
   return (
     <div
       ref={ref}
-      className="text-primary-9 relative flex min-h-[50vh] w-full flex-col px-[8vw] py-12 md:py-[25vh]"
+      className="text-primary-9 relative flex w-full flex-col justify-center overflow-hidden px-[8vw] py-12 md:h-[50vh]"
     >
       <div className="relative z-10">
         <h2 className="font-serif text-6xl! leading-none font-normal md:leading-[1.2]!">
@@ -34,16 +34,17 @@ export default function SFNExperience() {
       </div>
 
       <motion.div
-        className="absolute top-0 right-0 z-0"
+        className="absolute inset-y-0 right-0 z-0 flex items-center justify-center"
         initial={{ scale: 0.8, opacity: 0 }}
-        animate={isInView ? { scale: 1, opacity: 1 } : { scale: 0.8, opacity: 0 }}
+        animate={isInView ? { scale: 0.8, opacity: 1 } : { scale: 0.6, opacity: 0 }}
         transition={{
           duration: 0.3,
           ease: 'easeOut',
         }}
       >
         <Image
           src="/images/sfn/background_white-brain.webp"
+          className="relative -right-[20vw]"
           alt="Experience image"
           width={1512}
           height={814}

src/ui/segments/sfn-2025/content/video.tsx

@@ -1,11 +1,14 @@
 'use client';
 
-import { PlayCircleOutlined, SoundFilled, SoundOutlined } from '@ant-design/icons';
+import {
+  FullscreenOutlined,
+  PlayCircleOutlined,
+  SoundFilled,
+  SoundOutlined,
+} from '@ant-design/icons';
 import { motion, useInView } from 'framer-motion';
 import { useEffect, useRef, useState } from 'react';
 
-import { cn } from '@/utils/css-class';
-
 export default function SFNVideo() {
   const ref = useRef(null);
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -42,6 +45,20 @@ export default function SFNVideo() {
     }
   };
 
+  const toggleFullscreen = () => {
+    if (videoRef.current) {
+      if (!document.fullscreenElement) {
+        videoRef.current.requestFullscreen().catch((_error) => {
+          // Fullscreen might not be available
+        });
+      } else {
+        document.exitFullscreen().catch((_error) => {
+          // Exit fullscreen might fail
+        });
+      }
+    }
+  };
+
   const handleVideoClick = () => {
     if (videoRef.current) {
       if (videoRef.current.paused) {
@@ -61,7 +78,7 @@ export default function SFNVideo() {
   };
 
   return (
-    <div ref={ref} className="relative h-full w-full px-8 py-12 md:px-[10vw] md:py-[15vh]">
+    <div ref={ref} className="relative h-full w-full px-8 py-12 md:px-[15vw] md:py-[15vh]">
       <motion.video
         ref={videoRef}
         muted={isMuted}
@@ -95,18 +112,28 @@ export default function SFNVideo() {
         </button>
       )}
 
-      {/* Mute Button */}
-      <button
-        type="button"
-        onClick={toggleMute}
-        className={cn(
-          'bg-opacity-50 hover:bg-opacity-70 absolute top-52 right-[12vw] z-10 flex h-12 w-12 items-center justify-center rounded-full bg-black text-white transition-all',
-          isMuted ? 'Unmute video' : 'Mute video'
-        )}
-        aria-label={isMuted ? 'Unmute video' : 'Mute video'}
-      >
-        {isMuted ? <SoundOutlined className="text-xl" /> : <SoundFilled className="text-xl" />}
-      </button>
+      {/* Control Buttons */}
+      <div className="absolute top-52 right-[17vw] z-10 flex gap-3">
+        {/* Mute Button */}
+        <button
+          type="button"
+          onClick={toggleMute}
+          className="bg-opacity-50 hover:bg-opacity-70 flex h-12 w-12 items-center justify-center rounded-full bg-black text-white transition-all"
+          aria-label={isMuted ? 'Unmute video' : 'Mute video'}
+        >
+          {isMuted ? <SoundOutlined className="text-xl" /> : <SoundFilled className="text-xl" />}
+        </button>
+
+        {/* Fullscreen Button */}
+        <button
+          type="button"
+          onClick={toggleFullscreen}
+          className="bg-opacity-50 hover:bg-opacity-70 flex h-12 w-12 items-center justify-center rounded-full bg-black text-white transition-all"
+          aria-label="Toggle fullscreen"
+        >
+          <FullscreenOutlined className="text-xl" />
+        </button>
+      </div>
     </div>
   );
 }

src/ui/segments/sfn-2025/content/virtual-labs.tsx

@@ -24,7 +24,7 @@ export default function SFNVirtualLabs() {
   return (
     <div
       ref={ref}
-      className="text-primary-9 relative flex min-h-[80vh] w-full flex-col items-center justify-center overflow-hidden bg-gray-100 px-8 py-4 md:min-h-[50vh] md:flex-row-reverse md:justify-start md:py-8"
+      className="text-primary-9 relative flex w-full flex-col items-center justify-center overflow-hidden bg-gray-100 px-8 py-4 md:h-[50vh] md:min-h-[50vh] md:flex-row-reverse md:justify-start"
       onMouseMove={handleMouseMove}
     >
       <div className="relative z-10 flex w-full flex-col pr-8 md:w-1/2">
@@ -51,7 +51,7 @@ export default function SFNVirtualLabs() {
       >
         <Image
           src="/images/sfn/brain-region_image-01.webp"
-          className="relative -left-[20vw] h-full w-auto"
+          className="relative -left-[32vw] h-full w-auto"
           alt="Multiple brain region image"
           width={990}
           height={558}

src/ui/segments/sfn-2025/hero.module.css

@@ -5,6 +5,7 @@
   height: max(100vh, 600px);
   color: #fffe;
   background-color: var(--color-primary);
+  hyphens: auto;
 
   --color-bg: var(--color-primary);
   --gradient-angle: 150deg;
@@ -66,6 +67,12 @@
   max-width: auto;
 }
 
+@media (max-width: 768px) {
+  .hero .text {
+    padding: 0 5vw;
+  }
+}
+
 .hero .text h1 {
   margin-bottom: 20px;
   font-size: 10vmin;

src/ui/segments/sfn-2025/hero.tsx

@@ -54,10 +54,10 @@ export default function HeroSFN({
         <div>
           <h1 className={styles.largeTitle}>{title}</h1>
         </div>
-        <div className="font-title text-whit flex flex-row gap-x-12 rounded-full border border-solid border-white px-16 py-8 text-3xl!">
+        <div className="font-title flex flex-col gap-5 rounded-lg border border-solid border-white px-5 py-5 text-3xl! text-white md:flex-row md:gap-12 md:rounded-full md:px-16 md:py-8">
           <div>November 15 – 19</div>
-          <div>Booth #3631</div>
           <div>San Diego Convention Center</div>
+          <div>Booth #3631</div>
         </div>
       </div>
     </div>