Add open source announcement

client/app/components/Header/CollapsedHeader.jsx

@@ -12,9 +12,12 @@ import { AnimatePresence, motion } from 'framer-motion';
 import LogoWithText from '@/app/components/Logo/WithText';
 import { nanoid } from 'nanoid';
 import { usePathname } from 'next/navigation';
+import { useNewspaperStore } from '@/stores/newspaper';
 
 export default function CollapsedHeader() {
   const theme = useThemeStore(state => state.theme);
+  const newspaperIsOpen = useNewspaperStore(state => state.isOpen);
+
   const [open, setOpen] = useState(false);
   const pathname = usePathname();
 
@@ -25,7 +28,10 @@ export default function CollapsedHeader() {
   }, [open]);
 
   return (
-    <header className='fixed top-0 flex justify-between w-full px-4 mobile:px-16 lg:px-28 2xl:px-48 z-[9999] pb-6 [transition-duration:750ms]'>
+    <header className={cn(
+      'fixed top-0 flex justify-between w-full px-4 mobile:px-16 lg:px-28 2xl:px-48 z-[9999] pb-6 [transition-duration:750ms]',
+      newspaperIsOpen && 'opacity-0'
+    )}>
       <div className='mt-6'>
         <Link href='/'>
           <Image src={theme === 'dark' ? '/symbol_white.png' : '/symbol_black.png'} width={64} height={64} className='w-[48px] h-[48px]' alt='discord.place Logo' />

client/app/components/Header/NotCollapsedHeader.jsx

@@ -9,9 +9,11 @@ import config from '@/config';
 import { usePrevious, useWindowScroll, useWindowSize } from 'react-use';
 import useThemeStore from '@/stores/theme';
 import UserSide from '@/app/components/Header/UserSide';
+import { useNewspaperStore } from '@/stores/newspaper';
 
 export default function NotCollapsedHeader() {
   const theme = useThemeStore(state => state.theme);
+  const newspaperIsOpen = useNewspaperStore(state => state.isOpen);
 
   const { y } = useWindowScroll();
   const oldY = usePrevious(y);
@@ -49,7 +51,8 @@ export default function NotCollapsedHeader() {
     <header className={cn(
       'fixed top-0 flex justify-between w-full px-12 lg:px-24 2xl:px-48 z-[9999] pb-6 transition-all [transition-duration:750ms]',
       scrollDirection === 'down' && '-translate-y-full opacity-0 [transition-timing-function:cubic-bezier(.8,-0.76,.38,1.37)]',
-      scrollDirection === 'up' && 'translate-y-0 opacity-100'
+      scrollDirection === 'up' && 'translate-y-0 opacity-100',
+      newspaperIsOpen && 'transition-none opacity-0'
     )}>
       <div className='flex mt-6 gap-x-10'>
         <Link href='/' className='hover:animate-logo-spin'>

client/app/components/Newspaper/OpenSource.jsx

@@ -0,0 +1,116 @@
+import { useNewspaperStore } from '@/stores/newspaper';
+import { useEffect, useRef } from 'react';
+import Image from 'next/image';
+import { useLockBodyScroll, useClickAway } from 'react-use';
+import { IoCloseSharp } from 'react-icons/io5';
+import { motion, AnimatePresence } from 'framer-motion';
+import Link from 'next/link';
+
+export default function OpenSourceAnnouncement() {
+  const isOpen = useNewspaperStore(state => state.isOpen);
+  const setIsOpen = useNewspaperStore(state => state.setIsOpen);
+
+  useEffect(() => {
+    setIsOpen(true);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useLockBodyScroll(isOpen);
+
+  const contentRef = useRef(null);
+  useClickAway(contentRef, () => setIsOpen(false));  
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className='fixed top-0 left-0 w-full h-full z-[100001] bg-background/70 backdrop-blur-sm'
+        >
+          <motion.div
+            initial={{ translateY: 400, scale: 0.9, opacity: 0 }}
+            animate={{ translateY: 0, scale: 1, opacity: 1 }}
+            exit={{ translateY: 400, scale: 0.9, opacity: 0 }}
+            transition={{ type: 'spring', damping: 20, stiffness: 100 }}
+            className='flex items-center justify-center w-full h-full px-4 sm:px-0'
+          >
+            <div className='relative bg-secondary w-[600px] h-max rounded-md flex flex-col' ref={contentRef}>
+              <Image
+                src='/newspaper/open-source.png'
+                width={600}
+                height={450}
+                className='rounded-t-md w-full h-[200px] object-cover'
+                alt='Open Source Announcement Banner'
+              />
+
+              <div className='absolute right-4 top-4' onClick={() => setIsOpen(false)}>
+                <button className='p-1 text-white rounded-full bg-black/20 hover:bg-black/40'>
+                  <IoCloseSharp size={20} />
+                </button>
+              </div>
+
+              <div className='flex flex-col items-center justify-center w-full px-2 my-12 sm:px-8 gap-y-2'>
+                <h1 className='text-xl font-bold text-center sm:text-2xl text-primary'>discord.place Goes Open Source on GitHub!</h1>
+
+                <p className='text-xs text-center sm:text-sm text-secondary'>
+                  We{'\''}re thrilled to announce that the discord.place codebase is now open source on GitHub! Join us in our journey of transparency, collaboration, and innovation. Explore, contribute, and learn with us!
+                </p>
+
+                <Link 
+                  className='px-3 py-1 mt-2.5 text-sm font-semibold dark:text-black text-white dark:bg-white bg-black rounded-lg hover:bg-black/70 dark:hover:bg-white/70'
+                  href='https://github.com/discordplace/discord.place'
+                  target='_blank'
+                >
+                  GitHub Repository
+                </Link>
+              </div>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+  /*
+  return (
+    <div className={cn(
+      'fixed top-0 left-0 w-full h-full z-[100001] bg-background/70 backdrop-blur-sm transition-all duration-500',
+      !isOpen && 'pointer-events-none opacity-0'
+    )}>
+      <div className={cn(
+        'flex items-center justify-center w-full h-full transition-all duration-500',
+        isOpen ? 'translate-y-[0px] opacity-100' : 'translate-y-[250px] opacity-0'
+      )}>
+        <div className='relative bg-tertiary w-[600px] h-max rounded-md flex flex-col'>
+          <Image
+            src='/newspaper/open-source.png'
+            width={600}
+            height={450}
+            className='rounded-t-md w-full h-[250px] object-cover'
+            alt='Open Source Announcement Banner'
+          />
+
+          <div className='absolute right-4 top-4' onClick={() => setIsOpen(false)}>
+            <button className='p-1 text-black rounded-full bg-white/20'>
+              <IoCloseSharp size={20} />
+            </button>
+          </div>
+
+          <div className='flex flex-col items-center justify-center w-full px-8 my-12 gap-y-2'>
+            <h1 className='text-2xl font-bold text-center text-primary'>discord.place is now open source!</h1>
+            
+            <p className='text-sm font-medium text-center text-secondary'>
+              We have open sourced our codebase on GitHub. Feel free to contribute to our project. We are looking forward to your contributions.
+            </p>
+
+            <button className='px-3 py-1 mt-2.5 text-sm font-semibold dark:text-black text-white dark:bg-white bg-black rounded-lg hover:bg-black/70 dark:hover:bg-white/70'>
+              GitHub Repository
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );*/
+}

client/app/page.js

@@ -11,6 +11,7 @@ import { IoPeople } from 'react-icons/io5';
 import { RiRobot2Fill } from 'react-icons/ri';
 import { MdEmojiEmotions } from 'react-icons/md';
 import { MdArrowForward } from 'react-icons/md';
+import OpenSourceAnnouncement from '@/app/components/Newspaper/OpenSource';
 
 const SourceSerif4 = Source_Serif_4({ subsets: ['latin'] });
 
@@ -48,6 +49,8 @@ export default function Page() {
 
   return (
     <div className="relative z-10 flex flex-col items-center justify-center w-full sm:h-[100dvh] my-8 sm:my-0">
+      <OpenSourceAnnouncement />
+
       <Square column='10' row='10' transparentEffectDirection='bottomToTop' blockColor='rgba(var(--bg-secondary))' />
 
       <h1 className={cn(

client/stores/newspaper/index.js

@@ -0,0 +1,6 @@
+import { create } from 'zustand';
+
+export const useNewspaperStore = create(set => ({
+  isOpen: false,
+  setIsOpen: (isOpen) => set({ isOpen })
+}));