changes based on figma design

simonyiszk · Feb 5, 2024 · 100015e · 100015e
1 parent 9c743d3
commit 100015e
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 32 deletions.
diff --git a/src/app/presentations/[slug]/page.tsx b/src/app/presentations/[slug]/page.tsx
@@ -1,37 +1,67 @@
 import Link from 'next/link';
+import { FaArrowLeft } from 'react-icons/fa';
 
 import { getIndexData } from '@/models/get-index-data';
 
 export default async function PresentationBySlug({ params }: { params: { slug: string } }) {
   const { presentations } = await getIndexData();
   const result = presentations.find((item) => {
-    return item.slug === params.slug || null;
+    return item.slug === params.slug;
   });
+
   return (
-    <div>
-      <Link href={`/presentations`}>
-        <h2 className='mb-5'>↩ Vissza az előadásokhoz</h2>
-      </Link>
-      <div className='max-w-md mx-auto bg-[#101010] rounded-xl shadow-md overflow-hidden md:max-w-5xl'>
-        <div className='md:flex'>
-          <div className='md:flex-shrink-0'>
-            <img
-              className='h-30 w-full object-cover md:h-full md:w-64'
-              src={result?.presenter.pictureUrl}
-              alt='Portrait'
-            />
-          </div>
-          <div className='p-8'>
-            <div className='uppercase tracking-wide text-blue-300 font-semibold text-xl'>{result?.title}</div>
-            <p className='block mt-1 text-lg leading-tight font-semibold text-white-900'>
-              {result?.presenter.name + ', ' + result?.presenter.rank}
-            </p>
-            <p className='mt-2 text-stone-200'>{result?.description}</p>
-            <p className='mt-3 text-stone-200'>📌 {result?.room}</p>
-            <p className='mt-3 text-stone-200'>🕑{result?.startTime + ' - ' + result?.endTime}</p>
+    <>
+      {!result ? (
+        <div>
+          <h3 className='mb-5 hover:text-brand'>
+            <Link href={`/presentations`}>
+              <div className='flex items-center'>
+                <FaArrowLeft />
+                <p className='ml-1'>Vissza az előadásokhoz </p>
+              </div>
+            </Link>
+          </h3>
+          <h1>Az oldal nem található.</h1>
+        </div>
+      ) : (
+        <div>
+          <h3 className='mb-5 hover:text-brand'>
+            <Link href={`/presentations`}>
+              <div className='flex items-center'>
+                <FaArrowLeft />
+                <p className='ml-1'>Vissza az előadásokhoz </p>
+              </div>
+            </Link>
+          </h3>
+          <div className='max-w-md mx-auto rounded-xl shadow-md overflow-hidden md:max-w-5xl'>
+            <h1 className='mb-16'>{result.title}</h1>
+            <div className='md:flex'>
+              <div className='pr-[8rem]'>
+                <p className='text-stone-200 text-[20px]'>{result.description}</p>
+              </div>
+              <div className='md:flex-shrink-0 text-center'>
+                <img
+                  src={result.presenter.pictureUrl}
+                  className='object-cover w-[308px] h-[308px] rounded-3xl'
+                  alt='Presentation Image'
+                />
+                <p className='block mt-4 text-[32px] leading-tight font-bold text-white-900'>{result.presenter.name}</p>
+                <p className='block mt-0.5 text-[20px]  text-[#FFE500]'>{result.presenter.rank}</p>
+                {result.presenter.company && (
+                  <div className='mt-1.5 bg-white rounded-xl max-w-[308px] max-h-[75px]'>
+                    <img
+                      src={result.presenter.company.logoUrl}
+                      alt='Company logo'
+                      className='p-2 max-w-full max-h-[75px] object-fit m-auto'
+                    />
+                  </div>
+                )}
+                )
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </div>
+      )}
+    </>
   );
 }
diff --git a/src/app/presentations/page.tsx b/src/app/presentations/page.tsx
@@ -13,16 +13,20 @@ export default async function Presentations() {
         {presentations.map((presentation) => (
           <div className='flex flex-wrap justify-center'>
             <div className='w-full flex justify-center mb-16 md:mb-0'>
-              <div className='relative w-full max-w-[384px] bg-[#101010] shadow-md rounded-lg overflow-hidden'>
+              <div className='relative w-[410px] h-[598px] bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-gray-800 to-[#010101] shadow-md border-[1px] rounded-3xl overflow-hidden'>
                 <Link href={`/presentations/${presentation.slug}`}>
-                  <img src={presentation.presenter.pictureUrl} className='object-cover' alt='Presentation Image' />
-                  <div className='p-4'>
-                    <h2 className='text-center text-3xl font-bold text-blue-300 pb-4'>{presentation.title}</h2>
-                    <h3 className='text-center text-3xl font-bold'>{presentation.presenter.name}</h3>
-                    <p className='text-center text-2xl pb-5'>
-                      {presentation.presenter.rank + ' @ ' + presentation.presenter.company?.name}
+                  <img
+                    src={presentation.presenter.pictureUrl}
+                    className='object-cover w-full h-[410px] rounded-3xl'
+                    alt='Presentation Image'
+                  />
+                  <div className='z-20 absolute text-center top-2/3 left-1/2 -translate-x-[50%] -translate-y-[30%] shadow-md rounded-xl overflow-hidden bg-[#FFE500]'>
+                    <p className='pt-1 min-w-[260px] min-h-[44px] text-[24px] text-black font-bold'>
+                      {presentation.presenter.name}
                     </p>
-                    <p className='absolute bottom-0 left-0 m-2'>📌 {presentation.room}</p>
+                  </div>
+                  <div className='p-6'>
+                    <h2 className='text-center text-[24px] font-bold text-white pb-4'>{presentation.title}</h2>
                   </div>
                 </Link>
               </div>