improved site header, added contact form, content card carousel, footer, and more photos

components/pic-with-text.tsx

@@ -1,18 +1,29 @@
 import picOne from "../assets/hero-picture-1.png";
 
-export default function PicWithText(){
+
+interface PicWithTextProps {
+    src?: string
+    title?: string
+    text?: string
+    reverse: boolean
+}
+
+
+export default function PicWithText(content: PicWithTextProps){
+    let flex_state = content.reverse ? "md:flex-row flex-col" : "md:flex-row-reverse flex-col-reverse";
     return (
-        <div className="flex flex-col md:flex-row items-center md:items-start gap-8 w-full mt-10">
+        <div className={`flex ${flex_state} items-center md:items-start gap-8 w-full mt-10 pb-30`}>
             <div className="w-full md:w-1/2 shrink-0">
                 <img
                     className="w-full h-auto rounded-2xl object-cover"
-                    src={picOne.src}
+                    src={content.src}
                     alt=""
                 />
             </div>
             <div className="w-full md:w-1/2">
-                <h1 className="mb-4 text-5xl font-bold">Title of this section</h1>
-                <p className="text-lg font-normal text-body lg:text-xl">This is the paragraph for this section. This is also just random filler text to see how things look. here are some extra words htat make no sence!</p>
+                <h1 className="mb-4 text-5xl font-bold">{content.title}</h1>
+                <p className="text-lg font-normal text-body lg:text-xl">{content.text}</p>
+
                 <div className="flex items-center w-full my-8">
                     <div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
                     <div className="px-3">
@@ -20,7 +31,7 @@ export default function PicWithText(){
                     </div>
                     <div className="flex-1 h-px bg-neutral-300 dark:bg-neutral-700" />
                 </div>
-                <p>This is more text, however, this is actually a quote, yes, a quote indeed!</p>
+                <p className="text-gray-300 italic">This is more text, however, this is actually a quote, yes, a quote indeed!</p>
             </div>
         </div>
     )