feat(legacy): 💄 add recommendation for our AI course

apps/legacy_nmit/components/GlobalModal.tsx

@@ -0,0 +1,68 @@
+import { useRouter } from 'next/router'
+import { useState, useEffect } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { Button } from './Button'
+
+const MODAL_COOKIE_KEY = 'global_modal_closed'
+
+export function GlobalModal() {
+  const [isOpen, setIsOpen] = useState(false)
+  const router = useRouter()
+
+  useEffect(() => {
+    const hasClosedModal = document.cookie
+      .split('; ')
+      .find(row => row.startsWith(MODAL_COOKIE_KEY))
+      ?.split('=')[1]
+
+    if (!hasClosedModal) {
+      setIsOpen(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (router.asPath.startsWith("/kurz-ai")) {
+      setTimeout(handleClose, 500)
+    }
+  }, [router.asPath])
+
+  const handleChange = (isOpen: boolean) => {
+    if (isOpen) {
+      setIsOpen(isOpen)
+    } else {
+      handleClose()
+    }
+  }
+
+  const handleClose = () => {
+    // Set cookie to expire in 1 year
+    document.cookie = `${MODAL_COOKIE_KEY}=true; path=/; max-age=${60 * 60 * 24 * 365}; SameSite=Lax`
+    setIsOpen(false)
+  }
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={handleChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 backdrop-blur-md" />
+        <Dialog.Content className="fixed left-1/2 top-1/2 w-full xl:w-1/2 h-fit -translate-x-1/2 -translate-y-1/2 bg-background p-6 shadow-lg">
+          <Dialog.Close asChild onClick={handleClose}>
+            <button type="button" className='z-50 absolute top-0 right-0 flex flex-col items-center justify-center p-3 duration-500 outline-none cursor-pointer lg:p-6 hover:opacity-30'>
+                <XMarkIcon className='block h-10 w-10' aria-hidden='true' />
+            </button>
+          </Dialog.Close>
+          <Dialog.Title className="text-lg font-semibold">
+            AI Kurz
+          </Dialog.Title>
+
+          <div className="mt-4">
+            <p className="text-gray-600">
+              <iframe className='w-full aspect-video' src="https://www.youtube.com/embed/ZXB3XTZRtdk" title="Pozvánka na AI kurz" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />
+            </p>
+          </div>
+          <div className='flex mt-3 justify-center w-full'><Button theme="main" href="/kurz-ai">Vzhůru na AI kurz!</Button></div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

apps/legacy_nmit/components/Menu.tsx

@@ -49,7 +49,7 @@ function MenuItem({
 
 export function Menu({ items, logoLink, children, inApp }: MenuProps) {
     return (
-        <Disclosure as='nav' className='fixed top-32 sm:top-20 md:top-12 z-20 w-screen bg-background/90 transition-all print:hidden'>
+        <Disclosure as='nav' className='fixed top-0 z-20 w-screen bg-background/90 transition-all print:hidden'>
             {({ open, close }) => (
                 <>
                     <div className='mx-auto mt-4 max-w-screen-3xl px-6 lg:px-0'>

apps/legacy_nmit/components/SideMenu.tsx

@@ -8,7 +8,7 @@ type Props = {
 
 export function SideMenu({ children }: Props) {
     return (
-        <nav className='h-full flex flex-col justify-between bg-rightSide bg-no-repeat bg-contain bg-rightCut pl-4 pr-20 py-4 pt-20'>
+        <nav className='h-full flex flex-col justify-between bg-rightSide bg-no-repeat bg-contain bg-rightCut pl-4 pr-20 py-4'>
             <div>
                 <Typography
                     variant='normal'

apps/legacy_nmit/package.json

@@ -90,7 +90,7 @@
     "tsutils": "^3.21.0",
     "typescript": "^5.6.2"
   },
-  "packageManager": "pnpm@9.11.0",
+  "packageManager": "pnpm@9.12.3",
   "engineStrict": true,
   "engines": {
     "node": ">=20.17.0",
@@ -99,6 +99,6 @@
   },
   "volta": {
     "node": "20.17.0",
-    "pnpm": "9.1.4"
+    "pnpm": "9.12.3"
   }
 }

apps/legacy_nmit/pages/_app.tsx

@@ -1,9 +1,10 @@
 import "../styles/global.css"
 import type { AppProps } from "next/app"
 import { SessionProvider } from "next-auth/react"
-import { Session } from "next-auth"
+import type { Session } from "next-auth"
 import splitbee from "@splitbee/web"
 import { useEffect } from "react"
+import { GlobalModal } from "../components/GlobalModal"
 
 function MyApp({ Component, pageProps }: Readonly<AppProps<{ readonly session: Session }>>) {
     useEffect(() => {
@@ -17,7 +18,8 @@ function MyApp({ Component, pageProps }: Readonly<AppProps<{ readonly session: S
     return (
         <SessionProvider session={pageProps.session}>
             <Component {...pageProps} />
-            <div id='calendly'></div>
+            <GlobalModal />
+            <div id='calendly' />
         </SessionProvider>
     )
 }

apps/legacy_nmit/pages/_document.tsx

@@ -3,7 +3,6 @@ import { Html, Head, Main, NextScript } from "next/document"
 import Script from "next/script"
 import { Partytown } from "@builder.io/partytown/react"
 import { Tracking } from "../components/Tracking"
-import Link from 'next/link';
 
 const APP_MAIN_COLOR = "#090c28"
 const APP_NAME = "Nauč mě IT"
@@ -66,7 +65,6 @@ export default function Document() {
                 />
             </Head>
             <body className='h-full font-poppins accent-primary caret-primary'>
-                <div className="fixed top-0 w-full z-50 text-white py-1 text-xl text-center bg-primary"><Link href={"/kurz-api"}>Už jsme v kurzu! Můžeš se přihlásit na Kurz API zde.</Link></div>
                 <Main />
                 <NextScript />
                 <Script

apps/legacy_nmit/pages/chapter/[post].tsx

@@ -46,12 +46,12 @@ const Post: React.FC<PostProps> = ({ mdx, metaInformation, headings }) => {
             </Head>
             <InAppMenu />
             <div className='grid grid-cols-12 auto-rows-auto h-screen'>
-                <div className='print:hidden row-start-1 row-end-3 xl:row-end-7 xl:row-span-full col-span-full xl:col-span-2 mt-32 bg-secondary/5 overflow-auto'>
+                <div className='print:hidden row-start-1 row-end-2 xl:row-end-7 xl:row-span-full col-span-full xl:col-span-2 mt-20 bg-secondary/5 overflow-auto'>
                     <SideMenu>
                         <TreeToC headings={headings} />
                     </SideMenu>
                 </div>
-                <main className='flex flex-row justify-start items-start row-end-7 xl:col-start-3 col-span-full row-start-4 xl:row-start-1 row-span-full overflow-auto print:overflow-visible px-10 pt-10 xl:mt-20 pb-2 overscroll-none'>
+                <main className='flex flex-row justify-start items-start row-end-7 xl:col-start-3 col-span-full row-start-3 xl:row-start-1 row-span-full overflow-auto print:overflow-visible px-10 xl:mt-20 pb-2 overscroll-none'>
                     <article className='max-w-prose print:block'>
                         <Logo className='hidden print:block' width={120} />
                         <Typography

apps/legacy_nmit/pages/dashboard.tsx

@@ -40,12 +40,12 @@ const Dashboard: React.FC = () => {
             </Head>
             <InAppMenu />
             <div className='grid grid-cols-12 auto-rows-auto h-screen'>
-                <div className='row-start-1 row-end-3 xl:row-end-7 xl:row-span-full col-span-full xl:col-span-2 mt-32 bg-secondary/5 overflow-auto'>
+                <div className='row-start-1 row-end-2 xl:row-end-7 xl:row-span-full col-span-full xl:col-span-2 mt-20 bg-secondary/5 overflow-auto'>
                     <SideMenu>
                         <TreeToC headings={headings} />
                     </SideMenu>
                 </div>
-                <main className='row-end-7 xl:col-start-3 col-span-full row-start-4 xl:row-start-1 row-span-full overflow-auto xl:mt-20 pb-2 pt-10 overscroll-none'>
+                <main className='row-end-7 xl:col-start-3 col-span-full row-start-3 xl:row-start-1 row-span-full overflow-auto xl:mt-20 pb-2 overscroll-none'>
                     <MissingBanner />
                     <section className='flex flex-col lg:flex-row justify-center items-center lg:items-start mt-5 gap-10'>
                         <ContentCard title='Kurz QA' priority phrase='Začít' href='/chapter/qa-00'>