Add AnthonyShaw as Keynote (#57)

Co-authored-by: Vamsi Krishna Kolli <vamsi@onemyle.com>

data/navItems.js

@@ -9,6 +9,11 @@ export const NAV_ITEMS = [
     path: '/#tickets',
     target: '_self',
   },
+  {
+    name: 'Keynote Speaker',
+    path: '/#keynote-speaker',
+    target: '_self',
+  },
   {
     name: 'Sponsors',
     path: '/#sponsors',

data/speakers.js

@@ -0,0 +1,6 @@
+export const KEYNOTE_SPEAKER = {
+  name: 'Anthony Shaw',
+  title: 'Keynote Speaker',
+  speakerImgUrl: '/images/speakers/anthony-shaw.svg',
+  speakerImgAlt: "Anthony Shaw's picture",
+};

pages-content/keynotes/anthonyShaw.mdx

@@ -0,0 +1,12 @@
+Anthony Shaw is an active contributor to open source projects and has been recognized as a fellow by the Python Software Foundation, Apache Software Foundation, and Macquarie University. He is the author of the book CPython Internals.
+
+Active Contributor
+  - Open Source Projects
+
+Fellow Recognition
+  - Python Software Foundation
+  - Apache Software Foundation
+  - Macquarie University
+
+Author
+  - CPython Internals

src/app/page.jsx

@@ -1,4 +1,5 @@
 import Hero from '@/components/Hero';
+import { KeynoteSpeaker } from '@/components/KeynoteSpeaker';
 import MeetOrganizers from '@/components/MeetOrganizers';
 import SponsorsSection from '@/components/Sponsors';
 import Tickets from '@/components/Tickets';
@@ -8,6 +9,7 @@ export default function Home() {
     <>
       <Hero />
       <Tickets />
+      <KeynoteSpeaker />
       <SponsorsSection />
       <MeetOrganizers />
     </>

src/components/KeynoteSpeaker.jsx

@@ -0,0 +1,56 @@
+import Image from 'next/image';
+import { KEYNOTE_SPEAKER } from '@/speakers';
+import { Heading } from './Typography';
+import MdxLayout from '@/components/MdxLayout';
+import AnthonyShawDescription from '@/keynotes/anthonyShaw.mdx';
+
+export function KeynoteSpeaker() {
+  const { name, title, speakerImgUrl, speakerImgAlt } = KEYNOTE_SPEAKER;
+  return (
+    <section
+      id="keynote-speaker"
+      className="scroll-mt-20 flex flex-col items-center py-6 w-11/12 lg:w-5/6 mx-auto"
+    >
+      <Heading
+        tagLevel={2}
+        level={1}
+        className="text-center my-8 text-secondary-600 dark:text-secondary-400"
+      >
+        {title}
+      </Heading>
+      <div className="flex flex-col items-center">
+        <div className="flex md:flex-row flex-col">
+          {/* Left Section */}
+          <div className="flex flex-col md:w-1/2">
+            {/* Speaker Photo */}
+            <div className="md:w-100">
+              <Image
+                src={speakerImgUrl}
+                alt={speakerImgAlt}
+                width={400}
+                height={400}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            {/* Speaker Name */}
+            <Heading
+              tagLevel={3}
+              level={2}
+              className="text-center my-4 text-secondary-600 dark:text-secondary-400"
+            >
+              {name}
+            </Heading>
+          </div>
+          {/* Right Section */}
+          <div className="bg-primary dark:bg-secondary md:mt-8 text-gray-50 md:w-1/2">
+            <div className="">
+              <MdxLayout className="text-gray-600 dark:text-gray-400">
+                <AnthonyShawDescription />
+              </MdxLayout>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}