Add a double presenter card for joint presentations

src/app/components/DoublePresenterCard.tsx

@@ -0,0 +1,35 @@
+import Image, { StaticImageData } from 'next/image'
+
+export const DoublePresenterCard = ({
+  src1,
+  name1,
+  src2,
+  name2,
+  topic,
+}: {
+  src1: StaticImageData
+  src2: StaticImageData
+  name1: string
+  name2: string
+  topic: string
+}) => {
+  return (
+    <div className="m-4 max-w-5xl overflow-hidden rounded-xl border-2 border-zinc-900/5 bg-white shadow-lg ring-4 ring-zinc-900/5 dark:ring-zinc-500/50">
+      <div className="flex justify-between">
+        <Image className="" src={src1} alt={name1} width={300} priority />
+        <Image className="" src={src2} alt={name2} width={300} priority />
+      </div>
+      <div className="px-2 py-4">
+        <div className="mb-2 flex justify-between border-b-4 border-cyan-500 dark:border-fuchsia-600">
+          <div className="text-black-900 w-1/2 text-nowrap p-2 text-center text-xl font-bold">
+            {name1}
+          </div>
+          <div className="text-black-900 w-1/2 text-nowrap p-2 text-center text-xl font-bold">
+            {name2}
+          </div>
+        </div>
+        <p className="p-2 text-center text-xl text-gray-700">{topic}</p>
+      </div>
+    </div>
+  )
+}

src/app/components/PresenterCard.tsx

@@ -16,7 +16,7 @@ export const PresenterCard = ({
         <div className="text-black-900 mb-2 max-w-64 border-b-4 border-cyan-500 text-center text-xl font-bold dark:border-fuchsia-600">
           {name}
         </div>
-        <p className="max-w-64 text-center text-base text-gray-700">{topic}</p>
+        <p className="max-w-64 text-center text-base  text-gray-700">{topic}</p>
       </div>
     </div>
   )

src/app/page.tsx

@@ -1,12 +1,13 @@
-import { Header } from './components/Header'
-import { Title } from './components/Title'
-import { PresenterCard } from './components/PresenterCard'
-import { Timer } from './components/Timer'
-import { Footer } from './components/Footer'
+import { Header } from '@/app/components/Header'
+import { Title } from '@/app/components/Title'
+import { PresenterCard } from '@/app/components/PresenterCard'
+import { Timer } from '@/app/components/Timer'
+import { Footer } from '@/app/components/Footer'
 
 import presenterOne from '@/images/example-photo-1.jpeg'
 import presenterTwo from '@/images/example-photo-2.jpeg'
 import presenterThree from '@/images/example-photo-3.jpeg'
+import { DoublePresenterCard } from './components/DoublePresenterCard'
 
 export default function Home() {
   const date = new Date().toLocaleDateString('en-AU', {
@@ -39,13 +40,23 @@ export default function Home() {
     <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-zinc-900">
       <Header date={date.toUpperCase()} />
       <Title />
-      <h2 className="truncate text-3xl font-bold leading-7 tracking-tight text-gray-700 md:text-4xl dark:text-zinc-100">
+      <h2 className="truncate text-3xl font-bold leading-7 tracking-tight text-gray-700 dark:text-zinc-100 md:text-4xl">
         featuring
       </h2>
       <div className="flex flex-wrap justify-center">
+        {/* Individual Presenters */}
         {presenters.map((presenter) => (
           <PresenterCard key={presenter.id} {...presenter} />
         ))}
+
+        {/* Double Presenter Card */}
+        {/* <DoublePresenterCard
+          src1={presenters[0].src}
+          name1={presenters[0].name}
+          src2={presenters[1].src}
+          name2={presenters[1].name}
+          topic={presenters[0].topic}
+        /> */}
       </div>
       <Timer />
       <Footer />