SEO images, remove services section (for the time being)

src/pages/index.astro

@@ -203,14 +203,20 @@ const tracks = (
         </div>
       </div>
     </section>
-    <section id="services" class="bg-primary text-white dark:bg-gray-800">
-      <div class="mx-auto max-w-4xl px-8 py-16 text-center">
-        <SectionTitle lineColour="text-white">Services</SectionTitle>
-        <Paragraph>
-          This is where I will put a list of services I offer, such as web
-          development, music composition, etc. Each service can link to a more
-          detailed page.
-        </Paragraph>
+    <section id="fillerUntilServicesIsComplete" class="text-white">
+      <div class="flex h-64 w-full items-center justify-center">
+        <ImageCarousel
+          images={imagesForCTAArray}
+          className="absolute -z-40 h-full w-full"
+          foreground={true}
+          foregroundColour="bg-primary"
+          foregroundOpacity="opacity-50 dark:opacity-25"
+          interval={1000}
+          transitionDuration="duration-500"
+          quality={5}
+          height={256}
+          shuffle={true}
+        />
       </div>
     </section>
     <section id="contact" class="bg-white dark:bg-gray-950">

src/pages/projects/[...slug].astro

@@ -5,7 +5,11 @@ import MainLayout from "@layouts/MainLayout.astro";
 
 import { getCollection, render } from "astro:content";
 
-import { getAllProjectImages } from "@/lib/utils";
+import {
+  getAllProjectImages,
+  getFullExternalURLOfImage,
+  getProjectHero
+} from "@/lib/utils";
 
 export async function getStaticPaths() {
   const projects = await getCollection("projects");
@@ -19,9 +23,20 @@ const { project } = Astro.props;
 const { Content } = await render(project);
 
 const images = getAllProjectImages(project);
+const hero = getProjectHero(project);
+
+const seoImage: SiteImage = {
+  externalURL: await getFullExternalURLOfImage(hero),
+  src: hero.src,
+  alt: project.data.images.hero.alt
+};
 ---
 
-<MainLayout title="Projects">
+<MainLayout
+  title={project.data.title}
+  description={project.data.description}
+  image={seoImage}
+>
   <div class="w-full">
     <section id="cta" class="text-white">
       <div class="flex h-64 w-full items-center justify-center">