diff --git a/src/components/sections/Centered2x2GridSection.vue b/src/components/sections/Centered2x2GridSection.vue
index 2e91b46..95a201b 100644
--- a/src/components/sections/Centered2x2GridSection.vue
+++ b/src/components/sections/Centered2x2GridSection.vue
@@ -28,13 +28,13 @@ import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import type {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 
 interface FeaturePoint {
-  name: String,
-  description: String,
+  name: string,
+  description: string,
   icon: IconDefinition
 }
 
 const props = defineProps({
-  title: String | null,
+  title: { type: String, default: null, required: false },
   subtitle: String,
   description: String,
   imageUrl: String,
diff --git a/src/components/sections/HeroSection.vue b/src/components/sections/HeroSection.vue
index aca2361..053b3eb 100644
--- a/src/components/sections/HeroSection.vue
+++ b/src/components/sections/HeroSection.vue
@@ -32,8 +32,8 @@
 
 <script setup lang="ts">
 const props = defineProps({
-  title: String | null,
-  description: String
+  title: { type: String, default: null, required: false },
+  description: { type: String, required: true }
 })
 </script>
 
diff --git a/src/components/sections/ImageLeftFeatureSection.vue b/src/components/sections/ImageLeftFeatureSection.vue
index 074c10d..c305723 100644
--- a/src/components/sections/ImageLeftFeatureSection.vue
+++ b/src/components/sections/ImageLeftFeatureSection.vue
@@ -39,13 +39,13 @@ import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import type {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 
 interface FeaturePoint {
-  name: String,
-  description: String,
+  name: string,
+  description: string,
   icon: IconDefinition
 }
 
 const props = defineProps({
-  title: String | null,
+  title: { type: String, default: null, required: false },
   subtitle: String,
   description: String,
   imageUrl: String,
diff --git a/src/components/sections/ImageRightFeatureSection.vue b/src/components/sections/ImageRightFeatureSection.vue
index 24c830f..df98dea 100644
--- a/src/components/sections/ImageRightFeatureSection.vue
+++ b/src/components/sections/ImageRightFeatureSection.vue
@@ -37,13 +37,13 @@ import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import type {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 
 interface FeaturePoint {
-  name: String,
-  description: String,
+  name: string,
+  description: string,
   icon: IconDefinition
 }
 
 const props = defineProps({
-  title: String | null,
+  title: { type: String, default: null, required: false },
   subtitle: String,
   description: String,
   imageUrl: String,
diff --git a/src/components/sections/SquareImageFeatureSection.vue b/src/components/sections/SquareImageFeatureSection.vue
index dcae76d..0c9a89b 100644
--- a/src/components/sections/SquareImageFeatureSection.vue
+++ b/src/components/sections/SquareImageFeatureSection.vue
@@ -14,7 +14,7 @@
               {{ description }}
             </p>
             <ul v-if="features != null" class="text-gray-600 grid grid-cols-1 gap-y-3 gap-x-4 mt-10 md:gap-x-8 md:grid-cols-2">
-              <li v-for="feature in features" :key="feature" class="flex gap-[0.75rem]">
+              <li v-for="feature in features" :key="feature.name" class="flex gap-[0.75rem]">
                 <FontAwesomeIcon :icon="feature.icon" class="flex-none w-[1.25rem] h-[1.75rem]"></FontAwesomeIcon>
                 {{ feature.name }}
               </li>
@@ -31,7 +31,7 @@ import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import type {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 
 interface FeaturePoint {
-  name: String,
+  name: string,
   icon: IconDefinition
 }
 
diff --git a/src/components/sections/TeamSection.vue b/src/components/sections/TeamSection.vue
index 7212cfd..5449e6a 100644
--- a/src/components/sections/TeamSection.vue
+++ b/src/components/sections/TeamSection.vue
@@ -18,7 +18,7 @@
                 <p class="text-indigo-600">{{ person.role }}</p>
               </div>
               <ul role="list" class="flex space-x-5">
-                <li v-for="connection in person.connections" :key="connection">
+                <li v-for="connection in person.connections" :key="connection.to">
                   <a :href="connection.to" class="text-gray-400 hover:text-gray-500">
                     <span class="sr-only">{{ connection.name }}</span>
                     <FontAwesomeIcon class="w-5 h-5" :icon="connection.icon"></FontAwesomeIcon>
@@ -38,16 +38,16 @@ import {FontAwesomeIcon} from "@fortawesome/vue-fontawesome";
 import type {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 
 interface PersonInformation {
-  name: String,
-  imageUrl: String,
-  role: String,
+  name: string,
+  imageUrl: string,
+  role: string,
   connections: Connection[]
 }
 
 interface Connection {
-  name: String,
+  name: string,
   icon: IconDefinition,
-  to: String,
+  to: string,
 }
 
 const props = defineProps({