add photos to about page

Author: YasInvolved

app/about/page.tsx

@@ -1,7 +1,17 @@
 import Link from "next/link"
+import Image, { StaticImageData } from "next/image";
 import { Paragraph, Chapter } from "../components/TextUtils"
 import ContactEmail from "./ContactEmail"
 
+import vulkanised2023_1 from "@/public/vulkanised_photos/2023/2023_1.jpg";
+import vulkanised2023_2 from "@/public/vulkanised_photos/2023/2023_2.jpg";
+import vulkanised2024_1 from "@/public/vulkanised_photos/2024/2024_1.jpg";
+import vulkanised2024_2 from "@/public/vulkanised_photos/2024/2024_2.jpg";
+
+function VulkanisedPhoto({ src, alt }: { src: StaticImageData | string, alt: string }) {
+    return <Image src={src} alt={alt} className="aspect-video w-[400px]"/>
+}
+
 export default function Page() {
     return (
         <main className="container mx-auto max-sm:px-8 flex flex-col gap-4 sm:gap-8 sm:items-center h-full justify-center">
@@ -27,6 +37,25 @@ export default function Page() {
                     availability of consultants and specific expertise required their regular working hours overlap the
                     normal working hours from San Francisco to Sydney.
                 </Paragraph>
+
+                <div className="grid grid-cols-1 lg:grid-cols-2 my-4 gap-4">
+                    <VulkanisedPhoto 
+                        src={vulkanised2023_1} 
+                        alt="Vulkanised photo 1"
+                    />
+                    <VulkanisedPhoto 
+                        src={vulkanised2023_2} 
+                        alt="Vulkanised photo 2"
+                    />
+                    <VulkanisedPhoto 
+                        src={vulkanised2024_1} 
+                        alt="Vulkanised photo 3"
+                    />
+                    <VulkanisedPhoto 
+                        src={vulkanised2024_2} 
+                        alt="Vulkanised photo 4"
+                    />
+                </div>
             </Chapter>
             <Chapter title="Contact">
                 <Paragraph>