feat: add user experience survey banner

Author: Bentroen

apps/frontend/src/modules/browse/SurveyBanner.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import {
+  faChartSimple,
+  faExclamationCircle,
+  faExternalLink,
+  faTimes,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+const SURVEY_LINK = 'https://forms.gle/3eY4Lktd1tQkZ2mt8';
+const STORAGE_KEY = 'surveyBannerClosed';
+
+export const SurveyBanner = () => {
+  return (
+    <div className='flex flex-row mx-auto w-fit min-h-32 justify-between items-center text-pretty gap-6 p-4 sm:px-8 text-md rounded-xl mb-10 bg-top backdrop-filter backdrop-blur-lg bg-linear-to-br from-15% from-green-300/50 via-green-400/50 to-85% to-emerald-600/50 relative'>
+      <div
+        className='absolute h-full w-full top-0 left-0 z-[-1] rounded-xl opacity-50 brightness-[0.3]'
+        style={{
+          backgroundImage: "url('/background-tile-flat.png')",
+          backgroundSize: 'auto',
+          //backgroundAttachment: 'fixed',
+          backgroundRepeat: 'repeat',
+          backgroundPosition: '0% 100%',
+        }}
+      ></div>
+      <FontAwesomeIcon
+        icon={faChartSimple}
+        className='text-green-300 text-4xl'
+      />
+
+      <div className='flex-1 leading-tight max-w-(--breakpoint-md) w-fit'>
+        <p className='uppercase text-md font-bold tracking-wider text-yellow-300 mb-1 w-fit'>
+          <FontAwesomeIcon icon={faExclamationCircle} /> Help us in research!
+        </p>
+        <p>
+          We&apos;re doing <span className='font-bold'>original research</span>{' '}
+          on the note block community! Answer our{' '}
+          <span className='font-bold'>10-minute survey</span> and help us build
+          the future of Note Block World.{' '}
+          <Link
+            href={SURVEY_LINK}
+            target='_blank'
+            className='text-blue-300 hover:text-blue-200 font-bold underline'
+          >
+            Click here to start
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const MiniSurveyBanner = ({
+  permanent = false,
+}: {
+  permanent?: boolean;
+}) => {
+  const pathname = usePathname();
+  const canDismiss = !permanent;
+  // Start closed to avoid a dismiss flash; open after mount if eligible.
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (pathname === '/') return;
+    if (!canDismiss || localStorage.getItem(STORAGE_KEY) !== 'true') {
+      setIsOpen(true);
+    }
+  }, [canDismiss, pathname]);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    localStorage.setItem(STORAGE_KEY, 'true');
+  };
+
+  if (!isOpen || pathname === '/') return null;
+
+  return (
+    <div className='relative flex items-center justify-center gap-2 mt-4 mb-5 bg-emerald-800 border-emerald-400 text-emerald-300 border-2 rounded-lg px-3 py-1.5 text-sm'>
+      {canDismiss && (
+        <button
+          type='button'
+          onClick={handleClose}
+          aria-label='Dismiss survey banner'
+          className='absolute top-1 right-1.5 text-emerald-400 hover:text-emerald-200'
+        >
+          <FontAwesomeIcon icon={faTimes} />
+        </button>
+      )}
+      <FontAwesomeIcon icon={faChartSimple} className='h-5' />
+      <p className={`leading-4.5 ${canDismiss ? 'pr-4' : ''}`}>
+        Answer our{' '}
+        <Link
+          href={SURVEY_LINK}
+          target='_blank'
+          className='text-blue-400 hover:text-blue-300 hover:underline'
+        >
+          10-minute survey
+        </Link>
+        <FontAwesomeIcon
+          className='text-blue-400 font-bold ml-1 mr-1'
+          size='xs'
+          icon={faExternalLink}
+        />{' '}
+        and help us improve your experience!
+      </p>
+    </div>
+  );
+};

apps/frontend/src/modules/browse/components/HomePageComponent.tsx

@@ -27,6 +27,7 @@ import LoadMoreButton from './client/LoadMoreButton';
 import { TimespanButtonGroup } from './client/TimespanButton';
 import SongCard from './SongCard';
 import SongCardGroup from './SongCardGroup';
+import { SurveyBanner } from '../SurveyBanner';
 
 export const HomePageComponent = () => {
   // Initialize sync hooks for proper effect handling
@@ -39,6 +40,7 @@ export const HomePageComponent = () => {
       {/* Welcome banner/Hero */}
       <WelcomeBanner />
       {/* <EventBanner /> */}
+      <SurveyBanner />
 
       {/* FEATURED SONGS */}
       {featuredSongsPage.length > 0 && (

apps/frontend/src/modules/shared/components/layout/NavbarLayout.tsx

@@ -1,3 +1,5 @@
+import { MiniSurveyBanner } from '@web/modules/browse/SurveyBanner';
+
 import { SideRailAdSlot } from '../client/ads/AdSlots';
 import { CookieBanner } from '../client/CookieBanner';
 
@@ -18,6 +20,7 @@ async function Layout({ children }: TNavbarLayoutProps) {
         <div className='flex flex-row justify-around w-full pt-24 pb-10'>
           <SideRailAdSlot />
           <main className='flex-1 w-full max-w-(--breakpoint-xl) px-6 sm:px-10 mb-8'>
+            <MiniSurveyBanner permanent={false} />
             {children}
           </main>
           <SideRailAdSlot />

apps/frontend/src/modules/song-upload/components/client/UploadCompleteModal.tsx

@@ -2,6 +2,7 @@ import JSConfetti from 'js-confetti';
 import Link from 'next/link';
 import { useEffect, useState } from 'react';
 
+import { MiniSurveyBanner } from '@web/modules/browse/SurveyBanner';
 import GenericModal from '@web/modules/shared/components/client/GenericModal';
 
 export default function UploadCompleteModal({
@@ -71,6 +72,8 @@ export default function UploadCompleteModal({
         </button>
       </div>
 
+      <MiniSurveyBanner permanent={true} />
+
       <div className='flex items-center justify-between gap-4 mt-6'>
         <button
           type='button'