Merge pull request #46 from simonyiszk/workshop

workshop

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';
 
@@ -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' />

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>
+  );
+}

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',

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>
     </>
   );
 }

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>

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>
   );

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>
+  );
+}