Merge pull request #60 from simonyiszk/dev

v2.1
simonyiszk · Feb 26, 2024 · 78c1a3a · 78c1a3a
2 parents 7b60ec3 + 17375a0
commit 78c1a3a
Show file tree

Hide file tree

Showing 12 changed files with 211 additions and 34 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -32,7 +32,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         />
         <main className='flex flex-col min-h-screen overflow-hidden'>
           <Navbar />
-          <div className='flex-grow relative flex flex-col justify-center items-center'>{children}</div>
+          <div className='flex-grow relative mt-24 md:mt-28 flex flex-col justify-center items-center'>{children}</div>
           <Footer />
         </main>
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,10 +7,10 @@ import Presentation from '@/components/presentation/Presentation';
 import { SponsorSection } from '@/components/sponsors/sponsor-section';
 import CountdownTile from '@/components/tiles/countdown-tile/countdown-tile';
 import { GiveawayTile } from '@/components/tiles/giveaway-tile';
-import { NewsletterTile } from '@/components/tiles/newsletter-tile';
 import { PromoVideoTile } from '@/components/tiles/promo-video-tile';
 import { RegisterTile } from '@/components/tiles/register-tile';
 import { StatTile } from '@/components/tiles/stat-tile';
+import { WorkshopTile } from '@/components/tiles/workshop-tile';
 import { getIndexData } from '@/models/get-index-data';
 import { kotlinPresentation, tresoritPresentation } from '@/models/staticPresentationData';
 
@@ -25,7 +25,7 @@ export default async function Landing() {
   }
   return (
     <>
-      <div className='p-10 relative'>
+      <div className='md:mt-0 p-10 relative'>
         <div className='max-w-md md:max-w-xl relative shadow-gloria rounded-full overflow-hidden mx-auto'>
           <video className='h-full w-full' autoPlay playsInline loop muted poster='/img/nebula-thumbnail.webp'>
             <source src='/video/nebula.mp4' type='video/mp4' />
@@ -42,9 +42,9 @@ export default async function Landing() {
           <div className='grid grid-cols-1 sm:grid-cols-6 max-w-6xl w-full mt-40 gap-6 px-4 sm:px-6 xl:px-0'>
             {data.registration.cooltixEventId && <RegisterTile data={data.registration} />}
 
-            <StatTile desc='óta rendezünk konferenciákat' number='2003' />
-            <StatTile desc='percnyi előadás egy nap alatt' number='400+' />
             <StatTile desc='előadás' number='21' />
+            <StatTile desc='kiállító az expón' number='21' />
+            <StatTile desc='év tapasztalat' number='21' />
 
             <Presentation presentation={kotlinPresentation} isFrontPage />
 
@@ -55,7 +55,8 @@ export default async function Landing() {
             {data.giveaway.pictureUrl && <GiveawayTile data={data.giveaway} showLink={true} />}
 
             <CountdownTile />
-            <NewsletterTile />
+            {/* <NewsletterTile /> */}
+            <WorkshopTile />
             {/*{(data.mobilApp.androidUrl || data.mobilApp.iosUrl) && <MobilAppTile data={data.mobilApp} />} */}
           </div>
           <Image src={redPlanet} alt='Vörös bolygó' className='planet red-planet -z-10' />

diff --git a/src/app/workshop/page.tsx b/src/app/workshop/page.tsx
@@ -0,0 +1,45 @@
+import { Metadata } from 'next';
+
+import { Tile } from '@/components/tiles/tile';
+
+export const metadata: Metadata = {
+  title: 'A 21. század műanyaga az AI - Workshop',
+  description: 'Bartos-Elekes Miklós "A 21. század műanyaga az AI" című workshopja a XXI. Simonyi Konferencián',
+};
+
+export default function WorkshopPage() {
+  return (
+    <div className='max-w-6xl w-full px-4 sm:px-6 xl:px-0 mt-10'>
+      <Tile>
+        <Tile.Body>
+          <h1 className='mb-16 text-3xl sm:text-4xl md:text-[42px]'>A 21. század műanyaga az AI - Workshop</h1>
+          <div className='flex flex-col lg:flex-row gap-8'>
+            <div>
+              <p className='text-stone-200 text-base sm:text-[20px] whitespace-pre-line'>
+                A 21. század műanyaga a mesterséges intelligencia. Már előreláthatólag el fog árasztani mindent, és
+                lépésről lépésre fel kell fedezzük (a mérnökök és a felhasználók) a tulajdonságait, hogy az általános
+                használata milyen előnyökkel és hátrányokkal jár együtt. 2 órás gyakorlati workshopomban a résztvevőkkel
+                együtt bemutatom a neurális hálók működését, eddig megismert tulajdonságait. Felépítünk egy kisebb
+                képfelismerő hálót, majd a hálót felhasználva megismerjük a ma népszerű nagy nyelvi modelleket (ChatGPT,
+                Gemini) biztonsági és etikai szempontok alapján.
+              </p>
+              <p className='mt-8 text-stone-200 text-base sm:text-[20px] whitespace-pre-line'>
+                A részvétel regisztrációhoz kötött, melyet az általános konferencia belépőtől függetlenül, de ugyanazon
+                a felületen lehet intézni. A workshopon való aktív részvételhez egy laptop szükséges.
+              </p>
+            </div>
+            <div className='flex flex-col items-center flex-shrink-0 text-center lg:max-w-sm order-first lg:order-last'>
+              <img
+                src='https://konf-api.kir-dev.hu/cdn/public/MEDVE_U6Y7SQZJ4HNQ.webp'
+                className='object-cover rounded-3xl w-[250px] h-[250px] sm:w-[308px] sm:h-[308px]'
+                alt='Presentation Image'
+              />
+              <p className='block mt-4 text-[32px] leading-tight font-bold text-white-900'>Bartos-Elekes Miklós</p>
+              <p className='block mt-0.5 text-[20px]  text-[#FFE500]'>LEGO Kör MI projektvezető, MSc hallgató</p>
+            </div>
+          </div>
+        </Tile.Body>
+      </Tile>
+    </div>
+  );
+}
diff --git a/src/components/navbar/desktop-navbar.tsx b/src/components/navbar/desktop-navbar.tsx
@@ -1,9 +1,41 @@
+'use client';
+
+import clsx from 'clsx';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
 import { NavbarItems } from '@/components/navbar/navbar-items';
+import { navbarOnDarkBg } from '@/utils/navbarHelper';
 
 export function DesktopNavbar() {
+  const [isDarkBackground, setIsDarkBackground] = useState(true);
+
+  const onScroll = () => {
+    try {
+      setIsDarkBackground(navbarOnDarkBg('desktop-nav-container'));
+    } catch {}
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', onScroll);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
   return (
-    <nav className='max-w-screen-2xl w-full mx-auto hidden md:flex p-10 md:p-15 pb-0 justify-end items-center flex-wrap gap-10 flex-col md:flex-row'>
-      <div className='flex items-center gap-10'>
+    <nav className=' w-full mx-auto hidden md:flex justify-end items-center flex-wrap gap-10 flex-col md:flex-row fixed p-5 top-0 z-20'>
+      <div
+        id='desktop-nav-container'
+        className={clsx(
+          'flex items-center justify-between gap-10 w-full p-4 box-border rounded-md backdrop-blur-md',
+          isDarkBackground ? 'bg-white bg-opacity-[0.15]' : 'bg-black bg-opacity-[0.65]'
+        )}
+      >
+        <Link href='/'>
+          <Image src='/img/icon-base.svg' alt='Simonyi Konferencia' width={40} height={40} />
+        </Link>
         <NavbarItems />
       </div>
     </nav>

diff --git a/src/components/navbar/navbar-items.tsx b/src/components/navbar/navbar-items.tsx
@@ -9,6 +9,10 @@ const links = [
     href: '/presentations',
     label: 'előadások',
   },
+  {
+    href: '/workshop',
+    label: 'workshop',
+  },
   {
     href: '/contact',
     label: 'kapcsolat',
@@ -17,12 +21,12 @@ const links = [
 
 export function NavbarItems() {
   return (
-    <>
+    <div className='flex flex-col md:flex-row gap-3 mt-5 md:mt-0 md:gap-10'>
       {links.map(({ href, label }) => (
         <Link href={href} key={href} className='hover:text-brand text-xl font-bold'>
           {label}
         </Link>
       ))}
-    </>
+    </div>
   );
 }
diff --git a/src/components/navbar/navbar-mobile.tsx b/src/components/navbar/navbar-mobile.tsx
@@ -3,33 +3,53 @@
 import clsx from 'clsx';
 import Image from 'next/image';
 import Link from 'next/link';
-import { MouseEventHandler, useState } from 'react';
+import { MouseEventHandler, useEffect, useState } from 'react';
 import { TbMenu2 } from 'react-icons/tb';
 
 import { NavbarItems } from '@/components/navbar/navbar-items';
+import { navbarOnDarkBg } from '@/utils/navbarHelper';
 
 export function NavbarMobile() {
   const [isOpen, setIsOpen] = useState(false);
+  const [isDarkBackground, setIsDarkBackground] = useState(true);
   const toggle = () => setIsOpen(!isOpen);
   const onLinkClick: MouseEventHandler = (e) => {
     if ((e.target as HTMLElement).tagName === 'A') setIsOpen(false);
   };
+
+  const onScroll = () => {
+    try {
+      setIsDarkBackground(navbarOnDarkBg('mobile-nav-container'));
+    } catch {}
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', onScroll);
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+    };
+  }, []);
+
   return (
-    <nav className='w-full p-5 md:hidden sticky top-0 z-20' onClick={onLinkClick}>
-      <div className='w-full p-5 box-border rounded-md bg-white bg-opacity-10 backdrop-blur-sm'>
-        <div className='w-full flex items-center justify-between gap-5'>
-          <Link href='/' onClick={() => setIsOpen(false)}>
-            <Image src='/img/icon-base.svg' alt='Simonyi Konferencia' width={40} height={40} />
-          </Link>
-          <button onClick={toggle}>
-            <TbMenu2 size={40} />
-          </button>
-        </div>
-        {isOpen && (
-          <div className={clsx('flex flex-col w-full gap-3 overflow-hidden box-border mt-5')}>
-            <NavbarItems />
+    <nav className='md:hidden'>
+      <div className='w-full px-5 py-3 fixed top-0 z-20' onClick={onLinkClick}>
+        <div
+          id='mobile-nav-container'
+          className={clsx(
+            'w-full p-4 box-border rounded-md backdrop-blur-md',
+            isDarkBackground ? 'bg-white bg-opacity-[0.15]' : 'bg-black bg-opacity-[0.65]'
+          )}
+        >
+          <div className='w-full flex items-center justify-between gap-5'>
+            <Link href='/' onClick={() => setIsOpen(false)}>
+              <Image src='/img/icon-base.svg' alt='Simonyi Konferencia' width={40} height={40} />
+            </Link>
+            <button onClick={toggle}>
+              <TbMenu2 size={40} />
+            </button>
           </div>
-        )}
+          {isOpen && <NavbarItems />}
+        </div>
       </div>
     </nav>
   );

diff --git a/src/components/sponsors/sponsor-section.tsx b/src/components/sponsors/sponsor-section.tsx
@@ -14,7 +14,7 @@ export function SponsorSection({ sectionTitle, companies }: Props) {
   const regularSponsors = companies.filter((c) => c.category === SponsorCategory.SPONSOR);
 
   return (
-    <div className='w-full bg-white'>
+    <div id='sponsor-container' className='w-full bg-white'>
       <section className={styles.section}>
         <h2 className='text-3xl font-bold order-first'>{sectionTitle}</h2>
 

diff --git a/src/components/tiles/countdown-tile/countdown-implementation.tsx b/src/components/tiles/countdown-tile/countdown-implementation.tsx
@@ -17,10 +17,18 @@ export default function CountdownTileImplementation() {
   }, []);
   return (
     <>
-      <CountDownElement value={duration.months ? (duration.days ?? 0) + 30 : duration.days} label='nap' />
-      <CountDownElement value={duration.hours ? String(duration.hours).padStart(2, '0') : '00'} label='óra' />
-      <CountDownElement value={duration.minutes ? String(duration.minutes).padStart(2, '0') : '00'} label='perc' />
-      <CountDownElement value={duration.seconds ? String(duration.seconds).padStart(2, '0') : '00'} label='mp' />
+      <p className='text-4xl font-bold'>
+        még{' '}
+        <span className='text-8xl sm:text-9xl md:text-8xl lg:text-9xl'>
+          {duration.months ? (duration.days ?? 0) + 30 : duration.days}
+        </span>{' '}
+        nap
+      </p>
+      <div className='flex flex-row flex-wrap justify-center gap-4'>
+        <CountDownElement value={duration.hours ? String(duration.hours).padStart(2, '0') : '00'} label='óra' />
+        <CountDownElement value={duration.minutes ? String(duration.minutes).padStart(2, '0') : '00'} label='perc' />
+        <CountDownElement value={duration.seconds ? String(duration.seconds).padStart(2, '0') : '00'} label='mp' />
+      </div>
     </>
   );
 }
diff --git a/src/components/tiles/countdown-tile/countdown-tile.tsx b/src/components/tiles/countdown-tile/countdown-tile.tsx
@@ -8,8 +8,8 @@ const CountdownTileImplementation = dynamic(() => import('./countdown-implementa
 
 export default function CountdownTile() {
   return (
-    <Tile className='sm:col-span-3'>
-      <Tile.Body className='flex flex-row flex-wrap items-center justify-center gap-4'>
+    <Tile className='sm:col-span-6 md:col-span-3'>
+      <Tile.Body className='flex flex-col items-center justify-center gap-8'>
         {CountdownTileImplementation && <CountdownTileImplementation />}
       </Tile.Body>
     </Tile>

diff --git a/src/components/tiles/stat-tile.tsx b/src/components/tiles/stat-tile.tsx
@@ -9,8 +9,8 @@ export function StatTile({ desc, number }: Props) {
   return (
     <Tile className='sm:col-span-2 h-full'>
       <Tile.Body className='flex flex-col justify-center items-center h-full'>
-        <h2 className='text-6xl font-bold'>{number}</h2>
-        <p className='text-lg sm:text-xl font-medium text-center'>{desc}</p>
+        <h2 className='text-8xl font-bold'>{number}</h2>
+        <p className='text-2xl font-medium text-center'>{desc}</p>
       </Tile.Body>
     </Tile>
   );

diff --git a/src/components/tiles/workshop-tile.tsx b/src/components/tiles/workshop-tile.tsx
@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { Tile } from './tile';
+
+export function WorkshopTile() {
+  return (
+    <Tile className='sm:col-span-6 md:col-span-3'>
+      <Tile.Body>
+        <h2 className='text-3xl sm:text-[34px]'>A 21. század műanyaga az AI</h2>
+        <div className='flex flex-col gap-4 lg:gap-0 lg:flex-row w-full justify-between mt-4'>
+          <p className='text-stone-200 text-[20px] whitespace-pre-line w-full'>
+            2 órás gyakorlati workshop, amiben bemutatásra kerül a neurális hálók működése, eddig megismert
+            tulajdonságaik, valamint a ma népszerű nagy nyelvi modellek biztonsági és etikai szempontjai.
+          </p>
+
+          <div className='flex flex-col items-center w-full'>
+            <img
+              src='https://konf-api.kir-dev.hu/cdn/public/MEDVE_U6Y7SQZJ4HNQ.webp'
+              className='object-cover rounded-3xl w-[200px] h-[200px]'
+              alt='Workshop Image'
+            />
+            <p className='block mt-4 text-[20px] leading-tight font-bold text-white-900 text-center'>
+              Bartos-Elekes Miklós
+            </p>
+            <p className='block mt-0.5 text-[14px]  text-[#FFE500]'>LEGO Kör MI projektvezető</p>
+          </div>
+        </div>
+        <div className='flex w-full justify-center mt-8'>
+          <Link href='/workshop' className='inline-flex items-center font-semibold text-xl text-white brand-link'>
+            Részletek
+            <svg
+              className=' w-2.5 h-2.5 ms-2 rtl:rotate-180'
+              aria-hidden='true'
+              xmlns='http://www.w3.org/2000/svg'
+              fill='none'
+              viewBox='0 0 6 10'
+            >
+              <path
+                stroke='currentColor'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth='2'
+                d='m1 9 4-4-4-4'
+              />
+            </svg>
+          </Link>
+        </div>
+      </Tile.Body>
+    </Tile>
+  );
+}
diff --git a/src/utils/navbarHelper.ts b/src/utils/navbarHelper.ts
@@ -0,0 +1,16 @@
+export const navbarOnDarkBg = (navbarSelector: string) => {
+  const sponsorSection = document.getElementById('sponsor-container');
+  const navbar = document.getElementById(navbarSelector);
+  if (!sponsorSection || !navbar) throw Error('navbar not found');
+  const navbarScrollY = window.scrollY - navbar.offsetTop - 24;
+  if (navbarScrollY < sponsorSection.offsetTop) {
+    return true;
+  } else if (
+    navbarScrollY >= sponsorSection.offsetTop &&
+    navbarScrollY < sponsorSection.offsetTop + sponsorSection.offsetHeight + navbar.offsetTop + 24
+  ) {
+    return false;
+  } else {
+    return true;
+  }
+};