added all content to projects page

src/lib/banner-title.svelte

@@ -1,20 +1,47 @@
 <script lang="ts">
     let {
-        bannerImg = "",
-        bannerImgAlt = "",
         title,
         subtitle = "",
+        banner = "",
     }: {
-        bannerImg?: string;
-        bannerImgAlt?: string;
         title: string;
         subtitle?: string;
+        banner?: string;
     } = $props();
 
 </script>
 
-<div>
-    <img src="{bannerImg}" alt="{bannerImgAlt}">
+<div class="container">
+    <img src="{banner}">
     <h1>{title}</h1>
     <h2>{subtitle}</h2>
-</div>
+</div>
+
+<style>
+    .container {
+        position: relative;
+        width: 100%;
+        height: 500px;
+    }
+
+    .container img {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 500px;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    .container h1 {
+        position: absolute;
+        width: 100%;
+        box-sizing: border-box;
+        height: fit-content;
+        padding: 12px 24px;
+        left: 0;
+        right: 0;
+        bottom: 0px;
+        background-image: linear-gradient(to right, #00000088, #000000AA);
+    }
+</style>