Livesite/feature/guest speaker section

apps/live/src/app/(landing)/Keynote.tsx

@@ -3,9 +3,5 @@
 import React from "react";
 
 export default function Keynote(): React.ReactNode {
-
-  return (
-    <div>
-    </div>
-  );
+  return <div></div>;
 }

apps/live/src/app/api/cabinPoints/route.ts

@@ -25,7 +25,7 @@ export async function GET(req: NextRequest) {
   } catch (err) {
     return NextResponse.json(
       { error: `Request to get airtable data failed ${err}` },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }

packages/ui/src/KeynoteSpeakerAssets/KeynoteCard.tsx

@@ -1,16 +1,24 @@
 import * as React from "react";
 import { SVGProps } from "react";
+import TimeIcon from "../TimeIcon";
+import LocationIcon from "../LocationIcon";
 
 interface KeynoteCardProps extends SVGProps<SVGSVGElement> {
   header: string;
   text: string;
   bio: string;
+  isLive: boolean;
+  location: string;
+  time: string;
 }
 
 const KeynoteCard: React.FC<KeynoteCardProps> = ({
   header,
   text,
   bio,
+  isLive,
+  location,
+  time,
   ...props
 }) => (
   <div>
@@ -22,6 +30,20 @@ const KeynoteCard: React.FC<KeynoteCardProps> = ({
         <h3 className="font-NeulisNeue-Bold text-xl text-firecrackerRed">
           {bio}
         </h3>
+        {isLive && (
+          <div className="flex items-center gap-4 text-charcoalFogDark">
+            <div className="flex items-center gap-1">
+              <LocationIcon />
+              <span>{location}</span>
+            </div>
+
+            <div className="flex items-center gap-1">
+              <TimeIcon />
+              <span>{time}</span>
+            </div>
+          </div>
+        )}
+
         <p className="text-charcoalFogDark mobile:text-s font-DMSans-Regular ">
           {text}
         </p>

packages/ui/src/KeynoteSpeakerSection.tsx

@@ -14,12 +14,16 @@ export default function Keynote(): React.ReactNode {
     header: "Sue Harnett",
     bio: "CEO of Rewriting the Code",
     text: "Sue Harnett is the Founder & CEO of Rewriting the Code, the nonprofit she launched in 2017 that has grown into a global community of 38,000+ university and early-career women in tech, offering mentorship, education, and career-readiness programs. She will be speaking about women in technology, and the value of community, teamwork, and thoughtful leadership!",
+    location: "Zone A",
+    time: "Friday, 1pm",
   };
 
   const jessicaData = {
     header: "Jessica Cao",
     bio: "Stanford CS '26 / Founder of World37",
     text: "Jessica Cao is an undergraduate studying Computer Science at Stanford University, and the founder of World37, an AI-powered storytelling platform where players can engage with, create, and share their own unique stories. She will be speaking about the art of pitching a technical project!",
+    location: "Zone A",
+    time: "Friday, 1pm",
   };
 
   return (
@@ -66,6 +70,9 @@ export default function Keynote(): React.ReactNode {
             header={sueData.header}
             bio={sueData.bio}
             text={sueData.text}
+            isLive={false}
+            location={sueData.location}
+            time={sueData.time}
           />
         </div>
       </div>
@@ -94,6 +101,9 @@ export default function Keynote(): React.ReactNode {
             header={jessicaData.header}
             bio={jessicaData.bio}
             text={jessicaData.text}
+            isLive={false}
+            location={jessicaData.location}
+            time={jessicaData.time}
           />
         </div>
       </div>

packages/ui/src/LocationIcon.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+const LocationIcon = () => (
+  <svg
+    width={40}
+    height={40}
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx={19.75}
+      cy={19.75}
+      r={18.3393}
+      fill="#F2E06F"
+      stroke="#FDA829"
+      strokeWidth={2.82143}
+    />
+    <mask
+      id="mask0_897_7860"
+      style={{
+        maskType: "alpha",
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={40}
+      height={40}
+    >
+      <circle
+        cx={19.75}
+        cy={19.75}
+        r={18.1378}
+        fill="#F2E06F"
+        stroke="#FDA829"
+        strokeWidth={3.22449}
+      />
+    </mask>
+    <g mask="url(#mask0_897_7860)">
+      <circle
+        cx={19.75}
+        cy={19.75}
+        r={18.1378}
+        fill="#F2E06F"
+        stroke="#FDA829"
+        strokeWidth={3.22449}
+      />
+      <path
+        d="M20 9.5C22.3869 9.5 24.6761 10.4482 26.364 12.136C28.0518 13.8239 29 16.1131 29 18.5C29 21.574 27.324 24.09 25.558 25.895C24.6757 26.7871 23.7129 27.5958 22.682 28.311L22.256 28.601L22.056 28.734L21.679 28.974L21.343 29.179L20.927 29.421C20.6446 29.5822 20.3251 29.6669 20 29.6669C19.6749 29.6669 19.3554 29.5822 19.073 29.421L18.657 29.179L18.137 28.859L17.945 28.734L17.535 28.461C16.4228 27.7085 15.3869 26.8491 14.442 25.895C12.676 24.089 11 21.574 11 18.5C11 16.1131 11.9482 13.8239 13.636 12.136C15.3239 10.4482 17.6131 9.5 20 9.5ZM20 15.5C19.606 15.5 19.2159 15.5776 18.8519 15.7284C18.488 15.8791 18.1573 16.1001 17.8787 16.3787C17.6001 16.6573 17.3791 16.988 17.2284 17.3519C17.0776 17.7159 17 18.106 17 18.5C17 18.894 17.0776 19.2841 17.2284 19.6481C17.3791 20.012 17.6001 20.3427 17.8787 20.6213C18.1573 20.8999 18.488 21.1209 18.8519 21.2716C19.2159 21.4224 19.606 21.5 20 21.5C20.7956 21.5 21.5587 21.1839 22.1213 20.6213C22.6839 20.0587 23 19.2956 23 18.5C23 17.7044 22.6839 16.9413 22.1213 16.3787C21.5587 15.8161 20.7956 15.5 20 15.5Z"
+        fill="#C2811E"
+      />
+      <g
+        style={{
+          mixBlendMode: "overlay",
+        }}
+      >
+        <path
+          d="M-11.6079 0.562145C-10.3046 -9.14536 -4.23227 5.89559 17.9361 18.6945C38.6938 30.6789 49.4041 24.3815 48.1008 34.089C46.7975 43.7965 31.1646 49.7091 13.1836 47.2951C-4.79732 44.8811 -12.9111 10.2697 -11.6079 0.562145Z"
+          fill="#676767"
+        />
+      </g>
+    </g>
+  </svg>
+);
+export default LocationIcon;

packages/ui/src/TimeIcon.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+const TimeIcon = () => (
+  <svg
+    width={40}
+    height={40}
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      cx={19.75}
+      cy={19.75}
+      r={18.3393}
+      fill="#F2E06F"
+      stroke="#FDA829"
+      strokeWidth={2.82143}
+    />
+    <mask
+      id="mask0_1228_906"
+      style={{
+        maskType: "alpha",
+      }}
+      maskUnits="userSpaceOnUse"
+      x={0}
+      y={0}
+      width={40}
+      height={40}
+    >
+      <circle
+        cx={19.75}
+        cy={19.75}
+        r={18.1378}
+        fill="#F2E06F"
+        stroke="#FDA829"
+        strokeWidth={3.22449}
+      />
+    </mask>
+    <g mask="url(#mask0_1228_906)">
+      <circle
+        cx={19.75}
+        cy={19.75}
+        r={18.1378}
+        fill="#F2E06F"
+        stroke="#FDA829"
+        strokeWidth={3.22449}
+      />
+      <path
+        d="M20 10C25.523 10 30 14.477 30 20C30 25.523 25.523 30 20 30C14.477 30 10 25.523 10 20C10 14.477 14.477 10 20 10ZM20 14C19.7348 14 19.4804 14.1054 19.2929 14.2929C19.1054 14.4804 19 14.7348 19 15V20C19.0001 20.2652 19.1055 20.5195 19.293 20.707L22.293 23.707C22.4816 23.8892 22.7342 23.99 22.9964 23.9877C23.2586 23.9854 23.5094 23.8802 23.6948 23.6948C23.8802 23.5094 23.9854 23.2586 23.9877 22.9964C23.99 22.7342 23.8892 22.4816 23.707 22.293L21 19.586V15C21 14.7348 20.8946 14.4804 20.7071 14.2929C20.5196 14.1054 20.2652 14 20 14Z"
+        fill="#C2811E"
+      />
+      <g
+        style={{
+          mixBlendMode: "overlay",
+        }}
+      >
+        <path
+          d="M-11.6079 0.562145C-10.3046 -9.14536 -4.23227 5.89559 17.9361 18.6945C38.6938 30.6789 49.4041 24.3815 48.1008 34.089C46.7975 43.7965 31.1646 49.7091 13.1836 47.2951C-4.79732 44.8811 -12.9111 10.2697 -11.6079 0.562145Z"
+          fill="#676767"
+        />
+      </g>
+    </g>
+  </svg>
+);
+export default TimeIcon;