From 69bc6f0812b876a29c61c73935f508b5bb6c5d01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A1muel=20Fekete?= <feketesamu@gmail.com>
Date: Sun, 18 Feb 2024 22:40:14 +0100
Subject: [PATCH] init

---
 src/app/page.tsx                              |  5 +-
 src/app/workshop/page.tsx                     | 30 +++++++++++
 src/components/navbar/navbar-items.tsx        |  4 ++
 .../countdown-implementation.tsx              | 12 +++--
 .../tiles/countdown-tile/countdown-tile.tsx   |  2 +-
 src/components/tiles/workshop-tile.tsx        | 51 +++++++++++++++++++
 6 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 src/app/workshop/page.tsx
 create mode 100644 src/components/tiles/workshop-tile.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5e454f1..4e84e4f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -7,11 +7,11 @@ 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 { Tile } from '@/components/tiles/tile';
+import { WorkshopTile } from '@/components/tiles/workshop-tile';
 import { getIndexData } from '@/models/get-index-data';
 import { kotlinPresentation, tresoritPresentation } from '@/models/staticPresentationData';
 
@@ -64,7 +64,8 @@ export default async function Landing() {
             {data.giveaway.pictureUrl && <GiveawayTile data={data.giveaway} showLink={false} />}
 
             <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
new file mode 100644
index 0000000..f8a74f4
--- /dev/null
+++ b/src/app/workshop/page.tsx
@@ -0,0 +1,30 @@
+export default function WorkshopPage() {
+  return (
+    <div className='max-w-6xl w-full px-6 xl:px-0'>
+      <h1 className='mb-16 mt-16 text-3xl sm:text-4xl md:text-[42px]'>A 21. század műanyaga az AI - Workshop</h1>
+      <div className='flex flex-col md:flex-row gap-8'>
+        <div>
+          <p className='text-stone-200 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. A résztvevőkkel 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-[20px] whitespace-pre-line'>A részvétel regsiztrációhoz kötött ....</p>
+        </div>
+        <div className='flex flex-col items-center flex-shrink-0 text-center md:max-w-sm order-first md:order-last'>
+          <img
+            src='https://konf-api-staging.kir-dev.hu/cdn/public/MEDVE_17BB6XBGVH7Q2.webp'
+            // TODO PROD LINK
+            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>
+    </div>
+  );
+}
diff --git a/src/components/navbar/navbar-items.tsx b/src/components/navbar/navbar-items.tsx
index 42a2c1f..94dea7e 100644
--- 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',
diff --git a/src/components/tiles/countdown-tile/countdown-implementation.tsx b/src/components/tiles/countdown-tile/countdown-implementation.tsx
index 61aebb4..4d5f179 100644
--- a/src/components/tiles/countdown-tile/countdown-implementation.tsx
+++ b/src/components/tiles/countdown-tile/countdown-implementation.tsx
@@ -17,10 +17,14 @@ 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-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
index 861a70d..063d192 100644
--- a/src/components/tiles/countdown-tile/countdown-tile.tsx
+++ b/src/components/tiles/countdown-tile/countdown-tile.tsx
@@ -9,7 +9,7 @@ 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.Body className='flex flex-col items-center justify-center gap-8'>
         {CountdownTileImplementation && <CountdownTileImplementation />}
       </Tile.Body>
     </Tile>
diff --git a/src/components/tiles/workshop-tile.tsx b/src/components/tiles/workshop-tile.tsx
new file mode 100644
index 0000000..72a9d2b
--- /dev/null
+++ 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-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-staging.kir-dev.hu/cdn/public/MEDVE_17BB6XBGVH7Q2.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>
+  );
+}