make the talks section nicer and remove the now defunct unsplash rand…

…om image stuff

Yes, we could use the new random image API from unsplash, but it's not super easy, for the value it was bringing, for now, I'm just removing it.

src/components/shared/Section/SectionHeader/SectionHeader.jsx

@@ -5,7 +5,7 @@ import './SectionHeader.scss';
 
 const SectionHeader = ({ children, className, title, ...props }) => (
   <header className={cn('io-section-header', className)} {...props}>
-    <Typography className="mb-1" variant="h2" uppercase>
+    <Typography variant="h2" uppercase>
       {title}
     </Typography>
     <Typography lead>{children}</Typography>

src/components/shared/Section/SectionHeader/SectionHeader.scss

@@ -1,6 +1,6 @@
 .io-section-header {
   position: relative;
-  margin-bottom: 3.75 * $spacer;
+  margin-bottom: 2 * $spacer;
   text-align: center;
   // Prevents collapsing margin.
   overflow: auto;

src/components/shared/TalkCard/TalkCard.jsx

@@ -7,19 +7,13 @@ import Typography from '@/components/shared/Typography';
 import { talkType } from '@/types';
 import './TalkCard.scss';
 
-// Avoids browser caching and reusing the same image.
-let imageIndex = 0;
-const getDefaultSpeakerImage = () =>
-  `https://source.unsplash.com/600x400/?programming,code&sig=${imageIndex++}`;
-
 const TalkCard = ({ talk: { title, authors } }) => (
   <Card className="io-talk-card">
-    <CardImg src={getDefaultSpeakerImage()} alt="Card image cap" />
     <CardImgOverlay className="details">
-      <Typography variant="h4" className="mb-1">
+      <Typography variant="h4" className="title">
         {title}
       </Typography>
-      <Typography variant="span" light>
+      <Typography variant="span" light className="authors">
         <em>{authors.name}</em>
       </Typography>
     </CardImgOverlay>

src/components/shared/TalkCard/TalkCard.scss

@@ -2,10 +2,27 @@
   margin-bottom: 3 * $spacer;
 
   .details {
-    top: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center; // Center the content vertically
+    position: relative;
+    height: 200px;
     padding-top: 0.625rem;
     padding-bottom: 0.625rem;
     background-color: fade-out($color: $dark, $amount: 0.2);
     text-align: center;
+
+    .title {
+      flex: 1; // Allow the title to take up available space
+      display: flex;
+      align-items: center; // Center the title vertically within its flex container
+      justify-content: center; // Center the title horizontally
+    }
+
+    .authors {
+      position: absolute;
+      bottom: 10px; // Align authors 10px from the bottom
+      width: 100%;
+    }
   }
 }